From 5e0dfdac54e509a97483af1f78af09451c03bfbb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 22 Jan 2019 11:04:37 -0800
Subject: [PATCH 001/814] Initial commit

---
 .babelrc                             |     7 +
 .flowconfig                          |    31 +
 .gitignore                           |     9 +
 README.md                            |     0
 flow.js                              |    11 +
 package.json                         |    80 +
 shells/browser/chrome/manifest.json  |     6 +
 shells/browser/webpack.backend.js    |    36 +
 shells/browser/webpack.config.js     |    63 +
 shells/createConfig.js               |   150 +
 shells/dev/app/App.css               |     6 +
 shells/dev/app/ElementTypes/index.js |    54 +
 shells/dev/app/ToDoList/List.css     |    22 +
 shells/dev/app/ToDoList/List.js      |    94 +
 shells/dev/app/ToDoList/ListItem.css |    23 +
 shells/dev/app/ToDoList/ListItem.js  |    36 +
 shells/dev/app/ToDoList/index.js     |     5 +
 shells/dev/app/app.js                |    15 +
 shells/dev/app/index.js              |    11 +
 shells/dev/index.html                |    44 +
 shells/dev/src/backend.js            |    21 +
 shells/dev/src/devtools.js           |    52 +
 shells/dev/webpack.config.js         |    48 +
 src/backend/agent.js                 |   159 +
 src/backend/index.js                 |    51 +
 src/backend/renderer.js              |   718 ++
 src/backend/types.js                 |    77 +
 src/backend/utils.js                 |    47 +
 src/bridge.js                        |    91 +
 src/devtools/index.js                |    14 +
 src/devtools/store.js                |    78 +
 src/devtools/types.js                |    38 +
 src/devtools/views/App.css           |    49 +
 src/devtools/views/App.js            |    25 +
 src/devtools/views/Element.css       |    46 +
 src/devtools/views/Element.js        |    43 +
 src/devtools/views/Tree.css          |    11 +
 src/devtools/views/Tree.js           |    34 +
 src/devtools/views/contexts.js       |     8 +
 src/devtools/views/hooks.js          |    30 +
 src/hook.js                          |   182 +
 src/types.js                         |    12 +
 yarn.lock                            | 10044 +++++++++++++++++++++++++
 43 files changed, 12581 insertions(+)
 create mode 100644 .babelrc
 create mode 100644 .flowconfig
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 flow.js
 create mode 100644 package.json
 create mode 100644 shells/browser/chrome/manifest.json
 create mode 100644 shells/browser/webpack.backend.js
 create mode 100644 shells/browser/webpack.config.js
 create mode 100644 shells/createConfig.js
 create mode 100644 shells/dev/app/App.css
 create mode 100644 shells/dev/app/ElementTypes/index.js
 create mode 100644 shells/dev/app/ToDoList/List.css
 create mode 100644 shells/dev/app/ToDoList/List.js
 create mode 100644 shells/dev/app/ToDoList/ListItem.css
 create mode 100644 shells/dev/app/ToDoList/ListItem.js
 create mode 100644 shells/dev/app/ToDoList/index.js
 create mode 100644 shells/dev/app/app.js
 create mode 100644 shells/dev/app/index.js
 create mode 100644 shells/dev/index.html
 create mode 100644 shells/dev/src/backend.js
 create mode 100644 shells/dev/src/devtools.js
 create mode 100644 shells/dev/webpack.config.js
 create mode 100644 src/backend/agent.js
 create mode 100644 src/backend/index.js
 create mode 100644 src/backend/renderer.js
 create mode 100644 src/backend/types.js
 create mode 100644 src/backend/utils.js
 create mode 100644 src/bridge.js
 create mode 100644 src/devtools/index.js
 create mode 100644 src/devtools/store.js
 create mode 100644 src/devtools/types.js
 create mode 100644 src/devtools/views/App.css
 create mode 100644 src/devtools/views/App.js
 create mode 100644 src/devtools/views/Element.css
 create mode 100644 src/devtools/views/Element.js
 create mode 100644 src/devtools/views/Tree.css
 create mode 100644 src/devtools/views/Tree.js
 create mode 100644 src/devtools/views/contexts.js
 create mode 100644 src/devtools/views/hooks.js
 create mode 100644 src/hook.js
 create mode 100644 src/types.js
 create mode 100644 yarn.lock

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000000..77ab280032c4
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["@babel/plugin-transform-flow-strip-types"],
+    ["@babel/plugin-proposal-class-properties", { "loose": false }]
+  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
+}
diff --git a/.flowconfig b/.flowconfig
new file mode 100644
index 000000000000..784a04999791
--- /dev/null
+++ b/.flowconfig
@@ -0,0 +1,31 @@
+[ignore]
+.*/react/node_modules/.*
+.*/electron/node_modules/.*
+.*node_modules/archiver-utils
+.*node_modules/babel.*
+.*node_modules/browserify-zlib/.*
+.*node_modules/classnames.*
+.*node_modules/gh-pages/.*
+.*node_modules/invariant/.*
+.*node_modules/json-loader.*
+.*node_modules/json5.*
+.*node_modules/node-libs-browser.*
+.*node_modules/webpack.*
+.*node_modules/fbjs/flow.*
+.*node_modules/web-ext.*
+
+[include]
+
+[libs]
+./flow.js
+
+[lints]
+
+[options]
+esproposal.class_instance_fields=enable
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
+suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
+module.name_mapper='^src' ->'<PROJECT_ROOT>/src'
+
+[strict]
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000000..119bd0d5a6cf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+/shells/chrome.crx
+/shells/chrome.pem
+/shells/firefox/*.xpi
+build
+node_modules
+npm-debug.log
+yarn-error.log
+.DS_Store
+yarn-error.log
diff --git a/README.md b/README.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/flow.js b/flow.js
new file mode 100644
index 000000000000..ee27f03d085e
--- /dev/null
+++ b/flow.js
@@ -0,0 +1,11 @@
+// @flow
+
+declare module 'events' {
+  declare class EventEmitter {
+    addListener: (type: string, fn: Function) => void;
+    emit: (type: string, data: any) => void;
+    removeListener: (type: string, fn: Function) => void;
+  }
+
+  declare export default typeof EventEmitter;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000000..66a2e68facac
--- /dev/null
+++ b/package.json
@@ -0,0 +1,80 @@
+{
+  "dependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "adm-zip": "^0.4.7",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "6",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "child-process-promise": "^2.2.1",
+    "classnames": "2.2.1",
+    "cli-spinners": "^1.0.0",
+    "clipboard-js": "^0.3.3",
+    "css-loader": "^1.0.1",
+    "error-stack-parser": "^2.0.2",
+    "es6-symbol": "3.0.2",
+    "eslint": "2.10.2",
+    "eslint-plugin-react": "5.1.1",
+    "events": "^3.0.0",
+    "fbjs": "0.5.1",
+    "fbjs-scripts": "0.7.0",
+    "flow-bin": "^0.91.0",
+    "fs-extra": "^3.0.1",
+    "gh-pages": "^1.0.0",
+    "immutable": "3.7.6",
+    "jest": "22.1.4",
+    "log-update": "^2.0.0",
+    "lru-cache": "^4.1.3",
+    "memoize-one": "^3.1.1",
+    "node-libs-browser": "0.5.3",
+    "nullthrows": "^1.0.0",
+    "object-assign": "4.0.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.8.0-alpha.1",
+    "react-color": "^2.11.7",
+    "react-dom": "^16.8.0-alpha.1",
+    "react-portal": "^3.1.0",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.1.1",
+    "semver": "^5.5.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2"
+  },
+  "license": "BSD-3-Clause",
+  "repository": "facebook/react-devtools",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
+    "build:extension:chrome": "node ./shells/chrome/build",
+    "build:extension:firefox": "node ./shells/firefox/build",
+    "build:standalone": "cd packages/react-devtools-core && yarn run build",
+    "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
+    "lint": "eslint .",
+    "start": "cd ./shells/dev && open ./index.html && webpack --config webpack.config.js --watch",
+    "test": "jest",
+    "test:chrome": "node ./shells/chrome/test",
+    "test:firefox": "node ./shells/firefox/test",
+    "test:standalone": "cd packages/react-devtools && yarn start",
+    "typecheck": "flow check"
+  },
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "<rootDir>/shells"
+    ]
+  },
+  "devDependencies": {
+    "chrome-launch": "^1.1.4",
+    "firefox-profile": "^1.0.2",
+    "lerna": "^2.8.0",
+    "web-ext": "^1.10.1"
+  }
+}
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
new file mode 100644
index 000000000000..9d6543254f80
--- /dev/null
+++ b/shells/browser/chrome/manifest.json
@@ -0,0 +1,6 @@
+{
+  "name": "React v16 DevTools",
+  "version": "0.1",
+  "description": "DevTools for React version 16.0+",
+  "manifest_version": 2
+}
diff --git a/shells/browser/webpack.backend.js b/shells/browser/webpack.backend.js
new file mode 100644
index 000000000000..b313c907af1a
--- /dev/null
+++ b/shells/browser/webpack.backend.js
@@ -0,0 +1,36 @@
+/**
+ * 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.
+ *
+ */
+'use strict';
+
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
+  },
+};
diff --git a/shells/browser/webpack.config.js b/shells/browser/webpack.config.js
new file mode 100644
index 000000000000..eebe7b449542
--- /dev/null
+++ b/shells/browser/webpack.config.js
@@ -0,0 +1,63 @@
+/**
+ * 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.
+ *
+ */
+'use strict';
+
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    background: './src/background.js',
+    contentScript: './src/contentScript.js',
+    inject: './src/GlobalHook.js',
+    main: './src/main.js',
+    panel: './src/panel.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+  plugins: __DEV__ ? [] : [
+    // Ensure we get production React
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/shells/createConfig.js b/shells/createConfig.js
new file mode 100644
index 000000000000..49ab0ca824a0
--- /dev/null
+++ b/shells/createConfig.js
@@ -0,0 +1,150 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const { VueLoaderPlugin } = require('vue-loader')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
+  const bubleOptions = {
+    target,
+    objectAssign: 'Object.assign',
+    transforms: {
+      forOf: false,
+      modules: false
+    }
+  }
+
+  const baseConfig = {
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    resolve: {
+      alias: {
+        src: path.resolve(__dirname, '../src'),
+        views: path.resolve(__dirname, '../src/devtools/views'),
+        components: path.resolve(__dirname, '../src/devtools/components'),
+        filters: path.resolve(__dirname, '../src/devtools/filters')
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: 'buble-loader',
+          exclude: /node_modules|vue\/dist|vuex\/dist/,
+          options: bubleOptions
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+          options: {
+            compilerOptions: {
+              preserveWhitespace: false
+            },
+            transpileOptions: bubleOptions
+          }
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            'postcss-loader'
+          ]
+        },
+        {
+          test: /\.styl(us)?$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            'postcss-loader',
+            'stylus-loader',
+            {
+              loader: 'style-resources-loader',
+              options: {
+                patterns: [
+                  path.resolve(__dirname, '../src/devtools/style/imports.styl')
+                ]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(png|woff2)$/,
+          loader: 'url-loader?limit=0'
+        }
+      ]
+    },
+    performance: {
+      hints: false
+    },
+    plugins: [
+      new VueLoaderPlugin(),
+      ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]),
+      new webpack.DefinePlugin({
+        'process.env.RELEASE_CHANNEL': JSON.stringify(process.env.RELEASE_CHANNEL || 'stable')
+      })
+    ],
+    devServer: {
+      port: process.env.PORT
+    },
+    stats: {
+      colors: true
+    }
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    const UglifyPlugin = require('uglifyjs-webpack-plugin')
+    baseConfig.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': '"production"'
+      })
+    )
+    baseConfig.optimization = {
+      minimizer: [
+        new UglifyPlugin({
+          exclude: /backend/,
+          uglifyOptions: {
+            compress: {
+              // turn off flags with small gains to speed up minification
+              arrows: false,
+              collapse_vars: false, // 0.3kb
+              comparisons: false,
+              computed_props: false,
+              hoist_funs: false,
+              hoist_props: false,
+              hoist_vars: false,
+              inline: false,
+              loops: false,
+              negate_iife: false,
+              properties: false,
+              reduce_funcs: false,
+              reduce_vars: false,
+              switches: false,
+              toplevel: false,
+              typeofs: false,
+
+              // a few flags with noticable gains/speed ratio
+              // numbers based on out of the box vendor bundle
+              booleans: true, // 0.7kb
+              if_return: true, // 0.4kb
+              sequences: true, // 0.7kb
+              unused: true, // 2.3kb
+
+              // required features to drop conditional branches
+              conditionals: true,
+              dead_code: true,
+              evaluate: true
+            },
+            mangle: {
+              safari10: true
+            }
+          },
+          sourceMap: false,
+          cache: true,
+          parallel: true
+        })
+      ]
+    }
+  }
+
+  return merge(baseConfig, config)
+}
\ No newline at end of file
diff --git a/shells/dev/app/App.css b/shells/dev/app/App.css
new file mode 100644
index 000000000000..dd3d888948fa
--- /dev/null
+++ b/shells/dev/app/App.css
@@ -0,0 +1,6 @@
+.App {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
\ No newline at end of file
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
new file mode 100644
index 000000000000..e9de79cc72d5
--- /dev/null
+++ b/shells/dev/app/ElementTypes/index.js
@@ -0,0 +1,54 @@
+// @flow
+
+import React, {
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  Component,
+  ConcurrentMode,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+} from 'react';
+
+class ClassComponent extends Component {
+  render() {
+    return null;
+  }
+}
+
+function FunctionComponent() {
+  return null;
+}
+
+const MemoFunctionComponent = memo(FunctionComponent);
+
+const ForwardRefComponent = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+
+const LazyComponent = lazy(() => Promise.resolve({
+  default: FunctionComponent,
+}));
+
+export default function ElementTypes() {
+  return (
+    <Profiler id="test" onRender={() => {}}>
+      <Fragment>
+        <StrictMode>
+          <ConcurrentMode>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ClassComponent />
+              <FunctionComponent />
+              <MemoFunctionComponent />
+              <ForwardRefComponent />
+              <LazyComponent />
+            </Suspense>
+          </ConcurrentMode>
+        </StrictMode>
+      </Fragment>
+    </Profiler>
+  )
+}
\ No newline at end of file
diff --git a/shells/dev/app/ToDoList/List.css b/shells/dev/app/ToDoList/List.css
new file mode 100644
index 000000000000..febdc684fad8
--- /dev/null
+++ b/shells/dev/app/ToDoList/List.css
@@ -0,0 +1,22 @@
+.Header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.Input {
+  font-size: 1rem;
+  padding: 0.25rem;
+}
+
+.IconButton {
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.List {
+  margin: 0.5rem 0 0;
+  padding: 0;
+}
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
new file mode 100644
index 000000000000..6111966c9f61
--- /dev/null
+++ b/shells/dev/app/ToDoList/List.js
@@ -0,0 +1,94 @@
+// @flow
+
+import React, { Fragment, useCallback, useState } from 'react';
+import ListItem from './ListItem';
+import styles from './List.css';
+
+export type Item = {|
+  id: number,
+  isComplete: boolean,
+  text: string,
+|};
+
+type Props = {||};
+
+export default function List({}: Props) {
+  const [newItemText, setNewItemText] = useState<string>('');
+  const [items, setItems] = useState<Array<Item>>([
+    {id: 1, isComplete: true, text: "First"},
+    {id: 2, isComplete: true, text: "Second"},
+    {id: 3, isComplete: false, text: "Third"},
+  ]);
+  const [uid, setUID] = useState<number>(4);
+
+  const handleClick = useCallback(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText,
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText]);
+
+  const handleKeyPress = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+
+  const handleChange = useCallback(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+
+  const removeItem = useCallback(itemToRemove => {
+    setItems(
+      items.filter(item => item !== itemToRemove)
+    );
+  }, [items]);
+
+  const toggleItem = useCallback(itemToToggle => {
+    const index = items.indexOf(itemToToggle);
+
+    setItems(
+      items
+        .slice(0, index)
+        .concat({
+          ...itemToToggle,
+          isComplete: !itemToToggle.isComplete,
+        })
+        .concat(items.slice(index + 1))
+    );
+  }, [items]);
+
+  return (
+    <Fragment>
+      <div className={styles.Header}>List</div>
+      <input
+        type="text"
+        placeholder="New list item..."
+        className={styles.Input}
+        value={newItemText}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <button
+        className={styles.IconButton}
+        disabled={newItemText === ''}
+        onClick={handleClick}
+      >➕</button>
+      <ul className={styles.List}>
+        {items.map(item => (
+          <ListItem
+            key={item.id}
+            item={item}
+            removeItem={removeItem}
+            toggleItem={toggleItem}
+          />
+        ))}
+      </ul>
+    </Fragment>
+  );
+}
\ No newline at end of file
diff --git a/shells/dev/app/ToDoList/ListItem.css b/shells/dev/app/ToDoList/ListItem.css
new file mode 100644
index 000000000000..77c666251cc2
--- /dev/null
+++ b/shells/dev/app/ToDoList/ListItem.css
@@ -0,0 +1,23 @@
+.ListItem {
+  list-style-type: none;
+}
+
+.Input {
+  cursor: pointer;
+}
+
+.Label {
+  cursor: pointer;
+  padding: 0.25rem;
+  color: #555;
+}
+.Label:hover {
+  color: #000;
+}
+
+.IconButton {
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
diff --git a/shells/dev/app/ToDoList/ListItem.js b/shells/dev/app/ToDoList/ListItem.js
new file mode 100644
index 000000000000..f0bf35f308af
--- /dev/null
+++ b/shells/dev/app/ToDoList/ListItem.js
@@ -0,0 +1,36 @@
+// @flow
+
+import React, { Fragment, useCallback, useState } from 'react';
+import styles from './ListItem.css';
+
+import type {Item} from './List';
+
+type Props = {|
+  item: Item,
+  removeItem: (item: Item) => void,
+  toggleItem: (item: Item) => void,
+|};
+
+export default function ListItem({ item, removeItem, toggleItem }: Props) {
+  const handleDelete = useCallback(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+
+  const handleToggle = useCallback(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+
+  return (
+    <li className={styles.ListItem}>
+      <button className={styles.IconButton} onClick={handleDelete}>🗑</button>
+      <label className={styles.Label}>
+        <input
+          className={styles.Input}
+          checked={item.isComplete}
+          onChange={handleToggle}
+          type="checkbox"
+        /> {item.text}
+      </label>
+    </li>
+  )
+}
\ No newline at end of file
diff --git a/shells/dev/app/ToDoList/index.js b/shells/dev/app/ToDoList/index.js
new file mode 100644
index 000000000000..336fa1839924
--- /dev/null
+++ b/shells/dev/app/ToDoList/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+import List from './List';
+
+export default List;
\ No newline at end of file
diff --git a/shells/dev/app/app.js b/shells/dev/app/app.js
new file mode 100644
index 000000000000..9f52a48047db
--- /dev/null
+++ b/shells/dev/app/app.js
@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react';
+import List from './ToDoList';
+import ElementTypes from './ElementTypes';
+import styles from './App.css';
+
+export default function App() {
+ return (
+    <div className={styles.App}>
+      <List />
+      <ElementTypes />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
new file mode 100644
index 000000000000..e1478f17a65a
--- /dev/null
+++ b/shells/dev/app/index.js
@@ -0,0 +1,11 @@
+/** @flow */
+
+import { createElement } from 'react';
+import { render } from 'react-dom';
+import App from './App';
+
+const container = document.createElement('div');
+
+render(createElement(App), container);
+
+((document.body: any): HTMLBodyElement).appendChild(container);
\ No newline at end of file
diff --git a/shells/dev/index.html b/shells/dev/index.html
new file mode 100644
index 000000000000..d58208184098
--- /dev/null
+++ b/shells/dev/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      #target {
+        flex: 1;
+        border: none;
+        border-bottom: 1px solid #ccc;
+      }
+      #devtools {
+        display: flex;
+        height: 400px;
+        max-height: 50%;
+        overflow: hidden;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- React test app (shells/dev/app) is injected here -->
+    <!-- DevTools backend (shells/dev/src) is injected here -->
+    <!-- global "hook" is defined on the iframe's contentWindow -->
+    <iframe id="target"></iframe>
+
+    <!-- DevTools frontend UI (shells/dev/src) renders here -->
+    <div id="devtools"></div>
+
+    <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
+    <script src="build/devtools.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
new file mode 100644
index 000000000000..21d3abfb45ea
--- /dev/null
+++ b/shells/dev/src/backend.js
@@ -0,0 +1,21 @@
+/** @flow */
+
+import Agent from 'src/backend/agent';
+import Bridge from 'src/bridge'
+import { initBackend } from 'src/backend';
+
+const bridge = new Bridge({
+  listen (fn) {
+    window.addEventListener('message', event => {
+      fn(event.data);
+    });
+  },
+  send (data) {
+    window.parent.postMessage(data, '*')
+  }
+})
+
+const agent = new Agent();
+agent.addBridge(bridge);
+
+initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent);
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
new file mode 100644
index 000000000000..fb0425896782
--- /dev/null
+++ b/shells/dev/src/devtools.js
@@ -0,0 +1,52 @@
+/** @flow */
+
+import { createElement } from 'react';
+import {render } from 'react-dom';
+import Bridge from 'src/bridge';
+import { installHook } from 'src/hook';
+import { initDevTools } from 'src/devtools';
+import App from 'src/devtools/views/App';
+
+const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
+
+const {contentDocument, contentWindow} = iframe;
+
+installHook(contentWindow);
+
+initDevTools({
+  connect(cb) {
+    inject('./build/backend.js', () => {
+      const bridge = new Bridge({
+        listen(fn) {
+          contentWindow.parent.addEventListener('message', ({ data }) => {
+            fn(data)
+          });
+        },
+        send(data) {
+          contentWindow.postMessage(data, '*');
+        }
+      });
+
+      cb(bridge);
+
+      render(
+        createElement(App, {bridge}),
+        ((document.getElementById('devtools'): any): HTMLElement),
+      );
+    });
+  },
+
+  onReload(reloadFn) {
+    iframe.onload = reloadFn;
+  }
+});
+
+inject('./build/app.js');
+
+function inject(sourcePath, callback) {
+  const script = contentDocument.createElement('script')
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
\ No newline at end of file
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
new file mode 100644
index 000000000000..44367014f8cc
--- /dev/null
+++ b/shells/dev/webpack.config.js
@@ -0,0 +1,48 @@
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
+// TODO Share Webpack configs like alias
+
+module.exports = {
+  mode: 'development',
+  devtool: false,
+  entry: {
+    app: './app/index.js',
+    backend: './src/backend.js',
+    devtools: './src/devtools.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/backend/agent.js b/src/backend/agent.js
new file mode 100644
index 000000000000..8bac8b99c418
--- /dev/null
+++ b/src/backend/agent.js
@@ -0,0 +1,159 @@
+// @flow
+
+import nullthrows from 'nullthrows';
+import EventEmitter from 'events';
+import {guid} from './utils';
+import {ElementTypeOtherOrUnknown} from 'src/devtools/types';
+
+import type {Fiber, RendererData, RendererID, RendererInterface} from './types';
+import type {Bridge} from '../types';
+import type {Element} from 'src/devtools/types';
+
+export default class Agent extends EventEmitter {
+  fiberToID: WeakMap<Fiber, string> = new WeakMap();
+  idToElement: Map<string, Element> = new Map();
+  idToFiber: Map<string, Fiber> = new Map();
+  idToRendererData: Map<string, RendererData> = new Map();
+  idToRendererID: Map<string, RendererID> = new Map();
+  rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
+  roots: Set<RendererID> = new Set();
+
+  addBridge(bridge: Bridge) {
+    // TODO Listen to bridge for things like selection.
+    // bridge.on('...'), this...);
+
+    this.addListener('root', id => bridge.send('root', id));
+    this.addListener('mount', data => bridge.send('mount', data));
+    this.addListener('update', data => bridge.send('update', data));
+    this.addListener('unmount', data => bridge.send('unmount', data));
+    // TODO Add other methods for e.g. profiling.
+  }
+
+  setRendererInterface(rendererID: RendererID, rendererInterface: RendererInterface) {
+    this.rendererInterfaces[rendererID] = rendererInterface;
+  }
+
+  _getId(fiber: Fiber): string {
+    if (typeof fiber !== 'object' || !fiber) {
+      return fiber;
+    }
+    if (!this.fiberToID.has(fiber)) {
+      this.fiberToID.set(fiber, guid());
+      this.idToFiber.set(
+        nullthrows(this.fiberToID.get(fiber)),
+        fiber
+      );
+    }
+    return nullthrows(this.fiberToID.get(fiber));
+  }
+
+  _crawl(parent: Element, id: string): void {
+    const data: RendererData = ((this.idToRendererData.get(id): any): RendererData);
+    if (data.type === ElementTypeOtherOrUnknown) {
+      data.children.forEach(childFiber => {
+        if (childFiber !== null) {
+          this._crawl(parent, this._getId(childFiber))
+        }
+      });
+    } else {
+      parent.children.push(id);
+
+      this._createOrUpdateElement(id, data);
+    }
+  }
+
+  _createOrUpdateElement(id: string, data: RendererData): void {
+    const prevElement: ?Element = this.idToElement.get(id);
+    const nextElement: Element = {
+      id,
+      key: data.key,
+      displayName: data.displayName,
+      children: [],
+      type: data.type,
+    };
+
+    this.idToElement.set(id, nextElement);
+
+    data.children.forEach(childFiber => {
+      if (childFiber !== null) {
+        this._crawl(nextElement, this._getId(childFiber))
+      }
+    });
+
+    if (prevElement == null) {
+console.log('%cAgent%c emit("mount")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)
+      this.emit('mount', nextElement);
+    } else if (!areElementsEqual(prevElement, nextElement)) {
+console.log('%cAgent%c emit("update")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)
+      this.emit('update', nextElement);
+    }
+  }
+
+  onHookMount = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
+    const id = this._getId(fiber);
+
+    this.idToRendererData.set(id, data);
+    this.idToRendererID.set(id, renderer);
+  };
+
+  onHookRootCommitted = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
+    const id = this._getId(fiber);
+console.log('%cAgent%c onHookRootCommitted()', 'color: blue; font-weight: bold;', 'font-weight: bold;', id);
+
+    this._createOrUpdateElement(id, data);
+
+    if (!this.roots.has(id)) {
+      this.roots.add(id);
+
+      this.emit('root', id);
+    }
+  };
+
+  onHookUnmount = ({fiber}: {fiber: Fiber}) => {
+    const id = this._getId(fiber);
+
+    if (this.roots.has(id)) {
+      this.roots.delete(id);
+      this.emit('rootUnmounted', id);
+    }
+
+    if (this.idToElement.has(id)) {
+      this.idToElement.delete(id);
+console.log('%cAgent%c emit("unmount")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id)
+      this.emit('unmount', id);
+    }
+
+    this.fiberToID.delete(fiber);
+    this.idToRendererData.delete(id);
+    this.idToRendererID.delete(id);
+  };
+
+  onHookUpdate = ({data, fiber}: {data: RendererData, fiber: Fiber}) => {
+    const id = this._getId(fiber);
+
+    this.idToRendererData.set(id, data);
+  };
+}
+
+function areElementsEqual(prevElement: ?Element, nextElement: ?Element): boolean {
+  if (!prevElement  || !nextElement) {
+    return false;
+  }
+
+  if (
+    prevElement.key !== nextElement.key ||
+    prevElement.displayName !== nextElement.displayName ||
+    prevElement.children.length !== nextElement.children.length ||
+    prevElement.type !== nextElement.type
+  ) { 
+    return false;
+  }
+
+  for (let i = 0; i < prevElement.children.length; i++) {
+    if  (prevElement.children[i] !== nextElement.children[i])  {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/src/backend/index.js b/src/backend/index.js
new file mode 100644
index 000000000000..9295c4aae212
--- /dev/null
+++ b/src/backend/index.js
@@ -0,0 +1,51 @@
+// @flow
+
+import type {Hook} from './types';
+import type {Bridge} from '../types';
+import Agent from './agent';
+
+import { attach } from './renderer';
+
+export function initBackend(hook: Hook, agent: Agent): void {
+  const subs = [
+    hook.sub('renderer-attached', ({id, renderer, rendererInterface}) => {
+      agent.setRendererInterface(id, rendererInterface);
+      rendererInterface.walkTree();
+    }),
+
+    hook.sub('rootCommitted', agent.onHookRootCommitted),
+    hook.sub('mount', agent.onHookMount),
+    hook.sub('update', agent.onHookUpdate),
+    hook.sub('unmount', agent.onHookUnmount),
+
+    // TODO Add additional subscriptions required for profiling mode
+  ];
+
+  const attachRenderer = (id, renderer) => {
+    const rendererInterface = attach(hook, id, renderer);
+    hook.rendererInterfaces[id] = rendererInterface;
+    hook.emit('renderer-attached', {
+      id,
+      renderer,
+      rendererInterface
+    });
+  };
+
+  // Connect renderers that have already injected themselves.
+  for (let id in hook.renderers) {
+    const renderer = hook.renderers[id];
+    attachRenderer(id, renderer);
+  }
+
+  // Connect any new renderers that injected themselves.
+  hook.on('renderer', ({id, renderer}) => {
+    attachRenderer(id, renderer);
+  });
+
+  hook.emit('react-devtools', agent);
+  hook.reactDevtoolsAgent = agent;
+  agent.addListener('shutdown', () => {
+    subs.forEach(fn => fn());
+    hook.reactDevtoolsAgent = null;
+  });
+};
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
new file mode 100644
index 000000000000..7ea4c6d71521
--- /dev/null
+++ b/src/backend/renderer.js
@@ -0,0 +1,718 @@
+// @flow
+
+import {gte} from 'semver';
+import {
+  ElementTypeClassOrFunction,
+  ElementTypeContext,
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeSuspense,
+} from 'src/devtools/types';
+import { getDisplayName } from './utils';
+
+import type {Fiber, Hook, ReactRenderer, RendererData, RendererInterface} from './types';
+
+// TODO: If we're profiling, process update
+// TODO: Throttle process update to app tree
+
+// Taken from ReactElement.
+function resolveDefaultProps(Component: any, baseProps: Object): Object {
+  if (Component && Component.defaultProps) {
+    // Resolve default props. Taken from ReactElement
+    const props = Object.assign({}, baseProps);
+    const defaultProps = Component.defaultProps;
+    for (const propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+    return props;
+  }
+  return baseProps;
+}
+
+function getInternalReactConstants(version) {
+  const ReactSymbols = {
+    CONCURRENT_MODE_NUMBER: 0xeacf,
+    CONCURRENT_MODE_SYMBOL_STRING: 'Symbol(react.concurrent_mode)',
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING: 'Symbol(react.async_mode)',
+    CONTEXT_CONSUMER_NUMBER: 0xeace,
+    CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',
+    CONTEXT_PROVIDER_NUMBER: 0xeacd,
+    CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',
+    FORWARD_REF_NUMBER: 0xead0,
+    FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',
+    MEMO_NUMBER: 0xead3,
+    MEMO_SYMBOL_STRING: 'Symbol(react.memo)',
+    PROFILER_NUMBER: 0xead2,
+    PROFILER_SYMBOL_STRING: 'Symbol(react.profiler)',
+    STRICT_MODE_NUMBER: 0xeacc,
+    STRICT_MODE_SYMBOL_STRING: 'Symbol(react.strict_mode)',
+    SUSPENSE_NUMBER: 0xead1,
+    SUSPENSE_SYMBOL_STRING: 'Symbol(react.suspense)',
+    DEPRECATED_PLACEHOLDER_SYMBOL_STRING: 'Symbol(react.placeholder)',
+  };
+
+  const ReactTypeOfSideEffect = {
+    PerformedWork: 1,
+  };
+
+  let ReactTypeOfWork;
+
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  // **********************************************************
+  if (gte(version, '16.6.0-beta.0')) {
+    ReactTypeOfWork = {
+      ClassComponent: 1,
+      ContextConsumer: 9,
+      ContextProvider: 10,
+      CoroutineComponent: -1, // Removed
+      CoroutineHandlerPhase: -1, // Removed
+      ForwardRef: 11,
+      Fragment: 7,
+      FunctionComponent: 0,
+      HostComponent: 5,
+      HostPortal: 4,
+      HostRoot: 3,
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IndeterminateComponent: 2,
+      LazyComponent: 16,
+      MemoComponent: 14,
+      Mode: 8,
+      Profiler: 12,
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      YieldComponent: -1, // Removed
+    };
+  } else if (gte(version, '16.4.3-alpha')) {
+    ReactTypeOfWork = {
+      ClassComponent: 2,
+      ContextConsumer: 11,
+      ContextProvider: 12,
+      CoroutineComponent: -1, // Removed
+      CoroutineHandlerPhase: -1, // Removed
+      ForwardRef: 13,
+      Fragment: 9,
+      FunctionComponent: 0,
+      HostComponent: 7,
+      HostPortal: 6,
+      HostRoot: 5,
+      HostText: 8,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 4,
+      LazyComponent: -1, // Doesn't exist yet
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 10,
+      Profiler: 15,
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      YieldComponent: -1, // Removed
+    };
+  } else {
+    ReactTypeOfWork = {
+      ClassComponent: 2,
+      ContextConsumer: 12,
+      ContextProvider: 13,
+      CoroutineComponent: 7,
+      CoroutineHandlerPhase: 8,
+      ForwardRef: 14,
+      Fragment: 10,
+      FunctionComponent: 1,
+      HostComponent: 5,
+      HostPortal: 4,
+      HostRoot: 3,
+      HostText: 6,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 0,
+      LazyComponent: -1, // Doesn't exist yet
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 11,
+      Profiler: 15,
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      YieldComponent: 9,
+    };
+  }
+  // **********************************************************
+  // End of copied code.
+  // **********************************************************
+
+  return {
+    ReactTypeOfWork,
+    ReactSymbols,
+    ReactTypeOfSideEffect,
+  };
+}
+
+export function attach(
+  hook: Hook,
+  rendererID: string,
+  renderer: ReactRenderer,
+): RendererInterface {
+  const {overrideProps} = renderer;
+  const {ReactTypeOfWork, ReactSymbols, ReactTypeOfSideEffect} = getInternalReactConstants(renderer.version);
+  const {PerformedWork} = ReactTypeOfSideEffect;
+  const {
+    FunctionComponent,
+    ClassComponent,
+    ContextConsumer,
+    Fragment,
+    ForwardRef,
+    HostRoot,
+    HostPortal,
+    HostComponent,
+    HostText,
+    IncompleteClassComponent,
+    IndeterminateComponent,
+    MemoComponent,
+    SimpleMemoComponent,
+  } = ReactTypeOfWork;
+  const {
+    CONCURRENT_MODE_NUMBER,
+    CONCURRENT_MODE_SYMBOL_STRING,
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
+    CONTEXT_CONSUMER_NUMBER,
+    CONTEXT_CONSUMER_SYMBOL_STRING,
+    CONTEXT_PROVIDER_NUMBER,
+    CONTEXT_PROVIDER_SYMBOL_STRING,
+    PROFILER_NUMBER,
+    PROFILER_SYMBOL_STRING,
+    STRICT_MODE_NUMBER,
+    STRICT_MODE_SYMBOL_STRING,
+    SUSPENSE_NUMBER,
+    SUSPENSE_SYMBOL_STRING,
+    DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
+  } = ReactSymbols;
+
+  const primaryFibers: WeakSet<Fiber> = new WeakSet();
+
+  // TODO: we might want to change the data structure
+  // once we no longer suppport Stack versions of `getData`.
+  // TODO: Keep in sync with getElementType()
+  function getRendererDataFromFiber(fiber: Fiber): RendererData {
+    const { elementType, type, key, tag } = fiber;
+
+    // This is to support lazy components with a Promise as the type.
+    // see https://github.com/facebook/react/pull/13397
+    let resolvedType = type;
+    if (typeof type === 'object' && type !== null) {
+      if (typeof type.then === 'function') {
+        resolvedType = type._reactResult;
+      }
+    }
+
+    // Suspense has some special behavior when timed out that we have to handle.
+    // see https://github.com/facebook/react/pull/13823
+    let isTimedOutSuspense: boolean = false;
+
+    let rendererData: RendererData = ((null: any): RendererData);
+    let displayName: string = ((null: any): string);
+    let resolvedContext: any = null;
+
+    switch (tag) {
+      case ClassComponent:
+      case FunctionComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+        rendererData = {
+          children: [],
+          displayName: getDisplayName(resolvedType),
+          key,
+          type: ElementTypeClassOrFunction,
+        };
+        break;
+      case ForwardRef:
+        const functionName = getDisplayName(resolvedType.render, '');
+        displayName = resolvedType.displayName || (
+          functionName !== ''
+            ? `ForwardRef(${functionName})`
+            : 'ForwardRef'
+        );
+        rendererData = {
+          children: [],
+          displayName,
+          key,
+          type: ElementTypeForwardRef,
+        };
+        break;
+      case HostRoot:
+      case HostPortal:
+      case HostComponent:
+      case HostText:
+      case Fragment:
+        // Not displayed in Elements tree
+        rendererData = {
+          children: [],
+          displayName: null,
+          key,
+          type: ElementTypeOtherOrUnknown,
+        };
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        if (elementType.displayName) {
+          displayName = elementType.displayName;
+        } else {
+          displayName = type.displayName || type.name;
+          displayName = displayName ? `Memo(${displayName})` : 'Memo';
+        }
+        rendererData = {
+          children: [],
+          displayName,
+          key,
+          type: ElementTypeMemo,
+        };
+        break;
+      default:
+        const symbolOrNumber = typeof type === 'object' && type !== null
+          ? type.$$typeof
+          : type;
+
+        // $FlowFixMe facebook/flow/issues/2362
+        const switchValue = typeof symbolOrNumber === 'symbol'
+          ? symbolOrNumber.toString()
+          : symbolOrNumber;
+
+        switch (switchValue) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+            // Not displayed in Elements tree
+            rendererData = {
+              children: [],
+              displayName: null,
+              key,
+              type: ElementTypeOtherOrUnknown,
+            };
+            break;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+            // 16.3.0 exposed the context object as "context"
+            // PR #12501 changed it to "_context" for 16.3.1+
+            resolvedContext = fiber.type._context || fiber.type.context;
+            displayName  = `${resolvedContext.displayName || 'Context'}.Provider`;
+
+            rendererData = {
+              children: [],
+              displayName,
+              key,
+              type: ElementTypeContext,
+            };
+            break;
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+            // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+            // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+            resolvedContext = fiber.type._context || fiber.type;
+
+            // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
+            // If you change the name, figure out a more resilient way to detect it.
+            displayName = `${resolvedContext.displayName || 'Context'}.Consumer`;
+
+            rendererData = {
+              children: [],
+              displayName,
+              key,
+              type: ElementTypeContext,
+            };
+            break;
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            rendererData = {
+              children: [],
+              displayName: null,
+              key,
+              type: ElementTypeOtherOrUnknown,
+            };
+            break;
+          case SUSPENSE_NUMBER:
+          case SUSPENSE_SYMBOL_STRING:
+          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
+            // Suspense components only have a non-null memoizedState if they're timed-out.
+            isTimedOutSuspense = fiber.memoizedState !== null;
+
+            rendererData = {
+              children: [],
+              displayName: 'Suspense',
+              key,
+              type: ElementTypeSuspense,
+            };
+            break;
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            rendererData = {
+              children: [],
+              displayName: `Profiler(${fiber.memoizedProps.id})`,
+              key,
+              type: ElementTypeProfiler,
+            };
+            break;
+          default:
+            // Unknown element type.
+            // This may mean a new element type that has not yet been added to DevTools.
+            rendererData = {
+              children: [],
+              displayName: null,
+              key,
+              type: ElementTypeOtherOrUnknown,
+            };
+            break;
+        }
+        break;
+    }
+
+    const {children} = rendererData;
+    if (isTimedOutSuspense) {
+      // The behavior of timed-out Suspense trees is unique.
+      // Rather than unmount the timed out content (and possibly lose important state),
+      // React re-parents this content within a hidden Fragment while the fallback is showing.
+      // This behavior doesn't need to be observable in the DevTools though.
+      // It might even result in a bad user experience for e.g. node selection in the Elements panel.
+      // The easiest fix is to strip out the intermediate Fragment fibers,
+      // so the Elements panel and Profiler don't need to special case them.
+      const primaryChildFragment = fiber.child;
+      const primaryChild = primaryChildFragment.child;
+      const fallbackChildFragment = primaryChildFragment.sibling;
+      const fallbackChild = fallbackChildFragment.child;
+      children.push(primaryChild);
+      children.push(fallbackChild);
+    } else {
+      let child = fiber.child;
+      while (child) {
+        children.push(getPrimaryFiber(child));
+        child = child.sibling;
+      }
+    }
+
+    return rendererData;
+  }
+
+  // This is a slightly annoying indirection.
+  // It is currently necessary because DevTools wants to use unique objects as keys for instances.
+  // However fibers have two versions.
+  // We use this set to remember first encountered fiber for each conceptual instance.
+  function getPrimaryFiber(fiber: Fiber): Fiber {
+    if (primaryFibers.has(fiber)) {
+      return fiber;
+    }
+    const {alternate} = fiber;
+    if (alternate != null && primaryFibers.has(alternate)) {
+      return alternate;
+    }
+    primaryFibers.add(fiber);
+    return fiber;
+  }
+
+  function hasDataChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
+    switch (nextFiber.tag) {
+      case ClassComponent:
+      case FunctionComponent:
+      case ContextConsumer:
+      case MemoComponent:
+      case SimpleMemoComponent:
+        // For types that execute user code, we check PerformedWork effect.
+        // We don't reflect bailouts (either referential or sCU) in DevTools.
+        // eslint-disable-next-line no-bitwise
+        return (nextFiber.effectTag & PerformedWork) === PerformedWork;
+        // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
+        // so it won't get highlighted with React 16.3.0 to 16.3.2.
+      default:
+        // For host components and other types, we compare inputs
+        // to determine whether something is an update.
+        return (
+          prevFiber.memoizedProps !== nextFiber.memoizedProps ||
+          prevFiber.memoizedState !== nextFiber.memoizedState ||
+          prevFiber.ref !== nextFiber.ref
+        );
+    }
+  }
+
+  function haveProfilerTimesChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
+    return (
+      prevFiber.actualDuration !== undefined && // Short-circuit check for non-profiling builds
+      (
+        prevFiber.actualDuration !== nextFiber.actualDuration ||
+        prevFiber.actualStartTime !== nextFiber.actualStartTime ||
+        prevFiber.treeBaseDuration !== nextFiber.treeBaseDuration
+      )
+    );
+  }
+
+  let pendingEvents = [];
+
+  // TODO: Do we still need to send events like this?
+  function flushPendingEvents() {
+    const events = pendingEvents;
+    pendingEvents = [];
+    for (let i = 0; i < events.length; i++) {
+      const event = events[i];
+      hook.emit(event.type, event);
+    }
+  }
+
+  function enqueueMount(fiber) {
+    pendingEvents.push({
+      fiber: getPrimaryFiber(fiber),
+      data: getRendererDataFromFiber(fiber),
+      renderer: rendererID,
+      type: 'mount',
+    });
+
+    const isRoot = fiber.tag === HostRoot;
+    if (isRoot) {
+      pendingEvents.push({
+        fiber: getPrimaryFiber(fiber),
+        renderer: rendererID,
+        type: 'root',
+      });
+    }
+  }
+
+  function enqueueUpdateIfNecessary(fiber, hasChildOrderChanged) {
+    const data = getRendererDataFromFiber(fiber);
+
+    if (
+      !hasChildOrderChanged &&
+      !hasDataChanged(fiber.alternate, fiber)
+    ) {
+      // If only timing information has changed, we still need to update the nodes.
+      // But we can do it in a faster way since we know it's safe to skip the children.
+      // It's also important to avoid emitting an "update" signal for the node in this case,
+      // Since that would indicate to the Profiler that it was part of the "commit" when it wasn't.
+      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
+        pendingEvents.push({
+          fiber: getPrimaryFiber(fiber),
+          data,
+          renderer: rendererID,
+          type: 'updateProfileTimes',
+        });
+      }
+      return;
+    }
+    pendingEvents.push({
+      fiber: getPrimaryFiber(fiber),
+      data,
+      renderer: rendererID,
+      type: 'update',
+    });
+  }
+
+  function enqueueUnmount(fiber) {
+    const isRoot = fiber.tag === HostRoot;
+    const primaryFiber = getPrimaryFiber(fiber);
+    const event = {
+      fiber: primaryFiber,
+      renderer: rendererID,
+      type: 'unmount',
+    };
+    if (isRoot) {
+      pendingEvents.push(event);
+    } else {
+      // Non-root fibers are deleted during the commit phase.
+      // They are deleted in the child-first order. However
+      // DevTools currently expects deletions to be parent-first.
+      // This is why we unshift deletions rather than push them.
+      pendingEvents.unshift(event);
+    }
+    primaryFibers.delete(primaryFiber);
+  }
+
+  function markRootCommitted(fiber) {
+    pendingEvents.push({
+      fiber: getPrimaryFiber(fiber),
+      data: getRendererDataFromFiber(fiber),
+      renderer: rendererID,
+      type: 'rootCommitted',
+    });
+  }
+
+  function mountFiber(fiber) {
+    // Depth-first.
+    // Logs mounting of children first, parents later.
+    let node = fiber;
+    outer: while (true) {
+      if (node.child) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      enqueueMount(node);
+      if (node == fiber) {
+        return;
+      }
+      if (node.sibling) {
+        node.sibling.return = node.return;
+        node = node.sibling;
+        continue;
+      }
+      while (node.return) {
+        node = node.return;
+        enqueueMount(node);
+        if (node == fiber) {
+          return;
+        }
+        if (node.sibling) {
+          node.sibling.return = node.return;
+          node = node.sibling;
+          continue outer;
+        }
+      }
+      return;
+    }
+  }
+
+  function updateFiber(nextFiber, prevFiber) {
+    // Suspense components only have a non-null memoizedState if they're timed-out.
+    const isTimedOutSuspense = (
+      nextFiber.tag === ReactTypeOfWork.SuspenseComponent &&
+      nextFiber.memoizedState !== null
+    );
+
+    if (isTimedOutSuspense) {
+      // The behavior of timed-out Suspense trees is unique.
+      // Rather than unmount the timed out content (and possibly lose important state),
+      // React re-parents this content within a hidden Fragment while the fallback is showing.
+      // This behavior doesn't need to be observable in the DevTools though.
+      // It might even result in a bad user experience for e.g. node selection in the Elements panel.
+      // The easiest fix is to strip out the intermediate Fragment fibers,
+      // so the Elements panel and Profiler don't need to special case them.
+      const primaryChildFragment = nextFiber.child;
+      const fallbackChildFragment = primaryChildFragment.sibling;
+      const fallbackChild = fallbackChildFragment.child;
+      // The primary, hidden child is never actually updated in this case,
+      // so we can skip any updates to its tree.
+      // We only need to track updates to the Fallback UI for now.
+      if (fallbackChild.alternate) {
+        updateFiber(fallbackChild, fallbackChild.alternate);
+      } else {
+        mountFiber(fallbackChild);
+      }
+      enqueueUpdateIfNecessary(nextFiber, false);
+    } else {
+      let hasChildOrderChanged = false;
+      if (nextFiber.child !== prevFiber.child) {
+        // If the first child is different, we need to traverse them.
+        // Each next child will be either a new child (mount) or an alternate (update).
+        let nextChild = nextFiber.child;
+        let prevChildAtSameIndex = prevFiber.child;
+        while (nextChild) {
+          // We already know children will be referentially different because
+          // they are either new mounts or alternates of previous children.
+          // Schedule updates and mounts depending on whether alternates exist.
+          // We don't track deletions here because they are reported separately.
+          if (nextChild.alternate) {
+            const prevChild = nextChild.alternate;
+            updateFiber(nextChild, prevChild);
+            // However we also keep track if the order of the children matches
+            // the previous order. They are always different referentially, but
+            // if the instances line up conceptually we'll want to know that.
+            if (!hasChildOrderChanged && prevChild !== prevChildAtSameIndex) {
+              hasChildOrderChanged = true;
+            }
+          } else {
+            mountFiber(nextChild);
+            if (!hasChildOrderChanged) {
+              hasChildOrderChanged = true;
+            }
+          }
+          // Try the next child.
+          nextChild = nextChild.sibling;
+          // Advance the pointer in the previous list so that we can
+          // keep comparing if they line up.
+          if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
+            prevChildAtSameIndex = prevChildAtSameIndex.sibling;
+          }
+        }
+        // If we have no more children, but used to, they don't line up.
+        if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
+          hasChildOrderChanged = true;
+        }
+      }
+      enqueueUpdateIfNecessary(nextFiber, hasChildOrderChanged);
+    }
+  }
+
+  function cleanup() {
+    // We don't patch any methods so there is no cleanup.
+  }
+
+  function walkTree() {
+    hook.getFiberRoots(rendererID).forEach(root => {
+      // Hydrate all the roots for the first time.
+      mountFiber(root.current);
+      markRootCommitted(root.current);
+    });
+    flushPendingEvents();
+  }
+
+  function handleCommitFiberUnmount(fiber) {
+    // This is not recursive.
+    // We can't traverse fibers after unmounting so instead
+    // we rely on React telling us about each unmount.
+    enqueueUnmount(fiber);
+  }
+
+  function handleCommitFiberRoot(root) {
+    const current = root.current;
+    const alternate = current.alternate;
+
+    if (alternate) {
+      // TODO: relying on this seems a bit fishy.
+      const wasMounted = alternate.memoizedState != null && alternate.memoizedState.element != null;
+      const isMounted = current.memoizedState != null && current.memoizedState.element != null;
+      if (!wasMounted && isMounted) {
+        // Mount a new root.
+        mountFiber(current);
+      } else if (wasMounted && isMounted) {
+        // Update an existing root.
+        updateFiber(current, alternate);
+      } else if (wasMounted && !isMounted) {
+        // Unmount an existing root.
+        enqueueUnmount(current);
+      }
+    } else {
+      // Mount a new root.
+      mountFiber(current);
+    }
+    markRootCommitted(current);
+    // We're done here.
+    flushPendingEvents();
+  }
+
+  // The naming is confusing.
+  // They deal with opaque nodes (fibers), not elements.
+  function getNativeFromReactElement(fiber) {
+    try {
+      const primaryFiber = fiber;
+      const hostInstance = renderer.findHostInstanceByFiber(primaryFiber);
+      return hostInstance;
+    } catch (err) {
+      // The fiber might have unmounted by now.
+      return null;
+    }
+  }
+  function getReactElementFromNative(hostInstance) {
+    const fiber = renderer.findFiberByHostInstance(hostInstance);
+    if (fiber != null) {
+      // TODO: type fibers.
+      const primaryFiber = getPrimaryFiber((fiber: any));
+      return primaryFiber;
+    }
+    return null;
+  }
+
+  return {
+    getNativeFromReactElement,
+    getReactElementFromNative,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    cleanup,
+    walkTree,
+    renderer,
+  };
+}
\ No newline at end of file
diff --git a/src/backend/types.js b/src/backend/types.js
new file mode 100644
index 000000000000..212a3208493a
--- /dev/null
+++ b/src/backend/types.js
@@ -0,0 +1,77 @@
+// @flow
+
+import type {ElementType} from 'src/devtools/types';
+
+type BundleType =
+  | 0  // PROD
+  | 1; // DEV
+
+type CompositeUpdater = {
+  canUpdate: boolean,
+  setInProps: ?(path: Array<string>, value: any) => void,
+  setInState: ?(path: Array<string>, value: any) => void,
+  setInContext: ?(path: Array<string>, value: any) => void,
+};
+
+type NativeUpdater = {
+  setNativeProps: ?(nativeProps: {[key: string]: any}) => void,
+};
+
+// TODO: Better type for Fiber
+export type Fiber = Object;
+
+// TODO: If it's useful for the frontend to know which types of data an Element has
+// (e.g. props, state, context, hooks) then we could add a bitmask field for this
+// to keep the number of attributes small.
+export type RendererData = {|
+  key: React$Key | null,
+  displayName: string | null,
+  children: Array<Fiber>,
+  type: ElementType,
+|};
+
+export type Interaction = {|
+  name: string,
+  timestamp: number,
+|};
+
+export type NativeType = {};
+export type RendererID = string;
+
+export type ReactRenderer = {
+  findHostInstanceByFiber: (fiber: Object) => ?NativeType,
+  findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
+  version: string,
+  bundleType: BundleType,
+  overrideProps?: ?(fiber: Object, path: Array<string | number>, value: any) => void,
+};
+
+export type RendererInterface = {
+  cleanup: () => void,
+  getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
+  getReactElementFromNative?: ?(component: NativeType) => ?Fiber,
+  handleCommitFiberRoot: (fiber: Object) => void,
+  renderer: ReactRenderer | null,
+  walkTree: () => void,
+};
+
+export type Handler = (data: any) => void;
+
+export type Hook = {
+  listeners: {[key: string]: Array<Handler>},
+  rendererInterfaces: {[key: string]: RendererInterface},
+  renderers: {[key: string]: ReactRenderer},
+
+  emit: (evt: string, data: any) => void,
+  getFiberRoots: (rendererID : string) => Set<Object>,
+  inject: (renderer: ReactRenderer) => string | null,
+  on: (evt: string, handler: Handler) => void,
+  off: (evt: string, handler: Handler) => void,
+  reactDevtoolsAgent?: ?Object,
+  sub: (evt: string, handler: Handler) => () => void,
+
+  // React uses these methods.
+  checkDCE: (fn: Function) => void,
+  onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,
+  onCommitFiberRoot: (rendererID: RendererID, fiber: Object) => void,
+};
diff --git a/src/backend/utils.js b/src/backend/utils.js
new file mode 100644
index 000000000000..3682bd9a6742
--- /dev/null
+++ b/src/backend/utils.js
@@ -0,0 +1,47 @@
+// @flow
+
+const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
+const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
+
+export function getDisplayName(type: Function, fallbackName: string = 'Unknown'): string {
+  const nameFromCache = cachedDisplayNames.get(type);
+  if (nameFromCache != null) {
+    return nameFromCache;
+  }
+
+  let displayName;
+
+  // The displayName property is not guaranteed to be a string.
+  // It's only safe to use for our purposes if it's a string.
+  // github.com/facebook/react-devtools/issues/803
+  if (typeof type.displayName === 'string') {
+    displayName = type.displayName;
+  }
+
+  if (!displayName) {
+    displayName = type.name || fallbackName;
+  }
+
+  // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
+  // We need displayName with module name for error reports but it clutters the DevTools.
+  const match = displayName.match(FB_MODULE_RE);
+  if (match) {
+    const componentName = match[1];
+    const moduleName = match[2];
+    if (componentName && moduleName) {
+      if (
+        moduleName === componentName ||
+        moduleName.startsWith(componentName + '.')
+      ) {
+        displayName = componentName;
+      }
+    }
+  }
+
+  cachedDisplayNames.set(type, displayName);
+  return displayName;
+}
+
+export function guid(): string {
+  return 'g' + Math.random().toString(16).substr(2);
+}
\ No newline at end of file
diff --git a/src/bridge.js b/src/bridge.js
new file mode 100644
index 000000000000..b6ba18d69a37
--- /dev/null
+++ b/src/bridge.js
@@ -0,0 +1,91 @@
+// @flow
+
+import EventEmitter from 'events';
+
+import type {Wall} from './types';
+
+const BATCH_DURATION = 100;
+
+type Message = {|
+  event: string,
+  payload: any,
+|};
+
+export default class Bridge extends EventEmitter {
+  _messageQueue: Array<Message> = [];
+  _time: number | null = null;
+  _timeoutID: TimeoutID | null = null;
+
+  wall: Wall;
+
+  constructor (wall: Wall) {
+    super();
+
+    this.wall = wall;
+    wall.listen(messages => {
+      if (Array.isArray(messages)) {
+        messages.forEach(message => this._emit(message))
+      } else {
+        this._emit(messages)
+      }
+    })
+  }
+
+  /**
+   * Send an event.
+   *
+   * @param {String} event
+   * @param {*} payload
+   */
+
+  send (event: string, payload: any) {
+    const time = this._time;
+
+    if (time === null) {
+      this.wall.send([{ event, payload }])
+      this._time = Date.now()
+    } else {
+      this._messageQueue.push({
+        event,
+        payload
+      })
+
+      const now = Date.now()
+      if (now - time > BATCH_DURATION) {
+        this._flush()
+      } else {
+        this._timeoutID = setTimeout(() => this._flush(), BATCH_DURATION)
+      }
+    }
+  }
+
+  /**
+   * 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)
+    }
+    if (this._timeoutID !== null) {
+      clearTimeout(this._timeoutID)
+      this._timeoutID = null;
+    }
+    this._messageQueue = []
+    this._time = null
+  }
+
+  _emit (message: string | Message) {
+    if (typeof message === 'string') {
+      this.emit(message)
+    } else {
+      this.emit(message.event, message.payload)
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/devtools/index.js b/src/devtools/index.js
new file mode 100644
index 000000000000..93e5f020235e
--- /dev/null
+++ b/src/devtools/index.js
@@ -0,0 +1,14 @@
+// @flow
+
+import type { Bridge } from '../types';
+
+type Shell = {|
+  connect: (callback: Function) => void,
+  onReload: (reloadFn: Function) => void,
+|};
+
+export function initDevTools(shell: Shell) {
+  shell.connect((bridge: Bridge) => {
+    // TODO ...
+  });
+}
\ No newline at end of file
diff --git a/src/devtools/store.js b/src/devtools/store.js
new file mode 100644
index 000000000000..265e90f3db68
--- /dev/null
+++ b/src/devtools/store.js
@@ -0,0 +1,78 @@
+// @flow
+
+import EventEmitter from 'events';
+
+import type { Element } from './types';
+import type { Bridge } from '../types';
+
+/**
+ * The store is the single source of truth for updates from the backend.
+ * ContextProviders can subscribe to the Store for specific things they want to provide.
+ */
+class Store extends EventEmitter {
+  _idToElement: Map<string, Element> = new Map();
+  _idToParentID: Map<string, string> = new Map();
+
+  roots: Set<string> = new Set();
+
+  constructor(bridge: Bridge) {
+    super();
+
+    bridge.on('root', this.onBridgeRoot);
+    bridge.on('mount', this.onBridgeMount);
+    bridge.on('update', this.onBridgeUpdated);
+    bridge.on('unmount', this.onBridgeUnmounted);
+  }
+
+  getElement(id: string) {
+    return this._idToElement.get(id);
+  }
+
+  geParent(id: string) {
+    return this._idToParentID.get(id);
+  }
+
+  onBridgeMount = (element: Element) => {
+    const {id} = element;
+    console.log('%cStore%c onBridgeMount()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);
+    this._idToElement.set(id, element);
+
+    element.children.forEach(childID => {
+      this._idToParentID.set(childID, id);
+    });
+
+    this.emit(id);
+  };
+
+  onBridgeRoot = (id: string) => {
+    console.log('%cStore%c onBridgeRoot()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);
+    if (!this.roots.has(id)) {
+      this.roots.add(id);
+      this.emit('roots');
+    }
+  };
+
+  onBridgeUnmounted = (id: string) => {
+    console.log('%cStore%c onBridgeUnmounted()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);
+    this._idToElement.delete(id);
+
+    if (this._idToParentID.has(id)) {
+      this._idToParentID.delete(id);
+    }
+
+    if (this.roots.has(id)) {
+      this.roots.delete(id);
+      this.emit('roots');
+    }
+  };
+
+  onBridgeUpdated = (element: Element) => {
+    const {id} = element;
+    console.log('%cStore%c onBridgeUpdated()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);
+    this._idToElement.set(id, element);
+
+    this.emit(id);
+  };
+}
+
+export default Store;
\ No newline at end of file
diff --git a/src/devtools/types.js b/src/devtools/types.js
new file mode 100644
index 000000000000..28c5ad03cb10
--- /dev/null
+++ b/src/devtools/types.js
@@ -0,0 +1,38 @@
+// @flow
+
+export const ElementTypeClassOrFunction = 1;
+export const ElementTypeContext = 2;
+export const ElementTypeForwardRef = 3;
+export const ElementTypeMemo = 4;
+export const ElementTypeOtherOrUnknown = 5;
+export const ElementTypeProfiler = 6;
+export const ElementTypeSuspense = 7;
+
+export type ElementType =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7;
+
+// TODO: Add profiling node
+
+export type Element = {|
+  id: string,
+  type: ElementType,
+  key: React$Key | null,
+  displayName: string | null,
+  children: Array<string>,
+|};
+
+export type InspectedElement = {|
+  id: string,
+  context: Object | null,
+  hooks: Object | null,
+  props: Object | null,
+  state: Object | null,
+  canEditProps: boolean,
+  source: Object,
+|};
diff --git a/src/devtools/views/App.css b/src/devtools/views/App.css
new file mode 100644
index 000000000000..5f76e9c523a1
--- /dev/null
+++ b/src/devtools/views/App.css
@@ -0,0 +1,49 @@
+:root {
+  /* TODO */
+  --color-base00: #ffffff;
+  --color-base01: #f3f3f3;
+  --color-base02: #eeeeee;
+  --color-base03: #dadada;
+  --color-base04: #333333;
+  --color-base05: #5a5a5a;
+  --color-special00: #8155cb;
+  --color-special01: #222222;
+  --color-special02: #1a1aa6;
+  --color-special03: #c80000;
+  --color-special04: #236e25;
+  --color-special05: #aa0d91;
+  --color-special06: #ef6632;
+  --color-special07: #777d88;
+  --color-state00: #0088FA;
+  --color-state01: #dadada;
+  --color-state02: #ffffff;
+  --color-state03: #ebf1fb;
+  --color-state04: #FFFF00;
+  --color-state05: #222222;
+  --color-state06: #222222;
+
+  --color-component: var(--color-special00);
+  --color-tree-tag: var(--color-base04);
+  --color-tree-attr-name: var(--color-special06);
+  --color-tree-attr-value: var(--color-special02);
+
+  --line-height-tree-compact: 1.5;
+  --line-height-tree-normal: 1.5;
+
+  /* GitHub.com system fonts */
+  --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --font-size-tree-compact: 12px;
+  --font-size-tree-normal: 14px;
+}
+
+.App {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  -webkit-font-smoothing:  antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/src/devtools/views/App.js b/src/devtools/views/App.js
new file mode 100644
index 000000000000..f5da6477b5d5
--- /dev/null
+++ b/src/devtools/views/App.js
@@ -0,0 +1,25 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import Store from '../store';
+import Tree from './Tree';
+import {StoreContext} from './contexts';
+import styles from './App.css';
+
+import type {Bridge} from '../../types';
+
+type Props = {|
+  bridge: Bridge,
+|};
+
+export default function App({ bridge }: Props) {
+  const store = useMemo(() => new Store(bridge), []);
+
+  return (
+    <StoreContext.Provider value={store}>
+      <div className={styles.App}>
+        <Tree />
+      </div>
+    </StoreContext.Provider>
+  );
+}
\ No newline at end of file
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
new file mode 100644
index 000000000000..d6230f85ebf5
--- /dev/null
+++ b/src/devtools/views/Element.css
@@ -0,0 +1,46 @@
+.Element {
+  width: 100%;
+  border-radius: 0.25em;
+  cursor: pointer;
+  position: relative;
+}
+.Element:hover {
+  background-color: var(--color-state03);
+}
+
+.ArrowClosed,
+.ArrowOpen {
+  position: absolute;
+  margin-left: -1rem;
+  width: 1rem;
+  height: 1rem;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23777d88' d='M8 5v14l11-7z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
+  background-size: 12px 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.ArrowOpen {
+  transform: rotate(90deg);
+}
+
+.Component {
+  color: var(--color-component);
+}
+.Component:before {
+  white-space: nowrap;
+  content: "<";
+  color: var(--color-tree-tag);
+}
+.Component:after {
+  white-space: nowrap;
+  content: ">";
+  color: var(--color-tree-tag);
+}
+
+.AttributeName {
+  color: var(--color-tree-attr-name);
+}
+
+.AttributeValue {
+  color: var(--color-tree-attr-value);
+}
\ No newline at end of file
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
new file mode 100644
index 000000000000..3a2ff0122702
--- /dev/null
+++ b/src/devtools/views/Element.js
@@ -0,0 +1,43 @@
+// @flow
+
+import React, {Fragment, useContext} from 'react';
+import {useElement} from './hooks';
+import {StoreContext} from './contexts';
+
+import styles from './Element.css';
+
+type Props = {|
+  depth: number,
+  id: string,
+|};
+
+export default function Element({depth, id}: Props) {
+  const store = useContext(StoreContext);
+  const element = useElement(store, id);
+
+  const {children, displayName, key} = element;
+
+  // TODO: Toggle open/close state
+
+  return (
+    <Fragment>
+      <div className={styles.Element} style={{paddingLeft: `${1 + depth}rem`}}>
+        {children.length > 0 && (
+          <span className={styles.ArrowOpen}></span>
+        )}
+
+        <span className={styles.Component}>
+          {displayName}{key && (
+            <Fragment>
+              &nbsp;<span className={styles.AttributeName}>key</span>=<span className={styles.AttributeValue}>"{key}"</span>
+            </Fragment>
+          )}
+        </span>
+      </div>
+
+      {children.map(childID => (
+        <Element key={childID} depth={depth + 1} id={childID} />
+      ))}
+    </Fragment>
+  );
+}
\ No newline at end of file
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
new file mode 100644
index 000000000000..5c4c2476be0d
--- /dev/null
+++ b/src/devtools/views/Tree.css
@@ -0,0 +1,11 @@
+.Tree {
+  width: 100%;
+  padding: 0.25rem;
+  overflow: auto;
+
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-tree-compact);
+ 
+  /* TODO */
+  line-height: var(--line-height-tree-compact);
+}
\ No newline at end of file
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
new file mode 100644
index 000000000000..f3c8c857f7a6
--- /dev/null
+++ b/src/devtools/views/Tree.js
@@ -0,0 +1,34 @@
+// @flow
+
+import React, {useContext} from 'react';
+import Element from './Element';
+import {StoreContext} from './contexts';
+import {useElement, useRoots} from './hooks';
+
+import styles from './Tree.css';
+
+type TreeProps = {||};
+
+export default function Tree({}: TreeProps) {
+  const store = useContext(StoreContext);
+  const roots = useRoots(store);
+
+  return (
+    <div className={styles.Tree}>
+      {roots.map(id => <Root key={id} id={id} />)}
+    </div>
+  );
+}
+
+type RootProps = {|
+  id: string,
+|};
+
+function Root({id}: RootProps) {
+  const store = useContext(StoreContext);
+  const element = useElement(store, id);
+
+  return element.children.map(childID => (
+    <Element key={childID} depth={0} id={childID} />
+  ));
+}
\ No newline at end of file
diff --git a/src/devtools/views/contexts.js b/src/devtools/views/contexts.js
new file mode 100644
index 000000000000..2d185d7f1ff5
--- /dev/null
+++ b/src/devtools/views/contexts.js
@@ -0,0 +1,8 @@
+// @flow
+
+import { createContext } from 'react';
+
+import Store from '../store';
+
+export const RootsContext = createContext<Array<string>>([]);
+export const StoreContext = createContext<Store>(((null: any): Store));
\ No newline at end of file
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
new file mode 100644
index 000000000000..c44ba9fb6530
--- /dev/null
+++ b/src/devtools/views/hooks.js
@@ -0,0 +1,30 @@
+// @flow
+
+import {createContext, useLayoutEffect, useRef, useState} from 'react';
+
+import type {Element} from '../types';
+import Store from '../store';
+
+export function useElement(store: Store, id: string): Element {
+  const [element, setElement] = useState<Element>(((store.getElement(id): any): Element));
+
+  useLayoutEffect(() => {
+    const handler = () => setElement(((store.getElement(id): any): Element));
+    store.addListener(id, handler);
+    return () => store.removeListener(id, handler);
+  }, [store, id]);
+
+  return element;
+}
+
+export function useRoots(store: Store): Array<string> {
+  const [roots, setRoots] = useState<Array<string>>(Array.from(store.roots));
+
+  useLayoutEffect(() => {
+    const handler = () => setRoots(Array.from(store.roots));
+    store.addListener('roots', handler);
+    return () => store.removeListener('roots', handler);
+  }, [store]);
+
+  return roots;
+}
\ No newline at end of file
diff --git a/src/hook.js b/src/hook.js
new file mode 100644
index 000000000000..3092c99a119f
--- /dev/null
+++ b/src/hook.js
@@ -0,0 +1,182 @@
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note because Chrome content scripts cannot directly modify the window object,
+ * we are evaling this function by inserting a script tag.
+ * That's why we have to inline the whole event emitter implementation here.
+ *
+ * @flow
+ */
+
+import type {Hook} from './types';
+
+declare var window: any;
+
+export function installHook(target: any): Hook {
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return
+
+  function detectReactBuildType(renderer) {
+    try {
+      if (typeof renderer.version === 'string') {
+        if (renderer.bundleType > 0) {
+          // This is not a production build.
+          // We are currently only using 0 (PROD) and 1 (DEV)
+          // but might add 2 (PROFILE) in the future.
+          return 'development';
+        }
+
+        // React 16 uses flat bundles. If we report the bundle as production
+        // version, it means we also minified and envified it ourselves.
+        return 'production';
+
+        // Note: There is still a risk that the CommonJS entry point has not
+        // been envified or uglified. In this case the user would have *both*
+        // development and production bundle, but only the prod one would run.
+        // This would be really bad. We have a separate check for this because
+        // it happens *outside* of the renderer injection. See `checkDCE` below.
+      }
+    } catch (err) {}
+
+    return 'production';
+  }
+
+  function checkDCE(fn: Function) {
+    // This runs for production versions of React.
+    // Needs to be super safe.
+    try {
+      const toString = Function.prototype.toString;
+      const code = toString.call(fn);
+
+      // This is a string embedded in the passed function under DEV-only
+      // condition. However the function executes only in PROD. Therefore,
+      // if we see it, dead code elimination did not work.
+      if (code.indexOf('^_^') > -1) {
+        // Remember to report during next injection.
+        hasDetectedBadDCE = true;
+
+        // Bonus: throw an exception hoping that it gets picked up by a reporting system.
+        // Not synchronously so that it doesn't break the calling code.
+        setTimeout(function() {
+          throw new Error(
+            'React is running in production mode, but dead code ' +
+              'elimination has not been applied. Read how to correctly ' +
+              'configure React for production: ' +
+              'https://fb.me/react-perf-use-the-production-build'
+          );
+        });
+      }
+    } catch (err) {}
+  }
+
+  function inject(renderer) {
+    const id = Math.random().toString(16).slice(2);
+    renderers[id] = renderer;
+
+    const reactBuildType = hasDetectedBadDCE ? 'deadcode' : detectReactBuildType(renderer);
+
+    hook.emit('renderer', {id, renderer, reactBuildType});
+
+    return id;
+  }
+
+  let hasDetectedBadDCE = false;
+
+  function sub(event, fn) {
+    hook.on(event, fn);
+    return () => hook.off(event, fn);
+  }
+
+  function on(event, fn) {
+    if (!listeners[event]) {
+      listeners[event] = [];
+    }
+    listeners[event].push(fn);
+  }
+
+  function off(event, fn) {
+    if (!listeners[event]) {
+      return;
+    }
+    const index = listeners[event].indexOf(fn);
+    if (index !== -1) {
+      listeners[event].splice(index, 1);
+    }
+    if (!listeners[event].length) {
+      delete listeners[event];
+    }
+  }
+
+  function emit(event, data) {
+    if (listeners[event]) {
+      listeners[event].map(fn => fn(data));
+    }
+  }
+
+  function getFiberRoots(rendererID) {
+    const roots = fiberRoots;
+    if (!roots[rendererID]) {
+      roots[rendererID] = new Set();
+    }
+    return roots[rendererID];
+  }
+
+  function onCommitFiberUnmount(rendererID, fiber) {
+    // TODO: can we use hook for roots too?
+    if (rendererInterfaces[rendererID]) {
+      rendererInterfaces[rendererID].handleCommitFiberUnmount(fiber);
+    }
+  }
+
+  function onCommitFiberRoot(rendererID, root) {
+    const mountedRoots = hook.getFiberRoots(rendererID);
+    const current = root.current;
+    const isKnownRoot = mountedRoots.has(root);
+    const isUnmounting = current.memoizedState == null || current.memoizedState.element == null;
+
+    // Keep track of mounted roots so we can hydrate when DevTools connect.
+    if (!isKnownRoot && !isUnmounting) {
+      mountedRoots.add(root);
+    } else if (isKnownRoot && isUnmounting) {
+      mountedRoots.delete(root);
+    }
+    if (rendererInterfaces[rendererID]) {
+      rendererInterfaces[rendererID].handleCommitFiberRoot(root);
+    }
+  }
+
+  // TODO: More meaningful names for "rendererInterfaces" and "renderers".
+  const fiberRoots = {};
+  const rendererInterfaces = {};
+  const listeners = {};
+  const renderers = {};
+
+  const hook: Hook = ({
+    rendererInterfaces,
+    listeners,
+    renderers,
+
+    emit,
+    getFiberRoots,
+    inject,
+    on,
+    off,
+    sub,
+
+    // This is a legacy flag.
+    // React v16 checks the hook for this to ensure DevTools is new enough.
+    supportsFiber: true,
+
+    // React calls these methods.
+    checkDCE,
+    onCommitFiberUnmount,
+    onCommitFiberRoot,
+  });
+
+  Object.defineProperty(target, '__REACT_DEVTOOLS_GLOBAL_HOOK__', ({
+    enumerable: false,
+    get () {
+      return hook
+    }
+  }: Object));
+
+  return hook;
+}
\ No newline at end of file
diff --git a/src/types.js b/src/types.js
new file mode 100644
index 000000000000..3d5f54139c33
--- /dev/null
+++ b/src/types.js
@@ -0,0 +1,12 @@
+// @flow
+
+// TODO
+export type Bridge = any;
+
+// TODO
+export type Hook = any;
+
+export type Wall = {|
+  listen: (fn: Function) => void,
+  send: (data: any) => void,
+|};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000000..ddda9e7f5ecc
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,10044 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+  integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/code-frame@^7.0.0-beta.35":
+  version "7.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.39.tgz#91c90bb65207fc5a55128cb54956ded39e850457"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/core@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.6.tgz#3733cbee4317429bc87c62b29cf8587dba7baeb3"
+  integrity sha512-Hz6PJT6e44iUNpAn8AoyAs6B3bl60g7MJQaI0rZEar6ECzh6+srYO1xlIdssio34mPaUtAb1y+XlkkSJzok3yw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.1.6"
+    "@babel/helpers" "^7.1.5"
+    "@babel/parser" "^7.1.6"
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.6"
+    "@babel/types" "^7.1.6"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.10"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz#001303cf87a5b9d093494a4bf251d7b5d03d3999"
+  integrity sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ==
+  dependencies:
+    "@babel/types" "^7.1.6"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
+  integrity sha512-qNSR4jrmJ8M1VMM9tibvyRAHXQs2PmaksQF7c1CGJNipfe3D8p+wgNwgso/P2A2r2mdgBWAXljNWR0QRZAMW8w==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-builder-react-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz#fa154cb53eb918cf2a9a7ce928e29eb649c5acdb"
+  integrity sha512-ebJ2JM6NAKW0fQEqN8hOLxK84RbRz9OkUhGS/Xd5u56ejMfVbayJ4+LykERZCOUM6faa6Fp3SZNX3fcT16MKHw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    esutils "^2.0.0"
+
+"@babel/helper-call-delegate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.1.0.tgz#6a957f105f37755e8645343d3038a22e1449cc4a"
+  integrity sha512-YEtYZrw3GUK6emQHKthltKNZwszBcHK58Ygcis+gVUrF4/FmTVr5CCqQNSfmvg2y+YDEANyYoaLz/SHsnusCwQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.0.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-define-map@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
+  integrity sha512-yPPcW8dc3gZLN+U1mhYV91QU3n5uTbx7DUdf8NnPbjS0RMwBuHi9Xt2MUgppmNz7CJxTBWsGczTiEp1CSOTPRg==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    lodash "^4.17.10"
+
+"@babel/helper-explode-assignable-expression@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
+  integrity sha512-NRQpfHrJ1msCHtKjbzs9YcMmJZOg6mQMmGRB+hbamEdG5PNpaSm95275VD92DvJKuyl0s2sFiDmMZ+EnnvufqA==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-function-name@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+  integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-get-function-arity@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
+  integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-hoist-variables@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0.tgz#46adc4c5e758645ae7a45deb92bab0918c23bb88"
+  integrity sha512-Ggv5sldXUeSKsuzLkddtyhyHe2YantsxWKNi7A+7LeD12ExRDWTRk29JCXpaHPAbMaIPZSil7n+lq78WY2VY7w==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-member-expression-to-functions@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0.tgz#8cd14b0a0df7ff00f009e7d7a436945f47c7a16f"
+  integrity sha512-avo+lm/QmZlv27Zsi0xEor2fKcqWG56D5ae9dzklpIaY7cQMK5N8VSpaNVPPagiqmy7LrEjK1IWdGMOqPu5csg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-module-imports@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-module-transforms@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.1.0.tgz#470d4f9676d9fad50b324cdcce5fbabbc3da5787"
+  integrity sha512-0JZRd2yhawo79Rcm4w0LwSMILFmFXjugG3yqf+P/UsKsRS1mJCmMwwlHDlMg7Avr9LrvSpp4ZSULO9r8jpCzcw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    lodash "^4.17.10"
+
+"@babel/helper-optimise-call-expression@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
+  integrity sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-plugin-utils@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
+  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
+
+"@babel/helper-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
+  integrity sha512-TR0/N0NDCcUIUEbqV6dCO+LptmmSQFQ7q70lfcEB4URsjD0E1HzicrwUH+ap6BAQ2jhCX9Q4UqZy4wilujWlkg==
+  dependencies:
+    lodash "^4.17.10"
+
+"@babel/helper-remap-async-to-generator@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
+  integrity sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-wrap-function" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-replace-supers@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.1.0.tgz#5fc31de522ec0ef0899dc9b3e7cf6a5dd655f362"
+  integrity sha512-BvcDWYZRWVuDeXTYZWxekQNO5D4kO55aArwZOTFXw6rlLQA8ZaDicJR1sO47h+HrnCiDFiww0fSPV0d713KBGQ==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-simple-access@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
+  integrity sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==
+  dependencies:
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-split-export-declaration@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813"
+  integrity sha512-MXkOJqva62dfC0w85mEf/LucPPS/1+04nmmRMPEBUB++hiiThQ2zPtX/mEWQ3mtzCEjIJvPY8nuwxXtQeQwUag==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-wrap-function@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66"
+  integrity sha512-R6HU3dete+rwsdAfrOzTlE9Mcpk4RjU3aX3gi9grtmugQY0u79X7eogUvfXA5sI81Mfq1cn6AgxihfN33STjJA==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helpers@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.5.tgz#68bfc1895d685f2b8f1995e788dbfe1f6ccb1996"
+  integrity sha512-2jkcdL02ywNBry1YNFAH/fViq4fXG0vdckHqeJk+75fpQ2OH+Az6076tX/M0835zA45E0Cqa6pV5Kiv9YOqjEg==
+  dependencies:
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.5"
+    "@babel/types" "^7.1.5"
+
+"@babel/highlight@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.2", "@babel/parser@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
+  integrity sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==
+
+"@babel/plugin-proposal-async-generator-functions@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
+  integrity sha512-Fq803F3Jcxo20MXUSDdmZZXrPe6BWyGcWBPPNB/M7WaUYESKDeKMOGIxEzQOjGSmW/NWb6UaPZrtTB2ekhB/ew==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.1.0"
+    "@babel/plugin-syntax-async-generators" "^7.0.0"
+
+"@babel/plugin-proposal-class-properties@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.1.0.tgz#9af01856b1241db60ec8838d84691aa0bd1e8df4"
+  integrity sha512-/PCJWN+CKt5v1xcGn4vnuu13QDoV+P7NcICP44BoonAJoPSGwVkgrXihFIQGiEjjPlUDBIw1cM7wYFLARS2/hw==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.1.0"
+    "@babel/plugin-syntax-class-properties" "^7.0.0"
+
+"@babel/plugin-proposal-json-strings@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.0.0.tgz#3b4d7b5cf51e1f2e70f52351d28d44fc2970d01e"
+  integrity sha512-kfVdUkIAGJIVmHmtS/40i/fg/AGnw/rsZBCaapY5yjeO5RA9m165Xbw9KMOu2nqXP5dTFjEjHdfNdoVcHv133Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-json-strings" "^7.0.0"
+
+"@babel/plugin-proposal-object-rest-spread@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0.tgz#9a17b547f64d0676b6c9cecd4edf74a82ab85e7e"
+  integrity sha512-14fhfoPcNu7itSen7Py1iGN0gEm87hX/B+8nZPqkdmANyyYWYMY2pjA3r8WXbWVKMzfnSNS0xY8GVS0IjXi/iw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.0.0.tgz#b610d928fe551ff7117d42c8bb410eec312a6425"
+  integrity sha512-JPqAvLG1s13B/AuoBjdBYvn38RqW6n1TzrQO839/sIpqLpbnXKacsAgpZHzLD83Sm8SDXMkkrAvEnJ25+0yIpw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.0.0.tgz#498b39cd72536cd7c4b26177d030226eba08cd33"
+  integrity sha512-tM3icA6GhC3ch2SkmSxv7J/hCWKISzwycub6eGsDrFDgukD4dZ/I+x81XgW0YslS6mzNuQ1Cbzh5osjIMgepPQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+    regexpu-core "^4.2.0"
+
+"@babel/plugin-syntax-async-generators@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0.tgz#bf0891dcdbf59558359d0c626fdc9490e20bc13c"
+  integrity sha512-im7ged00ddGKAjcZgewXmp1vxSZQQywuQXe2B1A7kajjZmDeY/ekMPmWr9zJgveSaQH0k7BcGrojQhcK06l0zA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-class-properties@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0.tgz#e051af5d300cbfbcec4a7476e37a803489881634"
+  integrity sha512-cR12g0Qzn4sgkjrbrzWy2GE7m9vMl/sFkqZ3gIpAQdrvPDnLM8180i+ANDFIXfjHo9aqp0ccJlQ0QNZcFUbf9w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-flow@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0.tgz#70638aeaad9ee426bc532e51523cff8ff02f6f17"
+  integrity sha512-zGcuZWiWWDa5qTZ6iAnpG0fnX/GOu49pGR5PFvkQ9GmKNaSphXQnlNXh/LG20sqWtNrx/eB6krzfEzcwvUyeFA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-json-strings@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz#0d259a68090e15b383ce3710e01d5b23f3770cbd"
+  integrity sha512-UlSfNydC+XLj4bw7ijpldc1uZ/HB84vw+U6BTuqMdIEmz/LDe63w/GHtpQMdXWdqQZFeAI9PjnHe/vDhwirhKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0.tgz#034d5e2b4e14ccaea2e4c137af7e4afb39375ffd"
+  integrity sha512-PdmL2AoPsCLWxhIr3kG2+F9v4WH06Q3z+NoGVpQgnUNGcagXHq5sB3OXxkSahKq9TLdNMN/AJzFYSOo8UKDMHg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz#37d8fbcaf216bd658ea1aebbeb8b75e88ebc549b"
+  integrity sha512-5A0n4p6bIiVe5OvQPxBnesezsgFJdHhSs3uFSvaPdMqtsovajLZ+G2vZyvNe10EzJBWWo3AcHGKhAFUxqwp2dw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.0.0.tgz#886f72008b3a8b185977f7cb70713b45e51ee475"
+  integrity sha512-Wc+HVvwjcq5qBg1w5RG9o9RVzmCaAg/Vp0erHCKpAYV8La6I94o4GQAmFYNmkzoMO6gzoOSulpKeSSz6mPEoZw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-arrow-functions@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.0.0.tgz#a6c14875848c68a3b4b3163a486535ef25c7e749"
+  integrity sha512-2EZDBl1WIO/q4DIkIp4s86sdp4ZifL51MoIviLY/gG/mLSuOIEg7J8o6mhbxOTvUJkaN50n+8u41FVsr5KLy/w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-async-to-generator@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.1.0.tgz#109e036496c51dd65857e16acab3bafdf3c57811"
+  integrity sha512-rNmcmoQ78IrvNCIt/R9U+cixUHeYAzgusTFgIAv+wQb9HJU4szhpDD6e5GCACmj/JP5KxuCwM96bX3L9v4ZN/g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.1.0"
+
+"@babel/plugin-transform-block-scoped-functions@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.0.0.tgz#482b3f75103927e37288b3b67b65f848e2aa0d07"
+  integrity sha512-AOBiyUp7vYTqz2Jibe1UaAWL0Hl9JUXEgjFvvvcSc9MVDItv46ViXFw2F7SVt1B5k+KWjl44eeXOAk3UDEaJjQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-block-scoping@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.1.5.tgz#3e8e0bc9a5104519923302a24f748f72f2f61f37"
+  integrity sha512-jlYcDrz+5ayWC7mxgpn1Wj8zj0mmjCT2w0mPIMSwO926eXBRxpEgoN/uQVRBfjtr8ayjcmS+xk2G1jaP8JjMJQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    lodash "^4.17.10"
+
+"@babel/plugin-transform-classes@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.1.0.tgz#ab3f8a564361800cbc8ab1ca6f21108038432249"
+  integrity sha512-rNaqoD+4OCBZjM7VaskladgqnZ1LO6o2UxuWSDzljzW21pN1KXkB7BstAVweZdxQkHAujps5QMNOTWesBciKFg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-define-map" "^7.1.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.0.0.tgz#2fbb8900cd3e8258f2a2ede909b90e7556185e31"
+  integrity sha512-ubouZdChNAv4AAWAgU7QKbB93NU5sHwInEWfp+/OzJKA02E6Woh9RVoX4sZrbRwtybky/d7baTUqwFx+HgbvMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-destructuring@^7.0.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.1.3.tgz#e69ff50ca01fac6cb72863c544e516c2b193012f"
+  integrity sha512-Mb9M4DGIOspH1ExHOUnn2UUXFOyVTiX84fXCd+6B5iWrQg/QMeeRmSwpZ9lnjYLSXtZwiw80ytVMr3zue0ucYw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-dotall-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.0.0.tgz#73a24da69bc3c370251f43a3d048198546115e58"
+  integrity sha512-00THs8eJxOJUFVx1w8i1MBF4XH4PsAjKjQ1eqN/uCH3YKwP21GCKfrn6YZFZswbOk9+0cw1zGQPHVc1KBlSxig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+    regexpu-core "^4.1.3"
+
+"@babel/plugin-transform-duplicate-keys@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.0.0.tgz#a0601e580991e7cace080e4cf919cfd58da74e86"
+  integrity sha512-w2vfPkMqRkdxx+C71ATLJG30PpwtTpW7DDdLqYt2acXU7YjztzeWW2Jk1T6hKqCLYCcEA5UQM/+xTAm+QCSnuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-exponentiation-operator@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.1.0.tgz#9c34c2ee7fd77e02779cfa37e403a2e1003ccc73"
+  integrity sha512-uZt9kD1Pp/JubkukOGQml9tqAeI8NkE98oZnHZ2qHRElmeKCodbTZgOEUtujSCSLhHSBWbzNiFSDIMC4/RBTLQ==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.1.6.tgz#4b7be62604d39e63cfe23b1d00d63e9fb7e763ba"
+  integrity sha512-0tyFAAjJmnRlr8MVJV39ASn1hv+PbdVP71hf7aAseqLfQ0o9QXk9htbMbq7/ZYXnUIp6gDw0lUUP0+PQMbbtmg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.0.0"
+
+"@babel/plugin-transform-for-of@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.0.0.tgz#f2ba4eadb83bd17dc3c7e9b30f4707365e1c3e39"
+  integrity sha512-TlxKecN20X2tt2UEr2LNE6aqA0oPeMT1Y3cgz8k4Dn1j5ObT8M3nl9aA37LLklx0PBZKETC9ZAf9n/6SujTuXA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-function-name@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.1.0.tgz#29c5550d5c46208e7f730516d41eeddd4affadbb"
+  integrity sha512-VxOa1TMlFMtqPW2IDYZQaHsFrq/dDoIjgN098NowhexhZcz3UGlvPgZXuE1jEvNygyWyxRacqDpCZt+par1FNg==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-literals@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.0.0.tgz#2aec1d29cdd24c407359c930cdd89e914ee8ff86"
+  integrity sha512-1NTDBWkeNXgpUcyoVFxbr9hS57EpZYXpje92zv0SUzjdu3enaRwF/l3cmyRnXLtIdyJASyiS6PtybK+CgKf7jA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-amd@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.1.0.tgz#f9e0a7072c12e296079b5a59f408ff5b97bf86a8"
+  integrity sha512-wt8P+xQ85rrnGNr2x1iV3DW32W8zrB6ctuBkYBbf5/ZzJY99Ob4MFgsZDFgczNU76iy9PWsy4EuxOliDjdKw6A==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-commonjs@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.1.0.tgz#0a9d86451cbbfb29bd15186306897c67f6f9a05c"
+  integrity sha512-wtNwtMjn1XGwM0AXPspQgvmE6msSJP15CX2RVfpTSTNPLhKhaOjaIfBaVfj4iUZ/VrFSodcFedwtPg/NxwQlPA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+
+"@babel/plugin-transform-modules-systemjs@^7.0.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.1.3.tgz#2119a3e3db612fd74a19d88652efbfe9613a5db0"
+  integrity sha512-PvTxgjxQAq4pvVUZF3mD5gEtVDuId8NtWkJsZLEJZMZAW3TvgQl1pmydLLN1bM8huHFVVU43lf0uvjQj9FRkKw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-umd@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.1.0.tgz#a29a7d85d6f28c3561c33964442257cc6a21f2a8"
+  integrity sha512-enrRtn5TfRhMmbRwm7F8qOj0qEYByqUvTttPEGimcBH4CJHphjyK1Vg7sdU7JjeEmgSpM890IT/efS2nMHwYig==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-new-target@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.0.0.tgz#ae8fbd89517fa7892d20e6564e641e8770c3aa4a"
+  integrity sha512-yin069FYjah+LbqfGeTfzIBODex/e++Yfa0rH0fpfam9uTbuEeEOx5GLGr210ggOV77mVRNoeqSYqeuaqSzVSw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-object-super@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.1.0.tgz#b1ae194a054b826d8d4ba7ca91486d4ada0f91bb"
+  integrity sha512-/O02Je1CRTSk2SSJaq0xjwQ8hG4zhZGNjE8psTsSNPXyLRCODv7/PBozqT5AmQMzp7MI3ndvMhGdqp9c96tTEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.1.0"
+
+"@babel/plugin-transform-parameters@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.1.0.tgz#44f492f9d618c9124026e62301c296bf606a7aed"
+  integrity sha512-vHV7oxkEJ8IHxTfRr3hNGzV446GAb+0hgbA7o/0Jd76s+YzccdWuTU296FOCOl/xweU4t/Ya4g41yWz80RFCRw==
+  dependencies:
+    "@babel/helper-call-delegate" "^7.1.0"
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-display-name@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.0.0.tgz#93759e6c023782e52c2da3b75eca60d4f10533ee"
+  integrity sha512-BX8xKuQTO0HzINxT6j/GiCwoJB0AOMs0HmLbEnAvcte8U8rSkNa/eSCAY+l1OA4JnCVq2jw2p6U8QQryy2fTPg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx-self@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.0.0.tgz#a84bb70fea302d915ea81d9809e628266bb0bc11"
+  integrity sha512-pymy+AK12WO4safW1HmBpwagUQRl9cevNX+82AIAtU1pIdugqcH+nuYP03Ja6B+N4gliAaKWAegIBL/ymALPHA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx-source@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.0.0.tgz#28e00584f9598c0dd279f6280eee213fa0121c3c"
+  integrity sha512-OSeEpFJEH5dw/TtxTg4nijl4nHBbhqbKL94Xo/Y17WKIf2qJWeIk/QeXACF19lG1vMezkxqruwnTjVizaW7u7w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx@^7.0.0":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.1.6.tgz#e6188e7d2a2dcd2796d45a87f8b0a8c906f57d1a"
+  integrity sha512-iU/IUlPEYDRwuqLwqVobzPAZkBOQoZ9xRTBmj6ANuk5g/Egn/zdNGnXlSoKeNmKoYVeIRxx5GZhWmMhLik8dag==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-regenerator@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.0.0.tgz#5b41686b4ed40bef874d7ed6a84bdd849c13e0c1"
+  integrity sha512-sj2qzsEx8KDVv1QuJc/dEfilkg3RRPvPYx/VnKLtItVQRWt1Wqf5eVCOLZm29CiGFfYYsA3VPjfizTCV0S0Dlw==
+  dependencies:
+    regenerator-transform "^0.13.3"
+
+"@babel/plugin-transform-shorthand-properties@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.0.0.tgz#85f8af592dcc07647541a0350e8c95c7bf419d15"
+  integrity sha512-g/99LI4vm5iOf5r1Gdxq5Xmu91zvjhEG5+yZDJW268AZELAu4J1EiFLnkSG3yuUsZyOipVOVUKoGPYwfsTymhw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-spread@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.0.0.tgz#93583ce48dd8c85e53f3a46056c856e4af30b49b"
+  integrity sha512-L702YFy2EvirrR4shTj0g2xQp7aNwZoWNCkNu2mcoU0uyzMl0XRwDSwzB/xp6DSUFiBmEXuyAyEN16LsgVqGGQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-sticky-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.0.0.tgz#30a9d64ac2ab46eec087b8530535becd90e73366"
+  integrity sha512-LFUToxiyS/WD+XEWpkx/XJBrUXKewSZpzX68s+yEOtIbdnsRjpryDw9U06gYc6klYEij/+KQVRnD3nz3AoKmjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+
+"@babel/plugin-transform-template-literals@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.0.0.tgz#084f1952efe5b153ddae69eb8945f882c7a97c65"
+  integrity sha512-vA6rkTCabRZu7Nbl9DfLZE1imj4tzdWcg5vtdQGvj+OH9itNNB6hxuRMHuIY8SGnEt1T9g5foqs9LnrHzsqEFg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-typeof-symbol@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.0.0.tgz#4dcf1e52e943e5267b7313bff347fdbe0f81cec9"
+  integrity sha512-1r1X5DO78WnaAIvs5uC48t41LLckxsYklJrZjNKcevyz83sF2l4RHbw29qrCPr/6ksFsdfRpT/ZgxNWHXRnffg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-unicode-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.0.0.tgz#c6780e5b1863a76fe792d90eded9fcd5b51d68fc"
+  integrity sha512-uJBrJhBOEa3D033P95nPHu3nbFwFE9ZgXsfEitzoIXIwqAZWk7uXcg06yFKXz9FSxBH5ucgU/cYdX0IV8ldHKw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+    regexpu-core "^4.1.3"
+
+"@babel/preset-env@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.6.tgz#a0bf4b96b6bfcf6e000afc5b72b4abe7cc13ae97"
+  integrity sha512-YIBfpJNQMBkb6MCkjz/A9J76SNCSuGVamOVBgoUkLzpJD/z8ghHi9I42LQ4pulVX68N/MmImz6ZTixt7Azgexw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.1.0"
+    "@babel/plugin-proposal-json-strings" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.0.0"
+    "@babel/plugin-syntax-async-generators" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.1.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.1.5"
+    "@babel/plugin-transform-classes" "^7.1.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-dotall-regex" "^7.0.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.1.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.1.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-amd" "^7.1.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.1.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.0.0"
+    "@babel/plugin-transform-modules-umd" "^7.1.0"
+    "@babel/plugin-transform-new-target" "^7.0.0"
+    "@babel/plugin-transform-object-super" "^7.1.0"
+    "@babel/plugin-transform-parameters" "^7.1.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.0.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    browserslist "^4.1.0"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.3.0"
+
+"@babel/preset-flow@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
+  integrity sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+
+"@babel/preset-react@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
+  integrity sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+
+"@babel/template@^7.1.0", "@babel/template@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
+  integrity sha512-SY1MmplssORfFiLDcOETrW7fCLl+PavlwMh92rrGcikQaRq4iWPVH0MpwPpY3etVMx6RnDjXtr6VZYr/IbP/Ag==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.1.2"
+    "@babel/types" "^7.1.2"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.6.tgz#c8db9963ab4ce5b894222435482bd8ea854b7b5c"
+  integrity sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.1.6"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/parser" "^7.1.6"
+    "@babel/types" "^7.1.6"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
+"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.1.5", "@babel/types@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.6.tgz#0adb330c3a281348a190263aceb540e10f04bcce"
+  integrity sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
+"@webassemblyjs/ast@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
+  integrity sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/wast-parser" "1.7.11"
+
+"@webassemblyjs/floating-point-hex-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz#a69f0af6502eb9a3c045555b1a6129d3d3f2e313"
+  integrity sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg==
+
+"@webassemblyjs/helper-api-error@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz#c7b6bb8105f84039511a2b39ce494f193818a32a"
+  integrity sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg==
+
+"@webassemblyjs/helper-buffer@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz#3122d48dcc6c9456ed982debe16c8f37101df39b"
+  integrity sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w==
+
+"@webassemblyjs/helper-code-frame@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz#cf8f106e746662a0da29bdef635fcd3d1248364b"
+  integrity sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.7.11"
+
+"@webassemblyjs/helper-fsm@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz#df38882a624080d03f7503f93e3f17ac5ac01181"
+  integrity sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A==
+
+"@webassemblyjs/helper-module-context@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz#d874d722e51e62ac202476935d649c802fa0e209"
+  integrity sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg==
+
+"@webassemblyjs/helper-wasm-bytecode@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz#dd9a1e817f1c2eb105b4cf1013093cb9f3c9cb06"
+  integrity sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ==
+
+"@webassemblyjs/helper-wasm-section@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz#9c9ac41ecf9fbcfffc96f6d2675e2de33811e68a"
+  integrity sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+
+"@webassemblyjs/ieee754@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz#c95839eb63757a31880aaec7b6512d4191ac640b"
+  integrity sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.11.tgz#d7267a1ee9c4594fd3f7e37298818ec65687db63"
+  integrity sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw==
+  dependencies:
+    "@xtuc/long" "4.2.1"
+
+"@webassemblyjs/utf8@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.11.tgz#06d7218ea9fdc94a6793aa92208160db3d26ee82"
+  integrity sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA==
+
+"@webassemblyjs/wasm-edit@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz#8c74ca474d4f951d01dbae9bd70814ee22a82005"
+  integrity sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/helper-wasm-section" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+    "@webassemblyjs/wasm-opt" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+    "@webassemblyjs/wast-printer" "1.7.11"
+
+"@webassemblyjs/wasm-gen@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz#9bbba942f22375686a6fb759afcd7ac9c45da1a8"
+  integrity sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/ieee754" "1.7.11"
+    "@webassemblyjs/leb128" "1.7.11"
+    "@webassemblyjs/utf8" "1.7.11"
+
+"@webassemblyjs/wasm-opt@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz#b331e8e7cef8f8e2f007d42c3a36a0580a7d6ca7"
+  integrity sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+
+"@webassemblyjs/wasm-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz#6e3d20fa6a3519f6b084ef9391ad58211efb0a1a"
+  integrity sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-api-error" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/ieee754" "1.7.11"
+    "@webassemblyjs/leb128" "1.7.11"
+    "@webassemblyjs/utf8" "1.7.11"
+
+"@webassemblyjs/wast-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz#25bd117562ca8c002720ff8116ef9072d9ca869c"
+  integrity sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/floating-point-hex-parser" "1.7.11"
+    "@webassemblyjs/helper-api-error" "1.7.11"
+    "@webassemblyjs/helper-code-frame" "1.7.11"
+    "@webassemblyjs/helper-fsm" "1.7.11"
+    "@xtuc/long" "4.2.1"
+
+"@webassemblyjs/wast-printer@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz#c4245b6de242cb50a2cc950174fdbf65c78d7813"
+  integrity sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/wast-parser" "1.7.11"
+    "@xtuc/long" "4.2.1"
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.1.tgz#5c85d662f76fa1d34575766c5dcd6615abcd30d8"
+  integrity sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+  integrity sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg=
+
+JSONSelect@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.2.1.tgz#415418a526d33fe31d74b4defa3c836d485ec203"
+
+JSONStream@^1.0.4:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+abab@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+acorn-dynamic-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+  integrity sha512-zVWV8Z8lislJoOKKqdNMOB+s6+XV5WERty8MnKBeFgwA+19XJjJHs2RP5dzM57FftIs+jQnRToLiWazKr6sSWg==
+  dependencies:
+    acorn "^5.0.0"
+
+acorn-globals@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538"
+  dependencies:
+    acorn "^5.0.0"
+
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.4, acorn@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^5.0.0, acorn@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+
+acorn@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
+
+acorn@^5.6.2:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+
+add-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
+
+addons-linter@0.22.3:
+  version "0.22.3"
+  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-0.22.3.tgz#c954a32c569afd68281c37acb263c65374c6f5ad"
+  dependencies:
+    ajv "5.2.0"
+    chalk "1.1.3"
+    cheerio "0.22.0"
+    columnify "1.5.4"
+    crx-parser "0.1.2"
+    dispensary "0.10.10"
+    es6-promisify "5.0.0"
+    eslint "3.19.0"
+    eslint-plugin-no-unsafe-innerhtml "1.0.16"
+    esprima "3.1.3"
+    first-chunk-stream "2.0.0"
+    jed "1.1.1"
+    pino "^4.6.0"
+    postcss "6.0.2"
+    relaxed-json "1.0.1"
+    semver "5.3.0"
+    source-map-support "0.4.15"
+    strip-bom-stream "3.0.0"
+    whatwg-url "5.0.0"
+    xmldom "0.1.27"
+    yargs "8.0.2"
+    yauzl "2.8.0"
+
+adm-zip@^0.4.7:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
+  integrity sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==
+
+adm-zip@~0.4.x:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+ajv-errors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
+  integrity sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk=
+
+ajv-keywords@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+
+ajv-keywords@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
+  integrity sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=
+
+ajv@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^0.1.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^4.7.0:
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.2.tgz#f166c3c11cbc6cb9dcc102a5bcfe5b72c95287e6"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.1.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@^6.1.0:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.5.tgz#cf97cdade71c6399a92c6d6c4177381291b781a1"
+  integrity sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  dependencies:
+    string-width "^2.0.0"
+
+ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-escapes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
+ansi-styles@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"
+  dependencies:
+    color-convert "^1.0.0"
+
+ansi-styles@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+any-promise@^1.0.0, any-promise@^1.1.0, any-promise@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3, aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+archiver-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-1.3.0.tgz#e50b4c09c70bf3d680e32ff1b7994e9f9d895174"
+  dependencies:
+    glob "^7.0.0"
+    graceful-fs "^4.1.0"
+    lazystream "^1.0.0"
+    lodash "^4.8.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
+archiver@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.3.0.tgz#4f2194d6d8f99df3f531e6881f14f15d55faaf22"
+  dependencies:
+    archiver-utils "^1.3.0"
+    async "^2.0.0"
+    buffer-crc32 "^0.2.1"
+    glob "^7.0.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+    tar-stream "^1.5.0"
+    walkdir "^0.0.11"
+    zip-stream "^1.1.0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-from@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+
+array-ify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1, array-uniq@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1.js@^4.0.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+  integrity sha1-104bh+ev/A24qttwIfP+SBAasjQ=
+
+assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  integrity sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+  integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^1.4.0, async@^1.5.0, async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.0, async@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^2.1.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^2.1.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+async@~2.1.2:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+  integrity sha1-FDQt0428yU0OW4fXY81jYSwOeU8=
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
+
+aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.0.0:
+  version "6.3.21"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.3.21.tgz#807f72b7702508c3e577b29eebad0d833baa65f9"
+  dependencies:
+    babel-code-frame "^6.3.13"
+    babel-generator "^6.3.21"
+    babel-helpers "^6.3.13"
+    babel-messages "^6.3.13"
+    babel-register "^6.3.13"
+    babel-runtime "^5.0.0"
+    babel-template "^6.3.13"
+    babel-traverse "^6.3.21"
+    babel-types "^6.3.21"
+    babylon "^6.3.21"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.4.0"
+    lodash "^3.10.0"
+    minimatch "^2.0.3"
+    path-exists "^1.0.0"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    shebang-regex "^1.0.0"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-core@^6.22.0, babel-core@^6.7.2:
+  version "6.22.1"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-generator "^6.22.0"
+    babel-helpers "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-register "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.1"
+    babel-types "^6.22.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-core@^7.0.0-bridge:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
+babel-eslint@6:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-6.1.2.tgz#5293419fe3672d66598d327da9694567ba6a5f2f"
+  integrity sha1-UpNBn+NnLWZZjTJ9qWlFZ7pqXy8=
+  dependencies:
+    babel-traverse "^6.0.20"
+    babel-types "^6.0.19"
+    babylon "^6.0.18"
+    lodash.assign "^4.0.0"
+    lodash.pickby "^4.0.0"
+
+babel-generator@^6.18.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-generator@^6.22.0, babel-generator@^6.3.21:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.22.0.tgz#d642bf4961911a8adc7c692b0c9297f325cda805"
+  dependencies:
+    babel-messages "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
+babel-helper-call-delegate@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.22.0.tgz#119921b56120f17e9dae3f74b4f5cc7bcc1b37ef"
+  dependencies:
+    babel-helper-hoist-variables "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-define-map@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.22.0.tgz#9544e9502b2d6dfe7d00ff60e82bd5a7a89e95b7"
+  dependencies:
+    babel-helper-function-name "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+    lodash "^4.2.0"
+
+babel-helper-function-name@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.22.0.tgz#51f1bdc4bb89b15f57a9b249f33d742816dcbefc"
+  dependencies:
+    babel-helper-get-function-arity "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-get-function-arity@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.22.0.tgz#0beb464ad69dc7347410ac6ade9f03a50634f5ce"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-hoist-variables@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.22.0.tgz#3eacbf731d80705845dd2e9718f600cfb9b4ba72"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-optimise-call-expression@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.22.0.tgz#f8d5d4b40a6e2605a6a7f9d537b581bea3756d15"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-replace-supers@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.22.0.tgz#1fcee2270657548908c34db16bcc345f9850cf42"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helpers@^6.22.0, babel-helpers@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.22.0.tgz#d275f55f2252b8101bff07bc0c556deda657392c"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+
+babel-jest@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-22.1.0.tgz#7fae6f655fffe77e818a8c2868c754a42463fdfd"
+  dependencies:
+    babel-plugin-istanbul "^4.1.5"
+    babel-preset-jest "^22.1.0"
+
+babel-jest@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.6.0.tgz#a644232366557a2240a0c083da6b25786185a2f1"
+  integrity sha512-lqKGG6LYXYu+DQh/slrQ8nxXQkEkhugdXsU6St7GmhVS7Ilc/22ArwqXNJrf0QaOBjZB0360qZMwXqDYQHXaew==
+  dependencies:
+    babel-plugin-istanbul "^4.1.6"
+    babel-preset-jest "^23.2.0"
+
+babel-loader@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.4.tgz#7bbf20cbe4560629e2e41534147692d3fecbdce6"
+  integrity sha512-fhBhNkUToJcW9nV46v8w87AJOwAJDz84c1CL57n3Stj73FANM/b9TbCUK4YhdOwEyZ+OxhYpdeZDNzSI29Firw==
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    util.promisify "^1.0.0"
+
+babel-messages@^6.22.0, babel-messages@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.22.0.tgz#36066a214f1217e4ed4164867669ecb39e3ea575"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.7.2:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-istanbul@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
+  dependencies:
+    find-up "^2.1.0"
+    istanbul-lib-instrument "^1.7.5"
+    test-exclude "^4.1.1"
+
+babel-plugin-istanbul@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+    find-up "^2.1.0"
+    istanbul-lib-instrument "^1.10.1"
+    test-exclude "^4.2.1"
+
+babel-plugin-jest-hoist@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee"
+
+babel-plugin-jest-hoist@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
+  integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.5.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.5.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.5.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+
+babel-plugin-transform-class-properties@^6.6.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.22.0.tgz#aa78f8134495c7de06c097118ba061844e1dc1d8"
+  dependencies:
+    babel-helper-function-name "^6.22.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.5.2:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.7.1:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.22.0.tgz#00d6e3a0bebdcfe7536b9d653b44a9141e63e47e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.22.0.tgz#54d44998fd823d9dca15292324161c331c1b6f14"
+  dependencies:
+    babel-helper-define-map "^6.22.0"
+    babel-helper-function-name "^6.22.0"
+    babel-helper-optimise-call-expression "^6.22.0"
+    babel-helper-replace-supers "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.22.0.tgz#7c383e9629bba4820c11b0425bdd6290f7f057e7"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+
+babel-plugin-transform-es2015-destructuring@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.22.0.tgz#8e0af2f885a0b2cf999d47c4c1dd23ce88cfa4c6"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-for-of@^6.6.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.22.0.tgz#180467ad63aeea592a1caeee4bf1c8b3e2616265"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-literals@^6.5.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.7.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.22.0.tgz#6ca04e22b8e214fb50169730657e7a07dc941145"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-plugin-transform-es2015-object-super@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.22.0.tgz#daa60e114a042ea769dd53fe528fc82311eb98fc"
+  dependencies:
+    babel-helper-replace-supers "^6.22.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.7.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.22.0.tgz#57076069232019094f27da8c68bb7162fe208dbb"
+  dependencies:
+    babel-helper-call-delegate "^6.22.0"
+    babel-helper-get-function-arity "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.5.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.22.0.tgz#8ba776e0affaa60bff21e921403b8a652a2ff723"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-plugin-transform-es2015-spread@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es3-member-expression-literals@^6.5.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz#733d3444f3ecc41bef8ed1a6a4e09657b8969ebb"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es3-property-literals@^6.5.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz#b2078d5842e22abf40f73e8cde9cd3711abd5758"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.7.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-object-rest-spread@^6.6.5:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.22.0.tgz#1d419b55e68d2e4f64a5ff3373bd67d73c8e83bc"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-strict-mode@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.22.0.tgz#e008df01340fdc87e959da65991b7e05970c8c7c"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-polyfill@6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
+  dependencies:
+    babel-runtime "^6.9.1"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-polyfill@6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
+  dependencies:
+    babel-runtime "^6.20.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-preset-fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-1.0.0.tgz#c972e5c9b301d4ec9e7971f4aec3e14ac017a8b0"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.7.2"
+    babel-plugin-syntax-flow "^6.5.0"
+    babel-plugin-syntax-object-rest-spread "^6.5.0"
+    babel-plugin-syntax-trailing-function-commas "^6.5.0"
+    babel-plugin-transform-class-properties "^6.6.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.5.2"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.6.5"
+    babel-plugin-transform-es2015-block-scoping "^6.7.1"
+    babel-plugin-transform-es2015-classes "^6.6.5"
+    babel-plugin-transform-es2015-computed-properties "^6.6.5"
+    babel-plugin-transform-es2015-destructuring "^6.6.5"
+    babel-plugin-transform-es2015-for-of "^6.6.0"
+    babel-plugin-transform-es2015-literals "^6.5.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.7.0"
+    babel-plugin-transform-es2015-object-super "^6.6.5"
+    babel-plugin-transform-es2015-parameters "^6.7.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.5.0"
+    babel-plugin-transform-es2015-spread "^6.6.5"
+    babel-plugin-transform-es2015-template-literals "^6.6.5"
+    babel-plugin-transform-es3-member-expression-literals "^6.5.0"
+    babel-plugin-transform-es3-property-literals "^6.5.0"
+    babel-plugin-transform-flow-strip-types "^6.7.0"
+    babel-plugin-transform-object-rest-spread "^6.6.5"
+    object-assign "^4.0.1"
+
+babel-preset-jest@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.1.0.tgz#ff4e704102f9642765e2254226050561d8942ec9"
+  dependencies:
+    babel-plugin-jest-hoist "^22.1.0"
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+
+babel-preset-jest@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
+  integrity sha1-jsegOhOPABoaj7HoETZSvxpV2kY=
+  dependencies:
+    babel-plugin-jest-hoist "^23.2.0"
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+
+babel-register@^6.22.0, babel-register@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.22.0.tgz#a61dd83975f9ca4a9e7d6eff3059494cd5ea4c63"
+  dependencies:
+    babel-core "^6.22.0"
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@6.23.0, babel-runtime@^6.20.0, babel-runtime@^6.9.1:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^5.0.0:
+  version "5.8.38"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-5.8.38.tgz#1c0b02eb63312f5f087ff20450827b425c9d4c19"
+  dependencies:
+    core-js "^1.0.0"
+
+babel-runtime@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-template@^6.16.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-template@^6.22.0, babel-template@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.0.20, babel-traverse@^6.18.0, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.3.21:
+  version "6.22.1"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.22.1.tgz#3b95cd6b7427d6f1f757704908f2fc9748a5f59f"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+    babylon "^6.15.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.0.19, babel-types@^6.18.0, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babel-types@^6.22.0, babel-types@^6.3.21:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.22.0.tgz#2a447e8d0ea25d2512409e4175479fd78cc8b1db"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.0.18, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+babylon@^6.11.0, babylon@^6.15.0, babylon@^6.3.21:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-js@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
+  integrity sha1-EQHpVE9KdrG8OybUUsqW16NeeXg=
+
+base64-js@^1.0.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+  integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
+
+base64url@2.0.0, base64url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  dependencies:
+    tweetnacl "^0.14.3"
+
+beeper@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
+binary-extensions@^1.0.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
+  integrity sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==
+
+bl@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.0.tgz#1397e7ec42c5f5dc387470c500e34a9f6be9ea98"
+  dependencies:
+    readable-stream "^2.0.5"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.5.1:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
+  integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  integrity sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=
+  dependencies:
+    hoek "2.x.x"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+boxen@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.0.tgz#03478d84be7fe02189b80904d81d6a80384368f1"
+  dependencies:
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^1.0.0"
+
+brace-expansion@^1.0.0:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.0, braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+browser-process-hrtime@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
+
+browser-resolve@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
+  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
+  dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  integrity sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.4.tgz#4477b737db6a1b07077275b24791e680d4300425"
+  integrity sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA==
+  dependencies:
+    caniuse-lite "^1.0.30000899"
+    electron-to-chromium "^1.3.82"
+    node-releases "^1.0.1"
+
+bser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-crc32@^0.2.1, buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+  integrity sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
+
+buffer@^3.0.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-3.6.0.tgz#a72c936f77b96bf52f5f7e7b467180628551defb"
+  integrity sha1-pyyTb3e5a/UvX357RnGAYoVR3vs=
+  dependencies:
+    base64-js "0.0.8"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+
+bunyan@1.8.10:
+  version "1.8.10"
+  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.10.tgz#201fedd26c7080b632f416072f53a90b9a52981c"
+  optionalDependencies:
+    dtrace-provider "~0.8"
+    moment "^2.10.6"
+    mv "~2"
+    safe-json-stringify "~1"
+
+byline@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
+
+cacache@^11.0.2:
+  version "11.3.1"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.1.tgz#d09d25f6c4aca7a6d305d141ae332613aa1d515f"
+  integrity sha512-2PEw4cRRDu+iQvBTTuttQifacYjLPhET+SYO/gEFMy8uhi+jlJREDAjSF5FWSdV/Aw5h18caHA7vMTw2c+wDzA==
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    figgy-pudding "^3.1.0"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.3"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^6.0.0"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  dependencies:
+    callsites "^0.2.0"
+
+callsites@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
+
+caniuse-lite@^1.0.30000899:
+  version "1.0.30000910"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000910.tgz#755d5181d4b006e5a2b59b1ffa05d0a0470039f5"
+  integrity sha512-u/nxtHGAzCGZzIxt3dA/tpSPOcirBZFWKwz1EPz4aaupnBI2XR0Rbr74g0zc6Hzy41OEM4uMoZ38k56TpYAWjQ==
+
+capture-stack-trace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+  integrity sha1-cVuW6phBWTzDMGeSP17GDr2k99c=
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0, chalk@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chalk@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
+cheerio@0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash.assignin "^4.0.9"
+    lodash.bind "^4.1.4"
+    lodash.defaults "^4.0.1"
+    lodash.filter "^4.4.0"
+    lodash.flatten "^4.2.0"
+    lodash.foreach "^4.3.0"
+    lodash.map "^4.4.0"
+    lodash.merge "^4.4.0"
+    lodash.pick "^4.2.1"
+    lodash.reduce "^4.4.0"
+    lodash.reject "^4.4.0"
+    lodash.some "^4.4.0"
+
+child-process-promise@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/child-process-promise/-/child-process-promise-2.2.1.tgz#4730a11ef610fad450b8f223c79d31d7bdad8074"
+  dependencies:
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
+chokidar@^1.4.3:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+  integrity sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    lodash.debounce "^4.0.8"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.5"
+  optionalDependencies:
+    fsevents "^1.2.2"
+
+chownr@^1.0.1, chownr@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
+  integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
+
+chrome-launch@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chrome-launch/-/chrome-launch-1.1.4.tgz#c8985bd022635a5cc897099bafd19831838a7252"
+  dependencies:
+    chrome-location "^1.2.0"
+    quick-tmp "0.0.0"
+    rimraf "^2.2.8"
+    shallow-copy "0.0.1"
+
+chrome-location@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/chrome-location/-/chrome-location-1.2.1.tgz#6911511a4eac55027625c73b937ca5ca7ab94995"
+  dependencies:
+    userhome "^1.0.0"
+    which "^1.0.5"
+
+chrome-trace-event@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
+  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
+  dependencies:
+    tslib "^1.9.0"
+
+ci-info@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+circular-json@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+classnames@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.1.tgz#4d1a3d02d037d45e00b096c0be6f5496dcbf288a"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+
+cli-cursor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-cursor@^2.0.0, cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-spinners@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.0.0.tgz#ef987ed3d48391ac3dab9180b406a742180d6e6a"
+
+cli-width@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+
+clipboard-js@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/clipboard-js/-/clipboard-js-0.3.3.tgz#62264c17c80ebf84f4022286f032501e890b8922"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+cliui@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+clone-stats@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+
+clone@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
+cmd-shim@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-2.0.2.tgz#6fcbda99483a8fd15d7d30a196ca69d688a2efdb"
+  dependencies:
+    graceful-fs "^4.1.2"
+    mkdirp "~0.5.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.0.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
+
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+
+columnify@1.5.4, columnify@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
+  dependencies:
+    strip-ansi "^3.0.0"
+    wcwidth "^1.0.0"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+  integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+command-join@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
+
+commander@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commander@^2.6.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+commander@^2.9.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+commander@~2.17.1:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+compare-func@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
+  dependencies:
+    array-ify "^1.0.0"
+    dot-prop "^3.0.0"
+
+component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+  integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
+
+compress-commons@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.0.tgz#58587092ef20d37cb58baf000112c9278ff73b9f"
+  dependencies:
+    buffer-crc32 "^0.2.1"
+    crc32-stream "^2.0.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@^1.4.10, concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+configstore@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.0.tgz#45df907073e26dfa1cf4b2d52f5b60545eaa11d1"
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+
+constants-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+  integrity sha1-kld9tSe6bEzwpFaNhLwDH0QeIfI=
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
+
+content-type-parser@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+
+conventional-changelog-angular@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.1.tgz#e1434d017c854032b272f690424a8c0ca16dc318"
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.4.1"
+
+conventional-changelog-atom@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.0.tgz#72f18e5c74e3d8807411252fe013818ddffa7157"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-cli@^1.3.2:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.8.tgz#3b3f3591cb8d1f154bdb28e1819c5fcd8d967536"
+  dependencies:
+    add-stream "^1.0.0"
+    conventional-changelog "^1.1.10"
+    lodash "^4.1.0"
+    meow "^3.7.0"
+    tempfile "^1.1.1"
+
+conventional-changelog-codemirror@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.0.tgz#4dd8abb9f521a638cab49f683496c26b8a5c6d31"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.0.tgz#1bdf7d21f3d066427ff9e07db0a2c5dd60015b9f"
+  dependencies:
+    conventional-changelog-writer "^3.0.0"
+    conventional-commits-parser "^2.1.0"
+    dateformat "^1.0.12"
+    get-pkg-repo "^1.0.0"
+    git-raw-commits "^1.3.0"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^1.3.0"
+    lodash "^4.0.0"
+    normalize-package-data "^2.3.5"
+    q "^1.4.1"
+    read-pkg "^1.1.0"
+    read-pkg-up "^1.0.1"
+    through2 "^2.0.0"
+
+conventional-changelog-ember@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.1.tgz#bc71dc0a57e5c7ed0bf0538c32e44220691871d1"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-eslint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.0.tgz#c63cd9d6f09d4e204530ae7369d7a20a167bc6bc"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-express@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.0.tgz#5ed006f48682d8615ee0ab5f53cacb26fbd3e1c8"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-jquery@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz#0208397162e3846986e71273b6c79c5b5f80f510"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-jscs@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz#0479eb443cc7d72c58bf0bcf0ef1d444a92f0e5c"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-jshint@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.0.tgz#0393fd468113baf73cba911d17c5826423366a28"
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.4.1"
+
+conventional-changelog-writer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.0.tgz#e106154ed94341e387d717b61be2181ff53254cc"
+  dependencies:
+    compare-func "^1.3.1"
+    conventional-commits-filter "^1.1.1"
+    dateformat "^1.0.11"
+    handlebars "^4.0.2"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.0.0"
+    meow "^3.3.0"
+    semver "^5.0.1"
+    split "^1.0.0"
+    through2 "^2.0.0"
+
+conventional-changelog@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.10.tgz#d9bb3aad9086152d283e4707fb45a5b7a28e9e98"
+  dependencies:
+    conventional-changelog-angular "^1.6.1"
+    conventional-changelog-atom "^0.2.0"
+    conventional-changelog-codemirror "^0.3.0"
+    conventional-changelog-core "^2.0.0"
+    conventional-changelog-ember "^0.3.1"
+    conventional-changelog-eslint "^1.0.0"
+    conventional-changelog-express "^0.3.0"
+    conventional-changelog-jquery "^0.1.0"
+    conventional-changelog-jscs "^0.1.0"
+    conventional-changelog-jshint "^0.3.0"
+
+conventional-commits-filter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.1.tgz#72172319c0c88328a015b30686b55527b3a5e54a"
+  dependencies:
+    is-subset "^0.1.1"
+    modify-values "^1.0.0"
+
+conventional-commits-parser@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.0.tgz#9b4b7c91124bf2a1a9a2cc1c72760d382cbbb229"
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.0"
+    lodash "^4.2.1"
+    meow "^3.3.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+    trim-off-newlines "^1.0.0"
+
+conventional-recommended-bump@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-1.2.0.tgz#864fb955825d9c6056620cee4657b0dc0628a3e9"
+  dependencies:
+    concat-stream "^1.4.10"
+    conventional-commits-filter "^1.1.1"
+    conventional-commits-parser "^2.1.0"
+    git-raw-commits "^1.3.0"
+    git-semver-tags "^1.3.0"
+    meow "^3.3.0"
+    object-assign "^4.0.1"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+convert-source-map@^1.4.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+core-util-is@1.0.2, core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+crc32-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
+  dependencies:
+    crc "^3.4.4"
+    readable-stream "^2.0.0"
+
+crc@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"
+
+create-ecdh@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-error-class@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+cross-spawn-async@^2.2.2:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
+  dependencies:
+    lru-cache "^4.0.0"
+    which "^1.2.8"
+
+cross-spawn@^2.1.5:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.2.3.tgz#fac56202dfd3d0dd861778f2da203bf434bb821c"
+  dependencies:
+    cross-spawn-async "^2.2.2"
+    spawn-sync "^1.0.15"
+
+cross-spawn@^4.0.0, cross-spawn@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+crx-parser@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/crx-parser/-/crx-parser-0.1.2.tgz#7eeeed9eddc95e22c189382e34624044a89a5a6d"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  integrity sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=
+  dependencies:
+    boom "2.x.x"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+crypto-browserify@~3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+  integrity sha1-ubEdvm2WUd2IKgHmzEZ99xjs8Yk=
+  dependencies:
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+crypto-random-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+
+css-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
+  integrity sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash "^4.17.11"
+    postcss "^6.0.23"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
+css-select@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d"
+  integrity sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+  integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+dargs@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
+
+dateformat@^1.0.11, dateformat@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
+  dependencies:
+    get-stdin "^4.0.1"
+    meow "^3.3.0"
+
+dateformat@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
+
+debounce@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.0.2.tgz#503cc674d8d7f737099664fb75ddbd36b9626dc6"
+
+debug@^2.1.1, debug@^2.2.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
+  dependencies:
+    ms "0.7.2"
+
+debug@^2.1.2, debug@^2.3.3, debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
+  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@1.2.0, decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+  integrity sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+deepcopy@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-0.6.3.tgz#634780f2f8656ab771af8fa8431ed1ccee55c7b0"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+defaults@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  integrity sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-indent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+
+diff@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dispensary@0.10.10:
+  version "0.10.10"
+  resolved "https://registry.yarnpkg.com/dispensary/-/dispensary-0.10.10.tgz#cb7140c2e98ae84b951ebd6816760e4d402fc31e"
+  dependencies:
+    array-from "2.1.1"
+    async "^2.0.0"
+    eslint "3.19.0"
+    natural-compare-lite "^1.4.0"
+    pino "^4.6.0"
+    request "^2.81.0"
+    semver "5.3.0"
+    sha.js "^2.4.4"
+    source-map-support "0.4.15"
+    yargs "^8.0.1"
+
+doctrine@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+doctrine@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-serializer@0, dom-serializer@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
+
+domelementtype@1, domelementtype@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domexception@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  dependencies:
+    webidl-conversions "^4.0.2"
+
+domhandler@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.5.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  dependencies:
+    is-obj "^1.0.0"
+
+dot-prop@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1"
+  dependencies:
+    is-obj "^1.0.0"
+
+dtrace-provider@~0.8:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.3.tgz#ba1bfc6493285ccfcfc6ab69cd5c61d74c2a43bf"
+  dependencies:
+    nan "^2.3.3"
+
+duplexer2@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  dependencies:
+    readable-stream "~1.1.9"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
+  integrity sha512-vM58DwdnKmty+FSPzT14K9JXb90H+j5emaR4KYbr2KTIz00WHGbWOe5ghQTx233ZCLZtrGDALzKwcjEtSt35mA==
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+ecdsa-sig-formatter@1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz#4bc926274ec3b5abb5016e7e1d60921ac262b2a1"
+  dependencies:
+    base64url "^2.0.0"
+    safe-buffer "^5.0.1"
+
+electron-to-chromium@^1.3.82:
+  version "1.3.84"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.84.tgz#2e55df59e818f150a9f61b53471ebf4f0feecc65"
+  integrity sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw==
+
+elliptic@^6.0.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
+  integrity sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.0"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+end-of-stream@^1.0.0, end-of-stream@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
+  dependencies:
+    once "~1.3.0"
+
+end-of-stream@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
+
+entities@^1.1.1, entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-ex@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.2.tgz#4ae8dbaa2bf90a8b450707b9149dcabca135520d"
+  integrity sha512-E1fPutRDdIj/hohG0UpT5mayXNCxXP9d+snxFsPU9X0XgccOumKraa3juDMwTUyi7+Bu5+mCGagjg4IYeNbOdw==
+  dependencies:
+    stackframe "^1.0.4"
+
+es-abstract@^1.5.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-error@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.0.tgz#f094c7041f662599bb12720da059d6b9c7ff0f40"
+
+es6-error@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-map@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-set "~0.1.3"
+    es6-symbol "~3.1.0"
+    event-emitter "~0.3.4"
+
+es6-promise@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-2.3.0.tgz#96edb9f2fdb01995822b263dd8aadab6748181bc"
+
+es6-promise@^4.0.3:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
+es6-promisify@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  dependencies:
+    es6-promise "^4.0.3"
+
+es6-set@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-symbol "3"
+    event-emitter "~0.3.4"
+
+es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-symbol@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.0.2.tgz#1e928878c6f5e63541625b4bb4df4af07d154219"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.10"
+
+es6-weak-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.8"
+    es6-iterator "2"
+    es6-symbol "3"
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escodegen@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.5.6"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-plugin-no-unsafe-innerhtml@1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz#7d02878c8e9bf7916b88836d5ac122b42f151932"
+  dependencies:
+    eslint "^3.7.1"
+
+eslint-plugin-react@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-5.1.1.tgz#869b1dc078a34fe7eab1f587c2bc3cd998befdd6"
+
+eslint-scope@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
+  integrity sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint@2.10.2:
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.10.2.tgz#b2309482fef043d3203365a321285e6cce01c3d7"
+  dependencies:
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.1"
+    es6-map "^0.1.3"
+    escope "^3.6.0"
+    espree "3.1.4"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^1.1.1"
+    glob "^7.0.3"
+    globals "^9.2.0"
+    ignore "^3.1.2"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    optionator "^0.8.1"
+    path-is-absolute "^1.0.0"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.6.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+eslint@3.19.0, eslint@^3.7.1:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.5.2"
+    debug "^2.1.1"
+    doctrine "^2.0.0"
+    escope "^3.6.0"
+    espree "^3.4.0"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    glob "^7.0.3"
+    globals "^9.14.0"
+    ignore "^3.2.0"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.7.5"
+    strip-bom "^3.0.0"
+    strip-json-comments "~2.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+espree@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.1.4.tgz#0726d7ac83af97a7c8498da9b363a3609d2a68a1"
+  dependencies:
+    acorn "^3.1.0"
+    acorn-jsx "^3.0.0"
+
+espree@^3.4.0:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.3.tgz#2910b5ccd49ce893c2ffffaab4fd8b3a31b82374"
+  dependencies:
+    acorn "^5.0.1"
+    acorn-jsx "^3.0.0"
+
+esprima@3.1.3, esprima@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
+esrecurse@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  dependencies:
+    estraverse "~4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estraverse@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+event-emitter@~0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.7"
+
+event-to-promise@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/event-to-promise/-/event-to-promise-0.8.0.tgz#4b84f11772b6f25f7752fc74d971531ac6f5b626"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
+
+events@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+  integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
+  dependencies:
+    merge "^1.1.3"
+
+execa@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36"
+  dependencies:
+    cross-spawn "^4.0.0"
+    get-stream "^2.2.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
+  dependencies:
+    fill-range "^2.1.0"
+
+expect@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-22.1.0.tgz#f8f9b019ab275d859cbefed531fbaefe8972431d"
+  dependencies:
+    ansi-styles "^3.2.0"
+    jest-diff "^22.1.0"
+    jest-get-type "^22.1.0"
+    jest-matcher-utils "^22.1.0"
+    jest-message-util "^22.1.0"
+    jest-regex-util "^22.1.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@~3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+external-editor@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+fancy-log@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.0.tgz#45be17d02bb9917d60ccffd4995c999e6c8c9948"
+  dependencies:
+    chalk "^1.1.1"
+    time-stamp "^1.0.0"
+
+fast-deep-equal@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz#5c6f4599aba6b333ee3342e2ed978672f1001f8d"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+
+fast-json-parse@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.2.tgz#3fb1ca12db68a85933612cc3fab4d7060cfff1d7"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fast-safe-stringify@^1.0.8, fast-safe-stringify@^1.1.11:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.2.0.tgz#ebd42666fd18fe4f2ba4f0d295065f3f85cade96"
+
+fastparse@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
+fb-watchman@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  dependencies:
+    bser "^2.0.0"
+
+fbjs-scripts@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz#9da67cec6d62fddc94b099563f6c48a749900aef"
+  dependencies:
+    babel-core "^6.7.2"
+    babel-preset-fbjs "^1.0.0"
+    core-js "^1.0.0"
+    cross-spawn "^2.1.5"
+    gulp-util "^3.0.4"
+    object-assign "^4.0.1"
+    semver "^5.1.0"
+    through2 "^2.0.0"
+
+fbjs@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.5.1.tgz#db17fe609777a17a25b6c8b045303adad3339203"
+  dependencies:
+    core-js "^1.0.0"
+    loose-envify "^1.0.0"
+    promise "^7.0.3"
+    ua-parser-js "^0.7.9"
+    whatwg-fetch "^0.9.0"
+
+fbjs@^0.8.16:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
+fbjs@^0.8.9:
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  dependencies:
+    pend "~1.2.0"
+
+figgy-pudding@^3.1.0, figgy-pudding@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
+  integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+
+figures@^1.3.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-entry-cache@^1.1.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
+
+fileset@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+fill-range@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
+find-cache-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
+  integrity sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^3.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+firefox-client@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/firefox-client/-/firefox-client-0.3.0.tgz#3794460f6eb6afcf41376addcbc7462e24a4cd8b"
+  dependencies:
+    colors "0.5.x"
+    js-select "~0.6.0"
+
+firefox-profile@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-0.5.0.tgz#036de91fe3ff218d9ed8252d924f49bca0b672bd"
+  dependencies:
+    adm-zip "~0.4.x"
+    archiver "~1.3.0"
+    async "~2.1.2"
+    fs-extra "~2.1.2"
+    ini "~1.3.3"
+    jetpack-id "1.0.0"
+    lazystream "~1.0.0"
+    lodash "~4.17.2"
+    minimist "^1.1.1"
+    uuid "^3.0.0"
+    xml2js "~0.4.4"
+
+firefox-profile@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.0.2.tgz#aa6759d60e729105231c47a2f41831f3e9330b66"
+  dependencies:
+    adm-zip "~0.4.x"
+    archiver "~1.3.0"
+    async "~2.4.1"
+    fs-extra "~2.1.2"
+    ini "~1.3.3"
+    jetpack-id "1.0.0"
+    lazystream "~1.0.0"
+    lodash "~4.17.2"
+    minimist "^1.1.1"
+    uuid "^3.0.0"
+    xml2js "~0.4.4"
+
+first-chunk-stream@2.0.0, first-chunk-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
+  dependencies:
+    readable-stream "^2.0.2"
+
+first-match@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/first-match/-/first-match-0.0.1.tgz#a60ec642700f0f437234ebb7ec3f382476e542fd"
+
+flat-cache@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatstr@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3"
+
+flow-bin@^0.91.0:
+  version "0.91.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.91.0.tgz#f5c89729f74b2ccbd47df6fbfadbdcc89cc1e478"
+  integrity sha512-j+L+xNiUYnZZ27MjVI0y2c9474ZHOvdSQq0Tjwh56mEA7tfxYqp5Dcb6aZSwvs3tGMTjCrZow9aUlZf3OoRyDQ==
+
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  integrity sha512-calZMC10u0FMUqoiunI2AiGIIUtUIvifNwkHhNupZH4cbNnW1Itkoh/Nf5HFYmDrwWPjrUxpkZT0KhuCq0jmGw==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+for-in@^1.0.1, for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
+  dependencies:
+    for-in "^1.0.1"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  integrity sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
+  dependencies:
+    map-cache "^0.2.2"
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+fs-extra@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@~2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+
+fs-minipass@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  integrity sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==
+  dependencies:
+    minipass "^2.2.1"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@^1.0.0, fsevents@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+  integrity sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
+fsevents@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+fx-runner@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.7.tgz#c102cfdf21234c2dbd16723dccb1186f99c0b641"
+  dependencies:
+    commander "2.9.0"
+    lodash "3.10.1"
+    shell-quote "1.6.1"
+    spawn-sync "1.0.15"
+    when "3.7.7"
+    which "1.2.4"
+    winreg "0.0.12"
+
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+generate-function@^2.0.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.3.1.tgz#f069617690c10c868e73b8465746764f97c3479f"
+  integrity sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==
+  dependencies:
+    is-property "^1.0.2"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-pkg-repo@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    meow "^3.3.0"
+    normalize-package-data "^2.3.0"
+    parse-github-repo-url "^1.3.0"
+    through2 "^2.0.0"
+
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  dependencies:
+    assert-plus "^1.0.0"
+
+gh-pages@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-1.0.0.tgz#4a46f4c25439f7a2b7e6835504d4a49e949f04ca"
+  dependencies:
+    async "2.1.4"
+    base64url "^2.0.0"
+    commander "2.9.0"
+    fs-extra "^3.0.1"
+    globby "^6.1.0"
+    graceful-fs "4.1.11"
+    rimraf "^2.5.4"
+
+git-raw-commits@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.0.tgz#0bc8596e90d5ffe736f7f5546bd2d12f73abaac6"
+  dependencies:
+    dargs "^4.0.1"
+    lodash.template "^4.0.2"
+    meow "^3.3.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+
+git-remote-origin-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
+  dependencies:
+    gitconfiglocal "^1.0.0"
+    pify "^2.3.0"
+
+git-rev-sync@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/git-rev-sync/-/git-rev-sync-1.9.1.tgz#a0c2e3dd392abcf6b76962e27fc75fb3223449ce"
+  dependencies:
+    escape-string-regexp "1.0.5"
+    graceful-fs "4.1.11"
+    shelljs "0.7.7"
+
+git-semver-tags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.0.tgz#b154833a6ab5c360c0ad3b1aa9b8f12ea06de919"
+  dependencies:
+    meow "^3.3.0"
+    semver "^5.0.1"
+
+gitconfiglocal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
+  dependencies:
+    ini "^1.3.2"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.5:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.1, glob@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-modules-path@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.0.tgz#b0e2bac6beac39745f7db5c59d26a36a0b94f7dc"
+  integrity sha512-HchvMJNYh9dGSCy8pOQ2O8u/hoXaL+0XhnrwH0RyLiSXMMTl9W3N6KUU73+JFOg5PGjtzl6VZzUQsnrpm7Szag==
+
+globals@^11.1.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.9.0.tgz#bde236808e987f290768a93d065060d78e6ab249"
+  integrity sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg==
+
+globals@^9.0.0, globals@^9.2.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
+
+globals@^9.14.0, globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+glogg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.0.tgz#7fe0f199f57ac906cf512feead8f90ee4a284fc5"
+  dependencies:
+    sparkles "^1.0.0"
+
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  dependencies:
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
+
+graceful-fs@4.1.11, graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+graceful-fs@^4.1.2:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
+  integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+gulp-util@^3.0.4:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
+  dependencies:
+    array-differ "^1.0.0"
+    array-uniq "^1.0.2"
+    beeper "^1.0.0"
+    chalk "^1.0.0"
+    dateformat "^2.0.0"
+    fancy-log "^1.1.0"
+    gulplog "^1.0.0"
+    has-gulplog "^0.1.0"
+    lodash._reescape "^3.0.0"
+    lodash._reevaluate "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.template "^3.0.0"
+    minimist "^1.1.0"
+    multipipe "^0.1.2"
+    object-assign "^3.0.0"
+    replace-ext "0.0.1"
+    through2 "^2.0.0"
+    vinyl "^0.5.0"
+
+gulplog@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
+  dependencies:
+    glogg "^1.0.0"
+
+handlebars@^4.0.2, handlebars@^4.0.3:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  dependencies:
+    async "^1.4.0"
+    optimist "^0.6.1"
+    source-map "^0.4.4"
+  optionalDependencies:
+    uglify-js "^2.6"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  integrity sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-gulplog@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
+  dependencies:
+    sparkles "^1.0.0"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
+  integrity sha512-eWI5HG9Np+eHV1KQhisXWwM+4EPPYe5dFX1UZZH7k/E3JzDEazVH+VGlZi6R94ZqImq+A3D1mCEtrFIfg/E7sA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hmac-drbg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+  integrity sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+hosted-git-info@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+htmlparser2@^3.9.1:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  integrity sha1-M3la3nLfiKz7/TZ3PO/tp2RzWyA=
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  integrity sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+  integrity sha1-s//f5zSyo9Sp79WOhlTJH86G6v0=
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+iconv-lite@0.4.19, iconv-lite@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+iconv-lite@^0.4.4:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+iconv-lite@~0.4.13:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  integrity sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=
+  dependencies:
+    postcss "^6.0.1"
+
+ieee754@^1.1.4:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+  integrity sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+
+ignore-walk@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  integrity sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==
+  dependencies:
+    minimatch "^3.0.4"
+
+ignore@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
+
+ignore@^3.2.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+
+immutable@3.7.6:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+
+ini@^1.3.2, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+
+ini@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
+inquirer@^3.2.2:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.4"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+interpret@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
+
+interpret@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+  integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=
+
+invariant@^2.2.0, invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
+
+is-absolute@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
+  dependencies:
+    is-relative "^0.1.0"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-ci@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  dependencies:
+    ci-info "^1.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-generator-fn@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  integrity sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+  integrity sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==
+
+is-my-json-valid@^2.10.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-my-json-valid@^2.12.4:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz#8fd6e40363cd06b963fa877d444bfb5eddc62175"
+  integrity sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0, is-property@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+  integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-relative@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
+
+is-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+is-retry-allowed@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-text-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
+  dependencies:
+    text-extensions "^1.0.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-utf8@^0.2.0, is-utf8@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isemail@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
+istanbul-api@^1.1.14:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.1.0"
+    istanbul-lib-instrument "^1.9.1"
+    istanbul-lib-report "^1.1.2"
+    istanbul-lib-source-maps "^1.2.2"
+    istanbul-reports "^1.1.3"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
+
+istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-hook@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.10.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.1"
+    semver "^5.3.0"
+
+istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.1.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+  dependencies:
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.2.1, istanbul-lib-source-maps@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+  dependencies:
+    handlebars "^4.0.3"
+
+jed@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
+
+jest-changed-files@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.1.4.tgz#1f7844bcb739dec07e5899a633c0cb6d5069834e"
+  dependencies:
+    throat "^4.0.0"
+
+jest-cli@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.1.4.tgz#0fe9f3ac881b0cdc00227114c58583a2ebefcc04"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    import-local "^1.0.0"
+    is-ci "^1.0.10"
+    istanbul-api "^1.1.14"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-instrument "^1.8.0"
+    istanbul-lib-source-maps "^1.2.1"
+    jest-changed-files "^22.1.4"
+    jest-config "^22.1.4"
+    jest-environment-jsdom "^22.1.4"
+    jest-get-type "^22.1.0"
+    jest-haste-map "^22.1.0"
+    jest-message-util "^22.1.0"
+    jest-regex-util "^22.1.0"
+    jest-resolve-dependencies "^22.1.0"
+    jest-runner "^22.1.4"
+    jest-runtime "^22.1.4"
+    jest-snapshot "^22.1.2"
+    jest-util "^22.1.4"
+    jest-worker "^22.1.0"
+    micromatch "^2.3.11"
+    node-notifier "^5.1.2"
+    realpath-native "^1.0.0"
+    rimraf "^2.5.4"
+    slash "^1.0.0"
+    string-length "^2.0.0"
+    strip-ansi "^4.0.0"
+    which "^1.2.12"
+    yargs "^10.0.3"
+
+jest-config@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.1.4.tgz#075ffacce83c3e38cf85b1b9ba0d21bd3ee27ad0"
+  dependencies:
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^22.1.4"
+    jest-environment-node "^22.1.4"
+    jest-get-type "^22.1.0"
+    jest-jasmine2 "^22.1.4"
+    jest-regex-util "^22.1.0"
+    jest-resolve "^22.1.4"
+    jest-util "^22.1.4"
+    jest-validate "^22.1.2"
+    pretty-format "^22.1.0"
+
+jest-diff@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.1.0.tgz#0fad9d96c87b453896bf939df3dc8aac6919ac38"
+  dependencies:
+    chalk "^2.0.1"
+    diff "^3.2.0"
+    jest-get-type "^22.1.0"
+    pretty-format "^22.1.0"
+
+jest-docblock@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.1.0.tgz#3fe5986d5444cbcb149746eb4b07c57c5a464dfd"
+  dependencies:
+    detect-newline "^2.1.0"
+
+jest-environment-jsdom@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.1.4.tgz#704518ce8375f7ec5de048d1e9c4268b08a03e00"
+  dependencies:
+    jest-mock "^22.1.0"
+    jest-util "^22.1.4"
+    jsdom "^11.5.1"
+
+jest-environment-node@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.1.4.tgz#0f2946e8f8686ce6c5d8fa280ce1cd8d58e869eb"
+  dependencies:
+    jest-mock "^22.1.0"
+    jest-util "^22.1.4"
+
+jest-get-type@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.1.0.tgz#4e90af298ed6181edc85d2da500dbd2753e0d5a9"
+
+jest-haste-map@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.1.0.tgz#1174c6ff393f9818ebf1163710d8868b5370da2a"
+  dependencies:
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.11"
+    jest-docblock "^22.1.0"
+    jest-worker "^22.1.0"
+    micromatch "^2.3.11"
+    sane "^2.0.0"
+
+jest-jasmine2@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.1.4.tgz#cada0baf50a220c616a9575728b80d4ddedebe8b"
+  dependencies:
+    callsites "^2.0.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^22.1.0"
+    graceful-fs "^4.1.11"
+    is-generator-fn "^1.0.0"
+    jest-diff "^22.1.0"
+    jest-matcher-utils "^22.1.0"
+    jest-message-util "^22.1.0"
+    jest-snapshot "^22.1.2"
+    source-map-support "^0.5.0"
+
+jest-leak-detector@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.1.0.tgz#08376644cee07103da069baac19adb0299b772c2"
+  dependencies:
+    pretty-format "^22.1.0"
+
+jest-matcher-utils@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.1.0.tgz#e164665b5d313636ac29f7f6fe9ef0a6ce04febc"
+  dependencies:
+    chalk "^2.0.1"
+    jest-get-type "^22.1.0"
+    pretty-format "^22.1.0"
+
+jest-message-util@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.1.0.tgz#51ba0794cb6e579bfc4e9adfac452f9f1a0293fc"
+  dependencies:
+    "@babel/code-frame" "^7.0.0-beta.35"
+    chalk "^2.0.1"
+    micromatch "^2.3.11"
+    slash "^1.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.1.0.tgz#87ec21c0599325671c9a23ad0e05c86fb5879b61"
+
+jest-regex-util@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-22.1.0.tgz#5daf2fe270074b6da63e5d85f1c9acc866768f53"
+
+jest-resolve-dependencies@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-22.1.0.tgz#340e4139fb13315cd43abc054e6c06136be51e31"
+  dependencies:
+    jest-regex-util "^22.1.0"
+
+jest-resolve@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.1.4.tgz#72b9b371eaac48f84aad4ad732222ffe37692602"
+  dependencies:
+    browser-resolve "^1.11.2"
+    chalk "^2.0.1"
+
+jest-runner@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.1.4.tgz#e039039110cb1b31febc0f99e349bf7c94304a2f"
+  dependencies:
+    exit "^0.1.2"
+    jest-config "^22.1.4"
+    jest-docblock "^22.1.0"
+    jest-haste-map "^22.1.0"
+    jest-jasmine2 "^22.1.4"
+    jest-leak-detector "^22.1.0"
+    jest-message-util "^22.1.0"
+    jest-runtime "^22.1.4"
+    jest-util "^22.1.4"
+    jest-worker "^22.1.0"
+    throat "^4.0.0"
+
+jest-runtime@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.1.4.tgz#1474d9f5cda518b702e0b25a17d4ef3fc563a20c"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^22.1.0"
+    babel-plugin-istanbul "^4.1.5"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    exit "^0.1.2"
+    graceful-fs "^4.1.11"
+    jest-config "^22.1.4"
+    jest-haste-map "^22.1.0"
+    jest-regex-util "^22.1.0"
+    jest-resolve "^22.1.4"
+    jest-util "^22.1.4"
+    json-stable-stringify "^1.0.1"
+    micromatch "^2.3.11"
+    realpath-native "^1.0.0"
+    slash "^1.0.0"
+    strip-bom "3.0.0"
+    write-file-atomic "^2.1.0"
+    yargs "^10.0.3"
+
+jest-snapshot@^22.1.2:
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.1.2.tgz#b270cf6e3098f33aceeafda02b13eb0933dc6139"
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^22.1.0"
+    jest-matcher-utils "^22.1.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^22.1.0"
+
+jest-util@^22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.1.4.tgz#ac8cbd43ee654102f1941f3f0e9d1d789a8b6a9b"
+  dependencies:
+    callsites "^2.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.11"
+    is-ci "^1.0.10"
+    jest-message-util "^22.1.0"
+    jest-validate "^22.1.2"
+    mkdirp "^0.5.1"
+
+jest-validate@^22.1.2:
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.1.2.tgz#c3b06bcba7bd9a850919fe336b5f2a8c3a239404"
+  dependencies:
+    chalk "^2.0.1"
+    jest-get-type "^22.1.0"
+    leven "^2.1.0"
+    pretty-format "^22.1.0"
+
+jest-worker@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.1.0.tgz#0987832fe58fbdc205357f4c19b992446368cafb"
+  dependencies:
+    merge-stream "^1.0.1"
+
+jest@22.1.4:
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-22.1.4.tgz#9ec71373a38f40ff92a3e5e96ae85687c181bb72"
+  dependencies:
+    jest-cli "^22.1.4"
+
+jetpack-id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
+
+joi@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
+  dependencies:
+    hoek "2.x.x"
+    isemail "1.x.x"
+    moment "2.x.x"
+    topo "1.x.x"
+
+js-levenshtein@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
+  integrity sha512-PxfGzSs0ztShKrUYPIn5r0MtyAhYcCwmndozzpz8YObbPnD1jFxzlBGbRnX2mIu6Z13xN6+PTu05TQFnZFlzow==
+
+js-select@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/js-select/-/js-select-0.6.0.tgz#c284e22824d5927aec962dcdf247174aefb0d190"
+  dependencies:
+    JSONSelect "0.2.1"
+    traverse "0.4.x"
+
+js-tokens@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
+
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.5.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+js-yaml@^3.7.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^11.5.1:
+  version "11.6.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
+  dependencies:
+    abab "^1.0.4"
+    acorn "^5.3.0"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    browser-process-hrtime "^0.1.2"
+    content-type-parser "^1.0.2"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    domexception "^1.0.0"
+    escodegen "^1.9.0"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.2.0"
+    nwmatcher "^1.4.3"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.83.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.3"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-url "^6.4.0"
+    ws "^4.0.0"
+    xml-name-validator "^3.0.0"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a"
+
+json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
+
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+json5@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.4.0.tgz#054352e4c4c80c86c0923877d449de176a732c8d"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
+json5@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
+  integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.0.tgz#92e7c7444e5ffd5fa32e6a9ae8b85034df8347d0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+  integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
+
+jsonwebtoken@7.1.9:
+  version "7.1.9"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.1.9.tgz#847804e5258bec5a9499a8dc4a5e7a3bae08d58a"
+  dependencies:
+    joi "^6.10.1"
+    jws "^3.1.3"
+    lodash.once "^4.0.0"
+    ms "^0.7.1"
+    xtend "^4.0.1"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jszip@^2.4.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
+  dependencies:
+    pako "~1.0.2"
+
+jwa@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.5.tgz#a0552ce0220742cd52e153774a32905c30e756e5"
+  dependencies:
+    base64url "2.0.0"
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.9"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.4.tgz#f9e8b9338e8a847277d6444b1464f61880e050a2"
+  dependencies:
+    base64url "^2.0.0"
+    jwa "^1.1.4"
+    safe-buffer "^5.0.1"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  dependencies:
+    package-json "^4.0.0"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
+lazystream@^1.0.0, lazystream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  dependencies:
+    readable-stream "^2.0.5"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
+  dependencies:
+    invert-kv "^2.0.0"
+
+left-pad@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
+
+lerna@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.8.0.tgz#309a816fca5c73ea38f9f20e314a836e99b54cf0"
+  dependencies:
+    async "^1.5.0"
+    chalk "^2.1.0"
+    cmd-shim "^2.0.2"
+    columnify "^1.5.4"
+    command-join "^2.0.0"
+    conventional-changelog-cli "^1.3.2"
+    conventional-recommended-bump "^1.0.1"
+    dedent "^0.7.0"
+    execa "^0.8.0"
+    find-up "^2.1.0"
+    fs-extra "^4.0.1"
+    get-port "^3.2.0"
+    glob "^7.1.2"
+    glob-parent "^3.1.0"
+    globby "^6.1.0"
+    graceful-fs "^4.1.11"
+    hosted-git-info "^2.5.0"
+    inquirer "^3.2.2"
+    is-ci "^1.0.10"
+    load-json-file "^4.0.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    npmlog "^4.1.2"
+    p-finally "^1.0.0"
+    package-json "^4.0.1"
+    path-exists "^3.0.0"
+    read-cmd-shim "^1.0.1"
+    read-pkg "^3.0.0"
+    rimraf "^2.6.1"
+    safe-buffer "^5.1.1"
+    semver "^5.4.1"
+    signal-exit "^3.0.2"
+    slash "^1.0.0"
+    strong-log-transformer "^1.0.6"
+    temp-write "^3.3.0"
+    write-file-atomic "^2.3.0"
+    write-json-file "^2.2.0"
+    write-pkg "^3.1.0"
+    yargs "^8.0.2"
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+loader-runner@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.1.tgz#026f12fe7c3115992896ac02ba022ba92971b979"
+  integrity sha512-By6ZFY7ETWOc9RFaAIb23IjJVcM4dvJC/N57nmdz9RSkMXvAXGI7SyVlAw3v8vjtDRlqThgVDVmTnr9fqMlxkw==
+
+loader-utils@^1.0.2, loader-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+  integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basetostring@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
+
+lodash._basevalues@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._reescape@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reescape/-/lodash._reescape-3.0.0.tgz#2b1d6f5dfe07c8a355753e5f27fac7f1cde1616a"
+
+lodash._reevaluate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz#58bc74c40664953ae0b124d806996daca431e2ed"
+
+lodash._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash._root@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+
+lodash.assign@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
+
+lodash.assignin@^4.0.9:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
+
+lodash.bind@^4.1.4:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
+lodash.defaults@^4.0.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+
+lodash.escape@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
+  dependencies:
+    lodash._root "^3.0.0"
+
+lodash.filter@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
+
+lodash.flatten@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+
+lodash.foreach@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.map@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
+
+lodash.merge@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+
+lodash.pick@^4.2.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
+
+lodash.pickby@^4.0.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+  integrity sha1-feoh2MGNdwOifHBMFdO4SmfjOv8=
+
+lodash.reduce@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
+
+lodash.reject@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415"
+
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+
+lodash.some@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+
+lodash.template@^3.0.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash._basetostring "^3.0.0"
+    lodash._basevalues "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+    lodash.keys "^3.0.0"
+    lodash.restparam "^3.0.0"
+    lodash.templatesettings "^3.0.0"
+
+lodash.template@^4.0.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz#fb307844753b66b9f1afa54e262c745307dba8e5"
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
+lodash@3.10.1, lodash@^3.10.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.2:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+lodash@^4.17.10, lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
+log-update@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.0.0.tgz#7f4354d7be1be62b724fcbb3c4b94454c0db5e26"
+  dependencies:
+    ansi-escapes "^1.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^2.1.0"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lowercase-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+
+lru-cache@^4.0.0, lru-cache@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+lru-cache@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+make-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  dependencies:
+    pify "^2.3.0"
+
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  dependencies:
+    tmpl "1.0.x"
+
+map-age-cleaner@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  dependencies:
+    object-visit "^1.0.0"
+
+material-colors@^1.2.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+
+math-random@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
+  integrity sha1-izqsWIuKZuSXXjzepn97sylgH6w=
+
+md5.js@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+mem@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
+  integrity sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==
+  dependencies:
+    map-age-cleaner "^0.1.1"
+    mimic-fn "^1.0.0"
+    p-is-promise "^1.1.0"
+
+memoize-one@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
+
+memory-fs@^0.4.0, memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+  dependencies:
+    readable-stream "^2.0.1"
+
+merge@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-db@~1.37.0:
+  version "1.37.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
+  integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.21"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
+  integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
+  dependencies:
+    mime-db "~1.37.0"
+
+mime-types@~2.1.17:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
+
+"minimatch@2 || 3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^2.0.3:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
+
+minimist@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
+minipass@^2.2.1, minipass@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
+  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.1.tgz#6734acc045a46e61d596a43bb9d9cd326e19cc42"
+  integrity sha512-TrfjCjk4jLhcJyGMYymBH6oTXcWjYbUAXTHDbtnWHjZC25h0cdajHuPE1zxb4DVmu8crfh+HwH/WMuyLG0nHBg==
+  dependencies:
+    minipass "^2.2.1"
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+modify-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
+
+moment@2.x.x, moment@^2.10.6:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
+moment@^2.6.0:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+ms@^0.7.1:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
+
+ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
+multipipe@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
+  dependencies:
+    duplexer2 "0.0.2"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+mv@~2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
+  dependencies:
+    mkdirp "~0.5.1"
+    ncp "~2.0.0"
+    rimraf "~2.4.0"
+
+mz@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.5.0.tgz#2859025df03d46b57bb317174b196477ce64cec1"
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+mz@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.6.0.tgz#c8b8521d958df0a4f2768025db69c719ee4ef1ce"
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nan@^2.3.0, nan@^2.9.2:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+  integrity sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==
+
+nan@^2.3.3:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+ncp@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+
+needle@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
+  integrity sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==
+  dependencies:
+    debug "^2.1.2"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+neo-async@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
+  integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-firefox-connect@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/node-firefox-connect/-/node-firefox-connect-1.2.0.tgz#42403848313240c98514ef14b3302816fe3b84e1"
+  dependencies:
+    es6-promise "^2.0.1"
+    firefox-client "^0.3.0"
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+
+node-libs-browser@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.5.3.tgz#55efa888ec907acdb8cffc4e7a51712780e13b6a"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^3.0.3"
+    console-browserify "^1.1.0"
+    constants-browserify "0.0.1"
+    crypto-browserify "~3.2.6"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.0"
+    os-browserify "~0.1.2"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^1.1.13"
+    stream-browserify "^1.0.0"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.10.1"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-libs-browser@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
+  integrity sha512-5AzFzdoIMb89hBGMZglEegffzgRg+ZFoUmisQ8HI4j1KDdpx13J0taNp2y9xPbur6W61gepGDDotGBVQ7mfUCg==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.0"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-notifier@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+  dependencies:
+    growly "^1.3.0"
+    semver "^5.3.0"
+    shellwords "^0.1.0"
+    which "^1.2.12"
+
+node-notifier@^5.1.2:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
+  dependencies:
+    growly "^1.3.0"
+    semver "^5.4.1"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-pre-gyp@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
+  integrity sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
+
+node-releases@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.4.tgz#2d585de8c6c81d00017e063e7810a63889aa6756"
+  integrity sha512-GqRV9GcHw8JCRDaP/JoeNMNzEGzHAknMvIHqMb2VeTOmg1Cf9+ej8bkV12tHfzWHQMCkQ5zUFgwFUkfraynNCw==
+  dependencies:
+    semver "^5.3.0"
+
+node-version@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.0.0.tgz#1b9b9584a9a7f7a6123f215cd14a652bf21ab19e"
+
+nopt@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
+normalize-package-data@^2.3.0, normalize-package-data@^2.3.5:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+normalize-path@^2.0.1, normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+npm-bundled@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
+  integrity sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==
+
+npm-packlist@^1.1.6:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.12.tgz#22bde2ebc12e72ca482abd67afc51eb49377243a"
+  integrity sha512-WJKFOVMeAlsU/pjXuqVdzU0WfgtIBCupkEVwn+1Y0ERAbUfWw8R4GjgVbaKnUjRoD2FoQbHOCbOyT5Mbs9Lw4g==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npmlog@^4.0.2, npmlog@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+nullthrows@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.0.0.tgz#34715e53b9debe0750a77233fd494a5835a2d999"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+nwmatcher@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd"
+
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  dependencies:
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  dependencies:
+    isobject "^3.0.1"
+
+once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+once@~1.3.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+onetime@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.0.tgz#52aa8110e52fc5126ffc667bd8ec21c2ed209ce6"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+open@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+
+optimist@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+
+os-browserify@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+  integrity sha1-ScoCk+CxlZCl9d4Qx/JlphfY/lQ=
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-locale@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.0.0.tgz#15918ded510522b81ee7ae5a309d54f639fc39a4"
+  dependencies:
+    execa "^0.5.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-locale@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.0.1.tgz#3b014fbf01d87f60a1e5348d80fe870dc82c4620"
+  integrity sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==
+  dependencies:
+    execa "^0.10.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.0.3.tgz#cd6ad8ddb290915ad9e22765576025d411f29cb6"
+
+osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-is-promise@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+  integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
+
+p-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+p-limit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
+  integrity sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+  integrity sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==
+
+package-json@^4.0.0, package-json@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  dependencies:
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
+
+pako@~1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.5.tgz#d2205dfe5b9da8af797e7c163db4d1f84e4600bc"
+
+pako@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+  integrity sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  integrity sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+parse-asn1@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
+  integrity sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-github-repo-url@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@2.2.0, parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-1.0.0.tgz#d5a8998eb71ef37a74c34eb0d9eba6e878eea081"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-is-inside@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+  integrity sha1-tuDI+plJTZTgURV1gCpZpcFC8og=
+
+pbkdf2@^3.0.3:
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
+pino@^4.6.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-4.7.0.tgz#8d818313d1095dbb6ada09df2a10bce214dae9d1"
+  dependencies:
+    chalk "^2.0.1"
+    fast-json-parse "^1.0.0"
+    fast-safe-stringify "^1.1.11"
+    flatstr "^1.0.4"
+    pump "^1.0.2"
+    quick-format-unescaped "^1.1.1"
+    split2 "^2.0.1"
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+
+postcss-modules-extract-imports@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz#dc87e34148ec7eab5f791f7cd5849833375b741a"
+  integrity sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.1, postcss@^6.0.23:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
+
+pretty-format@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.1.0.tgz#2277605b40ed4529ae4db51ff62f4be817647914"
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
+private@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+
+process@^0.11.0, process@^0.11.10, process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+promise-polyfill@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.0.2.tgz#d9c86d3dc4dc2df9016e88946defd69b49b41162"
+
+promise@^7.0.3, promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.4, prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
+prop-types@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+
+pseudomap@^1.0.1, pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
+
+pump@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+  integrity sha1-51vV9uJoEioqDgvaYwslUMFmUCw=
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+querystring-es3@^0.2.0, querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
+quick-format-unescaped@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-1.1.1.tgz#e77555ef3e66e105d4039e13ef79201284fee916"
+  dependencies:
+    fast-safe-stringify "^1.0.8"
+
+quick-tmp@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/quick-tmp/-/quick-tmp-0.0.0.tgz#4165e66320ea05f9cbcccf3be1f8fd5fdb05f7df"
+  dependencies:
+    first-match "0.0.1"
+    osenv "0.0.3"
+
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  integrity sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+rc@^1.0.1, rc@^1.1.6:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+rc@^1.1.7:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.5.tgz#275cd687f6e3b36cc756baa26dfee80a790301fd"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-color@^2.11.7:
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.11.7.tgz#746465b75feda63c2567607dfbcb276fc954a5b7"
+  dependencies:
+    lodash "^4.0.1"
+    material-colors "^1.2.1"
+    prop-types "^15.5.4"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.1.2"
+
+react-dom@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e"
+  integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.0-alpha.1"
+
+react-portal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.1.0.tgz#865c44fb72a1da106c649206936559ce891ee899"
+  dependencies:
+    prop-types "^15.5.8"
+
+react-virtualized-auto-sizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+
+react-window@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.1.1.tgz#8a0cf488c9db19425fb804f118f5aac6227d7fd2"
+  dependencies:
+    memoize-one "^3.1.1"
+
+react@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
+  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.0-alpha.1"
+
+reactcss@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.2.tgz#41b0ef43e01d54880357c34b11ac1531209350ef"
+  dependencies:
+    lodash "^4.0.1"
+
+read-cmd-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
+  dependencies:
+    graceful-fs "^4.1.2"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg@^1.0.0, read-pkg@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.3.3, readable-stream@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^2.0.0, readable-stream@^2.0.5, readable-stream@^2.1.5, readable-stream@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readdirp@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
+
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+realpath-native@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.0.0.tgz#7885721a83b43bd5327609f0ddecb2482305fdf0"
+  dependencies:
+    util.promisify "^1.0.0"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+regenerate-unicode-properties@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
+  integrity sha512-s5NGghCE4itSlUS+0WUj88G6cfMVMmH8boTPNvABf8od+2dhT9WDlWu8n01raQAJZMOK8Ch6jSexaRO7swd6aw==
+  dependencies:
+    regenerate "^1.4.0"
+
+regenerate@^1.2.1, regenerate@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
+
+regenerator-runtime@0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
+regenerator-runtime@^0.9.5:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
+
+regenerator-transform@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"
+  integrity sha512-5ipTrZFSq5vU2YoGoww4uaRVAK4wyYC4TSICibbfEPOruUu8FFP7ErV0BjmbIOEpn3O/k9na9UEdYR/3m7N6uA==
+  dependencies:
+    private "^0.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  integrity sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^4.1.3, regexpu-core@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.2.0.tgz#a3744fa03806cffe146dea4421a3e73bdcc47b1d"
+  integrity sha512-Z835VSnJJ46CNBttalHD/dB+Sj2ezmY6Xp38npwU87peK6mqOzOpV8eYktdkLTEkzzD+JsTcxd84ozd8I14+rw==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^7.0.0"
+    regjsgen "^0.4.0"
+    regjsparser "^0.3.0"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.0.2"
+
+registry-auth-token@^3.0.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  dependencies:
+    rc "^1.1.6"
+    safe-buffer "^5.0.1"
+
+registry-url@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  dependencies:
+    rc "^1.0.1"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
+
+regjsgen@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.4.0.tgz#c1eb4c89a209263f8717c782591523913ede2561"
+  integrity sha512-X51Lte1gCYUdlwhF28+2YMO0U6WeN0GLpgpA7LK7mbdDnkQYiwvEpmpe0F/cv5L14EbxgrdayAG3JETBv0dbXA==
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  integrity sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=
+  dependencies:
+    jsesc "~0.5.0"
+
+regjsparser@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.3.0.tgz#3c326da7fcfd69fa0d332575a41c8c0cdf588c96"
+  integrity sha512-zza72oZBBHzt64G7DxdqrOo/30bhHkwMUoT0WqfGu98XLd7N+1tsy5MJ96Bk4MD0y74n629RhmrGW6XlnLLwCA==
+  dependencies:
+    jsesc "~0.5.0"
+
+relaxed-json@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/relaxed-json/-/relaxed-json-1.0.1.tgz#7c8d4aa2f095704cd020e32e8099bcae103f0bd4"
+  dependencies:
+    chalk "^1.0.0"
+    commander "^2.6.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+repeat-element@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+replace-ext@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+
+request-promise-core@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+  dependencies:
+    lodash "^4.13.1"
+
+request-promise-native@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+  dependencies:
+    request-promise-core "1.1.1"
+    stealthy-require "^1.1.0"
+    tough-cookie ">=2.3.3"
+
+request@2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
+request@2.81.0, request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+request@^2.83.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+require-uncached@1.0.3, require-uncached@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+
+resolve@^1.3.2:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==
+  dependencies:
+    path-parse "^1.0.5"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1, rimraf@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@^2.2.8, rimraf@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@~2.4.0:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
+  dependencies:
+    glob "^6.0.1"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+  integrity sha1-K/GYveFnys+lHAqSjoS2i74XH84=
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
+run-async@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  dependencies:
+    is-promise "^2.1.0"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
+  dependencies:
+    aproba "^1.1.1"
+
+rx-lite-aggregates@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  dependencies:
+    rx-lite "*"
+
+rx-lite@*, rx-lite@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-buffer@^5.1.0, safe-buffer@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-json-stringify@~1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.0.4.tgz#81a098f447e4bbc3ff3312a243521bc060ef5911"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-2.3.0.tgz#3f3df584abf69e63d4bb74f0f8c42468e4d7d46b"
+  dependencies:
+    anymatch "^1.3.0"
+    exec-sh "^0.2.0"
+    fb-watchman "^2.0.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.18.0"
+  optionalDependencies:
+    fsevents "^1.1.1"
+
+sax@>=0.6.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+scheduler@^0.13.0-alpha.1:
+  version "0.13.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
+  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+schema-utils@^0.4.4:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+"semver@2 || 3 || 4 || 5", semver@5.3.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+semver@^5.0.1, semver@^5.4.1:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+semver@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
+
+semver@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
+
+serialize-javascript@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.5.0.tgz#1aa336162c88a890ddad5384baebc93a655161fe"
+  integrity sha512-Ga8c8NjAAp46Br4+0oZ2WxJCwIzwP60Gq1YPgU+39PiTVxyed/iKE/zyZI6+UlVYH5Q4PaQdHhcegIFPZTUfoQ==
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  integrity sha1-fbCPnT0i3H945Trzw79GZuzfzPE=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  integrity sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4, setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+  integrity sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo=
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+sha.js@^2.4.4:
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
+  dependencies:
+    inherits "^2.0.1"
+
+shallow-copy@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+shell-quote@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shelljs@0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shelljs@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
+
+shelljs@^0.7.5:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shellwords@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.0.tgz#66afd47b6a12932d9071cbfd98a52e785cd0ba14"
+
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+
+sign-addon@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-0.2.1.tgz#0172bdd9fdee7bdc636f3833b6977a556c75388e"
+  dependencies:
+    babel-polyfill "6.16.0"
+    deepcopy "0.6.3"
+    es6-error "4.0.0"
+    es6-promisify "5.0.0"
+    jsonwebtoken "7.1.9"
+    mz "2.5.0"
+    request "2.79.0"
+    source-map-support "0.4.6"
+    stream-to-promise "2.2.0"
+    when "3.7.7"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  integrity sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+sort-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
+source-map-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map-support@^0.4.2:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.11.tgz#647f939978b38535909530885303daf23279f322"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-support@~0.5.6:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
+  integrity sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+
+source-map@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@~0.5.1, source-map@~0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sparkles@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
+
+spawn-sync@1.0.15, spawn-sync@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
+split2@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
+  dependencies:
+    through2 "^2.0.2"
+
+split2@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-2.1.1.tgz#7a1f551e176a90ecd3345f7246a0cfe175ef4fd0"
+  dependencies:
+    through2 "^2.0.2"
+
+split@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  dependencies:
+    through "2"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.2.tgz#c946d6bd9b1a39d0e8635763f5242d6ed6dcb629"
+  integrity sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+ssri@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
+  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+stack-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+
+stackframe@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
+  integrity sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw==
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stealthy-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+
+stream-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+  integrity sha1-v5tKv7QrJ011FHnkTg/yZWtvEZM=
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^1.0.27-1"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  integrity sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+
+stream-to-array@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
+  dependencies:
+    any-promise "^1.1.0"
+
+stream-to-promise@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stream-to-promise/-/stream-to-promise-2.2.0.tgz#b1edb2e1c8cb11289d1b503c08d3f2aef51e650f"
+  dependencies:
+    any-promise "~1.3.0"
+    end-of-stream "~1.1.0"
+    stream-to-array "~2.3.0"
+
+string-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2", string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@^1.0.0, string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+string_decoder@~0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
+  integrity sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==
+
+stringstream@~0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-bom-buf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz#1cb45aaf57530f4caf86c7f75179d2c9a51dd572"
+  dependencies:
+    is-utf8 "^0.2.1"
+
+strip-bom-stream@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-3.0.0.tgz#956bcc5d84430f69256a90ed823765cd858e159c"
+  dependencies:
+    first-chunk-stream "^2.0.0"
+    strip-bom-buf "^1.0.0"
+
+strip-bom@3.0.0, strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
+strong-log-transformer@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-1.0.6.tgz#f7fb93758a69a571140181277eea0c2eb1301fa3"
+  dependencies:
+    byline "^5.0.0"
+    duplexer "^0.1.1"
+    minimist "^0.1.0"
+    moment "^2.6.0"
+    through "^2.3.4"
+
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.0.tgz#ad986dc7eb2315d009b4d77c8169c2231a684037"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+symbol-tree@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
+tapable@^1.0.0, tapable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
+  integrity sha512-IlqtmLVaZA2qab8epUXbVWRn3aB1imbDMJtjB3nu4X0NqPkcY/JH9ZtCBWKHWPxs8Svi9tyo8w2dBoi07qZbBA==
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar-stream@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.2.tgz#fbc6c6e83c1a19d4cb48c7d96171fc248effc7bf"
+  dependencies:
+    bl "^1.0.0"
+    end-of-stream "^1.0.0"
+    readable-stream "^2.0.0"
+    xtend "^4.0.0"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tar@^4:
+  version "4.4.8"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
+  integrity sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.3.4"
+    minizlib "^1.1.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.2"
+
+temp-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
+
+temp-write@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492"
+  dependencies:
+    graceful-fs "^4.1.2"
+    is-stream "^1.1.0"
+    make-dir "^1.0.0"
+    pify "^3.0.0"
+    temp-dir "^1.0.0"
+    uuid "^3.0.1"
+
+tempfile@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-1.1.1.tgz#5bcc4eaecc4ab2c707d8bc11d99ccc9a2cb287f2"
+  dependencies:
+    os-tmpdir "^1.0.0"
+    uuid "^2.0.1"
+
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  dependencies:
+    execa "^0.7.0"
+
+terser-webpack-plugin@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.1.0.tgz#cf7c25a1eee25bf121f4a587bb9e004e3f80e528"
+  integrity sha512-61lV0DSxMAZ8AyZG7/A4a3UPlrbOBo8NIQ4tJzLPAdGOQ+yoNC7l5ijEow27lBAL2humer01KLS6bGIMYQxKoA==
+  dependencies:
+    cacache "^11.0.2"
+    find-cache-dir "^2.0.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    terser "^3.8.1"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+terser@^3.8.1:
+  version "3.10.12"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.10.12.tgz#06d40765e40b33fd97977c0896c75b2b5d42142d"
+  integrity sha512-3ODPC1eVt25EVNb04s/PkHxOmzKBQUF6bwwuR6h2DbEF8/j265Y1UkwNtOk9am/pRxfJ5HPapOlUlO6c16mKQQ==
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
+    source-map-support "~0.5.6"
+
+test-exclude@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+test-exclude@^4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
+  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+text-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.7.0.tgz#faaaba2625ed746d568a23e4d0aacd9bf08a8b39"
+
+text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
+  dependencies:
+    any-promise "^1.0.0"
+
+throat@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+
+through2@^2.0.0, through2@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+time-stamp@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.0.1.tgz#9f4bd23559c9365966f3302dbba2b07c6b99b151"
+
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  integrity sha1-ycWLV1voQHN1y14kYtrO50NZ9B0=
+  dependencies:
+    process "~0.11.0"
+
+timers-browserify@^2.0.4:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.10.tgz#1d28e3d2aadf1d5a5996c4e9f95601cd053480ae"
+  integrity sha512-YvC1SV1XdOUaL6gx5CoGroT3Gu49pK9+TZ38ErPldOWW4j49GI1HKs9DV+KGq/w6y+LZ72W1c8cKz2vzY+qpzg==
+  dependencies:
+    setimmediate "^1.0.4"
+
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
+tmp@0.0.30:
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+
+to-fast-properties@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+topo@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
+  dependencies:
+    hoek "2.x.x"
+
+tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tough-cookie@~2.3.0:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
+  dependencies:
+    punycode "^1.4.1"
+
+tr46@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
+traverse@0.4.x:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.4.6.tgz#d04b2280e4c792a5815429ef7b8b60c64c9ccc34"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-off-newlines@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+tslib@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+  integrity sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.18:
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+
+ua-parser-js@^0.7.9:
+  version "0.7.12"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
+
+uglify-js@^2.6:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.4.tgz#65ea2fb3059c9394692f15fed87c2b36c16b9adf"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+unicode-canonical-property-names-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
+  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
+
+unicode-match-property-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
+  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^1.0.4"
+    unicode-property-aliases-ecmascript "^1.0.4"
+
+unicode-match-property-value-ecmascript@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.0.2.tgz#9f1dc76926d6ccf452310564fd834ace059663d4"
+  integrity sha512-Rx7yODZC1L/T8XKo/2kNzVAQaRE88AaMvI1EF/Xnj3GW2wzN6fop9DDWuFAKUVFH7vozkz26DzP0qyWLKLIVPQ==
+
+unicode-property-aliases-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
+  integrity sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  integrity sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+unique-filename@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.1.tgz#5e9edc6d1ce8fb264db18a507ef9bd8544451ca6"
+  integrity sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==
+  dependencies:
+    imurmurhash "^0.1.4"
+
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  dependencies:
+    crypto-random-string "^1.0.0"
+
+universalify@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+unzip-response@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+
+upath@^1.0.5:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
+  integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
+
+update-notifier@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
+  dependencies:
+    boxen "^1.0.0"
+    chalk "^1.0.0"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  dependencies:
+    prepend-http "^1.0.1"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+url@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
+userhome@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/userhome/-/userhome-1.0.0.tgz#b6491ff12d21a5e72671df9ccc8717e1c6688c0b"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+util.promisify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
+  dependencies:
+    inherits "2.0.1"
+
+util@^0.10.3, util@~0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
+uuid@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+
+uuid@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+
+uuid@^3.0.1, uuid@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+v8-compile-cache@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.2.tgz#a428b28bb26790734c4fc8bc9fa106fccebf6a6c"
+  integrity sha512-1wFuMUIM16MDJRCrpbpuEPTUGmM5QMUg0cr3KFwra2XgOgFcPGDQHDh3CszSCD2Zewc/dh/pamNEW8CbfDebUw==
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vinyl@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
+  dependencies:
+    clone "^1.0.0"
+    clone-stats "^0.0.1"
+    replace-ext "0.0.1"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
+  dependencies:
+    indexof "0.0.1"
+
+w3c-hr-time@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  dependencies:
+    browser-process-hrtime "^0.1.2"
+
+walkdir@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
+
+walker@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  dependencies:
+    makeerror "1.0.x"
+
+watch@~0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
+  dependencies:
+    exec-sh "^0.2.0"
+    minimist "^1.2.0"
+
+watchpack@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.0.tgz#5164d4faabb88dcf277f17c8a3b16bfd3da8bee3"
+  dependencies:
+    async "^2.1.2"
+    chokidar "^1.4.3"
+    graceful-fs "^4.1.2"
+
+watchpack@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+  integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+
+wcwidth@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  dependencies:
+    defaults "^1.0.3"
+
+web-ext@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-1.10.1.tgz#c2d442deffefba15a89d24c9f28526b16740f469"
+  dependencies:
+    addons-linter "0.22.3"
+    babel-polyfill "6.20.0"
+    babel-runtime "6.23.0"
+    bunyan "1.8.10"
+    camelcase "4.1.0"
+    debounce "1.0.2"
+    decamelize "1.2.0"
+    es6-error "4.0.2"
+    es6-promisify "5.0.0"
+    event-to-promise "0.8.0"
+    firefox-profile "0.5.0"
+    fx-runner "1.0.7"
+    git-rev-sync "1.9.1"
+    minimatch "3.0.4"
+    mkdirp "0.5.1"
+    mz "2.6.0"
+    node-firefox-connect "1.2.0"
+    node-notifier "5.1.2"
+    open "0.0.5"
+    parse-json "2.2.0"
+    regenerator-runtime "0.10.5"
+    require-uncached "1.0.3"
+    sign-addon "0.2.1"
+    source-map-support "0.4.15"
+    stream-to-promise "2.2.0"
+    tmp "0.0.30"
+    update-notifier "2.2.0"
+    watchpack "1.3.0"
+    yargs "6.6.0"
+    zip-dir "1.0.2"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+
+webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+webpack-cli@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.1.2.tgz#17d7e01b77f89f884a2bbf9db545f0f6a648e746"
+  integrity sha512-Cnqo7CeqeSvC6PTdts+dywNi5CRlIPbLx1AoUPK2T6vC1YAugMG3IOoO9DmEscd+Dghw7uRlnzV1KwOe5IrtgQ==
+  dependencies:
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    enhanced-resolve "^4.1.0"
+    global-modules-path "^2.3.0"
+    import-local "^2.0.0"
+    interpret "^1.1.0"
+    loader-utils "^1.1.0"
+    supports-color "^5.5.0"
+    v8-compile-cache "^2.0.2"
+    yargs "^12.0.2"
+
+webpack-sources@^1.1.0, webpack-sources@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
+  integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@^4.26.0:
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.0.tgz#adbe80b869148c8d108b7d88965d00d72b3178de"
+  integrity sha512-J/dP9SJIc5OtX2FZ/+U9ikQtd6H6Mcbqt0xeXtmPwYGDKf8nkbOQQA9KL2Y0rJOsN1Al9Pdn+/j63X58ub8gvQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-module-context" "1.7.11"
+    "@webassemblyjs/wasm-edit" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+    acorn "^5.6.2"
+    acorn-dynamic-import "^3.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^1.0.0"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.0"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^0.4.4"
+    tapable "^1.1.0"
+    terser-webpack-plugin "^1.1.0"
+    watchpack "^1.5.0"
+    webpack-sources "^1.3.0"
+
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
+  dependencies:
+    iconv-lite "0.4.19"
+
+whatwg-fetch@>=0.10.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
+
+whatwg-fetch@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
+
+whatwg-url@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whatwg-url@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08"
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.0"
+    webidl-conversions "^4.0.1"
+
+when@3.7.7:
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.4.tgz#1557f96080604e5b11b3599eb9f45b50a9efd722"
+  dependencies:
+    is-absolute "^0.1.7"
+    isexe "^1.1.1"
+
+which@^1.0.5, which@^1.2.8, which@^1.2.9:
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
+  dependencies:
+    isexe "^1.1.1"
+
+which@^1.2.12:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
+  dependencies:
+    isexe "^2.0.0"
+
+which@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+widest-line@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
+winreg@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/winreg/-/winreg-0.0.12.tgz#07105554ba1a9d08979251d129475bffae3006b7"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  integrity sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==
+  dependencies:
+    errno "~0.1.7"
+
+wrap-ansi@^2.0.0, wrap-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write-file-atomic@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.1.0.tgz#1769f4b551eedce419f0505deae2e26763542d37"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+write-file-atomic@^2.1.0, write-file-atomic@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+write-json-file@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/write-json-file/-/write-json-file-2.3.0.tgz#2b64c8a33004d54b8698c76d585a77ceb61da32f"
+  dependencies:
+    detect-indent "^5.0.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    pify "^3.0.0"
+    sort-keys "^2.0.0"
+    write-file-atomic "^2.0.0"
+
+write-pkg@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/write-pkg/-/write-pkg-3.1.0.tgz#030a9994cc9993d25b4e75a9f1a1923607291ce9"
+  dependencies:
+    sort-keys "^2.0.0"
+    write-json-file "^2.2.0"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-4.0.0.tgz#bfe1da4c08eeb9780b986e0e4d10eccd7345999f"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+
+xml2js@~0.4.4:
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "^4.1.0"
+
+xmlbuilder@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
+  dependencies:
+    lodash "^4.0.0"
+
+xmldom@0.1.27:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+  integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+  integrity sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=
+
+yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs-parser@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@8.0.2, yargs@^8.0.1, yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
+yargs@^10.0.3:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^8.1.0"
+
+yargs@^12.0.2:
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yauzl@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.8.0.tgz#79450aff22b2a9c5a41ef54e02db907ccfbf9ee2"
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.0.1"
+
+zip-dir@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-1.0.2.tgz#253f907aead62a21acd8721d8b88032b2411c051"
+  dependencies:
+    async "^1.5.2"
+    jszip "^2.4.0"
+
+zip-stream@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
+  dependencies:
+    archiver-utils "^1.3.0"
+    compress-commons "^1.2.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"

From 7b9a8e98439fc31d0fe4b4e3b50b8afb4d4af3db Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 22 Jan 2019 11:07:56 -0800
Subject: [PATCH 002/814] Added a super basic README

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index e69de29bb2d1..daa28dacd944 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,7 @@
+This is an **experimental rewrite** of the React DevTools extension (see [github.com/facebook/react-devtools](https://github.com/facebook/react-devtools)). This project is **not supported** and has only been posted as a way of sharing ideas with others who may be interested.
+
+To get started...
+```
+yarn install
+yarn start
+```
\ No newline at end of file

From d02b4a27842228945c71b6043b5ba145f5c41b41 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Jan 2019 08:27:40 -0800
Subject: [PATCH 003/814] Throttle bridge traffic for Elements tree updates

---
 shells/dev/app/ElementTypes/index.js |   3 +-
 src/backend/agent.js                 | 113 ++++++++++++++++++---------
 src/devtools/store.js                |  12 ++-
 3 files changed, 88 insertions(+), 40 deletions(-)

diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index e9de79cc72d5..3cf320747e0c 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -8,12 +8,13 @@ import React, {
   Component,
   ConcurrentMode,
   Fragment,
+  // $FlowFixMe Flow doesn't know about the Profiler import yet
   Profiler,
   StrictMode,
   Suspense,
 } from 'react';
 
-class ClassComponent extends Component {
+class ClassComponent extends Component<any> {
   render() {
     return null;
   }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 8bac8b99c418..d15cf67ec066 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -9,14 +9,28 @@ import type {Fiber, RendererData, RendererID, RendererInterface} from './types';
 import type {Bridge} from '../types';
 import type {Element} from 'src/devtools/types';
 
+const debug = (methodName, ...args) => {
+  //console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
+};
+
+const THROTTLE_BY_MS = 350;
+
 export default class Agent extends EventEmitter {
-  fiberToID: WeakMap<Fiber, string> = new WeakMap();
-  idToElement: Map<string, Element> = new Map();
-  idToFiber: Map<string, Fiber> = new Map();
-  idToRendererData: Map<string, RendererData> = new Map();
-  idToRendererID: Map<string, RendererID> = new Map();
-  rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
-  roots: Set<RendererID> = new Set();
+  _fiberToID: WeakMap<Fiber, string> = new WeakMap();
+  _idToElement: Map<string, Element> = new Map();
+  _idToFiber: Map<string, Fiber> = new Map();
+  _idToRendererData: Map<string, RendererData> = new Map();
+  _idToRendererID: Map<string, RendererID> = new Map();
+  _isRenderInProgress: boolean = false;
+  _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
+  _roots: Set<RendererID> = new Set();
+
+  // Tree updates are debounced to reduce bridge traffic and improve performance.
+  // This reduces the potential negative impact that DevTools has on React performance.
+  // Eventual consistency is good enough for the Elements tree.
+  _lastCrawlTime: number = -THROTTLE_BY_MS;
+  _pendingRoots: Set<string> = new Set();
+  _pendingRootTimeoutID: TimeoutID | null = null;
 
   addBridge(bridge: Bridge) {
     // TODO Listen to bridge for things like selection.
@@ -30,25 +44,25 @@ export default class Agent extends EventEmitter {
   }
 
   setRendererInterface(rendererID: RendererID, rendererInterface: RendererInterface) {
-    this.rendererInterfaces[rendererID] = rendererInterface;
+    this._rendererInterfaces[rendererID] = rendererInterface;
   }
 
   _getId(fiber: Fiber): string {
     if (typeof fiber !== 'object' || !fiber) {
       return fiber;
     }
-    if (!this.fiberToID.has(fiber)) {
-      this.fiberToID.set(fiber, guid());
-      this.idToFiber.set(
-        nullthrows(this.fiberToID.get(fiber)),
+    if (!this._fiberToID.has(fiber)) {
+      this._fiberToID.set(fiber, guid());
+      this._idToFiber.set(
+        nullthrows(this._fiberToID.get(fiber)),
         fiber
       );
     }
-    return nullthrows(this.fiberToID.get(fiber));
+    return nullthrows(this._fiberToID.get(fiber));
   }
 
   _crawl(parent: Element, id: string): void {
-    const data: RendererData = ((this.idToRendererData.get(id): any): RendererData);
+    const data: RendererData = ((this._idToRendererData.get(id): any): RendererData);
     if (data.type === ElementTypeOtherOrUnknown) {
       data.children.forEach(childFiber => {
         if (childFiber !== null) {
@@ -62,8 +76,28 @@ export default class Agent extends EventEmitter {
     }
   }
 
+  _crawlPendingRoots(): void {
+console.log('_crawlPendingRoots', this._pendingRoots)
+    this._pendingRoots.forEach(id =>  this._crawlRoot(id));
+    this._pendingRoots.clear();
+    this._lastCrawlTime = performance.now();
+  }
+
+  _crawlRoot(id: string): void {
+    const data = ((this._idToRendererData.get(id): any): RendererData);
+
+    // TODO: Can we use the effects list on update for a faster path?
+    this._createOrUpdateElement(id, data);
+
+    if (!this._roots.has(id)) {
+      this._roots.add(id);
+      debug('emit("root")', id);
+      this.emit('root', id);
+    }
+  }
+
   _createOrUpdateElement(id: string, data: RendererData): void {
-    const prevElement: ?Element = this.idToElement.get(id);
+    const prevElement: ?Element = this._idToElement.get(id);
     const nextElement: Element = {
       id,
       key: data.key,
@@ -72,7 +106,7 @@ export default class Agent extends EventEmitter {
       type: data.type,
     };
 
-    this.idToElement.set(id, nextElement);
+    this._idToElement.set(id, nextElement);
 
     data.children.forEach(childFiber => {
       if (childFiber !== null) {
@@ -81,57 +115,66 @@ export default class Agent extends EventEmitter {
     });
 
     if (prevElement == null) {
-console.log('%cAgent%c emit("mount")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)
+      debug('emit("mount")', id, nextElement)
       this.emit('mount', nextElement);
     } else if (!areElementsEqual(prevElement, nextElement)) {
-console.log('%cAgent%c emit("update")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)
+      debug('emit("update")', id, nextElement);
       this.emit('update', nextElement);
     }
   }
 
+  _maybeCrawlRoot = () =>  {
+    this._pendingRootTimeoutID = null;
+    if (!this._isRenderInProgress) {
+      this._crawlPendingRoots();
+    }
+  };
+
   onHookMount = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
     const id = this._getId(fiber);
 
-    this.idToRendererData.set(id, data);
-    this.idToRendererID.set(id, renderer);
+    this._idToRendererData.set(id, data);
+    this._idToRendererID.set(id, renderer);
   };
 
   onHookRootCommitted = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
     const id = this._getId(fiber);
-console.log('%cAgent%c onHookRootCommitted()', 'color: blue; font-weight: bold;', 'font-weight: bold;', id);
-
-    this._createOrUpdateElement(id, data);
 
-    if (!this.roots.has(id)) {
-      this.roots.add(id);
+    this._isRenderInProgress = false;
+    this._pendingRoots.add(id);
 
-      this.emit('root', id);
+    const delta = performance.now() - this._lastCrawlTime;
+    if (delta >= THROTTLE_BY_MS) {
+      this._crawlPendingRoots();
+    } else if (this._pendingRootTimeoutID === null) {
+      this._pendingRootTimeoutID = setTimeout(this._maybeCrawlRoot, THROTTLE_BY_MS - delta);
     }
   };
 
   onHookUnmount = ({fiber}: {fiber: Fiber}) => {
     const id = this._getId(fiber);
 
-    if (this.roots.has(id)) {
-      this.roots.delete(id);
+    if (this._roots.has(id)) {
+      this._roots.delete(id);
       this.emit('rootUnmounted', id);
     }
 
-    if (this.idToElement.has(id)) {
-      this.idToElement.delete(id);
-console.log('%cAgent%c emit("unmount")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id)
+    if (this._idToElement.has(id)) {
+      this._idToElement.delete(id);
+      debug('emit("unmount")', id);
       this.emit('unmount', id);
     }
 
-    this.fiberToID.delete(fiber);
-    this.idToRendererData.delete(id);
-    this.idToRendererID.delete(id);
+    this._fiberToID.delete(fiber);
+    this._idToRendererData.delete(id);
+    this._idToRendererID.delete(id);
   };
 
   onHookUpdate = ({data, fiber}: {data: RendererData, fiber: Fiber}) => {
     const id = this._getId(fiber);
 
-    this.idToRendererData.set(id, data);
+    this._isRenderInProgress = true;
+    this._idToRendererData.set(id, data);
   };
 }
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 265e90f3db68..b97394a3abce 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -5,6 +5,10 @@ import EventEmitter from 'events';
 import type { Element } from './types';
 import type { Bridge } from '../types';
 
+const debug = (methodName, ...args) => {
+  //console.log(`%cAgent %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
+};
+
 /**
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
@@ -34,7 +38,7 @@ class Store extends EventEmitter {
 
   onBridgeMount = (element: Element) => {
     const {id} = element;
-    console.log('%cStore%c onBridgeMount()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);
+    debug('onBridgeMount()', element);
     this._idToElement.set(id, element);
 
     element.children.forEach(childID => {
@@ -45,7 +49,7 @@ class Store extends EventEmitter {
   };
 
   onBridgeRoot = (id: string) => {
-    console.log('%cStore%c onBridgeRoot()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);
+    debug('onBridgeRoot()', id);
     if (!this.roots.has(id)) {
       this.roots.add(id);
       this.emit('roots');
@@ -53,7 +57,7 @@ class Store extends EventEmitter {
   };
 
   onBridgeUnmounted = (id: string) => {
-    console.log('%cStore%c onBridgeUnmounted()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);
+    debug('onBridgeUnmounted()', id);
     this._idToElement.delete(id);
 
     if (this._idToParentID.has(id)) {
@@ -68,7 +72,7 @@ class Store extends EventEmitter {
 
   onBridgeUpdated = (element: Element) => {
     const {id} = element;
-    console.log('%cStore%c onBridgeUpdated()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);
+    debug('onBridgeUpdated()', element);
     this._idToElement.set(id, element);
 
     this.emit(id);

From f881c32304c8a42083046c5a9ad71ad2687f26c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Jan 2019 08:45:19 -0800
Subject: [PATCH 004/814] Added Prettier (and formatted code)

---
 .eslintignore                        |   6 +
 .eslintrc                            |   3 +
 .prettierignore                      |   6 +
 .prettierrc                          |   4 +
 package.json                         |  89 ++-
 shells/browser/webpack.backend.js    |  15 +-
 shells/browser/webpack.config.js     |  29 +-
 shells/createConfig.js               |  90 ++-
 shells/dev/app/App.css               |   5 +-
 shells/dev/app/ElementTypes/index.js |  18 +-
 shells/dev/app/ToDoList/List.js      |  89 +--
 shells/dev/app/ToDoList/ListItem.js  |  15 +-
 shells/dev/app/ToDoList/index.js     |   2 +-
 shells/dev/app/app.js                |   6 +-
 shells/dev/app/index.js              |   2 +-
 shells/dev/src/backend.js            |  12 +-
 shells/dev/src/devtools.js           |  18 +-
 shells/dev/webpack.config.js         |   4 +-
 src/backend/agent.js                 |  84 ++-
 src/backend/index.js                 |  11 +-
 src/backend/renderer.js              | 105 ++--
 src/backend/types.js                 |  29 +-
 src/backend/utils.js                 |  14 +-
 src/bridge.js                        |  48 +-
 src/devtools/index.js                |   2 +-
 src/devtools/store.js                |   6 +-
 src/devtools/types.js                |   9 +-
 src/devtools/views/App.css           |  11 +-
 src/devtools/views/App.js            |   6 +-
 src/devtools/views/Element.css       |   6 +-
 src/devtools/views/Element.js        |  27 +-
 src/devtools/views/Tree.css          |   4 +-
 src/devtools/views/Tree.js           |  16 +-
 src/devtools/views/contexts.js       |   2 +-
 src/devtools/views/hooks.js          |  10 +-
 src/hook.js                          |  41 +-
 src/types.js                         |   2 +-
 yarn.lock                            | 909 +++++++++++++++++++++++----
 38 files changed, 1263 insertions(+), 492 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000000..2b7e221a1140
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,6 @@
+node_modules
+
+shells/dev/build
+
+package-lock.json
+yarn.lock
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000000..9cf9d0090d38
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "plugin:prettier/recommended"]
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000000..2b7e221a1140
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+node_modules
+
+shells/dev/build
+
+package-lock.json
+yarn.lock
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000000..c1a6f6671316
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/package.json b/package.json
index 66a2e68facac..8dc27444c43d 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,39 @@
 {
+  "repository": "bvaughn/react-devtools-experimental",
+  "license": "BSD-3-Clause",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "<rootDir>/shells"
+    ]
+  },
+  "scripts": {
+    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
+    "build:extension:chrome": "node ./shells/chrome/build",
+    "build:extension:firefox": "node ./shells/firefox/build",
+    "build:standalone": "cd packages/react-devtools-core && yarn run build",
+    "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
+    "linc": "lint-staged",
+    "lint": "eslint '**/*.js'",
+    "precommit": "lint-staged",
+    "prettier": "prettier --write '**/*.{js,json,css}'",
+    "start": "cd ./shells/dev && open ./index.html && webpack --config webpack.config.js --watch",
+    "test": "jest",
+    "test:chrome": "node ./shells/chrome/test",
+    "test:firefox": "node ./shells/firefox/test",
+    "test:standalone": "cd packages/react-devtools && yarn start",
+    "typecheck": "flow check"
+  },
+  "lint-staged": {
+    "{shells,src}/**/*.{js,json,css}": [
+      "prettier --write",
+      "git add"
+    ],
+    "**/*.js": "eslint --max-warnings 0"
+  },
   "dependencies": {
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -8,32 +43,48 @@
     "@babel/preset-react": "^7.0.0",
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
-    "babel-eslint": "6",
+    "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "child-process-promise": "^2.2.1",
+    "chrome-launch": "^1.1.4",
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.3",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
-    "eslint": "2.10.2",
-    "eslint-plugin-react": "5.1.1",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-config-standard-react": "^6.0.0",
+    "eslint-plugin-flowtype": "^2.47.1",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^5",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-standard": "^3.0.1",
     "events": "^3.0.0",
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
+    "firefox-profile": "^1.0.2",
     "flow-bin": "^0.91.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "immutable": "3.7.6",
     "jest": "22.1.4",
+    "lerna": "^2.8.0",
+    "lint-staged": "^7.0.5",
     "log-update": "^2.0.0",
     "lru-cache": "^4.1.3",
     "memoize-one": "^3.1.1",
     "node-libs-browser": "0.5.3",
     "nullthrows": "^1.0.0",
     "object-assign": "4.0.1",
+    "prettier": "^1.16.1",
     "prop-types": "^15.6.1",
     "react": "^16.8.0-alpha.1",
     "react-color": "^2.11.7",
@@ -43,38 +94,8 @@
     "react-window": "^1.1.1",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
+    "web-ext": "^1.10.1",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2"
-  },
-  "license": "BSD-3-Clause",
-  "repository": "facebook/react-devtools",
-  "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "scripts": {
-    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
-    "build:extension:chrome": "node ./shells/chrome/build",
-    "build:extension:firefox": "node ./shells/firefox/build",
-    "build:standalone": "cd packages/react-devtools-core && yarn run build",
-    "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
-    "lint": "eslint .",
-    "start": "cd ./shells/dev && open ./index.html && webpack --config webpack.config.js --watch",
-    "test": "jest",
-    "test:chrome": "node ./shells/chrome/test",
-    "test:firefox": "node ./shells/firefox/test",
-    "test:standalone": "cd packages/react-devtools && yarn start",
-    "typecheck": "flow check"
-  },
-  "jest": {
-    "modulePathIgnorePatterns": [
-      "<rootDir>/shells"
-    ]
-  },
-  "devDependencies": {
-    "chrome-launch": "^1.1.4",
-    "firefox-profile": "^1.0.2",
-    "lerna": "^2.8.0",
-    "web-ext": "^1.10.1"
   }
 }
diff --git a/shells/browser/webpack.backend.js b/shells/browser/webpack.backend.js
index b313c907af1a..9c1aa968097c 100644
--- a/shells/browser/webpack.backend.js
+++ b/shells/browser/webpack.backend.js
@@ -1,16 +1,5 @@
-/**
- * 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.
- *
- */
-'use strict';
-
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
diff --git a/shells/browser/webpack.config.js b/shells/browser/webpack.config.js
index eebe7b449542..39c08ff05659 100644
--- a/shells/browser/webpack.config.js
+++ b/shells/browser/webpack.config.js
@@ -1,16 +1,5 @@
-/**
- * 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.
- *
- */
-'use strict';
-
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
 const webpack = require('webpack');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
@@ -29,12 +18,14 @@ module.exports = {
     path: __dirname + '/build',
     filename: '[name].js',
   },
-  plugins: __DEV__ ? [] : [
-    // Ensure we get production React
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"',
-    }),
-  ],
+  plugins: __DEV__
+    ? []
+    : [
+        // Ensure we get production React
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': '"production"',
+        }),
+      ],
   module: {
     rules: [
       {
diff --git a/shells/createConfig.js b/shells/createConfig.js
index 49ab0ca824a0..a5eea836b752 100644
--- a/shells/createConfig.js
+++ b/shells/createConfig.js
@@ -1,8 +1,8 @@
-const path = require('path')
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const { VueLoaderPlugin } = require('vue-loader')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const { VueLoaderPlugin } = require('vue-loader');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 
 module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
   const bubleOptions = {
@@ -10,9 +10,9 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
     objectAssign: 'Object.assign',
     transforms: {
       forOf: false,
-      modules: false
-    }
-  }
+      modules: false,
+    },
+  };
 
   const baseConfig = {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
@@ -21,8 +21,8 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
         src: path.resolve(__dirname, '../src'),
         views: path.resolve(__dirname, '../src/devtools/views'),
         components: path.resolve(__dirname, '../src/devtools/components'),
-        filters: path.resolve(__dirname, '../src/devtools/filters')
-      }
+        filters: path.resolve(__dirname, '../src/devtools/filters'),
+      },
     },
     module: {
       rules: [
@@ -30,25 +30,21 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
           test: /\.js$/,
           loader: 'buble-loader',
           exclude: /node_modules|vue\/dist|vuex\/dist/,
-          options: bubleOptions
+          options: bubleOptions,
         },
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
             compilerOptions: {
-              preserveWhitespace: false
+              preserveWhitespace: false,
             },
-            transpileOptions: bubleOptions
-          }
+            transpileOptions: bubleOptions,
+          },
         },
         {
           test: /\.css$/,
-          use: [
-            'vue-style-loader',
-            'css-loader',
-            'postcss-loader'
-          ]
+          use: ['vue-style-loader', 'css-loader', 'postcss-loader'],
         },
         {
           test: /\.styl(us)?$/,
@@ -61,43 +57,45 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
               loader: 'style-resources-loader',
               options: {
                 patterns: [
-                  path.resolve(__dirname, '../src/devtools/style/imports.styl')
-                ]
-              }
-            }
-          ]
+                  path.resolve(__dirname, '../src/devtools/style/imports.styl'),
+                ],
+              },
+            },
+          ],
         },
         {
           test: /\.(png|woff2)$/,
-          loader: 'url-loader?limit=0'
-        }
-      ]
+          loader: 'url-loader?limit=0',
+        },
+      ],
     },
     performance: {
-      hints: false
+      hints: false,
     },
     plugins: [
       new VueLoaderPlugin(),
       ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]),
       new webpack.DefinePlugin({
-        'process.env.RELEASE_CHANNEL': JSON.stringify(process.env.RELEASE_CHANNEL || 'stable')
-      })
+        'process.env.RELEASE_CHANNEL': JSON.stringify(
+          process.env.RELEASE_CHANNEL || 'stable'
+        ),
+      }),
     ],
     devServer: {
-      port: process.env.PORT
+      port: process.env.PORT,
     },
     stats: {
-      colors: true
-    }
-  }
+      colors: true,
+    },
+  };
 
   if (process.env.NODE_ENV === 'production') {
-    const UglifyPlugin = require('uglifyjs-webpack-plugin')
+    const UglifyPlugin = require('uglifyjs-webpack-plugin');
     baseConfig.plugins.push(
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': '"production"'
+        'process.env.NODE_ENV': '"production"',
       })
-    )
+    );
     baseConfig.optimization = {
       minimizer: [
         new UglifyPlugin({
@@ -132,19 +130,19 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
               // required features to drop conditional branches
               conditionals: true,
               dead_code: true,
-              evaluate: true
+              evaluate: true,
             },
             mangle: {
-              safari10: true
-            }
+              safari10: true,
+            },
           },
           sourceMap: false,
           cache: true,
-          parallel: true
-        })
-      ]
-    }
+          parallel: true,
+        }),
+      ],
+    };
   }
 
-  return merge(baseConfig, config)
-}
\ No newline at end of file
+  return merge(baseConfig, config);
+};
diff --git a/shells/dev/app/App.css b/shells/dev/app/App.css
index dd3d888948fa..890641f08022 100644
--- a/shells/dev/app/App.css
+++ b/shells/dev/app/App.css
@@ -1,6 +1,7 @@
 .App {
   /* GitHub.com frontend fonts */
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   font-size: 14px;
   line-height: 1.5;
-}
\ No newline at end of file
+}
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index 3cf320747e0c..1a5ab821fb26 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -14,6 +14,9 @@ import React, {
   Suspense,
 } from 'react';
 
+const Context = createContext('abc');
+Context.displayName = 'testContext';
+
 class ClassComponent extends Component<any> {
   render() {
     return null;
@@ -30,14 +33,19 @@ const ForwardRefComponent = forwardRef((props, ref) => (
   <ClassComponent ref={ref} {...props} />
 ));
 
-const LazyComponent = lazy(() => Promise.resolve({
-  default: FunctionComponent,
-}));
+const LazyComponent = lazy(() =>
+  Promise.resolve({
+    default: FunctionComponent,
+  })
+);
 
 export default function ElementTypes() {
   return (
     <Profiler id="test" onRender={() => {}}>
       <Fragment>
+        <Context.Provider value={'def'}>
+          <Context.Consumer>{value => null}</Context.Consumer>
+        </Context.Provider>
         <StrictMode>
           <ConcurrentMode>
             <Suspense fallback={<div>Loading...</div>}>
@@ -51,5 +59,5 @@ export default function ElementTypes() {
         </StrictMode>
       </Fragment>
     </Profiler>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index 6111966c9f61..2c6e96b524cb 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -12,56 +12,69 @@ export type Item = {|
 
 type Props = {||};
 
-export default function List({}: Props) {
+export default function List(props: Props) {
   const [newItemText, setNewItemText] = useState<string>('');
   const [items, setItems] = useState<Array<Item>>([
-    {id: 1, isComplete: true, text: "First"},
-    {id: 2, isComplete: true, text: "Second"},
-    {id: 3, isComplete: false, text: "Third"},
+    { id: 1, isComplete: true, text: 'First' },
+    { id: 2, isComplete: true, text: 'Second' },
+    { id: 3, isComplete: false, text: 'Third' },
   ]);
   const [uid, setUID] = useState<number>(4);
 
   const handleClick = useCallback(() => {
     if (newItemText !== '') {
-      setItems([...items, {
-        id: uid,
-        isComplete: false,
-        text: newItemText,
-      }]);
+      setItems([
+        ...items,
+        {
+          id: uid,
+          isComplete: false,
+          text: newItemText,
+        },
+      ]);
       setUID(uid + 1);
       setNewItemText('');
     }
   }, [newItemText]);
 
-  const handleKeyPress = useCallback(event => {
-    if (event.key === 'Enter') {
-      handleClick();
-    }
-  }, [handleClick]);
+  const handleKeyPress = useCallback(
+    event => {
+      if (event.key === 'Enter') {
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
 
-  const handleChange = useCallback(event => {
-    setNewItemText(event.currentTarget.value);
-  }, [setNewItemText]);
+  const handleChange = useCallback(
+    event => {
+      setNewItemText(event.currentTarget.value);
+    },
+    [setNewItemText]
+  );
 
-  const removeItem = useCallback(itemToRemove => {
-    setItems(
-      items.filter(item => item !== itemToRemove)
-    );
-  }, [items]);
+  const removeItem = useCallback(
+    itemToRemove => {
+      setItems(items.filter(item => item !== itemToRemove));
+    },
+    [items]
+  );
 
-  const toggleItem = useCallback(itemToToggle => {
-    const index = items.indexOf(itemToToggle);
+  const toggleItem = useCallback(
+    itemToToggle => {
+      const index = items.indexOf(itemToToggle);
 
-    setItems(
-      items
-        .slice(0, index)
-        .concat({
-          ...itemToToggle,
-          isComplete: !itemToToggle.isComplete,
-        })
-        .concat(items.slice(index + 1))
-    );
-  }, [items]);
+      setItems(
+        items
+          .slice(0, index)
+          .concat({
+            ...itemToToggle,
+            isComplete: !itemToToggle.isComplete,
+          })
+          .concat(items.slice(index + 1))
+      );
+    },
+    [items]
+  );
 
   return (
     <Fragment>
@@ -78,7 +91,11 @@ export default function List({}: Props) {
         className={styles.IconButton}
         disabled={newItemText === ''}
         onClick={handleClick}
-      >➕</button>
+      >
+        <span role="img" aria-label="Add item">
+          ➕
+        </span>
+      </button>
       <ul className={styles.List}>
         {items.map(item => (
           <ListItem
@@ -91,4 +108,4 @@ export default function List({}: Props) {
       </ul>
     </Fragment>
   );
-}
\ No newline at end of file
+}
diff --git a/shells/dev/app/ToDoList/ListItem.js b/shells/dev/app/ToDoList/ListItem.js
index f0bf35f308af..e3e67941479e 100644
--- a/shells/dev/app/ToDoList/ListItem.js
+++ b/shells/dev/app/ToDoList/ListItem.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import styles from './ListItem.css';
 
-import type {Item} from './List';
+import type { Item } from './List';
 
 type Props = {|
   item: Item,
@@ -22,15 +22,18 @@ export default function ListItem({ item, removeItem, toggleItem }: Props) {
 
   return (
     <li className={styles.ListItem}>
-      <button className={styles.IconButton} onClick={handleDelete}>🗑</button>
+      <button className={styles.IconButton} onClick={handleDelete}>
+        🗑
+      </button>
       <label className={styles.Label}>
         <input
           className={styles.Input}
           checked={item.isComplete}
           onChange={handleToggle}
           type="checkbox"
-        /> {item.text}
+        />{' '}
+        {item.text}
       </label>
     </li>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/shells/dev/app/ToDoList/index.js b/shells/dev/app/ToDoList/index.js
index 336fa1839924..0a86ff185c6f 100644
--- a/shells/dev/app/ToDoList/index.js
+++ b/shells/dev/app/ToDoList/index.js
@@ -2,4 +2,4 @@
 
 import List from './List';
 
-export default List;
\ No newline at end of file
+export default List;
diff --git a/shells/dev/app/app.js b/shells/dev/app/app.js
index 9f52a48047db..7d009f251ec5 100644
--- a/shells/dev/app/app.js
+++ b/shells/dev/app/app.js
@@ -6,10 +6,10 @@ import ElementTypes from './ElementTypes';
 import styles from './App.css';
 
 export default function App() {
- return (
+  return (
     <div className={styles.App}>
       <List />
       <ElementTypes />
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index e1478f17a65a..897623f78dc9 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -8,4 +8,4 @@ const container = document.createElement('div');
 
 render(createElement(App), container);
 
-((document.body: any): HTMLBodyElement).appendChild(container);
\ No newline at end of file
+((document.body: any): HTMLBodyElement).appendChild(container);
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 21d3abfb45ea..3901c8fc19c4 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -1,19 +1,19 @@
 /** @flow */
 
 import Agent from 'src/backend/agent';
-import Bridge from 'src/bridge'
+import Bridge from 'src/bridge';
 import { initBackend } from 'src/backend';
 
 const bridge = new Bridge({
-  listen (fn) {
+  listen(fn) {
     window.addEventListener('message', event => {
       fn(event.data);
     });
   },
-  send (data) {
-    window.parent.postMessage(data, '*')
-  }
-})
+  send(data) {
+    window.parent.postMessage(data, '*');
+  },
+});
 
 const agent = new Agent();
 agent.addBridge(bridge);
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index fb0425896782..948dbf565f31 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -1,7 +1,7 @@
 /** @flow */
 
 import { createElement } from 'react';
-import {render } from 'react-dom';
+import { render } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
@@ -9,7 +9,7 @@ import App from 'src/devtools/views/App';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
-const {contentDocument, contentWindow} = iframe;
+const { contentDocument, contentWindow } = iframe;
 
 installHook(contentWindow);
 
@@ -19,34 +19,34 @@ initDevTools({
       const bridge = new Bridge({
         listen(fn) {
           contentWindow.parent.addEventListener('message', ({ data }) => {
-            fn(data)
+            fn(data);
           });
         },
         send(data) {
           contentWindow.postMessage(data, '*');
-        }
+        },
       });
 
       cb(bridge);
 
       render(
-        createElement(App, {bridge}),
-        ((document.getElementById('devtools'): any): HTMLElement),
+        createElement(App, { bridge }),
+        ((document.getElementById('devtools'): any): HTMLElement)
       );
     });
   },
 
   onReload(reloadFn) {
     iframe.onload = reloadFn;
-  }
+  },
 });
 
 inject('./build/app.js');
 
 function inject(sourcePath, callback) {
-  const script = contentDocument.createElement('script')
+  const script = contentDocument.createElement('script');
   script.onload = callback;
   script.src = sourcePath;
 
   ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
-}
\ No newline at end of file
+}
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 44367014f8cc..887375ce9dca 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -1,5 +1,5 @@
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
 
 // TODO Share Webpack configs like alias
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index d15cf67ec066..25241716df0a 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -2,12 +2,17 @@
 
 import nullthrows from 'nullthrows';
 import EventEmitter from 'events';
-import {guid} from './utils';
-import {ElementTypeOtherOrUnknown} from 'src/devtools/types';
-
-import type {Fiber, RendererData, RendererID, RendererInterface} from './types';
-import type {Bridge} from '../types';
-import type {Element} from 'src/devtools/types';
+import { guid } from './utils';
+import { ElementTypeOtherOrUnknown } from 'src/devtools/types';
+
+import type {
+  Fiber,
+  RendererData,
+  RendererID,
+  RendererInterface,
+} from './types';
+import type { Bridge } from '../types';
+import type { Element } from 'src/devtools/types';
 
 const debug = (methodName, ...args) => {
   //console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
@@ -22,7 +27,7 @@ export default class Agent extends EventEmitter {
   _idToRendererData: Map<string, RendererData> = new Map();
   _idToRendererID: Map<string, RendererID> = new Map();
   _isRenderInProgress: boolean = false;
-  _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
+  _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
   _roots: Set<RendererID> = new Set();
 
   // Tree updates are debounced to reduce bridge traffic and improve performance.
@@ -43,7 +48,10 @@ export default class Agent extends EventEmitter {
     // TODO Add other methods for e.g. profiling.
   }
 
-  setRendererInterface(rendererID: RendererID, rendererInterface: RendererInterface) {
+  setRendererInterface(
+    rendererID: RendererID,
+    rendererInterface: RendererInterface
+  ) {
     this._rendererInterfaces[rendererID] = rendererInterface;
   }
 
@@ -53,20 +61,19 @@ export default class Agent extends EventEmitter {
     }
     if (!this._fiberToID.has(fiber)) {
       this._fiberToID.set(fiber, guid());
-      this._idToFiber.set(
-        nullthrows(this._fiberToID.get(fiber)),
-        fiber
-      );
+      this._idToFiber.set(nullthrows(this._fiberToID.get(fiber)), fiber);
     }
     return nullthrows(this._fiberToID.get(fiber));
   }
 
   _crawl(parent: Element, id: string): void {
-    const data: RendererData = ((this._idToRendererData.get(id): any): RendererData);
+    const data: RendererData = ((this._idToRendererData.get(
+      id
+    ): any): RendererData);
     if (data.type === ElementTypeOtherOrUnknown) {
       data.children.forEach(childFiber => {
         if (childFiber !== null) {
-          this._crawl(parent, this._getId(childFiber))
+          this._crawl(parent, this._getId(childFiber));
         }
       });
     } else {
@@ -77,8 +84,7 @@ export default class Agent extends EventEmitter {
   }
 
   _crawlPendingRoots(): void {
-console.log('_crawlPendingRoots', this._pendingRoots)
-    this._pendingRoots.forEach(id =>  this._crawlRoot(id));
+    this._pendingRoots.forEach(id => this._crawlRoot(id));
     this._pendingRoots.clear();
     this._lastCrawlTime = performance.now();
   }
@@ -110,12 +116,12 @@ console.log('_crawlPendingRoots', this._pendingRoots)
 
     data.children.forEach(childFiber => {
       if (childFiber !== null) {
-        this._crawl(nextElement, this._getId(childFiber))
+        this._crawl(nextElement, this._getId(childFiber));
       }
     });
 
     if (prevElement == null) {
-      debug('emit("mount")', id, nextElement)
+      debug('emit("mount")', id, nextElement);
       this.emit('mount', nextElement);
     } else if (!areElementsEqual(prevElement, nextElement)) {
       debug('emit("update")', id, nextElement);
@@ -123,21 +129,37 @@ console.log('_crawlPendingRoots', this._pendingRoots)
     }
   }
 
-  _maybeCrawlRoot = () =>  {
+  _maybeCrawlRoot = () => {
     this._pendingRootTimeoutID = null;
     if (!this._isRenderInProgress) {
       this._crawlPendingRoots();
     }
   };
 
-  onHookMount = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
+  onHookMount = ({
+    data,
+    fiber,
+    renderer,
+  }: {
+    data: RendererData,
+    fiber: Fiber,
+    renderer: RendererID,
+  }) => {
     const id = this._getId(fiber);
 
     this._idToRendererData.set(id, data);
     this._idToRendererID.set(id, renderer);
   };
 
-  onHookRootCommitted = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {
+  onHookRootCommitted = ({
+    data,
+    fiber,
+    renderer,
+  }: {
+    data: RendererData,
+    fiber: Fiber,
+    renderer: RendererID,
+  }) => {
     const id = this._getId(fiber);
 
     this._isRenderInProgress = false;
@@ -147,11 +169,14 @@ console.log('_crawlPendingRoots', this._pendingRoots)
     if (delta >= THROTTLE_BY_MS) {
       this._crawlPendingRoots();
     } else if (this._pendingRootTimeoutID === null) {
-      this._pendingRootTimeoutID = setTimeout(this._maybeCrawlRoot, THROTTLE_BY_MS - delta);
+      this._pendingRootTimeoutID = setTimeout(
+        this._maybeCrawlRoot,
+        THROTTLE_BY_MS - delta
+      );
     }
   };
 
-  onHookUnmount = ({fiber}: {fiber: Fiber}) => {
+  onHookUnmount = ({ fiber }: { fiber: Fiber }) => {
     const id = this._getId(fiber);
 
     if (this._roots.has(id)) {
@@ -170,7 +195,7 @@ console.log('_crawlPendingRoots', this._pendingRoots)
     this._idToRendererID.delete(id);
   };
 
-  onHookUpdate = ({data, fiber}: {data: RendererData, fiber: Fiber}) => {
+  onHookUpdate = ({ data, fiber }: { data: RendererData, fiber: Fiber }) => {
     const id = this._getId(fiber);
 
     this._isRenderInProgress = true;
@@ -178,8 +203,11 @@ console.log('_crawlPendingRoots', this._pendingRoots)
   };
 }
 
-function areElementsEqual(prevElement: ?Element, nextElement: ?Element): boolean {
-  if (!prevElement  || !nextElement) {
+function areElementsEqual(
+  prevElement: ?Element,
+  nextElement: ?Element
+): boolean {
+  if (!prevElement || !nextElement) {
     return false;
   }
 
@@ -188,12 +216,12 @@ function areElementsEqual(prevElement: ?Element, nextElement: ?Element): boolean
     prevElement.displayName !== nextElement.displayName ||
     prevElement.children.length !== nextElement.children.length ||
     prevElement.type !== nextElement.type
-  ) { 
+  ) {
     return false;
   }
 
   for (let i = 0; i < prevElement.children.length; i++) {
-    if  (prevElement.children[i] !== nextElement.children[i])  {
+    if (prevElement.children[i] !== nextElement.children[i]) {
       return false;
     }
   }
diff --git a/src/backend/index.js b/src/backend/index.js
index 9295c4aae212..c7176b83f6b5 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,14 +1,13 @@
 // @flow
 
-import type {Hook} from './types';
-import type {Bridge} from '../types';
+import type { Hook } from './types';
 import Agent from './agent';
 
 import { attach } from './renderer';
 
 export function initBackend(hook: Hook, agent: Agent): void {
   const subs = [
-    hook.sub('renderer-attached', ({id, renderer, rendererInterface}) => {
+    hook.sub('renderer-attached', ({ id, renderer, rendererInterface }) => {
       agent.setRendererInterface(id, rendererInterface);
       rendererInterface.walkTree();
     }),
@@ -27,7 +26,7 @@ export function initBackend(hook: Hook, agent: Agent): void {
     hook.emit('renderer-attached', {
       id,
       renderer,
-      rendererInterface
+      rendererInterface,
     });
   };
 
@@ -38,7 +37,7 @@ export function initBackend(hook: Hook, agent: Agent): void {
   }
 
   // Connect any new renderers that injected themselves.
-  hook.on('renderer', ({id, renderer}) => {
+  hook.on('renderer', ({ id, renderer }) => {
     attachRenderer(id, renderer);
   });
 
@@ -48,4 +47,4 @@ export function initBackend(hook: Hook, agent: Agent): void {
     subs.forEach(fn => fn());
     hook.reactDevtoolsAgent = null;
   });
-};
+}
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7ea4c6d71521..bfc34a9eda8e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1,6 +1,6 @@
 // @flow
 
-import {gte} from 'semver';
+import { gte } from 'semver';
 import {
   ElementTypeClassOrFunction,
   ElementTypeContext,
@@ -12,27 +12,17 @@ import {
 } from 'src/devtools/types';
 import { getDisplayName } from './utils';
 
-import type {Fiber, Hook, ReactRenderer, RendererData, RendererInterface} from './types';
+import type {
+  Fiber,
+  Hook,
+  ReactRenderer,
+  RendererData,
+  RendererInterface,
+} from './types';
 
 // TODO: If we're profiling, process update
 // TODO: Throttle process update to app tree
 
-// Taken from ReactElement.
-function resolveDefaultProps(Component: any, baseProps: Object): Object {
-  if (Component && Component.defaultProps) {
-    // Resolve default props. Taken from ReactElement
-    const props = Object.assign({}, baseProps);
-    const defaultProps = Component.defaultProps;
-    for (const propName in defaultProps) {
-      if (props[propName] === undefined) {
-        props[propName] = defaultProps[propName];
-      }
-    }
-    return props;
-  }
-  return baseProps;
-}
-
 function getInternalReactConstants(version) {
   const ReactSymbols = {
     CONCURRENT_MODE_NUMBER: 0xeacf,
@@ -152,11 +142,14 @@ function getInternalReactConstants(version) {
 export function attach(
   hook: Hook,
   rendererID: string,
-  renderer: ReactRenderer,
+  renderer: ReactRenderer
 ): RendererInterface {
-  const {overrideProps} = renderer;
-  const {ReactTypeOfWork, ReactSymbols, ReactTypeOfSideEffect} = getInternalReactConstants(renderer.version);
-  const {PerformedWork} = ReactTypeOfSideEffect;
+  const {
+    ReactTypeOfWork,
+    ReactSymbols,
+    ReactTypeOfSideEffect,
+  } = getInternalReactConstants(renderer.version);
+  const { PerformedWork } = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -228,11 +221,9 @@ export function attach(
         break;
       case ForwardRef:
         const functionName = getDisplayName(resolvedType.render, '');
-        displayName = resolvedType.displayName || (
-          functionName !== ''
-            ? `ForwardRef(${functionName})`
-            : 'ForwardRef'
-        );
+        displayName =
+          resolvedType.displayName ||
+          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef');
         rendererData = {
           children: [],
           displayName,
@@ -269,14 +260,14 @@ export function attach(
         };
         break;
       default:
-        const symbolOrNumber = typeof type === 'object' && type !== null
-          ? type.$$typeof
-          : type;
+        const symbolOrNumber =
+          typeof type === 'object' && type !== null ? type.$$typeof : type;
 
         // $FlowFixMe facebook/flow/issues/2362
-        const switchValue = typeof symbolOrNumber === 'symbol'
-          ? symbolOrNumber.toString()
-          : symbolOrNumber;
+        const switchValue =
+          typeof symbolOrNumber === 'symbol'
+            ? symbolOrNumber.toString()
+            : symbolOrNumber;
 
         switch (switchValue) {
           case CONCURRENT_MODE_NUMBER:
@@ -295,7 +286,8 @@ export function attach(
             // 16.3.0 exposed the context object as "context"
             // PR #12501 changed it to "_context" for 16.3.1+
             resolvedContext = fiber.type._context || fiber.type.context;
-            displayName  = `${resolvedContext.displayName || 'Context'}.Provider`;
+            displayName = `${resolvedContext.displayName ||
+              'Context'}.Provider`;
 
             rendererData = {
               children: [],
@@ -312,7 +304,8 @@ export function attach(
 
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
             // If you change the name, figure out a more resilient way to detect it.
-            displayName = `${resolvedContext.displayName || 'Context'}.Consumer`;
+            displayName = `${resolvedContext.displayName ||
+              'Context'}.Consumer`;
 
             rendererData = {
               children: [],
@@ -366,7 +359,7 @@ export function attach(
         break;
     }
 
-    const {children} = rendererData;
+    const { children } = rendererData;
     if (isTimedOutSuspense) {
       // The behavior of timed-out Suspense trees is unique.
       // Rather than unmount the timed out content (and possibly lose important state),
@@ -400,7 +393,7 @@ export function attach(
     if (primaryFibers.has(fiber)) {
       return fiber;
     }
-    const {alternate} = fiber;
+    const { alternate } = fiber;
     if (alternate != null && primaryFibers.has(alternate)) {
       return alternate;
     }
@@ -419,8 +412,8 @@ export function attach(
         // We don't reflect bailouts (either referential or sCU) in DevTools.
         // eslint-disable-next-line no-bitwise
         return (nextFiber.effectTag & PerformedWork) === PerformedWork;
-        // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
-        // so it won't get highlighted with React 16.3.0 to 16.3.2.
+      // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
+      // so it won't get highlighted with React 16.3.0 to 16.3.2.
       default:
         // For host components and other types, we compare inputs
         // to determine whether something is an update.
@@ -432,14 +425,15 @@ export function attach(
     }
   }
 
-  function haveProfilerTimesChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
+  function haveProfilerTimesChanged(
+    prevFiber: Fiber,
+    nextFiber: Fiber
+  ): boolean {
     return (
       prevFiber.actualDuration !== undefined && // Short-circuit check for non-profiling builds
-      (
-        prevFiber.actualDuration !== nextFiber.actualDuration ||
+      (prevFiber.actualDuration !== nextFiber.actualDuration ||
         prevFiber.actualStartTime !== nextFiber.actualStartTime ||
-        prevFiber.treeBaseDuration !== nextFiber.treeBaseDuration
-      )
+        prevFiber.treeBaseDuration !== nextFiber.treeBaseDuration)
     );
   }
 
@@ -476,10 +470,7 @@ export function attach(
   function enqueueUpdateIfNecessary(fiber, hasChildOrderChanged) {
     const data = getRendererDataFromFiber(fiber);
 
-    if (
-      !hasChildOrderChanged &&
-      !hasDataChanged(fiber.alternate, fiber)
-    ) {
+    if (!hasChildOrderChanged && !hasDataChanged(fiber.alternate, fiber)) {
       // If only timing information has changed, we still need to update the nodes.
       // But we can do it in a faster way since we know it's safe to skip the children.
       // It's also important to avoid emitting an "update" signal for the node in this case,
@@ -542,7 +533,7 @@ export function attach(
         continue;
       }
       enqueueMount(node);
-      if (node == fiber) {
+      if (node === fiber) {
         return;
       }
       if (node.sibling) {
@@ -553,7 +544,7 @@ export function attach(
       while (node.return) {
         node = node.return;
         enqueueMount(node);
-        if (node == fiber) {
+        if (node === fiber) {
           return;
         }
         if (node.sibling) {
@@ -568,10 +559,9 @@ export function attach(
 
   function updateFiber(nextFiber, prevFiber) {
     // Suspense components only have a non-null memoizedState if they're timed-out.
-    const isTimedOutSuspense = (
+    const isTimedOutSuspense =
       nextFiber.tag === ReactTypeOfWork.SuspenseComponent &&
-      nextFiber.memoizedState !== null
-    );
+      nextFiber.memoizedState !== null;
 
     if (isTimedOutSuspense) {
       // The behavior of timed-out Suspense trees is unique.
@@ -663,8 +653,11 @@ export function attach(
 
     if (alternate) {
       // TODO: relying on this seems a bit fishy.
-      const wasMounted = alternate.memoizedState != null && alternate.memoizedState.element != null;
-      const isMounted = current.memoizedState != null && current.memoizedState.element != null;
+      const wasMounted =
+        alternate.memoizedState != null &&
+        alternate.memoizedState.element != null;
+      const isMounted =
+        current.memoizedState != null && current.memoizedState.element != null;
       if (!wasMounted && isMounted) {
         // Mount a new root.
         mountFiber(current);
@@ -715,4 +708,4 @@ export function attach(
     walkTree,
     renderer,
   };
-}
\ No newline at end of file
+}
diff --git a/src/backend/types.js b/src/backend/types.js
index 212a3208493a..58cc727ffa5a 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,22 +1,11 @@
 // @flow
 
-import type {ElementType} from 'src/devtools/types';
+import type { ElementType } from 'src/devtools/types';
 
 type BundleType =
-  | 0  // PROD
+  | 0 // PROD
   | 1; // DEV
 
-type CompositeUpdater = {
-  canUpdate: boolean,
-  setInProps: ?(path: Array<string>, value: any) => void,
-  setInState: ?(path: Array<string>, value: any) => void,
-  setInContext: ?(path: Array<string>, value: any) => void,
-};
-
-type NativeUpdater = {
-  setNativeProps: ?(nativeProps: {[key: string]: any}) => void,
-};
-
 // TODO: Better type for Fiber
 export type Fiber = Object;
 
@@ -43,7 +32,11 @@ export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
   bundleType: BundleType,
-  overrideProps?: ?(fiber: Object, path: Array<string | number>, value: any) => void,
+  overrideProps?: ?(
+    fiber: Object,
+    path: Array<string | number>,
+    value: any
+  ) => void,
 };
 
 export type RendererInterface = {
@@ -58,12 +51,12 @@ export type RendererInterface = {
 export type Handler = (data: any) => void;
 
 export type Hook = {
-  listeners: {[key: string]: Array<Handler>},
-  rendererInterfaces: {[key: string]: RendererInterface},
-  renderers: {[key: string]: ReactRenderer},
+  listeners: { [key: string]: Array<Handler> },
+  rendererInterfaces: { [key: string]: RendererInterface },
+  renderers: { [key: string]: ReactRenderer },
 
   emit: (evt: string, data: any) => void,
-  getFiberRoots: (rendererID : string) => Set<Object>,
+  getFiberRoots: (rendererID: string) => Set<Object>,
   inject: (renderer: ReactRenderer) => string | null,
   on: (evt: string, handler: Handler) => void,
   off: (evt: string, handler: Handler) => void,
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 3682bd9a6742..00bd50760026 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -3,7 +3,10 @@
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
-export function getDisplayName(type: Function, fallbackName: string = 'Unknown'): string {
+export function getDisplayName(
+  type: Function,
+  fallbackName: string = 'Unknown'
+): string {
   const nameFromCache = cachedDisplayNames.get(type);
   if (nameFromCache != null) {
     return nameFromCache;
@@ -43,5 +46,10 @@ export function getDisplayName(type: Function, fallbackName: string = 'Unknown')
 }
 
 export function guid(): string {
-  return 'g' + Math.random().toString(16).substr(2);
-}
\ No newline at end of file
+  return (
+    'g' +
+    Math.random()
+      .toString(16)
+      .substr(2)
+  );
+}
diff --git a/src/bridge.js b/src/bridge.js
index b6ba18d69a37..cf63cb83008f 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -2,7 +2,7 @@
 
 import EventEmitter from 'events';
 
-import type {Wall} from './types';
+import type { Wall } from './types';
 
 const BATCH_DURATION = 100;
 
@@ -18,17 +18,17 @@ export default class Bridge extends EventEmitter {
 
   wall: Wall;
 
-  constructor (wall: Wall) {
+  constructor(wall: Wall) {
     super();
 
     this.wall = wall;
     wall.listen(messages => {
       if (Array.isArray(messages)) {
-        messages.forEach(message => this._emit(message))
+        messages.forEach(message => this._emit(message));
       } else {
-        this._emit(messages)
+        this._emit(messages);
       }
-    })
+    });
   }
 
   /**
@@ -38,23 +38,23 @@ export default class Bridge extends EventEmitter {
    * @param {*} payload
    */
 
-  send (event: string, payload: any) {
+  send(event: string, payload: any) {
     const time = this._time;
 
     if (time === null) {
-      this.wall.send([{ event, payload }])
-      this._time = Date.now()
+      this.wall.send([{ event, payload }]);
+      this._time = Date.now();
     } else {
       this._messageQueue.push({
         event,
-        payload
-      })
+        payload,
+      });
 
-      const now = Date.now()
+      const now = Date.now();
       if (now - time > BATCH_DURATION) {
-        this._flush()
+        this._flush();
       } else {
-        this._timeoutID = setTimeout(() => this._flush(), BATCH_DURATION)
+        this._timeoutID = setTimeout(() => this._flush(), BATCH_DURATION);
       }
     }
   }
@@ -65,27 +65,27 @@ export default class Bridge extends EventEmitter {
    * @param {String} message
    */
 
-  log (message: string): void {
-    this.send('log', message)
+  log(message: string): void {
+    this.send('log', message);
   }
 
-  _flush () {
+  _flush() {
     if (this._messageQueue.length) {
-      this.wall.send(this._messageQueue)
+      this.wall.send(this._messageQueue);
     }
     if (this._timeoutID !== null) {
-      clearTimeout(this._timeoutID)
+      clearTimeout(this._timeoutID);
       this._timeoutID = null;
     }
-    this._messageQueue = []
-    this._time = null
+    this._messageQueue = [];
+    this._time = null;
   }
 
-  _emit (message: string | Message) {
+  _emit(message: string | Message) {
     if (typeof message === 'string') {
-      this.emit(message)
+      this.emit(message);
     } else {
-      this.emit(message.event, message.payload)
+      this.emit(message.event, message.payload);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/devtools/index.js b/src/devtools/index.js
index 93e5f020235e..e6561983149b 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -11,4 +11,4 @@ export function initDevTools(shell: Shell) {
   shell.connect((bridge: Bridge) => {
     // TODO ...
   });
-}
\ No newline at end of file
+}
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b97394a3abce..e3bcf4082e54 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -37,7 +37,7 @@ class Store extends EventEmitter {
   }
 
   onBridgeMount = (element: Element) => {
-    const {id} = element;
+    const { id } = element;
     debug('onBridgeMount()', element);
     this._idToElement.set(id, element);
 
@@ -71,7 +71,7 @@ class Store extends EventEmitter {
   };
 
   onBridgeUpdated = (element: Element) => {
-    const {id} = element;
+    const { id } = element;
     debug('onBridgeUpdated()', element);
     this._idToElement.set(id, element);
 
@@ -79,4 +79,4 @@ class Store extends EventEmitter {
   };
 }
 
-export default Store;
\ No newline at end of file
+export default Store;
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 28c5ad03cb10..a8ac7155aa21 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -8,14 +8,7 @@ export const ElementTypeOtherOrUnknown = 5;
 export const ElementTypeProfiler = 6;
 export const ElementTypeSuspense = 7;
 
-export type ElementType =
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7;
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // TODO: Add profiling node
 
diff --git a/src/devtools/views/App.css b/src/devtools/views/App.css
index 5f76e9c523a1..85bb641bc835 100644
--- a/src/devtools/views/App.css
+++ b/src/devtools/views/App.css
@@ -14,11 +14,11 @@
   --color-special05: #aa0d91;
   --color-special06: #ef6632;
   --color-special07: #777d88;
-  --color-state00: #0088FA;
+  --color-state00: #0088fa;
   --color-state01: #dadada;
   --color-state02: #ffffff;
   --color-state03: #ebf1fb;
-  --color-state04: #FFFF00;
+  --color-state04: #ffff00;
   --color-state05: #222222;
   --color-state06: #222222;
 
@@ -31,7 +31,8 @@
   --line-height-tree-normal: 1.5;
 
   /* GitHub.com system fonts */
-  --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace;
   --font-size-tree-compact: 12px;
   --font-size-tree-normal: 14px;
 }
@@ -41,9 +42,9 @@
   height: 100%;
   overflow: auto;
 
-  -webkit-font-smoothing:  antialiased;
+  -webkit-font-smoothing: antialiased;
 }
 
 * {
   box-sizing: border-box;
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/App.js b/src/devtools/views/App.js
index f5da6477b5d5..0615a60e3409 100644
--- a/src/devtools/views/App.js
+++ b/src/devtools/views/App.js
@@ -3,10 +3,10 @@
 import React, { useMemo } from 'react';
 import Store from '../store';
 import Tree from './Tree';
-import {StoreContext} from './contexts';
+import { StoreContext } from './contexts';
 import styles from './App.css';
 
-import type {Bridge} from '../../types';
+import type { Bridge } from '../../types';
 
 type Props = {|
   bridge: Bridge,
@@ -22,4 +22,4 @@ export default function App({ bridge }: Props) {
       </div>
     </StoreContext.Provider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index d6230f85ebf5..90cb2076123d 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -28,12 +28,12 @@
 }
 .Component:before {
   white-space: nowrap;
-  content: "<";
+  content: '<';
   color: var(--color-tree-tag);
 }
 .Component:after {
   white-space: nowrap;
-  content: ">";
+  content: '>';
   color: var(--color-tree-tag);
 }
 
@@ -43,4 +43,4 @@
 
 .AttributeValue {
   color: var(--color-tree-attr-value);
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 3a2ff0122702..f19858e6bc1b 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,8 +1,8 @@
 // @flow
 
-import React, {Fragment, useContext} from 'react';
-import {useElement} from './hooks';
-import {StoreContext} from './contexts';
+import React, { Fragment, useContext } from 'react';
+import { useElement } from './hooks';
+import { StoreContext } from './contexts';
 
 import styles from './Element.css';
 
@@ -11,25 +11,28 @@ type Props = {|
   id: string,
 |};
 
-export default function Element({depth, id}: Props) {
+export default function Element({ depth, id }: Props) {
   const store = useContext(StoreContext);
   const element = useElement(store, id);
 
-  const {children, displayName, key} = element;
+  const { children, displayName, key } = element;
 
   // TODO: Toggle open/close state
 
   return (
     <Fragment>
-      <div className={styles.Element} style={{paddingLeft: `${1 + depth}rem`}}>
-        {children.length > 0 && (
-          <span className={styles.ArrowOpen}></span>
-        )}
+      <div
+        className={styles.Element}
+        style={{ paddingLeft: `${1 + depth}rem` }}
+      >
+        {children.length > 0 && <span className={styles.ArrowOpen} />}
 
         <span className={styles.Component}>
-          {displayName}{key && (
+          {displayName}
+          {key && (
             <Fragment>
-              &nbsp;<span className={styles.AttributeName}>key</span>=<span className={styles.AttributeValue}>"{key}"</span>
+              &nbsp;<span className={styles.AttributeName}>key</span>=
+              <span className={styles.AttributeValue}>"{key}"</span>
             </Fragment>
           )}
         </span>
@@ -40,4 +43,4 @@ export default function Element({depth, id}: Props) {
       ))}
     </Fragment>
   );
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index 5c4c2476be0d..c4c15434f9e3 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -5,7 +5,7 @@
 
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-tree-compact);
- 
+
   /* TODO */
   line-height: var(--line-height-tree-compact);
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index f3c8c857f7a6..168a333b752d 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -1,21 +1,23 @@
 // @flow
 
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import Element from './Element';
-import {StoreContext} from './contexts';
-import {useElement, useRoots} from './hooks';
+import { StoreContext } from './contexts';
+import { useElement, useRoots } from './hooks';
 
 import styles from './Tree.css';
 
 type TreeProps = {||};
 
-export default function Tree({}: TreeProps) {
+export default function Tree(props: TreeProps) {
   const store = useContext(StoreContext);
   const roots = useRoots(store);
 
   return (
     <div className={styles.Tree}>
-      {roots.map(id => <Root key={id} id={id} />)}
+      {roots.map(id => (
+        <Root key={id} id={id} />
+      ))}
     </div>
   );
 }
@@ -24,11 +26,11 @@ type RootProps = {|
   id: string,
 |};
 
-function Root({id}: RootProps) {
+function Root({ id }: RootProps) {
   const store = useContext(StoreContext);
   const element = useElement(store, id);
 
   return element.children.map(childID => (
     <Element key={childID} depth={0} id={childID} />
   ));
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/contexts.js b/src/devtools/views/contexts.js
index 2d185d7f1ff5..d5a76c5f07fc 100644
--- a/src/devtools/views/contexts.js
+++ b/src/devtools/views/contexts.js
@@ -5,4 +5,4 @@ import { createContext } from 'react';
 import Store from '../store';
 
 export const RootsContext = createContext<Array<string>>([]);
-export const StoreContext = createContext<Store>(((null: any): Store));
\ No newline at end of file
+export const StoreContext = createContext<Store>(((null: any): Store));
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index c44ba9fb6530..407d78398db2 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -1,12 +1,14 @@
 // @flow
 
-import {createContext, useLayoutEffect, useRef, useState} from 'react';
+import { useLayoutEffect, useState } from 'react';
 
-import type {Element} from '../types';
+import type { Element } from '../types';
 import Store from '../store';
 
 export function useElement(store: Store, id: string): Element {
-  const [element, setElement] = useState<Element>(((store.getElement(id): any): Element));
+  const [element, setElement] = useState<Element>(
+    ((store.getElement(id): any): Element)
+  );
 
   useLayoutEffect(() => {
     const handler = () => setElement(((store.getElement(id): any): Element));
@@ -27,4 +29,4 @@ export function useRoots(store: Store): Array<string> {
   }, [store]);
 
   return roots;
-}
\ No newline at end of file
+}
diff --git a/src/hook.js b/src/hook.js
index 3092c99a119f..0f0e3e57491f 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-import type {Hook} from './types';
+import type { Hook } from './types';
 
 declare var window: any;
 
 export function installHook(target: any): Hook {
-  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return;
 
   function detectReactBuildType(renderer) {
     try {
@@ -68,12 +68,16 @@ export function installHook(target: any): Hook {
   }
 
   function inject(renderer) {
-    const id = Math.random().toString(16).slice(2);
+    const id = Math.random()
+      .toString(16)
+      .slice(2);
     renderers[id] = renderer;
 
-    const reactBuildType = hasDetectedBadDCE ? 'deadcode' : detectReactBuildType(renderer);
+    const reactBuildType = hasDetectedBadDCE
+      ? 'deadcode'
+      : detectReactBuildType(renderer);
 
-    hook.emit('renderer', {id, renderer, reactBuildType});
+    hook.emit('renderer', { id, renderer, reactBuildType });
 
     return id;
   }
@@ -130,7 +134,8 @@ export function installHook(target: any): Hook {
     const mountedRoots = hook.getFiberRoots(rendererID);
     const current = root.current;
     const isKnownRoot = mountedRoots.has(root);
-    const isUnmounting = current.memoizedState == null || current.memoizedState.element == null;
+    const isUnmounting =
+      current.memoizedState == null || current.memoizedState.element == null;
 
     // Keep track of mounted roots so we can hydrate when DevTools connect.
     if (!isKnownRoot && !isUnmounting) {
@@ -149,7 +154,7 @@ export function installHook(target: any): Hook {
   const listeners = {};
   const renderers = {};
 
-  const hook: Hook = ({
+  const hook: Hook = {
     rendererInterfaces,
     listeners,
     renderers,
@@ -169,14 +174,18 @@ export function installHook(target: any): Hook {
     checkDCE,
     onCommitFiberUnmount,
     onCommitFiberRoot,
-  });
-
-  Object.defineProperty(target, '__REACT_DEVTOOLS_GLOBAL_HOOK__', ({
-    enumerable: false,
-    get () {
-      return hook
-    }
-  }: Object));
+  };
+
+  Object.defineProperty(
+    target,
+    '__REACT_DEVTOOLS_GLOBAL_HOOK__',
+    ({
+      enumerable: false,
+      get() {
+        return hook;
+      },
+    }: Object)
+  );
 
   return hook;
-}
\ No newline at end of file
+}
diff --git a/src/types.js b/src/types.js
index 3d5f54139c33..c7af7c99a7bb 100644
--- a/src/types.js
+++ b/src/types.js
@@ -9,4 +9,4 @@ export type Hook = any;
 export type Wall = {|
   listen: (fn: Function) => void,
   send: (data: any) => void,
-|};
\ No newline at end of file
+|};
diff --git a/yarn.lock b/yarn.lock
index ddda9e7f5ecc..494ec5355257 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -48,6 +48,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.2.2":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.0.tgz#f663838cd7b542366de3aa608a657b8ccb2a99eb"
+  integrity sha512-dZTwMvTgWfhmibq4V9X+LMf6Bgl7zAodRn9PvcPdhlzFMbvUutx74dbEv7Atz3ToeEpevYEJtAwfxq/bDCzHWg==
+  dependencies:
+    "@babel/types" "^7.3.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -229,6 +240,11 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.0.0", "@babel/parser@^7.2.3":
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.1.tgz#8f4ffd45f779e6132780835ffa7a215fa0b2d181"
+  integrity sha512-ATz6yX/L8LEnC3dtLQnIx4ydcPxhLcoy9Vl6re00zb2w5lG6itY6Vhnr1KFRPq/FHNsgl/gh2mjNN20f9iJTTA==
+
 "@babel/parser@^7.1.2", "@babel/parser@^7.1.6":
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
@@ -667,6 +683,21 @@
     "@babel/parser" "^7.1.2"
     "@babel/types" "^7.1.2"
 
+"@babel/traverse@^7.0.0":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.2.3.tgz#7ff50cefa9c7c0bd2d81231fdac122f3957748d8"
+  integrity sha512-Z31oUD/fJvEWVR0lNZtfgvVt512ForCTNKYcJBGbPb1QZfve4WGH8Wsy7+Mev33/45fhP/hwQtvgusNdcCMgSw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.2.2"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/parser" "^7.2.3"
+    "@babel/types" "^7.2.2"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.1.6":
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.6.tgz#c8db9963ab4ce5b894222435482bd8ea854b7b5c"
@@ -691,6 +722,22 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.2.2", "@babel/types@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.0.tgz#61dc0b336a93badc02bf5f69c4cd8e1353f2ffc0"
+  integrity sha512-QkFPw68QqWU1/RVPyBe8SO7lXbPfjtqAxRYQKpFpaB8yMq7X2qAqfwK5LKoQufEkSmO5NQ70O6Kc3Afk03RwXw==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
+"@samverschueren/stream-to-observable@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
+  integrity sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==
+  dependencies:
+    any-observable "^0.3.0"
+
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
@@ -888,7 +935,7 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
-acorn@^3.0.4, acorn@^3.1.0:
+acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
@@ -900,7 +947,7 @@ acorn@^5.0.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
 
-acorn@^5.6.2:
+acorn@^5.5.0, acorn@^5.6.2:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
@@ -954,6 +1001,11 @@ ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
+
 ajv-keywords@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
@@ -982,7 +1034,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.0:
+ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -1062,6 +1114,11 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+any-observable@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
+  integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
+
 any-promise@^1.0.0, any-promise@^1.1.0, any-promise@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -1132,6 +1189,14 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-query@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
+  integrity sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -1178,6 +1243,14 @@ array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
 
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  integrity sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
 array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
@@ -1252,6 +1325,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-types-flow@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -1332,6 +1410,13 @@ aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axobject-query@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
+  integrity sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=
+  dependencies:
+    ast-types-flow "0.0.7"
+
 babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.3.13:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -1403,16 +1488,17 @@ babel-core@^7.0.0-bridge:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-eslint@6:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-6.1.2.tgz#5293419fe3672d66598d327da9694567ba6a5f2f"
-  integrity sha1-UpNBn+NnLWZZjTJ9qWlFZ7pqXy8=
+babel-eslint@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-9.0.0.tgz#7d9445f81ed9f60aff38115f838970df9f2b6220"
+  integrity sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==
   dependencies:
-    babel-traverse "^6.0.20"
-    babel-types "^6.0.19"
-    babylon "^6.0.18"
-    lodash.assign "^4.0.0"
-    lodash.pickby "^4.0.0"
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-scope "3.7.1"
+    eslint-visitor-keys "^1.0.0"
 
 babel-generator@^6.18.0:
   version "6.26.0"
@@ -1860,7 +1946,7 @@ babel-template@^6.22.0, babel-template@^6.3.13:
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.0.20, babel-traverse@^6.18.0, babel-traverse@^6.26.0:
+babel-traverse@^6.18.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -1888,7 +1974,7 @@ babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.3.21:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.0.19, babel-types@^6.18.0, babel-types@^6.26.0:
+babel-types@^6.18.0, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -1906,14 +1992,14 @@ babel-types@^6.22.0, babel-types@^6.3.21:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.0.18, babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-
 babylon@^6.11.0, babylon@^6.15.0, babylon@^6.3.21:
   version "6.15.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
 
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2258,12 +2344,26 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
   dependencies:
     callsites "^0.2.0"
 
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
 callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
@@ -2353,6 +2453,15 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@^2.3.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
@@ -2508,6 +2617,14 @@ cli-spinners@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.0.0.tgz#ef987ed3d48391ac3dab9180b406a742180d6e6a"
 
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  integrity sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
 cli-width@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
@@ -2622,15 +2739,15 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.6.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
-commander@^2.9.0:
+commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
+commander@^2.6.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
 commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -2667,7 +2784,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.10, concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream@^1.5.2:
+concat-stream@^1.4.10, concat-stream@^1.4.7, concat-stream@^1.5.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -2675,7 +2792,7 @@ concat-stream@^1.4.10, concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-concat-stream@^1.5.0:
+concat-stream@^1.5.0, concat-stream@^1.6.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -2718,6 +2835,11 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
 content-type-parser@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
@@ -2905,6 +3027,16 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+cosmiconfig@^5.0.2:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04"
+  integrity sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+
 crc32-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
@@ -2974,7 +3106,7 @@ cross-spawn@^4.0.0, cross-spawn@^4.0.2:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^5.0.1:
+cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
@@ -3112,6 +3244,11 @@ d@^0.1.1, d@~0.1.1:
   dependencies:
     es5-ext "~0.10.2"
 
+damerau-levenshtein@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+  integrity sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ=
+
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
@@ -3125,6 +3262,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.27.2:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -3151,7 +3293,7 @@ debug@^2.1.1, debug@^2.2.0:
   dependencies:
     ms "0.7.2"
 
-debug@^2.1.2, debug@^2.3.3, debug@^2.6.8:
+debug@^2.1.2, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -3318,7 +3460,7 @@ dispensary@0.10.10:
     source-map-support "0.4.15"
     yargs "^8.0.1"
 
-doctrine@^1.2.1:
+doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
   dependencies:
@@ -3332,6 +3474,13 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -3440,6 +3589,11 @@ electron-to-chromium@^1.3.82:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.84.tgz#2e55df59e818f150a9f61b53471ebf4f0feecc65"
   integrity sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw==
 
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+  integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -3453,6 +3607,11 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3515,6 +3674,18 @@ error-stack-parser@^2.0.2:
   dependencies:
     stackframe "^1.0.4"
 
+es-abstract@^1.11.0, es-abstract@^1.7.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
+  integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
+  dependencies:
+    es-to-primitive "^1.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-keys "^1.0.12"
+
 es-abstract@^1.5.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
@@ -3533,6 +3704,15 @@ es-to-primitive@^1.1.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.1"
 
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
   version "0.10.12"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
@@ -3639,15 +3819,149 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-config-prettier@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.10.0.tgz#ec07bc1d01f87d09f61d3840d112dc8a9791e30b"
+  integrity sha512-Mhl90VLucfBuhmcWBgbUNtgBiK955iCDK1+aHAz7QfDQF6wuzWZ6JjihZ3ejJoGlJWIuko7xLqNm8BA5uenKhA==
+  dependencies:
+    get-stdin "^5.0.1"
+
+eslint-config-react-app@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz#23c909f71cbaff76b945b831d2d814b8bde169eb"
+  integrity sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ==
+
+eslint-config-standard-jsx@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-5.0.0.tgz#4abfac554f38668e0078c664569e7b2384e5d2aa"
+  integrity sha512-rLToPAEqLMPBfWnYTu6xRhm2OWziS2n40QFqJ8jAM8NSVzeVKTa3nclhsU4DpPJQRY60F34Oo1wi/71PN/eITg==
+
+eslint-config-standard-react@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard-react/-/eslint-config-standard-react-6.0.0.tgz#d366d6c3c092426fd3ae794a4ca0b3cb131f2964"
+  integrity sha512-YWlqfvREbH1r6SaRTgFOq+VE3f8/ZQypkfnpDpSmZjztEjxnzznm4xeE2/mDQRx77Okhd/pKHXNZLMsSneJH8A==
+  dependencies:
+    eslint-config-standard-jsx "^5.0.0"
+
+eslint-config-standard@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz#87ee0d3c9d95382dc761958cbb23da9eea31e0ba"
+  integrity sha512-oDdENzpViEe5fwuRCWla7AXQd++/oyIp8zP+iP9jiUPG6NBj3SHgdgtl/kTn00AjeN+1HNvavTKmYbMo+xMOlw==
+
+eslint-import-resolver-node@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+  integrity sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.5.0"
+
+eslint-module-utils@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.3.0.tgz#546178dab5e046c8b562bbb50705e2456d7bda49"
+  integrity sha512-lmDJgeOOjk8hObTysjqH7wyMi+nsHwwvfBykwfhjR1LNdd7C2uFJBvx4OpWYpXOw4df1yE1cDEVd1yLHitk34w==
+  dependencies:
+    debug "^2.6.8"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-flowtype@^2.47.1:
+  version "2.50.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz#61379d6dce1d010370acd6681740fd913d68175f"
+  integrity sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==
+  dependencies:
+    lodash "^4.17.10"
+
+eslint-plugin-import@^2.11.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.15.0.tgz#d8f3c28b8988ccde5df964706faa7c1e52f0602a"
+  integrity sha512-LEHqgR+RcnpGqYW7h9WMkPb/tP+ekKxWdQDztfTtZeV43IHF+X8lXU+1HOCcR4oXD24qRgEwNSxIweD5uNKGVg==
+  dependencies:
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.3.0"
+    has "^1.0.3"
+    lodash "^4.17.11"
+    minimatch "^3.0.4"
+    read-pkg-up "^2.0.0"
+    resolve "^1.9.0"
+
+eslint-plugin-jsx-a11y@^5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+  integrity sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==
+  dependencies:
+    aria-query "^0.7.0"
+    array-includes "^3.0.3"
+    ast-types-flow "0.0.7"
+    axobject-query "^0.1.0"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.4.0"
+
 eslint-plugin-no-unsafe-innerhtml@1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz#7d02878c8e9bf7916b88836d5ac122b42f151932"
   dependencies:
     eslint "^3.7.1"
 
-eslint-plugin-react@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-5.1.1.tgz#869b1dc078a34fe7eab1f587c2bc3cd998befdd6"
+eslint-plugin-node@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz#bf19642298064379315d7a4b2a75937376fa05e4"
+  integrity sha512-Q/Cc2sW1OAISDS+Ji6lZS2KV4b7ueA/WydVWd1BECTQwVvfQy5JAi3glhINoKzoMnfnuRgNP+ZWKrGAbp3QDxw==
+  dependencies:
+    ignore "^3.3.6"
+    minimatch "^3.0.4"
+    resolve "^1.3.3"
+    semver "^5.4.1"
+
+eslint-plugin-prettier@^2.6.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz#b4312dcf2c1d965379d7f9d5b5f8aaadc6a45904"
+  integrity sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==
+  dependencies:
+    fast-diff "^1.1.1"
+    jest-docblock "^21.0.0"
+
+eslint-plugin-promise@^3.7.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
+  integrity sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ==
+
+eslint-plugin-react@^7.7.0:
+  version "7.12.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"
+  integrity sha512-1puHJkXJY+oS1t467MjbqjvX53uQ05HXwjqDgdbGBqf5j9eeydI54G3KwiJmWciQ0HTBacIKw2jgwSBSH3yfgQ==
+  dependencies:
+    array-includes "^3.0.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.0.1"
+    object.fromentries "^2.0.0"
+    prop-types "^15.6.2"
+    resolve "^1.9.0"
+
+eslint-plugin-standard@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-3.1.0.tgz#2a9e21259ba4c47c02d53b2d0c9135d4b1022d47"
+  integrity sha512-fVcdyuKRr0EZ4fjWl3c+gp1BANFJD1+RaWa2UPYfMZ6jCtp5RG00kSaXnK/dE5sYzt4kaWJ9qdxqUfc0d9kX0w==
+
+eslint-scope@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^3.7.1:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
 
 eslint-scope@^4.0.0:
   version "4.0.0"
@@ -3657,42 +3971,10 @@ eslint-scope@^4.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint@2.10.2:
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.10.2.tgz#b2309482fef043d3203365a321285e6cce01c3d7"
-  dependencies:
-    chalk "^1.1.3"
-    concat-stream "^1.4.6"
-    debug "^2.1.1"
-    doctrine "^1.2.1"
-    es6-map "^0.1.3"
-    escope "^3.6.0"
-    espree "3.1.4"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    file-entry-cache "^1.1.1"
-    glob "^7.0.3"
-    globals "^9.2.0"
-    ignore "^3.1.2"
-    imurmurhash "^0.1.4"
-    inquirer "^0.12.0"
-    is-my-json-valid "^2.10.0"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.5.1"
-    json-stable-stringify "^1.0.0"
-    lodash "^4.0.0"
-    mkdirp "^0.5.0"
-    optionator "^0.8.1"
-    path-is-absolute "^1.0.0"
-    path-is-inside "^1.0.1"
-    pluralize "^1.2.1"
-    progress "^1.1.8"
-    require-uncached "^1.0.2"
-    shelljs "^0.6.0"
-    strip-json-comments "~1.0.1"
-    table "^3.7.8"
-    text-table "~0.2.0"
-    user-home "^2.0.0"
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
 eslint@3.19.0, eslint@^3.7.1:
   version "3.19.0"
@@ -3734,12 +4016,49 @@ eslint@3.19.0, eslint@^3.7.1:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-espree@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.1.4.tgz#0726d7ac83af97a7c8498da9b363a3609d2a68a1"
+eslint@^4.19.1:
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
+  integrity sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==
   dependencies:
-    acorn "^3.1.0"
-    acorn-jsx "^3.0.0"
+    ajv "^5.3.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.1.0"
+    doctrine "^2.1.0"
+    eslint-scope "^3.7.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.4"
+    esquery "^1.0.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^11.0.1"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.2"
+    pluralize "^7.0.0"
+    progress "^2.0.0"
+    regexpp "^1.0.1"
+    require-uncached "^1.0.3"
+    semver "^5.3.0"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "4.0.2"
+    text-table "~0.2.0"
 
 espree@^3.4.0:
   version "3.4.3"
@@ -3748,6 +4067,14 @@ espree@^3.4.0:
     acorn "^5.0.1"
     acorn-jsx "^3.0.0"
 
+espree@^3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
+  dependencies:
+    acorn "^5.5.0"
+    acorn-jsx "^3.0.0"
+
 esprima@3.1.3, esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -3869,6 +4196,19 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.9.0.tgz#adb7ce62cf985071f60580deb4a88b9e34712d01"
+  integrity sha512-BbUMBiX4hqiHZUA5+JujIjNb6TyAlp2D5KLheMjMluwOuzcnylDL4AxZYLLn1n2AGB49eSWwyKvvEQoRpnAtmA==
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -3998,6 +4338,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-diff@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-json-parse@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.2.tgz#3fb1ca12db68a85933612cc3fab4d7060cfff1d7"
@@ -4083,7 +4428,7 @@ figgy-pudding@^3.1.0, figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
   integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
 
-figures@^1.3.5:
+figures@^1.3.5, figures@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
   dependencies:
@@ -4096,13 +4441,6 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-file-entry-cache@^1.1.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
-  dependencies:
-    flat-cache "^1.2.1"
-    object-assign "^4.0.1"
-
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -4161,6 +4499,11 @@ find-cache-dir@^2.0.0:
     make-dir "^1.0.0"
     pkg-dir "^3.0.0"
 
+find-parent-dir@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+  integrity sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -4390,6 +4733,11 @@ function-bind@^1.0.2, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
 fx-runner@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.7.tgz#c102cfdf21234c2dbd16723dccb1186f99c0b641"
@@ -4433,6 +4781,11 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
+  integrity sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==
+
 get-pkg-repo@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
@@ -4451,6 +4804,11 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stdin@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+  integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=
+
 get-stream@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
@@ -4595,12 +4953,17 @@ global-modules-path@^2.3.0:
   resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.0.tgz#b0e2bac6beac39745f7db5c59d26a36a0b94f7dc"
   integrity sha512-HchvMJNYh9dGSCy8pOQ2O8u/hoXaL+0XhnrwH0RyLiSXMMTl9W3N6KUU73+JFOg5PGjtzl6VZzUQsnrpm7Szag==
 
+globals@^11.0.1:
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
+  integrity sha512-0GZF1RiPKU97IHUO5TORo9w1PwrH/NBPl+fS7oMLdaTRiYmYbwK4NWoZWrAdd0/abG9R2BU+OiwyQpTpE6pdfQ==
+
 globals@^11.1.0:
   version "11.9.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.9.0.tgz#bde236808e987f290768a93d065060d78e6ab249"
   integrity sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg==
 
-globals@^9.0.0, globals@^9.2.0:
+globals@^9.0.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
 
@@ -4767,6 +5130,11 @@ has-gulplog@^0.1.0:
   dependencies:
     sparkles "^1.0.0"
 
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -4809,6 +5177,13 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
 hash-base@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
@@ -4972,18 +5347,27 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
-
 ignore@^3.2.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
+ignore@^3.3.3, ignore@^3.3.6:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
 immutable@3.7.6:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
 
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -5013,6 +5397,11 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
@@ -5062,7 +5451,7 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@^3.2.2:
+inquirer@^3.0.6, inquirer@^3.2.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
@@ -5151,6 +5540,11 @@ is-callable@^1.1.1, is-callable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
 
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -5193,6 +5587,11 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -5315,10 +5714,17 @@ is-number@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
   integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
 
-is-obj@^1.0.0:
+is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
+is-observable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
+  integrity sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==
+  dependencies:
+    symbol-observable "^1.1.0"
+
 is-path-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
@@ -5375,6 +5781,11 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
 is-relative@^0.1.0:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
@@ -5401,6 +5812,13 @@ is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
 
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  dependencies:
+    has-symbols "^1.0.0"
+
 is-text-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
@@ -5621,6 +6039,11 @@ jest-diff@^22.1.0:
     jest-get-type "^22.1.0"
     pretty-format "^22.1.0"
 
+jest-docblock@^21.0.0:
+  version "21.2.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
+  integrity sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==
+
 jest-docblock@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.1.0.tgz#3fe5986d5444cbcb149746eb4b07c57c5a464dfd"
@@ -5790,6 +6213,16 @@ jest-validate@^22.1.2:
     leven "^2.1.0"
     pretty-format "^22.1.0"
 
+jest-validate@^23.5.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-23.6.0.tgz#36761f99d1ed33fcd425b4e4c5595d62b6597474"
+  integrity sha512-OFKapYxe72yz7agrDAWi8v2WL8GIfVqcbKRCLbRG9PAxtzF9b1SEDdTpytNDN12z2fJynoBwpMpvj2R39plI2A==
+  dependencies:
+    chalk "^2.0.1"
+    jest-get-type "^22.1.0"
+    leven "^2.1.0"
+    pretty-format "^23.6.0"
+
 jest-worker@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.1.0.tgz#0987832fe58fbdc205357f4c19b992446368cafb"
@@ -5854,6 +6287,14 @@ js-yaml@^3.7.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^3.9.0, js-yaml@^3.9.1:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
+  integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -5927,6 +6368,11 @@ json-schema@0.2.3:
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
   integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
 json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -6005,6 +6451,18 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsx-ast-utils@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+  integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
+
+jsx-ast-utils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
+  integrity sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=
+  dependencies:
+    array-includes "^3.0.3"
+
 jszip@^2.4.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
@@ -6141,6 +6599,78 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lint-staged@^7.0.5:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.3.0.tgz#90ff33e5ca61ed3dbac35b6f6502dbefdc0db58d"
+  integrity sha512-AXk40M9DAiPi7f4tdJggwuKIViUplYtVj1os1MVEteW7qOkU50EOehayCfO9TsoGK24o/EsWb41yrEgfJDDjCw==
+  dependencies:
+    chalk "^2.3.1"
+    commander "^2.14.1"
+    cosmiconfig "^5.0.2"
+    debug "^3.1.0"
+    dedent "^0.7.0"
+    execa "^0.9.0"
+    find-parent-dir "^0.3.0"
+    is-glob "^4.0.0"
+    is-windows "^1.0.2"
+    jest-validate "^23.5.0"
+    listr "^0.14.1"
+    lodash "^4.17.5"
+    log-symbols "^2.2.0"
+    micromatch "^3.1.8"
+    npm-which "^3.0.1"
+    p-map "^1.1.1"
+    path-is-inside "^1.0.2"
+    pify "^3.0.0"
+    please-upgrade-node "^3.0.2"
+    staged-git-files "1.1.1"
+    string-argv "^0.0.2"
+    stringify-object "^3.2.2"
+
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+  integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
+
+listr-update-renderer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
+  integrity sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^2.3.0"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
+  integrity sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==
+  dependencies:
+    chalk "^2.4.1"
+    cli-cursor "^2.1.0"
+    date-fns "^1.27.2"
+    figures "^2.0.0"
+
+listr@^0.14.1:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
+  integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
+  dependencies:
+    "@samverschueren/stream-to-observable" "^0.3.0"
+    is-observable "^1.1.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.5.0"
+    listr-verbose-renderer "^0.5.0"
+    p-map "^2.0.0"
+    rxjs "^6.3.3"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -6234,11 +6764,6 @@ lodash._root@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
 
-lodash.assign@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
-
 lodash.assignin@^4.0.9:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
@@ -6306,11 +6831,6 @@ lodash.pick@^4.2.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
 
-lodash.pickby@^4.0.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
-  integrity sha1-feoh2MGNdwOifHBMFdO4SmfjOv8=
-
 lodash.reduce@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
@@ -6373,11 +6893,25 @@ lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lod
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.17.10, lodash@^4.17.11:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  integrity sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=
+  dependencies:
+    chalk "^1.0.0"
+
+log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+  dependencies:
+    chalk "^2.0.1"
+
 log-update@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.0.0.tgz#7f4354d7be1be62b724fcbb3c4b94454c0db5e26"
@@ -6386,6 +6920,15 @@ log-update@^2.0.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^2.1.0"
 
+log-update@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
+  dependencies:
+    ansi-escapes "^3.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -7011,12 +7554,28 @@ npm-packlist@^1.1.6:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
+npm-path@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
+  integrity sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==
+  dependencies:
+    which "^1.2.10"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
   dependencies:
     path-key "^2.0.0"
 
+npm-which@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
+  integrity sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=
+  dependencies:
+    commander "^2.9.0"
+    npm-path "^2.0.2"
+    which "^1.2.10"
+
 npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -7071,6 +7630,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-keys@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
+  integrity sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
@@ -7082,6 +7646,16 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
+object.fromentries@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
+  integrity sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.11.0"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -7243,6 +7817,16 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+
+p-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.0.0.tgz#be18c5a5adeb8e156460651421aceca56c213a50"
+  integrity sha512-GO107XdrSUmtHxVoi60qc9tUl/KkNKm+X2CF4P9amalpGxv5YqVPJNfSb0wcA+syCopkZvYYIzW8OVTQW59x/w==
+
 p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
@@ -7355,7 +7939,7 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@^1.0.1:
+path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
@@ -7367,6 +7951,11 @@ path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
 
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -7460,10 +8049,22 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
+please-upgrade-node@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz#ed320051dfcc5024fae696712c8288993595e8ac"
+  integrity sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==
+  dependencies:
+    semver-compare "^1.0.0"
+
 pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
+
 pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
@@ -7539,6 +8140,11 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
+prettier@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.1.tgz#534c2c9d7853f8845e5e078384e71973bd74089f"
+  integrity sha512-XXUITwIkGb3CPJ2hforHah/zTINRyie5006Jd2HKy2qz7snEJXl0KLfsJZW/wst9g6R2rFvqba3VpNYdu1hDcA==
+
 pretty-format@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.1.0.tgz#2277605b40ed4529ae4db51ff62f4be817647914"
@@ -7546,6 +8152,14 @@ pretty-format@^22.1.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
+  integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
 private@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
@@ -7569,6 +8183,11 @@ progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -7993,6 +8612,11 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexpp@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
+  integrity sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -8184,7 +8808,7 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
-require-uncached@1.0.3, require-uncached@^1.0.2:
+require-uncached@1.0.3, require-uncached@^1.0.2, require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
   dependencies:
@@ -8225,6 +8849,13 @@ resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
+  integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -8315,6 +8946,13 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
+rxjs@^6.3.3:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"
+  integrity sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -8387,6 +9025,11 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -8493,10 +9136,6 @@ shelljs@0.7.7:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shelljs@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
-
 shelljs@^0.7.5:
   version "0.7.8"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
@@ -8540,6 +9179,13 @@ slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
 
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+
 slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
@@ -8749,6 +9395,11 @@ stackframe@^1.0.4:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
   integrity sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw==
 
+staged-git-files@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.1.1.tgz#37c2218ef0d6d26178b1310719309a16a59f8f7b"
+  integrity sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -8815,6 +9466,11 @@ stream-to-promise@2.2.0:
     end-of-stream "~1.1.0"
     stream-to-array "~2.3.0"
 
+string-argv@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
+  integrity sha1-2sMECGkMIfPDYwo/86BYd73L1zY=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -8863,6 +9519,15 @@ string_decoder@~1.0.3:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-object@^3.2.2:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
 stringstream@~0.0.4:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
@@ -8918,10 +9583,6 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -8968,10 +9629,27 @@ supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
+symbol-observable@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
+table@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  integrity sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==
+  dependencies:
+    ajv "^5.2.3"
+    ajv-keywords "^2.1.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
+
 table@^3.7.8:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
@@ -9746,6 +10424,13 @@ which@^1.0.5, which@^1.2.8, which@^1.2.9:
   dependencies:
     isexe "^1.1.1"
 
+which@^1.2.10:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 which@^1.2.12:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
@@ -9808,6 +10493,14 @@ wrap-ansi@^2.0.0, wrap-ansi@^2.1.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  integrity sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

From d57ec6956158037e7d69bf65175abcfcc9c7ee03 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Jan 2019 18:06:21 -0800
Subject: [PATCH 005/814] Added initial Chrome/Firefox shells

---
 .eslintignore                                 |   2 +
 .flowconfig                                   |   3 +
 .prettierignore                               |   2 +
 package.json                                  |   9 +-
 shells/browser/chrome/README.md               |  12 ++
 shells/browser/chrome/build.js                |  20 +++
 shells/browser/chrome/manifest.json           |  48 +++++-
 shells/browser/chrome/test.js                 |  11 ++
 shells/browser/firefox/README.md              |  12 ++
 shells/browser/firefox/build.js               |  38 +++++
 shells/browser/firefox/manifest.json          |  52 ++++++
 shells/browser/firefox/test.js                |  46 ++++++
 shells/browser/shared/build.js                |  93 +++++++++++
 shells/browser/shared/icons/128-deadcode.png  | Bin 0 -> 5201 bytes
 .../browser/shared/icons/128-development.png  | Bin 0 -> 5201 bytes
 shells/browser/shared/icons/128-disabled.png  | Bin 0 -> 4792 bytes
 shells/browser/shared/icons/128-outdated.png  | Bin 0 -> 4162 bytes
 .../browser/shared/icons/128-production.png   | Bin 0 -> 4577 bytes
 .../browser/shared/icons/128-unminified.png   | Bin 0 -> 5201 bytes
 shells/browser/shared/icons/16-deadcode.png   | Bin 0 -> 638 bytes
 .../browser/shared/icons/16-development.png   | Bin 0 -> 638 bytes
 shells/browser/shared/icons/16-disabled.png   | Bin 0 -> 494 bytes
 shells/browser/shared/icons/16-outdated.png   | Bin 0 -> 558 bytes
 shells/browser/shared/icons/16-production.png | Bin 0 -> 546 bytes
 shells/browser/shared/icons/16-unminified.png | Bin 0 -> 638 bytes
 shells/browser/shared/icons/32-deadcode.png   | Bin 0 -> 1318 bytes
 .../browser/shared/icons/32-development.png   | Bin 0 -> 1318 bytes
 shells/browser/shared/icons/32-disabled.png   | Bin 0 -> 1092 bytes
 shells/browser/shared/icons/32-outdated.png   | Bin 0 -> 1095 bytes
 shells/browser/shared/icons/32-production.png | Bin 0 -> 1068 bytes
 shells/browser/shared/icons/32-unminified.png | Bin 0 -> 1318 bytes
 shells/browser/shared/icons/48-deadcode.png   | Bin 0 -> 2001 bytes
 .../browser/shared/icons/48-development.png   | Bin 0 -> 2001 bytes
 shells/browser/shared/icons/48-disabled.png   | Bin 0 -> 1564 bytes
 shells/browser/shared/icons/48-outdated.png   | Bin 0 -> 1570 bytes
 shells/browser/shared/icons/48-production.png | Bin 0 -> 1674 bytes
 shells/browser/shared/icons/48-unminified.png | Bin 0 -> 2001 bytes
 shells/browser/shared/icons/deadcode.svg      |   1 +
 shells/browser/shared/icons/development.svg   |   1 +
 shells/browser/shared/icons/disabled.svg      |   1 +
 shells/browser/shared/icons/outdated.svg      |   1 +
 shells/browser/shared/icons/production.svg    |   1 +
 shells/browser/shared/main.html               |   9 ++
 shells/browser/shared/panel.html              |  32 ++++
 shells/browser/shared/popups/deadcode.html    |  32 ++++
 shells/browser/shared/popups/development.html |  28 ++++
 shells/browser/shared/popups/disabled.html    |  21 +++
 shells/browser/shared/popups/outdated.html    |  29 ++++
 shells/browser/shared/popups/production.html  |  21 +++
 shells/browser/shared/popups/shared.js        |  22 +++
 shells/browser/shared/popups/unminified.html  |  31 ++++
 shells/browser/shared/src/GlobalHook.js       |  64 ++++++++
 shells/browser/shared/src/backend.js          |  67 ++++++++
 shells/browser/shared/src/background.js       | 111 +++++++++++++
 shells/browser/shared/src/checkForReact.js    |  12 ++
 shells/browser/shared/src/contentScript.js    |  52 ++++++
 shells/browser/shared/src/inject.js           |  21 +++
 shells/browser/shared/src/main.js             |  40 +++++
 shells/browser/shared/src/panel.js            |  62 ++++++++
 .../browser/{ => shared}/webpack.backend.js   |  12 +-
 shells/browser/{ => shared}/webpack.config.js |  12 +-
 shells/createConfig.js                        | 148 ------------------
 shells/dev/app/ElementTypes/index.js          |   3 +-
 shells/dev/src/devtools.js                    |   6 +-
 src/backend/agent.js                          |   2 +-
 src/backend/renderer.js                       |   2 +-
 src/devtools/store.js                         |   2 +-
 src/devtools/views/App.js                     |   6 +-
 68 files changed, 1032 insertions(+), 168 deletions(-)
 create mode 100644 shells/browser/chrome/README.md
 create mode 100644 shells/browser/chrome/build.js
 create mode 100644 shells/browser/chrome/test.js
 create mode 100644 shells/browser/firefox/README.md
 create mode 100644 shells/browser/firefox/build.js
 create mode 100644 shells/browser/firefox/manifest.json
 create mode 100644 shells/browser/firefox/test.js
 create mode 100644 shells/browser/shared/build.js
 create mode 100644 shells/browser/shared/icons/128-deadcode.png
 create mode 100644 shells/browser/shared/icons/128-development.png
 create mode 100644 shells/browser/shared/icons/128-disabled.png
 create mode 100644 shells/browser/shared/icons/128-outdated.png
 create mode 100644 shells/browser/shared/icons/128-production.png
 create mode 100644 shells/browser/shared/icons/128-unminified.png
 create mode 100644 shells/browser/shared/icons/16-deadcode.png
 create mode 100644 shells/browser/shared/icons/16-development.png
 create mode 100644 shells/browser/shared/icons/16-disabled.png
 create mode 100644 shells/browser/shared/icons/16-outdated.png
 create mode 100644 shells/browser/shared/icons/16-production.png
 create mode 100644 shells/browser/shared/icons/16-unminified.png
 create mode 100644 shells/browser/shared/icons/32-deadcode.png
 create mode 100644 shells/browser/shared/icons/32-development.png
 create mode 100644 shells/browser/shared/icons/32-disabled.png
 create mode 100644 shells/browser/shared/icons/32-outdated.png
 create mode 100644 shells/browser/shared/icons/32-production.png
 create mode 100644 shells/browser/shared/icons/32-unminified.png
 create mode 100644 shells/browser/shared/icons/48-deadcode.png
 create mode 100644 shells/browser/shared/icons/48-development.png
 create mode 100644 shells/browser/shared/icons/48-disabled.png
 create mode 100644 shells/browser/shared/icons/48-outdated.png
 create mode 100644 shells/browser/shared/icons/48-production.png
 create mode 100644 shells/browser/shared/icons/48-unminified.png
 create mode 100644 shells/browser/shared/icons/deadcode.svg
 create mode 100644 shells/browser/shared/icons/development.svg
 create mode 100644 shells/browser/shared/icons/disabled.svg
 create mode 100644 shells/browser/shared/icons/outdated.svg
 create mode 100644 shells/browser/shared/icons/production.svg
 create mode 100644 shells/browser/shared/main.html
 create mode 100644 shells/browser/shared/panel.html
 create mode 100644 shells/browser/shared/popups/deadcode.html
 create mode 100644 shells/browser/shared/popups/development.html
 create mode 100644 shells/browser/shared/popups/disabled.html
 create mode 100644 shells/browser/shared/popups/outdated.html
 create mode 100644 shells/browser/shared/popups/production.html
 create mode 100644 shells/browser/shared/popups/shared.js
 create mode 100644 shells/browser/shared/popups/unminified.html
 create mode 100644 shells/browser/shared/src/GlobalHook.js
 create mode 100644 shells/browser/shared/src/backend.js
 create mode 100644 shells/browser/shared/src/background.js
 create mode 100644 shells/browser/shared/src/checkForReact.js
 create mode 100644 shells/browser/shared/src/contentScript.js
 create mode 100644 shells/browser/shared/src/inject.js
 create mode 100644 shells/browser/shared/src/main.js
 create mode 100644 shells/browser/shared/src/panel.js
 rename shells/browser/{ => shared}/webpack.backend.js (61%)
 rename shells/browser/{ => shared}/webpack.config.js (80%)
 delete mode 100644 shells/createConfig.js

diff --git a/.eslintignore b/.eslintignore
index 2b7e221a1140..c21ee38faa5d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,7 @@
 node_modules
 
+shells/browser/chrome/build
+shells/browser/firefox/build
 shells/dev/build
 
 package-lock.json
diff --git a/.flowconfig b/.flowconfig
index 784a04999791..35306bd54a6c 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -13,6 +13,9 @@
 .*node_modules/webpack.*
 .*node_modules/fbjs/flow.*
 .*node_modules/web-ext.*
+shells/browser/chrome/build/*
+shells/browser/firefox/build/*
+shells/dev/build/*
 
 [include]
 
diff --git a/.prettierignore b/.prettierignore
index 2b7e221a1140..c21ee38faa5d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,7 @@
 node_modules
 
+shells/browser/chrome/build
+shells/browser/firefox/build
 shells/dev/build
 
 package-lock.json
diff --git a/package.json b/package.json
index 8dc27444c43d..043c75ee8cd8 100644
--- a/package.json
+++ b/package.json
@@ -12,18 +12,17 @@
   },
   "scripts": {
     "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
-    "build:extension:chrome": "node ./shells/chrome/build",
-    "build:extension:firefox": "node ./shells/firefox/build",
+    "build:extension:chrome": "node ./shells/browser/chrome/build",
+    "build:extension:firefox": "node ./shells/browser/firefox/build",
     "build:standalone": "cd packages/react-devtools-core && yarn run build",
-    "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
     "linc": "lint-staged",
     "lint": "eslint '**/*.js'",
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && open ./index.html && webpack --config webpack.config.js --watch",
     "test": "jest",
-    "test:chrome": "node ./shells/chrome/test",
-    "test:firefox": "node ./shells/firefox/test",
+    "test:chrome": "node ./shells/browser/chrome/test",
+    "test:firefox": "node ./shells/browser/firefox/test",
     "test:standalone": "cd packages/react-devtools && yarn start",
     "typecheck": "flow check"
   },
diff --git a/shells/browser/chrome/README.md b/shells/browser/chrome/README.md
new file mode 100644
index 000000000000..dd77d072c828
--- /dev/null
+++ b/shells/browser/chrome/README.md
@@ -0,0 +1,12 @@
+# The Chrome extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:chrome` from the root directory.
+
+## Testing in Chrome
+
+You can test a local build of the web extension like so:
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
new file mode 100644
index 000000000000..1311527d5901
--- /dev/null
+++ b/shells/browser/chrome/build.js
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const chalk = require('chalk');
+const { join } = require('path');
+const build = require('../shared/build');
+
+const main = async () => {
+  await build(
+    'chrome',
+    join(__dirname, 'manifest.json'),
+    join(__dirname, 'build')
+  );
+
+  console.log(chalk.green('\nThe Chrome extension has been built!'));
+  console.log(chalk.green('You can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:chrome');
+};
+
+main();
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 9d6543254f80..c22e4b38490c 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -1,6 +1,46 @@
 {
-  "name": "React v16 DevTools",
-  "version": "0.1",
-  "description": "DevTools for React version 16.0+",
-  "manifest_version": 2
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Chrome Developer Tools.",
+  "version": "4.0.0",
+
+  "minimum_chrome_version": "49",
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html"
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+
+  "background": {
+    "scripts": ["build/background.js"],
+    "persistent": false
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/inject.js"],
+      "run_at": "document_start"
+    }
+  ]
 }
diff --git a/shells/browser/chrome/test.js b/shells/browser/chrome/test.js
new file mode 100644
index 000000000000..9b9bbbf98f44
--- /dev/null
+++ b/shells/browser/chrome/test.js
@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+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 START_URL = 'https://facebook.github.io/react/';
+
+chromeLaunch(START_URL, {
+  args: [`--load-extension=${EXTENSION_PATH}`],
+});
diff --git a/shells/browser/firefox/README.md b/shells/browser/firefox/README.md
new file mode 100644
index 000000000000..c4bbc8d2de6c
--- /dev/null
+++ b/shells/browser/firefox/README.md
@@ -0,0 +1,12 @@
+# The Firefox extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:firefox` from the root directory.
+
+## Testing in Firefox
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.
+
+You can test upcoming releases of Firefox by downloading the Beta or Nightly build from the [Firefox releases](https://www.mozilla.org/en-US/firefox/channel/desktop/) page and then following the on-screen instructions after building.
diff --git a/shells/browser/firefox/build.js b/shells/browser/firefox/build.js
new file mode 100644
index 000000000000..993399e2780c
--- /dev/null
+++ b/shells/browser/firefox/build.js
@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+const chalk = require('chalk');
+const { join } = require('path');
+const build = require('../shared/build');
+
+const main = async () => {
+  await build(
+    'firefox',
+    join(__dirname, 'manifest.json'),
+    join(__dirname, 'build')
+  );
+
+  console.log(chalk.green('\nThe Firefox extension has been built!'));
+  console.log(chalk.green('You can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:firefox');
+  console.log(
+    chalk.gray('\n# You can also test against upcoming Firefox releases.')
+  );
+  console.log(
+    chalk.gray(
+      '# First download a release from https://www.mozilla.org/en-US/firefox/channel/desktop/'
+    )
+  );
+  console.log(
+    chalk.gray(
+      '# And then tell web-ext which release to use (eg firefoxdeveloperedition, nightly, beta):'
+    )
+  );
+  console.log('WEB_EXT_FIREFOX=nightly yarn run test:firefox');
+  console.log(chalk.gray('\n# You can test against older versions too:'));
+  console.log(
+    'WEB_EXT_FIREFOX=/Applications/Firefox52.app/Contents/MacOS/firefox-bin yarn run test:firefox'
+  );
+};
+
+main();
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
new file mode 100644
index 000000000000..e0015a59ff7a
--- /dev/null
+++ b/shells/browser/firefox/manifest.json
@@ -0,0 +1,52 @@
+{
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Firefox Developer Tools.",
+  "version": "4.0.0",
+
+  "applications": {
+    "gecko": {
+      "id": "@react-devtools",
+      "strict_min_version": "54.0"
+    }
+  },
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html",
+    "browser_style": true
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+
+  "background": {
+    "scripts": ["build/background.js"],
+    "persistent": false
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/inject.js"],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/shells/browser/firefox/test.js b/shells/browser/firefox/test.js
new file mode 100644
index 000000000000..850d87c0f723
--- /dev/null
+++ b/shells/browser/firefox/test.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const { exec } = require('child-process-promise');
+const { Finder } = require('firefox-profile');
+const { resolve } = require('path');
+
+const EXTENSION_PATH = resolve('shells/firefox/build/unpacked');
+const START_URL = 'https://facebook.github.io/react/';
+
+const main = async () => {
+  const finder = new Finder();
+
+  // Use default Firefox profile for testing purposes.
+  // This prevents users from having to re-login-to sites before testing.
+  const findPathPromise = new Promise((resolvePromise, rejectPromise) => {
+    finder.getPath('default', (error, profile) => {
+      if (error) {
+        rejectPromise(error);
+      } else {
+        resolvePromise(profile);
+      }
+    });
+  });
+
+  const options = [
+    `--source-dir=${EXTENSION_PATH}`,
+    `--start-url=${START_URL}`,
+    '--browser-console',
+  ];
+
+  try {
+    const path = await findPathPromise;
+    const trimmedPath = path.replace(' ', '\\ ');
+    options.push(`--firefox-profile=${trimmedPath}`);
+  } catch (err) {
+    console.warn('Could not find default profile, using temporary profile.');
+  }
+
+  try {
+    await exec(`web-ext run ${options.join(' ')}`);
+  } catch (err) {
+    console.error('`web-ext run` failed', err.stdout, err.stderr);
+  }
+};
+
+main();
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
new file mode 100644
index 000000000000..5f6747af5481
--- /dev/null
+++ b/shells/browser/shared/build.js
@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+const AdmZip = require('adm-zip');
+const { execSync } = require('child_process');
+const { copy, ensureDir, move, remove } = require('fs-extra');
+const { join } = require('path');
+
+// These files are copied along with Webpack-bundled files
+// to produce the final web extension
+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
+
+const preProcess = async (destinationPath, tempPath) => {
+  await remove(destinationPath); // Clean up from previously completed builds
+  await remove(tempPath); // Clean up from any previously failed builds
+  await ensureDir(tempPath); // Create temp dir for this new build
+};
+
+const build = async (tempPath, manifestPath) => {
+  const binPath = join(tempPath, 'bin');
+  const zipPath = join(tempPath, 'zip');
+
+  const webpackPath = join(
+    __dirname,
+    '..',
+    '..',
+    '..',
+    'node_modules',
+    '.bin',
+    'webpack'
+  );
+  execSync(
+    `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: Object.assign({}, process.env, { NODE_ENV: 'production' }),
+      stdio: 'inherit',
+    }
+  );
+  execSync(
+    `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: Object.assign({}, process.env, { NODE_ENV: 'production' }),
+      stdio: 'inherit',
+    }
+  );
+
+  // Make temp dir
+  await ensureDir(zipPath);
+
+  // Copy unbuilt source files to zip dir to be packaged:
+  await copy(binPath, join(zipPath, 'build'));
+  await copy(manifestPath, join(zipPath, 'manifest.json'));
+  await Promise.all(
+    STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
+  );
+
+  // Pack the extension
+  const zip = new AdmZip();
+  zip.addLocalFolder(zipPath);
+  zip.writeZip(join(tempPath, 'packed.zip'));
+};
+
+const postProcess = async (tempPath, destinationPath) => {
+  const unpackedSourcePath = join(tempPath, 'zip');
+  const packedSourcePath = join(tempPath, 'packed.zip');
+  const packedDestPath = join(destinationPath, 'packed.zip');
+  const unpackedDestPath = join(destinationPath, 'unpacked');
+
+  await move(unpackedSourcePath, unpackedDestPath); // Copy built files to destination
+  await move(packedSourcePath, packedDestPath); // Copy built files to destination
+  await remove(tempPath); // Clean up temp directory and files
+};
+
+const main = async (buildId, manifestPath, destinationPath) => {
+  try {
+    const tempPath = join(__dirname, 'build', buildId);
+    await preProcess(destinationPath, tempPath);
+    await build(tempPath, manifestPath);
+
+    const builtUnpackedPath = join(destinationPath, 'unpacked');
+    await postProcess(tempPath, destinationPath);
+
+    return builtUnpackedPath;
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+
+  return null;
+};
+
+module.exports = main;
diff --git a/shells/browser/shared/icons/128-deadcode.png b/shells/browser/shared/icons/128-deadcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214
GIT binary patch
literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/128-development.png b/shells/browser/shared/icons/128-development.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214
GIT binary patch
literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/128-disabled.png b/shells/browser/shared/icons/128-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..67b1c9a31a6dfe22567ce26e385b0be06022e3c2
GIT binary patch
literal 4792
zcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk
zR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj
zjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z
zSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq
zT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x
z04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI
zz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv
zUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>
zd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h
zs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND
zcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW
zG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl
zLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R
zyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{
zt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp
zEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7
z=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE
zELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr
zV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M
zO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie
z!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-
zQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#
zwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2
z;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o
zk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y
z3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7
z05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~
zZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd
z#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;
zO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y
zqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#
zd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$
zp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K
zif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z
z637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD
z%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J
z)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#
z5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9
zWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T
zcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A
zr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&
z`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz
z;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY
z?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T
zZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0
z{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L
zc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj
zs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc
z+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!
zALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$
zl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks
zqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl
z`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;
zZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<
z0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt
z84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv
z-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c
zOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP
zV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4
zoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<
zY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@
zpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@
zIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at
zO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*
z=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM
z$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi
z0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p
z!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$
z+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV
zsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp
zddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa
zE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+
z%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&
zNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=
zkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i
zK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V
zlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY
zY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi
zJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F
zu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g
z=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG
z8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ
zok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(
zrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=
z^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^
zxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj
zO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*
z@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x
zy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&
z0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN
z1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{
Sp@}{K0000<MNUMnLSTaTkuNs@

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/128-outdated.png b/shells/browser/shared/icons/128-outdated.png
new file mode 100644
index 0000000000000000000000000000000000000000..05792b762878cd366098a4afaabebd86480c38d3
GIT binary patch
literal 4162
zcmV-I5WVk-P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU><Vi$9RCwC#U0sM3$rbKVQCS!nvY3rK
zE=*98C@ktjqA#Lxqald+`y!&7k!6h=SAEf#L?K`d2|h$43Hsu=S<n|n2lYV>W>yK&
z^+9F9SpwofbRiL8aF&1rA?dGoj<h{>>ZhyfR`u;Z&|c@>zJ0sveCM}Lo$5#=)YH?m
zCVg3*9!v3O(omIXC_M(!qkm{<=mK|A2g7(Uysu$;TY;fB1;Rk_gNXv>|2};=o*rGz
zxU~&|mp|@GX?S?}3JZXg`H=dbG~?B_v?#?uPYQzmaR3;T{D%4MPxJGdpd)AV|JsaA
zt?2vk2_}sF(btSe?I`1U$5^O$z8Q~N(%K1QaehPfq}2ex(q<fLOG{w_{@08{eQ827
z1PuThsxeK9^~M%0T9nM3IWs#z&!0a}9z1xE9r%BYG<WXY?0)e|bnDiw<niOj*%2c}
z<pW^wcJ11gtXQ!knKo@2dmcc5fjxKbT=xG^gnPujE?>Sp1FY(v`}+ElvuDpX01(mE
zty?qZ%LXx)fz<`7hydI@d-g=55uyOV;lqcM4I4ICT>}Gp^ypEqKp@83-YZPl#*G_;
zYOiPj0Leda;DEF1VNeeqJeWzEOI1%A$`t{yD_5=z?$1o@>gxJcNSlA^)F~~dK7IN$
znLd5G@?4w)2?f*c-Mg2(c=5v88O1$9-RnyC-Me?Q-=8vNiWF41*K60V)mH<YIddi(
zV9r*;wqLz^b)2V-@2p?H{uOVVlQP)bGTHzPg2Y4eRSd^Hf|2;0yhH=w0Ap`&FY7D7
z6u8t@l>q<-=jP3u!q31o9a|0nU~pA78NR`hBS(zFIrt?qfRWDu=Bv~=m=Cavu7~Hu
z^VSXku=^tEg8e>u@}zP6jq7pRgfz;wZQGR00+?_uPGa$WXeJXt5eP0{zWg$;k*9g{
z<^}Twf@K0lHWf@VWj^@`P^FM0ZXf{;P6~;3@7|qBKF54WI~+Gt<`Zx@N!Rr++6Dmm
z3|~=I+Yr?0;>C+un+oQ0AOPbzFQ1qP4Pq0&<Gw`qws7IXdI3PBsxh!GoFR&_IWUnb
zCcmNhH>X`(<rk2>)ESSq*8n2*>XM+Q!8pz&K;q$p$jkzm?mA&3dQQ=Jv^4-kD)08~
z+s=On8U+mG)Ha+wj`{FKWIlzBh7tiPlop6)I@p&NjKPNEW+KI4Jfe}RJ!_=_;4>Lw
zl6%+9LD-NFZC80GuoW5xUc4%b2sK?>dlTTB;O(C{aYC5{vYqLx8r22>s?@IOc?|$8
zsMW;~V5&*BO_echhcT%Q01)eQY8{@w$T1{yVOs6e0KkHLNF1b|D>gx#kAs^aLUIP0
zzz5BlGpF$ZL{jG(P*DAxw@-0CB#+A&%B~U9vsMlOqBz)PIurxU&FWFfnCd;Bk%8!0
zLluQYqXAq3fb--jAtaJ^Xa#Np$#rB9GWQ<^0DMk~!s+8Ye%a&@2op%$q?9YCP?Ycq
zSrQga6yQQCs4~dJ<1Z3dvyc08;SY$OGvpe9NihKc5>|GiM3(8p@8NS){OD>Zk==)8
zfrcqlwIquGo;-OH3;@Au0!0<U2+34+0aQ%{X$Mm=pm^n~jC`6fXq1tWk(cWgbyPWu
zPm2CT$jabgi$gJJMF7ALAOL`=R07`J-JLNvWaW&=j*ISx=KB%pK=aUo*8DSx#-dgx
z05mu_C{(c+Bw86<MWXvJf`e8Gi_BBV`hcJsK&0N=bv916045~06aZi_q+DlJk4xgp
zuw+u)s{0FF9O4}Sw1yr`cWJ|+Iyp0;<4l^8$ay1h(Q~@WiL?a(Y}U{h2ME%OPzkTp
zZ37`6S6%Fy`IH|32t)v<nnP+50iYl{p^hOk5Qpv);5-b(AYi?o&1x4~bH}M|TIC~>
zMl1~R<y0Y$AX+>^)yFb(f+SKA49F+=EI!pCXPH1+b%R5f`J4yb+1V+z*<3~r!13u(
zgJB|x1t2-+mHZEpCWxUp)EWRZ^9J>(W8-O6Ez~BYRWt!30}!N;n@zLH(CIpp-1<J*
zf>P1*(6aJM0{{<(CElvg4G#<E5YsW~LJ}@=f+$)Ly$|yuqE@L=+^>jn)K5S}qI(YQ
z{8<5jq+T^cMhzOU{F$4KA;+#r=)6@Vu89=1NGr2x+=?O06BM;mv27et=*}Re0YIfv
zGO4Epm5_FwI(v~s6{82v&H_BXRli81$!Z7k#Enx7>faauKr$B(=WQfZy@`rL!v!vX
zke7a2#}D9zt;RDvdi3a(1MlH8-4wLUA<X+i$bS?GLJ`aIun8v2hvaiApVsD=Sy@Aq
zCPkvb0}!}E3f<oWbK$Q*O^X1G_wX6c(d}9$a|r3aMSzM${c8h2R%1s4VY`x+TQ@H&
z^3Z80LF@lj&7O+39N$qTu(*Z~xM!$-k@Uyn{Tl%Q>X%D{LfyMqPsd$@%lP4Zm6?$>
zXR_6JDlI@+P~GPYMan*bkitWU4hcV7w{D#??;HL6L>@E80G)<Ud-v|O%1EM*AA0@W
zxN$@35SrZg&Ye4}wLF}2zI1EsY|Q|tEmS#lFvUde%glkwG1TpC#MJ~u3jnSP$5-g3
zGeEKsOqF~oOR8(>j)yM5qX7Vy+O_TGWg|@p8Fi${<<zszwN&9K?m0I5ucZN6oy3rJ
z-lUYWt`p~qbgo4WB&#I-#)+W(!}=mzo0F875-419$QHPj0Dy1eBrf*G4cz_d^b@WW
z0DLlnO2Ii>97}1qNyOySXYvXFF45xB!#2IP?xqbcLsXq>ap2SmS)&GkNOd92>7#BR
z$rDv=fvoyQ2fSs&Qx(aolwu~O3E(_iRmZI|q`M|SM+?Y2a#K=WixY_0rC$pG+_a~U
z?isqKMP~ttt7H}T{8hL8+5nK%!GQ@b*Ug)>kk{E_&bCrW);WZTOBGi^`axQoM&Us^
zIy!_-&a7Fpk|j%)WE(VLV<#IAx)@yme3(4Jq>N~?Wps2@YM(K|bm`Ki?EZ8%oGLOO
zRZX%@r)WvKXmco?$*M|)fhgqU5;Qb*s=NMPMBLOV1`$#y8cdiBl`~3H)+XkF3RqPP
zl+`F!LHe~d01+x#@W2ZeEExA0q<}nhtm1k2@S&0Ow`$d@aqsWnzdzF|kiw}`r;gJ=
z_)Xl8PK6DobSWK+?-exyB>v*Xi<!oO*3j`ojvYHD1RSnmyIozYsMN|J)y7H`I$^+d
zCP1J@iyDC1yyw*|x9L)d1`FJlcP5)&P3xSP{P7R7lJ9-DGyD6=7o*8fcRox8KmSjB
zCZMRARqfX?IEWIc4vzy%vG|jyIC&zQ26nmgsIIwkF-@LlKB)W6$;qGlzLfzZN)wPL
zsOHnBPqWTpp22X!wr}5_`3g|wdEnqPPW=~cFfG6=Y5}No+(#?40F{|>j-RgW|G~1Z
z<o)-)Auy#Avg798TH`=ESsY5`)+XgwwA&^YfE2%n&$!<HRGQ8?d%m47Zofm>J&Wl2
z)weT==V;jvKTCb7(RejLaq!_dVX>obvnGU(U_4%nbo}^n*1SOTh#XN!B*5Ww-kqzD
zq|GRF!@hSne?3|GqpvA6&7|Zn*N3YCfV>R^10dPNkTOIwg0pAOemTH-uNparO`A52
zQ^NordJmaIASMK7Rg_NvV0DXRzH<C#XKG$XbH4Lh^68x~GsiG`6Cg7UR3C3Uc|^;s
z0WyS{=o}_W2m9&~!1V?wMk^}%@Pjv#9UsilI``8%Bgy98e^eI$MfC|F*mexjAvlBi
zwf8Q11abL(lO4&ryC)~tue@#aEC>sInt~vWA^`&Q1awih9g<9UCI9WAo@DLn*NuJy
zCSci$&*I7h*b+qmRVGNi3G)%}n=+qr18^GK3IJphM8JUk#_S^!DzP+C5D_;+%G>@K
zrGINj>NogG4h3rzDQcQb?Ny8EV_JHJgWASYui#Ls-^8at(kGwsGfqCG%zt<D8_BUh
zebF9100=4KVq{>t#Vdu3<g{@qVK{*%V3D0K>j-9=^m#t=-{ky-XURzVO0;&(>uiF^
zM{+2b1`vgXWr{cQy@sG2IL8vEMK?>xW&32sF|wo&$Izeua%h}~|Ix?)O78r9J{v;r
zOTSZjAHdhH8LDmIbR!fFMBHW)GSv<HEsOI-T7jDlgcFGbQRM;PbJq+mC96}zC_4vE
zsp*n9*ln5f_B^Nh^EAS|5BkN=X0|5)T<w}coykNb+X2jUr!k$R&khUEUlvZ<IFwNU
z0JhqP3CM?&vMydC69f|>+iA>{K9s0_TS7vq?KFUEQtbeiXEp~4kZPwfVThaB=`u+l
zljIPhg-R!aTtomm$r{z(z_PuCx$mpUwVf9K##>I3L(u@hM+voTo*r6=dING!Uzvsu
zu5Gj`In*{`pf8f`4a}LM{NBPL?X!xuAji->xji(1Z}Xy?z%e;@T%0b+;&D<eqE1cK
zj_=z#o3#J{MFuLy(rTcxDj9a!gx-0lOBg<yBztU=L&0_qjcr>vVt!d)M3wXrnu}le
zBy+y~+AE2lEhVOY;dGX*9Et`2_}gbiFFbuN%V*1cNbQ!AbM`Lg`pNMWrIssW0(@!&
zgnGW1Pf4FvF6M9<dPcK*xUarLU_2M<xnRC+(g!79kX#%#OTx1ID3Kfr0sv9oA2otb
z<K(dwJY15;1@mo_KIi+NW%Yir-#FH67)<u<A8M&43IYI8-rr@lF!Bs2IN|aQhzMLT
z-!|#<(Z~ND4~h%V*jYlQFOt;{zEMp8kgc{Q)bFb{ws6(F!8Yl`sr=6^OaYux6D<(T
z2^3A#=rnv#NxiIr6m4wbf=rV>t)eU+vG1+;0U#<1&ri~rL=X55q@Dwh%Z)9{CVfPN
zVo}kxZRZl;l<KC4gB68>?%%&JEx?e~2+)Sqsujt&hU<PkCd<2I1Y7@`-~IDtq32g6
zWHX$Ued#VM3km?(d|7h`00EkUretYTX4<4#I=EvEC0sXYhGbnhJ2!aTuR{QUDmfGs
z03g{mbT&?=X#uB+<L9&3!zIDVL}(eM4?yHnJ%i!69zr}{Y2_FlKUs1}rKy4gfadFM
z7)FJlsQr&=OSURd6mtQz#@^IkQ(Km@8&;NcuD+}cb7B8gNu}UEfGDhkXOG@N`F1n3
z#vcdP5OST&TR{i`eXiJb#eDP@s2l(qs-X#Jr~yDj4FDPn1%RPu7-~yH0Kh;q4z;BL
z0HD7ahuTtq2mVb%!AE#$#-m>9Kc#Py6WH5~N9`!%c{WopJUl$ql~VfOMa{U>f{vup
zf8r$o#z1f-#Q@B}{APUGnogz6-%fwLGFO;_puf=sZ7=!T^KXosEFRMYpQQg?njT%v
zn6-z)mmX_L?dPdO_N_EJSd+f29s@%YB~*{;0|@m}#$Vu0`o91J0O>$DjDqRRa{vGU
M07*qoM6N<$f@qJob^rhX

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/128-production.png b/shells/browser/shared/icons/128-production.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df
GIT binary patch
literal 4577
zcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)
zqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?
z@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni
z#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6
z=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=
zZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f
z4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@
zKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<
zp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!
zl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c
z=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh
zdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn
z_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6
z_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{
zOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa
zotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>
z>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=
z-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK
zmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;
zk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK
zAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV
zk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI
z{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w
z7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@
zBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov
z?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R
zna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7
zKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant
ziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz
zPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt
zyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J
zB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)
zWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC
z`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT
z$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(
z-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe
zo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven
zSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z
z67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb
zTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b
z#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&
zW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2
za`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y
zMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m
zjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@
zlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj
zR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h
z@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o
zRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y
zK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n
zdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV
zZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu
zI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M
zR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|
z2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o
zfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?
zQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3
z5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0
zOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4
zR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k
z?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E
zRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj
z^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud
zV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-
z`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%
zO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q
zDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P
z*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ
zSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^
zOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N
z>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`
zRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J
zzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|
zldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*
z0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?
z{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX
z0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj
z4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y
z^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`
zcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA
zR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA
zx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3
z^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U
zY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6
z3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I
z`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M
z!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000
LNkvXXu0mjfqT|45

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/128-unminified.png b/shells/browser/shared/icons/128-unminified.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214
GIT binary patch
literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-deadcode.png b/shells/browser/shared/icons/16-deadcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b
GIT binary patch
literal 638
zcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2
zCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0
z5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt
z5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7
z$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m
z#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)
zVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=
zHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB
zj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR
zP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9
zzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht
Y0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-development.png b/shells/browser/shared/icons/16-development.png
new file mode 100644
index 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b
GIT binary patch
literal 638
zcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2
zCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0
z5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt
z5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7
z$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m
z#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)
zVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=
zHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB
zj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR
zP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9
zzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht
Y0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-disabled.png b/shells/browser/shared/icons/16-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f0317ea3fd6b7933988fb03624d7fa0d1981d36
GIT binary patch
literal 494
zcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzkV!;ARCwB?Q$1_KP!x@U5?oRUbSddx
zaB(Yk&+Jg?n4ztcOMij?pkt<NZlzPE{(xv_6Pm@%T97~x6^WQH`_7{`JkyV%y>Q9n
z-goZ3=iI!SBuOXCkEFj@Dp$d->$WD7$#u8eRVij!*4cDAy+f{2fMZX|*@dg!Zuc5R
zk)5XL8!L3rfc-qrSM&M&0bj>)3=wls0G9y5nRUHD5jdOXyqYJMtE3b~;iDUd(JG2!
z4e#}Omz0m=cwNQtO6Y<P)OF8nyWPIPai%!v(L^N$j73QTf;-~S1%)@8%`-F*_2C7;
z6$z@kTrMB!!v51B9Ae0kKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&
zr3pdpV2z@PB%El7A&0`>uF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20RwSv
zqtPgkWtnsLegFNp2T_g#zT&FJ<M9og^g#|A5HU3pf{YbuK=r|35D+aqEYma_i^XEy
kZnp#Re(k@{`9pvK00h~KYD=d<ZU6uP07*qoM6N<$f=$lfl>h($

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-outdated.png b/shells/browser/shared/icons/16-outdated.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa42bfe0b4e0c791fa1bb7f48e989729028bf481
GIT binary patch
literal 558
zcmV+}0@3}6P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz&`Cr=RCwB?Q?W||VHAI!<xL$<6`g{s
z4idDuh*01nH=T=vISN5ogA{@gxVdQ|If$Dst`?ksfRaNk-4J*~CpCs%%L#G$9(;P9
zPW6M2`@Z+R-+S-(zIU!bAn*(ThwwMNxV>KQz1<RtL?9lI!)P=D(=^HE^Z6i|OajmI
zFdmQX?)#jRTr3tr6h-KEyF|i;d$iT-bqIw*D<y0>12mgW=yW<zsZ@xFh(@C@ole0p
z4DwM`b;04Bq69&pFUmj?E+jGF*$&sdi54T~aycThGs}c!Gh#lUhrwX5DgkvOSy2>f
z7&`QNy@ewN4F-c$iJeRVkbvYwB0*U&Gjn7;z&lx%DS;ClE0<|!-%WkN#ya8VIPON%
zG^kdqq*an6(mtEbpj<9PtJQ*7EJoGo?+O&I{qXSkwTysG#1#&Qtwy6^>AG(9`+duf
z$z($J+M8sV-?DXiabz(bXMY}iXPkpnDh1hWmMX!?!~MzeHi!ovxT}4_`Pl&oJMPVM
zz<^}bj=I&?Ar!9sWIs*sQlLzFZ+#N6%k6fX#ulHhR4S1zGbgc(hVest40K!jSPl{c
wHj)hy8y->g%(L=qRXz<33h=Mr`B#7e0LAj*R5Z^J3jhEB07*qoM6N<$f@F>Jr2qf`

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-production.png b/shells/browser/shared/icons/16-production.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c253dca5d56d6a309c5854b8a82266dfce01aba
GIT binary patch
literal 546
zcmV+-0^R+IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz#7RU!RCwB?Q$0vRQ4~J@kfdp^Kte5g
zLS-n3Lrw+J(2zqd*-{X+8AMCeR0&Nv)l!o~Pz1R(I7QN|U^oO)gB2v9SSSjWQGN%m
zyq-;U;PUQ0=bm%E^WE=hWLZuVk&pgn*IIS5#XUmS@oCbV%uS!cYA0J@o?|NWY1PT{
z;yRh+Ve;;taUmpPuQyr9wYJxYxqej8D-WF>Kjq`cRJc0luV*{T{`ATe)vFcW8~a^U
z&1IW8S~VsC9cYk*rG)-jtNe~YB-#QCyfAn9CdEELe=9ukUS~A3Um(&+k`%_QL#q+K
zB>6_EcAw=DDz_ObB@^^s%=6`TyOU$!2?em%qZ1rrP9PER2bOm@F|#qpgubK_lsk%W
zaS#ixnj8R{(gft+VrU|`(3#tG;g8oMcQaTW)H4}mXt?ljx=+s+G3xS-F((~^UNSnI
z<d|8ayMs+`qG>4cOH>7UfQo=xG$0N|06!l;X?+F3D&~5O9a6V{f_i5|To~O@pf4C|
z(Q=Cp>eVuTAr|qpN<Lb2qdb(7m*n1xG8aGq#$iw-o)hEYMU>X$Kp3<R)<L8g3rHYg
k5UZ52DDbb}`CEVi012eSi#9Hm_W%F@07*qoM6N<$g4Ag0w*UYD

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/16-unminified.png b/shells/browser/shared/icons/16-unminified.png
new file mode 100644
index 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b
GIT binary patch
literal 638
zcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2
zCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0
z5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt
z5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7
z$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m
z#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)
zVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=
zHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB
zj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR
zP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9
zzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht
Y0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-deadcode.png b/shells/browser/shared/icons/32-deadcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c
GIT binary patch
literal 1318
zcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM
zR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY
zO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$
zUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R
zFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~
z#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!
z#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ
zZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>
zPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI
z8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV
zvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8
zLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL
zfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;
zv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ
zDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS
zu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)
zG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA
zObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ
zLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3
zyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=
z)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM
zAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1
zGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h
zm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*
c^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-development.png b/shells/browser/shared/icons/32-development.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c
GIT binary patch
literal 1318
zcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM
zR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY
zO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$
zUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R
zFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~
z#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!
z#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ
zZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>
zPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI
z8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV
zvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8
zLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL
zfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;
zv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ
zDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS
zu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)
zG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA
zObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ
zLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3
zyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=
z)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM
zAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1
zGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h
zm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*
c^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-disabled.png b/shells/browser/shared/icons/32-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c750453238885d1cba45da238abc82ae0fcfa06
GIT binary patch
literal 1092
zcmV-K1iSl*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=1D|BRCwCNSG`MHQ526aF)9+3P*g&y
zh)ZY?vlT_hwjyp72gg<yb*PHsAO`<{AP9nx=+dcH1VO0nR8X4YU>({HVg{3dAJt$@
z#3X9$`B{(LT;F@q2<E`ed%5@A^L>8zzC44$pwO_=FdH71k~AWD^z$SK%5RKNa;O|+
zRx)u+O-(&LI5-%O#bPtt+uL3Euf@BvveE$F)6>&=JiEKQOYUNYO>2;{=NA_je=ms=
ziNw##Ya-!Z67CTBNa;7MfuDKL&d!1&pT^K$gdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K
z@8;&_JMiI|wE^%7L!K9vvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-
z=I-t74at1x=jY+Fva$v}`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4>F**
zxY#NFhoaWj))~C}e7?6!OH1vD#N_1U?5!R%o1K)xu%3KVrtp`Smv?P!Y_wEVR5&db
z%d>)l0;kDjx@yIqo}TZ_TUc1wK;C{qM6fR!jfP+to_ad+xDsVAM@L6HY&KgLD+56|
zgvR4>zg!zutMwH;W}X|UqclY#k<SYY3v+69lGX)cn}G;?KH*8qK41-1t<~F%8R!V^
zAn>vbHT+0xLkM61fkJL82;g?Y8l~e6=JCWDc+r-a0}g<PpHRrM!N)Bt8S(!G3-EwJ
zM+OuSV*-?4O2qqMtUM><hlDK#8yK-c3p5yT*i$jAOuUy3Rs%2*UGEG;*%B46U1PpP
zwFqG`JY_G{QoscU9?^U3L!Oaaj+R(2JmlI)s{w4*D?;APhYQk%uwyVU7b<vQ2;^|h
z@M+0&s)rGbfDrizh7sI`Skr1l&OMCdh;mWlsdh4I0@2XWP)kis&436*!XXpFK_ll}
zjrZi_WO-|A>!Zu%TD~(9GEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0
z=7YhYySlpCm(`63p;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP
z68%InA9&=`^xnrY<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?~96xZh3&?xwf`;93Eoe
z9XDb%FnZ91<nZv&j{>9i>EJ6m71>06ef<nNVS0M{B?jJ6a9HDOJFf8Piv9h4f7aJ>
z?tK~c)XoeMKV;<88%FxEXj!(tzMk0K-JK(k|4=vlpo_)w@bGYdXJ_YEnb+g-_{oU(
z4u>N^M*jxy$jFErGVXmNdQ4KTzfyBWNu(ft{ef!C#pn4y0R{m73@I68j+emz0000<
KMNUMnLSTXgoDP}*

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-outdated.png b/shells/browser/shared/icons/32-outdated.png
new file mode 100644
index 0000000000000000000000000000000000000000..6eae901bf058833312c3ccd677300e26f08bc3fb
GIT binary patch
literal 1095
zcmV-N1i1T&P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=}AOERCwCNmrqDkQ543ne=rCf2Eqv(
zg8`vLLKjgp3k4yZjR;9@Tv($UF$z}_1VSK1=|-1s9KwYgAqa<17b&yQDFPSiRN!i~
zMY>TVm?Eb4yLBGd=bL#mE}Rb@Z{EB2zVDpx{JD23LZOgfDfQaAI@I}M)w+7B{C@x2
zGLVCibww)6L@wy4_L|Y$+^hx$22?{sgWBHSR`GaT?e6Zn&W%JOs<X3GuVK#g^mN|2
zf(k1Ka`^@!O(YV^=kuwJjSWoz78VxN`1rUwIy$oFO-@egao$0S5&Uj%Z@1^Up|X&5
zcn*12SC{JR>r<_*t=g;J-d=4OBwX?vqabAd=;)|k%iJ?7Fh4)9?~psgB4dyc8VI?Y
zNG6k7ImXVU07#`$r`|z?5|9Htcaj4_L3j$m(|}+w=$e=#BO{uW_|DAC*v6C!PXnAD
zKm;K`TEfFS35j#9n}Q~)z2wJJ5{Zw6!(n|Fqewne6`qkjole{G7pj1~NytJfAR3LH
zP=Jr&?eg-nCNY6=Qif(Ys0g?Ga8-bXV`F1>=|F@5QulZW0n$4?lb(U+kV^k3M1H~m
zDJ>R};j^=|c7mbA-rk-j85$bW@9|a|6NXA<;K1PEp#C0)d%+F?H48aOWm=6IbU8px
zGcNHqAyV@l37ePvb`{_Wi}1j?053#t#sP}Bbxm^)-|-^14G;piS}wM}36Tjlt)lyY
zSSy)tf@d*;_)5&3;2rZQTN1ID_yZ0kPx-O9xTwiUAi{x1`}_MgDIRrqckB0SYinv{
zWknqv9Ozylt$28NSbu{m+1c5#x@e7x^<P%U$A7H3zw;bRtRytAsi~>l;o)HpY;A4n
z`_j@<uC1*tm&s)GSW8Pw&bf|pu)e--ze~Kioy-2Xn@hfno|-S0Ya>ERJRu}xyxS(@
zJZPYrY~76Ax>>8{;#ckQ{(-OR{fFcHAuy56X0@b&KtLN1i^X*3+uYpLB#n)Y`c8<X
zht$>8sfmdR9Uk!FS;z{(1x?C5e5+Qyn)_bbW<-0%5bB@CWQFHMZ4-NPL)tTQK+l~^
zT7mTEpSI`0`WpSd<lWHiOh-4A0}D+`4kUs{59;-u<TLT)@fGE(tt!m`x7`e*@LtMO
z+Ov@3EkFgHo0=~E%PouizEu?^86f@M*&8TNNNLTY5(M}90|mdwIOSQC0n|DPCcC4Y
ze%YWP<p657+lQ97ro?;SeyNlde=`(}ONcxVrAREBlo=8dkA!sM%cmPfAH}X+|LA=p
zf{d&e1$Z_$Cnui2%vc^)t5Q%<f%8D+|9`3F!YT&zl*tJF_x!H_0|0++O5j~2P@Mn(
N002ovPDHLkV1k)$2?+oI

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-production.png b/shells/browser/shared/icons/32-production.png
new file mode 100644
index 0000000000000000000000000000000000000000..9192719e5b50fcf214b3b5ea8095ff344f60e45a
GIT binary patch
literal 1068
zcmV+{1k?M8P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#&PhZ;RCwCNmrY1iQ547Tj6;TlG6rKG
zV>Lu!8Q2F3feSTgVT)AI78wLdkU`)giWc_0DOv<Yv&lt}n+(DhO^ZNXwNMBG1);*|
zQwIwbCDXF^yLiU;-n^NoFKiB6-f-V}=l<_G|MS0he9>q$q?CGUjB53Nt=AY0IiXM}
zo`uD+s4))sv$VKab->LdH@r!0JbYX~Cx`mg_x>I=oA~1BTToiA)>Rx-!Dxw^9vN1j
zp2XDr^i;<9K7#`bnHDd*`B(*l`8pthv9HfNEy3~Ie&)Icz#IVa<@x5q(TpH6W`Lcu
zI6(lw@8ZT*W4>80_Ab`0a`N(3$+<h)f8^mU4Gs%e9nqi)%WG7k@0qs@?7rNgpMzIh
zQc^98N_K{Cx22S3|Gl_g{9{)vEdak82PTIG9Oozji_6ZPc)=WCGnp#@QfxQsODWhn
z^(7ku#tFnf0TALPNfTVEIcXod)?%46Ti(_ZR{#OG^lzwbHd?F30J2jD1Q4v38k>1R
z$NZj|(%=0Y`>cWSTyY!nAuN{u7bD%gV*xuiU_0Q%M~pK480b-Bz1@!4umCW(8HVVv
zdzcK-*dgZB+oBoL`*aX<03e2werS#vXTcQ-u<K$hxghl&ec7c`pTDC_`Pby?cl5pl
z-Eyo=74EIn0cSo8tA)8)Ra9N4%dq}Xla7Nw&p@z1&xQ6>s_|DZ)StOu)(n6i5Ri%m
z#6(bp6KDd9+es&41uvv*GH2Hhz>2o`h3SlM@lMMJ80aNsA}Haix|CXS2AF*SYmdbo
z@yy!bU#(-#OkO*|Q*;2N(sFj?q6G3$^u+l^GCi{RkRe!(pZEYk$hUO1H0yYBURX#-
ztB}S>{Yka9D560@rp-;Qnt-qug28fp8FLfk8u<GMH}rg@zD0!$Qog<4ZfvAN`Fy@)
zCv7{`o+KvzY1@$ACllr)m>{qjq9V<&&(=D&Ap`^vElVa4E;hkC0KyOZ$(UA%5Egdt
zR7--{MFl@6U%)5&y7hC}Qq1l^N-2sPPwSQ;6ZEnu9+{w>MDxuGiTnZ(F_K%9r?Y^-
z5>%v@G*SvckZN{KZ?g#EWj0Ef8;*ECjM$aabqcZCcQ>v|FLfjrf+KdL{`S*!#m6y0
zoJz#*0mz^&-7cS=01%Wiq^e$xW;yQ}{C2we2>U$)fIy@W@i5<hskxkb3?Urvq!SPw
zeoqYcd%u>GUOA-9S>epEUo>f1(GN2T0q7Zk`Eo)F&QDKT4ySbbLHoM-E*rpVn}6|N
mYPPHw01a6Jq5q!$6<`4LS42r6)8f(q0000<MNUMnLSTZa2JWW-

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/32-unminified.png b/shells/browser/shared/icons/32-unminified.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c
GIT binary patch
literal 1318
zcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM
zR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY
zO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$
zUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R
zFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~
z#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!
z#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ
zZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>
zPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI
z8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV
zvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8
zLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL
zfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;
zv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ
zDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS
zu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)
zG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA
zObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ
zLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3
zyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=
z)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM
zAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1
zGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h
zm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*
c^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-deadcode.png b/shells/browser/shared/icons/48-deadcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f
GIT binary patch
literal 2001
zcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d
z5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM
zR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&
zG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!
z6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D
zTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W
zEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs
zq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=
z_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr
z001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W
zPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N
z%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU
z9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(
zfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C
ze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8
z&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R
zc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8
z`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz
z>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay
zu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`
z14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz
z;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3
zJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ
zqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf
zk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L
z>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ
zni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG
ziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj
z$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r
zaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}
zW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`
znLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK
zT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa
zjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8
z6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa
z;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(
zl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)
j>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-development.png b/shells/browser/shared/icons/48-development.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f
GIT binary patch
literal 2001
zcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d
z5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM
zR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&
zG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!
z6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D
zTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W
zEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs
zq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=
z_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr
z001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W
zPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N
z%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU
z9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(
zfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C
ze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8
z&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R
zc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8
z`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz
z>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay
zu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`
z14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz
z;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3
zJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ
zqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf
zk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L
z>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ
zni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG
ziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj
z$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r
zaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}
zW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`
znLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK
zT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa
zjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8
z6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa
z;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(
zl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)
j>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-disabled.png b/shells/browser/shared/icons/48-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..372b6e00e88a85c08ccfa020e8db75b31b429a5b
GIT binary patch
literal 1564
zcmV+%2IKjOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%zDYzuRCwClTFFnFM-(^4Y(iiPlqHSf
z0w@s&xJ5+bSS1G}4yoYY7zv3>X|Jd>e?ZEK3(Fq>>IDf=r&l24$Pz0Ohy##{rBE=7
zFpKTHpX(RBOlH2t#%bM=MtsaS^S-yg-y6vD{4?@t`e_z>a$`hkMrg+JQp|r%)9cBt
z5vTbVnE#4qfhYF{l<)KAklW}+vDcI1!?gf?eSPJ-ySqQ#+}ylLBocpKU0wZgczF0?
zW@e_<DUJ2@^`7(d^T}8&_6{^a3pCRe;+~sH48Khn1~K*f=;-Jp)7j<a<?o5vZPR&D
z#JF32TnVtXwe>T9j5PLget!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXe
zngFbQFt5IY<|UJ0ir1ypbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPmY6_
zgY^3PIy^o;ernp+*w{F+u(0r5JRUzSEG%sGdcEa1)8F6!sJpv6Y&y5NxR`wB^ZD*)
zB@0znR+cBrA2DXPcXf63y}D*4G{(Tdz)nhlKvvVJlQbI)1}CBU+uPeDQ?LZZ#E2t&
z;6OoX3DDWuxs)t@#l;;~`$lMhVK6c`H}`yFV`C8Oe!stm;v;A}M;WbyT{P<!fR=UZ
zC`P5FrBCs^wzf71pKobtncmym`xR>q4Gk}tQFWA+mHE>JME9I-rVQ~LEU>b&^1Qvh
zJ%qrfpbga4*0vTD6qHw0RR!4%ph*tmXf(RSmczT_<Kt<n1*iM_`(d)m4g^It$9V`_
zUtj++D+0ie;R^6=x54Jb_aW@|_VzF`*_{bMg(%S5+Z!atpXiu|c3IP4VsmqIm^8bi
zqeU*%3OB+tltA;nE~fA<5{bN;nwpy6?Bp5?p@Pa1&&7zJQFyQq#fjHY#Ow+WS8LGX
zf{5zOYw{ah(XH^6$5c%vArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iN
zH3nn=bG#SNya!g1npU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwL
zPxwp#X<9p9R%1hIPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYr<lvNRxeEwT|64ZPBQy
z(yG7?qo}ATkS>;C<cSnah0(GSqhQ*mQFb9y(_wNU8Nlj0IizcHGO%lO)MiT4FX)5C
z6bCYhIS?gL#Dgw~!2r97j5lUX<J%v<CtXd`6q&V)gHpRzX;fwhd=x>4^O#VE^l@3Z
zq`+#1!M9{br^!J2LM9KgAXt;yU<<Lp5XdeN*+Qz@Fb({Kh9SKCKCEQXj+!f`N=Wr*
zFr%xiR+AOLE(0r?;s$%{(yJ|)Lq-}J8tSR5tLp)1vqF-1J~}#@094lPD=8_t4>W6s
zO3%*DLex)8a}#xEaGEhY&>}bOcLAf(J3s-T=N3-;+<c6>tt7+YaQGKAG<;iuy3o|r
z^th&`Cdifm%>LvSHU*o(EV<tVAUB$ShRbL-0kz3Ou9V_R0M<BPfnbQMk|oL#;kLH6
z$yD>R#GMryAqW6%heDx2-SrA-K1>39Rv7Qpg>Vs@Jd~IBjcE`1Vv3g^@yrc<b93_u
z|BfEn6l-H+WAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr
z=D*nA2b^Rc-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{
zvm!e%iPyQxs#RIVS2|emMXuK+c!LlCS19$e3p0T(tVvjcGk_zQQgE9ah|C1A!~1w=
z1?ce3>bxE9Nec^^f;12ae8e;d2M3|q+1Xc4E}{6ctgEZ*3Bi&MO38jgn>$XiPeyg%
zfAMG5|DpiV9Ogd?0q|cR@f>6xJV)@)9=K<@Od(TWu4ta--!x+%1Q-Bvr`E+MSw)!u
O0000<MNUMnLSTaCAnqan

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-outdated.png b/shells/browser/shared/icons/48-outdated.png
new file mode 100644
index 0000000000000000000000000000000000000000..342fedea1ed508bd7cabe8c80b5761f9d03220a9
GIT binary patch
literal 1570
zcmV+-2Hp9IP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%#7RU!RCwC#nomd^R~*M*jYLu!SqQc?
zYapjqrA0g>dJ!R1d+^W%y?8J|FG5IB57H743Q}6|5TzyHMQH<i(bgV3R7(ze(UwxA
zprIi4pefWAf(wNTrJ2u*-{m>Z+uhmOv|Z>AhFxdgy!n2A@B91nX00@VT@EbxxECDP
zO?lX2a18$(*bB$te+Z70DKC2x98DF+o-a4><{0xmR^V?_##Uj<++q``uC6xY<Kt#?
zbJOhZ?%GfOZfR*Lc#iJwZZkDCm7Qa4ZOse~4HZQomV^L5H#cV*8X6+6udlD0v9U3;
zwY3#_y`!VUjE;_)+S=O4>+|#TW@KdK`4Q;v@3#Q3$;n9z7;A5Dw_b&yu1!o#oFLA9
zjKTKy_RPY<LiYZ?zCKG1>*?vqo-a9prKKh7{V+gRS^~1Xyqxu>yK3A!Jw0s>4-Ze=
zkEFOa?kdD0fL^i2#>P_sTzx|XLrTa6a*Q7s81Q-*@Q~o1&d$!#2eCZJ^83I`#{ggq
z_W)j?a!EtieDRf-fb<Q4d=^D87wJN-Cnlf=h)6D?NI|mEN=R1!S{+bo%(uh<WemW{
zC<;h4o-5b85`FHK*q6rvs4N6<NRy4oJlNpiVD`Fi&bS0B;|wOysJM8G2l1T;bEMPh
zY@Wya<b9;%uAWw?xw+Y7G8ucGdHB={_=;dj2q+E!A#lDpaAU=l9p@>CzPY!zw@XWa
zhpSQwlnahkQMv>K((z>!R!YH)=e3INoN=mfP6B{J25yta1Ep1p68dHw6<Sr6bGZ!p
zsO?}5$Pzomhe#z3Vt@lm;8mPjTU)aL0iv<eE-gYnquB#A1OScI*Vkv;kGNJDl?D}z
z0LQDYS5{V5teiMDHa4;(0TyoF+{_~29L&jeVnOp^G<b>HX-%p$2!W^orH}Wu!Ca@m
z4;MUuvx15b#z0W30ZFbGUC5YB;PF-zcmWAtQ=XR-qN=r4MdlL5W@cuRRbsa|<<qkJ
zFvz$P^A)-9HL{H|PLxv;1#uz$P9cB`t>}PH+{}?hG>Ni<&!`JBf;gONedb;xQHVgX
z@;O03*+E-JU*p9?l{Ey&C9G@{6+6mQZag5@xVhgeAtsX+0p->LcjqMV3Pi@}ys{1R
zNauWaGY}3^<#rPQcJ<16Q(yODvMnWGs0Y$I@*+o5Xy}2czIYSDsv8i}PAs49Nug1j
z|95X+G<R;lYQJB5`$x0Cf0UQNnN%wELHOj(&W@R#oi#^CM;0s(ZEI_@o~x;;v13+O
zSIxn}fh}eb;Cxk8l|7%!Z~*f`m{vlTPM<X&eRw&TqvBX*mFAm=Pm*uySp`;vz%69I
z%Bs*RN15AlhhLw39Du*^&V>`>d;5Me-+q@V-CGG)F4`&<V~})P4>Z3xUw>*G;2}}6
z{eaRQ!Rx+7V3i1DRw=42=A64>2?y@o_nysrnEA_m{@_<rS9i|5buDEBn$KKPinXOw
zMsjyed<QJS=)RDmNkb+a8XvV^03-+Y=+PhMllza&X90;Ux%V%XeoySnG-N5YA>?^t
zhrpNaqu!gM{alv5c-GwNeL1;=<o$d*CP1p#xvAK#F|r%iFIa&2>`stgzg+y?O6(u`
zeE^vd=mHOLH)w5KoIew2|57MRRUH?ybEn4M>U|~I3aH!{l6mmH+o(motOXFj!g6^q
z^IGJbHv<`c@zrmqid#io0(do72a5K!arc1-_{|7i?>|1WY4g+jzeL_crA{Ov>EGR$
zxG_TSq)id2()XI2%o6s#C9wae&HWpm;zgkg_erq|nfvOTj6;9KYVZSxf?TQ6w?U_6
zc=+|3-e*97SnvgRxVXjsmD1hxN4;A2wbM}zTe0@~8{ZdKiIrh!;JUiHP82OXUPxb0
zRlR!UrJ})yQ|bS|6aN<oES53;MF<R=Xa6`+ZU*Mz3jSp!_|jBnD*@Ifus;=G05G*<
U7noI_!vFvP07*qoM6N<$g5<;STmS$7

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-production.png b/shells/browser/shared/icons/48-production.png
new file mode 100644
index 0000000000000000000000000000000000000000..9aac93a622bfab260839911f5d7daa1b47c7c839
GIT binary patch
literal 1674
zcmV;526g#~P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&EJ;K`RCwCdnoDd{RT#$)MJcu^Opp?B
zFw_SY+k{X<H)4XaqAV;6bRkVls0&Io*2F+u)E5hbkEqdDH%K(F5f-Hj8WSU$sGAar
z8mbjdO2lG{U<HfPs(62={okCKx#!Nk(~e=j<YuNb=kY!N=l`AQJQGMmAi>LP!L!9w
zhV%u`lOuu5n^FEm@MKJ7$$0Rz%+F*p`-3-YP36f#l7|RfH5DvXro!dA)Dvp!%<|10
zrhdZ%rn>%SGchu3E)E?x=RQ4R-zO2~E@|Cp7B#K2>s>iF8qDuEKOO2#Z9wW2TC?{9
zQ`^uO`Q3%VV`k*Nm#jijvZVEX)9}bHYj~8LJ$lg2FPj0&H*d2FAZHH0V}3t5Xg!EG
z@hbB7#3ic)9(AL3d)FRo0D^&Mj~=j*n_jmgod5OihZ08;0fnARI{3Cnd(48&QmZ`S
zMv*^9N37>jxVk=Tqk};Umu2nec>AuWd(GnJb)n(IuXLL~PJLsh#?RY_af_Q<?bv^(
zCe8R)pO>cwlsb4XUoZy66eT=bv$D}DMFfb<&<mYj@3JN};Y-h1qmULx0hI9xd3^Hu
zPCJG<D9@Y|kGI99hQ9OF$E*#QUsGpa|G9jr=-8+tjx*YwQ#J$Az-;4FuZQrc=-sh%
zPonw73@zCJAqIIGC!h@qqX;$e!`nR}_ER4|(YlvU50^gzcsELJd9W*l${%}sY+i#-
zAdh9eL2>&W;9GM}QHUs@01wcIr^(schSj!4<YBxIwi68$Q}hth3!|u|iIMMYnqlao
zrq-NDm*pTMk4XhKO<Qb9avx(k1VOSnGXO>LCaDpnG#&%*h4pb%f{5uPXADnNO7S@n
z=4|k-Rn!2KC8u@7yIw*lP^A(42ub2SQV3_T7H0#m?6YF)ju3&|dJxI;8B*orJSZjQ
zSp<a#x8G}(p7!SIurPHHB?&#nEk~@_+LePqzYH9-d$5<d6gr@b55Wq!5P6<$-)^cF
zR9j`geQ~E<49;UMzJ7t_I-=5e4>|S5?i}2QH{JQfUYmY3*<0;c3Ky<(b?S=AtX*&F
zR;{rqs5O9G#zgTe#*1HhQ%IrIVlJa};jZ=F&kATXUX$`o&+IFJMK@)TyWbkHPEa&3
z5GGoT1uJz6Qiw%vYTFj(a+LB?B>y{?!;=<KnC_;G9OUME6hU<PmC{p&6c`{R(S$g0
zH^UgWz;uws5kjGtFdwJ<cKlfEo^*UsT&b#*Q&Ge&YQZ#IMswNET{CX17lrVKHmC67
zWZ8Y~IUL5t@;Fak82mV=FLsr3*NhUSU;as*6M-{_duImk@WK|}61*yPgdzx-9Tf%f
zBCX-VuMG0-*Zl0hkRayw%sDVhn+H@0wrKNoVoGkjXOo3dKBExv9G-+l0)N2Z*hhx~
zxUCN0ax(0HPrv_iXjpbjr(IuNTK$H0+p1~}H%hdlHv}-uSk93A2o#(HK-BaR-)bkK
zAci25zmA%f4|iLIiPrfqJ`4>8)A2AkufCSQd2kG$DVI5ok<tGBc0bMu){w#3_D-`Z
zI761M-(=4tqV)Z%-H}AkOC<z*cp<8&2_>83@s>9S?3g6iBBTQ~gQ8zP)@I-1q^J~P
z3@Pb@^h9J%IZv2<4Y$jYFv8b%;(cGPyK4aiW1k#JM6FZNX$p_x#xrW#=YmF)`@ksc
zrKQs)U8^X4^ckB|C!FMpM85X~wbP{UKnM;32pm(}uqz~qWif!$+J!#%JqpudsX+N#
zcb#hJg(OkeE2Unmq%uI>^>K5eLjTJ-!t>YI&p8-R<a~ESYUYbw8qE53x)@c!>nc`i
z#x3qRG)a4%Qu3`tu@+BElW|gBx7OFh4;)F5C!gn#7I7@~e=|T~jxz#Yq@pEdC}!Q(
z#a(R4z%*CusSOY`x{Zk&8BSSsbmTm##6_=ipPCRcE9|;D%6~6JDxiS!nkIuY0CFb}
z3M%t^SH9Opm*!s_8l3rVV~9S`izIbck^%1JR&>|YZ;RE3D5BB6`My4UP7P3zx(x`8
zidbyYPK=1acy)`Nl>5wy0oRgL{O`mV&{x6w_f`BqdsOi+E4-<&NT6#Ay8kD@0DMx%
U2JL{>NdN!<07*qoM6N<$f|%kP{{R30

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/48-unminified.png b/shells/browser/shared/icons/48-unminified.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f
GIT binary patch
literal 2001
zcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d
z5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM
zR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&
zG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!
z6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D
zTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W
zEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs
zq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=
z_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr
z001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W
zPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N
z%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU
z9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(
zfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C
ze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8
z&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R
zc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8
z`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz
z>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay
zu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`
z14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz
z;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3
zJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ
zqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf
zk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L
z>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ
zni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG
ziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj
z$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r
zaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}
zW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`
znLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK
zT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa
zjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8
z6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa
z;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(
zl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)
j>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD

literal 0
HcmV?d00001

diff --git a/shells/browser/shared/icons/deadcode.svg b/shells/browser/shared/icons/deadcode.svg
new file mode 100644
index 000000000000..ccd6e669061f
--- /dev/null
+++ b/shells/browser/shared/icons/deadcode.svg
@@ -0,0 +1 @@
+<svg id="Development" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#d94a38;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}.cls-4{font-size:12px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>development</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><g id="Ring-2" data-name="Ring"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g></g><g id="Ring_Blockers" data-name="Ring Blockers"><circle class="cls-1" cx="417" cy="672" r="45"/><circle class="cls-1" cx="699" cy="513" r="45"/><circle class="cls-1" cx="797" cy="634" r="45"/><circle class="cls-1" cx="479" cy="818" r="45"/><g id="Layer_14" data-name="Layer 14"><rect class="cls-1" x="420" y="621" width="377" height="188"/><rect class="cls-1" x="500" y="530" width="312" height="405"/></g></g><g id="Bug"><g id="Legs"><path class="cls-3" d="M702,496a17,17,0,0,0-21,13l-19,78,34,8,19-78A17,17,0,0,0,702,496Z"/><text class="cls-4" transform="translate(512 512)">780</text><text class="cls-4" transform="translate(512 512)">780</text><path class="cls-3" d="M813,626a17,17,0,0,0-23-9l-73,32,14,32,73-32A17,17,0,0,0,813,626Z"/><path class="cls-3" d="M834,756l-77-20-9,34,77,20a18,18,0,0,0,9-34Z"/><path class="cls-3" d="M425,656a17,17,0,1,0-10,33l76,23,10-33Z"/><path class="cls-3" d="M532,756l-64,48a18,18,0,1,0,21,28l64-48Z"/><path class="cls-3" d="M584,836l-21,77a17,17,0,1,0,34,9l21-77Z"/></g><g id="Body"><path class="cls-3" d="M762,690h0l-51-92h0A125,125,0,0,0,492,721h0l51,92h0A125,125,0,0,0,762,690Z"/></g><g id="Line"><path class="cls-1" d="M613,649h0a17,17,0,0,0-30,18h0L711,887l30-18Z"/></g><g id="Head_Ring" data-name="Head Ring"><circle class="cls-1" cx="511" cy="509" r="113"/></g><g id="Head"><circle class="cls-3" cx="512" cy="512" r="80"/></g></g></svg>
\ No newline at end of file
diff --git a/shells/browser/shared/icons/development.svg b/shells/browser/shared/icons/development.svg
new file mode 100644
index 000000000000..ccd6e669061f
--- /dev/null
+++ b/shells/browser/shared/icons/development.svg
@@ -0,0 +1 @@
+<svg id="Development" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#d94a38;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}.cls-4{font-size:12px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>development</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><g id="Ring-2" data-name="Ring"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g></g><g id="Ring_Blockers" data-name="Ring Blockers"><circle class="cls-1" cx="417" cy="672" r="45"/><circle class="cls-1" cx="699" cy="513" r="45"/><circle class="cls-1" cx="797" cy="634" r="45"/><circle class="cls-1" cx="479" cy="818" r="45"/><g id="Layer_14" data-name="Layer 14"><rect class="cls-1" x="420" y="621" width="377" height="188"/><rect class="cls-1" x="500" y="530" width="312" height="405"/></g></g><g id="Bug"><g id="Legs"><path class="cls-3" d="M702,496a17,17,0,0,0-21,13l-19,78,34,8,19-78A17,17,0,0,0,702,496Z"/><text class="cls-4" transform="translate(512 512)">780</text><text class="cls-4" transform="translate(512 512)">780</text><path class="cls-3" d="M813,626a17,17,0,0,0-23-9l-73,32,14,32,73-32A17,17,0,0,0,813,626Z"/><path class="cls-3" d="M834,756l-77-20-9,34,77,20a18,18,0,0,0,9-34Z"/><path class="cls-3" d="M425,656a17,17,0,1,0-10,33l76,23,10-33Z"/><path class="cls-3" d="M532,756l-64,48a18,18,0,1,0,21,28l64-48Z"/><path class="cls-3" d="M584,836l-21,77a17,17,0,1,0,34,9l21-77Z"/></g><g id="Body"><path class="cls-3" d="M762,690h0l-51-92h0A125,125,0,0,0,492,721h0l51,92h0A125,125,0,0,0,762,690Z"/></g><g id="Line"><path class="cls-1" d="M613,649h0a17,17,0,0,0-30,18h0L711,887l30-18Z"/></g><g id="Head_Ring" data-name="Head Ring"><circle class="cls-1" cx="511" cy="509" r="113"/></g><g id="Head"><circle class="cls-3" cx="512" cy="512" r="80"/></g></g></svg>
\ No newline at end of file
diff --git a/shells/browser/shared/icons/disabled.svg b/shells/browser/shared/icons/disabled.svg
new file mode 100644
index 000000000000..73c2bb51cdbb
--- /dev/null
+++ b/shells/browser/shared/icons/disabled.svg
@@ -0,0 +1 @@
+<svg id="Disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#aaa;}.cls-2{fill:#fff;}</style></defs><title>disabled</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g><g id="Circle"><circle class="cls-2" cx="510" cy="510" r="80"/></g></svg>
\ No newline at end of file
diff --git a/shells/browser/shared/icons/outdated.svg b/shells/browser/shared/icons/outdated.svg
new file mode 100644
index 000000000000..03b83c1eb559
--- /dev/null
+++ b/shells/browser/shared/icons/outdated.svg
@@ -0,0 +1 @@
+<svg id="Outdated" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#202020;}.cls-2{fill:#fff;}.cls-3{fill:#f9f453;}</style></defs><title>outdated</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M510,325C261,325,60,408,60,510S261,695,510,695s450-83,450-185S759,325,510,325Zm0,330c-225,0-407-65-407-145S285,365,510,365s408,65,408,145S735,655,510,655Z"/><path class="cls-2" d="M670,417C546,202,373,69,285,120s-59,267,65,482S647,951,735,900,794,633,670,417ZM384,583C272,388,237,197,306,157s217,86,329,280,148,385,78,425S497,777,384,583Z"/><g id="BLOCKER"><rect class="cls-1" x="564" y="572" width="315" height="397.12" transform="translate(652 -283) rotate(39)"/><rect class="cls-1" x="685" y="369" width="283" height="360.81" transform="translate(255 -262) rotate(21)"/></g><path class="cls-2" d="M670,603c124-215,153-431,65-482S474,202,350,417,197,849,285,900,546,818,670,603ZM384,437C497,243,644,117,714,157s34,231-78,425S376,903,306,863,272,632,384,437Z"/></g><g id="Circle"><circle class="cls-2" cx="512" cy="512" r="80"/></g><g id="Shield"><path class="cls-3" d="M960,887a24,24,0,0,0-5-15h0L807,605h0v-2h0a25,25,0,0,0-43,3h0L613,876h0a24,24,0,0,0-3,11,25,25,0,0,0,24,25H936A25,25,0,0,0,960,887ZM810,848a15,15,0,0,1-15,15H775a15,15,0,0,1-15-15V828a15,15,0,0,1,15-15h20a15,15,0,0,1,15,15Zm0-74a15,15,0,0,1-15,15H775a15,15,0,0,1-15-15V705a15,15,0,0,1,15-15h20a15,15,0,0,1,15,15Z"/></g></svg>
\ No newline at end of file
diff --git a/shells/browser/shared/icons/production.svg b/shells/browser/shared/icons/production.svg
new file mode 100644
index 000000000000..1e974f513101
--- /dev/null
+++ b/shells/browser/shared/icons/production.svg
@@ -0,0 +1 @@
+<svg id="Production" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#202020;}.cls-2{fill:#59c9f1;}</style></defs><title>production</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g><g id="Circle"><circle class="cls-2" cx="510" cy="510" r="80"/></g></svg>
\ No newline at end of file
diff --git a/shells/browser/shared/main.html b/shells/browser/shared/main.html
new file mode 100644
index 000000000000..f1c96d4a7a09
--- /dev/null
+++ b/shells/browser/shared/main.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="./build/main.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
diff --git a/shells/browser/shared/panel.html b/shells/browser/shared/panel.html
new file mode 100644
index 000000000000..60fd1bdf13ff
--- /dev/null
+++ b/shells/browser/shared/panel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html style="display: flex">
+    <head>
+        <meta charset="utf8">
+        <style>
+            html {
+                display: flex;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                flex: 1;
+                display: flex;
+            }
+            #container {
+                display: flex;
+                flex: 1;
+                width: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">Unable to find React on the page.</div>
+        <script src="./build/panel.js"></script>
+    </body>
+</html>
diff --git a/shells/browser/shared/popups/deadcode.html b/shells/browser/shared/popups/deadcode.html
new file mode 100644
index 000000000000..5e74dc06c405
--- /dev/null
+++ b/shells/browser/shared/popups/deadcode.html
@@ -0,0 +1,32 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page includes an extra development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  The React build on this page includes both development and production versions because dead code elimination has not been applied correctly.
+  <br />
+  <br />
+  This makes its size larger, and causes React to run slower.
+  <br />
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up dead code elimination</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and the React tab will appear to the right.
+</p>
diff --git a/shells/browser/shared/popups/development.html b/shells/browser/shared/popups/development.html
new file mode 100644
index 000000000000..9c2089cc2f37
--- /dev/null
+++ b/shells/browser/shared/popups/development.html
@@ -0,0 +1,28 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 101px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  Note that the development build is not suitable for production.
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">use the production build</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and the React tab will appear to the right.
+</p>
diff --git a/shells/browser/shared/popups/disabled.html b/shells/browser/shared/popups/disabled.html
new file mode 100644
index 000000000000..a89b178d49cf
--- /dev/null
+++ b/shells/browser/shared/popups/disabled.html
@@ -0,0 +1,21 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 410px;
+    min-height: 33px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page doesn&rsquo;t appear to be using React.</b>
+  <br />
+  If this seems wrong, follow the <a href="https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
+</p>
diff --git a/shells/browser/shared/popups/outdated.html b/shells/browser/shared/popups/outdated.html
new file mode 100644
index 000000000000..a6ec12bcafc1
--- /dev/null
+++ b/shells/browser/shared/popups/outdated.html
@@ -0,0 +1,29 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 117px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using an outdated version of React. &#8987;</b>
+</p>
+<p>
+  We recommend updating React to ensure that you receive important bugfixes and performance improvements.
+  <br />
+  <br />
+  You can find the upgrade instructions on the <a href="https://facebook.github.io/react/blog/">React blog</a>.
+</p>
+<hr />
+<p>
+  Open the developer tools, and the React tab will appear to the right.
+</p>
diff --git a/shells/browser/shared/popups/production.html b/shells/browser/shared/popups/production.html
new file mode 100644
index 000000000000..1b65eb5b219b
--- /dev/null
+++ b/shells/browser/shared/popups/production.html
@@ -0,0 +1,21 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 39px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the production build of React. &#x2705;</b>
+  <br />
+  Open the developer tools, and the React tab will appear to the right.
+</p>
diff --git a/shells/browser/shared/popups/shared.js b/shells/browser/shared/popups/shared.js
new file mode 100644
index 000000000000..130f1f457ecf
--- /dev/null
+++ b/shells/browser/shared/popups/shared.js
@@ -0,0 +1,22 @@
+/* globals chrome */
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Make links work
+  const links = document.getElementsByTagName('a');
+  for (let i = 0; i < links.length; i++) {
+    (function() {
+      const ln = links[i];
+      const location = ln.href;
+      ln.onclick = function() {
+        chrome.tabs.create({ active: true, url: location });
+      };
+    })();
+  }
+
+  // Work around https://bugs.chromium.org/p/chromium/issues/detail?id=428044
+  document.body.style.opacity = 0;
+  document.body.style.transition = 'opacity ease-out .4s';
+  requestAnimationFrame(function() {
+    document.body.style.opacity = 1;
+  });
+});
diff --git a/shells/browser/shared/popups/unminified.html b/shells/browser/shared/popups/unminified.html
new file mode 100644
index 000000000000..553c9ac6acf5
--- /dev/null
+++ b/shells/browser/shared/popups/unminified.html
@@ -0,0 +1,31 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using an unminified build of React. &#x1f6a7;</b>
+</p>
+<p>
+  The React build on this page appears to be unminified.
+  <br />
+  This makes its size larger, and causes React to run slower.
+  <br />
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up minification</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and the React tab will appear to the right.
+</p>
diff --git a/shells/browser/shared/src/GlobalHook.js b/shells/browser/shared/src/GlobalHook.js
new file mode 100644
index 000000000000..9ccab3bb8a2a
--- /dev/null
+++ b/shells/browser/shared/src/GlobalHook.js
@@ -0,0 +1,64 @@
+/* global chrome */
+
+import nullthrows from 'nullthrows';
+import { installHook } from 'src/hook';
+
+let lastDetectionResult;
+
+// We want to detect when a renderer attaches, and notify the "background
+// page" (which is shared between tabs and can highlight the React icon).
+// Currently we are in "content script" context, so we can't listen
+// to the hook directly (it will be injected directly into the page).
+// So instead, the hook will use postMessage() to pass message to us here.
+// And when this happens, we'll send a message to the "background page".
+window.addEventListener('message', function(evt) {
+  if (
+    evt.source === window &&
+    evt.data &&
+    evt.data.source === 'react-devtools-detector'
+  ) {
+    lastDetectionResult = {
+      hasDetectedReact: true,
+      reactBuildType: evt.data.reactBuildType,
+    };
+    chrome.runtime.sendMessage(lastDetectionResult);
+  }
+});
+
+// NOTE: Firefox WebExtensions content scripts are still alive and not re-injected
+// while navigating the history to a document that has not been destroyed yet,
+// replay the last detection result if the content script is active and the
+// document has been hidden and shown again.
+window.addEventListener('pageshow', function(evt) {
+  if (!lastDetectionResult || evt.target !== window.document) {
+    return;
+  }
+  chrome.runtime.sendMessage(lastDetectionResult);
+});
+
+const detectReact = `
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
+  window.postMessage({
+    source: 'react-devtools-detector',
+    reactBuildType: evt.reactBuildType,
+  }, '*');
+});
+`;
+const saveNativeValues = `
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
+`;
+
+// Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the
+// devtools are installed (and skip its suggestion to install the devtools).
+const js =
+  ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact;
+
+// This script runs before the <head> element is created, so we add the script
+// to <html> instead.
+const script = document.createElement('script');
+script.textContent = js;
+nullthrows(document.documentElement).appendChild(script);
+nullthrows(script.parentNode).removeChild(script);
diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
new file mode 100644
index 000000000000..fa13e0252775
--- /dev/null
+++ b/shells/browser/shared/src/backend.js
@@ -0,0 +1,67 @@
+// Do not use imports or top-level requires here!
+// Running module factories is intentionally delayed until we know the hook exists.
+// This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
+
+/** @flow */
+
+function welcome(event) {
+  if (
+    event.source !== window ||
+    event.data.source !== 'react-devtools-content-script'
+  ) {
+    return;
+  }
+
+  window.removeEventListener('message', welcome);
+
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+}
+
+window.addEventListener('message', welcome);
+
+function setup(hook) {
+  const Agent = require('src/backend/agent').default;
+  const Bridge = require('src/bridge').default;
+  const { initBackend } = require('src/backend');
+
+  const listeners = [];
+
+  const bridge = new Bridge({
+    listen(fn) {
+      const listener = event => {
+        if (
+          event.source !== window ||
+          !event.data ||
+          event.data.source !== 'react-devtools-content-script' ||
+          !event.data.payload
+        ) {
+          return;
+        }
+        fn(event.data.payload);
+      };
+      listeners.push(listener);
+      window.addEventListener('message', listener);
+    },
+    send(data) {
+      window.postMessage(
+        {
+          source: 'react-devtools-bridge',
+          payload: data,
+        },
+        '*'
+      );
+    },
+  });
+
+  const agent = new Agent();
+  agent.addBridge(bridge);
+  agent.addListener('shutdown', () => {
+    hook.emit('shutdown');
+    listeners.forEach(fn => {
+      window.removeEventListener('message', fn);
+    });
+    listeners.splice(0);
+  });
+
+  initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent);
+}
diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
new file mode 100644
index 000000000000..ca22f3950cd2
--- /dev/null
+++ b/shells/browser/shared/src/background.js
@@ -0,0 +1,111 @@
+/* global chrome */
+
+const ports = {};
+
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
+
+chrome.runtime.onConnect.addListener(function(port) {
+  let tab = null;
+  let name = null;
+  if (isNumeric(port.name)) {
+    tab = port.name;
+    name = 'devtools';
+    installContentScript(+port.name);
+  } else {
+    tab = port.sender.tab.id;
+    name = 'content-script';
+  }
+
+  if (!ports[tab]) {
+    ports[tab] = {
+      devtools: null,
+      'content-script': null,
+    };
+  }
+  ports[tab][name] = port;
+
+  if (ports[tab].devtools && ports[tab]['content-script']) {
+    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
+  }
+});
+
+function isNumeric(str: string): boolean {
+  return +str + '' === str;
+}
+
+function installContentScript(tabId: number) {
+  chrome.tabs.executeScript(
+    tabId,
+    { file: '/build/contentScript.js' },
+    function() {}
+  );
+}
+
+function doublePipe(one, two) {
+  one.onMessage.addListener(lOne);
+  function lOne(message) {
+    two.postMessage(message);
+  }
+  two.onMessage.addListener(lTwo);
+  function lTwo(message) {
+    one.postMessage(message);
+  }
+  function shutdown() {
+    one.onMessage.removeListener(lOne);
+    two.onMessage.removeListener(lTwo);
+    one.disconnect();
+    two.disconnect();
+  }
+  one.onDisconnect.addListener(shutdown);
+  two.onDisconnect.addListener(shutdown);
+}
+
+function setIconAndPopup(reactBuildType, tabId) {
+  chrome.browserAction.setIcon({
+    tabId: tabId,
+    path: {
+      '16': 'icons/16-' + reactBuildType + '.png',
+      '32': 'icons/32-' + reactBuildType + '.png',
+      '48': 'icons/48-' + reactBuildType + '.png',
+      '128': 'icons/128-' + reactBuildType + '.png',
+    },
+  });
+  chrome.browserAction.setPopup({
+    tabId: tabId,
+    popup: 'popups/' + reactBuildType + '.html',
+  });
+}
+
+// Listen to URL changes on the active tab and reset the DevTools icon.
+// This prevents non-disabled icons from sticking in Firefox.
+// Don't listen to this event in Chrome though.
+// It fires more frequently, often after onMessage() has been called.
+if (IS_FIREFOX) {
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (tab.active && changeInfo.status === 'loading') {
+      setIconAndPopup('disabled', tabId);
+    }
+  });
+}
+
+chrome.runtime.onMessage.addListener((req, sender) => {
+  // This is sent from the hook content script.
+  // It tells us a renderer has attached.
+  if (req.hasDetectedReact && sender.tab) {
+    // We use browserAction instead of pageAction because this lets us
+    // display a custom default popup when React is *not* detected.
+    // It is specified in the manifest.
+    let reactBuildType = req.reactBuildType;
+    if (sender.url.indexOf('facebook.github.io/react') !== -1) {
+      // Cheat: We use the development version on the website because
+      // it is better for interactive examples. However we're going
+      // to get misguided bug reports if the extension highlights it
+      // as using the dev version. We're just going to special case
+      // our own documentation and cheat. It is acceptable to use dev
+      // version of React in React docs, but not in any other case.
+      reactBuildType = 'production';
+    }
+
+    setIconAndPopup(reactBuildType, sender.tab.id);
+  }
+});
diff --git a/shells/browser/shared/src/checkForReact.js b/shells/browser/shared/src/checkForReact.js
new file mode 100644
index 000000000000..b0334ff3ae72
--- /dev/null
+++ b/shells/browser/shared/src/checkForReact.js
@@ -0,0 +1,12 @@
+/* global chrome */
+
+export default function checkForReact(done: (pageHasReact: boolean) => void) {
+  chrome.devtools.inspectedWindow.eval(
+    `!!(
+    (window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length) || window.React || (window.require && (require('react') || require('React')))
+  )`,
+    function(pageHasReact, err) {
+      done(pageHasReact);
+    }
+  );
+}
diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
new file mode 100644
index 000000000000..c72d17918fd0
--- /dev/null
+++ b/shells/browser/shared/src/contentScript.js
@@ -0,0 +1,52 @@
+/* global chrome */
+
+// proxy from main page to devtools (via the background page)
+var port = chrome.runtime.connect({
+  name: 'content-script',
+});
+
+port.onMessage.addListener(handleMessageFromDevtools);
+port.onDisconnect.addListener(handleDisconnect);
+window.addEventListener('message', handleMessageFromPage);
+
+window.postMessage(
+  {
+    source: 'react-devtools-content-script',
+    hello: true,
+  },
+  '*'
+);
+
+function handleMessageFromDevtools(message) {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      payload: message,
+    },
+    '*'
+  );
+}
+
+function handleMessageFromPage(evt) {
+  if (
+    evt.source === window &&
+    evt.data &&
+    evt.data.source === 'react-devtools-bridge'
+  ) {
+    port.postMessage(evt.data.payload);
+  }
+}
+
+function handleDisconnect() {
+  window.removeEventListener('message', handleMessageFromPage);
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      payload: {
+        type: 'event',
+        evt: 'shutdown',
+      },
+    },
+    '*'
+  );
+}
diff --git a/shells/browser/shared/src/inject.js b/shells/browser/shared/src/inject.js
new file mode 100644
index 000000000000..522b322786b8
--- /dev/null
+++ b/shells/browser/shared/src/inject.js
@@ -0,0 +1,21 @@
+/* global chrome */
+
+export default function inject(scriptName: string, done: () => void) {
+  const src = `
+  // the prototype stuff is in case document.createElement has been modified
+  (function () {
+    var script = document.constructor.prototype.createElement.call(document, 'script');
+    script.src = "${scriptName}";
+    script.charset = "utf-8";
+    document.documentElement.appendChild(script);
+    script.parentNode.removeChild(script);
+  })()
+  `;
+
+  chrome.devtools.inspectedWindow.eval(src, function(res, err) {
+    if (err) {
+      console.log(err);
+    }
+    done();
+  });
+}
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
new file mode 100644
index 000000000000..ab511445cdcd
--- /dev/null
+++ b/shells/browser/shared/src/main.js
@@ -0,0 +1,40 @@
+/* global chrome */
+
+let panelCreated = false;
+
+function createPanelIfReactLoaded() {
+  if (panelCreated) {
+    return;
+  }
+  chrome.devtools.inspectedWindow.eval(
+    'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers).length > 0',
+    function(pageHasReact, err) {
+      if (!pageHasReact || panelCreated) {
+        return;
+      }
+
+      clearInterval(loadCheckInterval);
+      panelCreated = true;
+      chrome.devtools.panels.create('React', '', 'panel.html', function(panel) {
+        panel.onShown.addListener(function(window) {
+          // TODO: When the user switches to the panel, check for an Elements tab selection.
+        });
+        panel.onHidden.addListener(function() {
+          // TODO: Stop highlighting and stuff.
+        });
+      });
+    }
+  );
+}
+
+chrome.devtools.network.onNavigated.addListener(function() {
+  createPanelIfReactLoaded();
+});
+
+// Check to see if React has loaded once per second in case React is added
+// after page load
+const loadCheckInterval = setInterval(function() {
+  createPanelIfReactLoaded();
+}, 1000);
+
+createPanelIfReactLoaded();
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
new file mode 100644
index 000000000000..e93f1c66f72f
--- /dev/null
+++ b/shells/browser/shared/src/panel.js
@@ -0,0 +1,62 @@
+/* global chrome */
+
+import { createElement } from 'react';
+import { render } from 'react-dom';
+import Bridge from 'src/bridge';
+import App from 'src/devtools/views/App';
+import inject from './inject';
+
+const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
+
+let browserName;
+let themeName;
+
+if (IS_CHROME) {
+  browserName = 'Chrome';
+
+  // chrome.devtools.panels added in Chrome 18.
+  // chrome.devtools.panels.themeName added in Chrome 54.
+  themeName = chrome.devtools.panels.themeName === 'dark' ? 'Dark' : 'Default';
+} else {
+  browserName = 'Firefox';
+
+  // chrome.devtools.panels.themeName added in Firefox 55.
+  // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/themeName
+  if (chrome.devtools && chrome.devtools.panels) {
+    switch (chrome.devtools.panels.themeName) {
+      case 'dark':
+        themeName = 'Dark';
+        break;
+      default:
+        themeName = 'Light';
+        break;
+    }
+  }
+}
+
+const node = ((document.getElementById('container'): any): HTMLElement);
+
+inject(chrome.runtime.getURL('build/backend.js'), () => {
+  let disconnected = false;
+
+  const port = chrome.runtime.connect({
+    name: '' + chrome.devtools.inspectedWindow.tabId,
+  });
+  port.onDisconnect.addListener(() => {
+    disconnected = true;
+  });
+
+  const bridge = new Bridge({
+    listen(fn) {
+      port.onMessage.addListener(message => fn(message));
+    },
+    send(data) {
+      if (disconnected) {
+        return;
+      }
+      port.postMessage(data);
+    },
+  });
+
+  render(createElement(App, { bridge, browserName, themeName }), node);
+});
diff --git a/shells/browser/webpack.backend.js b/shells/browser/shared/webpack.backend.js
similarity index 61%
rename from shells/browser/webpack.backend.js
rename to shells/browser/shared/webpack.backend.js
index 9c1aa968097c..59e0b617bcab 100644
--- a/shells/browser/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,7 +1,8 @@
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
+//const __DEV__ = process.env.NODE_ENV !== 'production';
+const __DEV__ = true; // TODO
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
@@ -13,12 +14,19 @@ module.exports = {
     path: __dirname + '/build',
     filename: '[name].js',
   },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../../src'),
+    },
+  },
   module: {
     rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+        options: JSON.parse(
+          readFileSync(resolve(__dirname, '../../../.babelrc'))
+        ),
       },
     ],
   },
diff --git a/shells/browser/webpack.config.js b/shells/browser/shared/webpack.config.js
similarity index 80%
rename from shells/browser/webpack.config.js
rename to shells/browser/shared/webpack.config.js
index 39c08ff05659..933d7a79ce99 100644
--- a/shells/browser/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -2,7 +2,8 @@ const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const webpack = require('webpack');
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
+//const __DEV__ = process.env.NODE_ENV !== 'production';
+const __DEV__ = true; // TODO
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
@@ -18,6 +19,11 @@ module.exports = {
     path: __dirname + '/build',
     filename: '[name].js',
   },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../../src'),
+    },
+  },
   plugins: __DEV__
     ? []
     : [
@@ -31,7 +37,9 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+        options: JSON.parse(
+          readFileSync(resolve(__dirname, '../../../.babelrc'))
+        ),
       },
       {
         test: /\.css$/,
diff --git a/shells/createConfig.js b/shells/createConfig.js
deleted file mode 100644
index a5eea836b752..000000000000
--- a/shells/createConfig.js
+++ /dev/null
@@ -1,148 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const { VueLoaderPlugin } = require('vue-loader');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-
-module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
-  const bubleOptions = {
-    target,
-    objectAssign: 'Object.assign',
-    transforms: {
-      forOf: false,
-      modules: false,
-    },
-  };
-
-  const baseConfig = {
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-    resolve: {
-      alias: {
-        src: path.resolve(__dirname, '../src'),
-        views: path.resolve(__dirname, '../src/devtools/views'),
-        components: path.resolve(__dirname, '../src/devtools/components'),
-        filters: path.resolve(__dirname, '../src/devtools/filters'),
-      },
-    },
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          loader: 'buble-loader',
-          exclude: /node_modules|vue\/dist|vuex\/dist/,
-          options: bubleOptions,
-        },
-        {
-          test: /\.vue$/,
-          loader: 'vue-loader',
-          options: {
-            compilerOptions: {
-              preserveWhitespace: false,
-            },
-            transpileOptions: bubleOptions,
-          },
-        },
-        {
-          test: /\.css$/,
-          use: ['vue-style-loader', 'css-loader', 'postcss-loader'],
-        },
-        {
-          test: /\.styl(us)?$/,
-          use: [
-            'vue-style-loader',
-            'css-loader',
-            'postcss-loader',
-            'stylus-loader',
-            {
-              loader: 'style-resources-loader',
-              options: {
-                patterns: [
-                  path.resolve(__dirname, '../src/devtools/style/imports.styl'),
-                ],
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|woff2)$/,
-          loader: 'url-loader?limit=0',
-        },
-      ],
-    },
-    performance: {
-      hints: false,
-    },
-    plugins: [
-      new VueLoaderPlugin(),
-      ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]),
-      new webpack.DefinePlugin({
-        'process.env.RELEASE_CHANNEL': JSON.stringify(
-          process.env.RELEASE_CHANNEL || 'stable'
-        ),
-      }),
-    ],
-    devServer: {
-      port: process.env.PORT,
-    },
-    stats: {
-      colors: true,
-    },
-  };
-
-  if (process.env.NODE_ENV === 'production') {
-    const UglifyPlugin = require('uglifyjs-webpack-plugin');
-    baseConfig.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': '"production"',
-      })
-    );
-    baseConfig.optimization = {
-      minimizer: [
-        new UglifyPlugin({
-          exclude: /backend/,
-          uglifyOptions: {
-            compress: {
-              // turn off flags with small gains to speed up minification
-              arrows: false,
-              collapse_vars: false, // 0.3kb
-              comparisons: false,
-              computed_props: false,
-              hoist_funs: false,
-              hoist_props: false,
-              hoist_vars: false,
-              inline: false,
-              loops: false,
-              negate_iife: false,
-              properties: false,
-              reduce_funcs: false,
-              reduce_vars: false,
-              switches: false,
-              toplevel: false,
-              typeofs: false,
-
-              // a few flags with noticable gains/speed ratio
-              // numbers based on out of the box vendor bundle
-              booleans: true, // 0.7kb
-              if_return: true, // 0.4kb
-              sequences: true, // 0.7kb
-              unused: true, // 2.3kb
-
-              // required features to drop conditional branches
-              conditionals: true,
-              dead_code: true,
-              evaluate: true,
-            },
-            mangle: {
-              safari10: true,
-            },
-          },
-          sourceMap: false,
-          cache: true,
-          parallel: true,
-        }),
-      ],
-    };
-  }
-
-  return merge(baseConfig, config);
-};
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index 1a5ab821fb26..ccfcb5fb330c 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -15,7 +15,8 @@ import React, {
 } from 'react';
 
 const Context = createContext('abc');
-Context.displayName = 'testContext';
+// $FlowFixMe Flow doesn't support this property yet.
+Context.displayName = 'ExampleContext';
 
 class ClassComponent extends Component<any> {
   render() {
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 948dbf565f31..da162a517acf 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -30,7 +30,11 @@ initDevTools({
       cb(bridge);
 
       render(
-        createElement(App, { bridge }),
+        createElement(App, {
+          bridge,
+          browserName: 'Chrome',
+          themeName: 'light',
+        }),
         ((document.getElementById('devtools'): any): HTMLElement)
       );
     });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 25241716df0a..218743d2a104 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -15,7 +15,7 @@ import type { Bridge } from '../types';
 import type { Element } from 'src/devtools/types';
 
 const debug = (methodName, ...args) => {
-  //console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
+  // debug(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
 };
 
 const THROTTLE_BY_MS = 350;
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index bfc34a9eda8e..3b29dc1274db 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -263,8 +263,8 @@ export function attach(
         const symbolOrNumber =
           typeof type === 'object' && type !== null ? type.$$typeof : type;
 
-        // $FlowFixMe facebook/flow/issues/2362
         const switchValue =
+          // $FlowFixMe facebook/flow/issues/2362
           typeof symbolOrNumber === 'symbol'
             ? symbolOrNumber.toString()
             : symbolOrNumber;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index e3bcf4082e54..14d75b0dc5b2 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -6,7 +6,7 @@ import type { Element } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  //console.log(`%cAgent %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
+  // console.log(`%cAgent %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
 };
 
 /**
diff --git a/src/devtools/views/App.js b/src/devtools/views/App.js
index 0615a60e3409..24b5898fb050 100644
--- a/src/devtools/views/App.js
+++ b/src/devtools/views/App.js
@@ -8,11 +8,13 @@ import styles from './App.css';
 
 import type { Bridge } from '../../types';
 
-type Props = {|
+export type Props = {|
   bridge: Bridge,
+  browserName: string,
+  themeName: string,
 |};
 
-export default function App({ bridge }: Props) {
+export default function App({ bridge, browserName, themeName }: Props) {
   const store = useMemo(() => new Store(bridge), []);
 
   return (

From 13ca26e1536079b7eb9dd38f47f1c0173ca265cb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 24 Jan 2019 13:45:29 -0800
Subject: [PATCH 006/814] Removed throttling. It's too error prone because of
 mutations (Fibers). We'll optimize later by using the effects list for
 updates.

---
 src/backend/agent.js          | 54 ++++++-----------------------------
 src/devtools/views/Element.js |  2 +-
 src/devtools/views/hooks.js   |  4 +++
 3 files changed, 13 insertions(+), 47 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 218743d2a104..9cfba3fd0e8d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -26,17 +26,9 @@ export default class Agent extends EventEmitter {
   _idToFiber: Map<string, Fiber> = new Map();
   _idToRendererData: Map<string, RendererData> = new Map();
   _idToRendererID: Map<string, RendererID> = new Map();
-  _isRenderInProgress: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
   _roots: Set<RendererID> = new Set();
 
-  // Tree updates are debounced to reduce bridge traffic and improve performance.
-  // This reduces the potential negative impact that DevTools has on React performance.
-  // Eventual consistency is good enough for the Elements tree.
-  _lastCrawlTime: number = -THROTTLE_BY_MS;
-  _pendingRoots: Set<string> = new Set();
-  _pendingRootTimeoutID: TimeoutID | null = null;
-
   addBridge(bridge: Bridge) {
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
@@ -83,25 +75,6 @@ export default class Agent extends EventEmitter {
     }
   }
 
-  _crawlPendingRoots(): void {
-    this._pendingRoots.forEach(id => this._crawlRoot(id));
-    this._pendingRoots.clear();
-    this._lastCrawlTime = performance.now();
-  }
-
-  _crawlRoot(id: string): void {
-    const data = ((this._idToRendererData.get(id): any): RendererData);
-
-    // TODO: Can we use the effects list on update for a faster path?
-    this._createOrUpdateElement(id, data);
-
-    if (!this._roots.has(id)) {
-      this._roots.add(id);
-      debug('emit("root")', id);
-      this.emit('root', id);
-    }
-  }
-
   _createOrUpdateElement(id: string, data: RendererData): void {
     const prevElement: ?Element = this._idToElement.get(id);
     const nextElement: Element = {
@@ -129,13 +102,6 @@ export default class Agent extends EventEmitter {
     }
   }
 
-  _maybeCrawlRoot = () => {
-    this._pendingRootTimeoutID = null;
-    if (!this._isRenderInProgress) {
-      this._crawlPendingRoots();
-    }
-  };
-
   onHookMount = ({
     data,
     fiber,
@@ -162,17 +128,14 @@ export default class Agent extends EventEmitter {
   }) => {
     const id = this._getId(fiber);
 
-    this._isRenderInProgress = false;
-    this._pendingRoots.add(id);
-
-    const delta = performance.now() - this._lastCrawlTime;
-    if (delta >= THROTTLE_BY_MS) {
-      this._crawlPendingRoots();
-    } else if (this._pendingRootTimeoutID === null) {
-      this._pendingRootTimeoutID = setTimeout(
-        this._maybeCrawlRoot,
-        THROTTLE_BY_MS - delta
-      );
+    // TODO: Can we use the effects list on update for a faster path?
+    //       Mounts (Placements) and unmounts (Deletions) are on the child; need to update parent children in that case.
+    this._createOrUpdateElement(id, data);
+
+    if (!this._roots.has(id)) {
+      this._roots.add(id);
+      debug('emit("root")', id);
+      this.emit('root', id);
     }
   };
 
@@ -198,7 +161,6 @@ export default class Agent extends EventEmitter {
   onHookUpdate = ({ data, fiber }: { data: RendererData, fiber: Fiber }) => {
     const id = this._getId(fiber);
 
-    this._isRenderInProgress = true;
     this._idToRendererData.set(id, data);
   };
 }
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index f19858e6bc1b..6fe0e72f5faa 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -17,7 +17,7 @@ export default function Element({ depth, id }: Props) {
 
   const { children, displayName, key } = element;
 
-  // TODO: Toggle open/close state
+  // TODO: Add state for toggling element open/close
 
   return (
     <Fragment>
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 407d78398db2..0f75b0e0df2a 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -10,6 +10,8 @@ export function useElement(store: Store, id: string): Element {
     ((store.getElement(id): any): Element)
   );
 
+  // TODO: We might still miss updates in concurrent mode.
+  //       We should just useEffect and do a sync comparison (like in create-subscription) to handle this.
   useLayoutEffect(() => {
     const handler = () => setElement(((store.getElement(id): any): Element));
     store.addListener(id, handler);
@@ -22,6 +24,8 @@ export function useElement(store: Store, id: string): Element {
 export function useRoots(store: Store): Array<string> {
   const [roots, setRoots] = useState<Array<string>>(Array.from(store.roots));
 
+  // TODO: We might still miss updates in concurrent mode.
+  //       We should just useEffect and do a sync comparison (like in create-subscription) to handle this.
   useLayoutEffect(() => {
     const handler = () => setRoots(Array.from(store.roots));
     store.addListener('roots', handler);

From b7cbd382147d4941381535d1dc18db9abe98b6ba Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 27 Jan 2019 07:58:09 -0800
Subject: [PATCH 007/814] Misc updates to better handle tearing and add some
 future TODOs

---
 shells/browser/shared/src/main.js            |  4 +-
 shells/browser/shared/src/panel.js           |  4 +-
 shells/dev/app/index.js                      | 17 +++++++--
 shells/dev/index.html                        |  2 +
 shells/dev/src/devtools.js                   | 36 +++++++++++++++---
 src/devtools/store.js                        | 15 +++++---
 src/devtools/views/Element.js                |  8 ++++
 src/devtools/views/{App.css => Elements.css} |  2 +-
 src/devtools/views/{App.js => Elements.js}   |  6 +--
 src/devtools/views/Tree.js                   |  8 ++++
 src/devtools/views/hooks.js                  | 40 ++++++++++++++------
 11 files changed, 110 insertions(+), 32 deletions(-)
 rename src/devtools/views/{App.css => Elements.css} (99%)
 rename src/devtools/views/{App.js => Elements.js} (74%)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index ab511445cdcd..697843409441 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -15,7 +15,9 @@ function createPanelIfReactLoaded() {
 
       clearInterval(loadCheckInterval);
       panelCreated = true;
-      chrome.devtools.panels.create('React', '', 'panel.html', function(panel) {
+      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', function(
+        panel
+      ) {
         panel.onShown.addListener(function(window) {
           // TODO: When the user switches to the panel, check for an Elements tab selection.
         });
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index e93f1c66f72f..fd3361764bcf 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -3,7 +3,7 @@
 import { createElement } from 'react';
 import { render } from 'react-dom';
 import Bridge from 'src/bridge';
-import App from 'src/devtools/views/App';
+import Elements from 'src/devtools/views/Elements';
 import inject from './inject';
 
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
@@ -58,5 +58,5 @@ inject(chrome.runtime.getURL('build/backend.js'), () => {
     },
   });
 
-  render(createElement(App, { bridge, browserName, themeName }), node);
+  render(createElement(Elements, { bridge, browserName, themeName }), node);
 });
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 897623f78dc9..af1f5b82272a 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -1,11 +1,22 @@
 /** @flow */
 
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import App from './App';
 
 const container = document.createElement('div');
 
-render(createElement(App), container);
-
 ((document.body: any): HTMLBodyElement).appendChild(container);
+
+function mountTestApp() {
+  render(createElement(App), container);
+}
+
+function unmountTestApp() {
+  unmountComponentAtNode(container);
+}
+
+mountTestApp();
+
+window.parent.mountTestApp = mountTestApp;
+window.parent.unmountTestApp = unmountTestApp;
diff --git a/shells/dev/index.html b/shells/dev/index.html
index d58208184098..3d9c03dc2da6 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -30,6 +30,8 @@
     </style>
   </head>
   <body>
+    <button id="mountButton">Unmount test app</button>
+
     <!-- React test app (shells/dev/app) is injected here -->
     <!-- DevTools backend (shells/dev/src) is injected here -->
     <!-- global "hook" is defined on the iframe's contentWindow -->
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index da162a517acf..3ced5923ca24 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -1,11 +1,12 @@
 /** @flow */
 
 import { createElement } from 'react';
-import { render } from 'react-dom';
+// $FlowFixMe Flow does not yet know about createRoot()
+import { createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
-import App from 'src/devtools/views/App';
+import Elements from 'src/devtools/views/Elements';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
@@ -13,6 +14,29 @@ const { contentDocument, contentWindow } = iframe;
 
 installHook(contentWindow);
 
+const container = ((document.getElementById('devtools'): any): HTMLElement);
+
+let isTestAppMounted = true;
+
+const mountButton = ((document.getElementById(
+  'mountButton'
+): any): HTMLButtonElement);
+mountButton.addEventListener('click', function() {
+  if (isTestAppMounted) {
+    if (typeof window.unmountTestApp === 'function') {
+      window.unmountTestApp();
+      mountButton.innerText = 'Mount test app';
+      isTestAppMounted = false;
+    }
+  } else {
+    if (typeof window.mountTestApp === 'function') {
+      window.mountTestApp();
+      mountButton.innerText = 'Unmount test app';
+      isTestAppMounted = true;
+    }
+  }
+});
+
 initDevTools({
   connect(cb) {
     inject('./build/backend.js', () => {
@@ -29,13 +53,13 @@ initDevTools({
 
       cb(bridge);
 
-      render(
-        createElement(App, {
+      const root = createRoot(container);
+      root.render(
+        createElement(Elements, {
           bridge,
           browserName: 'Chrome',
           themeName: 'light',
-        }),
-        ((document.getElementById('devtools'): any): HTMLElement)
+        })
       );
     });
   },
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 14d75b0dc5b2..04378813c82f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -17,7 +17,9 @@ class Store extends EventEmitter {
   _idToElement: Map<string, Element> = new Map();
   _idToParentID: Map<string, string> = new Map();
 
-  roots: Set<string> = new Set();
+  // This Array must be treated as immutable!
+  // Passive effects will check it for changes between render and mount.
+  roots: $ReadOnlyArray<string> = [];
 
   constructor(bridge: Bridge) {
     super();
@@ -50,8 +52,8 @@ class Store extends EventEmitter {
 
   onBridgeRoot = (id: string) => {
     debug('onBridgeRoot()', id);
-    if (!this.roots.has(id)) {
-      this.roots.add(id);
+    if (!this.roots.includes(id)) {
+      this.roots = this.roots.concat(id);
       this.emit('roots');
     }
   };
@@ -64,8 +66,11 @@ class Store extends EventEmitter {
       this._idToParentID.delete(id);
     }
 
-    if (this.roots.has(id)) {
-      this.roots.delete(id);
+    const index = this.roots.indexOf(id);
+    if (index >= 0) {
+      this.roots = this.roots
+        .slice(0, index)
+        .concat(this.roots.slice(index + 1));
       this.emit('roots');
     }
   };
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 6fe0e72f5faa..e4aa3f811610 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -15,6 +15,14 @@ export default function Element({ depth, id }: Props) {
   const store = useContext(StoreContext);
   const element = useElement(store, id);
 
+  // DevTools are rendered in concurrent mode.
+  // It's possible the store has updated since the commit that triggered this render.
+  // So we need to guard against an undefined element.
+  // TODO: Handle this by switching to a Suspense based approach.
+  if (element == null) {
+    return null;
+  }
+
   const { children, displayName, key } = element;
 
   // TODO: Add state for toggling element open/close
diff --git a/src/devtools/views/App.css b/src/devtools/views/Elements.css
similarity index 99%
rename from src/devtools/views/App.css
rename to src/devtools/views/Elements.css
index 85bb641bc835..98a332e0ae72 100644
--- a/src/devtools/views/App.css
+++ b/src/devtools/views/Elements.css
@@ -37,7 +37,7 @@
   --font-size-tree-normal: 14px;
 }
 
-.App {
+.Elements {
   width: 100%;
   height: 100%;
   overflow: auto;
diff --git a/src/devtools/views/App.js b/src/devtools/views/Elements.js
similarity index 74%
rename from src/devtools/views/App.js
rename to src/devtools/views/Elements.js
index 24b5898fb050..9d571ebb5f75 100644
--- a/src/devtools/views/App.js
+++ b/src/devtools/views/Elements.js
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import Store from '../store';
 import Tree from './Tree';
 import { StoreContext } from './contexts';
-import styles from './App.css';
+import styles from './Elements.css';
 
 import type { Bridge } from '../../types';
 
@@ -14,12 +14,12 @@ export type Props = {|
   themeName: string,
 |};
 
-export default function App({ bridge, browserName, themeName }: Props) {
+export default function Elements({ bridge, browserName, themeName }: Props) {
   const store = useMemo(() => new Store(bridge), []);
 
   return (
     <StoreContext.Provider value={store}>
-      <div className={styles.App}>
+      <div className={styles.Elements}>
         <Tree />
       </div>
     </StoreContext.Provider>
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 168a333b752d..b94c0d6994e5 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -30,6 +30,14 @@ function Root({ id }: RootProps) {
   const store = useContext(StoreContext);
   const element = useElement(store, id);
 
+  // DevTools are rendered in concurrent mode.
+  // It's possible the store has updated since the commit that triggered this render.
+  // So we need to guard against an undefined element.
+  // TODO: Handle this by switching to a Suspense based approach.
+  if (element == null) {
+    return null;
+  }
+
   return element.children.map(childID => (
     <Element key={childID} depth={0} id={childID} />
   ));
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 0f75b0e0df2a..6d589fba0cc2 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -5,30 +5,48 @@ import { useLayoutEffect, useState } from 'react';
 import type { Element } from '../types';
 import Store from '../store';
 
-export function useElement(store: Store, id: string): Element {
-  const [element, setElement] = useState<Element>(
-    ((store.getElement(id): any): Element)
-  );
+// TODO useEffect has a bug where sometimes subscriptions don't get cleaned up correctly.
+// Potentially related to github.com/facebookincubator/redux-react-hook/issues/17
+// As a temporary work around, switch back to layout effect.
+
+export function useElement(store: Store, id: string): ?Element {
+  const [element, setElement] = useState<?Element>(store.getElement(id));
 
-  // TODO: We might still miss updates in concurrent mode.
-  //       We should just useEffect and do a sync comparison (like in create-subscription) to handle this.
   useLayoutEffect(() => {
     const handler = () => setElement(((store.getElement(id): any): Element));
+
+    // Listen for changes to the element.
     store.addListener(id, handler);
+
+    // Check for changes that may have happened between render and mount.
+    const newElement = store.getElement(id);
+    if (element !== newElement) {
+      setElement(newElement);
+    }
+
+    // Remove event listener on unmount.
     return () => store.removeListener(id, handler);
   }, [store, id]);
 
   return element;
 }
 
-export function useRoots(store: Store): Array<string> {
-  const [roots, setRoots] = useState<Array<string>>(Array.from(store.roots));
+export function useRoots(store: Store): $ReadOnlyArray<string> {
+  const [roots, setRoots] = useState<$ReadOnlyArray<string>>(store.roots);
 
-  // TODO: We might still miss updates in concurrent mode.
-  //       We should just useEffect and do a sync comparison (like in create-subscription) to handle this.
   useLayoutEffect(() => {
-    const handler = () => setRoots(Array.from(store.roots));
+    const handler = () => setRoots(store.roots);
+
+    // Listen for changes to roots.
     store.addListener('roots', handler);
+
+    // Check for changes that may have happened between render and mount.
+    const newRoots = store.roots;
+    if (roots !== newRoots) {
+      setRoots(newRoots);
+    }
+
+    // Remove event listener on unmount.
     return () => store.removeListener('roots', handler);
   }, [store]);
 

From c9a5f8cc2974fb158bd4e0010c3a391a427b3448 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 27 Jan 2019 16:04:17 -0800
Subject: [PATCH 008/814] Stashing partial windowing implementation

---
 package.json                   |   2 +-
 src/backend/agent.js           |   5 +-
 src/devtools/store.js          | 213 +++++++++++++++++++++++++++++++--
 src/devtools/types.js          |  13 ++
 src/devtools/views/Element.js  |  57 +++++----
 src/devtools/views/Elements.js |  30 ++++-
 src/devtools/views/Tree.js     |  54 ++++-----
 src/devtools/views/contexts.js |   3 +
 src/devtools/views/hooks.js    |   9 +-
 yarn.lock                      |  21 +++-
 10 files changed, 323 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index 043c75ee8cd8..351d9da59b1b 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "react-dom": "^16.8.0-alpha.1",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.1.1",
+    "react-window": "^1.5.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^1.10.1",
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 9cfba3fd0e8d..9c75b216a646 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -15,7 +15,7 @@ import type { Bridge } from '../types';
 import type { Element } from 'src/devtools/types';
 
 const debug = (methodName, ...args) => {
-  // debug(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
+  console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
 };
 
 const THROTTLE_BY_MS = 350;
@@ -34,6 +34,7 @@ export default class Agent extends EventEmitter {
     // bridge.on('...'), this...);
 
     this.addListener('root', id => bridge.send('root', id));
+    this.addListener('rootCommitted', id => bridge.send('rootCommitted', id));
     this.addListener('mount', data => bridge.send('mount', data));
     this.addListener('update', data => bridge.send('update', data));
     this.addListener('unmount', data => bridge.send('unmount', data));
@@ -137,6 +138,8 @@ export default class Agent extends EventEmitter {
       debug('emit("root")', id);
       this.emit('root', id);
     }
+
+    this.emit('rootCommitted', id);
   };
 
   onHookUnmount = ({ fiber }: { fiber: Fiber }) => {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 04378813c82f..b168fbbf9c19 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -2,11 +2,11 @@
 
 import EventEmitter from 'events';
 
-import type { Element } from './types';
+import type { Element, ElementTreeMetadata } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  // console.log(`%cAgent %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
+  console.log(`%cStore %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
 };
 
 /**
@@ -14,8 +14,17 @@ const debug = (methodName, ...args) => {
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 class Store extends EventEmitter {
+  _elementToElementTreeMetadata: WeakMap<
+    Element,
+    ElementTreeMetadata
+  > = new WeakMap();
   _idToElement: Map<string, Element> = new Map();
   _idToParentID: Map<string, string> = new Map();
+  _pendingDeletions: Set<string> = new Set();
+
+  // Total number of visible elements (within all roots).
+  // Used for windowing purposes.
+  numElements: number = 0;
 
   // This Array must be treated as immutable!
   // Passive effects will check it for changes between render and mount.
@@ -25,12 +34,54 @@ class Store extends EventEmitter {
     super();
 
     bridge.on('root', this.onBridgeRoot);
+    bridge.on('rootCommitted', this.onBridgeRootCommitted);
+
     bridge.on('mount', this.onBridgeMount);
     bridge.on('update', this.onBridgeUpdated);
     bridge.on('unmount', this.onBridgeUnmounted);
   }
 
-  getElement(id: string) {
+  getElementAtIndex(index: number): Element | null {
+    if (index < 0 || index >= this.numElements) {
+      return null;
+    }
+
+    let rootID;
+    let root;
+
+    let rootWeight = 0;
+    for (let i = 0; i < this.roots.length; i++) {
+      rootID = this.roots[i];
+      root = this._idToElement.get(rootID);
+      const { weight } = this._elementToElementTreeMetadata.get(root);
+
+      if (rootWeight + weight > index) {
+        break;
+      }
+    }
+
+    let currentElement = root;
+    let currentWeight = 0;
+
+    while (index !== currentWeight) {
+      for (let i = 0; i < currentElement.children.length; i++) {
+        const childID = currentElement.children[i];
+        const child = this._idToElement.get(childID);
+        const { weight } = this._elementToElementTreeMetadata.get(child);
+        if (index <= currentWeight + weight) {
+          currentWeight++;
+          currentElement = child;
+          break;
+        } else {
+          currentWeight += weight;
+        }
+      }
+    }
+
+    return currentElement;
+  }
+
+  getElementByID(id: string) {
     return this._idToElement.get(id);
   }
 
@@ -38,6 +89,117 @@ class Store extends EventEmitter {
     return this._idToParentID.get(id);
   }
 
+  getTreeMetadataForElement(element: Element) {
+    return this._elementToElementTreeMetadata.get(element);
+  }
+
+  _crawlForTreeMetadata(id: string, depth: number = 0): number {
+    let weight = 1;
+
+    const element = this._idToElement.get(id);
+
+    // TODO: Figure out why sometimes items aren't being sent across the bridge.
+    // It always seems to be one of the ListItems...
+    if (element == null) {
+      console.log(`%cNo element found for id "${id}"`, 'background-color: yellow; font-weight: bold;');
+      return 0;
+    }
+
+    element.children.forEach(childID => {
+      weight += this._crawlForTreeMetadata(childID, depth + 1);
+    });
+
+    this._elementToElementTreeMetadata.set(element, {
+      depth,
+      weight,
+    });
+
+    return weight;
+  }
+
+  _updateElementTreeMetadata(prevElement: Element, element: Element): void {
+    if (prevElement.children === element.children) {
+      return;
+    }
+
+    // Compare children in case they have changed.
+    // For each child that was removed, we need to shrink the list by this many elements.
+    // For each child that was added, we need to grow the list by this many elements.
+
+    const prevChildren = prevElement.children;
+    const prevNumChildren = prevChildren.length;
+
+    const children = element.children;
+    const numChildren = children.length;
+
+    // TODO: The below diffing could be optimized more.
+
+    // Scan for deletions
+    for (let i = 0; i < prevNumChildren; i++) {
+      const childID = prevChildren[i];
+      if (!children.includes(childID)) {
+        const child = this._idToElement.get(childID);
+        const { weight } = this._elementToElementTreeMetadata.get(child);
+
+        this.numElements -= weight;
+
+        let current = element;
+        while (current !== null) {
+          const datum = this._elementToElementTreeMetadata.get(current);
+          datum.weight -= weight;
+
+          const parent = this._idToElement.get(datum.parentID);
+          current =
+            parent != null
+              ? this._elementToElementTreeMetadata.get(parent)
+              : null;
+        }
+      }
+    }
+
+    // Scan for additions
+    for (let i = 0; i < numChildren; i++) {
+      const childID = children[i];
+      if (!prevChildren.includes(childID)) {
+        const child = this._idToElement.get(childID);
+        const { depth } = this._elementToElementTreeMetadata.get(element);
+        const weight = this._crawlForTreeMetadata(
+          childID,
+          depth + 1
+        );
+
+        this.numElements += weight;
+
+        let current = element;
+        while (current !== null) {
+          const datum = this._elementToElementTreeMetadata.get(current);
+          datum.weight += weight;
+
+          const parent = this._idToElement.get(datum.parentID);
+          current =
+            parent != null
+              ? this._elementToElementTreeMetadata.get(parent)
+              : null;
+        }
+      }
+    }
+  }
+
+__printTree() {
+  let i = 0;
+  this.roots.forEach(rootID => {
+    const root = this._idToElement.get(rootID);
+    const { weight } = this._elementToElementTreeMetadata.get(root);
+    for (let j = i; j < i  + weight; j++) {
+      const element = this.getElementAtIndex(j)
+      const { depth } = this._elementToElementTreeMetadata.get(element);
+
+      console.log('  '.repeat(depth) + element.displayName);
+    }
+    i += weight;
+  });
+}
+
   onBridgeMount = (element: Element) => {
     const { id } = element;
     debug('onBridgeMount()', element);
@@ -54,23 +216,47 @@ class Store extends EventEmitter {
     debug('onBridgeRoot()', id);
     if (!this.roots.includes(id)) {
       this.roots = this.roots.concat(id);
+
+      // Generate tree metadata used for windowing.
+      this.numElements += this._crawlForTreeMetadata(id);
+
       this.emit('roots');
     }
   };
 
+  onBridgeRootCommitted = (rootID: string) => {
+    this._pendingDeletions.forEach(id => {
+      this._idToElement.delete(id);
+
+      if (this._idToParentID.has(id)) {
+        this._idToParentID.delete(id);
+      }
+    });
+    this._pendingDeletions.clear();
+
+    debug('onBridgeRootCommitted()', rootID);
+    this.emit('rootCommitted', rootID);
+
+this.__printTree();
+  };
+
+  // TODO: Unmounting removes id-to-element before crawling, which breaks it.
+  // Should I just ditch the idea of a WeakMap in favor of an explicit it-to-metadata mapping like with parents?
   onBridgeUnmounted = (id: string) => {
     debug('onBridgeUnmounted()', id);
-    this._idToElement.delete(id);
-
-    if (this._idToParentID.has(id)) {
-      this._idToParentID.delete(id);
-    }
+    this._pendingDeletions.add(id);
 
     const index = this.roots.indexOf(id);
     if (index >= 0) {
       this.roots = this.roots
         .slice(0, index)
         .concat(this.roots.slice(index + 1));
+
+      const root = this._idToElement.get(id);
+      const {weight} = this._elementToElementTreeMetadata.get(root);
+
+      this.numElements -= weight;
+
       this.emit('roots');
     }
   };
@@ -78,7 +264,18 @@ class Store extends EventEmitter {
   onBridgeUpdated = (element: Element) => {
     const { id } = element;
     debug('onBridgeUpdated()', element);
+
+    const prevElement = ((this._idToElement.get(id): any): Element);
+    const prevElementTreeMetadata = ((this._elementToElementTreeMetadata.get(prevElement): any): ElementTreeMetadata);
+
     this._idToElement.set(id, element);
+    this._elementToElementTreeMetadata.set(
+      element,
+      prevElementTreeMetadata
+    );
+
+    // Update tree metadata used for windowing.
+    this._updateElementTreeMetadata(prevElement, element);
 
     this.emit(id);
   };
diff --git a/src/devtools/types.js b/src/devtools/types.js
index a8ac7155aa21..c8cc329b4171 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -1,5 +1,7 @@
 // @flow
 
+import typeof Store from './Store';
+
 export const ElementTypeClassOrFunction = 1;
 export const ElementTypeContext = 2;
 export const ElementTypeForwardRef = 3;
@@ -20,6 +22,12 @@ export type Element = {|
   children: Array<string>,
 |};
 
+export type ElementTreeMetadata = {|
+  depth: number,
+  rootID: string,
+  weight: number,
+|};
+
 export type InspectedElement = {|
   id: string,
   context: Object | null,
@@ -29,3 +37,8 @@ export type InspectedElement = {|
   canEditProps: boolean,
   source: Object,
 |};
+
+export type TreeContext = {|
+  size: number,
+  store: Store,
+|};
\ No newline at end of file
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index e4aa3f811610..09cc97c90219 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,19 +1,18 @@
 // @flow
 
 import React, { Fragment, useContext } from 'react';
-import { useElement } from './hooks';
-import { StoreContext } from './contexts';
+import { TreeContext } from './contexts';
 
 import styles from './Element.css';
 
 type Props = {|
-  depth: number,
-  id: string,
+  index: number,
+  style: Object,
 |};
 
-export default function Element({ depth, id }: Props) {
-  const store = useContext(StoreContext);
-  const element = useElement(store, id);
+export default function Element({ index, style }: Props) {
+  const {store} = useContext(TreeContext);
+  const element = store.getElementAtIndex(index);
 
   // DevTools are rendered in concurrent mode.
   // It's possible the store has updated since the commit that triggered this render.
@@ -23,32 +22,32 @@ export default function Element({ depth, id }: Props) {
     return null;
   }
 
+  const elementTreeMetadata = store.getTreeMetadataForElement(element);
+
   const { children, displayName, key } = element;
+  const { depth } = elementTreeMetadata;
 
   // TODO: Add state for toggling element open/close
 
   return (
-    <Fragment>
-      <div
-        className={styles.Element}
-        style={{ paddingLeft: `${1 + depth}rem` }}
-      >
-        {children.length > 0 && <span className={styles.ArrowOpen} />}
-
-        <span className={styles.Component}>
-          {displayName}
-          {key && (
-            <Fragment>
-              &nbsp;<span className={styles.AttributeName}>key</span>=
-              <span className={styles.AttributeValue}>"{key}"</span>
-            </Fragment>
-          )}
-        </span>
-      </div>
-
-      {children.map(childID => (
-        <Element key={childID} depth={depth + 1} id={childID} />
-      ))}
-    </Fragment>
+    <div
+      className={styles.Element}
+      style={{
+        ...style,
+        paddingLeft: `${1 + depth}rem`
+      }}
+    >
+      {children.length > 0 && <span className={styles.ArrowOpen} />}
+
+      <span className={styles.Component}>
+        {displayName}
+        {key && (
+          <Fragment>
+            &nbsp;<span className={styles.AttributeName}>key</span>=
+            <span className={styles.AttributeValue}>"{key}"</span>
+          </Fragment>
+        )}
+      </span>
+    </div>
   );
 }
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 9d571ebb5f75..6f6619661d79 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
-import { StoreContext } from './contexts';
+import { StoreContext, TreeContext } from './contexts';
 import styles from './Elements.css';
 
 import type { Bridge } from '../../types';
@@ -17,11 +17,31 @@ export type Props = {|
 export default function Elements({ bridge, browserName, themeName }: Props) {
   const store = useMemo(() => new Store(bridge), []);
 
+  const [treeContext, setTreeContext] = useState(({
+    size: store.numElements,
+    store,
+  }));
+
+  useLayoutEffect(() => {
+    const handler = () => {
+      setTreeContext({
+        size: store.numElements,
+        store,
+      });
+    };
+
+    store.addListener('rootCommitted', handler);
+
+    return () => store.removeListener('rootCommitted', handler);
+  }, [store]);
+
   return (
     <StoreContext.Provider value={store}>
-      <div className={styles.Elements}>
-        <Tree />
-      </div>
+      <TreeContext.Provider value={treeContext}>
+        <div className={styles.Elements}>
+          <Tree />
+        </div>
+      </TreeContext.Provider>
     </StoreContext.Provider>
   );
 }
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index b94c0d6994e5..1ccd23d768c8 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -1,44 +1,32 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
 import Element from './Element';
-import { StoreContext } from './contexts';
-import { useElement, useRoots } from './hooks';
+import { TreeContext } from './contexts';
 
 import styles from './Tree.css';
 
-type TreeProps = {||};
+type Props = {||};
 
-export default function Tree(props: TreeProps) {
-  const store = useContext(StoreContext);
-  const roots = useRoots(store);
+export default function Tree(props: Props) {
+  const treeContext = useContext(TreeContext);
 
   return (
-    <div className={styles.Tree}>
-      {roots.map(id => (
-        <Root key={id} id={id} />
-      ))}
-    </div>
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          className={styles.Tree}
+          height={height}
+          itemCount={treeContext.size}
+          itemData={treeContext}
+          itemSize={20}
+          width={width}
+        >
+          {Element}
+        </FixedSizeList>
+      )}
+    </AutoSizer>
   );
 }
-
-type RootProps = {|
-  id: string,
-|};
-
-function Root({ id }: RootProps) {
-  const store = useContext(StoreContext);
-  const element = useElement(store, id);
-
-  // DevTools are rendered in concurrent mode.
-  // It's possible the store has updated since the commit that triggered this render.
-  // So we need to guard against an undefined element.
-  // TODO: Handle this by switching to a Suspense based approach.
-  if (element == null) {
-    return null;
-  }
-
-  return element.children.map(childID => (
-    <Element key={childID} depth={0} id={childID} />
-  ));
-}
diff --git a/src/devtools/views/contexts.js b/src/devtools/views/contexts.js
index d5a76c5f07fc..f7428d3fc665 100644
--- a/src/devtools/views/contexts.js
+++ b/src/devtools/views/contexts.js
@@ -2,7 +2,10 @@
 
 import { createContext } from 'react';
 
+import type { TreeMetadata } from '../types';
+
 import Store from '../store';
 
 export const RootsContext = createContext<Array<string>>([]);
 export const StoreContext = createContext<Store>(((null: any): Store));
+export const TreeContext = createContext<TreeMetadata>(((null: any): TreeMetadata));
\ No newline at end of file
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 6d589fba0cc2..9576528afa88 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -2,7 +2,7 @@
 
 import { useLayoutEffect, useState } from 'react';
 
-import type { Element } from '../types';
+import type { Element, ElementTreeMetadata } from '../types';
 import Store from '../store';
 
 // TODO useEffect has a bug where sometimes subscriptions don't get cleaned up correctly.
@@ -10,16 +10,17 @@ import Store from '../store';
 // As a temporary work around, switch back to layout effect.
 
 export function useElement(store: Store, id: string): ?Element {
-  const [element, setElement] = useState<?Element>(store.getElement(id));
+  const [element, setElement] = useState<?Element>(store.getElementByID(id));
 
   useLayoutEffect(() => {
-    const handler = () => setElement(((store.getElement(id): any): Element));
+    const handler = () =>
+      setElement(((store.getElementByID(id): any): Element));
 
     // Listen for changes to the element.
     store.addListener(id, handler);
 
     // Check for changes that may have happened between render and mount.
-    const newElement = store.getElement(id);
+    const newElement = store.getElementByID(id);
     if (element !== newElement) {
       setElement(newElement);
     }
diff --git a/yarn.lock b/yarn.lock
index 494ec5355257..188fbf67a9bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -674,6 +674,13 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
+"@babel/runtime@^7.0.0":
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
+  integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@^7.1.0", "@babel/template@^7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
@@ -8413,11 +8420,14 @@ react-portal@^3.1.0:
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.1.1.tgz#8a0cf488c9db19425fb804f118f5aac6227d7fd2"
+react-window@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.0.tgz#3e56b720b97666bce38a9e932bdd238d56e258f1"
+  integrity sha512-55WeZKjMNF5JdCuKghc/H65DBecoeGgH8MOX3CgT7BJ66xb4ITRuXPUlz0qU6r50wetdF/oLhorYBRvKD4Z1IQ==
   dependencies:
+    "@babel/runtime" "^7.0.0"
     memoize-one "^3.1.1"
 
 react@^16.8.0-alpha.1:
@@ -8586,6 +8596,11 @@ regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"

From 3f93b029a413f82ef021d2b4b5dfcf224d6d07e7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 28 Jan 2019 15:50:48 -0800
Subject: [PATCH 009/814] Replaced node objects with typed array of tree
 operations; windowing works in small test harness

---
 package.json                   |   2 +-
 src/backend/agent.js           | 185 ++------------
 src/backend/index.js           |   4 +-
 src/backend/renderer.js        | 435 ++++++++++++++++++++-------------
 src/backend/types.js           |   3 +-
 src/constants.js               |   5 +
 src/devtools/store.js          | 394 +++++++++++++++--------------
 src/devtools/types.js          |  28 +--
 src/devtools/views/Element.js  |  13 +-
 src/devtools/views/Elements.js |   6 +-
 src/devtools/views/contexts.js |   6 +-
 src/devtools/views/hooks.js    |  12 +-
 src/utils.js                   |  19 ++
 yarn.lock                      |   8 +-
 14 files changed, 540 insertions(+), 580 deletions(-)
 create mode 100644 src/constants.js
 create mode 100644 src/utils.js

diff --git a/package.json b/package.json
index 351d9da59b1b..81f577f34180 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "react-dom": "^16.8.0-alpha.1",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.5.0",
+    "react-window": "^1.5.1",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^1.10.1",
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 9c75b216a646..89f13dfe5110 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,44 +1,28 @@
 // @flow
 
-import nullthrows from 'nullthrows';
 import EventEmitter from 'events';
-import { guid } from './utils';
-import { ElementTypeOtherOrUnknown } from 'src/devtools/types';
 
-import type {
-  Fiber,
-  RendererData,
-  RendererID,
-  RendererInterface,
-} from './types';
+import type { RendererID, RendererInterface } from './types';
 import type { Bridge } from '../types';
-import type { Element } from 'src/devtools/types';
 
 const debug = (methodName, ...args) => {
-  console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);
+  console.log(
+    `%cAgent %c${methodName}`,
+    'color: purple; font-weight: bold;',
+    'font-weight: bold;',
+    ...args
+  );
 };
 
-const THROTTLE_BY_MS = 350;
-
 export default class Agent extends EventEmitter {
-  _fiberToID: WeakMap<Fiber, string> = new WeakMap();
-  _idToElement: Map<string, Element> = new Map();
-  _idToFiber: Map<string, Fiber> = new Map();
-  _idToRendererData: Map<string, RendererData> = new Map();
-  _idToRendererID: Map<string, RendererID> = new Map();
+  _bridge: Bridge = ((null: any): Bridge);
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
-  _roots: Set<RendererID> = new Set();
 
   addBridge(bridge: Bridge) {
+    this._bridge = bridge;
+
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
-
-    this.addListener('root', id => bridge.send('root', id));
-    this.addListener('rootCommitted', id => bridge.send('rootCommitted', id));
-    this.addListener('mount', data => bridge.send('mount', data));
-    this.addListener('update', data => bridge.send('update', data));
-    this.addListener('unmount', data => bridge.send('unmount', data));
-    // TODO Add other methods for e.g. profiling.
   }
 
   setRendererInterface(
@@ -48,148 +32,23 @@ export default class Agent extends EventEmitter {
     this._rendererInterfaces[rendererID] = rendererInterface;
   }
 
-  _getId(fiber: Fiber): string {
-    if (typeof fiber !== 'object' || !fiber) {
-      return fiber;
-    }
-    if (!this._fiberToID.has(fiber)) {
-      this._fiberToID.set(fiber, guid());
-      this._idToFiber.set(nullthrows(this._fiberToID.get(fiber)), fiber);
-    }
-    return nullthrows(this._fiberToID.get(fiber));
-  }
-
-  _crawl(parent: Element, id: string): void {
-    const data: RendererData = ((this._idToRendererData.get(
-      id
-    ): any): RendererData);
-    if (data.type === ElementTypeOtherOrUnknown) {
-      data.children.forEach(childFiber => {
-        if (childFiber !== null) {
-          this._crawl(parent, this._getId(childFiber));
-        }
-      });
-    } else {
-      parent.children.push(id);
-
-      this._createOrUpdateElement(id, data);
-    }
-  }
-
-  _createOrUpdateElement(id: string, data: RendererData): void {
-    const prevElement: ?Element = this._idToElement.get(id);
-    const nextElement: Element = {
-      id,
-      key: data.key,
-      displayName: data.displayName,
-      children: [],
-      type: data.type,
-    };
-
-    this._idToElement.set(id, nextElement);
-
-    data.children.forEach(childFiber => {
-      if (childFiber !== null) {
-        this._crawl(nextElement, this._getId(childFiber));
-      }
-    });
-
-    if (prevElement == null) {
-      debug('emit("mount")', id, nextElement);
-      this.emit('mount', nextElement);
-    } else if (!areElementsEqual(prevElement, nextElement)) {
-      debug('emit("update")', id, nextElement);
-      this.emit('update', nextElement);
-    }
-  }
-
-  onHookMount = ({
-    data,
-    fiber,
-    renderer,
-  }: {
-    data: RendererData,
-    fiber: Fiber,
-    renderer: RendererID,
-  }) => {
-    const id = this._getId(fiber);
-
-    this._idToRendererData.set(id, data);
-    this._idToRendererID.set(id, renderer);
+  onHookDisplayNames = (displayNames: Map<number, string>) => {
+    debug('onHookDisplayNames', displayNames);
+    this._bridge.send('displayNames', displayNames);
   };
 
-  onHookRootCommitted = ({
-    data,
-    fiber,
-    renderer,
-  }: {
-    data: RendererData,
-    fiber: Fiber,
-    renderer: RendererID,
-  }) => {
-    const id = this._getId(fiber);
-
-    // TODO: Can we use the effects list on update for a faster path?
-    //       Mounts (Placements) and unmounts (Deletions) are on the child; need to update parent children in that case.
-    this._createOrUpdateElement(id, data);
-
-    if (!this._roots.has(id)) {
-      this._roots.add(id);
-      debug('emit("root")', id);
-      this.emit('root', id);
-    }
-
-    this.emit('rootCommitted', id);
+  onHookKeys = (keys: Map<number, string>) => {
+    debug('onHookKeys', keys);
+    this._bridge.send('keys', keys);
   };
 
-  onHookUnmount = ({ fiber }: { fiber: Fiber }) => {
-    const id = this._getId(fiber);
-
-    if (this._roots.has(id)) {
-      this._roots.delete(id);
-      this.emit('rootUnmounted', id);
-    }
-
-    if (this._idToElement.has(id)) {
-      this._idToElement.delete(id);
-      debug('emit("unmount")', id);
-      this.emit('unmount', id);
-    }
-
-    this._fiberToID.delete(fiber);
-    this._idToRendererData.delete(id);
-    this._idToRendererID.delete(id);
+  onHookOperations = (operations: Uint32Array) => {
+    debug('onHookOperations', operations);
+    this._bridge.send('operations', operations);
   };
 
-  onHookUpdate = ({ data, fiber }: { data: RendererData, fiber: Fiber }) => {
-    const id = this._getId(fiber);
-
-    this._idToRendererData.set(id, data);
+  onHookRootCommitted = (rootID: string) => {
+    debug('onHookRootCommitted', rootID);
+    this._bridge.send('rootCommitted', rootID);
   };
 }
-
-function areElementsEqual(
-  prevElement: ?Element,
-  nextElement: ?Element
-): boolean {
-  if (!prevElement || !nextElement) {
-    return false;
-  }
-
-  if (
-    prevElement.key !== nextElement.key ||
-    prevElement.displayName !== nextElement.displayName ||
-    prevElement.children.length !== nextElement.children.length ||
-    prevElement.type !== nextElement.type
-  ) {
-    return false;
-  }
-
-  for (let i = 0; i < prevElement.children.length; i++) {
-    if (prevElement.children[i] !== nextElement.children[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}
diff --git a/src/backend/index.js b/src/backend/index.js
index c7176b83f6b5..a634b9c8aabd 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -12,10 +12,8 @@ export function initBackend(hook: Hook, agent: Agent): void {
       rendererInterface.walkTree();
     }),
 
+    hook.sub('operations', agent.onHookOperations),
     hook.sub('rootCommitted', agent.onHookRootCommitted),
-    hook.sub('mount', agent.onHookMount),
-    hook.sub('update', agent.onHookUpdate),
-    hook.sub('unmount', agent.onHookUnmount),
 
     // TODO Add additional subscriptions required for profiling mode
   ];
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3b29dc1274db..1d1392f7a846 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -8,21 +8,25 @@ import {
   ElementTypeMemo,
   ElementTypeOtherOrUnknown,
   ElementTypeProfiler,
+  ElementTypeRoot,
   ElementTypeSuspense,
 } from 'src/devtools/types';
+import { utfEncodeString } from '../utils';
 import { getDisplayName } from './utils';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_RESET_CHILDREN,
+} from '../constants';
 
 import type {
   Fiber,
   Hook,
   ReactRenderer,
-  RendererData,
+  FiberData,
   RendererInterface,
 } from './types';
 
-// TODO: If we're profiling, process update
-// TODO: Throttle process update to app tree
-
 function getInternalReactConstants(version) {
   const ReactSymbols = {
     CONCURRENT_MODE_NUMBER: 0xeacf,
@@ -184,10 +188,61 @@ export function attach(
 
   const primaryFibers: WeakSet<Fiber> = new WeakSet();
 
-  // TODO: we might want to change the data structure
-  // once we no longer suppport Stack versions of `getData`.
+  // Keep this function in sync with getDataForFiber()
+  function shouldFilterFiber(fiber: Fiber): boolean {
+    const { type, tag } = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case FunctionComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+      case ForwardRef:
+      case HostRoot:
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return false;
+      case HostPortal:
+      case HostComponent:
+      case HostText:
+      case Fragment:
+        return true;
+      default:
+        const symbolOrNumber =
+          typeof type === 'object' && type !== null ? type.$$typeof : type;
+
+        const switchValue =
+          // $FlowFixMe facebook/flow/issues/2362
+          typeof symbolOrNumber === 'symbol'
+            ? symbolOrNumber.toString()
+            : symbolOrNumber;
+
+        switch (switchValue) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return true;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+          case SUSPENSE_NUMBER:
+          case SUSPENSE_SYMBOL_STRING:
+          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            return false;
+          default:
+            return false;
+        }
+    }
+  }
+
+  // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
   // TODO: Keep in sync with getElementType()
-  function getRendererDataFromFiber(fiber: Fiber): RendererData {
+  function getDataForFiber(fiber: Fiber): FiberData {
     const { elementType, type, key, tag } = fiber;
 
     // This is to support lazy components with a Promise as the type.
@@ -199,11 +254,7 @@ export function attach(
       }
     }
 
-    // Suspense has some special behavior when timed out that we have to handle.
-    // see https://github.com/facebook/react/pull/13823
-    let isTimedOutSuspense: boolean = false;
-
-    let rendererData: RendererData = ((null: any): RendererData);
+    let fiberData: FiberData = ((null: any): FiberData);
     let displayName: string = ((null: any): string);
     let resolvedContext: any = null;
 
@@ -212,8 +263,7 @@ export function attach(
       case FunctionComponent:
       case IncompleteClassComponent:
       case IndeterminateComponent:
-        rendererData = {
-          children: [],
+        fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
           type: ElementTypeClassOrFunction,
@@ -224,26 +274,28 @@ export function attach(
         displayName =
           resolvedType.displayName ||
           (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef');
-        rendererData = {
-          children: [],
+
+        fiberData = {
           displayName,
           key,
           type: ElementTypeForwardRef,
         };
         break;
       case HostRoot:
+        return {
+          displayName: null,
+          key: null,
+          type: ElementTypeRoot,
+        };
       case HostPortal:
       case HostComponent:
       case HostText:
       case Fragment:
-        // Not displayed in Elements tree
-        rendererData = {
-          children: [],
+        return {
           displayName: null,
-          key,
+          key: null,
           type: ElementTypeOtherOrUnknown,
         };
-        break;
       case MemoComponent:
       case SimpleMemoComponent:
         if (elementType.displayName) {
@@ -252,8 +304,7 @@ export function attach(
           displayName = type.displayName || type.name;
           displayName = displayName ? `Memo(${displayName})` : 'Memo';
         }
-        rendererData = {
-          children: [],
+        fiberData = {
           displayName,
           key,
           type: ElementTypeMemo,
@@ -273,14 +324,11 @@ export function attach(
           case CONCURRENT_MODE_NUMBER:
           case CONCURRENT_MODE_SYMBOL_STRING:
           case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
-            // Not displayed in Elements tree
-            rendererData = {
-              children: [],
+            return {
               displayName: null,
-              key,
+              key: null,
               type: ElementTypeOtherOrUnknown,
             };
-            break;
           case CONTEXT_PROVIDER_NUMBER:
           case CONTEXT_PROVIDER_SYMBOL_STRING:
             // 16.3.0 exposed the context object as "context"
@@ -289,8 +337,7 @@ export function attach(
             displayName = `${resolvedContext.displayName ||
               'Context'}.Provider`;
 
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName,
               key,
               type: ElementTypeContext,
@@ -307,8 +354,7 @@ export function attach(
             displayName = `${resolvedContext.displayName ||
               'Context'}.Consumer`;
 
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName,
               key,
               type: ElementTypeContext,
@@ -316,8 +362,7 @@ export function attach(
             break;
           case STRICT_MODE_NUMBER:
           case STRICT_MODE_SYMBOL_STRING:
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName: null,
               key,
               type: ElementTypeOtherOrUnknown,
@@ -326,11 +371,7 @@ export function attach(
           case SUSPENSE_NUMBER:
           case SUSPENSE_SYMBOL_STRING:
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
-            // Suspense components only have a non-null memoizedState if they're timed-out.
-            isTimedOutSuspense = fiber.memoizedState !== null;
-
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName: 'Suspense',
               key,
               type: ElementTypeSuspense,
@@ -338,8 +379,7 @@ export function attach(
             break;
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName: `Profiler(${fiber.memoizedProps.id})`,
               key,
               type: ElementTypeProfiler,
@@ -348,8 +388,7 @@ export function attach(
           default:
             // Unknown element type.
             // This may mean a new element type that has not yet been added to DevTools.
-            rendererData = {
-              children: [],
+            fiberData = {
               displayName: null,
               key,
               type: ElementTypeOtherOrUnknown,
@@ -359,30 +398,7 @@ export function attach(
         break;
     }
 
-    const { children } = rendererData;
-    if (isTimedOutSuspense) {
-      // The behavior of timed-out Suspense trees is unique.
-      // Rather than unmount the timed out content (and possibly lose important state),
-      // React re-parents this content within a hidden Fragment while the fallback is showing.
-      // This behavior doesn't need to be observable in the DevTools though.
-      // It might even result in a bad user experience for e.g. node selection in the Elements panel.
-      // The easiest fix is to strip out the intermediate Fragment fibers,
-      // so the Elements panel and Profiler don't need to special case them.
-      const primaryChildFragment = fiber.child;
-      const primaryChild = primaryChildFragment.child;
-      const fallbackChildFragment = primaryChildFragment.sibling;
-      const fallbackChild = fallbackChildFragment.child;
-      children.push(primaryChild);
-      children.push(fallbackChild);
-    } else {
-      let child = fiber.child;
-      while (child) {
-        children.push(getPrimaryFiber(child));
-        child = child.sibling;
-      }
-    }
-
-    return rendererData;
+    return fiberData;
   }
 
   // This is a slightly annoying indirection.
@@ -401,6 +417,17 @@ export function attach(
     return fiber;
   }
 
+  let uidCounter: number = 0;
+  const fiberToIDMap: WeakMap<Fiber, number> = new WeakMap();
+
+  function getFiberID(primaryFiber: Fiber): number {
+    if (!fiberToIDMap.has(primaryFiber)) {
+      fiberToIDMap.set(primaryFiber, ++uidCounter);
+    }
+    return ((fiberToIDMap.get(primaryFiber): any): number);
+  }
+
+  // eslint-disable-next-line no-unused-vars
   function hasDataChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
     switch (nextFiber.tag) {
       case ClassComponent:
@@ -425,6 +452,7 @@ export function attach(
     }
   }
 
+  // eslint-disable-next-line no-unused-vars
   function haveProfilerTimesChanged(
     prevFiber: Fiber,
     nextFiber: Fiber
@@ -437,127 +465,176 @@ export function attach(
     );
   }
 
-  let pendingEvents = [];
-
-  // TODO: Do we still need to send events like this?
-  function flushPendingEvents() {
-    const events = pendingEvents;
-    pendingEvents = [];
-    for (let i = 0; i < events.length; i++) {
-      const event = events[i];
-      hook.emit(event.type, event);
+  let pendingOperations: Uint32Array = new Uint32Array(0);
+
+  function addOperation(
+    newAction: Uint32Array,
+    addToStartOfQueue: boolean = false
+  ): void {
+    const oldActions = pendingOperations;
+    pendingOperations = new Uint32Array(oldActions.length + newAction.length);
+    if (addToStartOfQueue) {
+      pendingOperations.set(newAction);
+      pendingOperations.set(oldActions, newAction.length);
+    } else {
+      pendingOperations.set(oldActions);
+      pendingOperations.set(newAction, oldActions.length);
     }
   }
 
-  function enqueueMount(fiber) {
-    pendingEvents.push({
-      fiber: getPrimaryFiber(fiber),
-      data: getRendererDataFromFiber(fiber),
-      renderer: rendererID,
-      type: 'mount',
-    });
+  function flushPendingEvents(root: Object): void {
+    // Let the frontend know about tree operations.
+    hook.emit('operations', pendingOperations);
+    pendingOperations = new Uint32Array(0);
 
+    // Let the frontend know that we're done working on this root.
+    // Technically this could be inferred, but it's better to explicitly do this for the case of multi roots.
+    // Else the frontend would need to traverse the tree to identify which updates corresponded to which roots.
+    hook.emit('rootCommitted', getFiberID(getPrimaryFiber(root.current)));
+  }
+
+  function enqueueMount(fiber: Fiber, parentFiber: Fiber | null) {
     const isRoot = fiber.tag === HostRoot;
+    const id = getFiberID(getPrimaryFiber(fiber));
+
     if (isRoot) {
-      pendingEvents.push({
-        fiber: getPrimaryFiber(fiber),
-        renderer: rendererID,
-        type: 'root',
-      });
-    }
-  }
+      const operation = new Uint32Array(4);
+      operation[0] = TREE_OPERATION_ADD;
+      operation[1] = id;
+      operation[2] = ElementTypeRoot;
+      operation[3] = 0; // Identifies this fiber as a root
+      addOperation(operation);
+    } else {
+      const { displayName, key, type } = getDataForFiber(fiber);
 
-  function enqueueUpdateIfNecessary(fiber, hasChildOrderChanged) {
-    const data = getRendererDataFromFiber(fiber);
-
-    if (!hasChildOrderChanged && !hasDataChanged(fiber.alternate, fiber)) {
-      // If only timing information has changed, we still need to update the nodes.
-      // But we can do it in a faster way since we know it's safe to skip the children.
-      // It's also important to avoid emitting an "update" signal for the node in this case,
-      // Since that would indicate to the Profiler that it was part of the "commit" when it wasn't.
-      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
-        pendingEvents.push({
-          fiber: getPrimaryFiber(fiber),
-          data,
-          renderer: rendererID,
-          type: 'updateProfileTimes',
-        });
+      let encodedDisplayName = ((null: any): Uint8Array);
+      let encodedKey = ((null: any): Uint8Array);
+
+      if (displayName !== null) {
+        encodedDisplayName = utfEncodeString(displayName);
       }
-      return;
+
+      if (key !== null) {
+        if (typeof key === 'number') {
+          encodedKey = new Uint8Array(1);
+          encodedKey[0] = key;
+        } else {
+          encodedKey = utfEncodeString(key);
+        }
+      }
+
+      const encodedDisplayNameSize =
+        displayName === null ? 0 : encodedDisplayName.length;
+      const encodedKeySize = key === null ? 0 : encodedKey.length;
+
+      const operation = new Uint32Array(
+        6 + encodedDisplayNameSize + encodedKeySize
+      );
+      operation[0] = TREE_OPERATION_ADD;
+      operation[1] = id;
+      operation[2] = type;
+      operation[3] = getFiberID(getPrimaryFiber(parentFiber));
+      operation[4] = encodedDisplayNameSize;
+      if (displayName !== null) {
+        operation.set(encodedDisplayName, 5);
+      }
+      operation[5 + encodedDisplayNameSize] = encodedKeySize;
+      if (key !== null) {
+        operation.set(encodedKey, 5 + encodedDisplayNameSize + 1);
+      }
+      addOperation(operation);
     }
-    pendingEvents.push({
-      fiber: getPrimaryFiber(fiber),
-      data,
-      renderer: rendererID,
-      type: 'update',
-    });
   }
 
   function enqueueUnmount(fiber) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
-    const event = {
-      fiber: primaryFiber,
-      renderer: rendererID,
-      type: 'unmount',
-    };
     if (isRoot) {
-      pendingEvents.push(event);
-    } else {
+      const id = getFiberID(getPrimaryFiber(fiber));
+      const operation = new Uint32Array(2);
+      operation[0] = TREE_OPERATION_REMOVE;
+      operation[1] = id;
+      addOperation(operation);
+    } else if (!shouldFilterFiber(fiber)) {
       // Non-root fibers are deleted during the commit phase.
       // They are deleted in the child-first order. However
       // DevTools currently expects deletions to be parent-first.
       // This is why we unshift deletions rather than push them.
-      pendingEvents.unshift(event);
+      const id = getFiberID(getPrimaryFiber(fiber));
+      const operation = new Uint32Array(2);
+      operation[0] = TREE_OPERATION_REMOVE;
+      operation[1] = id;
+      addOperation(operation, true);
     }
     primaryFibers.delete(primaryFiber);
+    fiberToIDMap.delete(primaryFiber);
   }
 
-  function markRootCommitted(fiber) {
-    pendingEvents.push({
-      fiber: getPrimaryFiber(fiber),
-      data: getRendererDataFromFiber(fiber),
-      renderer: rendererID,
-      type: 'rootCommitted',
-    });
+  function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
+    const shouldEnqueueMount = !shouldFilterFiber(fiber);
+
+    if (shouldEnqueueMount) {
+      enqueueMount(fiber, parentFiber);
+    }
+
+    if (fiber.child !== null) {
+      mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber);
+    }
+
+    if (fiber.sibling) {
+      mountFiber(fiber.sibling, parentFiber);
+    }
   }
 
-  function mountFiber(fiber) {
-    // Depth-first.
-    // Logs mounting of children first, parents later.
-    let node = fiber;
-    outer: while (true) {
-      if (node.child) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-      enqueueMount(node);
-      if (node === fiber) {
-        return;
-      }
-      if (node.sibling) {
-        node.sibling.return = node.return;
-        node = node.sibling;
-        continue;
+  function enqueueUpdateIfNecessary(
+    fiber: Fiber,
+    hasChildOrderChanged: boolean
+  ) {
+    // The frontend only really cares about the displayName, key, and children.
+    // The first two don't really change, so we are only concerned with the order of children here.
+    // This is trickier than a simple comparison though, since certain types of fibers are filtered.
+    if (hasChildOrderChanged) {
+      const nextChildren: Array<number> = [];
+
+      // This is a naive implimentation that shallowly recurses children.
+      // We might want to revisit this if it proves to be too inefficient.
+      let child = fiber.child;
+      while (child !== null) {
+        findReorderedChildren(child, nextChildren);
+        child = child.sibling;
       }
-      while (node.return) {
-        node = node.return;
-        enqueueMount(node);
-        if (node === fiber) {
-          return;
-        }
-        if (node.sibling) {
-          node.sibling.return = node.return;
-          node = node.sibling;
-          continue outer;
-        }
+
+      const numChildren = nextChildren.length;
+      const operation = new Uint32Array(3 + numChildren);
+      operation[0] = TREE_OPERATION_RESET_CHILDREN;
+      operation[1] = getFiberID(getPrimaryFiber(fiber));
+      operation[2] = numChildren;
+      operation.set(nextChildren, 3);
+      addOperation(operation);
+    }
+
+    // TODO (profiling) If we're profiling, also check to see if that data has changed.
+  }
+
+  function findReorderedChildren(fiber: Fiber, nextChildren: Array<number>) {
+    if (!shouldFilterFiber(fiber)) {
+      nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
+    } else {
+      let child = fiber.child;
+      while (child !== null) {
+        findReorderedChildren(child, nextChildren);
+        child = child.sibling;
       }
-      return;
     }
   }
 
-  function updateFiber(nextFiber, prevFiber) {
+  function updateFiber(
+    nextFiber: Fiber,
+    prevFiber: Fiber,
+    parentFiber: Fiber | null
+  ) {
+    const shouldEnqueueUpdate = !shouldFilterFiber(nextFiber);
+
     // Suspense components only have a non-null memoizedState if they're timed-out.
     const isTimedOutSuspense =
       nextFiber.tag === ReactTypeOfWork.SuspenseComponent &&
@@ -574,15 +651,19 @@ export function attach(
       const primaryChildFragment = nextFiber.child;
       const fallbackChildFragment = primaryChildFragment.sibling;
       const fallbackChild = fallbackChildFragment.child;
+
       // The primary, hidden child is never actually updated in this case,
       // so we can skip any updates to its tree.
       // We only need to track updates to the Fallback UI for now.
       if (fallbackChild.alternate) {
-        updateFiber(fallbackChild, fallbackChild.alternate);
+        updateFiber(fallbackChild, fallbackChild.alternate, nextFiber);
       } else {
-        mountFiber(fallbackChild);
+        mountFiber(fallbackChild, nextFiber);
+      }
+
+      if (shouldEnqueueUpdate) {
+        enqueueUpdateIfNecessary(nextFiber, false);
       }
-      enqueueUpdateIfNecessary(nextFiber, false);
     } else {
       let hasChildOrderChanged = false;
       if (nextFiber.child !== prevFiber.child) {
@@ -597,7 +678,11 @@ export function attach(
           // We don't track deletions here because they are reported separately.
           if (nextChild.alternate) {
             const prevChild = nextChild.alternate;
-            updateFiber(nextChild, prevChild);
+            updateFiber(
+              nextChild,
+              prevChild,
+              shouldEnqueueUpdate ? nextFiber : parentFiber
+            );
             // However we also keep track if the order of the children matches
             // the previous order. They are always different referentially, but
             // if the instances line up conceptually we'll want to know that.
@@ -605,7 +690,10 @@ export function attach(
               hasChildOrderChanged = true;
             }
           } else {
-            mountFiber(nextChild);
+            mountFiber(
+              nextChild,
+              shouldEnqueueUpdate ? nextFiber : parentFiber
+            );
             if (!hasChildOrderChanged) {
               hasChildOrderChanged = true;
             }
@@ -623,7 +711,10 @@ export function attach(
           hasChildOrderChanged = true;
         }
       }
-      enqueueUpdateIfNecessary(nextFiber, hasChildOrderChanged);
+
+      if (shouldEnqueueUpdate) {
+        enqueueUpdateIfNecessary(nextFiber, hasChildOrderChanged);
+      }
     }
   }
 
@@ -632,12 +723,11 @@ export function attach(
   }
 
   function walkTree() {
+    // Hydrate all the roots for the first time.
     hook.getFiberRoots(rendererID).forEach(root => {
-      // Hydrate all the roots for the first time.
-      mountFiber(root.current);
-      markRootCommitted(root.current);
+      mountFiber(root.current, null);
+      flushPendingEvents(root);
     });
-    flushPendingEvents();
   }
 
   function handleCommitFiberUnmount(fiber) {
@@ -660,21 +750,20 @@ export function attach(
         current.memoizedState != null && current.memoizedState.element != null;
       if (!wasMounted && isMounted) {
         // Mount a new root.
-        mountFiber(current);
+        mountFiber(current, null);
       } else if (wasMounted && isMounted) {
         // Update an existing root.
-        updateFiber(current, alternate);
+        updateFiber(current, alternate, null);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
         enqueueUnmount(current);
       }
     } else {
       // Mount a new root.
-      mountFiber(current);
+      mountFiber(current, null);
     }
-    markRootCommitted(current);
     // We're done here.
-    flushPendingEvents();
+    flushPendingEvents(root);
   }
 
   // The naming is confusing.
diff --git a/src/backend/types.js b/src/backend/types.js
index 58cc727ffa5a..ab05c3c3073e 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -12,10 +12,9 @@ export type Fiber = Object;
 // TODO: If it's useful for the frontend to know which types of data an Element has
 // (e.g. props, state, context, hooks) then we could add a bitmask field for this
 // to keep the number of attributes small.
-export type RendererData = {|
+export type FiberData = {|
   key: React$Key | null,
   displayName: string | null,
-  children: Array<Fiber>,
   type: ElementType,
 |};
 
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 000000000000..bcaa8224fc99
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,5 @@
+// @flow
+
+export const TREE_OPERATION_ADD = 1;
+export const TREE_OPERATION_REMOVE = 2;
+export const TREE_OPERATION_RESET_CHILDREN = 3;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b168fbbf9c19..7d0575147af8 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -1,73 +1,83 @@
 // @flow
 
 import EventEmitter from 'events';
-
-import type { Element, ElementTreeMetadata } from './types';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_RESET_CHILDREN,
+} from '../constants';
+import { utfDecodeString } from '../utils';
+
+import type { Element, ElementType } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  console.log(`%cStore %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);
+  console.log(
+    `%cStore %c${methodName}`,
+    'color: green; font-weight: bold;',
+    'font-weight: bold;',
+    ...args
+  );
 };
 
 /**
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
-class Store extends EventEmitter {
-  _elementToElementTreeMetadata: WeakMap<
-    Element,
-    ElementTreeMetadata
-  > = new WeakMap();
-  _idToElement: Map<string, Element> = new Map();
-  _idToParentID: Map<string, string> = new Map();
-  _pendingDeletions: Set<string> = new Set();
+export default class Store extends EventEmitter {
+  // TODO Should items in this map be read-only for easier props comparison?
+  _idToElement: Map<number, Element> = new Map();
 
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
-  numElements: number = 0;
+  _numElements: number = 0;
 
   // This Array must be treated as immutable!
   // Passive effects will check it for changes between render and mount.
-  roots: $ReadOnlyArray<string> = [];
+  _roots: $ReadOnlyArray<number> = [];
 
   constructor(bridge: Bridge) {
     super();
 
-    bridge.on('root', this.onBridgeRoot);
+    bridge.on('operations', this.onBridgeOperations);
     bridge.on('rootCommitted', this.onBridgeRootCommitted);
+  }
+
+  get numElements(): number {
+    return this._numElements;
+  }
 
-    bridge.on('mount', this.onBridgeMount);
-    bridge.on('update', this.onBridgeUpdated);
-    bridge.on('unmount', this.onBridgeUnmounted);
+  get roots(): $ReadOnlyArray<number> {
+    return this._roots;
   }
 
-  getElementAtIndex(index: number): Element | null {
+  getElementAtIndex(index: number): Element {
     if (index < 0 || index >= this.numElements) {
-      return null;
+      throw Error(`Invalid index ${index} specified`);
     }
 
+    // Find wich root this element is in...
     let rootID;
     let root;
-
     let rootWeight = 0;
-    for (let i = 0; i < this.roots.length; i++) {
-      rootID = this.roots[i];
-      root = this._idToElement.get(rootID);
-      const { weight } = this._elementToElementTreeMetadata.get(root);
-
-      if (rootWeight + weight > index) {
+    for (let i = 0; i < this._roots.length; i++) {
+      rootID = this._roots[i];
+      root = ((this._idToElement.get(rootID): any): Element);
+      if (rootWeight + root.weight > index) {
         break;
+      } else {
+        rootWeight += root.weight;
       }
     }
 
-    let currentElement = root;
+    // Crawl the tree to find the correct root...
+    let currentElement = ((root: any): Element);
     let currentWeight = 0;
-
     while (index !== currentWeight) {
       for (let i = 0; i < currentElement.children.length; i++) {
         const childID = currentElement.children[i];
-        const child = this._idToElement.get(childID);
-        const { weight } = this._elementToElementTreeMetadata.get(child);
+        const child = ((this._idToElement.get(childID): any): Element);
+        const { weight } = child;
         if (index <= currentWeight + weight) {
           currentWeight++;
           currentElement = child;
@@ -78,207 +88,191 @@ class Store extends EventEmitter {
       }
     }
 
-    return currentElement;
-  }
-
-  getElementByID(id: string) {
-    return this._idToElement.get(id);
-  }
-
-  geParent(id: string) {
-    return this._idToParentID.get(id);
-  }
-
-  getTreeMetadataForElement(element: Element) {
-    return this._elementToElementTreeMetadata.get(element);
+    return ((currentElement: any): Element);
   }
 
-  _crawlForTreeMetadata(id: string, depth: number = 0): number {
-    let weight = 1;
-
+  getElementByID(id: number): Element {
     const element = this._idToElement.get(id);
 
-    // TODO: Figure out why sometimes items aren't being sent across the bridge.
-    // It always seems to be one of the ListItems...
     if (element == null) {
-      console.log(`%cNo element found for id "${id}"`, 'background-color: yellow; font-weight: bold;');
-      return 0;
+      throw Error(`No element found with id "${id}`);
     }
 
-    element.children.forEach(childID => {
-      weight += this._crawlForTreeMetadata(childID, depth + 1);
-    });
-
-    this._elementToElementTreeMetadata.set(element, {
-      depth,
-      weight,
-    });
-
-    return weight;
+    return ((element: any): Element);
   }
 
-  _updateElementTreeMetadata(prevElement: Element, element: Element): void {
-    if (prevElement.children === element.children) {
-      return;
-    }
-
-    // Compare children in case they have changed.
-    // For each child that was removed, we need to shrink the list by this many elements.
-    // For each child that was added, we need to grow the list by this many elements.
-
-    const prevChildren = prevElement.children;
-    const prevNumChildren = prevChildren.length;
-
-    const children = element.children;
-    const numChildren = children.length;
-
-    // TODO: The below diffing could be optimized more.
-
-    // Scan for deletions
-    for (let i = 0; i < prevNumChildren; i++) {
-      const childID = prevChildren[i];
-      if (!children.includes(childID)) {
-        const child = this._idToElement.get(childID);
-        const { weight } = this._elementToElementTreeMetadata.get(child);
-
-        this.numElements -= weight;
-
-        let current = element;
-        while (current !== null) {
-          const datum = this._elementToElementTreeMetadata.get(current);
-          datum.weight -= weight;
+  onBridgeOperations = (operations: Uint32Array) => {
+    debug('onBridgeOperations', operations);
+
+    let haveRootsChanged = false;
+
+    let i = 0;
+    while (i < operations.length) {
+      let id: number = ((null: any): number);
+      let element: Element = ((null: any): Element);
+      let parentID: number = ((null: any): number);
+      let parentElement: Element = ((null: any): Element);
+      let type: ElementType = ((null: any): ElementType);
+      let weightDelta: number = 0;
+
+      const operation = operations[i];
+
+      switch (operation) {
+        case TREE_OPERATION_ADD:
+          id = ((operations[i + 1]: any): number);
+          type = ((operations[i + 2]: any): ElementType);
+          parentID = ((operations[i + 3]: any): number);
+
+          i = i + 4;
+
+          if (parentID === 0) {
+            debug('Add', `new root fiber ${id}`);
+
+            this._roots = this._roots.concat(id);
+
+            this._idToElement.set(id, {
+              children: [],
+              depth: 0,
+              displayName: null,
+              id,
+              key: null,
+              parentID: 0,
+              type,
+              weight: 1,
+            });
+
+            haveRootsChanged = true;
+          } else {
+            const displayNameLength = operations[i];
+            i++;
+            const displayName =
+              displayNameLength === 0
+                ? null
+                : utfDecodeString(
+                    (operations.slice(i, i + displayNameLength): any)
+                  );
+            i += displayNameLength;
+
+            const keyLength = operations[i];
+            i++;
+            const key =
+              keyLength === 0
+                ? null
+                : utfDecodeString((operations.slice(i, i + keyLength): any));
+            i += +keyLength;
+
+            debug('Add', `fiber ${id}, type ${type}, as child of ${parentID}`);
+
+            // TODO Fix this; there should not be duplicate "ADD" operations for a given element.
+            if (this._idToElement.has(id)) {
+              console.warn(
+                `fiber ${id}, type ${type}, already added as child of ${parentID}`
+              );
+            } else {
+              parentElement = ((this._idToElement.get(parentID): any): Element);
+              parentElement.children = parentElement.children.concat(id);
+
+              this._idToElement.set(id, {
+                children: [],
+                depth: parentElement.depth + 1,
+                displayName,
+                id,
+                key,
+                parentID: parentElement.id,
+                type,
+                weight: 1,
+              });
+
+              weightDelta = 1;
+            }
+          }
+          break;
+        case TREE_OPERATION_REMOVE:
+          id = ((operations[i + 1]: any): number);
 
-          const parent = this._idToElement.get(datum.parentID);
-          current =
-            parent != null
-              ? this._elementToElementTreeMetadata.get(parent)
-              : null;
-        }
-      }
-    }
+          i = i + 2;
 
-    // Scan for additions
-    for (let i = 0; i < numChildren; i++) {
-      const childID = children[i];
-      if (!prevChildren.includes(childID)) {
-        const child = this._idToElement.get(childID);
-        const { depth } = this._elementToElementTreeMetadata.get(element);
-        const weight = this._crawlForTreeMetadata(
-          childID,
-          depth + 1
-        );
-
-        this.numElements += weight;
-
-        let current = element;
-        while (current !== null) {
-          const datum = this._elementToElementTreeMetadata.get(current);
-          datum.weight += weight;
-
-          const parent = this._idToElement.get(datum.parentID);
-          current =
-            parent != null
-              ? this._elementToElementTreeMetadata.get(parent)
-              : null;
-        }
-      }
-    }
-  }
+          debug('Remove', `fiber ${id} from tree`);
 
-__printTree() {
-  let i = 0;
-  this.roots.forEach(rootID => {
-    const root = this._idToElement.get(rootID);
-    const { weight } = this._elementToElementTreeMetadata.get(root);
-    for (let j = i; j < i  + weight; j++) {
-      const element = this.getElementAtIndex(j)
-      const { depth } = this._elementToElementTreeMetadata.get(element);
+          element = ((this._idToElement.get(id): any): Element);
+          parentID = element.parentID;
 
-      console.log('  '.repeat(depth) + element.displayName);
-    }
-    i += weight;
-  });
-}
+          weightDelta = -element.weight;
 
-  onBridgeMount = (element: Element) => {
-    const { id } = element;
-    debug('onBridgeMount()', element);
-    this._idToElement.set(id, element);
+          this._idToElement.delete(id);
 
-    element.children.forEach(childID => {
-      this._idToParentID.set(childID, id);
-    });
+          parentElement = ((this._idToElement.get(parentID): any): Element);
+          if (parentElement != null) {
+            parentElement.children = parentElement.children.filter(
+              childID => childID !== id
+            );
+          }
+          break;
+        case TREE_OPERATION_RESET_CHILDREN:
+          id = ((operations[i + 1]: any): number);
+          const numChildren = ((operations[i + 2]: any): number);
+          const children = ((operations.slice(
+            i + 3,
+            i + 3 + numChildren
+          ): any): Array<number>);
 
-    this.emit(id);
-  };
+          i = i + 3 + numChildren;
 
-  onBridgeRoot = (id: string) => {
-    debug('onBridgeRoot()', id);
-    if (!this.roots.includes(id)) {
-      this.roots = this.roots.concat(id);
+          debug('Re-order', `fiber ${id} children ${children.join(',')}`);
 
-      // Generate tree metadata used for windowing.
-      this.numElements += this._crawlForTreeMetadata(id);
+          element = ((this._idToElement.get(id): any): Element);
+          element.children = children;
 
-      this.emit('roots');
-    }
-  };
+          const prevWeight = element.weight;
+          let childWeight = 0;
 
-  onBridgeRootCommitted = (rootID: string) => {
-    this._pendingDeletions.forEach(id => {
-      this._idToElement.delete(id);
+          children.forEach(childID => {
+            const child = ((this._idToElement.get(childID): any): Element);
+            childWeight += child.weight;
+          });
 
-      if (this._idToParentID.has(id)) {
-        this._idToParentID.delete(id);
+          element.weight = childWeight + 1;
+          weightDelta = childWeight + 1 - prevWeight;
+          break;
+        default:
+          throw Error(`Unsupported Bridge operation ${operation}`);
       }
-    });
-    this._pendingDeletions.clear();
-
-    debug('onBridgeRootCommitted()', rootID);
-    this.emit('rootCommitted', rootID);
-
-this.__printTree();
-  };
-
-  // TODO: Unmounting removes id-to-element before crawling, which breaks it.
-  // Should I just ditch the idea of a WeakMap in favor of an explicit it-to-metadata mapping like with parents?
-  onBridgeUnmounted = (id: string) => {
-    debug('onBridgeUnmounted()', id);
-    this._pendingDeletions.add(id);
 
-    const index = this.roots.indexOf(id);
-    if (index >= 0) {
-      this.roots = this.roots
-        .slice(0, index)
-        .concat(this.roots.slice(index + 1));
+      this._numElements += weightDelta;
 
-      const root = this._idToElement.get(id);
-      const {weight} = this._elementToElementTreeMetadata.get(root);
-
-      this.numElements -= weight;
+      while (parentElement != null) {
+        parentElement.weight += weightDelta;
+        parentElement = ((this._idToElement.get(
+          parentElement.parentID
+        ): any): Element);
+      }
+    }
 
+    if (haveRootsChanged) {
       this.emit('roots');
     }
   };
 
-  onBridgeUpdated = (element: Element) => {
-    const { id } = element;
-    debug('onBridgeUpdated()', element);
+  onBridgeRootCommitted = (rootID: number) => {
+    debug('onBridgeRootCommitted', rootID);
 
-    const prevElement = ((this._idToElement.get(id): any): Element);
-    const prevElementTreeMetadata = ((this._elementToElementTreeMetadata.get(prevElement): any): ElementTreeMetadata);
+    this.emit('rootCommitted');
 
-    this._idToElement.set(id, element);
-    this._elementToElementTreeMetadata.set(
-      element,
-      prevElementTreeMetadata
-    );
-
-    // Update tree metadata used for windowing.
-    this._updateElementTreeMetadata(prevElement, element);
+    // this.__printTree(rootID);
+  };
 
-    this.emit(id);
+  // DEBUG
+  __printTree = (rootID: number) => {
+    const printElement = (id: number) => {
+      const element = ((this._idToElement.get(id): any): Element);
+      console.log(
+        `${'  '.repeat(element.depth)}${element.id}:${element.displayName ||
+          ''}${element.key ? `key:"${element.key}"` : ''} (${element.weight})`
+      );
+      element.children.forEach(printElement);
+    };
+    const root = ((this._idToElement.get(rootID): any): Element);
+    console.log('printing root:', rootID);
+    root.children.forEach(printElement);
   };
 }
-
-export default Store;
diff --git a/src/devtools/types.js b/src/devtools/types.js
index c8cc329b4171..a077523611ed 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import typeof Store from './Store';
+import Store from './Store';
 
 export const ElementTypeClassOrFunction = 1;
 export const ElementTypeContext = 2;
@@ -8,28 +8,26 @@ export const ElementTypeForwardRef = 3;
 export const ElementTypeMemo = 4;
 export const ElementTypeOtherOrUnknown = 5;
 export const ElementTypeProfiler = 6;
-export const ElementTypeSuspense = 7;
+export const ElementTypeRoot = 7;
+export const ElementTypeSuspense = 8;
 
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 // TODO: Add profiling node
 
 export type Element = {|
-  id: string,
-  type: ElementType,
-  key: React$Key | null,
-  displayName: string | null,
-  children: Array<string>,
-|};
-
-export type ElementTreeMetadata = {|
+  children: Array<number>,
   depth: number,
-  rootID: string,
+  displayName: string | null,
+  id: number,
+  key: number | string | null,
+  parentID: number,
+  type: ElementType,
   weight: number,
 |};
 
 export type InspectedElement = {|
-  id: string,
+  id: number,
   context: Object | null,
   hooks: Object | null,
   props: Object | null,
@@ -38,7 +36,7 @@ export type InspectedElement = {|
   source: Object,
 |};
 
-export type TreeContext = {|
+export type TreeMetadataType = {|
   size: number,
   store: Store,
-|};
\ No newline at end of file
+|};
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 09cc97c90219..4eb88a2c472b 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -5,13 +5,13 @@ import { TreeContext } from './contexts';
 
 import styles from './Element.css';
 
-type Props = {|
+type Props = {
   index: number,
   style: Object,
-|};
+};
 
 export default function Element({ index, style }: Props) {
-  const {store} = useContext(TreeContext);
+  const { store } = useContext(TreeContext);
   const element = store.getElementAtIndex(index);
 
   // DevTools are rendered in concurrent mode.
@@ -22,10 +22,7 @@ export default function Element({ index, style }: Props) {
     return null;
   }
 
-  const elementTreeMetadata = store.getTreeMetadataForElement(element);
-
-  const { children, displayName, key } = element;
-  const { depth } = elementTreeMetadata;
+  const { children, depth, displayName, key } = element;
 
   // TODO: Add state for toggling element open/close
 
@@ -34,7 +31,7 @@ export default function Element({ index, style }: Props) {
       className={styles.Element}
       style={{
         ...style,
-        paddingLeft: `${1 + depth}rem`
+        paddingLeft: `${1 + depth}rem`,
       }}
     >
       {children.length > 0 && <span className={styles.ArrowOpen} />}
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 6f6619661d79..60afcc048c3a 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -15,12 +15,12 @@ export type Props = {|
 |};
 
 export default function Elements({ bridge, browserName, themeName }: Props) {
-  const store = useMemo(() => new Store(bridge), []);
+  const store = useMemo<Store>(() => new Store(bridge), []);
 
-  const [treeContext, setTreeContext] = useState(({
+  const [treeContext, setTreeContext] = useState({
     size: store.numElements,
     store,
-  }));
+  });
 
   useLayoutEffect(() => {
     const handler = () => {
diff --git a/src/devtools/views/contexts.js b/src/devtools/views/contexts.js
index f7428d3fc665..5e2b1be93eac 100644
--- a/src/devtools/views/contexts.js
+++ b/src/devtools/views/contexts.js
@@ -2,10 +2,12 @@
 
 import { createContext } from 'react';
 
-import type { TreeMetadata } from '../types';
+import type { TreeMetadataType } from '../types';
 
 import Store from '../store';
 
 export const RootsContext = createContext<Array<string>>([]);
 export const StoreContext = createContext<Store>(((null: any): Store));
-export const TreeContext = createContext<TreeMetadata>(((null: any): TreeMetadata));
\ No newline at end of file
+export const TreeContext = createContext<TreeMetadataType>(
+  ((null: any): TreeMetadataType)
+);
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 9576528afa88..4fb62d4d9e86 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -2,14 +2,14 @@
 
 import { useLayoutEffect, useState } from 'react';
 
-import type { Element, ElementTreeMetadata } from '../types';
+import type { Element } from '../types';
 import Store from '../store';
 
 // TODO useEffect has a bug where sometimes subscriptions don't get cleaned up correctly.
 // Potentially related to github.com/facebookincubator/redux-react-hook/issues/17
 // As a temporary work around, switch back to layout effect.
 
-export function useElement(store: Store, id: string): ?Element {
+export function useElement(store: Store, id: number): ?Element {
   const [element, setElement] = useState<?Element>(store.getElementByID(id));
 
   useLayoutEffect(() => {
@@ -17,7 +17,7 @@ export function useElement(store: Store, id: string): ?Element {
       setElement(((store.getElementByID(id): any): Element));
 
     // Listen for changes to the element.
-    store.addListener(id, handler);
+    store.addListener((id: any), handler);
 
     // Check for changes that may have happened between render and mount.
     const newElement = store.getElementByID(id);
@@ -26,14 +26,14 @@ export function useElement(store: Store, id: string): ?Element {
     }
 
     // Remove event listener on unmount.
-    return () => store.removeListener(id, handler);
+    return () => store.removeListener((id: any), handler);
   }, [store, id]);
 
   return element;
 }
 
-export function useRoots(store: Store): $ReadOnlyArray<string> {
-  const [roots, setRoots] = useState<$ReadOnlyArray<string>>(store.roots);
+export function useRoots(store: Store): $ReadOnlyArray<number> {
+  const [roots, setRoots] = useState<$ReadOnlyArray<number>>(store.roots);
 
   useLayoutEffect(() => {
     const handler = () => setRoots(store.roots);
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 000000000000..9f7e11652752
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,19 @@
+// @flow
+
+export function utfDecodeString(array: Uint8Array): string {
+  let string = '';
+  const { length } = array;
+  for (let i = 0; i < length; i++) {
+    string += String.fromCharCode(array[i]);
+  }
+  return string;
+}
+
+export function utfEncodeString(string: string): Uint8Array {
+  const array = new Uint8Array(string.length);
+  const { length } = string;
+  for (let i = 0; i < length; i++) {
+    array[i] = string.charCodeAt(i);
+  }
+  return array;
+}
diff --git a/yarn.lock b/yarn.lock
index 188fbf67a9bb..7a18f52559cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8422,10 +8422,10 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.0.tgz#3e56b720b97666bce38a9e932bdd238d56e258f1"
-  integrity sha512-55WeZKjMNF5JdCuKghc/H65DBecoeGgH8MOX3CgT7BJ66xb4ITRuXPUlz0qU6r50wetdF/oLhorYBRvKD4Z1IQ==
+react-window@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.1.tgz#9d68624d5ba58ddf331321fb74b0a75184523d16"
+  integrity sha512-D855yW104ek8+gSLW8G6Dt69WnhSlGXR4Ld+IoZW4aQg6a1pt7cZLb+fcOugVDVgl4RfrLSfg9aLBnvS7zsOaw==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one "^3.1.1"

From fdfadef9289f2c69e02bbfbcc78db4dca11ce45a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Jan 2019 13:17:37 -0800
Subject: [PATCH 010/814] Refactored bridge to support transferrables (e.g.
 typed array buffers) and added transferable param to postMessage for op codes

---
 shells/browser/chrome/test.js        |  2 +-
 shells/browser/firefox/test.js       |  2 +-
 shells/browser/shared/src/backend.js |  7 ++---
 shells/browser/shared/src/panel.js   |  4 +--
 shells/dev/src/backend.js            |  4 +--
 shells/dev/src/devtools.js           |  4 +--
 src/backend/agent.js                 |  2 +-
 src/bridge.js                        | 39 ++++++++--------------------
 src/devtools/store.js                |  5 ++++
 src/types.js                         |  2 +-
 10 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/shells/browser/chrome/test.js b/shells/browser/chrome/test.js
index 9b9bbbf98f44..c010a3c319dd 100644
--- a/shells/browser/chrome/test.js
+++ b/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, {
diff --git a/shells/browser/firefox/test.js b/shells/browser/firefox/test.js
index 850d87c0f723..7dd8d1e65b63 100644
--- a/shells/browser/firefox/test.js
+++ b/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 () => {
diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index fa13e0252775..a0a44850b221 100644
--- a/shells/browser/shared/src/backend.js
+++ b/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
       );
     },
   });
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index fd3361764bcf..67f0584dc0d1 100644
--- a/shells/browser/shared/src/panel.js
+++ b/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);
     },
   });
 
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 3901c8fc19c4..f5b029eef9d1 100644
--- a/shells/dev/src/backend.js
+++ b/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);
   },
 });
 
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 3ced5923ca24..6a43284c336e 100644
--- a/shells/dev/src/devtools.js
+++ b/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);
         },
       });
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 89f13dfe5110..c9dd022f151d 100644
--- a/src/backend/agent.js
+++ b/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) => {
diff --git a/src/bridge.js b/src/bridge.js
index cf63cb83008f..fffb1236280b 100644
--- a/src/bridge.js
+++ b/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;
   }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 7d0575147af8..1661b0c2286a 100644
--- a/src/devtools/store.js
+++ b/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;
diff --git a/src/types.js b/src/types.js
index c7af7c99a7bb..84b0b3045ba3 100644
--- a/src/types.js
+++ b/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,
 |};

From fc4af4d0188ecea769ad25bcd510d9328726ce41 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Jan 2019 13:48:35 -0800
Subject: [PATCH 011/814] Fixed text wrap bug in extension panel

---
 src/backend/agent.js           | 15 +++++++++------
 src/constants.js               |  2 ++
 src/devtools/store.js          | 15 +++++++++------
 src/devtools/views/Element.css |  1 +
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index c9dd022f151d..6d7b1a3c03d7 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,17 +1,20 @@
 // @flow
 
 import EventEmitter from 'events';
+import { __DEBUG__ } from '../constants';
 
 import type { RendererID, RendererInterface } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  console.log(
-    `%cAgent %c${methodName}`,
-    'color: purple; font-weight: bold;',
-    'font-weight: bold;',
-    ...args
-  );
+  if (__DEBUG__) {
+    console.log(
+      `%cAgent %c${methodName}`,
+      'color: purple; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
 };
 
 export default class Agent extends EventEmitter {
diff --git a/src/constants.js b/src/constants.js
index bcaa8224fc99..dcbe8aa5856f 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,3 +3,5 @@
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
+
+export const __DEBUG__ = false;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1661b0c2286a..69bc8f6b9888 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -7,17 +7,20 @@ import {
   TREE_OPERATION_RESET_CHILDREN,
 } from '../constants';
 import { utfDecodeString } from '../utils';
+import { __DEBUG__ } from '../constants';
 
 import type { Element, ElementType } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  console.log(
-    `%cStore %c${methodName}`,
-    'color: green; font-weight: bold;',
-    'font-weight: bold;',
-    ...args
-  );
+  if (__DEBUG__) {
+    console.log(
+      `%cStore %c${methodName}`,
+      'color: green; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
 };
 
 /**
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 90cb2076123d..3a33050ceb1c 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -3,6 +3,7 @@
   border-radius: 0.25em;
   cursor: pointer;
   position: relative;
+  white-space: nowrap;
 }
 .Element:hover {
   background-color: var(--color-state03);

From f542f879d61ecc0dacc9dee350a099990ecea6b4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Jan 2019 14:04:00 -0800
Subject: [PATCH 012/814] Added inline comments for types

---
 src/devtools/types.js | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/devtools/types.js b/src/devtools/types.js
index a077523611ed..904a415ad190 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -11,31 +11,57 @@ export const ElementTypeProfiler = 6;
 export const ElementTypeRoot = 7;
 export const ElementTypeSuspense = 8;
 
+// Different types of elements displayed in the Elements tree.
+// These types may be used to visually distinguish types,
+// or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
-// TODO: Add profiling node
-
+// Each element on the frontend corresponds to a Fiber on the backend.
+// Some of its information (e.g. id, type, displayName) come from the backend.
+// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
+// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
 export type Element = {|
-  children: Array<number>,
-  depth: number,
-  displayName: string | null,
   id: number,
-  key: number | string | null,
   parentID: number,
+  children: Array<number>,
   type: ElementType,
+  displayName: string | null,
+  key: number | string | null,
+
+  // How many levels deep within the tree is this element?
+  // This determines how much indentation (left padding) should be used in the Elements tree.
+  depth: number,
+
+  // How many nodes (including itself) are below this Element within the tree.
+  // This property is used to quickly determine the total number of Elements,
+  // and the Element at any given index (for windowing purposes).
   weight: number,
 |};
 
 export type InspectedElement = {|
   id: number,
+
+  // Does the current renderer support editable props/state/hooks?
+  canEditValues: boolean,
+
+  // Inspectable properties.
   context: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
-  canEditProps: boolean,
+
+  // List of owners
+  owners: Array<number>,
+
+  // Location of component in source coude.
   source: Object,
 |};
 
+// TODO: Add profiling type
+
+// The frontend Store is mutable.
+// This wrapper object is recreated whenever the store's tree is mutated.
+// It is used to trigger a re-render of the virtualized Elements tree.
 export type TreeMetadataType = {|
   size: number,
   store: Store,

From 1f46df66cb753a8549bd852364f408054b1bd336 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 10:38:52 -0800
Subject: [PATCH 013/814] Tidying up

---
 shells/browser/shared/webpack.backend.js |  3 +--
 shells/browser/shared/webpack.config.js  |  3 +--
 src/backend/renderer.js                  | 32 ++++++++++++++++++++++++
 src/devtools/store.js                    | 15 ++++++-----
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index 59e0b617bcab..d09dc87c4ec2 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,8 +1,7 @@
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 
-//const __DEV__ = process.env.NODE_ENV !== 'production';
-const __DEV__ = true; // TODO
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 933d7a79ce99..b5984117ea87 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -2,8 +2,7 @@ const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const webpack = require('webpack');
 
-//const __DEV__ = process.env.NODE_ENV !== 'production';
-const __DEV__ = true; // TODO
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1d1392f7a846..815225a2bc5c 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -14,6 +14,7 @@ import {
 import { utfEncodeString } from '../utils';
 import { getDisplayName } from './utils';
 import {
+  __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
@@ -186,6 +187,31 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
+  const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
+    if (__DEBUG__) {
+      const fiberData = getDataForFiber(fiber);
+      const fiberDisplayName = (fiberData && fiberData.displayName) || 'null';
+      const parentFiberData =
+        parentFiber == null ? null : getDataForFiber(parentFiber);
+      const parentFiberDisplayName =
+        (parentFiberData && parentFiberData.displayName) || 'null';
+      console.log(
+        `[renderer] %c${name} %c${getFiberID(
+          getPrimaryFiber(fiber)
+        )}:${fiberDisplayName} %c${
+          parentFiber
+            ? getFiberID(getPrimaryFiber(parentFiber)) +
+              ':' +
+              parentFiberDisplayName
+            : ''
+        }`,
+        'color: red; font-weight: bold;',
+        'color: blue;',
+        'color: purple;'
+      );
+    }
+  };
+
   const primaryFibers: WeakSet<Fiber> = new WeakSet();
 
   // Keep this function in sync with getDataForFiber()
@@ -571,6 +597,8 @@ export function attach(
   }
 
   function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
+    debug('mountFiber()', fiber, parentFiber);
+
     const shouldEnqueueMount = !shouldFilterFiber(fiber);
 
     if (shouldEnqueueMount) {
@@ -590,6 +618,8 @@ export function attach(
     fiber: Fiber,
     hasChildOrderChanged: boolean
   ) {
+    debug('enqueueUpdateIfNecessary()', fiber);
+
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -633,6 +663,8 @@ export function attach(
     prevFiber: Fiber,
     parentFiber: Fiber | null
   ) {
+    debug('enqueueUpdateIfNecessary()', nextFiber, parentFiber);
+
     const shouldEnqueueUpdate = !shouldFilterFiber(nextFiber);
 
     // Suspense components only have a non-null memoizedState if they're timed-out.
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 69bc8f6b9888..5686e3eb741a 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -28,7 +28,8 @@ const debug = (methodName, ...args) => {
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter {
-  // TODO Should items in this map be read-only for easier props comparison?
+  // TODO Should items in this map be read-only/immutable for easier props comparison?
+  //      We currently mutate "children" and "weight" props.
   _idToElement: Map<number, Element> = new Map();
 
   // Total number of visible elements (within all roots).
@@ -169,13 +170,15 @@ export default class Store extends EventEmitter {
                 : utfDecodeString((operations.slice(i, i + keyLength): any));
             i += +keyLength;
 
-            debug('Add', `fiber ${id}, type ${type}, as child of ${parentID}`);
+            debug(
+              'Add',
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+            );
 
-            // TODO Fix this; there should not be duplicate "ADD" operations for a given element.
             if (this._idToElement.has(id)) {
-              console.warn(
-                `fiber ${id}, type ${type}, already added as child of ${parentID}`
-              );
+              // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
+              // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
+              // Maybe in the future we'll revisit this.
             } else {
               parentElement = ((this._idToElement.get(parentID): any): Element);
               parentElement.children = parentElement.children.concat(id);

From 037071c0e11fbf9e5626e95cab8ac3e1d7284659 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 10:41:53 -0800
Subject: [PATCH 014/814] Remove root from "roots" list on unmount

---
 src/devtools/store.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5686e3eb741a..d5560865acf8 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -213,7 +213,9 @@ export default class Store extends EventEmitter {
           this._idToElement.delete(id);
 
           parentElement = ((this._idToElement.get(parentID): any): Element);
-          if (parentElement != null) {
+          if (parentElement == null) {
+            this._roots = this._roots.filter(rootID => rootID !== id);
+          } else {
             parentElement.children = parentElement.children.filter(
               childID => childID !== id
             );

From a60c8e139a599d3856b727a0af1f226c8bdec49c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 10:49:50 -0800
Subject: [PATCH 015/814] Renamed app.js to App.js for consistency

---
 shells/dev/app/{app.js => App.js} | 0
 shells/dev/src/devtools.js        | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename shells/dev/app/{app.js => App.js} (100%)

diff --git a/shells/dev/app/app.js b/shells/dev/app/App.js
similarity index 100%
rename from shells/dev/app/app.js
rename to shells/dev/app/App.js
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 6a43284c336e..dce50fb9a47d 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -69,7 +69,7 @@ initDevTools({
   },
 });
 
-inject('./build/app.js');
+inject('./build/App.js');
 
 function inject(sourcePath, callback) {
   const script = contentDocument.createElement('script');

From 6d37857df3a21dd0fabdedee3f155d2607271ebc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 11:31:13 -0800
Subject: [PATCH 016/814] Fixed an Array type bug in Store

---
 src/devtools/store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index d5560865acf8..2471c7b9a1f3 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -234,7 +234,7 @@ export default class Store extends EventEmitter {
           debug('Re-order', `fiber ${id} children ${children.join(',')}`);
 
           element = ((this._idToElement.get(id): any): Element);
-          element.children = children;
+          element.children = Array.from(children);
 
           const prevWeight = element.weight;
           let childWeight = 0;

From ca6151ca01def24d5be6e1d9f3fdc10cdcc49af4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 14:16:55 -0800
Subject: [PATCH 017/814] Reload extension on navigate

---
 shells/browser/shared/src/panel.js | 71 +++++++++++++++++++++---------
 src/backend/agent.js               |  2 +
 src/backend/index.js               |  3 ++
 src/devtools/views/Elements.js     |  6 ++-
 4 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index 67f0584dc0d1..c1e837ed4a5d 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import Bridge from 'src/bridge';
 import Elements from 'src/devtools/views/Elements';
 import inject from './inject';
@@ -36,27 +36,56 @@ if (IS_CHROME) {
 
 const node = ((document.getElementById('container'): any): HTMLElement);
 
-inject(chrome.runtime.getURL('build/backend.js'), () => {
-  let disconnected = false;
+function reloadDevTools() {
+  setTimeout(() => {
+    unmountComponentAtNode(node);
 
-  const port = chrome.runtime.connect({
-    name: '' + chrome.devtools.inspectedWindow.tabId,
-  });
-  port.onDisconnect.addListener(() => {
-    disconnected = true;
-  });
+    node.innerHTML = '';
+
+    injectAndInit();
+  }, 100);
+}
+
+function injectAndInit() {
+  inject(chrome.runtime.getURL('build/backend.js'), () => {
+    let disconnected = false;
 
-  const bridge = new Bridge({
-    listen(fn) {
-      port.onMessage.addListener(message => fn(message));
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      if (disconnected) {
-        return;
-      }
-      port.postMessage({ event, payload }, transferable);
-    },
+    const port = chrome.runtime.connect({
+      name: '' + chrome.devtools.inspectedWindow.tabId,
+    });
+    port.onDisconnect.addListener(() => {
+      disconnected = true;
+    });
+
+    const bridge = new Bridge({
+      listen(fn) {
+        port.onMessage.addListener(message => fn(message));
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        if (disconnected) {
+          return;
+        }
+        port.postMessage({ event, payload }, transferable);
+      },
+    });
+
+    // Reload the DevTools extension when the user navigates to a new page.
+    function onNavigated() {
+      chrome.devtools.network.onNavigated.removeListener(onNavigated);
+      bridge.send('shutdown');
+      reloadDevTools();
+    }
+    chrome.devtools.network.onNavigated.addListener(onNavigated);
+
+    render(
+      createElement(Elements, {
+        bridge,
+        browserName,
+        themeName,
+      }),
+      node
+    );
   });
+}
 
-  render(createElement(Elements, { bridge, browserName, themeName }), node);
-});
+injectAndInit();
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 6d7b1a3c03d7..d33a59432175 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -24,6 +24,8 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    bridge.on('shutdown', () => this.emit('shutdown'));
+
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
   }
diff --git a/src/backend/index.js b/src/backend/index.js
index a634b9c8aabd..029bd655c407 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -43,6 +43,9 @@ export function initBackend(hook: Hook, agent: Agent): void {
   hook.reactDevtoolsAgent = agent;
   agent.addListener('shutdown', () => {
     subs.forEach(fn => fn());
+    for (let id in hook.rendererInterfaces) {
+      hook.rendererInterfaces[id].cleanup();
+    }
     hook.reactDevtoolsAgent = null;
   });
 }
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 60afcc048c3a..abf2829daefc 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -14,7 +14,11 @@ export type Props = {|
   themeName: string,
 |};
 
-export default function Elements({ bridge, browserName, themeName }: Props) {
+export default function Elements({
+  bridge,
+  browserName,
+  themeName,
+}: Props) {
   const store = useMemo<Store>(() => new Store(bridge), []);
 
   const [treeContext, setTreeContext] = useState({

From 6363fc0767d17db1764557e83ad3227d2aea65c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Jan 2019 14:39:37 -0800
Subject: [PATCH 018/814] Tweaked error message to provide more helpful info if
 shown

---
 src/devtools/store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 2471c7b9a1f3..c510d22030c8 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -57,7 +57,7 @@ export default class Store extends EventEmitter {
 
   getElementAtIndex(index: number): Element {
     if (index < 0 || index >= this.numElements) {
-      throw Error(`Invalid index ${index} specified`);
+      throw Error(`Invalid index ${index} specified; store contains ${this.numElements} items.`);
     }
 
     // Find wich root this element is in...

From 62f8c985df0e4ce884f24b2e10d8b53a8c1be0ea Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 09:42:07 -0800
Subject: [PATCH 019/814] Added stub search row (not connected to anythign yet)

---
 src/devtools/store.js           |  6 ++-
 src/devtools/views/Elements.css | 88 ++++++++++++++++++---------------
 src/devtools/views/Elements.js  | 34 ++++++++++---
 src/devtools/views/Tree.js      |  2 +-
 src/devtools/views/root.css     | 42 ++++++++++++++++
 5 files changed, 123 insertions(+), 49 deletions(-)
 create mode 100644 src/devtools/views/root.css

diff --git a/src/devtools/store.js b/src/devtools/store.js
index c510d22030c8..9f318041c3cf 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -57,7 +57,11 @@ export default class Store extends EventEmitter {
 
   getElementAtIndex(index: number): Element {
     if (index < 0 || index >= this.numElements) {
-      throw Error(`Invalid index ${index} specified; store contains ${this.numElements} items.`);
+      throw Error(
+        `Invalid index ${index} specified; store contains ${
+          this.numElements
+        } items.`
+      );
     }
 
     // Find wich root this element is in...
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index 98a332e0ae72..0cd3d4480f33 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -1,50 +1,56 @@
-:root {
-  /* TODO */
-  --color-base00: #ffffff;
-  --color-base01: #f3f3f3;
-  --color-base02: #eeeeee;
-  --color-base03: #dadada;
-  --color-base04: #333333;
-  --color-base05: #5a5a5a;
-  --color-special00: #8155cb;
-  --color-special01: #222222;
-  --color-special02: #1a1aa6;
-  --color-special03: #c80000;
-  --color-special04: #236e25;
-  --color-special05: #aa0d91;
-  --color-special06: #ef6632;
-  --color-special07: #777d88;
-  --color-state00: #0088fa;
-  --color-state01: #dadada;
-  --color-state02: #ffffff;
-  --color-state03: #ebf1fb;
-  --color-state04: #ffff00;
-  --color-state05: #222222;
-  --color-state06: #222222;
+.Elements {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
-  --color-component: var(--color-special00);
-  --color-tree-tag: var(--color-base04);
-  --color-tree-attr-name: var(--color-special06);
-  --color-tree-attr-value: var(--color-special02);
+  -webkit-font-smoothing: antialiased;
+}
 
-  --line-height-tree-compact: 1.5;
-  --line-height-tree-normal: 1.5;
+.SearchRow {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  border-bottom: 1px solid var(--color-base02);
+  padding: 0.5rem;
+}
 
-  /* GitHub.com system fonts */
-  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
-    Courier, monospace;
-  --font-size-tree-compact: 12px;
-  --font-size-tree-normal: 14px;
+.SearchInput {
+  font-size: 1rem;
+  flex: 1;
+  outline: none;
+  border: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 16px 16px;
+  padding-left: 1.5rem;
 }
 
-.Elements {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+.IconButton {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--color-state00);
+  flex: 0 0 auto;
+}
+.IconButton:hover {
+  color: var(--color-special02);
+}
 
-  -webkit-font-smoothing: antialiased;
+.IconButtonSVG {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.25rem;
+  fill: currentColor;
 }
 
-* {
-  box-sizing: border-box;
+.Tree {
+  width: 100%;
+  overflow: auto;
+  flex: 1 0 auto;
 }
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index abf2829daefc..7c184828f48c 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -6,6 +6,8 @@ import Tree from './Tree';
 import { StoreContext, TreeContext } from './contexts';
 import styles from './Elements.css';
 
+import './root.css';
+
 import type { Bridge } from '../../types';
 
 export type Props = {|
@@ -14,11 +16,7 @@ export type Props = {|
   themeName: string,
 |};
 
-export default function Elements({
-  bridge,
-  browserName,
-  themeName,
-}: Props) {
+export default function Elements({ bridge, browserName, themeName }: Props) {
   const store = useMemo<Store>(() => new Store(bridge), []);
 
   const [treeContext, setTreeContext] = useState({
@@ -43,7 +41,31 @@ export default function Elements({
     <StoreContext.Provider value={store}>
       <TreeContext.Provider value={treeContext}>
         <div className={styles.Elements}>
-          <Tree />
+          <div className={styles.SearchRow}>
+            <input
+              className={styles.SearchInput}
+              placeholder="Search (text or /regex/)"
+            />
+            <button className={styles.IconButton}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className={styles.IconButtonSVG}
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path d="M0 0h24v24H0z" fill="none" />
+                <path
+                  fill="currentColor"
+                  d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
+                />
+              </svg>
+              Select
+            </button>
+          </div>
+          <div className={styles.Tree}>
+            <Tree />
+          </div>
         </div>
       </TreeContext.Provider>
     </StoreContext.Provider>
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 1ccd23d768c8..0587bfdbd457 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import Element from './Element';
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
new file mode 100644
index 000000000000..6bd6a48e7dea
--- /dev/null
+++ b/src/devtools/views/root.css
@@ -0,0 +1,42 @@
+:root {
+  /* TODO */
+  --color-base00: #ffffff;
+  --color-base01: #f3f3f3;
+  --color-base02: #eeeeee;
+  --color-base03: #dadada;
+  --color-base04: #333333;
+  --color-base05: #5a5a5a;
+  --color-special00: #8155cb;
+  --color-special01: #222222;
+  --color-special02: #1a1aa6;
+  --color-special03: #c80000;
+  --color-special04: #236e25;
+  --color-special05: #aa0d91;
+  --color-special06: #ef6632;
+  --color-special07: #777d88;
+  --color-state00: #0088fa;
+  --color-state01: #dadada;
+  --color-state02: #ffffff;
+  --color-state03: #ebf1fb;
+  --color-state04: #ffff00;
+  --color-state05: #222222;
+  --color-state06: #222222;
+
+  --color-component: var(--color-special00);
+  --color-tree-tag: var(--color-base04);
+  --color-tree-attr-name: var(--color-special06);
+  --color-tree-attr-value: var(--color-special02);
+
+  --line-height-tree-compact: 1.5;
+  --line-height-tree-normal: 1.5;
+
+  /* GitHub.com system fonts */
+  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace;
+  --font-size-tree-compact: 12px;
+  --font-size-tree-normal: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}

From bdfaeede6dd3715228ff34415b90d2322ec16b05 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 14:27:16 -0800
Subject: [PATCH 020/814] Fixed potential race cases in bridge/store/backend
 initialization

---
 shells/browser/shared/src/contentScript.js | 51 ++++++++----
 shells/browser/shared/src/inject.js        | 15 ++--
 shells/browser/shared/src/panel.js         | 95 +++++++++++-----------
 shells/dev/src/devtools.js                 | 28 ++++---
 src/bridge.js                              | 21 ++---
 5 files changed, 114 insertions(+), 96 deletions(-)

diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
index c72d17918fd0..b98d22a649a6 100644
--- a/shells/browser/shared/src/contentScript.js
+++ b/shells/browser/shared/src/contentScript.js
@@ -1,21 +1,17 @@
 /* global chrome */
 
-// proxy from main page to devtools (via the background page)
-var port = chrome.runtime.connect({
-  name: 'content-script',
-});
-
-port.onMessage.addListener(handleMessageFromDevtools);
-port.onDisconnect.addListener(handleDisconnect);
-window.addEventListener('message', handleMessageFromPage);
+let backendDisconnected: boolean = false;
+let backendInitialized: boolean = false;
 
-window.postMessage(
-  {
-    source: 'react-devtools-content-script',
-    hello: true,
-  },
-  '*'
-);
+function sayHelloToBackend() {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      hello: true,
+    },
+    '*'
+  );
+}
 
 function handleMessageFromDevtools(message) {
   window.postMessage(
@@ -33,12 +29,17 @@ function handleMessageFromPage(evt) {
     evt.data &&
     evt.data.source === 'react-devtools-bridge'
   ) {
+    backendInitialized = true;
+
     port.postMessage(evt.data.payload);
   }
 }
 
 function handleDisconnect() {
+  backendDisconnected = true;
+
   window.removeEventListener('message', handleMessageFromPage);
+
   window.postMessage(
     {
       source: 'react-devtools-content-script',
@@ -50,3 +51,23 @@ function handleDisconnect() {
     '*'
   );
 }
+
+// proxy from main page to devtools (via the background page)
+var port = chrome.runtime.connect({
+  name: 'content-script',
+});
+port.onMessage.addListener(handleMessageFromDevtools);
+port.onDisconnect.addListener(handleDisconnect);
+
+window.addEventListener('message', handleMessageFromPage);
+
+// The backend waits to install the global hook until notified by the content script.
+// In the event of a page reload, the content script might be loaded before the backend is injected.
+// Because of this we need to poll the backend until it has been initialized.
+const intervalID = setInterval(() => {
+  if (backendInitialized || backendDisconnected) {
+    clearInterval(intervalID);
+  } else {
+    sayHelloToBackend();
+  }
+}, 500);
diff --git a/shells/browser/shared/src/inject.js b/shells/browser/shared/src/inject.js
index 522b322786b8..938e2cf7eb22 100644
--- a/shells/browser/shared/src/inject.js
+++ b/shells/browser/shared/src/inject.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
-export default function inject(scriptName: string, done: () => void) {
-  const src = `
+export default function inject(scriptName: string, done: ?Function) {
+  const source = `
   // the prototype stuff is in case document.createElement has been modified
   (function () {
     var script = document.constructor.prototype.createElement.call(document, 'script');
@@ -12,10 +12,13 @@ export default function inject(scriptName: string, done: () => void) {
   })()
   `;
 
-  chrome.devtools.inspectedWindow.eval(src, function(res, err) {
-    if (err) {
-      console.log(err);
+  chrome.devtools.inspectedWindow.eval(source, function(response, error) {
+    if (error) {
+      console.log(error);
+    }
+
+    if (typeof done === 'function') {
+      done();
     }
-    done();
   });
 }
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index c1e837ed4a5d..19ef2fda4668 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
 import { createElement } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Elements from 'src/devtools/views/Elements';
 import inject from './inject';
@@ -34,58 +34,55 @@ if (IS_CHROME) {
   }
 }
 
-const node = ((document.getElementById('container'): any): HTMLElement);
+const container = ((document.getElementById('container'): any): HTMLElement);
 
-function reloadDevTools() {
-  setTimeout(() => {
-    unmountComponentAtNode(node);
-
-    node.innerHTML = '';
+function injectAndInit() {
+  let disconnected = false;
 
-    injectAndInit();
-  }, 100);
-}
+  const port = chrome.runtime.connect({
+    name: '' + chrome.devtools.inspectedWindow.tabId,
+  });
+  port.onDisconnect.addListener(() => {
+    disconnected = true;
+  });
 
-function injectAndInit() {
-  inject(chrome.runtime.getURL('build/backend.js'), () => {
-    let disconnected = false;
-
-    const port = chrome.runtime.connect({
-      name: '' + chrome.devtools.inspectedWindow.tabId,
-    });
-    port.onDisconnect.addListener(() => {
-      disconnected = true;
-    });
-
-    const bridge = new Bridge({
-      listen(fn) {
-        port.onMessage.addListener(message => fn(message));
-      },
-      send(event: string, payload: any, transferable?: Array<any>) {
-        if (disconnected) {
-          return;
-        }
-        port.postMessage({ event, payload }, transferable);
-      },
-    });
-
-    // Reload the DevTools extension when the user navigates to a new page.
-    function onNavigated() {
-      chrome.devtools.network.onNavigated.removeListener(onNavigated);
-      bridge.send('shutdown');
-      reloadDevTools();
-    }
-    chrome.devtools.network.onNavigated.addListener(onNavigated);
-
-    render(
-      createElement(Elements, {
-        bridge,
-        browserName,
-        themeName,
-      }),
-      node
-    );
+  const bridge = new Bridge({
+    listen(fn) {
+      port.onMessage.addListener(message => fn(message));
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      if (disconnected) {
+        return;
+      }
+      port.postMessage({ event, payload }, transferable);
+    },
   });
+
+  // Clear the "React not found" initial message before rendering.
+  container.innerHTML = '';
+
+  const root = createRoot(container);
+  root.render(
+    createElement(Elements, {
+      bridge,
+      browserName,
+      themeName,
+    })
+  );
+
+  // Initialize the backend only once the DevTools frontend Store has been initialized.
+  // Otherwise the Store may miss important initial tree op codes.
+  inject(chrome.runtime.getURL('build/backend.js'));
+
+  // Reload the DevTools extension when the user navigates to a new page.
+  function onNavigated() {
+    chrome.devtools.network.onNavigated.removeListener(onNavigated);
+
+    bridge.send('shutdown');
+
+    flushSync(() => root.unmount(injectAndInit));
+  }
+  chrome.devtools.network.onNavigated.addListener(onNavigated);
 }
 
 injectAndInit();
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index dce50fb9a47d..158fb3983b7a 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -37,9 +37,9 @@ mountButton.addEventListener('click', function() {
   }
 });
 
-initDevTools({
-  connect(cb) {
-    inject('./build/backend.js', () => {
+inject('./build/App.js', () => {
+  initDevTools({
+    connect(cb) {
       const bridge = new Bridge({
         listen(fn) {
           contentWindow.parent.addEventListener('message', ({ data }) => {
@@ -54,22 +54,28 @@ initDevTools({
       cb(bridge);
 
       const root = createRoot(container);
-      root.render(
+      const batch = root.createBatch();
+      batch.render(
         createElement(Elements, {
           bridge,
           browserName: 'Chrome',
           themeName: 'light',
         })
       );
-    });
-  },
+      batch.then(() => {
+        batch.commit();
 
-  onReload(reloadFn) {
-    iframe.onload = reloadFn;
-  },
-});
+        // Initialize the backend only once the DevTools frontend Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        inject('./build/backend.js');
+      });
+    },
 
-inject('./build/App.js');
+    onReload(reloadFn) {
+      iframe.onload = reloadFn;
+    },
+  });
+});
 
 function inject(sourcePath, callback) {
   const script = contentDocument.createElement('script');
diff --git a/src/bridge.js b/src/bridge.js
index fffb1236280b..2fbf43aaf1b7 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -15,13 +15,12 @@ export default class Bridge extends EventEmitter {
   _messageQueue: Array<any> = [];
   _time: number | null = null;
   _timeoutID: TimeoutID | null = null;
-
-  wall: Wall;
+  _wall: Wall;
 
   constructor(wall: Wall) {
     super();
 
-    this.wall = wall;
+    this._wall = wall;
 
     wall.listen((message: Message) => {
       this._emit(message);
@@ -32,7 +31,7 @@ export default class Bridge extends EventEmitter {
     const time = this._time;
 
     if (time === null) {
-      this.wall.send(event, payload, transferable);
+      this._wall.send(event, payload, transferable);
       this._time = Date.now();
     } else {
       this._messageQueue.push(event, payload, transferable);
@@ -46,13 +45,9 @@ export default class Bridge extends EventEmitter {
     }
   }
 
-  log(message: string): void {
-    this.send('log', message);
-  }
-
   _flush() {
     while (this._messageQueue.length) {
-      this.wall.send.apply(this.wall, this._messageQueue.splice(0, 3));
+      this._wall.send.apply(this._wall, this._messageQueue.splice(0, 3));
     }
 
     if (this._timeoutID !== null) {
@@ -64,11 +59,7 @@ export default class Bridge extends EventEmitter {
     this._time = null;
   }
 
-  _emit(message: string | Message) {
-    if (typeof message === 'string') {
-      this.emit(message);
-    } else {
-      this.emit(message.event, message.payload);
-    }
+  _emit(message: Message) {
+    this.emit(message.event, message.payload);
   }
 }

From 89f4955b9335d2ec025c5ca6ad71f2b69ba03697 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 14:31:12 -0800
Subject: [PATCH 021/814] Don't show roots in Elements tree

---
 src/devtools/store.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 9f318041c3cf..29f0adb9d273 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -43,6 +43,8 @@ export default class Store extends EventEmitter {
   constructor(bridge: Bridge) {
     super();
 
+    debug('constructor', 'subscribing to Bridge');
+
     bridge.on('operations', this.onBridgeOperations);
     bridge.on('rootCommitted', this.onBridgeRootCommitted);
   }
@@ -78,8 +80,10 @@ export default class Store extends EventEmitter {
       }
     }
 
-    // Crawl the tree to find the correct root...
-    let currentElement = ((root: any): Element);
+    // Find the element in the tree using the weight of each node...
+    // Skip over the root itself, because roots aren't visible in the Elements tree.
+    const firstChildID = ((root: any): Element).children[0];
+    let currentElement = ((this._idToElement.get(firstChildID): any): Element);
     let currentWeight = 0;
     while (index !== currentWeight) {
       for (let i = 0; i < currentElement.children.length; i++) {
@@ -145,13 +149,13 @@ export default class Store extends EventEmitter {
 
             this._idToElement.set(id, {
               children: [],
-              depth: 0,
+              depth: -1,
               displayName: null,
               id,
               key: null,
               parentID: 0,
               type,
-              weight: 1,
+              weight: 0,
             });
 
             haveRootsChanged = true;
@@ -283,7 +287,7 @@ export default class Store extends EventEmitter {
     const printElement = (id: number) => {
       const element = ((this._idToElement.get(id): any): Element);
       console.log(
-        `${'  '.repeat(element.depth)}${element.id}:${element.displayName ||
+        `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
           ''}${element.key ? `key:"${element.key}"` : ''} (${element.weight})`
       );
       element.children.forEach(printElement);

From 1eccdd6f8a96bf3fe2c21bd7470758cc38b20b61 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 14:46:18 -0800
Subject: [PATCH 022/814] Moved search icon into separate React component

---
 src/devtools/views/Elements.css   |  7 -------
 src/devtools/views/Elements.js    | 16 ++--------------
 src/devtools/views/SearchIcon.css |  6 ++++++
 src/devtools/views/SearchIcon.js  | 22 ++++++++++++++++++++++
 4 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 src/devtools/views/SearchIcon.css
 create mode 100644 src/devtools/views/SearchIcon.js

diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index 0cd3d4480f33..c08b644a4ab6 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -42,13 +42,6 @@
   color: var(--color-special02);
 }
 
-.IconButtonSVG {
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.25rem;
-  fill: currentColor;
-}
-
 .Tree {
   width: 100%;
   overflow: auto;
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 7c184828f48c..fa80446e539f 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -4,6 +4,7 @@ import React, { useLayoutEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
 import { StoreContext, TreeContext } from './contexts';
+import SearchIcon from './SearchIcon';
 import styles from './Elements.css';
 
 import './root.css';
@@ -47,20 +48,7 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
               placeholder="Search (text or /regex/)"
             />
             <button className={styles.IconButton}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={styles.IconButtonSVG}
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-              >
-                <path d="M0 0h24v24H0z" fill="none" />
-                <path
-                  fill="currentColor"
-                  d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
-                />
-              </svg>
-              Select
+              <SearchIcon /> Select
             </button>
           </div>
           <div className={styles.Tree}>
diff --git a/src/devtools/views/SearchIcon.css b/src/devtools/views/SearchIcon.css
new file mode 100644
index 000000000000..a3ebe2def4a6
--- /dev/null
+++ b/src/devtools/views/SearchIcon.css
@@ -0,0 +1,6 @@
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  margin: 0 0.25rem;
+  fill: currentColor;
+}
diff --git a/src/devtools/views/SearchIcon.js b/src/devtools/views/SearchIcon.js
new file mode 100644
index 000000000000..1d4f63eb1f3a
--- /dev/null
+++ b/src/devtools/views/SearchIcon.js
@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+import styles from './SearchIcon.css';
+
+export default function SearchIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.Icon}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        fill="currentColor"
+        d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
+      />
+    </svg>
+  );
+}

From 1866aef67c8940b5d86d0faf6ac46d483ad21344 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 15:48:47 -0800
Subject: [PATCH 023/814] Fixed small CSS bug

---
 src/devtools/views/Elements.css | 1 +
 src/devtools/views/Tree.css     | 6 ------
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index c08b644a4ab6..85f8695c745e 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -46,4 +46,5 @@
   width: 100%;
   overflow: auto;
   flex: 1 0 auto;
+  padding: 0.25rem;
 }
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index c4c15434f9e3..73c69432abaa 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -1,11 +1,5 @@
 .Tree {
-  width: 100%;
-  padding: 0.25rem;
-  overflow: auto;
-
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-tree-compact);
-
-  /* TODO */
   line-height: var(--line-height-tree-compact);
 }

From ad74c54670de6982978e91bc5cc259ced20ca1a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 15:59:08 -0800
Subject: [PATCH 024/814] Adding tearing warning to Store

---
 src/devtools/store.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 29f0adb9d273..49bc2d607a9e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -57,13 +57,15 @@ export default class Store extends EventEmitter {
     return this._roots;
   }
 
-  getElementAtIndex(index: number): Element {
+  getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
-      throw Error(
+      console.warn(
         `Invalid index ${index} specified; store contains ${
           this.numElements
         } items.`
       );
+
+      return null;
     }
 
     // Find wich root this element is in...

From 9aa6e13d5f50fa6e556f1cadc2cfee1ac38257c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Feb 2019 09:25:54 -0800
Subject: [PATCH 025/814] Tidied up devtools frontend a little

---
 src/devtools/views/Element.js                 |  2 +-
 src/devtools/views/Elements.js                |  2 +-
 src/devtools/views/Tree.js                    |  2 +-
 .../views/{contexts.js => context.js}         |  6 +-
 src/devtools/views/hooks.js                   | 55 -------------------
 5 files changed, 8 insertions(+), 59 deletions(-)
 rename src/devtools/views/{contexts.js => context.js} (57%)
 delete mode 100644 src/devtools/views/hooks.js

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 4eb88a2c472b..2f7a9c94bc1e 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Fragment, useContext } from 'react';
-import { TreeContext } from './contexts';
+import { TreeContext } from './context';
 
 import styles from './Element.css';
 
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index fa80446e539f..02b51d463d68 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -3,7 +3,7 @@
 import React, { useLayoutEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
-import { StoreContext, TreeContext } from './contexts';
+import { StoreContext, TreeContext } from './context';
 import SearchIcon from './SearchIcon';
 import styles from './Elements.css';
 
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 0587bfdbd457..39a14a377299 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import Element from './Element';
-import { TreeContext } from './contexts';
+import { TreeContext } from './context';
 
 import styles from './Tree.css';
 
diff --git a/src/devtools/views/contexts.js b/src/devtools/views/context.js
similarity index 57%
rename from src/devtools/views/contexts.js
rename to src/devtools/views/context.js
index 5e2b1be93eac..a2584e47cdd9 100644
--- a/src/devtools/views/contexts.js
+++ b/src/devtools/views/context.js
@@ -6,8 +6,12 @@ import type { TreeMetadataType } from '../types';
 
 import Store from '../store';
 
-export const RootsContext = createContext<Array<string>>([]);
 export const StoreContext = createContext<Store>(((null: any): Store));
+// $FlowFixMe displayName is a valid attribute of React$Context
+StoreContext.displayName = 'StoreContext';
+
 export const TreeContext = createContext<TreeMetadataType>(
   ((null: any): TreeMetadataType)
 );
+// $FlowFixMe displayName is a valid attribute of React$Context
+TreeContext.displayName = 'TreeMetadataContext';
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
deleted file mode 100644
index 4fb62d4d9e86..000000000000
--- a/src/devtools/views/hooks.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// @flow
-
-import { useLayoutEffect, useState } from 'react';
-
-import type { Element } from '../types';
-import Store from '../store';
-
-// TODO useEffect has a bug where sometimes subscriptions don't get cleaned up correctly.
-// Potentially related to github.com/facebookincubator/redux-react-hook/issues/17
-// As a temporary work around, switch back to layout effect.
-
-export function useElement(store: Store, id: number): ?Element {
-  const [element, setElement] = useState<?Element>(store.getElementByID(id));
-
-  useLayoutEffect(() => {
-    const handler = () =>
-      setElement(((store.getElementByID(id): any): Element));
-
-    // Listen for changes to the element.
-    store.addListener((id: any), handler);
-
-    // Check for changes that may have happened between render and mount.
-    const newElement = store.getElementByID(id);
-    if (element !== newElement) {
-      setElement(newElement);
-    }
-
-    // Remove event listener on unmount.
-    return () => store.removeListener((id: any), handler);
-  }, [store, id]);
-
-  return element;
-}
-
-export function useRoots(store: Store): $ReadOnlyArray<number> {
-  const [roots, setRoots] = useState<$ReadOnlyArray<number>>(store.roots);
-
-  useLayoutEffect(() => {
-    const handler = () => setRoots(store.roots);
-
-    // Listen for changes to roots.
-    store.addListener('roots', handler);
-
-    // Check for changes that may have happened between render and mount.
-    const newRoots = store.roots;
-    if (roots !== newRoots) {
-      setRoots(newRoots);
-    }
-
-    // Remove event listener on unmount.
-    return () => store.removeListener('roots', handler);
-  }, [store]);
-
-  return roots;
-}

From 406df2a617c6a9565b1dc053129e07007ea94bae Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 2 Feb 2019 13:57:32 -0800
Subject: [PATCH 026/814] Added properties panel and selected element context

---
 shells/dev/index.html                         |  1 -
 src/devtools/store.js                         |  8 ++-
 .../views/{SearchIcon.css => ButtonIcon.css}  |  2 +-
 src/devtools/views/ButtonIcon.js              | 55 +++++++++++++++++++
 src/devtools/views/Element.css                | 14 ++++-
 src/devtools/views/Element.js                 | 20 +++++--
 src/devtools/views/Elements.css               | 49 ++++-------------
 src/devtools/views/Elements.js                | 26 ++++-----
 src/devtools/views/SearchIcon.js              | 22 --------
 src/devtools/views/SelectedElement.css        | 54 ++++++++++++++++++
 src/devtools/views/SelectedElement.js         | 50 +++++++++++++++++
 src/devtools/views/SelectedElementContext.js  | 41 ++++++++++++++
 src/devtools/views/Tree.css                   | 50 +++++++++++++++++
 src/devtools/views/Tree.js                    | 45 ++++++++++-----
 src/devtools/views/root.css                   |  2 +
 15 files changed, 343 insertions(+), 96 deletions(-)
 rename src/devtools/views/{SearchIcon.css => ButtonIcon.css} (84%)
 create mode 100644 src/devtools/views/ButtonIcon.js
 delete mode 100644 src/devtools/views/SearchIcon.js
 create mode 100644 src/devtools/views/SelectedElement.css
 create mode 100644 src/devtools/views/SelectedElement.js
 create mode 100644 src/devtools/views/SelectedElementContext.js

diff --git a/shells/dev/index.html b/shells/dev/index.html
index 3d9c03dc2da6..021f696b7849 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -8,7 +8,6 @@
       #target {
         flex: 1;
         border: none;
-        border-bottom: 1px solid #ccc;
       }
       #devtools {
         display: flex;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 49bc2d607a9e..b698afd7758b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -105,14 +105,16 @@ export default class Store extends EventEmitter {
     return ((currentElement: any): Element);
   }
 
-  getElementByID(id: number): Element {
+  getElementByID(id: number): Element | null {
     const element = this._idToElement.get(id);
 
     if (element == null) {
-      throw Error(`No element found with id "${id}`);
+      console.warn(`No element found with id "${id}`);
+
+      return null;
     }
 
-    return ((element: any): Element);
+    return element;
   }
 
   onBridgeOperations = (operations: Uint32Array) => {
diff --git a/src/devtools/views/SearchIcon.css b/src/devtools/views/ButtonIcon.css
similarity index 84%
rename from src/devtools/views/SearchIcon.css
rename to src/devtools/views/ButtonIcon.css
index a3ebe2def4a6..85c6a98bb7af 100644
--- a/src/devtools/views/SearchIcon.css
+++ b/src/devtools/views/ButtonIcon.css
@@ -1,4 +1,4 @@
-.Icon {
+.ButtonIcon {
   width: 1rem;
   height: 1rem;
   margin: 0 0.25rem;
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
new file mode 100644
index 000000000000..5174e71e17ee
--- /dev/null
+++ b/src/devtools/views/ButtonIcon.js
@@ -0,0 +1,55 @@
+// @flow
+
+import React from 'react';
+import styles from './ButtonIcon.css';
+
+type Props = {|
+  type: 'search' | 'view-dom' | 'view-source',
+|};
+
+export default function ButtonIcon({ type }: Props) {
+  let pathData = null;
+  switch (type) {
+    case 'search':
+      pathData = PATH_SEARCH;
+      break;
+    case 'view-dom':
+      pathData = PATH_VIEW_DOM;
+      break;
+    case 'view-source':
+      pathData = PATH_VIEW_SOURCE;
+      break;
+    default:
+      console.warn(`Unsupported type "${type}" specified for ButtonIcon`);
+      break;
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.ButtonIcon}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path fill="currentColor" d={pathData} />
+    </svg>
+  );
+}
+
+const PATH_SEARCH = `
+  M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
+  4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
+  0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
+`;
+
+const PATH_VIEW_DOM = `
+  M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12
+  17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3
+  3-1.34 3-3-1.34-3-3-3z
+`;
+
+const PATH_VIEW_SOURCE = `
+  M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
+  `;
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 3a33050ceb1c..24f54d909bfb 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -1,14 +1,26 @@
-.Element {
+.Element,
+.SelectedElement {
   width: 100%;
   border-radius: 0.25em;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
+  line-height: 20px;
 }
 .Element:hover {
   background-color: var(--color-state03);
 }
 
+.SelectedElement {
+  background-color: var(--color-state00);
+
+  /* Invert colors */
+  --color-component: var(--color-base00);
+  --color-tree-tag: rgba(255, 255, 255, 0.8);
+  --color-tree-attr-name: #b3e5fc;
+  --color-tree-attr-value: #fff;
+}
+
 .ArrowClosed,
 .ArrowOpen {
   position: absolute;
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 2f7a9c94bc1e..b625827fdfb5 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,7 +1,8 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment, useCallback, useContext } from 'react';
 import { TreeContext } from './context';
+import { SelectedElementContext } from './SelectedElementContext';
 
 import styles from './Element.css';
 
@@ -22,13 +23,24 @@ export default function Element({ index, style }: Props) {
     return null;
   }
 
-  const { children, depth, displayName, key } = element;
+  const { children, depth, displayName, id, key } = element;
 
-  // TODO: Add state for toggling element open/close
+  const selectedElement = useContext(SelectedElementContext);
+  const handleClick = useCallback(
+    ({ metaKey }) => {
+      selectedElement.id = metaKey ? null : id;
+    },
+    [id]
+  );
+
+  // TODO: Add click and key handlers for toggling element open/close state.
 
   return (
     <div
-      className={styles.Element}
+      className={
+        selectedElement.id === id ? styles.SelectedElement : styles.Element
+      }
+      onClick={handleClick}
       style={{
         ...style,
         paddingLeft: `${1 + depth}rem`,
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index 85f8695c745e..bc9e34b53f50 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -2,49 +2,24 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
+  font-family: var(--font-family-sans);
   -webkit-font-smoothing: antialiased;
 }
 
-.SearchRow {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  border-bottom: 1px solid var(--color-base02);
-  padding: 0.5rem;
+.TreeWrapper {
+  flex: 0 0 65%;
 }
 
-.SearchInput {
-  font-size: 1rem;
-  flex: 1;
-  outline: none;
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: left center;
-  background-size: 16px 16px;
-  padding-left: 1.5rem;
+.SelectedElementWrapper {
+  flex: 0 0 35%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-state00);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-special02);
-}
-
-.Tree {
-  width: 100%;
-  overflow: auto;
-  flex: 1 0 auto;
-  padding: 0.25rem;
+@media screen and (max-width: 600px) {
+  .Elements {
+    flex-direction: column;
+  }
 }
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 02b51d463d68..1d9e87c65258 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -4,7 +4,8 @@ import React, { useLayoutEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
 import { StoreContext, TreeContext } from './context';
-import SearchIcon from './SearchIcon';
+import SelectedElement from './SelectedElement';
+import { SelectedElementController } from './SelectedElementContext';
 import styles from './Elements.css';
 
 import './root.css';
@@ -38,23 +39,20 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
     return () => store.removeListener('rootCommitted', handler);
   }, [store]);
 
+  // TODO Flex wrappers below should be user resizable.
   return (
     <StoreContext.Provider value={store}>
       <TreeContext.Provider value={treeContext}>
-        <div className={styles.Elements}>
-          <div className={styles.SearchRow}>
-            <input
-              className={styles.SearchInput}
-              placeholder="Search (text or /regex/)"
-            />
-            <button className={styles.IconButton}>
-              <SearchIcon /> Select
-            </button>
+        <SelectedElementController>
+          <div className={styles.Elements}>
+            <div className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.SelectedElementWrapper}>
+              <SelectedElement />
+            </div>
           </div>
-          <div className={styles.Tree}>
-            <Tree />
-          </div>
-        </div>
+        </SelectedElementController>
       </TreeContext.Provider>
     </StoreContext.Provider>
   );
diff --git a/src/devtools/views/SearchIcon.js b/src/devtools/views/SearchIcon.js
deleted file mode 100644
index 1d4f63eb1f3a..000000000000
--- a/src/devtools/views/SearchIcon.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// @flow
-
-import React from 'react';
-import styles from './SearchIcon.css';
-
-export default function SearchIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.Icon}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path
-        fill="currentColor"
-        d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
-      />
-    </svg>
-  );
-}
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
new file mode 100644
index 000000000000..140eb9e032f3
--- /dev/null
+++ b/src/devtools/views/SelectedElement.css
@@ -0,0 +1,54 @@
+.SelectedElement {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  border-left: 1px solid var(--color-base02);
+  border-top: 1px solid var(--color-base02);
+}
+
+.TitleRow {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  border-bottom: 1px solid var(--color-base02);
+  padding: 0.5rem;
+}
+
+.IconButton {
+  flex: 0 0 auto;
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--color-state00);
+}
+.IconButton:hover {
+  color: var(--color-special02);
+}
+
+.SelectedComponentName {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Component {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-component);
+  flex: 1 1 auto;
+}
+.Component:before {
+  white-space: nowrap;
+  content: '<';
+  color: var(--color-tree-tag);
+}
+.Component:after {
+  white-space: nowrap;
+  content: '>';
+  color: var(--color-tree-tag);
+}
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
new file mode 100644
index 000000000000..37f5c3c606c4
--- /dev/null
+++ b/src/devtools/views/SelectedElement.js
@@ -0,0 +1,50 @@
+// @flow
+
+import React, { useContext } from 'react';
+import { SelectedElementContext } from './SelectedElementContext';
+import { StoreContext } from './context';
+import ButtonIcon from './ButtonIcon';
+import styles from './SelectedElement.css';
+
+export type Props = {||};
+
+export default function SelectedElement(props: Props) {
+  const { id } = useContext(SelectedElementContext);
+  const store = useContext(StoreContext);
+  const element = id !== null ? store.getElementByID(id) : null;
+
+  // TODO Show/hide source button based on whether debug "source" is available.
+
+  if (element === null) {
+    return (
+      <div className={styles.SelectedElement}>
+        <div className={styles.TitleRow} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.SelectedElement}>
+      <div className={styles.TitleRow}>
+        <div className={styles.SelectedComponentName}>
+          <div className={styles.Component} title={element.displayName}>
+            {element.displayName}
+          </div>
+        </div>
+
+        <button
+          className={styles.IconButton}
+          title="Highlight this element in the page"
+        >
+          <ButtonIcon type="view-dom" /> DOM
+        </button>
+        <button
+          className={styles.IconButton}
+          title="View source for this element"
+        >
+          <ButtonIcon type="view-source" /> Source
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/SelectedElementContext.js b/src/devtools/views/SelectedElementContext.js
new file mode 100644
index 000000000000..7d7afce7a4a7
--- /dev/null
+++ b/src/devtools/views/SelectedElementContext.js
@@ -0,0 +1,41 @@
+// @flow
+
+import React, { createContext, useMemo, useState } from 'react';
+
+type SelectedElementContextValue = {|
+  id: number | null,
+|};
+
+const SelectedElementContext = createContext<SelectedElementContextValue>(
+  ((null: any): SelectedElementContextValue)
+);
+// $FlowFixMe displayName is a valid attribute of React$Context
+SelectedElementContext.displayName = 'SelectedElementContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+// TODO Remove this wrapper element once global Context.write API exists.
+function SelectedElementController({ children }: Props) {
+  const [id, setID] = useState<number | null>(null);
+  const value = useMemo(
+    () => ({
+      get id() {
+        return id;
+      },
+      set id(id: number | null) {
+        setID(id);
+      },
+    }),
+    [id]
+  );
+
+  return (
+    <SelectedElementContext.Provider value={value}>
+      {children}
+    </SelectedElementContext.Provider>
+  );
+}
+
+export { SelectedElementContext, SelectedElementController };
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index 73c69432abaa..a168eab550c0 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -1,4 +1,54 @@
 .Tree {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--color-base02);
+}
+
+.SearchRow {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  border-bottom: 1px solid var(--color-base02);
+  padding: 0.5rem;
+}
+
+.SearchInput {
+  font-size: 1rem;
+  flex: 1;
+  outline: none;
+  border: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 16px 16px;
+  padding-left: 1.5rem;
+}
+
+.IconButton {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--color-state00);
+  flex: 0 0 auto;
+}
+.IconButton:hover {
+  color: var(--color-special02);
+}
+
+.AutoSizerWrapper {
+  width: 100%;
+  overflow: auto;
+  flex: 1 0 auto;
+  padding: 0.25rem;
+}
+
+.List {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-tree-compact);
   line-height: var(--line-height-tree-compact);
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 39a14a377299..92bf94c04c81 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -4,6 +4,7 @@ import React, { useContext } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import Element from './Element';
+import ButtonIcon from './ButtonIcon';
 import { TreeContext } from './context';
 
 import styles from './Tree.css';
@@ -13,20 +14,38 @@ type Props = {||};
 export default function Tree(props: Props) {
   const treeContext = useContext(TreeContext);
 
+  // TODO Add key handlers for selecting previous/next element.
+
   return (
-    <AutoSizer>
-      {({ height, width }) => (
-        <FixedSizeList
-          className={styles.Tree}
-          height={height}
-          itemCount={treeContext.size}
-          itemData={treeContext}
-          itemSize={20}
-          width={width}
+    <div className={styles.Tree}>
+      <div className={styles.SearchRow}>
+        <input
+          className={styles.SearchInput}
+          placeholder="Search (text or /regex/)"
+        />
+        <button
+          className={styles.IconButton}
+          title="Select an element in the page to inspect it"
         >
-          {Element}
-        </FixedSizeList>
-      )}
-    </AutoSizer>
+          <ButtonIcon type="search" /> Select
+        </button>
+      </div>
+      <div className={styles.AutoSizerWrapper}>
+        <AutoSizer>
+          {({ height, width }) => (
+            <FixedSizeList
+              className={styles.List}
+              height={height}
+              itemCount={treeContext.size}
+              itemData={treeContext}
+              itemSize={20}
+              width={width}
+            >
+              {Element}
+            </FixedSizeList>
+          )}
+        </AutoSizer>
+      </div>
+    </div>
   );
 }
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 6bd6a48e7dea..6e31b7a02e64 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -33,6 +33,8 @@
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --font-size-tree-compact: 12px;
   --font-size-tree-normal: 14px;
 }

From b56bc1a62604c34b1e758f2a68c03b770c1ef6e3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 4 Feb 2019 17:49:30 +0000
Subject: [PATCH 027/814] Initial pass at properties panel. Lots of TODOs
 remaining.

---
 package.json                                  |   1 +
 shells/dev/app/App.js                         |   4 +-
 .../InspectableElements/FunctionWithState.js  |  16 +
 .../InspectableElements.js                    |  14 +
 .../app/InspectableElements/NestedProps.js    |  32 +
 shells/dev/app/InspectableElements/index.js   |   5 +
 src/backend/ReactDebugHooks.js                | 573 ++++++++++++++++++
 src/backend/agent.js                          |  23 +-
 src/backend/index.js                          |  45 +-
 src/backend/renderer.js                       | 283 ++++++++-
 src/backend/types.js                          |  29 +-
 src/backend/utils.js                          |  46 +-
 src/devtools/store.js                         |  73 ++-
 src/devtools/types.js                         |  14 +-
 src/devtools/views/Element.css                |   8 +-
 src/devtools/views/Element.js                 |  13 +-
 src/devtools/views/Elements.css               |   1 -
 src/devtools/views/Elements.js                |  40 +-
 src/devtools/views/HooksTree.css              |  10 +
 src/devtools/views/HooksTree.js               |  24 +
 src/devtools/views/Icon.css                   |   5 +
 src/devtools/views/Icon.js                    |  35 ++
 src/devtools/views/InspectedElementTree.css   |  20 +
 src/devtools/views/InspectedElementTree.js    | 126 ++++
 src/devtools/views/SelectedElement.css        |  36 +-
 src/devtools/views/SelectedElement.js         | 156 ++++-
 src/devtools/views/SelectedElementContext.js  |  19 +-
 src/devtools/views/Tree.js                    |  48 +-
 src/devtools/views/context.js                 |   5 +
 src/devtools/views/root.css                   |   7 +-
 src/hook.js                                   |  22 +-
 src/hydration.js                              | 216 +++++++
 src/utils.js                                  |   6 +
 yarn.lock                                     |   5 +
 34 files changed, 1847 insertions(+), 113 deletions(-)
 create mode 100644 shells/dev/app/InspectableElements/FunctionWithState.js
 create mode 100644 shells/dev/app/InspectableElements/InspectableElements.js
 create mode 100644 shells/dev/app/InspectableElements/NestedProps.js
 create mode 100644 shells/dev/app/InspectableElements/index.js
 create mode 100644 src/backend/ReactDebugHooks.js
 create mode 100644 src/devtools/views/HooksTree.css
 create mode 100644 src/devtools/views/HooksTree.js
 create mode 100644 src/devtools/views/Icon.css
 create mode 100644 src/devtools/views/Icon.js
 create mode 100644 src/devtools/views/InspectedElementTree.css
 create mode 100644 src/devtools/views/InspectedElementTree.js
 create mode 100644 src/hydration.js

diff --git a/package.json b/package.json
index 81f577f34180..4d2d7222164d 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "react": "^16.8.0-alpha.1",
     "react-color": "^2.11.7",
     "react-dom": "^16.8.0-alpha.1",
+    "react-is": "^16.8.0-alpha.1",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.5.1",
diff --git a/shells/dev/app/App.js b/shells/dev/app/App.js
index 7d009f251ec5..787a5af9fdf7 100644
--- a/shells/dev/app/App.js
+++ b/shells/dev/app/App.js
@@ -1,8 +1,9 @@
 // @flow
 
 import React from 'react';
-import List from './ToDoList';
 import ElementTypes from './ElementTypes';
+import InspectableElements from './InspectableElements';
+import List from './ToDoList';
 import styles from './App.css';
 
 export default function App() {
@@ -10,6 +11,7 @@ export default function App() {
     <div className={styles.App}>
       <List />
       <ElementTypes />
+      <InspectableElements />
     </div>
   );
 }
diff --git a/shells/dev/app/InspectableElements/FunctionWithState.js b/shells/dev/app/InspectableElements/FunctionWithState.js
new file mode 100644
index 000000000000..ae445fc246a5
--- /dev/null
+++ b/shells/dev/app/InspectableElements/FunctionWithState.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React, { useCallback, useState } from 'react';
+
+type Props = {|
+  initialCount: number,
+|};
+
+export default function FunctionWithState({ initialCount }: Props) {
+  const [count, setCount] = useState(initialCount);
+  const handleClick = useCallback(() => {
+    setCount(count => count + 1);
+  });
+
+  return <button onClick={handleClick}>Count {count}</button>;
+}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
new file mode 100644
index 000000000000..1da1b9398975
--- /dev/null
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -0,0 +1,14 @@
+// @flow
+
+import React, { Fragment } from 'react';
+import FunctionWithState from './FunctionWithState';
+import NestedProps from './NestedProps';
+
+export default function InspectableElements() {
+  return (
+    <Fragment>
+      <FunctionWithState initialCount={1} />
+      <NestedProps />
+    </Fragment>
+  );
+}
diff --git a/shells/dev/app/InspectableElements/NestedProps.js b/shells/dev/app/InspectableElements/NestedProps.js
new file mode 100644
index 000000000000..7b2c899df1b6
--- /dev/null
+++ b/shells/dev/app/InspectableElements/NestedProps.js
@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react';
+
+export default function ObjectProps() {
+  return (
+    <ChildComponent
+      object={{
+        outer: {
+          inner: {
+            string: 'abc',
+            number: 123,
+            boolean: true,
+          },
+        },
+      }}
+      array={['first', 'second', 'third']}
+      objectInArray={[
+        {
+          string: 'abc',
+          number: 123,
+          boolean: true,
+        },
+      ]}
+      arrayInObject={{ array: ['first', 'second', 'third'] }}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/shells/dev/app/InspectableElements/index.js b/shells/dev/app/InspectableElements/index.js
new file mode 100644
index 000000000000..58efb1216ec8
--- /dev/null
+++ b/shells/dev/app/InspectableElements/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+import InspectableElements from './InspectableElements';
+
+export default InspectableElements;
diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
new file mode 100644
index 000000000000..1c62f740aff5
--- /dev/null
+++ b/src/backend/ReactDebugHooks.js
@@ -0,0 +1,573 @@
+// @flow
+
+// This file was forked from the React GitHub repo:
+// https://github.com/facebook/react/blob/master/packages/react-debug-tools/src/ReactDebugHooks.js
+// It has been modified slightly though to account for "shared" imports and different lint configs.
+// I've also removed some of the Flow types that don't exist in DevTools.
+// TODO Remove this fork and use the NPM version of this package once it's released.
+
+import ErrorStackParser from 'error-stack-parser';
+
+type Fiber = any;
+type Hook = any;
+
+// HACK: These values are copied from attachRendererFiber
+// In the future, the react-debug-hooks package will be published to NPM,
+// and be locked to a specific range of react versions
+// For now we are just hard-coding the current/latest versions.
+const ContextProvider = 10;
+const ForwardRef = 11;
+const FunctionComponent = 0;
+const SimpleMemoComponent = 15;
+
+// Used to track hooks called during a render
+
+type HookLogEntry = {
+  primitive: string,
+  stackError: Error,
+  value: mixed,
+};
+
+let hookLog: Array<HookLogEntry> = [];
+
+// Primitives
+
+type BasicStateAction<S> = (S => S) | S;
+
+type Dispatch<A> = A => void;
+
+let primitiveStackCache: null | Map<string, Array<any>> = null;
+
+function getPrimitiveStackCache(): Map<string, Array<any>> {
+  // This initializes a cache of all primitive hooks so that the top
+  // most stack frames added by calling the primitive hook can be removed.
+  if (primitiveStackCache === null) {
+    const cache = new Map();
+    let readHookLog;
+    try {
+      // Use all hooks here to add them to the hook log.
+      Dispatcher.useContext(({ _currentValue: null }: any));
+      Dispatcher.useState(null);
+      Dispatcher.useReducer((s, a) => s, null);
+      Dispatcher.useRef(null);
+      Dispatcher.useLayoutEffect(() => {});
+      Dispatcher.useEffect(() => {});
+      Dispatcher.useImperativeHandle(undefined, () => null);
+      Dispatcher.useCallback(() => {});
+      Dispatcher.useMemo(() => null);
+      Dispatcher.useDebugValue(null);
+    } finally {
+      readHookLog = hookLog;
+      hookLog = [];
+    }
+    for (let i = 0; i < readHookLog.length; i++) {
+      const hook = readHookLog[i];
+      cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));
+    }
+    primitiveStackCache = cache;
+  }
+  return primitiveStackCache;
+}
+
+let currentHook: null | Hook = null;
+function nextHook(): null | Hook {
+  const hook = currentHook;
+  if (hook !== null) {
+    currentHook = hook.next;
+  }
+  return hook;
+}
+
+function readContext<T>(
+  context: any,
+  observedBits: void | number | boolean
+): T {
+  // For now we don't expose readContext usage in the hooks debugging info.
+  return context._currentValue;
+}
+
+function useContext<T>(context: any, observedBits: void | number | boolean): T {
+  hookLog.push({
+    primitive: 'Context',
+    stackError: new Error(),
+    value: context._currentValue,
+  });
+  return context._currentValue;
+}
+
+function useState<S>(
+  initialState: (() => S) | S
+): [S, Dispatch<BasicStateAction<S>>] {
+  const hook = nextHook();
+  const state: S =
+    hook !== null
+      ? hook.memoizedState
+      : typeof initialState === 'function'
+      ? (initialState: any)()
+      : initialState;
+  hookLog.push({ primitive: 'State', stackError: new Error(), value: state });
+  return [state, (action: BasicStateAction<S>) => {}];
+}
+
+function useReducer<S, A>(
+  reducer: (S, A) => S,
+  initialState: S,
+  initialAction: A | void | null
+): [S, Dispatch<A>] {
+  const hook = nextHook();
+  const state = hook !== null ? hook.memoizedState : initialState;
+  hookLog.push({
+    primitive: 'Reducer',
+    stackError: new Error(),
+    value: state,
+  });
+  return [state, (action: A) => {}];
+}
+
+function useRef<T>(initialValue: T): { current: T } {
+  const hook = nextHook();
+  const ref = hook !== null ? hook.memoizedState : { current: initialValue };
+  hookLog.push({
+    primitive: 'Ref',
+    stackError: new Error(),
+    value: ref.current,
+  });
+  return ref;
+}
+
+function useLayoutEffect(
+  create: () => mixed,
+  inputs: Array<mixed> | void | null
+): void {
+  nextHook();
+  hookLog.push({
+    primitive: 'LayoutEffect',
+    stackError: new Error(),
+    value: create,
+  });
+}
+
+function useEffect(
+  create: () => mixed,
+  inputs: Array<mixed> | void | null
+): void {
+  nextHook();
+  hookLog.push({ primitive: 'Effect', stackError: new Error(), value: create });
+}
+
+function useImperativeHandle<T>(
+  ref: { current: T | null } | ((inst: T | null) => mixed) | null | void,
+  create: () => T,
+  inputs: Array<mixed> | void | null
+): void {
+  nextHook();
+  // We don't actually store the instance anywhere if there is no ref callback
+  // and if there is a ref callback it might not store it but if it does we
+  // have no way of knowing where. So let's only enable introspection of the
+  // ref itself if it is using the object form.
+  let instance = undefined;
+  if (ref !== null && typeof ref === 'object') {
+    instance = ref.current;
+  }
+  hookLog.push({
+    primitive: 'ImperativeHandle',
+    stackError: new Error(),
+    value: instance,
+  });
+}
+
+function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
+  const hook = nextHook();
+  hookLog.push({
+    primitive: 'Callback',
+    stackError: new Error(),
+    value: hook !== null ? hook.memoizedState[0] : callback,
+  });
+  return callback;
+}
+
+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
+  hookLog.push({
+    primitive: 'DebugValue',
+    stackError: new Error(),
+    value: typeof formatterFn === 'function' ? formatterFn(value) : value,
+  });
+}
+
+function useMemo<T>(
+  nextCreate: () => T,
+  inputs: Array<mixed> | void | null
+): T {
+  const hook = nextHook();
+  const value = hook !== null ? hook.memoizedState[0] : nextCreate();
+  hookLog.push({ primitive: 'Memo', stackError: new Error(), value });
+  return value;
+}
+
+const Dispatcher = {
+  readContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useDebugValue,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+};
+
+// Inspect
+
+type ReactCurrentDispatcher = {
+  current: null | typeof Dispatcher,
+};
+
+type HooksNode = {
+  name: string,
+  value: mixed,
+  subHooks: Array<HooksNode>,
+};
+type HooksTree = Array<HooksNode>;
+
+// Don't assume
+//
+// We can't assume that stack frames are nth steps away from anything.
+// E.g. we can't assume that the root call shares all frames with the stack
+// of a hook call. A simple way to demonstrate this is wrapping `new Error()`
+// in a wrapper constructor like a polyfill. That'll add an extra frame.
+// Similar things can happen with the call to the dispatcher. The top frame
+// may not be the primitive. Likewise the primitive can have fewer stack frames
+// such as when a call to useState got inlined to use dispatcher.useState.
+//
+// We also can't assume that the last frame of the root call is the same
+// frame as the last frame of the hook call because long stack traces can be
+// truncated to a stack trace limit.
+
+let mostLikelyAncestorIndex = 0;
+
+function findSharedIndex(hookStack, rootStack, rootIndex) {
+  const source = rootStack[rootIndex].source;
+  hookSearch: for (let i = 0; i < hookStack.length; i++) {
+    if (hookStack[i].source === source) {
+      // This looks like a match. Validate that the rest of both stack match up.
+      for (
+        let a = rootIndex + 1, b = i + 1;
+        a < rootStack.length && b < hookStack.length;
+        a++, b++
+      ) {
+        if (hookStack[b].source !== rootStack[a].source) {
+          // If not, give up and try a different match.
+          continue hookSearch;
+        }
+      }
+      return i;
+    }
+  }
+  return -1;
+}
+
+function findCommonAncestorIndex(rootStack, hookStack) {
+  let rootIndex = findSharedIndex(
+    hookStack,
+    rootStack,
+    mostLikelyAncestorIndex
+  );
+  if (rootIndex !== -1) {
+    return rootIndex;
+  }
+  // If the most likely one wasn't a hit, try any other frame to see if it is shared.
+  // If that takes more than 5 frames, something probably went wrong.
+  for (let i = 0; i < rootStack.length && i < 5; i++) {
+    rootIndex = findSharedIndex(hookStack, rootStack, i);
+    if (rootIndex !== -1) {
+      mostLikelyAncestorIndex = i;
+      return rootIndex;
+    }
+  }
+  return -1;
+}
+
+function isReactWrapper(functionName, primitiveName) {
+  if (!functionName) {
+    return false;
+  }
+  const expectedPrimitiveName = 'use' + primitiveName;
+  if (functionName.length < expectedPrimitiveName.length) {
+    return false;
+  }
+  return (
+    functionName.lastIndexOf(expectedPrimitiveName) ===
+    functionName.length - expectedPrimitiveName.length
+  );
+}
+
+function findPrimitiveIndex(hookStack, hook) {
+  const stackCache = getPrimitiveStackCache();
+  const primitiveStack = stackCache.get(hook.primitive);
+  if (primitiveStack === undefined) {
+    return -1;
+  }
+  for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {
+    if (primitiveStack[i].source !== hookStack[i].source) {
+      // If the next two frames are functions called `useX` then we assume that they're part of the
+      // wrappers that the React packager or other packages adds around the dispatcher.
+      if (
+        i < hookStack.length - 1 &&
+        isReactWrapper(hookStack[i].functionName, hook.primitive)
+      ) {
+        i++;
+      }
+      if (
+        i < hookStack.length - 1 &&
+        isReactWrapper(hookStack[i].functionName, hook.primitive)
+      ) {
+        i++;
+      }
+      return i;
+    }
+  }
+  return -1;
+}
+
+function parseTrimmedStack(rootStack, hook) {
+  // Get the stack trace between the primitive hook function and
+  // the root function call. I.e. the stack frames of custom hooks.
+  const hookStack = ErrorStackParser.parse(hook.stackError);
+  const rootIndex = findCommonAncestorIndex(rootStack, hookStack);
+  const primitiveIndex = findPrimitiveIndex(hookStack, hook);
+  if (
+    rootIndex === -1 ||
+    primitiveIndex === -1 ||
+    rootIndex - primitiveIndex < 2
+  ) {
+    // Something went wrong. Give up.
+    return null;
+  }
+  return hookStack.slice(primitiveIndex, rootIndex - 1);
+}
+
+function parseCustomHookName(functionName: void | string): string {
+  if (!functionName) {
+    return '';
+  }
+  let startIndex = functionName.lastIndexOf('.');
+  if (startIndex === -1) {
+    startIndex = 0;
+  }
+  if (functionName.substr(startIndex, 3) === 'use') {
+    startIndex += 3;
+  }
+  return functionName.substr(startIndex);
+}
+
+function buildTree(rootStack, readHookLog): HooksTree {
+  const rootChildren = [];
+  let prevStack = null;
+  let levelChildren = rootChildren;
+  const stackOfChildren = [];
+  for (let i = 0; i < readHookLog.length; i++) {
+    const hook = readHookLog[i];
+    const stack = parseTrimmedStack(rootStack, hook);
+    if (stack !== null) {
+      // Note: The indices 0 <= n < length-1 will contain the names.
+      // The indices 1 <= n < length will contain the source locations.
+      // That's why we get the name from n - 1 and don't check the source
+      // of index 0.
+      let commonSteps = 0;
+      if (prevStack !== null) {
+        // Compare the current level's stack to the new stack.
+        while (commonSteps < stack.length && commonSteps < prevStack.length) {
+          const stackSource = stack[stack.length - commonSteps - 1].source;
+          const prevSource =
+            prevStack[prevStack.length - commonSteps - 1].source;
+          if (stackSource !== prevSource) {
+            break;
+          }
+          commonSteps++;
+        }
+        // Pop back the stack as many steps as were not common.
+        for (let j = prevStack.length - 1; j > commonSteps; j--) {
+          levelChildren = stackOfChildren.pop();
+        }
+      }
+      // The remaining part of the new stack are custom hooks. Push them
+      // to the tree.
+      for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
+        const children = [];
+        levelChildren.push({
+          name: parseCustomHookName(stack[j - 1].functionName),
+          value: undefined,
+          subHooks: children,
+        });
+        stackOfChildren.push(levelChildren);
+        levelChildren = children;
+      }
+      prevStack = stack;
+    }
+    levelChildren.push({
+      name: hook.primitive,
+      value: hook.value,
+      subHooks: [],
+    });
+  }
+
+  // Associate custom hook values (useDebugValue() hook entries) with the correct hooks.
+  rollupDebugValues(rootChildren, null);
+
+  return rootChildren;
+}
+
+// Custom hooks support user-configurable labels (via the useDebugValue() hook).
+// That hook adds the user-provided values to the hooks tree.
+// This method removes those values (so they don't appear in DevTools),
+// and bubbles them up to the "value" attribute of their parent custom hook.
+function rollupDebugValues(
+  hooksTree: HooksTree,
+  parentHooksNode: HooksNode | null
+): void {
+  const debugValueHooksNodes: Array<HooksNode> = [];
+
+  for (let i = 0; i < hooksTree.length; i++) {
+    const hooksNode = hooksTree[i];
+    if (hooksNode.name === 'DebugValue' && hooksNode.subHooks.length === 0) {
+      hooksTree.splice(i, 1);
+      i--;
+      debugValueHooksNodes.push(hooksNode);
+    } else {
+      rollupDebugValues(hooksNode.subHooks, hooksNode);
+    }
+  }
+
+  // Bubble debug value labels to their parent custom hook.
+  // If there is no parent hook, just ignore them.
+  // (We may warn about this in the future.)
+  if (parentHooksNode !== null) {
+    if (debugValueHooksNodes.length === 1) {
+      parentHooksNode.value = debugValueHooksNodes[0].value;
+    } else if (debugValueHooksNodes.length > 1) {
+      parentHooksNode.value = debugValueHooksNodes.map(({ value }) => value);
+    }
+  }
+}
+
+export function inspectHooks<Props>(
+  renderFunction: Props => React$Node,
+  props: Props,
+  currentDispatcher: ReactCurrentDispatcher
+): HooksTree {
+  const previousDispatcher = currentDispatcher.current;
+  let readHookLog;
+  currentDispatcher.current = Dispatcher;
+  let ancestorStackError;
+  try {
+    ancestorStackError = new Error();
+    renderFunction(props);
+  } finally {
+    readHookLog = hookLog;
+    hookLog = [];
+    currentDispatcher.current = previousDispatcher;
+  }
+  const rootStack = ErrorStackParser.parse(ancestorStackError);
+  return buildTree(rootStack, readHookLog);
+}
+
+function setupContexts(contextMap: Map<any, any>, fiber: Fiber) {
+  let current = fiber;
+  while (current) {
+    if (current.tag === ContextProvider) {
+      const providerType: any = current.type;
+      const context: any = providerType._context;
+      if (!contextMap.has(context)) {
+        // Store the current value that we're going to restore later.
+        contextMap.set(context, context._currentValue);
+        // Set the inner most provider value on the context.
+        context._currentValue = current.memoizedProps.value;
+      }
+    }
+    current = current.return;
+  }
+}
+
+function restoreContexts(contextMap: Map<any, any>) {
+  contextMap.forEach((value, context) => (context._currentValue = value));
+}
+
+function inspectHooksOfForwardRef<Props, Ref>(
+  renderFunction: (Props, Ref) => React$Node,
+  props: Props,
+  ref: Ref,
+  currentDispatcher: ReactCurrentDispatcher
+): HooksTree {
+  const previousDispatcher = currentDispatcher.current;
+  let readHookLog;
+  currentDispatcher.current = Dispatcher;
+  let ancestorStackError;
+  try {
+    ancestorStackError = new Error();
+    renderFunction(props, ref);
+  } finally {
+    readHookLog = hookLog;
+    hookLog = [];
+    currentDispatcher.current = previousDispatcher;
+  }
+  const rootStack = ErrorStackParser.parse(ancestorStackError);
+  return buildTree(rootStack, readHookLog);
+}
+
+function resolveDefaultProps(Component, baseProps) {
+  if (Component && Component.defaultProps) {
+    // Resolve default props. Taken from ReactElement
+    const props = Object.assign({}, baseProps);
+    const defaultProps = Component.defaultProps;
+    for (const propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+    return props;
+  }
+  return baseProps;
+}
+
+export function inspectHooksOfFiber(
+  fiber: Fiber,
+  currentDispatcher: ReactCurrentDispatcher
+) {
+  if (
+    fiber.tag !== FunctionComponent &&
+    fiber.tag !== SimpleMemoComponent &&
+    fiber.tag !== ForwardRef
+  ) {
+    throw new Error(
+      'Unknown Fiber. Needs to be a function component to inspect hooks.'
+    );
+  }
+  // Warm up the cache so that it doesn't consume the currentHook.
+  getPrimitiveStackCache();
+  const type = fiber.type;
+  let props = fiber.memoizedProps;
+  if (type !== fiber.elementType) {
+    props = resolveDefaultProps(type, props);
+  }
+  // Set up the current hook so that we can step through and read the
+  // current state from them.
+  currentHook = (fiber.memoizedState: Hook);
+  const contextMap = new Map();
+  try {
+    setupContexts(contextMap, fiber);
+    if (fiber.tag === ForwardRef) {
+      return inspectHooksOfForwardRef(
+        type.render,
+        props,
+        fiber.ref,
+        currentDispatcher
+      );
+    }
+    return inspectHooks(type, props, currentDispatcher);
+  } finally {
+    currentHook = null;
+    restoreContexts(contextMap);
+  }
+}
diff --git a/src/backend/agent.js b/src/backend/agent.js
index d33a59432175..377e3d86fc11 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -24,12 +24,23 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
-    bridge.on('shutdown', () => this.emit('shutdown'));
+    bridge.addListener('shutdown', () => this.emit('shutdown'));
 
+    bridge.addListener('inspectElement', this.inspectElement);
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
   }
 
+  inspectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      this._bridge.send('inspectedElement', renderer.inspectElement(id));
+    }
+  };
+
   setRendererInterface(
     rendererID: RendererID,
     rendererInterface: RendererInterface
@@ -37,16 +48,6 @@ export default class Agent extends EventEmitter {
     this._rendererInterfaces[rendererID] = rendererInterface;
   }
 
-  onHookDisplayNames = (displayNames: Map<number, string>) => {
-    debug('onHookDisplayNames', displayNames);
-    this._bridge.send('displayNames', displayNames);
-  };
-
-  onHookKeys = (keys: Map<number, string>) => {
-    debug('onHookKeys', keys);
-    this._bridge.send('keys', keys);
-  };
-
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
     this._bridge.send('operations', operations, [operations.buffer]);
diff --git a/src/backend/index.js b/src/backend/index.js
index 029bd655c407..85382f380564 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,16 +1,27 @@
 // @flow
 
-import type { Hook } from './types';
+import type { Hook, ReactRenderer, RendererInterface } from './types';
 import Agent from './agent';
 
 import { attach } from './renderer';
 
 export function initBackend(hook: Hook, agent: Agent): void {
   const subs = [
-    hook.sub('renderer-attached', ({ id, renderer, rendererInterface }) => {
-      agent.setRendererInterface(id, rendererInterface);
-      rendererInterface.walkTree();
-    }),
+    hook.sub(
+      'renderer-attached',
+      ({
+        id,
+        renderer,
+        rendererInterface,
+      }: {
+        id: number,
+        renderer: ReactRenderer,
+        rendererInterface: RendererInterface,
+      }) => {
+        agent.setRendererInterface(id, rendererInterface);
+        rendererInterface.walkTree();
+      }
+    ),
 
     hook.sub('operations', agent.onHookOperations),
     hook.sub('rootCommitted', agent.onHookRootCommitted),
@@ -18,9 +29,9 @@ export function initBackend(hook: Hook, agent: Agent): void {
     // TODO Add additional subscriptions required for profiling mode
   ];
 
-  const attachRenderer = (id, renderer) => {
+  const attachRenderer = (id: number, renderer: ReactRenderer) => {
     const rendererInterface = attach(hook, id, renderer);
-    hook.rendererInterfaces[id] = rendererInterface;
+    hook.rendererInterfaces.set(id, rendererInterface);
     hook.emit('renderer-attached', {
       id,
       renderer,
@@ -29,23 +40,25 @@ export function initBackend(hook: Hook, agent: Agent): void {
   };
 
   // Connect renderers that have already injected themselves.
-  for (let id in hook.renderers) {
-    const renderer = hook.renderers[id];
+  hook.renderers.forEach((renderer, id) => {
     attachRenderer(id, renderer);
-  }
+  });
 
   // Connect any new renderers that injected themselves.
-  hook.on('renderer', ({ id, renderer }) => {
-    attachRenderer(id, renderer);
-  });
+  hook.on(
+    'renderer',
+    ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {
+      attachRenderer(id, renderer);
+    }
+  );
 
   hook.emit('react-devtools', agent);
   hook.reactDevtoolsAgent = agent;
   agent.addListener('shutdown', () => {
     subs.forEach(fn => fn());
-    for (let id in hook.rendererInterfaces) {
-      hook.rendererInterfaces[id].cleanup();
-    }
+    hook.rendererInterfaces.forEach(rendererInterface => {
+      rendererInterface.cleanup();
+    });
     hook.reactDevtoolsAgent = null;
   });
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 815225a2bc5c..dbb7b3ea8b3a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -12,13 +12,15 @@ import {
   ElementTypeSuspense,
 } from 'src/devtools/types';
 import { utfEncodeString } from '../utils';
-import { getDisplayName } from './utils';
+import { cleanForBridge, cleanPropsForBridge, getDisplayName } from './utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
 } from '../constants';
+import { getUID } from '../utils';
+import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
   Fiber,
@@ -27,6 +29,7 @@ import type {
   FiberData,
   RendererInterface,
 } from './types';
+import type { InspectedElement } from 'src/devtools/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -51,7 +54,9 @@ function getInternalReactConstants(version) {
   };
 
   const ReactTypeOfSideEffect = {
-    PerformedWork: 1,
+    NoEffect: 0b00,
+    PerformedWork: 0b01,
+    Placement: 0b10,
   };
 
   let ReactTypeOfWork;
@@ -146,7 +151,7 @@ function getInternalReactConstants(version) {
 
 export function attach(
   hook: Hook,
-  rendererID: string,
+  rendererID: number,
   renderer: ReactRenderer
 ): RendererInterface {
   const {
@@ -154,7 +159,7 @@ export function attach(
     ReactSymbols,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(renderer.version);
-  const { PerformedWork } = ReactTypeOfSideEffect;
+  const { NoEffect, PerformedWork, Placement } = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -212,8 +217,6 @@ export function attach(
     }
   };
 
-  const primaryFibers: WeakSet<Fiber> = new WeakSet();
-
   // Keep this function in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { type, tag } = fiber;
@@ -443,12 +446,15 @@ export function attach(
     return fiber;
   }
 
-  let uidCounter: number = 0;
-  const fiberToIDMap: WeakMap<Fiber, number> = new WeakMap();
+  const fiberToIDMap: Map<Fiber, number> = new Map();
+  const idToFiberMap: Map<number, Fiber> = new Map();
+  const primaryFibers: Set<Fiber> = new Set();
 
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
-      fiberToIDMap.set(primaryFiber, ++uidCounter);
+      const id = getUID();
+      fiberToIDMap.set(primaryFiber, id);
+      idToFiberMap.set(id, primaryFiber);
     }
     return ((fiberToIDMap.get(primaryFiber): any): number);
   }
@@ -509,6 +515,13 @@ export function attach(
   }
 
   function flushPendingEvents(root: Object): void {
+    // Identify which renderer this update is coming from.
+    // This enables roots to be mapped to renderers,
+    // Which in turn enables fiber props, states, and hooks to be inspected.
+    const idArray = new Uint32Array(1);
+    idArray[0] = rendererID;
+    addOperation(idArray, true);
+
     // Let the frontend know about tree operations.
     hook.emit('operations', pendingOperations);
     pendingOperations = new Uint32Array(0);
@@ -575,8 +588,8 @@ export function attach(
   function enqueueUnmount(fiber) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
+    const id = getFiberID(primaryFiber);
     if (isRoot) {
-      const id = getFiberID(getPrimaryFiber(fiber));
       const operation = new Uint32Array(2);
       operation[0] = TREE_OPERATION_REMOVE;
       operation[1] = id;
@@ -585,15 +598,15 @@ export function attach(
       // Non-root fibers are deleted during the commit phase.
       // They are deleted in the child-first order. However
       // DevTools currently expects deletions to be parent-first.
-      // This is why we unshift deletions rather than push them.
-      const id = getFiberID(getPrimaryFiber(fiber));
+      // This is why we unshift deletions rather tha
       const operation = new Uint32Array(2);
       operation[0] = TREE_OPERATION_REMOVE;
       operation[1] = id;
       addOperation(operation, true);
     }
-    primaryFibers.delete(primaryFiber);
+    idToFiberMap.delete(id);
     fiberToIDMap.delete(primaryFiber);
+    primaryFibers.delete(primaryFiber);
   }
 
   function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
@@ -820,11 +833,255 @@ export function attach(
     return null;
   }
 
+  const MOUNTING = 1;
+  const MOUNTED = 2;
+  const UNMOUNTED = 3;
+
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  function isFiberMountedImpl(fiber: Fiber): number {
+    let node = fiber;
+    if (!fiber.alternate) {
+      // If there is no alternate, this might be a new tree that isn't inserted
+      // yet. If it is, then it will have a pending insertion effect on it.
+      if ((node.effectTag & Placement) !== NoEffect) {
+        return MOUNTING;
+      }
+      while (node.return) {
+        node = node.return;
+        if ((node.effectTag & Placement) !== NoEffect) {
+          return MOUNTING;
+        }
+      }
+    } else {
+      while (node.return) {
+        node = node.return;
+      }
+    }
+    if (node.tag === HostRoot) {
+      // TODO: Check if this was a nested HostRoot when used with
+      // renderContainerIntoSubtree.
+      return MOUNTED;
+    }
+    // If we didn't hit the root, that means that we're in an disconnected tree
+    // that has been unmounted.
+    return UNMOUNTED;
+  }
+
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
+  function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
+    let alternate = fiber.alternate;
+    if (!alternate) {
+      // If there is no alternate, then we only need to check if it is mounted.
+      const state = isFiberMountedImpl(fiber);
+      if (state === UNMOUNTED) {
+        throw Error('Unable to find node on an unmounted component.');
+      }
+      if (state === MOUNTING) {
+        return null;
+      }
+      return fiber;
+    }
+    // If we have two possible branches, we'll walk backwards up to the root
+    // to see what path the root points to. On the way we may hit one of the
+    // special cases and we'll deal with them.
+    let a = fiber;
+    let b = alternate;
+    while (true) {
+      let parentA = a.return;
+      let parentB = parentA ? parentA.alternate : null;
+      if (!parentA || !parentB) {
+        // We're at the root.
+        break;
+      }
+
+      // If both copies of the parent fiber point to the same child, we can
+      // assume that the child is current. This happens when we bailout on low
+      // priority: the bailed out fiber's child reuses the current child.
+      if (parentA.child === parentB.child) {
+        let child = parentA.child;
+        while (child) {
+          if (child === a) {
+            // We've determined that A is the current branch.
+            if (isFiberMountedImpl(parentA) !== MOUNTED) {
+              throw Error('Unable to find node on an unmounted component.');
+            }
+            return fiber;
+          }
+          if (child === b) {
+            // We've determined that B is the current branch.
+            if (isFiberMountedImpl(parentA) !== MOUNTED) {
+              throw Error('Unable to find node on an unmounted component.');
+            }
+            return alternate;
+          }
+          child = child.sibling;
+        }
+        // We should never have an alternate for any mounting node. So the only
+        // way this could possibly happen is if this was unmounted, if at all.
+        throw Error('Unable to find node on an unmounted component.');
+      }
+
+      if (a.return !== b.return) {
+        // The return pointer of A and the return pointer of B point to different
+        // fibers. We assume that return pointers never criss-cross, so A must
+        // belong to the child set of A.return, and B must belong to the child
+        // set of B.return.
+        a = parentA;
+        b = parentB;
+      } else {
+        // The return pointers point to the same fiber. We'll have to use the
+        // default, slow path: scan the child sets of each parent alternate to see
+        // which child belongs to which set.
+        //
+        // Search parent A's child set
+        let didFindChild = false;
+        let child = parentA.child;
+        while (child) {
+          if (child === a) {
+            didFindChild = true;
+            a = parentA;
+            b = parentB;
+            break;
+          }
+          if (child === b) {
+            didFindChild = true;
+            b = parentA;
+            a = parentB;
+            break;
+          }
+          child = child.sibling;
+        }
+        if (!didFindChild) {
+          // Search parent B's child set
+          child = parentB.child;
+          while (child) {
+            if (child === a) {
+              didFindChild = true;
+              a = parentB;
+              b = parentA;
+              break;
+            }
+            if (child === b) {
+              didFindChild = true;
+              b = parentB;
+              a = parentA;
+              break;
+            }
+            child = child.sibling;
+          }
+          if (!didFindChild) {
+            throw Error(
+              'Child was not found in either parent set. This indicates a bug ' +
+                'in React related to the return pointer. Please file an issue.'
+            );
+          }
+        }
+      }
+
+      if (a.alternate !== b) {
+        throw Error(
+          "Return fibers should always be each others' alternates. " +
+            'This error is likely caused by a bug in React. Please file an issue.'
+        );
+      }
+    }
+    // If the root is not a host container, we're in a disconnected tree. I.e.
+    // unmounted.
+    if (a.tag !== HostRoot) {
+      throw Error('Unable to find node on an unmounted component.');
+    }
+    if (a.stateNode.current === a) {
+      // We've determined that A is the current branch.
+      return fiber;
+    }
+    // Otherwise B has to be current branch.
+    return alternate;
+  }
+
+  function inspectElement(id: number): InspectedElement | null {
+    let fiber = idToFiberMap.get(id);
+
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return null;
+    }
+
+    // Find the currently mounted version of this fiber (so we don't show the wrong props and state).
+    fiber = findCurrentFiberUsingSlowPath(fiber);
+
+    const {
+      _debugOwner,
+      _debugSource,
+      stateNode,
+      memoizedProps,
+      memoizedState,
+      tag,
+    } = ((fiber: any): Fiber);
+
+    const usesHooks =
+      (tag === FunctionComponent ||
+        tag === SimpleMemoComponent ||
+        tag === ForwardRef) &&
+      !!memoizedState;
+
+    const hasContext =
+      tag === ClassComponent ||
+      tag === FunctionComponent ||
+      tag === IncompleteClassComponent ||
+      tag === IndeterminateComponent;
+
+    let owners = null;
+    if (_debugOwner) {
+      owners = [];
+      let owner = _debugOwner;
+      while (owner !== null) {
+        owners.push({
+          displayName: getDataForFiber(owner).displayName || 'Unknown',
+          id: getFiberID(getPrimaryFiber(owner)),
+        });
+        owner = owner._debugOwner;
+      }
+    }
+
+    return {
+      id,
+
+      // Does the current renderer support editable props/state/hooks?
+      canEditValues: false, // TODO
+
+      // Inspectable properties.
+      // TODO Sanitize props, state, and context
+      context:
+        (hasContext &&
+          stateNode &&
+          Object.keys(stateNode.context).length > 0 &&
+          cleanForBridge(stateNode.context)) ||
+        null,
+      hooks: usesHooks
+        ? cleanForBridge(
+            inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
+          )
+        : null,
+      props: cleanPropsForBridge(memoizedProps),
+      state: usesHooks ? null : cleanForBridge(memoizedState),
+
+      // List of owners
+      owners,
+
+      // Location of component in source coude.
+      source: _debugSource,
+    };
+  }
+
   return {
     getNativeFromReactElement,
     getReactElementFromNative,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
+    inspectElement,
     cleanup,
     walkTree,
     renderer,
diff --git a/src/backend/types.js b/src/backend/types.js
index ab05c3c3073e..eaf735853900 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'src/devtools/types';
+import type { ElementType, InspectedElement } from 'src/devtools/types';
 
 type BundleType =
   | 0 // PROD
@@ -24,7 +24,9 @@ export type Interaction = {|
 |};
 
 export type NativeType = {};
-export type RendererID = string;
+export type RendererID = number;
+
+type Dispatcher = any;
 
 export type ReactRenderer = {
   findHostInstanceByFiber: (fiber: Object) => ?NativeType,
@@ -36,6 +38,9 @@ export type ReactRenderer = {
     path: Array<string | number>,
     value: any
   ) => void,
+
+  // Only injected by React v16.8+ in order to support hooks inspection.
+  currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
 export type RendererInterface = {
@@ -43,6 +48,7 @@ export type RendererInterface = {
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getReactElementFromNative?: ?(component: NativeType) => ?Fiber,
   handleCommitFiberRoot: (fiber: Object) => void,
+  inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   walkTree: () => void,
 };
@@ -51,11 +57,11 @@ export type Handler = (data: any) => void;
 
 export type Hook = {
   listeners: { [key: string]: Array<Handler> },
-  rendererInterfaces: { [key: string]: RendererInterface },
-  renderers: { [key: string]: ReactRenderer },
+  rendererInterfaces: Map<RendererID, RendererInterface>,
+  renderers: Map<RendererID, ReactRenderer>,
 
   emit: (evt: string, data: any) => void,
-  getFiberRoots: (rendererID: string) => Set<Object>,
+  getFiberRoots: (rendererID: RendererID) => Set<Object>,
   inject: (renderer: ReactRenderer) => string | null,
   on: (evt: string, handler: Handler) => void,
   off: (evt: string, handler: Handler) => void,
@@ -67,3 +73,16 @@ export type Hook = {
   onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,
   onCommitFiberRoot: (rendererID: RendererID, fiber: Object) => void,
 };
+
+export type HooksNode = {
+  name: string,
+  value: mixed,
+  subHooks: Array<HooksNode>,
+};
+export type HooksTree = Array<HooksNode>;
+
+export type InspectedHooks = {|
+  elementID: string,
+  id: string,
+  hooksTree: HooksTree,
+|};
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 00bd50760026..0a4837d0f97f 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -1,5 +1,10 @@
 // @flow
 
+import { isElement } from 'react-is';
+import { dehydrate } from '../hydration';
+
+import type { DehydratedData } from 'src/devtools/types';
+
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
@@ -45,11 +50,38 @@ export function getDisplayName(
   return displayName;
 }
 
-export function guid(): string {
-  return (
-    'g' +
-    Math.random()
-      .toString(16)
-      .substr(2)
-  );
+export function cleanForBridge(data: Object | null): DehydratedData | null {
+  if (data !== null) {
+    const cleaned = [];
+
+    return {
+      data: dehydrate(data, cleaned),
+      cleaned,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function cleanPropsForBridge(props: Object): DehydratedData | null {
+  if (props !== null) {
+    const dehydratedData = cleanForBridge(props);
+    if (dehydratedData !== null) {
+      // For now, let's just filter children that are React elements.
+      const { children } = props;
+      if (children != null) {
+        if (isElement(children)) {
+          delete dehydratedData.data.children;
+        } else if (Array.isArray(children)) {
+          dehydratedData.data.children = children.filter(
+            child => !isElement(child)
+          );
+        }
+      }
+
+      return dehydratedData;
+    }
+  }
+
+  return null;
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b698afd7758b..8982abe9fc90 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -40,6 +40,9 @@ export default class Store extends EventEmitter {
   // Passive effects will check it for changes between render and mount.
   _roots: $ReadOnlyArray<number> = [];
 
+  // Renderer ID is needed to support inspection fiber props, state, and hooks.
+  _rootIDToRendererID: Map<number, number> = new Map();
+
   constructor(bridge: Bridge) {
     super();
 
@@ -117,6 +120,70 @@ export default class Store extends EventEmitter {
     return element;
   }
 
+  getIndexOfElementID(id: number): number | null {
+    const element = this.getElementByID(id);
+
+    if (element === null) {
+      return null;
+    }
+
+    // Walk up the tree to the root.
+    // Increment the index by one for each node we encounter,
+    // and by the weight of all nodes to the left of the current one.
+    // This should be a relatively fast way of determining the index of a node within the tree.
+    let previousID = id;
+    let currentID = element.parentID;
+    let index = 0;
+    while (true) {
+      const current = ((this._idToElement.get(currentID): any): Element);
+      if (current.parentID === 0) {
+        // We found the root; stop crawling.
+        break;
+      }
+
+      index++;
+
+      const { children } = current;
+      for (let i = 0; i < children.length; i++) {
+        const childID = children[i];
+        if (childID === previousID) {
+          break;
+        }
+        const child = ((this._idToElement.get(childID): any): Element);
+        index += child.weight;
+      }
+
+      previousID = current.id;
+      currentID = current.parentID;
+    }
+
+    // At this point, the current ID is a root (from the previous loop).
+    // We also need to offset the index by previous root weights.
+    for (let i = 0; i < this._roots.length; i++) {
+      const rootID = this._roots[i];
+      if (rootID === currentID) {
+        break;
+      }
+      const root = ((this._idToElement.get(rootID): any): Element);
+      index += root.weight;
+    }
+
+    return index;
+  }
+
+  getRendererIDForElement(id: number): number | null {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        const rendererID = this._rootIDToRendererID.get(current.id);
+        return rendererID == null ? null : ((rendererID: any): number);
+      } else {
+        current = this._idToElement.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
   onBridgeOperations = (operations: Uint32Array) => {
     if (!(operations instanceof Uint32Array)) {
       // $FlowFixMe TODO HACK Temporary workaround for the fact that Chrome is not transferring the typed array.
@@ -127,7 +194,9 @@ export default class Store extends EventEmitter {
 
     let haveRootsChanged = false;
 
-    let i = 0;
+    const rendererID = operations[0];
+
+    let i = 1;
     while (i < operations.length) {
       let id: number = ((null: any): number);
       let element: Element = ((null: any): Element);
@@ -150,6 +219,7 @@ export default class Store extends EventEmitter {
             debug('Add', `new root fiber ${id}`);
 
             this._roots = this._roots.concat(id);
+            this._rootIDToRendererID.set(id, rendererID);
 
             this._idToElement.set(id, {
               children: [],
@@ -227,6 +297,7 @@ export default class Store extends EventEmitter {
           parentElement = ((this._idToElement.get(parentID): any): Element);
           if (parentElement == null) {
             this._roots = this._roots.filter(rootID => rootID !== id);
+            this._rootIDToRendererID.delete(id);
           } else {
             parentElement.children = parentElement.children.filter(
               childID => childID !== id
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 904a415ad190..58e421eab74b 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -38,6 +38,11 @@ export type Element = {|
   weight: number,
 |};
 
+export type Owner = {|
+  displayName: string,
+  id: number,
+|};
+
 export type InspectedElement = {|
   id: number,
 
@@ -51,10 +56,10 @@ export type InspectedElement = {|
   state: Object | null,
 
   // List of owners
-  owners: Array<number>,
+  owners: Array<Owner> | null,
 
   // Location of component in source coude.
-  source: Object,
+  source: Object | null,
 |};
 
 // TODO: Add profiling type
@@ -66,3 +71,8 @@ export type TreeMetadataType = {|
   size: number,
   store: Store,
 |};
+
+export type DehydratedData = {|
+  cleaned: Array<Array<string>>,
+  data: Object,
+|};
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 24f54d909bfb..9306a2750fa8 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -6,6 +6,8 @@
   position: relative;
   white-space: nowrap;
   line-height: 20px;
+  display: flex;
+  align-items: center;
 }
 .Element:hover {
   background-color: var(--color-state03);
@@ -16,6 +18,7 @@
 
   /* Invert colors */
   --color-component: var(--color-base00);
+  --color-arrow: var(--color-base00);
   --color-tree-tag: rgba(255, 255, 255, 0.8);
   --color-tree-attr-name: #b3e5fc;
   --color-tree-attr-value: #fff;
@@ -27,10 +30,7 @@
   margin-left: -1rem;
   width: 1rem;
   height: 1rem;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23777d88' d='M8 5v14l11-7z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
-  background-size: 12px 12px;
-  background-repeat: no-repeat;
-  background-position: center;
+  color: var(--color-arrow);
 }
 .ArrowOpen {
   transform: rotate(90deg);
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index b625827fdfb5..053340a46672 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -3,6 +3,7 @@
 import React, { Fragment, useCallback, useContext } from 'react';
 import { TreeContext } from './context';
 import { SelectedElementContext } from './SelectedElementContext';
+import Icon from './Icon';
 
 import styles from './Element.css';
 
@@ -23,6 +24,8 @@ export default function Element({ index, style }: Props) {
     return null;
   }
 
+  // TODO Add click and key handlers for toggling element open/close state.
+
   const { children, depth, displayName, id, key } = element;
 
   const selectedElement = useContext(SelectedElementContext);
@@ -33,8 +36,6 @@ export default function Element({ index, style }: Props) {
     [id]
   );
 
-  // TODO: Add click and key handlers for toggling element open/close state.
-
   return (
     <div
       className={
@@ -42,11 +43,15 @@ export default function Element({ index, style }: Props) {
       }
       onClick={handleClick}
       style={{
-        ...style,
+        ...style, // "style" comes from react-window
         paddingLeft: `${1 + depth}rem`,
       }}
     >
-      {children.length > 0 && <span className={styles.ArrowOpen} />}
+      {children.length > 0 && (
+        <span className={styles.ArrowOpen}>
+          <Icon type="arrow" />
+        </span>
+      )}
 
       <span className={styles.Component}>
         {displayName}
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index bc9e34b53f50..dea13215c21d 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -5,7 +5,6 @@
   flex-direction: row;
 
   font-family: var(--font-family-sans);
-  -webkit-font-smoothing: antialiased;
 }
 
 .TreeWrapper {
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 1d9e87c65258..a201174e1b92 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
-import { StoreContext, TreeContext } from './context';
+import { BridgeContext, StoreContext, TreeContext } from './context';
 import SelectedElement from './SelectedElement';
 import { SelectedElementController } from './SelectedElementContext';
 import styles from './Elements.css';
@@ -26,7 +26,7 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
     store,
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const handler = () => {
       setTreeContext({
         size: store.numElements,
@@ -34,6 +34,12 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
       });
     };
 
+    // Check for changes that happened between async render and passive effect.
+    // (We had not yet subscribed to the store so we would have missed these.)
+    if (treeContext.size !== store.numElements) {
+      handler();
+    }
+
     store.addListener('rootCommitted', handler);
 
     return () => store.removeListener('rootCommitted', handler);
@@ -41,19 +47,21 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
 
   // TODO Flex wrappers below should be user resizable.
   return (
-    <StoreContext.Provider value={store}>
-      <TreeContext.Provider value={treeContext}>
-        <SelectedElementController>
-          <div className={styles.Elements}>
-            <div className={styles.TreeWrapper}>
-              <Tree />
-            </div>
-            <div className={styles.SelectedElementWrapper}>
-              <SelectedElement />
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContext.Provider value={treeContext}>
+          <SelectedElementController>
+            <div className={styles.Elements}>
+              <div className={styles.TreeWrapper}>
+                <Tree />
+              </div>
+              <div className={styles.SelectedElementWrapper}>
+                <SelectedElement />
+              </div>
             </div>
-          </div>
-        </SelectedElementController>
-      </TreeContext.Provider>
-    </StoreContext.Provider>
+          </SelectedElementController>
+        </TreeContext.Provider>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
   );
 }
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
new file mode 100644
index 000000000000..681b63e00008
--- /dev/null
+++ b/src/devtools/views/HooksTree.css
@@ -0,0 +1,10 @@
+.HooksTree {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--color-base02);
+}
+
+.ComingSoon {
+  padding-left: 1rem;
+  color: var(--color-base03);
+  font-style: italic;
+}
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
new file mode 100644
index 000000000000..11f0414312d8
--- /dev/null
+++ b/src/devtools/views/HooksTree.js
@@ -0,0 +1,24 @@
+// @flow
+
+import React from 'react';
+import styles from './HooksTree.css';
+
+import type { InspectedHooks } from 'src/backend/types';
+
+type Props = {|
+  inspectedHooks: InspectedHooks | null,
+|};
+
+export default function HooksTree({ inspectedHooks }: Props) {
+  if (inspectedHooks === null) {
+    return null;
+  }
+
+  // TODO
+  return (
+    <div className={styles.HooksTree}>
+      hooks
+      <div className={styles.ComingSoon}>Coming soon...</div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Icon.css b/src/devtools/views/Icon.css
new file mode 100644
index 000000000000..2141ede58bd7
--- /dev/null
+++ b/src/devtools/views/Icon.css
@@ -0,0 +1,5 @@
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
new file mode 100644
index 000000000000..c58aa0afde08
--- /dev/null
+++ b/src/devtools/views/Icon.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React from 'react';
+import styles from './Icon.css';
+
+type Props = {|
+  type: 'arrow',
+|};
+
+export default function Icon({ type }: Props) {
+  let pathData = null;
+  switch (type) {
+    case 'arrow':
+      pathData = PATH_ARROW;
+      break;
+    default:
+      console.warn(`Unsupported type "${type}" specified for Icon`);
+      break;
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.Icon}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path fill="currentColor" d={pathData} />
+    </svg>
+  );
+}
+
+const PATH_ARROW = 'M8 5v14l11-7z';
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
new file mode 100644
index 000000000000..b2ecc50e590b
--- /dev/null
+++ b/src/devtools/views/InspectedElementTree.css
@@ -0,0 +1,20 @@
+.InspectedElementTree {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--color-base02);
+}
+
+.Item {
+}
+
+.Name {
+  color: var(--color-tree-attr-name);
+}
+
+.Value {
+  color: var(--color-tree-attr-value);
+}
+
+.None {
+  color: var(--color-base03);
+  font-style: italic;
+}
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
new file mode 100644
index 000000000000..365a39518d20
--- /dev/null
+++ b/src/devtools/views/InspectedElementTree.js
@@ -0,0 +1,126 @@
+// @flow
+
+import React from 'react';
+import { meta } from '../../hydration';
+import styles from './InspectedElementTree.css';
+
+type Props = {|
+  label: string,
+  data: Object | null,
+|};
+
+export default function InspectedElementTree({ data, label }: Props) {
+  if (data === null || Object.keys(data).length === 0) {
+    return null;
+  } else {
+    // TODO Add click and key handlers for toggling element open/close state.
+    // TODO Support editable props
+
+    return (
+      <div className={styles.InspectedElementTree}>
+        <div className={styles.Item}>{label}</div>
+        {Object.keys(data).map(name => (
+          <KeyValue key={name} depth={1} name={name} value={data[name]} />
+        ))}
+      </div>
+    );
+  }
+}
+
+type KeyValueProps = {|
+  depth: number,
+  name: string,
+  value: any,
+|};
+
+function KeyValue({ depth, name, value }: KeyValueProps) {
+  const dataType = typeof value;
+  const isSimpleType =
+    dataType === 'number' ||
+    dataType === 'string' ||
+    dataType === 'boolean' ||
+    value == null;
+
+  let children = null;
+  if (isSimpleType) {
+    children = (
+      <div
+        key="root"
+        className={styles.Item}
+        style={{ paddingLeft: `${depth}rem` }}
+      >
+        <span className={styles.Name}>{name}</span>:{' '}
+        <span className={styles.Value}>
+          {dataType === 'string' ? `"${value}"` : value}
+        </span>
+      </div>
+    );
+  } else if (value.hasOwnProperty(meta.type)) {
+    children = (
+      <div
+        key="root"
+        className={styles.Item}
+        style={{ paddingLeft: `${depth}rem` }}
+      >
+        <span className={styles.Name}>{name}</span>:{' '}
+        <span className={styles.Value}>{getMetaValueLabel(value)}</span>
+      </div>
+    );
+  } else {
+    if (Array.isArray(value)) {
+      children = value.map((innerValue, index) => (
+        <KeyValue
+          key={index}
+          depth={depth + 1}
+          name={index}
+          value={value[index]}
+        />
+      ));
+      children.unshift(
+        <div
+          key="root"
+          className={styles.Item}
+          style={{ paddingLeft: `${depth}rem` }}
+        >
+          <span className={styles.Name}>{name}</span>: <span>Array</span>
+        </div>
+      );
+    } else {
+      children = Object.entries(value).map(([name, value]) => (
+        <KeyValue key={name} depth={depth + 1} name={name} value={value} />
+      ));
+      children.unshift(
+        <div
+          key="root"
+          className={styles.Item}
+          style={{ paddingLeft: `${depth}rem` }}
+        >
+          <span className={styles.Name}>{name}</span>: <span>Object</span>
+        </div>
+      );
+    }
+  }
+
+  return children;
+}
+
+function getMetaValueLabel(data: Object): string | null {
+  switch (data[meta.type]) {
+    case 'function':
+      return `${data[meta.name] || 'fn'}()`;
+    case 'object':
+      return 'Object';
+    case 'date':
+    case 'symbol':
+      return data[meta.name];
+    case 'iterator':
+      return `${data[meta.name]}(…)`;
+    case 'array_buffer':
+    case 'data_view':
+    case 'array':
+    case 'typed_array':
+      return `${data[meta.name]}[${data[meta.meta].length}]`;
+    default:
+      return null;
+  }
+}
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 140eb9e032f3..40d6bb6a22a0 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -36,19 +36,47 @@
   text-overflow: ellipsis;
 }
 
-.Component {
+.Owners {
+  padding: 0.25rem;
+}
+
+.Component,
+.Owner {
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--color-component);
-  flex: 1 1 auto;
 }
-.Component:before {
+.Component:before,
+.Owner:before {
   white-space: nowrap;
   content: '<';
   color: var(--color-tree-tag);
 }
-.Component:after {
+.Component:after,
+.Owner:after {
   white-space: nowrap;
   content: '>';
   color: var(--color-tree-tag);
 }
+
+.Component {
+  flex: 1 1 auto;
+}
+
+.InspectedElement {
+  overflow: auto;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-tree-compact);
+  line-height: var(--line-height-compact);
+}
+
+.Owner {
+  padding-left: 1rem;
+  cursor: pointer;
+}
+
+.Loading {
+  padding: 0.25rem;
+  color: var(--color-base03);
+  font-style: italic;
+}
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 37f5c3c606c4..931616bafb3e 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -1,19 +1,29 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { SelectedElementContext } from './SelectedElementContext';
-import { StoreContext } from './context';
+import { BridgeContext, StoreContext } from './context';
 import ButtonIcon from './ButtonIcon';
+import HooksTree from './HooksTree';
+import InspectedElementTree from './InspectedElementTree';
+import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
 
+import type { InspectedElement } from '../types';
+import type { DehydratedData } from 'src/devtools/types';
+import type { SelectedElementContextValue } from './SelectedElementContext';
+
 export type Props = {||};
 
-export default function SelectedElement(props: Props) {
-  const { id } = useContext(SelectedElementContext);
+export default function SelectedElement(_: Props) {
+  const selectedElement = useContext(SelectedElementContext);
+  const { id } = selectedElement;
   const store = useContext(StoreContext);
   const element = id !== null ? store.getElementByID(id) : null;
 
-  // TODO Show/hide source button based on whether debug "source" is available.
+  const inspectedElement = useInspectedElement(id);
+
+  // TODO Make "view DOM" and "view source" buttons work
 
   if (element === null) {
     return (
@@ -23,6 +33,8 @@ export default function SelectedElement(props: Props) {
     );
   }
 
+  const source = inspectedElement ? inspectedElement.source : null;
+
   return (
     <div className={styles.SelectedElement}>
       <div className={styles.TitleRow}>
@@ -36,15 +48,135 @@ export default function SelectedElement(props: Props) {
           className={styles.IconButton}
           title="Highlight this element in the page"
         >
-          <ButtonIcon type="view-dom" /> DOM
-        </button>
-        <button
-          className={styles.IconButton}
-          title="View source for this element"
-        >
-          <ButtonIcon type="view-source" /> Source
+          <ButtonIcon type="view-dom" />
         </button>
+        {source !== null && (
+          <button
+            className={styles.IconButton}
+            title="View source for this element"
+          >
+            <ButtonIcon type="view-source" />
+          </button>
+        )}
       </div>
+
+      {inspectedElement === null && (
+        <div className={styles.Loading}>Loading...</div>
+      )}
+
+      {inspectedElement !== null && (
+        <InspectedElementView
+          inspectedElement={inspectedElement}
+          selectedElement={selectedElement}
+        />
+      )}
+    </div>
+  );
+}
+
+type InspectedElementViewProps = {|
+  inspectedElement: InspectedElement,
+  selectedElement: SelectedElementContextValue,
+|};
+
+function InspectedElementView({
+  inspectedElement,
+  selectedElement,
+}: InspectedElementViewProps) {
+  let { context, hooks, owners, props, state } = inspectedElement;
+
+  return (
+    <div className={styles.InspectedElement}>
+      <InspectedElementTree label="props" data={props} />
+      <InspectedElementTree label="state" data={state} />
+      <HooksTree inspectedHooks={hooks} />
+      <InspectedElementTree label="context" data={context} />
+
+      {owners !== null && owners.length > 0 && (
+        <div className={styles.Owners}>
+          <div>owners</div>
+          {owners.map(owner => (
+            <div
+              key={owner.id}
+              className={styles.Owner}
+              onClick={() => {
+                selectedElement.id = owner.id;
+              }}
+              title={owner.displayName}
+            >
+              {owner.displayName}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
+
+function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
+  if (dehydratedData !== null) {
+    return hydrate(dehydratedData.data, dehydratedData.cleaned);
+  } else {
+    return null;
+  }
+}
+
+function useInspectedElement(id: number | null): InspectedElement | null {
+  const idRef = useRef(id);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const rendererID = id === null ? null : store.getRendererIDForElement(id);
+
+  const [inspectedElement, setInspectedElement] = useState(null);
+
+  // Track the most recently-requested element.
+  // We'll ignore any backend updates about previous elements.
+  idRef.current = id;
+
+  useLayoutEffect(() => {
+    if (id === null) {
+      return () => {};
+    }
+
+    // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
+    setInspectedElement(null);
+
+    let timeoutID = null;
+
+    const sendBridgeRequest = () => {
+      bridge.send('inspectElement', { id, rendererID });
+    };
+
+    const onInspectedElement = (inspectedElement: InspectedElement) => {
+      if (idRef.current !== inspectedElement.id) {
+        // Ignore bridge updates about previously selected elements.
+        return;
+      }
+
+      inspectedElement.context = hydrateHelper(inspectedElement.context);
+      inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
+      inspectedElement.props = hydrateHelper(inspectedElement.props);
+      inspectedElement.state = hydrateHelper(inspectedElement.state);
+
+      setInspectedElement(inspectedElement);
+
+      // Ask for an update in a second...
+      timeoutID = setTimeout(sendBridgeRequest, 1000);
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
+
+    sendBridgeRequest();
+
+    return () => {
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+
+      bridge.removeListener('inspectedElement', onInspectedElement);
+    };
+  }, [id]);
+
+  return inspectedElement;
+}
diff --git a/src/devtools/views/SelectedElementContext.js b/src/devtools/views/SelectedElementContext.js
index 7d7afce7a4a7..a930cd5dd94e 100644
--- a/src/devtools/views/SelectedElementContext.js
+++ b/src/devtools/views/SelectedElementContext.js
@@ -1,9 +1,11 @@
 // @flow
 
-import React, { createContext, useMemo, useState } from 'react';
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { StoreContext } from './context';
 
-type SelectedElementContextValue = {|
+export type SelectedElementContextValue = {|
   id: number | null,
+  index: number | null,
 |};
 
 const SelectedElementContext = createContext<SelectedElementContextValue>(
@@ -18,7 +20,11 @@ type Props = {|
 
 // TODO Remove this wrapper element once global Context.write API exists.
 function SelectedElementController({ children }: Props) {
+  const store = useContext(StoreContext);
+
   const [id, setID] = useState<number | null>(null);
+  const [index, setIndex] = useState<number | null>(null);
+
   const value = useMemo(
     () => ({
       get id() {
@@ -26,6 +32,15 @@ function SelectedElementController({ children }: Props) {
       },
       set id(id: number | null) {
         setID(id);
+        setIndex(id !== null ? store.getIndexOfElementID(id) : null);
+      },
+      get index() {
+        return index;
+      },
+      set index(index: number | null) {
+        const element = index !== null ? store.getElementAtIndex(index) : null;
+        setID(element !== null ? element.id : null);
+        setIndex(index);
       },
     }),
     [id]
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 92bf94c04c81..aac2f89aff26 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -1,8 +1,9 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
+import { SelectedElementContext } from './SelectedElementContext';
 import Element from './Element';
 import ButtonIcon from './ButtonIcon';
 import { TreeContext } from './context';
@@ -12,9 +13,49 @@ import styles from './Tree.css';
 type Props = {||};
 
 export default function Tree(props: Props) {
+  const selectedElementContext = useContext(SelectedElementContext);
   const treeContext = useContext(TreeContext);
+  const listRef = useRef();
 
-  // TODO Add key handlers for selecting previous/next element.
+  // Make sure a newly selected element is visible in the list.
+  // This is helpful for things like the owners list.
+  useLayoutEffect(() => {
+    const { index } = selectedElementContext;
+    if (index !== null && listRef.current != null) {
+      listRef.current.scrollToItem(index);
+    }
+  }, [listRef, selectedElementContext]);
+
+  // Navigate the tree with up/down arrow keys.
+  useEffect(() => {
+    const handleKeyDown = event => {
+      let index;
+
+      // eslint-disable-next-line default-case
+      switch (event.key) {
+        case 'ArrowDown':
+          index = selectedElementContext.index;
+          if (index !== null && index + 1 < treeContext.size) {
+            selectedElementContext.index = ((index: any): number) + 1;
+          }
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          index = selectedElementContext.index;
+          if (index !== null && index > 0) {
+            selectedElementContext.index = ((index: any): number) - 1;
+          }
+          event.preventDefault();
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectedElementContext, treeContext]);
 
   return (
     <div className={styles.Tree}>
@@ -27,7 +68,7 @@ export default function Tree(props: Props) {
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
         >
-          <ButtonIcon type="search" /> Select
+          <ButtonIcon type="search" />
         </button>
       </div>
       <div className={styles.AutoSizerWrapper}>
@@ -39,6 +80,7 @@ export default function Tree(props: Props) {
               itemCount={treeContext.size}
               itemData={treeContext}
               itemSize={20}
+              ref={listRef}
               width={width}
             >
               {Element}
diff --git a/src/devtools/views/context.js b/src/devtools/views/context.js
index a2584e47cdd9..13be80ef6f35 100644
--- a/src/devtools/views/context.js
+++ b/src/devtools/views/context.js
@@ -2,10 +2,15 @@
 
 import { createContext } from 'react';
 
+import type { Bridge } from '../../types';
 import type { TreeMetadataType } from '../types';
 
 import Store from '../store';
 
+export const BridgeContext = createContext<Bridge>(((null: any): Bridge));
+// $FlowFixMe displayName is a valid attribute of React$Context
+BridgeContext.displayName = 'BridgeContext';
+
 export const StoreContext = createContext<Store>(((null: any): Store));
 // $FlowFixMe displayName is a valid attribute of React$Context
 StoreContext.displayName = 'StoreContext';
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 6e31b7a02e64..e39331633f9b 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -3,7 +3,7 @@
   --color-base00: #ffffff;
   --color-base01: #f3f3f3;
   --color-base02: #eeeeee;
-  --color-base03: #dadada;
+  --color-base03: #cfd1d5;
   --color-base04: #333333;
   --color-base05: #5a5a5a;
   --color-special00: #8155cb;
@@ -22,6 +22,7 @@
   --color-state05: #222222;
   --color-state06: #222222;
 
+  --color-arrow: var(--color-special07);
   --color-component: var(--color-special00);
   --color-tree-tag: var(--color-base04);
   --color-tree-attr-name: var(--color-special06);
@@ -37,8 +38,12 @@
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --font-size-tree-compact: 12px;
   --font-size-tree-normal: 14px;
+  --line-height-compact: 20px;
+  --line-height-normal: 24px;
 }
 
 * {
   box-sizing: border-box;
+
+  -webkit-font-smoothing: antialiased;
 }
diff --git a/src/hook.js b/src/hook.js
index 0f0e3e57491f..a0fe7b066c23 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -67,11 +67,11 @@ export function installHook(target: any): Hook {
     } catch (err) {}
   }
 
+  let uidCounter = 0;
+
   function inject(renderer) {
-    const id = Math.random()
-      .toString(16)
-      .slice(2);
-    renderers[id] = renderer;
+    const id = ++uidCounter;
+    renderers.set(id, renderer);
 
     const reactBuildType = hasDetectedBadDCE
       ? 'deadcode'
@@ -125,8 +125,9 @@ export function installHook(target: any): Hook {
 
   function onCommitFiberUnmount(rendererID, fiber) {
     // TODO: can we use hook for roots too?
-    if (rendererInterfaces[rendererID]) {
-      rendererInterfaces[rendererID].handleCommitFiberUnmount(fiber);
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handleCommitFiberUnmount(fiber);
     }
   }
 
@@ -143,16 +144,17 @@ export function installHook(target: any): Hook {
     } else if (isKnownRoot && isUnmounting) {
       mountedRoots.delete(root);
     }
-    if (rendererInterfaces[rendererID]) {
-      rendererInterfaces[rendererID].handleCommitFiberRoot(root);
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handleCommitFiberRoot(root);
     }
   }
 
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
-  const rendererInterfaces = {};
+  const rendererInterfaces = new Map();
   const listeners = {};
-  const renderers = {};
+  const renderers = new Map();
 
   const hook: Hook = {
     rendererInterfaces,
diff --git a/src/hydration.js b/src/hydration.js
new file mode 100644
index 000000000000..80f2b75bbd96
--- /dev/null
+++ b/src/hydration.js
@@ -0,0 +1,216 @@
+// @flow
+
+export const meta = {
+  name: Symbol('name'),
+  type: Symbol('type'),
+  inspected: Symbol('inspected'),
+  meta: Symbol('meta'),
+  proto: Symbol('proto'),
+};
+
+// This threshold determines the depth at which the bridge "dehydrates" nested data.
+// Dehydration means that we don't serialize the data for e.g. postMessage or stringify,
+// unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
+// We tried reducing this value from 2 to 1 to improve performance:
+// https://github.com/facebook/react-devtools/issues/1200
+// But this caused problems with the Profiler's interaction tracing output.
+// Because React mutates Fibers, profiling data that is dehydrated for old commits–
+// will not be available later from within the Profiler.
+// This impacts props/state as well as Interactions.
+// https://github.com/facebook/react-devtools/issues/1262
+const LEVEL_THRESHOLD = 6;
+
+/**
+ * Get a enhanced/artificial type string based on the object instance
+ */
+function getPropType(data: Object): string | null {
+  if (!data) {
+    return null;
+  }
+  const type = typeof data;
+
+  if (type === 'object') {
+    if (data._reactFragment) {
+      return 'react_fragment';
+    }
+    if (Array.isArray(data)) {
+      return 'array';
+    }
+    if (ArrayBuffer.isView(data)) {
+      if (data instanceof DataView) {
+        return 'data_view';
+      }
+      return 'typed_array';
+    }
+    if (data instanceof ArrayBuffer) {
+      return 'array_buffer';
+    }
+    if (typeof data[Symbol.iterator] === 'function') {
+      return 'iterator';
+    }
+    if (Object.prototype.toString.call(data) === '[object Date]') {
+      return 'date';
+    }
+  }
+
+  return type;
+}
+
+/**
+ * Generate the dehydrated metadata for complex object instances
+ */
+function createDehydrated(
+  type: string,
+  data: Object,
+  cleaned: Array<Array<string>>,
+  path: Array<string>
+): Object {
+  const meta = {};
+
+  if (type === 'array' || type === 'typed_array') {
+    meta.length = data.length;
+  }
+  if (type === 'iterator' || type === 'typed_array') {
+    meta.readOnly = true;
+  }
+
+  cleaned.push(path);
+
+  return {
+    type,
+    meta,
+    name:
+      !data.constructor || data.constructor.name === 'Object'
+        ? ''
+        : data.constructor.name,
+  };
+}
+
+/**
+ * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
+ * The paths of the stripped out objects are appended to the `cleaned` list.
+ * On the other side of the barrier, the cleaned list is used to "re-hydrate" the cleaned representation into
+ * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.
+ *
+ * Input: {"some": {"attr": fn()}, "other": AnInstance}
+ * Output: {
+ *   "some": {
+ *     "attr": {"name": the fn.name, type: "function"}
+ *   },
+ *   "other": {
+ *     "name": "AnInstance",
+ *     "type": "object",
+ *   },
+ * }
+ * and cleaned = [["some", "attr"], ["other"]]
+ */
+export function dehydrate(
+  data: Object,
+  cleaned: Array<Array<string>>,
+  path?: Array<string> = [],
+  level?: number = 0
+): string | Object {
+  const type = getPropType(data);
+
+  switch (type) {
+    case 'function':
+      cleaned.push(path);
+      return {
+        name: data.name,
+        type: 'function',
+      };
+
+    case 'string':
+      return data.length <= 500 ? data : data.slice(0, 500) + '...';
+
+    // We have to do this assignment b/c Flow doesn't think "symbol" is
+    // something typeof would return. Error 'unexpected predicate "symbol"'
+    case 'symbol':
+      cleaned.push(path);
+      return {
+        type: 'symbol',
+        name: data.toString(),
+      };
+
+    // React Fragments error if you try to inspect them.
+    case 'react_fragment':
+      return 'A React Fragment';
+
+    // ArrayBuffers error if you try to inspect them.
+    case 'array_buffer':
+    case 'data_view':
+      cleaned.push(path);
+      return {
+        type,
+        name: type === 'data_view' ? 'DataView' : 'ArrayBuffer',
+        meta: {
+          length: data.byteLength,
+          uninspectable: true,
+        },
+      };
+
+    case 'array':
+      if (level > LEVEL_THRESHOLD) {
+        return createDehydrated(type, data, cleaned, path);
+      }
+      return data.map((item, i) =>
+        dehydrate(item, cleaned, path.concat([i]), level + 1)
+      );
+
+    case 'typed_array':
+    case 'iterator':
+      return createDehydrated(type, data, cleaned, path);
+    case 'date':
+      cleaned.push(path);
+      return {
+        name: data.toString(),
+        type: 'date',
+        meta: {
+          uninspectable: true,
+        },
+      };
+    case 'object':
+      if (
+        level > LEVEL_THRESHOLD ||
+        (data.constructor &&
+          typeof data.constructor === 'function' &&
+          data.constructor.name !== 'Object')
+      ) {
+        return createDehydrated(type, data, cleaned, path);
+      } else {
+        const res = {};
+        for (let name in data) {
+          res[name] = dehydrate(
+            data[name],
+            cleaned,
+            path.concat([name]),
+            level + 1
+          );
+        }
+        return res;
+      }
+
+    default:
+      return data;
+  }
+}
+
+export function hydrate(data: Object, cleaned: Array<Array<string>>): Object {
+  cleaned.forEach((path: Array<string>) => {
+    const last = path.pop();
+    const reduced: Object = path.reduce(
+      (object: Object, attr: string) => (object ? object[attr] : (null: any)),
+      data
+    );
+    if (!reduced || !reduced[last]) {
+      return;
+    }
+    const replace: { [key: Symbol]: boolean | string } = {};
+    replace[meta.name] = reduced[last].name;
+    replace[meta.type] = reduced[last].type;
+    replace[meta.meta] = reduced[last].meta;
+    replace[meta.inspected] = false;
+    reduced[last] = replace;
+  });
+  return data;
+}
diff --git a/src/utils.js b/src/utils.js
index 9f7e11652752..fa90f29d39bd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,11 @@
 // @flow
 
+let uidCounter: number = 0;
+
+export function getUID(): number {
+  return ++uidCounter;
+}
+
 export function utfDecodeString(array: Uint8Array): string {
   let string = '';
   const { length } = array;
diff --git a/yarn.lock b/yarn.lock
index 7a18f52559cc..d5acfba0c77d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8411,6 +8411,11 @@ react-dom@^16.8.0-alpha.1:
     prop-types "^15.6.2"
     scheduler "^0.13.0-alpha.1"
 
+react-is@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.0-alpha.1.tgz#ac1aed207d6040f002b645af36702edf9ce2c40d"
+  integrity sha512-Gsh2u4ovhS2DY6fWgie/av5vzrIfW6P0lgWAsAQp9DjOImE0fJ26FfEdpFXtYBwi5s2krT9z0xvcQKvQsi4ekw==
+
 react-portal@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.1.0.tgz#865c44fb72a1da106c649206936559ce891ee899"

From 6f952ede2f62dc8093634733f0e71977d4327a23 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 4 Feb 2019 18:01:44 +0000
Subject: [PATCH 028/814] Fixed regression in browser shell

---
 shells/browser/shared/src/checkForReact.js | 12 ------------
 shells/browser/shared/src/main.js          |  2 +-
 2 files changed, 1 insertion(+), 13 deletions(-)
 delete mode 100644 shells/browser/shared/src/checkForReact.js

diff --git a/shells/browser/shared/src/checkForReact.js b/shells/browser/shared/src/checkForReact.js
deleted file mode 100644
index b0334ff3ae72..000000000000
--- a/shells/browser/shared/src/checkForReact.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* global chrome */
-
-export default function checkForReact(done: (pageHasReact: boolean) => void) {
-  chrome.devtools.inspectedWindow.eval(
-    `!!(
-    (window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length) || window.React || (window.require && (require('react') || require('React')))
-  )`,
-    function(pageHasReact, err) {
-      done(pageHasReact);
-    }
-  );
-}
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 697843409441..b3aa318381a7 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -7,7 +7,7 @@ function createPanelIfReactLoaded() {
     return;
   }
   chrome.devtools.inspectedWindow.eval(
-    'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers).length > 0',
+    'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
     function(pageHasReact, err) {
       if (!pageHasReact || panelCreated) {
         return;

From d0d5b677de1b5566021463fed95adf8be1bca56d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 08:32:02 +0000
Subject: [PATCH 029/814] Added better context support

---
 package.json                                  |   2 +-
 .../dev/app/InspectableElements/Contexts.js   | 116 ++++++++++++++++++
 .../InspectableElements.js                    |   2 +
 src/backend/renderer.js                       |  99 +++++++++++----
 src/devtools/views/InspectedElementTree.js    |  11 +-
 src/devtools/views/SelectedElement.js         |   2 +-
 yarn.lock                                     |  25 +---
 7 files changed, 201 insertions(+), 56 deletions(-)
 create mode 100644 shells/dev/app/InspectableElements/Contexts.js

diff --git a/package.json b/package.json
index 4d2d7222164d..d355ffec5ad7 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "nullthrows": "^1.0.0",
     "object-assign": "4.0.1",
     "prettier": "^1.16.1",
-    "prop-types": "^15.6.1",
+    "prop-types": "^15.6.2",
     "react": "^16.8.0-alpha.1",
     "react-color": "^2.11.7",
     "react-dom": "^16.8.0-alpha.1",
diff --git a/shells/dev/app/InspectableElements/Contexts.js b/shells/dev/app/InspectableElements/Contexts.js
new file mode 100644
index 000000000000..2f4515ab40d9
--- /dev/null
+++ b/shells/dev/app/InspectableElements/Contexts.js
@@ -0,0 +1,116 @@
+// @flow
+
+import React, { createContext, Component, Fragment, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+function someNamedFunction() {}
+
+const contextData = {
+  array: ['first', 'second', 'third'],
+  bool: true,
+  func: someNamedFunction,
+  number: 123,
+  object: { outer: { inner: {} } },
+  string: 'abc',
+  symbol: Symbol.for('symbol'),
+};
+
+class LegacyContextProvider extends Component<any> {
+  static childContextTypes = {
+    array: PropTypes.array,
+    bool: PropTypes.bool,
+    func: PropTypes.func,
+    number: PropTypes.number,
+    object: PropTypes.object,
+    string: PropTypes.string,
+    symbol: PropTypes.symbol,
+  };
+
+  getChildContext() {
+    return contextData;
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+class LegacyContextConsumer extends Component<any> {
+  static contextTypes = {
+    array: PropTypes.array,
+    bool: PropTypes.bool,
+    func: PropTypes.func,
+    number: PropTypes.number,
+    object: PropTypes.object,
+    string: PropTypes.string,
+    symbol: PropTypes.symbol,
+  };
+
+  render() {
+    return null;
+  }
+}
+
+const ModernContext = createContext();
+// $FlowFixMe Flow does not yet know about Context.displayName
+ModernContext.displayName = 'ModernContext';
+const ArrayContext = createContext(contextData.array);
+// $FlowFixMe Flow does not yet know about Context.displayName
+ArrayContext.displayName = 'ArrayContext';
+const BoolContext = createContext(contextData.bool);
+// $FlowFixMe Flow does not yet know about Context.displayName
+BoolContext.displayName = 'BoolContext';
+const FuncContext = createContext(contextData.func);
+// $FlowFixMe Flow does not yet know about Context.displayName
+FuncContext.displayName = 'FuncContext';
+const NumberContext = createContext(contextData.number);
+// $FlowFixMe Flow does not yet know about Context.displayName
+NumberContext.displayName = 'NumberContext';
+const StringContext = createContext(contextData.string);
+// $FlowFixMe Flow does not yet know about Context.displayName
+StringContext.displayName = 'StringContext';
+const SymbolContext = createContext(contextData.symbol);
+// $FlowFixMe Flow does not yet know about Context.displayName
+SymbolContext.displayName = 'SymbolContext';
+const NullContext = createContext(null);
+// $FlowFixMe Flow does not yet know about Context.displayName
+NullContext.displayName = 'NullContext';
+const UndefinedContext = createContext(undefined);
+// $FlowFixMe Flow does not yet know about Context.displayName
+UndefinedContext.displayName = 'UndefinedContext';
+
+class ModernContextType extends Component<any> {
+  static contextType = ModernContext;
+
+  render() {
+    return null;
+  }
+}
+
+function FunctionalContextConsumer() {
+  const string = useContext(StringContext);
+  return string;
+}
+
+export default function Contexts() {
+  return (
+    <Fragment>
+      <LegacyContextProvider>
+        <LegacyContextConsumer />
+      </LegacyContextProvider>
+      <ModernContext.Provider value={contextData}>
+        <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
+        <ModernContextType />
+      </ModernContext.Provider>
+      <FunctionalContextConsumer />
+      <ArrayContext.Consumer>{value => null}</ArrayContext.Consumer>
+      <BoolContext.Consumer>{value => null}</BoolContext.Consumer>
+      <FuncContext.Consumer>{value => null}</FuncContext.Consumer>
+      <NumberContext.Consumer>{value => null}</NumberContext.Consumer>
+      <StringContext.Consumer>{value => null}</StringContext.Consumer>
+      <SymbolContext.Consumer>{value => null}</SymbolContext.Consumer>
+      <NullContext.Consumer>{value => null}</NullContext.Consumer>
+      <UndefinedContext.Consumer>{value => null}</UndefinedContext.Consumer>
+    </Fragment>
+  );
+}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index 1da1b9398975..c93721c55f07 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react';
+import Contexts from './Contexts';
 import FunctionWithState from './FunctionWithState';
 import NestedProps from './NestedProps';
 
@@ -9,6 +10,7 @@ export default function InspectableElements() {
     <Fragment>
       <FunctionWithState initialCount={1} />
       <NestedProps />
+      <Contexts />
     </Fragment>
   );
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index dbb7b3ea8b3a..ffdc881fd862 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -219,7 +219,7 @@ export function attach(
 
   // Keep this function in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const { type, tag } = fiber;
+    const { tag } = fiber;
 
     switch (tag) {
       case ClassComponent:
@@ -237,16 +237,9 @@ export function attach(
       case Fragment:
         return true;
       default:
-        const symbolOrNumber =
-          typeof type === 'object' && type !== null ? type.$$typeof : type;
+        const typeSymbol = getTypeSymbol(fiber);
 
-        const switchValue =
-          // $FlowFixMe facebook/flow/issues/2362
-          typeof symbolOrNumber === 'symbol'
-            ? symbolOrNumber.toString()
-            : symbolOrNumber;
-
-        switch (switchValue) {
+        switch (typeSymbol) {
           case CONCURRENT_MODE_NUMBER:
           case CONCURRENT_MODE_SYMBOL_STRING:
           case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
@@ -269,6 +262,18 @@ export function attach(
     }
   }
 
+  function getTypeSymbol(fiber: Fiber): Symbol | number {
+    const { type } = fiber;
+
+    const symbolOrNumber =
+      typeof type === 'object' && type !== null ? type.$$typeof : type;
+
+    // $FlowFixMe facebook/flow/issues/2362
+    return typeof symbolOrNumber === 'symbol'
+      ? symbolOrNumber.toString()
+      : symbolOrNumber;
+  }
+
   // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
   // TODO: Keep in sync with getElementType()
   function getDataForFiber(fiber: Fiber): FiberData {
@@ -340,16 +345,9 @@ export function attach(
         };
         break;
       default:
-        const symbolOrNumber =
-          typeof type === 'object' && type !== null ? type.$$typeof : type;
-
-        const switchValue =
-          // $FlowFixMe facebook/flow/issues/2362
-          typeof symbolOrNumber === 'symbol'
-            ? symbolOrNumber.toString()
-            : symbolOrNumber;
+        const typeSymbol = getTypeSymbol(fiber);
 
-        switch (switchValue) {
+        switch (typeSymbol) {
           case CONCURRENT_MODE_NUMBER:
           case CONCURRENT_MODE_SYMBOL_STRING:
           case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
@@ -362,6 +360,7 @@ export function attach(
           case CONTEXT_PROVIDER_SYMBOL_STRING:
             // 16.3.0 exposed the context object as "context"
             // PR #12501 changed it to "_context" for 16.3.1+
+            // NOTE Keep in sync with inspectElement()
             resolvedContext = fiber.type._context || fiber.type.context;
             displayName = `${resolvedContext.displayName ||
               'Context'}.Provider`;
@@ -376,6 +375,7 @@ export function attach(
           case CONTEXT_CONSUMER_SYMBOL_STRING:
             // 16.3-16.5 read from "type" because the Consumer is the actual context object.
             // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+            // NOTE Keep in sync with inspectElement()
             resolvedContext = fiber.type._context || fiber.type;
 
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
@@ -1019,6 +1019,7 @@ export function attach(
       memoizedProps,
       memoizedState,
       tag,
+      type,
     } = ((fiber: any): Fiber);
 
     const usesHooks =
@@ -1027,11 +1028,60 @@ export function attach(
         tag === ForwardRef) &&
       !!memoizedState;
 
-    const hasContext =
+    const typeSymbol = getTypeSymbol(fiber);
+
+    let context = null;
+    if (
       tag === ClassComponent ||
       tag === FunctionComponent ||
       tag === IncompleteClassComponent ||
-      tag === IndeterminateComponent;
+      tag === IndeterminateComponent
+    ) {
+      if (stateNode && Object.keys(stateNode.context).length > 0) {
+        context = stateNode.context;
+      }
+    } else if (
+      typeSymbol === CONTEXT_CONSUMER_NUMBER ||
+      typeSymbol === CONTEXT_CONSUMER_SYMBOL_STRING
+    ) {
+      // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+      // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+      // NOTE Keep in sync with getDataForFiber()
+      const consumerResolvedContext = type._context || type;
+
+      // Global context value.
+      context = consumerResolvedContext._currentValue || null;
+
+      // Look for overridden value.
+      let current = ((fiber: any): Fiber).return;
+      while (current !== null) {
+        const currentTypeSymbol = getTypeSymbol(current);
+        if (
+          currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||
+          currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING
+        ) {
+          const currentType = current.type;
+
+          // 16.3.0 exposed the context object as "context"
+          // PR #12501 changed it to "_context" for 16.3.1+
+          // NOTE Keep in sync with getDataForFiber()
+          const providerResolvedContext =
+            currentType._context || currentType.context;
+          if (providerResolvedContext === consumerResolvedContext) {
+            context = current.memoizedProps.value;
+            break;
+          }
+        }
+
+        current = current.return;
+      }
+    }
+
+    if (context !== null) {
+      // To simplify hydration and display logic for context, wrap in a value object.
+      // Otherwise simple values (e.g. strings, booleans) become harder to handle.
+      context = cleanForBridge({ value: context });
+    }
 
     let owners = null;
     if (_debugOwner) {
@@ -1054,12 +1104,7 @@ export function attach(
 
       // Inspectable properties.
       // TODO Sanitize props, state, and context
-      context:
-        (hasContext &&
-          stateNode &&
-          Object.keys(stateNode.context).length > 0 &&
-          cleanForBridge(stateNode.context)) ||
-        null,
+      context,
       hooks: usesHooks
         ? cleanForBridge(
             inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 365a39518d20..91487ea31d99 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -43,6 +43,13 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
 
   let children = null;
   if (isSimpleType) {
+    let displayValue = value;
+    if (dataType === 'string') {
+      displayValue = `"${value}"`;
+    } else if (dataType === 'boolean') {
+      displayValue = value ? 'true' : 'false';
+    }
+
     children = (
       <div
         key="root"
@@ -50,9 +57,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         style={{ paddingLeft: `${depth}rem` }}
       >
         <span className={styles.Name}>{name}</span>:{' '}
-        <span className={styles.Value}>
-          {dataType === 'string' ? `"${value}"` : value}
-        </span>
+        <span className={styles.Value}>{displayValue}</span>
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 931616bafb3e..3f1bde9d8d3f 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -94,7 +94,7 @@ function InspectedElementView({
 
       {owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
-          <div>owners</div>
+          <div>owner stack</div>
           {owners.map(owner => (
             <div
               key={owner.id}
diff --git a/yarn.lock b/yarn.lock
index d5acfba0c77d..88e0feb9898e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4400,18 +4400,6 @@ fbjs@0.5.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
-fbjs@^0.8.16:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
 fbjs@^0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
@@ -8217,17 +8205,10 @@ prop-types@^15.5.4, prop-types@^15.5.8:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
   dependencies:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
@@ -10006,10 +9987,6 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-ua-parser-js@^0.7.18:
-  version "0.7.18"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
-
 ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"

From 33deb79ce46af1fae5df28358f5f2c38759fa81e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 09:23:14 +0000
Subject: [PATCH 030/814] Added simple hooks support (same as in legacy
 DevTools for now)

I had to add a couple of  comments because Flow was being a mysterious little shit and I got tired of trying to work around it.
---
 .../dev/app/InspectableElements/Contexts.js   |  4 +-
 .../app/InspectableElements/CustomHooks.js    | 79 +++++++++++++++++++
 .../InspectableElements/FunctionWithState.js  | 16 ----
 .../InspectableElements.css                   |  5 ++
 .../InspectableElements.js                    |  8 +-
 src/backend/renderer.js                       |  2 +-
 src/backend/types.js                          |  6 --
 src/devtools/views/HooksTree.css              | 18 ++++-
 src/devtools/views/HooksTree.js               | 63 ++++++++++++---
 src/devtools/views/InspectedElementTree.js    | 23 +-----
 src/devtools/views/SelectedElement.js         |  2 +-
 src/devtools/views/utils.js                   | 24 ++++++
 12 files changed, 187 insertions(+), 63 deletions(-)
 create mode 100644 shells/dev/app/InspectableElements/CustomHooks.js
 delete mode 100644 shells/dev/app/InspectableElements/FunctionWithState.js
 create mode 100644 shells/dev/app/InspectableElements/InspectableElements.css
 create mode 100644 src/devtools/views/utils.js

diff --git a/shells/dev/app/InspectableElements/Contexts.js b/shells/dev/app/InspectableElements/Contexts.js
index 2f4515ab40d9..12362a811eab 100644
--- a/shells/dev/app/InspectableElements/Contexts.js
+++ b/shells/dev/app/InspectableElements/Contexts.js
@@ -88,8 +88,8 @@ class ModernContextType extends Component<any> {
 }
 
 function FunctionalContextConsumer() {
-  const string = useContext(StringContext);
-  return string;
+  useContext(StringContext);
+  return null;
 }
 
 export default function Contexts() {
diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
new file mode 100644
index 000000000000..7e0b3184538a
--- /dev/null
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -0,0 +1,79 @@
+// @flow
+
+import React, {
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  // $FlowFixMe Flow doesn't yet know about this hook
+  useDebugValue,
+  useEffect,
+  useState,
+} from 'react';
+
+function useNestedInnerHook() {
+  return useState(123);
+}
+function useNestedOuterHook() {
+  return useNestedInnerHook();
+}
+
+function FunctionWithHooks(props: any, ref: React$Ref<any>) {
+  const [count, updateCount] = useState(0);
+
+  // Custom hook with a custom debug label
+  const debouncedCount = useDebounce(count, 1000);
+
+  const onClick = useCallback(
+    function onClick() {
+      updateCount(count + 1);
+    },
+    [count]
+  );
+
+  // Tests nested custom hooks
+  useNestedOuterHook();
+
+  return <button onClick={onClick}>Count: {debouncedCount}</button>;
+}
+const MemoWithHooks = memo(FunctionWithHooks);
+const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
+
+export default function CustomHooks() {
+  return (
+    <Fragment>
+      <FunctionWithHooks />
+      <MemoWithHooks />
+      <ForwardRefWithHooks />
+    </Fragment>
+  );
+}
+
+// Below copied from https://usehooks.com/
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValue(debouncedValue);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+// Above copied from https://usehooks.com/
diff --git a/shells/dev/app/InspectableElements/FunctionWithState.js b/shells/dev/app/InspectableElements/FunctionWithState.js
deleted file mode 100644
index ae445fc246a5..000000000000
--- a/shells/dev/app/InspectableElements/FunctionWithState.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-
-import React, { useCallback, useState } from 'react';
-
-type Props = {|
-  initialCount: number,
-|};
-
-export default function FunctionWithState({ initialCount }: Props) {
-  const [count, setCount] = useState(initialCount);
-  const handleClick = useCallback(() => {
-    setCount(count => count + 1);
-  });
-
-  return <button onClick={handleClick}>Count {count}</button>;
-}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.css b/shells/dev/app/InspectableElements/InspectableElements.css
new file mode 100644
index 000000000000..6d36bfb51d4b
--- /dev/null
+++ b/shells/dev/app/InspectableElements/InspectableElements.css
@@ -0,0 +1,5 @@
+.Header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index c93721c55f07..fa814ccedac7 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -2,15 +2,19 @@
 
 import React, { Fragment } from 'react';
 import Contexts from './Contexts';
-import FunctionWithState from './FunctionWithState';
+import CustomHooks from './CustomHooks';
 import NestedProps from './NestedProps';
+import styles from './InspectableElements.css';
+
+// TODO Add Immutable JS example
 
 export default function InspectableElements() {
   return (
     <Fragment>
-      <FunctionWithState initialCount={1} />
+      <div className={styles.Header}>Inspectable elements</div>
       <NestedProps />
       <Contexts />
+      <CustomHooks />
     </Fragment>
   );
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ffdc881fd862..468a61a2d3cc 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1103,7 +1103,7 @@ export function attach(
       canEditValues: false, // TODO
 
       // Inspectable properties.
-      // TODO Sanitize props, state, and context
+      // TODO Review sanitization approach for the below inspectable values.
       context,
       hooks: usesHooks
         ? cleanForBridge(
diff --git a/src/backend/types.js b/src/backend/types.js
index eaf735853900..e5202dc07bbb 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -80,9 +80,3 @@ export type HooksNode = {
   subHooks: Array<HooksNode>,
 };
 export type HooksTree = Array<HooksNode>;
-
-export type InspectedHooks = {|
-  elementID: string,
-  id: string,
-  hooksTree: HooksTree,
-|};
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 681b63e00008..950ca8eb9721 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -1,10 +1,24 @@
-.HooksTree {
+.HooksTreeView {
   padding: 0.25rem;
   border-bottom: 1px solid var(--color-base02);
 }
 
-.ComingSoon {
+.HooksNode {
   padding-left: 1rem;
+}
+
+.NameValueRow {
+}
+
+.Name {
+  color: var(--color-tree-attr-name);
+}
+
+.Value {
+  color: var(--color-tree-attr-value);
+}
+
+.None {
   color: var(--color-base03);
   font-style: italic;
 }
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 11f0414312d8..f2ec250820b8 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -1,24 +1,65 @@
 // @flow
 
 import React from 'react';
+import { getMetaValueLabel } from './utils';
 import styles from './HooksTree.css';
 
-import type { InspectedHooks } from 'src/backend/types';
+import type { HooksNode, HooksTree } from 'src/backend/types';
 
-type Props = {|
-  inspectedHooks: InspectedHooks | null,
-|};
-
-export default function HooksTree({ inspectedHooks }: Props) {
-  if (inspectedHooks === null) {
+export function HooksTreeView({ hooksTree }: { hooksTree: HooksTree | null }) {
+  if (hooksTree === null) {
     return null;
+  } else {
+    return (
+      <div className={styles.HooksTreeView}>
+        <div className={styles.Item}>hooks</div>
+        <InnerHooksTreeView hooksTree={hooksTree} />
+      </div>
+    );
+  }
+}
+
+export function InnerHooksTreeView({ hooksTree }: { hooksTree: HooksTree }) {
+  // $FlowFixMe "Missing type annotation for U" whatever that means
+  return hooksTree.map((hooksNode, index) => (
+    <HooksNodeView key={index} hooksNode={hooksTree[index]} />
+  ));
+}
+
+function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
+  const { name, subHooks, value } = hooksNode;
+
+  // TODO Add click and key handlers for toggling element open/close state.
+  // TODO Support editable props
+
+  const isCustomHook = subHooks.length > 0;
+
+  // Format data for display to mimic the props/state/context for now.
+  const type = typeof value;
+  let displayValue;
+  if (isCustomHook && value === undefined) {
+    displayValue = null;
+  } else if (
+    type === 'number' ||
+    type === 'string' ||
+    type === 'boolean' ||
+    value == null
+  ) {
+    displayValue = value;
+  } else {
+    displayValue = getMetaValueLabel(value);
   }
 
-  // TODO
   return (
-    <div className={styles.HooksTree}>
-      hooks
-      <div className={styles.ComingSoon}>Coming soon...</div>
+    <div className={styles.HooksNode}>
+      <div className={styles.NameValueRow}>
+        <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
+        <span className={styles.Value}>{displayValue}</span>
+      </div>
+      <InnerHooksTreeView hooksTree={subHooks} />
     </div>
   );
 }
+
+// $FlowFixMe
+export default React.memo(HooksTreeView);
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 91487ea31d99..4f37bf0bea77 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react';
+import { getMetaValueLabel } from './utils';
 import { meta } from '../../hydration';
 import styles from './InspectedElementTree.css';
 
@@ -15,7 +16,6 @@ export default function InspectedElementTree({ data, label }: Props) {
   } else {
     // TODO Add click and key handlers for toggling element open/close state.
     // TODO Support editable props
-
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.Item}>{label}</div>
@@ -108,24 +108,3 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
 
   return children;
 }
-
-function getMetaValueLabel(data: Object): string | null {
-  switch (data[meta.type]) {
-    case 'function':
-      return `${data[meta.name] || 'fn'}()`;
-    case 'object':
-      return 'Object';
-    case 'date':
-    case 'symbol':
-      return data[meta.name];
-    case 'iterator':
-      return `${data[meta.name]}(…)`;
-    case 'array_buffer':
-    case 'data_view':
-    case 'array':
-    case 'typed_array':
-      return `${data[meta.name]}[${data[meta.meta].length}]`;
-    default:
-      return null;
-  }
-}
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 3f1bde9d8d3f..0264a9107cea 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -89,7 +89,7 @@ function InspectedElementView({
     <div className={styles.InspectedElement}>
       <InspectedElementTree label="props" data={props} />
       <InspectedElementTree label="state" data={state} />
-      <HooksTree inspectedHooks={hooks} />
+      <HooksTree hooksTree={hooks} />
       <InspectedElementTree label="context" data={context} />
 
       {owners !== null && owners.length > 0 && (
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
new file mode 100644
index 000000000000..e5ec47254f80
--- /dev/null
+++ b/src/devtools/views/utils.js
@@ -0,0 +1,24 @@
+// @flow
+
+import { meta } from '../../hydration';
+
+export function getMetaValueLabel(data: Object): string | null {
+  switch (data[meta.type]) {
+    case 'function':
+      return `${data[meta.name] || 'fn'}()`;
+    case 'object':
+      return 'Object';
+    case 'date':
+    case 'symbol':
+      return data[meta.name];
+    case 'iterator':
+      return `${data[meta.name]}(…)`;
+    case 'array_buffer':
+    case 'data_view':
+    case 'array':
+    case 'typed_array':
+      return `${data[meta.name]}[${data[meta.meta].length}]`;
+    default:
+      return null;
+  }
+}

From 15661411778f016c299816e1b03c342f9664c137 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 10:25:33 +0000
Subject: [PATCH 031/814] Strip React elements from serialized data (and
 display <name/> instead

---
 src/backend/renderer.js     |  6 +--
 src/backend/utils.js        | 69 --------------------------------
 src/devtools/views/utils.js |  2 +
 src/hydration.js            | 78 +++++++++++++++++++++++++++++++++----
 src/utils.js                | 45 +++++++++++++++++++++
 5 files changed, 121 insertions(+), 79 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 468a61a2d3cc..cadb0ffe45ce 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -11,8 +11,8 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
 } from 'src/devtools/types';
-import { utfEncodeString } from '../utils';
-import { cleanForBridge, cleanPropsForBridge, getDisplayName } from './utils';
+import { getDisplayName, utfEncodeString } from '../utils';
+import { cleanForBridge } from './utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
@@ -1110,7 +1110,7 @@ export function attach(
             inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
           )
         : null,
-      props: cleanPropsForBridge(memoizedProps),
+      props: cleanForBridge(memoizedProps),
       state: usesHooks ? null : cleanForBridge(memoizedState),
 
       // List of owners
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 0a4837d0f97f..dea4abfd6e58 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -1,55 +1,9 @@
 // @flow
 
-import { isElement } from 'react-is';
 import { dehydrate } from '../hydration';
 
 import type { DehydratedData } from 'src/devtools/types';
 
-const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
-const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
-
-export function getDisplayName(
-  type: Function,
-  fallbackName: string = 'Unknown'
-): string {
-  const nameFromCache = cachedDisplayNames.get(type);
-  if (nameFromCache != null) {
-    return nameFromCache;
-  }
-
-  let displayName;
-
-  // The displayName property is not guaranteed to be a string.
-  // It's only safe to use for our purposes if it's a string.
-  // github.com/facebook/react-devtools/issues/803
-  if (typeof type.displayName === 'string') {
-    displayName = type.displayName;
-  }
-
-  if (!displayName) {
-    displayName = type.name || fallbackName;
-  }
-
-  // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
-  // We need displayName with module name for error reports but it clutters the DevTools.
-  const match = displayName.match(FB_MODULE_RE);
-  if (match) {
-    const componentName = match[1];
-    const moduleName = match[2];
-    if (componentName && moduleName) {
-      if (
-        moduleName === componentName ||
-        moduleName.startsWith(componentName + '.')
-      ) {
-        displayName = componentName;
-      }
-    }
-  }
-
-  cachedDisplayNames.set(type, displayName);
-  return displayName;
-}
-
 export function cleanForBridge(data: Object | null): DehydratedData | null {
   if (data !== null) {
     const cleaned = [];
@@ -62,26 +16,3 @@ export function cleanForBridge(data: Object | null): DehydratedData | null {
     return null;
   }
 }
-
-export function cleanPropsForBridge(props: Object): DehydratedData | null {
-  if (props !== null) {
-    const dehydratedData = cleanForBridge(props);
-    if (dehydratedData !== null) {
-      // For now, let's just filter children that are React elements.
-      const { children } = props;
-      if (children != null) {
-        if (isElement(children)) {
-          delete dehydratedData.data.children;
-        } else if (Array.isArray(children)) {
-          dehydratedData.data.children = children.filter(
-            child => !isElement(child)
-          );
-        }
-      }
-
-      return dehydratedData;
-    }
-  }
-
-  return null;
-}
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index e5ec47254f80..8d77d8a7c268 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -4,6 +4,8 @@ import { meta } from '../../hydration';
 
 export function getMetaValueLabel(data: Object): string | null {
   switch (data[meta.type]) {
+    case 'react_element':
+      return `<${data[meta.name]} />`;
     case 'function':
       return `${data[meta.name] || 'fn'}()`;
     case 'object':
diff --git a/src/hydration.js b/src/hydration.js
index 80f2b75bbd96..329994119f54 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -1,5 +1,23 @@
 // @flow
 
+import {
+  isElement,
+  typeOf,
+  AsyncMode,
+  ConcurrentMode,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+} from 'react-is';
+import { getDisplayName } from './utils';
+
 export const meta = {
   name: Symbol('name'),
   type: Symbol('type'),
@@ -27,12 +45,13 @@ function getPropType(data: Object): string | null {
   if (!data) {
     return null;
   }
-  const type = typeof data;
 
+  if (isElement(data)) {
+    return 'react_element';
+  }
+
+  const type = typeof data;
   if (type === 'object') {
-    if (data._reactFragment) {
-      return 'react_fragment';
-    }
     if (Array.isArray(data)) {
       return 'array';
     }
@@ -132,9 +151,14 @@ export function dehydrate(
         name: data.toString(),
       };
 
-    // React Fragments error if you try to inspect them.
-    case 'react_fragment':
-      return 'A React Fragment';
+    // React Elements aren't very inspector-friendly,
+    // and often contain private fields or circular references.
+    case 'react_element':
+      cleaned.push(path);
+      return {
+        name: getDisplayNameForReactElement(data),
+        type: 'react_element',
+      };
 
     // ArrayBuffers error if you try to inspect them.
     case 'array_buffer':
@@ -214,3 +238,43 @@ export function hydrate(data: Object, cleaned: Array<Array<string>>): Object {
   });
   return data;
 }
+
+export function getDisplayNameForReactElement(
+  element: React$Element<any>
+): string | null {
+  const elementType = typeOf(element);
+  switch (elementType) {
+    case AsyncMode:
+    case ConcurrentMode:
+      return 'ConcurrentMode';
+    case ContextConsumer:
+      return 'ContextConsumer';
+    case ContextProvider:
+      return 'ContextProvider';
+    case ForwardRef:
+      return 'ForwardRef';
+    case Fragment:
+      return 'Fragment';
+    case Lazy:
+      return 'Lazy';
+    case Memo:
+      return 'Memo';
+    case Portal:
+      return 'Portal';
+    case Profiler:
+      return 'Profiler';
+    case StrictMode:
+      return 'StrictMode';
+    case Suspense:
+      return 'Suspense';
+    default:
+      const { type } = element;
+      if (typeof type === 'string') {
+        return type;
+      } else if (type != null) {
+        return getDisplayName(type, 'Unknown');
+      } else {
+        return 'Element';
+      }
+  }
+}
diff --git a/src/utils.js b/src/utils.js
index fa90f29d39bd..0f87d8a83716 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,50 @@
 // @flow
 
+const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
+const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
+
+export function getDisplayName(
+  type: Function,
+  fallbackName: string = 'Unknown'
+): string {
+  const nameFromCache = cachedDisplayNames.get(type);
+  if (nameFromCache != null) {
+    return nameFromCache;
+  }
+
+  let displayName;
+
+  // The displayName property is not guaranteed to be a string.
+  // It's only safe to use for our purposes if it's a string.
+  // github.com/facebook/react-devtools/issues/803
+  if (typeof type.displayName === 'string') {
+    displayName = type.displayName;
+  }
+
+  if (!displayName) {
+    displayName = type.name || fallbackName;
+  }
+
+  // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
+  // We need displayName with module name for error reports but it clutters the DevTools.
+  const match = displayName.match(FB_MODULE_RE);
+  if (match) {
+    const componentName = match[1];
+    const moduleName = match[2];
+    if (componentName && moduleName) {
+      if (
+        moduleName === componentName ||
+        moduleName.startsWith(componentName + '.')
+      ) {
+        displayName = componentName;
+      }
+    }
+  }
+
+  cachedDisplayNames.set(type, displayName);
+  return displayName;
+}
+
 let uidCounter: number = 0;
 
 export function getUID(): number {

From 6dc3fa6fbd03d338e346a455c7d9a30fc3825158 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 11:23:37 +0000
Subject: [PATCH 032/814] Cleaned up style vars

---
 src/devtools/views/Element.css              | 26 ++++----
 src/devtools/views/Elements.css             |  2 +-
 src/devtools/views/HooksTree.css            |  8 +--
 src/devtools/views/InspectedElementTree.css | 14 ++--
 src/devtools/views/InspectedElementTree.js  | 21 ++++--
 src/devtools/views/SelectedElement.css      | 22 +++----
 src/devtools/views/SelectedElement.js       |  2 +-
 src/devtools/views/Tree.css                 | 12 ++--
 src/devtools/views/root.css                 | 71 +++++++++++----------
 src/devtools/views/utils.js                 |  2 +-
 10 files changed, 101 insertions(+), 79 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 9306a2750fa8..8ffaae28fef6 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -10,18 +10,20 @@
   align-items: center;
 }
 .Element:hover {
-  background-color: var(--color-state03);
+  background-color: var(--color-tree-node-hover);
 }
 
 .SelectedElement {
-  background-color: var(--color-state00);
+  background-color: var(--color-tree-node-selected);
 
   /* Invert colors */
-  --color-component: var(--color-base00);
-  --color-arrow: var(--color-base00);
-  --color-tree-tag: rgba(255, 255, 255, 0.8);
-  --color-tree-attr-name: #b3e5fc;
-  --color-tree-attr-value: #fff;
+  --color-component-name: var(--color-component-name-inverted);
+  --color-arrow: var(--color-arrow-inverted);
+  --color-tree-jsx-arrow-brackets: var(
+    --color-tree-jsx-arrow-brackets-inverted
+  );
+  --color-attribute-name: #b3e5fc;
+  --color-attribute-value: #fff;
 }
 
 .ArrowClosed,
@@ -37,23 +39,23 @@
 }
 
 .Component {
-  color: var(--color-component);
+  color: var(--color-component-name);
 }
 .Component:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 .Component:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 
 .AttributeName {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .AttributeValue {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index dea13215c21d..2fe8bb63c617 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -3,7 +3,7 @@
   height: 100%;
   display: flex;
   flex-direction: row;
-
+  background-color: var(--color-background);
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 950ca8eb9721..e531ba9f5a80 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -1,6 +1,6 @@
 .HooksTreeView {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .HooksNode {
@@ -11,14 +11,14 @@
 }
 
 .Name {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .Value {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
 
 .None {
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index b2ecc50e590b..f56b57fa3382 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -1,20 +1,26 @@
 .InspectedElementTree {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .Item {
 }
 
 .Name {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .Value {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
 
 .None {
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
+
+.Empty {
+  color: var(--color-deemphasized);
+  font-style: italic;
+  padding-left: 1rem;
+}
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 4f37bf0bea77..e24accf89e22 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -6,12 +6,19 @@ import { meta } from '../../hydration';
 import styles from './InspectedElementTree.css';
 
 type Props = {|
-  label: string,
   data: Object | null,
+  label: string,
+  showWhenEmpty?: boolean,
 |};
 
-export default function InspectedElementTree({ data, label }: Props) {
-  if (data === null || Object.keys(data).length === 0) {
+export default function InspectedElementTree({
+  data,
+  label,
+  showWhenEmpty = false,
+}: Props) {
+  const isEmpty = data === null || Object.keys(data).length === 0;
+
+  if (isEmpty && !showWhenEmpty) {
     return null;
   } else {
     // TODO Add click and key handlers for toggling element open/close state.
@@ -19,9 +26,11 @@ export default function InspectedElementTree({ data, label }: Props) {
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.Item}>{label}</div>
-        {Object.keys(data).map(name => (
-          <KeyValue key={name} depth={1} name={name} value={data[name]} />
-        ))}
+        {isEmpty && <div className={styles.Empty}>None</div>}
+        {!isEmpty &&
+          Object.keys((data: any)).map(name => (
+            <KeyValue key={name} depth={1} name={name} value={(data: any)[name]} />
+          ))}
       </div>
     );
   }
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 40d6bb6a22a0..c0fd0a1ba99c 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -3,8 +3,8 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  border-left: 1px solid var(--color-base02);
-  border-top: 1px solid var(--color-base02);
+  border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
 }
 
 .TitleRow {
@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
 
@@ -24,10 +24,10 @@
   align-items: center;
   padding: 0.25rem;
   cursor: pointer;
-  color: var(--color-state00);
+  color: var(--color-button);
 }
 .IconButton:hover {
-  color: var(--color-special02);
+  color: var(--color-button-hover);
 }
 
 .SelectedComponentName {
@@ -44,19 +44,19 @@
 .Owner {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--color-component);
+  color: var(--color-component-name);
 }
 .Component:before,
 .Owner:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 .Component:after,
 .Owner:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 
 .Component {
@@ -66,8 +66,8 @@
 .InspectedElement {
   overflow: auto;
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-tree-compact);
-  line-height: var(--line-height-compact);
+  font-size: var(--font-size-normal);
+  line-height: var(--line-height-data);
 }
 
 .Owner {
@@ -77,6 +77,6 @@
 
 .Loading {
   padding: 0.25rem;
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 0264a9107cea..8e3386a60b46 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -87,7 +87,7 @@ function InspectedElementView({
 
   return (
     <div className={styles.InspectedElement}>
-      <InspectedElementTree label="props" data={props} />
+      <InspectedElementTree label="props" data={props} showWhenEmpty />
       <InspectedElementTree label="state" data={state} />
       <HooksTree hooksTree={hooks} />
       <InspectedElementTree label="context" data={context} />
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index a168eab550c0..855f5331af49 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -3,7 +3,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--color-base02);
+  border-top: 1px solid var(--color-border);
 }
 
 .SearchRow {
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
 
@@ -34,11 +34,11 @@
   align-items: center;
   padding: 0.25rem;
   cursor: pointer;
-  color: var(--color-state00);
+  color: var(--color-button);
   flex: 0 0 auto;
 }
 .IconButton:hover {
-  color: var(--color-special02);
+  color: var(--color-button-hover);
 }
 
 .AutoSizerWrapper {
@@ -50,6 +50,6 @@
 
 .List {
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-tree-compact);
-  line-height: var(--line-height-tree-compact);
+  font-size: var(--font-size-normal);
+  line-height: var(--line-height-data);
 }
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index e39331633f9b..7c62c374808e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -1,45 +1,50 @@
 :root {
-  /* TODO */
-  --color-base00: #ffffff;
-  --color-base01: #f3f3f3;
-  --color-base02: #eeeeee;
-  --color-base03: #cfd1d5;
-  --color-base04: #333333;
-  --color-base05: #5a5a5a;
-  --color-special00: #8155cb;
-  --color-special01: #222222;
-  --color-special02: #1a1aa6;
-  --color-special03: #c80000;
-  --color-special04: #236e25;
-  --color-special05: #aa0d91;
-  --color-special06: #ef6632;
-  --color-special07: #777d88;
-  --color-state00: #0088fa;
-  --color-state01: #dadada;
-  --color-state02: #ffffff;
-  --color-state03: #ebf1fb;
-  --color-state04: #ffff00;
-  --color-state05: #222222;
-  --color-state06: #222222;
+  /* Light theme */
+  --theme-light-arrow: #777d88;
+  --theme-light-arrow-inverted: #ffffff;
+  --theme-light-attribute-name: #ef6632;
+  --theme-light-attribute-value: #1a1aa6;
+  --theme-light-background: #ffffff;
+  --theme-light-button: #0088fa;
+  --theme-light-button-hover: #1a1aa6;
+  --theme-light-color-border: #eeeeee;
+  --theme-light-component-name: #8155cb;
+  --theme-light-component-name-inverted: #ffffff;
+  --theme-light-deemphasized: #cfd1d5;
+  --theme-light-jsx-arrow-brackets: #333333;
+  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.8);
+  --theme-light-tree-node-selected: #0088fa;
+  --theme-light-tree-node-hover: #ebf1fb;
 
-  --color-arrow: var(--color-special07);
-  --color-component: var(--color-special00);
-  --color-tree-tag: var(--color-base04);
-  --color-tree-attr-name: var(--color-special06);
-  --color-tree-attr-value: var(--color-special02);
+  /* TODO Dark theme */
 
-  --line-height-tree-compact: 1.5;
-  --line-height-tree-normal: 1.5;
+  /* "theme" values referenced by other stylesheets */
+  --color-arrow: var(--theme-light-arrow);
+  --color-arrow-inverted: var(--theme-light-arrow-inverted);
+  --color-attribute-name: var(--theme-light-attribute-name);
+  --color-attribute-value: var(--theme-light-attribute-value);
+  --color-background: var(--theme-light-background);
+  --color-border: var(--theme-light-color-border);
+  --color-button: var(--theme-light-button);
+  --color-button-hover: var(--theme-light-button-hover);
+  --color-component-name: var(--theme-light-component-name);
+  --color-component-name-inverted: var(--theme-light-component-name-inverted);
+  --color-deemphasized: var(--theme-light-deemphasized);
+  --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
+  --color-tree-jsx-arrow-brackets-inverted: var(
+    --theme-light-jsx-arrow-brackets-inverted
+  );
+  --color-tree-node-selected: var(--theme-light-tree-node-selected);
+  --color-tree-node-hover: var(--theme-light-tree-node-hover);
+
+  --font-size-normal: 12px;
+  --line-height-data: 1.5rem;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --font-size-tree-compact: 12px;
-  --font-size-tree-normal: 14px;
-  --line-height-compact: 20px;
-  --line-height-normal: 24px;
 }
 
 * {
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 8d77d8a7c268..3726edd83a52 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -5,7 +5,7 @@ import { meta } from '../../hydration';
 export function getMetaValueLabel(data: Object): string | null {
   switch (data[meta.type]) {
     case 'react_element':
-      return `<${data[meta.name]} />`;
+      return `<${data[meta.name]}/>`;
     case 'function':
       return `${data[meta.name] || 'fn'}()`;
     case 'object':

From ce7f060e267383ceddb966511dfa36b07c67af5b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 11:26:37 +0000
Subject: [PATCH 033/814] Cleaned up property borders

---
 src/devtools/views/HooksTree.css            | 2 +-
 src/devtools/views/InspectedElementTree.css | 5 ++++-
 src/devtools/views/SelectedElement.css      | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index e531ba9f5a80..db582ec48bd7 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -1,6 +1,6 @@
 .HooksTreeView {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
 }
 
 .HooksNode {
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index f56b57fa3382..faad8dcc343e 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -1,6 +1,9 @@
 .InspectedElementTree {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+.InspectedElementTree:first-of-type {
+  border-top: none;
 }
 
 .Item {
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index c0fd0a1ba99c..c7f2ef356b36 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -38,6 +38,7 @@
 
 .Owners {
   padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
 }
 
 .Component,

From e723ec82bc84975234d08892065b450699a51fc1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 13:19:08 +0000
Subject: [PATCH 034/814] Added $r support

---
 shells/browser/shared/src/backend.js       |  2 +-
 shells/dev/src/backend.js                  |  2 +-
 src/backend/agent.js                       | 11 ++++++--
 src/backend/index.js                       |  4 +--
 src/backend/renderer.js                    | 30 +++++++++++++++++++++-
 src/backend/types.js                       |  1 +
 src/devtools/views/Element.css             |  4 +++
 src/devtools/views/Element.js              | 11 +++++---
 src/devtools/views/InspectedElementTree.js |  7 ++++-
 src/devtools/views/SelectedElement.js      |  3 +++
 src/devtools/views/root.css                |  2 +-
 11 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index a0a44850b221..771ec51efb0b 100644
--- a/shells/browser/shared/src/backend.js
+++ b/shells/browser/shared/src/backend.js
@@ -64,5 +64,5 @@ function setup(hook) {
     listeners.splice(0);
   });
 
-  initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent);
+  initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window);
 }
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index f5b029eef9d1..c387b52c33bb 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -18,4 +18,4 @@ const bridge = new Bridge({
 const agent = new Agent();
 agent.addBridge(bridge);
 
-initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent);
+initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window.parent);
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 377e3d86fc11..770d71c94df4 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -27,18 +27,25 @@ export default class Agent extends EventEmitter {
     bridge.addListener('shutdown', () => this.emit('shutdown'));
 
     bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('selectElement', this.selectElement);
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
   }
 
   inspectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
     const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    }
+    this._bridge.send('inspectedElement', renderer.inspectElement(id));
+  };
 
+  selectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+    const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
-    } else {
-      this._bridge.send('inspectedElement', renderer.inspectElement(id));
     }
+    this._bridge.send('selectElement', renderer.selectElement(id));
   };
 
   setRendererInterface(
diff --git a/src/backend/index.js b/src/backend/index.js
index 85382f380564..ed405f076b6d 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -5,7 +5,7 @@ import Agent from './agent';
 
 import { attach } from './renderer';
 
-export function initBackend(hook: Hook, agent: Agent): void {
+export function initBackend(hook: Hook, agent: Agent, global: Object): void {
   const subs = [
     hook.sub(
       'renderer-attached',
@@ -30,7 +30,7 @@ export function initBackend(hook: Hook, agent: Agent): void {
   ];
 
   const attachRenderer = (id: number, renderer: ReactRenderer) => {
-    const rendererInterface = attach(hook, id, renderer);
+    const rendererInterface = attach(hook, id, renderer, global);
     hook.rendererInterfaces.set(id, rendererInterface);
     hook.emit('renderer-attached', {
       id,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cadb0ffe45ce..145f2652b03d 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -152,7 +152,8 @@ function getInternalReactConstants(version) {
 export function attach(
   hook: Hook,
   rendererID: number,
-  renderer: ReactRenderer
+  renderer: ReactRenderer,
+  global: Object
 ): RendererInterface {
   const {
     ReactTypeOfWork,
@@ -1001,6 +1002,32 @@ export function attach(
     return alternate;
   }
 
+  function selectElement(id: number): void {
+    let fiber = idToFiberMap.get(id);
+
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    switch (fiber.tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+        global.$r = fiber.stateNode;
+        break;
+      case FunctionComponent:
+        global.$r = {
+          props: fiber.memoizedProps,
+          type: fiber.type,
+        };
+        break;
+      default:
+        global.$r = null;
+        break;
+    }
+  }
+
   function inspectElement(id: number): InspectedElement | null {
     let fiber = idToFiberMap.get(id);
 
@@ -1127,6 +1154,7 @@ export function attach(
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
+    selectElement,
     cleanup,
     walkTree,
     renderer,
diff --git a/src/backend/types.js b/src/backend/types.js
index e5202dc07bbb..62cf87d0fa80 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -50,6 +50,7 @@ export type RendererInterface = {
   handleCommitFiberRoot: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
+  selectElement: (id: number) => void,
   walkTree: () => void,
 };
 
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 8ffaae28fef6..236c404e437b 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -26,6 +26,10 @@
   --color-attribute-value: #fff;
 }
 
+.DollarR {
+  color: var(--color-tree-jsx-arrow-brackets);
+}
+
 .ArrowClosed,
 .ArrowOpen {
   position: absolute;
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 053340a46672..a76d57cec097 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment, useCallback, useContext } from 'react';
+import { ElementTypeClassOrFunction } from 'src/devtools/types';
 import { TreeContext } from './context';
 import { SelectedElementContext } from './SelectedElementContext';
 import Icon from './Icon';
@@ -26,7 +27,7 @@ export default function Element({ index, style }: Props) {
 
   // TODO Add click and key handlers for toggling element open/close state.
 
-  const { children, depth, displayName, id, key } = element;
+  const { children, depth, displayName, id, key, type } = element;
 
   const selectedElement = useContext(SelectedElementContext);
   const handleClick = useCallback(
@@ -36,11 +37,12 @@ export default function Element({ index, style }: Props) {
     [id]
   );
 
+  const isSelected = selectedElement.id === id;
+  const showDollarR = isSelected && type === ElementTypeClassOrFunction;
+
   return (
     <div
-      className={
-        selectedElement.id === id ? styles.SelectedElement : styles.Element
-      }
+      className={isSelected ? styles.SelectedElement : styles.Element}
       onClick={handleClick}
       style={{
         ...style, // "style" comes from react-window
@@ -62,6 +64,7 @@ export default function Element({ index, style }: Props) {
           </Fragment>
         )}
       </span>
+      {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
     </div>
   );
 }
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index e24accf89e22..57929f840667 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -29,7 +29,12 @@ export default function InspectedElementTree({
         {isEmpty && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           Object.keys((data: any)).map(name => (
-            <KeyValue key={name} depth={1} name={name} value={(data: any)[name]} />
+            <KeyValue
+              key={name}
+              depth={1}
+              name={name}
+              value={(data: any)[name]}
+            />
           ))}
       </div>
     );
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 8e3386a60b46..c58ba25cd61f 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -144,6 +144,9 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
     let timeoutID = null;
 
+    // Update the $r variable.
+    bridge.send('selectElement', { id, rendererID });
+
     const sendBridgeRequest = () => {
       bridge.send('inspectElement', { id, rendererID });
     };
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 7c62c374808e..5eefad2e987e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -12,7 +12,7 @@
   --theme-light-component-name-inverted: #ffffff;
   --theme-light-deemphasized: #cfd1d5;
   --theme-light-jsx-arrow-brackets: #333333;
-  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.8);
+  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --theme-light-tree-node-selected: #0088fa;
   --theme-light-tree-node-hover: #ebf1fb;
 

From 998e69a10defa81473cd50319a564ab485360186 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Feb 2019 17:14:06 +0000
Subject: [PATCH 035/814] Added search support

---
 src/devtools/store.js                       |  10 +-
 src/devtools/views/ButtonIcon.js            |  18 +-
 src/devtools/views/Element.css              |   7 +
 src/devtools/views/Element.js               |  50 ++++-
 src/devtools/views/Elements.js              |  17 +-
 src/devtools/views/HooksTree.css            |   2 +-
 src/devtools/views/InspectedElementTree.css |   4 +-
 src/devtools/views/SearchContext.js         | 194 ++++++++++++++++++++
 src/devtools/views/SearchInput.css          |  53 ++++++
 src/devtools/views/SearchInput.js           | 117 ++++++++++++
 src/devtools/views/SelectedElement.css      |   2 +-
 src/devtools/views/SelectedElement.js       |  18 +-
 src/devtools/views/Tree.css                 |  36 ++--
 src/devtools/views/Tree.js                  |  12 +-
 src/devtools/views/root.css                 |  10 +-
 15 files changed, 493 insertions(+), 57 deletions(-)
 create mode 100644 src/devtools/views/SearchContext.js
 create mode 100644 src/devtools/views/SearchInput.css
 create mode 100644 src/devtools/views/SearchInput.js

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 8982abe9fc90..880616e69a63 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -265,7 +265,7 @@ export default class Store extends EventEmitter {
               parentElement = ((this._idToElement.get(parentID): any): Element);
               parentElement.children = parentElement.children.concat(id);
 
-              this._idToElement.set(id, {
+              const element: Element = {
                 children: [],
                 depth: parentElement.depth + 1,
                 displayName,
@@ -274,7 +274,11 @@ export default class Store extends EventEmitter {
                 parentID: parentElement.id,
                 type,
                 weight: 1,
-              });
+              };
+
+              this._idToElement.set(id, element);
+
+              this.emit('elementAdded', element);
 
               weightDelta = 1;
             }
@@ -303,6 +307,8 @@ export default class Store extends EventEmitter {
               childID => childID !== id
             );
           }
+
+          this.emit('elementRemoved', element);
           break;
         case TREE_OPERATION_RESET_CHILDREN:
           id = ((operations[i + 1]: any): number);
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 5174e71e17ee..6f054b1d0a90 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -4,15 +4,24 @@ import React from 'react';
 import styles from './ButtonIcon.css';
 
 type Props = {|
-  type: 'search' | 'view-dom' | 'view-source',
+  type: 'close' | 'down' | 'search' | 'up' | 'view-dom' | 'view-source',
 |};
 
 export default function ButtonIcon({ type }: Props) {
   let pathData = null;
   switch (type) {
+    case 'close':
+      pathData = PATH_CLOSE;
+      break;
+    case 'down':
+      pathData = PATH_DOWN;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
+    case 'up':
+      pathData = PATH_UP;
+      break;
     case 'view-dom':
       pathData = PATH_VIEW_DOM;
       break;
@@ -38,12 +47,19 @@ export default function ButtonIcon({ type }: Props) {
   );
 }
 
+const PATH_CLOSE =
+  'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
+
+const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
+
 const PATH_SEARCH = `
   M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
   4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
   0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
 `;
 
+const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';
+
 const PATH_VIEW_DOM = `
   M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12
   17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 236c404e437b..a72e98de51b0 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -63,3 +63,10 @@
 .AttributeValue {
   color: var(--color-attribute-value);
 }
+
+.Highlight {
+  background-color: var(--color-search-match);
+}
+.CurrentHighlight {
+  background-color: var(--color-search-match-current);
+}
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index a76d57cec097..3a0304872134 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,8 +1,9 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext } from 'react';
+import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeClassOrFunction } from 'src/devtools/types';
 import { TreeContext } from './context';
+import { SearchContext } from './SearchContext';
 import { SelectedElementContext } from './SelectedElementContext';
 import Icon from './Icon';
 
@@ -56,7 +57,7 @@ export default function Element({ index, style }: Props) {
       )}
 
       <span className={styles.Component}>
-        {displayName}
+        <DisplayName displayName={displayName} id={id} />
         {key && (
           <Fragment>
             &nbsp;<span className={styles.AttributeName}>key</span>=
@@ -68,3 +69,48 @@ export default function Element({ index, style }: Props) {
     </div>
   );
 }
+
+type DisplayNameProps = {|
+  displayName: string | null,
+  id: number,
+|};
+
+function DisplayName({ displayName, id }: DisplayNameProps) {
+  const {
+    currentIndex: currentSearchIndex,
+    ids: searchIDs,
+    text: searchText,
+  } = useContext(SearchContext);
+  const isSearchResult = useMemo(() => {
+    return searchIDs.includes(id);
+  }, [id, searchIDs]);
+  const isCurrentResult =
+    currentSearchIndex !== null && id === searchIDs[currentSearchIndex];
+
+  if (!isSearchResult || displayName === null) {
+    return displayName;
+  }
+
+  const startIndex = displayName
+    .toLowerCase()
+    .indexOf(searchText.toLowerCase());
+  const stopIndex = startIndex + searchText.length;
+
+  const children = [];
+  if (startIndex > 0) {
+    children.push(<span key="begin">{displayName.slice(0, startIndex)}</span>);
+  }
+  children.push(
+    <mark
+      key="middle"
+      className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}
+    >
+      {displayName.slice(startIndex, stopIndex)}
+    </mark>
+  );
+  if (stopIndex < displayName.length) {
+    children.push(<span key="end">{displayName.slice(stopIndex)}</span>);
+  }
+
+  return children;
+}
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index a201174e1b92..8e6b8a24da9c 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -5,6 +5,7 @@ import Store from '../store';
 import Tree from './Tree';
 import { BridgeContext, StoreContext, TreeContext } from './context';
 import SelectedElement from './SelectedElement';
+import { SearchController } from './SearchContext';
 import { SelectedElementController } from './SelectedElementContext';
 import styles from './Elements.css';
 
@@ -51,14 +52,16 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
       <StoreContext.Provider value={store}>
         <TreeContext.Provider value={treeContext}>
           <SelectedElementController>
-            <div className={styles.Elements}>
-              <div className={styles.TreeWrapper}>
-                <Tree />
+            <SearchController>
+              <div className={styles.Elements}>
+                <div className={styles.TreeWrapper}>
+                  <Tree />
+                </div>
+                <div className={styles.SelectedElementWrapper}>
+                  <SelectedElement />
+                </div>
               </div>
-              <div className={styles.SelectedElementWrapper}>
-                <SelectedElement />
-              </div>
-            </div>
+            </SearchController>
           </SelectedElementController>
         </TreeContext.Provider>
       </StoreContext.Provider>
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index db582ec48bd7..c33c4c1d80b2 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -19,6 +19,6 @@
 }
 
 .None {
-  color: var(--color-deemphasized);
+  color: var(--color-dimmer);
   font-style: italic;
 }
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index faad8dcc343e..9020a0afa472 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -18,12 +18,12 @@
 }
 
 .None {
-  color: var(--color-deemphasized);
+  color: var(--color-dimmer);
   font-style: italic;
 }
 
 .Empty {
-  color: var(--color-deemphasized);
+  color: var(--color-dimmer);
   font-style: italic;
   padding-left: 1rem;
 }
diff --git a/src/devtools/views/SearchContext.js b/src/devtools/views/SearchContext.js
new file mode 100644
index 000000000000..596860b98cb9
--- /dev/null
+++ b/src/devtools/views/SearchContext.js
@@ -0,0 +1,194 @@
+// @flow
+
+import React, {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { StoreContext } from './context';
+import { SelectedElementContext } from './SelectedElementContext';
+import Store from '../store';
+
+import type { Element } from 'src/devtools/types';
+
+export type SearchContextValue = {|
+  get currentIndex(): number | null,
+  get ids(): Array<number>,
+  get text(): string,
+  updateCurrentIndex(newCurrentIndex: number): void,
+  updateText(newText: string): void,
+|};
+
+const SearchContext = createContext<SearchContextValue>(
+  ((null: any): SearchContextValue)
+);
+// $FlowFixMe displayName is a valid attribute of React$Context
+SearchContext.displayName = 'SearchContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+// TODO Remove this wrapper element once global Context.write API exists.
+function SearchController({ children }: Props) {
+  const store = useContext(StoreContext);
+  const selectedElement = useContext(SelectedElementContext);
+
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+  const [ids, setIDs] = useState<Array<number>>([]);
+  const [text, setText] = useState<string>('');
+
+  const updateIndexHelper = (
+    newCurrentIndex: number | null,
+    newOrCurrentIDs: Array<number>
+  ) => {
+    setCurrentIndex(newCurrentIndex);
+
+    // Make sure a new search result is also selected.
+    selectedElement.id =
+      newCurrentIndex !== null ? newOrCurrentIDs[newCurrentIndex] : null;
+  };
+
+  const value = useMemo(
+    () => ({
+      get currentIndex(): number | null {
+        return currentIndex;
+      },
+
+      get ids(): Array<number> {
+        return ids;
+      },
+
+      get text(): string {
+        return text;
+      },
+
+      updateCurrentIndex(newCurrentIndex: number) {
+        updateIndexHelper(newCurrentIndex, ids);
+      },
+
+      updateText(newText: string) {
+        setText(newText);
+
+        // Find all matching elements.
+        const newIDs = [];
+        if (newText !== '') {
+          const regExp = new RegExp(newText, 'i');
+          store.roots.forEach(rootID => {
+            searchTree(store, rootID, regExp, newIDs);
+          });
+
+          setIDs(newIDs);
+
+          // If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).
+          // If it's a new search, reset the index.
+          if (newIDs.length === 0) {
+            updateIndexHelper(null, newIDs);
+          } else if (currentIndex !== null && newText.startsWith(text)) {
+            updateIndexHelper(
+              Math.min(currentIndex, newIDs.length - 1),
+              newIDs
+            );
+          } else {
+            updateIndexHelper(0, newIDs);
+          }
+        } else {
+          setIDs([]);
+          updateIndexHelper(null, newIDs);
+        }
+      },
+    }),
+    [currentIndex, ids, text]
+  );
+
+  // Listen for changes to the tree and incrementally adjust the search results.
+  useLayoutEffect(() => {
+    const handleElementAdded = (element: Element) => {
+      if (!text) {
+        return;
+      }
+
+      const { displayName, id } = element;
+
+      // Add this item to the search results if it matches.
+      const regExp = new RegExp(text, 'i');
+      if (displayName !== null && regExp.test(displayName)) {
+        const newElementIndex = ((store.getIndexOfElementID(id): any): number);
+
+        let newIDs = null;
+        for (let index = 0; index < ids.length; index++) {
+          const id = ids[index];
+          if (
+            newElementIndex < ((store.getIndexOfElementID(id): any): number)
+          ) {
+            newIDs = ids
+              .slice(0, index)
+              .concat(id)
+              .concat(ids.slice(index));
+            break;
+          }
+        }
+        if (newIDs === null) {
+          newIDs = ids.concat(id);
+        }
+
+        setIDs(newIDs);
+        updateIndexHelper(currentIndex === null ? 0 : currentIndex, newIDs);
+      }
+    };
+    const handleElementRemoved = (element: Element) => {
+      if (!text) {
+        return;
+      }
+
+      // Prune this item from the search results.
+      const index = ids.indexOf(element.id);
+      if (index >= 0) {
+        const newIDs = ids.slice(0, index).concat(ids.slice(index + 1));
+        setIDs(newIDs);
+
+        // If the results are now empty, also deselect things.
+        if (newIDs.length === 0) {
+          updateIndexHelper(null, newIDs);
+        } else if (((currentIndex: any): number) < newIDs.length) {
+          updateIndexHelper(currentIndex, newIDs);
+        } else {
+          updateIndexHelper(newIDs.length - 1, newIDs);
+        }
+      }
+    };
+
+    store.addListener('elementAdded', handleElementAdded);
+    store.addListener('elementRemoved', handleElementRemoved);
+
+    return () => {
+      store.removeListener('elementAdded', handleElementAdded);
+      store.removeListener('elementRemoved', handleElementRemoved);
+    };
+  }, [currentIndex, ids, store, text]);
+
+  return (
+    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+  );
+}
+
+function searchTree(
+  store: Store,
+  elementID: number,
+  regExp: RegExp,
+  ids: Array<number>
+): void {
+  const { children, displayName } = ((store.getElementByID(
+    elementID
+  ): any): Element);
+  if (displayName !== null) {
+    if (regExp.test(displayName)) {
+      ids.push(elementID);
+    }
+  }
+  children.forEach(childID => searchTree(store, childID, regExp, ids));
+}
+
+export { SearchContext, SearchController };
diff --git a/src/devtools/views/SearchInput.css b/src/devtools/views/SearchInput.css
new file mode 100644
index 000000000000..5aed02be78e6
--- /dev/null
+++ b/src/devtools/views/SearchInput.css
@@ -0,0 +1,53 @@
+.SearchInput {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.Input {
+  flex: 1;
+  font-size: 1rem;
+  outline: none;
+  border: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 16px 16px;
+  padding-left: 1.5rem;
+}
+
+.IndexLabel {
+  color: var(--color-dim);
+  font-size: var(--font-size-normal);
+}
+
+.IconButton {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--color-button);
+  flex: 0 0 auto;
+}
+.IconButton:hover {
+  color: var(--color-button-hover);
+}
+.IconButton:disabled {
+  color: var(--color-dimmer);
+  cursor: default;
+}
+
+.LeftVRule,
+.RightVRule {
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+}
+.LeftVRule {
+  margin: 0 0.25rem 0 0.5rem;
+}
+.RightVRule {
+  margin: 0 0.5rem 0 0.25rem;
+}
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
new file mode 100644
index 000000000000..3159462178bb
--- /dev/null
+++ b/src/devtools/views/SearchInput.js
@@ -0,0 +1,117 @@
+// @flow
+
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { SearchContext } from './SearchContext';
+import ButtonIcon from './ButtonIcon';
+
+import styles from './SearchInput.css';
+
+type Props = {||};
+
+export default function SearchInput(props: Props) {
+  const {
+    currentIndex,
+    ids,
+    updateCurrentIndex,
+    updateText,
+    text,
+  } = useContext(SearchContext);
+
+  const inputRef = useRef();
+
+  const handleTextChange = useCallback(({ currentTarget }) => {
+    updateText(currentTarget.value);
+  });
+
+  const selectNext = useCallback(() => {
+    if (currentIndex !== null) {
+      updateCurrentIndex(currentIndex + 1);
+    }
+  }, [currentIndex]);
+
+  const selectPrevious = useCallback(() => {
+    if (currentIndex !== null) {
+      updateCurrentIndex(currentIndex - 1);
+    }
+  }, [currentIndex]);
+
+  const resetSearch = useCallback(() => {
+    updateText('');
+  }, [updateText]);
+
+  const handleInputKeyPress = useCallback(
+    ({ key }) => {
+      if (key === 'Enter') {
+        if (currentIndex !== null) {
+          if (currentIndex + 1 < ids.length) {
+            updateCurrentIndex(currentIndex + 1);
+          } else {
+            updateCurrentIndex(0);
+          }
+        }
+      }
+    },
+    [currentIndex, ids]
+  );
+
+  // Auto-focus search input
+  useEffect(() => {
+    const handleWindowKeyDown = event => {
+      const { key, metaKey } = event;
+      if (key === 'f' && metaKey) {
+        if (inputRef.current !== null) {
+          inputRef.current.focus();
+          event.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleWindowKeyDown);
+
+    return () => window.removeEventListener('keydown', handleWindowKeyDown);
+  }, [inputRef]);
+
+  return (
+    <div className={styles.SearchInput}>
+      <input
+        className={styles.Input}
+        onKeyPress={handleInputKeyPress}
+        onChange={handleTextChange}
+        placeholder="Search (text or /regex/)"
+        ref={inputRef}
+        value={text}
+      />
+      {!!text && (
+        <span className={styles.IndexLabel}>
+          {Math.min(currentIndex + 1, ids.length)} | {ids.length}
+        </span>
+      )}
+      <div className={styles.LeftVRule} />
+      <button
+        className={styles.IconButton}
+        disabled={currentIndex === null || currentIndex === 0}
+        onClick={selectPrevious}
+        title="Scroll to previous search result"
+      >
+        <ButtonIcon type="up" />
+      </button>
+      <button
+        className={styles.IconButton}
+        disabled={currentIndex === null || currentIndex === ids.length - 1}
+        onClick={selectNext}
+        title="Scroll to next search result"
+      >
+        <ButtonIcon type="down" />
+      </button>
+      <button
+        className={styles.IconButton}
+        disabled={!text}
+        onClick={resetSearch}
+        title="Reset search"
+      >
+        <ButtonIcon type="close" />
+      </button>
+      <div className={styles.RightVRule} />
+    </div>
+  );
+}
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index c7f2ef356b36..0f96d3e2a30e 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -78,6 +78,6 @@
 
 .Loading {
   padding: 0.25rem;
-  color: var(--color-deemphasized);
+  color: var(--color-dimmer);
   font-style: italic;
 }
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index c58ba25cd61f..572fa9eb6eb0 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -135,13 +135,13 @@ function useInspectedElement(id: number | null): InspectedElement | null {
   idRef.current = id;
 
   useLayoutEffect(() => {
+    // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
+    setInspectedElement(null);
+
     if (id === null) {
       return () => {};
     }
 
-    // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
-    setInspectedElement(null);
-
     let timeoutID = null;
 
     // Update the $r variable.
@@ -152,15 +152,17 @@ function useInspectedElement(id: number | null): InspectedElement | null {
     };
 
     const onInspectedElement = (inspectedElement: InspectedElement) => {
-      if (idRef.current !== inspectedElement.id) {
+      if (inspectedElement && inspectedElement.id !== idRef.current) {
         // Ignore bridge updates about previously selected elements.
         return;
       }
 
-      inspectedElement.context = hydrateHelper(inspectedElement.context);
-      inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
-      inspectedElement.props = hydrateHelper(inspectedElement.props);
-      inspectedElement.state = hydrateHelper(inspectedElement.state);
+      if (inspectedElement !== null) {
+        inspectedElement.context = hydrateHelper(inspectedElement.context);
+        inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
+        inspectedElement.props = hydrateHelper(inspectedElement.props);
+        inspectedElement.state = hydrateHelper(inspectedElement.state);
+      }
 
       setInspectedElement(inspectedElement);
 
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index 855f5331af49..5373266a5a7f 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -6,7 +6,7 @@
   border-top: 1px solid var(--color-border);
 }
 
-.SearchRow {
+.SearchInput {
   flex: 0 0 42px;
   display: flex;
   align-items: center;
@@ -15,16 +15,17 @@
   padding: 0.5rem;
 }
 
-.SearchInput {
-  font-size: 1rem;
-  flex: 1;
-  outline: none;
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: left center;
-  background-size: 16px 16px;
-  padding-left: 1.5rem;
+.AutoSizerWrapper {
+  width: 100%;
+  overflow: auto;
+  flex: 1 0 auto;
+  padding: 0.25rem;
+}
+
+.List {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-normal);
+  line-height: var(--line-height-data);
 }
 
 .IconButton {
@@ -40,16 +41,3 @@
 .IconButton:hover {
   color: var(--color-button-hover);
 }
-
-.AutoSizerWrapper {
-  width: 100%;
-  overflow: auto;
-  flex: 1 0 auto;
-  padding: 0.25rem;
-}
-
-.List {
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-normal);
-  line-height: var(--line-height-data);
-}
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index aac2f89aff26..fb97b5f0ded4 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -4,8 +4,9 @@ import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { SelectedElementContext } from './SelectedElementContext';
-import Element from './Element';
 import ButtonIcon from './ButtonIcon';
+import Element from './Element';
+import SearchInput from './SearchInput';
 import { TreeContext } from './context';
 
 import styles from './Tree.css';
@@ -15,7 +16,7 @@ type Props = {||};
 export default function Tree(props: Props) {
   const selectedElementContext = useContext(SelectedElementContext);
   const treeContext = useContext(TreeContext);
-  const listRef = useRef();
+  const listRef = useRef<FixedSizeList<any>>();
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list.
@@ -59,11 +60,8 @@ export default function Tree(props: Props) {
 
   return (
     <div className={styles.Tree}>
-      <div className={styles.SearchRow}>
-        <input
-          className={styles.SearchInput}
-          placeholder="Search (text or /regex/)"
-        />
+      <div className={styles.SearchInput}>
+        <SearchInput />
         <button
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 5eefad2e987e..f88ca6e6b28b 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -10,9 +10,12 @@
   --theme-light-color-border: #eeeeee;
   --theme-light-component-name: #8155cb;
   --theme-light-component-name-inverted: #ffffff;
-  --theme-light-deemphasized: #cfd1d5;
+  --theme-light-dim: #777d88;
+  --theme-light-dimmer: #cfd1d5;
   --theme-light-jsx-arrow-brackets: #333333;
   --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --theme-light-search-match: yellow;
+  --theme-light-search-match-current: orange;
   --theme-light-tree-node-selected: #0088fa;
   --theme-light-tree-node-hover: #ebf1fb;
 
@@ -29,7 +32,10 @@
   --color-button-hover: var(--theme-light-button-hover);
   --color-component-name: var(--theme-light-component-name);
   --color-component-name-inverted: var(--theme-light-component-name-inverted);
-  --color-deemphasized: var(--theme-light-deemphasized);
+  --color-dim: var(--theme-light-dim);
+  --color-dimmer: var(--theme-light-dimmer);
+  --color-search-match: var(--theme-light-search-match);
+  --color-search-match-current: var(--theme-light-search-match-current);
   --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
   --color-tree-jsx-arrow-brackets-inverted: var(
     --theme-light-jsx-arrow-brackets-inverted

From e77ba003362f24cf4d9af3b36411829c9413be7e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Feb 2019 16:31:02 +0000
Subject: [PATCH 036/814] Replaced SearchContext useStates with useReducer and
 fixed an edge-case search bug

---
 src/backend/agent.js                  |   5 -
 src/backend/index.js                  |   1 -
 src/backend/renderer.js               |   7 +-
 src/devtools/store.js                 |  20 +--
 src/devtools/views/Elements.js        |   4 +-
 src/devtools/views/SearchContext.js   | 216 ++++++++++++++++----------
 src/devtools/views/SearchInput.js     |  33 ++--
 src/devtools/views/SelectedElement.js |   7 +-
 8 files changed, 166 insertions(+), 127 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 770d71c94df4..056e817f0204 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -59,9 +59,4 @@ export default class Agent extends EventEmitter {
     debug('onHookOperations', operations);
     this._bridge.send('operations', operations, [operations.buffer]);
   };
-
-  onHookRootCommitted = (rootID: string) => {
-    debug('onHookRootCommitted', rootID);
-    this._bridge.send('rootCommitted', rootID);
-  };
 }
diff --git a/src/backend/index.js b/src/backend/index.js
index ed405f076b6d..895096ba4c43 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -24,7 +24,6 @@ export function initBackend(hook: Hook, agent: Agent, global: Object): void {
     ),
 
     hook.sub('operations', agent.onHookOperations),
-    hook.sub('rootCommitted', agent.onHookRootCommitted),
 
     // TODO Add additional subscriptions required for profiling mode
   ];
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 145f2652b03d..ec6ec23049e7 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -524,13 +524,10 @@ export function attach(
     addOperation(idArray, true);
 
     // Let the frontend know about tree operations.
+    // The first value in this array will identify which root it corresponds to,
+    // so we do no longer need to dispatch a separate root-committed event.
     hook.emit('operations', pendingOperations);
     pendingOperations = new Uint32Array(0);
-
-    // Let the frontend know that we're done working on this root.
-    // Technically this could be inferred, but it's better to explicitly do this for the case of multi roots.
-    // Else the frontend would need to traverse the tree to identify which updates corresponded to which roots.
-    hook.emit('rootCommitted', getFiberID(getPrimaryFiber(root.current)));
   }
 
   function enqueueMount(fiber: Fiber, parentFiber: Fiber | null) {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 880616e69a63..645a170a46a4 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -49,7 +49,6 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     bridge.on('operations', this.onBridgeOperations);
-    bridge.on('rootCommitted', this.onBridgeRootCommitted);
   }
 
   get numElements(): number {
@@ -196,6 +195,9 @@ export default class Store extends EventEmitter {
 
     const rendererID = operations[0];
 
+    let addedElementIDs: Uint32Array = new Uint32Array(0);
+    let removedElementIDs: Uint32Array = new Uint32Array(0);
+
     let i = 1;
     while (i < operations.length) {
       let id: number = ((null: any): number);
@@ -278,7 +280,9 @@ export default class Store extends EventEmitter {
 
               this._idToElement.set(id, element);
 
-              this.emit('elementAdded', element);
+              // Track newly addewd items so search results can be updated
+              addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
+              addedElementIDs[addedElementIDs.length - 1] = id;
 
               weightDelta = 1;
             }
@@ -308,7 +312,9 @@ export default class Store extends EventEmitter {
             );
           }
 
-          this.emit('elementRemoved', element);
+          // Track removed items so search results can be updated
+          removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
+          removedElementIDs[removedElementIDs.length - 1] = id;
           break;
         case TREE_OPERATION_RESET_CHILDREN:
           id = ((operations[i + 1]: any): number);
@@ -353,14 +359,8 @@ export default class Store extends EventEmitter {
     if (haveRootsChanged) {
       this.emit('roots');
     }
-  };
-
-  onBridgeRootCommitted = (rootID: number) => {
-    debug('onBridgeRootCommitted', rootID);
-
-    this.emit('rootCommitted');
 
-    // this.__printTree(rootID);
+    this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
   // DEBUG
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 8e6b8a24da9c..2079dbc62cd0 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -41,9 +41,9 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
       handler();
     }
 
-    store.addListener('rootCommitted', handler);
+    store.addListener('mutated', handler);
 
-    return () => store.removeListener('rootCommitted', handler);
+    return () => store.removeListener('mutated', handler);
   }, [store]);
 
   // TODO Flex wrappers below should be user resizable.
diff --git a/src/devtools/views/SearchContext.js b/src/devtools/views/SearchContext.js
index 596860b98cb9..889fdaa5a2f5 100644
--- a/src/devtools/views/SearchContext.js
+++ b/src/devtools/views/SearchContext.js
@@ -5,7 +5,7 @@ import React, {
   useContext,
   useLayoutEffect,
   useMemo,
-  useState,
+  useReducer,
 } from 'react';
 import { StoreContext } from './context';
 import { SelectedElementContext } from './SelectedElementContext';
@@ -27,6 +27,29 @@ const SearchContext = createContext<SearchContextValue>(
 // $FlowFixMe displayName is a valid attribute of React$Context
 SearchContext.displayName = 'SearchContext';
 
+type State = {|
+  currentIndex: number | null,
+  ids: Array<number>,
+  text: string,
+|};
+
+type Action = {|
+  type: 'UPDATE',
+  payload: $Shape<State>,
+|};
+
+function reducer(state: State, action: Action) {
+  switch (action.type) {
+    case 'UPDATE':
+      return {
+        ...state,
+        ...action.payload,
+      };
+    default:
+      throw new Error();
+  }
+}
+
 type Props = {|
   children: React$Node,
 |};
@@ -36,138 +59,161 @@ function SearchController({ children }: Props) {
   const store = useContext(StoreContext);
   const selectedElement = useContext(SelectedElementContext);
 
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-  const [ids, setIDs] = useState<Array<number>>([]);
-  const [text, setText] = useState<string>('');
-
-  const updateIndexHelper = (
-    newCurrentIndex: number | null,
-    newOrCurrentIDs: Array<number>
-  ) => {
-    setCurrentIndex(newCurrentIndex);
-
-    // Make sure a new search result is also selected.
-    selectedElement.id =
-      newCurrentIndex !== null ? newOrCurrentIDs[newCurrentIndex] : null;
-  };
+  const [state, dispatch] = useReducer(reducer, {
+    currentIndex: null,
+    ids: [],
+    text: '',
+  });
 
   const value = useMemo(
     () => ({
       get currentIndex(): number | null {
-        return currentIndex;
+        return state.currentIndex;
       },
 
       get ids(): Array<number> {
-        return ids;
+        return state.ids;
       },
 
       get text(): string {
-        return text;
+        return state.text;
       },
 
       updateCurrentIndex(newCurrentIndex: number) {
-        updateIndexHelper(newCurrentIndex, ids);
+        dispatch({
+          type: 'UPDATE',
+          payload: {
+            currentIndex: newCurrentIndex,
+          },
+        });
+
+        // Make sure a new search result is also selected.
+        selectedElement.id =
+          newCurrentIndex !== null ? state.ids[newCurrentIndex] : null;
       },
 
       updateText(newText: string) {
-        setText(newText);
+        const { currentIndex: oldCurrentIndex, text: oldText } = state;
+
+        let newCurrentIndex = oldCurrentIndex;
+        let newIDs = [];
 
         // Find all matching elements.
-        const newIDs = [];
         if (newText !== '') {
           const regExp = new RegExp(newText, 'i');
           store.roots.forEach(rootID => {
             searchTree(store, rootID, regExp, newIDs);
           });
 
-          setIDs(newIDs);
-
           // If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).
           // If it's a new search, reset the index.
           if (newIDs.length === 0) {
-            updateIndexHelper(null, newIDs);
-          } else if (currentIndex !== null && newText.startsWith(text)) {
-            updateIndexHelper(
-              Math.min(currentIndex, newIDs.length - 1),
-              newIDs
-            );
+            newCurrentIndex = null;
+          } else if (oldCurrentIndex !== null && newText.startsWith(oldText)) {
+            newCurrentIndex = Math.min(oldCurrentIndex, newIDs.length - 1);
           } else {
-            updateIndexHelper(0, newIDs);
+            newCurrentIndex = 0;
           }
         } else {
-          setIDs([]);
-          updateIndexHelper(null, newIDs);
+          newCurrentIndex = null;
         }
+
+        dispatch({
+          type: 'UPDATE',
+          payload: {
+            currentIndex: newCurrentIndex,
+            ids: newIDs,
+            text: newText,
+          },
+        });
+
+        // Make sure a new search result is also selected.
+        selectedElement.id =
+          newCurrentIndex !== null ? newIDs[newCurrentIndex] : null;
       },
     }),
-    [currentIndex, ids, text]
+    [state]
   );
 
   // Listen for changes to the tree and incrementally adjust the search results.
   useLayoutEffect(() => {
-    const handleElementAdded = (element: Element) => {
+    const handleStoreMutated = ([
+      addedElementIDs,
+      removedElementIDs,
+    ]: Array<Uint32Array>) => {
+      const { currentIndex, ids, text } = state;
+
       if (!text) {
         return;
       }
 
-      const { displayName, id } = element;
-
-      // Add this item to the search results if it matches.
-      const regExp = new RegExp(text, 'i');
-      if (displayName !== null && regExp.test(displayName)) {
-        const newElementIndex = ((store.getIndexOfElementID(id): any): number);
-
-        let newIDs = null;
-        for (let index = 0; index < ids.length; index++) {
-          const id = ids[index];
-          if (
-            newElementIndex < ((store.getIndexOfElementID(id): any): number)
-          ) {
-            newIDs = ids
-              .slice(0, index)
-              .concat(id)
-              .concat(ids.slice(index));
-            break;
+      let newIDs = ids;
+      let newCurrentIndex = currentIndex;
+
+      removedElementIDs.forEach(id => {
+        // Prune this item from the search results.
+        const index = newIDs.indexOf(id);
+        if (index >= 0) {
+          newIDs = newIDs.slice(0, index).concat(newIDs.slice(index + 1));
+
+          // If the results are now empty, also deselect things.
+          if (newIDs.length === 0) {
+            newCurrentIndex = null;
+          } else if (((newCurrentIndex: any): number) >= newIDs.length) {
+            newCurrentIndex = newIDs.length - 1;
           }
         }
-        if (newIDs === null) {
-          newIDs = ids.concat(id);
-        }
-
-        setIDs(newIDs);
-        updateIndexHelper(currentIndex === null ? 0 : currentIndex, newIDs);
-      }
-    };
-    const handleElementRemoved = (element: Element) => {
-      if (!text) {
-        return;
-      }
+      });
+
+      addedElementIDs.forEach(id => {
+        const { displayName } = ((store.getElementByID(id): any): Element);
+
+        // Add this item to the search results if it matches.
+        const regExp = new RegExp(text, 'i');
+        if (displayName !== null && regExp.test(displayName)) {
+          const newElementIndex = ((store.getIndexOfElementID(
+            id
+          ): any): number);
+
+          let foundMatch = false;
+          for (let index = 0; index < newIDs.length; index++) {
+            const id = newIDs[index];
+            if (
+              newElementIndex < ((store.getIndexOfElementID(id): any): number)
+            ) {
+              foundMatch = true;
+              newIDs = newIDs
+                .slice(0, index)
+                .concat(id)
+                .concat(newIDs.slice(index));
+              break;
+            }
+          }
+          if (!foundMatch) {
+            newIDs = newIDs.concat(id);
+          }
 
-      // Prune this item from the search results.
-      const index = ids.indexOf(element.id);
-      if (index >= 0) {
-        const newIDs = ids.slice(0, index).concat(ids.slice(index + 1));
-        setIDs(newIDs);
-
-        // If the results are now empty, also deselect things.
-        if (newIDs.length === 0) {
-          updateIndexHelper(null, newIDs);
-        } else if (((currentIndex: any): number) < newIDs.length) {
-          updateIndexHelper(currentIndex, newIDs);
-        } else {
-          updateIndexHelper(newIDs.length - 1, newIDs);
+          newCurrentIndex = newCurrentIndex === null ? 0 : newCurrentIndex;
         }
-      }
+      });
+
+      dispatch({
+        type: 'UPDATE',
+        payload: {
+          currentIndex: newCurrentIndex,
+          ids: newIDs,
+        },
+      });
+
+      // Make sure a new search result is also selected.
+      selectedElement.id =
+        newCurrentIndex !== null ? newIDs[newCurrentIndex] : null;
     };
 
-    store.addListener('elementAdded', handleElementAdded);
-    store.addListener('elementRemoved', handleElementRemoved);
+    store.addListener('mutated', handleStoreMutated);
 
-    return () => {
-      store.removeListener('elementAdded', handleElementAdded);
-      store.removeListener('elementRemoved', handleElementRemoved);
-    };
-  }, [currentIndex, ids, store, text]);
+    return () => store.removeListener('mutated', handleStoreMutated);
+  }, [state, store]);
 
   return (
     <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 3159462178bb..518f071fb570 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -9,49 +9,46 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
-  const {
-    currentIndex,
-    ids,
-    updateCurrentIndex,
-    updateText,
-    text,
-  } = useContext(SearchContext);
+  const searchContext = useContext(SearchContext);
 
   const inputRef = useRef();
 
   const handleTextChange = useCallback(({ currentTarget }) => {
-    updateText(currentTarget.value);
+    searchContext.updateText(currentTarget.value);
   });
 
   const selectNext = useCallback(() => {
+    const { currentIndex } = searchContext;
     if (currentIndex !== null) {
-      updateCurrentIndex(currentIndex + 1);
+      searchContext.updateCurrentIndex(currentIndex + 1);
     }
-  }, [currentIndex]);
+  }, [searchContext]);
 
   const selectPrevious = useCallback(() => {
+    const { currentIndex } = searchContext;
     if (currentIndex !== null) {
-      updateCurrentIndex(currentIndex - 1);
+      searchContext.updateCurrentIndex(currentIndex - 1);
     }
-  }, [currentIndex]);
+  }, [searchContext]);
 
   const resetSearch = useCallback(() => {
-    updateText('');
-  }, [updateText]);
+    searchContext.updateText('');
+  }, [searchContext]);
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
+        const { currentIndex, ids } = searchContext;
         if (currentIndex !== null) {
           if (currentIndex + 1 < ids.length) {
-            updateCurrentIndex(currentIndex + 1);
+            searchContext.updateCurrentIndex(currentIndex + 1);
           } else {
-            updateCurrentIndex(0);
+            searchContext.updateCurrentIndex(0);
           }
         }
       }
     },
-    [currentIndex, ids]
+    [searchContext]
   );
 
   // Auto-focus search input
@@ -71,6 +68,8 @@ export default function SearchInput(props: Props) {
     return () => window.removeEventListener('keydown', handleWindowKeyDown);
   }, [inputRef]);
 
+  const { currentIndex, ids, text } = searchContext;
+
   return (
     <div className={styles.SearchInput}>
       <input
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 572fa9eb6eb0..130636c4cd61 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -126,7 +126,8 @@ function useInspectedElement(id: number | null): InspectedElement | null {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const rendererID = id === null ? null : store.getRendererIDForElement(id);
+  const rendererID =
+    id === null ? null : store.getRendererIDForElement(id) || null;
 
   const [inspectedElement, setInspectedElement] = useState(null);
 
@@ -138,7 +139,9 @@ function useInspectedElement(id: number | null): InspectedElement | null {
     // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
     setInspectedElement(null);
 
-    if (id === null) {
+    // A null id indicates that there's nothing currently selected in the tree.
+    // A null renderer ID indicates that the previously selected element has been unmounted.
+    if (id === null || rendererID === null) {
       return () => {};
     }
 

From c61e0f0d54c0cc1cfe897cfc4e2cd956bda2509d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Feb 2019 17:09:46 +0000
Subject: [PATCH 037/814] Added a clarifying comment to SearchInput

---
 src/devtools/views/SearchInput.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 518f071fb570..330f257abacb 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -9,6 +9,10 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
+  // We use the wrapper searchContext object rather than its individual parts–
+  // (specifically for the useCallback input arrays below)–
+  // because a change in any one value (e.g. ids array) impacts other values (e.g. currentIndex).
+  // It's easier to avoid stale scope issues if we depend on the entire search state.
   const searchContext = useContext(SearchContext);
 
   const inputRef = useRef();

From 9c093ac731e3c82798e68101f9838cbd03872db7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Feb 2019 21:33:44 +0000
Subject: [PATCH 038/814] Fixed regexp parsing

---
 package.json                        |  1 +
 src/devtools/views/Element.js       | 13 +++++++++----
 src/devtools/views/SearchContext.js |  5 +++--
 src/devtools/views/utils.js         |  5 +++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d355ffec5ad7..21434e9d8efb 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
+    "escape-string-regexp": "^1.0.5",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-config-react-app": "^2.1.0",
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 3a0304872134..f3e0104fe7b6 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -3,6 +3,7 @@
 import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeClassOrFunction } from 'src/devtools/types';
 import { TreeContext } from './context';
+import { createRegExp } from './utils';
 import { SearchContext } from './SearchContext';
 import { SelectedElementContext } from './SelectedElementContext';
 import Icon from './Icon';
@@ -91,10 +92,14 @@ function DisplayName({ displayName, id }: DisplayNameProps) {
     return displayName;
   }
 
-  const startIndex = displayName
-    .toLowerCase()
-    .indexOf(searchText.toLowerCase());
-  const stopIndex = startIndex + searchText.length;
+  const match = createRegExp(searchText).exec(displayName);
+
+  if (match === null) {
+    return displayName;
+  }
+
+  const startIndex = match.index;
+  const stopIndex = startIndex + match[0].length;
 
   const children = [];
   if (startIndex > 0) {
diff --git a/src/devtools/views/SearchContext.js b/src/devtools/views/SearchContext.js
index 889fdaa5a2f5..2094ce2b5779 100644
--- a/src/devtools/views/SearchContext.js
+++ b/src/devtools/views/SearchContext.js
@@ -7,6 +7,7 @@ import React, {
   useMemo,
   useReducer,
 } from 'react';
+import { createRegExp } from './utils';
 import { StoreContext } from './context';
 import { SelectedElementContext } from './SelectedElementContext';
 import Store from '../store';
@@ -100,7 +101,7 @@ function SearchController({ children }: Props) {
 
         // Find all matching elements.
         if (newText !== '') {
-          const regExp = new RegExp(newText, 'i');
+          let regExp = createRegExp(newText);
           store.roots.forEach(rootID => {
             searchTree(store, rootID, regExp, newIDs);
           });
@@ -169,7 +170,7 @@ function SearchController({ children }: Props) {
         const { displayName } = ((store.getElementByID(id): any): Element);
 
         // Add this item to the search results if it matches.
-        const regExp = new RegExp(text, 'i');
+        const regExp = createRegExp(text);
         if (displayName !== null && regExp.test(displayName)) {
           const newElementIndex = ((store.getIndexOfElementID(
             id
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 3726edd83a52..cbd08456c65f 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -1,7 +1,12 @@
 // @flow
 
+import escapeStringRegExp from 'escape-string-regexp';
 import { meta } from '../../hydration';
 
+export function createRegExp(string: string): RegExp {
+  return new RegExp(escapeStringRegExp(string), 'i');
+}
+
 export function getMetaValueLabel(data: Object): string | null {
   switch (data[meta.type]) {
     case 'react_element':

From fc924d136ac23ab4ac3d681675ee8d93a4047b25 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 7 Feb 2019 09:29:42 +0000
Subject: [PATCH 039/814] Combined search and selection contexts to avoid
 complicated dependencies

---
 src/devtools/views/Element.js                 |  27 +-
 src/devtools/views/Elements.js                |  23 +-
 .../views/SearchAndSelectionContext.js        | 373 ++++++++++++++++++
 src/devtools/views/SearchContext.js           | 241 -----------
 src/devtools/views/SearchInput.js             |  68 ++--
 src/devtools/views/SelectedElement.js         |  28 +-
 src/devtools/views/SelectedElementContext.js  |  56 ---
 src/devtools/views/Tree.js                    |  30 +-
 8 files changed, 444 insertions(+), 402 deletions(-)
 create mode 100644 src/devtools/views/SearchAndSelectionContext.js
 delete mode 100644 src/devtools/views/SearchContext.js
 delete mode 100644 src/devtools/views/SelectedElementContext.js

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index f3e0104fe7b6..7e92ad3013f8 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -4,8 +4,7 @@ import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeClassOrFunction } from 'src/devtools/types';
 import { TreeContext } from './context';
 import { createRegExp } from './utils';
-import { SearchContext } from './SearchContext';
-import { SelectedElementContext } from './SelectedElementContext';
+import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import Icon from './Icon';
 
 import styles from './Element.css';
@@ -31,15 +30,15 @@ export default function Element({ index, style }: Props) {
 
   const { children, depth, displayName, id, key, type } = element;
 
-  const selectedElement = useContext(SelectedElementContext);
+  const { selectedElementID, selectElementWithID } = useContext(
+    SearchAndSelectionContext
+  );
   const handleClick = useCallback(
-    ({ metaKey }) => {
-      selectedElement.id = metaKey ? null : id;
-    },
+    ({ metaKey }) => selectElementWithID(metaKey ? null : id),
     [id]
   );
 
-  const isSelected = selectedElement.id === id;
+  const isSelected = selectedElementID === id;
   const showDollarR = isSelected && type === ElementTypeClassOrFunction;
 
   return (
@@ -77,16 +76,14 @@ type DisplayNameProps = {|
 |};
 
 function DisplayName({ displayName, id }: DisplayNameProps) {
-  const {
-    currentIndex: currentSearchIndex,
-    ids: searchIDs,
-    text: searchText,
-  } = useContext(SearchContext);
+  const { searchIndex, searchResults, searchText } = useContext(
+    SearchAndSelectionContext
+  );
   const isSearchResult = useMemo(() => {
-    return searchIDs.includes(id);
-  }, [id, searchIDs]);
+    return searchResults.includes(id);
+  }, [id, searchResults]);
   const isCurrentResult =
-    currentSearchIndex !== null && id === searchIDs[currentSearchIndex];
+    searchIndex !== null && id === searchResults[searchIndex];
 
   if (!isSearchResult || displayName === null) {
     return displayName;
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 2079dbc62cd0..116761969a0f 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -5,8 +5,7 @@ import Store from '../store';
 import Tree from './Tree';
 import { BridgeContext, StoreContext, TreeContext } from './context';
 import SelectedElement from './SelectedElement';
-import { SearchController } from './SearchContext';
-import { SelectedElementController } from './SelectedElementContext';
+import { SearchAndSelectionController } from './SearchAndSelectionContext';
 import styles from './Elements.css';
 
 import './root.css';
@@ -51,18 +50,16 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
         <TreeContext.Provider value={treeContext}>
-          <SelectedElementController>
-            <SearchController>
-              <div className={styles.Elements}>
-                <div className={styles.TreeWrapper}>
-                  <Tree />
-                </div>
-                <div className={styles.SelectedElementWrapper}>
-                  <SelectedElement />
-                </div>
+          <SearchAndSelectionController>
+            <div className={styles.Elements}>
+              <div className={styles.TreeWrapper}>
+                <Tree />
               </div>
-            </SearchController>
-          </SelectedElementController>
+              <div className={styles.SelectedElementWrapper}>
+                <SelectedElement />
+              </div>
+            </div>
+          </SearchAndSelectionController>
         </TreeContext.Provider>
       </StoreContext.Provider>
     </BridgeContext.Provider>
diff --git a/src/devtools/views/SearchAndSelectionContext.js b/src/devtools/views/SearchAndSelectionContext.js
new file mode 100644
index 000000000000..886c0a16be47
--- /dev/null
+++ b/src/devtools/views/SearchAndSelectionContext.js
@@ -0,0 +1,373 @@
+// @flow
+
+// This context contains both the current search state and the selected element.
+// These values are combined into a single context because changes in one often impact the other.
+// Combining them enables us to avoid cascading renders.
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+} from 'react';
+import { createRegExp } from './utils';
+import { StoreContext } from './context';
+import Store from '../store';
+
+import type { Element } from 'src/devtools/types';
+
+type Context = {|
+  // Read current context values:
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+
+  // Update current context values:
+  decrementSearchIndex(): void,
+  incrementSearchIndex(): void,
+  selectElementWithID(id: number | null): void,
+  selectElementAtIndex(index: number | null): void,
+  updateSearchText(searchText: string): void,
+|};
+
+const SearchAndSelectionContext = createContext<Context>(
+  ((null: any): Context)
+);
+// $FlowFixMe displayName is a valid attribute of React$ConsearchText
+SearchAndSelectionContext.displayName = 'SearchAndSelectionContext';
+
+type State = {|
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+|};
+
+type Action = {|
+  type:
+    | 'DECREMENT_SEARCH_INDEX'
+    | 'INCREMENT_SEARCH_INDEX'
+    | 'REFINE_SEARCH_RESULTS'
+    | 'SELECT_ELEMENT_WITH_ID'
+    | 'SELECT_ELEMENT_AT_INDEX'
+    | 'UPDATE_SEARCH_TEXT',
+  payload?: any,
+|};
+
+type Props = {|
+  children: React$Node,
+|};
+
+// TODO Remove this wrapper element once global ConsearchText.write API exists.
+function SearchAndSelectionController({ children }: Props) {
+  const store = useContext(StoreContext);
+
+  // This reducer is created inline because it needs access to the Store.
+  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
+  // so it's okay for the reducer to have an empty dependencies array.
+  const reducer = useMemo(
+    () =>
+      function reducer(state: State, action: Action): State {
+        const { searchIndex, searchResults, searchText } = state;
+        const { payload, type } = action;
+
+        let newSearchIndex,
+          newSearchResults,
+          newSearchText,
+          newSelectedElementID;
+
+        switch (type) {
+          case 'DECREMENT_SEARCH_INDEX':
+            if (searchResults.length === 0) return state;
+
+            newSearchIndex =
+              ((searchIndex: any): number) > 0
+                ? ((searchIndex: any): number) - 1
+                : searchResults.length - 1;
+            newSelectedElementID = searchResults[newSearchIndex];
+
+            return {
+              ...state,
+              searchIndex: newSearchIndex,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex: store.getIndexOfElementID(
+                newSelectedElementID
+              ),
+            };
+
+          case 'INCREMENT_SEARCH_INDEX':
+            if (searchResults.length === 0) return state;
+
+            newSearchIndex =
+              ((searchIndex: any): number) + 1 < searchResults.length
+                ? ((searchIndex: any): number) + 1
+                : 0;
+            newSelectedElementID = searchResults[newSearchIndex];
+
+            return {
+              ...state,
+              searchIndex: newSearchIndex,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex: store.getIndexOfElementID(
+                newSelectedElementID
+              ),
+            };
+
+          case 'REFINE_SEARCH_RESULTS':
+            const [
+              addedElementIDs,
+              removedElementIDs,
+            ] = ((payload: any): Array<Uint32Array>);
+
+            newSearchResults = searchResults;
+            newSearchIndex = searchIndex;
+
+            removedElementIDs.forEach(id => {
+              // Prune this item from the search results.
+              const index = newSearchResults.indexOf(id);
+              if (index >= 0) {
+                newSearchResults = newSearchResults
+                  .slice(0, index)
+                  .concat(newSearchResults.slice(index + 1));
+
+                // If the results are now empty, also deselect things.
+                if (newSearchResults.length === 0) {
+                  newSearchIndex = null;
+                } else if (
+                  ((newSearchIndex: any): number) >= newSearchResults.length
+                ) {
+                  newSearchIndex = newSearchResults.length - 1;
+                }
+              }
+            });
+
+            addedElementIDs.forEach(id => {
+              const { displayName } = ((store.getElementByID(
+                id
+              ): any): Element);
+
+              // Add this item to the search results if it matches.
+              const regExp = createRegExp(searchText);
+              if (displayName !== null && regExp.test(displayName)) {
+                const newElementIndex = ((store.getIndexOfElementID(
+                  id
+                ): any): number);
+
+                let foundMatch = false;
+                for (let index = 0; index < newSearchResults.length; index++) {
+                  const id = newSearchResults[index];
+                  if (
+                    newElementIndex <
+                    ((store.getIndexOfElementID(id): any): number)
+                  ) {
+                    foundMatch = true;
+                    newSearchResults = newSearchResults
+                      .slice(0, index)
+                      .concat(id)
+                      .concat(newSearchResults.slice(index));
+                    break;
+                  }
+                }
+                if (!foundMatch) {
+                  newSearchResults = newSearchResults.concat(id);
+                }
+
+                newSearchIndex = newSearchIndex === null ? 0 : newSearchIndex;
+              }
+            });
+
+            newSelectedElementID =
+              newSearchIndex !== null ? newSearchResults[newSearchIndex] : null;
+
+            return {
+              ...state,
+              searchIndex: newSearchIndex,
+              searchResults: newSearchResults,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex:
+                newSelectedElementID !== null
+                  ? store.getIndexOfElementID(newSelectedElementID)
+                  : null,
+            };
+
+          case 'SELECT_ELEMENT_WITH_ID':
+            newSelectedElementID = ((payload: any): number | null);
+
+            return {
+              ...state,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex:
+                newSelectedElementID !== null
+                  ? store.getIndexOfElementID(newSelectedElementID)
+                  : null,
+            };
+
+          case 'SELECT_ELEMENT_AT_INDEX':
+            newSearchIndex = ((payload: any): number | null);
+
+            const element =
+              newSearchIndex !== null
+                ? store.getElementAtIndex(newSearchIndex)
+                : null;
+
+            return {
+              ...state,
+              selectedElementID: element !== null ? element.id : null,
+              selectedElementIndex: newSearchIndex,
+            };
+
+          case 'UPDATE_SEARCH_TEXT':
+            newSearchIndex = searchIndex;
+            newSearchResults = [];
+            newSearchText = ((payload: any): string);
+
+            // Find all matching elements.
+            if (newSearchText !== '') {
+              const regExp = createRegExp(newSearchText);
+              store.roots.forEach(rootID => {
+                recursivelySearchTree(store, rootID, regExp, newSearchResults);
+              });
+
+              // If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).
+              // If it's a new search, reset the index.
+              if (newSearchResults.length === 0) {
+                newSearchIndex = null;
+              } else if (
+                searchIndex !== null &&
+                newSearchText.startsWith(searchText)
+              ) {
+                newSearchIndex = Math.min(
+                  searchIndex,
+                  newSearchResults.length - 1
+                );
+              } else {
+                newSearchIndex = 0;
+              }
+            } else {
+              newSearchIndex = null;
+            }
+
+            newSelectedElementID =
+              newSearchIndex !== null ? newSearchResults[newSearchIndex] : null;
+
+            return {
+              ...state,
+              searchIndex: newSearchIndex,
+              searchResults: newSearchResults,
+              searchText: newSearchText,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex:
+                newSelectedElementID !== null
+                  ? store.getIndexOfElementID(newSelectedElementID)
+                  : null,
+            };
+
+          default:
+            throw new Error(`Unrecognized action "${type}"`);
+        }
+      },
+    []
+  );
+
+  const [state, dispatch] = useReducer(reducer, {
+    searchIndex: null,
+    searchResults: [],
+    searchText: '',
+    selectedElementID: null,
+    selectedElementIndex: null,
+  });
+
+  const decrementSearchIndex = useCallback(
+    () => dispatch({ type: 'DECREMENT_SEARCH_INDEX' }),
+    [dispatch]
+  );
+  const incrementSearchIndex = useCallback(
+    () => dispatch({ type: 'INCREMENT_SEARCH_INDEX' }),
+    [dispatch]
+  );
+  const selectElementWithID = useCallback(
+    (id: number | null) =>
+      dispatch({ type: 'SELECT_ELEMENT_WITH_ID', payload: id }),
+    [dispatch]
+  );
+  const selectElementAtIndex = useCallback(
+    (index: number | null) =>
+      dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
+    [dispatch]
+  );
+  const updateSearchText = useCallback(
+    (searchText: string) =>
+      dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: searchText }),
+    [dispatch]
+  );
+
+  const value = useMemo(
+    () => ({
+      searchIndex: state.searchIndex,
+      searchResults: state.searchResults,
+      searchText: state.searchText,
+      selectedElementID: state.selectedElementID,
+      selectedElementIndex: state.selectedElementIndex,
+
+      decrementSearchIndex,
+      incrementSearchIndex,
+      selectElementWithID,
+      selectElementAtIndex,
+      updateSearchText,
+    }),
+    [state]
+  );
+
+  // Listen for changes to the tree and incrementally adjust the search results.
+  useLayoutEffect(() => {
+    const handleStoreMutated = ([
+      addedElementIDs,
+      removedElementIDs,
+    ]: Array<Uint32Array>) => {
+      if (!state.searchText) {
+        return;
+      }
+
+      dispatch({
+        type: 'REFINE_SEARCH_RESULTS',
+        payload: [addedElementIDs, removedElementIDs],
+      });
+    };
+
+    store.addListener('mutated', handleStoreMutated);
+
+    return () => store.removeListener('mutated', handleStoreMutated);
+  }, [state, store]);
+
+  return (
+    <SearchAndSelectionContext.Provider value={value}>
+      {children}
+    </SearchAndSelectionContext.Provider>
+  );
+}
+
+function recursivelySearchTree(
+  store: Store,
+  elementID: number,
+  regExp: RegExp,
+  searchResults: Array<number>
+): void {
+  const { children, displayName } = ((store.getElementByID(
+    elementID
+  ): any): Element);
+  if (displayName !== null) {
+    if (regExp.test(displayName)) {
+      searchResults.push(elementID);
+    }
+  }
+  children.forEach(childID =>
+    recursivelySearchTree(store, childID, regExp, searchResults)
+  );
+}
+
+export { SearchAndSelectionContext, SearchAndSelectionController };
diff --git a/src/devtools/views/SearchContext.js b/src/devtools/views/SearchContext.js
deleted file mode 100644
index 2094ce2b5779..000000000000
--- a/src/devtools/views/SearchContext.js
+++ /dev/null
@@ -1,241 +0,0 @@
-// @flow
-
-import React, {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-  useReducer,
-} from 'react';
-import { createRegExp } from './utils';
-import { StoreContext } from './context';
-import { SelectedElementContext } from './SelectedElementContext';
-import Store from '../store';
-
-import type { Element } from 'src/devtools/types';
-
-export type SearchContextValue = {|
-  get currentIndex(): number | null,
-  get ids(): Array<number>,
-  get text(): string,
-  updateCurrentIndex(newCurrentIndex: number): void,
-  updateText(newText: string): void,
-|};
-
-const SearchContext = createContext<SearchContextValue>(
-  ((null: any): SearchContextValue)
-);
-// $FlowFixMe displayName is a valid attribute of React$Context
-SearchContext.displayName = 'SearchContext';
-
-type State = {|
-  currentIndex: number | null,
-  ids: Array<number>,
-  text: string,
-|};
-
-type Action = {|
-  type: 'UPDATE',
-  payload: $Shape<State>,
-|};
-
-function reducer(state: State, action: Action) {
-  switch (action.type) {
-    case 'UPDATE':
-      return {
-        ...state,
-        ...action.payload,
-      };
-    default:
-      throw new Error();
-  }
-}
-
-type Props = {|
-  children: React$Node,
-|};
-
-// TODO Remove this wrapper element once global Context.write API exists.
-function SearchController({ children }: Props) {
-  const store = useContext(StoreContext);
-  const selectedElement = useContext(SelectedElementContext);
-
-  const [state, dispatch] = useReducer(reducer, {
-    currentIndex: null,
-    ids: [],
-    text: '',
-  });
-
-  const value = useMemo(
-    () => ({
-      get currentIndex(): number | null {
-        return state.currentIndex;
-      },
-
-      get ids(): Array<number> {
-        return state.ids;
-      },
-
-      get text(): string {
-        return state.text;
-      },
-
-      updateCurrentIndex(newCurrentIndex: number) {
-        dispatch({
-          type: 'UPDATE',
-          payload: {
-            currentIndex: newCurrentIndex,
-          },
-        });
-
-        // Make sure a new search result is also selected.
-        selectedElement.id =
-          newCurrentIndex !== null ? state.ids[newCurrentIndex] : null;
-      },
-
-      updateText(newText: string) {
-        const { currentIndex: oldCurrentIndex, text: oldText } = state;
-
-        let newCurrentIndex = oldCurrentIndex;
-        let newIDs = [];
-
-        // Find all matching elements.
-        if (newText !== '') {
-          let regExp = createRegExp(newText);
-          store.roots.forEach(rootID => {
-            searchTree(store, rootID, regExp, newIDs);
-          });
-
-          // If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).
-          // If it's a new search, reset the index.
-          if (newIDs.length === 0) {
-            newCurrentIndex = null;
-          } else if (oldCurrentIndex !== null && newText.startsWith(oldText)) {
-            newCurrentIndex = Math.min(oldCurrentIndex, newIDs.length - 1);
-          } else {
-            newCurrentIndex = 0;
-          }
-        } else {
-          newCurrentIndex = null;
-        }
-
-        dispatch({
-          type: 'UPDATE',
-          payload: {
-            currentIndex: newCurrentIndex,
-            ids: newIDs,
-            text: newText,
-          },
-        });
-
-        // Make sure a new search result is also selected.
-        selectedElement.id =
-          newCurrentIndex !== null ? newIDs[newCurrentIndex] : null;
-      },
-    }),
-    [state]
-  );
-
-  // Listen for changes to the tree and incrementally adjust the search results.
-  useLayoutEffect(() => {
-    const handleStoreMutated = ([
-      addedElementIDs,
-      removedElementIDs,
-    ]: Array<Uint32Array>) => {
-      const { currentIndex, ids, text } = state;
-
-      if (!text) {
-        return;
-      }
-
-      let newIDs = ids;
-      let newCurrentIndex = currentIndex;
-
-      removedElementIDs.forEach(id => {
-        // Prune this item from the search results.
-        const index = newIDs.indexOf(id);
-        if (index >= 0) {
-          newIDs = newIDs.slice(0, index).concat(newIDs.slice(index + 1));
-
-          // If the results are now empty, also deselect things.
-          if (newIDs.length === 0) {
-            newCurrentIndex = null;
-          } else if (((newCurrentIndex: any): number) >= newIDs.length) {
-            newCurrentIndex = newIDs.length - 1;
-          }
-        }
-      });
-
-      addedElementIDs.forEach(id => {
-        const { displayName } = ((store.getElementByID(id): any): Element);
-
-        // Add this item to the search results if it matches.
-        const regExp = createRegExp(text);
-        if (displayName !== null && regExp.test(displayName)) {
-          const newElementIndex = ((store.getIndexOfElementID(
-            id
-          ): any): number);
-
-          let foundMatch = false;
-          for (let index = 0; index < newIDs.length; index++) {
-            const id = newIDs[index];
-            if (
-              newElementIndex < ((store.getIndexOfElementID(id): any): number)
-            ) {
-              foundMatch = true;
-              newIDs = newIDs
-                .slice(0, index)
-                .concat(id)
-                .concat(newIDs.slice(index));
-              break;
-            }
-          }
-          if (!foundMatch) {
-            newIDs = newIDs.concat(id);
-          }
-
-          newCurrentIndex = newCurrentIndex === null ? 0 : newCurrentIndex;
-        }
-      });
-
-      dispatch({
-        type: 'UPDATE',
-        payload: {
-          currentIndex: newCurrentIndex,
-          ids: newIDs,
-        },
-      });
-
-      // Make sure a new search result is also selected.
-      selectedElement.id =
-        newCurrentIndex !== null ? newIDs[newCurrentIndex] : null;
-    };
-
-    store.addListener('mutated', handleStoreMutated);
-
-    return () => store.removeListener('mutated', handleStoreMutated);
-  }, [state, store]);
-
-  return (
-    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
-  );
-}
-
-function searchTree(
-  store: Store,
-  elementID: number,
-  regExp: RegExp,
-  ids: Array<number>
-): void {
-  const { children, displayName } = ((store.getElementByID(
-    elementID
-  ): any): Element);
-  if (displayName !== null) {
-    if (regExp.test(displayName)) {
-      ids.push(elementID);
-    }
-  }
-  children.forEach(childID => searchTree(store, childID, regExp, ids));
-}
-
-export { SearchContext, SearchController };
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 330f257abacb..24d3e1453c20 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { SearchContext } from './SearchContext';
+import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import ButtonIcon from './ButtonIcon';
 
 import styles from './SearchInput.css';
@@ -9,50 +9,33 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
-  // We use the wrapper searchContext object rather than its individual parts–
-  // (specifically for the useCallback input arrays below)–
-  // because a change in any one value (e.g. ids array) impacts other values (e.g. currentIndex).
-  // It's easier to avoid stale scope issues if we depend on the entire search state.
-  const searchContext = useContext(SearchContext);
+  const {
+    decrementSearchIndex,
+    incrementSearchIndex,
+    searchIndex,
+    searchResults,
+    searchText,
+    updateSearchText,
+  } = useContext(SearchAndSelectionContext);
 
   const inputRef = useRef();
 
-  const handleTextChange = useCallback(({ currentTarget }) => {
-    searchContext.updateText(currentTarget.value);
-  });
-
-  const selectNext = useCallback(() => {
-    const { currentIndex } = searchContext;
-    if (currentIndex !== null) {
-      searchContext.updateCurrentIndex(currentIndex + 1);
-    }
-  }, [searchContext]);
-
-  const selectPrevious = useCallback(() => {
-    const { currentIndex } = searchContext;
-    if (currentIndex !== null) {
-      searchContext.updateCurrentIndex(currentIndex - 1);
-    }
-  }, [searchContext]);
+  const handleTextChange = useCallback(
+    ({ currentTarget }) => updateSearchText(currentTarget.value),
+    [updateSearchText]
+  );
 
   const resetSearch = useCallback(() => {
-    searchContext.updateText('');
-  }, [searchContext]);
+    updateSearchText('');
+  }, [updateSearchText]);
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
-        const { currentIndex, ids } = searchContext;
-        if (currentIndex !== null) {
-          if (currentIndex + 1 < ids.length) {
-            searchContext.updateCurrentIndex(currentIndex + 1);
-          } else {
-            searchContext.updateCurrentIndex(0);
-          }
-        }
+        incrementSearchIndex();
       }
     },
-    [searchContext]
+    [incrementSearchIndex]
   );
 
   // Auto-focus search input
@@ -72,8 +55,6 @@ export default function SearchInput(props: Props) {
     return () => window.removeEventListener('keydown', handleWindowKeyDown);
   }, [inputRef]);
 
-  const { currentIndex, ids, text } = searchContext;
-
   return (
     <div className={styles.SearchInput}>
       <input
@@ -82,33 +63,32 @@ export default function SearchInput(props: Props) {
         onChange={handleTextChange}
         placeholder="Search (text or /regex/)"
         ref={inputRef}
-        value={text}
+        value={searchText}
       />
-      {!!text && (
+      {!!searchText && (
         <span className={styles.IndexLabel}>
-          {Math.min(currentIndex + 1, ids.length)} | {ids.length}
+          {Math.min(searchIndex + 1, searchResults.length)} |{' '}
+          {searchResults.length}
         </span>
       )}
       <div className={styles.LeftVRule} />
       <button
         className={styles.IconButton}
-        disabled={currentIndex === null || currentIndex === 0}
-        onClick={selectPrevious}
+        onClick={decrementSearchIndex}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
       </button>
       <button
         className={styles.IconButton}
-        disabled={currentIndex === null || currentIndex === ids.length - 1}
-        onClick={selectNext}
+        onClick={incrementSearchIndex}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
       </button>
       <button
         className={styles.IconButton}
-        disabled={!text}
+        disabled={!searchText}
         onClick={resetSearch}
         title="Reset search"
       >
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 130636c4cd61..7f9652ff043e 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
-import { SelectedElementContext } from './SelectedElementContext';
+import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import { BridgeContext, StoreContext } from './context';
 import ButtonIcon from './ButtonIcon';
 import HooksTree from './HooksTree';
@@ -11,17 +11,16 @@ import styles from './SelectedElement.css';
 
 import type { InspectedElement } from '../types';
 import type { DehydratedData } from 'src/devtools/types';
-import type { SelectedElementContextValue } from './SelectedElementContext';
 
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const selectedElement = useContext(SelectedElementContext);
-  const { id } = selectedElement;
+  const { selectedElementID } = useContext(SearchAndSelectionContext);
   const store = useContext(StoreContext);
-  const element = id !== null ? store.getElementByID(id) : null;
+  const element =
+    selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
-  const inspectedElement = useInspectedElement(id);
+  const inspectedElement = useInspectedElement(selectedElementID);
 
   // TODO Make "view DOM" and "view source" buttons work
 
@@ -65,10 +64,7 @@ export default function SelectedElement(_: Props) {
       )}
 
       {inspectedElement !== null && (
-        <InspectedElementView
-          inspectedElement={inspectedElement}
-          selectedElement={selectedElement}
-        />
+        <InspectedElementView inspectedElement={inspectedElement} />
       )}
     </div>
   );
@@ -76,13 +72,11 @@ export default function SelectedElement(_: Props) {
 
 type InspectedElementViewProps = {|
   inspectedElement: InspectedElement,
-  selectedElement: SelectedElementContextValue,
 |};
 
-function InspectedElementView({
-  inspectedElement,
-  selectedElement,
-}: InspectedElementViewProps) {
+function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
+  const { selectElementWithID } = useContext(SearchAndSelectionContext);
+
   let { context, hooks, owners, props, state } = inspectedElement;
 
   return (
@@ -99,9 +93,7 @@ function InspectedElementView({
             <div
               key={owner.id}
               className={styles.Owner}
-              onClick={() => {
-                selectedElement.id = owner.id;
-              }}
+              onClick={() => selectElementWithID(owner.id)}
               title={owner.displayName}
             >
               {owner.displayName}
diff --git a/src/devtools/views/SelectedElementContext.js b/src/devtools/views/SelectedElementContext.js
deleted file mode 100644
index a930cd5dd94e..000000000000
--- a/src/devtools/views/SelectedElementContext.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// @flow
-
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { StoreContext } from './context';
-
-export type SelectedElementContextValue = {|
-  id: number | null,
-  index: number | null,
-|};
-
-const SelectedElementContext = createContext<SelectedElementContextValue>(
-  ((null: any): SelectedElementContextValue)
-);
-// $FlowFixMe displayName is a valid attribute of React$Context
-SelectedElementContext.displayName = 'SelectedElementContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-// TODO Remove this wrapper element once global Context.write API exists.
-function SelectedElementController({ children }: Props) {
-  const store = useContext(StoreContext);
-
-  const [id, setID] = useState<number | null>(null);
-  const [index, setIndex] = useState<number | null>(null);
-
-  const value = useMemo(
-    () => ({
-      get id() {
-        return id;
-      },
-      set id(id: number | null) {
-        setID(id);
-        setIndex(id !== null ? store.getIndexOfElementID(id) : null);
-      },
-      get index() {
-        return index;
-      },
-      set index(index: number | null) {
-        const element = index !== null ? store.getElementAtIndex(index) : null;
-        setID(element !== null ? element.id : null);
-        setIndex(index);
-      },
-    }),
-    [id]
-  );
-
-  return (
-    <SelectedElementContext.Provider value={value}>
-      {children}
-    </SelectedElementContext.Provider>
-  );
-}
-
-export { SelectedElementContext, SelectedElementController };
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index fb97b5f0ded4..5464701ad420 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -3,7 +3,7 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import { SelectedElementContext } from './SelectedElementContext';
+import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import SearchInput from './SearchInput';
@@ -14,37 +14,37 @@ import styles from './Tree.css';
 type Props = {||};
 
 export default function Tree(props: Props) {
-  const selectedElementContext = useContext(SelectedElementContext);
+  const { selectedElementIndex, selectElementAtIndex } = useContext(
+    SearchAndSelectionContext
+  );
   const treeContext = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any>>();
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list.
   useLayoutEffect(() => {
-    const { index } = selectedElementContext;
-    if (index !== null && listRef.current != null) {
-      listRef.current.scrollToItem(index);
+    if (selectedElementIndex !== null && listRef.current != null) {
+      listRef.current.scrollToItem(selectedElementIndex);
     }
-  }, [listRef, selectedElementContext]);
+  }, [listRef, selectedElementIndex]);
 
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
     const handleKeyDown = event => {
-      let index;
-
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
-          index = selectedElementContext.index;
-          if (index !== null && index + 1 < treeContext.size) {
-            selectedElementContext.index = ((index: any): number) + 1;
+          if (
+            selectedElementIndex !== null &&
+            selectedElementIndex + 1 < treeContext.size
+          ) {
+            selectElementAtIndex(((selectedElementIndex: any): number) + 1);
           }
           event.preventDefault();
           break;
         case 'ArrowUp':
-          index = selectedElementContext.index;
-          if (index !== null && index > 0) {
-            selectedElementContext.index = ((index: any): number) - 1;
+          if (selectedElementIndex !== null && selectedElementIndex > 0) {
+            selectElementAtIndex(((selectedElementIndex: any): number) - 1);
           }
           event.preventDefault();
           break;
@@ -56,7 +56,7 @@ export default function Tree(props: Props) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [selectedElementContext, treeContext]);
+  }, [selectedElementIndex, selectElementAtIndex, treeContext]);
 
   return (
     <div className={styles.Tree}>

From 45641e98e5d848b65969866de3e8e9dc7193b21e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 7 Feb 2019 14:34:24 +0000
Subject: [PATCH 040/814] Added owner tree exploration view

---
 src/backend/renderer.js                       |  15 +-
 src/devtools/store.js                         |   6 +
 src/devtools/types.js                         |   3 +
 src/devtools/views/ButtonIcon.js              |  18 +-
 src/devtools/views/Element.js                 |  40 +-
 src/devtools/views/OwnersStack.css            |  49 ++
 src/devtools/views/OwnersStack.js             |  63 +++
 .../views/SearchAndSelectionContext.js        | 429 ++++++++++++++----
 src/devtools/views/SelectedElement.js         |  38 +-
 src/devtools/views/Tree.js                    |  54 ++-
 src/devtools/views/root.css                   |   2 +
 11 files changed, 585 insertions(+), 132 deletions(-)
 create mode 100644 src/devtools/views/OwnersStack.css
 create mode 100644 src/devtools/views/OwnersStack.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ec6ec23049e7..9a5ac9da77ec 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -543,6 +543,10 @@ export function attach(
       addOperation(operation);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
+      const { _debugOwner } = fiber;
+
+      const ownerID =
+        _debugOwner !== null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
 
       let encodedDisplayName = ((null: any): Uint8Array);
       let encodedKey = ((null: any): Uint8Array);
@@ -565,19 +569,20 @@ export function attach(
       const encodedKeySize = key === null ? 0 : encodedKey.length;
 
       const operation = new Uint32Array(
-        6 + encodedDisplayNameSize + encodedKeySize
+        7 + encodedDisplayNameSize + encodedKeySize
       );
       operation[0] = TREE_OPERATION_ADD;
       operation[1] = id;
       operation[2] = type;
       operation[3] = getFiberID(getPrimaryFiber(parentFiber));
-      operation[4] = encodedDisplayNameSize;
+      operation[4] = ownerID;
+      operation[5] = encodedDisplayNameSize;
       if (displayName !== null) {
-        operation.set(encodedDisplayName, 5);
+        operation.set(encodedDisplayName, 6);
       }
-      operation[5 + encodedDisplayNameSize] = encodedKeySize;
+      operation[6 + encodedDisplayNameSize] = encodedKeySize;
       if (key !== null) {
-        operation.set(encodedKey, 5 + encodedDisplayNameSize + 1);
+        operation.set(encodedKey, 6 + encodedDisplayNameSize + 1);
       }
       addOperation(operation);
     }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 645a170a46a4..8e3166970e63 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -202,6 +202,7 @@ export default class Store extends EventEmitter {
     while (i < operations.length) {
       let id: number = ((null: any): number);
       let element: Element = ((null: any): Element);
+      let ownerID: number = 0;
       let parentID: number = ((null: any): number);
       let parentElement: Element = ((null: any): Element);
       let type: ElementType = ((null: any): ElementType);
@@ -229,6 +230,7 @@ export default class Store extends EventEmitter {
               displayName: null,
               id,
               key: null,
+              ownerID: 0,
               parentID: 0,
               type,
               weight: 0,
@@ -236,6 +238,9 @@ export default class Store extends EventEmitter {
 
             haveRootsChanged = true;
           } else {
+            ownerID = ((operations[i]: any): number);
+            i++;
+
             const displayNameLength = operations[i];
             i++;
             const displayName =
@@ -273,6 +278,7 @@ export default class Store extends EventEmitter {
                 displayName,
                 id,
                 key,
+                ownerID,
                 parentID: parentElement.id,
                 type,
                 weight: 1,
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 58e421eab74b..047fe86919bf 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -28,6 +28,9 @@ export type Element = {|
   displayName: string | null,
   key: number | string | null,
 
+  // Owner (if available)
+  ownerID: number,
+
   // How many levels deep within the tree is this element?
   // This determines how much indentation (left padding) should be used in the Elements tree.
   depth: number,
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 6f054b1d0a90..c6056d72fccb 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -4,12 +4,22 @@ import React from 'react';
 import styles from './ButtonIcon.css';
 
 type Props = {|
-  type: 'close' | 'down' | 'search' | 'up' | 'view-dom' | 'view-source',
+  type:
+    | 'back'
+    | 'close'
+    | 'down'
+    | 'search'
+    | 'up'
+    | 'view-dom'
+    | 'view-source',
 |};
 
 export default function ButtonIcon({ type }: Props) {
   let pathData = null;
   switch (type) {
+    case 'back':
+      pathData = PATH_BACK;
+      break;
     case 'close':
       pathData = PATH_CLOSE;
       break;
@@ -47,6 +57,12 @@ export default function ButtonIcon({ type }: Props) {
   );
 }
 
+const PATH_BACK = `
+  M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9
+  2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41
+  10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
+`;
+
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 7e92ad3013f8..5825e812aaab 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -7,6 +7,8 @@ import { createRegExp } from './utils';
 import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import Icon from './Icon';
 
+import type { Element } from '../types';
+
 import styles from './Element.css';
 
 type Props = {
@@ -14,25 +16,32 @@ type Props = {
   style: Object,
 };
 
-export default function Element({ index, style }: Props) {
+export default function ElementView({ index, style }: Props) {
   const { store } = useContext(TreeContext);
-  const element = store.getElementAtIndex(index);
-
-  // DevTools are rendered in concurrent mode.
-  // It's possible the store has updated since the commit that triggered this render.
-  // So we need to guard against an undefined element.
-  // TODO: Handle this by switching to a Suspense based approach.
-  if (element == null) {
-    return null;
+
+  const {
+    ownerList,
+    pushOwnerList,
+    selectedElementID,
+    selectElementWithID,
+  } = useContext(SearchAndSelectionContext);
+
+  const element =
+    ownerList !== null
+      ? ((store.getElementByID(ownerList[index]): any): Element)
+      : ((store.getElementAtIndex(index): any): Element);
+  const { children, depth, displayName, id, key, type } = element;
+
+  let calculatedDepth = depth;
+  if (ownerList !== null) {
+    const owner = ((store.getElementByID(ownerList[0]): any): Element);
+    calculatedDepth = depth - owner.depth;
   }
 
-  // TODO Add click and key handlers for toggling element open/close state.
+  const handleDoubleClick = useCallback(() => pushOwnerList(id), [id]);
 
-  const { children, depth, displayName, id, key, type } = element;
+  // TODO Add click and key handlers for toggling element open/close state.
 
-  const { selectedElementID, selectElementWithID } = useContext(
-    SearchAndSelectionContext
-  );
   const handleClick = useCallback(
     ({ metaKey }) => selectElementWithID(metaKey ? null : id),
     [id]
@@ -45,9 +54,10 @@ export default function Element({ index, style }: Props) {
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
       onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${1 + depth}rem`,
+        paddingLeft: `${1 + calculatedDepth}rem`,
       }}
     >
       {children.length > 0 && (
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
new file mode 100644
index 000000000000..c579c242259a
--- /dev/null
+++ b/src/devtools/views/OwnersStack.css
@@ -0,0 +1,49 @@
+.OwnerStack {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.IconButton {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--color-button);
+  flex: 0 0 auto;
+}
+.IconButton:hover {
+  color: var(--color-button-hover);
+}
+.IconButton:disabled {
+  color: var(--color-dimmer);
+  cursor: default;
+}
+
+.Component,
+.FocusedComponent {
+  padding: 0.25rem;
+  margin-right: 0.5rem;
+  color: var(--color-component-name);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-normal);
+}
+
+.Component {
+  cursor: pointer;
+  color: var(--color-component-name);
+  background: var(--color-dimmest);
+  border-radius: 0.125rem;
+}
+.Component:hover {
+  background: var(--color-dimmer);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+  margin-right: 0.5rem;
+}
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/OwnersStack.js
new file mode 100644
index 000000000000..6247300a0984
--- /dev/null
+++ b/src/devtools/views/OwnersStack.js
@@ -0,0 +1,63 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import ButtonIcon from './ButtonIcon';
+import { SearchAndSelectionContext } from './SearchAndSelectionContext';
+import { TreeContext } from './context';
+
+import type { Element } from '../types';
+
+import styles from './OwnersStack.css';
+
+export default function OwnerStack() {
+  const { clearOwnerList, ownerIDStack } = useContext(
+    SearchAndSelectionContext
+  );
+
+  // $FlowFixMe "Missing type annotation for U" whatever that means
+  const elements = ownerIDStack.map(id => <ElementView key={id} id={id} />);
+
+  return (
+    <div className={styles.OwnerStack}>
+      <button
+        className={styles.IconButton}
+        onClick={clearOwnerList}
+        title="Back to tree view"
+      >
+        <ButtonIcon type="back" />
+      </button>
+      <div className={styles.VRule} />
+      {elements}
+    </div>
+  );
+}
+
+type Props = {
+  id: number,
+};
+
+function ElementView({ id }: Props) {
+  const { ownerIDStack, popToOwnerList } = useContext(
+    SearchAndSelectionContext
+  );
+  const { store } = useContext(TreeContext);
+  const { displayName } = ((store.getElementByID(id): any): Element);
+
+  const isCurrentlyFocusedOwner = ownerIDStack[ownerIDStack.length - 1] === id;
+
+  const handleClick = useCallback(() => popToOwnerList(id), [
+    id,
+    popToOwnerList,
+  ]);
+
+  return (
+    <span
+      className={
+        isCurrentlyFocusedOwner ? styles.FocusedComponent : styles.Component
+      }
+      onClick={handleClick}
+    >
+      {displayName}
+    </span>
+  );
+}
diff --git a/src/devtools/views/SearchAndSelectionContext.js b/src/devtools/views/SearchAndSelectionContext.js
index 886c0a16be47..30656d20cc02 100644
--- a/src/devtools/views/SearchAndSelectionContext.js
+++ b/src/devtools/views/SearchAndSelectionContext.js
@@ -1,7 +1,7 @@
 // @flow
 
-// This context contains both the current search state and the selected element.
-// These values are combined into a single context because changes in one often impact the other.
+// This context contains both the search, owners stack, and selected element states.
+// These values are combined into a single context because changes in one often impact the others.
 // Combining them enables us to avoid cascading renders.
 
 import React, {
@@ -19,7 +19,9 @@ import Store from '../store';
 import type { Element } from 'src/devtools/types';
 
 type Context = {|
-  // Read current context values:
+  // Read current context values
+  ownerIDStack: Array<number>,
+  ownerList: Array<number> | null,
   searchIndex: number | null,
   searchResults: Array<number>,
   searchText: string,
@@ -27,10 +29,14 @@ type Context = {|
   selectedElementIndex: number | null,
 
   // Update current context values:
+  clearOwnerList: () => void,
   decrementSearchIndex(): void,
   incrementSearchIndex(): void,
+  popToOwnerList(elementID: number): void,
+  pushOwnerList(elementID: number): void,
   selectElementWithID(id: number | null): void,
-  selectElementAtIndex(index: number | null): void,
+  selectNextElementInTree(): void,
+  selectPreviousElementInTree(): void,
   updateSearchText(searchText: string): void,
 |};
 
@@ -41,6 +47,8 @@ const SearchAndSelectionContext = createContext<Context>(
 SearchAndSelectionContext.displayName = 'SearchAndSelectionContext';
 
 type State = {|
+  ownerIDStack: Array<number>,
+  ownerList: Array<number> | null,
   searchIndex: number | null,
   searchResults: Array<number>,
   searchText: string,
@@ -50,11 +58,15 @@ type State = {|
 
 type Action = {|
   type:
+    | 'CLEAR_OWNER_LIST'
     | 'DECREMENT_SEARCH_INDEX'
     | 'INCREMENT_SEARCH_INDEX'
-    | 'REFINE_SEARCH_RESULTS'
+    | 'POP_TO_OWNER_LIST'
+    | 'PUSH_OWNER_LIST'
+    | 'REFINE_AFTER_MUTATION'
     | 'SELECT_ELEMENT_WITH_ID'
-    | 'SELECT_ELEMENT_AT_INDEX'
+    | 'SELECT_NEXT_ELEMENT_IN_TREE'
+    | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
     | 'UPDATE_SEARCH_TEXT',
   payload?: any,
 |};
@@ -73,16 +85,70 @@ function SearchAndSelectionController({ children }: Props) {
   const reducer = useMemo(
     () =>
       function reducer(state: State, action: Action): State {
-        const { searchIndex, searchResults, searchText } = state;
+        const {
+          ownerIDStack,
+          ownerList,
+          searchIndex,
+          searchResults,
+          searchText,
+          selectedElementID,
+          selectedElementIndex,
+        } = state;
         const { payload, type } = action;
 
-        let newSearchIndex,
+        let element,
+          elementID,
+          newOwnerList,
+          newOwnerIDStack,
+          newSearchIndex,
           newSearchResults,
           newSearchText,
-          newSelectedElementID;
+          newSelectedElementID,
+          newSelectedElementIndex;
+
+        const updateSelectedElementIndexHelper = (
+          newSelectedElementIndex: number
+        ) => {
+          if (ownerList !== null) {
+            newSelectedElementID =
+              newSelectedElementIndex !== null
+                ? ownerList[newSelectedElementIndex]
+                : null;
+
+            return {
+              ...state,
+              selectedElementID: newSelectedElementID,
+              selectedElementIndex: newSelectedElementIndex,
+            };
+          } else {
+            element =
+              newSelectedElementIndex !== null
+                ? store.getElementAtIndex(newSelectedElementIndex)
+                : null;
+
+            return {
+              ...state,
+              selectedElementID: element !== null ? element.id : null,
+              selectedElementIndex: newSelectedElementIndex,
+            };
+          }
+        };
 
         switch (type) {
+          case 'CLEAR_OWNER_LIST':
+            return {
+              ...state,
+              ownerList: null,
+              ownerIDStack: [],
+            };
+
           case 'DECREMENT_SEARCH_INDEX':
+            if (ownerList !== null) {
+              throw Error(
+                `Can't update search index while owner list is active`
+              );
+            }
+
             if (searchResults.length === 0) return state;
 
             newSearchIndex =
@@ -101,6 +167,12 @@ function SearchAndSelectionController({ children }: Props) {
             };
 
           case 'INCREMENT_SEARCH_INDEX':
+            if (ownerList !== null) {
+              throw Error(
+                `Can't update search index while owner list is active`
+              );
+            }
+
             if (searchResults.length === 0) return state;
 
             newSearchIndex =
@@ -118,108 +190,245 @@ function SearchAndSelectionController({ children }: Props) {
               ),
             };
 
-          case 'REFINE_SEARCH_RESULTS':
+          case 'POP_TO_OWNER_LIST':
+            elementID = ((payload: any): number);
+            return {
+              ...state,
+              ownerList: calculateCurrentOwnerList(
+                store,
+                elementID,
+                elementID,
+                []
+              ),
+              ownerIDStack: ownerIDStack.slice(
+                0,
+                ownerIDStack.indexOf(elementID) + 1
+              ),
+              selectedElementIndex: null,
+              selectedElementID: null,
+            };
+
+          case 'PUSH_OWNER_LIST':
+            elementID = ((payload: any): number);
+            if (ownerIDStack.includes(elementID)) return state;
+
+            // Add this new owner, and fill in the owners above it as well.
+            const ownerIDsToConcat = [];
+            let currentOwnerID = elementID;
+            while (
+              currentOwnerID !== 0 &&
+              ownerIDStack[ownerIDStack.length - 1] !== currentOwnerID
+            ) {
+              ownerIDsToConcat.unshift(currentOwnerID);
+              currentOwnerID = ((store.getElementByID(
+                currentOwnerID
+              ): any): Element).ownerID;
+            }
+
+            return {
+              ...state,
+              ownerList: calculateCurrentOwnerList(
+                store,
+                elementID,
+                elementID,
+                []
+              ),
+              ownerIDStack: ownerIDStack.concat(ownerIDsToConcat),
+              selectedElementIndex: null,
+              selectedElementID: null,
+              searchIndex: null,
+              searchResults: [],
+              searchText: '',
+            };
+
+          case 'REFINE_AFTER_MUTATION':
             const [
               addedElementIDs,
               removedElementIDs,
             ] = ((payload: any): Array<Uint32Array>);
 
-            newSearchResults = searchResults;
+            newOwnerList = ownerList;
+            newOwnerIDStack = ownerIDStack;
             newSearchIndex = searchIndex;
-
-            removedElementIDs.forEach(id => {
-              // Prune this item from the search results.
-              const index = newSearchResults.indexOf(id);
-              if (index >= 0) {
-                newSearchResults = newSearchResults
-                  .slice(0, index)
-                  .concat(newSearchResults.slice(index + 1));
-
-                // If the results are now empty, also deselect things.
-                if (newSearchResults.length === 0) {
-                  newSearchIndex = null;
-                } else if (
-                  ((newSearchIndex: any): number) >= newSearchResults.length
-                ) {
-                  newSearchIndex = newSearchResults.length - 1;
+            newSearchResults = searchResults;
+            newSearchText = searchText;
+            newSelectedElementID = selectedElementID;
+            newSelectedElementIndex = selectedElementIndex;
+
+            if (searchText !== '') {
+              removedElementIDs.forEach(id => {
+                // Prune this item from the search results.
+                const index = newSearchResults.indexOf(id);
+                if (index >= 0) {
+                  newSearchResults = newSearchResults
+                    .slice(0, index)
+                    .concat(newSearchResults.slice(index + 1));
+
+                  // If the results are now empty, also deselect things.
+                  if (newSearchResults.length === 0) {
+                    newSearchIndex = null;
+                  } else if (
+                    ((newSearchIndex: any): number) >= newSearchResults.length
+                  ) {
+                    newSearchIndex = newSearchResults.length - 1;
+                  }
                 }
-              }
-            });
-
-            addedElementIDs.forEach(id => {
-              const { displayName } = ((store.getElementByID(
-                id
-              ): any): Element);
+              });
 
-              // Add this item to the search results if it matches.
-              const regExp = createRegExp(searchText);
-              if (displayName !== null && regExp.test(displayName)) {
-                const newElementIndex = ((store.getIndexOfElementID(
+              addedElementIDs.forEach(id => {
+                const { displayName } = ((store.getElementByID(
                   id
-                ): any): number);
-
-                let foundMatch = false;
-                for (let index = 0; index < newSearchResults.length; index++) {
-                  const id = newSearchResults[index];
-                  if (
-                    newElementIndex <
-                    ((store.getIndexOfElementID(id): any): number)
+                ): any): Element);
+
+                // Add this item to the search results if it matches.
+                const regExp = createRegExp(searchText);
+                if (displayName !== null && regExp.test(displayName)) {
+                  const newElementIndex = ((store.getIndexOfElementID(
+                    id
+                  ): any): number);
+
+                  let foundMatch = false;
+                  for (
+                    let index = 0;
+                    index < newSearchResults.length;
+                    index++
                   ) {
-                    foundMatch = true;
-                    newSearchResults = newSearchResults
-                      .slice(0, index)
-                      .concat(id)
-                      .concat(newSearchResults.slice(index));
-                    break;
+                    const id = newSearchResults[index];
+                    if (
+                      newElementIndex <
+                      ((store.getIndexOfElementID(id): any): number)
+                    ) {
+                      foundMatch = true;
+                      newSearchResults = newSearchResults
+                        .slice(0, index)
+                        .concat(id)
+                        .concat(newSearchResults.slice(index));
+                      break;
+                    }
+                  }
+                  if (!foundMatch) {
+                    newSearchResults = newSearchResults.concat(id);
                   }
+
+                  newSearchIndex = newSearchIndex === null ? 0 : newSearchIndex;
                 }
-                if (!foundMatch) {
-                  newSearchResults = newSearchResults.concat(id);
+              });
+
+              newSelectedElementID =
+                newSearchIndex !== null
+                  ? newSearchResults[newSearchIndex]
+                  : null;
+              newSelectedElementIndex =
+                newSelectedElementID !== null
+                  ? store.getIndexOfElementID(newSelectedElementID)
+                  : null;
+            }
+
+            // If an item in the owner stack has been removed from the tree, unwind it.
+            if (ownerIDStack.length > 0) {
+              let indexOfRemovedItem = -1;
+              for (let i = 0; i < ownerIDStack.length; i++) {
+                if (removedElementIDs.includes(ownerIDStack[i])) {
+                  indexOfRemovedItem = i;
+                  break;
                 }
+              }
 
-                newSearchIndex = newSearchIndex === null ? 0 : newSearchIndex;
+              if (indexOfRemovedItem >= 0) {
+                newOwnerIDStack = ownerIDStack.slice(0, indexOfRemovedItem);
               }
-            });
 
-            newSelectedElementID =
-              newSearchIndex !== null ? newSearchResults[newSearchIndex] : null;
+              if (newOwnerIDStack.length === 0) {
+                newOwnerList = null;
+              } else {
+                elementID = newOwnerIDStack[newOwnerIDStack.length - 1];
+
+                newOwnerList = calculateCurrentOwnerList(
+                  store,
+                  elementID,
+                  elementID,
+                  []
+                );
+
+                newSelectedElementIndex =
+                  newSelectedElementID !== null
+                    ? newOwnerList.indexOf(newSelectedElementID)
+                    : null;
+              }
+            }
 
             return {
               ...state,
+              ownerIDStack: newOwnerIDStack,
+              ownerList: newOwnerList,
               searchIndex: newSearchIndex,
               searchResults: newSearchResults,
               selectedElementID: newSelectedElementID,
-              selectedElementIndex:
-                newSelectedElementID !== null
-                  ? store.getIndexOfElementID(newSelectedElementID)
-                  : null,
+              selectedElementIndex: newSelectedElementIndex,
             };
 
           case 'SELECT_ELEMENT_WITH_ID':
             newSelectedElementID = ((payload: any): number | null);
+            newSelectedElementIndex = null;
+
+            if (newSelectedElementID !== null) {
+              if (ownerList !== null) {
+                newSelectedElementIndex = ownerList.indexOf(
+                  newSelectedElementID
+                );
+              } else {
+                newSelectedElementIndex = store.getIndexOfElementID(
+                  newSelectedElementID
+                );
+              }
+            }
+
+            const isInOwnerList =
+              newSelectedElementID !== null &&
+              ownerList !== null &&
+              ownerList.includes(newSelectedElementID);
 
             return {
               ...state,
+              ownerIDStack: isInOwnerList ? ownerIDStack : [],
+              ownerList: isInOwnerList ? ownerList : null,
               selectedElementID: newSelectedElementID,
-              selectedElementIndex:
-                newSelectedElementID !== null
-                  ? store.getIndexOfElementID(newSelectedElementID)
-                  : null,
+              selectedElementIndex: newSelectedElementIndex,
             };
 
-          case 'SELECT_ELEMENT_AT_INDEX':
-            newSearchIndex = ((payload: any): number | null);
-
-            const element =
-              newSearchIndex !== null
-                ? store.getElementAtIndex(newSearchIndex)
-                : null;
+          case 'SELECT_NEXT_ELEMENT_IN_TREE':
+            if (selectedElementIndex === null) {
+              return state;
+            } else if (ownerList !== null) {
+              return updateSelectedElementIndexHelper(
+                selectedElementIndex + 1 < ownerList.length
+                  ? selectedElementIndex + 1
+                  : selectedElementIndex
+              );
+            } else {
+              return updateSelectedElementIndexHelper(
+                selectedElementIndex + 1 < store.numElements
+                  ? selectedElementIndex + 1
+                  : selectedElementIndex
+              );
+            }
 
-            return {
-              ...state,
-              selectedElementID: element !== null ? element.id : null,
-              selectedElementIndex: newSearchIndex,
-            };
+          case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+            if (selectedElementIndex === null) {
+              return state;
+            } else if (ownerList !== null) {
+              return updateSelectedElementIndexHelper(
+                selectedElementIndex > 0
+                  ? selectedElementIndex - 1
+                  : selectedElementIndex
+              );
+            } else {
+              return updateSelectedElementIndexHelper(
+                selectedElementIndex > 0
+                  ? selectedElementIndex - 1
+                  : selectedElementIndex
+              );
+            }
 
           case 'UPDATE_SEARCH_TEXT':
             newSearchIndex = searchIndex;
@@ -275,6 +484,8 @@ function SearchAndSelectionController({ children }: Props) {
   );
 
   const [state, dispatch] = useReducer(reducer, {
+    ownerIDStack: [],
+    ownerList: null,
     searchIndex: null,
     searchResults: [],
     searchText: '',
@@ -282,6 +493,10 @@ function SearchAndSelectionController({ children }: Props) {
     selectedElementIndex: null,
   });
 
+  const clearOwnerList = useCallback(
+    () => dispatch({ type: 'CLEAR_OWNER_LIST' }),
+    [dispatch]
+  );
   const decrementSearchIndex = useCallback(
     () => dispatch({ type: 'DECREMENT_SEARCH_INDEX' }),
     [dispatch]
@@ -290,14 +505,27 @@ function SearchAndSelectionController({ children }: Props) {
     () => dispatch({ type: 'INCREMENT_SEARCH_INDEX' }),
     [dispatch]
   );
+  const popToOwnerList = useCallback(
+    (elementID: number) =>
+      dispatch({ type: 'POP_TO_OWNER_LIST', payload: elementID }),
+    [dispatch]
+  );
+  const pushOwnerList = useCallback(
+    (elementID: number) =>
+      dispatch({ type: 'PUSH_OWNER_LIST', payload: elementID }),
+    [dispatch]
+  );
   const selectElementWithID = useCallback(
     (id: number | null) =>
       dispatch({ type: 'SELECT_ELEMENT_WITH_ID', payload: id }),
     [dispatch]
   );
-  const selectElementAtIndex = useCallback(
-    (index: number | null) =>
-      dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
+  const selectNextElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
+    [dispatch]
+  );
+  const selectPreviousElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
     [dispatch]
   );
   const updateSearchText = useCallback(
@@ -308,16 +536,22 @@ function SearchAndSelectionController({ children }: Props) {
 
   const value = useMemo(
     () => ({
+      ownerList: state.ownerList,
+      ownerIDStack: state.ownerIDStack,
       searchIndex: state.searchIndex,
       searchResults: state.searchResults,
       searchText: state.searchText,
       selectedElementID: state.selectedElementID,
       selectedElementIndex: state.selectedElementIndex,
 
+      clearOwnerList,
       decrementSearchIndex,
       incrementSearchIndex,
+      popToOwnerList,
+      pushOwnerList,
       selectElementWithID,
-      selectElementAtIndex,
+      selectNextElementInTree,
+      selectPreviousElementInTree,
       updateSearchText,
     }),
     [state]
@@ -329,12 +563,12 @@ function SearchAndSelectionController({ children }: Props) {
       addedElementIDs,
       removedElementIDs,
     ]: Array<Uint32Array>) => {
-      if (!state.searchText) {
+      if (!state.searchText && state.ownerList === null) {
         return;
       }
 
       dispatch({
-        type: 'REFINE_SEARCH_RESULTS',
+        type: 'REFINE_AFTER_MUTATION',
         payload: [addedElementIDs, removedElementIDs],
       });
     };
@@ -351,6 +585,33 @@ function SearchAndSelectionController({ children }: Props) {
   );
 }
 
+function calculateCurrentOwnerList(
+  store: Store,
+  rootOwnerID: number,
+  elementID: number,
+  ownerList: Array<number>
+): Array<number> {
+  if (elementID === rootOwnerID) {
+    ownerList.push(elementID);
+    const { children } = ((store.getElementByID(elementID): any): Element);
+    children.forEach(childID =>
+      calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
+    );
+  } else {
+    const { children, ownerID } = ((store.getElementByID(
+      elementID
+    ): any): Element);
+    if (ownerID === rootOwnerID) {
+      ownerList.push(elementID);
+      children.forEach(childID =>
+        calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
+      );
+    }
+  }
+
+  return ownerList;
+}
+
 function recursivelySearchTree(
   store: Store,
   elementID: number,
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 7f9652ff043e..a107bb07683b 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -1,6 +1,12 @@
 // @flow
 
-import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import { BridgeContext, StoreContext } from './context';
 import ButtonIcon from './ButtonIcon';
@@ -75,8 +81,6 @@ type InspectedElementViewProps = {|
 |};
 
 function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
-  const { selectElementWithID } = useContext(SearchAndSelectionContext);
-
   let { context, hooks, owners, props, state } = inspectedElement;
 
   return (
@@ -90,14 +94,11 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
         <div className={styles.Owners}>
           <div>owner stack</div>
           {owners.map(owner => (
-            <div
+            <OwnerView
               key={owner.id}
-              className={styles.Owner}
-              onClick={() => selectElementWithID(owner.id)}
-              title={owner.displayName}
-            >
-              {owner.displayName}
-            </div>
+              displayName={owner.displayName}
+              id={owner.id}
+            />
           ))}
         </div>
       )}
@@ -105,6 +106,23 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
   );
 }
 
+function OwnerView({ displayName, id }: { displayName: string, id: number }) {
+  const { selectElementWithID } = useContext(SearchAndSelectionContext);
+
+  const handleClick = useCallback(() => selectElementWithID(id), [id]);
+
+  return (
+    <div
+      key={id}
+      className={styles.Owner}
+      onClick={handleClick}
+      title={displayName}
+    >
+      {displayName}
+    </div>
+  );
+}
+
 function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
   if (dehydratedData !== null) {
     return hydrate(dehydratedData.data, dehydratedData.cleaned);
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 5464701ad420..b4e4e93a73ac 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -1,11 +1,18 @@
 // @flow
 
-import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useLayoutEffect,
+  useRef,
+} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { SearchAndSelectionContext } from './SearchAndSelectionContext';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
+import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
 import { TreeContext } from './context';
 
@@ -14,9 +21,13 @@ import styles from './Tree.css';
 type Props = {||};
 
 export default function Tree(props: Props) {
-  const { selectedElementIndex, selectElementAtIndex } = useContext(
-    SearchAndSelectionContext
-  );
+  const {
+    ownerIDStack,
+    ownerList,
+    selectedElementIndex,
+    selectNextElementInTree,
+    selectPreviousElementInTree,
+  } = useContext(SearchAndSelectionContext);
   const treeContext = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any>>();
 
@@ -30,22 +41,17 @@ export default function Tree(props: Props) {
 
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
+    // TODO Use selectNextElement / selectPreviousElement (with dispatch)
+
     const handleKeyDown = event => {
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
-          if (
-            selectedElementIndex !== null &&
-            selectedElementIndex + 1 < treeContext.size
-          ) {
-            selectElementAtIndex(((selectedElementIndex: any): number) + 1);
-          }
+          selectNextElementInTree();
           event.preventDefault();
           break;
         case 'ArrowUp':
-          if (selectedElementIndex !== null && selectedElementIndex > 0) {
-            selectElementAtIndex(((selectedElementIndex: any): number) - 1);
-          }
+          selectPreviousElementInTree();
           event.preventDefault();
           break;
       }
@@ -56,12 +62,26 @@ export default function Tree(props: Props) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [selectedElementIndex, selectElementAtIndex, treeContext]);
+  }, [
+    selectedElementIndex,
+    selectNextElementInTree,
+    selectPreviousElementInTree,
+    treeContext,
+  ]);
+
+  const itemCount = ownerList !== null ? ownerList.length : treeContext.size;
+
+  // Let react-window know to re-render any time the underlying tree data changes.
+  // This includes the owner context, since it controls a filtered view of the tree.
+  const itemData = useMemo(() => ({ treeContext, ownerList }), [
+    treeContext,
+    ownerList,
+  ]);
 
   return (
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
-        <SearchInput />
+        {ownerIDStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <button
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
@@ -75,8 +95,8 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
-              itemCount={treeContext.size}
-              itemData={treeContext}
+              itemCount={itemCount}
+              itemData={itemData}
               itemSize={20}
               ref={listRef}
               width={width}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f88ca6e6b28b..76400d25c271 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -12,6 +12,7 @@
   --theme-light-component-name-inverted: #ffffff;
   --theme-light-dim: #777d88;
   --theme-light-dimmer: #cfd1d5;
+  --theme-light-dimmest: #eff0f1;
   --theme-light-jsx-arrow-brackets: #333333;
   --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --theme-light-search-match: yellow;
@@ -34,6 +35,7 @@
   --color-component-name-inverted: var(--theme-light-component-name-inverted);
   --color-dim: var(--theme-light-dim);
   --color-dimmer: var(--theme-light-dimmer);
+  --color-dimmest: var(--theme-light-dimmest);
   --color-search-match: var(--theme-light-search-match);
   --color-search-match-current: var(--theme-light-search-match-current);
   --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);

From 038018650169ecbe2962898746ea39ce31f73847 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 14:44:07 -0500
Subject: [PATCH 041/814] Refactored tree, search, selection, and owners
 contexts

---
 src/backend/renderer.js                       |   2 +-
 src/devtools/store.js                         |  14 +-
 src/devtools/types.js                         |  10 -
 src/devtools/views/ButtonIcon.js              |  11 +
 src/devtools/views/Element.js                 |  46 +-
 src/devtools/views/Elements.css               |   1 +
 src/devtools/views/Elements.js                |  50 +-
 src/devtools/views/OwnersStack.css            |   2 +
 src/devtools/views/OwnersStack.js             |  34 +-
 .../views/SearchAndSelectionContext.js        | 634 -----------------
 src/devtools/views/SearchInput.js             |  28 +-
 src/devtools/views/SelectedElement.js         |   8 +-
 src/devtools/views/Tree.js                    |  31 +-
 src/devtools/views/TreeContext.js             | 663 ++++++++++++++++++
 src/devtools/views/context.js                 |   7 -
 15 files changed, 773 insertions(+), 768 deletions(-)
 delete mode 100644 src/devtools/views/SearchAndSelectionContext.js
 create mode 100644 src/devtools/views/TreeContext.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9a5ac9da77ec..8aa50d474a29 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -546,7 +546,7 @@ export function attach(
       const { _debugOwner } = fiber;
 
       const ownerID =
-        _debugOwner !== null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
+        _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
 
       let encodedDisplayName = ((null: any): Uint8Array);
       let encodedKey = ((null: any): Uint8Array);
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 8e3166970e63..4480a17ff920 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -107,6 +107,11 @@ export default class Store extends EventEmitter {
     return ((currentElement: any): Element);
   }
 
+  getElementIDAtIndex(index: number): number | null {
+    const element: Element | null = this.getElementAtIndex(index);
+    return element === null ? null : element.id;
+  }
+
   getElementByID(id: number): Element | null {
     const element = this._idToElement.get(id);
 
@@ -286,9 +291,10 @@ export default class Store extends EventEmitter {
 
               this._idToElement.set(id, element);
 
-              // Track newly addewd items so search results can be updated
+              const oldAddedElementIDs = addedElementIDs;
               addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
-              addedElementIDs[addedElementIDs.length - 1] = id;
+              addedElementIDs.set(oldAddedElementIDs);
+              addedElementIDs[oldAddedElementIDs.length] = id;
 
               weightDelta = 1;
             }
@@ -319,8 +325,10 @@ export default class Store extends EventEmitter {
           }
 
           // Track removed items so search results can be updated
+          const oldRemovededElementIDs = removedElementIDs;
           removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
-          removedElementIDs[removedElementIDs.length - 1] = id;
+          removedElementIDs.set(oldRemovededElementIDs);
+          removedElementIDs[oldRemovededElementIDs.length] = id;
           break;
         case TREE_OPERATION_RESET_CHILDREN:
           id = ((operations[i + 1]: any): number);
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 047fe86919bf..59cddbfd108c 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -1,7 +1,5 @@
 // @flow
 
-import Store from './Store';
-
 export const ElementTypeClassOrFunction = 1;
 export const ElementTypeContext = 2;
 export const ElementTypeForwardRef = 3;
@@ -67,14 +65,6 @@ export type InspectedElement = {|
 
 // TODO: Add profiling type
 
-// The frontend Store is mutable.
-// This wrapper object is recreated whenever the store's tree is mutated.
-// It is used to trigger a re-render of the virtualized Elements tree.
-export type TreeMetadataType = {|
-  size: number,
-  store: Store,
-|};
-
 export type DehydratedData = {|
   cleaned: Array<Array<string>>,
   data: Object,
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index c6056d72fccb..47ad29523d43 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -8,6 +8,7 @@ type Props = {|
     | 'back'
     | 'close'
     | 'down'
+    | 'more'
     | 'search'
     | 'up'
     | 'view-dom'
@@ -26,6 +27,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'more':
+      pathData = PATH_MORE;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
@@ -68,6 +72,13 @@ const PATH_CLOSE =
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_MORE = `
+  M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9
+  13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83
+  0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5
+  1.5.67 1.5 1.5-.67 1.5-1.5 1.5z
+`;
+
 const PATH_SEARCH = `
   M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
   4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 5825e812aaab..e7c9401dd554 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -2,9 +2,8 @@
 
 import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeClassOrFunction } from 'src/devtools/types';
-import { TreeContext } from './context';
 import { createRegExp } from './utils';
-import { SearchAndSelectionContext } from './SearchAndSelectionContext';
+import { TreeContext } from './TreeContext';
 import Icon from './Icon';
 
 import type { Element } from '../types';
@@ -17,33 +16,30 @@ type Props = {
 };
 
 export default function ElementView({ index, style }: Props) {
-  const { store } = useContext(TreeContext);
-
   const {
-    ownerList,
-    pushOwnerList,
+    baseDepth,
+    getElementAtIndex,
+    selectOwner,
     selectedElementID,
-    selectElementWithID,
-  } = useContext(SearchAndSelectionContext);
-
-  const element =
-    ownerList !== null
-      ? ((store.getElementByID(ownerList[index]): any): Element)
-      : ((store.getElementAtIndex(index): any): Element);
-  const { children, depth, displayName, id, key, type } = element;
-
-  let calculatedDepth = depth;
-  if (ownerList !== null) {
-    const owner = ((store.getElementByID(ownerList[0]): any): Element);
-    calculatedDepth = depth - owner.depth;
-  }
+    selectElementByID,
+  } = useContext(TreeContext);
 
-  const handleDoubleClick = useCallback(() => pushOwnerList(id), [id]);
+  const element = getElementAtIndex(index);
+  const {
+    children,
+    depth,
+    displayName,
+    id,
+    key,
+    type,
+  } = ((element: any): Element);
+
+  const handleDoubleClick = useCallback(() => selectOwner(id), [id]);
 
   // TODO Add click and key handlers for toggling element open/close state.
 
   const handleClick = useCallback(
-    ({ metaKey }) => selectElementWithID(metaKey ? null : id),
+    ({ metaKey }) => selectElementByID(metaKey ? null : id),
     [id]
   );
 
@@ -57,7 +53,7 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${1 + calculatedDepth}rem`,
+        paddingLeft: `${1 + depth - baseDepth}rem`,
       }}
     >
       {children.length > 0 && (
@@ -86,9 +82,7 @@ type DisplayNameProps = {|
 |};
 
 function DisplayName({ displayName, id }: DisplayNameProps) {
-  const { searchIndex, searchResults, searchText } = useContext(
-    SearchAndSelectionContext
-  );
+  const { searchIndex, searchResults, searchText } = useContext(TreeContext);
   const isSearchResult = useMemo(() => {
     return searchResults.includes(id);
   }, [id, searchResults]);
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index 2fe8bb63c617..b1814179a8e0 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -9,6 +9,7 @@
 
 .TreeWrapper {
   flex: 0 0 65%;
+  overflow: auto;
 }
 
 .SelectedElementWrapper {
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 116761969a0f..b79f12cc36ef 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -1,11 +1,11 @@
 // @flow
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import Store from '../store';
 import Tree from './Tree';
-import { BridgeContext, StoreContext, TreeContext } from './context';
+import { BridgeContext, StoreContext } from './context';
 import SelectedElement from './SelectedElement';
-import { SearchAndSelectionController } from './SearchAndSelectionContext';
+import { TreeContextController } from './TreeContext';
 import styles from './Elements.css';
 
 import './root.css';
@@ -21,46 +21,20 @@ export type Props = {|
 export default function Elements({ bridge, browserName, themeName }: Props) {
   const store = useMemo<Store>(() => new Store(bridge), []);
 
-  const [treeContext, setTreeContext] = useState({
-    size: store.numElements,
-    store,
-  });
-
-  useEffect(() => {
-    const handler = () => {
-      setTreeContext({
-        size: store.numElements,
-        store,
-      });
-    };
-
-    // Check for changes that happened between async render and passive effect.
-    // (We had not yet subscribed to the store so we would have missed these.)
-    if (treeContext.size !== store.numElements) {
-      handler();
-    }
-
-    store.addListener('mutated', handler);
-
-    return () => store.removeListener('mutated', handler);
-  }, [store]);
-
   // TODO Flex wrappers below should be user resizable.
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <TreeContext.Provider value={treeContext}>
-          <SearchAndSelectionController>
-            <div className={styles.Elements}>
-              <div className={styles.TreeWrapper}>
-                <Tree />
-              </div>
-              <div className={styles.SelectedElementWrapper}>
-                <SelectedElement />
-              </div>
+        <TreeContextController>
+          <div className={styles.Elements}>
+            <div className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.SelectedElementWrapper}>
+              <SelectedElement />
             </div>
-          </SearchAndSelectionController>
-        </TreeContext.Provider>
+          </div>
+        </TreeContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
index c579c242259a..822f537a8864 100644
--- a/src/devtools/views/OwnersStack.css
+++ b/src/devtools/views/OwnersStack.css
@@ -2,6 +2,7 @@
   flex: 1;
   display: flex;
   align-items: center;
+  overflow-x: auto;
 }
 
 .IconButton {
@@ -29,6 +30,7 @@
   color: var(--color-component-name);
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-normal);
+  white-space: nowrap;
 }
 
 .Component {
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/OwnersStack.js
index 6247300a0984..79a70eee1cf6 100644
--- a/src/devtools/views/OwnersStack.js
+++ b/src/devtools/views/OwnersStack.js
@@ -2,26 +2,26 @@
 
 import React, { useCallback, useContext } from 'react';
 import ButtonIcon from './ButtonIcon';
-import { SearchAndSelectionContext } from './SearchAndSelectionContext';
-import { TreeContext } from './context';
+import { TreeContext } from './TreeContext';
+import { StoreContext } from './context';
 
 import type { Element } from '../types';
 
 import styles from './OwnersStack.css';
 
 export default function OwnerStack() {
-  const { clearOwnerList, ownerIDStack } = useContext(
-    SearchAndSelectionContext
-  );
+  const { ownerStack, resetOwnerStack } = useContext(TreeContext);
 
   // $FlowFixMe "Missing type annotation for U" whatever that means
-  const elements = ownerIDStack.map(id => <ElementView key={id} id={id} />);
+  const elements = ownerStack.map((id, index) => (
+    <ElementView key={id} id={id} index={index} />
+  ));
 
   return (
     <div className={styles.OwnerStack}>
       <button
         className={styles.IconButton}
-        onClick={clearOwnerList}
+        onClick={resetOwnerStack}
         title="Back to tree view"
       >
         <ButtonIcon type="back" />
@@ -34,21 +34,21 @@ export default function OwnerStack() {
 
 type Props = {
   id: number,
+  index: number,
 };
 
-function ElementView({ id }: Props) {
-  const { ownerIDStack, popToOwnerList } = useContext(
-    SearchAndSelectionContext
-  );
-  const { store } = useContext(TreeContext);
+function ElementView({ id, index }: Props) {
+  const { ownerStackIndex, selectOwner } = useContext(TreeContext);
+  const store = useContext(StoreContext);
   const { displayName } = ((store.getElementByID(id): any): Element);
 
-  const isCurrentlyFocusedOwner = ownerIDStack[ownerIDStack.length - 1] === id;
+  const isCurrentlyFocusedOwner = ownerStackIndex === index;
 
-  const handleClick = useCallback(() => popToOwnerList(id), [
-    id,
-    popToOwnerList,
-  ]);
+  const handleClick = useCallback(() => {
+    if (!isCurrentlyFocusedOwner) {
+      selectOwner(id);
+    }
+  }, [id, isCurrentlyFocusedOwner, selectOwner]);
 
   return (
     <span
diff --git a/src/devtools/views/SearchAndSelectionContext.js b/src/devtools/views/SearchAndSelectionContext.js
deleted file mode 100644
index 30656d20cc02..000000000000
--- a/src/devtools/views/SearchAndSelectionContext.js
+++ /dev/null
@@ -1,634 +0,0 @@
-// @flow
-
-// This context contains both the search, owners stack, and selected element states.
-// These values are combined into a single context because changes in one often impact the others.
-// Combining them enables us to avoid cascading renders.
-
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-  useReducer,
-} from 'react';
-import { createRegExp } from './utils';
-import { StoreContext } from './context';
-import Store from '../store';
-
-import type { Element } from 'src/devtools/types';
-
-type Context = {|
-  // Read current context values
-  ownerIDStack: Array<number>,
-  ownerList: Array<number> | null,
-  searchIndex: number | null,
-  searchResults: Array<number>,
-  searchText: string,
-  selectedElementID: number | null,
-  selectedElementIndex: number | null,
-
-  // Update current context values:
-  clearOwnerList: () => void,
-  decrementSearchIndex(): void,
-  incrementSearchIndex(): void,
-  popToOwnerList(elementID: number): void,
-  pushOwnerList(elementID: number): void,
-  selectElementWithID(id: number | null): void,
-  selectNextElementInTree(): void,
-  selectPreviousElementInTree(): void,
-  updateSearchText(searchText: string): void,
-|};
-
-const SearchAndSelectionContext = createContext<Context>(
-  ((null: any): Context)
-);
-// $FlowFixMe displayName is a valid attribute of React$ConsearchText
-SearchAndSelectionContext.displayName = 'SearchAndSelectionContext';
-
-type State = {|
-  ownerIDStack: Array<number>,
-  ownerList: Array<number> | null,
-  searchIndex: number | null,
-  searchResults: Array<number>,
-  searchText: string,
-  selectedElementID: number | null,
-  selectedElementIndex: number | null,
-|};
-
-type Action = {|
-  type:
-    | 'CLEAR_OWNER_LIST'
-    | 'DECREMENT_SEARCH_INDEX'
-    | 'INCREMENT_SEARCH_INDEX'
-    | 'POP_TO_OWNER_LIST'
-    | 'PUSH_OWNER_LIST'
-    | 'REFINE_AFTER_MUTATION'
-    | 'SELECT_ELEMENT_WITH_ID'
-    | 'SELECT_NEXT_ELEMENT_IN_TREE'
-    | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
-    | 'UPDATE_SEARCH_TEXT',
-  payload?: any,
-|};
-
-type Props = {|
-  children: React$Node,
-|};
-
-// TODO Remove this wrapper element once global ConsearchText.write API exists.
-function SearchAndSelectionController({ children }: Props) {
-  const store = useContext(StoreContext);
-
-  // This reducer is created inline because it needs access to the Store.
-  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
-  // so it's okay for the reducer to have an empty dependencies array.
-  const reducer = useMemo(
-    () =>
-      function reducer(state: State, action: Action): State {
-        const {
-          ownerIDStack,
-          ownerList,
-          searchIndex,
-          searchResults,
-          searchText,
-          selectedElementID,
-          selectedElementIndex,
-        } = state;
-        const { payload, type } = action;
-
-        let element,
-          elementID,
-          newOwnerList,
-          newOwnerIDStack,
-          newSearchIndex,
-          newSearchResults,
-          newSearchText,
-          newSelectedElementID,
-          newSelectedElementIndex;
-
-        const updateSelectedElementIndexHelper = (
-          newSelectedElementIndex: number
-        ) => {
-          if (ownerList !== null) {
-            newSelectedElementID =
-              newSelectedElementIndex !== null
-                ? ownerList[newSelectedElementIndex]
-                : null;
-
-            return {
-              ...state,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex: newSelectedElementIndex,
-            };
-          } else {
-            element =
-              newSelectedElementIndex !== null
-                ? store.getElementAtIndex(newSelectedElementIndex)
-                : null;
-
-            return {
-              ...state,
-              selectedElementID: element !== null ? element.id : null,
-              selectedElementIndex: newSelectedElementIndex,
-            };
-          }
-        };
-
-        switch (type) {
-          case 'CLEAR_OWNER_LIST':
-            return {
-              ...state,
-              ownerList: null,
-              ownerIDStack: [],
-            };
-
-          case 'DECREMENT_SEARCH_INDEX':
-            if (ownerList !== null) {
-              throw Error(
-                `Can't update search index while owner list is active`
-              );
-            }
-
-            if (searchResults.length === 0) return state;
-
-            newSearchIndex =
-              ((searchIndex: any): number) > 0
-                ? ((searchIndex: any): number) - 1
-                : searchResults.length - 1;
-            newSelectedElementID = searchResults[newSearchIndex];
-
-            return {
-              ...state,
-              searchIndex: newSearchIndex,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex: store.getIndexOfElementID(
-                newSelectedElementID
-              ),
-            };
-
-          case 'INCREMENT_SEARCH_INDEX':
-            if (ownerList !== null) {
-              throw Error(
-                `Can't update search index while owner list is active`
-              );
-            }
-
-            if (searchResults.length === 0) return state;
-
-            newSearchIndex =
-              ((searchIndex: any): number) + 1 < searchResults.length
-                ? ((searchIndex: any): number) + 1
-                : 0;
-            newSelectedElementID = searchResults[newSearchIndex];
-
-            return {
-              ...state,
-              searchIndex: newSearchIndex,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex: store.getIndexOfElementID(
-                newSelectedElementID
-              ),
-            };
-
-          case 'POP_TO_OWNER_LIST':
-            elementID = ((payload: any): number);
-            return {
-              ...state,
-              ownerList: calculateCurrentOwnerList(
-                store,
-                elementID,
-                elementID,
-                []
-              ),
-              ownerIDStack: ownerIDStack.slice(
-                0,
-                ownerIDStack.indexOf(elementID) + 1
-              ),
-              selectedElementIndex: null,
-              selectedElementID: null,
-            };
-
-          case 'PUSH_OWNER_LIST':
-            elementID = ((payload: any): number);
-            if (ownerIDStack.includes(elementID)) return state;
-
-            // Add this new owner, and fill in the owners above it as well.
-            const ownerIDsToConcat = [];
-            let currentOwnerID = elementID;
-            while (
-              currentOwnerID !== 0 &&
-              ownerIDStack[ownerIDStack.length - 1] !== currentOwnerID
-            ) {
-              ownerIDsToConcat.unshift(currentOwnerID);
-              currentOwnerID = ((store.getElementByID(
-                currentOwnerID
-              ): any): Element).ownerID;
-            }
-
-            return {
-              ...state,
-              ownerList: calculateCurrentOwnerList(
-                store,
-                elementID,
-                elementID,
-                []
-              ),
-              ownerIDStack: ownerIDStack.concat(ownerIDsToConcat),
-              selectedElementIndex: null,
-              selectedElementID: null,
-              searchIndex: null,
-              searchResults: [],
-              searchText: '',
-            };
-
-          case 'REFINE_AFTER_MUTATION':
-            const [
-              addedElementIDs,
-              removedElementIDs,
-            ] = ((payload: any): Array<Uint32Array>);
-
-            newOwnerList = ownerList;
-            newOwnerIDStack = ownerIDStack;
-            newSearchIndex = searchIndex;
-            newSearchResults = searchResults;
-            newSearchText = searchText;
-            newSelectedElementID = selectedElementID;
-            newSelectedElementIndex = selectedElementIndex;
-
-            if (searchText !== '') {
-              removedElementIDs.forEach(id => {
-                // Prune this item from the search results.
-                const index = newSearchResults.indexOf(id);
-                if (index >= 0) {
-                  newSearchResults = newSearchResults
-                    .slice(0, index)
-                    .concat(newSearchResults.slice(index + 1));
-
-                  // If the results are now empty, also deselect things.
-                  if (newSearchResults.length === 0) {
-                    newSearchIndex = null;
-                  } else if (
-                    ((newSearchIndex: any): number) >= newSearchResults.length
-                  ) {
-                    newSearchIndex = newSearchResults.length - 1;
-                  }
-                }
-              });
-
-              addedElementIDs.forEach(id => {
-                const { displayName } = ((store.getElementByID(
-                  id
-                ): any): Element);
-
-                // Add this item to the search results if it matches.
-                const regExp = createRegExp(searchText);
-                if (displayName !== null && regExp.test(displayName)) {
-                  const newElementIndex = ((store.getIndexOfElementID(
-                    id
-                  ): any): number);
-
-                  let foundMatch = false;
-                  for (
-                    let index = 0;
-                    index < newSearchResults.length;
-                    index++
-                  ) {
-                    const id = newSearchResults[index];
-                    if (
-                      newElementIndex <
-                      ((store.getIndexOfElementID(id): any): number)
-                    ) {
-                      foundMatch = true;
-                      newSearchResults = newSearchResults
-                        .slice(0, index)
-                        .concat(id)
-                        .concat(newSearchResults.slice(index));
-                      break;
-                    }
-                  }
-                  if (!foundMatch) {
-                    newSearchResults = newSearchResults.concat(id);
-                  }
-
-                  newSearchIndex = newSearchIndex === null ? 0 : newSearchIndex;
-                }
-              });
-
-              newSelectedElementID =
-                newSearchIndex !== null
-                  ? newSearchResults[newSearchIndex]
-                  : null;
-              newSelectedElementIndex =
-                newSelectedElementID !== null
-                  ? store.getIndexOfElementID(newSelectedElementID)
-                  : null;
-            }
-
-            // If an item in the owner stack has been removed from the tree, unwind it.
-            if (ownerIDStack.length > 0) {
-              let indexOfRemovedItem = -1;
-              for (let i = 0; i < ownerIDStack.length; i++) {
-                if (removedElementIDs.includes(ownerIDStack[i])) {
-                  indexOfRemovedItem = i;
-                  break;
-                }
-              }
-
-              if (indexOfRemovedItem >= 0) {
-                newOwnerIDStack = ownerIDStack.slice(0, indexOfRemovedItem);
-              }
-
-              if (newOwnerIDStack.length === 0) {
-                newOwnerList = null;
-              } else {
-                elementID = newOwnerIDStack[newOwnerIDStack.length - 1];
-
-                newOwnerList = calculateCurrentOwnerList(
-                  store,
-                  elementID,
-                  elementID,
-                  []
-                );
-
-                newSelectedElementIndex =
-                  newSelectedElementID !== null
-                    ? newOwnerList.indexOf(newSelectedElementID)
-                    : null;
-              }
-            }
-
-            return {
-              ...state,
-              ownerIDStack: newOwnerIDStack,
-              ownerList: newOwnerList,
-              searchIndex: newSearchIndex,
-              searchResults: newSearchResults,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex: newSelectedElementIndex,
-            };
-
-          case 'SELECT_ELEMENT_WITH_ID':
-            newSelectedElementID = ((payload: any): number | null);
-            newSelectedElementIndex = null;
-
-            if (newSelectedElementID !== null) {
-              if (ownerList !== null) {
-                newSelectedElementIndex = ownerList.indexOf(
-                  newSelectedElementID
-                );
-              } else {
-                newSelectedElementIndex = store.getIndexOfElementID(
-                  newSelectedElementID
-                );
-              }
-            }
-
-            const isInOwnerList =
-              newSelectedElementID !== null &&
-              ownerList !== null &&
-              ownerList.includes(newSelectedElementID);
-
-            return {
-              ...state,
-              ownerIDStack: isInOwnerList ? ownerIDStack : [],
-              ownerList: isInOwnerList ? ownerList : null,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex: newSelectedElementIndex,
-            };
-
-          case 'SELECT_NEXT_ELEMENT_IN_TREE':
-            if (selectedElementIndex === null) {
-              return state;
-            } else if (ownerList !== null) {
-              return updateSelectedElementIndexHelper(
-                selectedElementIndex + 1 < ownerList.length
-                  ? selectedElementIndex + 1
-                  : selectedElementIndex
-              );
-            } else {
-              return updateSelectedElementIndexHelper(
-                selectedElementIndex + 1 < store.numElements
-                  ? selectedElementIndex + 1
-                  : selectedElementIndex
-              );
-            }
-
-          case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
-            if (selectedElementIndex === null) {
-              return state;
-            } else if (ownerList !== null) {
-              return updateSelectedElementIndexHelper(
-                selectedElementIndex > 0
-                  ? selectedElementIndex - 1
-                  : selectedElementIndex
-              );
-            } else {
-              return updateSelectedElementIndexHelper(
-                selectedElementIndex > 0
-                  ? selectedElementIndex - 1
-                  : selectedElementIndex
-              );
-            }
-
-          case 'UPDATE_SEARCH_TEXT':
-            newSearchIndex = searchIndex;
-            newSearchResults = [];
-            newSearchText = ((payload: any): string);
-
-            // Find all matching elements.
-            if (newSearchText !== '') {
-              const regExp = createRegExp(newSearchText);
-              store.roots.forEach(rootID => {
-                recursivelySearchTree(store, rootID, regExp, newSearchResults);
-              });
-
-              // If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).
-              // If it's a new search, reset the index.
-              if (newSearchResults.length === 0) {
-                newSearchIndex = null;
-              } else if (
-                searchIndex !== null &&
-                newSearchText.startsWith(searchText)
-              ) {
-                newSearchIndex = Math.min(
-                  searchIndex,
-                  newSearchResults.length - 1
-                );
-              } else {
-                newSearchIndex = 0;
-              }
-            } else {
-              newSearchIndex = null;
-            }
-
-            newSelectedElementID =
-              newSearchIndex !== null ? newSearchResults[newSearchIndex] : null;
-
-            return {
-              ...state,
-              searchIndex: newSearchIndex,
-              searchResults: newSearchResults,
-              searchText: newSearchText,
-              selectedElementID: newSelectedElementID,
-              selectedElementIndex:
-                newSelectedElementID !== null
-                  ? store.getIndexOfElementID(newSelectedElementID)
-                  : null,
-            };
-
-          default:
-            throw new Error(`Unrecognized action "${type}"`);
-        }
-      },
-    []
-  );
-
-  const [state, dispatch] = useReducer(reducer, {
-    ownerIDStack: [],
-    ownerList: null,
-    searchIndex: null,
-    searchResults: [],
-    searchText: '',
-    selectedElementID: null,
-    selectedElementIndex: null,
-  });
-
-  const clearOwnerList = useCallback(
-    () => dispatch({ type: 'CLEAR_OWNER_LIST' }),
-    [dispatch]
-  );
-  const decrementSearchIndex = useCallback(
-    () => dispatch({ type: 'DECREMENT_SEARCH_INDEX' }),
-    [dispatch]
-  );
-  const incrementSearchIndex = useCallback(
-    () => dispatch({ type: 'INCREMENT_SEARCH_INDEX' }),
-    [dispatch]
-  );
-  const popToOwnerList = useCallback(
-    (elementID: number) =>
-      dispatch({ type: 'POP_TO_OWNER_LIST', payload: elementID }),
-    [dispatch]
-  );
-  const pushOwnerList = useCallback(
-    (elementID: number) =>
-      dispatch({ type: 'PUSH_OWNER_LIST', payload: elementID }),
-    [dispatch]
-  );
-  const selectElementWithID = useCallback(
-    (id: number | null) =>
-      dispatch({ type: 'SELECT_ELEMENT_WITH_ID', payload: id }),
-    [dispatch]
-  );
-  const selectNextElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const selectPreviousElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const updateSearchText = useCallback(
-    (searchText: string) =>
-      dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: searchText }),
-    [dispatch]
-  );
-
-  const value = useMemo(
-    () => ({
-      ownerList: state.ownerList,
-      ownerIDStack: state.ownerIDStack,
-      searchIndex: state.searchIndex,
-      searchResults: state.searchResults,
-      searchText: state.searchText,
-      selectedElementID: state.selectedElementID,
-      selectedElementIndex: state.selectedElementIndex,
-
-      clearOwnerList,
-      decrementSearchIndex,
-      incrementSearchIndex,
-      popToOwnerList,
-      pushOwnerList,
-      selectElementWithID,
-      selectNextElementInTree,
-      selectPreviousElementInTree,
-      updateSearchText,
-    }),
-    [state]
-  );
-
-  // Listen for changes to the tree and incrementally adjust the search results.
-  useLayoutEffect(() => {
-    const handleStoreMutated = ([
-      addedElementIDs,
-      removedElementIDs,
-    ]: Array<Uint32Array>) => {
-      if (!state.searchText && state.ownerList === null) {
-        return;
-      }
-
-      dispatch({
-        type: 'REFINE_AFTER_MUTATION',
-        payload: [addedElementIDs, removedElementIDs],
-      });
-    };
-
-    store.addListener('mutated', handleStoreMutated);
-
-    return () => store.removeListener('mutated', handleStoreMutated);
-  }, [state, store]);
-
-  return (
-    <SearchAndSelectionContext.Provider value={value}>
-      {children}
-    </SearchAndSelectionContext.Provider>
-  );
-}
-
-function calculateCurrentOwnerList(
-  store: Store,
-  rootOwnerID: number,
-  elementID: number,
-  ownerList: Array<number>
-): Array<number> {
-  if (elementID === rootOwnerID) {
-    ownerList.push(elementID);
-    const { children } = ((store.getElementByID(elementID): any): Element);
-    children.forEach(childID =>
-      calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
-    );
-  } else {
-    const { children, ownerID } = ((store.getElementByID(
-      elementID
-    ): any): Element);
-    if (ownerID === rootOwnerID) {
-      ownerList.push(elementID);
-      children.forEach(childID =>
-        calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
-      );
-    }
-  }
-
-  return ownerList;
-}
-
-function recursivelySearchTree(
-  store: Store,
-  elementID: number,
-  regExp: RegExp,
-  searchResults: Array<number>
-): void {
-  const { children, displayName } = ((store.getElementByID(
-    elementID
-  ): any): Element);
-  if (displayName !== null) {
-    if (regExp.test(displayName)) {
-      searchResults.push(elementID);
-    }
-  }
-  children.forEach(childID =>
-    recursivelySearchTree(store, childID, regExp, searchResults)
-  );
-}
-
-export { SearchAndSelectionContext, SearchAndSelectionController };
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 24d3e1453c20..5a16d1c3832b 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { SearchAndSelectionContext } from './SearchAndSelectionContext';
+import { TreeContext } from './TreeContext';
 import ButtonIcon from './ButtonIcon';
 
 import styles from './SearchInput.css';
@@ -10,32 +10,32 @@ type Props = {||};
 
 export default function SearchInput(props: Props) {
   const {
-    decrementSearchIndex,
-    incrementSearchIndex,
+    goToNextSearchResult,
+    goToPreviousSearchResult,
     searchIndex,
     searchResults,
     searchText,
-    updateSearchText,
-  } = useContext(SearchAndSelectionContext);
+    setSearchText,
+  } = useContext(TreeContext);
 
   const inputRef = useRef();
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) => updateSearchText(currentTarget.value),
-    [updateSearchText]
+    ({ currentTarget }) => setSearchText(currentTarget.value),
+    [setSearchText]
   );
 
   const resetSearch = useCallback(() => {
-    updateSearchText('');
-  }, [updateSearchText]);
+    setSearchText('');
+  }, [setSearchText]);
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
-        incrementSearchIndex();
+        goToNextSearchResult();
       }
     },
-    [incrementSearchIndex]
+    [goToNextSearchResult]
   );
 
   // Auto-focus search input
@@ -74,14 +74,16 @@ export default function SearchInput(props: Props) {
       <div className={styles.LeftVRule} />
       <button
         className={styles.IconButton}
-        onClick={decrementSearchIndex}
+        disabled={!searchText}
+        onClick={goToPreviousSearchResult}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
       </button>
       <button
         className={styles.IconButton}
-        onClick={incrementSearchIndex}
+        disabled={!searchText}
+        onClick={goToNextSearchResult}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index a107bb07683b..fb11fa0a16e4 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SearchAndSelectionContext } from './SearchAndSelectionContext';
+import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from './context';
 import ButtonIcon from './ButtonIcon';
 import HooksTree from './HooksTree';
@@ -21,7 +21,7 @@ import type { DehydratedData } from 'src/devtools/types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { selectedElementID } = useContext(SearchAndSelectionContext);
+  const { selectedElementID } = useContext(TreeContext);
   const store = useContext(StoreContext);
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
@@ -107,9 +107,9 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
 }
 
 function OwnerView({ displayName, id }: { displayName: string, id: number }) {
-  const { selectElementWithID } = useContext(SearchAndSelectionContext);
+  const { selectElementByID } = useContext(TreeContext);
 
-  const handleClick = useCallback(() => selectElementWithID(id), [id]);
+  const handleClick = useCallback(() => selectElementByID(id), [id]);
 
   return (
     <div
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index b4e4e93a73ac..d2c543277f6d 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -9,12 +9,11 @@ import React, {
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import { SearchAndSelectionContext } from './SearchAndSelectionContext';
+import { TreeContext } from './TreeContext';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
-import { TreeContext } from './context';
 
 import styles from './Tree.css';
 
@@ -22,13 +21,14 @@ type Props = {||};
 
 export default function Tree(props: Props) {
   const {
-    ownerIDStack,
-    ownerList,
+    baseDepth,
+    getElementAtIndex,
+    numElements,
+    ownerStack,
     selectedElementIndex,
     selectNextElementInTree,
     selectPreviousElementInTree,
-  } = useContext(SearchAndSelectionContext);
-  const treeContext = useContext(TreeContext);
+  } = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any>>();
 
   // Make sure a newly selected element is visible in the list.
@@ -66,22 +66,23 @@ export default function Tree(props: Props) {
     selectedElementIndex,
     selectNextElementInTree,
     selectPreviousElementInTree,
-    treeContext,
   ]);
 
-  const itemCount = ownerList !== null ? ownerList.length : treeContext.size;
-
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
-  const itemData = useMemo(() => ({ treeContext, ownerList }), [
-    treeContext,
-    ownerList,
-  ]);
+  const itemData = useMemo(
+    () => ({
+      baseDepth,
+      numElements,
+      getElementAtIndex,
+    }),
+    [baseDepth, numElements, getElementAtIndex]
+  );
 
   return (
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
-        {ownerIDStack.length > 0 ? <OwnersStack /> : <SearchInput />}
+        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <button
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
@@ -95,7 +96,7 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
-              itemCount={itemCount}
+              itemCount={numElements}
               itemData={itemData}
               itemSize={20}
               ref={listRef}
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
new file mode 100644
index 000000000000..2868fb728fff
--- /dev/null
+++ b/src/devtools/views/TreeContext.js
@@ -0,0 +1,663 @@
+// @flow
+
+// This context combines tree/selection state, search, and the owners stack.
+// These values are managed together because changes in one often impact the others.
+// Combining them enables us to avoid cascading renders.
+//
+// Changes to search state may impact tree state.
+// For example, updating the selected search result also updates the tree's selected value.
+// Search does not fundamanetally change the tree though.
+// It is also possible to update the selected tree value independently.
+//
+// Changes to owners state mask search and tree values.
+// When owners statck is not empty, search is temporarily disabnled,
+// and tree values (e.g. num elements, selected element) are masked.
+// Both tree and search values are restored when the owners stack is cleared.
+//
+// For this reason, changes to the tree context are processed in sequence: tree -> search -> owners
+// This enables each section to potentially override (or mask) previous values.
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+} from 'react';
+import { createRegExp } from './utils';
+import { StoreContext } from './context';
+import Store from '../store';
+
+import type { Element } from 'src/devtools/types';
+
+type Context = {|
+  // Tree
+  baseDepth: number,
+  numElements: number,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+  getElementAtIndex(index: number): Element | null,
+  selectElementAtIndex(index: number): void,
+  selectElementByID(id: number | null): void,
+  selectNextElementInTree(): void,
+  selectPreviousElementInTree(): void,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+  setSearchText(text: string): void,
+  goToNextSearchResult(): void,
+  goToPreviousSearchResult(): void,
+
+  // Owners
+  ownerStack: Array<number>,
+  ownerStackIndex: number | null,
+  resetOwnerStack(): void,
+  selectOwner(id: number): void,
+|};
+
+const TreeContext = createContext<Context>(((null: any): Context));
+// $FlowFixMe displayName is a valid attribute of React$ConsearchText
+TreeContext.displayName = 'TreeContext';
+
+type State = {|
+  // Tree
+  baseDepth: number,
+  numElements: number,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+
+  // Owners
+  ownerStack: Array<number>,
+  ownerStackIndex: number | null,
+  _ownerFlatTree: Array<number> | null,
+|};
+
+type Action = {|
+  type:
+    | 'GO_TO_NEXT_SEARCH_RESULT'
+    | 'GO_TO_PREVIOUS_SEARCH_RESULT'
+    | 'HANDLE_STORE_MUTATION'
+    | 'RESET_OWNER_STACK'
+    | 'SELECT_ELEMENT_AT_INDEX'
+    | 'SELECT_ELEMENT_BY_ID'
+    | 'SELECT_NEXT_ELEMENT_IN_TREE'
+    | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
+    | 'SELECT_OWNER'
+    | 'SET_SEARCH_TEXT',
+  payload?: any,
+|};
+
+function reduceTreeState(store: Store, state: State, action: Action): State {
+  const { type, payload } = action;
+
+  let {
+    numElements,
+    ownerStack,
+    selectedElementIndex,
+    selectedElementID,
+  } = state;
+
+  // Base tree should ignore selected element changes when the owner's tree is active.
+  if (ownerStack.length === 0) {
+    switch (type) {
+      case 'HANDLE_STORE_MUTATION':
+        numElements = store.numElements;
+
+        // If the currently-selected Element has been removed from the tree, update selection state.
+        if (selectedElementID !== null) {
+          const removedElementIDs = ((payload: any): Array<Uint32Array>)[1];
+          if (removedElementIDs.includes(((selectedElementID: any): number))) {
+            selectedElementIndex = null;
+          }
+        }
+        break;
+      case 'SELECT_ELEMENT_AT_INDEX':
+        selectedElementIndex = ((payload: any): number | null);
+        break;
+      case 'SELECT_ELEMENT_BY_ID':
+        selectedElementIndex =
+          payload === null
+            ? null
+            : store.getIndexOfElementID(((payload: any): number));
+        break;
+      case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        if (
+          selectedElementIndex !== null &&
+          selectedElementIndex + 1 < numElements
+        ) {
+          selectedElementIndex++;
+        }
+        break;
+      case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        if (selectedElementIndex !== null && selectedElementIndex > 0) {
+          selectedElementIndex--;
+        }
+        break;
+      default:
+        // React can bailout of no-op updates.
+        return state;
+    }
+  }
+
+  // Keep selected item ID and index in sync.
+  if (selectedElementIndex !== state.selectedElementIndex) {
+    if (selectedElementIndex === null) {
+      selectedElementID = null;
+    } else {
+      selectedElementID = store.getElementIDAtIndex(
+        ((selectedElementIndex: any): number)
+      );
+    }
+  }
+
+  return {
+    ...state,
+
+    numElements,
+    selectedElementIndex,
+    selectedElementID,
+  };
+}
+
+function reduceSearchState(store: Store, state: State, action: Action): State {
+  const { type, payload } = action;
+
+  let {
+    ownerStack,
+    searchIndex,
+    searchResults,
+    searchText,
+    selectedElementID,
+    selectedElementIndex,
+  } = state;
+
+  const prevSearchIndex = searchIndex;
+  const numPrevSearchResults = searchResults.length;
+
+  // Search isn't supported when the owner's tree is active.
+  if (ownerStack.length === 0) {
+    switch (type) {
+      case 'GO_TO_NEXT_SEARCH_RESULT':
+        if (numPrevSearchResults > 0) {
+          searchIndex =
+            searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;
+        }
+        break;
+      case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+        if (numPrevSearchResults > 0) {
+          searchIndex =
+            ((searchIndex: any): number) > 0
+              ? ((searchIndex: any): number) - 1
+              : numPrevSearchResults - 1;
+        }
+        break;
+      case 'HANDLE_STORE_MUTATION':
+        if (searchText !== '') {
+          const [
+            addedElementIDs,
+            removedElementIDs,
+          ] = ((payload: any): Array<Uint32Array>);
+
+          removedElementIDs.forEach(id => {
+            // Prune this item from the search results.
+            const index = searchResults.indexOf(id);
+            if (index >= 0) {
+              searchResults = searchResults
+                .slice(0, index)
+                .concat(searchResults.slice(index + 1));
+
+              // If the results are now empty, also deselect things.
+              if (searchResults.length === 0) {
+                searchIndex = null;
+              } else if (((searchIndex: any): number) >= searchResults.length) {
+                searchIndex = searchResults.length - 1;
+              }
+            }
+          });
+
+          addedElementIDs.forEach(id => {
+            const { displayName } = ((store.getElementByID(id): any): Element);
+
+            // Add this item to the search results if it matches.
+            const regExp = createRegExp(searchText);
+            if (displayName !== null && regExp.test(displayName)) {
+              const newElementIndex = ((store.getIndexOfElementID(
+                id
+              ): any): number);
+
+              let foundMatch = false;
+              for (let index = 0; index < searchResults.length; index++) {
+                const id = searchResults[index];
+                if (
+                  newElementIndex <
+                  ((store.getIndexOfElementID(id): any): number)
+                ) {
+                  foundMatch = true;
+                  searchResults = searchResults
+                    .slice(0, index)
+                    .concat(id)
+                    .concat(searchResults.slice(index));
+                  break;
+                }
+              }
+              if (!foundMatch) {
+                searchResults = searchResults.concat(id);
+              }
+
+              searchIndex = searchIndex === null ? 0 : searchIndex;
+            }
+          });
+        }
+        break;
+      case 'SET_SEARCH_TEXT':
+        searchIndex = null;
+        searchResults = [];
+        searchText = ((payload: any): string);
+
+        if (searchText !== '') {
+          const regExp = createRegExp(searchText);
+          store.roots.forEach(rootID => {
+            recursivelySearchTree(store, rootID, regExp, searchResults);
+          });
+
+          if (searchResults.length > 0) {
+            if (prevSearchIndex === null) {
+              searchIndex = 0;
+            } else {
+              searchIndex = Math.min(
+                ((prevSearchIndex: any): number),
+                searchResults.length - 1
+              );
+            }
+          }
+        }
+        break;
+      default:
+        // React can bailout of no-op updates.
+        return state;
+    }
+  }
+
+  // Changes in search index should override the selected element.
+  if (searchIndex !== prevSearchIndex) {
+    if (searchIndex === null) {
+      selectedElementIndex = null;
+      selectedElementID = null;
+    } else {
+      selectedElementID = ((searchResults[searchIndex]: any): number);
+      selectedElementIndex = store.getIndexOfElementID(
+        ((selectedElementID: any): number)
+      );
+    }
+  }
+
+  return {
+    ...state,
+
+    selectedElementID,
+    selectedElementIndex,
+
+    searchIndex,
+    searchResults,
+    searchText,
+  };
+}
+
+function reduceOwnersState(store: Store, state: State, action: Action): State {
+  const { payload, type } = action;
+
+  let {
+    baseDepth,
+    numElements,
+    selectedElementID,
+    selectedElementIndex,
+    ownerStack,
+    ownerStackIndex,
+    searchIndex,
+    searchResults,
+    searchText,
+    _ownerFlatTree,
+  } = state;
+
+  switch (type) {
+    case 'HANDLE_STORE_MUTATION':
+      if (ownerStack.length > 0) {
+        // eslint-disable-next-line no-unused-vars
+        const [_, removedElementIDs] = ((payload: any): Array<Uint32Array>);
+
+        let indexOfRemovedItem = -1;
+        for (let i = 0; i < ownerStack.length; i++) {
+          if (removedElementIDs.includes(ownerStack[i])) {
+            indexOfRemovedItem = i;
+            break;
+          }
+        }
+
+        if (indexOfRemovedItem >= 0) {
+          ownerStack = ownerStack.slice(0, indexOfRemovedItem);
+          if (ownerStack.length === 0) {
+            _ownerFlatTree = null;
+          } else {
+            ownerStackIndex = ownerStack.length - 1;
+          }
+        }
+      }
+      break;
+    case 'RESET_OWNER_STACK':
+      ownerStack = [];
+      ownerStackIndex = null;
+      _ownerFlatTree = null;
+      break;
+    case 'SELECT_ELEMENT_AT_INDEX':
+      if (_ownerFlatTree !== null) {
+        selectedElementIndex = ((payload: any): number | null);
+      }
+      break;
+    case 'SELECT_ELEMENT_BY_ID':
+      if (_ownerFlatTree !== null) {
+        selectedElementIndex =
+          payload === null ? null : _ownerFlatTree.indexOf(payload);
+      }
+      break;
+    case 'SELECT_NEXT_ELEMENT_IN_TREE':
+      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+        if (selectedElementIndex === null) {
+          selectedElementIndex = 0;
+        } else if (selectedElementIndex + 1 < _ownerFlatTree.length) {
+          selectedElementIndex++;
+        }
+      }
+      break;
+    case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+        if (selectedElementIndex !== null && selectedElementIndex > 0) {
+          selectedElementIndex--;
+        }
+      }
+      break;
+    case 'SELECT_OWNER':
+      ownerStackIndex = ownerStack.indexOf(payload);
+
+      // If this owner is already in the current stack, just select it.
+      // Otherwise, create a new stack.
+      if (ownerStackIndex < 0) {
+        // Add this new owner, and fill in the owners above it as well.
+        ownerStack = [];
+        let currentOwnerID = ((payload: any): number);
+        while (currentOwnerID !== 0) {
+          ownerStack.unshift(currentOwnerID);
+          currentOwnerID = ((store.getElementByID(
+            currentOwnerID
+          ): any): Element).ownerID;
+        }
+        ownerStackIndex = ownerStack.length - 1;
+        selectedElementIndex = 0;
+
+        if (searchText !== '') {
+          searchIndex = null;
+          searchResults = [];
+          searchText = '';
+        }
+      }
+      break;
+    default:
+      // React can bailout of no-op updates.
+      return state;
+  }
+
+  // Changes in the selected owner require re-calculating the owners tree.
+  if (
+    ownerStackIndex !== state.ownerStackIndex ||
+    ownerStack !== state.ownerStack ||
+    type === 'HANDLE_STORE_MUTATION'
+  ) {
+    if (ownerStackIndex === null) {
+      _ownerFlatTree = null;
+      baseDepth = 0;
+      numElements = store.numElements;
+    } else {
+      _ownerFlatTree = calculateCurrentOwnerList(
+        store,
+        ownerStack[ownerStackIndex],
+        ownerStack[ownerStackIndex],
+        []
+      );
+
+      baseDepth = ((store.getElementByID(_ownerFlatTree[0]): any): Element)
+        .depth;
+      numElements = _ownerFlatTree.length;
+    }
+  }
+
+  // Keep selected item ID and index in sync.
+  if (selectedElementIndex !== state.selectedElementIndex) {
+    if (selectedElementIndex === null) {
+      selectedElementID = null;
+    } else if (_ownerFlatTree !== null) {
+      selectedElementID = _ownerFlatTree[((selectedElementIndex: any): number)];
+    }
+  }
+
+  return {
+    ...state,
+
+    baseDepth,
+    numElements,
+    selectedElementID,
+    selectedElementIndex,
+
+    searchIndex,
+    searchResults,
+    searchText,
+
+    ownerStack,
+    ownerStackIndex,
+    _ownerFlatTree,
+  };
+}
+
+// TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
+function TreeContextController({ children }: {| children: React$Node |}) {
+  const store = useContext(StoreContext);
+
+  // This reducer is created inline because it needs access to the Store.
+  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
+  // so it's okay for the reducer to have an empty dependencies array.
+  const reducer = useMemo(
+    () => (state: State, action: Action): State => {
+      const { type } = action;
+      switch (type) {
+        case 'GO_TO_NEXT_SEARCH_RESULT':
+        case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+        case 'HANDLE_STORE_MUTATION':
+        case 'RESET_OWNER_STACK':
+        case 'SELECT_ELEMENT_AT_INDEX':
+        case 'SELECT_ELEMENT_BY_ID':
+        case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        case 'SELECT_OWNER':
+        case 'SET_SEARCH_TEXT':
+          state = reduceTreeState(store, state, action);
+          state = reduceSearchState(store, state, action);
+          state = reduceOwnersState(store, state, action);
+          return state;
+        default:
+          throw new Error(`Unrecognized action "${type}"`);
+      }
+    },
+    [store]
+  );
+
+  const [state, dispatch] = useReducer(reducer, {
+    // Tree
+    baseDepth: 0,
+    numElements: store.numElements,
+    selectedElementIndex: null,
+    selectedElementID: null,
+
+    // Search
+    searchIndex: null,
+    searchResults: [],
+    searchText: '',
+
+    // Owners
+    ownerStack: [],
+    ownerStackIndex: null,
+    _ownerFlatTree: null,
+  });
+
+  const getElementAtIndex = useCallback(
+    (index: number) => {
+      return state._ownerFlatTree === null
+        ? store.getElementAtIndex(index)
+        : store.getElementByID(state._ownerFlatTree[index]);
+    },
+    [state]
+  );
+  const selectElementAtIndex = useCallback(
+    (index: number) =>
+      dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
+    [dispatch]
+  );
+  const selectElementByID = useCallback(
+    (id: number | null) =>
+      dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),
+    [dispatch]
+  );
+  const setSearchText = useCallback(
+    (text: string) => dispatch({ type: 'SET_SEARCH_TEXT', payload: text }),
+    [dispatch]
+  );
+  const goToNextSearchResult = useCallback(
+    () => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),
+    [dispatch]
+  );
+  const goToPreviousSearchResult = useCallback(
+    () => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),
+    [dispatch]
+  );
+  const resetOwnerStack = useCallback(
+    () => dispatch({ type: 'RESET_OWNER_STACK' }),
+    [dispatch]
+  );
+  const selectNextElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
+    [dispatch]
+  );
+  const selectPreviousElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
+    [dispatch]
+  );
+  const selectOwner = useCallback(
+    (id: number) => dispatch({ type: 'SELECT_OWNER', payload: id }),
+    [dispatch]
+  );
+
+  const value = useMemo(
+    () => ({
+      // Tree (derived from Store or owners state)
+      baseDepth: state.baseDepth,
+      numElements: state.numElements,
+      selectedElementID: state.selectedElementID,
+      selectedElementIndex: state.selectedElementIndex,
+      getElementAtIndex,
+      selectElementByID,
+      selectElementAtIndex,
+      selectNextElementInTree,
+      selectPreviousElementInTree,
+
+      // Search
+      searchIndex: state.searchIndex,
+      searchResults: state.searchResults,
+      searchText: state.searchText,
+      setSearchText,
+      goToNextSearchResult,
+      goToPreviousSearchResult,
+
+      // Owners
+      ownerStack: state.ownerStack,
+      ownerStackIndex: state.ownerStackIndex,
+      resetOwnerStack,
+      selectOwner,
+    }),
+    [state]
+  );
+
+  // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
+  useLayoutEffect(() => {
+    const handleStoreMutated = ([
+      addedElementIDs,
+      removedElementIDs,
+    ]: Array<Uint32Array>) => {
+      dispatch({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [addedElementIDs, removedElementIDs],
+      });
+    };
+
+    // TODO Even though we're using layout effect, concurrent rendering may cause us to miss a mutation.
+    // Should the store expose some sort of version number that we could check after mounting?
+
+    store.addListener('mutated', handleStoreMutated);
+
+    return () => store.removeListener('mutated', handleStoreMutated);
+  }, [state, store]);
+
+  return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
+}
+
+function calculateCurrentOwnerList(
+  store: Store,
+  rootOwnerID: number,
+  elementID: number,
+  ownerList: Array<number>
+): Array<number> {
+  if (elementID === rootOwnerID) {
+    ownerList.push(elementID);
+    const { children } = ((store.getElementByID(elementID): any): Element);
+    children.forEach(childID =>
+      calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
+    );
+  } else {
+    const { children, ownerID } = ((store.getElementByID(
+      elementID
+    ): any): Element);
+    if (ownerID === rootOwnerID) {
+      ownerList.push(elementID);
+      children.forEach(childID =>
+        calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
+      );
+    }
+  }
+
+  return ownerList;
+}
+
+function recursivelySearchTree(
+  store: Store,
+  elementID: number,
+  regExp: RegExp,
+  searchResults: Array<number>
+): void {
+  const { children, displayName } = ((store.getElementByID(
+    elementID
+  ): any): Element);
+  if (displayName !== null) {
+    if (regExp.test(displayName)) {
+      searchResults.push(elementID);
+    }
+  }
+  children.forEach(childID =>
+    recursivelySearchTree(store, childID, regExp, searchResults)
+  );
+}
+
+export { TreeContext, TreeContextController };
diff --git a/src/devtools/views/context.js b/src/devtools/views/context.js
index 13be80ef6f35..7dda145a8a77 100644
--- a/src/devtools/views/context.js
+++ b/src/devtools/views/context.js
@@ -3,7 +3,6 @@
 import { createContext } from 'react';
 
 import type { Bridge } from '../../types';
-import type { TreeMetadataType } from '../types';
 
 import Store from '../store';
 
@@ -14,9 +13,3 @@ BridgeContext.displayName = 'BridgeContext';
 export const StoreContext = createContext<Store>(((null: any): Store));
 // $FlowFixMe displayName is a valid attribute of React$Context
 StoreContext.displayName = 'StoreContext';
-
-export const TreeContext = createContext<TreeMetadataType>(
-  ((null: any): TreeMetadataType)
-);
-// $FlowFixMe displayName is a valid attribute of React$Context
-TreeContext.displayName = 'TreeMetadataContext';

From 41514d67f0be930d0aefe4b1277f3b7579358e6a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 15:37:52 -0500
Subject: [PATCH 042/814] Small refinements to Store: read-only Elements in
 map, added revision to guard against tearing

---
 src/devtools/store.js             | 37 ++++++++++++++++++++++++-------
 src/devtools/types.js             |  4 ++--
 src/devtools/views/TreeContext.js | 34 ++++++++++++++++------------
 3 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 4480a17ff920..42b3820e4d0d 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -28,14 +28,18 @@ const debug = (methodName, ...args) => {
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter {
-  // TODO Should items in this map be read-only/immutable for easier props comparison?
-  //      We currently mutate "children" and "weight" props.
+  // Map of ID to Element.
+  // Elements are read-only so they wokr well with memoization.
   _idToElement: Map<number, Element> = new Map();
 
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
   _numElements: number = 0;
 
+  // Incremented each time the store is mutated.
+  // This enables a passive effect to detect a mutation between render and commit phase.
+  _revision: number = 0;
+
   // This Array must be treated as immutable!
   // Passive effects will check it for changes between render and mount.
   _roots: $ReadOnlyArray<number> = [];
@@ -55,6 +59,10 @@ export default class Store extends EventEmitter {
     return this._numElements;
   }
 
+  get revision(): number {
+    return this._revision;
+  }
+
   get roots(): $ReadOnlyArray<number> {
     return this._roots;
   }
@@ -275,7 +283,11 @@ export default class Store extends EventEmitter {
               // Maybe in the future we'll revisit this.
             } else {
               parentElement = ((this._idToElement.get(parentID): any): Element);
-              parentElement.children = parentElement.children.concat(id);
+
+              this._idToElement.set(parentID, {
+                ...parentElement,
+                children: parentElement.children.concat(id),
+              });
 
               const element: Element = {
                 children: [],
@@ -319,9 +331,12 @@ export default class Store extends EventEmitter {
             this._roots = this._roots.filter(rootID => rootID !== id);
             this._rootIDToRendererID.delete(id);
           } else {
-            parentElement.children = parentElement.children.filter(
-              childID => childID !== id
-            );
+            this._idToElement.set(parentID, {
+              ...parentElement,
+              children: parentElement.children.filter(
+                childID => childID !== id
+              ),
+            });
           }
 
           // Track removed items so search results can be updated
@@ -343,7 +358,6 @@ export default class Store extends EventEmitter {
           debug('Re-order', `fiber ${id} children ${children.join(',')}`);
 
           element = ((this._idToElement.get(id): any): Element);
-          element.children = Array.from(children);
 
           const prevWeight = element.weight;
           let childWeight = 0;
@@ -353,7 +367,12 @@ export default class Store extends EventEmitter {
             childWeight += child.weight;
           });
 
-          element.weight = childWeight + 1;
+          this._idToElement.set(id, {
+            ...element,
+            children: Array.from(children),
+            weight: childWeight + 1,
+          });
+
           weightDelta = childWeight + 1 - prevWeight;
           break;
         default:
@@ -370,6 +389,8 @@ export default class Store extends EventEmitter {
       }
     }
 
+    this._revision++;
+
     if (haveRootsChanged) {
       this.emit('roots');
     }
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 59cddbfd108c..53517834dc4c 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -18,7 +18,7 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 // Some of its information (e.g. id, type, displayName) come from the backend.
 // Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
 // Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
-export type Element = {|
+export type Element = $ReadOnly<{|
   id: number,
   parentID: number,
   children: Array<number>,
@@ -37,7 +37,7 @@ export type Element = {|
   // This property is used to quickly determine the total number of Elements,
   // and the Element at any given index (for windowing purposes).
   weight: number,
-|};
+|}>;
 
 export type Owner = {|
   displayName: string,
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 2868fb728fff..bc9232552cb6 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -21,7 +21,7 @@ import React, {
   createContext,
   useCallback,
   useContext,
-  useLayoutEffect,
+  useEffect,
   useMemo,
   useReducer,
 } from 'react';
@@ -112,11 +112,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         numElements = store.numElements;
 
         // If the currently-selected Element has been removed from the tree, update selection state.
-        if (selectedElementID !== null) {
-          const removedElementIDs = ((payload: any): Array<Uint32Array>)[1];
-          if (removedElementIDs.includes(((selectedElementID: any): number))) {
-            selectedElementIndex = null;
-          }
+        if (
+          selectedElementID !== null &&
+          store.getElementByID(selectedElementID) === null
+        ) {
+          selectedElementIndex = null;
         }
         break;
       case 'SELECT_ELEMENT_AT_INDEX':
@@ -330,12 +330,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   switch (type) {
     case 'HANDLE_STORE_MUTATION':
       if (ownerStack.length > 0) {
-        // eslint-disable-next-line no-unused-vars
-        const [_, removedElementIDs] = ((payload: any): Array<Uint32Array>);
-
         let indexOfRemovedItem = -1;
         for (let i = 0; i < ownerStack.length; i++) {
-          if (removedElementIDs.includes(ownerStack[i])) {
+          if (store.getElementByID(ownerStack[i]) === null) {
             indexOfRemovedItem = i;
             break;
           }
@@ -467,6 +464,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
 function TreeContextController({ children }: {| children: React$Node |}) {
   const store = useContext(StoreContext);
+  const initialRevision = useMemo(() => store.revision, [store]);
 
   // This reducer is created inline because it needs access to the Store.
   // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
@@ -592,7 +590,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {
   );
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
-  useLayoutEffect(() => {
+  useEffect(() => {
     const handleStoreMutated = ([
       addedElementIDs,
       removedElementIDs,
@@ -603,13 +601,21 @@ function TreeContextController({ children }: {| children: React$Node |}) {
       });
     };
 
-    // TODO Even though we're using layout effect, concurrent rendering may cause us to miss a mutation.
-    // Should the store expose some sort of version number that we could check after mounting?
+    // Since this is a passive effect, the tree may have been mutated before our initial subscription.
+    if (store.revision !== initialRevision) {
+      // At the moment, we can treat this as a mutation.
+      // We don't know which Elements were newly added/removed, but that should be okay in this case.
+      // It would only impact the search state, which is unlikely to exist yet at this point.
+      dispatch({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [new Uint32Array(0), new Uint32Array(0)],
+      });
+    }
 
     store.addListener('mutated', handleStoreMutated);
 
     return () => store.removeListener('mutated', handleStoreMutated);
-  }, [state, store]);
+  }, [store]);
 
   return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
 }

From 872d0f78d4b5fcd72662e1efc38c7f0ed44d744a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 15:49:52 -0500
Subject: [PATCH 043/814] Tweaked owners breadcrumb style to batter match tree
 colors

---
 src/devtools/views/Element.css     |  4 ++--
 src/devtools/views/OwnersStack.css | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index a72e98de51b0..d30d6d289a38 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -22,8 +22,8 @@
   --color-tree-jsx-arrow-brackets: var(
     --color-tree-jsx-arrow-brackets-inverted
   );
-  --color-attribute-name: #b3e5fc;
-  --color-attribute-value: #fff;
+  --color-attribute-name: var(--color-tree-node-hover);
+  --color-attribute-value: var(--color-component-name-inverted);
 }
 
 .DollarR {
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
index 822f537a8864..5b00134f0cb0 100644
--- a/src/devtools/views/OwnersStack.css
+++ b/src/devtools/views/OwnersStack.css
@@ -31,16 +31,20 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-normal);
   white-space: nowrap;
+  border-radius: 0.125rem;
 }
 
 .Component {
   cursor: pointer;
   color: var(--color-component-name);
-  background: var(--color-dimmest);
-  border-radius: 0.125rem;
 }
 .Component:hover {
-  background: var(--color-dimmer);
+  background-color: var(--color-tree-node-hover);
+}
+
+.FocusedComponent {
+  background-color: var(--color-tree-node-selected);
+  color: var(--color-component-name-inverted);
 }
 
 .VRule {

From c6b0338f13b47c94b965f301619c7f36763eae73 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 16:05:48 -0500
Subject: [PATCH 044/814] Reverted immutable element change (for now)

---
 src/devtools/store.js | 24 +++++++-----------------
 src/devtools/types.js |  4 ++--
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 42b3820e4d0d..6ef2c1673949 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -29,7 +29,7 @@ const debug = (methodName, ...args) => {
  */
 export default class Store extends EventEmitter {
   // Map of ID to Element.
-  // Elements are read-only so they wokr well with memoization.
+  // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
 
   // Total number of visible elements (within all roots).
@@ -283,11 +283,7 @@ export default class Store extends EventEmitter {
               // Maybe in the future we'll revisit this.
             } else {
               parentElement = ((this._idToElement.get(parentID): any): Element);
-
-              this._idToElement.set(parentID, {
-                ...parentElement,
-                children: parentElement.children.concat(id),
-              });
+              parentElement.children = parentElement.children.concat(id);
 
               const element: Element = {
                 children: [],
@@ -331,12 +327,9 @@ export default class Store extends EventEmitter {
             this._roots = this._roots.filter(rootID => rootID !== id);
             this._rootIDToRendererID.delete(id);
           } else {
-            this._idToElement.set(parentID, {
-              ...parentElement,
-              children: parentElement.children.filter(
-                childID => childID !== id
-              ),
-            });
+            parentElement.children = parentElement.children.filter(
+              childID => childID !== id
+            );
           }
 
           // Track removed items so search results can be updated
@@ -358,6 +351,7 @@ export default class Store extends EventEmitter {
           debug('Re-order', `fiber ${id} children ${children.join(',')}`);
 
           element = ((this._idToElement.get(id): any): Element);
+          element.children = Array.from(children);
 
           const prevWeight = element.weight;
           let childWeight = 0;
@@ -367,11 +361,7 @@ export default class Store extends EventEmitter {
             childWeight += child.weight;
           });
 
-          this._idToElement.set(id, {
-            ...element,
-            children: Array.from(children),
-            weight: childWeight + 1,
-          });
+          element.weight = childWeight + 1;
 
           weightDelta = childWeight + 1 - prevWeight;
           break;
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 53517834dc4c..59cddbfd108c 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -18,7 +18,7 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 // Some of its information (e.g. id, type, displayName) come from the backend.
 // Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
 // Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
-export type Element = $ReadOnly<{|
+export type Element = {|
   id: number,
   parentID: number,
   children: Array<number>,
@@ -37,7 +37,7 @@ export type Element = $ReadOnly<{|
   // This property is used to quickly determine the total number of Elements,
   // and the Element at any given index (for windowing purposes).
   weight: number,
-|}>;
+|};
 
 export type Owner = {|
   displayName: string,

From baa6142801fb76614b15808afcb7b420e6af6597 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 16:16:15 -0500
Subject: [PATCH 045/814] Removed non-functioning tree arrows (for now)

---
 src/devtools/views/Element.css | 12 ------------
 src/devtools/views/Element.js  | 18 ++----------------
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index d30d6d289a38..b9a909c9b8df 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -30,18 +30,6 @@
   color: var(--color-tree-jsx-arrow-brackets);
 }
 
-.ArrowClosed,
-.ArrowOpen {
-  position: absolute;
-  margin-left: -1rem;
-  width: 1rem;
-  height: 1rem;
-  color: var(--color-arrow);
-}
-.ArrowOpen {
-  transform: rotate(90deg);
-}
-
 .Component {
   color: var(--color-component-name);
 }
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index e7c9401dd554..086081bc63d7 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -4,7 +4,6 @@ import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeClassOrFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
-import Icon from './Icon';
 
 import type { Element } from '../types';
 
@@ -25,14 +24,7 @@ export default function ElementView({ index, style }: Props) {
   } = useContext(TreeContext);
 
   const element = getElementAtIndex(index);
-  const {
-    children,
-    depth,
-    displayName,
-    id,
-    key,
-    type,
-  } = ((element: any): Element);
+  const { depth, displayName, id, key, type } = ((element: any): Element);
 
   const handleDoubleClick = useCallback(() => selectOwner(id), [id]);
 
@@ -53,15 +45,9 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${1 + depth - baseDepth}rem`,
+        paddingLeft: `${depth - baseDepth}.25rem`,
       }}
     >
-      {children.length > 0 && (
-        <span className={styles.ArrowOpen}>
-          <Icon type="arrow" />
-        </span>
-      )}
-
       <span className={styles.Component}>
         <DisplayName displayName={displayName} id={id} />
         {key && (

From a6126c9e275edb1decdabdb93be7f69b35bc6606 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 18:48:29 -0500
Subject: [PATCH 046/814] Initial stab at 'View in DOM' button

---
 src/backend/agent.js                  |  37 ++++
 src/backend/renderer.js               |   4 +-
 src/backend/views/Highlighter.js      |  38 ++++
 src/backend/views/Overlay.js          | 298 ++++++++++++++++++++++++++
 src/devtools/views/SelectedElement.js |  16 ++
 5 files changed, 391 insertions(+), 2 deletions(-)
 create mode 100644 src/backend/views/Highlighter.js
 create mode 100644 src/backend/views/Overlay.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 056e817f0204..93af40578597 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -2,6 +2,7 @@
 
 import EventEmitter from 'events';
 import { __DEBUG__ } from '../constants';
+import { hideOverlay, showOverlay } from './views/Highlighter';
 
 import type { RendererID, RendererInterface } from './types';
 import type { Bridge } from '../types';
@@ -26,12 +27,48 @@ export default class Agent extends EventEmitter {
 
     bridge.addListener('shutdown', () => this.emit('shutdown'));
 
+    bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('selectElement', this.selectElement);
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
   }
 
+  highlightElementInDOM = ({
+    displayName,
+    id,
+    rendererID,
+  }: {
+    displayName: string,
+    id: number,
+    rendererID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    }
+
+    let node: HTMLElement | null = null;
+    if (
+      renderer !== null &&
+      typeof renderer.getNativeFromReactElement === 'function'
+    ) {
+      node = ((renderer.getNativeFromReactElement(id): any): HTMLElement);
+    }
+
+    if (node != null) {
+      if (typeof node.scrollIntoView === 'function') {
+        // If the node isn't visible show it before highlighting it.
+        // We may want to reconsider this; it might be a little disruptive.
+        node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+
+      showOverlay(((node: any): HTMLElement), displayName);
+    } else {
+      hideOverlay();
+    }
+  };
+
   inspectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8aa50d474a29..f61d3138b16f 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -816,9 +816,9 @@ export function attach(
 
   // The naming is confusing.
   // They deal with opaque nodes (fibers), not elements.
-  function getNativeFromReactElement(fiber) {
+  function getNativeFromReactElement(id: number) {
     try {
-      const primaryFiber = fiber;
+      const primaryFiber = getPrimaryFiber(idToFiberMap.get(id));
       const hostInstance = renderer.findHostInstanceByFiber(primaryFiber);
       return hostInstance;
     } catch (err) {
diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter.js
new file mode 100644
index 000000000000..fc98d4a134b1
--- /dev/null
+++ b/src/backend/views/Highlighter.js
@@ -0,0 +1,38 @@
+// @flow
+
+import Overlay from './Overlay';
+
+const SHOW_DURATION = 2000;
+
+let timeoutID: TimeoutID | null = null;
+let overlay: Overlay | null = null;
+
+export function hideOverlay() {
+  timeoutID = null;
+
+  if (overlay !== null) {
+    overlay.remove();
+    overlay = null;
+  }
+}
+
+export function showOverlay(
+  element: HTMLElement | null,
+  componentName: string = ''
+) {
+  if (timeoutID !== null) {
+    clearTimeout(timeoutID);
+  }
+
+  if (element == null) {
+    return;
+  }
+
+  if (overlay === null) {
+    overlay = new Overlay();
+  }
+
+  overlay.inspect(element, componentName);
+
+  timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+}
diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
new file mode 100644
index 000000000000..1ed017fb0f8e
--- /dev/null
+++ b/src/backend/views/Overlay.js
@@ -0,0 +1,298 @@
+// @flow
+
+import assign from 'object-assign';
+
+type Rect = {
+  bottom: number,
+  height: number,
+  left: number,
+  right: number,
+  top: number,
+  width: number,
+};
+
+// Note that this component is not affected by the active Theme,
+// because it highlights elements in the main Chrome window (outside of devtools).
+// The colors below were chosen to roughly match those used by Chrome devtools.
+export default class Overlay {
+  win: Object;
+  container: HTMLElement;
+  node: HTMLElement;
+  border: HTMLElement;
+  padding: HTMLElement;
+  content: HTMLElement;
+  tip: HTMLElement;
+  nameSpan: HTMLElement;
+  dimSpan: HTMLElement;
+
+  constructor() {
+    const doc = window.document;
+    this.win = window;
+    this.container = doc.createElement('div');
+    this.node = doc.createElement('div');
+    this.border = doc.createElement('div');
+    this.padding = doc.createElement('div');
+    this.content = doc.createElement('div');
+
+    this.border.style.borderColor = overlayStyles.border;
+    this.padding.style.borderColor = overlayStyles.padding;
+    this.content.style.backgroundColor = overlayStyles.background;
+
+    assign(this.node.style, {
+      borderColor: overlayStyles.margin,
+      pointerEvents: 'none',
+      position: 'fixed',
+    });
+
+    this.tip = doc.createElement('div');
+    assign(this.tip.style, {
+      backgroundColor: '#333740',
+      borderRadius: '2px',
+      fontFamily:
+        '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+      fontWeight: 'bold',
+      padding: '3px 5px',
+      position: 'fixed',
+      fontSize: '12px',
+    });
+
+    this.nameSpan = doc.createElement('span');
+    this.tip.appendChild(this.nameSpan);
+    assign(this.nameSpan.style, {
+      color: '#ee78e6',
+      borderRight: '1px solid #aaaaaa',
+      paddingRight: '0.5rem',
+      marginRight: '0.5rem',
+    });
+    this.dimSpan = doc.createElement('span');
+    this.tip.appendChild(this.dimSpan);
+    assign(this.dimSpan.style, {
+      color: '#d7d7d7',
+    });
+
+    this.container.style.zIndex = '10000000';
+    this.node.style.zIndex = '10000000';
+    this.tip.style.zIndex = '10000000';
+    this.container.appendChild(this.node);
+    this.container.appendChild(this.tip);
+    this.node.appendChild(this.border);
+    this.border.appendChild(this.padding);
+    this.padding.appendChild(this.content);
+    doc.body.appendChild(this.container);
+  }
+
+  remove() {
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+
+  inspect(node: HTMLElement, name?: ?string) {
+    // We can't get the size of text nodes or comment nodes. React as of v15
+    // heavily uses comment nodes to delimit text.
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const box = getNestedBoundingClientRect(node, this.win);
+    const dims = getElementDimensions(node);
+
+    boxWrap(dims, 'margin', this.node);
+    boxWrap(dims, 'border', this.border);
+    boxWrap(dims, 'padding', this.padding);
+
+    assign(this.content.style, {
+      height:
+        box.height -
+        dims.borderTop -
+        dims.borderBottom -
+        dims.paddingTop -
+        dims.paddingBottom +
+        'px',
+      width:
+        box.width -
+        dims.borderLeft -
+        dims.borderRight -
+        dims.paddingLeft -
+        dims.paddingRight +
+        'px',
+    });
+
+    assign(this.node.style, {
+      top: box.top - dims.marginTop + 'px',
+      left: box.left - dims.marginLeft + 'px',
+    });
+
+    this.nameSpan.textContent = name || node.nodeName.toLowerCase();
+    this.dimSpan.textContent =
+      Math.round(box.width) + 'px × ' + Math.round(box.height) + 'px';
+
+    const tipPos = findTipPos(
+      {
+        top: box.top - dims.marginTop,
+        left: box.left - dims.marginLeft,
+        height: box.height + dims.marginTop + dims.marginBottom,
+        width: box.width + dims.marginLeft + dims.marginRight,
+      },
+      this.win
+    );
+    assign(this.tip.style, tipPos);
+  }
+}
+
+function findTipPos(dims, win) {
+  const tipHeight = 20;
+  const margin = 5;
+  let top;
+  if (dims.top + dims.height + tipHeight <= win.innerHeight) {
+    if (dims.top + dims.height < 0) {
+      top = margin;
+    } else {
+      top = dims.top + dims.height + margin;
+    }
+  } else if (dims.top - tipHeight <= win.innerHeight) {
+    if (dims.top - tipHeight - margin < margin) {
+      top = margin;
+    } else {
+      top = dims.top - tipHeight - margin;
+    }
+  } else {
+    top = win.innerHeight - tipHeight - margin;
+  }
+
+  top += 'px';
+
+  if (dims.left < 0) {
+    return { top, left: margin };
+  }
+  if (dims.left + 200 > win.innerWidth) {
+    return { top, right: margin };
+  }
+  return { top, left: dims.left + margin + 'px' };
+}
+
+function getElementDimensions(domElement) {
+  const calculatedStyle = window.getComputedStyle(domElement);
+  return {
+    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
+    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
+    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
+    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
+    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
+    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
+    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
+    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
+    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
+    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
+    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
+    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
+  };
+}
+
+// Get the window object for the document that a node belongs to,
+// or return null if it cannot be found (node not attached to DOM,
+// etc).
+function getOwnerWindow(node: HTMLElement): typeof window | null {
+  if (!node.ownerDocument) {
+    return null;
+  }
+  return node.ownerDocument.defaultView;
+}
+
+// Get the iframe containing a node, or return null if it cannot
+// be found (node not within iframe, etc).
+function getOwnerIframe(node: HTMLElement): HTMLElement | null {
+  const nodeWindow = getOwnerWindow(node);
+  if (nodeWindow) {
+    return nodeWindow.frameElement;
+  }
+  return null;
+}
+
+// Get a bounding client rect for a node, with an
+// offset added to compensate for its border.
+function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
+  const dimensions = getElementDimensions(node);
+  return mergeRectOffsets([
+    node.getBoundingClientRect(),
+    {
+      top: dimensions.borderTop,
+      left: dimensions.borderLeft,
+      bottom: dimensions.borderBottom,
+      right: dimensions.borderRight,
+      // This width and height won't get used by mergeRectOffsets (since this
+      // is not the first rect in the array), but we set them so that this
+      // object typechecks as a ClientRect.
+      width: 0,
+      height: 0,
+    },
+  ]);
+}
+
+// Add together the top, left, bottom, and right properties of
+// each ClientRect, but keep the width and height of the first one.
+function mergeRectOffsets(rects: Array<Rect>): Rect {
+  return rects.reduce((previousRect, rect) => {
+    if (previousRect == null) {
+      return rect;
+    }
+
+    return {
+      top: previousRect.top + rect.top,
+      left: previousRect.left + rect.left,
+      width: previousRect.width,
+      height: previousRect.height,
+      bottom: previousRect.bottom + rect.bottom,
+      right: previousRect.right + rect.right,
+    };
+  });
+}
+
+// Calculate a boundingClientRect for a node relative to boundaryWindow,
+// taking into account any offsets caused by intermediate iframes.
+function getNestedBoundingClientRect(
+  node: HTMLElement,
+  boundaryWindow: typeof window
+): Rect {
+  const ownerIframe = getOwnerIframe(node);
+  if (ownerIframe && ownerIframe !== boundaryWindow) {
+    const rects = [node.getBoundingClientRect()];
+    let currentIframe = ownerIframe;
+    let onlyOneMore = false;
+    while (currentIframe) {
+      const rect = getBoundingClientRectWithBorderOffset(currentIframe);
+      rects.push(rect);
+      currentIframe = getOwnerIframe(currentIframe);
+
+      if (onlyOneMore) {
+        break;
+      }
+      // We don't want to calculate iframe offsets upwards beyond
+      // the iframe containing the boundaryWindow, but we
+      // need to calculate the offset relative to the boundaryWindow.
+      if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {
+        onlyOneMore = true;
+      }
+    }
+
+    return mergeRectOffsets(rects);
+  } else {
+    return node.getBoundingClientRect();
+  }
+}
+
+function boxWrap(dims, what, node) {
+  assign(node.style, {
+    borderTopWidth: dims[what + 'Top'] + 'px',
+    borderLeftWidth: dims[what + 'Left'] + 'px',
+    borderRightWidth: dims[what + 'Right'] + 'px',
+    borderBottomWidth: dims[what + 'Bottom'] + 'px',
+    borderStyle: 'solid',
+  });
+}
+
+const overlayStyles = {
+  background: 'rgba(120, 170, 210, 0.7)',
+  padding: 'rgba(77, 200, 0, 0.3)',
+  margin: 'rgba(255, 155, 0, 0.3)',
+  border: 'rgba(255, 200, 50, 0.3)',
+};
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index fb11fa0a16e4..6fb4b5ee72d9 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -22,12 +22,27 @@ export type Props = {||};
 
 export default function SelectedElement(_: Props) {
   const { selectedElementID } = useContext(TreeContext);
+  const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
   const inspectedElement = useInspectedElement(selectedElementID);
 
+  const handleClick = useCallback(() => {
+    if (element !== null && selectedElementID !== null) {
+      const rendererID =
+        store.getRendererIDForElement(selectedElementID) || null;
+      if (rendererID !== null) {
+        bridge.send('highlightElementInDOM', {
+          displayName: element.displayName,
+          id: selectedElementID,
+          rendererID,
+        });
+      }
+    }
+  }, [bridge, selectedElementID, store]);
+
   // TODO Make "view DOM" and "view source" buttons work
 
   if (element === null) {
@@ -51,6 +66,7 @@ export default function SelectedElement(_: Props) {
 
         <button
           className={styles.IconButton}
+          onClick={handleClick}
           title="Highlight this element in the page"
         >
           <ButtonIcon type="view-dom" />

From f3f497f40fff89e3554a95837ef3d56d16fc5499 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Feb 2019 20:27:10 -0500
Subject: [PATCH 047/814] Cleaned up CSS vars and reduced font size a bit

---
 src/devtools/views/Element.css         | 2 +-
 src/devtools/views/SelectedElement.css | 2 +-
 src/devtools/views/Tree.css            | 2 +-
 src/devtools/views/Tree.js             | 6 +++++-
 src/devtools/views/root.css            | 5 +++--
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index b9a909c9b8df..0c52b4f83e20 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -5,7 +5,7 @@
   cursor: pointer;
   position: relative;
   white-space: nowrap;
-  line-height: 20px;
+  line-height: var(--line-height-data);
   display: flex;
   align-items: center;
 }
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 0f96d3e2a30e..54611b8aa569 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -11,7 +11,7 @@
   flex: 0 0 42px;
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--font-size-large);
   border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index 5373266a5a7f..f43c12e7a2ca 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -10,7 +10,7 @@
   flex: 0 0 42px;
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--font-size-large);
   border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index d2c543277f6d..aaf151e17c06 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -79,6 +79,10 @@ export default function Tree(props: Props) {
     [baseDepth, numElements, getElementAtIndex]
   );
 
+  const itemSize = parseInt(
+    getComputedStyle(document.body).getPropertyValue('--line-height-data')
+  );
+
   return (
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
@@ -98,7 +102,7 @@ export default function Tree(props: Props) {
               height={height}
               itemCount={numElements}
               itemData={itemData}
-              itemSize={20}
+              itemSize={itemSize}
               ref={listRef}
               width={width}
             >
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 76400d25c271..0487da7b4744 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -45,8 +45,9 @@
   --color-tree-node-selected: var(--theme-light-tree-node-selected);
   --color-tree-node-hover: var(--theme-light-tree-node-hover);
 
-  --font-size-normal: 12px;
-  --line-height-data: 1.5rem;
+  --font-size-normal: 11px;
+  --font-size-large: 15px;
+  --line-height-data: 18px;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,

From 8e5a35b7629bdc7dbd219910f1bf679c922e798c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Feb 2019 09:45:00 -0500
Subject: [PATCH 048/814] Misc cleanup and prep for dark mode CSS

---
 src/devtools/views/ButtonIcon.css     |  1 -
 src/devtools/views/Elements.css       |  1 +
 src/devtools/views/Icon.js            | 15 ++++++++++++---
 src/devtools/views/SearchInput.css    | 12 ++++++++----
 src/devtools/views/SearchInput.js     |  2 ++
 src/devtools/views/SelectedElement.js |  7 ++++++-
 src/devtools/views/Tree.js            |  5 ++++-
 src/devtools/views/TreeContext.js     | 10 ++++++++--
 src/devtools/views/root.css           | 26 ++++++++++++++++++++++++--
 9 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.css b/src/devtools/views/ButtonIcon.css
index 85c6a98bb7af..b21c09482870 100644
--- a/src/devtools/views/ButtonIcon.css
+++ b/src/devtools/views/ButtonIcon.css
@@ -1,6 +1,5 @@
 .ButtonIcon {
   width: 1rem;
   height: 1rem;
-  margin: 0 0.25rem;
   fill: currentColor;
 }
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index b1814179a8e0..e3fbdd2a6d64 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   background-color: var(--color-background);
+  color: var(--color-text-color);
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
index c58aa0afde08..16868464b6a3 100644
--- a/src/devtools/views/Icon.js
+++ b/src/devtools/views/Icon.js
@@ -4,15 +4,19 @@ import React from 'react';
 import styles from './Icon.css';
 
 type Props = {|
-  type: 'arrow',
+  className?: string,
+  type: 'arrow' | 'search',
 |};
 
-export default function Icon({ type }: Props) {
+export default function Icon({ className = '', type }: Props) {
   let pathData = null;
   switch (type) {
     case 'arrow':
       pathData = PATH_ARROW;
       break;
+    case 'search':
+      pathData = PATH_SEARCH;
+      break;
     default:
       console.warn(`Unsupported type "${type}" specified for Icon`);
       break;
@@ -21,7 +25,7 @@ export default function Icon({ type }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.Icon}
+      className={`${styles.Icon} ${className}`}
       width="24"
       height="24"
       viewBox="0 0 24 24"
@@ -33,3 +37,8 @@ export default function Icon({ type }: Props) {
 }
 
 const PATH_ARROW = 'M8 5v14l11-7z';
+const PATH_SEARCH = `
+  M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91
+  16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99
+  5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z
+`;
diff --git a/src/devtools/views/SearchInput.css b/src/devtools/views/SearchInput.css
index 5aed02be78e6..b09da991e2ef 100644
--- a/src/devtools/views/SearchInput.css
+++ b/src/devtools/views/SearchInput.css
@@ -9,11 +9,15 @@
   font-size: 1rem;
   outline: none;
   border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: left center;
-  background-size: 16px 16px;
+  background-color: var(--color-background);
+  color: var(--color-text-color);
   padding-left: 1.5rem;
+  margin-left: -1rem;
+}
+
+.InputIcon {
+  pointer-events: none;
+  z-index: 2;
 }
 
 .IndexLabel {
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 5a16d1c3832b..43cb3165c10c 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -3,6 +3,7 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { TreeContext } from './TreeContext';
 import ButtonIcon from './ButtonIcon';
+import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
@@ -57,6 +58,7 @@ export default function SearchInput(props: Props) {
 
   return (
     <div className={styles.SearchInput}>
+      <Icon className={styles.InputIcon} type="search" />
       <input
         className={styles.Input}
         onKeyPress={handleInputKeyPress}
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 6fb4b5ee72d9..4da145fbdee0 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -98,6 +98,7 @@ type InspectedElementViewProps = {|
 
 function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
   let { context, hooks, owners, props, state } = inspectedElement;
+  const { ownerStack } = useContext(TreeContext);
 
   return (
     <div className={styles.InspectedElement}>
@@ -106,7 +107,7 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
       <HooksTree hooksTree={hooks} />
       <InspectedElementTree label="context" data={context} />
 
-      {owners !== null && owners.length > 0 && (
+      {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
           <div>owner stack</div>
           {owners.map(owner => (
@@ -182,10 +183,14 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
     const onInspectedElement = (inspectedElement: InspectedElement) => {
       if (inspectedElement && inspectedElement.id !== idRef.current) {
+        // TODO Is this sufficient? Will this leak?
         // Ignore bridge updates about previously selected elements.
         return;
       }
 
+      // TODO I think there's a bug here with stale state or a bad listener.
+      // "Cannot read property 'inspectElement' of undefined"
+
       if (inspectedElement !== null) {
         inspectedElement.context = hydrateHelper(inspectedElement.context);
         inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index aaf151e17c06..2326415ec7b2 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -80,7 +80,10 @@ export default function Tree(props: Props) {
   );
 
   const itemSize = parseInt(
-    getComputedStyle(document.body).getPropertyValue('--line-height-data')
+    getComputedStyle((document.body: any)).getPropertyValue(
+      '--line-height-data'
+    ),
+    10
   );
 
   return (
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index bc9232552cb6..c757980e9556 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -327,6 +327,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     _ownerFlatTree,
   } = state;
 
+  let prevSelectedElementIndex = selectedElementIndex;
+
   switch (type) {
     case 'HANDLE_STORE_MUTATION':
       if (ownerStack.length > 0) {
@@ -351,6 +353,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     case 'RESET_OWNER_STACK':
       ownerStack = [];
       ownerStackIndex = null;
+      selectedElementIndex = null;
       _ownerFlatTree = null;
       break;
     case 'SELECT_ELEMENT_AT_INDEX':
@@ -383,6 +386,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     case 'SELECT_OWNER':
       ownerStackIndex = ownerStack.indexOf(payload);
 
+      // Always force reset selection to be the top of the new owner tree.
+      selectedElementIndex = 0;
+      prevSelectedElementIndex = null;
+
       // If this owner is already in the current stack, just select it.
       // Otherwise, create a new stack.
       if (ownerStackIndex < 0) {
@@ -396,7 +403,6 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
           ): any): Element).ownerID;
         }
         ownerStackIndex = ownerStack.length - 1;
-        selectedElementIndex = 0;
 
         if (searchText !== '') {
           searchIndex = null;
@@ -435,7 +441,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   }
 
   // Keep selected item ID and index in sync.
-  if (selectedElementIndex !== state.selectedElementIndex) {
+  if (selectedElementIndex !== prevSelectedElementIndex) {
     if (selectedElementIndex === null) {
       selectedElementID = null;
     } else if (_ownerFlatTree !== null) {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 0487da7b4744..8e9b4fc97433 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -16,11 +16,32 @@
   --theme-light-jsx-arrow-brackets: #333333;
   --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --theme-light-search-match: yellow;
-  --theme-light-search-match-current: orange;
+  --theme-light-search-match-current: #f7923b;
+  --theme-light-text-color: #000000;
   --theme-light-tree-node-selected: #0088fa;
   --theme-light-tree-node-hover: #ebf1fb;
 
-  /* TODO Dark theme */
+  /* Dark theme */
+  --theme-dark-arrow: #777d88;
+  --theme-dark-arrow-inverted: #23272f;
+  --theme-dark-attribute-name: #9d87d2;
+  --theme-dark-attribute-value: #cedae0;
+  --theme-dark-background: #23272f;
+  --theme-dark-button: #4dbba6;
+  --theme-dark-button-hover: #80d4c4;
+  --theme-dark-color-border: #303846;
+  --theme-dark-component-name: #4dbba6;
+  --theme-dark-component-name-inverted: ##23272f;
+  --theme-dark-dim: #8f949d;
+  --theme-dark-dimmer: #777d88;
+  --theme-dark-dimmest: #4f5766;
+  --theme-dark-jsx-arrow-brackets: #777d88;
+  --theme-dark-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --theme-dark-search-match: yellow;
+  --theme-dark-search-match-current: #f7923b;
+  --theme-dark-text-color: #ffffff;
+  --theme-dark-tree-node-selected: #31a38d;
+  --theme-dark-tree-node-hover: #23272f;
 
   /* "theme" values referenced by other stylesheets */
   --color-arrow: var(--theme-light-arrow);
@@ -38,6 +59,7 @@
   --color-dimmest: var(--theme-light-dimmest);
   --color-search-match: var(--theme-light-search-match);
   --color-search-match-current: var(--theme-light-search-match-current);
+  --color-text-color: var(--theme-light-text-color);
   --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
   --color-tree-jsx-arrow-brackets-inverted: var(
     --theme-light-jsx-arrow-brackets-inverted

From d203ebf1655e9bbaa039ffc34855bbe3396dde35 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Feb 2019 20:41:39 -0500
Subject: [PATCH 049/814] Added new tabs UI and theme/display-density
 preferences

---
 package.json                            |   1 +
 shells/browser/shared/src/panel.js      |  13 +-
 shells/browser/shared/webpack.config.js |  17 ++-
 shells/dev/index.html                   |   1 -
 shells/dev/src/devtools.js              |   7 +-
 shells/dev/webpack.config.js            |  10 ++
 src/devtools/views/DevTools.js          |  64 +++++++++
 src/devtools/views/Elements.js          |  41 ++----
 src/devtools/views/Icon.js              |  22 +++-
 src/devtools/views/OwnersStack.css      |   2 +-
 src/devtools/views/Profiler.css         |  12 ++
 src/devtools/views/Profiler.js          |  11 ++
 src/devtools/views/ReactLogo.css        |   5 +
 src/devtools/views/ReactLogo.js         |  22 ++++
 src/devtools/views/SearchInput.css      |   4 +-
 src/devtools/views/SelectedElement.css  |   4 +-
 src/devtools/views/Settings.css         |  54 ++++++++
 src/devtools/views/Settings.js          |  93 +++++++++++++
 src/devtools/views/SettingsContext.js   | 166 ++++++++++++++++++++++++
 src/devtools/views/TabBar.css           |  51 ++++++++
 src/devtools/views/TabBar.js            |  71 ++++++++++
 src/devtools/views/Tree.css             |   3 +-
 src/devtools/views/hooks.js             |  43 ++++++
 src/devtools/views/root.css             |  46 +++----
 24 files changed, 684 insertions(+), 79 deletions(-)
 create mode 100644 src/devtools/views/DevTools.js
 create mode 100644 src/devtools/views/Profiler.css
 create mode 100644 src/devtools/views/Profiler.js
 create mode 100644 src/devtools/views/ReactLogo.css
 create mode 100644 src/devtools/views/ReactLogo.js
 create mode 100644 src/devtools/views/Settings.css
 create mode 100644 src/devtools/views/Settings.js
 create mode 100644 src/devtools/views/SettingsContext.js
 create mode 100644 src/devtools/views/TabBar.css
 create mode 100644 src/devtools/views/TabBar.js
 create mode 100644 src/devtools/views/hooks.js

diff --git a/package.json b/package.json
index 21434e9d8efb..585922882b70 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,5 @@
 {
+  "version": "4.0.0",
   "repository": "bvaughn/react-devtools-experimental",
   "license": "BSD-3-Clause",
   "private": true,
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index 19ef2fda4668..baf628f01ec8 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -3,7 +3,7 @@
 import { createElement } from 'react';
 import { createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
-import Elements from 'src/devtools/views/Elements';
+import DevTools from 'src/devtools/views/DevTools';
 import inject from './inject';
 
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
@@ -16,7 +16,7 @@ if (IS_CHROME) {
 
   // chrome.devtools.panels added in Chrome 18.
   // chrome.devtools.panels.themeName added in Chrome 54.
-  themeName = chrome.devtools.panels.themeName === 'dark' ? 'Dark' : 'Default';
+  themeName = chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
 } else {
   browserName = 'Firefox';
 
@@ -25,10 +25,10 @@ if (IS_CHROME) {
   if (chrome.devtools && chrome.devtools.panels) {
     switch (chrome.devtools.panels.themeName) {
       case 'dark':
-        themeName = 'Dark';
+        themeName = 'dark';
         break;
       default:
-        themeName = 'Light';
+        themeName = 'light';
         break;
     }
   }
@@ -63,10 +63,11 @@ function injectAndInit() {
 
   const root = createRoot(container);
   root.render(
-    createElement(Elements, {
+    createElement(DevTools, {
       bridge,
       browserName,
-      themeName,
+      browserTheme: themeName,
+      showTabBar: false,
     })
   );
 
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index b5984117ea87..44e3d5b5c28f 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -1,9 +1,13 @@
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
-const webpack = require('webpack');
+const { DefinePlugin } = require('webpack');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
+const DEVTOOLS_VERSION = JSON.parse(
+  readFileSync(resolve(__dirname, '../../../package.json'))
+).version;
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -24,12 +28,19 @@ module.exports = {
     },
   },
   plugins: __DEV__
-    ? []
+    ? [
+        new DefinePlugin({
+          'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+        }),
+      ]
     : [
         // Ensure we get production React
-        new webpack.DefinePlugin({
+        new DefinePlugin({
           'process.env.NODE_ENV': '"production"',
         }),
+        new DefinePlugin({
+          'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+        }),
       ],
   module: {
     rules: [
diff --git a/shells/dev/index.html b/shells/dev/index.html
index 021f696b7849..caef7119cccc 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -10,7 +10,6 @@
         border: none;
       }
       #devtools {
-        display: flex;
         height: 400px;
         max-height: 50%;
         overflow: hidden;
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 158fb3983b7a..579fde549437 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -6,7 +6,7 @@ import { createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
-import Elements from 'src/devtools/views/Elements';
+import DevTools from 'src/devtools/views/DevTools';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
@@ -56,10 +56,11 @@ inject('./build/App.js', () => {
       const root = createRoot(container);
       const batch = root.createBatch();
       batch.render(
-        createElement(Elements, {
+        createElement(DevTools, {
           bridge,
           browserName: 'Chrome',
-          themeName: 'light',
+          browserTheme: 'light',
+          showTabBar: true,
         })
       );
       batch.then(() => {
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 887375ce9dca..0629609f3bcf 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -1,5 +1,10 @@
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+
+const DEVTOOLS_VERSION = JSON.parse(
+  readFileSync(resolve(__dirname, '../../package.json'))
+).version;
 
 // TODO Share Webpack configs like alias
 
@@ -20,6 +25,11 @@ module.exports = {
       src: resolve(__dirname, '../../src'),
     },
   },
+  plugins: [
+    new DefinePlugin({
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+    }),
+  ],
   module: {
     rules: [
       {
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
new file mode 100644
index 000000000000..36de0d91e802
--- /dev/null
+++ b/src/devtools/views/DevTools.js
@@ -0,0 +1,64 @@
+// @flow
+
+import React, { useMemo, useState } from 'react';
+import Store from '../store';
+import { BridgeContext, StoreContext } from './context';
+import Elements from './Elements';
+import Profiler from './Profiler';
+import Settings from './Settings';
+import TabBar from './TabBar';
+import { SettingsContextController } from './SettingsContext';
+import { TreeContextController } from './TreeContext';
+
+import './root.css';
+
+import type { Bridge } from '../../types';
+
+export type TabID = 'elements' | 'profiler' | 'settings';
+export type BrowserTheme = 'dark' | 'light';
+
+export type Props = {|
+  bridge: Bridge,
+  browserName: string,
+  defaultTab?: TabID,
+  browserTheme: BrowserTheme,
+  showTabBar?: boolean,
+|};
+
+export default function DevTools({
+  bridge,
+  browserName,
+  defaultTab = 'elements',
+  browserTheme = 'light',
+  showTabBar = false,
+}: Props) {
+  const store = useMemo<Store>(() => new Store(bridge), []);
+  const [tab, setTab] = useState(defaultTab);
+
+  let tabElement;
+  switch (tab) {
+    case 'profiler':
+      tabElement = <Profiler />;
+      break;
+    case 'settings':
+      tabElement = <Settings />;
+      break;
+    case 'elements':
+    default:
+      tabElement = <Elements />;
+      break;
+  }
+
+  return (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <SettingsContextController browserTheme={browserTheme}>
+          <TreeContextController>
+            {showTabBar && <TabBar currentTab={tab} selectTab={setTab} />}
+            {tabElement}
+          </TreeContextController>
+        </SettingsContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+}
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index b79f12cc36ef..cb401ddfdba9 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -1,41 +1,22 @@
 // @flow
 
-import React, { useMemo } from 'react';
-import Store from '../store';
+import React from 'react';
 import Tree from './Tree';
-import { BridgeContext, StoreContext } from './context';
 import SelectedElement from './SelectedElement';
-import { TreeContextController } from './TreeContext';
 import styles from './Elements.css';
 
-import './root.css';
-
-import type { Bridge } from '../../types';
-
-export type Props = {|
-  bridge: Bridge,
-  browserName: string,
-  themeName: string,
-|};
-
-export default function Elements({ bridge, browserName, themeName }: Props) {
-  const store = useMemo<Store>(() => new Store(bridge), []);
+export type Props = {||};
 
+export default function Elements(_: Props) {
   // TODO Flex wrappers below should be user resizable.
   return (
-    <BridgeContext.Provider value={bridge}>
-      <StoreContext.Provider value={store}>
-        <TreeContextController>
-          <div className={styles.Elements}>
-            <div className={styles.TreeWrapper}>
-              <Tree />
-            </div>
-            <div className={styles.SelectedElementWrapper}>
-              <SelectedElement />
-            </div>
-          </div>
-        </TreeContextController>
-      </StoreContext.Provider>
-    </BridgeContext.Provider>
+    <div className={styles.Elements}>
+      <div className={styles.TreeWrapper}>
+        <Tree />
+      </div>
+      <div className={styles.SelectedElementWrapper}>
+        <SelectedElement />
+      </div>
+    </div>
   );
 }
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
index 16868464b6a3..e7b6a3d21131 100644
--- a/src/devtools/views/Icon.js
+++ b/src/devtools/views/Icon.js
@@ -5,7 +5,7 @@ import styles from './Icon.css';
 
 type Props = {|
   className?: string,
-  type: 'arrow' | 'search',
+  type: 'arrow' | 'elements' | 'profiler' | 'search' | 'settings',
 |};
 
 export default function Icon({ className = '', type }: Props) {
@@ -14,9 +14,18 @@ export default function Icon({ className = '', type }: Props) {
     case 'arrow':
       pathData = PATH_ARROW;
       break;
+    case 'elements':
+      pathData = PATH_ELEMENTS;
+      break;
+    case 'profiler':
+      pathData = PATH_PROFILER;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
+    case 'settings':
+      pathData = PATH_SETTINGS;
+      break;
     default:
       console.warn(`Unsupported type "${type}" specified for Icon`);
       break;
@@ -37,8 +46,19 @@ export default function Icon({ className = '', type }: Props) {
 }
 
 const PATH_ARROW = 'M8 5v14l11-7z';
+const PATH_ELEMENTS =
+  'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';
+const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
 const PATH_SEARCH = `
   M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91
   16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99
   5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z
 `;
+const PATH_SETTINGS = `
+  M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
+  2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
+  0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
+  1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
+  1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
+  .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
+`;
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
index 5b00134f0cb0..28ac5ae85896 100644
--- a/src/devtools/views/OwnersStack.css
+++ b/src/devtools/views/OwnersStack.css
@@ -29,7 +29,7 @@
   margin-right: 0.5rem;
   color: var(--color-component-name);
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-normal);
+  font-size: var(--font-size-monospace-normal);
   white-space: nowrap;
   border-radius: 0.125rem;
 }
diff --git a/src/devtools/views/Profiler.css b/src/devtools/views/Profiler.css
new file mode 100644
index 000000000000..440c241c0379
--- /dev/null
+++ b/src/devtools/views/Profiler.css
@@ -0,0 +1,12 @@
+.Profiler {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+  background-color: var(--color-background);
+  color: var(--color-text-color);
+}
diff --git a/src/devtools/views/Profiler.js b/src/devtools/views/Profiler.js
new file mode 100644
index 000000000000..bd89d54cbbab
--- /dev/null
+++ b/src/devtools/views/Profiler.js
@@ -0,0 +1,11 @@
+// @flow
+
+import React from 'react';
+
+import styles from './Profiler.css';
+
+export type Props = {||};
+
+export default function Profiler(_: Props) {
+  return <div className={styles.Profiler}>Under development...</div>;
+}
diff --git a/src/devtools/views/ReactLogo.css b/src/devtools/views/ReactLogo.css
new file mode 100644
index 000000000000..407562437c0e
--- /dev/null
+++ b/src/devtools/views/ReactLogo.css
@@ -0,0 +1,5 @@
+.ReactLogo {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: 0 0.75rem 0 0.25rem;
+}
diff --git a/src/devtools/views/ReactLogo.js b/src/devtools/views/ReactLogo.js
new file mode 100644
index 000000000000..d7f33639c7d8
--- /dev/null
+++ b/src/devtools/views/ReactLogo.js
@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+
+import styles from './ReactLogo.css';
+
+export default function ReactLogo() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.ReactLogo}
+      viewBox="-11.5 -10.23174 23 20.46348"
+    >
+      <circle cx="0" cy="0" r="2.05" fill="currentColor" />
+      <g stroke="currentColor" strokeWidth="1" fill="none">
+        <ellipse rx="11" ry="4.2" />
+        <ellipse rx="11" ry="4.2" transform="rotate(60)" />
+        <ellipse rx="11" ry="4.2" transform="rotate(120)" />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/devtools/views/SearchInput.css b/src/devtools/views/SearchInput.css
index b09da991e2ef..053e70c5ccb0 100644
--- a/src/devtools/views/SearchInput.css
+++ b/src/devtools/views/SearchInput.css
@@ -6,7 +6,7 @@
 
 .Input {
   flex: 1;
-  font-size: 1rem;
+  font-size: var(--font-size-sans-large);
   outline: none;
   border: none;
   background-color: var(--color-background);
@@ -22,7 +22,7 @@
 
 .IndexLabel {
   color: var(--color-dim);
-  font-size: var(--font-size-normal);
+  font-size: var(--font-size-sans-normal);
 }
 
 .IconButton {
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 54611b8aa569..4b9ee9775298 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -11,7 +11,7 @@
   flex: 0 0 42px;
   display: flex;
   align-items: center;
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-monospace-large);
   border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
@@ -67,7 +67,7 @@
 .InspectedElement {
   overflow: auto;
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-normal);
+  font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
 
diff --git a/src/devtools/views/Settings.css b/src/devtools/views/Settings.css
new file mode 100644
index 000000000000..cb493a402a87
--- /dev/null
+++ b/src/devtools/views/Settings.css
@@ -0,0 +1,54 @@
+.Settings {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+  background-color: var(--color-background);
+  color: var(--color-text-color);
+}
+
+.Section {
+  display: flex;
+  flex-direction: column;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.Header {
+  margin-bottom: 0.5rem;
+  font-size: var(--font-size-sans-large);
+}
+
+.OptionGroup {
+  display: flex;
+  flex-direction: row;
+  user-select: none;
+}
+
+.Option {
+  cursor: pointer;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-right: none;
+}
+
+.Option:hover {
+  background-color: var(--color-tree-node-hover);
+}
+
+.Option:first-of-type {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.Option:last-of-type {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  border-right: 1px solid var(--color-border);
+}
diff --git a/src/devtools/views/Settings.js b/src/devtools/views/Settings.js
new file mode 100644
index 000000000000..37e4dd9198bf
--- /dev/null
+++ b/src/devtools/views/Settings.js
@@ -0,0 +1,93 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import { SettingsContext } from './SettingsContext';
+
+import styles from './Settings.css';
+
+export type Props = {||};
+
+export default function Settings(_: Props) {
+  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
+    SettingsContext
+  );
+
+  const updateDisplayDensity = useCallback(
+    ({ currentTarget }) => {
+      setDisplayDensity(currentTarget.value);
+    },
+    [setDisplayDensity]
+  );
+
+  const updateTheme = useCallback(
+    ({ currentTarget }) => {
+      setTheme(currentTarget.value);
+    },
+    [setTheme]
+  );
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Section}>
+        <div className={styles.Header}>Theme</div>
+        <div className={styles.OptionGroup}>
+          <label className={styles.Option}>
+            <input
+              type="radio"
+              name="Settings-Settings-theme"
+              checked={theme === 'auto'}
+              value="auto"
+              onChange={updateTheme}
+            />{' '}
+            Auto
+          </label>
+          <label className={styles.Option}>
+            <input
+              type="radio"
+              name="Settings-theme"
+              checked={theme === 'light'}
+              value="light"
+              onChange={updateTheme}
+            />{' '}
+            Light
+          </label>
+          <label className={styles.Option}>
+            <input
+              type="radio"
+              name="Settings-theme"
+              checked={theme === 'dark'}
+              value="dark"
+              onChange={updateTheme}
+            />{' '}
+            Dark
+          </label>
+        </div>
+      </div>
+      <div className={styles.Section}>
+        <div className={styles.Header}>Display density</div>
+        <div className={styles.OptionGroup}>
+          <label className={styles.Option}>
+            <input
+              type="radio"
+              name="Settings-displayDensity"
+              checked={displayDensity === 'compact'}
+              value="compact"
+              onChange={updateDisplayDensity}
+            />{' '}
+            Compact
+          </label>
+          <label className={styles.Option}>
+            <input
+              type="radio"
+              name="Settings-displayDensity"
+              checked={displayDensity === 'comfortable'}
+              value="comfortable"
+              onChange={updateDisplayDensity}
+            />{' '}
+            Comfortable
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
new file mode 100644
index 000000000000..3929ffa41e58
--- /dev/null
+++ b/src/devtools/views/SettingsContext.js
@@ -0,0 +1,166 @@
+// @flow
+
+import React, { createContext, useLayoutEffect, useMemo } from 'react';
+import { useLocalStorage } from './hooks';
+
+import type { BrowserTheme } from './DevTools';
+
+export type DisplayDensity = 'compact' | 'comfortable';
+export type Theme = 'auto' | 'light' | 'dark';
+
+type Context = {|
+  displayDensity: DisplayDensity,
+  setDisplayDensity(value: DisplayDensity): void,
+  theme: Theme,
+  setTheme(value: Theme): void,
+|};
+
+const SettingsContext = createContext<Context>(((null: any): Context));
+// $FlowFixMe displayName is a valid attribute of React$ConsearchText
+SettingsContext.displayName = 'SettingsContext';
+
+type Props = {|
+  browserTheme: BrowserTheme,
+  children: React$Node,
+|};
+
+function SettingsContextController({ browserTheme, children }: Props) {
+  const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
+    'displayDensity',
+    'compact'
+  );
+  const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
+
+  useLayoutEffect(() => {
+    switch (displayDensity) {
+      case 'compact':
+        updateDisplayDensity('compact');
+        break;
+      case 'comfortable':
+        updateDisplayDensity('comfortable');
+        break;
+      default:
+        throw Error(`Unsupported displayDensity value "${displayDensity}"`);
+    }
+  }, [displayDensity]);
+
+  useLayoutEffect(() => {
+    switch (theme) {
+      case 'light':
+        updateThemeVariables('light');
+        break;
+      case 'dark':
+        updateThemeVariables('dark');
+        break;
+      case 'auto':
+        updateThemeVariables(browserTheme);
+        break;
+      default:
+        throw Error(`Unsupported theme value "${theme}"`);
+    }
+  }, [theme]);
+
+  const value = useMemo(
+    () => ({
+      displayDensity,
+      setDisplayDensity,
+      theme,
+      setTheme,
+    }),
+    [displayDensity, setDisplayDensity, theme, setTheme]
+  );
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+function setStyleVariable(name: string, value: string) {
+  (document.documentElement: any).style.setProperty(name, value);
+}
+
+function updateDisplayDensity(displayDensity: DisplayDensity): void {
+  setStyleVariable(
+    '--font-size-monospace-normal',
+    `var(--${displayDensity}-font-size-monospace-normal)`
+  );
+  setStyleVariable(
+    '--font-size-monospace-large',
+    `var(--${displayDensity}-font-size-monospace-large)`
+  );
+  setStyleVariable(
+    '--font-size-sans-normal',
+    `var(--${displayDensity}-font-size-sans-normal)`
+  );
+  setStyleVariable(
+    '--font-size-sans-large',
+    `var(--${displayDensity}-font-size-sans-large)`
+  );
+  setStyleVariable(
+    '--line-height-data',
+    `var(--${displayDensity}-line-height-data)`
+  );
+}
+
+function updateThemeVariables(theme: Theme): void {
+  setStyleVariable('--color-arrow', `var(--theme-${theme}-arrow)`);
+  setStyleVariable(
+    '--color-arrow-inverted',
+    `var(--theme-${theme}-arrow-inverted)`
+  );
+  setStyleVariable(
+    '--color-attribute-name',
+    `var(--theme-${theme}-attribute-name)`
+  );
+  setStyleVariable(
+    '--color-attribute-value',
+    `var(--theme-${theme}-attribute-value)`
+  );
+  setStyleVariable('--color-background', `var(--theme-${theme}-background)`);
+  setStyleVariable('--color-border', `var(--theme-${theme}-color-border)`);
+  setStyleVariable('--color-button', `var(--theme-${theme}-button)`);
+  setStyleVariable(
+    '--color-button-hover',
+    `var(--theme-${theme}-button-hover)`
+  );
+  setStyleVariable(
+    '--color-component-name',
+    `var(--theme-${theme}-component-name)`
+  );
+  setStyleVariable(
+    '--color-component-name-inverted',
+    `var(--theme-${theme}-component-name-inverted)`
+  );
+  setStyleVariable('--color-dim', `var(--theme-${theme}-dim)`);
+  setStyleVariable('--color-dimmer', `var(--theme-${theme}-dimmer)`);
+  setStyleVariable('--color-dimmest', `var(--theme-${theme}-dimmest)`);
+  setStyleVariable(
+    '--color-search-match',
+    `var(--theme-${theme}-search-match)`
+  );
+  setStyleVariable(
+    '--color-search-match-current',
+    `var(--theme-${theme}-search-match-current)`
+  );
+  setStyleVariable('--color-text-color', `var(--theme-${theme}-text-color)`);
+  setStyleVariable(
+    '--color-tree-jsx-arrow-brackets',
+    `var(--theme-${theme}-jsx-arrow-brackets)`
+  );
+  setStyleVariable(
+    '--color-tree-jsx-arrow-brackets-inverted',
+    `var(--theme-${theme}-jsx-arrow-brackets-inverted)`
+  );
+  setStyleVariable(
+    '--color-tree-node-selected',
+    `var(--theme-${theme}-tree-node-selected)`
+  );
+  setStyleVariable(
+    '--color-tree-node-hover',
+    `var(--theme-${theme}-tree-node-hover)`
+  );
+}
+
+export { SettingsContext, SettingsContextController };
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
new file mode 100644
index 000000000000..6c9ab7b6d40a
--- /dev/null
+++ b/src/devtools/views/TabBar.css
@@ -0,0 +1,51 @@
+.TabBar {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  background-color: var(--color-background);
+  color: var(--color-tree-node-selected);
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-large);
+}
+
+.Tabs {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  overflow-x: auto;
+}
+
+.TabCurrent,
+.Tab {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  user-select: none;
+}
+.TabCurrent:hover,
+.Tab:hover {
+  background-color: var(--color-tree-node-hover);
+}
+
+.TabCurrent {
+  border-bottom: 3px solid var(--color-tree-node-selected);
+}
+
+.Input {
+  width: 0;
+  margin: 0;
+  opacity: 0;
+}
+
+.Icon {
+  margin-right: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
new file mode 100644
index 000000000000..6819cb553c64
--- /dev/null
+++ b/src/devtools/views/TabBar.js
@@ -0,0 +1,71 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import Icon from './Icon';
+import ReactLogo from './ReactLogo';
+
+import styles from './TabBar.css';
+
+import type { TabID } from './DevTools';
+
+export type Props = {|
+  currentTab: TabID,
+  selectTab: (tabID: TabID) => void,
+|};
+
+export default function TabBar({ currentTab, selectTab }: Props) {
+  const onChange = useCallback(
+    ({ currentTarget }) => selectTab(currentTarget.value),
+    [selectTab]
+  );
+
+  return (
+    <div className={styles.TabBar}>
+      <ReactLogo /> DevTools {process.env.DEVTOOLS_VERSION}
+      <div className={styles.Tabs}>
+        <label
+          className={currentTab === 'elements' ? styles.TabCurrent : styles.Tab}
+        >
+          <input
+            type="radio"
+            name="TabBar-tab"
+            className={styles.Input}
+            checked={currentTab === 'elements'}
+            value="elements"
+            onChange={onChange}
+          />
+          <Icon className={styles.Icon} type="elements" />
+          Elements
+        </label>
+        <label
+          className={currentTab === 'profiler' ? styles.TabCurrent : styles.Tab}
+        >
+          <input
+            type="radio"
+            name="TabBar-tab"
+            className={styles.Input}
+            checked={currentTab === 'profiler'}
+            value="profiler"
+            onChange={onChange}
+          />
+          <Icon className={styles.Icon} type="profiler" />
+          Profiler
+        </label>
+        <label
+          className={currentTab === 'settings' ? styles.TabCurrent : styles.Tab}
+        >
+          <input
+            type="radio"
+            name="TabBar-tab"
+            className={styles.Input}
+            checked={currentTab === 'settings'}
+            value="settings"
+            onChange={onChange}
+          />
+          <Icon className={styles.Icon} type="settings" />
+          Settings
+        </label>
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index f43c12e7a2ca..fab177f808fe 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -10,7 +10,6 @@
   flex: 0 0 42px;
   display: flex;
   align-items: center;
-  font-size: var(--font-size-large);
   border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
@@ -24,7 +23,7 @@
 
 .List {
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-normal);
+  font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
 
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
new file mode 100644
index 000000000000..0e1891486306
--- /dev/null
+++ b/src/devtools/views/hooks.js
@@ -0,0 +1,43 @@
+// @flow
+
+import { useState } from 'react';
+
+// https://usehooks.com/useLocalStorage/
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | (() => T)) => void] {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = value => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 8e9b4fc97433..1df9ed50ff52 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -1,4 +1,8 @@
 :root {
+  /**
+   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
+   */
+
   /* Light theme */
   --theme-light-arrow: #777d88;
   --theme-light-arrow-inverted: #ffffff;
@@ -6,7 +10,7 @@
   --theme-light-attribute-value: #1a1aa6;
   --theme-light-background: #ffffff;
   --theme-light-button: #0088fa;
-  --theme-light-button-hover: #1a1aa6;
+  --theme-light-button-hover: #3578e5;
   --theme-light-color-border: #eeeeee;
   --theme-light-component-name: #8155cb;
   --theme-light-component-name-inverted: #ffffff;
@@ -41,35 +45,21 @@
   --theme-dark-search-match-current: #f7923b;
   --theme-dark-text-color: #ffffff;
   --theme-dark-tree-node-selected: #31a38d;
-  --theme-dark-tree-node-hover: #23272f;
+  --theme-dark-tree-node-hover: #303846;
 
-  /* "theme" values referenced by other stylesheets */
-  --color-arrow: var(--theme-light-arrow);
-  --color-arrow-inverted: var(--theme-light-arrow-inverted);
-  --color-attribute-name: var(--theme-light-attribute-name);
-  --color-attribute-value: var(--theme-light-attribute-value);
-  --color-background: var(--theme-light-background);
-  --color-border: var(--theme-light-color-border);
-  --color-button: var(--theme-light-button);
-  --color-button-hover: var(--theme-light-button-hover);
-  --color-component-name: var(--theme-light-component-name);
-  --color-component-name-inverted: var(--theme-light-component-name-inverted);
-  --color-dim: var(--theme-light-dim);
-  --color-dimmer: var(--theme-light-dimmer);
-  --color-dimmest: var(--theme-light-dimmest);
-  --color-search-match: var(--theme-light-search-match);
-  --color-search-match-current: var(--theme-light-search-match-current);
-  --color-text-color: var(--theme-light-text-color);
-  --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
-  --color-tree-jsx-arrow-brackets-inverted: var(
-    --theme-light-jsx-arrow-brackets-inverted
-  );
-  --color-tree-node-selected: var(--theme-light-tree-node-selected);
-  --color-tree-node-hover: var(--theme-light-tree-node-hover);
+  /* Compact density */
+  --compact-font-size-monospace-normal: 11px;
+  --compact-font-size-monospace-large: 15px;
+  --compact-font-size-sans-normal: 12px;
+  --compact-font-size-sans-large: 14px;
+  --compact-line-height-data: 18px;
 
-  --font-size-normal: 11px;
-  --font-size-large: 15px;
-  --line-height-data: 18px;
+  /* Comfortable density */
+  --comfortable-font-size-monospace-normal: 13px;
+  --comfortable-font-size-monospace-large: 17px;
+  --comfortable-font-size-sans-normal: 14px;
+  --comfortable-font-size-sans-large: 16px;
+  --comfortable-line-height-data: 22px;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,

From 95b859209f846857555798d5e17cc48ef643db41 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Feb 2019 21:09:33 -0500
Subject: [PATCH 050/814] Fixed NaN warning for pre-mount CSS prop read

---
 src/devtools/views/Tree.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 2326415ec7b2..a696c815ddfc 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -79,12 +79,13 @@ export default function Tree(props: Props) {
     [baseDepth, numElements, getElementAtIndex]
   );
 
-  const itemSize = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--line-height-data'
-    ),
-    10
-  );
+  const itemSize =
+    parseInt(
+      getComputedStyle((document.body: any)).getPropertyValue(
+        '--line-height-data'
+      ),
+      10
+    ) || 18;
 
   return (
     <div className={styles.Tree}>

From aed1713154c11253ea5b896b459f2f720a246123 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Feb 2019 21:09:50 -0500
Subject: [PATCH 051/814] Added NOW config file for dev shell

---
 shells/dev/now.json        | 5 +++++
 shells/dev/src/devtools.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 shells/dev/now.json

diff --git a/shells/dev/now.json b/shells/dev/now.json
new file mode 100644
index 000000000000..1ba53f408cbc
--- /dev/null
+++ b/shells/dev/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental",
+  "alias": ["react-devtools-experimental"],
+  "files": ["index.html", "build"]
+}
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 579fde549437..d1a62aede636 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -37,7 +37,7 @@ mountButton.addEventListener('click', function() {
   }
 });
 
-inject('./build/App.js', () => {
+inject('./build/app.js', () => {
   initDevTools({
     connect(cb) {
       const bridge = new Bridge({

From 4ea81337f382a75226d619b1d8eca98f4010dd7b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Feb 2019 10:59:49 -0500
Subject: [PATCH 052/814] Initial pass at adding Settings panel to browser
 extension

---
 shells/browser/chrome/manifest.json     |  7 +++-
 shells/browser/firefox/manifest.json    |  7 +++-
 shells/browser/shared/build.js          |  8 ++++-
 shells/browser/shared/settings.html     | 32 +++++++++++++++++
 shells/browser/shared/src/main.js       | 12 +++++--
 shells/browser/shared/src/panel.js      | 34 +++---------------
 shells/browser/shared/src/settings.js   | 48 +++++++++++++++++++++++++
 shells/browser/shared/src/utils.js      | 26 ++++++++++++++
 shells/browser/shared/webpack.config.js |  1 +
 src/devtools/views/DevTools.css         | 17 +++++++++
 src/devtools/views/DevTools.js          | 17 ++++++---
 src/devtools/views/Element.js           |  6 ++++
 src/devtools/views/hooks.js             | 37 +++++++++++--------
 13 files changed, 197 insertions(+), 55 deletions(-)
 create mode 100644 shells/browser/shared/settings.html
 create mode 100644 shells/browser/shared/src/settings.js
 create mode 100644 shells/browser/shared/src/utils.js
 create mode 100644 src/devtools/views/DevTools.css

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index c22e4b38490c..5b06474126fa 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -27,7 +27,12 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "settings.html",
+    "build/backend.js"
+  ],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index e0015a59ff7a..824aa005202e 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -33,7 +33,12 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "settings.html",
+    "build/backend.js"
+  ],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 5f6747af5481..dd57af36ac62 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -7,7 +7,13 @@ const { join } = require('path');
 
 // These files are copied along with Webpack-bundled files
 // to produce the final web extension
-const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
+const STATIC_FILES = [
+  'icons',
+  'popups',
+  'main.html',
+  'panel.html',
+  'settings.html',
+];
 
 const preProcess = async (destinationPath, tempPath) => {
   await remove(destinationPath); // Clean up from previously completed builds
diff --git a/shells/browser/shared/settings.html b/shells/browser/shared/settings.html
new file mode 100644
index 000000000000..16beaccceaca
--- /dev/null
+++ b/shells/browser/shared/settings.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html style="display: flex">
+    <head>
+        <meta charset="utf8">
+        <style>
+            html {
+                display: flex;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                flex: 1;
+                display: flex;
+            }
+            #container {
+                display: flex;
+                flex: 1;
+                width: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">Unable to find React on the page.</div>
+        <script src="./build/settings.js"></script>
+    </body>
+</html>
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index b3aa318381a7..7c16bf3a24e7 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -6,6 +6,7 @@ function createPanelIfReactLoaded() {
   if (panelCreated) {
     return;
   }
+
   chrome.devtools.inspectedWindow.eval(
     'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
     function(pageHasReact, err) {
@@ -15,9 +16,7 @@ function createPanelIfReactLoaded() {
 
       clearInterval(loadCheckInterval);
       panelCreated = true;
-      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', function(
-        panel
-      ) {
+      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
         panel.onShown.addListener(function(window) {
           // TODO: When the user switches to the panel, check for an Elements tab selection.
         });
@@ -25,6 +24,13 @@ function createPanelIfReactLoaded() {
           // TODO: Stop highlighting and stuff.
         });
       });
+
+      chrome.devtools.panels.create(
+        '⚛ Settings',
+        '',
+        'settings.html',
+        panel => {}
+      );
     }
   );
 }
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index baf628f01ec8..56780efe6790 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -5,34 +5,7 @@ import { createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import DevTools from 'src/devtools/views/DevTools';
 import inject from './inject';
-
-const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
-
-let browserName;
-let themeName;
-
-if (IS_CHROME) {
-  browserName = 'Chrome';
-
-  // chrome.devtools.panels added in Chrome 18.
-  // chrome.devtools.panels.themeName added in Chrome 54.
-  themeName = chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
-} else {
-  browserName = 'Firefox';
-
-  // chrome.devtools.panels.themeName added in Firefox 55.
-  // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/themeName
-  if (chrome.devtools && chrome.devtools.panels) {
-    switch (chrome.devtools.panels.themeName) {
-      case 'dark':
-        themeName = 'dark';
-        break;
-      default:
-        themeName = 'light';
-        break;
-    }
-  }
-}
+import { getBrowserName, getBrowserTheme } from './utils';
 
 const container = ((document.getElementById('container'): any): HTMLElement);
 
@@ -65,8 +38,9 @@ function injectAndInit() {
   root.render(
     createElement(DevTools, {
       bridge,
-      browserName,
-      browserTheme: themeName,
+      browserName: getBrowserName(),
+      browserTheme: getBrowserTheme(),
+      defaultTab: 'elements',
       showTabBar: false,
     })
   );
diff --git a/shells/browser/shared/src/settings.js b/shells/browser/shared/src/settings.js
new file mode 100644
index 000000000000..d51dba755dc2
--- /dev/null
+++ b/shells/browser/shared/src/settings.js
@@ -0,0 +1,48 @@
+/* global chrome */
+
+import { createElement } from 'react';
+import { createRoot, flushSync } from 'react-dom';
+import Bridge from 'src/bridge';
+import DevTools from 'src/devtools/views/DevTools';
+import inject from './inject';
+import { getBrowserName, getBrowserTheme } from './utils';
+
+const container = ((document.getElementById('container'): any): HTMLElement);
+
+function injectAndInit() {
+  // Noop Bridge for the Settings panel
+  const bridge = new Bridge({
+    listen(fn) {},
+    send(event: string, payload: any, transferable?: Array<any>) {},
+  });
+
+  // Clear the "React not found" initial message before rendering.
+  container.innerHTML = '';
+
+  const root = createRoot(container);
+  root.render(
+    createElement(DevTools, {
+      bridge,
+      browserName: getBrowserName(),
+      browserTheme: getBrowserTheme(),
+      defaultTab: 'settings',
+      showTabBar: false,
+    })
+  );
+
+  // Initialize the backend only once the DevTools frontend Store has been initialized.
+  // Otherwise the Store may miss important initial tree op codes.
+  inject(chrome.runtime.getURL('build/backend.js'));
+
+  // Reload the DevTools extension when the user navigates to a new page.
+  function onNavigated() {
+    chrome.devtools.network.onNavigated.removeListener(onNavigated);
+
+    bridge.send('shutdown');
+
+    flushSync(() => root.unmount(injectAndInit));
+  }
+  chrome.devtools.network.onNavigated.addListener(onNavigated);
+}
+
+injectAndInit();
diff --git a/shells/browser/shared/src/utils.js b/shells/browser/shared/src/utils.js
new file mode 100644
index 000000000000..7f4c2eaa068b
--- /dev/null
+++ b/shells/browser/shared/src/utils.js
@@ -0,0 +1,26 @@
+/* global chrome */
+
+const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
+
+export function getBrowserName() {
+  return IS_CHROME ? 'Chrome' : 'Firefox';
+}
+
+export function getBrowserTheme() {
+  if (IS_CHROME) {
+    // chrome.devtools.panels added in Chrome 18.
+    // chrome.devtools.panels.themeName added in Chrome 54.
+    return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
+  } else {
+    // chrome.devtools.panels.themeName added in Firefox 55.
+    // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/themeName
+    if (chrome.devtools && chrome.devtools.panels) {
+      switch (chrome.devtools.panels.themeName) {
+        case 'dark':
+          return 'dark';
+        default:
+          return 'light';
+      }
+    }
+  }
+}
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 44e3d5b5c28f..372889ab4b8a 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -17,6 +17,7 @@ module.exports = {
     inject: './src/GlobalHook.js',
     main: './src/main.js',
     panel: './src/panel.js',
+    settings: './src/settings.js',
   },
   output: {
     path: __dirname + '/build',
diff --git a/src/devtools/views/DevTools.css b/src/devtools/views/DevTools.css
new file mode 100644
index 000000000000..953bc9bc1f57
--- /dev/null
+++ b/src/devtools/views/DevTools.css
@@ -0,0 +1,17 @@
+.DevTools {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  color: var(--color-text-color);
+}
+
+.TabBar {
+  flex: 0 0 auto;
+}
+
+.TabContent {
+  flex: 1 1 100%;
+  overflow: auto;
+}
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 36de0d91e802..0c987d5c3675 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -10,16 +10,19 @@ import TabBar from './TabBar';
 import { SettingsContextController } from './SettingsContext';
 import { TreeContextController } from './TreeContext';
 
+import styles from './DevTools.css';
+
 import './root.css';
 
 import type { Bridge } from '../../types';
 
-export type TabID = 'elements' | 'profiler' | 'settings';
+export type BrowserName = 'Chrome' | 'Firefox';
 export type BrowserTheme = 'dark' | 'light';
+export type TabID = 'elements' | 'profiler' | 'settings';
 
 export type Props = {|
   bridge: Bridge,
-  browserName: string,
+  browserName: BrowserName,
   defaultTab?: TabID,
   browserTheme: BrowserTheme,
   showTabBar?: boolean,
@@ -54,8 +57,14 @@ export default function DevTools({
       <StoreContext.Provider value={store}>
         <SettingsContextController browserTheme={browserTheme}>
           <TreeContextController>
-            {showTabBar && <TabBar currentTab={tab} selectTab={setTab} />}
-            {tabElement}
+            <div className={styles.DevTools}>
+              {showTabBar && (
+                <div className={styles.TabBar}>
+                  <TabBar currentTab={tab} selectTab={setTab} />
+                </div>
+              )}
+              <div className={styles.TabContent}>{tabElement}</div>
+            </div>
           </TreeContextController>
         </SettingsContextController>
       </StoreContext.Provider>
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 086081bc63d7..fc25616693eb 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -24,6 +24,12 @@ export default function ElementView({ index, style }: Props) {
   } = useContext(TreeContext);
 
   const element = getElementAtIndex(index);
+
+  if (element == null) {
+    console.warn(`<ElementView> Could not find element at index ${index}`);
+    return null;
+  }
+
   const { depth, displayName, id, key, type } = ((element: any): Element);
 
   const handleDoubleClick = useCallback(() => selectOwner(id), [id]);
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 0e1891486306..a9c0be76114c 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -1,43 +1,50 @@
 // @flow
 
-import { useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
-// https://usehooks.com/useLocalStorage/
+// Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
   key: string,
   initialValue: T
 ): [T, (value: T | (() => T)) => void] {
-  // State to store our value
-  // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState(() => {
+  const getValueFromLocalStorage = () => {
     try {
-      // Get from local storage by key
       const item = window.localStorage.getItem(key);
-      // Parse stored json or if none return initialValue
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
-      // If error also return initialValue
       console.log(error);
       return initialValue;
     }
-  });
+  };
+
+  const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);
 
-  // Return a wrapped version of useState's setter function that ...
-  // ... persists the new value to localStorage.
   const setValue = value => {
     try {
-      // Allow value to be a function so we have same API as useState
       const valueToStore =
         value instanceof Function ? value(storedValue) : value;
-      // Save state
       setStoredValue(valueToStore);
-      // Save to local storage
       window.localStorage.setItem(key, JSON.stringify(valueToStore));
     } catch (error) {
-      // A more advanced implementation would handle the error case
       console.log(error);
     }
   };
 
+  // Listen for changes in other extension panels.
+  useLayoutEffect(() => {
+    const onStorage = event => {
+      const newValue = getValueFromLocalStorage();
+      if (key === event.key && storedValue !== newValue) {
+        setValue(newValue);
+      }
+    };
+
+    window.addEventListener('storage', onStorage);
+
+    return () => {
+      window.removeEventListener('storage', onStorage);
+    };
+  }, [key, storedValue]);
+
   return [storedValue, setValue];
 }

From 79f57532b9fe117d82c2934b7e6a2b281fa27dcb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Feb 2019 11:22:22 -0800
Subject: [PATCH 053/814] Split demo app into multiple roots and fixed a
 multi-root bug

---
 shells/dev/app/App.css                        |  7 --
 shells/dev/app/App.js                         | 17 ----
 .../InspectableElements.css                   |  8 ++
 .../InspectableElements.js                    |  6 +-
 shells/dev/app/ToDoList/List.css              |  8 ++
 shells/dev/app/ToDoList/List.js               |  6 +-
 shells/dev/app/index.js                       | 24 ++++-
 src/devtools/store.js                         | 99 +++++++++++++------
 8 files changed, 108 insertions(+), 67 deletions(-)
 delete mode 100644 shells/dev/app/App.css
 delete mode 100644 shells/dev/app/App.js

diff --git a/shells/dev/app/App.css b/shells/dev/app/App.css
deleted file mode 100644
index 890641f08022..000000000000
--- a/shells/dev/app/App.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.App {
-  /* GitHub.com frontend fonts */
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  font-size: 14px;
-  line-height: 1.5;
-}
diff --git a/shells/dev/app/App.js b/shells/dev/app/App.js
deleted file mode 100644
index 787a5af9fdf7..000000000000
--- a/shells/dev/app/App.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-
-import React from 'react';
-import ElementTypes from './ElementTypes';
-import InspectableElements from './InspectableElements';
-import List from './ToDoList';
-import styles from './App.css';
-
-export default function App() {
-  return (
-    <div className={styles.App}>
-      <List />
-      <ElementTypes />
-      <InspectableElements />
-    </div>
-  );
-}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.css b/shells/dev/app/InspectableElements/InspectableElements.css
index 6d36bfb51d4b..b1ebb8ee71d0 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.css
+++ b/shells/dev/app/InspectableElements/InspectableElements.css
@@ -1,3 +1,11 @@
+.App {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
 .Header {
   font-size: 1.5rem;
   font-weight: bold;
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index fa814ccedac7..b7cbbf293748 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import NestedProps from './NestedProps';
@@ -10,11 +10,11 @@ import styles from './InspectableElements.css';
 
 export default function InspectableElements() {
   return (
-    <Fragment>
+    <div className={styles.App}>
       <div className={styles.Header}>Inspectable elements</div>
       <NestedProps />
       <Contexts />
       <CustomHooks />
-    </Fragment>
+    </div>
   );
 }
diff --git a/shells/dev/app/ToDoList/List.css b/shells/dev/app/ToDoList/List.css
index febdc684fad8..ae394960009e 100644
--- a/shells/dev/app/ToDoList/List.css
+++ b/shells/dev/app/ToDoList/List.css
@@ -1,3 +1,11 @@
+.App {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
 .Header {
   font-size: 1.5rem;
   font-weight: bold;
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index 2c6e96b524cb..1ab1cac1f9f5 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import ListItem from './ListItem';
 import styles from './List.css';
 
@@ -77,7 +77,7 @@ export default function List(props: Props) {
   );
 
   return (
-    <Fragment>
+    <div className={styles.App}>
       <div className={styles.Header}>List</div>
       <input
         type="text"
@@ -106,6 +106,6 @@ export default function List(props: Props) {
           />
         ))}
       </ul>
-    </Fragment>
+    </div>
   );
 }
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index af1f5b82272a..c04798ac80ef 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -1,19 +1,33 @@
 /** @flow */
 
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import App from './App';
+import ElementTypes from './ElementTypes';
+import InspectableElements from './InspectableElements';
+import ToDoList from './ToDoList';
 
-const container = document.createElement('div');
+const containers = [];
 
-((document.body: any): HTMLBodyElement).appendChild(container);
+function mountHelper(App) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  containers.push(container);
 
-function mountTestApp() {
   render(createElement(App), container);
 }
 
+function mountTestApp() {
+  mountHelper(ToDoList);
+  mountHelper(InspectableElements);
+  mountHelper(ElementTypes);
+}
+
 function unmountTestApp() {
-  unmountComponentAtNode(container);
+  containers.forEach(container => unmountComponentAtNode(container));
 }
 
 mountTestApp();
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 6ef2c1673949..59465fd3e41a 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -53,6 +53,7 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     bridge.on('operations', this.onBridgeOperations);
+    bridge.on('shutdown', this.onBridgeShutdown);
   }
 
   get numElements(): number {
@@ -85,7 +86,9 @@ export default class Store extends EventEmitter {
     for (let i = 0; i < this._roots.length; i++) {
       rootID = this._roots[i];
       root = ((this._idToElement.get(rootID): any): Element);
-      if (rootWeight + root.weight > index) {
+      if (root.children.length === 0) {
+        continue;
+      } else if (rootWeight + root.weight > index) {
         break;
       } else {
         rootWeight += root.weight;
@@ -96,7 +99,7 @@ export default class Store extends EventEmitter {
     // Skip over the root itself, because roots aren't visible in the Elements tree.
     const firstChildID = ((root: any): Element).children[0];
     let currentElement = ((this._idToElement.get(firstChildID): any): Element);
-    let currentWeight = 0;
+    let currentWeight = rootWeight;
     while (index !== currentWeight) {
       for (let i = 0; i < currentElement.children.length; i++) {
         const childID = currentElement.children[i];
@@ -234,22 +237,28 @@ export default class Store extends EventEmitter {
           if (parentID === 0) {
             debug('Add', `new root fiber ${id}`);
 
-            this._roots = this._roots.concat(id);
-            this._rootIDToRendererID.set(id, rendererID);
-
-            this._idToElement.set(id, {
-              children: [],
-              depth: -1,
-              displayName: null,
-              id,
-              key: null,
-              ownerID: 0,
-              parentID: 0,
-              type,
-              weight: 0,
-            });
-
-            haveRootsChanged = true;
+            if (this._idToElement.has(id)) {
+              // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
+              // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
+              // Maybe in the future we'll revisit this.
+            } else {
+              this._roots = this._roots.concat(id);
+              this._rootIDToRendererID.set(id, rendererID);
+
+              this._idToElement.set(id, {
+                children: [],
+                depth: -1,
+                displayName: null,
+                id,
+                key: null,
+                ownerID: 0,
+                parentID: 0,
+                type,
+                weight: 0,
+              });
+
+              haveRootsChanged = true;
+            }
           } else {
             ownerID = ((operations[i]: any): number);
             i++;
@@ -313,8 +322,6 @@ export default class Store extends EventEmitter {
 
           i = i + 2;
 
-          debug('Remove', `fiber ${id} from tree`);
-
           element = ((this._idToElement.get(id): any): Element);
           parentID = element.parentID;
 
@@ -324,9 +331,13 @@ export default class Store extends EventEmitter {
 
           parentElement = ((this._idToElement.get(parentID): any): Element);
           if (parentElement == null) {
+            debug('Remove', `fiber ${id} root`);
+
             this._roots = this._roots.filter(rootID => rootID !== id);
             this._rootIDToRendererID.delete(id);
           } else {
+            debug('Remove', `fiber ${id} from parent ${parentID}`);
+
             parentElement.children = parentElement.children.filter(
               childID => childID !== id
             );
@@ -388,18 +399,42 @@ export default class Store extends EventEmitter {
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
+  onBridgeShutdown = () => {
+    debug('onBridgeShutdown', 'unsubscribing from Bridge');
+
+    bridge.off('operations', this.onBridgeOperations);
+    bridge.off('shutdown', this.onBridgeShutdown);
+  };
+
   // DEBUG
-  __printTree = (rootID: number) => {
-    const printElement = (id: number) => {
-      const element = ((this._idToElement.get(id): any): Element);
-      console.log(
-        `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
-          ''}${element.key ? `key:"${element.key}"` : ''} (${element.weight})`
-      );
-      element.children.forEach(printElement);
-    };
-    const root = ((this._idToElement.get(rootID): any): Element);
-    console.log('printing root:', rootID);
-    root.children.forEach(printElement);
+  __printTree = () => {
+    console.group('__printTree()');
+    this._roots.forEach((rootID: number) => {
+      const printElement = (id: number) => {
+        const element = ((this._idToElement.get(id): any): Element);
+        console.log(
+          `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
+            ''}${element.key ? `key:"${element.key}"` : ''} (${element.weight})`
+        );
+        element.children.forEach(printElement);
+      };
+      const root = ((this._idToElement.get(rootID): any): Element);
+      console.group(`${rootID}:root (${root.weight})`);
+      root.children.forEach(printElement);
+      console.groupEnd();
+    });
+    console.group(`List of ${this.numElements} elements`);
+    for (let i = 0; i < this.numElements; i++) {
+      //if (i === 4) { debugger }
+      const element = this.getElementAtIndex(i);
+      if (element != null) {
+        console.log(
+          `${'•'.repeat(element.depth)}${i}: ${element.displayName ||
+            'Unknown'}`
+        );
+      }
+    }
+    console.groupEnd();
+    console.groupEnd();
   };
 }

From c229837f33c1bdb8cba5697e95e457e98bdac657 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Feb 2019 11:36:43 -0800
Subject: [PATCH 054/814] Temporarily disabled Settings panel

---
 shells/browser/shared/src/backend.js | 2 +-
 shells/browser/shared/src/main.js    | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index 771ec51efb0b..c86a1a5d4b6c 100644
--- a/shells/browser/shared/src/backend.js
+++ b/shells/browser/shared/src/backend.js
@@ -64,5 +64,5 @@ function setup(hook) {
     listeners.splice(0);
   });
 
-  initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window);
+  initBackend(hook, agent, window);
 }
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 7c16bf3a24e7..67e4d36d1d46 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -25,12 +25,14 @@ function createPanelIfReactLoaded() {
         });
       });
 
+      /* TODO Revisit this architecture; currently it causes duplicate agent/bridge traffic.
       chrome.devtools.panels.create(
         '⚛ Settings',
         '',
         'settings.html',
         panel => {}
       );
+      */
     }
   );
 }

From 94aab74253142b4468f38253178c2d7ca80f1a15 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 08:13:35 -0800
Subject: [PATCH 055/814] Avoid NPE in Agent if renderer can't be found for an
 ID

---
 src/backend/agent.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 93af40578597..b23ff86d758e 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -73,16 +73,18 @@ export default class Agent extends EventEmitter {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      this._bridge.send('inspectedElement', renderer.inspectElement(id));
     }
-    this._bridge.send('inspectedElement', renderer.inspectElement(id));
   };
 
   selectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      this._bridge.send('selectElement', renderer.selectElement(id));
     }
-    this._bridge.send('selectElement', renderer.selectElement(id));
   };
 
   setRendererInterface(

From 36e596ecd1319d5621d39be8a4316365f9fced09 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 09:17:29 -0800
Subject: [PATCH 056/814] Changed dark theme to have more React blues

---
 src/devtools/views/TabBar.css |  2 +-
 src/devtools/views/root.css   | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 6c9ab7b6d40a..296ac7f28ec6 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -3,7 +3,7 @@
   align-items: center;
   padding: 0 0.5rem;
   background-color: var(--color-background);
-  color: var(--color-tree-node-selected);
+  color: var(--color-button);
   border-top: 1px solid var(--color-border);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-large);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 1df9ed50ff52..5b4aa26aa23a 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -27,15 +27,15 @@
 
   /* Dark theme */
   --theme-dark-arrow: #777d88;
-  --theme-dark-arrow-inverted: #23272f;
+  --theme-dark-arrow-inverted: #282828;
   --theme-dark-attribute-name: #9d87d2;
   --theme-dark-attribute-value: #cedae0;
-  --theme-dark-background: #23272f;
-  --theme-dark-button: #4dbba6;
-  --theme-dark-button-hover: #80d4c4;
-  --theme-dark-color-border: #303846;
-  --theme-dark-component-name: #4dbba6;
-  --theme-dark-component-name-inverted: ##23272f;
+  --theme-dark-background: #282c34;
+  --theme-dark-button: #61dafb;
+  --theme-dark-button-hover: #a2e9fc;
+  --theme-dark-color-border: #3d424a;
+  --theme-dark-component-name: #61dafb;
+  --theme-dark-component-name-inverted: ##282828;
   --theme-dark-dim: #8f949d;
   --theme-dark-dimmer: #777d88;
   --theme-dark-dimmest: #4f5766;
@@ -44,8 +44,8 @@
   --theme-dark-search-match: yellow;
   --theme-dark-search-match-current: #f7923b;
   --theme-dark-text-color: #ffffff;
-  --theme-dark-tree-node-selected: #31a38d;
-  --theme-dark-tree-node-hover: #303846;
+  --theme-dark-tree-node-selected: #178fb9;
+  --theme-dark-tree-node-hover: #3d424a;
 
   /* Compact density */
   --compact-font-size-monospace-normal: 11px;

From 5a301cd26e69a900e913db23d51f0e06578a4cf2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 09:23:54 -0800
Subject: [PATCH 057/814] Tweaked the owner stack exit icon

---
 src/devtools/views/OwnersStack.css | 2 +-
 src/devtools/views/OwnersStack.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
index 28ac5ae85896..c7b4228fe70d 100644
--- a/src/devtools/views/OwnersStack.css
+++ b/src/devtools/views/OwnersStack.css
@@ -51,5 +51,5 @@
   height: 20px;
   width: 1px;
   background-color: var(--color-border);
-  margin-right: 0.5rem;
+  margin: 0 0.5rem;
 }
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/OwnersStack.js
index 79a70eee1cf6..57720a671e00 100644
--- a/src/devtools/views/OwnersStack.js
+++ b/src/devtools/views/OwnersStack.js
@@ -24,7 +24,7 @@ export default function OwnerStack() {
         onClick={resetOwnerStack}
         title="Back to tree view"
       >
-        <ButtonIcon type="back" />
+        <ButtonIcon type="close" />
       </button>
       <div className={styles.VRule} />
       {elements}

From 15c53961696c186ee799e7bbbe6efc40d9eff128 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 11:45:11 -0800
Subject: [PATCH 058/814] Re-added "Settings" panel to browser extension and
 (hopefully) fixed a lot of sources of error

---
 shells/browser/chrome/manifest.json           |  2 +-
 shells/browser/firefox/manifest.json          |  2 +-
 shells/browser/shared/build.js                |  2 +-
 .../shared/{panel.html => elements.html}      |  2 +-
 shells/browser/shared/src/main.js             | 97 ++++++++++++++++---
 shells/browser/shared/src/panel.js            | 63 ------------
 shells/browser/shared/src/panels/elements.js  |  3 +
 shells/browser/shared/src/panels/settings.js  |  3 +
 shells/browser/shared/src/panels/utils.js     | 53 ++++++++++
 shells/browser/shared/src/settings.js         | 48 ---------
 shells/browser/shared/webpack.config.js       |  4 +-
 shells/dev/src/devtools.js                    |  4 +
 src/backend/agent.js                          | 15 ++-
 src/devtools/store.js                         | 11 ++-
 src/devtools/views/DevTools.js                |  5 +-
 src/devtools/views/Element.js                 |  2 +
 src/devtools/views/TreeContext.js             |  2 +-
 17 files changed, 178 insertions(+), 140 deletions(-)
 rename shells/browser/shared/{panel.html => elements.html} (93%)
 delete mode 100644 shells/browser/shared/src/panel.js
 create mode 100644 shells/browser/shared/src/panels/elements.js
 create mode 100644 shells/browser/shared/src/panels/settings.js
 create mode 100644 shells/browser/shared/src/panels/utils.js
 delete mode 100644 shells/browser/shared/src/settings.js

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 5b06474126fa..3b3cec6d91df 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -28,8 +28,8 @@
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "web_accessible_resources": [
+    "elements.html",
     "main.html",
-    "panel.html",
     "settings.html",
     "build/backend.js"
   ],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 824aa005202e..2829d100e62a 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -34,8 +34,8 @@
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "web_accessible_resources": [
+    "elements.html",
     "main.html",
-    "panel.html",
     "settings.html",
     "build/backend.js"
   ],
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index dd57af36ac62..b8107aa1ad3b 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -10,8 +10,8 @@ const { join } = require('path');
 const STATIC_FILES = [
   'icons',
   'popups',
+  'elements.html',
   'main.html',
-  'panel.html',
   'settings.html',
 ];
 
diff --git a/shells/browser/shared/panel.html b/shells/browser/shared/elements.html
similarity index 93%
rename from shells/browser/shared/panel.html
rename to shells/browser/shared/elements.html
index 60fd1bdf13ff..bbaa81a0f2f3 100644
--- a/shells/browser/shared/panel.html
+++ b/shells/browser/shared/elements.html
@@ -27,6 +27,6 @@
     <body>
         <!-- main react mount point -->
         <div id="container">Unable to find React on the page.</div>
-        <script src="./build/panel.js"></script>
+        <script src="./build/elements.js"></script>
     </body>
 </html>
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 67e4d36d1d46..9703b59f4650 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -1,5 +1,8 @@
 /* global chrome */
 
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/Store';
+
 let panelCreated = false;
 
 function createPanelIfReactLoaded() {
@@ -9,37 +12,105 @@ function createPanelIfReactLoaded() {
 
   chrome.devtools.inspectedWindow.eval(
     'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
-    function(pageHasReact, err) {
+    function(pageHasReact, error) {
       if (!pageHasReact || panelCreated) {
         return;
       }
 
-      clearInterval(loadCheckInterval);
       panelCreated = true;
-      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
-        panel.onShown.addListener(function(window) {
-          // TODO: When the user switches to the panel, check for an Elements tab selection.
+
+      clearInterval(loadCheckInterval);
+
+      let bridge = null;
+      let store = null;
+      let elementsPanel = null;
+      let settingsPanel = null;
+
+      function initBridgeAndStore() {
+        let hasPortBeenDisconnected = false;
+        const port = chrome.runtime.connect({
+          name: '' + chrome.devtools.inspectedWindow.tabId,
         });
-        panel.onHidden.addListener(function() {
-          // TODO: Stop highlighting and stuff.
+        port.onDisconnect.addListener(() => {
+          hasPortBeenDisconnected = true;
         });
-      });
 
-      /* TODO Revisit this architecture; currently it causes duplicate agent/bridge traffic.
+        bridge = new Bridge({
+          listen(fn) {
+            port.onMessage.addListener(message => fn(message));
+          },
+          send(event: string, payload: any, transferable?: Array<any>) {
+            if (!hasPortBeenDisconnected) {
+              port.postMessage({ event, payload }, transferable);
+            }
+          },
+        });
+
+        store = new Store(bridge);
+
+        if (elementsPanel !== null) {
+          elementsPanel.injectBridgeAndStore(bridge, store);
+        }
+        if (settingsPanel !== null) {
+          settingsPanel.injectBridgeAndStore(bridge, store);
+        }
+      }
+
+      initBridgeAndStore();
+
+      chrome.devtools.panels.create(
+        '⚛ Elements',
+        '',
+        'elements.html',
+        panel => {
+          panel.onShown.addListener(panel => {
+            if (elementsPanel === null) {
+              panel.injectBridgeAndStore(bridge, store);
+            }
+
+            elementsPanel = panel;
+
+            // TODO: When the user switches to the panel, check for an Elements tab selection.
+          });
+          panel.onHidden.addListener(() => {
+            // TODO: Stop highlighting and stuff.
+          });
+        }
+      );
+
       chrome.devtools.panels.create(
         '⚛ Settings',
         '',
         'settings.html',
-        panel => {}
+        panel => {
+          panel.onShown.addListener(panel => {
+            if (settingsPanel === null) {
+              panel.injectBridgeAndStore(bridge, store);
+            }
+
+            settingsPanel = panel;
+          });
+        }
       );
-      */
+
+      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+
+      // Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
+      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        bridge.send('shutdown');
+
+        initBridgeAndStore();
+      });
     }
   );
 }
 
-chrome.devtools.network.onNavigated.addListener(function() {
+// Load (or reload) the DevTools extension when the user navigates to a new page.
+function checkPageForReact() {
   createPanelIfReactLoaded();
-});
+}
+
+chrome.devtools.network.onNavigated.addListener(checkPageForReact);
 
 // Check to see if React has loaded once per second in case React is added
 // after page load
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
deleted file mode 100644
index 56780efe6790..000000000000
--- a/shells/browser/shared/src/panel.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* global chrome */
-
-import { createElement } from 'react';
-import { createRoot, flushSync } from 'react-dom';
-import Bridge from 'src/bridge';
-import DevTools from 'src/devtools/views/DevTools';
-import inject from './inject';
-import { getBrowserName, getBrowserTheme } from './utils';
-
-const container = ((document.getElementById('container'): any): HTMLElement);
-
-function injectAndInit() {
-  let disconnected = false;
-
-  const port = chrome.runtime.connect({
-    name: '' + chrome.devtools.inspectedWindow.tabId,
-  });
-  port.onDisconnect.addListener(() => {
-    disconnected = true;
-  });
-
-  const bridge = new Bridge({
-    listen(fn) {
-      port.onMessage.addListener(message => fn(message));
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      if (disconnected) {
-        return;
-      }
-      port.postMessage({ event, payload }, transferable);
-    },
-  });
-
-  // Clear the "React not found" initial message before rendering.
-  container.innerHTML = '';
-
-  const root = createRoot(container);
-  root.render(
-    createElement(DevTools, {
-      bridge,
-      browserName: getBrowserName(),
-      browserTheme: getBrowserTheme(),
-      defaultTab: 'elements',
-      showTabBar: false,
-    })
-  );
-
-  // Initialize the backend only once the DevTools frontend Store has been initialized.
-  // Otherwise the Store may miss important initial tree op codes.
-  inject(chrome.runtime.getURL('build/backend.js'));
-
-  // Reload the DevTools extension when the user navigates to a new page.
-  function onNavigated() {
-    chrome.devtools.network.onNavigated.removeListener(onNavigated);
-
-    bridge.send('shutdown');
-
-    flushSync(() => root.unmount(injectAndInit));
-  }
-  chrome.devtools.network.onNavigated.addListener(onNavigated);
-}
-
-injectAndInit();
diff --git a/shells/browser/shared/src/panels/elements.js b/shells/browser/shared/src/panels/elements.js
new file mode 100644
index 000000000000..ef7f5e80df61
--- /dev/null
+++ b/shells/browser/shared/src/panels/elements.js
@@ -0,0 +1,3 @@
+import { createPanel } from './utils';
+
+createPanel('elements');
diff --git a/shells/browser/shared/src/panels/settings.js b/shells/browser/shared/src/panels/settings.js
new file mode 100644
index 000000000000..a8dd78b0504c
--- /dev/null
+++ b/shells/browser/shared/src/panels/settings.js
@@ -0,0 +1,3 @@
+import { createPanel } from './utils';
+
+createPanel('settings');
diff --git a/shells/browser/shared/src/panels/utils.js b/shells/browser/shared/src/panels/utils.js
new file mode 100644
index 000000000000..3863f734f55a
--- /dev/null
+++ b/shells/browser/shared/src/panels/utils.js
@@ -0,0 +1,53 @@
+/* global chrome */
+
+import { createElement } from 'react';
+import { createRoot, flushSync } from 'react-dom';
+import DevTools from 'src/devtools/views/DevTools';
+import inject from '../inject';
+import { getBrowserName, getBrowserTheme } from '../utils';
+
+export function createPanel(defaultTab) {
+  let injectedBridge = null;
+  let injectedStore = null;
+  let root = null;
+
+  // All DevTools panel share a single Bridge and Store instance.
+  // The main script will inject those shared instances using this method.
+  window.injectBridgeAndStore = (bridge, store) => {
+    injectedBridge = bridge;
+    injectedStore = store;
+
+    if (root === null) {
+      injectAndInit();
+    } else {
+      // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+      // We can revisit this in the future as a small optimization.
+      flushSync(() => root.unmount(injectAndInit));
+    }
+  };
+
+  function injectAndInit() {
+    const container = ((document.getElementById(
+      'container'
+    ): any): HTMLElement);
+
+    // Clear the "React not found" initial message before rendering.
+    container.innerHTML = '';
+
+    root = createRoot(container);
+    root.render(
+      createElement(DevTools, {
+        bridge: injectedBridge,
+        browserName: getBrowserName(),
+        browserTheme: getBrowserTheme(),
+        defaultTab,
+        showTabBar: false,
+        store: injectedStore,
+      })
+    );
+
+    // Initialize the backend only once the DevTools frontend Store has been initialized.
+    // Otherwise the Store may miss important initial tree op codes.
+    inject(chrome.runtime.getURL('build/backend.js'));
+  }
+}
diff --git a/shells/browser/shared/src/settings.js b/shells/browser/shared/src/settings.js
deleted file mode 100644
index d51dba755dc2..000000000000
--- a/shells/browser/shared/src/settings.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* global chrome */
-
-import { createElement } from 'react';
-import { createRoot, flushSync } from 'react-dom';
-import Bridge from 'src/bridge';
-import DevTools from 'src/devtools/views/DevTools';
-import inject from './inject';
-import { getBrowserName, getBrowserTheme } from './utils';
-
-const container = ((document.getElementById('container'): any): HTMLElement);
-
-function injectAndInit() {
-  // Noop Bridge for the Settings panel
-  const bridge = new Bridge({
-    listen(fn) {},
-    send(event: string, payload: any, transferable?: Array<any>) {},
-  });
-
-  // Clear the "React not found" initial message before rendering.
-  container.innerHTML = '';
-
-  const root = createRoot(container);
-  root.render(
-    createElement(DevTools, {
-      bridge,
-      browserName: getBrowserName(),
-      browserTheme: getBrowserTheme(),
-      defaultTab: 'settings',
-      showTabBar: false,
-    })
-  );
-
-  // Initialize the backend only once the DevTools frontend Store has been initialized.
-  // Otherwise the Store may miss important initial tree op codes.
-  inject(chrome.runtime.getURL('build/backend.js'));
-
-  // Reload the DevTools extension when the user navigates to a new page.
-  function onNavigated() {
-    chrome.devtools.network.onNavigated.removeListener(onNavigated);
-
-    bridge.send('shutdown');
-
-    flushSync(() => root.unmount(injectAndInit));
-  }
-  chrome.devtools.network.onNavigated.addListener(onNavigated);
-}
-
-injectAndInit();
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 372889ab4b8a..0a304f4a64e5 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -16,8 +16,8 @@ module.exports = {
     contentScript: './src/contentScript.js',
     inject: './src/GlobalHook.js',
     main: './src/main.js',
-    panel: './src/panel.js',
-    settings: './src/settings.js',
+    elements: './src/panels/elements.js',
+    settings: './src/panels/settings.js',
   },
   output: {
     path: __dirname + '/build',
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index d1a62aede636..accc6af827b1 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -6,6 +6,7 @@ import { createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
+import Store from 'src/devtools/Store';
 import DevTools from 'src/devtools/views/DevTools';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
@@ -53,6 +54,8 @@ inject('./build/app.js', () => {
 
       cb(bridge);
 
+      const store = new Store(bridge);
+
       const root = createRoot(container);
       const batch = root.createBatch();
       batch.render(
@@ -61,6 +64,7 @@ inject('./build/app.js', () => {
           browserName: 'Chrome',
           browserTheme: 'light',
           showTabBar: true,
+          store,
         })
       );
       batch.then(() => {
diff --git a/src/backend/agent.js b/src/backend/agent.js
index b23ff86d758e..e14ec53c05a5 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -25,11 +25,11 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
-    bridge.addListener('shutdown', () => this.emit('shutdown'));
-
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('selectElement', this.selectElement);
+    bridge.addListener('shutdown', this.shutdown);
+
     // TODO Listen to bridge for things like selection.
     // bridge.on('...'), this...);
   }
@@ -94,8 +94,17 @@ export default class Agent extends EventEmitter {
     this._rendererInterfaces[rendererID] = rendererInterface;
   }
 
+  shutdown = () => {
+    this.emit('shutdown');
+  };
+
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
-    this._bridge.send('operations', operations, [operations.buffer]);
+
+    // TODO The chrome.runtime does not currently support transferables; it forces JSON serialization.
+    // The Store has a fallback in place that parses the message as JSON if the type isn't an array.
+    // Sometimes using transferrables also cause Chrome or Firefox to throw "ArrayBuffer at index 0 is already neutered".
+    // this._bridge.send('operations', operations, [operations.buffer]);
+    this._bridge.send('operations', operations);
   };
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 59465fd3e41a..388ae245993a 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -28,6 +28,8 @@ const debug = (methodName, ...args) => {
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter {
+  _bridge: Bridge;
+
   // Map of ID to Element.
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
@@ -52,8 +54,9 @@ export default class Store extends EventEmitter {
 
     debug('constructor', 'subscribing to Bridge');
 
-    bridge.on('operations', this.onBridgeOperations);
-    bridge.on('shutdown', this.onBridgeShutdown);
+    this._bridge = bridge;
+    this._bridge.on('operations', this.onBridgeOperations);
+    this._bridge.on('shutdown', this.onBridgeShutdown);
   }
 
   get numElements(): number {
@@ -402,8 +405,8 @@ export default class Store extends EventEmitter {
   onBridgeShutdown = () => {
     debug('onBridgeShutdown', 'unsubscribing from Bridge');
 
-    bridge.off('operations', this.onBridgeOperations);
-    bridge.off('shutdown', this.onBridgeShutdown);
+    this._bridge.off('operations', this.onBridgeOperations);
+    this._bridge.off('shutdown', this.onBridgeShutdown);
   };
 
   // DEBUG
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 0c987d5c3675..9b87c2dea8d0 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Elements from './Elements';
@@ -26,6 +26,7 @@ export type Props = {|
   defaultTab?: TabID,
   browserTheme: BrowserTheme,
   showTabBar?: boolean,
+  store: Store,
 |};
 
 export default function DevTools({
@@ -34,8 +35,8 @@ export default function DevTools({
   defaultTab = 'elements',
   browserTheme = 'light',
   showTabBar = false,
+  store,
 }: Props) {
-  const store = useMemo<Store>(() => new Store(bridge), []);
   const [tab, setTab] = useState(defaultTab);
 
   let tabElement;
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index fc25616693eb..5fe0bc88161c 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -44,6 +44,8 @@ export default function ElementView({ index, style }: Props) {
   const isSelected = selectedElementID === id;
   const showDollarR = isSelected && type === ElementTypeClassOrFunction;
 
+  // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
+
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index c757980e9556..079d05670c8f 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -524,7 +524,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {
         ? store.getElementAtIndex(index)
         : store.getElementByID(state._ownerFlatTree[index]);
     },
-    [state]
+    [state, store]
   );
   const selectElementAtIndex = useCallback(
     (index: number) =>

From a07d9862cac51ada3f31077b251522670a67f932 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 12:46:27 -0800
Subject: [PATCH 059/814] Fixed edge-case display density bug

---
 src/devtools/views/SettingsContext.js | 22 ++++++++++++++++++++++
 src/devtools/views/Tree.js            | 13 ++++---------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index 3929ffa41e58..75535650dbd7 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -11,6 +11,11 @@ export type Theme = 'auto' | 'light' | 'dark';
 type Context = {|
   displayDensity: DisplayDensity,
   setDisplayDensity(value: DisplayDensity): void,
+
+  // Derived from display density.
+  // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
+  lineHeight: number,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -31,6 +36,19 @@ function SettingsContextController({ browserTheme, children }: Props) {
   );
   const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
 
+  const comfortableLineHeight = parseInt(
+    getComputedStyle((document.body: any)).getPropertyValue(
+      '--comfortable-line-height-data'
+    ),
+    10
+  );
+  const compactLineHeight = parseInt(
+    getComputedStyle((document.body: any)).getPropertyValue(
+      '--compact-line-height-data'
+    ),
+    10
+  );
+
   useLayoutEffect(() => {
     switch (displayDensity) {
       case 'compact':
@@ -66,6 +84,10 @@ function SettingsContextController({ browserTheme, children }: Props) {
       setDisplayDensity,
       theme,
       setTheme,
+      lineHeight:
+        displayDensity === 'compact'
+          ? compactLineHeight
+          : comfortableLineHeight,
     }),
     [displayDensity, setDisplayDensity, theme, setTheme]
   );
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index a696c815ddfc..9b177bfed46c 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -10,6 +10,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
+import { SettingsContext } from './SettingsContext';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import OwnersStack from './OwnersStack';
@@ -31,6 +32,8 @@ export default function Tree(props: Props) {
   } = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any>>();
 
+  const { lineHeight } = useContext(SettingsContext);
+
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list.
   useLayoutEffect(() => {
@@ -79,14 +82,6 @@ export default function Tree(props: Props) {
     [baseDepth, numElements, getElementAtIndex]
   );
 
-  const itemSize =
-    parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--line-height-data'
-      ),
-      10
-    ) || 18;
-
   return (
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
@@ -106,7 +101,7 @@ export default function Tree(props: Props) {
               height={height}
               itemCount={numElements}
               itemData={itemData}
-              itemSize={itemSize}
+              itemSize={lineHeight}
               ref={listRef}
               width={width}
             >

From b167dd339bc84a22e4c96b36977512af676b09f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 13:20:24 -0800
Subject: [PATCH 060/814] Style, theme, and button CSS cleanup

---
 src/devtools/views/Button.css          |  26 ++++++
 src/devtools/views/Button.js           |  13 +++
 src/devtools/views/Element.css         |  11 +--
 src/devtools/views/OwnersStack.css     |  18 -----
 src/devtools/views/OwnersStack.js      |   5 +-
 src/devtools/views/SearchInput.css     |  18 -----
 src/devtools/views/SearchInput.js      |  13 +--
 src/devtools/views/SelectedElement.css |  18 +----
 src/devtools/views/SelectedElement.js  |   9 ++-
 src/devtools/views/SettingsContext.js  | 108 ++++++++-----------------
 src/devtools/views/Tree.css            |  14 ----
 src/devtools/views/Tree.js             |   5 +-
 src/devtools/views/root.css            |  86 +++++++++++---------
 13 files changed, 141 insertions(+), 203 deletions(-)
 create mode 100644 src/devtools/views/Button.css
 create mode 100644 src/devtools/views/Button.js

diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
new file mode 100644
index 000000000000..cd252ef508c5
--- /dev/null
+++ b/src/devtools/views/Button.css
@@ -0,0 +1,26 @@
+.Button {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.Button:hover {
+  background: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+.Button:active,
+.Button:focus {
+  background: var(--color-button-background-focus);
+  color: var(--color-button-focus);
+  outline: none;
+}
+.Button:disabled {
+  background: var(--color-button-background);
+  color: var(--color-button-disabled);
+  cursor: default;
+}
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
new file mode 100644
index 000000000000..398ec23284d8
--- /dev/null
+++ b/src/devtools/views/Button.js
@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react';
+
+import styles from './Button.css';
+
+type Props = {
+  className?: string,
+};
+
+export default function Button({ className, ...rest }: Props) {
+  return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
+}
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 0c52b4f83e20..97b02258a2e2 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -18,16 +18,13 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
-  --color-arrow: var(--color-arrow-inverted);
-  --color-tree-jsx-arrow-brackets: var(
-    --color-tree-jsx-arrow-brackets-inverted
-  );
+  --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-tree-node-hover);
   --color-attribute-value: var(--color-component-name-inverted);
 }
 
 .DollarR {
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .Component {
@@ -36,12 +33,12 @@
 .Component:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 .Component:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .AttributeName {
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/OwnersStack.css
index c7b4228fe70d..744d27614a0d 100644
--- a/src/devtools/views/OwnersStack.css
+++ b/src/devtools/views/OwnersStack.css
@@ -5,24 +5,6 @@
   overflow-x: auto;
 }
 
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-.IconButton:disabled {
-  color: var(--color-dimmer);
-  cursor: default;
-}
-
 .Component,
 .FocusedComponent {
   padding: 0.25rem;
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/OwnersStack.js
index 57720a671e00..502e11306e44 100644
--- a/src/devtools/views/OwnersStack.js
+++ b/src/devtools/views/OwnersStack.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from './context';
@@ -19,13 +20,13 @@ export default function OwnerStack() {
 
   return (
     <div className={styles.OwnerStack}>
-      <button
+      <Button
         className={styles.IconButton}
         onClick={resetOwnerStack}
         title="Back to tree view"
       >
         <ButtonIcon type="close" />
-      </button>
+      </Button>
       <div className={styles.VRule} />
       {elements}
     </div>
diff --git a/src/devtools/views/SearchInput.css b/src/devtools/views/SearchInput.css
index 053e70c5ccb0..a4c17ae1f585 100644
--- a/src/devtools/views/SearchInput.css
+++ b/src/devtools/views/SearchInput.css
@@ -25,24 +25,6 @@
   font-size: var(--font-size-sans-normal);
 }
 
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-.IconButton:disabled {
-  color: var(--color-dimmer);
-  cursor: default;
-}
-
 .LeftVRule,
 .RightVRule {
   height: 20px;
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 43cb3165c10c..8101998a15ec 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { TreeContext } from './TreeContext';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import Icon from './Icon';
 
@@ -74,30 +75,30 @@ export default function SearchInput(props: Props) {
         </span>
       )}
       <div className={styles.LeftVRule} />
-      <button
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={goToPreviousSearchResult}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
-      </button>
-      <button
+      </Button>
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={goToNextSearchResult}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
-      </button>
-      <button
+      </Button>
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={resetSearch}
         title="Reset search"
       >
         <ButtonIcon type="close" />
-      </button>
+      </Button>
       <div className={styles.RightVRule} />
     </div>
   );
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 4b9ee9775298..baa4438d7f0b 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -16,20 +16,6 @@
   padding: 0.5rem;
 }
 
-.IconButton {
-  flex: 0 0 auto;
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-
 .SelectedComponentName {
   flex: 1 1 auto;
   overflow: hidden;
@@ -51,13 +37,13 @@
 .Owner:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 .Component:after,
 .Owner:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .Component {
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 4da145fbdee0..2b6a9aeae15a 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from './context';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
@@ -64,20 +65,20 @@ export default function SelectedElement(_: Props) {
           </div>
         </div>
 
-        <button
+        <Button
           className={styles.IconButton}
           onClick={handleClick}
           title="Highlight this element in the page"
         >
           <ButtonIcon type="view-dom" />
-        </button>
+        </Button>
         {source !== null && (
-          <button
+          <Button
             className={styles.IconButton}
             title="View source for this element"
           >
             <ButtonIcon type="view-source" />
-          </button>
+          </Button>
         )}
       </div>
 
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index 75535650dbd7..83a429c1b54a 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -103,86 +103,42 @@ function setStyleVariable(name: string, value: string) {
   (document.documentElement: any).style.setProperty(name, value);
 }
 
+function updateStyleHelper(themeKey: string, style: string) {
+  setStyleVariable(`--${style}`, `var(--${themeKey}-${style})`);
+}
+
 function updateDisplayDensity(displayDensity: DisplayDensity): void {
-  setStyleVariable(
-    '--font-size-monospace-normal',
-    `var(--${displayDensity}-font-size-monospace-normal)`
-  );
-  setStyleVariable(
-    '--font-size-monospace-large',
-    `var(--${displayDensity}-font-size-monospace-large)`
-  );
-  setStyleVariable(
-    '--font-size-sans-normal',
-    `var(--${displayDensity}-font-size-sans-normal)`
-  );
-  setStyleVariable(
-    '--font-size-sans-large',
-    `var(--${displayDensity}-font-size-sans-large)`
-  );
-  setStyleVariable(
-    '--line-height-data',
-    `var(--${displayDensity}-line-height-data)`
-  );
+  updateStyleHelper(displayDensity, 'font-size-monospace-normal');
+  updateStyleHelper(displayDensity, 'font-size-monospace-large');
+  updateStyleHelper(displayDensity, 'font-size-sans-normal');
+  updateStyleHelper(displayDensity, 'font-size-sans-large');
+  updateStyleHelper(displayDensity, 'line-height-data');
 }
 
 function updateThemeVariables(theme: Theme): void {
-  setStyleVariable('--color-arrow', `var(--theme-${theme}-arrow)`);
-  setStyleVariable(
-    '--color-arrow-inverted',
-    `var(--theme-${theme}-arrow-inverted)`
-  );
-  setStyleVariable(
-    '--color-attribute-name',
-    `var(--theme-${theme}-attribute-name)`
-  );
-  setStyleVariable(
-    '--color-attribute-value',
-    `var(--theme-${theme}-attribute-value)`
-  );
-  setStyleVariable('--color-background', `var(--theme-${theme}-background)`);
-  setStyleVariable('--color-border', `var(--theme-${theme}-color-border)`);
-  setStyleVariable('--color-button', `var(--theme-${theme}-button)`);
-  setStyleVariable(
-    '--color-button-hover',
-    `var(--theme-${theme}-button-hover)`
-  );
-  setStyleVariable(
-    '--color-component-name',
-    `var(--theme-${theme}-component-name)`
-  );
-  setStyleVariable(
-    '--color-component-name-inverted',
-    `var(--theme-${theme}-component-name-inverted)`
-  );
-  setStyleVariable('--color-dim', `var(--theme-${theme}-dim)`);
-  setStyleVariable('--color-dimmer', `var(--theme-${theme}-dimmer)`);
-  setStyleVariable('--color-dimmest', `var(--theme-${theme}-dimmest)`);
-  setStyleVariable(
-    '--color-search-match',
-    `var(--theme-${theme}-search-match)`
-  );
-  setStyleVariable(
-    '--color-search-match-current',
-    `var(--theme-${theme}-search-match-current)`
-  );
-  setStyleVariable('--color-text-color', `var(--theme-${theme}-text-color)`);
-  setStyleVariable(
-    '--color-tree-jsx-arrow-brackets',
-    `var(--theme-${theme}-jsx-arrow-brackets)`
-  );
-  setStyleVariable(
-    '--color-tree-jsx-arrow-brackets-inverted',
-    `var(--theme-${theme}-jsx-arrow-brackets-inverted)`
-  );
-  setStyleVariable(
-    '--color-tree-node-selected',
-    `var(--theme-${theme}-tree-node-selected)`
-  );
-  setStyleVariable(
-    '--color-tree-node-hover',
-    `var(--theme-${theme}-tree-node-hover)`
-  );
+  updateStyleHelper(theme, 'color-attribute-name');
+  updateStyleHelper(theme, 'color-attribute-value');
+  updateStyleHelper(theme, 'color-background');
+  updateStyleHelper(theme, 'color-border');
+  updateStyleHelper(theme, 'color-button-background');
+  updateStyleHelper(theme, 'color-button-background-focus');
+  updateStyleHelper(theme, 'color-button-background-hover');
+  updateStyleHelper(theme, 'color-button');
+  updateStyleHelper(theme, 'color-button-disabled');
+  updateStyleHelper(theme, 'color-button-focus');
+  updateStyleHelper(theme, 'color-button-hover');
+  updateStyleHelper(theme, 'color-component-name');
+  updateStyleHelper(theme, 'color-component-name-inverted');
+  updateStyleHelper(theme, 'color-dim');
+  updateStyleHelper(theme, 'color-dimmer');
+  updateStyleHelper(theme, 'color-dimmest');
+  updateStyleHelper(theme, 'color-search-match');
+  updateStyleHelper(theme, 'color-search-match-current');
+  updateStyleHelper(theme, 'color-text-color');
+  updateStyleHelper(theme, 'color-jsx-arrow-brackets');
+  updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
+  updateStyleHelper(theme, 'color-tree-node-selected');
+  updateStyleHelper(theme, 'color-tree-node-hover');
 }
 
 export { SettingsContext, SettingsContextController };
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index fab177f808fe..51a3c7081865 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -26,17 +26,3 @@
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
-
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 9b177bfed46c..9b2064042f5a 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -11,6 +11,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from './SettingsContext';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import OwnersStack from './OwnersStack';
@@ -86,12 +87,12 @@ export default function Tree(props: Props) {
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
-        <button
+        <Button
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
         >
           <ButtonIcon type="search" />
-        </button>
+        </Button>
       </div>
       <div className={styles.AutoSizerWrapper}>
         <AutoSizer>
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 5b4aa26aa23a..f8ec068351e3 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -4,48 +4,54 @@
    */
 
   /* Light theme */
-  --theme-light-arrow: #777d88;
-  --theme-light-arrow-inverted: #ffffff;
-  --theme-light-attribute-name: #ef6632;
-  --theme-light-attribute-value: #1a1aa6;
-  --theme-light-background: #ffffff;
-  --theme-light-button: #0088fa;
-  --theme-light-button-hover: #3578e5;
-  --theme-light-color-border: #eeeeee;
-  --theme-light-component-name: #8155cb;
-  --theme-light-component-name-inverted: #ffffff;
-  --theme-light-dim: #777d88;
-  --theme-light-dimmer: #cfd1d5;
-  --theme-light-dimmest: #eff0f1;
-  --theme-light-jsx-arrow-brackets: #333333;
-  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --theme-light-search-match: yellow;
-  --theme-light-search-match-current: #f7923b;
-  --theme-light-text-color: #000000;
-  --theme-light-tree-node-selected: #0088fa;
-  --theme-light-tree-node-hover: #ebf1fb;
+  --light-color-attribute-name: #ef6632;
+  --light-color-attribute-value: #1a1aa6;
+  --light-color-background: #ffffff;
+  --light-color-button-background: #ffffff;
+  --light-color-button-background-focus: #ebf1fb;
+  --light-color-button-background-hover: #ffffff;
+  --light-color-button: #0088fa;
+  --light-color-button-disabled: #cfd1d5;
+  --light-color-button-focus: #3578e5;
+  --light-color-button-hover: #3578e5;
+  --light-color-border: #eeeeee;
+  --light-color-component-name: #8155cb;
+  --light-color-component-name-inverted: #ffffff;
+  --light-color-dim: #777d88;
+  --light-color-dimmer: #cfd1d5;
+  --light-color-dimmest: #eff0f1;
+  --light-color-jsx-arrow-brackets: #333333;
+  --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-search-match: yellow;
+  --light-color-search-match-current: #f7923b;
+  --light-color-text-color: #000000;
+  --light-color-tree-node-selected: #0088fa;
+  --light-color-tree-node-hover: #ebf1fb;
 
   /* Dark theme */
-  --theme-dark-arrow: #777d88;
-  --theme-dark-arrow-inverted: #282828;
-  --theme-dark-attribute-name: #9d87d2;
-  --theme-dark-attribute-value: #cedae0;
-  --theme-dark-background: #282c34;
-  --theme-dark-button: #61dafb;
-  --theme-dark-button-hover: #a2e9fc;
-  --theme-dark-color-border: #3d424a;
-  --theme-dark-component-name: #61dafb;
-  --theme-dark-component-name-inverted: ##282828;
-  --theme-dark-dim: #8f949d;
-  --theme-dark-dimmer: #777d88;
-  --theme-dark-dimmest: #4f5766;
-  --theme-dark-jsx-arrow-brackets: #777d88;
-  --theme-dark-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --theme-dark-search-match: yellow;
-  --theme-dark-search-match-current: #f7923b;
-  --theme-dark-text-color: #ffffff;
-  --theme-dark-tree-node-selected: #178fb9;
-  --theme-dark-tree-node-hover: #3d424a;
+  --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-value: #cedae0;
+  --dark-color-background: #282c34;
+  --dark-color-button-background: #282c34;
+  --dark-color-button-background-focus: #3d424a;
+  --dark-color-button-background-hover: #282c34;
+  --dark-color-button: #61dafb;
+  --dark-color-button-disabled: #777d88;
+  --dark-color-button-focus: #a2e9fc;
+  --dark-color-button-hover: #a2e9fc;
+  --dark-color-border: #3d424a;
+  --dark-color-component-name: #61dafb;
+  --dark-color-component-name-inverted: ##282828;
+  --dark-color-dim: #8f949d;
+  --dark-color-dimmer: #777d88;
+  --dark-color-dimmest: #4f5766;
+  --dark-color-jsx-arrow-brackets: #777d88;
+  --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-search-match: yellow;
+  --dark-color-search-match-current: #f7923b;
+  --dark-color-text-color: #ffffff;
+  --dark-color-tree-node-selected: #178fb9;
+  --dark-color-tree-node-hover: #3d424a;
 
   /* Compact density */
   --compact-font-size-monospace-normal: 11px;

From 9cfa25bdccf1d04f20189ee745a80501ffadd7b1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 13:32:30 -0800
Subject: [PATCH 061/814] Tidied up Flow types for Bridge and Store

---
 src/backend/agent.js            |  2 +-
 src/backend/types.js            |  3 ++-
 src/devtools/store.js           |  8 ++++----
 src/devtools/views/Settings.css |  1 -
 src/hook.js                     |  7 +++----
 src/types.js                    | 10 +++++-----
 6 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index e14ec53c05a5..185c1d34a185 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -31,7 +31,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('shutdown', this.shutdown);
 
     // TODO Listen to bridge for things like selection.
-    // bridge.on('...'), this...);
+    // bridge.addListener('...'), this...);
   }
 
   highlightElementInDOM = ({
diff --git a/src/backend/types.js b/src/backend/types.js
index 62cf87d0fa80..64305c5952a9 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -48,6 +48,7 @@ export type RendererInterface = {
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getReactElementFromNative?: ?(component: NativeType) => ?Fiber,
   handleCommitFiberRoot: (fiber: Object) => void,
+  handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
@@ -63,7 +64,7 @@ export type Hook = {
 
   emit: (evt: string, data: any) => void,
   getFiberRoots: (rendererID: RendererID) => Set<Object>,
-  inject: (renderer: ReactRenderer) => string | null,
+  inject: (renderer: ReactRenderer) => number | null,
   on: (evt: string, handler: Handler) => void,
   off: (evt: string, handler: Handler) => void,
   reactDevtoolsAgent?: ?Object,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 388ae245993a..d968e1d4a27a 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -55,8 +55,8 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     this._bridge = bridge;
-    this._bridge.on('operations', this.onBridgeOperations);
-    this._bridge.on('shutdown', this.onBridgeShutdown);
+    this._bridge.addListener('operations', this.onBridgeOperations);
+    this._bridge.addListener('shutdown', this.onBridgeShutdown);
   }
 
   get numElements(): number {
@@ -405,8 +405,8 @@ export default class Store extends EventEmitter {
   onBridgeShutdown = () => {
     debug('onBridgeShutdown', 'unsubscribing from Bridge');
 
-    this._bridge.off('operations', this.onBridgeOperations);
-    this._bridge.off('shutdown', this.onBridgeShutdown);
+    this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
   // DEBUG
diff --git a/src/devtools/views/Settings.css b/src/devtools/views/Settings.css
index cb493a402a87..f92cf20de69c 100644
--- a/src/devtools/views/Settings.css
+++ b/src/devtools/views/Settings.css
@@ -1,6 +1,5 @@
 .Settings {
   width: 100%;
-  height: 100%;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
diff --git a/src/hook.js b/src/hook.js
index a0fe7b066c23..8fa9e1b610d5 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-import type { Hook } from './types';
+import type { Hook } from 'src/backend/types';
 
 declare var window: any;
 
-export function installHook(target: any): Hook {
-  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return;
+export function installHook(target: any): Hook | null {
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;
 
   function detectReactBuildType(renderer) {
     try {
@@ -124,7 +124,6 @@ export function installHook(target: any): Hook {
   }
 
   function onCommitFiberUnmount(rendererID, fiber) {
-    // TODO: can we use hook for roots too?
     const rendererInterface = rendererInterfaces.get(rendererID);
     if (rendererInterface != null) {
       rendererInterface.handleCommitFiberUnmount(fiber);
diff --git a/src/types.js b/src/types.js
index 84b0b3045ba3..3cb12e26fd92 100644
--- a/src/types.js
+++ b/src/types.js
@@ -1,10 +1,10 @@
 // @flow
 
-// TODO
-export type Bridge = any;
-
-// TODO
-export type Hook = any;
+export type Bridge = {
+  addListener(type: string, callback: Function): void,
+  removeListener(type: string, callback: Function): void,
+  send(type: string, data?: any): void,
+};
 
 export type Wall = {|
   listen: (fn: Function) => void,

From bf2f13d32a5c143aba1874995338c4c7d24bf442 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 13:37:40 -0800
Subject: [PATCH 062/814] Removed some stale TODO comments

---
 src/backend/renderer.js               | 3 +--
 src/devtools/views/SelectedElement.js | 6 +-----
 src/devtools/views/Tree.js            | 2 --
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f61d3138b16f..0fcb9e3a468f 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -829,8 +829,7 @@ export function attach(
   function getReactElementFromNative(hostInstance) {
     const fiber = renderer.findFiberByHostInstance(hostInstance);
     if (fiber != null) {
-      // TODO: type fibers.
-      const primaryFiber = getPrimaryFiber((fiber: any));
+      const primaryFiber = getPrimaryFiber(((fiber: any): Fiber));
       return primaryFiber;
     }
     return null;
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 2b6a9aeae15a..4ecf894f2c51 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -44,7 +44,7 @@ export default function SelectedElement(_: Props) {
     }
   }, [bridge, selectedElementID, store]);
 
-  // TODO Make "view DOM" and "view source" buttons work
+  // TODO Make "view source" button work
 
   if (element === null) {
     return (
@@ -184,14 +184,10 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
     const onInspectedElement = (inspectedElement: InspectedElement) => {
       if (inspectedElement && inspectedElement.id !== idRef.current) {
-        // TODO Is this sufficient? Will this leak?
         // Ignore bridge updates about previously selected elements.
         return;
       }
 
-      // TODO I think there's a bug here with stale state or a bad listener.
-      // "Cannot read property 'inspectElement' of undefined"
-
       if (inspectedElement !== null) {
         inspectedElement.context = hydrateHelper(inspectedElement.context);
         inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 9b2064042f5a..bb2bd0589da8 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -45,8 +45,6 @@ export default function Tree(props: Props) {
 
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
-    // TODO Use selectNextElement / selectPreviousElement (with dispatch)
-
     const handleKeyDown = event => {
       // eslint-disable-next-line default-case
       switch (event.key) {

From 3f40d38203137e0be84f791a6c738e0acb68f45d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 14:36:29 -0800
Subject: [PATCH 063/814] Fixed edge case mutation bugs in selected element and
 tree context

---
 src/devtools/views/SelectedElement.js | 23 +++++++++++------------
 src/devtools/views/TreeContext.js     |  1 +
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 4ecf894f2c51..27cd085e7089 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -3,7 +3,7 @@
 import React, {
   useCallback,
   useContext,
-  useLayoutEffect,
+  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -154,36 +154,35 @@ function useInspectedElement(id: number | null): InspectedElement | null {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const rendererID =
-    id === null ? null : store.getRendererIDForElement(id) || null;
-
   const [inspectedElement, setInspectedElement] = useState(null);
 
-  // Track the most recently-requested element.
-  // We'll ignore any backend updates about previous elements.
-  idRef.current = id;
+  useEffect(() => {
+    // Track the current selected element ID.
+    // We ignore any backend updates about previously selected elements.
+    idRef.current = id;
 
-  useLayoutEffect(() => {
     // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
     setInspectedElement(null);
 
     // A null id indicates that there's nothing currently selected in the tree.
-    // A null renderer ID indicates that the previously selected element has been unmounted.
-    if (id === null || rendererID === null) {
+    if (id === null) {
       return () => {};
     }
 
-    let timeoutID = null;
+    const rendererID = store.getRendererIDForElement(id) || null;
 
     // Update the $r variable.
     bridge.send('selectElement', { id, rendererID });
 
+    // Update props, state, and context in the side panel.
     const sendBridgeRequest = () => {
       bridge.send('inspectElement', { id, rendererID });
     };
 
+    let timeoutID = null;
+
     const onInspectedElement = (inspectedElement: InspectedElement) => {
-      if (inspectedElement && inspectedElement.id !== idRef.current) {
+      if (!inspectedElement || inspectedElement.id !== idRef.current) {
         // Ignore bridge updates about previously selected elements.
         return;
       }
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 079d05670c8f..4421af57790b 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -344,6 +344,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
           ownerStack = ownerStack.slice(0, indexOfRemovedItem);
           if (ownerStack.length === 0) {
             _ownerFlatTree = null;
+            ownerStackIndex = null;
           } else {
             ownerStackIndex = ownerStack.length - 1;
           }

From 04a0d24f0f78c5a87df6a3dda8511f3cdc5f81a8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 15:06:38 -0800
Subject: [PATCH 064/814] Fixed a potential source of duplicate key

---
 src/devtools/views/InspectedElementTree.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 57929f840667..84a0f0a632f1 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -97,7 +97,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
       ));
       children.unshift(
         <div
-          key="root"
+          key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft: `${depth}rem` }}
         >
@@ -110,7 +110,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
       ));
       children.unshift(
         <div
-          key="root"
+          key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft: `${depth}rem` }}
         >

From 47a5fd59cbcdbd5c390491cefe3b9fbb32bf9c44 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 15:13:43 -0800
Subject: [PATCH 065/814] Reduced tree padding (left) slightly to make larger
 trees easier to inspect

---
 src/devtools/views/Element.js               |  2 +-
 src/devtools/views/HooksTree.css            |  2 +-
 src/devtools/views/InspectedElementTree.css |  2 +-
 src/devtools/views/InspectedElementTree.js  | 18 ++++++------------
 src/devtools/views/SelectedElement.css      |  2 +-
 5 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 5fe0bc88161c..03fc88251a80 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -53,7 +53,7 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${depth - baseDepth}.25rem`,
+        paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
       <span className={styles.Component}>
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index c33c4c1d80b2..28e9b73e7a80 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -4,7 +4,7 @@
 }
 
 .HooksNode {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
 
 .NameValueRow {
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 9020a0afa472..0008e1ada286 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -25,5 +25,5 @@
 .Empty {
   color: var(--color-dimmer);
   font-style: italic;
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 84a0f0a632f1..c83e6b841872 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -55,6 +55,8 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     dataType === 'boolean' ||
     value == null;
 
+  const paddingLeft = `${depth * 0.75}rem`;
+
   let children = null;
   if (isSimpleType) {
     let displayValue = value;
@@ -65,22 +67,14 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     }
 
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{displayValue}</span>
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
@@ -99,7 +93,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Array</span>
         </div>
@@ -112,7 +106,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Object</span>
         </div>
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index baa4438d7f0b..d68ec7229aa7 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -58,7 +58,7 @@
 }
 
 .Owner {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
   cursor: pointer;
 }
 

From 0008bb00d7fc2bf2fc3493679434bc1ff2d01f18 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 14 Feb 2019 21:55:09 -0800
Subject: [PATCH 066/814] Inspectable complex hook values

---
 .../app/InspectableElements/CustomHooks.js    | 18 +++++
 src/devtools/views/HooksTree.js               | 77 ++++++++++++++-----
 src/devtools/views/InspectedElementTree.js    |  7 +-
 src/devtools/views/SettingsContext.js         |  6 +-
 4 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index 7e0b3184538a..d85528ecccc5 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -11,6 +11,16 @@ import React, {
   useState,
 } from 'react';
 
+const object = {
+  string: 'abc',
+  number: 123,
+  boolean: true,
+  null: null,
+  undefined: undefined,
+  array: ['a', 'b', 'c'],
+  object: { foo: 1, bar: 2, baz: 3 },
+};
+
 function useNestedInnerHook() {
   return useState(123);
 }
@@ -18,12 +28,20 @@ function useNestedOuterHook() {
   return useNestedInnerHook();
 }
 
+function useCustomObject() {
+  useDebugValue(object);
+  return useState(123);
+}
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
+  const [_, __] = useState(object);
 
   // Custom hook with a custom debug label
   const debouncedCount = useDebounce(count, 1000);
 
+  useCustomObject();
+
   const onClick = useCallback(
     function onClick() {
       updateCount(count + 1);
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index f2ec250820b8..3e6c6a898ef5 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { getMetaValueLabel } from './utils';
+import { KeyValue } from './InspectedElementTree';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
@@ -34,31 +35,67 @@ function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
 
   const isCustomHook = subHooks.length > 0;
 
-  // Format data for display to mimic the props/state/context for now.
   const type = typeof value;
+
   let displayValue;
-  if (isCustomHook && value === undefined) {
-    displayValue = null;
-  } else if (
-    type === 'number' ||
-    type === 'string' ||
-    type === 'boolean' ||
-    value == null
-  ) {
+  let isComplexDisplayValue = false;
+
+  // Format data for display to mimic the props/state/context for now.
+  if (type === 'number' || type === 'string' || type === 'boolean') {
     displayValue = value;
-  } else {
-    displayValue = getMetaValueLabel(value);
+  } else if (value === null) {
+    displayValue = 'null';
+  } else if (value === undefined) {
+    displayValue = null;
+  } else if (Array.isArray(value)) {
+    isComplexDisplayValue = true;
+    displayValue = 'Array';
+  } else if (type === 'object') {
+    isComplexDisplayValue = true;
+    displayValue = 'Object';
   }
 
-  return (
-    <div className={styles.HooksNode}>
-      <div className={styles.NameValueRow}>
-        <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
-        <span className={styles.Value}>{displayValue}</span>
-      </div>
-      <InnerHooksTreeView hooksTree={subHooks} />
-    </div>
-  );
+  if (isCustomHook) {
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span>
+          </div>
+          <KeyValue depth={1} name="DebugValue" value={value} />
+          <InnerHooksTreeView hooksTree={subHooks} />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
+            <span className={styles.Value}>{displayValue}</span>
+          </div>
+          <InnerHooksTreeView hooksTree={subHooks} />
+        </div>
+      );
+    }
+  } else {
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.HooksNode}>
+          <KeyValue depth={0} name={name} value={value} />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span>
+            {/* $FlowFixMe */}
+            <span className={styles.Value}>{displayValue}</span>
+          </div>
+        </div>
+      );
+    }
+  }
 }
 
 // $FlowFixMe
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index c83e6b841872..b79fa52f1856 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -47,7 +47,7 @@ type KeyValueProps = {|
   value: any,
 |};
 
-function KeyValue({ depth, name, value }: KeyValueProps) {
+export function KeyValue({ depth, name, value }: KeyValueProps) {
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -64,6 +64,10 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
       displayValue = `"${value}"`;
     } else if (dataType === 'boolean') {
       displayValue = value ? 'true' : 'false';
+    } else if (value === null) {
+      displayValue = 'null';
+    } else if (value === undefined) {
+      displayValue = 'undefined';
     }
 
     children = (
@@ -99,6 +103,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         </div>
       );
     } else {
+      // $FlowFixMe
       children = Object.entries(value).map(([name, value]) => (
         <KeyValue key={name} depth={depth + 1} name={name} value={value} />
       ));
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index 83a429c1b54a..2da5bc5822ef 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -132,13 +132,13 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-dim');
   updateStyleHelper(theme, 'color-dimmer');
   updateStyleHelper(theme, 'color-dimmest');
-  updateStyleHelper(theme, 'color-search-match');
-  updateStyleHelper(theme, 'color-search-match-current');
-  updateStyleHelper(theme, 'color-text-color');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
   updateStyleHelper(theme, 'color-tree-node-selected');
   updateStyleHelper(theme, 'color-tree-node-hover');
+  updateStyleHelper(theme, 'color-search-match');
+  updateStyleHelper(theme, 'color-search-match-current');
+  updateStyleHelper(theme, 'color-text-color');
 }
 
 export { SettingsContext, SettingsContextController };

From 2fbacbff01b722bc61aa1d5835286993905ecf84 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Feb 2019 11:42:55 -0800
Subject: [PATCH 067/814] Tab bar resizes properly for narrow screens

---
 .../app/InspectableElements/CustomHooks.js    |  2 ++
 src/devtools/views/HooksTree.js               |  1 -
 src/devtools/views/TabBar.css                 | 23 +++++++++++++++++++
 src/devtools/views/TabBar.js                  | 14 +++++++----
 src/devtools/views/hooks.js                   |  3 ++-
 5 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index d85528ecccc5..d982d8a88d1e 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -35,6 +35,8 @@ function useCustomObject() {
 
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
+
+  // eslint-disable-next-line no-unused-vars
   const [_, __] = useState(object);
 
   // Custom hook with a custom debug label
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 3e6c6a898ef5..303130a2cc91 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { getMetaValueLabel } from './utils';
 import { KeyValue } from './InspectedElementTree';
 import styles from './HooksTree.css';
 
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 296ac7f28ec6..bea7b877cc41 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -9,6 +9,10 @@
   font-size: var(--font-size-sans-large);
 }
 
+.DevToolsVersion:before {
+  content: 'DevTools ';
+}
+
 .Tabs {
   flex: 1 1 auto;
   display: flex;
@@ -49,3 +53,22 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+
+.TabLabel {
+}
+
+@media screen and (max-width: 600px) {
+  .Icon {
+    margin-right: 0;
+  }
+
+  .TabLabel {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .DevToolsVersion:before {
+    content: '';
+  }
+}
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index 6819cb553c64..63b21ecd9fc9 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -21,10 +21,14 @@ export default function TabBar({ currentTab, selectTab }: Props) {
 
   return (
     <div className={styles.TabBar}>
-      <ReactLogo /> DevTools {process.env.DEVTOOLS_VERSION}
+      <ReactLogo />
+      <span className={styles.DevToolsVersion}>
+        {process.env.DEVTOOLS_VERSION}
+      </span>
       <div className={styles.Tabs}>
         <label
           className={currentTab === 'elements' ? styles.TabCurrent : styles.Tab}
+          title="React Elements"
         >
           <input
             type="radio"
@@ -35,10 +39,11 @@ export default function TabBar({ currentTab, selectTab }: Props) {
             onChange={onChange}
           />
           <Icon className={styles.Icon} type="elements" />
-          Elements
+          <span className={styles.TabLabel}>Elements</span>
         </label>
         <label
           className={currentTab === 'profiler' ? styles.TabCurrent : styles.Tab}
+          title="React Profiler"
         >
           <input
             type="radio"
@@ -49,10 +54,11 @@ export default function TabBar({ currentTab, selectTab }: Props) {
             onChange={onChange}
           />
           <Icon className={styles.Icon} type="profiler" />
-          Profiler
+          <span className={styles.TabLabel}>Profiler</span>
         </label>
         <label
           className={currentTab === 'settings' ? styles.TabCurrent : styles.Tab}
+          title="React Settings"
         >
           <input
             type="radio"
@@ -63,7 +69,7 @@ export default function TabBar({ currentTab, selectTab }: Props) {
             onChange={onChange}
           />
           <Icon className={styles.Icon} type="settings" />
-          Settings
+          <span className={styles.TabLabel}>Settings</span>
         </label>
       </div>
     </div>
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index a9c0be76114c..11d67fa1d3b0 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -30,7 +30,8 @@ export function useLocalStorage<T>(
     }
   };
 
-  // Listen for changes in other extension panels.
+  // Listen for changes to this local storage value made from other windows.
+  // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
   useLayoutEffect(() => {
     const onStorage = event => {
       const newValue = getValueFromLocalStorage();

From 1d950981777f2be21e3f8426e96d233e221c5f33 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Feb 2019 08:29:26 -0800
Subject: [PATCH 068/814] Implemented select-DOM-element button

---
 src/backend/agent.js                         | 58 +++++++++++++++++++-
 src/backend/renderer.js                      | 17 ++++--
 src/backend/types.js                         |  5 +-
 src/devtools/store.js                        |  2 +-
 src/devtools/views/InspectHostNodesToggle.js | 41 ++++++++++++++
 src/devtools/views/Toggle.css                | 40 ++++++++++++++
 src/devtools/views/Toggle.js                 | 50 +++++++++++++++++
 src/devtools/views/Tree.js                   | 10 +---
 src/devtools/views/TreeContext.js            | 14 ++++-
 9 files changed, 218 insertions(+), 19 deletions(-)
 create mode 100644 src/devtools/views/InspectHostNodesToggle.js
 create mode 100644 src/devtools/views/Toggle.css
 create mode 100644 src/devtools/views/Toggle.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 185c1d34a185..4876921c785c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -28,10 +28,21 @@ export default class Agent extends EventEmitter {
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('selectElement', this.selectElement);
+    bridge.addListener('startInspectingDOM', this.startInspectingDOM);
+    bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('shutdown', this.shutdown);
+  }
 
-    // TODO Listen to bridge for things like selection.
-    // bridge.addListener('...'), this...);
+  getIDForNode(node: Object): number | null {
+    for (let rendererID in this._rendererInterfaces) {
+      // A renderer will throw if it can't find a fiber for the specified node.
+      try {
+        // $FlowFixMe
+        const renderer = this._rendererInterfaces[rendererID];
+        return renderer.getFiberIDFromNative(node, true);
+      } catch (e) {}
+    }
+    return null;
   }
 
   highlightElementInDOM = ({
@@ -98,6 +109,20 @@ export default class Agent extends EventEmitter {
     this.emit('shutdown');
   };
 
+  startInspectingDOM = () => {
+    window.addEventListener('click', this._onClick);
+    window.addEventListener('mousedown', this._onMouseDown);
+    window.addEventListener('mouseover', this._onMouseOver);
+  };
+
+  stopInspectingDOM = () => {
+    hideOverlay();
+
+    window.removeEventListener('click', this._onClick);
+    window.removeEventListener('mousedown', this._onMouseDown);
+    window.removeEventListener('mouseover', this._onMouseOver);
+  };
+
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
 
@@ -107,4 +132,33 @@ export default class Agent extends EventEmitter {
     // this._bridge.send('operations', operations, [operations.buffer]);
     this._bridge.send('operations', operations);
   };
+
+  _onClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.stopInspectingDOM();
+    this._bridge.send('stopInspectingDOM');
+  };
+
+  _onMouseDown = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = ((event.target: any): HTMLElement);
+    const id = this.getIDForNode(target);
+
+    if (id !== null) {
+      this._bridge.send('selectFiber', id);
+    }
+  };
+
+  _onMouseOver = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = ((event.target: any): HTMLElement);
+
+    showOverlay(target, target.tagName.toLowerCase());
+  };
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 0fcb9e3a468f..8114e2a89887 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -826,11 +826,18 @@ export function attach(
       return null;
     }
   }
-  function getReactElementFromNative(hostInstance) {
-    const fiber = renderer.findFiberByHostInstance(hostInstance);
+  function getFiberIDFromNative(
+    hostInstance,
+    findNearestUnfilteredAncestor = false
+  ) {
+    let fiber = renderer.findFiberByHostInstance(hostInstance);
     if (fiber != null) {
-      const primaryFiber = getPrimaryFiber(((fiber: any): Fiber));
-      return primaryFiber;
+      if (findNearestUnfilteredAncestor) {
+        while (fiber !== null && shouldFilterFiber(fiber)) {
+          fiber = fiber.return;
+        }
+      }
+      return getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
     }
     return null;
   }
@@ -1150,8 +1157,8 @@ export function attach(
   }
 
   return {
+    getFiberIDFromNative,
     getNativeFromReactElement,
-    getReactElementFromNative,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
diff --git a/src/backend/types.js b/src/backend/types.js
index 64305c5952a9..f9dbbe0e4991 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -46,7 +46,10 @@ export type ReactRenderer = {
 export type RendererInterface = {
   cleanup: () => void,
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
-  getReactElementFromNative?: ?(component: NativeType) => ?Fiber,
+  getFiberIDFromNative: (
+    component: NativeType,
+    findNearestUnfilteredAncestor?: boolean
+  ) => number | null,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d968e1d4a27a..511812430dee 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -130,7 +130,7 @@ export default class Store extends EventEmitter {
     const element = this._idToElement.get(id);
 
     if (element == null) {
-      console.warn(`No element found with id "${id}`);
+      console.warn(`No element found with id "${id}"`);
 
       return null;
     }
diff --git a/src/devtools/views/InspectHostNodesToggle.js b/src/devtools/views/InspectHostNodesToggle.js
new file mode 100644
index 000000000000..2546059cd904
--- /dev/null
+++ b/src/devtools/views/InspectHostNodesToggle.js
@@ -0,0 +1,41 @@
+// @flow
+
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { BridgeContext } from './context';
+import Toggle from './Toggle';
+import ButtonIcon from './ButtonIcon';
+
+export default function InspectHostNodesToggle() {
+  const [isInspecting, setIsInspecting] = useState(false);
+  const bridge = useContext(BridgeContext);
+
+  const handleChange = useCallback(
+    (isChecked: boolean) => {
+      setIsInspecting(isChecked);
+
+      if (isChecked) {
+        bridge.send('startInspectingDOM');
+      } else {
+        bridge.send('stopInspectingDOM');
+      }
+    },
+    [bridge]
+  );
+
+  useEffect(() => {
+    const onStopInspectingDOM = () => setIsInspecting(false);
+    bridge.addListener('stopInspectingDOM', onStopInspectingDOM);
+    return () =>
+      bridge.removeListener('stopInspectingDOM', onStopInspectingDOM);
+  }, [bridge]);
+
+  return (
+    <Toggle
+      onChange={handleChange}
+      isChecked={isInspecting}
+      title="Select an element in the page to inspect it"
+    >
+      <ButtonIcon type="search" />
+    </Toggle>
+  );
+}
diff --git a/src/devtools/views/Toggle.css b/src/devtools/views/Toggle.css
new file mode 100644
index 000000000000..2173f2f7f07a
--- /dev/null
+++ b/src/devtools/views/Toggle.css
@@ -0,0 +1,40 @@
+.ToggleDisabled,
+.ToggleOn,
+.ToggleOff {
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.ToggleOff {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+}
+.ToggleOff:hover {
+  background: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+
+.ToggleOn,
+.ToggleOn:active,
+.ToggleOn:focus {
+  background: var(--color-button-background-focus);
+  color: var(--color-button-focus);
+  outline: none;
+}
+
+.ToggleDisabled {
+  background: var(--color-button-background);
+  color: var(--color-button-disabled);
+  cursor: default;
+}
+
+.Input {
+  width: 0;
+  margin: 0;
+  opacity: 0;
+}
diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
new file mode 100644
index 000000000000..43803f25bc56
--- /dev/null
+++ b/src/devtools/views/Toggle.js
@@ -0,0 +1,50 @@
+// @flow
+
+import React, { useCallback } from 'react';
+
+import styles from './Toggle.css';
+
+type Props = {
+  children: React$Node,
+  className?: string,
+  isChecked: boolean,
+  isDisabled?: boolean,
+  onChange: (isChecked: boolean) => void,
+};
+
+export default function Toggle({
+  children,
+  className = '',
+  isDisabled = false,
+  isChecked,
+  onChange,
+}: Props) {
+  let defaultClassName;
+  if (isDisabled) {
+    defaultClassName = styles.ToggleDisabled;
+  } else if (isChecked) {
+    defaultClassName = styles.ToggleOn;
+  } else {
+    defaultClassName = styles.ToggleOff;
+  }
+
+  const handleChange = useCallback(
+    ({ target }) => {
+      onChange(target.checked);
+    },
+    [onChange]
+  );
+
+  return (
+    <label className={`${defaultClassName} ${className}`}>
+      <input
+        type="checkbox"
+        className={styles.Input}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={handleChange}
+      />
+      {children}
+    </label>
+  );
+}
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index bb2bd0589da8..1416d8ea8133 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -11,9 +11,8 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from './SettingsContext';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
 import Element from './Element';
+import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
 
@@ -85,12 +84,7 @@ export default function Tree(props: Props) {
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
-        <Button
-          className={styles.IconButton}
-          title="Select an element in the page to inspect it"
-        >
-          <ButtonIcon type="search" />
-        </Button>
+        <InspectHostNodesToggle />
       </div>
       <div className={styles.AutoSizerWrapper}>
         <AutoSizer>
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 4421af57790b..9d743e535881 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -26,7 +26,7 @@ import React, {
   useReducer,
 } from 'react';
 import { createRegExp } from './utils';
-import { StoreContext } from './context';
+import { BridgeContext, StoreContext } from './context';
 import Store from '../store';
 
 import type { Element } from 'src/devtools/types';
@@ -470,7 +470,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
 function TreeContextController({ children }: {| children: React$Node |}) {
+  const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+
   const initialRevision = useMemo(() => store.revision, [store]);
 
   // This reducer is created inline because it needs access to the Store.
@@ -596,6 +598,14 @@ function TreeContextController({ children }: {| children: React$Node |}) {
     [state]
   );
 
+  // Listen for host element selections.
+  useEffect(() => {
+    const handleSelectFiber = (id: number) =>
+      dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id });
+    bridge.addListener('selectFiber', handleSelectFiber);
+    return () => bridge.removeListener('selectFiber', handleSelectFiber);
+  }, [bridge, dispatch]);
+
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
     const handleStoreMutated = ([
@@ -622,7 +632,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {
     store.addListener('mutated', handleStoreMutated);
 
     return () => store.removeListener('mutated', handleStoreMutated);
-  }, [store]);
+  }, [dispatch, store]);
 
   return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
 }

From c4d6fdbfdbc13885d9abcd493d16bfb607e8f373 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Feb 2019 08:33:38 -0800
Subject: [PATCH 069/814] Fixed overlay position bug

---
 src/backend/views/Overlay.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 1ed017fb0f8e..41858e28791f 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -15,7 +15,7 @@ type Rect = {
 // because it highlights elements in the main Chrome window (outside of devtools).
 // The colors below were chosen to roughly match those used by Chrome devtools.
 export default class Overlay {
-  win: Object;
+  window: window;
   container: HTMLElement;
   node: HTMLElement;
   border: HTMLElement;
@@ -26,8 +26,14 @@ export default class Overlay {
   dimSpan: HTMLElement;
 
   constructor() {
-    const doc = window.document;
-    this.win = window;
+    // Find the root window, because overlays are positioned relative to it.
+    let currentWindow = window;
+    while (currentWindow !== currentWindow.parent) {
+      currentWindow = currentWindow.parent;
+    }
+
+    const doc = currentWindow.document;
+    this.window = currentWindow;
     this.container = doc.createElement('div');
     this.node = doc.createElement('div');
     this.border = doc.createElement('div');
@@ -93,7 +99,7 @@ export default class Overlay {
     if (node.nodeType !== Node.ELEMENT_NODE) {
       return;
     }
-    const box = getNestedBoundingClientRect(node, this.win);
+    const box = getNestedBoundingClientRect(node, this.window);
     const dims = getElementDimensions(node);
 
     boxWrap(dims, 'margin', this.node);
@@ -133,7 +139,7 @@ export default class Overlay {
         height: box.height + dims.marginTop + dims.marginBottom,
         width: box.width + dims.marginLeft + dims.marginRight,
       },
-      this.win
+      this.window
     );
     assign(this.tip.style, tipPos);
   }

From 6c226b0c806cbca2751b60a6a7788cf8b3a98120 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Feb 2019 09:46:10 -0800
Subject: [PATCH 070/814] Added link to now.sh preview to README

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index daa28dacd944..4f4dc5a0ec10 100644
--- a/README.md
+++ b/README.md
@@ -4,4 +4,6 @@ To get started...
 ```
 yarn install
 yarn start
-```
\ No newline at end of file
+```
+
+A preview build of this rewrite is available at [react-devtools-experimental.now.sh](https://react-devtools-experimental.now.sh/).
\ No newline at end of file

From a4212dcdce1b5cbaf8d436871b1fe8968814a358 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Feb 2019 13:07:39 -0800
Subject: [PATCH 071/814] Support editable props, state, and context values

---
 .../dev/app/EditableProps/EditableProps.css   |  13 ++
 shells/dev/app/EditableProps/EditableProps.js |  57 +++++++++
 shells/dev/app/EditableProps/index.js         |   5 +
 shells/dev/app/index.js                       |   2 +
 src/backend/agent.js                          |  46 ++++++-
 src/backend/renderer.js                       |  69 +++++++++--
 src/backend/types.js                          |   3 +
 src/backend/utils.js                          |  34 ++++++
 src/devtools/types.js                         |  23 ++--
 src/devtools/views/Element.js                 |   5 +-
 src/devtools/views/InspectedElementTree.css   |  28 +++++
 src/devtools/views/InspectedElementTree.js    | 114 ++++++++++++++++--
 src/devtools/views/SelectedElement.js         |  63 ++++++++--
 src/devtools/views/SettingsContext.js         |   1 +
 src/devtools/views/root.css                   |   2 +
 15 files changed, 428 insertions(+), 37 deletions(-)
 create mode 100644 shells/dev/app/EditableProps/EditableProps.css
 create mode 100644 shells/dev/app/EditableProps/EditableProps.js
 create mode 100644 shells/dev/app/EditableProps/index.js

diff --git a/shells/dev/app/EditableProps/EditableProps.css b/shells/dev/app/EditableProps/EditableProps.css
new file mode 100644
index 000000000000..b1ebb8ee71d0
--- /dev/null
+++ b/shells/dev/app/EditableProps/EditableProps.css
@@ -0,0 +1,13 @@
+.App {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.Header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
diff --git a/shells/dev/app/EditableProps/EditableProps.js b/shells/dev/app/EditableProps/EditableProps.js
new file mode 100644
index 000000000000..af8d7f901fb8
--- /dev/null
+++ b/shells/dev/app/EditableProps/EditableProps.js
@@ -0,0 +1,57 @@
+// @flow
+
+import React, { createContext, Component, Fragment } from 'react';
+import styles from './EditableProps.css';
+
+type StatefulFunctionProps = {| count: number |};
+
+function StatefulFunction({ count }: StatefulFunctionProps) {
+  return <li>Count: {count}</li>;
+}
+
+const BoolContext = createContext(true);
+// $FlowFixMe Flow does not yet know about Context.displayName
+BoolContext.displayName = 'BoolContext';
+
+type Props = {| name: string, toggle: boolean |};
+type State = {| cities: Array<string>, state: string |};
+
+class StatefulClass extends Component<Props, State> {
+  static contextType = BoolContext;
+
+  state: State = {
+    cities: ['San Francisco', 'San Jose'],
+    state: 'California',
+  };
+
+  handleChange = ({ target }) =>
+    this.setState({
+      state: target.value,
+    });
+
+  render() {
+    return (
+      <Fragment>
+        <li>Name: {this.props.name}</li>
+        <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
+        <li>
+          State: <input value={this.state.state} onChange={this.handleChange} />
+        </li>
+        <li>Cities: {this.state.cities.join(', ')}</li>
+        <li>Context: {this.context ? 'true' : 'false'}</li>
+      </Fragment>
+    );
+  }
+}
+
+export default function EditableProps() {
+  return (
+    <div className={styles.App}>
+      <div className={styles.Header}>Editable props</div>
+      <ul>
+        <StatefulClass name="Brian" toggle={true} />
+        <StatefulFunction count={1} />
+      </ul>
+    </div>
+  );
+}
diff --git a/shells/dev/app/EditableProps/index.js b/shells/dev/app/EditableProps/index.js
new file mode 100644
index 000000000000..a57026743b86
--- /dev/null
+++ b/shells/dev/app/EditableProps/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+import EditableProps from './EditableProps';
+
+export default EditableProps;
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index c04798ac80ef..77a8093b42a7 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -4,6 +4,7 @@
 
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import ToDoList from './ToDoList';
@@ -24,6 +25,7 @@ function mountTestApp() {
   mountHelper(ToDoList);
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
+  mountHelper(EditableProps);
 }
 
 function unmountTestApp() {
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 4876921c785c..3848f7b88004 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -18,6 +18,18 @@ const debug = (methodName, ...args) => {
   }
 };
 
+type InspectSelectParams = {|
+  id: number,
+  rendererID: number,
+|};
+
+type SetInParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
@@ -27,6 +39,9 @@ export default class Agent extends EventEmitter {
 
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideProps', this.overrideProps);
+    bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
@@ -80,7 +95,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  inspectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+  inspectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -89,7 +104,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  selectElement = ({ id, rendererID }: { id: number, rendererID: number }) => {
+  selectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -98,6 +113,33 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  overrideContext = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInContext(id, path, value);
+    }
+  };
+
+  overrideProps = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInProps(id, path, value);
+    }
+  };
+
+  overrideState = ({ id, path, rendererID, value }: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInState(id, path, value);
+    }
+  };
+
   setRendererInterface(
     rendererID: RendererID,
     rendererInterface: RendererInterface
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8114e2a89887..f856431317bb 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2,7 +2,8 @@
 
 import { gte } from 'semver';
 import {
-  ElementTypeClassOrFunction,
+  ElementTypeClass,
+  ElementTypeFunction,
   ElementTypeContext,
   ElementTypeForwardRef,
   ElementTypeMemo,
@@ -12,7 +13,7 @@ import {
   ElementTypeSuspense,
 } from 'src/devtools/types';
 import { getDisplayName, utfEncodeString } from '../utils';
-import { cleanForBridge } from './utils';
+import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
@@ -193,6 +194,8 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
+  const { overrideProps } = renderer;
+
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
       const fiberData = getDataForFiber(fiber);
@@ -295,13 +298,19 @@ export function attach(
 
     switch (tag) {
       case ClassComponent:
-      case FunctionComponent:
       case IncompleteClassComponent:
+        fiberData = {
+          displayName: getDisplayName(resolvedType),
+          key,
+          type: ElementTypeClass,
+        };
+        break;
+      case FunctionComponent:
       case IndeterminateComponent:
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
-          type: ElementTypeClassOrFunction,
+          type: ElementTypeFunction,
         };
         break;
       case ForwardRef:
@@ -1072,7 +1081,7 @@ export function attach(
       tag === IncompleteClassComponent ||
       tag === IndeterminateComponent
     ) {
-      if (stateNode && Object.keys(stateNode.context).length > 0) {
+      if (stateNode && stateNode.context != null) {
         context = stateNode.context;
       }
     } else if (
@@ -1135,7 +1144,7 @@ export function attach(
       id,
 
       // Does the current renderer support editable props/state/hooks?
-      canEditValues: false, // TODO
+      canEditFunctionProps: typeof overrideProps === 'function',
 
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
@@ -1156,6 +1165,49 @@ export function attach(
     };
   }
 
+  function setInProps(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (instance === null) {
+        if (typeof overrideProps === 'function') {
+          overrideProps(fiber, path, value);
+        }
+      } else {
+        fiber.pendingProps = copyWithSet(instance.props, path, value);
+        instance.forceUpdate();
+      }
+    }
+  }
+
+  function setInState(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      setInObject(instance.state, path, value);
+      instance.forceUpdate();
+    }
+  }
+
+  function setInContext(id: number, path: Array<string | number>, value: any) {
+    // To simplify hydration and display of primative context values (e.g. number, string)
+    // the inspectElement() method wraps context in a {value: ...} object.
+    // We need to remove the first part of the path (the "value") before continuing.
+    path = path.slice(1);
+
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (path.length === 0) {
+        // Simple context value
+        instance.context = value;
+      } else {
+        setInObject(instance.context, path, value);
+      }
+      instance.forceUpdate();
+    }
+  }
+
   return {
     getFiberIDFromNative,
     getNativeFromReactElement,
@@ -1164,7 +1216,10 @@ export function attach(
     inspectElement,
     selectElement,
     cleanup,
-    walkTree,
     renderer,
+    setInContext,
+    setInProps,
+    setInState,
+    walkTree,
   };
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index f9dbbe0e4991..7578554e4e90 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -55,6 +55,9 @@ export type RendererInterface = {
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
+  setInProps: (id: number, path: Array<string | number>, value: any) => void,
+  setInState: (id: number, path: Array<string | number>, value: any) => void,
+  setInContext: (id: number, path: Array<string | number>, value: any) => void,
   walkTree: () => void,
 };
 
diff --git a/src/backend/utils.js b/src/backend/utils.js
index dea4abfd6e58..ddb11eca1229 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -16,3 +16,37 @@ export function cleanForBridge(data: Object | null): DehydratedData | null {
     return null;
   }
 }
+
+export function copyWithSet(
+  obj: Object | Array<any>,
+  path: Array<string | number>,
+  value: any,
+  index: number = 0
+): Object | Array<any> {
+  if (index >= path.length) {
+    return value;
+  }
+  const key = path[index];
+  const updated = Array.isArray(obj) ? obj.slice() : { ...obj };
+  // $FlowFixMe number or string is fine here
+  updated[key] = copyWithSet(obj[key], path, value, index + 1);
+  return updated;
+}
+
+export function setInObject(
+  object: Object,
+  path: Array<string | number>,
+  value: any
+) {
+  const last = path.pop();
+  if (object != null) {
+    const parent: Object = path.reduce(
+      // $FlowFixMe
+      (reduced, attribute) => reduced[attribute],
+      object
+    );
+    if (parent) {
+      parent[last] = value;
+    }
+  }
+}
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 59cddbfd108c..9b08e5f30e5f 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -1,18 +1,19 @@
 // @flow
 
-export const ElementTypeClassOrFunction = 1;
-export const ElementTypeContext = 2;
-export const ElementTypeForwardRef = 3;
-export const ElementTypeMemo = 4;
-export const ElementTypeOtherOrUnknown = 5;
-export const ElementTypeProfiler = 6;
-export const ElementTypeRoot = 7;
-export const ElementTypeSuspense = 8;
+export const ElementTypeClass = 1;
+export const ElementTypeFunction = 2;
+export const ElementTypeContext = 3;
+export const ElementTypeForwardRef = 4;
+export const ElementTypeMemo = 5;
+export const ElementTypeOtherOrUnknown = 6;
+export const ElementTypeProfiler = 7;
+export const ElementTypeRoot = 8;
+export const ElementTypeSuspense = 9;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
@@ -47,8 +48,8 @@ export type Owner = {|
 export type InspectedElement = {|
   id: number,
 
-  // Does the current renderer support editable props/state/hooks?
-  canEditValues: boolean,
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
 
   // Inspectable properties.
   context: Object | null,
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 03fc88251a80..7006032af195 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Fragment, useCallback, useContext, useMemo } from 'react';
-import { ElementTypeClassOrFunction } from 'src/devtools/types';
+import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
 
@@ -42,7 +42,8 @@ export default function ElementView({ index, style }: Props) {
   );
 
   const isSelected = selectedElementID === id;
-  const showDollarR = isSelected && type === ElementTypeClassOrFunction;
+  const showDollarR =
+    isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
   // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
 
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 0008e1ada286..014fdfc2b07e 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -7,16 +7,44 @@
 }
 
 .Item {
+  display: flex;
 }
 
 .Name {
   color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.Name:after {
+  content: ': ';
+  color: var(--color-text-color);
+  margin-right: 0.5rem;
 }
 
 .Value {
   color: var(--color-attribute-value);
 }
 
+.ValueInputLabel {
+  flex: 1 1 100%;
+}
+.ValueInputLabel:focus-within {
+  background-color: var(--color-button-background-focus);
+}
+
+.ValueInput {
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  width: 100%;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+.ValueInput:focus {
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}
+
 .None {
   color: var(--color-dimmer);
   font-style: italic;
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index b79fa52f1856..a6b2f8648f33 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,19 +1,23 @@
 // @flow
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { getMetaValueLabel } from './utils';
 import { meta } from '../../hydration';
 import styles from './InspectedElementTree.css';
 
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
 type Props = {|
   data: Object | null,
   label: string,
+  overrideValueFn?: ?OverrideValueFn,
   showWhenEmpty?: boolean,
 |};
 
 export default function InspectedElementTree({
   data,
   label,
+  overrideValueFn,
   showWhenEmpty = false,
 }: Props) {
   const isEmpty = data === null || Object.keys(data).length === 0;
@@ -33,6 +37,8 @@ export default function InspectedElementTree({
               key={name}
               depth={1}
               name={name}
+              overrideValueFn={overrideValueFn}
+              path={[name]}
               value={(data: any)[name]}
             />
           ))}
@@ -44,10 +50,18 @@ export default function InspectedElementTree({
 type KeyValueProps = {|
   depth: number,
   name: string,
+  overrideValueFn?: ?OverrideValueFn,
+  path?: Array<any>,
   value: any,
 |};
 
-export function KeyValue({ depth, name, value }: KeyValueProps) {
+export function KeyValue({
+  depth,
+  name,
+  overrideValueFn,
+  path = [],
+  value,
+}: KeyValueProps) {
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -72,14 +86,24 @@ export function KeyValue({ depth, name, value }: KeyValueProps) {
 
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={styles.Name}>{name}</span>:{' '}
-        <span className={styles.Value}>{displayValue}</span>
+        <span className={styles.Name}>{name}</span>
+        {typeof overrideValueFn === 'function' ? (
+          <EditableValue
+            dataType={dataType}
+            overrideValueFn={overrideValueFn}
+            path={path}
+            value={value}
+          />
+        ) : (
+          <span className={styles.Value}>{displayValue}</span>
+        )}
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
+    // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={styles.Name}>{name}</span>:{' '}
+        <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
@@ -90,6 +114,8 @@ export function KeyValue({ depth, name, value }: KeyValueProps) {
           key={index}
           depth={depth + 1}
           name={index}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(index)}
           value={value[index]}
         />
       ));
@@ -99,13 +125,21 @@ export function KeyValue({ depth, name, value }: KeyValueProps) {
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={styles.Name}>{name}</span>: <span>Array</span>
+          <span className={styles.Name}>{name}</span>
+          <span>Array</span>
         </div>
       );
     } else {
       // $FlowFixMe
       children = Object.entries(value).map(([name, value]) => (
-        <KeyValue key={name} depth={depth + 1} name={name} value={value} />
+        <KeyValue
+          key={name}
+          depth={depth + 1}
+          name={name}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(name)}
+          value={value}
+        />
       ));
       children.unshift(
         <div
@@ -113,7 +147,8 @@ export function KeyValue({ depth, name, value }: KeyValueProps) {
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={styles.Name}>{name}</span>: <span>Object</span>
+          <span className={styles.Name}>{name}</span>
+          <span>Object</span>
         </div>
       );
     }
@@ -121,3 +156,66 @@ export function KeyValue({ depth, name, value }: KeyValueProps) {
 
   return children;
 }
+
+type EditableValueProps = {|
+  dataType: string,
+  overrideValueFn: OverrideValueFn,
+  path: Array<string | number>,
+  value: any,
+|};
+
+function EditableValue({
+  dataType,
+  overrideValueFn,
+  path,
+  value,
+}: EditableValueProps) {
+  const [editableValue, setEditableValue] = useState(value);
+
+  const handleChange = useCallback(
+    ({ target }) => {
+      if (dataType === 'boolean') {
+        setEditableValue(target.checked);
+        overrideValueFn(path, target.checked);
+      } else if (dataType === 'number') {
+        setEditableValue(parseFloat(target.value));
+      } else {
+        setEditableValue(target.value);
+      }
+    },
+    [dataType, setEditableValue]
+  );
+
+  const handleKeyPress = useCallback(
+    ({ key }) => {
+      if (key === 'Enter') {
+        overrideValueFn(path, editableValue);
+      }
+    },
+    [path, editableValue, overrideValueFn]
+  );
+
+  const handleKeyDown = useCallback(event => event.stopPropagation(), []);
+
+  // Render different input types based on the dataType
+  let type = 'text';
+  if (dataType === 'boolean') {
+    type = 'checkbox';
+  } else if (dataType === 'number') {
+    type = 'number';
+  }
+
+  return (
+    <label className={styles.ValueInputLabel}>
+      <input
+        checked={dataType === 'boolean' ? editableValue : undefined}
+        className={styles.ValueInput}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyPress={handleKeyPress}
+        type={type}
+        value={dataType === 'boolean' ? undefined : editableValue || ''}
+      />
+    </label>
+  );
+}
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 27cd085e7089..ab57d57e94b9 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -15,9 +15,10 @@ import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
+import { ElementTypeClass, ElementTypeFunction } from '../types';
 
 import type { InspectedElement } from '../types';
-import type { DehydratedData } from 'src/devtools/types';
+import type { DehydratedData, Element } from 'src/devtools/types';
 
 export type Props = {||};
 
@@ -87,26 +88,74 @@ export default function SelectedElement(_: Props) {
       )}
 
       {inspectedElement !== null && (
-        <InspectedElementView inspectedElement={inspectedElement} />
+        <InspectedElementView
+          element={element}
+          inspectedElement={inspectedElement}
+        />
       )}
     </div>
   );
 }
 
 type InspectedElementViewProps = {|
+  element: Element,
   inspectedElement: InspectedElement,
 |};
 
-function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
-  let { context, hooks, owners, props, state } = inspectedElement;
+function InspectedElementView({
+  element,
+  inspectedElement,
+}: InspectedElementViewProps) {
+  const { id, type } = element;
+  const { context, hooks, owners, props, state } = inspectedElement;
+
   const { ownerStack } = useContext(TreeContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  let overrideContextFn = null;
+  let overridePropsFn = null;
+  let overrideStateFn = null;
+  if (type === ElementTypeClass) {
+    overrideContextFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('overrideContext', { id, path, rendererID, value });
+    };
+    overridePropsFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('overrideProps', { id, path, rendererID, value });
+    };
+    overrideStateFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('overrideState', { id, path, rendererID, value });
+    };
+  } else if (type === ElementTypeFunction) {
+    // TODO Only enable this if renderer.canEditFunctionProps is true!
+    overridePropsFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('overrideProps', { id, path, rendererID, value });
+    };
+  }
 
   return (
     <div className={styles.InspectedElement}>
-      <InspectedElementTree label="props" data={props} showWhenEmpty />
-      <InspectedElementTree label="state" data={state} />
+      <InspectedElementTree
+        label="props"
+        data={props}
+        overrideValueFn={overridePropsFn}
+        showWhenEmpty
+      />
+      <InspectedElementTree
+        label="state"
+        data={state}
+        overrideValueFn={overrideStateFn}
+      />
       <HooksTree hooksTree={hooks} />
-      <InspectedElementTree label="context" data={context} />
+      <InspectedElementTree
+        label="context"
+        data={context}
+        overrideValueFn={overrideContextFn}
+      />
 
       {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index 2da5bc5822ef..17f25f5a47f9 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -118,6 +118,7 @@ function updateDisplayDensity(displayDensity: DisplayDensity): void {
 function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-attribute-name');
   updateStyleHelper(theme, 'color-attribute-value');
+  updateStyleHelper(theme, 'color-attribute-editable-value');
   updateStyleHelper(theme, 'color-background');
   updateStyleHelper(theme, 'color-border');
   updateStyleHelper(theme, 'color-button-background');
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f8ec068351e3..cf5e4d939a13 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -6,6 +6,7 @@
   /* Light theme */
   --light-color-attribute-name: #ef6632;
   --light-color-attribute-value: #1a1aa6;
+  --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-button-background: #ffffff;
   --light-color-button-background-focus: #ebf1fb;
@@ -31,6 +32,7 @@
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
   --dark-color-attribute-value: #cedae0;
+  --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-button-background: #282c34;
   --dark-color-button-background-focus: #3d424a;

From 28ea0a352e5ed617d24962b7b9474b6c04d447a3 Mon Sep 17 00:00:00 2001
From: Jessica <jessicamfranco3@gmail.com>
Date: Tue, 19 Feb 2019 12:22:19 +0900
Subject: [PATCH 072/814] Scroll to newly selected component if it's out of
 view

---
 src/devtools/views/Element.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 7006032af195..4fa325599df5 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,6 +1,13 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
@@ -45,6 +52,13 @@ export default function ElementView({ index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
+  const component = useRef(null);
+  useEffect(() => {
+    if (isSelected && component.current !== null) {
+      component.current.scrollIntoView();
+    }
+  }, [isSelected]);
+
   // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
 
   return (
@@ -57,7 +71,7 @@ export default function ElementView({ index, style }: Props) {
         paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
-      <span className={styles.Component}>
+      <span ref={component} className={styles.Component}>
         <DisplayName displayName={displayName} id={id} />
         {key && (
           <Fragment>

From 4ee74f7e6c8b918bec5414aa6289c3009864c136 Mon Sep 17 00:00:00 2001
From: Jessica <jessicamfranco3@gmail.com>
Date: Tue, 19 Feb 2019 15:52:03 +0900
Subject: [PATCH 073/814] Fix encoding of Unicode keys greater than U+00FF
 (greater than U+FFFF handled by surrogate pairs)

---
 src/backend/renderer.js | 2 ++
 src/utils.js            | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f856431317bb..8bf1865af691 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -566,6 +566,8 @@ export function attach(
 
       if (key !== null) {
         if (typeof key === 'number') {
+          // unreachable code?
+          // https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L187
           encodedKey = new Uint8Array(1);
           encodedKey[0] = key;
         } else {
diff --git a/src/utils.js b/src/utils.js
index 0f87d8a83716..1dcd00e807ae 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -51,7 +51,7 @@ export function getUID(): number {
   return ++uidCounter;
 }
 
-export function utfDecodeString(array: Uint8Array): string {
+export function utfDecodeString(array: Uint16Array): string {
   let string = '';
   const { length } = array;
   for (let i = 0; i < length; i++) {
@@ -60,8 +60,8 @@ export function utfDecodeString(array: Uint8Array): string {
   return string;
 }
 
-export function utfEncodeString(string: string): Uint8Array {
-  const array = new Uint8Array(string.length);
+export function utfEncodeString(string: string): Uint16Array {
+  const array = new Uint16Array(string.length);
   const { length } = string;
   for (let i = 0; i < length; i++) {
     array[i] = string.charCodeAt(i);

From 65d493cae9b3697c96650ae0c973afb71c873f68 Mon Sep 17 00:00:00 2001
From: Jessica <jessicamfranco3@gmail.com>
Date: Tue, 19 Feb 2019 16:03:53 +0900
Subject: [PATCH 074/814] Just use codepoints as it'll be copied into an
 Uint32Array anyway

---
 src/utils.js | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 1dcd00e807ae..9c2c9189b97a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -51,20 +51,15 @@ export function getUID(): number {
   return ++uidCounter;
 }
 
-export function utfDecodeString(array: Uint16Array): string {
-  let string = '';
-  const { length } = array;
-  for (let i = 0; i < length; i++) {
-    string += String.fromCharCode(array[i]);
-  }
-  return string;
+export function utfDecodeString(array: Uint32Array): string {
+  return String.fromCodePoint(...array);
 }
 
-export function utfEncodeString(string: string): Uint16Array {
-  const array = new Uint16Array(string.length);
-  const { length } = string;
-  for (let i = 0; i < length; i++) {
-    array[i] = string.charCodeAt(i);
-  }
-  return array;
+export function utfEncodeString(string: string): Uint32Array {
+  // $FlowFixMe Flow's Uint32Array.from's type definition is wrong; first argument of mapFn will be string
+  return Uint32Array.from(string, toCodePoint);
+}
+
+function toCodePoint(string: string) {
+  return string.codePointAt(0);
 }

From 044e6ba9cd217a079d99a2274b3bf5f5e6d70875 Mon Sep 17 00:00:00 2001
From: Jessica <jessicamfranco3@gmail.com>
Date: Tue, 19 Feb 2019 16:36:43 +0900
Subject: [PATCH 075/814] Pass options to scrollIntoView

---
 src/devtools/views/Element.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 4fa325599df5..c1f03c2f328f 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -55,7 +55,11 @@ export default function ElementView({ index, style }: Props) {
   const component = useRef(null);
   useEffect(() => {
     if (isSelected && component.current !== null) {
-      component.current.scrollIntoView();
+      component.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
     }
   }, [isSelected]);
 

From a31415011d46d7be3302ad12777df04170adb382 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Feb 2019 08:59:27 -0800
Subject: [PATCH 076/814] Removed numeric key code

---
 src/backend/renderer.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8bf1865af691..fb841bfd221e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -565,14 +565,10 @@ export function attach(
       }
 
       if (key !== null) {
-        if (typeof key === 'number') {
-          // unreachable code?
-          // https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L187
-          encodedKey = new Uint8Array(1);
-          encodedKey[0] = key;
-        } else {
-          encodedKey = utfEncodeString(key);
-        }
+        // React$Key supports string and number types as inputs,
+        // But React converts numeric keys to strings, so we only have to handle that type here.
+        // https://github.com/facebook/react/blob/0e67969cb1ad8c27a72294662e68fa5d7c2c9783/packages/react/src/ReactElement.js#L187
+        encodedKey = utfEncodeString(((key: any): string));
       }
 
       const encodedDisplayNameSize =

From bec073365d14aba07ff98a589ab52301761e7a72 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Feb 2019 13:15:57 -0800
Subject: [PATCH 077/814] Fix hooks warnings identified by prerelease version
 of react-hooks ESLint plugin

---
 shells/dev/app/ToDoList/List.js            |  2 +-
 src/devtools/views/Element.js              | 33 +++++++++++++++-------
 src/devtools/views/InspectedElementTree.js |  2 +-
 src/devtools/views/SelectedElement.js      |  9 ++++--
 src/devtools/views/SettingsContext.js      | 11 ++++++--
 src/devtools/views/Tree.js                 |  6 +---
 src/devtools/views/TreeContext.js          | 16 +++++++++--
 src/devtools/views/hooks.js                | 31 +++++++++++---------
 8 files changed, 72 insertions(+), 38 deletions(-)

diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index 1ab1cac1f9f5..a3fe76f38809 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -34,7 +34,7 @@ export default function List(props: Props) {
       setUID(uid + 1);
       setNewItemText('');
     }
-  }, [newItemText]);
+  }, [newItemText, items, uid]);
 
   const handleKeyPress = useCallback(
     event => {
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 7006032af195..00e248041936 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -25,22 +25,35 @@ export default function ElementView({ index, style }: Props) {
 
   const element = getElementAtIndex(index);
 
-  if (element == null) {
-    console.warn(`<ElementView> Could not find element at index ${index}`);
-    return null;
-  }
-
-  const { depth, displayName, id, key, type } = ((element: any): Element);
+  const id = element === null ? null : element.id;
 
-  const handleDoubleClick = useCallback(() => selectOwner(id), [id]);
+  const handleDoubleClick = useCallback(() => {
+    if (id !== null) {
+      selectOwner(id);
+    }
+  }, [id, selectOwner]);
 
   // TODO Add click and key handlers for toggling element open/close state.
 
   const handleClick = useCallback(
-    ({ metaKey }) => selectElementByID(metaKey ? null : id),
-    [id]
+    ({ metaKey }) => {
+      if (id !== null) {
+        selectElementByID(metaKey ? null : id);
+      }
+    },
+    [id, selectElementByID]
   );
 
+  // Handle elements that are removed from the tree while an async render is in progress.
+  if (element == null) {
+    console.warn(`<ElementView> Could not find element at index ${index}`);
+
+    // This return needs to happen after hooks, since hooks can't be conditional.
+    return null;
+  }
+
+  const { depth, displayName, key, type } = ((element: any): Element);
+
   const isSelected = selectedElementID === id;
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
@@ -58,7 +71,7 @@ export default function ElementView({ index, style }: Props) {
       }}
     >
       <span className={styles.Component}>
-        <DisplayName displayName={displayName} id={id} />
+        <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>
             &nbsp;<span className={styles.AttributeName}>key</span>=
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index a6b2f8648f33..fd62500d1b43 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -183,7 +183,7 @@ function EditableValue({
         setEditableValue(target.value);
       }
     },
-    [dataType, setEditableValue]
+    [dataType, overrideValueFn, path]
   );
 
   const handleKeyPress = useCallback(
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index ab57d57e94b9..649527739e99 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -43,7 +43,7 @@ export default function SelectedElement(_: Props) {
         });
       }
     }
-  }, [bridge, selectedElementID, store]);
+  }, [bridge, element, selectedElementID, store]);
 
   // TODO Make "view source" button work
 
@@ -176,7 +176,10 @@ function InspectedElementView({
 function OwnerView({ displayName, id }: { displayName: string, id: number }) {
   const { selectElementByID } = useContext(TreeContext);
 
-  const handleClick = useCallback(() => selectElementByID(id), [id]);
+  const handleClick = useCallback(() => selectElementByID(id), [
+    id,
+    selectElementByID,
+  ]);
 
   return (
     <div
@@ -260,7 +263,7 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
       bridge.removeListener('inspectedElement', onInspectedElement);
     };
-  }, [id]);
+  }, [bridge, id, idRef, store]);
 
   return inspectedElement;
 }
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index 17f25f5a47f9..fa65fcbaefc4 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -76,7 +76,7 @@ function SettingsContextController({ browserTheme, children }: Props) {
       default:
         throw Error(`Unsupported theme value "${theme}"`);
     }
-  }, [theme]);
+  }, [browserTheme, theme]);
 
   const value = useMemo(
     () => ({
@@ -89,7 +89,14 @@ function SettingsContextController({ browserTheme, children }: Props) {
           ? compactLineHeight
           : comfortableLineHeight,
     }),
-    [displayDensity, setDisplayDensity, theme, setTheme]
+    [
+      comfortableLineHeight,
+      compactLineHeight,
+      displayDensity,
+      setDisplayDensity,
+      setTheme,
+      theme,
+    ]
   );
 
   return (
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 1416d8ea8133..a2c0bc68dc10 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -63,11 +63,7 @@ export default function Tree(props: Props) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [
-    selectedElementIndex,
-    selectNextElementInTree,
-    selectPreviousElementInTree,
-  ]);
+  }, [selectNextElementInTree, selectPreviousElementInTree]);
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 9d743e535881..3b4e04159bb3 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -595,7 +595,19 @@ function TreeContextController({ children }: {| children: React$Node |}) {
       resetOwnerStack,
       selectOwner,
     }),
-    [state]
+    [
+      getElementAtIndex,
+      goToNextSearchResult,
+      goToPreviousSearchResult,
+      resetOwnerStack,
+      selectElementAtIndex,
+      selectElementByID,
+      selectNextElementInTree,
+      selectOwner,
+      selectPreviousElementInTree,
+      setSearchText,
+      state,
+    ]
   );
 
   // Listen for host element selections.
@@ -632,7 +644,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {
     store.addListener('mutated', handleStoreMutated);
 
     return () => store.removeListener('mutated', handleStoreMutated);
-  }, [dispatch, store]);
+  }, [dispatch, initialRevision, store]);
 
   return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
 }
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 11d67fa1d3b0..c3900add8e30 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -1,13 +1,13 @@
 // @flow
 
-import { useLayoutEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
   key: string,
   initialValue: T
 ): [T, (value: T | (() => T)) => void] {
-  const getValueFromLocalStorage = () => {
+  const getValueFromLocalStorage = useCallback(() => {
     try {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -15,20 +15,23 @@ export function useLocalStorage<T>(
       console.log(error);
       return initialValue;
     }
-  };
+  }, [initialValue, key]);
 
   const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);
 
-  const setValue = value => {
-    try {
-      const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
-    } catch (error) {
-      console.log(error);
-    }
-  };
+  const setValue = useCallback(
+    value => {
+      try {
+        const valueToStore =
+          value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    [key, storedValue]
+  );
 
   // Listen for changes to this local storage value made from other windows.
   // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
@@ -45,7 +48,7 @@ export function useLocalStorage<T>(
     return () => {
       window.removeEventListener('storage', onStorage);
     };
-  }, [key, storedValue]);
+  }, [getValueFromLocalStorage, key, storedValue, setValue]);
 
   return [storedValue, setValue];
 }

From 42795b22bf4c544c110184bef9eb7ee3b9c59d42 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Feb 2019 11:03:50 -0800
Subject: [PATCH 078/814] Installed eslint-plugin-react-hooks@next and added to
 ESLint config

---
 .eslintrc    | 10 +++++++++-
 package.json |  1 +
 yarn.lock    |  5 +++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 9cf9d0090d38..7d12dff784a4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,11 @@
 {
-  "extends": ["react-app", "plugin:prettier/recommended"]
+  "extends": ["react-app","plugin:prettier/recommended"],
+  "plugins": ["react-hooks"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error"
+  },
+  "settings": {
+    "version": "detect"
+  }
 }
diff --git a/package.json b/package.json
index 585922882b70..b1e2aed710cd 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react-hooks": "^1.1.0-rc.0",
     "eslint-plugin-standard": "^3.0.1",
     "events": "^3.0.0",
     "fbjs": "0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 88e0feb9898e..d475cc5424ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3936,6 +3936,11 @@ eslint-plugin-promise@^3.7.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
   integrity sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ==
 
+eslint-plugin-react-hooks@^1.1.0-rc.0:
+  version "1.1.0-rc.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.1.0-rc.0.tgz#78a1edf2c528312875df68d6e64083b44864c947"
+  integrity sha512-ujQtPGcBgKw+diEqVxqjK60K2Mg4m4ImfF9AyTPmC6PQCjII2o7gXkLnW/B4PjnST/vbgzmwcYyUX1da7K1m8A==
+
 eslint-plugin-react@^7.7.0:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"

From 90f98372a96c54fae64651f14daf836ee428f0c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Feb 2019 11:55:48 -0800
Subject: [PATCH 079/814] Fixed broken 'shutdown' event that lead to CPU
 problems when reloading DevTools

---
 shells/browser/shared/src/contentScript.js |  2 +-
 shells/browser/shared/src/main.js          |  5 +++++
 shells/browser/shared/src/panels/utils.js  |  7 -------
 src/backend/types.js                       |  8 ++++----
 src/devtools/views/SelectedElement.js      | 10 ++++++----
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
index b98d22a649a6..19a0ba7faaf9 100644
--- a/shells/browser/shared/src/contentScript.js
+++ b/shells/browser/shared/src/contentScript.js
@@ -45,7 +45,7 @@ function handleDisconnect() {
       source: 'react-devtools-content-script',
       payload: {
         type: 'event',
-        evt: 'shutdown',
+        event: 'shutdown',
       },
     },
     '*'
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 9703b59f4650..c300e2b126d0 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -2,6 +2,7 @@
 
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/Store';
+import inject from './inject';
 
 let panelCreated = false;
 
@@ -48,6 +49,10 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge);
 
+        // Initialize the backend only once the Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        inject(chrome.runtime.getURL('build/backend.js'));
+
         if (elementsPanel !== null) {
           elementsPanel.injectBridgeAndStore(bridge, store);
         }
diff --git a/shells/browser/shared/src/panels/utils.js b/shells/browser/shared/src/panels/utils.js
index 3863f734f55a..bcc579b15ef9 100644
--- a/shells/browser/shared/src/panels/utils.js
+++ b/shells/browser/shared/src/panels/utils.js
@@ -1,9 +1,6 @@
-/* global chrome */
-
 import { createElement } from 'react';
 import { createRoot, flushSync } from 'react-dom';
 import DevTools from 'src/devtools/views/DevTools';
-import inject from '../inject';
 import { getBrowserName, getBrowserTheme } from '../utils';
 
 export function createPanel(defaultTab) {
@@ -45,9 +42,5 @@ export function createPanel(defaultTab) {
         store: injectedStore,
       })
     );
-
-    // Initialize the backend only once the DevTools frontend Store has been initialized.
-    // Otherwise the Store may miss important initial tree op codes.
-    inject(chrome.runtime.getURL('build/backend.js'));
   }
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index 7578554e4e90..85a890b50912 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -68,13 +68,13 @@ export type Hook = {
   rendererInterfaces: Map<RendererID, RendererInterface>,
   renderers: Map<RendererID, ReactRenderer>,
 
-  emit: (evt: string, data: any) => void,
+  emit: (event: string, data: any) => void,
   getFiberRoots: (rendererID: RendererID) => Set<Object>,
   inject: (renderer: ReactRenderer) => number | null,
-  on: (evt: string, handler: Handler) => void,
-  off: (evt: string, handler: Handler) => void,
+  on: (event: string, handler: Handler) => void,
+  off: (event: string, handler: Handler) => void,
   reactDevtoolsAgent?: ?Object,
-  sub: (evt: string, handler: Handler) => () => void,
+  sub: (event: string, handler: Handler) => () => void,
 
   // React uses these methods.
   checkDCE: (fn: Function) => void,
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 649527739e99..81a725cebb16 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -248,8 +248,10 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
       setInspectedElement(inspectedElement);
 
-      // Ask for an update in a second...
-      timeoutID = setTimeout(sendBridgeRequest, 1000);
+      // Ask for an update in a second.
+      // Make sure we only ask once though.
+      clearTimeout(((timeoutID: any): TimeoutID));
+      setTimeout(sendBridgeRequest, 1000);
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
@@ -257,11 +259,11 @@ function useInspectedElement(id: number | null): InspectedElement | null {
     sendBridgeRequest();
 
     return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
+
       if (timeoutID !== null) {
         clearTimeout(timeoutID);
       }
-
-      bridge.removeListener('inspectedElement', onInspectedElement);
     };
   }, [bridge, id, idRef, store]);
 

From 8cd8b29015646b65f7db7c1b39a0c9afa19612c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Feb 2019 15:58:52 -0800
Subject: [PATCH 080/814] Added support for editable hook values (pending
 facebook/react/pull/14906)

---
 src/backend/ReactDebugHooks.js             |  10 +-
 src/backend/agent.js                       |  24 +++++
 src/backend/index.js                       |   8 +-
 src/backend/renderer.js                    |  26 ++++-
 src/backend/types.js                       |  21 +++-
 src/devtools/types.js                      |   3 +
 src/devtools/views/HooksTree.css           |   9 +-
 src/devtools/views/HooksTree.js            | 119 ++++++++++++++++-----
 src/devtools/views/InspectedElementTree.js |  11 +-
 src/devtools/views/SelectedElement.js      |  15 ++-
 src/hook.js                                |   6 +-
 11 files changed, 206 insertions(+), 46 deletions(-)

diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 1c62f740aff5..86bfac4fc38f 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -225,6 +225,7 @@ type ReactCurrentDispatcher = {
 };
 
 type HooksNode = {
+  nativeHookIndex: number,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -366,6 +367,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
   const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
+  let nativeHookIndex = 0;
   const stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
     const hook = readHookLog[i];
@@ -399,6 +401,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
+          nativeHookIndex: -1,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -409,12 +412,13 @@ function buildTree(rootStack, readHookLog): HooksTree {
     levelChildren.push({
       name: hook.primitive,
       value: hook.value,
+      nativeHookIndex: hook.primitive === 'DebugValue' ? -1 : nativeHookIndex++,
       subHooks: [],
     });
   }
 
   // Associate custom hook values (useDebugValue() hook entries) with the correct hooks.
-  rollupDebugValues(rootChildren, null);
+  processDebugValues(rootChildren, null);
 
   return rootChildren;
 }
@@ -423,7 +427,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
 // That hook adds the user-provided values to the hooks tree.
 // This method removes those values (so they don't appear in DevTools),
 // and bubbles them up to the "value" attribute of their parent custom hook.
-function rollupDebugValues(
+function processDebugValues(
   hooksTree: HooksTree,
   parentHooksNode: HooksNode | null
 ): void {
@@ -436,7 +440,7 @@ function rollupDebugValues(
       i--;
       debugValueHooksNodes.push(hooksNode);
     } else {
-      rollupDebugValues(hooksNode.subHooks, hooksNode);
+      processDebugValues(hooksNode.subHooks, hooksNode);
     }
   }
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 3848f7b88004..0319026b2016 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -23,6 +23,14 @@ type InspectSelectParams = {|
   rendererID: number,
 |};
 
+type OverrideHookParams = {|
+  id: number,
+  nativeHookIndex: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
 type SetInParams = {|
   id: number,
   path: Array<string | number>,
@@ -40,6 +48,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideHook', this.overrideHook);
     bridge.addListener('overrideProps', this.overrideProps);
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('selectElement', this.selectElement);
@@ -122,6 +131,21 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  overrideHook = ({
+    id,
+    nativeHookIndex,
+    path,
+    rendererID,
+    value,
+  }: OverrideHookParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInHook(id, nativeHookIndex, path, value);
+    }
+  };
+
   overrideProps = ({ id, path, rendererID, value }: SetInParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/backend/index.js b/src/backend/index.js
index 895096ba4c43..4b08474056b8 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,11 +1,15 @@
 // @flow
 
-import type { Hook, ReactRenderer, RendererInterface } from './types';
+import type { DevToolsHook, ReactRenderer, RendererInterface } from './types';
 import Agent from './agent';
 
 import { attach } from './renderer';
 
-export function initBackend(hook: Hook, agent: Agent, global: Object): void {
+export function initBackend(
+  hook: DevToolsHook,
+  agent: Agent,
+  global: Object
+): void {
   const subs = [
     hook.sub(
       'renderer-attached',
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index fb841bfd221e..42ebfb65eae3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -24,8 +24,8 @@ import { getUID } from '../utils';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
+  DevToolsHook,
   Fiber,
-  Hook,
   ReactRenderer,
   FiberData,
   RendererInterface,
@@ -151,7 +151,7 @@ function getInternalReactConstants(version) {
 }
 
 export function attach(
-  hook: Hook,
+  hook: DevToolsHook,
   rendererID: number,
   renderer: ReactRenderer,
   global: Object
@@ -194,7 +194,7 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
-  const { overrideProps } = renderer;
+  const { overrideHook, overrideProps } = renderer;
 
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
@@ -1141,7 +1141,10 @@ export function attach(
     return {
       id,
 
-      // Does the current renderer support editable props/state/hooks?
+      // Does the current renderer support editable hooks?
+      canEditHooks: typeof overrideHook === 'function',
+
+      // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
 
       // Inspectable properties.
@@ -1163,6 +1166,20 @@ export function attach(
     };
   }
 
+  function setInHook(
+    id: number,
+    nativeHookIndex: number,
+    path: Array<string | number>,
+    value: any
+  ) {
+    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    if (fiber !== null) {
+      if (typeof overrideHook === 'function') {
+        overrideHook(fiber, nativeHookIndex, path, value);
+      }
+    }
+  }
+
   function setInProps(id: number, path: Array<string | number>, value: any) {
     const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
     if (fiber !== null) {
@@ -1216,6 +1233,7 @@ export function attach(
     cleanup,
     renderer,
     setInContext,
+    setInHook,
     setInProps,
     setInState,
     walkTree,
diff --git a/src/backend/types.js b/src/backend/types.js
index 85a890b50912..8ff4a670d826 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -33,6 +33,16 @@ export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
   bundleType: BundleType,
+
+  // 16.9+
+  overrideHook?: ?(
+    fiber: Object,
+    nativeHookIndex: number,
+    path: Array<string | number>,
+    value: any
+  ) => void,
+
+  // 16.7+
   overrideProps?: ?(
     fiber: Object,
     path: Array<string | number>,
@@ -55,15 +65,21 @@ export type RendererInterface = {
   inspectElement: (id: number) => InspectedElement | null,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
+  setInContext: (id: number, path: Array<string | number>, value: any) => void,
+  setInHook: (
+    id: number,
+    nativeHookIndex: number,
+    path: Array<string | number>,
+    value: any
+  ) => void,
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
-  setInContext: (id: number, path: Array<string | number>, value: any) => void,
   walkTree: () => void,
 };
 
 export type Handler = (data: any) => void;
 
-export type Hook = {
+export type DevToolsHook = {
   listeners: { [key: string]: Array<Handler> },
   rendererInterfaces: Map<RendererID, RendererInterface>,
   renderers: Map<RendererID, ReactRenderer>,
@@ -83,6 +99,7 @@ export type Hook = {
 };
 
 export type HooksNode = {
+  nativeHookIndex: number,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 9b08e5f30e5f..a6678d39ea8b 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -48,6 +48,9 @@ export type Owner = {|
 export type InspectedElement = {|
   id: number,
 
+  // Does the current renderer support editable hooks?
+  canEditHooks: boolean,
+
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 28e9b73e7a80..0d2ded185939 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -3,15 +3,22 @@
   border-top: 1px solid var(--color-border);
 }
 
-.HooksNode {
+.Hook {
   padding-left: 0.75rem;
 }
 
 .NameValueRow {
+  display: flex;
 }
 
 .Name {
   color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.Name:after {
+  content: ': ';
+  color: var(--color-text-color);
+  margin-right: 0.5rem;
 }
 
 .Value {
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 303130a2cc91..6bf51ef381d7 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -1,36 +1,67 @@
 // @flow
 
-import React from 'react';
-import { KeyValue } from './InspectedElementTree';
+import React, { useContext } from 'react';
+import { BridgeContext, StoreContext } from './context';
+import { EditableValue, KeyValue } from './InspectedElementTree';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
 
-export function HooksTreeView({ hooksTree }: { hooksTree: HooksTree | null }) {
-  if (hooksTree === null) {
+type HooksTreeViewProps = {|
+  canEditHooks: boolean,
+  hooks: HooksTree | null,
+  id: number,
+|};
+
+export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
+  if (hooks === null) {
     return null;
   } else {
     return (
       <div className={styles.HooksTreeView}>
         <div className={styles.Item}>hooks</div>
-        <InnerHooksTreeView hooksTree={hooksTree} />
+        <InnerHooksTreeView canEditHooks={canEditHooks} hooks={hooks} id={id} />
       </div>
     );
   }
 }
 
-export function InnerHooksTreeView({ hooksTree }: { hooksTree: HooksTree }) {
+type InnerHooksTreeViewProps = {|
+  canEditHooks: boolean,
+  hooks: HooksTree,
+  id: number,
+|};
+
+export function InnerHooksTreeView({
+  canEditHooks,
+  hooks,
+  id,
+}: InnerHooksTreeViewProps) {
   // $FlowFixMe "Missing type annotation for U" whatever that means
-  return hooksTree.map((hooksNode, index) => (
-    <HooksNodeView key={index} hooksNode={hooksTree[index]} />
+  return hooks.map((hook, index) => (
+    <HookView
+      key={index}
+      canEditHooks={canEditHooks}
+      hook={hooks[index]}
+      id={id}
+    />
   ));
 }
 
-function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
-  const { name, subHooks, value } = hooksNode;
+type HookViewProps = {|
+  canEditHooks: boolean,
+  hook: HooksNode,
+  id: number,
+  path?: Array<any>,
+|};
+
+function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
+  const { name, nativeHookIndex, subHooks, value } = hook;
+
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
 
   // TODO Add click and key handlers for toggling element open/close state.
-  // TODO Support editable props
 
   const isCustomHook = subHooks.length > 0;
 
@@ -40,7 +71,11 @@ function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
   let isComplexDisplayValue = false;
 
   // Format data for display to mimic the props/state/context for now.
-  if (type === 'number' || type === 'string' || type === 'boolean') {
+  if (type === 'string') {
+    displayValue = `"${((value: any): string)}"`;
+  } else if (type === 'boolean') {
+    displayValue = value ? 'true' : 'false';
+  } else if (type === 'number') {
     displayValue = value;
   } else if (value === null) {
     displayValue = 'null';
@@ -57,39 +92,75 @@ function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
   if (isCustomHook) {
     if (isComplexDisplayValue) {
       return (
-        <div className={styles.HooksNode}>
+        <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.Name}>{name}: </span>
+            <span className={styles.Name}>{name}</span>
           </div>
           <KeyValue depth={1} name="DebugValue" value={value} />
-          <InnerHooksTreeView hooksTree={subHooks} />
+          <InnerHooksTreeView
+            canEditHooks={canEditHooks}
+            hooks={subHooks}
+            id={id}
+          />
         </div>
       );
     } else {
       return (
-        <div className={styles.HooksNode}>
+        <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
+            <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          <InnerHooksTreeView hooksTree={subHooks} />
+          <InnerHooksTreeView
+            canEditHooks={canEditHooks}
+            hooks={subHooks}
+            id={id}
+          />
         </div>
       );
     }
   } else {
+    let overrideValueFn = null;
+    if (canEditHooks && name === 'State') {
+      overrideValueFn = (path: Array<string | number>, value: any) => {
+        const rendererID = store.getRendererIDForElement(id);
+        bridge.send('overrideHook', {
+          id,
+          nativeHookIndex,
+          path,
+          rendererID,
+          value,
+        });
+      };
+    }
+
     if (isComplexDisplayValue) {
       return (
-        <div className={styles.HooksNode}>
-          <KeyValue depth={0} name={name} value={value} />
+        <div className={styles.Hook}>
+          <KeyValue
+            depth={0}
+            name={name}
+            overrideValueFn={overrideValueFn}
+            value={value}
+          />
         </div>
       );
     } else {
       return (
-        <div className={styles.HooksNode}>
+        <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.Name}>{name}: </span>
-            {/* $FlowFixMe */}
-            <span className={styles.Value}>{displayValue}</span>
+            <span className={styles.Name}>{name}</span>
+            {typeof overrideValueFn === 'function' ? (
+              <EditableValue
+                dataType={type}
+                overrideValueFn={overrideValueFn}
+                path={[]}
+                value={value}
+              />
+            ) : (
+              // $FlowFixMe Cannot create span element because in property children
+              <span className={styles.Value}>{displayValue}</span>
+            )}
           </div>
         </div>
       );
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index fd62500d1b43..077334c28dfa 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -26,7 +26,6 @@ export default function InspectedElementTree({
     return null;
   } else {
     // TODO Add click and key handlers for toggling element open/close state.
-    // TODO Support editable props
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.Item}>{label}</div>
@@ -164,7 +163,7 @@ type EditableValueProps = {|
   value: any,
 |};
 
-function EditableValue({
+export function EditableValue({
   dataType,
   overrideValueFn,
   path,
@@ -214,7 +213,13 @@ function EditableValue({
         onKeyDown={handleKeyDown}
         onKeyPress={handleKeyPress}
         type={type}
-        value={dataType === 'boolean' ? undefined : editableValue || ''}
+        value={
+          dataType === 'boolean'
+            ? undefined
+            : editableValue != null
+            ? editableValue
+            : ''
+        }
       />
     </label>
   );
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 81a725cebb16..f163d70e31a6 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -107,7 +107,15 @@ function InspectedElementView({
   inspectedElement,
 }: InspectedElementViewProps) {
   const { id, type } = element;
-  const { context, hooks, owners, props, state } = inspectedElement;
+  const {
+    canEditFunctionProps,
+    canEditHooks,
+    context,
+    hooks,
+    owners,
+    props,
+    state,
+  } = inspectedElement;
 
   const { ownerStack } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
@@ -129,8 +137,7 @@ function InspectedElementView({
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideState', { id, path, rendererID, value });
     };
-  } else if (type === ElementTypeFunction) {
-    // TODO Only enable this if renderer.canEditFunctionProps is true!
+  } else if (type === ElementTypeFunction && canEditFunctionProps) {
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideProps', { id, path, rendererID, value });
@@ -150,7 +157,7 @@ function InspectedElementView({
         data={state}
         overrideValueFn={overrideStateFn}
       />
-      <HooksTree hooksTree={hooks} />
+      <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} />
       <InspectedElementTree
         label="context"
         data={context}
diff --git a/src/hook.js b/src/hook.js
index 8fa9e1b610d5..e5d66c40accb 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
-import type { Hook } from 'src/backend/types';
+import type { DevToolsHook } from 'src/backend/types';
 
 declare var window: any;
 
-export function installHook(target: any): Hook | null {
+export function installHook(target: any): DevToolsHook | null {
   if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;
 
   function detectReactBuildType(renderer) {
@@ -155,7 +155,7 @@ export function installHook(target: any): Hook | null {
   const listeners = {};
   const renderers = new Map();
 
-  const hook: Hook = {
+  const hook: DevToolsHook = {
     rendererInterfaces,
     listeners,
     renderers,

From b0ccd9d89ed2145e128d912a372006b85ed0653e Mon Sep 17 00:00:00 2001
From: Michael Orishich <mishaor@ukr.net>
Date: Thu, 21 Feb 2019 20:00:11 +0200
Subject: [PATCH 081/814] added basic support for Linux

---
 package.json | 3 ++-
 yarn.lock    | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b1e2aed710cd..3bcd29ede48d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "lint": "eslint '**/*.js'",
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
-    "start": "cd ./shells/dev && open ./index.html && webpack --config webpack.config.js --watch",
+    "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
     "test": "jest",
     "test:chrome": "node ./shells/browser/chrome/test",
     "test:firefox": "node ./shells/browser/firefox/test",
@@ -86,6 +86,7 @@
     "node-libs-browser": "0.5.3",
     "nullthrows": "^1.0.0",
     "object-assign": "4.0.1",
+    "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
     "react": "^16.8.0-alpha.1",
diff --git a/yarn.lock b/yarn.lock
index d475cc5424ba..83add6462555 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7705,6 +7705,11 @@ open@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
 
+opener@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
+  integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
+
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"

From e35819e68d46096b5e995a882baab2bfb05e2fcd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 08:59:46 -0800
Subject: [PATCH 082/814] Renamed nativeHookIndex -> index

---
 src/backend/ReactDebugHooks.js  | 8 ++++----
 src/backend/agent.js            | 6 +++---
 src/backend/renderer.js         | 4 ++--
 src/backend/types.js            | 6 +++---
 src/devtools/views/HooksTree.js | 4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 86bfac4fc38f..2490ba861d36 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -225,7 +225,7 @@ type ReactCurrentDispatcher = {
 };
 
 type HooksNode = {
-  nativeHookIndex: number,
+  index: number,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -367,7 +367,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
   const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
-  let nativeHookIndex = 0;
+  let index = 0;
   const stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
     const hook = readHookLog[i];
@@ -401,7 +401,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
-          nativeHookIndex: -1,
+          index: -1,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -412,7 +412,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
     levelChildren.push({
       name: hook.primitive,
       value: hook.value,
-      nativeHookIndex: hook.primitive === 'DebugValue' ? -1 : nativeHookIndex++,
+      index: hook.primitive === 'DebugValue' ? -1 : index++,
       subHooks: [],
     });
   }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 0319026b2016..d90fa82fc0b9 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -25,7 +25,7 @@ type InspectSelectParams = {|
 
 type OverrideHookParams = {|
   id: number,
-  nativeHookIndex: number,
+  index: number,
   path: Array<string | number>,
   rendererID: number,
   value: any,
@@ -133,7 +133,7 @@ export default class Agent extends EventEmitter {
 
   overrideHook = ({
     id,
-    nativeHookIndex,
+    index,
     path,
     rendererID,
     value,
@@ -142,7 +142,7 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      renderer.setInHook(id, nativeHookIndex, path, value);
+      renderer.setInHook(id, index, path, value);
     }
   };
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 42ebfb65eae3..82bf60155a67 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1168,14 +1168,14 @@ export function attach(
 
   function setInHook(
     id: number,
-    nativeHookIndex: number,
+    index: number,
     path: Array<string | number>,
     value: any
   ) {
     const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
     if (fiber !== null) {
       if (typeof overrideHook === 'function') {
-        overrideHook(fiber, nativeHookIndex, path, value);
+        overrideHook(fiber, index, path, value);
       }
     }
   }
diff --git a/src/backend/types.js b/src/backend/types.js
index 8ff4a670d826..6a2378c66baa 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -37,7 +37,7 @@ export type ReactRenderer = {
   // 16.9+
   overrideHook?: ?(
     fiber: Object,
-    nativeHookIndex: number,
+    index: number,
     path: Array<string | number>,
     value: any
   ) => void,
@@ -68,7 +68,7 @@ export type RendererInterface = {
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
   setInHook: (
     id: number,
-    nativeHookIndex: number,
+    index: number,
     path: Array<string | number>,
     value: any
   ) => void,
@@ -99,7 +99,7 @@ export type DevToolsHook = {
 };
 
 export type HooksNode = {
-  nativeHookIndex: number,
+  index: number,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 6bf51ef381d7..173d5c6b0125 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -56,7 +56,7 @@ type HookViewProps = {|
 |};
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
-  const { name, nativeHookIndex, subHooks, value } = hook;
+  const { name, index, subHooks, value } = hook;
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -126,7 +126,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         const rendererID = store.getRendererIDForElement(id);
         bridge.send('overrideHook', {
           id,
-          nativeHookIndex,
+          index,
           path,
           rendererID,
           value,

From df4a09d9b8b34294503b5542bd4434cc6dbfe951 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 09:15:47 -0800
Subject: [PATCH 083/814] Updated flow-bin from 91 -> 93 and removed
 unnecessary fixmes

---
 package.json                                      | 2 +-
 shells/dev/app/ElementTypes/index.js              | 1 -
 shells/dev/app/InspectableElements/Contexts.js    | 9 ---------
 shells/dev/app/InspectableElements/CustomHooks.js | 1 -
 src/backend/renderer.js                           | 1 -
 src/devtools/views/InspectedElementTree.js        | 2 +-
 src/devtools/views/OwnersStack.js                 | 1 -
 src/devtools/views/SearchInput.js                 | 2 +-
 src/devtools/views/SettingsContext.js             | 1 -
 src/devtools/views/Tree.js                        | 2 +-
 src/devtools/views/TreeContext.js                 | 1 -
 src/devtools/views/context.js                     | 2 --
 yarn.lock                                         | 8 ++++----
 13 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index b1e2aed710cd..7e3cb586123a 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
     "firefox-profile": "^1.0.2",
-    "flow-bin": "^0.91.0",
+    "flow-bin": "^0.93.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "immutable": "3.7.6",
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index ccfcb5fb330c..5012f0ba8b00 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -15,7 +15,6 @@ import React, {
 } from 'react';
 
 const Context = createContext('abc');
-// $FlowFixMe Flow doesn't support this property yet.
 Context.displayName = 'ExampleContext';
 
 class ClassComponent extends Component<any> {
diff --git a/shells/dev/app/InspectableElements/Contexts.js b/shells/dev/app/InspectableElements/Contexts.js
index 12362a811eab..909ae8224231 100644
--- a/shells/dev/app/InspectableElements/Contexts.js
+++ b/shells/dev/app/InspectableElements/Contexts.js
@@ -52,31 +52,22 @@ class LegacyContextConsumer extends Component<any> {
 }
 
 const ModernContext = createContext();
-// $FlowFixMe Flow does not yet know about Context.displayName
 ModernContext.displayName = 'ModernContext';
 const ArrayContext = createContext(contextData.array);
-// $FlowFixMe Flow does not yet know about Context.displayName
 ArrayContext.displayName = 'ArrayContext';
 const BoolContext = createContext(contextData.bool);
-// $FlowFixMe Flow does not yet know about Context.displayName
 BoolContext.displayName = 'BoolContext';
 const FuncContext = createContext(contextData.func);
-// $FlowFixMe Flow does not yet know about Context.displayName
 FuncContext.displayName = 'FuncContext';
 const NumberContext = createContext(contextData.number);
-// $FlowFixMe Flow does not yet know about Context.displayName
 NumberContext.displayName = 'NumberContext';
 const StringContext = createContext(contextData.string);
-// $FlowFixMe Flow does not yet know about Context.displayName
 StringContext.displayName = 'StringContext';
 const SymbolContext = createContext(contextData.symbol);
-// $FlowFixMe Flow does not yet know about Context.displayName
 SymbolContext.displayName = 'SymbolContext';
 const NullContext = createContext(null);
-// $FlowFixMe Flow does not yet know about Context.displayName
 NullContext.displayName = 'NullContext';
 const UndefinedContext = createContext(undefined);
-// $FlowFixMe Flow does not yet know about Context.displayName
 UndefinedContext.displayName = 'UndefinedContext';
 
 class ModernContextType extends Component<any> {
diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index d982d8a88d1e..3c9ad8161b24 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -5,7 +5,6 @@ import React, {
   Fragment,
   memo,
   useCallback,
-  // $FlowFixMe Flow doesn't yet know about this hook
   useDebugValue,
   useEffect,
   useState,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 82bf60155a67..702f0c852acd 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -272,7 +272,6 @@ export function attach(
     const symbolOrNumber =
       typeof type === 'object' && type !== null ? type.$$typeof : type;
 
-    // $FlowFixMe facebook/flow/issues/2362
     return typeof symbolOrNumber === 'symbol'
       ? symbolOrNumber.toString()
       : symbolOrNumber;
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 077334c28dfa..5858074e3082 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -129,7 +129,7 @@ export function KeyValue({
         </div>
       );
     } else {
-      // $FlowFixMe
+      // $FlowFixMe "Missing type annotation for U" whatever that means
       children = Object.entries(value).map(([name, value]) => (
         <KeyValue
           key={name}
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/OwnersStack.js
index 502e11306e44..e4f0eff30a24 100644
--- a/src/devtools/views/OwnersStack.js
+++ b/src/devtools/views/OwnersStack.js
@@ -13,7 +13,6 @@ import styles from './OwnersStack.css';
 export default function OwnerStack() {
   const { ownerStack, resetOwnerStack } = useContext(TreeContext);
 
-  // $FlowFixMe "Missing type annotation for U" whatever that means
   const elements = ownerStack.map((id, index) => (
     <ElementView key={id} id={id} index={index} />
   ));
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index 8101998a15ec..b5bc2c576769 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -20,7 +20,7 @@ export default function SearchInput(props: Props) {
     setSearchText,
   } = useContext(TreeContext);
 
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
     ({ currentTarget }) => setSearchText(currentTarget.value),
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/SettingsContext.js
index fa65fcbaefc4..7898a685685e 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/SettingsContext.js
@@ -21,7 +21,6 @@ type Context = {|
 |};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
-// $FlowFixMe displayName is a valid attribute of React$ConsearchText
 SettingsContext.displayName = 'SettingsContext';
 
 type Props = {|
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index a2c0bc68dc10..27d9a9245c1e 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -30,7 +30,7 @@ export default function Tree(props: Props) {
     selectNextElementInTree,
     selectPreviousElementInTree,
   } = useContext(TreeContext);
-  const listRef = useRef<FixedSizeList<any>>();
+  const listRef = useRef<FixedSizeList<any> | null>(null);
 
   const { lineHeight } = useContext(SettingsContext);
 
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 3b4e04159bb3..a57b0a78f099 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -59,7 +59,6 @@ type Context = {|
 |};
 
 const TreeContext = createContext<Context>(((null: any): Context));
-// $FlowFixMe displayName is a valid attribute of React$ConsearchText
 TreeContext.displayName = 'TreeContext';
 
 type State = {|
diff --git a/src/devtools/views/context.js b/src/devtools/views/context.js
index 7dda145a8a77..5e25f1940ed3 100644
--- a/src/devtools/views/context.js
+++ b/src/devtools/views/context.js
@@ -7,9 +7,7 @@ import type { Bridge } from '../../types';
 import Store from '../store';
 
 export const BridgeContext = createContext<Bridge>(((null: any): Bridge));
-// $FlowFixMe displayName is a valid attribute of React$Context
 BridgeContext.displayName = 'BridgeContext';
 
 export const StoreContext = createContext<Store>(((null: any): Store));
-// $FlowFixMe displayName is a valid attribute of React$Context
 StoreContext.displayName = 'StoreContext';
diff --git a/yarn.lock b/yarn.lock
index d475cc5424ba..2f76aee0b227 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4586,10 +4586,10 @@ flatstr@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3"
 
-flow-bin@^0.91.0:
-  version "0.91.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.91.0.tgz#f5c89729f74b2ccbd47df6fbfadbdcc89cc1e478"
-  integrity sha512-j+L+xNiUYnZZ27MjVI0y2c9474ZHOvdSQq0Tjwh56mEA7tfxYqp5Dcb6aZSwvs3tGMTjCrZow9aUlZf3OoRyDQ==
+flow-bin@^0.93.0:
+  version "0.93.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.93.0.tgz#9192a08d88db2a8da0ff55e42420f44539791430"
+  integrity sha512-p8yq4ocOlpyJgOEBEj0v0GzCP25c9WP0ilFQ8hXSbrTR7RPKuR+Whr+OitlVyp8ocdX0j1MrIwQ8x28dacy1pg==
 
 flush-write-stream@^1.0.0:
   version "1.0.3"

From 2b27f63a617a3b0a4ebb8de00bb6c9b501644df8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 11:55:28 -0800
Subject: [PATCH 084/814] Updated ESLint hooks rule

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7e3cb586123a..948017761044 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-react-hooks": "^1.1.0-rc.0",
+    "eslint-plugin-react-hooks": "^1.2.0",
     "eslint-plugin-standard": "^3.0.1",
     "events": "^3.0.0",
     "fbjs": "0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 2f76aee0b227..c900dca2a708 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3936,10 +3936,10 @@ eslint-plugin-promise@^3.7.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
   integrity sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ==
 
-eslint-plugin-react-hooks@^1.1.0-rc.0:
-  version "1.1.0-rc.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.1.0-rc.0.tgz#78a1edf2c528312875df68d6e64083b44864c947"
-  integrity sha512-ujQtPGcBgKw+diEqVxqjK60K2Mg4m4ImfF9AyTPmC6PQCjII2o7gXkLnW/B4PjnST/vbgzmwcYyUX1da7K1m8A==
+eslint-plugin-react-hooks@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.2.0.tgz#a1c78e792b8d7d3e9c2a2aad28df80b9b5cd1101"
+  integrity sha512-pb/pwyHg0K3Ss/8loSwCGRSXIsvPBHWfzcP/6jeei0SgWBOyXRbcKFpGxolg0xSmph0jQKLyM27B74clbZM/YQ==
 
 eslint-plugin-react@^7.7.0:
   version "7.12.4"

From 6f118497e8f979061c27aa2fd7f10cf2b8b61b9b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 13:24:01 -0800
Subject: [PATCH 085/814] Updated editable hooks UI and added limited undo
 feature

---
 shells/dev/app/EditableProps/EditableProps.js | 86 +++++++++++++++++--
 src/backend/ReactDebugHooks.js                |  8 +-
 src/backend/types.js                          |  1 +
 src/devtools/views/ButtonIcon.js              |  9 ++
 src/devtools/views/HooksTree.js               |  5 +-
 src/devtools/views/InspectedElementTree.css   |  7 +-
 src/devtools/views/InspectedElementTree.js    | 63 ++++++++++----
 7 files changed, 150 insertions(+), 29 deletions(-)

diff --git a/shells/dev/app/EditableProps/EditableProps.js b/shells/dev/app/EditableProps/EditableProps.js
index af8d7f901fb8..13a3d970775d 100644
--- a/shells/dev/app/EditableProps/EditableProps.js
+++ b/shells/dev/app/EditableProps/EditableProps.js
@@ -1,16 +1,61 @@
 // @flow
 
-import React, { createContext, Component, Fragment } from 'react';
+import React, {
+  createContext,
+  Component,
+  Fragment,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react';
 import styles from './EditableProps.css';
 
-type StatefulFunctionProps = {| count: number |};
+const initialData = { foo: 'FOO', bar: 'BAR' };
 
-function StatefulFunction({ count }: StatefulFunctionProps) {
-  return <li>Count: {count}</li>;
+function reducer(state, action) {
+  switch (action.type) {
+    case 'swap':
+      return { foo: state.bar, bar: state.foo };
+    default:
+      throw new Error();
+  }
+}
+
+type StatefulFunctionProps = {| name: string |};
+
+function StatefulFunction({ name }: StatefulFunctionProps) {
+  const [count, updateCount] = useState(0);
+  const debouncedCount = useDebounce(count, 1000);
+  const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+    count,
+  ]);
+
+  const [data, dispatch] = useReducer(reducer, initialData);
+  const handleUpdateReducerClick = useCallback(
+    () => dispatch({ type: 'swap' }),
+    []
+  );
+
+  return (
+    <Fragment>
+      <li>Name: {name}</li>
+      <li>
+        <button onClick={handleUpdateCountClick}>
+          Debounced count: {debouncedCount}
+        </button>
+      </li>
+      <li>
+        <button onClick={handleUpdateReducerClick}>
+          Reducer state: {JSON.stringify(data, null, 2)}
+        </button>
+      </li>
+    </Fragment>
+  );
 }
 
 const BoolContext = createContext(true);
-// $FlowFixMe Flow does not yet know about Context.displayName
 BoolContext.displayName = 'BoolContext';
 
 type Props = {| name: string, toggle: boolean |};
@@ -50,8 +95,37 @@ export default function EditableProps() {
       <div className={styles.Header}>Editable props</div>
       <ul>
         <StatefulClass name="Brian" toggle={true} />
-        <StatefulFunction count={1} />
+        <StatefulFunction name="Brian" />
       </ul>
     </div>
   );
 }
+
+// Below copied from https://usehooks.com/
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValue(debouncedValue);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+// Above copied from https://usehooks.com/
diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 2490ba861d36..5c3f54018067 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -226,6 +226,7 @@ type ReactCurrentDispatcher = {
 
 type HooksNode = {
   index: number,
+  isEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -402,6 +403,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
           index: -1,
+          isEditable: false,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -409,10 +411,12 @@ function buildTree(rootStack, readHookLog): HooksTree {
       }
       prevStack = stack;
     }
+    const { primitive } = hook;
     levelChildren.push({
-      name: hook.primitive,
+      index: primitive === 'DebugValue' ? -1 : index++,
+      isEditable: primitive === 'Reducer' || primitive === 'State',
+      name: primitive,
       value: hook.value,
-      index: hook.primitive === 'DebugValue' ? -1 : index++,
       subHooks: [],
     });
   }
diff --git a/src/backend/types.js b/src/backend/types.js
index 6a2378c66baa..24db9e5713cf 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -100,6 +100,7 @@ export type DevToolsHook = {
 
 export type HooksNode = {
   index: number,
+  isEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 47ad29523d43..49935bb24c8e 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -10,6 +10,7 @@ type Props = {|
     | 'down'
     | 'more'
     | 'search'
+    | 'undo'
     | 'up'
     | 'view-dom'
     | 'view-source',
@@ -33,6 +34,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'search':
       pathData = PATH_SEARCH;
       break;
+    case 'undo':
+      pathData = PATH_UNDO;
+      break;
     case 'up':
       pathData = PATH_UP;
       break;
@@ -85,6 +89,11 @@ const PATH_SEARCH = `
   0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
 `;
 
+const PATH_UNDO = `
+  M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
+  3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
+`;
+
 const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';
 
 const PATH_VIEW_DOM = `
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 173d5c6b0125..cf02c3a0468c 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -56,7 +56,7 @@ type HookViewProps = {|
 |};
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
-  const { name, index, subHooks, value } = hook;
+  const { name, index, isEditable, subHooks, value } = hook;
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -121,7 +121,8 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
     }
   } else {
     let overrideValueFn = null;
-    if (canEditHooks && name === 'State') {
+    // TODO Maybe read editable value from debug hook?
+    if (canEditHooks && isEditable) {
       overrideValueFn = (path: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
         bridge.send('overrideHook', {
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 014fdfc2b07e..7516bc1393a9 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -32,11 +32,11 @@
 }
 
 .ValueInput {
+  width: 100%;
   background: none;
   border: 1px solid transparent;
   color: var(--color-attribute-editable-value);
   border-radius: 0.125rem;
-  width: 100%;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
@@ -55,3 +55,8 @@
   font-style: italic;
   padding-left: 0.75rem;
 }
+
+.ResetButton {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+}
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 5858074e3082..a48f883f8678 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,6 +1,8 @@
 // @flow
 
-import React, { useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
 import { getMetaValueLabel } from './utils';
 import { meta } from '../../hydration';
 import styles from './InspectedElementTree.css';
@@ -169,8 +171,13 @@ export function EditableValue({
   path,
   value,
 }: EditableValueProps) {
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
   const [editableValue, setEditableValue] = useState(value);
 
+  if (hasPendingChanges && editableValue === value) {
+    setHasPendingChanges(false);
+  }
+
   const handleChange = useCallback(
     ({ target }) => {
       if (dataType === 'boolean') {
@@ -181,14 +188,24 @@ export function EditableValue({
       } else {
         setEditableValue(target.value);
       }
+      setHasPendingChanges(true);
     },
     [dataType, overrideValueFn, path]
   );
 
+  const handleReset = useCallback(() => {
+    setEditableValue(value);
+    setHasPendingChanges(false);
+  }, [value]);
+
   const handleKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
         overrideValueFn(path, editableValue);
+
+        // Don't reset the pending change flag here.
+        // The inspected fiber won't be updated until after the next "inspectElement" message.
+        // We'll reset that flag during a subsequent render.
       }
     },
     [path, editableValue, overrideValueFn]
@@ -204,23 +221,33 @@ export function EditableValue({
     type = 'number';
   }
 
+  let inputValue = value;
+  if (hasPendingChanges) {
+    inputValue = editableValue == null ? '' : editableValue;
+  }
+
   return (
-    <label className={styles.ValueInputLabel}>
-      <input
-        checked={dataType === 'boolean' ? editableValue : undefined}
-        className={styles.ValueInput}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onKeyPress={handleKeyPress}
-        type={type}
-        value={
-          dataType === 'boolean'
-            ? undefined
-            : editableValue != null
-            ? editableValue
-            : ''
-        }
-      />
-    </label>
+    <Fragment>
+      <label className={styles.ValueInputLabel}>
+        <input
+          checked={dataType === 'boolean' ? inputValue : undefined}
+          className={styles.ValueInput}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onKeyPress={handleKeyPress}
+          type={type}
+          value={dataType === 'boolean' ? undefined : inputValue}
+        />
+      </label>
+      {hasPendingChanges && (
+        <Button
+          className={styles.ResetButton}
+          onClick={handleReset}
+          title="Reset value"
+        >
+          <ButtonIcon type="undo" />
+        </Button>
+      )}
+    </Fragment>
   );
 }

From 290e8c69265eada53fa3315903ab6fda82b0c8ce Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 13:40:23 -0800
Subject: [PATCH 086/814] Fixed null input value. Tweaked useReducer test
 harness.

---
 shells/dev/app/EditableProps/EditableProps.js | 7 ++++---
 src/devtools/views/InspectedElementTree.js    | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/shells/dev/app/EditableProps/EditableProps.js b/shells/dev/app/EditableProps/EditableProps.js
index 13a3d970775d..c48a78dc8c53 100644
--- a/shells/dev/app/EditableProps/EditableProps.js
+++ b/shells/dev/app/EditableProps/EditableProps.js
@@ -47,9 +47,10 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
         </button>
       </li>
       <li>
-        <button onClick={handleUpdateReducerClick}>
-          Reducer state: {JSON.stringify(data, null, 2)}
-        </button>
+        Reducer state: foo "{data.foo}", bar "{data.bar}"
+      </li>
+      <li>
+        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
       </li>
     </Fragment>
   );
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index a48f883f8678..a6d4351431c1 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -221,7 +221,7 @@ export function EditableValue({
     type = 'number';
   }
 
-  let inputValue = value;
+  let inputValue = value == null ? '' : value;
   if (hasPendingChanges) {
     inputValue = editableValue == null ? '' : editableValue;
   }

From ddeb78001c108226d335aa2e255b3e72a35ed0f6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:02:45 -0800
Subject: [PATCH 087/814] Tweaked colors based on Andrew's feedback

---
 src/devtools/views/HooksTree.css            |  8 ++++++--
 src/devtools/views/HooksTree.js             | 10 ++++++++--
 src/devtools/views/InspectedElementTree.css |  5 +++++
 src/devtools/views/InspectedElementTree.js  | 14 ++++++++------
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 0d2ded185939..ac326a90fb8c 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -7,17 +7,21 @@
   padding-left: 0.75rem;
 }
 
+.Header {
+  font-family: var(--font-family-sans);
+  color: var(--color-dim);
+}
+
 .NameValueRow {
   display: flex;
 }
 
 .Name {
-  color: var(--color-attribute-name);
+  color: var(--color-text-color);
   flex: 0 0 auto;
 }
 .Name:after {
   content: ': ';
-  color: var(--color-text-color);
   margin-right: 0.5rem;
 }
 
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index cf02c3a0468c..9c6eb0a9fc5e 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -19,7 +19,7 @@ export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
   } else {
     return (
       <div className={styles.HooksTreeView}>
-        <div className={styles.Item}>hooks</div>
+        <div className={styles.Header}>hooks</div>
         <InnerHooksTreeView canEditHooks={canEditHooks} hooks={hooks} id={id} />
       </div>
     );
@@ -96,7 +96,12 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <div className={styles.NameValueRow}>
             <span className={styles.Name}>{name}</span>
           </div>
-          <KeyValue depth={1} name="DebugValue" value={value} />
+          <KeyValue
+            depth={1}
+            name="DebugValue"
+            nameClassName={styles.Name}
+            value={value}
+          />
           <InnerHooksTreeView
             canEditHooks={canEditHooks}
             hooks={subHooks}
@@ -141,6 +146,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <KeyValue
             depth={0}
             name={name}
+            nameClassName={styles.Name}
             overrideValueFn={overrideValueFn}
             value={value}
           />
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 7516bc1393a9..9b4f89584abc 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -6,6 +6,11 @@
   border-top: none;
 }
 
+.Header {
+  font-family: var(--font-family-sans);
+  color: var(--color-dim);
+}
+
 .Item {
   display: flex;
 }
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index a6d4351431c1..dde2899a6e5b 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -30,7 +30,7 @@ export default function InspectedElementTree({
     // TODO Add click and key handlers for toggling element open/close state.
     return (
       <div className={styles.InspectedElementTree}>
-        <div className={styles.Item}>{label}</div>
+        <div className={styles.Header}>{label}</div>
         {isEmpty && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           Object.keys((data: any)).map(name => (
@@ -51,6 +51,7 @@ export default function InspectedElementTree({
 type KeyValueProps = {|
   depth: number,
   name: string,
+  nameClassName?: string,
   overrideValueFn?: ?OverrideValueFn,
   path?: Array<any>,
   value: any,
@@ -59,6 +60,7 @@ type KeyValueProps = {|
 export function KeyValue({
   depth,
   name,
+  nameClassName = styles.Name,
   overrideValueFn,
   path = [],
   value,
@@ -87,7 +89,7 @@ export function KeyValue({
 
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={styles.Name}>{name}</span>
+        <span className={nameClassName}>{name}</span>
         {typeof overrideValueFn === 'function' ? (
           <EditableValue
             dataType={dataType}
@@ -104,7 +106,7 @@ export function KeyValue({
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={styles.Name}>{name}</span>
+        <span className={nameClassName}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
@@ -126,7 +128,7 @@ export function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={styles.Name}>{name}</span>
+          <span className={nameClassName}>{name}</span>
           <span>Array</span>
         </div>
       );
@@ -148,7 +150,7 @@ export function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={styles.Name}>{name}</span>
+          <span className={nameClassName}>{name}</span>
           <span>Object</span>
         </div>
       );
@@ -239,7 +241,7 @@ export function EditableValue({
           value={dataType === 'boolean' ? undefined : inputValue}
         />
       </label>
-      {hasPendingChanges && (
+      {hasPendingChanges && dataType !== 'boolean' && (
         <Button
           className={styles.ResetButton}
           onClick={handleReset}

From 4f64c9ef9ecdac2deb7251b3f147c4d66ac0a691 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:11:06 -0800
Subject: [PATCH 088/814] Tweaked colors; Esc key to undo edits

---
 src/devtools/views/HooksTree.css            |  4 ++--
 src/devtools/views/InspectedElementTree.css |  1 -
 src/devtools/views/InspectedElementTree.js  | 17 +++++++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index ac326a90fb8c..1fbc785e1394 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -9,7 +9,6 @@
 
 .Header {
   font-family: var(--font-family-sans);
-  color: var(--color-dim);
 }
 
 .NameValueRow {
@@ -17,10 +16,11 @@
 }
 
 .Name {
-  color: var(--color-text-color);
+  color: var(--color-dim);
   flex: 0 0 auto;
 }
 .Name:after {
+  color: var(--color-text-color);
   content: ': ';
   margin-right: 0.5rem;
 }
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 9b4f89584abc..653213c8574d 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -8,7 +8,6 @@
 
 .Header {
   font-family: var(--font-family-sans);
-  color: var(--color-dim);
 }
 
 .Item {
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index dde2899a6e5b..157befb35746 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -200,21 +200,27 @@ export function EditableValue({
     setHasPendingChanges(false);
   }, [value]);
 
-  const handleKeyPress = useCallback(
-    ({ key }) => {
+  const handleKeyDown = useCallback(
+    event => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      const { key } = event;
+
       if (key === 'Enter') {
         overrideValueFn(path, editableValue);
 
         // Don't reset the pending change flag here.
         // The inspected fiber won't be updated until after the next "inspectElement" message.
         // We'll reset that flag during a subsequent render.
+      } else if (key === 'Escape') {
+        setEditableValue(value);
+        setHasPendingChanges(false);
       }
     },
-    [path, editableValue, overrideValueFn]
+    [path, editableValue, overrideValueFn, value]
   );
 
-  const handleKeyDown = useCallback(event => event.stopPropagation(), []);
-
   // Render different input types based on the dataType
   let type = 'text';
   if (dataType === 'boolean') {
@@ -236,7 +242,6 @@ export function EditableValue({
           className={styles.ValueInput}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
-          onKeyPress={handleKeyPress}
           type={type}
           value={dataType === 'boolean' ? undefined : inputValue}
         />

From 9898db02d1029d35dfd67a9afb91ca11971bf086 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:13:48 -0800
Subject: [PATCH 089/814] Restore input focus after clicking reset value button

---
 src/devtools/views/InspectedElementTree.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 157befb35746..afeb8f0b18a5 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import { getMetaValueLabel } from './utils';
@@ -175,6 +175,7 @@ export function EditableValue({
 }: EditableValueProps) {
   const [hasPendingChanges, setHasPendingChanges] = useState(false);
   const [editableValue, setEditableValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   if (hasPendingChanges && editableValue === value) {
     setHasPendingChanges(false);
@@ -198,6 +199,10 @@ export function EditableValue({
   const handleReset = useCallback(() => {
     setEditableValue(value);
     setHasPendingChanges(false);
+
+    if (inputRef.current !== null) {
+      inputRef.current.focus();
+    }
   }, [value]);
 
   const handleKeyDown = useCallback(
@@ -242,6 +247,7 @@ export function EditableValue({
           className={styles.ValueInput}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
+          ref={inputRef}
           type={type}
           value={dataType === 'boolean' ? undefined : inputValue}
         />

From caf2eb973af0bad812aa0d9ae42e92f4899c6c13 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:20:14 -0800
Subject: [PATCH 090/814] Split large InspectedElementTree file into separate
 component-files

---
 src/devtools/views/EditableValue.css        |  25 +++
 src/devtools/views/EditableValue.js         | 113 ++++++++++
 src/devtools/views/HooksTree.js             |   3 +-
 src/devtools/views/InspectedElementTree.css |  26 ---
 src/devtools/views/InspectedElementTree.js  | 224 +-------------------
 src/devtools/views/KeyValue.css             |  22 ++
 src/devtools/views/KeyValue.js              | 121 +++++++++++
 7 files changed, 285 insertions(+), 249 deletions(-)
 create mode 100644 src/devtools/views/EditableValue.css
 create mode 100644 src/devtools/views/EditableValue.js
 create mode 100644 src/devtools/views/KeyValue.css
 create mode 100644 src/devtools/views/KeyValue.js

diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/EditableValue.css
new file mode 100644
index 000000000000..6440579882c8
--- /dev/null
+++ b/src/devtools/views/EditableValue.css
@@ -0,0 +1,25 @@
+.ValueInputLabel {
+  flex: 1 1 100%;
+}
+.ValueInputLabel:focus-within {
+  background-color: var(--color-button-background-focus);
+}
+
+.ValueInput {
+  width: 100%;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.ValueInput:focus {
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}
+.ResetButton {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+}
diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/EditableValue.js
new file mode 100644
index 000000000000..b590419f5279
--- /dev/null
+++ b/src/devtools/views/EditableValue.js
@@ -0,0 +1,113 @@
+// @flow
+
+import React, { Fragment, useCallback, useRef, useState } from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import styles from './EditableValue.css';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type EditableValueProps = {|
+  dataType: string,
+  overrideValueFn: OverrideValueFn,
+  path: Array<string | number>,
+  value: any,
+|};
+
+export default function EditableValue({
+  dataType,
+  overrideValueFn,
+  path,
+  value,
+}: EditableValueProps) {
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
+  const [editableValue, setEditableValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  if (hasPendingChanges && editableValue === value) {
+    setHasPendingChanges(false);
+  }
+
+  const handleChange = useCallback(
+    ({ target }) => {
+      if (dataType === 'boolean') {
+        setEditableValue(target.checked);
+        overrideValueFn(path, target.checked);
+      } else if (dataType === 'number') {
+        setEditableValue(parseFloat(target.value));
+      } else {
+        setEditableValue(target.value);
+      }
+      setHasPendingChanges(true);
+    },
+    [dataType, overrideValueFn, path]
+  );
+
+  const handleReset = useCallback(() => {
+    setEditableValue(value);
+    setHasPendingChanges(false);
+
+    if (inputRef.current !== null) {
+      inputRef.current.focus();
+    }
+  }, [value]);
+
+  const handleKeyDown = useCallback(
+    event => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      const { key } = event;
+
+      if (key === 'Enter') {
+        overrideValueFn(path, editableValue);
+
+        // Don't reset the pending change flag here.
+        // The inspected fiber won't be updated until after the next "inspectElement" message.
+        // We'll reset that flag during a subsequent render.
+      } else if (key === 'Escape') {
+        setEditableValue(value);
+        setHasPendingChanges(false);
+      }
+    },
+    [path, editableValue, overrideValueFn, value]
+  );
+
+  // Render different input types based on the dataType
+  let type = 'text';
+  if (dataType === 'boolean') {
+    type = 'checkbox';
+  } else if (dataType === 'number') {
+    type = 'number';
+  }
+
+  let inputValue = value == null ? '' : value;
+  if (hasPendingChanges) {
+    inputValue = editableValue == null ? '' : editableValue;
+  }
+
+  return (
+    <Fragment>
+      <label className={styles.ValueInputLabel}>
+        <input
+          checked={dataType === 'boolean' ? inputValue : undefined}
+          className={styles.ValueInput}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          ref={inputRef}
+          type={type}
+          value={dataType === 'boolean' ? undefined : inputValue}
+        />
+      </label>
+      {hasPendingChanges && dataType !== 'boolean' && (
+        <Button
+          className={styles.ResetButton}
+          onClick={handleReset}
+          title="Reset value"
+        >
+          <ButtonIcon type="undo" />
+        </Button>
+      )}
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 9c6eb0a9fc5e..4c9434b55df0 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -2,7 +2,8 @@
 
 import React, { useContext } from 'react';
 import { BridgeContext, StoreContext } from './context';
-import { EditableValue, KeyValue } from './InspectedElementTree';
+import EditableValue from './EditableValue';
+import KeyValue from './KeyValue';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 653213c8574d..4996d36e4e9a 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -28,27 +28,6 @@
   color: var(--color-attribute-value);
 }
 
-.ValueInputLabel {
-  flex: 1 1 100%;
-}
-.ValueInputLabel:focus-within {
-  background-color: var(--color-button-background-focus);
-}
-
-.ValueInput {
-  width: 100%;
-  background: none;
-  border: 1px solid transparent;
-  color: var(--color-attribute-editable-value);
-  border-radius: 0.125rem;
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-normal);
-}
-.ValueInput:focus {
-  background-color: var(--color-button-background-focus);
-  outline: none;
-}
-
 .None {
   color: var(--color-dimmer);
   font-style: italic;
@@ -59,8 +38,3 @@
   font-style: italic;
   padding-left: 0.75rem;
 }
-
-.ResetButton {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-}
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index afeb8f0b18a5..012d78875b57 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,10 +1,7 @@
 // @flow
 
-import React, { Fragment, useCallback, useRef, useState } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
-import { getMetaValueLabel } from './utils';
-import { meta } from '../../hydration';
+import React from 'react';
+import KeyValue from './KeyValue';
 import styles from './InspectedElementTree.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
@@ -47,220 +44,3 @@ export default function InspectedElementTree({
     );
   }
 }
-
-type KeyValueProps = {|
-  depth: number,
-  name: string,
-  nameClassName?: string,
-  overrideValueFn?: ?OverrideValueFn,
-  path?: Array<any>,
-  value: any,
-|};
-
-export function KeyValue({
-  depth,
-  name,
-  nameClassName = styles.Name,
-  overrideValueFn,
-  path = [],
-  value,
-}: KeyValueProps) {
-  const dataType = typeof value;
-  const isSimpleType =
-    dataType === 'number' ||
-    dataType === 'string' ||
-    dataType === 'boolean' ||
-    value == null;
-
-  const paddingLeft = `${depth * 0.75}rem`;
-
-  let children = null;
-  if (isSimpleType) {
-    let displayValue = value;
-    if (dataType === 'string') {
-      displayValue = `"${value}"`;
-    } else if (dataType === 'boolean') {
-      displayValue = value ? 'true' : 'false';
-    } else if (value === null) {
-      displayValue = 'null';
-    } else if (value === undefined) {
-      displayValue = 'undefined';
-    }
-
-    children = (
-      <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={nameClassName}>{name}</span>
-        {typeof overrideValueFn === 'function' ? (
-          <EditableValue
-            dataType={dataType}
-            overrideValueFn={overrideValueFn}
-            path={path}
-            value={value}
-          />
-        ) : (
-          <span className={styles.Value}>{displayValue}</span>
-        )}
-      </div>
-    );
-  } else if (value.hasOwnProperty(meta.type)) {
-    // TODO Is this type even necessary? Can we just drop it?
-    children = (
-      <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={nameClassName}>{name}</span>
-        <span className={styles.Value}>{getMetaValueLabel(value)}</span>
-      </div>
-    );
-  } else {
-    if (Array.isArray(value)) {
-      children = value.map((innerValue, index) => (
-        <KeyValue
-          key={index}
-          depth={depth + 1}
-          name={index}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(index)}
-          value={value[index]}
-        />
-      ));
-      children.unshift(
-        <div
-          key={`${depth}-root`}
-          className={styles.Item}
-          style={{ paddingLeft }}
-        >
-          <span className={nameClassName}>{name}</span>
-          <span>Array</span>
-        </div>
-      );
-    } else {
-      // $FlowFixMe "Missing type annotation for U" whatever that means
-      children = Object.entries(value).map(([name, value]) => (
-        <KeyValue
-          key={name}
-          depth={depth + 1}
-          name={name}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(name)}
-          value={value}
-        />
-      ));
-      children.unshift(
-        <div
-          key={`${depth}-root`}
-          className={styles.Item}
-          style={{ paddingLeft }}
-        >
-          <span className={nameClassName}>{name}</span>
-          <span>Object</span>
-        </div>
-      );
-    }
-  }
-
-  return children;
-}
-
-type EditableValueProps = {|
-  dataType: string,
-  overrideValueFn: OverrideValueFn,
-  path: Array<string | number>,
-  value: any,
-|};
-
-export function EditableValue({
-  dataType,
-  overrideValueFn,
-  path,
-  value,
-}: EditableValueProps) {
-  const [hasPendingChanges, setHasPendingChanges] = useState(false);
-  const [editableValue, setEditableValue] = useState(value);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  if (hasPendingChanges && editableValue === value) {
-    setHasPendingChanges(false);
-  }
-
-  const handleChange = useCallback(
-    ({ target }) => {
-      if (dataType === 'boolean') {
-        setEditableValue(target.checked);
-        overrideValueFn(path, target.checked);
-      } else if (dataType === 'number') {
-        setEditableValue(parseFloat(target.value));
-      } else {
-        setEditableValue(target.value);
-      }
-      setHasPendingChanges(true);
-    },
-    [dataType, overrideValueFn, path]
-  );
-
-  const handleReset = useCallback(() => {
-    setEditableValue(value);
-    setHasPendingChanges(false);
-
-    if (inputRef.current !== null) {
-      inputRef.current.focus();
-    }
-  }, [value]);
-
-  const handleKeyDown = useCallback(
-    event => {
-      // Prevent keydown events from e.g. change selected element in the tree
-      event.stopPropagation();
-
-      const { key } = event;
-
-      if (key === 'Enter') {
-        overrideValueFn(path, editableValue);
-
-        // Don't reset the pending change flag here.
-        // The inspected fiber won't be updated until after the next "inspectElement" message.
-        // We'll reset that flag during a subsequent render.
-      } else if (key === 'Escape') {
-        setEditableValue(value);
-        setHasPendingChanges(false);
-      }
-    },
-    [path, editableValue, overrideValueFn, value]
-  );
-
-  // Render different input types based on the dataType
-  let type = 'text';
-  if (dataType === 'boolean') {
-    type = 'checkbox';
-  } else if (dataType === 'number') {
-    type = 'number';
-  }
-
-  let inputValue = value == null ? '' : value;
-  if (hasPendingChanges) {
-    inputValue = editableValue == null ? '' : editableValue;
-  }
-
-  return (
-    <Fragment>
-      <label className={styles.ValueInputLabel}>
-        <input
-          checked={dataType === 'boolean' ? inputValue : undefined}
-          className={styles.ValueInput}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          ref={inputRef}
-          type={type}
-          value={dataType === 'boolean' ? undefined : inputValue}
-        />
-      </label>
-      {hasPendingChanges && dataType !== 'boolean' && (
-        <Button
-          className={styles.ResetButton}
-          onClick={handleReset}
-          title="Reset value"
-        >
-          <ButtonIcon type="undo" />
-        </Button>
-      )}
-    </Fragment>
-  );
-}
diff --git a/src/devtools/views/KeyValue.css b/src/devtools/views/KeyValue.css
new file mode 100644
index 000000000000..d8d94b11a2ae
--- /dev/null
+++ b/src/devtools/views/KeyValue.css
@@ -0,0 +1,22 @@
+.Item {
+  display: flex;
+}
+
+.Name {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.Name:after {
+  content: ': ';
+  color: var(--color-text-color);
+  margin-right: 0.5rem;
+}
+
+.Value {
+  color: var(--color-attribute-value);
+}
+
+.None {
+  color: var(--color-dimmer);
+  font-style: italic;
+}
diff --git a/src/devtools/views/KeyValue.js b/src/devtools/views/KeyValue.js
new file mode 100644
index 000000000000..f2186ea16d1b
--- /dev/null
+++ b/src/devtools/views/KeyValue.js
@@ -0,0 +1,121 @@
+// @flow
+
+import React from 'react';
+import EditableValue from './EditableValue';
+import { getMetaValueLabel } from './utils';
+import { meta } from '../../hydration';
+import styles from './KeyValue.css';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type KeyValueProps = {|
+  depth: number,
+  name: string,
+  nameClassName?: string,
+  overrideValueFn?: ?OverrideValueFn,
+  path?: Array<any>,
+  value: any,
+|};
+
+export default function KeyValue({
+  depth,
+  name,
+  nameClassName = styles.Name,
+  overrideValueFn,
+  path = [],
+  value,
+}: KeyValueProps) {
+  const dataType = typeof value;
+  const isSimpleType =
+    dataType === 'number' ||
+    dataType === 'string' ||
+    dataType === 'boolean' ||
+    value == null;
+
+  const paddingLeft = `${depth * 0.75}rem`;
+
+  let children = null;
+  if (isSimpleType) {
+    let displayValue = value;
+    if (dataType === 'string') {
+      displayValue = `"${value}"`;
+    } else if (dataType === 'boolean') {
+      displayValue = value ? 'true' : 'false';
+    } else if (value === null) {
+      displayValue = 'null';
+    } else if (value === undefined) {
+      displayValue = 'undefined';
+    }
+
+    children = (
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
+        <span className={nameClassName}>{name}</span>
+        {typeof overrideValueFn === 'function' ? (
+          <EditableValue
+            dataType={dataType}
+            overrideValueFn={overrideValueFn}
+            path={path}
+            value={value}
+          />
+        ) : (
+          <span className={styles.Value}>{displayValue}</span>
+        )}
+      </div>
+    );
+  } else if (value.hasOwnProperty(meta.type)) {
+    // TODO Is this type even necessary? Can we just drop it?
+    children = (
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
+        <span className={nameClassName}>{name}</span>
+        <span className={styles.Value}>{getMetaValueLabel(value)}</span>
+      </div>
+    );
+  } else {
+    if (Array.isArray(value)) {
+      children = value.map((innerValue, index) => (
+        <KeyValue
+          key={index}
+          depth={depth + 1}
+          name={index}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(index)}
+          value={value[index]}
+        />
+      ));
+      children.unshift(
+        <div
+          key={`${depth}-root`}
+          className={styles.Item}
+          style={{ paddingLeft }}
+        >
+          <span className={nameClassName}>{name}</span>
+          <span>Array</span>
+        </div>
+      );
+    } else {
+      // $FlowFixMe "Missing type annotation for U" whatever that means
+      children = Object.entries(value).map(([name, value]) => (
+        <KeyValue
+          key={name}
+          depth={depth + 1}
+          name={name}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(name)}
+          value={value}
+        />
+      ));
+      children.unshift(
+        <div
+          key={`${depth}-root`}
+          className={styles.Item}
+          style={{ paddingLeft }}
+        >
+          <span className={nameClassName}>{name}</span>
+          <span>Object</span>
+        </div>
+      );
+    }
+  }
+
+  return children;
+}

From 0c346ceea8650219b1dbb43d7bb0ebbe5732b318 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:56:11 -0800
Subject: [PATCH 091/814] Re-added transferrables (after 'shutdown' evt fix)
 and guard against a tree mutation race

---
 src/backend/agent.js              |  4 +--
 src/backend/renderer.js           |  4 +++
 src/devtools/views/TreeContext.js | 60 +++++++++++++++++--------------
 src/types.js                      |  2 +-
 4 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index d90fa82fc0b9..78386958a12c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -194,9 +194,7 @@ export default class Agent extends EventEmitter {
 
     // TODO The chrome.runtime does not currently support transferables; it forces JSON serialization.
     // The Store has a fallback in place that parses the message as JSON if the type isn't an array.
-    // Sometimes using transferrables also cause Chrome or Firefox to throw "ArrayBuffer at index 0 is already neutered".
-    // this._bridge.send('operations', operations, [operations.buffer]);
-    this._bridge.send('operations', operations);
+    this._bridge.send('operations', operations, [operations.buffer]);
   };
 
   _onClick = (event: MouseEvent) => {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 702f0c852acd..ebb56fc9b815 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -524,6 +524,10 @@ export function attach(
   }
 
   function flushPendingEvents(root: Object): void {
+    if (pendingOperations.length === 0) {
+      return;
+    }
+
     // Identify which renderer this update is coming from.
     // This enables roots to be mapped to renderers,
     // Which in turn enables fiber props, states, and hooks to be inspected.
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index a57b0a78f099..62e4b170502b 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -223,35 +223,41 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
           });
 
           addedElementIDs.forEach(id => {
-            const { displayName } = ((store.getElementByID(id): any): Element);
-
-            // Add this item to the search results if it matches.
-            const regExp = createRegExp(searchText);
-            if (displayName !== null && regExp.test(displayName)) {
-              const newElementIndex = ((store.getIndexOfElementID(
-                id
-              ): any): number);
-
-              let foundMatch = false;
-              for (let index = 0; index < searchResults.length; index++) {
-                const id = searchResults[index];
-                if (
-                  newElementIndex <
-                  ((store.getIndexOfElementID(id): any): number)
-                ) {
-                  foundMatch = true;
-                  searchResults = searchResults
-                    .slice(0, index)
-                    .concat(id)
-                    .concat(searchResults.slice(index));
-                  break;
+            const element = ((store.getElementByID(id): any): Element);
+
+            // It's possible that multiple tree operations will fire before this action has run.
+            // So it's important to check for elements that may have been added and then removed.
+            if (element !== null) {
+              const { displayName } = element;
+
+              // Add this item to the search results if it matches.
+              const regExp = createRegExp(searchText);
+              if (displayName !== null && regExp.test(displayName)) {
+                const newElementIndex = ((store.getIndexOfElementID(
+                  id
+                ): any): number);
+
+                let foundMatch = false;
+                for (let index = 0; index < searchResults.length; index++) {
+                  const id = searchResults[index];
+                  if (
+                    newElementIndex <
+                    ((store.getIndexOfElementID(id): any): number)
+                  ) {
+                    foundMatch = true;
+                    searchResults = searchResults
+                      .slice(0, index)
+                      .concat(id)
+                      .concat(searchResults.slice(index));
+                    break;
+                  }
+                }
+                if (!foundMatch) {
+                  searchResults = searchResults.concat(id);
                 }
-              }
-              if (!foundMatch) {
-                searchResults = searchResults.concat(id);
-              }
 
-              searchIndex = searchIndex === null ? 0 : searchIndex;
+                searchIndex = searchIndex === null ? 0 : searchIndex;
+              }
             }
           });
         }
diff --git a/src/types.js b/src/types.js
index 3cb12e26fd92..2bd576af9bee 100644
--- a/src/types.js
+++ b/src/types.js
@@ -3,7 +3,7 @@
 export type Bridge = {
   addListener(type: string, callback: Function): void,
   removeListener(type: string, callback: Function): void,
-  send(type: string, data?: any): void,
+  send(event: string, payload: any, transferable?: Array<any>): void,
 };
 
 export type Wall = {|

From 1edbfbf6cb2186dc0c0255cbfddd0d1a311dc981 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Feb 2019 08:44:05 -0800
Subject: [PATCH 092/814] Fixed some small overflow/scrollbar issues

---
 src/devtools/views/EditableValue.css        | 3 ++-
 src/devtools/views/HooksTree.css            | 2 ++
 src/devtools/views/InspectedElementTree.css | 2 ++
 src/devtools/views/SelectedElement.css      | 3 ++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/EditableValue.css
index 6440579882c8..12dd20cc2578 100644
--- a/src/devtools/views/EditableValue.css
+++ b/src/devtools/views/EditableValue.css
@@ -1,12 +1,13 @@
 .ValueInputLabel {
   flex: 1 1 100%;
+  display: flex;
 }
 .ValueInputLabel:focus-within {
   background-color: var(--color-button-background-focus);
 }
 
 .ValueInput {
-  width: 100%;
+  flex: 1 1;
   background: none;
   border: 1px solid transparent;
   color: var(--color-attribute-editable-value);
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 1fbc785e1394..255e3fe0ad10 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -27,6 +27,8 @@
 
 .Value {
   color: var(--color-attribute-value);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .None {
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 4996d36e4e9a..6b8278df4b04 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -26,6 +26,8 @@
 
 .Value {
   color: var(--color-attribute-value);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .None {
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index d68ec7229aa7..4d0c7cbcf847 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -51,7 +51,8 @@
 }
 
 .InspectedElement {
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);

From 5fd9cb5dfb1cde8aa1665befdb3be06a0f4ef988 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Feb 2019 09:39:05 -0800
Subject: [PATCH 093/814] Added copy props/state/hooks/context button

---
 package.json                                |  2 +-
 src/devtools/views/ButtonIcon.js            |  9 ++++
 src/devtools/views/HooksTree.css            |  6 +++
 src/devtools/views/HooksTree.js             | 17 +++++-
 src/devtools/views/InspectedElementTree.css |  6 +++
 src/devtools/views/InspectedElementTree.js  | 19 ++++++-
 src/devtools/views/utils.js                 | 57 +++++++++++++++++++++
 yarn.lock                                   |  7 +--
 8 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 0d912b612b5d..1786de140720 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "chrome-launch": "^1.1.4",
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
-    "clipboard-js": "^0.3.3",
+    "clipboard-js": "^0.3.6",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 49935bb24c8e..031905d49e99 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -7,6 +7,7 @@ type Props = {|
   type:
     | 'back'
     | 'close'
+    | 'copy'
     | 'down'
     | 'more'
     | 'search'
@@ -25,6 +26,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'close':
       pathData = PATH_CLOSE;
       break;
+    case 'copy':
+      pathData = PATH_COPY;
+      break;
     case 'down':
       pathData = PATH_DOWN;
       break;
@@ -74,6 +78,11 @@ const PATH_BACK = `
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
+const PATH_COPY = `
+  M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
+  2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
+`;
+
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
 const PATH_MORE = `
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 255e3fe0ad10..ad07918e4ae4 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -7,7 +7,13 @@
   padding-left: 0.75rem;
 }
 
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
 .Header {
+  flex: 1 1;
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 4c9434b55df0..bd9734406786 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -1,9 +1,13 @@
 // @flow
 
-import React, { useContext } from 'react';
+import { copy } from 'clipboard-js';
+import React, { useCallback, useContext } from 'react';
 import { BridgeContext, StoreContext } from './context';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
 import EditableValue from './EditableValue';
 import KeyValue from './KeyValue';
+import { serializeHooksForCopy } from './utils';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
@@ -15,12 +19,21 @@ type HooksTreeViewProps = {|
 |};
 
 export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
+  const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [
+    hooks,
+  ]);
+
   if (hooks === null) {
     return null;
   } else {
     return (
       <div className={styles.HooksTreeView}>
-        <div className={styles.Header}>hooks</div>
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>hooks</div>
+          <Button onClick={handleCopy}>
+            <ButtonIcon type="copy" />
+          </Button>
+        </div>
         <InnerHooksTreeView canEditHooks={canEditHooks} hooks={hooks} id={id} />
       </div>
     );
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 6b8278df4b04..49b618665975 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -6,7 +6,13 @@
   border-top: none;
 }
 
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
 .Header {
+  flex: 1 1;
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 012d78875b57..5b14f48fb6d5 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -1,7 +1,11 @@
 // @flow
 
-import React from 'react';
+import { copy } from 'clipboard-js';
+import React, { useCallback } from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
 import KeyValue from './KeyValue';
+import { serializeDataForCopy } from './utils';
 import styles from './InspectedElementTree.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
@@ -21,13 +25,24 @@ export default function InspectedElementTree({
 }: Props) {
   const isEmpty = data === null || Object.keys(data).length === 0;
 
+  const handleCopy = useCallback(() => copy(serializeDataForCopy(data)), [
+    data,
+  ]);
+
   if (isEmpty && !showWhenEmpty) {
     return null;
   } else {
     // TODO Add click and key handlers for toggling element open/close state.
     return (
       <div className={styles.InspectedElementTree}>
-        <div className={styles.Header}>{label}</div>
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>{label}</div>
+          {!isEmpty && (
+            <Button onClick={handleCopy}>
+              <ButtonIcon type="copy" />
+            </Button>
+          )}
+        </div>
         {isEmpty && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           Object.keys((data: any)).map(name => (
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index cbd08456c65f..8d18ece1abc3 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -3,6 +3,8 @@
 import escapeStringRegExp from 'escape-string-regexp';
 import { meta } from '../../hydration';
 
+import type { HooksTree } from 'src/backend/types';
+
 export function createRegExp(string: string): RegExp {
   return new RegExp(escapeStringRegExp(string), 'i');
 }
@@ -29,3 +31,58 @@ export function getMetaValueLabel(data: Object): string | null {
       return null;
   }
 }
+
+function sanitize(data: Object): void {
+  for (const key in data) {
+    const value = data[key];
+
+    if (value && value[meta.type]) {
+      data[key] = getMetaValueLabel(value);
+    } else if (value != null) {
+      if (Array.isArray(value)) {
+        sanitize(value);
+      } else if (typeof value === 'object') {
+        sanitize(value);
+      }
+    }
+  }
+}
+
+export function serializeDataForCopy(props: Object): string {
+  const cloned = Object.assign({}, props);
+
+  sanitize(cloned);
+
+  try {
+    return JSON.stringify(cloned, null, 2);
+  } catch (error) {
+    return '';
+  }
+}
+
+export function serializeHooksForCopy(hooks: HooksTree | null): string {
+  // $FlowFixMe "HooksTree is not an object"
+  const cloned = Object.assign([], hooks);
+
+  const queue = [...cloned];
+
+  while (queue.length > 0) {
+    const current = queue.pop();
+
+    // These aren't meaningful
+    delete current.isEditable;
+    delete current.index;
+
+    if (current.subHooks.length > 0) {
+      queue.push(...current.subHooks);
+    }
+  }
+
+  sanitize(cloned);
+
+  try {
+    return JSON.stringify(cloned, null, 2);
+  } catch (error) {
+    return '';
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e1d0713f317f..4dc51cfd6b79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2636,9 +2636,10 @@ cli-width@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
 
-clipboard-js@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/clipboard-js/-/clipboard-js-0.3.3.tgz#62264c17c80ebf84f4022286f032501e890b8922"
+clipboard-js@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/clipboard-js/-/clipboard-js-0.3.6.tgz#6260add69b5318fde40b80f9d3c8c863efdaf339"
+  integrity sha512-hyrmvbrYCeRBHdiR3KrEz0tmrUTXXEU8HLeGW0Y0icUSwYmAsmc+d6wfE4EDb/TxZmAVJG0eTfMlulCIT+ecfw==
 
 cliui@^2.1.0:
   version "2.1.0"

From 105b53f0fb9881cb79f965323e4e92f7f69121c6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Feb 2019 10:54:18 -0800
Subject: [PATCH 094/814] Split :active and :focus styles for Button+Toggle

---
 src/devtools/views/Button.css | 7 +++++--
 src/devtools/views/Toggle.css | 9 +++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
index cd252ef508c5..31291d7f3bde 100644
--- a/src/devtools/views/Button.css
+++ b/src/devtools/views/Button.css
@@ -13,12 +13,15 @@
   background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
-.Button:active,
-.Button:focus {
+.Button:active {
   background: var(--color-button-background-focus);
   color: var(--color-button-focus);
   outline: none;
 }
+.Button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+}
 .Button:disabled {
   background: var(--color-button-background);
   color: var(--color-button-disabled);
diff --git a/src/devtools/views/Toggle.css b/src/devtools/views/Toggle.css
index 2173f2f7f07a..a715dc779fa7 100644
--- a/src/devtools/views/Toggle.css
+++ b/src/devtools/views/Toggle.css
@@ -20,13 +20,18 @@
 }
 
 .ToggleOn,
-.ToggleOn:active,
-.ToggleOn:focus {
+.ToggleOn:active {
   background: var(--color-button-background-focus);
   color: var(--color-button-focus);
   outline: none;
 }
 
+.ToggleOn:focus-within,
+.ToggleOff:focus-within {
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  outline: none;
+}
+
 .ToggleDisabled {
   background: var(--color-button-background);
   color: var(--color-button-disabled);

From 53632883b6dc3c40394f44873ce4e22a9f7e5290 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Feb 2019 13:24:03 -0800
Subject: [PATCH 095/814] Implemented view-source button for DOM extension

---
 shells/browser/shared/src/panels/utils.js | 26 +++++++++++
 src/backend/agent.js                      | 10 +++++
 src/backend/renderer.js                   | 53 ++++++++++++++++++++---
 src/backend/types.js                      |  1 +
 src/devtools/types.js                     |  3 ++
 src/devtools/views/DevTools.js            |  4 +-
 src/devtools/views/SelectedElement.js     | 21 ++++++---
 src/devtools/views/TreeContext.js         | 14 +++++-
 8 files changed, 117 insertions(+), 15 deletions(-)

diff --git a/shells/browser/shared/src/panels/utils.js b/shells/browser/shared/src/panels/utils.js
index bcc579b15ef9..adc0fd50b3ab 100644
--- a/shells/browser/shared/src/panels/utils.js
+++ b/shells/browser/shared/src/panels/utils.js
@@ -1,3 +1,5 @@
+/* global chrome */
+
 import { createElement } from 'react';
 import { createRoot, flushSync } from 'react-dom';
 import DevTools from 'src/devtools/views/DevTools';
@@ -23,6 +25,29 @@ export function createPanel(defaultTab) {
     }
   };
 
+  function viewElementSource(id) {
+    if (injectedBridge == null || injectedStore == null) {
+      return;
+    }
+
+    const rendererID = injectedStore.getRendererIDForElement(id);
+    if (rendererID != null) {
+      // Ask the renderer interface to determine the component function,
+      // and store it as a global variable on the window
+      injectedBridge.send('viewElementSource', { id, rendererID });
+
+      setTimeout(() => {
+        // Ask Chrome to display the location of the component function,
+        // assuming the renderer found one.
+        chrome.devtools.inspectedWindow.eval(`
+          if (window.$type != null) {
+            inspect(window.$type);
+          }
+        `);
+      }, 100);
+    }
+  }
+
   function injectAndInit() {
     const container = ((document.getElementById(
       'container'
@@ -40,6 +65,7 @@ export function createPanel(defaultTab) {
         defaultTab,
         showTabBar: false,
         store: injectedStore,
+        viewElementSource,
       })
     );
   }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 78386958a12c..11310e4381a8 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -55,6 +55,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('shutdown', this.shutdown);
+    bridge.addListener('viewElementSource', this.viewElementSource);
   }
 
   getIDForNode(node: Object): number | null {
@@ -189,6 +190,15 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('mouseover', this._onMouseOver);
   };
 
+  viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.prepareViewElementSource(id);
+    }
+  };
+
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ebb56fc9b815..96a71257e102 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1028,16 +1028,24 @@ export function attach(
       return;
     }
 
-    switch (fiber.tag) {
+    const { memoizedProps, stateNode, tag, type } = fiber;
+
+    switch (tag) {
       case ClassComponent:
       case IncompleteClassComponent:
       case IndeterminateComponent:
-        global.$r = fiber.stateNode;
+        global.$r = stateNode;
         break;
       case FunctionComponent:
         global.$r = {
-          props: fiber.memoizedProps,
-          type: fiber.type,
+          props: memoizedProps,
+          type,
+        };
+        break;
+      case ForwardRef:
+        global.$r = {
+          props: memoizedProps,
+          type: type.render,
         };
         break;
       default:
@@ -1046,6 +1054,30 @@ export function attach(
     }
   }
 
+  function prepareViewElementSource(id: number): void {
+    let fiber = idToFiberMap.get(id);
+
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    switch (fiber.tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+      case FunctionComponent:
+        global.$type = fiber.type;
+        break;
+      case ForwardRef:
+        global.$type = fiber.type.render;
+        break;
+      default:
+        global.$type = null;
+        break;
+    }
+  }
+
   function inspectElement(id: number): InspectedElement | null {
     let fiber = idToFiberMap.get(id);
 
@@ -1075,13 +1107,16 @@ export function attach(
 
     const typeSymbol = getTypeSymbol(fiber);
 
+    let canViewSource = false;
     let context = null;
     if (
       tag === ClassComponent ||
       tag === FunctionComponent ||
       tag === IncompleteClassComponent ||
-      tag === IndeterminateComponent
+      tag === IndeterminateComponent ||
+      tag === ForwardRef
     ) {
+      canViewSource = true;
       if (stateNode && stateNode.context != null) {
         context = stateNode.context;
       }
@@ -1150,6 +1185,9 @@ export function attach(
       // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
 
+      // Can view component source location.
+      canViewSource,
+
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
       context,
@@ -1227,14 +1265,15 @@ export function attach(
   }
 
   return {
+    cleanup,
     getFiberIDFromNative,
     getNativeFromReactElement,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
-    selectElement,
-    cleanup,
+    prepareViewElementSource,
     renderer,
+    selectElement,
     setInContext,
     setInHook,
     setInProps,
diff --git a/src/backend/types.js b/src/backend/types.js
index 24db9e5713cf..8828dd320f33 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -63,6 +63,7 @@ export type RendererInterface = {
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
+  prepareViewElementSource: (id: number) => void,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
diff --git a/src/devtools/types.js b/src/devtools/types.js
index a6678d39ea8b..41c1aa8d051e 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -54,6 +54,9 @@ export type InspectedElement = {|
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
+  // Can view component source location.
+  canViewSource: boolean,
+
   // Inspectable properties.
   context: Object | null,
   hooks: Object | null,
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 9b87c2dea8d0..773794b88a55 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -27,6 +27,7 @@ export type Props = {|
   browserTheme: BrowserTheme,
   showTabBar?: boolean,
   store: Store,
+  viewElementSource?: ?Function,
 |};
 
 export default function DevTools({
@@ -36,6 +37,7 @@ export default function DevTools({
   browserTheme = 'light',
   showTabBar = false,
   store,
+  viewElementSource = null,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
 
@@ -57,7 +59,7 @@ export default function DevTools({
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
         <SettingsContextController browserTheme={browserTheme}>
-          <TreeContextController>
+          <TreeContextController viewElementSource={viewElementSource}>
             <div className={styles.DevTools}>
               {showTabBar && (
                 <div className={styles.TabBar}>
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index f163d70e31a6..de2b14acbc9a 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -23,15 +23,16 @@ import type { DehydratedData, Element } from 'src/devtools/types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { selectedElementID } = useContext(TreeContext);
+  const { selectedElementID, viewElementSource } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
   const inspectedElement = useInspectedElement(selectedElementID);
 
-  const handleClick = useCallback(() => {
+  const highlightElement = useCallback(() => {
     if (element !== null && selectedElementID !== null) {
       const rendererID =
         store.getRendererIDForElement(selectedElementID) || null;
@@ -45,7 +46,11 @@ export default function SelectedElement(_: Props) {
     }
   }, [bridge, element, selectedElementID, store]);
 
-  // TODO Make "view source" button work
+  const viewSource = useCallback(() => {
+    if (viewElementSource != null && selectedElementID !== null) {
+      viewElementSource(selectedElementID);
+    }
+  }, [selectedElementID, viewElementSource]);
 
   if (element === null) {
     return (
@@ -55,7 +60,10 @@ export default function SelectedElement(_: Props) {
     );
   }
 
-  const source = inspectedElement ? inspectedElement.source : null;
+  const canViewSource =
+    inspectedElement &&
+    inspectedElement.canViewSource &&
+    viewElementSource !== null;
 
   return (
     <div className={styles.SelectedElement}>
@@ -68,14 +76,15 @@ export default function SelectedElement(_: Props) {
 
         <Button
           className={styles.IconButton}
-          onClick={handleClick}
+          onClick={highlightElement}
           title="Highlight this element in the page"
         >
           <ButtonIcon type="view-dom" />
         </Button>
-        {source !== null && (
+        {canViewSource && (
           <Button
             className={styles.IconButton}
+            onClick={viewSource}
             title="View source for this element"
           >
             <ButtonIcon type="view-source" />
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 62e4b170502b..66b4b1b08874 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -56,6 +56,9 @@ type Context = {|
   ownerStackIndex: number | null,
   resetOwnerStack(): void,
   selectOwner(id: number): void,
+
+  // Injected by parent HTML/JavaScript
+  viewElementSource: Function | null,
 |};
 
 const TreeContext = createContext<Context>(((null: any): Context));
@@ -473,8 +476,13 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   };
 }
 
+type Props = {|
+  children: React$Node,
+  viewElementSource: Function | null,
+|};
+
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
-function TreeContextController({ children }: {| children: React$Node |}) {
+function TreeContextController({ children, viewElementSource }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -599,6 +607,9 @@ function TreeContextController({ children }: {| children: React$Node |}) {
       ownerStackIndex: state.ownerStackIndex,
       resetOwnerStack,
       selectOwner,
+
+      // Injected by parent HTML/JavaScript
+      viewElementSource,
     }),
     [
       getElementAtIndex,
@@ -612,6 +623,7 @@ function TreeContextController({ children }: {| children: React$Node |}) {
       selectPreviousElementInTree,
       setSearchText,
       state,
+      viewElementSource,
     ]
   );
 

From 7b2f06e3d3960477a190b6a12238651596865284 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Feb 2019 14:36:10 -0800
Subject: [PATCH 096/814] Added (temporary) deploy scripts for pre-release
 extensions

---
 package.json                     |  4 +++
 shells/browser/chrome/build.js   |  7 +----
 shells/browser/chrome/deploy.js  |  7 +++++
 shells/browser/chrome/now.json   |  5 ++++
 shells/browser/firefox/build.js  |  9 ++----
 shells/browser/firefox/deploy.js |  7 +++++
 shells/browser/firefox/now.json  |  5 ++++
 shells/browser/shared/build.js   |  6 +++-
 shells/browser/shared/deploy.js  | 49 ++++++++++++++++++++++++++++++++
 9 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 shells/browser/chrome/deploy.js
 create mode 100644 shells/browser/chrome/now.json
 create mode 100644 shells/browser/firefox/deploy.js
 create mode 100644 shells/browser/firefox/now.json
 create mode 100644 shells/browser/shared/deploy.js

diff --git a/package.json b/package.json
index 1786de140720..cf319f202735 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,10 @@
     "build:extension:chrome": "node ./shells/browser/chrome/build",
     "build:extension:firefox": "node ./shells/browser/firefox/build",
     "build:standalone": "cd packages/react-devtools-core && yarn run build",
+    "deploy": "yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox",
+    "deploy:demo": "cd shells/dev/ && now deploy && now alias react-devtools-experimental",
+    "deploy:chrome": "node ./shells/browser/chrome/deploy",
+    "deploy:firefox": "node ./shells/browser/firefox/deploy",
     "linc": "lint-staged",
     "lint": "eslint '**/*.js'",
     "precommit": "lint-staged",
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 1311527d5901..57b2dbb1f9b1 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -1,15 +1,10 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
-const { join } = require('path');
 const build = require('../shared/build');
 
 const main = async () => {
-  await build(
-    'chrome',
-    join(__dirname, 'manifest.json'),
-    join(__dirname, 'build')
-  );
+  await build('chrome');
 
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
diff --git a/shells/browser/chrome/deploy.js b/shells/browser/chrome/deploy.js
new file mode 100644
index 000000000000..1cfdf39085e3
--- /dev/null
+++ b/shells/browser/chrome/deploy.js
@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+const deploy = require('../shared/deploy');
+
+const main = async () => await deploy('chrome');
+
+main();
diff --git a/shells/browser/chrome/now.json b/shells/browser/chrome/now.json
new file mode 100644
index 000000000000..0dd396949c1a
--- /dev/null
+++ b/shells/browser/chrome/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-chrome",
+  "alias": ["react-devtools-experimental-chrome"],
+  "files": ["index.html", "packed.zip"]
+}
diff --git a/shells/browser/firefox/build.js b/shells/browser/firefox/build.js
index 993399e2780c..5f7e7c5df95c 100644
--- a/shells/browser/firefox/build.js
+++ b/shells/browser/firefox/build.js
@@ -1,15 +1,10 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
-const { join } = require('path');
 const build = require('../shared/build');
 
 const main = async () => {
-  await build(
-    'firefox',
-    join(__dirname, 'manifest.json'),
-    join(__dirname, 'build')
-  );
+  await build('firefox');
 
   console.log(chalk.green('\nThe Firefox extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
@@ -36,3 +31,5 @@ const main = async () => {
 };
 
 main();
+
+module.exports = { main };
diff --git a/shells/browser/firefox/deploy.js b/shells/browser/firefox/deploy.js
new file mode 100644
index 000000000000..b7977d62f0ab
--- /dev/null
+++ b/shells/browser/firefox/deploy.js
@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+const deploy = require('../shared/deploy');
+
+const main = async () => await deploy('firefox');
+
+main();
diff --git a/shells/browser/firefox/now.json b/shells/browser/firefox/now.json
new file mode 100644
index 000000000000..324d62388e1a
--- /dev/null
+++ b/shells/browser/firefox/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-firefox",
+  "alias": ["react-devtools-experimental-firefox"],
+  "files": ["index.html", "packed.zip"]
+}
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index b8107aa1ad3b..393319831c5a 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -78,7 +78,11 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
-const main = async (buildId, manifestPath, destinationPath) => {
+const main = async buildId => {
+  const root = join(__dirname, '..', buildId);
+  const manifestPath = join(root, 'manifest.json');
+  const destinationPath = join(root, 'build');
+
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await preProcess(destinationPath, tempPath);
diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
new file mode 100644
index 000000000000..62ddfe4c7236
--- /dev/null
+++ b/shells/browser/shared/deploy.js
@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+const { exec, execSync } = require('child_process');
+const { readFileSync, writeFileSync } = require('fs');
+const { join } = require('path');
+const build = require('./build');
+
+const main = async buildId => {
+  const root = join(__dirname, '..', buildId);
+  const buildPath = join(root, 'build');
+
+  await build(buildId);
+
+  await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {
+    cwd: root,
+  });
+
+  const file = readFileSync(join(root, 'now.json'));
+  const json = JSON.parse(file);
+  const alias = json.alias[0];
+
+  const commit = execSync('git rev-parse HEAD')
+    .toString()
+    .trim()
+    .substr(0, 7);
+  const date = new Date();
+
+  writeFileSync(
+    join(buildPath, 'index.html'),
+    `
+    <html>
+      <body>
+        <h1>${date.toLocaleDateString()} – ${date.toLocaleTimeString()}</h1>
+        <h2>Source <a href="http://github.com/bvaughn/react-devtools-experimental/commit/${commit}">${commit}</a></h2>
+        <a href="packed.zip">packed.zip</a>
+      </body>
+    </html>
+  `
+  );
+
+  await exec(`now deploy && now alias ${alias}`, {
+    cwd: buildPath,
+    stdio: 'inherit',
+  });
+
+  console.log(`Deployed to https://${alias}.now.sh`);
+};
+
+module.exports = main;

From 9b96b1f809f939eee258ae5992ea2692647a612a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 23 Feb 2019 08:59:21 -0800
Subject: [PATCH 097/814] Updated deploy scripts and pre-release template

---
 shells/browser/shared/deploy.chrome.html  |  8 ++++
 shells/browser/shared/deploy.firefox.html |  6 +++
 shells/browser/shared/deploy.html         | 46 +++++++++++++++++++++++
 shells/browser/shared/deploy.js           | 29 +++++++-------
 shells/dev/index.html                     | 23 +++++++++++-
 5 files changed, 97 insertions(+), 15 deletions(-)
 create mode 100644 shells/browser/shared/deploy.chrome.html
 create mode 100644 shells/browser/shared/deploy.firefox.html
 create mode 100644 shells/browser/shared/deploy.html

diff --git a/shells/browser/shared/deploy.chrome.html b/shells/browser/shared/deploy.chrome.html
new file mode 100644
index 000000000000..be4282e148b6
--- /dev/null
+++ b/shells/browser/shared/deploy.chrome.html
@@ -0,0 +1,8 @@
+<ol>
+  <li><a href="packed.zip">download extension</a></li>
+  <li>Double-click to extract</li>
+  <li>Visit <code>chrome://extensions</code></li>
+  <li>Ensure "Developer Mode" is enabled</li>
+  <li>Click "LOAD UNPACKED"</li>
+  <li>Select extension</li>
+</ol>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.firefox.html b/shells/browser/shared/deploy.firefox.html
new file mode 100644
index 000000000000..bc899c5f01d9
--- /dev/null
+++ b/shells/browser/shared/deploy.firefox.html
@@ -0,0 +1,6 @@
+<ol>
+  <li><a href="packed.zip">download extension</a></li>
+  <li>Visit <code>about:debugging</code></li>
+  <li>Click "Load Temporary Add-on"</li>
+  <li>Select extension</li>
+</ol>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.html b/shells/browser/shared/deploy.html
new file mode 100644
index 000000000000..fa9a21b42fd1
--- /dev/null
+++ b/shells/browser/shared/deploy.html
@@ -0,0 +1,46 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>React DevTools pre-release</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+        sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <h1>
+    React DevTools pre-release
+  </h1>
+
+  <h3>
+    Created on <strong>%date%</strong> from
+    <a href="http://github.com/bvaughn/react-devtools-experimental/commit/%commit%"><code>%commit%</code></a>
+  </h3>
+
+  <p>
+    This is a preview build of an <a href="https://github.com/bvaughn/react-devtools-experimental">unreleased DevTools extension</a>.
+    It has no developer support.
+  </p>
+
+  <h2>Installation instructions</h2>
+  %installation%
+  <p>
+    If you already have the React DevTools extension installed, you will need to temporarily disable or remove it in order to install this prerelease build.
+  </p>
+
+  <h2>Bug reports</h2>
+  <p>
+    Please report bugs as <a href="https://github.com/bvaughn/react-devtools-experimental/issues/new?labels=bug">GitHub issues</a>.
+    Please include all of the info required to reproduce the bug (e.g. links, code, instructions).
+  </p>
+
+  <h2>Feature requests</h2>
+  <p>
+    Feature requests are not being accepted at this time.
+  </p>
+</body>
+</html>
diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index 62ddfe4c7236..c896190c5da2 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -23,20 +23,21 @@ const main = async buildId => {
     .toString()
     .trim()
     .substr(0, 7);
-  const date = new Date();
-
-  writeFileSync(
-    join(buildPath, 'index.html'),
-    `
-    <html>
-      <body>
-        <h1>${date.toLocaleDateString()} – ${date.toLocaleTimeString()}</h1>
-        <h2>Source <a href="http://github.com/bvaughn/react-devtools-experimental/commit/${commit}">${commit}</a></h2>
-        <a href="packed.zip">packed.zip</a>
-      </body>
-    </html>
-  `
-  );
+
+  let date = new Date();
+  date = `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`;
+
+  const installationInstructions =
+    buildId === 'chrome'
+      ? readFileSync(join(__dirname, 'deploy.chrome.html'))
+      : readFileSync(join(__dirname, 'deploy.firefox.html'));
+
+  let html = readFileSync(join(__dirname, 'deploy.html')).toString();
+  html = html.replace(/%commit%/g, commit);
+  html = html.replace(/%date%/g, date);
+  html = html.replace(/%installation%/, installationInstructions);
+
+  writeFileSync(join(buildPath, 'index.html'), html);
 
   await exec(`now deploy && now alias ${alias}`, {
     cwd: buildPath,
diff --git a/shells/dev/index.html b/shells/dev/index.html
index caef7119cccc..2b031d0d70bf 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -24,11 +24,32 @@
         bottom: 0;
         margin: 0;
         padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+          sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .optionsRow {
+        width: 100%;
+        display: flex;
+        padding: 0.25rem;
+        background: aliceblue;
+        border-bottom: 1px solid lightblue;
+      }
+      .optionsRowSpacer {
+        flex: 1;
       }
     </style>
   </head>
   <body>
-    <button id="mountButton">Unmount test app</button>
+    <div class="optionsRow">
+      <button id="mountButton">Unmount test app</button>
+      <div class="optionsRowSpacer">&nbsp;</div>
+      <span>
+        <a href="https://react-devtools-experimental-chrome.now.sh/">Chrome extension</a>
+        <a href="https://react-devtools-experimental-firefox.now.sh/">Firefox extension</a>
+      </span>
+    </div>
 
     <!-- React test app (shells/dev/app) is injected here -->
     <!-- DevTools backend (shells/dev/src) is injected here -->

From 9f24e8c7a2ca286bfbd5e065745c5726701b320c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 23 Feb 2019 09:12:17 -0800
Subject: [PATCH 098/814] Renamed overrideHook -> overrideHookState (to stay in
 sync with React PR)

---
 src/backend/agent.js            | 4 ++--
 src/backend/renderer.js         | 8 ++++----
 src/backend/types.js            | 2 +-
 src/devtools/views/HooksTree.js | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 11310e4381a8..fbd306f3bb72 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -48,7 +48,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('overrideContext', this.overrideContext);
-    bridge.addListener('overrideHook', this.overrideHook);
+    bridge.addListener('overrideHookState', this.overrideHookState);
     bridge.addListener('overrideProps', this.overrideProps);
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('selectElement', this.selectElement);
@@ -132,7 +132,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  overrideHook = ({
+  overrideHookState = ({
     id,
     index,
     path,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 96a71257e102..f3674cd36982 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -194,7 +194,7 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
-  const { overrideHook, overrideProps } = renderer;
+  const { overrideHookState, overrideProps } = renderer;
 
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
@@ -1180,7 +1180,7 @@ export function attach(
       id,
 
       // Does the current renderer support editable hooks?
-      canEditHooks: typeof overrideHook === 'function',
+      canEditHooks: typeof overrideHookState === 'function',
 
       // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
@@ -1215,8 +1215,8 @@ export function attach(
   ) {
     const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
     if (fiber !== null) {
-      if (typeof overrideHook === 'function') {
-        overrideHook(fiber, index, path, value);
+      if (typeof overrideHookState === 'function') {
+        overrideHookState(fiber, index, path, value);
       }
     }
   }
diff --git a/src/backend/types.js b/src/backend/types.js
index 8828dd320f33..445ba7b07a03 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -35,7 +35,7 @@ export type ReactRenderer = {
   bundleType: BundleType,
 
   // 16.9+
-  overrideHook?: ?(
+  overrideHookState?: ?(
     fiber: Object,
     index: number,
     path: Array<string | number>,
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index bd9734406786..4686540caa12 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -144,7 +144,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
     if (canEditHooks && isEditable) {
       overrideValueFn = (path: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
-        bridge.send('overrideHook', {
+        bridge.send('overrideHookState', {
           id,
           index,
           path,

From 89df0a6363d15a502b278a25b31a97706b4346c8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Feb 2019 18:32:29 -0800
Subject: [PATCH 099/814] Yarn upgrade

---
 package.json                              |    6 +-
 shells/browser/shared/src/panels/utils.js |    2 +-
 shells/dev/app/ElementTypes/index.js      |    5 +-
 shells/dev/src/devtools.js                |    2 +-
 yarn.lock                                 | 3067 ++++++++++++---------
 5 files changed, 1726 insertions(+), 1356 deletions(-)

diff --git a/package.json b/package.json
index cf319f202735..c89882904af5 100644
--- a/package.json
+++ b/package.json
@@ -93,10 +93,10 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
-    "react": "^16.8.0-alpha.1",
+    "react": "^16.8",
     "react-color": "^2.11.7",
-    "react-dom": "^16.8.0-alpha.1",
-    "react-is": "^16.8.0-alpha.1",
+    "react-dom": "^16.8",
+    "react-is": "^16.8",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.5.1",
diff --git a/shells/browser/shared/src/panels/utils.js b/shells/browser/shared/src/panels/utils.js
index adc0fd50b3ab..1f807fc922f1 100644
--- a/shells/browser/shared/src/panels/utils.js
+++ b/shells/browser/shared/src/panels/utils.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
 import { createElement } from 'react';
-import { createRoot, flushSync } from 'react-dom';
+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import DevTools from 'src/devtools/views/DevTools';
 import { getBrowserName, getBrowserTheme } from '../utils';
 
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index 5012f0ba8b00..4b2309a29bdb 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -6,10 +6,11 @@ import React, {
   lazy,
   memo,
   Component,
-  ConcurrentMode,
+  // $FlowFixMe Flow thinks ConcurrentMode is stable
+  unstable_ConcurrentMode as ConcurrentMode,
   Fragment,
   // $FlowFixMe Flow doesn't know about the Profiler import yet
-  Profiler,
+  unstable_Profiler as Profiler,
   StrictMode,
   Suspense,
 } from 'react';
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index accc6af827b1..a4d3fca3e061 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -2,7 +2,7 @@
 
 import { createElement } from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
-import { createRoot } from 'react-dom';
+import { unstable_createRoot as createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
diff --git a/yarn.lock b/yarn.lock
index 4dc51cfd6b79..5fb4e0b02851 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,36 +18,25 @@
     js-tokens "^3.0.0"
 
 "@babel/core@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.6.tgz#3733cbee4317429bc87c62b29cf8587dba7baeb3"
-  integrity sha512-Hz6PJT6e44iUNpAn8AoyAs6B3bl60g7MJQaI0rZEar6ECzh6+srYO1xlIdssio34mPaUtAb1y+XlkkSJzok3yw==
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.3.3.tgz#d090d157b7c5060d05a05acaebc048bd2b037947"
+  integrity sha512-w445QGI2qd0E0GlSnq6huRZWPMmQGCp5gd5ZWS4hagn0EiwzxD5QMFkpchyusAyVC1n27OKXzQ0/88aVU9n4xQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.1.6"
-    "@babel/helpers" "^7.1.5"
-    "@babel/parser" "^7.1.6"
-    "@babel/template" "^7.1.2"
-    "@babel/traverse" "^7.1.6"
-    "@babel/types" "^7.1.6"
+    "@babel/generator" "^7.3.3"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.3.3"
+    "@babel/template" "^7.2.2"
+    "@babel/traverse" "^7.2.2"
+    "@babel/types" "^7.3.3"
     convert-source-map "^1.1.0"
     debug "^4.1.0"
     json5 "^2.1.0"
-    lodash "^4.17.10"
+    lodash "^4.17.11"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz#001303cf87a5b9d093494a4bf251d7b5d03d3999"
-  integrity sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ==
-  dependencies:
-    "@babel/types" "^7.1.6"
-    jsesc "^2.5.1"
-    lodash "^4.17.10"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
 "@babel/generator@^7.2.2":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.0.tgz#f663838cd7b542366de3aa608a657b8ccb2a99eb"
@@ -59,6 +48,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.3.3":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.3.tgz#185962ade59a52e00ca2bdfcfd1d58e528d4e39e"
+  integrity sha512-aEADYwRRZjJyMnKN7llGIlircxTCofm3dtV5pmY6ob18MSIuipHpA2yZWkPlycwu5HJcx/pADS3zssd8eY7/6A==
+  dependencies:
+    "@babel/types" "^7.3.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -91,6 +91,17 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
+"@babel/helper-create-class-features-plugin@^7.3.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.3.2.tgz#ba1685603eb1c9f2f51c9106d5180135c163fe73"
+  integrity sha512-tdW8+V8ceh2US4GsYdNVNoohq5uVwOf9k6krjwW4E1lINcHgttnWcNqgdoessn12dAy8QkbezlbQh2nXISNY+A==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.2.3"
+
 "@babel/helper-define-map@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
@@ -146,15 +157,15 @@
     "@babel/types" "^7.0.0"
 
 "@babel/helper-module-transforms@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.1.0.tgz#470d4f9676d9fad50b324cdcce5fbabbc3da5787"
-  integrity sha512-0JZRd2yhawo79Rcm4w0LwSMILFmFXjugG3yqf+P/UsKsRS1mJCmMwwlHDlMg7Avr9LrvSpp4ZSULO9r8jpCzcw==
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.2.2.tgz#ab2f8e8d231409f8370c883d20c335190284b963"
+  integrity sha512-YRD7I6Wsv+IHuTPkAmAS4HhY0dkPobgLftHp0cRGZSdrRvmZY8rFvae/GVu3bD00qscuvK3WPHB3YdNpBXUqrA==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
     "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/template" "^7.2.2"
+    "@babel/types" "^7.2.2"
     lodash "^4.17.10"
 
 "@babel/helper-optimise-call-expression@^7.0.0":
@@ -187,14 +198,14 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-replace-supers@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.1.0.tgz#5fc31de522ec0ef0899dc9b3e7cf6a5dd655f362"
-  integrity sha512-BvcDWYZRWVuDeXTYZWxekQNO5D4kO55aArwZOTFXw6rlLQA8ZaDicJR1sO47h+HrnCiDFiww0fSPV0d713KBGQ==
+"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.2.3":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.2.3.tgz#19970020cf22677d62b3a689561dbd9644d8c5e5"
+  integrity sha512-GyieIznGUfPXPWu0yLS6U55Mz67AZD9cUk0BfirOWlPrXlBcan9Gz+vHGz+cPfuoweZSnPzPIm67VtQM0OWZbA==
   dependencies:
     "@babel/helper-member-expression-to-functions" "^7.0.0"
     "@babel/helper-optimise-call-expression" "^7.0.0"
-    "@babel/traverse" "^7.1.0"
+    "@babel/traverse" "^7.2.3"
     "@babel/types" "^7.0.0"
 
 "@babel/helper-simple-access@^7.1.0":
@@ -213,23 +224,23 @@
     "@babel/types" "^7.0.0"
 
 "@babel/helper-wrap-function@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66"
-  integrity sha512-R6HU3dete+rwsdAfrOzTlE9Mcpk4RjU3aX3gi9grtmugQY0u79X7eogUvfXA5sI81Mfq1cn6AgxihfN33STjJA==
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
+  integrity sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==
   dependencies:
     "@babel/helper-function-name" "^7.1.0"
     "@babel/template" "^7.1.0"
     "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.2.0"
 
-"@babel/helpers@^7.1.5":
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.5.tgz#68bfc1895d685f2b8f1995e788dbfe1f6ccb1996"
-  integrity sha512-2jkcdL02ywNBry1YNFAH/fViq4fXG0vdckHqeJk+75fpQ2OH+Az6076tX/M0835zA45E0Cqa6pV5Kiv9YOqjEg==
+"@babel/helpers@^7.2.0":
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.3.1.tgz#949eec9ea4b45d3210feb7dc1c22db664c9e44b9"
+  integrity sha512-Q82R3jKsVpUV99mgX50gOPCWwco9Ec5Iln/8Vyu4osNIOQgSrd9RFrQeUvmvddFNoLwMyOUWU+5ckioEKpDoGA==
   dependencies:
     "@babel/template" "^7.1.2"
     "@babel/traverse" "^7.1.5"
-    "@babel/types" "^7.1.5"
+    "@babel/types" "^7.3.0"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -245,90 +256,79 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.1.tgz#8f4ffd45f779e6132780835ffa7a215fa0b2d181"
   integrity sha512-ATz6yX/L8LEnC3dtLQnIx4ydcPxhLcoy9Vl6re00zb2w5lG6itY6Vhnr1KFRPq/FHNsgl/gh2mjNN20f9iJTTA==
 
-"@babel/parser@^7.1.2", "@babel/parser@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
-  integrity sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==
+"@babel/parser@^7.2.2", "@babel/parser@^7.3.3":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.3.tgz#092d450db02bdb6ccb1ca8ffd47d8774a91aef87"
+  integrity sha512-xsH1CJoln2r74hR+y7cg2B5JCPaTh+Hd+EbBRk9nWGSNspuo6krjhX0Om6RnRQuIvFq8wVXCLKH3kwKDYhanSg==
 
-"@babel/plugin-proposal-async-generator-functions@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
-  integrity sha512-Fq803F3Jcxo20MXUSDdmZZXrPe6BWyGcWBPPNB/M7WaUYESKDeKMOGIxEzQOjGSmW/NWb6UaPZrtTB2ekhB/ew==
+"@babel/plugin-proposal-async-generator-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
+  integrity sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.1.0"
-    "@babel/plugin-syntax-async-generators" "^7.0.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
 
 "@babel/plugin-proposal-class-properties@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.1.0.tgz#9af01856b1241db60ec8838d84691aa0bd1e8df4"
-  integrity sha512-/PCJWN+CKt5v1xcGn4vnuu13QDoV+P7NcICP44BoonAJoPSGwVkgrXihFIQGiEjjPlUDBIw1cM7wYFLARS2/hw==
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.3.tgz#e69ee114a834a671293ace001708cc1682ed63f9"
+  integrity sha512-XO9eeU1/UwGPM8L+TjnQCykuVcXqaO5J1bkRPIygqZ/A2L1xVMJ9aZXrY31c0U4H2/LHKL4lbFQLsxktSrc/Ng==
   dependencies:
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-member-expression-to-functions" "^7.0.0"
-    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.1.0"
-    "@babel/plugin-syntax-class-properties" "^7.0.0"
 
-"@babel/plugin-proposal-json-strings@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.0.0.tgz#3b4d7b5cf51e1f2e70f52351d28d44fc2970d01e"
-  integrity sha512-kfVdUkIAGJIVmHmtS/40i/fg/AGnw/rsZBCaapY5yjeO5RA9m165Xbw9KMOu2nqXP5dTFjEjHdfNdoVcHv133Q==
+"@babel/plugin-proposal-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
+  integrity sha512-MAFV1CA/YVmYwZG0fBQyXhmj0BHCB5egZHCKWIFVv/XCxAeVGIHfos3SwDck4LvCllENIAg7xMKOG5kH0dzyUg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-json-strings" "^7.0.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0.tgz#9a17b547f64d0676b6c9cecd4edf74a82ab85e7e"
-  integrity sha512-14fhfoPcNu7itSen7Py1iGN0gEm87hX/B+8nZPqkdmANyyYWYMY2pjA3r8WXbWVKMzfnSNS0xY8GVS0IjXi/iw==
+"@babel/plugin-proposal-object-rest-spread@^7.3.1":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.2.tgz#6d1859882d4d778578e41f82cc5d7bf3d5daf6c1"
+  integrity sha512-DjeMS+J2+lpANkYLLO+m6GjoTMygYglKmRe6cDTbFv3L9i6mmiE8fe6B8MtCSLZpVXscD5kn7s6SgtHrDoBWoA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.0.0.tgz#b610d928fe551ff7117d42c8bb410eec312a6425"
-  integrity sha512-JPqAvLG1s13B/AuoBjdBYvn38RqW6n1TzrQO839/sIpqLpbnXKacsAgpZHzLD83Sm8SDXMkkrAvEnJ25+0yIpw==
+"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
+  integrity sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.0.0.tgz#498b39cd72536cd7c4b26177d030226eba08cd33"
-  integrity sha512-tM3icA6GhC3ch2SkmSxv7J/hCWKISzwycub6eGsDrFDgukD4dZ/I+x81XgW0YslS6mzNuQ1Cbzh5osjIMgepPQ==
+"@babel/plugin-proposal-unicode-property-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.2.0.tgz#abe7281fe46c95ddc143a65e5358647792039520"
+  integrity sha512-LvRVYb7kikuOtIoUeWTkOxQEV1kYvL5B6U3iWEGCzPNRus1MzJweFqORTj+0jkxozkTSYNJozPOddxmqdqsRpw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.2.0"
 
-"@babel/plugin-syntax-async-generators@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0.tgz#bf0891dcdbf59558359d0c626fdc9490e20bc13c"
-  integrity sha512-im7ged00ddGKAjcZgewXmp1vxSZQQywuQXe2B1A7kajjZmDeY/ekMPmWr9zJgveSaQH0k7BcGrojQhcK06l0zA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-class-properties@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0.tgz#e051af5d300cbfbcec4a7476e37a803489881634"
-  integrity sha512-cR12g0Qzn4sgkjrbrzWy2GE7m9vMl/sFkqZ3gIpAQdrvPDnLM8180i+ANDFIXfjHo9aqp0ccJlQ0QNZcFUbf9w==
+"@babel/plugin-syntax-async-generators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
+  integrity sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-flow@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0.tgz#70638aeaad9ee426bc532e51523cff8ff02f6f17"
-  integrity sha512-zGcuZWiWWDa5qTZ6iAnpG0fnX/GOu49pGR5PFvkQ9GmKNaSphXQnlNXh/LG20sqWtNrx/eB6krzfEzcwvUyeFA==
+"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c"
+  integrity sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-json-strings@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz#0d259a68090e15b383ce3710e01d5b23f3770cbd"
-  integrity sha512-UlSfNydC+XLj4bw7ijpldc1uZ/HB84vw+U6BTuqMdIEmz/LDe63w/GHtpQMdXWdqQZFeAI9PjnHe/vDhwirhKA==
+"@babel/plugin-syntax-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
+  integrity sha512-5UGYnMSLRE1dqqZwug+1LISpA403HzlSfsg6P9VXU6TBjcSHeNlw4DxDx7LgpF+iKZoOG/+uzqoRHTdcUpiZNg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
@@ -339,55 +339,55 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz#37d8fbcaf216bd658ea1aebbeb8b75e88ebc549b"
-  integrity sha512-5A0n4p6bIiVe5OvQPxBnesezsgFJdHhSs3uFSvaPdMqtsovajLZ+G2vZyvNe10EzJBWWo3AcHGKhAFUxqwp2dw==
+"@babel/plugin-syntax-object-rest-spread@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
+  integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.0.0.tgz#886f72008b3a8b185977f7cb70713b45e51ee475"
-  integrity sha512-Wc+HVvwjcq5qBg1w5RG9o9RVzmCaAg/Vp0erHCKpAYV8La6I94o4GQAmFYNmkzoMO6gzoOSulpKeSSz6mPEoZw==
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
+  integrity sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.0.0.tgz#a6c14875848c68a3b4b3163a486535ef25c7e749"
-  integrity sha512-2EZDBl1WIO/q4DIkIp4s86sdp4ZifL51MoIviLY/gG/mLSuOIEg7J8o6mhbxOTvUJkaN50n+8u41FVsr5KLy/w==
+"@babel/plugin-transform-arrow-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
+  integrity sha512-ER77Cax1+8/8jCB9fo4Ud161OZzWN5qawi4GusDuRLcDbDG+bIGYY20zb2dfAFdTRGzrfq2xZPvF0R64EHnimg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-async-to-generator@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.1.0.tgz#109e036496c51dd65857e16acab3bafdf3c57811"
-  integrity sha512-rNmcmoQ78IrvNCIt/R9U+cixUHeYAzgusTFgIAv+wQb9HJU4szhpDD6e5GCACmj/JP5KxuCwM96bX3L9v4ZN/g==
+"@babel/plugin-transform-async-to-generator@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.2.0.tgz#68b8a438663e88519e65b776f8938f3445b1a2ff"
+  integrity sha512-CEHzg4g5UraReozI9D4fblBYABs7IM6UerAVG7EJVrTLC5keh00aEuLUT+O40+mJCEzaXkYfTCUKIyeDfMOFFQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.1.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.0.0.tgz#482b3f75103927e37288b3b67b65f848e2aa0d07"
-  integrity sha512-AOBiyUp7vYTqz2Jibe1UaAWL0Hl9JUXEgjFvvvcSc9MVDItv46ViXFw2F7SVt1B5k+KWjl44eeXOAk3UDEaJjQ==
+"@babel/plugin-transform-block-scoped-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
+  integrity sha512-ntQPR6q1/NKuphly49+QiQiTN0O63uOwjdD6dhIjSWBI5xlrbUFh720TIpzBhpnrLfv2tNH/BXvLIab1+BAI0w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-block-scoping@^7.1.5":
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.1.5.tgz#3e8e0bc9a5104519923302a24f748f72f2f61f37"
-  integrity sha512-jlYcDrz+5ayWC7mxgpn1Wj8zj0mmjCT2w0mPIMSwO926eXBRxpEgoN/uQVRBfjtr8ayjcmS+xk2G1jaP8JjMJQ==
+"@babel/plugin-transform-block-scoping@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.2.0.tgz#f17c49d91eedbcdf5dd50597d16f5f2f770132d4"
+  integrity sha512-vDTgf19ZEV6mx35yiPJe4fS02mPQUUcBNwWQSZFXSzTSbsJFQvHt7DqyS3LK8oOWALFOsJ+8bbqBgkirZteD5Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.10"
 
-"@babel/plugin-transform-classes@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.1.0.tgz#ab3f8a564361800cbc8ab1ca6f21108038432249"
-  integrity sha512-rNaqoD+4OCBZjM7VaskladgqnZ1LO6o2UxuWSDzljzW21pN1KXkB7BstAVweZdxQkHAujps5QMNOTWesBciKFg==
+"@babel/plugin-transform-classes@^7.2.0":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.3.3.tgz#a0532d6889c534d095e8f604e9257f91386c4b51"
+  integrity sha512-n0CLbsg7KOXsMF4tSTLCApNMoXk0wOPb0DYfsOO1e7SfIb9gOyfbpKI2MZ+AXfqvlfzq2qsflJ1nEns48Caf2w==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-define-map" "^7.1.0"
@@ -398,45 +398,45 @@
     "@babel/helper-split-export-declaration" "^7.0.0"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.0.0.tgz#2fbb8900cd3e8258f2a2ede909b90e7556185e31"
-  integrity sha512-ubouZdChNAv4AAWAgU7QKbB93NU5sHwInEWfp+/OzJKA02E6Woh9RVoX4sZrbRwtybky/d7baTUqwFx+HgbvMA==
+"@babel/plugin-transform-computed-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
+  integrity sha512-kP/drqTxY6Xt3NNpKiMomfgkNn4o7+vKxK2DDKcBG9sHj51vHqMBGy8wbDS/J4lMxnqs153/T3+DmCEAkC5cpA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.0.0":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.1.3.tgz#e69ff50ca01fac6cb72863c544e516c2b193012f"
-  integrity sha512-Mb9M4DGIOspH1ExHOUnn2UUXFOyVTiX84fXCd+6B5iWrQg/QMeeRmSwpZ9lnjYLSXtZwiw80ytVMr3zue0ucYw==
+"@babel/plugin-transform-destructuring@^7.2.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.3.2.tgz#f2f5520be055ba1c38c41c0e094d8a461dd78f2d"
+  integrity sha512-Lrj/u53Ufqxl/sGxyjsJ2XNtNuEjDyjpqdhMNh5aZ+XFOdThL46KBj27Uem4ggoezSYBxKWAil6Hu8HtwqesYw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.0.0.tgz#73a24da69bc3c370251f43a3d048198546115e58"
-  integrity sha512-00THs8eJxOJUFVx1w8i1MBF4XH4PsAjKjQ1eqN/uCH3YKwP21GCKfrn6YZFZswbOk9+0cw1zGQPHVc1KBlSxig==
+"@babel/plugin-transform-dotall-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.2.0.tgz#f0aabb93d120a8ac61e925ea0ba440812dbe0e49"
+  integrity sha512-sKxnyHfizweTgKZf7XsXu/CNupKhzijptfTM+bozonIuyVrLWVUvYjE2bhuSBML8VQeMxq4Mm63Q9qvcvUcciQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
-"@babel/plugin-transform-duplicate-keys@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.0.0.tgz#a0601e580991e7cace080e4cf919cfd58da74e86"
-  integrity sha512-w2vfPkMqRkdxx+C71ATLJG30PpwtTpW7DDdLqYt2acXU7YjztzeWW2Jk1T6hKqCLYCcEA5UQM/+xTAm+QCSnuQ==
+"@babel/plugin-transform-duplicate-keys@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz#d952c4930f312a4dbfff18f0b2914e60c35530b3"
+  integrity sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-exponentiation-operator@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.1.0.tgz#9c34c2ee7fd77e02779cfa37e403a2e1003ccc73"
-  integrity sha512-uZt9kD1Pp/JubkukOGQml9tqAeI8NkE98oZnHZ2qHRElmeKCodbTZgOEUtujSCSLhHSBWbzNiFSDIMC4/RBTLQ==
+"@babel/plugin-transform-exponentiation-operator@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
+  integrity sha512-umh4hR6N7mu4Elq9GG8TOu9M0bakvlsREEC+ialrQN6ABS4oDQ69qJv1VtR3uxlKMCQMCvzk7vr17RHKcjx68A==
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.1.6":
+"@babel/plugin-transform-flow-strip-types@^7.0.0":
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.1.6.tgz#4b7be62604d39e63cfe23b1d00d63e9fb7e763ba"
   integrity sha512-0tyFAAjJmnRlr8MVJV39ASn1hv+PbdVP71hf7aAseqLfQ0o9QXk9htbMbq7/ZYXnUIp6gDw0lUUP0+PQMbbtmg==
@@ -444,61 +444,76 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.0.0"
 
-"@babel/plugin-transform-for-of@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.0.0.tgz#f2ba4eadb83bd17dc3c7e9b30f4707365e1c3e39"
-  integrity sha512-TlxKecN20X2tt2UEr2LNE6aqA0oPeMT1Y3cgz8k4Dn1j5ObT8M3nl9aA37LLklx0PBZKETC9ZAf9n/6SujTuXA==
+"@babel/plugin-transform-flow-strip-types@^7.1.6":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.2.3.tgz#e3ac2a594948454e7431c7db33e1d02d51b5cd69"
+  integrity sha512-xnt7UIk9GYZRitqCnsVMjQK1O2eKZwFB3CvvHjf5SGx6K6vr/MScCKQDnf1DxRaj501e3pXjti+inbSXX2ZUoQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
 
-"@babel/plugin-transform-function-name@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.1.0.tgz#29c5550d5c46208e7f730516d41eeddd4affadbb"
-  integrity sha512-VxOa1TMlFMtqPW2IDYZQaHsFrq/dDoIjgN098NowhexhZcz3UGlvPgZXuE1jEvNygyWyxRacqDpCZt+par1FNg==
+"@babel/plugin-transform-for-of@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.2.0.tgz#ab7468befa80f764bb03d3cb5eef8cc998e1cad9"
+  integrity sha512-Kz7Mt0SsV2tQk6jG5bBv5phVbkd0gd27SgYD4hH1aLMJRchM0dzHaXvrWhVZ+WxAlDoAKZ7Uy3jVTW2mKXQ1WQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-function-name@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.2.0.tgz#f7930362829ff99a3174c39f0afcc024ef59731a"
+  integrity sha512-kWgksow9lHdvBC2Z4mxTsvc7YdY7w/V6B2vy9cTIPtLEE9NhwoWivaxdNM/S37elu5bqlLP/qOY906LukO9lkQ==
   dependencies:
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-literals@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.0.0.tgz#2aec1d29cdd24c407359c930cdd89e914ee8ff86"
-  integrity sha512-1NTDBWkeNXgpUcyoVFxbr9hS57EpZYXpje92zv0SUzjdu3enaRwF/l3cmyRnXLtIdyJASyiS6PtybK+CgKf7jA==
+"@babel/plugin-transform-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
+  integrity sha512-2ThDhm4lI4oV7fVQ6pNNK+sx+c/GM5/SaML0w/r4ZB7sAneD/piDJtwdKlNckXeyGK7wlwg2E2w33C/Hh+VFCg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-amd@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.1.0.tgz#f9e0a7072c12e296079b5a59f408ff5b97bf86a8"
-  integrity sha512-wt8P+xQ85rrnGNr2x1iV3DW32W8zrB6ctuBkYBbf5/ZzJY99Ob4MFgsZDFgczNU76iy9PWsy4EuxOliDjdKw6A==
+"@babel/plugin-transform-modules-amd@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz#82a9bce45b95441f617a24011dc89d12da7f4ee6"
+  integrity sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-commonjs@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.1.0.tgz#0a9d86451cbbfb29bd15186306897c67f6f9a05c"
-  integrity sha512-wtNwtMjn1XGwM0AXPspQgvmE6msSJP15CX2RVfpTSTNPLhKhaOjaIfBaVfj4iUZ/VrFSodcFedwtPg/NxwQlPA==
+"@babel/plugin-transform-modules-commonjs@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.2.0.tgz#c4f1933f5991d5145e9cfad1dfd848ea1727f404"
+  integrity sha512-V6y0uaUQrQPXUrmj+hgnks8va2L0zcZymeU7TtWEgdRLNkceafKXEduv7QzgQAE4lT+suwooG9dC7LFhdRAbVQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.0.0":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.1.3.tgz#2119a3e3db612fd74a19d88652efbfe9613a5db0"
-  integrity sha512-PvTxgjxQAq4pvVUZF3mD5gEtVDuId8NtWkJsZLEJZMZAW3TvgQl1pmydLLN1bM8huHFVVU43lf0uvjQj9FRkKw==
+"@babel/plugin-transform-modules-systemjs@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.2.0.tgz#912bfe9e5ff982924c81d0937c92d24994bb9068"
+  integrity sha512-aYJwpAhoK9a+1+O625WIjvMY11wkB/ok0WClVwmeo3mCjcNRjt+/8gHWrB5i+00mUju0gWsBkQnPpdvQ7PImmQ==
   dependencies:
     "@babel/helper-hoist-variables" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-umd@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.1.0.tgz#a29a7d85d6f28c3561c33964442257cc6a21f2a8"
-  integrity sha512-enrRtn5TfRhMmbRwm7F8qOj0qEYByqUvTttPEGimcBH4CJHphjyK1Vg7sdU7JjeEmgSpM890IT/efS2nMHwYig==
+"@babel/plugin-transform-modules-umd@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz#7678ce75169f0877b8eb2235538c074268dd01ae"
+  integrity sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.3.0.tgz#140b52985b2d6ef0cb092ef3b29502b990f9cd50"
+  integrity sha512-NxIoNVhk9ZxS+9lSoAQ/LM0V2UEvARLttEHUrRDGKFaAxOYQcrkN/nLRE+BbbicCAvZPl7wMP0X60HsHE5DtQw==
+  dependencies:
+    regexp-tree "^0.1.0"
+
 "@babel/plugin-transform-new-target@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.0.0.tgz#ae8fbd89517fa7892d20e6564e641e8770c3aa4a"
@@ -506,18 +521,18 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-object-super@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.1.0.tgz#b1ae194a054b826d8d4ba7ca91486d4ada0f91bb"
-  integrity sha512-/O02Je1CRTSk2SSJaq0xjwQ8hG4zhZGNjE8psTsSNPXyLRCODv7/PBozqT5AmQMzp7MI3ndvMhGdqp9c96tTEw==
+"@babel/plugin-transform-object-super@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz#b35d4c10f56bab5d650047dad0f1d8e8814b6598"
+  integrity sha512-VMyhPYZISFZAqAPVkiYb7dUe2AsVi2/wCT5+wZdsNO31FojQJa9ns40hzZ6U9f50Jlq4w6qwzdBB2uwqZ00ebg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.1.0"
 
-"@babel/plugin-transform-parameters@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.1.0.tgz#44f492f9d618c9124026e62301c296bf606a7aed"
-  integrity sha512-vHV7oxkEJ8IHxTfRr3hNGzV446GAb+0hgbA7o/0Jd76s+YzccdWuTU296FOCOl/xweU4t/Ya4g41yWz80RFCRw==
+"@babel/plugin-transform-parameters@^7.2.0":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.3.3.tgz#3a873e07114e1a5bee17d04815662c8317f10e30"
+  integrity sha512-IrIP25VvXWu/VlBWTpsjGptpomtIkYrN/3aDp4UKm7xK6UxZY88kcJ1UwETbzHAlwN21MnNfwlar0u8y3KpiXw==
   dependencies:
     "@babel/helper-call-delegate" "^7.1.0"
     "@babel/helper-get-function-arity" "^7.0.0"
@@ -562,95 +577,97 @@
   dependencies:
     regenerator-transform "^0.13.3"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.0.0.tgz#85f8af592dcc07647541a0350e8c95c7bf419d15"
-  integrity sha512-g/99LI4vm5iOf5r1Gdxq5Xmu91zvjhEG5+yZDJW268AZELAu4J1EiFLnkSG3yuUsZyOipVOVUKoGPYwfsTymhw==
+"@babel/plugin-transform-shorthand-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
+  integrity sha512-QP4eUM83ha9zmYtpbnyjTLAGKQritA5XW/iG9cjtuOI8s1RuL/3V6a3DeSHfKutJQ+ayUfeZJPcnCYEQzaPQqg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-spread@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.0.0.tgz#93583ce48dd8c85e53f3a46056c856e4af30b49b"
-  integrity sha512-L702YFy2EvirrR4shTj0g2xQp7aNwZoWNCkNu2mcoU0uyzMl0XRwDSwzB/xp6DSUFiBmEXuyAyEN16LsgVqGGQ==
+"@babel/plugin-transform-spread@^7.2.0":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.2.2.tgz#3103a9abe22f742b6d406ecd3cd49b774919b406"
+  integrity sha512-KWfky/58vubwtS0hLqEnrWJjsMGaOeSBn90Ezn5Jeg9Z8KKHmELbP1yGylMlm5N6TPKeY9A2+UaSYLdxahg01w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.0.0.tgz#30a9d64ac2ab46eec087b8530535becd90e73366"
-  integrity sha512-LFUToxiyS/WD+XEWpkx/XJBrUXKewSZpzX68s+yEOtIbdnsRjpryDw9U06gYc6klYEij/+KQVRnD3nz3AoKmjw==
+"@babel/plugin-transform-sticky-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
+  integrity sha512-KKYCoGaRAf+ckH8gEL3JHUaFVyNHKe3ASNsZ+AlktgHevvxGigoIttrEJb8iKN03Q7Eazlv1s6cx2B2cQ3Jabw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
-"@babel/plugin-transform-template-literals@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.0.0.tgz#084f1952efe5b153ddae69eb8945f882c7a97c65"
-  integrity sha512-vA6rkTCabRZu7Nbl9DfLZE1imj4tzdWcg5vtdQGvj+OH9itNNB6hxuRMHuIY8SGnEt1T9g5foqs9LnrHzsqEFg==
+"@babel/plugin-transform-template-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.2.0.tgz#d87ed01b8eaac7a92473f608c97c089de2ba1e5b"
+  integrity sha512-FkPix00J9A/XWXv4VoKJBMeSkyY9x/TqIh76wzcdfl57RJJcf8CehQ08uwfhCDNtRQYtHQKBTwKZDEyjE13Lwg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typeof-symbol@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.0.0.tgz#4dcf1e52e943e5267b7313bff347fdbe0f81cec9"
-  integrity sha512-1r1X5DO78WnaAIvs5uC48t41LLckxsYklJrZjNKcevyz83sF2l4RHbw29qrCPr/6ksFsdfRpT/ZgxNWHXRnffg==
+"@babel/plugin-transform-typeof-symbol@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
+  integrity sha512-2LNhETWYxiYysBtrBTqL8+La0jIoQQnIScUJc74OYvUGRmkskNY4EzLCnjHBzdmb38wqtTaixpo1NctEcvMDZw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.0.0.tgz#c6780e5b1863a76fe792d90eded9fcd5b51d68fc"
-  integrity sha512-uJBrJhBOEa3D033P95nPHu3nbFwFE9ZgXsfEitzoIXIwqAZWk7uXcg06yFKXz9FSxBH5ucgU/cYdX0IV8ldHKw==
+"@babel/plugin-transform-unicode-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.2.0.tgz#4eb8db16f972f8abb5062c161b8b115546ade08b"
+  integrity sha512-m48Y0lMhrbXEJnVUaYly29jRXbQ3ksxPrS1Tg8t+MHqzXhtBYAvI51euOBaoAlZLPHsieY9XPVMf80a5x0cPcA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
 "@babel/preset-env@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.6.tgz#a0bf4b96b6bfcf6e000afc5b72b4abe7cc13ae97"
-  integrity sha512-YIBfpJNQMBkb6MCkjz/A9J76SNCSuGVamOVBgoUkLzpJD/z8ghHi9I42LQ4pulVX68N/MmImz6ZTixt7Azgexw==
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.1.tgz#389e8ca6b17ae67aaf9a2111665030be923515db"
+  integrity sha512-FHKrD6Dxf30e8xgHQO0zJZpUPfVZg+Xwgz5/RdSWCbza9QLNk4Qbp40ctRoqDxml3O8RMzB1DU55SXeDG6PqHQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.1.0"
-    "@babel/plugin-proposal-json-strings" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.0.0"
-    "@babel/plugin-syntax-async-generators" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.1.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.1.5"
-    "@babel/plugin-transform-classes" "^7.1.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-dotall-regex" "^7.0.0"
-    "@babel/plugin-transform-duplicate-keys" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.1.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.1.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-amd" "^7.1.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.1.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.0.0"
-    "@babel/plugin-transform-modules-umd" "^7.1.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.2.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.2.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.2.0"
+    "@babel/plugin-transform-classes" "^7.2.0"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.2.0"
+    "@babel/plugin-transform-dotall-regex" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.2.0"
+    "@babel/plugin-transform-function-name" "^7.2.0"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.2.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.2.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.3.0"
     "@babel/plugin-transform-new-target" "^7.0.0"
-    "@babel/plugin-transform-object-super" "^7.1.0"
-    "@babel/plugin-transform-parameters" "^7.1.0"
+    "@babel/plugin-transform-object-super" "^7.2.0"
+    "@babel/plugin-transform-parameters" "^7.2.0"
     "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typeof-symbol" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    browserslist "^4.1.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.2.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.2.0"
+    browserslist "^4.3.4"
     invariant "^2.2.2"
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
@@ -681,16 +698,16 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/template@^7.1.0", "@babel/template@^7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
-  integrity sha512-SY1MmplssORfFiLDcOETrW7fCLl+PavlwMh92rrGcikQaRq4iWPVH0MpwPpY3etVMx6RnDjXtr6VZYr/IbP/Ag==
+"@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
+  integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.1.2"
-    "@babel/types" "^7.1.2"
+    "@babel/parser" "^7.2.2"
+    "@babel/types" "^7.2.2"
 
-"@babel/traverse@^7.0.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.2.2", "@babel/traverse@^7.2.3":
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.2.3.tgz#7ff50cefa9c7c0bd2d81231fdac122f3957748d8"
   integrity sha512-Z31oUD/fJvEWVR0lNZtfgvVt512ForCTNKYcJBGbPb1QZfve4WGH8Wsy7+Mev33/45fhP/hwQtvgusNdcCMgSw==
@@ -705,28 +722,13 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.6.tgz#c8db9963ab4ce5b894222435482bd8ea854b7b5c"
-  integrity sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.1.6"
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/parser" "^7.1.6"
-    "@babel/types" "^7.1.6"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.10"
-
-"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.1.5", "@babel/types@^7.1.6":
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.6.tgz#0adb330c3a281348a190263aceb540e10f04bcce"
-  integrity sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.3":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.3.tgz#6c44d1cdac2a7625b624216657d5bc6c107ab436"
+  integrity sha512-2tACZ80Wg09UnPg5uGAOUvvInaqLk3l/IAhQzlxLQOIXacr6bMsra5SH6AWw/hIDRCSbCdHP2KzSOD+cT7TzMQ==
   dependencies:
     esutils "^2.0.2"
-    lodash "^4.17.10"
+    lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
 "@babel/types@^7.2.2", "@babel/types@^7.3.0":
@@ -738,6 +740,11 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -745,158 +752,161 @@
   dependencies:
     any-observable "^0.3.0"
 
-"@webassemblyjs/ast@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
-  integrity sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/wast-parser" "1.7.11"
-
-"@webassemblyjs/floating-point-hex-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz#a69f0af6502eb9a3c045555b1a6129d3d3f2e313"
-  integrity sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg==
-
-"@webassemblyjs/helper-api-error@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz#c7b6bb8105f84039511a2b39ce494f193818a32a"
-  integrity sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg==
-
-"@webassemblyjs/helper-buffer@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz#3122d48dcc6c9456ed982debe16c8f37101df39b"
-  integrity sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w==
-
-"@webassemblyjs/helper-code-frame@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz#cf8f106e746662a0da29bdef635fcd3d1248364b"
-  integrity sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.7.11"
-
-"@webassemblyjs/helper-fsm@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz#df38882a624080d03f7503f93e3f17ac5ac01181"
-  integrity sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A==
-
-"@webassemblyjs/helper-module-context@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz#d874d722e51e62ac202476935d649c802fa0e209"
-  integrity sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg==
-
-"@webassemblyjs/helper-wasm-bytecode@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz#dd9a1e817f1c2eb105b4cf1013093cb9f3c9cb06"
-  integrity sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ==
-
-"@webassemblyjs/helper-wasm-section@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz#9c9ac41ecf9fbcfffc96f6d2675e2de33811e68a"
-  integrity sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-
-"@webassemblyjs/ieee754@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz#c95839eb63757a31880aaec7b6512d4191ac640b"
-  integrity sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ==
+"@webassemblyjs/ast@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.3.tgz#63a741bd715a6b6783f2ea5c6ab707516aa215eb"
+  integrity sha512-xy3m06+Iu4D32+6soz6zLnwznigXJRuFNTovBX2M4GqVqLb0dnyWLbPnpcXvUSdEN+9DVyDeaq2jyH1eIL2LZQ==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.8.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.3"
+    "@webassemblyjs/wast-parser" "1.8.3"
+
+"@webassemblyjs/floating-point-hex-parser@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.3.tgz#f198a2d203b3c50846a064f5addd6a133ef9bc0e"
+  integrity sha512-vq1TISG4sts4f0lDwMUM0f3kpe0on+G3YyV5P0IySHFeaLKRYZ++n2fCFfG4TcCMYkqFeTUYFxm75L3ddlk2xA==
+
+"@webassemblyjs/helper-api-error@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.3.tgz#3b708f6926accd64dcbaa7ba5b63db5660ff4f66"
+  integrity sha512-BmWEynI4FnZbjk8CaYZXwcv9a6gIiu+rllRRouQUo73hglanXD3AGFJE7Q4JZCoVE0p5/jeX6kf5eKa3D4JxwQ==
+
+"@webassemblyjs/helper-buffer@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.3.tgz#f3150a23ffaba68621e1f094c8a14bebfd53dd48"
+  integrity sha512-iVIMhWnNHoFB94+/2l7LpswfCsXeMRnWfExKtqsZ/E2NxZyUx9nTeKK/MEMKTQNEpyfznIUX06OchBHQ+VKi/Q==
+
+"@webassemblyjs/helper-code-frame@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.3.tgz#f43ac605789b519d95784ef350fd2968aebdd3ef"
+  integrity sha512-K1UxoJML7GKr1QXR+BG7eXqQkvu+eEeTjlSl5wUFQ6W6vaOc5OwSxTcb3oE9x/3+w4NHhrIKD4JXXCZmLdL2cg==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.8.3"
+
+"@webassemblyjs/helper-fsm@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.3.tgz#46aaa03f41082a916850ebcb97e9fc198ef36a9c"
+  integrity sha512-387zipfrGyO77/qm7/SDUiZBjQ5KGk4qkrVIyuoubmRNIiqn3g+6ijY8BhnlGqsCCQX5bYKOnttJobT5xoyviA==
+
+"@webassemblyjs/helper-module-context@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.3.tgz#150da405d90c8ea81ae0b0e1965b7b64e585634f"
+  integrity sha512-lPLFdQfaRssfnGEJit5Sk785kbBPPPK4ZS6rR5W/8hlUO/5v3F+rN8XuUcMj/Ny9iZiyKhhuinWGTUuYL4VKeQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    mamacro "^0.0.3"
+
+"@webassemblyjs/helper-wasm-bytecode@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.3.tgz#12f55bbafbbc7ddf9d8059a072cb7b0c17987901"
+  integrity sha512-R1nJW7bjyJLjsJQR5t3K/9LJ0QWuZezl8fGa49DZq4IVaejgvkbNlKEQxLYTC579zgT4IIIVHb5JA59uBPHXyw==
+
+"@webassemblyjs/helper-wasm-section@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.3.tgz#9e79456d9719e116f4f8998ee62ab54ba69a6cf3"
+  integrity sha512-P6F7D61SJY73Yz+fs49Q3+OzlYAZP86OfSpaSY448KzUy65NdfzDmo2NPVte+Rw4562MxEAacvq/mnDuvRWOcg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-buffer" "1.8.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.3"
+    "@webassemblyjs/wasm-gen" "1.8.3"
+
+"@webassemblyjs/ieee754@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.3.tgz#0a89355b1f6c9d08d0605c2acbc2a6fe3141f5b4"
+  integrity sha512-UD4HuLU99hjIvWz1pD68b52qsepWQlYCxDYVFJQfHh3BHyeAyAlBJ+QzLR1nnS5J6hAzjki3I3AoJeobNNSZlg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.11.tgz#d7267a1ee9c4594fd3f7e37298818ec65687db63"
-  integrity sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw==
-  dependencies:
-    "@xtuc/long" "4.2.1"
-
-"@webassemblyjs/utf8@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.11.tgz#06d7218ea9fdc94a6793aa92208160db3d26ee82"
-  integrity sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA==
-
-"@webassemblyjs/wasm-edit@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz#8c74ca474d4f951d01dbae9bd70814ee22a82005"
-  integrity sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/helper-wasm-section" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-    "@webassemblyjs/wasm-opt" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-    "@webassemblyjs/wast-printer" "1.7.11"
-
-"@webassemblyjs/wasm-gen@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz#9bbba942f22375686a6fb759afcd7ac9c45da1a8"
-  integrity sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/ieee754" "1.7.11"
-    "@webassemblyjs/leb128" "1.7.11"
-    "@webassemblyjs/utf8" "1.7.11"
-
-"@webassemblyjs/wasm-opt@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz#b331e8e7cef8f8e2f007d42c3a36a0580a7d6ca7"
-  integrity sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-
-"@webassemblyjs/wasm-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz#6e3d20fa6a3519f6b084ef9391ad58211efb0a1a"
-  integrity sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-api-error" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/ieee754" "1.7.11"
-    "@webassemblyjs/leb128" "1.7.11"
-    "@webassemblyjs/utf8" "1.7.11"
-
-"@webassemblyjs/wast-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz#25bd117562ca8c002720ff8116ef9072d9ca869c"
-  integrity sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/floating-point-hex-parser" "1.7.11"
-    "@webassemblyjs/helper-api-error" "1.7.11"
-    "@webassemblyjs/helper-code-frame" "1.7.11"
-    "@webassemblyjs/helper-fsm" "1.7.11"
-    "@xtuc/long" "4.2.1"
-
-"@webassemblyjs/wast-printer@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz#c4245b6de242cb50a2cc950174fdbf65c78d7813"
-  integrity sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/wast-parser" "1.7.11"
-    "@xtuc/long" "4.2.1"
+"@webassemblyjs/leb128@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.3.tgz#b7fd9d7c039e34e375c4473bd4dc89ce8228b920"
+  integrity sha512-XXd3s1BmkC1gpGABuCRLqCGOD6D2L+Ma2BpwpjrQEHeQATKWAQtxAyU9Z14/z8Ryx6IG+L4/NDkIGHrccEhRUg==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.3.tgz#75712db52cfdda868731569ddfe11046f1f1e7a2"
+  integrity sha512-Wv/WH9Zo5h5ZMyfCNpUrjFsLZ3X1amdfEuwdb7MLdG3cPAjRS6yc6ElULlpjLiiBTuzvmLhr3ENsuGyJ3wyCgg==
+
+"@webassemblyjs/wasm-edit@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.3.tgz#23c3c6206b096f9f6aa49623a5310a102ef0fb87"
+  integrity sha512-nB19eUx3Yhi1Vvv3yev5r+bqQixZprMtaoCs1brg9Efyl8Hto3tGaUoZ0Yb4Umn/gQCyoEGFfUxPLp1/8+Jvnw==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-buffer" "1.8.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.3"
+    "@webassemblyjs/helper-wasm-section" "1.8.3"
+    "@webassemblyjs/wasm-gen" "1.8.3"
+    "@webassemblyjs/wasm-opt" "1.8.3"
+    "@webassemblyjs/wasm-parser" "1.8.3"
+    "@webassemblyjs/wast-printer" "1.8.3"
+
+"@webassemblyjs/wasm-gen@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.3.tgz#1a433b8ab97e074e6ac2e25fcbc8cb6125400813"
+  integrity sha512-sDNmu2nLBJZ/huSzlJvd9IK8B1EjCsOl7VeMV9VJPmxKYgTJ47lbkSP+KAXMgZWGcArxmcrznqm7FrAPQ7vVGg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.3"
+    "@webassemblyjs/ieee754" "1.8.3"
+    "@webassemblyjs/leb128" "1.8.3"
+    "@webassemblyjs/utf8" "1.8.3"
+
+"@webassemblyjs/wasm-opt@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.3.tgz#54754bcf88f88e92b909416a91125301cc81419c"
+  integrity sha512-j8lmQVFR+FR4/645VNgV4R/Jz8i50eaPAj93GZyd3EIJondVshE/D9pivpSDIXyaZt+IkCodlzOoZUE4LnQbeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-buffer" "1.8.3"
+    "@webassemblyjs/wasm-gen" "1.8.3"
+    "@webassemblyjs/wasm-parser" "1.8.3"
+
+"@webassemblyjs/wasm-parser@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.3.tgz#d12ed19d1b8e8667a7bee040d2245aaaf215340b"
+  integrity sha512-NBI3SNNtRoy4T/KBsRZCAWUzE9lI94RH2nneLwa1KKIrt/2zzcTavWg6oY05ArCbb/PZDk3OUi63CD1RYtN65w==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-api-error" "1.8.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.3"
+    "@webassemblyjs/ieee754" "1.8.3"
+    "@webassemblyjs/leb128" "1.8.3"
+    "@webassemblyjs/utf8" "1.8.3"
+
+"@webassemblyjs/wast-parser@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.3.tgz#44aa123e145503e995045dc3e5e2770069da117b"
+  integrity sha512-gZPst4CNcmGtKC1eYQmgCx6gwQvxk4h/nPjfPBbRoD+Raw3Hs+BS3yhrfgyRKtlYP+BJ8LcY9iFODEQofl2qbg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/floating-point-hex-parser" "1.8.3"
+    "@webassemblyjs/helper-api-error" "1.8.3"
+    "@webassemblyjs/helper-code-frame" "1.8.3"
+    "@webassemblyjs/helper-fsm" "1.8.3"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.3.tgz#b1177780b266b1305f2eeba87c4d6aa732352060"
+  integrity sha512-DTA6kpXuHK4PHu16yAD9QVuT1WZQRT7079oIFFmFSjqjLWGXS909I/7kiLTn931mcj7wGsaUNungjwNQ2lGQ3Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/wast-parser" "1.8.3"
+    "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
   integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
 
-"@xtuc/long@4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.1.tgz#5c85d662f76fa1d34575766c5dcd6615abcd30d8"
-  integrity sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
 Base64@~0.2.0:
   version "0.2.1"
@@ -908,8 +918,9 @@ JSONSelect@0.2.1:
   resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.2.1.tgz#415418a526d33fe31d74b4defa3c836d485ec203"
 
 JSONStream@^1.0.4:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
   dependencies:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
@@ -923,12 +934,10 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-acorn-dynamic-import@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
-  integrity sha512-zVWV8Z8lislJoOKKqdNMOB+s6+XV5WERty8MnKBeFgwA+19XJjJHs2RP5dzM57FftIs+jQnRToLiWazKr6sSWg==
-  dependencies:
-    acorn "^5.0.0"
+acorn-dynamic-import@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
 
 acorn-globals@^4.1.0:
   version "4.1.0"
@@ -946,22 +955,28 @@ acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^5.0.0, acorn@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+acorn@^5.0.0, acorn@^5.5.0:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
 acorn@^5.0.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
 
-acorn@^5.5.0, acorn@^5.6.2:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+acorn@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+
+acorn@^6.0.5:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.0.tgz#b0a3be31752c97a0f7013c5f4903b71a05db6818"
+  integrity sha512-MW/FjM+IvU9CgBzjO3UIPCE2pyEwUsoFl+VGdczOPEdxfGFjuKny/gN54mOuX7Qxmb9Rg9MCn2oKiSUeW+pjrw==
 
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
+  integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
 
 addons-linter@0.22.3:
   version "0.22.3"
@@ -990,19 +1005,15 @@ addons-linter@0.22.3:
     yargs "8.0.2"
     yauzl "2.8.0"
 
-adm-zip@^0.4.7:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
-  integrity sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==
-
-adm-zip@~0.4.x:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+adm-zip@^0.4.7, adm-zip@~0.4.x:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.13.tgz#597e2f8cc3672151e1307d3e95cddbc75672314a"
+  integrity sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==
 
 ajv-errors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
-  integrity sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
 ajv-keywords@^1.0.0:
   version "1.5.1"
@@ -1014,9 +1025,9 @@ ajv-keywords@^2.1.0:
   integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
 
 ajv-keywords@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
-  integrity sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
+  integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
 
 ajv@5.2.0:
   version "5.2.0"
@@ -1051,9 +1062,9 @@ ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
     json-schema-traverse "^0.3.0"
 
 ajv@^6.1.0:
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.5.tgz#cf97cdade71c6399a92c6d6c4177381291b781a1"
-  integrity sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.9.2.tgz#4927adb83e7f48e5a32b45729744c71ec39c9c7b"
+  integrity sha512-4UFy0/LgDo7Oa/+wOAlj44tp9K78u38E5/359eSrqEp1Z5PdVfimCcs7SluXMP755RUQu6d2b4AvF0R1C9RZjg==
   dependencies:
     fast-deep-equal "^2.0.1"
     fast-json-stable-stringify "^2.0.0"
@@ -1080,13 +1091,14 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
-ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
 ansi-escapes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
 ansi-regex@^2.0.0:
   version "2.1.1"
@@ -1096,17 +1108,19 @@ ansi-regex@^2.0.0:
 ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
   integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"
+ansi-styles@^3.1.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
-    color-convert "^1.0.0"
+    color-convert "^1.9.0"
 
 ansi-styles@^3.2.0:
   version "3.2.0"
@@ -1114,13 +1128,6 @@ ansi-styles@^3.2.0:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
 any-observable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
@@ -1160,6 +1167,7 @@ aproba@^1.0.3, aproba@^1.1.1:
 archiver-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-1.3.0.tgz#e50b4c09c70bf3d680e32ff1b7994e9f9d895174"
+  integrity sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=
   dependencies:
     glob "^7.0.0"
     graceful-fs "^4.1.0"
@@ -1171,6 +1179,7 @@ archiver-utils@^1.3.0:
 archiver@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.3.0.tgz#4f2194d6d8f99df3f531e6881f14f15d55faaf22"
+  integrity sha1-TyGU1tj5nfP1MeaIHxTxXVX6ryI=
   dependencies:
     archiver-utils "^1.3.0"
     async "^2.0.0"
@@ -1182,6 +1191,20 @@ archiver@~1.3.0:
     walkdir "^0.0.11"
     zip-stream "^1.1.0"
 
+archiver@~2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
+  integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=
+  dependencies:
+    archiver-utils "^1.3.0"
+    async "^2.0.0"
+    buffer-crc32 "^0.2.1"
+    glob "^7.0.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+    tar-stream "^1.5.0"
+    zip-stream "^1.2.0"
+
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -1241,6 +1264,7 @@ array-filter@~0.0.0:
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 
 array-from@2.1.1:
   version "2.1.1"
@@ -1249,6 +1273,7 @@ array-from@2.1.1:
 array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
+  integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
 
 array-includes@^3.0.3:
   version "3.0.3"
@@ -1269,12 +1294,14 @@ array-reduce@~0.0.0:
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
   dependencies:
     array-uniq "^1.0.1"
 
 array-uniq@^1.0.1, array-uniq@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
 array-unique@^0.2.1:
   version "0.2.1"
@@ -1291,8 +1318,9 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
 asap@~2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
 asn1.js@^4.0.0:
   version "4.10.1"
@@ -1341,7 +1369,7 @@ astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
 
-async-each@^1.0.0:
+async-each@^1.0.0, async-each@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
   integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
@@ -1350,23 +1378,26 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
+async@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
   dependencies:
-    lodash "^4.14.0"
+    lodash "^4.17.10"
 
 async@^1.4.0, async@^1.5.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.0.0, async@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
+async@^2.0.0, async@^2.5.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
   dependencies:
-    lodash "^4.14.0"
+    lodash "^4.17.11"
 
-async@^2.1.2:
+async@^2.1.2, async@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -1378,11 +1409,6 @@ async@^2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@~0.2.6:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
-
 async@~2.1.2:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
@@ -1615,11 +1641,11 @@ babel-jest@^23.6.0:
     babel-preset-jest "^23.2.0"
 
 babel-loader@^8.0.4:
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.4.tgz#7bbf20cbe4560629e2e41534147692d3fecbdce6"
-  integrity sha512-fhBhNkUToJcW9nV46v8w87AJOwAJDz84c1CL57n3Stj73FANM/b9TbCUK4YhdOwEyZ+OxhYpdeZDNzSI29Firw==
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
+  integrity sha512-NTnHnVRd2JnRqPC0vW+iOQWU5pchDbYXsG2E6DMXEpMfUcQKclF9gmf3G3ZMhzG7IG9ji4coL0cm+FxeWxDpnw==
   dependencies:
-    find-cache-dir "^1.0.0"
+    find-cache-dir "^2.0.0"
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
     util.promisify "^1.0.0"
@@ -2010,6 +2036,7 @@ babylon@^6.18.0:
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
 base64-js@0.0.8:
   version "0.0.8"
@@ -2049,21 +2076,23 @@ beeper@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
 
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 binary-extensions@^1.0.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
-  integrity sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1"
+  integrity sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==
 
 bl@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.0.tgz#1397e7ec42c5f5dc387470c500e34a9f6be9ea98"
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
+  integrity sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==
   dependencies:
-    readable-stream "^2.0.5"
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"
 
 block-stream@*:
   version "0.0.9"
@@ -2072,7 +2101,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.5.1:
+bluebird@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
   integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
@@ -2117,7 +2146,7 @@ boxen@^1.0.0:
     term-size "^1.2.0"
     widest-line "^1.0.0"
 
-brace-expansion@^1.0.0:
+brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
@@ -2125,13 +2154,6 @@ brace-expansion@^1.0.0:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -2141,7 +2163,7 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-braces@^2.3.0, braces@^2.3.1:
+braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
   integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
@@ -2238,14 +2260,14 @@ browserify-zlib@~0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.4.tgz#4477b737db6a1b07077275b24791e680d4300425"
-  integrity sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA==
+browserslist@^4.3.4:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2"
+  integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg==
   dependencies:
-    caniuse-lite "^1.0.30000899"
-    electron-to-chromium "^1.3.82"
-    node-releases "^1.0.1"
+    caniuse-lite "^1.0.30000939"
+    electron-to-chromium "^1.3.113"
+    node-releases "^1.1.8"
 
 bser@^2.0.0:
   version "2.0.0"
@@ -2253,6 +2275,19 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
 buffer-crc32@^0.2.1, buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -2261,16 +2296,16 @@ buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
 
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-buffer-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
-  integrity sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=
-
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -2294,9 +2329,13 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
+  integrity sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
 
 builtin-status-codes@^3.0.0:
   version "3.0.0"
@@ -2315,25 +2354,26 @@ bunyan@1.8.10:
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
+  integrity sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=
 
 cacache@^11.0.2:
-  version "11.3.1"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.1.tgz#d09d25f6c4aca7a6d305d141ae332613aa1d515f"
-  integrity sha512-2PEw4cRRDu+iQvBTTuttQifacYjLPhET+SYO/gEFMy8uhi+jlJREDAjSF5FWSdV/Aw5h18caHA7vMTw2c+wDzA==
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
+  integrity sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==
   dependencies:
-    bluebird "^3.5.1"
-    chownr "^1.0.1"
-    figgy-pudding "^3.1.0"
-    glob "^7.1.2"
-    graceful-fs "^4.1.11"
-    lru-cache "^4.1.3"
+    bluebird "^3.5.3"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    lru-cache "^5.1.1"
     mississippi "^3.0.0"
     mkdirp "^0.5.1"
     move-concurrently "^1.0.1"
     promise-inflight "^1.0.1"
     rimraf "^2.6.2"
-    ssri "^6.0.0"
-    unique-filename "^1.1.0"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
     y18n "^4.0.0"
 
 cache-base@^1.0.1:
@@ -2382,13 +2422,24 @@ callsites@^2.0.0:
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
   dependencies:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
+  integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=
+  dependencies:
+    camelcase "^4.1.0"
+    map-obj "^2.0.0"
+    quick-lru "^1.0.0"
+
 camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
 camelcase@^1.0.2:
   version "1.2.1"
@@ -2398,6 +2449,7 @@ camelcase@^1.0.2:
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
 
 camelcase@^3.0.0:
   version "3.0.0"
@@ -2408,14 +2460,15 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
   integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
 
-caniuse-lite@^1.0.30000899:
-  version "1.0.30000910"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000910.tgz#755d5181d4b006e5a2b59b1ffa05d0a0470039f5"
-  integrity sha512-u/nxtHGAzCGZzIxt3dA/tpSPOcirBZFWKwz1EPz4aaupnBI2XR0Rbr74g0zc6Hzy41OEM4uMoZ38k56TpYAWjQ==
+caniuse-lite@^1.0.30000939:
+  version "1.0.30000939"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000939.tgz#b9ab7ac9e861bf78840b80c5dfbc471a5cd7e679"
+  integrity sha512-oXB23ImDJOgQpGjRv1tCtzAvJr4/OvrHi5SO2vUgB0g0xpdZZoA/BxfImiWfdwoYdUTtQrPsXsvYU/dmCSM8gg==
 
 capture-stack-trace@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
+  integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
 caseless@~0.11.0:
   version "0.11.0"
@@ -2444,23 +2497,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
-chalk@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
-chalk@^2.3.1:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2469,18 +2506,18 @@ chalk@^2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
+chalk@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
   dependencies:
-    ansi-styles "^3.2.1"
+    ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
+    supports-color "^4.0.0"
 
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
 cheerio@0.22.0:
   version "0.22.0"
@@ -2527,26 +2564,25 @@ chokidar@^1.4.3:
     fsevents "^1.0.0"
 
 chokidar@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
-  integrity sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
+  integrity sha512-IwXUx0FXc5ibYmPC2XeEj5mpXoV66sR+t3jqu2NS2GYwCktt3KF1/Qqjws/NkegajBA4RbZ5+DDwlOiJsxDHEg==
   dependencies:
     anymatch "^2.0.0"
-    async-each "^1.0.0"
-    braces "^2.3.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
     glob-parent "^3.1.0"
-    inherits "^2.0.1"
+    inherits "^2.0.3"
     is-binary-path "^1.0.0"
     is-glob "^4.0.0"
-    lodash.debounce "^4.0.8"
-    normalize-path "^2.1.1"
+    normalize-path "^3.0.0"
     path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-    upath "^1.0.5"
+    readdirp "^2.2.1"
+    upath "^1.1.0"
   optionalDependencies:
-    fsevents "^1.2.2"
+    fsevents "^1.2.7"
 
-chownr@^1.0.1, chownr@^1.1.1:
+chownr@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
@@ -2574,9 +2610,10 @@ chrome-trace-event@^1.0.0:
   dependencies:
     tslib "^1.9.0"
 
-ci-info@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
+ci-info@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
@@ -2617,12 +2654,14 @@ cli-cursor@^1.0.1:
 cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
   dependencies:
     restore-cursor "^2.0.0"
 
 cli-spinners@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.0.0.tgz#ef987ed3d48391ac3dab9180b406a742180d6e6a"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+  integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==
 
 cli-truncate@^0.2.1:
   version "0.2.1"
@@ -2633,8 +2672,9 @@ cli-truncate@^0.2.1:
     string-width "^1.0.1"
 
 cli-width@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
 clipboard-js@^0.3.6:
   version "0.3.6"
@@ -2653,14 +2693,16 @@ cliui@^2.1.0:
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
 cliui@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
   dependencies:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
@@ -2682,6 +2724,7 @@ clone@^1.0.2:
 cmd-shim@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-2.0.2.tgz#6fcbda99483a8fd15d7d30a196ca69d688a2efdb"
+  integrity sha1-b8vamUg6j9FdfTChlspp1oii79s=
   dependencies:
     graceful-fs "^4.1.2"
     mkdirp "~0.5.0"
@@ -2703,21 +2746,17 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
-  dependencies:
-    color-name "^1.1.1"
-
 color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
-    color-name "^1.1.1"
+    color-name "1.1.3"
 
-color-name@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
 colors@0.5.x:
   version "0.5.1"
@@ -2740,10 +2779,17 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
 command-join@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
+  integrity sha1-Uui5hPSHLZUv8b3IuYOX0nxxRM8=
+
+commander@2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
 
 commander@2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
   dependencies:
     graceful-readlink ">= 1.0.0"
 
@@ -2769,6 +2815,7 @@ commondir@^1.0.1:
 compare-func@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
+  integrity sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=
   dependencies:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
@@ -2779,8 +2826,9 @@ component-emitter@^1.2.1:
   integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
 
 compress-commons@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.0.tgz#58587092ef20d37cb58baf000112c9278ff73b9f"
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
+  integrity sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=
   dependencies:
     buffer-crc32 "^0.2.1"
     crc32-stream "^2.0.0"
@@ -2792,20 +2840,20 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.10, concat-stream@^1.4.7, concat-stream@^1.5.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
   dependencies:
+    buffer-from "^1.0.0"
     inherits "^2.0.3"
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-concat-stream@^1.5.0, concat-stream@^1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+concat-stream@^1.4.7, concat-stream@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
-    buffer-from "^1.0.0"
     inherits "^2.0.3"
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
@@ -2852,154 +2900,179 @@ content-type-parser@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
 
-conventional-changelog-angular@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.1.tgz#e1434d017c854032b272f690424a8c0ca16dc318"
+conventional-changelog-angular@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
+  integrity sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==
   dependencies:
     compare-func "^1.3.1"
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-atom@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.0.tgz#72f18e5c74e3d8807411252fe013818ddffa7157"
+conventional-changelog-atom@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.8.tgz#8037693455990e3256f297320a45fa47ee553a14"
+  integrity sha512-8pPZqhMbrnltNBizjoDCb/Sz85KyUXNDQxuAEYAU5V/eHn0okMBVjqc8aHWYpHrytyZWvMGbayOlDv7i8kEf6g==
   dependencies:
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-cli@^1.3.2:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.8.tgz#3b3f3591cb8d1f154bdb28e1819c5fcd8d967536"
+conventional-changelog-cli@^1.3.13:
+  version "1.3.22"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.22.tgz#13570fe1728f56f013ff7a88878ff49d5162a405"
+  integrity sha512-pnjdIJbxjkZ5VdAX/H1wndr1G10CY8MuZgnXuJhIHglOXfIrXygb7KZC836GW9uo1u8PjEIvIw/bKX0lOmOzZg==
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog "^1.1.10"
-    lodash "^4.1.0"
-    meow "^3.7.0"
+    conventional-changelog "^1.1.24"
+    lodash "^4.2.1"
+    meow "^4.0.0"
     tempfile "^1.1.1"
 
-conventional-changelog-codemirror@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.0.tgz#4dd8abb9f521a638cab49f683496c26b8a5c6d31"
+conventional-changelog-codemirror@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.8.tgz#a1982c8291f4ee4d6f2f62817c6b2ecd2c4b7b47"
+  integrity sha512-3HFZKtBXTaUCHvz7ai6nk2+psRIkldDoNzCsom0egDtVmPsvvHZkzjynhdQyULfacRSsBTaiQ0ol6nBOL4dDiQ==
   dependencies:
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.0.tgz#1bdf7d21f3d066427ff9e07db0a2c5dd60015b9f"
+conventional-changelog-core@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.11.tgz#19b5fbd55a9697773ed6661f4e32030ed7e30287"
+  integrity sha512-HvTE6RlqeEZ/NFPtQeFLsIDOLrGP3bXYr7lFLMhCVsbduF1MXIe8OODkwMFyo1i9ku9NWBwVnVn0jDmIFXjDRg==
   dependencies:
-    conventional-changelog-writer "^3.0.0"
-    conventional-commits-parser "^2.1.0"
-    dateformat "^1.0.12"
+    conventional-changelog-writer "^3.0.9"
+    conventional-commits-parser "^2.1.7"
+    dateformat "^3.0.0"
     get-pkg-repo "^1.0.0"
-    git-raw-commits "^1.3.0"
+    git-raw-commits "^1.3.6"
     git-remote-origin-url "^2.0.0"
-    git-semver-tags "^1.3.0"
-    lodash "^4.0.0"
+    git-semver-tags "^1.3.6"
+    lodash "^4.2.1"
     normalize-package-data "^2.3.5"
-    q "^1.4.1"
+    q "^1.5.1"
     read-pkg "^1.1.0"
     read-pkg-up "^1.0.1"
     through2 "^2.0.0"
 
-conventional-changelog-ember@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.1.tgz#bc71dc0a57e5c7ed0bf0538c32e44220691871d1"
+conventional-changelog-ember@^0.3.12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.12.tgz#b7d31851756d0fcb49b031dffeb6afa93b202400"
+  integrity sha512-mmJzA7uzbrOqeF89dMMi6z17O07ORTXlTMArnLG9ZTX4oLaKNolUlxFUFlFm9JUoVWajVpaHQWjxH1EOQ+ARoQ==
   dependencies:
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-eslint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.0.tgz#c63cd9d6f09d4e204530ae7369d7a20a167bc6bc"
+conventional-changelog-eslint@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.9.tgz#b13cc7e4b472c819450ede031ff1a75c0e3d07d3"
+  integrity sha512-h87nfVh2fdk9fJIvz26wCBsbDC/KxqCc5wSlNMZbXcARtbgNbNDIF7Y7ctokFdnxkzVdaHsbINkh548T9eBA7Q==
   dependencies:
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-express@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.0.tgz#5ed006f48682d8615ee0ab5f53cacb26fbd3e1c8"
+conventional-changelog-express@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.6.tgz#4a6295cb11785059fb09202180d0e59c358b9c2c"
+  integrity sha512-3iWVtBJZ9RnRnZveNDzOD8QRn6g6vUif0qVTWWyi5nUIAbuN1FfPVyKdAlJJfp5Im+dE8Kiy/d2SpaX/0X678Q==
   dependencies:
-    q "^1.4.1"
+    q "^1.5.1"
 
 conventional-changelog-jquery@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz#0208397162e3846986e71273b6c79c5b5f80f510"
+  integrity sha1-Agg5cWLjhGmG5xJztsecW1+A9RA=
   dependencies:
     q "^1.4.1"
 
 conventional-changelog-jscs@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz#0479eb443cc7d72c58bf0bcf0ef1d444a92f0e5c"
+  integrity sha1-BHnrRDzH1yxYvwvPDvHURKkvDlw=
   dependencies:
     q "^1.4.1"
 
-conventional-changelog-jshint@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.0.tgz#0393fd468113baf73cba911d17c5826423366a28"
+conventional-changelog-jshint@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.8.tgz#9051c1ac0767abaf62a31f74d2fe8790e8acc6c8"
+  integrity sha512-hn9QU4ZI/5V50wKPJNPGT4gEWgiBFpV6adieILW4MaUFynuDYOvQ71EMSj3EznJyKi/KzuXpc9dGmX8njZMjig==
   dependencies:
     compare-func "^1.3.1"
-    q "^1.4.1"
+    q "^1.5.1"
 
-conventional-changelog-writer@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.0.tgz#e106154ed94341e387d717b61be2181ff53254cc"
+conventional-changelog-preset-loader@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.8.tgz#40bb0f142cd27d16839ec6c74ee8db418099b373"
+  integrity sha512-MkksM4G4YdrMlT2MbTsV2F6LXu/hZR0Tc/yenRrDIKRwBl/SP7ER4ZDlglqJsCzLJi4UonBc52Bkm5hzrOVCcw==
+
+conventional-changelog-writer@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.9.tgz#4aecdfef33ff2a53bb0cf3b8071ce21f0e994634"
+  integrity sha512-n9KbsxlJxRQsUnK6wIBRnARacvNnN4C/nxnxCkH+B/R1JS2Fa+DiP1dU4I59mEDEjgnFaN2+9wr1P1s7GYB5/Q==
   dependencies:
     compare-func "^1.3.1"
-    conventional-commits-filter "^1.1.1"
-    dateformat "^1.0.11"
+    conventional-commits-filter "^1.1.6"
+    dateformat "^3.0.0"
     handlebars "^4.0.2"
     json-stringify-safe "^5.0.1"
-    lodash "^4.0.0"
-    meow "^3.3.0"
-    semver "^5.0.1"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    semver "^5.5.0"
     split "^1.0.0"
     through2 "^2.0.0"
 
-conventional-changelog@^1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.10.tgz#d9bb3aad9086152d283e4707fb45a5b7a28e9e98"
-  dependencies:
-    conventional-changelog-angular "^1.6.1"
-    conventional-changelog-atom "^0.2.0"
-    conventional-changelog-codemirror "^0.3.0"
-    conventional-changelog-core "^2.0.0"
-    conventional-changelog-ember "^0.3.1"
-    conventional-changelog-eslint "^1.0.0"
-    conventional-changelog-express "^0.3.0"
+conventional-changelog@^1.1.24:
+  version "1.1.24"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.24.tgz#3d94c29c960f5261c002678315b756cdd3d7d1f0"
+  integrity sha512-2WcSUst4Y3Z4hHvoMTWXMJr/DmgVdLiMOVY1Kak2LfFz+GIz2KDp5naqbFesYbfXPmaZ5p491dO0FWZIJoJw1Q==
+  dependencies:
+    conventional-changelog-angular "^1.6.6"
+    conventional-changelog-atom "^0.2.8"
+    conventional-changelog-codemirror "^0.3.8"
+    conventional-changelog-core "^2.0.11"
+    conventional-changelog-ember "^0.3.12"
+    conventional-changelog-eslint "^1.0.9"
+    conventional-changelog-express "^0.3.6"
     conventional-changelog-jquery "^0.1.0"
     conventional-changelog-jscs "^0.1.0"
-    conventional-changelog-jshint "^0.3.0"
+    conventional-changelog-jshint "^0.3.8"
+    conventional-changelog-preset-loader "^1.1.8"
 
-conventional-commits-filter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.1.tgz#72172319c0c88328a015b30686b55527b3a5e54a"
+conventional-commits-filter@^1.1.1, conventional-commits-filter@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.6.tgz#4389cd8e58fe89750c0b5fb58f1d7f0cc8ad3831"
+  integrity sha512-KcDgtCRKJCQhyk6VLT7zR+ZOyCnerfemE/CsR3iQpzRRFbLEs0Y6rwk3mpDvtOh04X223z+1xyJ582Stfct/0Q==
   dependencies:
     is-subset "^0.1.1"
     modify-values "^1.0.0"
 
-conventional-commits-parser@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.0.tgz#9b4b7c91124bf2a1a9a2cc1c72760d382cbbb229"
+conventional-commits-parser@^2.1.1, conventional-commits-parser@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz#eca45ed6140d72ba9722ee4132674d639e644e8e"
+  integrity sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.0"
     lodash "^4.2.1"
-    meow "^3.3.0"
+    meow "^4.0.0"
     split2 "^2.0.0"
     through2 "^2.0.0"
     trim-off-newlines "^1.0.0"
 
-conventional-recommended-bump@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-1.2.0.tgz#864fb955825d9c6056620cee4657b0dc0628a3e9"
+conventional-recommended-bump@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-1.2.1.tgz#1b7137efb5091f99fe009e2fe9ddb7cc490e9375"
+  integrity sha512-oJjG6DkRgtnr/t/VrPdzmf4XZv8c4xKVJrVT4zrSHd92KEL+EYxSbYoKq8lQ7U5yLMw7130wrcQTLRjM/T+d4w==
   dependencies:
     concat-stream "^1.4.10"
     conventional-commits-filter "^1.1.1"
-    conventional-commits-parser "^2.1.0"
+    conventional-commits-parser "^2.1.1"
     git-raw-commits "^1.3.0"
     git-semver-tags "^1.3.0"
     meow "^3.3.0"
     object-assign "^4.0.1"
 
 convert-source-map@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
 
 convert-source-map@^1.4.0:
   version "1.5.1"
@@ -3025,6 +3098,7 @@ copy-descriptor@^0.1.0:
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
 core-js@^2.4.0:
   version "2.4.1"
@@ -3048,13 +3122,17 @@ cosmiconfig@^5.0.2:
 crc32-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
+  integrity sha1-483TtN8xaN10494/u8t7KX/pCPQ=
   dependencies:
     crc "^3.4.4"
     readable-stream "^2.0.0"
 
 crc@^3.4.4:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.8.0.tgz#ad60269c2c856f8c299e2c4cc0de4556914056c6"
+  integrity sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==
+  dependencies:
+    buffer "^5.1.0"
 
 create-ecdh@^4.0.0:
   version "4.0.3"
@@ -3067,6 +3145,7 @@ create-ecdh@^4.0.0:
 create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
   dependencies:
     capture-stack-trace "^1.0.0"
 
@@ -3107,7 +3186,7 @@ cross-spawn@^2.1.5:
     cross-spawn-async "^2.2.2"
     spawn-sync "^1.0.15"
 
-cross-spawn@^4.0.0, cross-spawn@^4.0.2:
+cross-spawn@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
   dependencies:
@@ -3238,6 +3317,7 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
   dependencies:
     array-find-index "^1.0.1"
 
@@ -3260,6 +3340,7 @@ damerau-levenshtein@^1.0.0:
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
+  integrity sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=
   dependencies:
     number-is-nan "^1.0.0"
 
@@ -3280,30 +3361,29 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
-dateformat@^1.0.11, dateformat@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
-  dependencies:
-    get-stdin "^4.0.1"
-    meow "^3.3.0"
-
 dateformat@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
 
+dateformat@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+
 debounce@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.0.2.tgz#503cc674d8d7f737099664fb75ddbd36b9626dc6"
 
-debug@^2.1.1, debug@^2.2.0:
+debug@^2.1.1:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
   dependencies:
     ms "0.7.2"
 
-debug@^2.1.2, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
@@ -3314,15 +3394,24 @@ debug@^3.1.0:
     ms "2.0.0"
 
 debug@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
-  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
   dependencies:
     ms "^2.1.1"
 
-decamelize@1.2.0, decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize-keys@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@1.2.0, decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
@@ -3332,6 +3421,7 @@ decode-uri-component@^0.2.0:
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
 deep-extend@^0.6.0:
   version "0.6.0"
@@ -3360,15 +3450,16 @@ default-require-extensions@^1.0.0:
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
   dependencies:
     clone "^1.0.2"
 
 define-properties@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
   dependencies:
-    foreach "^2.0.5"
-    object-keys "^1.0.8"
+    object-keys "^1.0.12"
 
 define-property@^0.2.5:
   version "0.2.5"
@@ -3422,6 +3513,11 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
+  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
+
 detect-indent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
@@ -3431,10 +3527,12 @@ detect-indent@^4.0.0:
 detect-indent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
 detect-libc@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
 detect-newline@^2.1.0:
   version "2.1.0"
@@ -3471,6 +3569,7 @@ dispensary@0.10.10:
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
@@ -3538,6 +3637,7 @@ domutils@^1.5.1:
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc=
   dependencies:
     is-obj "^1.0.0"
 
@@ -3562,15 +3662,17 @@ duplexer2@0.0.2:
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
 
 duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
-  integrity sha512-vM58DwdnKmty+FSPzT14K9JXb90H+j5emaR4KYbr2KTIz00WHGbWOe5ghQTx233ZCLZtrGDALzKwcjEtSt35mA==
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
   dependencies:
     end-of-stream "^1.0.0"
     inherits "^2.0.1"
@@ -3592,10 +3694,10 @@ ecdsa-sig-formatter@1.0.9:
     base64url "^2.0.0"
     safe-buffer "^5.0.1"
 
-electron-to-chromium@^1.3.82:
-  version "1.3.84"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.84.tgz#2e55df59e818f150a9f61b53471ebf4f0feecc65"
-  integrity sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw==
+electron-to-chromium@^1.3.113:
+  version "1.3.113"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
+  integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -3625,24 +3727,19 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  integrity sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==
   dependencies:
-    iconv-lite "~0.4.13"
+    once "^1.4.0"
 
-end-of-stream@^1.0.0, end-of-stream@~1.1.0:
+end-of-stream@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
   dependencies:
     once "~1.3.0"
 
-end-of-stream@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
-  dependencies:
-    once "^1.4.0"
-
 enhanced-resolve@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
@@ -3663,15 +3760,10 @@ errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
-  dependencies:
-    is-arrayish "^0.2.1"
-
-error-ex@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
@@ -3682,7 +3774,7 @@ error-stack-parser@^2.0.2:
   dependencies:
     stackframe "^1.0.4"
 
-es-abstract@^1.11.0, es-abstract@^1.7.0:
+es-abstract@^1.11.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
   integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
@@ -3694,24 +3786,6 @@ es-abstract@^1.11.0, es-abstract@^1.7.0:
     is-regex "^1.0.4"
     object-keys "^1.0.12"
 
-es-abstract@^1.5.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
-  dependencies:
-    es-to-primitive "^1.1.1"
-    function-bind "^1.1.1"
-    has "^1.0.1"
-    is-callable "^1.1.3"
-    is-regex "^1.0.4"
-
-es-to-primitive@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
-  dependencies:
-    is-callable "^1.1.1"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.1"
-
 es-to-primitive@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
@@ -3880,9 +3954,9 @@ eslint-plugin-flowtype@^2.47.1:
     lodash "^4.17.10"
 
 eslint-plugin-import@^2.11.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.15.0.tgz#d8f3c28b8988ccde5df964706faa7c1e52f0602a"
-  integrity sha512-LEHqgR+RcnpGqYW7h9WMkPb/tP+ekKxWdQDztfTtZeV43IHF+X8lXU+1HOCcR4oXD24qRgEwNSxIweD5uNKGVg==
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.16.0.tgz#97ac3e75d0791c4fac0e15ef388510217be7f66f"
+  integrity sha512-z6oqWlf1x5GkHIFgrSvtmudnqM6Q60KM4KvpWi5ubonMjycLjndvd5+8VAZIsTlHC03djdgJuyKG6XO577px6A==
   dependencies:
     contains-path "^0.1.0"
     debug "^2.6.9"
@@ -4107,19 +4181,16 @@ esquery@^1.0.0:
     estraverse "^4.0.0"
 
 esrecurse@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
   dependencies:
-    estraverse "~4.1.0"
-    object-assign "^4.0.1"
+    estraverse "^4.1.0"
 
-estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
-
-estraverse@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
@@ -4160,31 +4231,6 @@ exec-sh@^0.2.0:
   dependencies:
     merge "^1.1.3"
 
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36"
-  dependencies:
-    cross-spawn "^4.0.0"
-    get-stream "^2.2.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -4200,6 +4246,7 @@ execa@^0.7.0:
 execa@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=
   dependencies:
     cross-spawn "^5.0.1"
     get-stream "^3.0.0"
@@ -4222,6 +4269,19 @@ execa@^0.9.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -4257,6 +4317,13 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
 expect@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-22.1.0.tgz#f8f9b019ab275d859cbefed531fbaefe8972431d"
@@ -4293,8 +4360,9 @@ extend@~3.0.1:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
 external-editor@^2.0.4:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
   dependencies:
     chardet "^0.4.0"
     iconv-lite "^0.4.17"
@@ -4363,6 +4431,7 @@ fast-json-parse@^1.0.0:
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
 fast-levenshtein@~2.0.4:
   version "2.0.6"
@@ -4406,25 +4475,13 @@ fbjs@0.5.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
-fbjs@^0.8.9:
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
   dependencies:
     pend "~1.2.0"
 
-figgy-pudding@^3.1.0, figgy-pudding@^3.5.1:
+figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
   integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
@@ -4439,6 +4496,7 @@ figures@^1.3.5, figures@^1.7.0:
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
   dependencies:
     escape-string-regexp "^1.0.5"
 
@@ -4454,6 +4512,28 @@ filename-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
   integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
+filename-reserved-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
+  integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=
+
+filenamify-url@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50"
+  integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=
+  dependencies:
+    filenamify "^1.0.0"
+    humanize-url "^1.0.0"
+
+filenamify@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5"
+  integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=
+  dependencies:
+    filename-reserved-regex "^1.0.0"
+    strip-outer "^1.0.0"
+    trim-repeated "^1.0.0"
+
 fileset@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
@@ -4482,15 +4562,6 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
-find-cache-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
-  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^1.0.0"
-    pkg-dir "^2.0.0"
-
 find-cache-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
@@ -4508,6 +4579,7 @@ find-parent-dir@^0.3.0:
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
   dependencies:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
@@ -4515,6 +4587,7 @@ find-up@^1.0.0:
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
   dependencies:
     locate-path "^2.0.0"
 
@@ -4525,6 +4598,16 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+findup-sync@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
+  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^3.1.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
 firefox-client@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/firefox-client/-/firefox-client-0.3.0.tgz#3794460f6eb6afcf41376addcbc7462e24a4cd8b"
@@ -4549,13 +4632,14 @@ firefox-profile@0.5.0:
     xml2js "~0.4.4"
 
 firefox-profile@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.0.2.tgz#aa6759d60e729105231c47a2f41831f3e9330b66"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.2.0.tgz#2068227924e714a2b10ec5fba8392e19b5788509"
+  integrity sha512-TTEFfPOkyaz4EWx/5ZDQC1mJAe3a+JgVcchpIfD4Tvx1UspwlTJRJxOYA35x/z2iJcxaF6aW2rdh6oj6qwgd2g==
   dependencies:
     adm-zip "~0.4.x"
-    archiver "~1.3.0"
-    async "~2.4.1"
-    fs-extra "~2.1.2"
+    archiver "~2.1.0"
+    async "~2.5.0"
+    fs-extra "~4.0.2"
     ini "~1.3.3"
     jetpack-id "1.0.0"
     lazystream "~1.0.0"
@@ -4593,12 +4677,12 @@ flow-bin@^0.93.0:
   integrity sha512-p8yq4ocOlpyJgOEBEj0v0GzCP25c9WP0ilFQ8hXSbrTR7RPKuR+Whr+OitlVyp8ocdX0j1MrIwQ8x28dacy1pg==
 
 flush-write-stream@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
-  integrity sha512-calZMC10u0FMUqoiunI2AiGIIUtUIvifNwkHhNupZH4cbNnW1Itkoh/Nf5HFYmDrwWPjrUxpkZT0KhuCq0jmGw==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
   dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.4"
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
@@ -4612,10 +4696,6 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
-foreach@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -4653,6 +4733,11 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs-extra@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
@@ -4661,9 +4746,19 @@ fs-extra@^3.0.1:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
-fs-extra@^4.0.1:
+fs-extra@^4.0.1, fs-extra@~4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
+  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
@@ -4672,6 +4767,7 @@ fs-extra@^4.0.1:
 fs-extra@~2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
+  integrity sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU=
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^2.1.0"
@@ -4698,7 +4794,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.0.0, fsevents@^1.2.2:
+fsevents@^1.0.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
   integrity sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==
@@ -4713,6 +4809,14 @@ fsevents@^1.1.1:
     nan "^2.3.0"
     node-pre-gyp "^0.6.39"
 
+fsevents@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
+  integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
 fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
@@ -4730,9 +4834,10 @@ fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
@@ -4754,6 +4859,7 @@ fx-runner@1.0.7:
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -4779,8 +4885,9 @@ generate-object-property@^1.1.0:
     is-property "^1.0.0"
 
 get-caller-file@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.0"
@@ -4790,6 +4897,7 @@ get-own-enumerable-property-symbols@^3.0.0:
 get-pkg-repo@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
+  integrity sha1-xztInAbYDMVTbCyFP54FIyBWly0=
   dependencies:
     hosted-git-info "^2.1.4"
     meow "^3.3.0"
@@ -4800,26 +4908,29 @@ get-pkg-repo@^1.0.0:
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
 
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
 get-stdin@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
   integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=
 
-get-stream@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
-  dependencies:
-    object-assign "^4.0.1"
-    pinkie-promise "^2.0.0"
-
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
 
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
@@ -4834,30 +4945,33 @@ getpass@^0.1.1:
     assert-plus "^1.0.0"
 
 gh-pages@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-1.0.0.tgz#4a46f4c25439f7a2b7e6835504d4a49e949f04ca"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-1.2.0.tgz#1acb92801078f7c038a167f447221d1496ccfbee"
+  integrity sha512-cGLYAvxtlQ1iTwAS4g7FreZPXoE/g62Fsxln2mmR19mgs4zZI+XJ+wVVUhBFCF/0+Nmvbq+abyTWue1m1BSnmg==
   dependencies:
-    async "2.1.4"
-    base64url "^2.0.0"
-    commander "2.9.0"
-    fs-extra "^3.0.1"
+    async "2.6.1"
+    commander "2.15.1"
+    filenamify-url "^1.0.0"
+    fs-extra "^5.0.0"
     globby "^6.1.0"
     graceful-fs "4.1.11"
-    rimraf "^2.5.4"
+    rimraf "^2.6.2"
 
-git-raw-commits@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.0.tgz#0bc8596e90d5ffe736f7f5546bd2d12f73abaac6"
+git-raw-commits@^1.3.0, git-raw-commits@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.6.tgz#27c35a32a67777c1ecd412a239a6c19d71b95aff"
+  integrity sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==
   dependencies:
     dargs "^4.0.1"
     lodash.template "^4.0.2"
-    meow "^3.3.0"
+    meow "^4.0.0"
     split2 "^2.0.0"
     through2 "^2.0.0"
 
 git-remote-origin-url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
+  integrity sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=
   dependencies:
     gitconfiglocal "^1.0.0"
     pify "^2.3.0"
@@ -4870,16 +4984,18 @@ git-rev-sync@1.9.1:
     graceful-fs "4.1.11"
     shelljs "0.7.7"
 
-git-semver-tags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.0.tgz#b154833a6ab5c360c0ad3b1aa9b8f12ea06de919"
+git-semver-tags@^1.3.0, git-semver-tags@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.6.tgz#357ea01f7280794fe0927f2806bee6414d2caba5"
+  integrity sha512-2jHlJnln4D/ECk9FxGEBh3k44wgYdWjWDtMmJPaecjoRmxKo3Y1Lh8GMYuOPu04CHw86NTAODchYjC5pnpMQig==
   dependencies:
-    meow "^3.3.0"
-    semver "^5.0.1"
+    meow "^4.0.0"
+    semver "^5.5.0"
 
 gitconfiglocal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
+  integrity sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=
   dependencies:
     ini "^1.3.2"
 
@@ -4901,6 +5017,7 @@ glob-parent@^2.0.0:
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
   dependencies:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
@@ -4915,18 +5032,7 @@ glob@^6.0.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.2"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.0.5:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
   integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
@@ -4938,7 +5044,7 @@ glob@^7.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.2:
+glob@^7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -4949,10 +5055,25 @@ glob@^7.1.1, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global-modules-path@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.0.tgz#b0e2bac6beac39745f7db5c59d26a36a0b94f7dc"
-  integrity sha512-HchvMJNYh9dGSCy8pOQ2O8u/hoXaL+0XhnrwH0RyLiSXMMTl9W3N6KUU73+JFOg5PGjtzl6VZzUQsnrpm7Szag==
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
 
 globals@^11.0.1:
   version "11.10.0"
@@ -4960,9 +5081,9 @@ globals@^11.0.1:
   integrity sha512-0GZF1RiPKU97IHUO5TORo9w1PwrH/NBPl+fS7oMLdaTRiYmYbwK4NWoZWrAdd0/abG9R2BU+OiwyQpTpE6pdfQ==
 
 globals@^11.1.0:
-  version "11.9.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.9.0.tgz#bde236808e987f290768a93d065060d78e6ab249"
-  integrity sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg==
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.11.0.tgz#dcf93757fa2de5486fbeed7118538adf789e9c2e"
+  integrity sha512-WHq43gS+6ufNOEqlrDBxVEbb8ntfXrfAUU2ZOpCxrBdGKW3gyv8mCxAfIBD0DroPKGrJ2eSsXsLtY9MPntsyTw==
 
 globals@^9.0.0:
   version "9.14.0"
@@ -4986,6 +5107,7 @@ globby@^5.0.0:
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
     glob "^7.0.3"
@@ -5002,6 +5124,7 @@ glogg@^1.0.0:
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  integrity sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=
   dependencies:
     create-error-class "^3.0.0"
     duplexer3 "^0.1.4"
@@ -5015,11 +5138,12 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-graceful-fs@4.1.11, graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.6:
+graceful-fs@4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+  integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
-graceful-fs@^4.1.2:
+graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
@@ -5062,7 +5186,18 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
-handlebars@^4.0.2, handlebars@^4.0.3:
+handlebars@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.0.tgz#0d6a6f34ff1f63cecec8423aa4169827bf787c3a"
+  integrity sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==
+  dependencies:
+    async "^2.5.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+handlebars@^4.0.3:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
   dependencies:
@@ -5119,6 +5254,7 @@ has-flag@^1.0.0:
 has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+  integrity sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=
 
 has-flag@^3.0.0:
   version "3.0.0"
@@ -5172,13 +5308,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
-  dependencies:
-    function-bind "^1.0.2"
-
-has@^1.0.3:
+has@^1.0.1, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -5194,9 +5324,9 @@ hash-base@^3.0.0:
     safe-buffer "^5.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
-  integrity sha512-eWI5HG9Np+eHV1KQhisXWwM+4EPPYe5dFX1UZZH7k/E3JzDEazVH+VGlZi6R94ZqImq+A3D1mCEtrFIfg/E7sA==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
@@ -5244,13 +5374,17 @@ home-or-tmp@^2.0.0:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-hosted-git-info@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+homedir-polyfill@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
+  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
+  dependencies:
+    parse-passwd "^1.0.0"
 
-hosted-git-info@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+hosted-git-info@^2.1.4, hosted-git-info@^2.5.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+  integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
 
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
@@ -5304,21 +5438,25 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-iconv-lite@0.4.19, iconv-lite@^0.4.17:
+humanize-url@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff"
+  integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=
+  dependencies:
+    normalize-url "^1.0.0"
+    strip-url-auth "^1.0.0"
+
+iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
-iconv-lite@^0.4.4:
+iconv-lite@^0.4.17, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@~0.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
-
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -5391,10 +5529,12 @@ import-local@^2.0.0:
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
   dependencies:
     repeating "^2.0.0"
 
@@ -5419,21 +5559,18 @@ inflight@^1.0.4:
 inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
   integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
-ini@^1.3.2, ini@~1.3.0:
+ini@^1.3.2, ini@^1.3.4, ini@~1.3.0, ini@~1.3.3:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
-ini@~1.3.3:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
-
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -5476,19 +5613,27 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
 interpret@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
-  integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
     loose-envify "^1.0.0"
 
+invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+  integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
 
 invert-kv@^2.0.0:
   version "2.0.0"
@@ -5518,6 +5663,7 @@ is-accessor-descriptor@^1.0.0:
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
 is-binary-path@^1.0.0:
   version "1.0.1"
@@ -5531,26 +5677,17 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-builtin-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
-  dependencies:
-    builtin-modules "^1.0.0"
-
-is-callable@^1.1.1, is-callable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
-
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
 is-ci@^1.0.10:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
   dependencies:
-    ci-info "^1.0.0"
+    ci-info "^1.5.0"
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
@@ -5569,6 +5706,7 @@ is-data-descriptor@^1.0.0:
 is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
 
 is-descriptor@^0.1.0:
   version "0.1.6"
@@ -5625,10 +5763,12 @@ is-extglob@^1.0.0:
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
   dependencies:
     number-is-nan "^1.0.0"
 
@@ -5642,6 +5782,7 @@ is-fullwidth-code-point@^1.0.0:
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
 is-generator-fn@^1.0.0:
   version "1.0.0"
@@ -5657,6 +5798,7 @@ is-glob@^2.0.0, is-glob@^2.0.1:
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
   dependencies:
     is-extglob "^2.1.0"
 
@@ -5742,9 +5884,10 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
-is-plain-obj@^1.0.0:
+is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
@@ -5766,6 +5909,7 @@ is-primitive@^2.0.0:
 is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
 is-property@^1.0.0, is-property@^1.0.2:
   version "1.0.2"
@@ -5775,10 +5919,12 @@ is-property@^1.0.0, is-property@^1.0.2:
 is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+  integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
   dependencies:
     has "^1.0.1"
 
@@ -5800,18 +5946,17 @@ is-resolvable@^1.0.0:
 is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
 
-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
 is-subset@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
-
-is-symbol@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+  integrity sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=
 
 is-symbol@^1.0.2:
   version "1.0.2"
@@ -5823,6 +5968,7 @@ is-symbol@^1.0.2:
 is-text-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
+  integrity sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=
   dependencies:
     text-extensions "^1.0.0"
 
@@ -5834,8 +5980,9 @@ is-typedarray@~1.0.0:
 is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-windows@^1.0.2:
+is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -5857,6 +6004,7 @@ isemail@1.x.x:
 isexe@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+  integrity sha1-NvPiLmB1CSD15yQaR2qMakInWtA=
 
 isexe@^2.0.0:
   version "2.0.0"
@@ -5874,13 +6022,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -6239,6 +6380,7 @@ jest@22.1.4:
 jetpack-id@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
+  integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
 joi@^6.10.1:
   version "6.10.1"
@@ -6250,9 +6392,9 @@ joi@^6.10.1:
     topo "1.x.x"
 
 js-levenshtein@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
-  integrity sha512-PxfGzSs0ztShKrUYPIn5r0MtyAhYcCwmndozzpz8YObbPnD1jFxzlBGbRnX2mIu6Z13xN6+PTu05TQFnZFlzow==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
 js-select@~0.6.0:
   version "0.6.0"
@@ -6261,15 +6403,11 @@ js-select@~0.6.0:
     JSONSelect "0.2.1"
     traverse "0.4.x"
 
-js-tokens@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
-
-js-tokens@^3.0.2:
+js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-tokens@^4.0.0:
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -6346,11 +6484,7 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-json-parse-better-errors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a"
-
-json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -6394,6 +6528,13 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
@@ -6404,6 +6545,7 @@ json5@^2.1.0:
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
   optionalDependencies:
     graceful-fs "^4.1.6"
 
@@ -6416,6 +6558,7 @@ jsonfile@^3.0.0:
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
   optionalDependencies:
     graceful-fs "^4.1.6"
 
@@ -6426,6 +6569,7 @@ jsonify@~0.0.0:
 jsonparse@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
 
 jsonpointer@^4.0.0:
   version "4.0.1"
@@ -6525,12 +6669,14 @@ lazy-cache@^1.0.3:
 lazystream@^1.0.0, lazystream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
   dependencies:
     readable-stream "^2.0.5"
 
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  integrity sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=
   dependencies:
     invert-kv "^1.0.0"
 
@@ -6546,16 +6692,17 @@ left-pad@^1.2.0:
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
 
 lerna@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.8.0.tgz#309a816fca5c73ea38f9f20e314a836e99b54cf0"
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.11.0.tgz#89b5681e286d388dda5bbbdbbf6b84c8094eff65"
+  integrity sha512-kgM6zwe2P2tR30MYvgiLLW+9buFCm6E7o8HnRlhTgm70WVBvXVhydqv+q/MF2HrVZkCawfVtCfetyQmtd4oHhQ==
   dependencies:
     async "^1.5.0"
     chalk "^2.1.0"
     cmd-shim "^2.0.2"
     columnify "^1.5.4"
     command-join "^2.0.0"
-    conventional-changelog-cli "^1.3.2"
-    conventional-recommended-bump "^1.0.1"
+    conventional-changelog-cli "^1.3.13"
+    conventional-recommended-bump "^1.2.1"
     dedent "^0.7.0"
     execa "^0.8.0"
     find-up "^2.1.0"
@@ -6675,6 +6822,7 @@ listr@^0.14.1:
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -6685,6 +6833,7 @@ load-json-file@^1.0.0:
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -6694,6 +6843,7 @@ load-json-file@^2.0.0:
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^4.0.0"
@@ -6701,22 +6851,23 @@ load-json-file@^4.0.0:
     strip-bom "^3.0.0"
 
 loader-runner@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.1.tgz#026f12fe7c3115992896ac02ba022ba92971b979"
-  integrity sha512-By6ZFY7ETWOc9RFaAIb23IjJVcM4dvJC/N57nmdz9RSkMXvAXGI7SyVlAw3v8vjtDRlqThgVDVmTnr9fqMlxkw==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
 loader-utils@^1.0.2, loader-utils@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
-  integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
   dependencies:
-    big.js "^3.1.3"
+    big.js "^5.2.2"
     emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    json5 "^1.0.1"
 
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
   dependencies:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
@@ -6773,11 +6924,6 @@ lodash.bind@^4.1.4:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -6869,6 +7015,7 @@ lodash.template@^3.0.0:
 lodash.template@^4.0.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  integrity sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=
   dependencies:
     lodash._reinterpolate "~3.0.0"
     lodash.templatesettings "^4.0.0"
@@ -6883,6 +7030,7 @@ lodash.templatesettings@^3.0.0:
 lodash.templatesettings@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
@@ -6890,15 +7038,15 @@ lodash@3.10.1, lodash@^3.10.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.2:
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
-
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5:
+lodash@>4.17.4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.2:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
+lodash@^4.13.1, lodash@^4.2.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -6913,15 +7061,7 @@ log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
-log-update@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.0.0.tgz#7f4354d7be1be62b724fcbb3c4b94454c0db5e26"
-  dependencies:
-    ansi-escapes "^1.0.0"
-    cli-cursor "^2.0.0"
-    wrap-ansi "^2.1.0"
-
-log-update@^2.3.0:
+log-update@^2.0.0, log-update@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
   integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
@@ -6935,42 +7075,54 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
-    js-tokens "^3.0.0"
+    js-tokens "^3.0.0 || ^4.0.0"
 
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
   dependencies:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
 lowercase-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lru-cache@^4.0.0, lru-cache@^4.0.1:
+lru-cache@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
   dependencies:
     pseudomap "^1.0.1"
     yallist "^2.0.0"
 
-lru-cache@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+lru-cache@^4.0.1, lru-cache@^4.1.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
   dependencies:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 make-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
   dependencies:
-    pify "^2.3.0"
+    pify "^3.0.0"
 
 makeerror@1.0.x:
   version "1.0.11"
@@ -6978,6 +7130,11 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
+mamacro@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
+  integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
+
 map-age-cleaner@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
@@ -6993,6 +7150,12 @@ map-cache@^0.2.2:
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
+
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+  integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
 map-visit@^1.0.0:
   version "1.0.0"
@@ -7002,8 +7165,9 @@ map-visit@^1.0.0:
     object-visit "^1.0.0"
 
 material-colors@^1.2.1:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
 math-random@^1.0.1:
   version "1.0.1"
@@ -7022,17 +7186,18 @@ md5.js@^1.3.4:
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
   dependencies:
     mimic-fn "^1.0.0"
 
 mem@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
-  integrity sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.1.0.tgz#aeb9be2d21f47e78af29e4ac5978e8afa2ca5b8a"
+  integrity sha512-I5u6Q1x7wxO0kdOpYBB28xueHADYps5uty/zg936CiG8NTe5sJL8EjrCuLneuDW3PlMdZBGDIn8BirEVdovZvg==
   dependencies:
     map-age-cleaner "^0.1.1"
     mimic-fn "^1.0.0"
-    p-is-promise "^1.1.0"
+    p-is-promise "^2.0.0"
 
 memoize-one@^3.1.1:
   version "3.1.1"
@@ -7046,9 +7211,10 @@ memory-fs@^0.4.0, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.3.0, meow@^3.7.0:
+meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
   dependencies:
     camelcase-keys "^2.0.0"
     decamelize "^1.1.2"
@@ -7061,6 +7227,21 @@ meow@^3.3.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.1.tgz#d48598f6f4b1472f35bf6317a95945ace347f975"
+  integrity sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist "^1.1.3"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
@@ -7089,7 +7270,7 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -7139,8 +7320,9 @@ mime-types@~2.1.17:
     mime-db "~1.30.0"
 
 mimic-fn@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
@@ -7169,7 +7351,15 @@ minimatch@^2.0.3:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
   dependencies:
-    brace-expansion "^1.0.0"
+    brace-expansion "^1.0.0"
+
+minimist-options@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
+  integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
 
 minimist@0.0.8:
   version "0.0.8"
@@ -7179,10 +7369,12 @@ minimist@0.0.8:
 minimist@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+  integrity sha1-md9lelJXTCHJBXSX33QnkLK0wN4=
 
 minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
 minimist@~0.0.1:
   version "0.0.10"
@@ -7198,9 +7390,9 @@ minipass@^2.2.1, minipass@^2.3.4:
     yallist "^3.0.0"
 
 minizlib@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.1.tgz#6734acc045a46e61d596a43bb9d9cd326e19cc42"
-  integrity sha512-TrfjCjk4jLhcJyGMYymBH6oTXcWjYbUAXTHDbtnWHjZC25h0cdajHuPE1zxb4DVmu8crfh+HwH/WMuyLG0nHBg==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
+  integrity sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==
   dependencies:
     minipass "^2.2.1"
 
@@ -7231,20 +7423,23 @@ mixin-deep@^1.2.0:
 mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
   dependencies:
     minimist "0.0.8"
 
 modify-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
 moment@2.x.x, moment@^2.10.6:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
 moment@^2.6.0:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -7261,10 +7456,12 @@ move-concurrently@^1.0.1:
 ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+  integrity sha1-riXPJRKziFodldfwN4aNhDESR2U=
 
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
 ms@^0.7.1:
   version "0.7.3"
@@ -7288,6 +7485,7 @@ mute-stream@0.0.5:
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
 mv@~2:
   version "2.1.1"
@@ -7313,7 +7511,7 @@ mz@2.6.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.3.0, nan@^2.9.2:
+nan@^2.3.0:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
   integrity sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==
@@ -7322,6 +7520,11 @@ nan@^2.3.3:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
 
+nan@^2.9.2:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.12.1.tgz#7b1aa193e9aa86057e3c7bbd0ac448e770925552"
+  integrity sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -7370,13 +7573,6 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-fetch@^1.0.1:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-firefox-connect@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/node-firefox-connect/-/node-firefox-connect-1.2.0.tgz#42403848313240c98514ef14b3302816fe3b84e1"
@@ -7417,9 +7613,9 @@ node-libs-browser@0.5.3:
     vm-browserify "0.0.4"
 
 node-libs-browser@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
-  integrity sha512-5AzFzdoIMb89hBGMZglEegffzgRg+ZFoUmisQ8HI4j1KDdpx13J0taNp2y9xPbur6W61gepGDDotGBVQ7mfUCg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
+  integrity sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==
   dependencies:
     assert "^1.1.1"
     browserify-zlib "^0.2.0"
@@ -7428,7 +7624,7 @@ node-libs-browser@^2.0.0:
     constants-browserify "^1.0.0"
     crypto-browserify "^3.11.0"
     domain-browser "^1.1.1"
-    events "^1.0.0"
+    events "^3.0.0"
     https-browserify "^1.0.0"
     os-browserify "^0.3.0"
     path-browserify "0.0.0"
@@ -7442,7 +7638,7 @@ node-libs-browser@^2.0.0:
     timers-browserify "^2.0.4"
     tty-browserify "0.0.0"
     url "^0.11.0"
-    util "^0.10.3"
+    util "^0.11.0"
     vm-browserify "0.0.4"
 
 node-notifier@5.1.2:
@@ -7495,10 +7691,10 @@ node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-releases@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.4.tgz#2d585de8c6c81d00017e063e7810a63889aa6756"
-  integrity sha512-GqRV9GcHw8JCRDaP/JoeNMNzEGzHAknMvIHqMb2VeTOmg1Cf9+ej8bkV12tHfzWHQMCkQ5zUFgwFUkfraynNCw==
+node-releases@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.8.tgz#32a63fff63c5e51b7e0f540ac95947d220fc6862"
+  integrity sha512-gQm+K9mGCiT/NXHy+V/ZZS1N/LOaGGqRAAJJs3X9Ah1g+CIbRcBgNyoNYQ+SEtcyAtB9KqDruu+fF7nWjsqRaA==
   dependencies:
     semver "^5.3.0"
 
@@ -7509,48 +7705,52 @@ node-version@^1.0.0:
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
   dependencies:
     abbrev "1"
     osenv "^0.1.4"
 
-normalize-package-data@^2.3.0, normalize-package-data@^2.3.5:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
-  dependencies:
-    hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
+    resolve "^1.10.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
-
-normalize-path@^2.0.1, normalize-path@^2.1.1:
+normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-url@^1.0.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
 npm-bundled@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
-  integrity sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
+  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
 
 npm-packlist@^1.1.6:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.12.tgz#22bde2ebc12e72ca482abd67afc51eb49377243a"
-  integrity sha512-WJKFOVMeAlsU/pjXuqVdzU0WfgtIBCupkEVwn+1Y0ERAbUfWw8R4GjgVbaKnUjRoD2FoQbHOCbOyT5Mbs9Lw4g==
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.1.tgz#19064cdf988da80ea3cee45533879d90192bbfbc"
+  integrity sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
@@ -7565,6 +7765,7 @@ npm-path@^2.0.2:
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
@@ -7580,6 +7781,7 @@ npm-which@^3.0.1:
 npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
@@ -7593,8 +7795,9 @@ nth-check@~1.0.1:
     boolbase "~1.0.0"
 
 nullthrows@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.0.0.tgz#34715e53b9debe0750a77233fd494a5835a2d999"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
+  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
 
 number-is-nan@^1.0.0:
   version "1.0.1"
@@ -7636,10 +7839,6 @@ object-keys@^1.0.12:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
   integrity sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==
 
-object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
-
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -7660,6 +7859,7 @@ object.fromentries@^2.0.0:
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
   dependencies:
     define-properties "^1.1.2"
     es-abstract "^1.5.1"
@@ -7689,6 +7889,7 @@ once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
 once@~1.3.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  integrity sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=
   dependencies:
     wrappy "1"
 
@@ -7697,8 +7898,9 @@ onetime@^1.0.0:
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
 
 onetime@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.0.tgz#52aa8110e52fc5126ffc667bd8ec21c2ed209ce6"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
   dependencies:
     mimic-fn "^1.0.0"
 
@@ -7714,6 +7916,7 @@ opener@^1.5.1:
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   dependencies:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
@@ -7742,6 +7945,7 @@ os-browserify@~0.1.2:
 os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
 os-locale@^1.4.0:
   version "1.4.0"
@@ -7750,19 +7954,20 @@ os-locale@^1.4.0:
     lcid "^1.0.0"
 
 os-locale@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.0.0.tgz#15918ded510522b81ee7ae5a309d54f639fc39a4"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  integrity sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==
   dependencies:
-    execa "^0.5.0"
+    execa "^0.7.0"
     lcid "^1.0.0"
     mem "^1.1.0"
 
 os-locale@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.0.1.tgz#3b014fbf01d87f60a1e5348d80fe870dc82c4620"
-  integrity sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
   dependencies:
-    execa "^0.10.0"
+    execa "^1.0.0"
     lcid "^2.0.0"
     mem "^4.0.0"
 
@@ -7773,14 +7978,16 @@ os-shim@^0.1.2:
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
 osenv@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.0.3.tgz#cd6ad8ddb290915ad9e22765576025d411f29cb6"
 
 osenv@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
   dependencies:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
@@ -7793,26 +8000,31 @@ p-defer@^1.0.0:
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-is-promise@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
-  integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
+p-is-promise@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.0.0.tgz#7554e3d572109a87e1f3f53f6a7d85d1b194f4c5"
+  integrity sha512-pzQPhYMCAgLAKPWD2jC3Se9fEfrD9npNos0y150EeqZll7akhEgGhTW/slB6lHku8AvYGiJ+YJ5hfHKePPgFWg==
 
 p-limit@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
 
 p-limit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
-  integrity sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.1.0.tgz#1d5a0d20fb12707c758a655f6bbc4386b5930d68"
+  integrity sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==
   dependencies:
     p-try "^2.0.0"
 
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
   dependencies:
     p-limit "^1.1.0"
 
@@ -7833,6 +8045,11 @@ p-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.0.0.tgz#be18c5a5adeb8e156460651421aceca56c213a50"
   integrity sha512-GO107XdrSUmtHxVoi60qc9tUl/KkNKm+X2CF4P9amalpGxv5YqVPJNfSb0wcA+syCopkZvYYIzW8OVTQW59x/w==
 
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
 p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
@@ -7857,9 +8074,9 @@ pako@~1.0.2:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.5.tgz#d2205dfe5b9da8af797e7c163db4d1f84e4600bc"
 
 pako@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
-  integrity sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.8.tgz#6844890aab9c635af868ad5fecc62e8acbba3ea4"
+  integrity sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==
 
 parallel-transform@^1.1.0:
   version "1.1.0"
@@ -7871,19 +8088,21 @@ parallel-transform@^1.1.0:
     readable-stream "^2.1.5"
 
 parse-asn1@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
-  integrity sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.4.tgz#37f6628f823fbdeb2273b4d540434a22f3ef1fcc"
+  integrity sha512-Qs5duJcuvNExRfFZ99HDD3z4mAi3r9Wl/FOjEOijlxwCZs7E7mW2vjTpgQ4J8LpTF8x5v+1Vn5UQFejmWT11aw==
   dependencies:
     asn1.js "^4.0.0"
     browserify-aes "^1.0.0"
     create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
 
 parse-github-repo-url@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
+  integrity sha1-nn2LslKmy2ukJZUGC3v23z28H1A=
 
 parse-glob@^3.0.4:
   version "3.0.4"
@@ -7898,16 +8117,23 @@ parse-glob@^3.0.4:
 parse-json@2.2.0, parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
   dependencies:
     error-ex "^1.2.0"
 
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
   dependencies:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
+
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -7925,6 +8151,7 @@ path-browserify@0.0.0:
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
 path-exists@^1.0.0:
   version "1.0.0"
@@ -7933,12 +8160,14 @@ path-exists@^1.0.0:
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
   dependencies:
     pinkie-promise "^2.0.0"
 
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
@@ -7952,12 +8181,9 @@ path-is-inside@^1.0.1, path-is-inside@^1.0.2:
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-parse@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
-
-path-parse@^1.0.6:
+path-parse@^1.0.5, path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
@@ -7965,6 +8191,7 @@ path-parse@^1.0.6:
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
   dependencies:
     graceful-fs "^4.1.2"
     pify "^2.0.0"
@@ -7973,12 +8200,14 @@ path-type@^1.0.0:
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
   dependencies:
     pify "^2.0.0"
 
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
   dependencies:
     pify "^3.0.0"
 
@@ -8013,10 +8242,12 @@ performance-now@^2.1.0:
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
@@ -8045,6 +8276,7 @@ pino@^4.6.0:
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
   dependencies:
     find-up "^2.1.0"
 
@@ -8137,9 +8369,10 @@ prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
 
-prepend-http@^1.0.1:
+prepend-http@^1.0.0, prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
 preserve@^0.2.0:
   version "0.2.0"
@@ -8147,9 +8380,9 @@ preserve@^0.2.0:
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
 prettier@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.1.tgz#534c2c9d7853f8845e5e078384e71973bd74089f"
-  integrity sha512-XXUITwIkGb3CPJ2hforHah/zTINRyie5006Jd2HKy2qz7snEJXl0KLfsJZW/wst9g6R2rFvqba3VpNYdu1hDcA==
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-format@^22.1.0:
   version "22.1.0"
@@ -8167,8 +8400,9 @@ pretty-format@^23.6.0:
     ansi-styles "^3.2.0"
 
 private@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
 process-nextick-args@~1.0.6:
   version "1.0.7"
@@ -8203,26 +8437,20 @@ promise-polyfill@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.0.2.tgz#d9c86d3dc4dc2df9016e88946defd69b49b41162"
 
-promise@^7.0.3, promise@^7.1.1:
+promise@^7.0.3:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4, prop-types@^15.5.8:
-  version "15.5.10"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-
-prop-types@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
-  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
-  dependencies:
-    loose-envify "^1.3.1"
+    loose-envify "^1.4.0"
     object-assign "^4.1.1"
+    react-is "^16.8.1"
 
 prr@~1.0.1:
   version "1.0.1"
@@ -8232,6 +8460,7 @@ prr@~1.0.1:
 pseudomap@^1.0.1, pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -8288,12 +8517,14 @@ punycode@^1.2.4, punycode@^1.4.1:
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
 punycode@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-q@^1.4.1:
+q@^1.4.1, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
 qs@~6.3.0:
   version "6.3.2"
@@ -8308,6 +8539,14 @@ qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
+query-string@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 querystring-es3@^0.2.0, querystring-es3@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -8324,6 +8563,11 @@ quick-format-unescaped@^1.1.1:
   dependencies:
     fast-safe-stringify "^1.0.8"
 
+quick-lru@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+  integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
+
 quick-tmp@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/quick-tmp/-/quick-tmp-0.0.0.tgz#4165e66320ea05f9cbcccf3be1f8fd5fdb05f7df"
@@ -8341,9 +8585,9 @@ randomatic@^3.0.0:
     math-random "^1.0.1"
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
-  integrity sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
@@ -8355,11 +8599,12 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-rc@^1.0.1, rc@^1.1.6:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
   dependencies:
-    deep-extend "~0.4.0"
+    deep-extend "^0.6.0"
     ini "~1.3.0"
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
@@ -8373,44 +8618,37 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-color@^2.11.7:
-  version "2.11.7"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.11.7.tgz#746465b75feda63c2567607dfbcb276fc954a5b7"
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
+  integrity sha512-kJfE5tSaFe6GzalXOHksVjqwCPAsTl+nzS9/BWfP7j3EXbQ4IiLAF9sZGNzk3uq7HfofGYgjmcUgh0JP7xAQ0w==
   dependencies:
-    lodash "^4.0.1"
+    "@icons/material" "^0.2.4"
+    lodash ">4.17.4"
     material-colors "^1.2.1"
-    prop-types "^15.5.4"
+    prop-types "^15.5.10"
     reactcss "^1.2.0"
-    tinycolor2 "^1.1.2"
+    tinycolor2 "^1.4.1"
 
-react-dom@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e"
-  integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ==
+react-dom@^16.8:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32"
+  integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
+    scheduler "^0.13.3"
 
-react-is@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.0-alpha.1.tgz#ac1aed207d6040f002b645af36702edf9ce2c40d"
-  integrity sha512-Gsh2u4ovhS2DY6fWgie/av5vzrIfW6P0lgWAsAQp9DjOImE0fJ26FfEdpFXtYBwi5s2krT9z0xvcQKvQsi4ekw==
+react-is@^16.8, react-is@^16.8.1:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.3.tgz#4ad8b029c2a718fc0cfc746c8d4e1b7221e5387d"
+  integrity sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==
 
 react-portal@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.1.0.tgz#865c44fb72a1da106c649206936559ce891ee899"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
+  integrity sha512-avb1FreAZAVCvNNyS2dCpxZiPYPJnAasHYPxdVBTROgNFeI+KSb+OoMHNsC1GbDawESCriPwCX+qKua6WSPIFw==
   dependencies:
     prop-types "^15.5.8"
 
@@ -8420,38 +8658,41 @@ react-virtualized-auto-sizer@^1.0.2:
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
 react-window@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.1.tgz#9d68624d5ba58ddf331321fb74b0a75184523d16"
-  integrity sha512-D855yW104ek8+gSLW8G6Dt69WnhSlGXR4Ld+IoZW4aQg6a1pt7cZLb+fcOugVDVgl4RfrLSfg9aLBnvS7zsOaw==
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.2.tgz#39dbfd7aa47c1d80b37928f3269f7112a5900294"
+  integrity sha512-xGGKS9bR2y/XbkyQBk0qRO3y1mdENXVfksjAIn1fcbZ9qwiML52HryKfCaK50c1bIX3f0xqPgu8Q6FIxHKKbag==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one "^3.1.1"
 
-react@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
-  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
+react@^16.8:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"
+  integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
+    scheduler "^0.13.3"
 
 reactcss@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.2.tgz#41b0ef43e01d54880357c34b11ac1531209350ef"
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
   dependencies:
     lodash "^4.0.1"
 
 read-cmd-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
+  integrity sha1-LV0Vd4ajfAVdIgd8MsU/gynpHHs=
   dependencies:
     graceful-fs "^4.1.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
   dependencies:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
@@ -8459,13 +8700,23 @@ read-pkg-up@^1.0.1:
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
   dependencies:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
 
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg@^1.0.0, read-pkg@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
   dependencies:
     load-json-file "^1.0.0"
     normalize-package-data "^2.3.2"
@@ -8474,6 +8725,7 @@ read-pkg@^1.0.0, read-pkg@^1.1.0:
 read-pkg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
   dependencies:
     load-json-file "^2.0.0"
     normalize-package-data "^2.3.2"
@@ -8482,12 +8734,13 @@ read-pkg@^2.0.0:
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
   dependencies:
     load-json-file "^4.0.0"
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.3.3, readable-stream@^2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
@@ -8509,18 +8762,6 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.0, readable-stream@^2.0.5, readable-stream@^2.1.5, readable-stream@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
-  dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
-
 readable-stream@^2.1.4:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
@@ -8533,7 +8774,7 @@ readable-stream@^2.1.4:
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
-readdirp@^2.0.0:
+readdirp@^2.0.0, readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
   integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
@@ -8565,10 +8806,19 @@ rechoir@^0.6.2:
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
   dependencies:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 regenerate-unicode-properties@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
@@ -8603,9 +8853,9 @@ regenerator-runtime@^0.9.5:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
 
 regenerator-transform@^0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"
-  integrity sha512-5ipTrZFSq5vU2YoGoww4uaRVAK4wyYC4TSICibbfEPOruUu8FFP7ErV0BjmbIOEpn3O/k9na9UEdYR/3m7N6uA==
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"
+  integrity sha512-T0QMBjK3J0MtxjPmdIMXm72Wvj2Abb0Bd4HADdfijwMdoIsyQZ6fWC7kDFhk2YinBBEMZDL7Y7wh0J1sGx3S4A==
   dependencies:
     private "^0.1.6"
 
@@ -8624,6 +8874,11 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp-tree@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.5.tgz#7cd71fca17198d04b4176efd79713f2998009397"
+  integrity sha512-nUmxvfJyAODw+0B13hj8CFVAxhe7fDEAgJgaotBu3nnR+IgGgZq59YedJP5VYTlkEfqjuK6TuRpnymKdatLZfQ==
+
 regexpp@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
@@ -8639,20 +8894,21 @@ regexpu-core@^1.0.0:
     regjsparser "^0.1.4"
 
 regexpu-core@^4.1.3, regexpu-core@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.2.0.tgz#a3744fa03806cffe146dea4421a3e73bdcc47b1d"
-  integrity sha512-Z835VSnJJ46CNBttalHD/dB+Sj2ezmY6Xp38npwU87peK6mqOzOpV8eYktdkLTEkzzD+JsTcxd84ozd8I14+rw==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.4.0.tgz#8d43e0d1266883969720345e70c275ee0aec0d32"
+  integrity sha512-eDDWElbwwI3K0Lo6CqbQbA6FwgtCz4kYTarrri1okfkRLZAqstU+B3voZBCjg8Fl6iq0gXrJG6MvRgLthfvgOA==
   dependencies:
     regenerate "^1.4.0"
     regenerate-unicode-properties "^7.0.0"
-    regjsgen "^0.4.0"
-    regjsparser "^0.3.0"
+    regjsgen "^0.5.0"
+    regjsparser "^0.6.0"
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.0.2"
 
 registry-auth-token@^3.0.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
+  integrity sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==
   dependencies:
     rc "^1.1.6"
     safe-buffer "^5.0.1"
@@ -8660,6 +8916,7 @@ registry-auth-token@^3.0.1:
 registry-url@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  integrity sha1-PU74cPc93h138M+aOBQyRE4XSUI=
   dependencies:
     rc "^1.0.1"
 
@@ -8668,10 +8925,10 @@ regjsgen@^0.2.0:
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
   integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
 
-regjsgen@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.4.0.tgz#c1eb4c89a209263f8717c782591523913ede2561"
-  integrity sha512-X51Lte1gCYUdlwhF28+2YMO0U6WeN0GLpgpA7LK7mbdDnkQYiwvEpmpe0F/cv5L14EbxgrdayAG3JETBv0dbXA==
+regjsgen@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.0.tgz#a7634dc08f89209c2049adda3525711fb97265dd"
+  integrity sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA==
 
 regjsparser@^0.1.4:
   version "0.1.5"
@@ -8680,10 +8937,10 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.3.0.tgz#3c326da7fcfd69fa0d332575a41c8c0cdf588c96"
-  integrity sha512-zza72oZBBHzt64G7DxdqrOo/30bhHkwMUoT0WqfGu98XLd7N+1tsy5MJ96Bk4MD0y74n629RhmrGW6XlnLLwCA==
+regjsparser@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
+  integrity sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -8712,6 +8969,7 @@ repeat-string@^1.5.2, repeat-string@^1.6.1:
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
   dependencies:
     is-finite "^1.0.0"
 
@@ -8815,10 +9073,12 @@ request@^2.83.0:
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+  integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
 require-uncached@1.0.3, require-uncached@^1.0.2, require-uncached@^1.0.3:
   version "1.0.3"
@@ -8830,9 +9090,18 @@ require-uncached@1.0.3, require-uncached@^1.0.2, require-uncached@^1.0.3:
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
@@ -8840,6 +9109,7 @@ resolve-from@^1.0.0:
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
 resolve-url@^0.2.1:
   version "0.2.1"
@@ -8854,14 +9124,7 @@ resolve@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
 
-resolve@^1.3.2:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
-  integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==
-  dependencies:
-    path-parse "^1.0.5"
-
-resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
   integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
@@ -8878,6 +9141,7 @@ restore-cursor@^1.0.1:
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
   dependencies:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
@@ -8894,18 +9158,25 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@2, rimraf@^2.5.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
     glob "^7.0.5"
 
-rimraf@^2.2.8, rimraf@^2.5.4:
+rimraf@^2.2.8:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
     glob "^7.0.5"
 
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@~2.4.0:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
@@ -8934,6 +9205,7 @@ run-async@^0.1.0:
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
   dependencies:
     is-promise "^2.1.0"
 
@@ -8947,12 +9219,14 @@ run-queue@^1.0.0, run-queue@^1.0.3:
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
   dependencies:
     rx-lite "*"
 
 rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
 
 rx-lite@^3.1.2:
   version "3.1.2"
@@ -8965,11 +9239,7 @@ rxjs@^6.3.3:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
-
-safe-buffer@^5.1.0, safe-buffer@^5.1.2:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -9004,30 +9274,19 @@ sane@^2.0.0:
   optionalDependencies:
     fsevents "^1.1.1"
 
-sax@>=0.6.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
-
-sax@^1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.0-alpha.1:
-  version "0.13.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
-  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
+scheduler@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896"
+  integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-schema-utils@^0.4.4:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
-  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
-  dependencies:
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -9048,31 +9307,24 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@5.3.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-
-semver@^5.0.1, semver@^5.4.1:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
-
-semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
-semver@^5.5.1:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
+semver@5.3.0, semver@^5.0.3:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
 serialize-javascript@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.5.0.tgz#1aa336162c88a890ddad5384baebc93a655161fe"
-  integrity sha512-Ga8c8NjAAp46Br4+0oZ2WxJCwIzwP60Gq1YPgU+39PiTVxyed/iKE/zyZI6+UlVYH5Q4PaQdHhcegIFPZTUfoQ==
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
+  integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
 set-value@^0.4.3:
   version "0.4.3"
@@ -9094,9 +9346,10 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
 sha.js@2.2.6:
   version "2.2.6"
@@ -9124,12 +9377,14 @@ shallow-copy@0.0.1:
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
   dependencies:
     shebang-regex "^1.0.0"
 
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
 shell-quote@1.6.1:
   version "1.6.1"
@@ -9182,10 +9437,12 @@ sign-addon@0.2.1:
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
 slice-ansi@0.0.4:
   version "0.0.4"
@@ -9198,10 +9455,6 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
-slide@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -9245,9 +9498,17 @@ sntp@2.x.x:
   dependencies:
     hoek "4.x.x"
 
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=
   dependencies:
     is-plain-obj "^1.0.0"
 
@@ -9291,10 +9552,10 @@ source-map-support@^0.5.0:
   dependencies:
     source-map "^0.6.0"
 
-source-map-support@~0.5.6:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
-  integrity sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==
+source-map-support@~0.5.9:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
+  integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -9307,20 +9568,23 @@ source-map-url@^0.4.0:
 source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+source-map@^0.5.3:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
-source-map@~0.5.1, source-map@~0.5.6:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 sparkles@^1.0.0:
   version "1.0.0"
@@ -9333,19 +9597,31 @@ spawn-sync@1.0.15, spawn-sync@^1.0.15:
     concat-stream "^1.4.7"
     os-shim "^0.1.2"
 
-spdx-correct@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+spdx-correct@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
+  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
   dependencies:
-    spdx-license-ids "^1.0.2"
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
 
-spdx-expression-parse@~1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+spdx-exceptions@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
 
-spdx-license-ids@^1.0.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz#81c0ce8f21474756148bbb5f3bfc0f36bf15d76e"
+  integrity sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g==
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
@@ -9357,6 +9633,7 @@ split-string@^3.0.1, split-string@^3.0.2:
 split2@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
+  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
   dependencies:
     through2 "^2.0.2"
 
@@ -9369,6 +9646,7 @@ split2@^2.0.1:
 split@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
   dependencies:
     through "2"
 
@@ -9391,7 +9669,7 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-ssri@^6.0.0:
+ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
   integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
@@ -9433,9 +9711,9 @@ stream-browserify@^1.0.0:
     readable-stream "^1.0.27-1"
 
 stream-browserify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
-  integrity sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
   dependencies:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
@@ -9478,6 +9756,11 @@ stream-to-promise@2.2.0:
     end-of-stream "~1.1.0"
     stream-to-array "~2.3.0"
 
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
 string-argv@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
@@ -9499,24 +9782,18 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.1.0, string-width@^2.1.1:
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^3.0.0"
-
-string_decoder@^1.0.0, string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+string_decoder@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
+  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
   dependencies:
     safe-buffer "~5.1.0"
 
@@ -9531,6 +9808,13 @@ string_decoder@~1.0.3:
   dependencies:
     safe-buffer "~5.1.0"
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 stringify-object@^3.2.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
@@ -9559,6 +9843,7 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
 strip-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
   dependencies:
     ansi-regex "^3.0.0"
 
@@ -9582,26 +9867,48 @@ strip-bom@3.0.0, strip-bom@^3.0.0:
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
   dependencies:
     is-utf8 "^0.2.0"
 
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
+strip-outer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
+  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
+strip-url-auth@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae"
+  integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=
 
 strong-log-transformer@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-1.0.6.tgz#f7fb93758a69a571140181277eea0c2eb1301fa3"
+  integrity sha1-9/uTdYpppXEUAYEnfuoMLrEwH6M=
   dependencies:
     byline "^5.0.0"
     duplexer "^0.1.1"
@@ -9629,8 +9936,9 @@ supports-color@^3.1.2, supports-color@^3.2.3:
     has-flag "^1.0.0"
 
 supports-color@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.0.tgz#ad986dc7eb2315d009b4d77c8169c2231a684037"
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=
   dependencies:
     has-flag "^2.0.0"
 
@@ -9674,9 +9982,9 @@ table@^3.7.8:
     string-width "^2.0.0"
 
 tapable@^1.0.0, tapable@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
-  integrity sha512-IlqtmLVaZA2qab8epUXbVWRn3aB1imbDMJtjB3nu4X0NqPkcY/JH9ZtCBWKHWPxs8Svi9tyo8w2dBoi07qZbBA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
+  integrity sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==
 
 tar-pack@^3.4.0:
   version "3.4.1"
@@ -9692,12 +10000,16 @@ tar-pack@^3.4.0:
     uid-number "^0.0.6"
 
 tar-stream@^1.5.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.2.tgz#fbc6c6e83c1a19d4cb48c7d96171fc248effc7bf"
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
+  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
   dependencies:
     bl "^1.0.0"
+    buffer-alloc "^1.2.0"
     end-of-stream "^1.0.0"
-    readable-stream "^2.0.0"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.1"
     xtend "^4.0.0"
 
 tar@^2.2.1:
@@ -9724,10 +10036,12 @@ tar@^4:
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
+  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
 
 temp-write@^3.3.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492"
+  integrity sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=
   dependencies:
     graceful-fs "^4.1.2"
     is-stream "^1.1.0"
@@ -9739,6 +10053,7 @@ temp-write@^3.3.0:
 tempfile@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-1.1.1.tgz#5bcc4eaecc4ab2c707d8bc11d99ccc9a2cb287f2"
+  integrity sha1-W8xOrsxKsscH2LwR2ZzMmiyyh/I=
   dependencies:
     os-tmpdir "^1.0.0"
     uuid "^2.0.1"
@@ -9750,27 +10065,27 @@ term-size@^1.2.0:
     execa "^0.7.0"
 
 terser-webpack-plugin@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.1.0.tgz#cf7c25a1eee25bf121f4a587bb9e004e3f80e528"
-  integrity sha512-61lV0DSxMAZ8AyZG7/A4a3UPlrbOBo8NIQ4tJzLPAdGOQ+yoNC7l5ijEow27lBAL2humer01KLS6bGIMYQxKoA==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.2.tgz#9bff3a891ad614855a7dde0d707f7db5a927e3d9"
+  integrity sha512-1DMkTk286BzmfylAvLXwpJrI7dWa5BnFmscV/2dCr8+c56egFcbaeFAl7+sujAjdmpLam21XRdhA4oifLyiWWg==
   dependencies:
     cacache "^11.0.2"
     find-cache-dir "^2.0.0"
     schema-utils "^1.0.0"
     serialize-javascript "^1.4.0"
     source-map "^0.6.1"
-    terser "^3.8.1"
+    terser "^3.16.1"
     webpack-sources "^1.1.0"
     worker-farm "^1.5.2"
 
-terser@^3.8.1:
-  version "3.10.12"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.10.12.tgz#06d40765e40b33fd97977c0896c75b2b5d42142d"
-  integrity sha512-3ODPC1eVt25EVNb04s/PkHxOmzKBQUF6bwwuR6h2DbEF8/j265Y1UkwNtOk9am/pRxfJ5HPapOlUlO6c16mKQQ==
+terser@^3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493"
+  integrity sha512-JDJjgleBROeek2iBcSNzOHLKsB/MdDf+E/BOAJ0Tk9r7p9/fVobfv7LMJ/g/k3v9SXdmjZnIlFd5nfn/Rt0Xow==
   dependencies:
     commander "~2.17.1"
     source-map "~0.6.1"
-    source-map-support "~0.5.6"
+    source-map-support "~0.5.9"
 
 test-exclude@^4.1.1:
   version "4.1.1"
@@ -9794,8 +10109,9 @@ test-exclude@^4.2.1:
     require-main-filename "^1.0.1"
 
 text-extensions@^1.0.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.7.0.tgz#faaaba2625ed746d568a23e4d0aacd9bf08a8b39"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
+  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
 
 text-table@~0.2.0:
   version "0.2.0"
@@ -9818,15 +10134,17 @@ throat@^4.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
 through2@^2.0.0, through2@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
   dependencies:
-    readable-stream "^2.1.5"
+    readable-stream "~2.3.6"
     xtend "~4.0.1"
 
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
 time-stamp@^1.0.0:
   version "1.0.1"
@@ -9835,6 +10153,7 @@ time-stamp@^1.0.0:
 timed-out@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+  integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
 
 timers-browserify@^1.0.1:
   version "1.4.2"
@@ -9850,9 +10169,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tinycolor2@^1.1.2:
+tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
 tmp@0.0.30:
   version "0.0.30"
@@ -9863,6 +10183,7 @@ tmp@0.0.30:
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
@@ -9875,6 +10196,11 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
+to-buffer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
+  integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
+
 to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
@@ -9949,14 +10275,29 @@ traverse@0.4.x:
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+
+trim-newlines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
+  integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
 
 trim-off-newlines@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
+  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
+
+trim-repeated@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
+  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
+  dependencies:
+    escape-string-regexp "^1.0.2"
 
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+  integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
 tryit@^1.0.1:
   version "1.0.3"
@@ -9997,19 +10338,30 @@ type-check@~0.3.2:
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 ua-parser-js@^0.7.9:
-  version "0.7.12"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+  integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
 
 uglify-js@^2.6:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.4.tgz#65ea2fb3059c9394692f15fed87c2b36c16b9adf"
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
   dependencies:
-    async "~0.2.6"
     source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
     yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@^3.1.4:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
 
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
@@ -10057,7 +10409,7 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^0.4.3"
 
-unique-filename@^1.1.0:
+unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
   integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
@@ -10078,8 +10430,9 @@ unique-string@^1.0.0:
     crypto-random-string "^1.0.0"
 
 universalify@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
 unset-value@^1.0.0:
   version "1.0.0"
@@ -10092,8 +10445,9 @@ unset-value@^1.0.0:
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+  integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-upath@^1.0.5:
+upath@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
   integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
@@ -10126,6 +10480,7 @@ urix@^0.1.0:
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
   dependencies:
     prepend-http "^1.0.1"
 
@@ -10168,6 +10523,7 @@ util-deprecate@~1.0.1:
 util.promisify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
   dependencies:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
@@ -10179,7 +10535,14 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
-util@^0.10.3, util@~0.10.3:
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
+  dependencies:
+    inherits "2.0.3"
+
+util@~0.10.3:
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
   integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
@@ -10189,13 +10552,14 @@ util@^0.10.3, util@~0.10.3:
 uuid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+  integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
 
-uuid@^3.0.0:
+uuid@^3.0.0, uuid@^3.0.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-uuid@^3.0.1, uuid@^3.1.0:
+uuid@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
 
@@ -10205,11 +10569,12 @@ v8-compile-cache@^2.0.2:
   integrity sha512-1wFuMUIM16MDJRCrpbpuEPTUGmM5QMUg0cr3KFwra2XgOgFcPGDQHDh3CszSCD2Zewc/dh/pamNEW8CbfDebUw==
 
 validate-npm-package-license@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
   dependencies:
-    spdx-correct "~1.0.0"
-    spdx-expression-parse "~1.0.0"
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
 
 verror@1.10.0:
   version "1.10.0"
@@ -10244,6 +10609,7 @@ w3c-hr-time@^1.0.1:
 walkdir@^0.0.11:
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
+  integrity sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=
 
 walker@~1.0.5:
   version "1.0.7"
@@ -10278,6 +10644,7 @@ watchpack@^1.5.0:
 wcwidth@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
   dependencies:
     defaults "^1.0.3"
 
@@ -10325,20 +10692,21 @@ webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
 webpack-cli@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.1.2.tgz#17d7e01b77f89f884a2bbf9db545f0f6a648e746"
-  integrity sha512-Cnqo7CeqeSvC6PTdts+dywNi5CRlIPbLx1AoUPK2T6vC1YAugMG3IOoO9DmEscd+Dghw7uRlnzV1KwOe5IrtgQ==
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.2.3.tgz#13653549adfd8ccd920ad7be1ef868bacc22e346"
+  integrity sha512-Ik3SjV6uJtWIAN5jp5ZuBMWEAaP5E4V78XJ2nI+paFPh8v4HPSwo/myN0r29Xc/6ZKnd2IdrAlpSgNOu2CDQ6Q==
   dependencies:
     chalk "^2.4.1"
     cross-spawn "^6.0.5"
     enhanced-resolve "^4.1.0"
-    global-modules-path "^2.3.0"
+    findup-sync "^2.0.0"
+    global-modules "^1.0.0"
     import-local "^2.0.0"
     interpret "^1.1.0"
     loader-utils "^1.1.0"
     supports-color "^5.5.0"
     v8-compile-cache "^2.0.2"
-    yargs "^12.0.2"
+    yargs "^12.0.4"
 
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
@@ -10349,16 +10717,16 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-map "~0.6.1"
 
 webpack@^4.26.0:
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.0.tgz#adbe80b869148c8d108b7d88965d00d72b3178de"
-  integrity sha512-J/dP9SJIc5OtX2FZ/+U9ikQtd6H6Mcbqt0xeXtmPwYGDKf8nkbOQQA9KL2Y0rJOsN1Al9Pdn+/j63X58ub8gvQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-module-context" "1.7.11"
-    "@webassemblyjs/wasm-edit" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-    acorn "^5.6.2"
-    acorn-dynamic-import "^3.0.0"
+  version "4.29.5"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.5.tgz#52b60a7b0838427c3a894cd801a11dc0836bc79f"
+  integrity sha512-DuWlYUT982c7XVHodrLO9quFbNpVq5FNxLrMUfYUTlgKW0+yPimynYf1kttSQpEneAL1FH3P3OLNgkyImx8qIQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.3"
+    "@webassemblyjs/helper-module-context" "1.8.3"
+    "@webassemblyjs/wasm-edit" "1.8.3"
+    "@webassemblyjs/wasm-parser" "1.8.3"
+    acorn "^6.0.5"
+    acorn-dynamic-import "^4.0.0"
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
     chrome-trace-event "^1.0.0"
@@ -10372,7 +10740,7 @@ webpack@^4.26.0:
     mkdirp "~0.5.0"
     neo-async "^2.5.0"
     node-libs-browser "^2.0.0"
-    schema-utils "^0.4.4"
+    schema-utils "^1.0.0"
     tapable "^1.1.0"
     terser-webpack-plugin "^1.1.0"
     watchpack "^1.5.0"
@@ -10384,10 +10752,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
-
 whatwg-fetch@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
@@ -10418,6 +10782,7 @@ which-module@^1.0.0:
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
 which@1.2.4:
   version "1.2.4"
@@ -10426,13 +10791,13 @@ which@1.2.4:
     is-absolute "^0.1.7"
     isexe "^1.1.1"
 
-which@^1.0.5, which@^1.2.8, which@^1.2.9:
+which@^1.0.5, which@^1.2.8:
   version "1.2.12"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
   dependencies:
     isexe "^1.1.1"
 
-which@^1.2.10:
+which@^1.2.10, which@^1.2.14, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -10494,9 +10859,10 @@ worker-farm@^1.5.2:
   dependencies:
     errno "~0.1.7"
 
-wrap-ansi@^2.0.0, wrap-ansi@^2.1.0:
+wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
@@ -10514,15 +10880,16 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.1.0.tgz#1769f4b551eedce419f0505deae2e26763542d37"
+write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.2.tgz#a7181706dfba17855d221140a9c06e15fcdd87b9"
+  integrity sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
-    slide "^1.1.5"
+    signal-exit "^3.0.2"
 
-write-file-atomic@^2.1.0, write-file-atomic@^2.3.0:
+write-file-atomic@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
   dependencies:
@@ -10533,6 +10900,7 @@ write-file-atomic@^2.1.0, write-file-atomic@^2.3.0:
 write-json-file@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/write-json-file/-/write-json-file-2.3.0.tgz#2b64c8a33004d54b8698c76d585a77ceb61da32f"
+  integrity sha1-K2TIozAE1UuGmMdtWFp3zrYdoy8=
   dependencies:
     detect-indent "^5.0.0"
     graceful-fs "^4.1.2"
@@ -10542,8 +10910,9 @@ write-json-file@^2.2.0:
     write-file-atomic "^2.0.0"
 
 write-pkg@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/write-pkg/-/write-pkg-3.1.0.tgz#030a9994cc9993d25b4e75a9f1a1923607291ce9"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/write-pkg/-/write-pkg-3.2.0.tgz#0e178fe97820d389a8928bc79535dbe68c2cff21"
+  integrity sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==
   dependencies:
     sort-keys "^2.0.0"
     write-json-file "^2.2.0"
@@ -10571,17 +10940,17 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
 
 xml2js@~0.4.4:
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==
   dependencies:
     sax ">=0.6.0"
-    xmlbuilder "^4.1.0"
+    xmlbuilder "~9.0.1"
 
-xmlbuilder@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
-  dependencies:
-    lodash "^4.0.0"
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
 
 xmldom@0.1.27:
   version "0.1.27"
@@ -10595,24 +10964,22 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
 
 "y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-yallist@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
-
-yallist@^2.1.2:
+yallist@^2.0.0, yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
 yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
-  integrity sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
+  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
 yargs-parser@^11.1.1:
   version "11.1.1"
@@ -10631,6 +10998,7 @@ yargs-parser@^4.2.0:
 yargs-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  integrity sha1-jQrELxbqVd69MyyvTEA4s+P139k=
   dependencies:
     camelcase "^4.1.0"
 
@@ -10693,7 +11061,7 @@ yargs@^10.0.3:
     y18n "^3.2.1"
     yargs-parser "^8.1.0"
 
-yargs@^12.0.2:
+yargs@^12.0.4:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
@@ -10735,9 +11103,10 @@ zip-dir@1.0.2:
     async "^1.5.2"
     jszip "^2.4.0"
 
-zip-stream@^1.1.0:
+zip-stream@^1.1.0, zip-stream@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
+  integrity sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=
   dependencies:
     archiver-utils "^1.3.0"
     compress-commons "^1.2.0"

From bc4e8950f6d0d33399b9b86fdc9129ca0d5d2295 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:05:43 -0800
Subject: [PATCH 100/814] Updated test code to include a deeply nested DIV

---
 .../dev/app/DeeplyNestedComponents/index.js   |  34 +++++
 shells/dev/app/EditableProps/EditableProps.js | 132 ------------------
 shells/dev/app/EditableProps/index.js         | 130 ++++++++++++++++-
 .../InspectableElements.css                   |  13 --
 .../InspectableElements.js                    |   9 +-
 shells/dev/app/ToDoList/List.css              |  14 --
 shells/dev/app/ToDoList/List.js               |   8 +-
 shells/dev/app/index.js                       |   4 +
 .../EditableProps.css => styles.css}          |   4 +-
 src/devtools/views/Element.js                 |  13 +-
 10 files changed, 186 insertions(+), 175 deletions(-)
 create mode 100644 shells/dev/app/DeeplyNestedComponents/index.js
 delete mode 100644 shells/dev/app/EditableProps/EditableProps.js
 delete mode 100644 shells/dev/app/InspectableElements/InspectableElements.css
 rename shells/dev/app/{EditableProps/EditableProps.css => styles.css} (94%)

diff --git a/shells/dev/app/DeeplyNestedComponents/index.js b/shells/dev/app/DeeplyNestedComponents/index.js
new file mode 100644
index 000000000000..61deec375489
--- /dev/null
+++ b/shells/dev/app/DeeplyNestedComponents/index.js
@@ -0,0 +1,34 @@
+// @flow
+
+import React, { Fragment } from 'react';
+
+function wrapWithHoc(Component, index) {
+  function HOC() {
+    return <Component />;
+  }
+  HOC.displayName = `HOC-${index}`;
+  return HOC;
+}
+
+function wrapWithNested(Component, times) {
+  for (let i = 0; i < times; i++) {
+    Component = wrapWithHoc(Component, i);
+  }
+
+  return Component;
+}
+
+function Nested() {
+  return <div>Deeply nested div</div>;
+}
+
+const DeeplyNested = wrapWithNested(Nested, 100);
+
+export default function DeeplyNestedComponents() {
+  return (
+    <Fragment>
+      <h1>Deeply nested component</h1>
+      <DeeplyNested />
+    </Fragment>
+  );
+}
diff --git a/shells/dev/app/EditableProps/EditableProps.js b/shells/dev/app/EditableProps/EditableProps.js
deleted file mode 100644
index c48a78dc8c53..000000000000
--- a/shells/dev/app/EditableProps/EditableProps.js
+++ /dev/null
@@ -1,132 +0,0 @@
-// @flow
-
-import React, {
-  createContext,
-  Component,
-  Fragment,
-  useCallback,
-  useDebugValue,
-  useEffect,
-  useReducer,
-  useState,
-} from 'react';
-import styles from './EditableProps.css';
-
-const initialData = { foo: 'FOO', bar: 'BAR' };
-
-function reducer(state, action) {
-  switch (action.type) {
-    case 'swap':
-      return { foo: state.bar, bar: state.foo };
-    default:
-      throw new Error();
-  }
-}
-
-type StatefulFunctionProps = {| name: string |};
-
-function StatefulFunction({ name }: StatefulFunctionProps) {
-  const [count, updateCount] = useState(0);
-  const debouncedCount = useDebounce(count, 1000);
-  const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
-    count,
-  ]);
-
-  const [data, dispatch] = useReducer(reducer, initialData);
-  const handleUpdateReducerClick = useCallback(
-    () => dispatch({ type: 'swap' }),
-    []
-  );
-
-  return (
-    <Fragment>
-      <li>Name: {name}</li>
-      <li>
-        <button onClick={handleUpdateCountClick}>
-          Debounced count: {debouncedCount}
-        </button>
-      </li>
-      <li>
-        Reducer state: foo "{data.foo}", bar "{data.bar}"
-      </li>
-      <li>
-        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
-      </li>
-    </Fragment>
-  );
-}
-
-const BoolContext = createContext(true);
-BoolContext.displayName = 'BoolContext';
-
-type Props = {| name: string, toggle: boolean |};
-type State = {| cities: Array<string>, state: string |};
-
-class StatefulClass extends Component<Props, State> {
-  static contextType = BoolContext;
-
-  state: State = {
-    cities: ['San Francisco', 'San Jose'],
-    state: 'California',
-  };
-
-  handleChange = ({ target }) =>
-    this.setState({
-      state: target.value,
-    });
-
-  render() {
-    return (
-      <Fragment>
-        <li>Name: {this.props.name}</li>
-        <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
-        <li>
-          State: <input value={this.state.state} onChange={this.handleChange} />
-        </li>
-        <li>Cities: {this.state.cities.join(', ')}</li>
-        <li>Context: {this.context ? 'true' : 'false'}</li>
-      </Fragment>
-    );
-  }
-}
-
-export default function EditableProps() {
-  return (
-    <div className={styles.App}>
-      <div className={styles.Header}>Editable props</div>
-      <ul>
-        <StatefulClass name="Brian" toggle={true} />
-        <StatefulFunction name="Brian" />
-      </ul>
-    </div>
-  );
-}
-
-// Below copied from https://usehooks.com/
-function useDebounce(value, delay) {
-  // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  // Show the value in DevTools
-  useDebugValue(debouncedValue);
-
-  useEffect(
-    () => {
-      // Update debounced value after delay
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-
-      // Cancel the timeout if value changes (also on delay change or unmount)
-      // This is how we prevent debounced value from updating if value is changed ...
-      // .. within the delay period. Timeout gets cleared and restarted.
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay] // Only re-call effect if value or delay changes
-  );
-
-  return debouncedValue;
-}
-// Above copied from https://usehooks.com/
diff --git a/shells/dev/app/EditableProps/index.js b/shells/dev/app/EditableProps/index.js
index a57026743b86..c86d717ee376 100644
--- a/shells/dev/app/EditableProps/index.js
+++ b/shells/dev/app/EditableProps/index.js
@@ -1,5 +1,131 @@
 // @flow
 
-import EditableProps from './EditableProps';
+import React, {
+  createContext,
+  Component,
+  Fragment,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react';
 
-export default EditableProps;
+const initialData = { foo: 'FOO', bar: 'BAR' };
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'swap':
+      return { foo: state.bar, bar: state.foo };
+    default:
+      throw new Error();
+  }
+}
+
+type StatefulFunctionProps = {| name: string |};
+
+function StatefulFunction({ name }: StatefulFunctionProps) {
+  const [count, updateCount] = useState(0);
+  const debouncedCount = useDebounce(count, 1000);
+  const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+    count,
+  ]);
+
+  const [data, dispatch] = useReducer(reducer, initialData);
+  const handleUpdateReducerClick = useCallback(
+    () => dispatch({ type: 'swap' }),
+    []
+  );
+
+  return (
+    <Fragment>
+      <li>Name: {name}</li>
+      <li>
+        <button onClick={handleUpdateCountClick}>
+          Debounced count: {debouncedCount}
+        </button>
+      </li>
+      <li>
+        Reducer state: foo "{data.foo}", bar "{data.bar}"
+      </li>
+      <li>
+        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
+      </li>
+    </Fragment>
+  );
+}
+
+const BoolContext = createContext(true);
+BoolContext.displayName = 'BoolContext';
+
+type Props = {| name: string, toggle: boolean |};
+type State = {| cities: Array<string>, state: string |};
+
+class StatefulClass extends Component<Props, State> {
+  static contextType = BoolContext;
+
+  state: State = {
+    cities: ['San Francisco', 'San Jose'],
+    state: 'California',
+  };
+
+  handleChange = ({ target }) =>
+    this.setState({
+      state: target.value,
+    });
+
+  render() {
+    return (
+      <Fragment>
+        <li>Name: {this.props.name}</li>
+        <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
+        <li>
+          State: <input value={this.state.state} onChange={this.handleChange} />
+        </li>
+        <li>Cities: {this.state.cities.join(', ')}</li>
+        <li>Context: {this.context ? 'true' : 'false'}</li>
+      </Fragment>
+    );
+  }
+}
+
+export default function EditableProps() {
+  return (
+    <Fragment>
+      <h1>Editable props</h1>
+      <ul>
+        <StatefulClass name="Brian" toggle={true} />
+        <StatefulFunction name="Brian" />
+      </ul>
+    </Fragment>
+  );
+}
+
+// Below copied from https://usehooks.com/
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValue(debouncedValue);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+// Above copied from https://usehooks.com/
diff --git a/shells/dev/app/InspectableElements/InspectableElements.css b/shells/dev/app/InspectableElements/InspectableElements.css
deleted file mode 100644
index b1ebb8ee71d0..000000000000
--- a/shells/dev/app/InspectableElements/InspectableElements.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.App {
-  /* GitHub.com frontend fonts */
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.Header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index b7cbbf293748..d22fc29f52d9 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -1,20 +1,19 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import NestedProps from './NestedProps';
-import styles from './InspectableElements.css';
 
 // TODO Add Immutable JS example
 
 export default function InspectableElements() {
   return (
-    <div className={styles.App}>
-      <div className={styles.Header}>Inspectable elements</div>
+    <Fragment>
+      <h1>Inspectable elements</h1>
       <NestedProps />
       <Contexts />
       <CustomHooks />
-    </div>
+    </Fragment>
   );
 }
diff --git a/shells/dev/app/ToDoList/List.css b/shells/dev/app/ToDoList/List.css
index ae394960009e..05834028402d 100644
--- a/shells/dev/app/ToDoList/List.css
+++ b/shells/dev/app/ToDoList/List.css
@@ -1,17 +1,3 @@
-.App {
-  /* GitHub.com frontend fonts */
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.Header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
-
 .Input {
   font-size: 1rem;
   padding: 0.25rem;
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index a3fe76f38809..b8a2a4636aaa 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import ListItem from './ListItem';
 import styles from './List.css';
 
@@ -77,8 +77,8 @@ export default function List(props: Props) {
   );
 
   return (
-    <div className={styles.App}>
-      <div className={styles.Header}>List</div>
+    <Fragment>
+      <h1>List</h1>
       <input
         type="text"
         placeholder="New list item..."
@@ -106,6 +106,6 @@ export default function List(props: Props) {
           />
         ))}
       </ul>
-    </div>
+    </Fragment>
   );
 }
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 77a8093b42a7..ea813a28fe5e 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -4,11 +4,14 @@
 
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import DeeplyNestedComponents from './DeeplyNestedComponents';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import ToDoList from './ToDoList';
 
+import './styles.css';
+
 const containers = [];
 
 function mountHelper(App) {
@@ -26,6 +29,7 @@ function mountTestApp() {
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(DeeplyNestedComponents);
 }
 
 function unmountTestApp() {
diff --git a/shells/dev/app/EditableProps/EditableProps.css b/shells/dev/app/styles.css
similarity index 94%
rename from shells/dev/app/EditableProps/EditableProps.css
rename to shells/dev/app/styles.css
index b1ebb8ee71d0..2a995314c154 100644
--- a/shells/dev/app/EditableProps/EditableProps.css
+++ b/shells/dev/app/styles.css
@@ -1,4 +1,4 @@
-.App {
+body {
   /* GitHub.com frontend fonts */
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
     sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
@@ -6,7 +6,7 @@
   line-height: 1.5;
 }
 
-.Header {
+h1 {
   font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 0.5rem;
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 8b0cebe6c3b5..c87b11b48006 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,6 +1,13 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
@@ -26,6 +33,7 @@ export default function ElementView({ index, style }: Props) {
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
+  const isSelected = selectedElementID === id;
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
@@ -33,7 +41,7 @@ export default function ElementView({ index, style }: Props) {
     }
   }, [id, selectOwner]);
 
-  const ref = useRef();
+  const ref = useRef<HTMLSpanElement | null>(null);
 
   useEffect(() => {
     if (isSelected) {
@@ -64,7 +72,6 @@ export default function ElementView({ index, style }: Props) {
 
   const { depth, displayName, key, type } = ((element: any): Element);
 
-  const isSelected = selectedElementID === id;
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 

From 8041bfb92f0ae1e7978e59c6c8b8c3c636320055 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:07:09 -0800
Subject: [PATCH 101/814] Add .vscode to .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 119bd0d5a6cf..514ad873cd20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ npm-debug.log
 yarn-error.log
 .DS_Store
 yarn-error.log
+.vscode
\ No newline at end of file

From 1e4434ecc46fd7e5ef202766cc3f39b77eb14ba1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:11:23 -0800
Subject: [PATCH 102/814] Changed select-on-click to select-on-mouse-down and
 fixed a scrollIntoView problem

---
 src/devtools/views/Element.css |  1 -
 src/devtools/views/Element.js  | 10 +++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 97b02258a2e2..a13366ca50f7 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -2,7 +2,6 @@
 .SelectedElement {
   width: 100%;
   border-radius: 0.25em;
-  cursor: pointer;
   position: relative;
   white-space: nowrap;
   line-height: var(--line-height-data);
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index c87b11b48006..c0cb4ab34a7d 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -46,14 +46,18 @@ export default function ElementView({ index, style }: Props) {
   useEffect(() => {
     if (isSelected) {
       if (ref.current !== null) {
-        ref.current.scrollIntoView();
+        ref.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest',
+          inline: 'nearest',
+        });
       }
     }
   }, [isSelected]);
 
   // TODO Add click and key handlers for toggling element open/close state.
 
-  const handleClick = useCallback(
+  const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
         selectElementByID(metaKey ? null : id);
@@ -80,7 +84,7 @@ export default function ElementView({ index, style }: Props) {
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
-      onClick={handleClick}
+      onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window

From 05ef0ad7dc8d1dc7cfb8b3a66a49f5457f0f670c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:30:03 -0800
Subject: [PATCH 103/814] Disable view-source button rather than hiding it to
 avoid jumping when selecting new components

---
 src/devtools/views/SelectedElement.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index de2b14acbc9a..ce3023db2972 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -81,15 +81,14 @@ export default function SelectedElement(_: Props) {
         >
           <ButtonIcon type="view-dom" />
         </Button>
-        {canViewSource && (
-          <Button
-            className={styles.IconButton}
-            onClick={viewSource}
-            title="View source for this element"
-          >
-            <ButtonIcon type="view-source" />
-          </Button>
-        )}
+        <Button
+          className={styles.IconButton}
+          disabled={!canViewSource}
+          onClick={viewSource}
+          title="View source for this element"
+        >
+          <ButtonIcon type="view-source" />
+        </Button>
       </div>
 
       {inspectedElement === null && (

From bf02b2ffbfe4c07c6bd610e419dcdb106978a71c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:33:10 -0800
Subject: [PATCH 104/814] Select DOM element mode should useCapture to prevent
 clicks from passing through

---
 src/backend/agent.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index fbd306f3bb72..a4716ecc71e5 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -177,17 +177,17 @@ export default class Agent extends EventEmitter {
   };
 
   startInspectingDOM = () => {
-    window.addEventListener('click', this._onClick);
-    window.addEventListener('mousedown', this._onMouseDown);
-    window.addEventListener('mouseover', this._onMouseOver);
+    window.addEventListener('click', this._onClick, true);
+    window.addEventListener('mousedown', this._onMouseDown, true);
+    window.addEventListener('mouseover', this._onMouseOver, true);
   };
 
   stopInspectingDOM = () => {
     hideOverlay();
 
-    window.removeEventListener('click', this._onClick);
-    window.removeEventListener('mousedown', this._onMouseDown);
-    window.removeEventListener('mouseover', this._onMouseOver);
+    window.removeEventListener('click', this._onClick, true);
+    window.removeEventListener('mousedown', this._onMouseDown, true);
+    window.removeEventListener('mouseover', this._onMouseOver, true);
   };
 
   viewElementSource = ({ id, rendererID }: InspectSelectParams) => {

From 0153eaedee768336d3e849b18c8889a13c752e1b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:49:46 -0800
Subject: [PATCH 105/814] Left arrow selects parent in tree

---
 src/devtools/store.js             |  4 ++--
 src/devtools/views/SearchInput.js | 13 ++++++++++++-
 src/devtools/views/Tree.js        | 15 ++++++++++++++-
 src/devtools/views/TreeContext.js | 20 ++++++++++++++++++++
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 511812430dee..988bcc92a6ad 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -118,7 +118,7 @@ export default class Store extends EventEmitter {
       }
     }
 
-    return ((currentElement: any): Element);
+    return ((currentElement: any): Element) || null;
   }
 
   getElementIDAtIndex(index: number): number | null {
@@ -141,7 +141,7 @@ export default class Store extends EventEmitter {
   getIndexOfElementID(id: number): number | null {
     const element = this.getElementByID(id);
 
-    if (element === null) {
+    if (element === null || element.parentID === 0) {
       return null;
     }
 
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/SearchInput.js
index b5bc2c576769..103858138dc0 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/SearchInput.js
@@ -31,6 +31,16 @@ export default function SearchInput(props: Props) {
     setSearchText('');
   }, [setSearchText]);
 
+  const handleKeyDown = useCallback(event => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+      // It's convenient for up/down arrow keys to change the selected element when focused on the search input.
+      // But e.g. left/right arrow keys should move the text cursor.
+      // For now just block everything except for up/down arrow keys.
+      // TODO Revisit this approach.
+      event.stopPropagation();
+    }
+  }, []);
+
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
@@ -62,8 +72,9 @@ export default function SearchInput(props: Props) {
       <Icon className={styles.InputIcon} type="search" />
       <input
         className={styles.Input}
-        onKeyPress={handleInputKeyPress}
         onChange={handleTextChange}
+        onKeyDown={handleKeyDown}
+        onKeyPress={handleInputKeyPress}
         placeholder="Search (text or /regex/)"
         ref={inputRef}
         value={searchText}
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index 27d9a9245c1e..da321390de36 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -28,6 +28,7 @@ export default function Tree(props: Props) {
     ownerStack,
     selectedElementIndex,
     selectNextElementInTree,
+    selectParentElementInTree,
     selectPreviousElementInTree,
   } = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any> | null>(null);
@@ -51,6 +52,14 @@ export default function Tree(props: Props) {
           selectNextElementInTree();
           event.preventDefault();
           break;
+        case 'ArrowLeft':
+          console.log('LEFT');
+          selectParentElementInTree();
+          break;
+        case 'ArrowRight':
+          selectNextElementInTree();
+          event.preventDefault();
+          break;
         case 'ArrowUp':
           selectPreviousElementInTree();
           event.preventDefault();
@@ -63,7 +72,11 @@ export default function Tree(props: Props) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [selectNextElementInTree, selectPreviousElementInTree]);
+  }, [
+    selectNextElementInTree,
+    selectParentElementInTree,
+    selectPreviousElementInTree,
+  ]);
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/TreeContext.js
index 66b4b1b08874..715eee3cbfa9 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/TreeContext.js
@@ -41,6 +41,7 @@ type Context = {|
   selectElementAtIndex(index: number): void,
   selectElementByID(id: number | null): void,
   selectNextElementInTree(): void,
+  selectParentElementInTree(): void,
   selectPreviousElementInTree(): void,
 
   // Search
@@ -91,6 +92,7 @@ type Action = {|
     | 'SELECT_ELEMENT_AT_INDEX'
     | 'SELECT_ELEMENT_BY_ID'
     | 'SELECT_NEXT_ELEMENT_IN_TREE'
+    | 'SELECT_PARENT_ELEMENT_IN_TREE'
     | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
     | 'SELECT_OWNER'
     | 'SET_SEARCH_TEXT',
@@ -138,6 +140,17 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           selectedElementIndex++;
         }
         break;
+      case 'SELECT_PARENT_ELEMENT_IN_TREE':
+        if (selectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((selectedElementIndex: any): number)
+          );
+          if (selectedElement !== null && selectedElement.parentID !== null) {
+            selectedElementIndex =
+              store.getIndexOfElementID(selectedElement.parentID) || 0;
+          }
+        }
+        break;
       case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
         if (selectedElementIndex !== null && selectedElementIndex > 0) {
           selectedElementIndex--;
@@ -502,6 +515,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
         case 'SELECT_ELEMENT_AT_INDEX':
         case 'SELECT_ELEMENT_BY_ID':
         case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        case 'SELECT_PARENT_ELEMENT_IN_TREE':
         case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
         case 'SELECT_OWNER':
         case 'SET_SEARCH_TEXT':
@@ -572,6 +586,10 @@ function TreeContextController({ children, viewElementSource }: Props) {
     () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
     [dispatch]
   );
+  const selectParentElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),
+    [dispatch]
+  );
   const selectPreviousElementInTree = useCallback(
     () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
     [dispatch]
@@ -592,6 +610,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       selectElementByID,
       selectElementAtIndex,
       selectNextElementInTree,
+      selectParentElementInTree,
       selectPreviousElementInTree,
 
       // Search
@@ -619,6 +638,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       selectElementAtIndex,
       selectElementByID,
       selectNextElementInTree,
+      selectParentElementInTree,
       selectOwner,
       selectPreviousElementInTree,
       setSearchText,

From 13ca37384d99610ccbc8b1bf07fcafa97405d6d2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:54:53 -0800
Subject: [PATCH 106/814] Maybe fixed checkbox alignment issue Dan reported?

---
 src/devtools/views/EditableValue.css | 14 +++++++++-----
 src/devtools/views/EditableValue.js  | 21 ++++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/EditableValue.css
index 12dd20cc2578..3087b852617e 100644
--- a/src/devtools/views/EditableValue.css
+++ b/src/devtools/views/EditableValue.css
@@ -1,12 +1,16 @@
-.ValueInputLabel {
+.CheckboxLabel {
   flex: 1 1 100%;
   display: flex;
 }
-.ValueInputLabel:focus-within {
+.CheckboxLabel:focus-within {
   background-color: var(--color-button-background-focus);
 }
 
-.ValueInput {
+.Checkbox:focus {
+  outline: none;
+}
+
+.Input {
   flex: 1 1;
   background: none;
   border: 1px solid transparent;
@@ -15,11 +19,11 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
-
-.ValueInput:focus {
+.Input:focus {
   background-color: var(--color-button-background-focus);
   outline: none;
 }
+
 .ResetButton {
   flex: 0 0 auto;
   padding: 0 0.5rem;
diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/EditableValue.js
index b590419f5279..7659057d2bc8 100644
--- a/src/devtools/views/EditableValue.js
+++ b/src/devtools/views/EditableValue.js
@@ -88,17 +88,28 @@ export default function EditableValue({
 
   return (
     <Fragment>
-      <label className={styles.ValueInputLabel}>
+      {dataType === 'boolean' && (
+        <label className={styles.CheckboxLabel}>
+          <input
+            checked={inputValue}
+            className={styles.Checkbox}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            ref={inputRef}
+            type={type}
+          />
+        </label>
+      )}
+      {dataType !== 'boolean' && (
         <input
-          checked={dataType === 'boolean' ? inputValue : undefined}
-          className={styles.ValueInput}
+          className={styles.Input}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           ref={inputRef}
           type={type}
-          value={dataType === 'boolean' ? undefined : inputValue}
+          value={inputValue}
         />
-      </label>
+      )}
       {hasPendingChanges && dataType !== 'boolean' && (
         <Button
           className={styles.ResetButton}

From bcb6c2fd9fba652fefb3b529f602ba7e92dfae1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 08:52:46 -0800
Subject: [PATCH 107/814] Removed an unnecessary entry from add-root operation
 array

---
 src/backend/renderer.js | 3 +--
 src/devtools/store.js   | 9 ++++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f3674cd36982..f9d3af2bfc60 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -547,11 +547,10 @@ export function attach(
     const id = getFiberID(getPrimaryFiber(fiber));
 
     if (isRoot) {
-      const operation = new Uint32Array(4);
+      const operation = new Uint32Array(3);
       operation[0] = TREE_OPERATION_ADD;
       operation[1] = id;
       operation[2] = ElementTypeRoot;
-      operation[3] = 0; // Identifies this fiber as a root
       addOperation(operation);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 988bcc92a6ad..d59242b4d13d 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -6,6 +6,7 @@ import {
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
 } from '../constants';
+import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 
@@ -233,11 +234,10 @@ export default class Store extends EventEmitter {
         case TREE_OPERATION_ADD:
           id = ((operations[i + 1]: any): number);
           type = ((operations[i + 2]: any): ElementType);
-          parentID = ((operations[i + 3]: any): number);
 
-          i = i + 4;
+          i = i + 3;
 
-          if (parentID === 0) {
+          if (type === ElementTypeRoot) {
             debug('Add', `new root fiber ${id}`);
 
             if (this._idToElement.has(id)) {
@@ -263,6 +263,9 @@ export default class Store extends EventEmitter {
               haveRootsChanged = true;
             }
           } else {
+            parentID = ((operations[i]: any): number);
+            i++;
+
             ownerID = ((operations[i]: any): number);
             i++;
 

From d6a2ba261674f2d1103a6cfb7ca5c44aeac809c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 08:52:54 -0800
Subject: [PATCH 108/814] Added OVERVIEW doc

---
 OVERVIEW.md | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 OVERVIEW.md

diff --git a/OVERVIEW.md b/OVERVIEW.md
new file mode 100644
index 000000000000..0a5ec2f5a7cf
--- /dev/null
+++ b/OVERVIEW.md
@@ -0,0 +1,154 @@
+# Overview
+
+## Serializing the tree
+
+Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
+
+The payload for each message is a typed array. The first entry is a number identifying which renderer the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.
+
+We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
+
+### Adding a root node
+
+Adding a root to the tree requires sending 3 numbers:
+
+1. add operation constant (`1`)
+1. fiber id
+1. element type constant (`8 === ElementTypeRoot`)
+
+For example, adding a root fiber with an id of 1:
+```js
+[
+  1, // add operation
+  1, // fiber id
+  8, // ElementTypeRoot
+]
+```
+
+### Adding a leaf node
+
+Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):
+
+1. add operation constant (`1`)
+1. fiber id
+1. element type constant (e.g. `1 === ElementTypeClass`)
+1. parent fiber id
+1. owner fiber id
+1. UTF encoded display name size
+   * (followed by this number of encoded values)
+1. UTF encoded key size
+   * (followed by this number of encoded values)
+
+For example, adding a function component `<Foo>` with an id 2:
+```js
+[
+  1,   // add operation
+  2,   // fiber id
+  2,   // ElementTypeFunction
+  1,   // parent id
+  0,   // owner id
+  3,   // encoded display name size
+  70,  // "F"
+  111, // "o"
+  111, // "o"
+  0,   // encoded key (null)
+]
+```
+
+### Removing a node
+
+Removing a fiber from the tree (a root or a leaf) only requires sending 2 numbers:
+
+1. remove operation constant (`2`)
+1. fiber id
+
+For example, removing a root fiber with an id of 1:
+```js
+[
+  2, // remove operation
+  1, // fiber id
+]
+```
+
+### Re-ordering children
+
+1. re-order children constant (`3`)
+1. fiber id
+1. number of children
+   * (followed by an ordered list of child fiber ids)
+
+For example:
+```js
+[
+  3,  // re-order operation
+  15, // fiber id
+  2,  // number of children
+  35, // first chlid id
+  21, // second chlid id
+]
+```
+
+## Reconstructing the tree
+
+The frontend stores its information about the tree in a map of id to objects with the following keys:
+
+* id: `number`
+* parentID: `number`
+* children: `Array<number>`
+* type: `number` (constant)
+* displayName: `string | null`
+* key: `number | string | null`
+* ownerID: `number`
+* depth: `number` <sup>1</sup>
+* weight: `number` <sup>2</sup>
+
+<sup>1</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
+
+The `depth` value determines how much padding/indentation to use for the element when rendering it in the Elements panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
+
+### Finding the element at index N
+
+The tree data structure lets us impose an order on elements and "quickly" find the Nth one using the `weight` attribute.
+
+First we find which root contains the index:
+```js
+let rootID;
+let root;
+let rootWeight = 0;
+for (let i = 0; i < this._roots.length; i++) {
+  rootID = this._roots[i];
+  root = this._idToElement.get(rootID);
+  if (root.children.length === 0) {
+    continue;
+  } else if (rootWeight + root.weight > index) {
+    break;
+  } else {
+    rootWeight += root.weight;
+  }
+}
+```
+
+We skip the root itself because don't display them in the tree:
+```js
+const firstChildID = root.children[0];
+```
+
+Then we traverse the tree to find the element:
+```js
+let currentElement = this._idToElement.get(firstChildID);
+let currentWeight = rootWeight;
+while (index !== currentWeight) {
+  for (let i = 0; i < currentElement.children.length; i++) {
+    const childID = currentElement.children[i];
+    const child = this._idToElement.get(childID);
+    const { weight } = child;
+    if (index <= currentWeight + weight) {
+      currentWeight++;
+      currentElement = child;
+      break;
+    } else {
+      currentWeight += weight;
+    }
+  }
+}
+```
\ No newline at end of file

From d34a32d3897e85d464fab0262c42b71a695eb054 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 09:44:04 -0800
Subject: [PATCH 109/814] Disable text selection in tree

---
 src/devtools/views/Element.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index a13366ca50f7..44ec9d3815e1 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -7,6 +7,8 @@
   line-height: var(--line-height-data);
   display: flex;
   align-items: center;
+  cursor: default;
+  user-select: none;
 }
 .Element:hover {
   background-color: var(--color-tree-node-hover);

From bffa72c6013383061084760f6109d16802e2ae73 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 10:46:17 -0800
Subject: [PATCH 110/814] Add placeholders to clarify between empty string,
 null, and undefined

---
 .../dev/app/InspectableElements/Contexts.js   |  6 +++++
 .../app/InspectableElements/NestedProps.js    | 24 +++++++++----------
 src/devtools/views/EditableValue.js           | 10 ++++++++
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/shells/dev/app/InspectableElements/Contexts.js b/shells/dev/app/InspectableElements/Contexts.js
index 909ae8224231..65e35d46068e 100644
--- a/shells/dev/app/InspectableElements/Contexts.js
+++ b/shells/dev/app/InspectableElements/Contexts.js
@@ -13,6 +13,8 @@ const contextData = {
   object: { outer: { inner: {} } },
   string: 'abc',
   symbol: Symbol.for('symbol'),
+  null: null,
+  undefined: undefined,
 };
 
 class LegacyContextProvider extends Component<any> {
@@ -24,6 +26,8 @@ class LegacyContextProvider extends Component<any> {
     object: PropTypes.object,
     string: PropTypes.string,
     symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
   };
 
   getChildContext() {
@@ -44,6 +48,8 @@ class LegacyContextConsumer extends Component<any> {
     object: PropTypes.object,
     string: PropTypes.string,
     symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
   };
 
   render() {
diff --git a/shells/dev/app/InspectableElements/NestedProps.js b/shells/dev/app/InspectableElements/NestedProps.js
index 7b2c899df1b6..068b309a89f7 100644
--- a/shells/dev/app/InspectableElements/NestedProps.js
+++ b/shells/dev/app/InspectableElements/NestedProps.js
@@ -2,26 +2,26 @@
 
 import React from 'react';
 
+const object = {
+  string: 'abc',
+  longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
+  emptyString: '',
+  number: 123,
+  boolean: true,
+  undefined: undefined,
+  null: null,
+};
+
 export default function ObjectProps() {
   return (
     <ChildComponent
       object={{
         outer: {
-          inner: {
-            string: 'abc',
-            number: 123,
-            boolean: true,
-          },
+          inner: object,
         },
       }}
       array={['first', 'second', 'third']}
-      objectInArray={[
-        {
-          string: 'abc',
-          number: 123,
-          boolean: true,
-        },
-      ]}
+      objectInArray={[object]}
       arrayInObject={{ array: ['first', 'second', 'third'] }}
     />
   );
diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/EditableValue.js
index 7659057d2bc8..d29e33678133 100644
--- a/src/devtools/views/EditableValue.js
+++ b/src/devtools/views/EditableValue.js
@@ -86,6 +86,15 @@ export default function EditableValue({
     inputValue = editableValue == null ? '' : editableValue;
   }
 
+  let placeholder = '';
+  if (value === null) {
+    placeholder = '(null)';
+  } else if (value === undefined) {
+    placeholder = '(undefined)';
+  } else if (dataType === 'string') {
+    placeholder = '(string)';
+  }
+
   return (
     <Fragment>
       {dataType === 'boolean' && (
@@ -105,6 +114,7 @@ export default function EditableValue({
           className={styles.Input}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
+          placeholder={placeholder}
           ref={inputRef}
           type={type}
           value={inputValue}

From c7f85572028bc09505a51b1283da2fc3a024de8b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 12:56:49 -0800
Subject: [PATCH 111/814] Improve selected node highlighting by using minWidth
 instead of width

---
 src/devtools/views/Element.css | 1 -
 src/devtools/views/Element.js  | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 44ec9d3815e1..6227ee6fef6b 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -1,6 +1,5 @@
 .Element,
 .SelectedElement {
-  width: 100%;
   border-radius: 0.25em;
   position: relative;
   white-space: nowrap;
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index c0cb4ab34a7d..ca26ebf08d24 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -89,6 +89,8 @@ export default function ElementView({ index, style }: Props) {
       style={{
         ...style, // "style" comes from react-window
         paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
+        width: undefined,
+        minWidth: '100%',
       }}
     >
       <span className={styles.Component} ref={ref}>

From 7da5f83a280803f2fa7af5d3533a988bd6a83557 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 13:22:27 -0800
Subject: [PATCH 112/814] Updated to account for
 facebook/react/pull/14906/commits/cdd9ba4

---
 src/backend/ReactDebugHooks.js  | 25 ++++++++++++++++++-------
 src/backend/agent.js            |  6 +++---
 src/backend/types.js            |  4 ++--
 src/devtools/views/HooksTree.js |  6 +++---
 src/devtools/views/utils.js     |  4 ++--
 5 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 5c3f54018067..7dc1e1c2f5f0 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -225,8 +225,8 @@ type ReactCurrentDispatcher = {
 };
 
 type HooksNode = {
-  index: number,
-  isEditable: boolean,
+  id: number | null,
+  isStateEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -368,7 +368,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
   const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
-  let index = 0;
+  let nativeHookID = 0;
   const stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
     const hook = readHookLog[i];
@@ -402,8 +402,8 @@ function buildTree(rootStack, readHookLog): HooksTree {
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
-          index: -1,
-          isEditable: false,
+          id: null,
+          isStateEditable: false,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -412,9 +412,20 @@ function buildTree(rootStack, readHookLog): HooksTree {
       prevStack = stack;
     }
     const { primitive } = hook;
+
+    // For now, the "id" of stateful hooks is just the stateful hook index.
+    // Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).
+    const id =
+      primitive === 'Context' || primitive === 'DebugValue'
+        ? null
+        : nativeHookID++;
+
+    // For the time being, only State and Reducer hooks support runtime overrides.
+    const isStateEditable = primitive === 'Reducer' || primitive === 'State';
+
     levelChildren.push({
-      index: primitive === 'DebugValue' ? -1 : index++,
-      isEditable: primitive === 'Reducer' || primitive === 'State',
+      id,
+      isStateEditable,
       name: primitive,
       value: hook.value,
       subHooks: [],
diff --git a/src/backend/agent.js b/src/backend/agent.js
index a4716ecc71e5..8022d724cca1 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -25,7 +25,7 @@ type InspectSelectParams = {|
 
 type OverrideHookParams = {|
   id: number,
-  index: number,
+  hookID: number,
   path: Array<string | number>,
   rendererID: number,
   value: any,
@@ -134,7 +134,7 @@ export default class Agent extends EventEmitter {
 
   overrideHookState = ({
     id,
-    index,
+    hookID,
     path,
     rendererID,
     value,
@@ -143,7 +143,7 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      renderer.setInHook(id, index, path, value);
+      renderer.setInHook(id, hookID, path, value);
     }
   };
 
diff --git a/src/backend/types.js b/src/backend/types.js
index 445ba7b07a03..d060e8a972b8 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -100,8 +100,8 @@ export type DevToolsHook = {
 };
 
 export type HooksNode = {
-  index: number,
-  isEditable: boolean,
+  id: number,
+  isStateEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/HooksTree.js
index 4686540caa12..b35260f75365 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/HooksTree.js
@@ -70,7 +70,7 @@ type HookViewProps = {|
 |};
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
-  const { name, index, isEditable, subHooks, value } = hook;
+  const { name, id: hookID, isStateEditable, subHooks, value } = hook;
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -141,12 +141,12 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   } else {
     let overrideValueFn = null;
     // TODO Maybe read editable value from debug hook?
-    if (canEditHooks && isEditable) {
+    if (canEditHooks && isStateEditable) {
       overrideValueFn = (path: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
         bridge.send('overrideHookState', {
           id,
-          index,
+          hookID,
           path,
           rendererID,
           value,
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 8d18ece1abc3..03bb8e3cd17d 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -70,8 +70,8 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
     const current = queue.pop();
 
     // These aren't meaningful
-    delete current.isEditable;
-    delete current.index;
+    delete current.id;
+    delete current.isStateEditable;
 
     if (current.subHooks.length > 0) {
       queue.push(...current.subHooks);

From c249e31932668fbbf03905980c6a08b39eaea6c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 13:26:39 -0800
Subject: [PATCH 113/814] Fixed docs typo: chlid -> child

---
 OVERVIEW.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 0a5ec2f5a7cf..759490848655 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -83,8 +83,8 @@ For example:
   3,  // re-order operation
   15, // fiber id
   2,  // number of children
-  35, // first chlid id
-  21, // second chlid id
+  35, // first child id
+  21, // second child id
 ]
 ```
 

From d70dbfdb658e9f77fafc78aead05e6053840f1c3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 13:46:36 -0800
Subject: [PATCH 114/814] Added intro to OVERVIEW

---
 OVERVIEW.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 759490848655..aa60a29a1215 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -1,5 +1,13 @@
 # Overview
 
+The React DevTools extension consists of multiple pieces:
+* The "frontend" portion is the extension you see (the Elements tree, the Profiler, etc.).
+* The "backend" portion is invisible. It runs in the same context as React itself. When React commits changes to e.g. the DOM, the backend is responsible for notifying the frontend by sending a message through the "bridge".
+
+One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic that was sent. Each time React committed an update, the backend sent every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, the backend could only the minimum amount required to render the Elements tree– and the frontend could request more information (e.g. an element's props) on demand, only as needed.
+
+The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [bvaughn/react-window](https://github.com/bvaughn/react-window)).
+
 ## Serializing the tree
 
 Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)

From 90001e892d3da2986447e7deb348c1014a961bf5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 13:55:49 -0800
Subject: [PATCH 115/814] Udpated param name in injected renderer
 overrideHookState type

---
 src/backend/types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/types.js b/src/backend/types.js
index d060e8a972b8..d736d7cd5956 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -37,7 +37,7 @@ export type ReactRenderer = {
   // 16.9+
   overrideHookState?: ?(
     fiber: Object,
-    index: number,
+    id: number,
     path: Array<string | number>,
     value: any
   ) => void,

From 0401f34f5524d4962c267938cbf532062e020e68 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 28 Feb 2019 14:50:27 -0800
Subject: [PATCH 116/814] Removed unnecessary relative position style from
 Element CSS

---
 src/devtools/views/Element.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 6227ee6fef6b..4dafb11f5372 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -1,7 +1,6 @@
 .Element,
 .SelectedElement {
   border-radius: 0.25em;
-  position: relative;
   white-space: nowrap;
   line-height: var(--line-height-data);
   display: flex;

From 8aa6f96279700ce75a1980f4cad97bafdc36eaa5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Mar 2019 08:28:16 -0800
Subject: [PATCH 117/814] Fixed selecterd element background color being
 cut-off when tree scrolls

This required a bit of unusual CSS but seems to work well for Firefox and Chrome. We can remove it and revisit other approaches (like PR#24) in the future if needed.
---
 src/devtools/views/Element.js |  9 +++++++++
 src/devtools/views/Tree.js    | 17 +++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index ca26ebf08d24..c7976415564e 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -88,9 +88,18 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
+
+        // Left padding presents the appearance of a nested tree structure.
         paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
+
+        // These style overrides enable the background color to fill the full visible width,
+        // when combined with the CSS tweaks in Tree.
+        // A lot of options were considered; this seemed the one that requires the least code.
+        // See https://github.com/bvaughn/react-devtools-experimental/issues/9
         width: undefined,
         minWidth: '100%',
+        position: 'relative',
+        marginBottom: `-${style.height}px`,
       }}
     >
       <span className={styles.Component} ref={ref}>
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Tree.js
index da321390de36..d2972e70a695 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Tree.js
@@ -101,6 +101,7 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
+              innerElementType={innerElementType}
               itemCount={numElements}
               itemData={itemData}
               itemSize={lineHeight}
@@ -115,3 +116,19 @@ export default function Tree(props: Props) {
     </div>
   );
 }
+
+// This style override enables the background color to fill the full visible width,
+// when combined with the CSS tweaks in Element.
+// A lot of options were considered; this seemed the one that requires the least code.
+// See https://github.com/bvaughn/react-devtools-experimental/issues/9
+const innerElementType = ({ style, ...rest }) => (
+  <div
+    style={{
+      ...style,
+      display: 'inline-block',
+      minWidth: '100%',
+      width: undefined,
+    }}
+    {...rest}
+  />
+);

From 515b60cc5ed259db6e93362781e016b9d8124792 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Mar 2019 08:38:05 -0800
Subject: [PATCH 118/814] Fixed a typo in OVERVIEW

---
 OVERVIEW.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index aa60a29a1215..3c1c8eb8bb22 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -1,12 +1,12 @@
 # Overview
 
 The React DevTools extension consists of multiple pieces:
-* The "frontend" portion is the extension you see (the Elements tree, the Profiler, etc.).
-* The "backend" portion is invisible. It runs in the same context as React itself. When React commits changes to e.g. the DOM, the backend is responsible for notifying the frontend by sending a message through the "bridge".
+* The **frontend** portion is the extension you see (the Elements tree, the Profiler, etc.).
+* The **backend** portion is invisible. It runs in the same context as React itself. When React commits changes to e.g. the DOM, the backend is responsible for notifying the frontend by sending a message through the **bridge** (an abstraction around e.g. `postMessage`).
 
-One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic that was sent. Each time React committed an update, the backend sent every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, the backend could only the minimum amount required to render the Elements tree– and the frontend could request more information (e.g. an element's props) on demand, only as needed.
+One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic. Each time React commits an update, the backend sends every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, **the backend should only send the minimum amount required to render the Elements tree**. The frontend can request more information (e.g. an element's props) on demand, only as needed.
 
-The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [bvaughn/react-window](https://github.com/bvaughn/react-window)).
+The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
 
 ## Serializing the tree
 

From f94401c10e6a5ec1aa52f70cb591bec66bdec3fc Mon Sep 17 00:00:00 2001
From: Gaurav Gupta <gaurav5430@gmail.com>
Date: Sun, 3 Mar 2019 18:29:58 +0530
Subject: [PATCH 119/814] Update OVERVIEW.md

Fixed the superscript reference
---
 OVERVIEW.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index aa60a29a1215..5831bbf7dff0 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -110,9 +110,9 @@ The frontend stores its information about the tree in a map of id to objects wit
 * depth: `number` <sup>1</sup>
 * weight: `number` <sup>2</sup>
 
-<sup>1</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
+<sup>1</sup> The `depth` value determines how much padding/indentation to use for the element when rendering it in the Elements panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
 
-The `depth` value determines how much padding/indentation to use for the element when rendering it in the Elements panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
+<sup>2</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
 
 ### Finding the element at index N
 
@@ -159,4 +159,4 @@ while (index !== currentWeight) {
     }
   }
 }
-```
\ No newline at end of file
+```

From c18449326dd7a790d9beabf6292d78b01e7a712e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Mar 2019 13:17:20 -0800
Subject: [PATCH 120/814] Disabled transferrables for now (to avoid a Chrome
 runtime error)

---
 src/backend/agent.js | 22 ++++++++++++++++++++--
 src/bridge.js        | 12 ++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 8022d724cca1..6e472e7d3f6d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -202,9 +202,27 @@ export default class Agent extends EventEmitter {
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
 
-    // TODO The chrome.runtime does not currently support transferables; it forces JSON serialization.
+    // TODO:
+    // The chrome.runtime does not currently support transferables; it forces JSON serialization.
+    // See bug https://bugs.chromium.org/p/chromium/issues/detail?id=927134
+    //
+    // Regarding transferables, the postMessage doc states:
+    // If the ownership of an object is transferred, it becomes unusable (neutered)
+    // in the context it was sent from and becomes available only to the worker it was sent to.
+    //
+    // Even though Chrome is eventually JSON serializing the array buffer,
+    // using the transferable approach also sometimes causes it to throw:
+    //   DOMException: Failed to execute 'postMessage' on 'Window': ArrayBuffer at index 0 is already neutered.
+    //
+    // See bug https://github.com/bvaughn/react-devtools-experimental/issues/25
+    //
     // The Store has a fallback in place that parses the message as JSON if the type isn't an array.
-    this._bridge.send('operations', operations, [operations.buffer]);
+    // For now the simplest fix seems to be to not transfer the array.
+    // This will negatively impact performance on Firefox so it's unfortunate,
+    // but until we're able to fix the Chrome error mentioned above, it seems necessary.
+    //
+    // this._bridge.send('operations', operations, [operations.buffer]);
+    this._bridge.send('operations', operations);
   };
 
   _onClick = (event: MouseEvent) => {
diff --git a/src/bridge.js b/src/bridge.js
index 2fbf43aaf1b7..454c4b9cde07 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -23,7 +23,7 @@ export default class Bridge extends EventEmitter {
     this._wall = wall;
 
     wall.listen((message: Message) => {
-      this._emit(message);
+      this.emit(message.event, message.payload);
     });
   }
 
@@ -40,12 +40,12 @@ export default class Bridge extends EventEmitter {
       if (now - time > BATCH_DURATION) {
         this._flush();
       } else {
-        this._timeoutID = setTimeout(() => this._flush(), BATCH_DURATION);
+        this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
       }
     }
   }
 
-  _flush() {
+  _flush = () => {
     while (this._messageQueue.length) {
       this._wall.send.apply(this._wall, this._messageQueue.splice(0, 3));
     }
@@ -57,9 +57,5 @@ export default class Bridge extends EventEmitter {
 
     this._messageQueue = [];
     this._time = null;
-  }
-
-  _emit(message: Message) {
-    this.emit(message.event, message.payload);
-  }
+  };
 }

From e9028d1d35718d4565ff76fda6214b1a4c8e860f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Mar 2019 14:01:52 -0800
Subject: [PATCH 121/814] Re-organized views slightly in preparation for
 Profiler UI

---
 src/devtools/views/DevTools.js                         | 10 +++++-----
 src/devtools/views/{ => Elements}/EditableValue.css    |  0
 src/devtools/views/{ => Elements}/EditableValue.js     |  4 ++--
 src/devtools/views/{ => Elements}/Element.css          |  0
 src/devtools/views/{ => Elements}/Element.js           |  4 ++--
 src/devtools/views/{ => Elements}/Elements.css         |  0
 src/devtools/views/{ => Elements}/Elements.js          |  0
 src/devtools/views/{ => Elements}/HooksTree.css        |  0
 src/devtools/views/{ => Elements}/HooksTree.js         |  8 ++++----
 .../views/{ => Elements}/InspectHostNodesToggle.js     |  6 +++---
 .../views/{ => Elements}/InspectedElementTree.css      |  0
 .../views/{ => Elements}/InspectedElementTree.js       |  6 +++---
 src/devtools/views/{ => Elements}/KeyValue.css         |  0
 src/devtools/views/{ => Elements}/KeyValue.js          |  4 ++--
 src/devtools/views/{ => Elements}/OwnersStack.css      |  0
 src/devtools/views/{ => Elements}/OwnersStack.js       |  8 ++++----
 src/devtools/views/{ => Elements}/SearchInput.css      |  0
 src/devtools/views/{ => Elements}/SearchInput.js       |  6 +++---
 src/devtools/views/{ => Elements}/SelectedElement.css  |  0
 src/devtools/views/{ => Elements}/SelectedElement.js   | 10 +++++-----
 src/devtools/views/{ => Elements}/Tree.css             |  0
 src/devtools/views/{ => Elements}/Tree.js              |  2 +-
 src/devtools/views/{ => Elements}/TreeContext.js       |  6 +++---
 src/devtools/views/{ => Profiler}/Profiler.css         |  0
 src/devtools/views/{ => Profiler}/Profiler.js          |  0
 src/devtools/views/{ => Settings}/Settings.css         |  0
 src/devtools/views/{ => Settings}/Settings.js          |  0
 src/devtools/views/{ => Settings}/SettingsContext.js   |  4 ++--
 28 files changed, 39 insertions(+), 39 deletions(-)
 rename src/devtools/views/{ => Elements}/EditableValue.css (100%)
 rename src/devtools/views/{ => Elements}/EditableValue.js (97%)
 rename src/devtools/views/{ => Elements}/Element.css (100%)
 rename src/devtools/views/{ => Elements}/Element.js (98%)
 rename src/devtools/views/{ => Elements}/Elements.css (100%)
 rename src/devtools/views/{ => Elements}/Elements.js (100%)
 rename src/devtools/views/{ => Elements}/HooksTree.css (100%)
 rename src/devtools/views/{ => Elements}/HooksTree.js (96%)
 rename src/devtools/views/{ => Elements}/InspectHostNodesToggle.js (89%)
 rename src/devtools/views/{ => Elements}/InspectedElementTree.css (100%)
 rename src/devtools/views/{ => Elements}/InspectedElementTree.js (92%)
 rename src/devtools/views/{ => Elements}/KeyValue.css (100%)
 rename src/devtools/views/{ => Elements}/KeyValue.js (97%)
 rename src/devtools/views/{ => Elements}/OwnersStack.css (100%)
 rename src/devtools/views/{ => Elements}/OwnersStack.js (89%)
 rename src/devtools/views/{ => Elements}/SearchInput.css (100%)
 rename src/devtools/views/{ => Elements}/SearchInput.js (96%)
 rename src/devtools/views/{ => Elements}/SelectedElement.css (100%)
 rename src/devtools/views/{ => Elements}/SelectedElement.js (96%)
 rename src/devtools/views/{ => Elements}/Tree.css (100%)
 rename src/devtools/views/{ => Elements}/Tree.js (98%)
 rename src/devtools/views/{ => Elements}/TreeContext.js (99%)
 rename src/devtools/views/{ => Profiler}/Profiler.css (100%)
 rename src/devtools/views/{ => Profiler}/Profiler.js (100%)
 rename src/devtools/views/{ => Settings}/Settings.css (100%)
 rename src/devtools/views/{ => Settings}/Settings.js (100%)
 rename src/devtools/views/{ => Settings}/SettingsContext.js (97%)

diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 773794b88a55..4ed6ec74cf36 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -3,12 +3,12 @@
 import React, { useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
-import Elements from './Elements';
-import Profiler from './Profiler';
-import Settings from './Settings';
+import Elements from './Elements/Elements';
+import Profiler from './Profiler/Profiler';
+import Settings from './Settings/Settings';
 import TabBar from './TabBar';
-import { SettingsContextController } from './SettingsContext';
-import { TreeContextController } from './TreeContext';
+import { SettingsContextController } from './Settings/SettingsContext';
+import { TreeContextController } from './Elements/TreeContext';
 
 import styles from './DevTools.css';
 
diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/Elements/EditableValue.css
similarity index 100%
rename from src/devtools/views/EditableValue.css
rename to src/devtools/views/Elements/EditableValue.css
diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/Elements/EditableValue.js
similarity index 97%
rename from src/devtools/views/EditableValue.js
rename to src/devtools/views/Elements/EditableValue.js
index d29e33678133..23e35c967929 100644
--- a/src/devtools/views/EditableValue.js
+++ b/src/devtools/views/Elements/EditableValue.js
@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Fragment, useCallback, useRef, useState } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import styles from './EditableValue.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
diff --git a/src/devtools/views/Element.css b/src/devtools/views/Elements/Element.css
similarity index 100%
rename from src/devtools/views/Element.css
rename to src/devtools/views/Elements/Element.css
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Elements/Element.js
similarity index 98%
rename from src/devtools/views/Element.js
rename to src/devtools/views/Elements/Element.js
index c7976415564e..610360586f51 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Elements/Element.js
@@ -9,10 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
-import { createRegExp } from './utils';
+import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 
-import type { Element } from '../types';
+import type { Element } from '../../types';
 
 import styles from './Element.css';
 
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements/Elements.css
similarity index 100%
rename from src/devtools/views/Elements.css
rename to src/devtools/views/Elements/Elements.css
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements/Elements.js
similarity index 100%
rename from src/devtools/views/Elements.js
rename to src/devtools/views/Elements/Elements.js
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/Elements/HooksTree.css
similarity index 100%
rename from src/devtools/views/HooksTree.css
rename to src/devtools/views/Elements/HooksTree.css
diff --git a/src/devtools/views/HooksTree.js b/src/devtools/views/Elements/HooksTree.js
similarity index 96%
rename from src/devtools/views/HooksTree.js
rename to src/devtools/views/Elements/HooksTree.js
index b35260f75365..65cfb9cc22d8 100644
--- a/src/devtools/views/HooksTree.js
+++ b/src/devtools/views/Elements/HooksTree.js
@@ -2,12 +2,12 @@
 
 import { copy } from 'clipboard-js';
 import React, { useCallback, useContext } from 'react';
-import { BridgeContext, StoreContext } from './context';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import EditableValue from './EditableValue';
 import KeyValue from './KeyValue';
-import { serializeHooksForCopy } from './utils';
+import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
diff --git a/src/devtools/views/InspectHostNodesToggle.js b/src/devtools/views/Elements/InspectHostNodesToggle.js
similarity index 89%
rename from src/devtools/views/InspectHostNodesToggle.js
rename to src/devtools/views/Elements/InspectHostNodesToggle.js
index 2546059cd904..a20107fcb7dd 100644
--- a/src/devtools/views/InspectHostNodesToggle.js
+++ b/src/devtools/views/Elements/InspectHostNodesToggle.js
@@ -1,9 +1,9 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { BridgeContext } from './context';
-import Toggle from './Toggle';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext } from '../context';
+import Toggle from '../Toggle';
+import ButtonIcon from '../ButtonIcon';
 
 export default function InspectHostNodesToggle() {
   const [isInspecting, setIsInspecting] = useState(false);
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/Elements/InspectedElementTree.css
similarity index 100%
rename from src/devtools/views/InspectedElementTree.css
rename to src/devtools/views/Elements/InspectedElementTree.css
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/Elements/InspectedElementTree.js
similarity index 92%
rename from src/devtools/views/InspectedElementTree.js
rename to src/devtools/views/Elements/InspectedElementTree.js
index 5b14f48fb6d5..727760cd6b4d 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/Elements/InspectedElementTree.js
@@ -2,10 +2,10 @@
 
 import { copy } from 'clipboard-js';
 import React, { useCallback } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
-import { serializeDataForCopy } from './utils';
+import { serializeDataForCopy } from '../utils';
 import styles from './InspectedElementTree.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
diff --git a/src/devtools/views/KeyValue.css b/src/devtools/views/Elements/KeyValue.css
similarity index 100%
rename from src/devtools/views/KeyValue.css
rename to src/devtools/views/Elements/KeyValue.css
diff --git a/src/devtools/views/KeyValue.js b/src/devtools/views/Elements/KeyValue.js
similarity index 97%
rename from src/devtools/views/KeyValue.js
rename to src/devtools/views/Elements/KeyValue.js
index f2186ea16d1b..ead0293b8fd8 100644
--- a/src/devtools/views/KeyValue.js
+++ b/src/devtools/views/Elements/KeyValue.js
@@ -2,8 +2,8 @@
 
 import React from 'react';
 import EditableValue from './EditableValue';
-import { getMetaValueLabel } from './utils';
-import { meta } from '../../hydration';
+import { getMetaValueLabel } from '../utils';
+import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
diff --git a/src/devtools/views/OwnersStack.css b/src/devtools/views/Elements/OwnersStack.css
similarity index 100%
rename from src/devtools/views/OwnersStack.css
rename to src/devtools/views/Elements/OwnersStack.css
diff --git a/src/devtools/views/OwnersStack.js b/src/devtools/views/Elements/OwnersStack.js
similarity index 89%
rename from src/devtools/views/OwnersStack.js
rename to src/devtools/views/Elements/OwnersStack.js
index e4f0eff30a24..716f55a05d16 100644
--- a/src/devtools/views/OwnersStack.js
+++ b/src/devtools/views/Elements/OwnersStack.js
@@ -1,12 +1,12 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
-import { StoreContext } from './context';
+import { StoreContext } from '../context';
 
-import type { Element } from '../types';
+import type { Element } from '../../types';
 
 import styles from './OwnersStack.css';
 
diff --git a/src/devtools/views/SearchInput.css b/src/devtools/views/Elements/SearchInput.css
similarity index 100%
rename from src/devtools/views/SearchInput.css
rename to src/devtools/views/Elements/SearchInput.css
diff --git a/src/devtools/views/SearchInput.js b/src/devtools/views/Elements/SearchInput.js
similarity index 96%
rename from src/devtools/views/SearchInput.js
rename to src/devtools/views/Elements/SearchInput.js
index 103858138dc0..14d86e526195 100644
--- a/src/devtools/views/SearchInput.js
+++ b/src/devtools/views/Elements/SearchInput.js
@@ -2,9 +2,9 @@
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { TreeContext } from './TreeContext';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
-import Icon from './Icon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
 
 import styles from './SearchInput.css';
 
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/Elements/SelectedElement.css
similarity index 100%
rename from src/devtools/views/SelectedElement.css
rename to src/devtools/views/Elements/SelectedElement.css
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/Elements/SelectedElement.js
similarity index 96%
rename from src/devtools/views/SelectedElement.js
rename to src/devtools/views/Elements/SelectedElement.js
index ce3023db2972..6b6074a81d6c 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/Elements/SelectedElement.js
@@ -8,16 +8,16 @@ import React, {
   useState,
 } from 'react';
 import { TreeContext } from './TreeContext';
-import { BridgeContext, StoreContext } from './context';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
-import { ElementTypeClass, ElementTypeFunction } from '../types';
+import { ElementTypeClass, ElementTypeFunction } from '../../types';
 
-import type { InspectedElement } from '../types';
+import type { InspectedElement } from '../../types';
 import type { DehydratedData, Element } from 'src/devtools/types';
 
 export type Props = {||};
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Elements/Tree.css
similarity index 100%
rename from src/devtools/views/Tree.css
rename to src/devtools/views/Elements/Tree.css
diff --git a/src/devtools/views/Tree.js b/src/devtools/views/Elements/Tree.js
similarity index 98%
rename from src/devtools/views/Tree.js
rename to src/devtools/views/Elements/Tree.js
index d2972e70a695..ae6c2b7a4a12 100644
--- a/src/devtools/views/Tree.js
+++ b/src/devtools/views/Elements/Tree.js
@@ -10,7 +10,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
-import { SettingsContext } from './SettingsContext';
+import { SettingsContext } from '../Settings/SettingsContext';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
diff --git a/src/devtools/views/TreeContext.js b/src/devtools/views/Elements/TreeContext.js
similarity index 99%
rename from src/devtools/views/TreeContext.js
rename to src/devtools/views/Elements/TreeContext.js
index 715eee3cbfa9..616f6409cfff 100644
--- a/src/devtools/views/TreeContext.js
+++ b/src/devtools/views/Elements/TreeContext.js
@@ -25,9 +25,9 @@ import React, {
   useMemo,
   useReducer,
 } from 'react';
-import { createRegExp } from './utils';
-import { BridgeContext, StoreContext } from './context';
-import Store from '../store';
+import { createRegExp } from '../utils';
+import { BridgeContext, StoreContext } from '../context';
+import Store from '../../store';
 
 import type { Element } from 'src/devtools/types';
 
diff --git a/src/devtools/views/Profiler.css b/src/devtools/views/Profiler/Profiler.css
similarity index 100%
rename from src/devtools/views/Profiler.css
rename to src/devtools/views/Profiler/Profiler.css
diff --git a/src/devtools/views/Profiler.js b/src/devtools/views/Profiler/Profiler.js
similarity index 100%
rename from src/devtools/views/Profiler.js
rename to src/devtools/views/Profiler/Profiler.js
diff --git a/src/devtools/views/Settings.css b/src/devtools/views/Settings/Settings.css
similarity index 100%
rename from src/devtools/views/Settings.css
rename to src/devtools/views/Settings/Settings.css
diff --git a/src/devtools/views/Settings.js b/src/devtools/views/Settings/Settings.js
similarity index 100%
rename from src/devtools/views/Settings.js
rename to src/devtools/views/Settings/Settings.js
diff --git a/src/devtools/views/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
similarity index 97%
rename from src/devtools/views/SettingsContext.js
rename to src/devtools/views/Settings/SettingsContext.js
index 7898a685685e..32f1df193004 100644
--- a/src/devtools/views/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -1,9 +1,9 @@
 // @flow
 
 import React, { createContext, useLayoutEffect, useMemo } from 'react';
-import { useLocalStorage } from './hooks';
+import { useLocalStorage } from '../hooks';
 
-import type { BrowserTheme } from './DevTools';
+import type { BrowserTheme } from '../DevTools';
 
 export type DisplayDensity = 'compact' | 'comfortable';
 export type Theme = 'auto' | 'light' | 'dark';

From 181e8aff3004be09d66ca86bb486eb0fad031181 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Mar 2019 18:12:11 -0800
Subject: [PATCH 122/814] Added planned Profiler architecture to OVERVIEW doc
 to share with others

---
 OVERVIEW.md | 223 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 217 insertions(+), 6 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 72b23e7f839a..9da34819615a 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -8,7 +8,9 @@ One of the largest performance bottlenecks of the old React DevTools was the amo
 
 The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
 
-## Serializing the tree
+## Elements panel
+
+### Serializing the tree
 
 Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
 
@@ -16,7 +18,7 @@ The payload for each message is a typed array. The first entry is a number ident
 
 We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
 
-### Adding a root node
+#### Adding a root node
 
 Adding a root to the tree requires sending 3 numbers:
 
@@ -33,7 +35,7 @@ For example, adding a root fiber with an id of 1:
 ]
 ```
 
-### Adding a leaf node
+#### Adding a leaf node
 
 Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):
 
@@ -63,7 +65,7 @@ For example, adding a function component `<Foo>` with an id 2:
 ]
 ```
 
-### Removing a node
+#### Removing a node
 
 Removing a fiber from the tree (a root or a leaf) only requires sending 2 numbers:
 
@@ -78,7 +80,7 @@ For example, removing a root fiber with an id of 1:
 ]
 ```
 
-### Re-ordering children
+#### Re-ordering children
 
 1. re-order children constant (`3`)
 1. fiber id
@@ -114,7 +116,7 @@ The frontend stores its information about the tree in a map of id to objects wit
 
 <sup>2</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
 
-### Finding the element at index N
+#### Finding the element at index N
 
 The tree data structure lets us impose an order on elements and "quickly" find the Nth one using the `weight` attribute.
 
@@ -160,3 +162,212 @@ while (index !== currentWeight) {
   }
 }
 ```
+
+## Profiler
+
+All profiling information is stored on the backend while profiling is in progress. (Avoiding sending traffic across the bridge reduces the performance overhead of running the profiler.)
+
+### Profiling summary
+
+Upon completion, a "_profileSummary_" message is sent across the bridge. This message is a typed array summarizing the profiling session. It contains a repeating sequence of values (per root):
+
+1. root id
+1. number of interactions for the root in this profiling session
+1. number of commits for the root in this profiling session
+
+Followed by a series of tuples for each commit:
+
+1. timestamp (relative to when profiling was started)
+1. duration of commit
+
+This is the minimal information required to render the main Profiler interface. 
+
+For example, an application with two React roots might send a summary like this:
+```js
+[
+  1,   // root id
+  0,   // no interactions were logged during this session
+  3,   // number of commits
+  210, // first commit started 210ms after profiling began
+  10,  // and took 10ms
+  284, // second commit started 284ms after profiling began
+  13,  // and took 13ms
+  303, // third commit started 303ms after profiling began
+  5,   // and took 5ms
+
+  63,  // root id
+  1,   // one interaction was logged during this session
+  2,   // number of commits
+  513, // first commit started 513ms after profiling began
+  8,   // first commit took 8ms
+  711, // second commit started 711ms after profiling began
+  22,  // second commit took 22ms
+]
+```
+
+Additional information (e.g. which components were part of a specific commit, which interactions were logged) is lazily requested by the frontend as a user interacts with the profiling data.
+
+### Commit details
+
+When a particular commit is selected, the frontend polls the backend for the information necessary to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. This information includes the time and duration of the commit, any interactions that were part of the commit, and a tree representing the state of the React application as of that commit.
+
+The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in.  The backend sends a response to fill in missing details about the commit.
+
+The response always beginning with 3 values:
+
+1. root id
+1. commit index (which commit this describes)
+1. number of interactions
+
+Next is a series of interactions (depending on the number specified previously) consisting of:
+
+1. interaction id
+1. timestamp (when the interaction was traced relative to when profiling started)
+1. UTF encoded interaction display name size
+   * (followed by this number of encoded values)
+
+Finally a flattened representation of the React tree as of this commit operation:
+
+1. element id
+1. parent id
+1. base duration
+1. self duration
+1. actual duration
+1. UTF encoded display name size
+   * (followed by this number of encoded values)
+
+Here is an example commit containing two interactions and a tree of three React components:
+
+```js
+[
+  1,   // root id
+  0,   // commit index (the first commit)
+  2,   // the number of interactions (represented below)
+
+  1,   // first interaction id
+  4,   // time when interaction was first traced
+  3,   // encoded interaction name size
+  70,  // "F"
+  111, // "o"
+  111, // "o"
+
+  1,   // second interaction id
+  5,   // time when interaction was first traced
+  3,   // encoded interaction name size
+  66,  // "B"
+  97,  // "a"
+  114, // "r"
+
+  1,   // root fiber id
+ -1,   // parent id (signifies the fiber is a root)
+  15,  // base duration
+  4,   // self duration
+  15,  // actual duration
+  4,   // UTF encoded display name size
+  76,  // "L"
+  105, // "i"
+  115, // "s"
+  116, // "t"
+
+  2,   // fiber id
+  1,   // parent id
+  11,  // base duration
+  8,   // self duration
+  11,  // actual duration
+  4,   // UTF encoded display name size
+  73,  // "I"
+  116, // "t"
+  101, // "e"
+  109, // "m"
+
+  2,   // fiber id
+  1,   // parent id
+  8,   // base duration
+  0,   // self duration
+  0,   // actual duration (this component didn't render during this commit)
+  4,   // UTF encoded display name size
+  73,  // "I"
+  116, // "t"
+  101, // "e"
+  109, // "m"
+]
+```
+
+### Component commits
+
+When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. This information includes each time the component rendered and how long it took.
+
+The frontend sends a "_profileComponentDetails_" message specifying which root and commit number it is interested in. The backend sends a response that is serialized in a similar fashion as the Elements tree (above).
+
+The response consists of the following values:
+
+1. root id
+1. fiber id
+1. UTF encoded display name size
+   * (followed by this number of encoded values)
+
+Followed by a series of tuples for each time the fiber was committed. The tuples consist of:
+
+1. commit index
+1. duration of time spent rendering the component in this commit
+
+Here is an example of a fiber that committed twice during a profiling session:
+
+```js
+[
+  1,   // root id
+  2,   // fiber id
+  4,   // UTF encoded display name size
+  73,  // "I"
+  116, // "t"
+  101, // "e"
+  109, // "m"
+
+  0,   // commit index 0
+  11,  // actual duration for this fiber in commit 0
+
+  3,   // commit index 3
+  7,   // actual duration for this fiber in commit 3
+]
+```
+
+### Interactions
+
+The [Interactions chart](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#interactions) shows a time series for every interaction that was traced in the recent profiler session. The frontend sends a "_profileInteractions_" message specifying which root it would like interaction data for. The backend sends a typed array as a response.
+
+The response always begins with an id that identifies which root the interactions are associated with:
+
+1. root id
+
+Next is a series of interactions, consisting of:
+
+1. interaction id
+1. UTF encoded display name size
+   * (followed by this number of encoded values)
+1. Number of commits this interaction was associated with
+   * (followed by the index of each commit)
+
+Here is an example of a profiling session consisting of two interactions:
+
+```js
+[
+  1,   // root id
+
+  1,   // first interaction id
+  3,   // encoded interaction name size
+  70,  // "F"
+  111, // "o"
+  111, // "o"
+  2,   // number of commits this interaction was associated with
+  0,   // index of first commit
+  3,   // index of second commit
+
+  1,   // second interaction id
+  3,   // encoded interaction name size
+  66,  // "B"
+  97,  // "a"
+  114, // "r"
+  1,   // number of commits this interaction was associated with
+  0,   // index of first commit
+]
+```
\ No newline at end of file

From 4257ba4983cf59e1561673555e27c1a330649e98 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Mar 2019 18:21:38 -0800
Subject: [PATCH 123/814] Changed profilerSummary messages to be lazy as well

---
 OVERVIEW.md | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 9da34819615a..fe3dd90b005f 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -167,9 +167,13 @@ while (index !== currentWeight) {
 
 All profiling information is stored on the backend while profiling is in progress. (Avoiding sending traffic across the bridge reduces the performance overhead of running the profiler.)
 
+The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_"). All other profiling information is lazy and must be requested by the backend.
+
 ### Profiling summary
 
-Upon completion, a "_profileSummary_" message is sent across the bridge. This message is a typed array summarizing the profiling session. It contains a repeating sequence of values (per root):
+When the user opens the profiling tab, the frontend asks the backend if it has any profiling data for the currently-selected root. This is done by sending a "_profileSummary_" message with an id that identifies the root.
+
+The response is a typed array summarizing the profiling session for that. It consists of the following values:
 
 1. root id
 1. number of interactions for the root in this profiling session
@@ -182,7 +186,7 @@ Followed by a series of tuples for each commit:
 
 This is the minimal information required to render the main Profiler interface. 
 
-For example, an application with two React roots might send a summary like this:
+Here is an example profiler summary:
 ```js
 [
   1,   // root id
@@ -194,18 +198,10 @@ For example, an application with two React roots might send a summary like this:
   13,  // and took 13ms
   303, // third commit started 303ms after profiling began
   5,   // and took 5ms
-
-  63,  // root id
-  1,   // one interaction was logged during this session
-  2,   // number of commits
-  513, // first commit started 513ms after profiling began
-  8,   // first commit took 8ms
-  711, // second commit started 711ms after profiling began
-  22,  // second commit took 22ms
 ]
 ```
 
-Additional information (e.g. which components were part of a specific commit, which interactions were logged) is lazily requested by the frontend as a user interacts with the profiling data.
+Additional information (e.g. which components were part of a specific commit, which interactions were logged) must be lazily requested by the frontend as a user interacts with the Profiler UI.
 
 ### Commit details
 

From 0ac84f3065f053a2edcab0dd55749c2f24e2a263 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 6 Mar 2019 18:30:17 -0800
Subject: [PATCH 124/814] Added explicit Profiler goals to OVERVIEW

---
 OVERVIEW.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index fe3dd90b005f..d0709f9b97a6 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -165,9 +165,11 @@ while (index !== currentWeight) {
 
 ## Profiler
 
-All profiling information is stored on the backend while profiling is in progress. (Avoiding sending traffic across the bridge reduces the performance overhead of running the profiler.)
+The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize the impact of running it (so that it doesn't interfere with the application beign profiled). This can be accomplished by:
+* Minimizing bridge traffic.
+* Efficiently serializing bridge messages.
 
-The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_"). All other profiling information is lazy and must be requested by the backend.
+All profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_"). All other profiling information is lazy and must be requested by the backend.
 
 ### Profiling summary
 

From 20b613dcdef149248ab2bfac77e72bbd3efb3d3d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 7 Mar 2019 14:15:12 -0800
Subject: [PATCH 125/814] Updated Profiler OVERVIEW

---
 OVERVIEW.md | 276 +++++++++++++++++++++-------------------------------
 1 file changed, 113 insertions(+), 163 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index d0709f9b97a6..0cf159fbc77d 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -165,207 +165,157 @@ while (index !== currentWeight) {
 
 ## Profiler
 
-The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize the impact of running it (so that it doesn't interfere with the application beign profiled). This can be accomplished by:
+The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:
 * Minimizing bridge traffic.
-* Efficiently serializing bridge messages.
+* Making expensive computations lazy.
 
-All profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_"). All other profiling information is lazy and must be requested by the backend.
+Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_").
 
-### Profiling summary
+When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
+
+While profiling is in progress, the backend also stores some information <sup>1</sup> about each commit:
+* Commit time and duration
+* Which elements were rendered during that commit.
+* Which interactions (if any) were part of the commit.
 
-When the user opens the profiling tab, the frontend asks the backend if it has any profiling data for the currently-selected root. This is done by sending a "_profileSummary_" message with an id that identifies the root.
+This information is kept on the backend until requested by the frontend (as described below).
 
-The response is a typed array summarizing the profiling session for that. It consists of the following values:
+<sup>1</sup> In the future, the backend may also store additional metadata (e.g. which props/states changed between rendered for a given component).
+
+### Profiling summary
 
-1. root id
-1. number of interactions for the root in this profiling session
-1. number of commits for the root in this profiling session
+The profiling tab shows information for the currently-selected React root. When profiling completes (or when a new root is selected) the frontend first checks to see if there is any profiling data for the selected root. (Has it cached any "_operations_"?)
 
-Followed by a series of tuples for each commit:
+If so, then it sends a "_profileSummary_" message with an id that identifies the root. The backend then returns the following information:
 
-1. timestamp (relative to when profiling was started)
-1. duration of commit
+* root id (to match request and response)
+* number of interactions that were traced for this root
+* the commits (each consisting of a timestamp and duration) that were profiled for the root
 
 This is the minimal information required to render the main Profiler interface. 
 
-Here is an example profiler summary:
+Here is an example profile summary:
 ```js
-[
-  1,   // root id
-  0,   // no interactions were logged during this session
-  3,   // number of commits
-  210, // first commit started 210ms after profiling began
-  10,  // and took 10ms
-  284, // second commit started 284ms after profiling began
-  13,  // and took 13ms
-  303, // third commit started 303ms after profiling began
-  5,   // and took 5ms
+{
+  rootID: 1,
+  interactionCount: 2,
+  commits: [
+    [
+      210, // first commit started 210ms after profiling began
+      10,  // and took 10ms
+    ],
+    [
+      284, // second commit started 284ms after profiling began
+      13,  // and took 13ms
+    ]
+    [
+      303, // third commit started 303ms after profiling began
+      5,   // and took 5ms
+    ]
+  ]
 ]
 ```
 
-Additional information (e.g. which components were part of a specific commit, which interactions were logged) must be lazily requested by the frontend as a user interacts with the Profiler UI.
+Additional information (e.g. which components were part of a specific commit, which interactions were logged) are lazily requested by the frontend as a user interacts with the Profiler UI.
 
 ### Commit details
 
-When a particular commit is selected, the frontend polls the backend for the information necessary to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. This information includes the time and duration of the commit, any interactions that were part of the commit, and a tree representing the state of the React application as of that commit.
-
-The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in.  The backend sends a response to fill in missing details about the commit.
+When a commit is selected in the profiling view, the frontend needs to reconstruct the tree at that point in time using the snapshot and the "_operations_" it has cached.
 
-The response always beginning with 3 values:
+In addition to this, it also needs to ask the backend for some additional information needed to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in. The backend sends a response to fill in missing details about the commit:
 
-1. root id
-1. commit index (which commit this describes)
-1. number of interactions
+* root id and commit index (to match request and response)
+* which elements were rendered during the commit and how long did they take
+* which interactions were part of the commit
 
-Next is a series of interactions (depending on the number specified previously) consisting of:
-
-1. interaction id
-1. timestamp (when the interaction was traced relative to when profiling started)
-1. UTF encoded interaction display name size
-   * (followed by this number of encoded values)
-
-Finally a flattened representation of the React tree as of this commit operation:
-
-1. element id
-1. parent id
-1. base duration
-1. self duration
-1. actual duration
-1. UTF encoded display name size
-   * (followed by this number of encoded values)
-
-Here is an example commit containing two interactions and a tree of three React components:
+Here is an example commit in which two elements were rendered and one interaction was traced:
 
 ```js
-[
-  1,   // root id
-  0,   // commit index (the first commit)
-  2,   // the number of interactions (represented below)
-
-  1,   // first interaction id
-  4,   // time when interaction was first traced
-  3,   // encoded interaction name size
-  70,  // "F"
-  111, // "o"
-  111, // "o"
-
-  1,   // second interaction id
-  5,   // time when interaction was first traced
-  3,   // encoded interaction name size
-  66,  // "B"
-  97,  // "a"
-  114, // "r"
-
-  1,   // root fiber id
- -1,   // parent id (signifies the fiber is a root)
-  15,  // base duration
-  4,   // self duration
-  15,  // actual duration
-  4,   // UTF encoded display name size
-  76,  // "L"
-  105, // "i"
-  115, // "s"
-  116, // "t"
-
-  2,   // fiber id
-  1,   // parent id
-  11,  // base duration
-  8,   // self duration
-  11,  // actual duration
-  4,   // UTF encoded display name size
-  73,  // "I"
-  116, // "t"
-  101, // "e"
-  109, // "m"
-
-  2,   // fiber id
-  1,   // parent id
-  8,   // base duration
-  0,   // self duration
-  0,   // actual duration (this component didn't render during this commit)
-  4,   // UTF encoded display name size
-  73,  // "I"
-  116, // "t"
-  101, // "e"
-  109, // "m"
-]
+{
+  rootID: 1,
+  commitIndex: 0,
+  
+  // Map of interaction ID to interaction.
+  interactions: {
+    1: {
+      timestamp: 4,
+      name: "Foo"
+    },
+    2: {
+      timestamp: 4,
+      name: "Bar"
+    }
+  },
+
+  // Map of element ID to render durations (ms).
+  // Elements not in this map were not rendered during the commit.
+  nodes: {
+    1: {,
+      baseDuration: 15,
+      selfDuration: 4,
+      actualDuration: 15
+    },
+    2: {
+      baseDuration: 11,
+      selfDuration: 8,
+      actualDuration: 11
+    }
+  }
+}
 ```
 
 ### Component commits
 
-When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. This information includes each time the component rendered and how long it took.
-
-The frontend sends a "_profileComponentDetails_" message specifying which root and commit number it is interested in. The backend sends a response that is serialized in a similar fashion as the Elements tree (above).
-
-The response consists of the following values:
-
-1. root id
-1. fiber id
-1. UTF encoded display name size
-   * (followed by this number of encoded values)
-
-Followed by a series of tuples for each time the fiber was committed. The tuples consist of:
+When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. The frontend sends a "_profileComponentDetails_" message specifying which root and component (id) it is interested in. The backend sends a response that includes:
 
-1. commit index
-1. duration of time spent rendering the component in this commit
+* root and component ids (to match request and response)
+* which commits was the component rendered in and how long did each take
 
-Here is an example of a fiber that committed twice during a profiling session:
+Here is an example of a component that committed twice during a profiling session:
 
 ```js
-[
-  1,   // root id
-  2,   // fiber id
-  4,   // UTF encoded display name size
-  73,  // "I"
-  116, // "t"
-  101, // "e"
-  109, // "m"
-
-  0,   // commit index 0
-  11,  // actual duration for this fiber in commit 0
-
-  3,   // commit index 3
-  7,   // actual duration for this fiber in commit 3
-]
+{
+  rootID: 1,
+  id: 2,
+
+  // Map of commit index to render duration (ms)
+  commits: {
+    0: 11,
+    3: 7
+  }
+}
 ```
 
 ### Interactions
 
-The [Interactions chart](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#interactions) shows a time series for every interaction that was traced in the recent profiler session. The frontend sends a "_profileInteractions_" message specifying which root it would like interaction data for. The backend sends a typed array as a response.
+The [Interactions chart](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#interactions) shows a time series for every interaction that was traced in the recent profiler session. The frontend sends a "_profileInteractions_" message specifying which root it would like interaction data for. The backend sends the following response:
 
-The response always begins with an id that identifies which root the interactions are associated with:
-
-1. root id
-
-Next is a series of interactions, consisting of:
-
-1. interaction id
-1. UTF encoded display name size
-   * (followed by this number of encoded values)
-1. Number of commits this interaction was associated with
-   * (followed by the index of each commit)
+* root id (to match request and response)
+* interaction metadata
 
 Here is an example of a profiling session consisting of two interactions:
 
 ```js
-[
-  1,   // root id
+{
+  rootID: 1,
+
+  // Map of ID to interaction:
+  interactions: {
+    1: {
+      name: "Foo",
+      commits: [
+        0, // index of first commit
+        3  // index of second commit
+      ]
+    },
+    2: {
+      name: "Bar",
+      commits: [
+        0  // index of first commit
+      ]
+    }
+  }
+}
+```
 
-  1,   // first interaction id
-  3,   // encoded interaction name size
-  70,  // "F"
-  111, // "o"
-  111, // "o"
-  2,   // number of commits this interaction was associated with
-  0,   // index of first commit
-  3,   // index of second commit
-
-  1,   // second interaction id
-  3,   // encoded interaction name size
-  66,  // "B"
-  97,  // "a"
-  114, // "r"
-  1,   // number of commits this interaction was associated with
-  0,   // index of first commit
-]
-```
\ No newline at end of file
+The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profileSummary_" message.
\ No newline at end of file

From 5386917f594dfdacc0ed5935fa03f80b8e130a54 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 7 Mar 2019 14:31:03 -0800
Subject: [PATCH 126/814] Refined OVERVIEW a little more

---
 OVERVIEW.md | 59 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 0cf159fbc77d..a8b87aba9312 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -192,7 +192,7 @@ If so, then it sends a "_profileSummary_" message with an id that identifies the
 * number of interactions that were traced for this root
 * the commits (each consisting of a timestamp and duration) that were profiled for the root
 
-This is the minimal information required to render the main Profiler interface. 
+This is the minimal information required to render the main ["commit selector"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits). 
 
 Here is an example profile summary:
 ```js
@@ -225,7 +225,7 @@ When a commit is selected in the profiling view, the frontend needs to reconstru
 In addition to this, it also needs to ask the backend for some additional information needed to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in. The backend sends a response to fill in missing details about the commit:
 
 * root id and commit index (to match request and response)
-* which elements were rendered during the commit and how long did they take
+* which elements were rendered during the commit <sup>1</sup> and how long did they take
 * which interactions were part of the commit
 
 Here is an example commit in which two elements were rendered and one interaction was traced:
@@ -234,28 +234,27 @@ Here is an example commit in which two elements were rendered and one interactio
 {
   rootID: 1,
   commitIndex: 0,
-  
-  // Map of interaction ID to interaction.
-  interactions: {
-    1: {
+  interactions: [
+    {
+      id: 1,
       timestamp: 4,
       name: "Foo"
     },
-    2: {
+    {
+      id: 2,
       timestamp: 4,
       name: "Bar"
     }
-  },
-
-  // Map of element ID to render durations (ms).
-  // Elements not in this map were not rendered during the commit.
-  nodes: {
-    1: {,
+  ],
+  nodes: [
+    {
+      id: 1,
       baseDuration: 15,
       selfDuration: 4,
       actualDuration: 15
     },
-    2: {
+    {
+      id: 2,
       baseDuration: 11,
       selfDuration: 8,
       actualDuration: 11
@@ -264,6 +263,8 @@ Here is an example commit in which two elements were rendered and one interactio
 }
 ```
 
+<sup>1</sup> Elements in the tree that are not explicitly included in the above response were not rendered during the current commit.
+
 ### Component commits
 
 When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. The frontend sends a "_profileComponentDetails_" message specifying which root and component (id) it is interested in. The backend sends a response that includes:
@@ -278,11 +279,17 @@ Here is an example of a component that committed twice during a profiling sessio
   rootID: 1,
   id: 2,
 
-  // Map of commit index to render duration (ms)
-  commits: {
-    0: 11,
-    3: 7
-  }
+  // Tuples of commit index and render duration (ms)
+  commits: [
+    [
+      0,  // index of first
+      11  // duration (ms)
+    ],
+    [
+      2,  // index of second commit
+      7   // duration (ms)
+    ]
+  ]
 }
 ```
 
@@ -298,23 +305,23 @@ Here is an example of a profiling session consisting of two interactions:
 ```js
 {
   rootID: 1,
-
-  // Map of ID to interaction:
-  interactions: {
-    1: {
+  interactions: [
+    {
+      id: 1,
       name: "Foo",
       commits: [
         0, // index of first commit
-        3  // index of second commit
+        2  // index of second commit
       ]
     },
-    2: {
+    {
+      id: 2,
       name: "Bar",
       commits: [
         0  // index of first commit
       ]
     }
-  }
+  ]
 }
 ```
 

From 3118dae375b19f456bdfcbbc4c789b662a0bed78 Mon Sep 17 00:00:00 2001
From: Sriram Thiagarajan <sri.sjc@gmail.com>
Date: Sat, 9 Mar 2019 07:03:42 +0530
Subject: [PATCH 127/814] fix import file name

---
 shells/dev/src/devtools.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index a4d3fca3e061..b248b670192f 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -6,7 +6,7 @@ import { unstable_createRoot as createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
-import Store from 'src/devtools/Store';
+import Store from 'src/devtools/store';
 import DevTools from 'src/devtools/views/DevTools';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);

From c687252b6a5f9f8301753918340c2024c7bb87d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 9 Mar 2019 14:08:51 -0800
Subject: [PATCH 128/814] Updated Profiling overview/proposal again

---
 OVERVIEW.md | 54 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index a8b87aba9312..35e218e000d1 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -20,11 +20,12 @@ We only send the following bits of information: element type, id, parent id, own
 
 #### Adding a root node
 
-Adding a root to the tree requires sending 3 numbers:
+Adding a root to the tree requires sending 4 numbers:
 
 1. add operation constant (`1`)
 1. fiber id
 1. element type constant (`8 === ElementTypeRoot`)
+1. profiling flag
 
 For example, adding a root fiber with an id of 1:
 ```js
@@ -32,6 +33,7 @@ For example, adding a root fiber with an id of 1:
   1, // add operation
   1, // fiber id
   8, // ElementTypeRoot
+  1, // this root's renderer supports profiling
 ]
 ```
 
@@ -169,7 +171,7 @@ The Profiler UI is a powerful tool for identifying and fixing performance proble
 * Minimizing bridge traffic.
 * Making expensive computations lazy.
 
-Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_").
+Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. (The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message.)
 
 When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
 
@@ -191,6 +193,7 @@ If so, then it sends a "_profileSummary_" message with an id that identifies the
 * root id (to match request and response)
 * number of interactions that were traced for this root
 * the commits (each consisting of a timestamp and duration) that were profiled for the root
+* tree base durations as of when profiling started
 
 This is the minimal information required to render the main ["commit selector"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits). 
 
@@ -199,19 +202,29 @@ Here is an example profile summary:
 {
   rootID: 1,
   interactionCount: 2,
+
+  // Tuples of commit time (relative to when profiling started) and duration
   commits: [
-    [
-      210, // first commit started 210ms after profiling began
-      10,  // and took 10ms
-    ],
-    [
-      284, // second commit started 284ms after profiling began
-      13,  // and took 13ms
-    ]
-    [
-      303, // third commit started 303ms after profiling began
-      5,   // and took 5ms
-    ]
+    210, // first commit started 210ms after profiling began
+    10,  // and took 10ms
+
+    284, // second commit started 284ms after profiling began
+    13,  // and took 13ms
+
+    303, // third commit started 303ms after profiling began
+    5,   // and took 5ms
+  ],
+
+  // Tuples of fiber id and initial tree base duration
+  treeBaseDuration: [
+    1,  // fiber id
+    11, // tree base duration when profiling started
+
+    2,  // fiber id
+    12, // tree base duration when profiling started
+
+    3,  // fiber id
+    8,  // tree base duration when profiling started
   ]
 ]
 ```
@@ -281,14 +294,11 @@ Here is an example of a component that committed twice during a profiling sessio
 
   // Tuples of commit index and render duration (ms)
   commits: [
-    [
-      0,  // index of first
-      11  // duration (ms)
-    ],
-    [
-      2,  // index of second commit
-      7   // duration (ms)
-    ]
+    0,  // index of first
+    11  // duration (ms)
+
+    2,  // index of second commit
+    7   // duration (ms)
   ]
 }
 ```

From 2d6800728889a5141b7a1c08842f2e90ffc9448a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 10 Mar 2019 09:01:05 -0700
Subject: [PATCH 129/814] Initial profiling shell added

Lots of TODOs and unfinished views here.
---
 OVERVIEW.md                                   |   2 +-
 src/backend/agent.js                          |  35 +++++-
 src/backend/renderer.js                       | 108 ++++++++++++++++-
 src/backend/types.js                          |   5 +-
 src/backend/utils.js                          |   2 +-
 src/devtools/store.js                         |  29 ++++-
 src/devtools/types.js                         |  62 ----------
 src/devtools/views/ButtonIcon.js              |  46 +++++--
 src/devtools/views/DevTools.css               |  21 ++++
 src/devtools/views/DevTools.js                |  61 +++++++++-
 src/devtools/views/Elements/Element.js        |   2 +-
 src/devtools/views/Elements/OwnersStack.js    |   2 +-
 .../views/Elements/SelectedElement.js         |   4 +-
 src/devtools/views/Elements/TreeContext.js    |   2 +-
 src/devtools/views/Elements/types.js          |  65 ++++++++++
 src/devtools/views/Icon.js                    |  48 +++++++-
 src/devtools/views/Profiler/Profiler.css      |  57 ++++++++-
 src/devtools/views/Profiler/Profiler.js       |  84 ++++++++++++-
 .../views/Profiler/ProfilerContext.js         | 105 ++++++++++++++++
 src/devtools/views/Profiler/RecordToggle.css  |  21 ++++
 src/devtools/views/Profiler/RecordToggle.js   |  28 +++++
 src/devtools/views/Profiler/reducer.js        | 112 +++++++++++++++++
 src/devtools/views/Profiler/types.js          |  29 +++++
 src/devtools/views/ReactLogo.css              |   1 +
 .../views/Settings/SettingsContext.js         |   3 +
 src/devtools/views/TabBar.css                 |  70 ++++++-----
 src/devtools/views/TabBar.js                  | 113 ++++++++++--------
 src/devtools/views/root.css                   |   6 +
 28 files changed, 938 insertions(+), 185 deletions(-)
 create mode 100644 src/devtools/views/Elements/types.js
 create mode 100644 src/devtools/views/Profiler/ProfilerContext.js
 create mode 100644 src/devtools/views/Profiler/RecordToggle.css
 create mode 100644 src/devtools/views/Profiler/RecordToggle.js
 create mode 100644 src/devtools/views/Profiler/reducer.js
 create mode 100644 src/devtools/views/Profiler/types.js

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 35e218e000d1..29a5345c467b 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -175,7 +175,7 @@ Profiling information is stored on the backend. The backend push-notifies the fr
 
 When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
 
-While profiling is in progress, the backend also stores some information <sup>1</sup> about each commit:
+When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information <sup>1</sup> about each commit:
 * Commit time and duration
 * Which elements were rendered during that commit.
 * Which interactions (if any) were part of the commit.
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 6e472e7d3f6d..59169d0643b7 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -40,11 +40,13 @@ type SetInParams = {|
 
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
+  _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
 
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('overrideContext', this.overrideContext);
@@ -53,7 +55,9 @@ export default class Agent extends EventEmitter {
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
+    bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
+    bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener('viewElementSource', this.viewElementSource);
   }
@@ -62,14 +66,19 @@ export default class Agent extends EventEmitter {
     for (let rendererID in this._rendererInterfaces) {
       // A renderer will throw if it can't find a fiber for the specified node.
       try {
-        // $FlowFixMe
-        const renderer = this._rendererInterfaces[rendererID];
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
         return renderer.getFiberIDFromNative(node, true);
       } catch (e) {}
     }
     return null;
   }
 
+  getProfilingStatus = () => {
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
   highlightElementInDOM = ({
     displayName,
     id,
@@ -182,6 +191,17 @@ export default class Agent extends EventEmitter {
     window.addEventListener('mouseover', this._onMouseOver, true);
   };
 
+  startProfiling = () => {
+    this._isProfiling = true;
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.startProfiling();
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
   stopInspectingDOM = () => {
     hideOverlay();
 
@@ -190,6 +210,17 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('mouseover', this._onMouseOver, true);
   };
 
+  stopProfiling = () => {
+    this._isProfiling = false;
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.startProfiling();
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
   viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f9d3af2bfc60..7c63a79b7d8b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -26,11 +26,12 @@ import { inspectHooksOfFiber } from './ReactDebugHooks';
 import type {
   DevToolsHook,
   Fiber,
+  Interaction,
   ReactRenderer,
   FiberData,
   RendererInterface,
 } from './types';
-import type { InspectedElement } from 'src/devtools/types';
+import type { InspectedElement } from 'src/devtools/views/elements/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -459,6 +460,12 @@ export function attach(
   const idToFiberMap: Map<number, Fiber> = new Map();
   const primaryFibers: Set<Fiber> = new Set();
 
+  // When profiling is supported, we store the latest tree base durations for each Fiber.
+  // This is so that we can quickly capture a snapshot of those values if profiling starts.
+  // If we didn't store these values, we'd have to crawl the tree when profiling started,
+  // and use a slow path to find each of the current Fibers.
+  const idToTreeBaseDurationMap: Map<number, number> = new Map();
+
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -525,7 +532,12 @@ export function attach(
 
   function flushPendingEvents(root: Object): void {
     if (pendingOperations.length === 0) {
-      return;
+      // If we're currently profiling, send an "operations" method even if there are no mutations to the tree.
+      // The frontend needs this no-op info to know how to reconstruct the tree for each commit,
+      // even if a particular commit didn't change the shape of the tree.
+      if (!isProfiling) {
+        return;
+      }
     }
 
     // Identify which renderer this update is coming from.
@@ -546,11 +558,17 @@ export function attach(
     const isRoot = fiber.tag === HostRoot;
     const id = getFiberID(getPrimaryFiber(fiber));
 
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+    if (isProfilingSupported) {
+      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+    }
+
     if (isRoot) {
-      const operation = new Uint32Array(3);
+      const operation = new Uint32Array(4);
       operation[0] = TREE_OPERATION_ADD;
       operation[1] = id;
       operation[2] = ElementTypeRoot;
+      operation[3] = isProfilingSupported ? 1 : 0;
       addOperation(operation);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
@@ -616,8 +634,9 @@ export function attach(
       operation[1] = id;
       addOperation(operation, true);
     }
-    idToFiberMap.delete(id);
     fiberToIDMap.delete(primaryFiber);
+    idToFiberMap.delete(id);
+    idToTreeBaseDurationMap.delete(primaryFiber);
     primaryFibers.delete(primaryFiber);
   }
 
@@ -645,6 +664,26 @@ export function attach(
   ) {
     debug('enqueueUpdateIfNecessary()', fiber);
 
+    if (isProfiling) {
+      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
+        const id = getFiberID(getPrimaryFiber(fiber));
+
+        idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+
+        if (fiber.actualDuration > 0) {
+          // If profiling is active, store durations for elements that were rendered during the commit.
+          ((currentCommitProfilingMetadata: any): CommitProfilingData).committedFibers.push(
+            {
+              id,
+              actualDuration: fiber.actualDuration,
+              selfDuration: fiber.selfDuration,
+              treeBaseDuration: fiber.treeBaseDuration,
+            }
+          );
+        }
+      }
+    }
+
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -667,8 +706,6 @@ export function attach(
       operation.set(nextChildren, 3);
       addOperation(operation);
     }
-
-    // TODO (profiling) If we're profiling, also check to see if that data has changed.
   }
 
   function findReorderedChildren(fiber: Fiber, nextChildren: Array<number>) {
@@ -798,6 +835,21 @@ export function attach(
     const current = root.current;
     const alternate = current.alternate;
 
+    if (isProfiling) {
+      // If profiling is active, store commit time and duration, and the current interactions.
+      // The frontend may request this information after profiling has stopped.
+      currentCommitProfilingMetadata = {
+        committedFibers: [],
+        commitTime: performance.now() - profilingStartTime,
+        interactions: Array.from(root.memoizedInteractions).map(
+          ({ name, timestamp }: Interaction) => ({
+            name,
+            timestamp: timestamp - profilingStartTime,
+          })
+        ),
+      };
+    }
+
     if (alternate) {
       // TODO: relying on this seems a bit fishy.
       const wasMounted =
@@ -819,6 +871,13 @@ export function attach(
       // Mount a new root.
       mountFiber(current, null);
     }
+
+    if (isProfiling) {
+      ((commitProfilingMetadata: any): Array<CommitProfilingData>).push(
+        ((currentCommitProfilingMetadata: any): CommitProfilingData)
+      );
+    }
+
     // We're done here.
     flushPendingEvents(root);
   }
@@ -1263,6 +1322,41 @@ export function attach(
     }
   }
 
+  type CommittedFiber = {|
+    actualDuration: number,
+    id: number,
+    selfDuration: number,
+    treeBaseDuration: number,
+  |};
+
+  type CommitProfilingData = {|
+    committedFibers: Array<CommittedFiber>,
+    commitTime: number,
+    interactions: Array<Interaction>,
+  |};
+
+  let commitProfilingMetadata: Array<CommitProfilingData> | null = null;
+  let currentCommitProfilingMetadata: CommitProfilingData | null = null;
+  let initialTreeBaseDurations: Array<number> | null = null;
+  let isProfiling: boolean = false;
+  let profilingStartTime: number = 0;
+
+  function startProfiling() {
+    commitProfilingMetadata = [];
+    initialTreeBaseDurations = [];
+    isProfiling = true;
+    profilingStartTime = performance.now();
+
+    // Save initial treeBaseDurations; we'll need to send them later.
+    idToTreeBaseDurationMap.forEach((treeBaseDuration: number, id: number) => {
+      initialTreeBaseDurations = [id, treeBaseDuration];
+    });
+  }
+
+  function stopProfiling() {
+    isProfiling = false;
+  }
+
   return {
     cleanup,
     getFiberIDFromNative,
@@ -1277,6 +1371,8 @@ export function attach(
     setInHook,
     setInProps,
     setInState,
+    startProfiling,
+    stopProfiling,
     walkTree,
   };
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index d736d7cd5956..0b3521b2cd0b 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,6 +1,7 @@
 // @flow
 
-import type { ElementType, InspectedElement } from 'src/devtools/types';
+import type { ElementType } from 'src/devtools/types';
+import type { InspectedElement } from 'src/devtools/views/elements/types';
 
 type BundleType =
   | 0 // PROD
@@ -75,6 +76,8 @@ export type RendererInterface = {
   ) => void,
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
+  startProfiling: () => void,
+  stopProfiling: () => void,
   walkTree: () => void,
 };
 
diff --git a/src/backend/utils.js b/src/backend/utils.js
index ddb11eca1229..980565e2235f 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -2,7 +2,7 @@
 
 import { dehydrate } from '../hydration';
 
-import type { DehydratedData } from 'src/devtools/types';
+import type { DehydratedData } from 'src/devtools/views/elements/types';
 
 export function cleanForBridge(data: Object | null): DehydratedData | null {
   if (data !== null) {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d59242b4d13d..c9004475d28f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -10,7 +10,8 @@ import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 
-import type { Element, ElementType } from './types';
+import type { ElementType } from './types';
+import type { Element } from './views/elements/types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -24,6 +25,10 @@ const debug = (methodName, ...args) => {
   }
 };
 
+export type Capabilities = {|
+  supportsProfiling: boolean,
+|};
+
 /**
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
@@ -47,9 +52,13 @@ export default class Store extends EventEmitter {
   // Passive effects will check it for changes between render and mount.
   _roots: $ReadOnlyArray<number> = [];
 
+  _rootIDToCapabilities: Map<number, Capabilities> = new Map();
+
   // Renderer ID is needed to support inspection fiber props, state, and hooks.
   _rootIDToRendererID: Map<number, number> = new Map();
 
+  _supportsProfiling: boolean = false;
+
   constructor(bridge: Bridge) {
     super();
 
@@ -72,6 +81,10 @@ export default class Store extends EventEmitter {
     return this._roots;
   }
 
+  get supportsProfiling(): boolean {
+    return this._supportsProfiling;
+  }
+
   getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
       console.warn(
@@ -245,8 +258,12 @@ export default class Store extends EventEmitter {
               // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
               // Maybe in the future we'll revisit this.
             } else {
+              const supportsProfiling = operations[i] > 0;
+              i++;
+
               this._roots = this._roots.concat(id);
               this._rootIDToRendererID.set(id, rendererID);
+              this._rootIDToCapabilities.set(id, { supportsProfiling });
 
               this._idToElement.set(id, {
                 children: [],
@@ -341,6 +358,9 @@ export default class Store extends EventEmitter {
 
             this._roots = this._roots.filter(rootID => rootID !== id);
             this._rootIDToRendererID.delete(id);
+            this._rootIDToCapabilities.delete(id);
+
+            haveRootsChanged = true;
           } else {
             debug('Remove', `fiber ${id} from parent ${parentID}`);
 
@@ -399,6 +419,13 @@ export default class Store extends EventEmitter {
     this._revision++;
 
     if (haveRootsChanged) {
+      this._supportsProfiling = false;
+      this._rootIDToCapabilities.forEach(({ supportsProfiling }) => {
+        if (supportsProfiling) {
+          this._supportsProfiling = true;
+        }
+      });
+
       this.emit('roots');
     }
 
diff --git a/src/devtools/types.js b/src/devtools/types.js
index 41c1aa8d051e..de9b1529c37c 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -14,65 +14,3 @@ export const ElementTypeSuspense = 9;
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-
-// Each element on the frontend corresponds to a Fiber on the backend.
-// Some of its information (e.g. id, type, displayName) come from the backend.
-// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
-// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
-export type Element = {|
-  id: number,
-  parentID: number,
-  children: Array<number>,
-  type: ElementType,
-  displayName: string | null,
-  key: number | string | null,
-
-  // Owner (if available)
-  ownerID: number,
-
-  // How many levels deep within the tree is this element?
-  // This determines how much indentation (left padding) should be used in the Elements tree.
-  depth: number,
-
-  // How many nodes (including itself) are below this Element within the tree.
-  // This property is used to quickly determine the total number of Elements,
-  // and the Element at any given index (for windowing purposes).
-  weight: number,
-|};
-
-export type Owner = {|
-  displayName: string,
-  id: number,
-|};
-
-export type InspectedElement = {|
-  id: number,
-
-  // Does the current renderer support editable hooks?
-  canEditHooks: boolean,
-
-  // Does the current renderer support editable function props?
-  canEditFunctionProps: boolean,
-
-  // Can view component source location.
-  canViewSource: boolean,
-
-  // Inspectable properties.
-  context: Object | null,
-  hooks: Object | null,
-  props: Object | null,
-  state: Object | null,
-
-  // List of owners
-  owners: Array<Owner> | null,
-
-  // Location of component in source coude.
-  source: Object | null,
-|};
-
-// TODO: Add profiling type
-
-export type DehydratedData = {|
-  cleaned: Array<Array<string>>,
-  data: Object,
-|};
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 031905d49e99..d97b31bb1a67 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -3,18 +3,23 @@
 import React from 'react';
 import styles from './ButtonIcon.css';
 
+export type IconType =
+  | 'back'
+  | 'close'
+  | 'copy'
+  | 'down'
+  | 'filter'
+  | 'more'
+  | 'record'
+  | 'reload'
+  | 'search'
+  | 'undo'
+  | 'up'
+  | 'view-dom'
+  | 'view-source';
+
 type Props = {|
-  type:
-    | 'back'
-    | 'close'
-    | 'copy'
-    | 'down'
-    | 'more'
-    | 'search'
-    | 'undo'
-    | 'up'
-    | 'view-dom'
-    | 'view-source',
+  type: IconType,
 |};
 
 export default function ButtonIcon({ type }: Props) {
@@ -32,9 +37,18 @@ export default function ButtonIcon({ type }: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'filter':
+      pathData = PATH_FILTER;
+      break;
     case 'more':
       pathData = PATH_MORE;
       break;
+    case 'record':
+      pathData = PATH_RECORD;
+      break;
+    case 'reload':
+      pathData = PATH_RELOAD;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
@@ -85,6 +99,8 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
+
 const PATH_MORE = `
   M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9
   13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83
@@ -92,6 +108,14 @@ const PATH_MORE = `
   1.5.67 1.5 1.5-.67 1.5-1.5 1.5z
 `;
 
+const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';
+
+const PATH_RELOAD = `
+  M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0
+  6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0
+  3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z
+`;
+
 const PATH_SEARCH = `
   M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
   4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
diff --git a/src/devtools/views/DevTools.css b/src/devtools/views/DevTools.css
index 953bc9bc1f57..4001db68ebc5 100644
--- a/src/devtools/views/DevTools.css
+++ b/src/devtools/views/DevTools.css
@@ -9,9 +9,30 @@
 
 .TabBar {
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  background-color: var(--color-background);
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-large);
+}
+
+.Spacer {
+  flex: 1;
 }
 
 .TabContent {
   flex: 1 1 100%;
   overflow: auto;
 }
+
+.DevToolsVersion:before {
+  content: 'DevTools ';
+}
+
+@media screen and (max-width: 350px) {
+  .DevToolsVersion:before {
+    content: '';
+  }
+}
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 4ed6ec74cf36..d2d9cb84748c 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Elements from './Elements/Elements';
@@ -9,6 +9,7 @@ import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Elements/TreeContext';
+import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
 
@@ -30,6 +31,28 @@ export type Props = {|
   viewElementSource?: ?Function,
 |};
 
+const elementTab = {
+  id: ('elements': TabID),
+  icon: 'elements',
+  label: 'Elements',
+  title: 'React Elements',
+};
+const profilerTab = {
+  id: ('profiler': TabID),
+  icon: 'profiler',
+  label: 'Profiler',
+  title: 'React Profiler',
+};
+const settingsTab = {
+  id: ('settings': TabID),
+  icon: 'settings',
+  label: 'Settings',
+  title: 'React Settings',
+};
+
+const tabsWithProfiler = [elementTab, profilerTab, settingsTab];
+const tabsWithoutProfiler = [elementTab, settingsTab];
+
 export default function DevTools({
   bridge,
   browserName,
@@ -40,6 +63,27 @@ export default function DevTools({
   viewElementSource = null,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
+  const [supportsProfiling, setSupportsProfiling] = useState(
+    store.supportsProfiling
+  );
+
+  // Show/hide the "Profiler" button depending on if profiling is supported.
+  useEffect(() => {
+    if (supportsProfiling !== store.supportsProfiling) {
+      setSupportsProfiling(store.supportsProfiling);
+    }
+
+    const handleRoots = () => {
+      if (supportsProfiling !== store.supportsProfiling) {
+        setSupportsProfiling(store.supportsProfiling);
+      }
+    };
+
+    store.addListener('roots', handleRoots);
+    return () => {
+      store.removeListener('roots', handleRoots);
+    };
+  }, [store, supportsProfiling]);
 
   let tabElement;
   switch (tab) {
@@ -63,7 +107,20 @@ export default function DevTools({
             <div className={styles.DevTools}>
               {showTabBar && (
                 <div className={styles.TabBar}>
-                  <TabBar currentTab={tab} selectTab={setTab} />
+                  <ReactLogo />
+                  <span className={styles.DevToolsVersion}>
+                    {process.env.DEVTOOLS_VERSION}
+                  </span>
+                  <div className={styles.Spacer} />
+                  <TabBar
+                    currentTab={tab}
+                    id="DevTools"
+                    selectTab={setTab}
+                    size="large"
+                    tabs={
+                      supportsProfiling ? tabsWithProfiler : tabsWithoutProfiler
+                    }
+                  />
                 </div>
               )}
               <div className={styles.TabContent}>{tabElement}</div>
diff --git a/src/devtools/views/Elements/Element.js b/src/devtools/views/Elements/Element.js
index 610360586f51..eef967d931e2 100644
--- a/src/devtools/views/Elements/Element.js
+++ b/src/devtools/views/Elements/Element.js
@@ -12,7 +12,7 @@ import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 
-import type { Element } from '../../types';
+import type { Element } from './types';
 
 import styles from './Element.css';
 
diff --git a/src/devtools/views/Elements/OwnersStack.js b/src/devtools/views/Elements/OwnersStack.js
index 716f55a05d16..4340c148bb6d 100644
--- a/src/devtools/views/Elements/OwnersStack.js
+++ b/src/devtools/views/Elements/OwnersStack.js
@@ -6,7 +6,7 @@ import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
 
-import type { Element } from '../../types';
+import type { Element } from './types';
 
 import styles from './OwnersStack.css';
 
diff --git a/src/devtools/views/Elements/SelectedElement.js b/src/devtools/views/Elements/SelectedElement.js
index 6b6074a81d6c..2cec5677ba13 100644
--- a/src/devtools/views/Elements/SelectedElement.js
+++ b/src/devtools/views/Elements/SelectedElement.js
@@ -17,8 +17,8 @@ import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
 import { ElementTypeClass, ElementTypeFunction } from '../../types';
 
-import type { InspectedElement } from '../../types';
-import type { DehydratedData, Element } from 'src/devtools/types';
+import type { InspectedElement } from './types';
+import type { DehydratedData, Element } from './types';
 
 export type Props = {||};
 
diff --git a/src/devtools/views/Elements/TreeContext.js b/src/devtools/views/Elements/TreeContext.js
index 616f6409cfff..1b3fa5c29130 100644
--- a/src/devtools/views/Elements/TreeContext.js
+++ b/src/devtools/views/Elements/TreeContext.js
@@ -29,7 +29,7 @@ import { createRegExp } from '../utils';
 import { BridgeContext, StoreContext } from '../context';
 import Store from '../../store';
 
-import type { Element } from 'src/devtools/types';
+import type { Element } from './types';
 
 type Context = {|
   // Tree
diff --git a/src/devtools/views/Elements/types.js b/src/devtools/views/Elements/types.js
new file mode 100644
index 000000000000..43dd38fa95ad
--- /dev/null
+++ b/src/devtools/views/Elements/types.js
@@ -0,0 +1,65 @@
+// @flow
+
+import type { ElementType } from '../../types';
+
+// Each element on the frontend corresponds to a Fiber on the backend.
+// Some of its information (e.g. id, type, displayName) come from the backend.
+// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
+// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
+export type Element = {|
+  id: number,
+  parentID: number,
+  children: Array<number>,
+  type: ElementType,
+  displayName: string | null,
+  key: number | string | null,
+
+  // Owner (if available)
+  ownerID: number,
+
+  // How many levels deep within the tree is this element?
+  // This determines how much indentation (left padding) should be used in the Elements tree.
+  depth: number,
+
+  // How many nodes (including itself) are below this Element within the tree.
+  // This property is used to quickly determine the total number of Elements,
+  // and the Element at any given index (for windowing purposes).
+  weight: number,
+|};
+
+export type Owner = {|
+  displayName: string,
+  id: number,
+|};
+
+export type InspectedElement = {|
+  id: number,
+
+  // Does the current renderer support editable hooks?
+  canEditHooks: boolean,
+
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
+
+  // Can view component source location.
+  canViewSource: boolean,
+
+  // Inspectable properties.
+  context: Object | null,
+  hooks: Object | null,
+  props: Object | null,
+  state: Object | null,
+
+  // List of owners
+  owners: Array<Owner> | null,
+
+  // Location of component in source coude.
+  source: Object | null,
+|};
+
+// TODO: Add profiling type
+
+export type DehydratedData = {|
+  cleaned: Array<Array<string>>,
+  data: Object,
+|};
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
index e7b6a3d21131..4b93b8d03cb8 100644
--- a/src/devtools/views/Icon.js
+++ b/src/devtools/views/Icon.js
@@ -3,9 +3,19 @@
 import React from 'react';
 import styles from './Icon.css';
 
+export type IconType =
+  | 'arrow'
+  | 'elements'
+  | 'flame-chart'
+  | 'interactions'
+  | 'profiler'
+  | 'ranked-chart'
+  | 'search'
+  | 'settings';
+
 type Props = {|
   className?: string,
-  type: 'arrow' | 'elements' | 'profiler' | 'search' | 'settings',
+  type: IconType,
 |};
 
 export default function Icon({ className = '', type }: Props) {
@@ -17,9 +27,18 @@ export default function Icon({ className = '', type }: Props) {
     case 'elements':
       pathData = PATH_ELEMENTS;
       break;
+    case 'flame-chart':
+      pathData = PATH_FLAME_CHART;
+      break;
+    case 'interactions':
+      pathData = PATH_INTERACTIONS;
+      break;
     case 'profiler':
       pathData = PATH_PROFILER;
       break;
+    case 'ranked-chart':
+      pathData = PATH_RANKED_CHART;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
@@ -46,14 +65,41 @@ export default function Icon({ className = '', type }: Props) {
 }
 
 const PATH_ARROW = 'M8 5v14l11-7z';
+
 const PATH_ELEMENTS =
   'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';
+
+const PATH_FLAME_CHART = `
+  M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627
+  5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,
+  10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569
+  19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462
+  C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087
+  12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412
+  C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763
+  C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669
+  12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669
+  13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z
+`;
+
+const PATH_INTERACTIONS = `
+  M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2
+  2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55
+  4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02
+  9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55
+  2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z
+`;
+
 const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
+
 const PATH_SEARCH = `
   M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91
   16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99
   5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z
 `;
+
+const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';
+
 const PATH_SETTINGS = `
   M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
   2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 440c241c0379..e72ed4eb76d2 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -2,11 +2,62 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--color-border);
+  flex-direction: column;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
   color: var(--color-text-color);
 }
+
+.Content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.Column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.Toolbar {
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+  color: var(--color-button);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+  margin: 0 0.25rem;
+}
+
+.Spacer {
+  flex: 1;
+}
+
+.StopRecordingButton {
+  font-size: var(--font-size-sans-large);
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index bd89d54cbbab..fff247ba7a77 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,11 +1,89 @@
 // @flow
 
-import React from 'react';
+import React, { useContext, useState } from 'react';
+import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import TabBar from '../TabBar';
+import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
 
 export type Props = {||};
 
-export default function Profiler(_: Props) {
-  return <div className={styles.Profiler}>Under development...</div>;
+export default function ProfilerOuter(_: Props) {
+  return (
+    <ProfilerContextController>
+      <ProfilerInner />
+    </ProfilerContextController>
+  );
 }
+
+function ProfilerInner(_: Props) {
+  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+  const [tab, setTab] = useState('flame-chart');
+
+  let view = null;
+  if (isProfiling) {
+    view = <RecortdingInProgress />;
+  } else if (!hasProfilingData) {
+    view = <NoProfilingData />;
+  } else {
+    // TODO (profiling) Differentiate between no data and no data for the current root
+    // TODO (profiling) Show selected "tab" view
+    view = <div>Coming soon...</div>;
+  }
+
+  return (
+    <div className={styles.Profiler}>
+      <div className={styles.Toolbar}>
+        <RecordToggle />
+        <Button disabled title="Reload and start profiling">
+          {/* TODO (profiling) Wire up reload button */}
+          <ButtonIcon type="reload" />
+        </Button>
+        <div className={styles.VRule} />
+        <TabBar
+          currentTab={tab}
+          disabled={isProfiling || !hasProfilingData}
+          id="Profiler"
+          selectTab={setTab}
+          size="small"
+          tabs={tabs}
+        />
+        <div className={styles.Spacer} />
+        <Button disabled title="Filter commits by duration">
+          {/* TODO (profiling) Wire up filter button */}
+          <ButtonIcon type="filter" />
+        </Button>
+      </div>
+      <div className={styles.Content}>{view}</div>
+    </div>
+  );
+}
+
+const tabs = [
+  { id: 'flame-chart', icon: 'flame-chart', label: 'Flamegraph' },
+  { id: 'ranked-chart', icon: 'ranked-chart', label: 'Ranked' },
+  { id: 'interactions', icon: 'interactions', label: 'Interactions' },
+];
+
+const NoProfilingData = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>No profiling data has been recorded.</div>
+    <div className={styles.Row}>
+      Click the record button <RecordToggle /> to start recording.
+    </div>
+  </div>
+);
+
+const RecortdingInProgress = () => {
+  return (
+    <div className={styles.Column}>
+      <div className={styles.Header}>Profiling is in progress...</div>
+      <div className={styles.Row}>
+        Click the record button <RecordToggle /> to stop recording.
+      </div>
+    </div>
+  );
+};
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
new file mode 100644
index 000000000000..e491f407090c
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -0,0 +1,105 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+} from 'react';
+import { BridgeContext, StoreContext } from '../context';
+import reducer from './reducer';
+
+import type {
+  HANDLE_OPERATIONS_ACTION,
+  HANDLE_PROFILING_STATUS_CHANGE_ACTION,
+  SEND_START_PROFILING_ACTION,
+  SEND_STOP_PROFILING_ACTION,
+} from './reducer';
+
+type Context = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+  startProfiling(value: boolean): void,
+  stopProfiling(value: boolean): void,
+|};
+
+const ProfilerContext = createContext<Context>(((null: any): Context));
+ProfilerContext.displayName = 'ProfilerContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ProfilerContextController({ children }: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  // Some of this reducer's actions require access to the store.
+  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
+  // so we don't need to re-init the reducer in any special way.
+  const [state, dispatch] = useReducer(reducer, {
+    hasProfilingData: false,
+    isProfiling: false,
+    _operations: [],
+    _snapshot: new Map(),
+  });
+
+  const startProfiling = useCallback(() => {
+    bridge.send('startProfiling');
+    dispatch(({ type: 'SEND_START_PROFILING' }: SEND_START_PROFILING_ACTION));
+  }, [bridge, dispatch]);
+  const stopProfiling = useCallback(() => {
+    bridge.send('stopProfiling');
+    dispatch(({ type: 'SEND_STOP_PROFILING' }: SEND_STOP_PROFILING_ACTION));
+  }, [bridge, dispatch]);
+
+  const value = useMemo(
+    () => ({
+      hasProfilingData: state.hasProfilingData,
+      isProfiling: state.isProfiling,
+      startProfiling,
+      stopProfiling,
+    }),
+    [state, startProfiling, stopProfiling]
+  );
+
+  useLayoutEffect(() => {
+    const handleOperations = (operations: Uint32Array) =>
+      dispatch(
+        ({
+          type: 'HANDLE_OPERATIONS',
+          payload: operations,
+        }: HANDLE_OPERATIONS_ACTION)
+      );
+
+    const handleProfilingStatus = (isProfiling: boolean) =>
+      dispatch(
+        ({
+          type: 'HANDLE_PROFILING_STATUS_CHANGE',
+          payload: { isProfiling, store },
+        }: HANDLE_PROFILING_STATUS_CHANGE_ACTION)
+      );
+
+    bridge.addListener('operations', handleOperations);
+    bridge.addListener('profilingStatus', handleProfilingStatus);
+
+    // It's possible that profiling has already started (e.g. "reload and start profiling")
+    // so the frontend needs to ask the backend for its status after mounting.
+    bridge.send('getProfilingStatus');
+
+    return () => {
+      bridge.removeListener('operations', handleOperations);
+      bridge.removeListener('profilingStatus', handleProfilingStatus);
+    };
+  }, [bridge, dispatch, store]);
+
+  return (
+    <ProfilerContext.Provider value={value}>
+      {children}
+    </ProfilerContext.Provider>
+  );
+}
+
+export { ProfilerContext, ProfilerContextController };
diff --git a/src/devtools/views/Profiler/RecordToggle.css b/src/devtools/views/Profiler/RecordToggle.css
new file mode 100644
index 000000000000..bc16dfd3ac6f
--- /dev/null
+++ b/src/devtools/views/Profiler/RecordToggle.css
@@ -0,0 +1,21 @@
+.ActiveRecordToggle {
+  color: var(--color-record-active);
+}
+.ActiveRecordToggle:hover,
+.ActiveRecordToggle:focus {
+  color: var(--color-record-active);
+}
+.ActiveRecordToggle:active {
+  color: var(--color-record-hover);
+}
+
+.InactiveRecordToggle {
+  color: var(--color-record-inactive);
+}
+.InactiveRecordToggle:hover,
+.InactiveRecordToggle:focus {
+  color: var(--color-record-inactive);
+}
+.InactiveRecordToggle:active {
+  color: var(--color-record-hover);
+}
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
new file mode 100644
index 000000000000..4d1bb591d92f
--- /dev/null
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -0,0 +1,28 @@
+// @flow
+
+import React, { useContext } from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import { ProfilerContext } from './ProfilerContext';
+
+import styles from './RecordToggle.css';
+
+export type Props = {||};
+
+export default function RecordToggle(_: Props) {
+  const { isProfiling, startProfiling, stopProfiling } = useContext(
+    ProfilerContext
+  );
+
+  return (
+    <Button
+      className={
+        isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
+      }
+      onClick={isProfiling ? stopProfiling : startProfiling}
+      title={isProfiling ? 'Stop profiling' : 'Start profiling'}
+    >
+      <ButtonIcon type="record" />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Profiler/reducer.js b/src/devtools/views/Profiler/reducer.js
new file mode 100644
index 000000000000..9a3ac1bcabd7
--- /dev/null
+++ b/src/devtools/views/Profiler/reducer.js
@@ -0,0 +1,112 @@
+// @flow
+
+import Store from '../../store';
+
+type Node = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+|};
+
+export type State = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+
+  // List of tree mutation that occur during profiling.
+  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
+  // to reconstruct the state of each root for each commit.
+  _operations: Array<Uint32Array>,
+
+  // Snapshot of the state of the main Store (including all roots) when profiling started.
+  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
+  // to reconstruct the state of each root for each commit.
+  // It's okay to use a single root to store this information because node IDs are unique across all roots.
+  _snapshot: Map<number, Node>,
+|};
+
+export type HANDLE_OPERATIONS_ACTION = {|
+  type: 'HANDLE_OPERATIONS',
+  payload: Uint32Array,
+|};
+
+export type HANDLE_PROFILING_STATUS_CHANGE_ACTION = {|
+  type: 'HANDLE_PROFILING_STATUS_CHANGE',
+  payload: {
+    isProfiling: boolean,
+    store: Store,
+  },
+|};
+
+export type SEND_START_PROFILING_ACTION = {|
+  type: 'SEND_START_PROFILING',
+|};
+
+export type SEND_STOP_PROFILING_ACTION = {|
+  type: 'SEND_STOP_PROFILING',
+|};
+
+type Action =
+  | HANDLE_OPERATIONS_ACTION
+  | HANDLE_PROFILING_STATUS_CHANGE_ACTION
+  | SEND_START_PROFILING_ACTION
+  | SEND_STOP_PROFILING_ACTION;
+
+export default function reducer(state: State, action: Action): State {
+  const { type } = action;
+  switch (type) {
+    case 'HANDLE_OPERATIONS':
+      if (state.isProfiling) {
+        const operations = ((action: any): HANDLE_OPERATIONS_ACTION).payload;
+        return {
+          ...state,
+          hasProfilingData: true,
+          _operations: state._operations.concat(operations),
+        };
+      } else {
+        return state;
+      }
+    case 'HANDLE_PROFILING_STATUS_CHANGE':
+      const {
+        isProfiling,
+        store,
+      } = ((action: any): HANDLE_PROFILING_STATUS_CHANGE_ACTION).payload;
+
+      if (isProfiling) {
+        const snapshot = new Map();
+
+        const recursiveSnapshot = id => {
+          const element = store.getElementByID(id);
+          if (element !== null) {
+            snapshot.set(id, {
+              id,
+              children: element.children.slice(0),
+              displayName: element.displayName,
+              key: element.key,
+            });
+            element.children.forEach(id => recursiveSnapshot(id));
+          }
+        };
+
+        store.roots.forEach(rootID => recursiveSnapshot(rootID));
+
+        return {
+          ...state,
+          isProfiling,
+          _operations: [],
+          _snapshot: snapshot,
+        };
+      } else {
+        return {
+          ...state,
+          isProfiling,
+        };
+      }
+    case 'SEND_START_PROFILING':
+      return { ...state, hasProfilingData: false, isProfiling: true };
+    case 'SEND_STOP_PROFILING':
+      return { ...state, isProfiling: false };
+    default:
+      throw new Error(`Unrecognized action "${type}"`);
+  }
+}
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
new file mode 100644
index 000000000000..78dd15abb44c
--- /dev/null
+++ b/src/devtools/views/Profiler/types.js
@@ -0,0 +1,29 @@
+// @flow
+
+// Map of root ID to commit durations.
+// Roots that were committed during the profiling session will have a non-empty array of values.
+// Each value in the array represents the total amount of time the commit took.
+// More detailed information about a commit must be requested separately.
+export type CommitDurationsMap = Map<number, Array<number>>;
+
+export type Interaction = {|
+  id: number,
+  timestamp: number,
+  label: string,
+|};
+
+export type Node = {|
+  actualDuration: number,
+  baseDuration: number,
+  displayName: string,
+  id: number,
+  parentID: number,
+  selfDuration: number,
+|};
+
+export type CommitDetails = {|
+  duration: number,
+  interactions: Array<Interaction>,
+  root: Node,
+  timestamp: number,
+|};
diff --git a/src/devtools/views/ReactLogo.css b/src/devtools/views/ReactLogo.css
index 407562437c0e..0c667c3851d0 100644
--- a/src/devtools/views/ReactLogo.css
+++ b/src/devtools/views/ReactLogo.css
@@ -2,4 +2,5 @@
   width: 1.75rem;
   height: 1.75rem;
   margin: 0 0.75rem 0 0.25rem;
+  color: var(--color-button);
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 32f1df193004..32e13338c18e 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -141,6 +141,9 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-dimmest');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
+  updateStyleHelper(theme, 'color-record-active');
+  updateStyleHelper(theme, 'color-record-hover');
+  updateStyleHelper(theme, 'color-record-inactive');
   updateStyleHelper(theme, 'color-tree-node-selected');
   updateStyleHelper(theme, 'color-tree-node-hover');
   updateStyleHelper(theme, 'color-search-match');
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index bea7b877cc41..2bee6ff81f32 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -1,40 +1,17 @@
-.TabBar {
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  background-color: var(--color-background);
-  color: var(--color-button);
-  border-top: 1px solid var(--color-border);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-large);
-}
-
-.DevToolsVersion:before {
-  content: 'DevTools ';
-}
-
-.Tabs {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  overflow-x: auto;
-}
-
+.Tab,
 .TabCurrent,
-.Tab {
+.TabDisabled {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
   cursor: pointer;
   border-top: 3px solid transparent;
   border-bottom: 3px solid transparent;
   cursor: pointer;
   user-select: none;
+  color: var(--color-text-color);
 }
-.TabCurrent:hover,
-.Tab:hover {
+.Tab:hover,
+.TabCurrent:hover {
   background-color: var(--color-tree-node-hover);
 }
 
@@ -42,23 +19,50 @@
   border-bottom: 3px solid var(--color-tree-node-selected);
 }
 
+.TabDisabled {
+  color: var(--color-dim);
+  cursor: default;
+}
+
+.TabSizeLarge {
+  padding: 0.5rem 1rem;
+}
+.TabSizeSmall {
+  padding: 0.25rem 0.5rem;
+}
+
 .Input {
   width: 0;
   margin: 0;
   opacity: 0;
 }
 
-.Icon {
+.IconSizeLarge,
+.IconSizeSmall {
   margin-right: 0.5rem;
+  color: var(--color-button);
+}
+
+.IconDisabled {
+  color: var(--color-dim);
+}
+
+.IconSizeLarge {
   width: 1.5rem;
   height: 1.5rem;
 }
 
+.IconSizeSmall {
+  width: 1rem;
+  height: 1rem;
+}
+
 .TabLabel {
 }
 
 @media screen and (max-width: 600px) {
-  .Icon {
+  .IconSizeLarge,
+  .IconSizeSmall {
     margin-right: 0;
   }
 
@@ -66,9 +70,3 @@
     display: none;
   }
 }
-
-@media screen and (max-width: 350px) {
-  .DevToolsVersion:before {
-    content: '';
-  }
-}
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index 63b21ecd9fc9..faf45fe62b5b 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -1,77 +1,90 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, { Fragment, useCallback } from 'react';
 import Icon from './Icon';
-import ReactLogo from './ReactLogo';
 
 import styles from './TabBar.css';
 
-import type { TabID } from './DevTools';
+import type { IconType } from './Icon';
+
+type TabInfo = {|
+  icon: IconType,
+  id: string,
+  label: string,
+  title?: string,
+|};
 
 export type Props = {|
-  currentTab: TabID,
-  selectTab: (tabID: TabID) => void,
+  currentTab: any,
+  disabled?: boolean,
+  id: string,
+  selectTab: (tabID: any) => void,
+  size: 'large' | 'small',
+  tabs: Array<TabInfo>,
 |};
 
-export default function TabBar({ currentTab, selectTab }: Props) {
+export default function TabBar({
+  currentTab,
+  disabled = false,
+  id: groupName,
+  selectTab,
+  size,
+  tabs,
+}: Props) {
+  if (!tabs.some(tab => tab.id === currentTab)) {
+    selectTab(tabs[0].id);
+  }
+
   const onChange = useCallback(
     ({ currentTarget }) => selectTab(currentTarget.value),
     [selectTab]
   );
 
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  }, []);
+
+  const tabClassName =
+    size === 'large' ? styles.TabSizeLarge : styles.TabSizeSmall;
+
   return (
-    <div className={styles.TabBar}>
-      <ReactLogo />
-      <span className={styles.DevToolsVersion}>
-        {process.env.DEVTOOLS_VERSION}
-      </span>
-      <div className={styles.Tabs}>
-        <label
-          className={currentTab === 'elements' ? styles.TabCurrent : styles.Tab}
-          title="React Elements"
-        >
-          <input
-            type="radio"
-            name="TabBar-tab"
-            className={styles.Input}
-            checked={currentTab === 'elements'}
-            value="elements"
-            onChange={onChange}
-          />
-          <Icon className={styles.Icon} type="elements" />
-          <span className={styles.TabLabel}>Elements</span>
-        </label>
+    <Fragment>
+      {tabs.map(({ icon, id, label, title }) => (
         <label
-          className={currentTab === 'profiler' ? styles.TabCurrent : styles.Tab}
-          title="React Profiler"
+          className={`${tabClassName} ${
+            disabled ? styles.TabDisabled : styles.Tab
+          } ${!disabled && currentTab === id ? styles.TabCurrent : ''}`}
+          key={id}
+          onKeyDown={handleKeyDown}
+          title={title || label}
         >
           <input
             type="radio"
-            name="TabBar-tab"
             className={styles.Input}
-            checked={currentTab === 'profiler'}
-            value="profiler"
+            checked={currentTab === id}
+            disabled={disabled}
+            name={groupName}
+            value={id}
             onChange={onChange}
           />
-          <Icon className={styles.Icon} type="profiler" />
-          <span className={styles.TabLabel}>Profiler</span>
-        </label>
-        <label
-          className={currentTab === 'settings' ? styles.TabCurrent : styles.Tab}
-          title="React Settings"
-        >
-          <input
-            type="radio"
-            name="TabBar-tab"
-            className={styles.Input}
-            checked={currentTab === 'settings'}
-            value="settings"
-            onChange={onChange}
+          <Icon
+            className={`${disabled ? styles.IconDisabled : ''} ${
+              size === 'large' ? styles.IconSizeLarge : styles.IconSizeSmall
+            }`}
+            type={icon}
           />
-          <Icon className={styles.Icon} type="settings" />
-          <span className={styles.TabLabel}>Settings</span>
+          <span className={styles.TabLabel}>{label}</span>
         </label>
-      </div>
-    </div>
+      ))}
+    </Fragment>
   );
 }
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index cf5e4d939a13..40b093d10c80 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -23,6 +23,9 @@
   --light-color-dimmest: #eff0f1;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-record-active: #fc3a4b;
+  --light-color-record-hover: #000000;
+  --light-color-record-inactive: #cfd1d5;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-text-color: #000000;
@@ -49,6 +52,9 @@
   --dark-color-dimmest: #4f5766;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-record-active: #fc3a4b;
+  --dark-color-record-hover: #ffffff;
+  --dark-color-record-inactive: #777d88;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-text-color: #ffffff;

From 565d739569ca6707ff7fc75f776dce1791ba1049 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 10 Mar 2019 10:13:20 -0700
Subject: [PATCH 130/814] Added commit time filter

---
 src/devtools/views/Profiler/FilterModal.css   | 31 ++++++++
 src/devtools/views/Profiler/FilterModal.js    | 75 +++++++++++++++++++
 src/devtools/views/Profiler/Profiler.css      |  1 +
 src/devtools/views/Profiler/Profiler.js       | 33 ++++----
 .../views/Settings/SettingsContext.js         |  1 +
 src/devtools/views/hooks.js                   | 33 +++++++-
 src/devtools/views/root.css                   |  2 +
 7 files changed, 162 insertions(+), 14 deletions(-)
 create mode 100644 src/devtools/views/Profiler/FilterModal.css
 create mode 100644 src/devtools/views/Profiler/FilterModal.js

diff --git a/src/devtools/views/Profiler/FilterModal.css b/src/devtools/views/Profiler/FilterModal.css
new file mode 100644
index 000000000000..4403bb4064f9
--- /dev/null
+++ b/src/devtools/views/Profiler/FilterModal.css
@@ -0,0 +1,31 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-modal-background);
+}
+
+.Modal {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: inline-block;
+  background-color: var(--color-background);
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+}
+
+.Input {
+  width: 40px;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+.Input:focus {
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}
diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
new file mode 100644
index 000000000000..34a25e52a7e9
--- /dev/null
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -0,0 +1,75 @@
+// @flow
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useLocalStorage, useModalDismissSignal } from '../hooks';
+
+import styles from './FilterModal.css';
+
+type Props = {|
+  dismissModal: Function,
+|};
+
+export default function FilterModal({ dismissModal }: Props) {
+  const [isEnabled, setIsEnabled] = useLocalStorage<boolean>(
+    'minCommitDurationFilterEnabled',
+    false
+  );
+  const [value, setValue] = useLocalStorage<number>(
+    'minCommitDurationFilter',
+    0
+  );
+
+  const handleNumberChange = useCallback(
+    ({ currentTarget }) => {
+      const newValue = parseInt(currentTarget.value, 10);
+      setValue(Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue);
+    },
+    [setValue]
+  );
+
+  const handleEnabledChange = useCallback(
+    ({ currentTarget }) => {
+      setIsEnabled(currentTarget.checked);
+      if (currentTarget.checked) {
+        if (inputRef.current !== null) {
+          inputRef.current.focus();
+        }
+      }
+    },
+    [setIsEnabled]
+  );
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  useModalDismissSignal(modalRef, dismissModal);
+
+  useEffect(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Modal} ref={modalRef}>
+        <label>
+          <input
+            checked={isEnabled}
+            onChange={handleEnabledChange}
+            type="checkbox"
+          />{' '}
+          Hide commits below
+        </label>{' '}
+        <input
+          className={styles.Input}
+          onChange={handleNumberChange}
+          ref={inputRef}
+          type="number"
+          value={value}
+        />{' '}
+        (ms)
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index e72ed4eb76d2..107a092f9908 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -10,6 +10,7 @@
 }
 
 .Content {
+  position: relative;
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index fff247ba7a77..388d6c9d3dd0 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,10 +1,11 @@
 // @flow
 
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
+import FilterModal from './FilterModal';
 import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
@@ -22,6 +23,10 @@ export default function ProfilerOuter(_: Props) {
 function ProfilerInner(_: Props) {
   const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
   const [tab, setTab] = useState('flame-chart');
+  const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
+
+  const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
+  const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
   let view = null;
   if (isProfiling) {
@@ -52,12 +57,16 @@ function ProfilerInner(_: Props) {
           tabs={tabs}
         />
         <div className={styles.Spacer} />
-        <Button disabled title="Filter commits by duration">
-          {/* TODO (profiling) Wire up filter button */}
+        <Button onClick={showFilterModal} title="Filter commits by duration">
           <ButtonIcon type="filter" />
         </Button>
       </div>
-      <div className={styles.Content}>{view}</div>
+      <div className={styles.Content}>
+        {view}
+        {isFilterModalShowing && (
+          <FilterModal dismissModal={dismissFilterModal} />
+        )}
+      </div>
     </div>
   );
 }
@@ -77,13 +86,11 @@ const NoProfilingData = () => (
   </div>
 );
 
-const RecortdingInProgress = () => {
-  return (
-    <div className={styles.Column}>
-      <div className={styles.Header}>Profiling is in progress...</div>
-      <div className={styles.Row}>
-        Click the record button <RecordToggle /> to stop recording.
-      </div>
+const RecortdingInProgress = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Profiling is in progress...</div>
+    <div className={styles.Row}>
+      Click the record button <RecordToggle /> to stop recording.
     </div>
-  );
-};
+  </div>
+);
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 32e13338c18e..2c5b16b1b0f0 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -141,6 +141,7 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-dimmest');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
+  updateStyleHelper(theme, 'color-modal-background');
   updateStyleHelper(theme, 'color-record-active');
   updateStyleHelper(theme, 'color-record-hover');
   updateStyleHelper(theme, 'color-record-inactive');
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index c3900add8e30..0218aef2e696 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { useCallback, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
@@ -52,3 +52,34 @@ export function useLocalStorage<T>(
 
   return [storedValue, setValue];
 }
+
+export function useModalDismissSignal(
+  modalRef: React$Ref<any>,
+  dismissCallback: Function
+): void {
+  useEffect(() => {
+    const handleKeyDown = ({ key }: any) => {
+      if (key === 'Escape') {
+        dismissCallback();
+      }
+    };
+
+    const handleMouseOrTouch = ({ target }: any) => {
+      // $FlowFixMe
+      if (modalRef.current !== null && !modalRef.current.contains(target)) {
+        dismissCallback();
+      }
+    };
+
+    const body = ((document.body: any): HTMLBodyElement);
+    body.addEventListener('keydown', handleKeyDown);
+    body.addEventListener('mousedown', handleMouseOrTouch);
+    body.addEventListener('touchstart', handleMouseOrTouch);
+
+    return () => {
+      body.removeEventListener('keydown', handleKeyDown);
+      body.removeEventListener('mousedown', handleMouseOrTouch);
+      body.removeEventListener('touchstart', handleMouseOrTouch);
+    };
+  }, [modalRef, dismissCallback]);
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 40b093d10c80..5c01902c1f5d 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -23,6 +23,7 @@
   --light-color-dimmest: #eff0f1;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-modal-background: rgba(255, 255, 255, 0.25);
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #000000;
   --light-color-record-inactive: #cfd1d5;
@@ -52,6 +53,7 @@
   --dark-color-dimmest: #4f5766;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-modal-background: rgba(0, 0, 0, 0.25);
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #ffffff;
   --dark-color-record-inactive: #777d88;

From e5280307c920279c6607c612fe066847505b1ee3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 10 Mar 2019 19:16:34 -0700
Subject: [PATCH 131/814] Added snapshot selector placeholder UI

---
 src/devtools/views/ButtonIcon.js              | 13 ++++++++
 src/devtools/views/Profiler/Profiler.js       | 30 ++++++++++++++++---
 .../views/Profiler/SnapshotSelector.css       | 14 +++++++++
 .../views/Profiler/SnapshotSelector.js        | 26 ++++++++++++++++
 src/devtools/views/Profiler/reducer.js        |  2 ++
 5 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/devtools/views/Profiler/SnapshotSelector.css
 create mode 100644 src/devtools/views/Profiler/SnapshotSelector.js

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index d97b31bb1a67..98bb14e5ed51 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -10,6 +10,8 @@ export type IconType =
   | 'down'
   | 'filter'
   | 'more'
+  | 'next'
+  | 'previous'
   | 'record'
   | 'reload'
   | 'search'
@@ -43,6 +45,12 @@ export default function ButtonIcon({ type }: Props) {
     case 'more':
       pathData = PATH_MORE;
       break;
+    case 'next':
+      pathData = PATH_NEXT;
+      break;
+    case 'previous':
+      pathData = PATH_PREVIOUS;
+      break;
     case 'record':
       pathData = PATH_RECORD;
       break;
@@ -108,6 +116,11 @@ const PATH_MORE = `
   1.5.67 1.5 1.5-.67 1.5-1.5 1.5z
 `;
 
+const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';
+
+const PATH_PREVIOUS =
+  'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';
+
 const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';
 
 const PATH_RELOAD = `
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 388d6c9d3dd0..1f31ebe24557 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,12 +1,13 @@
 // @flow
 
-import React, { useCallback, useContext, useState } from 'react';
+import React, { Fragment, useCallback, useContext, useState } from 'react';
 import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
 import FilterModal from './FilterModal';
 import RecordToggle from './RecordToggle';
+import SnapshotSelector from './SnapshotSelector';
 
 import styles from './Profiler.css';
 
@@ -60,6 +61,12 @@ function ProfilerInner(_: Props) {
         <Button onClick={showFilterModal} title="Filter commits by duration">
           <ButtonIcon type="filter" />
         </Button>
+        {hasProfilingData && (
+          <Fragment>
+            <div className={styles.VRule} />
+            <SnapshotSelector />
+          </Fragment>
+        )}
       </div>
       <div className={styles.Content}>
         {view}
@@ -72,9 +79,24 @@ function ProfilerInner(_: Props) {
 }
 
 const tabs = [
-  { id: 'flame-chart', icon: 'flame-chart', label: 'Flamegraph' },
-  { id: 'ranked-chart', icon: 'ranked-chart', label: 'Ranked' },
-  { id: 'interactions', icon: 'interactions', label: 'Interactions' },
+  {
+    id: 'flame-chart',
+    icon: 'flame-chart',
+    label: 'Flamegraph',
+    title: 'Flamegraph chart',
+  },
+  {
+    id: 'ranked-chart',
+    icon: 'ranked-chart',
+    label: 'Ranked',
+    title: 'Ranked chart',
+  },
+  {
+    id: 'interactions',
+    icon: 'interactions',
+    label: 'Interactions',
+    title: 'Profiled interactions',
+  },
 ];
 
 const NoProfilingData = () => (
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
new file mode 100644
index 000000000000..96998d93bcdd
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -0,0 +1,14 @@
+.SnapshotSelector {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-color);
+  margin-left: 0.5rem;
+}
+
+.Button {
+  margin-left: 0.25rem;
+}
+
+.Commits {
+  margin-left: 0.25rem;
+}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
new file mode 100644
index 000000000000..64d68b109e57
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './SnapshotSelector.css';
+
+export type Props = {||};
+
+export default function SnapshotSelector(_: Props) {
+  return (
+    <div className={styles.SnapshotSelector}>
+      1 / 3
+      <Button className={styles.Button}>
+        <ButtonIcon type="previous" />
+      </Button>
+      <div className={styles.Commits}>
+        [] {/* TODO (profiling) Add FixedSizeList selector */}
+      </div>
+      <Button className={styles.Button}>
+        <ButtonIcon type="next" />
+      </Button>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/reducer.js b/src/devtools/views/Profiler/reducer.js
index 9a3ac1bcabd7..117a55e37320 100644
--- a/src/devtools/views/Profiler/reducer.js
+++ b/src/devtools/views/Profiler/reducer.js
@@ -52,6 +52,8 @@ type Action =
   | SEND_START_PROFILING_ACTION
   | SEND_STOP_PROFILING_ACTION;
 
+// TODO (profiling) Lift this state up so it's shared between tabs.
+
 export default function reducer(state: State, action: Action): State {
   const { type } = action;
   switch (type) {

From 22a3c757fb6df9af7cdef12a6ec589e8d7487df9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 11 Mar 2019 09:50:20 -0700
Subject: [PATCH 132/814] Tidied up Profiler toolbar UI

---
 src/devtools/views/Profiler/Profiler.css | 23 ++++++-
 src/devtools/views/Profiler/Profiler.js  | 78 ++++++++++++++----------
 src/devtools/views/TabBar.css            |  1 +
 3 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 107a092f9908..7829df4dff23 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -2,13 +2,28 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: stretch;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
   color: var(--color-text-color);
 }
 
+.LeftColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 2 1 200px;
+}
+
+.RightColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100px;
+  max-width: 300px;
+  border-left: 1px solid var(--color-border);
+}
+
 .Content {
   position: relative;
   flex: 1 1 auto;
@@ -38,13 +53,17 @@
 }
 
 .Toolbar {
+  height: 2.25rem;
   padding: 0 0.5rem;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
   border-top: 1px solid var(--color-border);
-  color: var(--color-button);
+}
+
+.InspectedProperties {
+  padding: 0.5rem;
 }
 
 .VRule {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 1f31ebe24557..8cc1e54aa5e5 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -29,6 +29,9 @@ function ProfilerInner(_: Props) {
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
+  // TODO (profiling) Maybe a smarter check here
+  const showProfilingData = !isProfiling && hasProfilingData;
+
   let view = null;
   if (isProfiling) {
     view = <RecortdingInProgress />;
@@ -42,38 +45,51 @@ function ProfilerInner(_: Props) {
 
   return (
     <div className={styles.Profiler}>
-      <div className={styles.Toolbar}>
-        <RecordToggle />
-        <Button disabled title="Reload and start profiling">
-          {/* TODO (profiling) Wire up reload button */}
-          <ButtonIcon type="reload" />
-        </Button>
-        <div className={styles.VRule} />
-        <TabBar
-          currentTab={tab}
-          disabled={isProfiling || !hasProfilingData}
-          id="Profiler"
-          selectTab={setTab}
-          size="small"
-          tabs={tabs}
-        />
-        <div className={styles.Spacer} />
-        <Button onClick={showFilterModal} title="Filter commits by duration">
-          <ButtonIcon type="filter" />
-        </Button>
-        {hasProfilingData && (
-          <Fragment>
-            <div className={styles.VRule} />
-            <SnapshotSelector />
-          </Fragment>
-        )}
-      </div>
-      <div className={styles.Content}>
-        {view}
-        {isFilterModalShowing && (
-          <FilterModal dismissModal={dismissFilterModal} />
-        )}
+      <div className={styles.LeftColumn}>
+        <div className={styles.Toolbar}>
+          <RecordToggle />
+          <Button disabled title="Reload and start profiling">
+            {/* TODO (profiling) Wire up reload button */}
+            <ButtonIcon type="reload" />
+          </Button>
+          <div className={styles.VRule} />
+          <TabBar
+            currentTab={tab}
+            disabled={!showProfilingData}
+            id="Profiler"
+            selectTab={setTab}
+            size="small"
+            tabs={tabs}
+          />
+          <div className={styles.Spacer} />
+          <Button onClick={showFilterModal} title="Filter commits by duration">
+            <ButtonIcon type="filter" />
+          </Button>
+          {showProfilingData && (
+            <Fragment>
+              <div className={styles.VRule} />
+              <SnapshotSelector />
+            </Fragment>
+          )}
+        </div>
+        <div className={styles.Content}>
+          {view}
+          {isFilterModalShowing && ( // TODO (profiler) Position when snapshot graph is open
+            <FilterModal dismissModal={dismissFilterModal} />
+          )}
+        </div>
       </div>
+      {showProfilingData && (
+        <div className={styles.RightColumn}>
+          {/* TODO (profiler) Dynamic information */}
+          <div className={styles.Toolbar}>Commit information</div>
+          <div className={styles.InspectedProperties}>
+            Committed at: 0.8s <br />
+            <br />
+            Render duration: 2.1ms
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 2bee6ff81f32..8b1fd706ac1c 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -1,6 +1,7 @@
 .Tab,
 .TabCurrent,
 .TabDisabled {
+  height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;

From 896c9a79b27921361751c613f9359ef29d40509a Mon Sep 17 00:00:00 2001
From: Anup <allamsetty.anup@gmail.com>
Date: Mon, 11 Mar 2019 23:37:39 +0530
Subject: [PATCH 133/814] Fixes #19 - Break the text into next line for long
 props

---
 src/devtools/views/Elements/KeyValue.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Elements/KeyValue.css b/src/devtools/views/Elements/KeyValue.css
index d8d94b11a2ae..7a9e2dbf4acf 100644
--- a/src/devtools/views/Elements/KeyValue.css
+++ b/src/devtools/views/Elements/KeyValue.css
@@ -14,6 +14,7 @@
 
 .Value {
   color: var(--color-attribute-value);
+  word-break: break-all;
 }
 
 .None {

From f5ba99e6babec6c4831dce26c83f3ab0758bdddb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 11 Mar 2019 11:26:30 -0700
Subject: [PATCH 134/814] Moved some things from ProfilerContext reducer into
 (root) Store

---
 src/devtools/store.js                         |  64 +++++++++-
 .../views/Profiler/ProfilerContext.js         |  65 ++--------
 src/devtools/views/Profiler/reducer.js        | 114 ------------------
 3 files changed, 72 insertions(+), 171 deletions(-)
 delete mode 100644 src/devtools/views/Profiler/reducer.js

diff --git a/src/devtools/store.js b/src/devtools/store.js
index c9004475d28f..334eecbe34ed 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -25,6 +25,13 @@ const debug = (methodName, ...args) => {
   }
 };
 
+type ProfilingSnapshotNode = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+|};
+
 export type Capabilities = {|
   supportsProfiling: boolean,
 |};
@@ -40,10 +47,24 @@ export default class Store extends EventEmitter {
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
 
+  // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
+  _isProfiling: boolean = false;
+
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
   _numElements: number = 0;
 
+  // List of tree mutation that occur during profiling.
+  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
+  // to reconstruct the state of each root for each commit.
+  _profilingOperations: Map<number, Array<Uint32Array>> = new Map();
+
+  // Snapshot of the state of the main Store (including all roots) when profiling started.
+  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
+  // to reconstruct the state of each root for each commit.
+  // It's okay to use a single root to store this information because node IDs are unique across all roots.
+  _profilingSnapshot: Map<number, ProfilingSnapshotNode> = new Map();
+
   // Incremented each time the store is mutated.
   // This enables a passive effect to detect a mutation between render and commit phase.
   _revision: number = 0;
@@ -65,8 +86,13 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     this._bridge = bridge;
-    this._bridge.addListener('operations', this.onBridgeOperations);
-    this._bridge.addListener('shutdown', this.onBridgeShutdown);
+    bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener('profilingStatus', this.onProfilingStatus);
+    bridge.addListener('shutdown', this.onBridgeShutdown);
+
+    // It's possible that profiling has already started (e.g. "reload and start profiling")
+    // so the frontend needs to ask the backend for its status after mounting.
+    bridge.send('getProfilingStatus');
   }
 
   get numElements(): number {
@@ -216,6 +242,20 @@ export default class Store extends EventEmitter {
     return null;
   }
 
+  _takeProfilingSnapshotRecursive = (id: number) => {
+    const element = this.getElementByID(id);
+    if (element !== null) {
+      this._profilingSnapshot.set(id, {
+        id,
+        children: element.children.slice(0),
+        displayName: element.displayName,
+        key: element.key,
+      });
+
+      element.children.forEach(this._takeProfilingSnapshotRecursive);
+    }
+  };
+
   onBridgeOperations = (operations: Uint32Array) => {
     if (!(operations instanceof Uint32Array)) {
       // $FlowFixMe TODO HACK Temporary workaround for the fact that Chrome is not transferring the typed array.
@@ -228,6 +268,15 @@ export default class Store extends EventEmitter {
 
     const rendererID = operations[0];
 
+    if (this._isProfiling) {
+      const profilingOperations = this._profilingOperations.get(rendererID);
+      if (profilingOperations == null) {
+        this._profilingOperations.set(rendererID, [operations]);
+      } else {
+        profilingOperations.push(operations);
+      }
+    }
+
     let addedElementIDs: Uint32Array = new Uint32Array(0);
     let removedElementIDs: Uint32Array = new Uint32Array(0);
 
@@ -432,10 +481,21 @@ export default class Store extends EventEmitter {
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
+  onProfilingStatus = (isProfiling: boolean) => {
+    this._isProfiling = isProfiling;
+
+    if (isProfiling) {
+      this._profilingSnapshot = new Map();
+
+      this.roots.forEach(this._takeProfilingSnapshotRecursive);
+    }
+  };
+
   onBridgeShutdown = () => {
     debug('onBridgeShutdown', 'unsubscribing from Bridge');
 
     this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index e491f407090c..a2ff8e89cf23 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -4,19 +4,12 @@ import React, {
   createContext,
   useCallback,
   useContext,
-  useLayoutEffect,
   useMemo,
-  useReducer,
+  useState,
 } from 'react';
 import { BridgeContext, StoreContext } from '../context';
-import reducer from './reducer';
 
-import type {
-  HANDLE_OPERATIONS_ACTION,
-  HANDLE_PROFILING_STATUS_CHANGE_ACTION,
-  SEND_START_PROFILING_ACTION,
-  SEND_STOP_PROFILING_ACTION,
-} from './reducer';
+// TODO (profiling) Connect to store and listen for new roots and load data.
 
 type Context = {|
   hasProfilingData: boolean,
@@ -36,65 +29,27 @@ function ProfilerContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  // Some of this reducer's actions require access to the store.
-  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
-  // so we don't need to re-init the reducer in any special way.
-  const [state, dispatch] = useReducer(reducer, {
-    hasProfilingData: false,
-    isProfiling: false,
-    _operations: [],
-    _snapshot: new Map(),
-  });
+  const [isProfiling, setIsProfiling] = useState(false);
 
   const startProfiling = useCallback(() => {
     bridge.send('startProfiling');
-    dispatch(({ type: 'SEND_START_PROFILING' }: SEND_START_PROFILING_ACTION));
-  }, [bridge, dispatch]);
+    setIsProfiling(true);
+  }, [bridge]);
   const stopProfiling = useCallback(() => {
     bridge.send('stopProfiling');
-    dispatch(({ type: 'SEND_STOP_PROFILING' }: SEND_STOP_PROFILING_ACTION));
-  }, [bridge, dispatch]);
+    setIsProfiling(false);
+  }, [bridge]);
 
   const value = useMemo(
     () => ({
-      hasProfilingData: state.hasProfilingData,
-      isProfiling: state.isProfiling,
+      hasProfilingData: false, // TODO (profiling) Connect to store and listen for new roots and load data.
+      isProfiling,
       startProfiling,
       stopProfiling,
     }),
-    [state, startProfiling, stopProfiling]
+    [isProfiling, startProfiling, stopProfiling]
   );
 
-  useLayoutEffect(() => {
-    const handleOperations = (operations: Uint32Array) =>
-      dispatch(
-        ({
-          type: 'HANDLE_OPERATIONS',
-          payload: operations,
-        }: HANDLE_OPERATIONS_ACTION)
-      );
-
-    const handleProfilingStatus = (isProfiling: boolean) =>
-      dispatch(
-        ({
-          type: 'HANDLE_PROFILING_STATUS_CHANGE',
-          payload: { isProfiling, store },
-        }: HANDLE_PROFILING_STATUS_CHANGE_ACTION)
-      );
-
-    bridge.addListener('operations', handleOperations);
-    bridge.addListener('profilingStatus', handleProfilingStatus);
-
-    // It's possible that profiling has already started (e.g. "reload and start profiling")
-    // so the frontend needs to ask the backend for its status after mounting.
-    bridge.send('getProfilingStatus');
-
-    return () => {
-      bridge.removeListener('operations', handleOperations);
-      bridge.removeListener('profilingStatus', handleProfilingStatus);
-    };
-  }, [bridge, dispatch, store]);
-
   return (
     <ProfilerContext.Provider value={value}>
       {children}
diff --git a/src/devtools/views/Profiler/reducer.js b/src/devtools/views/Profiler/reducer.js
deleted file mode 100644
index 117a55e37320..000000000000
--- a/src/devtools/views/Profiler/reducer.js
+++ /dev/null
@@ -1,114 +0,0 @@
-// @flow
-
-import Store from '../../store';
-
-type Node = {|
-  id: number,
-  children: Array<number>,
-  displayName: string | null,
-  key: number | string | null,
-|};
-
-export type State = {|
-  hasProfilingData: boolean,
-  isProfiling: boolean,
-
-  // List of tree mutation that occur during profiling.
-  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
-  // to reconstruct the state of each root for each commit.
-  _operations: Array<Uint32Array>,
-
-  // Snapshot of the state of the main Store (including all roots) when profiling started.
-  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
-  // to reconstruct the state of each root for each commit.
-  // It's okay to use a single root to store this information because node IDs are unique across all roots.
-  _snapshot: Map<number, Node>,
-|};
-
-export type HANDLE_OPERATIONS_ACTION = {|
-  type: 'HANDLE_OPERATIONS',
-  payload: Uint32Array,
-|};
-
-export type HANDLE_PROFILING_STATUS_CHANGE_ACTION = {|
-  type: 'HANDLE_PROFILING_STATUS_CHANGE',
-  payload: {
-    isProfiling: boolean,
-    store: Store,
-  },
-|};
-
-export type SEND_START_PROFILING_ACTION = {|
-  type: 'SEND_START_PROFILING',
-|};
-
-export type SEND_STOP_PROFILING_ACTION = {|
-  type: 'SEND_STOP_PROFILING',
-|};
-
-type Action =
-  | HANDLE_OPERATIONS_ACTION
-  | HANDLE_PROFILING_STATUS_CHANGE_ACTION
-  | SEND_START_PROFILING_ACTION
-  | SEND_STOP_PROFILING_ACTION;
-
-// TODO (profiling) Lift this state up so it's shared between tabs.
-
-export default function reducer(state: State, action: Action): State {
-  const { type } = action;
-  switch (type) {
-    case 'HANDLE_OPERATIONS':
-      if (state.isProfiling) {
-        const operations = ((action: any): HANDLE_OPERATIONS_ACTION).payload;
-        return {
-          ...state,
-          hasProfilingData: true,
-          _operations: state._operations.concat(operations),
-        };
-      } else {
-        return state;
-      }
-    case 'HANDLE_PROFILING_STATUS_CHANGE':
-      const {
-        isProfiling,
-        store,
-      } = ((action: any): HANDLE_PROFILING_STATUS_CHANGE_ACTION).payload;
-
-      if (isProfiling) {
-        const snapshot = new Map();
-
-        const recursiveSnapshot = id => {
-          const element = store.getElementByID(id);
-          if (element !== null) {
-            snapshot.set(id, {
-              id,
-              children: element.children.slice(0),
-              displayName: element.displayName,
-              key: element.key,
-            });
-            element.children.forEach(id => recursiveSnapshot(id));
-          }
-        };
-
-        store.roots.forEach(rootID => recursiveSnapshot(rootID));
-
-        return {
-          ...state,
-          isProfiling,
-          _operations: [],
-          _snapshot: snapshot,
-        };
-      } else {
-        return {
-          ...state,
-          isProfiling,
-        };
-      }
-    case 'SEND_START_PROFILING':
-      return { ...state, hasProfilingData: false, isProfiling: true };
-    case 'SEND_STOP_PROFILING':
-      return { ...state, isProfiling: false };
-    default:
-      throw new Error(`Unrecognized action "${type}"`);
-  }
-}

From b8a52078c6cd273a981caf3dc9d7762624d77391 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Mar 2019 15:50:29 -0700
Subject: [PATCH 135/814] Added initial Suspense cache and loaded commit
 metadata

---
 OVERVIEW.md                                   |   8 +-
 src/backend/agent.js                          |  21 ++-
 src/backend/renderer.js                       | 109 ++++++++++---
 src/backend/types.js                          |   8 +
 src/devtools/ProfilingCache.js                |  77 +++++++++
 src/devtools/cache.js                         | 146 ++++++++++++++++++
 src/devtools/store.js                         |  62 +++++++-
 src/devtools/views/Profiler/Profiler.js       |  25 +--
 .../views/Profiler/ProfilerContext.js         |  91 +++++++++--
 .../views/Profiler/SnapshotSelector.css       |   7 +
 .../views/Profiler/SnapshotSelector.js        |  80 ++++++++--
 src/devtools/views/Profiler/types.js          |  10 ++
 src/devtools/views/hooks.js                   |  56 +++++++
 13 files changed, 622 insertions(+), 78 deletions(-)
 create mode 100644 src/devtools/ProfilingCache.js
 create mode 100644 src/devtools/cache.js

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 29a5345c467b..b6d68549a5db 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -14,7 +14,7 @@ The old DevTools also rendered the entire application tree in the form of a larg
 
 Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
 
-The payload for each message is a typed array. The first entry is a number identifying which renderer the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.
+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.
 
 We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
 
@@ -188,7 +188,7 @@ This information is kept on the backend until requested by the frontend (as desc
 
 The profiling tab shows information for the currently-selected React root. When profiling completes (or when a new root is selected) the frontend first checks to see if there is any profiling data for the selected root. (Has it cached any "_operations_"?)
 
-If so, then it sends a "_profileSummary_" message with an id that identifies the root. The backend then returns the following information:
+If so, then it sends a "_getProfilingSummary_" message with an id that identifies the root. The backend then returns a "_profilingSummary_" message with the following information:
 
 * root id (to match request and response)
 * number of interactions that were traced for this root
@@ -216,7 +216,7 @@ Here is an example profile summary:
   ],
 
   // Tuples of fiber id and initial tree base duration
-  treeBaseDuration: [
+  initialTreeBaseDurations: [
     1,  // fiber id
     11, // tree base duration when profiling started
 
@@ -335,4 +335,4 @@ Here is an example of a profiling session consisting of two interactions:
 }
 ```
 
-The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profileSummary_" message.
\ No newline at end of file
+The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profilingSummary_" message.
\ No newline at end of file
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 59169d0643b7..b7df24d42f22 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -47,6 +47,7 @@ export default class Agent extends EventEmitter {
     this._bridge = bridge;
 
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
+    bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('overrideContext', this.overrideContext);
@@ -79,6 +80,24 @@ export default class Agent extends EventEmitter {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  getProfilingSummary = ({
+    rendererID,
+    rootID,
+  }: {
+    rendererID: number,
+    rootID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      this._bridge.send(
+        'profilingSummary',
+        renderer.getProfilingSummary(rootID)
+      );
+    }
+  };
+
   highlightElementInDOM = ({
     displayName,
     id,
@@ -216,7 +235,7 @@ export default class Agent extends EventEmitter {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-      renderer.startProfiling();
+      renderer.stopProfiling();
     }
     this._bridge.send('profilingStatus', this._isProfiling);
   };
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7c63a79b7d8b..398b4cfba3b9 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -26,9 +26,10 @@ import { inspectHooksOfFiber } from './ReactDebugHooks';
 import type {
   DevToolsHook,
   Fiber,
+  FiberData,
   Interaction,
+  ProfilingSummary,
   ReactRenderer,
-  FiberData,
   RendererInterface,
 } from './types';
 import type { InspectedElement } from 'src/devtools/views/elements/types';
@@ -466,6 +467,13 @@ export function attach(
   // and use a slow path to find each of the current Fibers.
   const idToTreeBaseDurationMap: Map<number, number> = new Map();
 
+  // When profiling is supported, we store the latest tree base durations for each Fiber.
+  // This map enables us to filter these times by root when sending them to the frontend.
+  const idToRootMap: Map<number, number> = new Map();
+
+  // When a mount or update is in progress, this value tracks the root that is being operated on.
+  let currentRootID: number = -1;
+
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -543,8 +551,9 @@ export function attach(
     // Identify which renderer this update is coming from.
     // This enables roots to be mapped to renderers,
     // Which in turn enables fiber props, states, and hooks to be inspected.
-    const idArray = new Uint32Array(1);
+    const idArray = new Uint32Array(2);
     idArray[0] = rendererID;
+    idArray[1] = getFiberID(getPrimaryFiber(root.current));
     addOperation(idArray, true);
 
     // Let the frontend know about tree operations.
@@ -560,6 +569,7 @@ export function attach(
 
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
     if (isProfilingSupported) {
+      idToRootMap.set(id, currentRootID);
       idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
     }
 
@@ -636,8 +646,13 @@ export function attach(
     }
     fiberToIDMap.delete(primaryFiber);
     idToFiberMap.delete(id);
-    idToTreeBaseDurationMap.delete(primaryFiber);
     primaryFibers.delete(primaryFiber);
+
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+    if (isProfilingSupported) {
+      idToRootMap.delete(id);
+      idToTreeBaseDurationMap.delete(id);
+    }
   }
 
   function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
@@ -672,13 +687,16 @@ export function attach(
 
         if (fiber.actualDuration > 0) {
           // If profiling is active, store durations for elements that were rendered during the commit.
-          ((currentCommitProfilingMetadata: any): CommitProfilingData).committedFibers.push(
-            {
-              id,
-              actualDuration: fiber.actualDuration,
-              selfDuration: fiber.selfDuration,
-              treeBaseDuration: fiber.treeBaseDuration,
-            }
+          const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
+          metadata.committedFibers.push({
+            id,
+            actualDuration: fiber.actualDuration,
+            selfDuration: fiber.selfDuration,
+            treeBaseDuration: fiber.treeBaseDuration,
+          });
+          metadata.maxActualDuration = Math.max(
+            metadata.maxActualDuration,
+            fiber.actualDuration
           );
         }
       }
@@ -819,8 +837,10 @@ export function attach(
   function walkTree() {
     // Hydrate all the roots for the first time.
     hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
       mountFiber(root.current, null);
       flushPendingEvents(root);
+      currentRootID = -1;
     });
   }
 
@@ -835,6 +855,8 @@ export function attach(
     const current = root.current;
     const alternate = current.alternate;
 
+    currentRootID = getFiberID(getPrimaryFiber(current));
+
     if (isProfiling) {
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
@@ -847,6 +869,7 @@ export function attach(
             timestamp: timestamp - profilingStartTime,
           })
         ),
+        maxActualDuration: 0,
       };
     }
 
@@ -873,13 +896,25 @@ export function attach(
     }
 
     if (isProfiling) {
-      ((commitProfilingMetadata: any): Array<CommitProfilingData>).push(
-        ((currentCommitProfilingMetadata: any): CommitProfilingData)
+      const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+        currentRootID
       );
+      if (commitProfilingMetadata != null) {
+        commitProfilingMetadata.push(
+          ((currentCommitProfilingMetadata: any): CommitProfilingData)
+        );
+      } else {
+        ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+          currentRootID,
+          [((currentCommitProfilingMetadata: any): CommitProfilingData)]
+        );
+      }
     }
 
     // We're done here.
     flushPendingEvents(root);
+
+    currentRootID = -1;
   }
 
   // The naming is confusing.
@@ -1333,24 +1368,55 @@ export function attach(
     committedFibers: Array<CommittedFiber>,
     commitTime: number,
     interactions: Array<Interaction>,
+    maxActualDuration: number,
   |};
 
-  let commitProfilingMetadata: Array<CommitProfilingData> | null = null;
+  type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
+
   let currentCommitProfilingMetadata: CommitProfilingData | null = null;
-  let initialTreeBaseDurations: Array<number> | null = null;
+  let initialTreeBaseDurationsMap: Map<number, number> | null = null;
   let isProfiling: boolean = false;
   let profilingStartTime: number = 0;
+  let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
+
+  function getProfilingSummary(rootID: number): ProfilingSummary {
+    const interactions = new Set();
+    const commits = [];
+
+    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+      rootID
+    );
+    if (commitProfilingMetadata != null) {
+      commitProfilingMetadata.forEach(metadata => {
+        commits.push(metadata.commitTime, metadata.maxActualDuration);
+        metadata.interactions.forEach(({ name, timestamp }) => {
+          interactions.add(`${timestamp}:${name}`);
+        });
+      });
+    }
+
+    const initialTreeBaseDurations = [];
+    ((initialTreeBaseDurationsMap: any): Map<number, number>).forEach(
+      (treeBaseDuration, id) => {
+        if (idToRootMap.get(id) === rootID) {
+          initialTreeBaseDurations.push(id, treeBaseDuration);
+        }
+      }
+    );
+
+    return {
+      commits,
+      initialTreeBaseDurations,
+      interactionCount: interactions.size,
+      rootID,
+    };
+  }
 
   function startProfiling() {
-    commitProfilingMetadata = [];
-    initialTreeBaseDurations = [];
+    initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);
     isProfiling = true;
     profilingStartTime = performance.now();
-
-    // Save initial treeBaseDurations; we'll need to send them later.
-    idToTreeBaseDurationMap.forEach((treeBaseDuration: number, id: number) => {
-      initialTreeBaseDurations = [id, treeBaseDuration];
-    });
+    rootToCommitProfilingMetadataMap = new Map();
   }
 
   function stopProfiling() {
@@ -1361,6 +1427,7 @@ export function attach(
     cleanup,
     getFiberIDFromNative,
     getNativeFromReactElement,
+    getProfilingSummary,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
diff --git a/src/backend/types.js b/src/backend/types.js
index 0b3521b2cd0b..11869ab1797b 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -54,6 +54,13 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
+export type ProfilingSummary = {|
+  commits: Array<number>,
+  initialTreeBaseDurations: Array<number>,
+  interactionCount: number,
+  rootID: number,
+|};
+
 export type RendererInterface = {
   cleanup: () => void,
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
@@ -61,6 +68,7 @@ export type RendererInterface = {
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
+  getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
new file mode 100644
index 000000000000..68982b081cfd
--- /dev/null
+++ b/src/devtools/ProfilingCache.js
@@ -0,0 +1,77 @@
+// @flow
+
+import { createResource, invalidateResources } from './cache';
+import Store from './store';
+
+import type { Resource } from './cache';
+import type { Bridge } from '../types';
+import type { ProfilingSummary as ProfilingSummaryBackend } from 'src/backend/types';
+import type { ProfilingSummary as ProfilingSummaryFrontend } from 'src/devtools/views/Profiler/types';
+
+type AAA = {|
+  rootID: number,
+  rendererID: number,
+|};
+
+export default class ProfilingCache {
+  _pendingProfileSummaryMap: Map<
+    number,
+    (profilingSummary: ProfilingSummaryFrontend) => void
+  > = new Map();
+
+  ProfilingSummary: Resource<AAA, ProfilingSummaryFrontend>;
+
+  // TODO (profiling) renderer + root
+
+  constructor(bridge: Bridge, store: Store) {
+    this.ProfilingSummary = createResource(
+      ({ rendererID, rootID }: AAA) => {
+        return new Promise(resolve => {
+          if (!store._profilingOperations.has(rootID)) {
+            // If no profiling data was recorded for this root, skip the round trip.
+            resolve({
+              commits: [],
+              initialTreeBaseDurations: new Map(),
+              interactionCount: 0,
+            });
+          } else {
+            this._pendingProfileSummaryMap.set(rootID, resolve);
+            bridge.send('getProfilingSummary', { rendererID, rootID });
+          }
+        });
+      },
+      ({ rendererID, rootID }: AAA) => rootID
+    );
+
+    bridge.addListener('profilingSummary', this.onProfileSummary);
+  }
+
+  invalidate() {
+    invalidateResources();
+    this._pendingProfileSummaryMap = new Map();
+  }
+
+  onProfileSummary = ({
+    commits,
+    initialTreeBaseDurations,
+    interactionCount,
+    rootID,
+  }: ProfilingSummaryBackend) => {
+    const resolve = this._pendingProfileSummaryMap.get(rootID);
+    if (resolve != null) {
+      const initialTreeBaseDurationsMap = new Map();
+      for (let i = 0; i < initialTreeBaseDurations.length; i++) {
+        initialTreeBaseDurationsMap.set(
+          initialTreeBaseDurations[i],
+          initialTreeBaseDurations[i + 1]
+        );
+      }
+
+      resolve({
+        commits,
+        initialTreeBaseDurations: initialTreeBaseDurationsMap,
+        interactionCount,
+      });
+    }
+  };
+}
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
new file mode 100644
index 000000000000..92df88a37a17
--- /dev/null
+++ b/src/devtools/cache.js
@@ -0,0 +1,146 @@
+// @flow
+
+import { createContext, useContext } from 'react';
+
+// Cache implementation was forked from the React repo:
+// https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
+//
+// This cache is simpler than react-cache in that:
+// 1. Individual items don't need to be invalidated.
+//    Profiling data is invalidated as a whole.
+// 2. We didn't need the added overhead of an LRU cache.
+//    The size of this cache is bounded by how many renders were profiled,
+//    and it will be fully reset between profiling sessions.
+
+type Thenable<T> = {
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,
+};
+
+type Suspender = {
+  then(resolve: () => mixed, reject: () => mixed): mixed,
+};
+
+type PendingResult = {|
+  status: 0,
+  value: Suspender,
+|};
+
+type ResolvedResult<V> = {|
+  status: 1,
+  value: V,
+|};
+
+type RejectedResult = {|
+  status: 2,
+  value: mixed,
+|};
+
+type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
+
+export type Resource<I, V> = {
+  read(I): V,
+  preload(I): void,
+};
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+function identityHashFn(input) {
+  return input;
+}
+
+const CacheContext = createContext(null);
+
+const entries: Map<Resource<any, any>, Map<any, any>> = new Map();
+
+function accessResult<I, K, V>(
+  resource: any,
+  fetch: I => Thenable<V>,
+  input: I,
+  key: K
+): Result<V> {
+  let entriesForResource = entries.get(resource);
+  if (entriesForResource === undefined) {
+    entriesForResource = new Map();
+    entries.set(resource, entriesForResource);
+  }
+  let entry = entriesForResource.get(key);
+  if (entry === undefined) {
+    const thenable = fetch(input);
+    thenable.then(
+      value => {
+        if (newResult.status === Pending) {
+          const resolvedResult: ResolvedResult<V> = (newResult: any);
+          resolvedResult.status = Resolved;
+          resolvedResult.value = value;
+        }
+      },
+      error => {
+        if (newResult.status === Pending) {
+          const rejectedResult: RejectedResult = (newResult: any);
+          rejectedResult.status = Rejected;
+          rejectedResult.value = error;
+        }
+      }
+    );
+    const newResult: PendingResult = {
+      status: Pending,
+      value: thenable,
+    };
+    entriesForResource.set(key, newResult);
+    return newResult;
+  } else {
+    return entry;
+  }
+}
+
+export function createResource<I, K: string | number, V>(
+  fetch: I => Thenable<V>,
+  maybeHashInput?: I => K
+): Resource<I, V> {
+  const hashInput: I => K =
+    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
+
+  const resource = {
+    read(input: I): V {
+      // Prevent access outside of render.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useContext(CacheContext);
+
+      const key = hashInput(input);
+      const result: Result<V> = accessResult(resource, fetch, input, key);
+      switch (result.status) {
+        case Pending: {
+          const suspender = result.value;
+          throw suspender;
+        }
+        case Resolved: {
+          const value = result.value;
+          return value;
+        }
+        case Rejected: {
+          const error = result.value;
+          throw error;
+        }
+        default:
+          // Should be unreachable
+          return (undefined: any);
+      }
+    },
+
+    preload(input: I): void {
+      // Prevent access outside of render.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useContext(CacheContext);
+
+      const key = hashInput(input);
+      accessResult(resource, fetch, input, key);
+    },
+  };
+  return resource;
+}
+
+export function invalidateResources(): void {
+  entries.clear();
+}
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 334eecbe34ed..4f733df1e617 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -9,6 +9,7 @@ import {
 import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
+import ProfilingCache from './ProfilingCache';
 
 import type { ElementType } from './types';
 import type { Element } from './views/elements/types';
@@ -47,6 +48,7 @@ export default class Store extends EventEmitter {
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
 
+  // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
 
@@ -54,7 +56,10 @@ export default class Store extends EventEmitter {
   // Used for windowing purposes.
   _numElements: number = 0;
 
-  // List of tree mutation that occur during profiling.
+  // Suspense cache for reading profilign data.
+  _profilingCache: ProfilingCache;
+
+  // Map of root (id) to a list of tree mutation that occur during profiling.
   // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
   // to reconstruct the state of each root for each commit.
   _profilingOperations: Map<number, Array<Uint32Array>> = new Map();
@@ -93,12 +98,27 @@ export default class Store extends EventEmitter {
     // It's possible that profiling has already started (e.g. "reload and start profiling")
     // so the frontend needs to ask the backend for its status after mounting.
     bridge.send('getProfilingStatus');
+
+    this._profilingCache = new ProfilingCache(bridge, this);
+  }
+
+  // Profiling data has been recorded for at least one root.
+  get hasProfilingData(): boolean {
+    return this._profilingOperations.size > 0;
+  }
+
+  get isProfiling(): boolean {
+    return this._isProfiling;
   }
 
   get numElements(): number {
     return this._numElements;
   }
 
+  get profilingCache(): ProfilingCache {
+    return this._profilingCache;
+  }
+
   get revision(): number {
     return this._revision;
   }
@@ -242,6 +262,30 @@ export default class Store extends EventEmitter {
     return null;
   }
 
+  getRootIDForElement(id: number): number | null {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        return current.id;
+      } else {
+        current = this._idToElement.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
+  startProfiling(): void {
+    this._bridge.send('startProfiling');
+    this._isProfiling = false;
+    this.emit('isProfiling');
+  }
+
+  stopProfiling(): void {
+    this._bridge.send('stopProfiling');
+    this._isProfiling = false;
+    this.emit('isProfiling');
+  }
+
   _takeProfilingSnapshotRecursive = (id: number) => {
     const element = this.getElementByID(id);
     if (element !== null) {
@@ -267,11 +311,12 @@ export default class Store extends EventEmitter {
     let haveRootsChanged = false;
 
     const rendererID = operations[0];
+    const rootID = operations[1];
 
     if (this._isProfiling) {
-      const profilingOperations = this._profilingOperations.get(rendererID);
+      const profilingOperations = this._profilingOperations.get(rootID);
       if (profilingOperations == null) {
-        this._profilingOperations.set(rendererID, [operations]);
+        this._profilingOperations.set(rootID, [operations]);
       } else {
         profilingOperations.push(operations);
       }
@@ -280,7 +325,7 @@ export default class Store extends EventEmitter {
     let addedElementIDs: Uint32Array = new Uint32Array(0);
     let removedElementIDs: Uint32Array = new Uint32Array(0);
 
-    let i = 1;
+    let i = 2;
     while (i < operations.length) {
       let id: number = ((null: any): number);
       let element: Element = ((null: any): Element);
@@ -482,13 +527,16 @@ export default class Store extends EventEmitter {
   };
 
   onProfilingStatus = (isProfiling: boolean) => {
-    this._isProfiling = isProfiling;
-
     if (isProfiling) {
+      this._profilingOperations = new Map();
       this._profilingSnapshot = new Map();
-
       this.roots.forEach(this._takeProfilingSnapshotRecursive);
     }
+
+    if (this._isProfiling !== isProfiling) {
+      this._isProfiling = isProfiling;
+      this.emit('isProfiling');
+    }
   };
 
   onBridgeShutdown = () => {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 8cc1e54aa5e5..af11db8e1066 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -23,15 +23,15 @@ export default function ProfilerOuter(_: Props) {
 
 function ProfilerInner(_: Props) {
   const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+
+  const showProfilingControls = !isProfiling && hasProfilingData;
+
   const [tab, setTab] = useState('flame-chart');
   const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
 
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
-  // TODO (profiling) Maybe a smarter check here
-  const showProfilingData = !isProfiling && hasProfilingData;
-
   let view = null;
   if (isProfiling) {
     view = <RecortdingInProgress />;
@@ -55,7 +55,7 @@ function ProfilerInner(_: Props) {
           <div className={styles.VRule} />
           <TabBar
             currentTab={tab}
-            disabled={!showProfilingData}
+            disabled={!showProfilingControls}
             id="Profiler"
             selectTab={setTab}
             size="small"
@@ -65,12 +65,7 @@ function ProfilerInner(_: Props) {
           <Button onClick={showFilterModal} title="Filter commits by duration">
             <ButtonIcon type="filter" />
           </Button>
-          {showProfilingData && (
-            <Fragment>
-              <div className={styles.VRule} />
-              <SnapshotSelector />
-            </Fragment>
-          )}
+          {showProfilingControls && <SnapshotSelector />}
         </div>
         <div className={styles.Content}>
           {view}
@@ -79,15 +74,11 @@ function ProfilerInner(_: Props) {
           )}
         </div>
       </div>
-      {showProfilingData && (
+      {showProfilingControls && (
         <div className={styles.RightColumn}>
           {/* TODO (profiler) Dynamic information */}
           <div className={styles.Toolbar}>Commit information</div>
-          <div className={styles.InspectedProperties}>
-            Committed at: 0.8s <br />
-            <br />
-            Render duration: 2.1ms
-          </div>
+          <div className={styles.InspectedProperties} />
         </div>
       )}
     </div>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index a2ff8e89cf23..df4f2874d506 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -7,13 +7,18 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { BridgeContext, StoreContext } from '../context';
-
-// TODO (profiling) Connect to store and listen for new roots and load data.
+import { useSubscription } from '../hooks';
+import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
+import { StoreContext } from '../context';
+import Store from '../../store';
 
 type Context = {|
+  commitIndex: number,
   hasProfilingData: boolean,
   isProfiling: boolean,
+  rendererID: number | null,
+  rootID: number | null,
+  setCommitIndex: (value: number) => void,
   startProfiling(value: boolean): void,
   stopProfiling(value: boolean): void,
 |};
@@ -21,33 +26,89 @@ type Context = {|
 const ProfilerContext = createContext<Context>(((null: any): Context));
 ProfilerContext.displayName = 'ProfilerContext';
 
+type StoreProfilingState = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+|};
+
 type Props = {|
   children: React$Node,
 |};
 
 function ProfilerContextController({ children }: Props) {
-  const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const [isProfiling, setIsProfiling] = useState(false);
+  const { isProfiling, hasProfilingData } = useSubscription<
+    StoreProfilingState,
+    Store
+  >(
+    useMemo(
+      () => ({
+        source: store,
+        getCurrentValue: (store: Store) => ({
+          hasProfilingData: store.hasProfilingData,
+          isProfiling: store.isProfiling,
+        }),
+        subscribe: (store: Store, callback: Function) => {
+          store.addListener('isProfiling', callback);
+          return () => store.removeListener('isProfiling', callback);
+        },
+      }),
+      [store]
+    )
+  );
+
+  const startProfiling = useCallback(() => store.startProfiling(), [store]);
+  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
+
+  // TODO (profiling) The browser extension is a multi-root app,
+  // so ti won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
+  // We'll either need to lift that state up into the (shared) Store,
+  // or use a portal to share the contexts themselves between Chrome tabs.
+  const { selectedElementID } = useContext(TreeContext);
+
+  // If no root is selected, assume the first root.
+  // Many React apps are single root anyway.
+  let rendererID = null;
+  let rootID = null;
+  if (selectedElementID) {
+    rendererID = store.getRendererIDForElement(
+      ((selectedElementID: any): number)
+    );
+    rootID = store.getRootIDForElement(((selectedElementID: any): number));
+  } else if (store.roots.length > 0) {
+    rootID = store.roots[0];
+    rendererID = store.getRendererIDForElement(((rootID: any): number));
+  }
 
-  const startProfiling = useCallback(() => {
-    bridge.send('startProfiling');
-    setIsProfiling(true);
-  }, [bridge]);
-  const stopProfiling = useCallback(() => {
-    bridge.send('stopProfiling');
-    setIsProfiling(false);
-  }, [bridge]);
+  const [commitIndex, setCommitIndex] = useState(0);
+  const [prevRootID, setPrevRootID] = useState(rootID);
+  if (prevRootID !== rootID) {
+    setPrevRootID(rootID);
+    setCommitIndex(0);
+  }
 
   const value = useMemo(
     () => ({
-      hasProfilingData: false, // TODO (profiling) Connect to store and listen for new roots and load data.
+      commitIndex,
+      hasProfilingData,
       isProfiling,
+      rendererID,
+      rootID,
+      setCommitIndex,
       startProfiling,
       stopProfiling,
     }),
-    [isProfiling, startProfiling, stopProfiling]
+    [
+      commitIndex,
+      hasProfilingData,
+      isProfiling,
+      rendererID,
+      rootID,
+      setCommitIndex,
+      startProfiling,
+      stopProfiling,
+    ]
   );
 
   return (
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 96998d93bcdd..b404d6251d82 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -12,3 +12,10 @@
 .Commits {
   margin-left: 0.25rem;
 }
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+  margin: 0 0.25rem;
+}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 64d68b109e57..091ffd344166 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -1,26 +1,80 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment, Suspense, useContext } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import { StoreContext } from '../context';
+import { ProfilerContext } from './ProfilerContext';
 
 import styles from './SnapshotSelector.css';
 
 export type Props = {||};
 
-export default function SnapshotSelector(_: Props) {
+export default function SnapshotSelectorSuspense(_: Props) {
   return (
-    <div className={styles.SnapshotSelector}>
-      1 / 3
-      <Button className={styles.Button}>
-        <ButtonIcon type="previous" />
-      </Button>
-      <div className={styles.Commits}>
-        [] {/* TODO (profiling) Add FixedSizeList selector */}
+    <Suspense fallback={<SnapshotSelectorFallback />}>
+      <SnapshotSelector />
+    </Suspense>
+  );
+}
+
+function SnapshotSelector(_: Props) {
+  const { profilingCache } = useContext(StoreContext);
+  const { commitIndex, rendererID, rootID, setCommitIndex } = useContext(
+    ProfilerContext
+  );
+
+  if (rendererID === null || rootID === null) {
+    return null;
+  }
+
+  // TODO (profiling) Parse the summary into something easier for the views to work with
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const numCommits = profilingSummary.commits.length / 2;
+
+  if (numCommits === 0) {
+    return null;
+  }
+
+  const viewNextCommit = () => {
+    setCommitIndex(Math.min(commitIndex + 1, numCommits - 1));
+  };
+  const viewPrevCommit = () => {
+    setCommitIndex(Math.max(commitIndex - 1, 0));
+  };
+
+  return (
+    <Fragment>
+      <div className={styles.VRule} />
+      <div className={styles.SnapshotSelector}>
+        {commitIndex + 1} / {numCommits}
+        <Button
+          className={styles.Button}
+          disabled={commitIndex <= 0}
+          onClick={viewPrevCommit}
+        >
+          <ButtonIcon type="previous" />
+        </Button>
+        <div className={styles.Commits}>
+          [] {/* TODO (profiling) Add FixedSizeList selector */}
+        </div>
+        <Button
+          className={styles.Button}
+          disabled={commitIndex >= numCommits - 1}
+          onClick={viewNextCommit}
+        >
+          <ButtonIcon type="next" />
+        </Button>
       </div>
-      <Button className={styles.Button}>
-        <ButtonIcon type="next" />
-      </Button>
-    </div>
+    </Fragment>
   );
 }
+
+function SnapshotSelectorFallback() {
+  // TODO (profiling) Better loading UI
+  return <div className={styles.SnapshotSelector}>Loading...</div>;
+}
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 78dd15abb44c..e75a369da3dc 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -27,3 +27,13 @@ export type CommitDetails = {|
   root: Node,
   timestamp: number,
 |};
+
+export type ProfilingSummary = {|
+  // Tuples of commit time (relative to when profiling started) and duration
+  commits: Array<number>,
+
+  // Map of fiber id to (initial) tree base duration
+  initialTreeBaseDurations: Map<number, number>,
+
+  interactionCount: number,
+|};
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 0218aef2e696..3315ce6021f6 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -83,3 +83,59 @@ export function useModalDismissSignal(
     };
   }, [modalRef, dismissCallback]);
 }
+
+// Copied from https://github.com/facebook/react/pull/15022
+export function useSubscription<Value, Source>({
+  source,
+  getCurrentValue,
+  subscribe,
+}: {|
+  source: Source,
+  getCurrentValue: (source: Source) => Value,
+  subscribe: (source: Source, callback: Function) => () => void,
+|}): Value {
+  const [state, setState] = useState({
+    source,
+    value: getCurrentValue(source),
+  });
+
+  if (state.source !== source) {
+    setState({
+      source,
+      value: getCurrentValue(source),
+    });
+  }
+
+  useEffect(() => {
+    let didUnsubscribe = false;
+
+    const checkForUpdates = () => {
+      if (didUnsubscribe) {
+        return;
+      }
+
+      setState(prevState => {
+        if (prevState.source !== source) {
+          return prevState;
+        }
+
+        const value = getCurrentValue(source);
+        if (prevState.value === value) {
+          return prevState;
+        }
+
+        return { ...prevState, value };
+      });
+    };
+    const unsubscribe = subscribe(source, checkForUpdates);
+
+    checkForUpdates();
+
+    return () => {
+      didUnsubscribe = true;
+      unsubscribe();
+    };
+  }, [getCurrentValue, source, subscribe]);
+
+  return state.value;
+}

From 0edf4e9dc16e58881dc3c45180d2d384ca6fc35e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Mar 2019 14:57:52 -0700
Subject: [PATCH 136/814] Plugged react-window into commit selector

---
 OVERVIEW.md                                   |  16 +-
 package.json                                  |   2 +-
 src/backend/renderer.js                       |   9 +-
 src/backend/types.js                          |   3 +-
 src/devtools/ProfilingCache.js                |  19 +--
 src/devtools/store.js                         |   3 +
 src/devtools/views/Profiler/Profiler.js       |   2 +-
 .../views/Profiler/ProfilerContext.js         |   6 +
 .../views/Profiler/SnapshotCommitList.js      | 145 ++++++++++++++++++
 .../views/Profiler/SnapshotCommitListItem.js  |  77 ++++++++++
 .../views/Profiler/SnapshotSelector.css       |   8 +
 .../views/Profiler/SnapshotSelector.js        |  16 +-
 src/devtools/views/Profiler/constants.js      |   8 +
 src/devtools/views/Profiler/types.js          |   7 +-
 src/devtools/views/Profiler/utils.js          |  34 ++++
 .../views/Settings/SettingsContext.js         |  11 ++
 src/devtools/views/hooks.js                   |   2 +-
 src/devtools/views/root.css                   |  22 +++
 yarn.lock                                     |   8 +-
 19 files changed, 366 insertions(+), 32 deletions(-)
 create mode 100644 src/devtools/views/Profiler/SnapshotCommitList.js
 create mode 100644 src/devtools/views/Profiler/SnapshotCommitListItem.js
 create mode 100644 src/devtools/views/Profiler/constants.js
 create mode 100644 src/devtools/views/Profiler/utils.js

diff --git a/OVERVIEW.md b/OVERVIEW.md
index b6d68549a5db..78ae10aff2ed 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -203,16 +203,18 @@ Here is an example profile summary:
   rootID: 1,
   interactionCount: 2,
 
-  // Tuples of commit time (relative to when profiling started) and duration
-  commits: [
-    210, // first commit started 210ms after profiling began
-    10,  // and took 10ms
+  // Commit durations
+  commitDurations: [
+    10,  // first commit took 10ms
+    13,  // second commit took 13ms
+    5,   // third commit took 5ms
+  ]
 
+  // Commit times (relative to when profiling started)
+  commitTimes: [
+    210, // first commit started 210ms after profiling began
     284, // second commit started 284ms after profiling began
-    13,  // and took 13ms
-
     303, // third commit started 303ms after profiling began
-    5,   // and took 5ms
   ],
 
   // Tuples of fiber id and initial tree base duration
diff --git a/package.json b/package.json
index c89882904af5..938a3b6aca8a 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
     "firefox-profile": "^1.0.2",
-    "flow-bin": "^0.93.0",
+    "flow-bin": "^0.94.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "immutable": "3.7.6",
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 398b4cfba3b9..1d45f6c3e99d 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1381,14 +1381,16 @@ export function attach(
 
   function getProfilingSummary(rootID: number): ProfilingSummary {
     const interactions = new Set();
-    const commits = [];
+    const commitDurations = [];
+    const commitTimes = [];
 
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
     if (commitProfilingMetadata != null) {
       commitProfilingMetadata.forEach(metadata => {
-        commits.push(metadata.commitTime, metadata.maxActualDuration);
+        commitDurations.push(metadata.maxActualDuration);
+        commitTimes.push(metadata.commitTime);
         metadata.interactions.forEach(({ name, timestamp }) => {
           interactions.add(`${timestamp}:${name}`);
         });
@@ -1405,7 +1407,8 @@ export function attach(
     );
 
     return {
-      commits,
+      commitDurations,
+      commitTimes,
       initialTreeBaseDurations,
       interactionCount: interactions.size,
       rootID,
diff --git a/src/backend/types.js b/src/backend/types.js
index 11869ab1797b..47b0280860ce 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -55,7 +55,8 @@ export type ReactRenderer = {
 };
 
 export type ProfilingSummary = {|
-  commits: Array<number>,
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
   initialTreeBaseDurations: Array<number>,
   interactionCount: number,
   rootID: number,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 68982b081cfd..b718f81f51b6 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -8,7 +8,7 @@ import type { Bridge } from '../types';
 import type { ProfilingSummary as ProfilingSummaryBackend } from 'src/backend/types';
 import type { ProfilingSummary as ProfilingSummaryFrontend } from 'src/devtools/views/Profiler/types';
 
-type AAA = {|
+type RendererAndRootID = {|
   rootID: number,
   rendererID: number,
 |};
@@ -19,18 +19,17 @@ export default class ProfilingCache {
     (profilingSummary: ProfilingSummaryFrontend) => void
   > = new Map();
 
-  ProfilingSummary: Resource<AAA, ProfilingSummaryFrontend>;
-
-  // TODO (profiling) renderer + root
+  ProfilingSummary: Resource<RendererAndRootID, ProfilingSummaryFrontend>;
 
   constructor(bridge: Bridge, store: Store) {
     this.ProfilingSummary = createResource(
-      ({ rendererID, rootID }: AAA) => {
+      ({ rendererID, rootID }: RendererAndRootID) => {
         return new Promise(resolve => {
           if (!store._profilingOperations.has(rootID)) {
             // If no profiling data was recorded for this root, skip the round trip.
             resolve({
-              commits: [],
+              commitDurations: [],
+              commitTimes: [],
               initialTreeBaseDurations: new Map(),
               interactionCount: 0,
             });
@@ -40,7 +39,7 @@ export default class ProfilingCache {
           }
         });
       },
-      ({ rendererID, rootID }: AAA) => rootID
+      ({ rendererID, rootID }: RendererAndRootID) => rootID
     );
 
     bridge.addListener('profilingSummary', this.onProfileSummary);
@@ -52,7 +51,8 @@ export default class ProfilingCache {
   }
 
   onProfileSummary = ({
-    commits,
+    commitDurations,
+    commitTimes,
     initialTreeBaseDurations,
     interactionCount,
     rootID,
@@ -68,7 +68,8 @@ export default class ProfilingCache {
       }
 
       resolve({
-        commits,
+        commitDurations,
+        commitTimes,
         initialTreeBaseDurations: initialTreeBaseDurationsMap,
         interactionCount,
       });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 4f733df1e617..c1fe80ebbe6d 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -275,6 +275,9 @@ export default class Store extends EventEmitter {
   }
 
   startProfiling(): void {
+    // Invalidate suspense cache if profiling data is being (re-)recorded.
+    this._profilingCache.invalidate();
+
     this._bridge.send('startProfiling');
     this._isProfiling = false;
     this.emit('isProfiling');
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index af11db8e1066..e02630d69981 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -69,7 +69,7 @@ function ProfilerInner(_: Props) {
         </div>
         <div className={styles.Content}>
           {view}
-          {isFilterModalShowing && ( // TODO (profiler) Position when snapshot graph is open
+          {isFilterModalShowing && (
             <FilterModal dismissModal={dismissFilterModal} />
           )}
         </div>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index df4f2874d506..467d8247a296 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -88,6 +88,12 @@ function ProfilerContextController({ children }: Props) {
     setCommitIndex(0);
   }
 
+  const [prevIsProfiling, setPrevIsProfiling] = useState(isProfiling);
+  if (prevIsProfiling !== isProfiling) {
+    setPrevIsProfiling(isProfiling);
+    setCommitIndex(0);
+  }
+
   const value = useMemo(
     () => ({
       commitIndex,
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
new file mode 100644
index 000000000000..4f4fe92661b8
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -0,0 +1,145 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
+import SnapshotCommitListItem from './SnapshotCommitListItem';
+import { minBarWidth } from './constants';
+
+import type { ProfilingSummary } from './types';
+
+export type ItemData = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
+  isMouseDown: boolean,
+  maxDuration: number,
+  selectedCommitIndex: number,
+  setCommitIndex: (index: number) => void,
+|};
+
+type Props = {|
+  profilingSummary: ProfilingSummary,
+  selectedCommitIndex: number,
+  setCommitIndex: (index: number) => void,
+  viewNextCommit: () => void,
+  viewPrevCommit: () => void,
+|};
+
+export default function SnapshotCommitList(props: Props) {
+  return (
+    <AutoSizer>
+      {({ height, width }) => <List height={height} width={width} {...props} />}
+    </AutoSizer>
+  );
+}
+
+type ListProps = {|
+  height: number,
+  profilingSummary: ProfilingSummary,
+  selectedCommitIndex: number,
+  setCommitIndex: (index: number) => void,
+  viewNextCommit: () => void,
+  viewPrevCommit: () => void,
+  width: number,
+|};
+
+function List({
+  height,
+  profilingSummary,
+  selectedCommitIndex,
+  setCommitIndex,
+  viewNextCommit,
+  viewPrevCommit,
+  width,
+}: ListProps) {
+  const listRef = useRef<FixedSizeList<ItemData> | null>(null);
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const prevSelectedCommitIndexRef = useRef<number>(-1);
+
+  // Make sure any newly selected snapshot is visible within the list.
+  useEffect(() => {
+    if (selectedCommitIndex !== prevSelectedCommitIndexRef.current) {
+      prevSelectedCommitIndexRef.current = selectedCommitIndex;
+      if (listRef.current !== null) {
+        listRef.current.scrollToItem(selectedCommitIndex);
+      }
+    }
+  }, [listRef, selectedCommitIndex]);
+
+  const handleMouseDown = useCallback(() => {
+    setIsMouseDown(true);
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    setIsMouseDown(false);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [handleMouseUp]);
+
+  const { commitDurations, commitTimes } = profilingSummary;
+
+  const itemSize = useMemo(
+    () => Math.max(minBarWidth, width / commitDurations.length),
+    [commitDurations, width]
+  );
+  const maxDuration = useMemo(
+    () =>
+      commitDurations.reduce(
+        (maxDuration, duration) => Math.max(maxDuration, duration),
+        0
+      ),
+    [commitDurations]
+  );
+
+  // Pass required contextual data down to the ListItem renderer.
+  const itemData = useMemo<ItemData>(
+    () => ({
+      commitDurations,
+      commitTimes,
+      isMouseDown,
+      maxDuration,
+      selectedCommitIndex,
+      setCommitIndex,
+    }),
+    [
+      commitDurations,
+      commitTimes,
+      isMouseDown,
+      maxDuration,
+      selectedCommitIndex,
+      setCommitIndex,
+    ]
+  );
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      style={{ height, width }}
+    >
+      {commitDurations.length > 0 && (
+        <FixedSizeList
+          direction="horizontal"
+          height={height}
+          itemCount={commitDurations.length}
+          itemData={itemData}
+          itemSize={itemSize}
+          ref={(listRef: any) /* Flow bug? */}
+          width={width}
+        >
+          {SnapshotCommitListItem}
+        </FixedSizeList>
+      )}
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
new file mode 100644
index 000000000000..6defc0734681
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -0,0 +1,77 @@
+// @flow
+
+import React, { memo, useCallback } from 'react';
+import { areEqual } from 'react-window';
+import { getGradientColor, formatDuration, formatTime } from './utils';
+
+import type { ItemData } from './SnapshotCommitList';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+};
+
+function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
+  const {
+    commitDurations,
+    commitTimes,
+    isMouseDown,
+    maxDuration,
+    selectedCommitIndex,
+    setCommitIndex,
+  } = itemData;
+
+  const commitDuration = commitDurations[index];
+  const commitTime = commitTimes[index];
+
+  const handleClick = useCallback(() => setCommitIndex(index), [
+    index,
+    setCommitIndex,
+  ]);
+
+  // Guard against commits with duration 0
+  const percentage =
+    Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
+  const isSelected = selectedCommitIndex === index;
+
+  // Leave a 1px gap between snapshots
+  const width = parseFloat(style.width) - 1;
+
+  return (
+    <div
+      onClick={handleClick}
+      onMouseEnter={isMouseDown ? handleClick : null}
+      style={{
+        ...style,
+        width,
+        userSelect: 'none',
+        cursor: 'pointer',
+        borderBottom: isSelected
+          ? '3px solid var(--color-tree-node-selected)'
+          : '3px solid transparent',
+        paddingTop: 4,
+        paddingBottom: 1,
+        display: 'flex',
+        alignItems: 'flex-end',
+      }}
+      title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
+        commitTime
+      )}s`}
+    >
+      <div
+        style={{
+          width,
+          height: `${Math.round(percentage * 100)}%`,
+          minHeight: 5,
+          backgroundColor:
+            percentage === 0
+              ? 'var(--color-commit-did-not-render)'
+              : getGradientColor(percentage),
+        }}
+      />
+    </div>
+  );
+}
+
+export default memo<Props>(SnapshotCommitListItem, areEqual);
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index b404d6251d82..d101b3b8d08c 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -1,5 +1,7 @@
 .SnapshotSelector {
+  flex: 1 1 auto;
   display: flex;
+  flex-direction: row;
   align-items: center;
   color: var(--color-text-color);
   margin-left: 0.5rem;
@@ -10,6 +12,8 @@
 }
 
 .Commits {
+  flex: 1 1 150px;
+  height: 2.25rem;
   margin-left: 0.25rem;
 }
 
@@ -19,3 +23,7 @@
   background-color: var(--color-border);
   margin: 0 0.25rem;
 }
+
+.Number {
+  font-family: var(--font-family-monospace);
+}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 091ffd344166..e63da131735c 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -5,6 +5,7 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { StoreContext } from '../context';
 import { ProfilerContext } from './ProfilerContext';
+import SnapshotCommitList from './SnapshotCommitList';
 
 import styles from './SnapshotSelector.css';
 
@@ -34,7 +35,7 @@ function SnapshotSelector(_: Props) {
     rootID: ((rootID: any): number),
   });
 
-  const numCommits = profilingSummary.commits.length / 2;
+  const numCommits = profilingSummary.commitDurations.length;
 
   if (numCommits === 0) {
     return null;
@@ -51,7 +52,10 @@ function SnapshotSelector(_: Props) {
     <Fragment>
       <div className={styles.VRule} />
       <div className={styles.SnapshotSelector}>
-        {commitIndex + 1} / {numCommits}
+        <span className={styles.Number}>
+          {`${commitIndex + 1}`.padStart(`${numCommits}`.length, '0')} /{' '}
+          {numCommits}
+        </span>
         <Button
           className={styles.Button}
           disabled={commitIndex <= 0}
@@ -60,7 +64,13 @@ function SnapshotSelector(_: Props) {
           <ButtonIcon type="previous" />
         </Button>
         <div className={styles.Commits}>
-          [] {/* TODO (profiling) Add FixedSizeList selector */}
+          <SnapshotCommitList
+            profilingSummary={profilingSummary}
+            selectedCommitIndex={commitIndex}
+            setCommitIndex={setCommitIndex}
+            viewNextCommit={viewNextCommit}
+            viewPrevCommit={viewPrevCommit}
+          />
         </div>
         <Button
           className={styles.Button}
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
new file mode 100644
index 000000000000..c6674c71119c
--- /dev/null
+++ b/src/devtools/views/Profiler/constants.js
@@ -0,0 +1,8 @@
+// @flow
+
+export const barHeight = 20;
+export const barWidth = 100;
+export const barWidthThreshold = 2;
+export const minBarHeight = 5;
+export const minBarWidth = 5;
+export const textHeight = 18;
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index e75a369da3dc..9cf9f6dd2804 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -29,8 +29,11 @@ export type CommitDetails = {|
 |};
 
 export type ProfilingSummary = {|
-  // Tuples of commit time (relative to when profiling started) and duration
-  commits: Array<number>,
+  // Commit durations
+  commitDurations: Array<number>,
+
+  // Commit times (relative to when profiling started)
+  commitTimes: Array<number>,
 
   // Map of fiber id to (initial) tree base duration
   initialTreeBaseDurations: Map<number, number>,
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
new file mode 100644
index 000000000000..ed9897f544df
--- /dev/null
+++ b/src/devtools/views/Profiler/utils.js
@@ -0,0 +1,34 @@
+// @flow
+
+const commitGradient = [
+  'var(--color-commit-gradient-0)',
+  'var(--color-commit-gradient-1)',
+  'var(--color-commit-gradient-2)',
+  'var(--color-commit-gradient-3)',
+  'var(--color-commit-gradient-4)',
+  'var(--color-commit-gradient-5)',
+  'var(--color-commit-gradient-6)',
+  'var(--color-commit-gradient-7)',
+  'var(--color-commit-gradient-8)',
+  'var(--color-commit-gradient-9)',
+];
+
+export const getGradientColor = (value: number) => {
+  const maxIndex = commitGradient.length - 1;
+  let index;
+  if (Number.isNaN(value)) {
+    index = 0;
+  } else if (!Number.isFinite(value)) {
+    index = maxIndex;
+  } else {
+    index = Math.max(0, Math.min(maxIndex, value)) * maxIndex;
+  }
+  return commitGradient[Math.round(index)];
+};
+
+export const formatDuration = (duration: number) =>
+  Math.round(duration * 10) / 10;
+export const formatPercentage = (percentage: number) =>
+  Math.round(percentage * 100);
+export const formatTime = (timestamp: number) =>
+  Math.round(Math.round(timestamp) / 100) / 10;
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 2c5b16b1b0f0..9c4e36be8cc2 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -134,6 +134,17 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-button-disabled');
   updateStyleHelper(theme, 'color-button-focus');
   updateStyleHelper(theme, 'color-button-hover');
+  updateStyleHelper(theme, 'color-commit-did-not-render');
+  updateStyleHelper(theme, 'color-commit-gradient-0');
+  updateStyleHelper(theme, 'color-commit-gradient-1');
+  updateStyleHelper(theme, 'color-commit-gradient-2');
+  updateStyleHelper(theme, 'color-commit-gradient-3');
+  updateStyleHelper(theme, 'color-commit-gradient-4');
+  updateStyleHelper(theme, 'color-commit-gradient-5');
+  updateStyleHelper(theme, 'color-commit-gradient-6');
+  updateStyleHelper(theme, 'color-commit-gradient-7');
+  updateStyleHelper(theme, 'color-commit-gradient-8');
+  updateStyleHelper(theme, 'color-commit-gradient-9');
   updateStyleHelper(theme, 'color-component-name');
   updateStyleHelper(theme, 'color-component-name-inverted');
   updateStyleHelper(theme, 'color-dim');
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 3315ce6021f6..2607d47d8026 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -54,7 +54,7 @@ export function useLocalStorage<T>(
 }
 
 export function useModalDismissSignal(
-  modalRef: React$Ref<any>,
+  modalRef: { current: HTMLDivElement | null },
   dismissCallback: Function
 ): void {
   useEffect(() => {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 5c01902c1f5d..1d4ac95ceaf8 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -16,6 +16,17 @@
   --light-color-button-focus: #3578e5;
   --light-color-button-hover: #3578e5;
   --light-color-border: #eeeeee;
+  --light-color-commit-did-not-render: #777d88;
+  --light-color-commit-gradient-0: #37afa9;
+  --light-color-commit-gradient-1: #63b19e;
+  --light-color-commit-gradient-2: #80b393;
+  --light-color-commit-gradient-3: #97b488;
+  --light-color-commit-gradient-4: #abb67d;
+  --light-color-commit-gradient-5: #beb771;
+  --light-color-commit-gradient-6: #cfb965;
+  --light-color-commit-gradient-7: #dfba57;
+  --light-color-commit-gradient-8: #efbb49;
+  --light-color-commit-gradient-9: #febc38;
   --light-color-component-name: #8155cb;
   --light-color-component-name-inverted: #ffffff;
   --light-color-dim: #777d88;
@@ -46,6 +57,17 @@
   --dark-color-button-focus: #a2e9fc;
   --dark-color-button-hover: #a2e9fc;
   --dark-color-border: #3d424a;
+  --dark-color-commit-did-not-render: #8f949d;
+  --dark-color-commit-gradient-0: #37afa9;
+  --dark-color-commit-gradient-1: #63b19e;
+  --dark-color-commit-gradient-2: #80b393;
+  --dark-color-commit-gradient-3: #97b488;
+  --dark-color-commit-gradient-4: #abb67d;
+  --dark-color-commit-gradient-5: #beb771;
+  --dark-color-commit-gradient-6: #cfb965;
+  --dark-color-commit-gradient-7: #dfba57;
+  --dark-color-commit-gradient-8: #efbb49;
+  --dark-color-commit-gradient-9: #febc38;
   --dark-color-component-name: #61dafb;
   --dark-color-component-name-inverted: ##282828;
   --dark-color-dim: #8f949d;
diff --git a/yarn.lock b/yarn.lock
index 5fb4e0b02851..2f71613ed1db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4671,10 +4671,10 @@ flatstr@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3"
 
-flow-bin@^0.93.0:
-  version "0.93.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.93.0.tgz#9192a08d88db2a8da0ff55e42420f44539791430"
-  integrity sha512-p8yq4ocOlpyJgOEBEj0v0GzCP25c9WP0ilFQ8hXSbrTR7RPKuR+Whr+OitlVyp8ocdX0j1MrIwQ8x28dacy1pg==
+flow-bin@^0.94.0:
+  version "0.94.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.94.0.tgz#b5d58fe7559705b73a18229f97edfc3ab6ffffcb"
+  integrity sha512-DYF7r9CJ/AksfmmB4+q+TyLMoeQPRnqtF1Pk7KY3zgfkB/nVuA3nXyzqgsIPIvnMSiFEXQcFK4z+iPxSLckZhQ==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"

From 8b3546b437668cc6a6913193ac78279c481f90ae Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Mar 2019 16:25:29 -0700
Subject: [PATCH 137/814] Profiler CSS/layout tweaks

---
 .../views/Profiler/SnapshotCommitListItem.css  | 15 +++++++++++++++
 .../views/Profiler/SnapshotCommitListItem.js   | 18 ++++++------------
 .../views/Profiler/SnapshotSelector.css        |  4 +++-
 src/devtools/views/Profiler/constants.js       |  3 ---
 src/devtools/views/TabBar.css                  | 11 +++++++++--
 src/devtools/views/TabBar.js                   |  8 +++++++-
 6 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 src/devtools/views/Profiler/SnapshotCommitListItem.css

diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.css b/src/devtools/views/Profiler/SnapshotCommitListItem.css
new file mode 100644
index 000000000000..e017a26c142c
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -0,0 +1,15 @@
+.Outer {
+  user-select: none;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  padding-top: 4px;
+  padding-bottom: 1px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.Inner {
+  width: 100%;
+  min-height: 5px;
+  background-color: var(--color-commit-did-not-render);
+}
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 6defc0734681..0261903c9e98 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -4,6 +4,8 @@ import React, { memo, useCallback } from 'react';
 import { areEqual } from 'react-window';
 import { getGradientColor, formatDuration, formatTime } from './utils';
 
+import styles from './SnapshotCommitListItem.css';
+
 import type { ItemData } from './SnapshotCommitList';
 
 type Props = {
@@ -40,34 +42,26 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
 
   return (
     <div
+      className={styles.Outer}
       onClick={handleClick}
       onMouseEnter={isMouseDown ? handleClick : null}
       style={{
         ...style,
         width,
-        userSelect: 'none',
-        cursor: 'pointer',
         borderBottom: isSelected
           ? '3px solid var(--color-tree-node-selected)'
-          : '3px solid transparent',
-        paddingTop: 4,
-        paddingBottom: 1,
-        display: 'flex',
-        alignItems: 'flex-end',
+          : undefined,
       }}
       title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
         commitTime
       )}s`}
     >
       <div
+        className={styles.Inner}
         style={{
-          width,
           height: `${Math.round(percentage * 100)}%`,
-          minHeight: 5,
           backgroundColor:
-            percentage === 0
-              ? 'var(--color-commit-did-not-render)'
-              : getGradientColor(percentage),
+            percentage > 0 ? getGradientColor(percentage) : undefined,
         }}
       />
     </div>
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index d101b3b8d08c..b047febe2618 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -12,8 +12,9 @@
 }
 
 .Commits {
-  flex: 1 1 150px;
+  flex: 1 1 auto;
   height: 2.25rem;
+  min-width: 50px;
   margin-left: 0.25rem;
 }
 
@@ -25,5 +26,6 @@
 }
 
 .Number {
+  white-space: nowrap;
   font-family: var(--font-family-monospace);
 }
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index c6674c71119c..f48ee282eb9e 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,8 +1,5 @@
 // @flow
 
-export const barHeight = 20;
-export const barWidth = 100;
-export const barWidthThreshold = 2;
 export const minBarHeight = 5;
 export const minBarWidth = 5;
 export const textHeight = 18;
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 8b1fd706ac1c..efbef3599737 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -58,7 +58,14 @@
   height: 1rem;
 }
 
-.TabLabel {
+.TabLabelLarge,
+.TabLabelSmall {
+}
+
+@media screen and (max-width: 900px) {
+  .TabLabelSmall {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 600px) {
@@ -67,7 +74,7 @@
     margin-right: 0;
   }
 
-  .TabLabel {
+  .TabLabelLarge {
     display: none;
   }
 }
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index faf45fe62b5b..81611fb7a2f1 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -82,7 +82,13 @@ export default function TabBar({
             }`}
             type={icon}
           />
-          <span className={styles.TabLabel}>{label}</span>
+          <span
+            className={
+              size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
+            }
+          >
+            {label}
+          </span>
         </label>
       ))}
     </Fragment>

From 210c2371cf20b17e5c25267f375abdb9ec6172c2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Mar 2019 17:00:44 -0700
Subject: [PATCH 138/814] Naive pass at commit durationfiltering

---
 src/devtools/views/Profiler/FilterModal.js    | 33 ++++-----
 .../views/Profiler/ProfilerContext.js         | 22 ++++++
 .../views/Profiler/SnapshotCommitList.js      | 13 ++--
 .../views/Profiler/SnapshotSelector.css       |  8 +++
 .../views/Profiler/SnapshotSelector.js        | 70 +++++++++++++------
 5 files changed, 101 insertions(+), 45 deletions(-)

diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
index 34a25e52a7e9..8e91ef0a0db9 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -1,7 +1,8 @@
 // @flow
 
-import React, { useCallback, useEffect, useRef } from 'react';
-import { useLocalStorage, useModalDismissSignal } from '../hooks';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { useModalDismissSignal } from '../hooks';
+import { ProfilerContext } from './ProfilerContext';
 
 import styles from './FilterModal.css';
 
@@ -10,33 +11,33 @@ type Props = {|
 |};
 
 export default function FilterModal({ dismissModal }: Props) {
-  const [isEnabled, setIsEnabled] = useLocalStorage<boolean>(
-    'minCommitDurationFilterEnabled',
-    false
-  );
-  const [value, setValue] = useLocalStorage<number>(
-    'minCommitDurationFilter',
-    0
-  );
+  const {
+    isMinCommitDurationEnabled,
+    minCommitDuration,
+    setMinCommitDuration,
+    setIsMinCommitDurationEnabled,
+  } = useContext(ProfilerContext);
 
   const handleNumberChange = useCallback(
     ({ currentTarget }) => {
       const newValue = parseInt(currentTarget.value, 10);
-      setValue(Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue);
+      setMinCommitDuration(
+        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
+      );
     },
-    [setValue]
+    [setMinCommitDuration]
   );
 
   const handleEnabledChange = useCallback(
     ({ currentTarget }) => {
-      setIsEnabled(currentTarget.checked);
+      setIsMinCommitDurationEnabled(currentTarget.checked);
       if (currentTarget.checked) {
         if (inputRef.current !== null) {
           inputRef.current.focus();
         }
       }
     },
-    [setIsEnabled]
+    [setIsMinCommitDurationEnabled]
   );
 
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -55,7 +56,7 @@ export default function FilterModal({ dismissModal }: Props) {
       <div className={styles.Modal} ref={modalRef}>
         <label>
           <input
-            checked={isEnabled}
+            checked={isMinCommitDurationEnabled}
             onChange={handleEnabledChange}
             type="checkbox"
           />{' '}
@@ -66,7 +67,7 @@ export default function FilterModal({ dismissModal }: Props) {
           onChange={handleNumberChange}
           ref={inputRef}
           type="number"
-          value={value}
+          value={minCommitDuration}
         />{' '}
         (ms)
       </div>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 467d8247a296..9b02eed690b9 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -10,15 +10,20 @@ import React, {
 import { useSubscription } from '../hooks';
 import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
 import { StoreContext } from '../context';
+import { useLocalStorage } from '../hooks';
 import Store from '../../store';
 
 type Context = {|
   commitIndex: number,
   hasProfilingData: boolean,
+  isMinCommitDurationEnabled: boolean,
   isProfiling: boolean,
+  minCommitDuration: number,
   rendererID: number | null,
   rootID: number | null,
   setCommitIndex: (value: number) => void,
+  setMinCommitDuration: (value: number) => void,
+  setIsMinCommitDurationEnabled: (value: boolean) => void,
   startProfiling(value: boolean): void,
   stopProfiling(value: boolean): void,
 |};
@@ -94,13 +99,26 @@ function ProfilerContextController({ children }: Props) {
     setCommitIndex(0);
   }
 
+  const [
+    isMinCommitDurationEnabled,
+    setIsMinCommitDurationEnabled,
+  ] = useLocalStorage<boolean>('isMinCommitDurationEnabled', false);
+  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
+    'minCommitDuration',
+    0
+  );
+
   const value = useMemo(
     () => ({
       commitIndex,
       hasProfilingData,
+      isMinCommitDurationEnabled,
       isProfiling,
+      minCommitDuration,
       rendererID,
       rootID,
+      setMinCommitDuration,
+      setIsMinCommitDurationEnabled,
       setCommitIndex,
       startProfiling,
       stopProfiling,
@@ -108,9 +126,13 @@ function ProfilerContextController({ children }: Props) {
     [
       commitIndex,
       hasProfilingData,
+      isMinCommitDurationEnabled,
       isProfiling,
+      minCommitDuration,
       rendererID,
       rootID,
+      setMinCommitDuration,
+      setIsMinCommitDurationEnabled,
       setCommitIndex,
       startProfiling,
       stopProfiling,
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 4f4fe92661b8..69a10e3e18f6 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -12,8 +12,6 @@ import { FixedSizeList } from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
 import { minBarWidth } from './constants';
 
-import type { ProfilingSummary } from './types';
-
 export type ItemData = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
@@ -24,7 +22,8 @@ export type ItemData = {|
 |};
 
 type Props = {|
-  profilingSummary: ProfilingSummary,
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
   selectedCommitIndex: number,
   setCommitIndex: (index: number) => void,
   viewNextCommit: () => void,
@@ -41,7 +40,8 @@ export default function SnapshotCommitList(props: Props) {
 
 type ListProps = {|
   height: number,
-  profilingSummary: ProfilingSummary,
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
   selectedCommitIndex: number,
   setCommitIndex: (index: number) => void,
   viewNextCommit: () => void,
@@ -51,7 +51,8 @@ type ListProps = {|
 
 function List({
   height,
-  profilingSummary,
+  commitDurations,
+  commitTimes,
   selectedCommitIndex,
   setCommitIndex,
   viewNextCommit,
@@ -86,8 +87,6 @@ function List({
     };
   }, [handleMouseUp]);
 
-  const { commitDurations, commitTimes } = profilingSummary;
-
   const itemSize = useMemo(
     () => Math.max(minBarWidth, width / commitDurations.length),
     [commitDurations, width]
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index b047febe2618..48f11a2660a5 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -29,3 +29,11 @@
   white-space: nowrap;
   font-family: var(--font-family-monospace);
 }
+
+.NoCommits {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index e63da131735c..6146aaa1d167 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -21,26 +21,47 @@ export default function SnapshotSelectorSuspense(_: Props) {
 
 function SnapshotSelector(_: Props) {
   const { profilingCache } = useContext(StoreContext);
-  const { commitIndex, rendererID, rootID, setCommitIndex } = useContext(
-    ProfilerContext
-  );
+  const {
+    commitIndex,
+    isMinCommitDurationEnabled,
+    minCommitDuration,
+    rendererID,
+    rootID,
+    setCommitIndex,
+  } = useContext(ProfilerContext);
 
   if (rendererID === null || rootID === null) {
     return null;
   }
 
-  // TODO (profiling) Parse the summary into something easier for the views to work with
-  const profilingSummary = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
-  const numCommits = profilingSummary.commitDurations.length;
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
 
-  if (numCommits === 0) {
-    return null;
+  // TODO (profiling) This is not sufficient; index here doesn't map to a meaningful index in the profiling data.
+  let filteredCommitDurations = commitDurations;
+  let filteredCommitTimes = commitTimes;
+  if (isMinCommitDurationEnabled) {
+    filteredCommitDurations = [];
+    filteredCommitTimes = [];
+    for (let i = 0; i < commitDurations.length; i++) {
+      if (commitDurations[i] >= minCommitDuration) {
+        filteredCommitDurations.push(commitDurations[i]);
+        filteredCommitTimes.push(commitTimes[i]);
+      }
+    }
   }
 
+  const numCommits = filteredCommitDurations.length;
+  const currentCommitNumber = `${
+    numCommits > 0 ? commitIndex + 1 : '-'
+  }`.padStart(`${numCommits}`.length, '0');
+
+  // TODO (profiler) We need to guard commit index and share filterd statuses in a better way.
+
   const viewNextCommit = () => {
     setCommitIndex(Math.min(commitIndex + 1, numCommits - 1));
   };
@@ -53,24 +74,29 @@ function SnapshotSelector(_: Props) {
       <div className={styles.VRule} />
       <div className={styles.SnapshotSelector}>
         <span className={styles.Number}>
-          {`${commitIndex + 1}`.padStart(`${numCommits}`.length, '0')} /{' '}
-          {numCommits}
+          {currentCommitNumber} / {numCommits}
         </span>
         <Button
           className={styles.Button}
-          disabled={commitIndex <= 0}
+          disabled={numCommits === 0 || commitIndex <= 0}
           onClick={viewPrevCommit}
         >
           <ButtonIcon type="previous" />
         </Button>
         <div className={styles.Commits}>
-          <SnapshotCommitList
-            profilingSummary={profilingSummary}
-            selectedCommitIndex={commitIndex}
-            setCommitIndex={setCommitIndex}
-            viewNextCommit={viewNextCommit}
-            viewPrevCommit={viewPrevCommit}
-          />
+          {numCommits > 0 && (
+            <SnapshotCommitList
+              commitDurations={filteredCommitDurations}
+              commitTimes={filteredCommitTimes}
+              selectedCommitIndex={commitIndex}
+              setCommitIndex={setCommitIndex}
+              viewNextCommit={viewNextCommit}
+              viewPrevCommit={viewPrevCommit}
+            />
+          )}
+          {numCommits === 0 && (
+            <div className={styles.NoCommits}>No commits</div>
+          )}
         </div>
         <Button
           className={styles.Button}

From e8f84dd5c4d02ca8278d57e0d1406ff075a7ffb1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Mar 2019 08:34:08 -0700
Subject: [PATCH 139/814] Iterating on Profiling tab suspense. Stashing changes
 but planning to refactor immediately.

---
 src/devtools/store.js                         |  10 +-
 src/devtools/views/Profiler/FilterModal.js    |  25 +--
 src/devtools/views/Profiler/Profiler.js       |  25 ++-
 .../views/Profiler/ProfilerContext.js         | 149 ------------------
 .../views/Profiler/ProfilerDataContext.js     |  94 +++++++++++
 .../views/Profiler/ProfilerStatusContext.js   |  69 ++++++++
 src/devtools/views/Profiler/RecordToggle.js   |   4 +-
 .../views/Profiler/SnapshotCommitList.js      |  72 ++++-----
 .../views/Profiler/SnapshotCommitListItem.js  |   7 +-
 .../views/Profiler/SnapshotSelector.js        |  97 ++++--------
 src/devtools/views/TabBar.css                 |   7 +-
 src/devtools/views/hooks.js                   |  42 +++--
 12 files changed, 308 insertions(+), 293 deletions(-)
 delete mode 100644 src/devtools/views/Profiler/ProfilerContext.js
 create mode 100644 src/devtools/views/Profiler/ProfilerDataContext.js
 create mode 100644 src/devtools/views/Profiler/ProfilerStatusContext.js

diff --git a/src/devtools/store.js b/src/devtools/store.js
index c1fe80ebbe6d..ba731a0fd16b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -275,16 +275,24 @@ export default class Store extends EventEmitter {
   }
 
   startProfiling(): void {
+    this._bridge.send('startProfiling');
+
     // Invalidate suspense cache if profiling data is being (re-)recorded.
+    // Note that we clear now because any existing data is "stale".
     this._profilingCache.invalidate();
 
-    this._bridge.send('startProfiling');
     this._isProfiling = false;
     this.emit('isProfiling');
   }
 
   stopProfiling(): void {
     this._bridge.send('stopProfiling');
+
+    // Invalidate suspense cache if profiling data is being (re-)recorded.
+    // Note that we clear again, in case any views read from the cache while profiling.
+    // (That would have resolved a now-stale value without any profiling data.)
+    this._profilingCache.invalidate();
+
     this._isProfiling = false;
     this.emit('isProfiling');
   }
diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
index 8e91ef0a0db9..085fee0a7f83 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -1,8 +1,7 @@
 // @flow
 
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { useModalDismissSignal } from '../hooks';
-import { ProfilerContext } from './ProfilerContext';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useLocalStorage, useModalDismissSignal } from '../hooks';
 
 import styles from './FilterModal.css';
 
@@ -11,12 +10,14 @@ type Props = {|
 |};
 
 export default function FilterModal({ dismissModal }: Props) {
-  const {
-    isMinCommitDurationEnabled,
-    minCommitDuration,
-    setMinCommitDuration,
-    setIsMinCommitDurationEnabled,
-  } = useContext(ProfilerContext);
+  const [
+    isCommitFilterEnabled,
+    setIsCommitFilterEnabled,
+  ] = useLocalStorage<boolean>('isCommitFilterEnabled', false);
+  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
+    'minCommitDuration',
+    0
+  );
 
   const handleNumberChange = useCallback(
     ({ currentTarget }) => {
@@ -30,14 +31,14 @@ export default function FilterModal({ dismissModal }: Props) {
 
   const handleEnabledChange = useCallback(
     ({ currentTarget }) => {
-      setIsMinCommitDurationEnabled(currentTarget.checked);
+      setIsCommitFilterEnabled(currentTarget.checked);
       if (currentTarget.checked) {
         if (inputRef.current !== null) {
           inputRef.current.focus();
         }
       }
     },
-    [setIsMinCommitDurationEnabled]
+    [setIsCommitFilterEnabled]
   );
 
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -56,7 +57,7 @@ export default function FilterModal({ dismissModal }: Props) {
       <div className={styles.Modal} ref={modalRef}>
         <label>
           <input
-            checked={isMinCommitDurationEnabled}
+            checked={isCommitFilterEnabled}
             onChange={handleEnabledChange}
             type="checkbox"
           />{' '}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index e02630d69981..2e835066b53f 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,7 +1,11 @@
 // @flow
 
-import React, { useCallback, useContext, useState } from 'react';
-import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
+import React, { Suspense, useCallback, useContext, useState } from 'react';
+import { ProfilerDataContextController } from './ProfilerDataContext';
+import {
+  ProfilerStatusContext,
+  ProfilerStatusContextController,
+} from './ProfilerStatusContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
@@ -15,14 +19,23 @@ export type Props = {||};
 
 export default function ProfilerOuter(_: Props) {
   return (
-    <ProfilerContextController>
-      <ProfilerInner />
-    </ProfilerContextController>
+    <ProfilerStatusContextController>
+      <Suspense fallback={<ProfilerFallback />}>
+        <ProfilerDataContextController>
+          <ProfilerInner />
+        </ProfilerDataContextController>
+      </Suspense>
+    </ProfilerStatusContextController>
   );
 }
 
+function ProfilerFallback() {
+  // TODO (profiling) Real fallback UI
+  return null;
+}
+
 function ProfilerInner(_: Props) {
-  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+  const { hasProfilingData, isProfiling } = useContext(ProfilerStatusContext);
 
   const showProfilingControls = !isProfiling && hasProfilingData;
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
deleted file mode 100644
index 9b02eed690b9..000000000000
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ /dev/null
@@ -1,149 +0,0 @@
-// @flow
-
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { useSubscription } from '../hooks';
-import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
-import { StoreContext } from '../context';
-import { useLocalStorage } from '../hooks';
-import Store from '../../store';
-
-type Context = {|
-  commitIndex: number,
-  hasProfilingData: boolean,
-  isMinCommitDurationEnabled: boolean,
-  isProfiling: boolean,
-  minCommitDuration: number,
-  rendererID: number | null,
-  rootID: number | null,
-  setCommitIndex: (value: number) => void,
-  setMinCommitDuration: (value: number) => void,
-  setIsMinCommitDurationEnabled: (value: boolean) => void,
-  startProfiling(value: boolean): void,
-  stopProfiling(value: boolean): void,
-|};
-
-const ProfilerContext = createContext<Context>(((null: any): Context));
-ProfilerContext.displayName = 'ProfilerContext';
-
-type StoreProfilingState = {|
-  hasProfilingData: boolean,
-  isProfiling: boolean,
-|};
-
-type Props = {|
-  children: React$Node,
-|};
-
-function ProfilerContextController({ children }: Props) {
-  const store = useContext(StoreContext);
-
-  const { isProfiling, hasProfilingData } = useSubscription<
-    StoreProfilingState,
-    Store
-  >(
-    useMemo(
-      () => ({
-        source: store,
-        getCurrentValue: (store: Store) => ({
-          hasProfilingData: store.hasProfilingData,
-          isProfiling: store.isProfiling,
-        }),
-        subscribe: (store: Store, callback: Function) => {
-          store.addListener('isProfiling', callback);
-          return () => store.removeListener('isProfiling', callback);
-        },
-      }),
-      [store]
-    )
-  );
-
-  const startProfiling = useCallback(() => store.startProfiling(), [store]);
-  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
-
-  // TODO (profiling) The browser extension is a multi-root app,
-  // so ti won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
-  // We'll either need to lift that state up into the (shared) Store,
-  // or use a portal to share the contexts themselves between Chrome tabs.
-  const { selectedElementID } = useContext(TreeContext);
-
-  // If no root is selected, assume the first root.
-  // Many React apps are single root anyway.
-  let rendererID = null;
-  let rootID = null;
-  if (selectedElementID) {
-    rendererID = store.getRendererIDForElement(
-      ((selectedElementID: any): number)
-    );
-    rootID = store.getRootIDForElement(((selectedElementID: any): number));
-  } else if (store.roots.length > 0) {
-    rootID = store.roots[0];
-    rendererID = store.getRendererIDForElement(((rootID: any): number));
-  }
-
-  const [commitIndex, setCommitIndex] = useState(0);
-  const [prevRootID, setPrevRootID] = useState(rootID);
-  if (prevRootID !== rootID) {
-    setPrevRootID(rootID);
-    setCommitIndex(0);
-  }
-
-  const [prevIsProfiling, setPrevIsProfiling] = useState(isProfiling);
-  if (prevIsProfiling !== isProfiling) {
-    setPrevIsProfiling(isProfiling);
-    setCommitIndex(0);
-  }
-
-  const [
-    isMinCommitDurationEnabled,
-    setIsMinCommitDurationEnabled,
-  ] = useLocalStorage<boolean>('isMinCommitDurationEnabled', false);
-  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
-    'minCommitDuration',
-    0
-  );
-
-  const value = useMemo(
-    () => ({
-      commitIndex,
-      hasProfilingData,
-      isMinCommitDurationEnabled,
-      isProfiling,
-      minCommitDuration,
-      rendererID,
-      rootID,
-      setMinCommitDuration,
-      setIsMinCommitDurationEnabled,
-      setCommitIndex,
-      startProfiling,
-      stopProfiling,
-    }),
-    [
-      commitIndex,
-      hasProfilingData,
-      isMinCommitDurationEnabled,
-      isProfiling,
-      minCommitDuration,
-      rendererID,
-      rootID,
-      setMinCommitDuration,
-      setIsMinCommitDurationEnabled,
-      setCommitIndex,
-      startProfiling,
-      stopProfiling,
-    ]
-  );
-
-  return (
-    <ProfilerContext.Provider value={value}>
-      {children}
-    </ProfilerContext.Provider>
-  );
-}
-
-export { ProfilerContext, ProfilerContextController };
diff --git a/src/devtools/views/Profiler/ProfilerDataContext.js b/src/devtools/views/Profiler/ProfilerDataContext.js
new file mode 100644
index 000000000000..93b79316a612
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilerDataContext.js
@@ -0,0 +1,94 @@
+// @flow
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
+import { StoreContext } from '../context';
+import { useLocalStorage } from '../hooks';
+import { ProfilerStatusContext } from './ProfilerStatusContext';
+
+type Context = {|
+  commitIndex: number | null,
+  filteredCommitIndices: Array<number>,
+  rendererID: number | null,
+  rootID: number | null,
+  setCommitIndex: (value: number) => void,
+|};
+
+const ProfilerDataContext = createContext<Context>(((null: any): Context));
+ProfilerDataContext.displayName = 'ProfilerDataContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ProfilerDataContextController({ children }: Props) {
+  const store = useContext(StoreContext);
+
+  // TODO (profiling) The browser extension is a multi-root app,
+  // so it won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
+  // We'll either need to lift that state up into the (shared) Store,
+  // or use a portal to share the contexts themselves between Chrome tabs.
+  const { selectedElementID } = useContext(TreeContext);
+
+  // If no root is selected, assume the first root; many React apps are single root anyway.
+  let rendererID = null;
+  let rootID = null;
+  if (selectedElementID) {
+    rendererID = store.getRendererIDForElement(
+      ((selectedElementID: any): number)
+    );
+    rootID = store.getRootIDForElement(((selectedElementID: any): number));
+  } else if (store.roots.length > 0) {
+    rootID = store.roots[0];
+    rendererID = store.getRendererIDForElement(((rootID: any): number));
+  }
+
+  // This value is important because it ensure we re-render after our suspense cache has been cleared.
+  const { isProfiling } = useContext(ProfilerStatusContext);
+
+  const profilingSummary = store.profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const [isCommitFilterEnabled] = useLocalStorage<boolean>(
+    'isCommitFilterEnabled',
+    false
+  );
+  const [minCommitDuration] = useLocalStorage<number>('minCommitDuration', 0);
+  const { commitDurations } = profilingSummary;
+  const filteredCommitIndices = useMemo(() => {
+    const array = [];
+    if (!isProfiling) {
+      for (let i = 0; i < commitDurations.length; i++) {
+        if (!isCommitFilterEnabled || commitDurations[i] >= minCommitDuration) {
+          array.push(i);
+        }
+      }
+    }
+    return array;
+  }, [commitDurations, isCommitFilterEnabled, isProfiling, minCommitDuration]);
+
+  const [commitIndex, setCommitIndex] = useState<number | null>(
+    commitDurations.length > 0 ? 0 : null
+  );
+
+  const value = useMemo(
+    () => ({
+      commitIndex,
+      filteredCommitIndices,
+      rendererID,
+      rootID,
+      setCommitIndex,
+    }),
+    [commitIndex, filteredCommitIndices, rendererID, rootID, setCommitIndex]
+  );
+
+  return (
+    <ProfilerDataContext.Provider value={value}>
+      {children}
+    </ProfilerDataContext.Provider>
+  );
+}
+
+export { ProfilerDataContext, ProfilerDataContextController };
diff --git a/src/devtools/views/Profiler/ProfilerStatusContext.js b/src/devtools/views/Profiler/ProfilerStatusContext.js
new file mode 100644
index 000000000000..041aa1a2de1f
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilerStatusContext.js
@@ -0,0 +1,69 @@
+// @flow
+
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import { useSubscription } from '../hooks';
+import { StoreContext } from '../context';
+import Store from '../../store';
+
+type Context = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+  startProfiling(value: boolean): void,
+  stopProfiling(value: boolean): void,
+|};
+
+const ProfilerStatusContext = createContext<Context>(((null: any): Context));
+ProfilerStatusContext.displayName = 'ProfilerStatusContext';
+
+type StoreProfilingState = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+|};
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ProfilerStatusContextController({ children }: Props) {
+  const store = useContext(StoreContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        hasProfilingData: store.hasProfilingData,
+        isProfiling: store.isProfiling,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('isProfiling', callback);
+        return () => store.removeListener('isProfiling', callback);
+      },
+    }),
+    [store]
+  );
+
+  const { isProfiling, hasProfilingData } = useSubscription<
+    StoreProfilingState,
+    Store
+  >(subscription);
+
+  const startProfiling = useCallback(() => store.startProfiling(), [store]);
+  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
+
+  const value = useMemo(
+    () => ({
+      hasProfilingData,
+      isProfiling,
+      startProfiling,
+      stopProfiling,
+    }),
+    [hasProfilingData, isProfiling, startProfiling, stopProfiling]
+  );
+
+  return (
+    <ProfilerStatusContext.Provider value={value}>
+      {children}
+    </ProfilerStatusContext.Provider>
+  );
+}
+
+export { ProfilerStatusContext, ProfilerStatusContextController };
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
index 4d1bb591d92f..85356e6fd936 100644
--- a/src/devtools/views/Profiler/RecordToggle.js
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -3,7 +3,7 @@
 import React, { useContext } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { ProfilerContext } from './ProfilerContext';
+import { ProfilerStatusContext } from './ProfilerStatusContext';
 
 import styles from './RecordToggle.css';
 
@@ -11,7 +11,7 @@ export type Props = {||};
 
 export default function RecordToggle(_: Props) {
   const { isProfiling, startProfiling, stopProfiling } = useContext(
-    ProfilerContext
+    ProfilerStatusContext
   );
 
   return (
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 69a10e3e18f6..c39ca7310335 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -2,6 +2,7 @@
 
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -11,67 +12,64 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
 import { minBarWidth } from './constants';
+import { ProfilerDataContext } from './ProfilerDataContext';
+import { StoreContext } from '../context';
 
 export type ItemData = {|
   commitDurations: Array<number>,
+  commitIndex: number | null,
   commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
   isMouseDown: boolean,
   maxDuration: number,
-  selectedCommitIndex: number,
   setCommitIndex: (index: number) => void,
 |};
 
-type Props = {|
-  commitDurations: Array<number>,
-  commitTimes: Array<number>,
-  selectedCommitIndex: number,
-  setCommitIndex: (index: number) => void,
-  viewNextCommit: () => void,
-  viewPrevCommit: () => void,
-|};
+type Props = {||};
 
-export default function SnapshotCommitList(props: Props) {
+export default function SnapshotCommitList(_: Props) {
   return (
     <AutoSizer>
-      {({ height, width }) => <List height={height} width={width} {...props} />}
+      {({ height, width }) => <List height={height} width={width} />}
     </AutoSizer>
   );
 }
 
 type ListProps = {|
   height: number,
-  commitDurations: Array<number>,
-  commitTimes: Array<number>,
-  selectedCommitIndex: number,
-  setCommitIndex: (index: number) => void,
-  viewNextCommit: () => void,
-  viewPrevCommit: () => void,
   width: number,
 |};
 
-function List({
-  height,
-  commitDurations,
-  commitTimes,
-  selectedCommitIndex,
-  setCommitIndex,
-  viewNextCommit,
-  viewPrevCommit,
-  width,
-}: ListProps) {
+function List({ height, width }: ListProps) {
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const [isMouseDown, setIsMouseDown] = useState(false);
-  const prevSelectedCommitIndexRef = useRef<number>(-1);
+  const prevCommitIndexRef = useRef<number | null>(null);
+
+  const { profilingCache } = useContext(StoreContext);
+  const {
+    commitIndex,
+    filteredCommitIndices,
+    rendererID,
+    rootID,
+    setCommitIndex,
+  } = useContext(ProfilerDataContext);
+
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
 
   // Make sure any newly selected snapshot is visible within the list.
   useEffect(() => {
-    if (selectedCommitIndex !== prevSelectedCommitIndexRef.current) {
-      prevSelectedCommitIndexRef.current = selectedCommitIndex;
-      if (listRef.current !== null) {
-        listRef.current.scrollToItem(selectedCommitIndex);
+    if (commitIndex !== prevCommitIndexRef.current) {
+      prevCommitIndexRef.current = commitIndex;
+      if (commitIndex !== null && listRef.current !== null) {
+        listRef.current.scrollToItem(commitIndex);
       }
     }
-  }, [listRef, selectedCommitIndex]);
+  }, [listRef, commitIndex]);
 
   const handleMouseDown = useCallback(() => {
     setIsMouseDown(true);
@@ -104,18 +102,20 @@ function List({
   const itemData = useMemo<ItemData>(
     () => ({
       commitDurations,
+      commitIndex,
       commitTimes,
+      filteredCommitIndices,
       isMouseDown,
       maxDuration,
-      selectedCommitIndex,
       setCommitIndex,
     }),
     [
       commitDurations,
+      commitIndex,
       commitTimes,
+      filteredCommitIndices,
       isMouseDown,
       maxDuration,
-      selectedCommitIndex,
       setCommitIndex,
     ]
   );
@@ -130,7 +130,7 @@ function List({
         <FixedSizeList
           direction="horizontal"
           height={height}
-          itemCount={commitDurations.length}
+          itemCount={filteredCommitIndices.length}
           itemData={itemData}
           itemSize={itemSize}
           ref={(listRef: any) /* Flow bug? */}
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 0261903c9e98..4debf7240188 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -17,13 +17,16 @@ type Props = {
 function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
   const {
     commitDurations,
+    commitIndex,
     commitTimes,
+    filteredCommitIndices,
     isMouseDown,
     maxDuration,
-    selectedCommitIndex,
     setCommitIndex,
   } = itemData;
 
+  index = filteredCommitIndices[index];
+
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
@@ -35,7 +38,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
   // Guard against commits with duration 0
   const percentage =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
-  const isSelected = selectedCommitIndex === index;
+  const isSelected = commitIndex === index;
 
   // Leave a 1px gap between snapshots
   const width = parseFloat(style.width) - 1;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 6146aaa1d167..66577fe5babe 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -1,106 +1,72 @@
 // @flow
 
-import React, { Fragment, Suspense, useContext } from 'react';
+import React, { Fragment, useCallback, useContext } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { StoreContext } from '../context';
-import { ProfilerContext } from './ProfilerContext';
+import { ProfilerDataContext } from './ProfilerDataContext';
 import SnapshotCommitList from './SnapshotCommitList';
 
 import styles from './SnapshotSelector.css';
 
 export type Props = {||};
 
-export default function SnapshotSelectorSuspense(_: Props) {
-  return (
-    <Suspense fallback={<SnapshotSelectorFallback />}>
-      <SnapshotSelector />
-    </Suspense>
-  );
-}
-
-function SnapshotSelector(_: Props) {
-  const { profilingCache } = useContext(StoreContext);
+export default function SnapshotSelector(_: Props) {
   const {
     commitIndex,
-    isMinCommitDurationEnabled,
-    minCommitDuration,
+    filteredCommitIndices,
     rendererID,
     rootID,
     setCommitIndex,
-  } = useContext(ProfilerContext);
+  } = useContext(ProfilerDataContext);
 
-  if (rendererID === null || rootID === null) {
-    return null;
+  const numCommits = filteredCommitIndices.length;
+  let currentCommitNumber = '-';
+  if (numCommits > 0) {
+    currentCommitNumber = `${commitIndex + 1}`.padStart(
+      `${numCommits}`.length,
+      '0'
+    );
   }
 
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
+  const viewNextCommit = useCallback(() => {
+    const nextCommitIndex = Math.min(
+      ((commitIndex: any): number) + 1,
+      filteredCommitIndices.length - 1
+    );
+    setCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [commitIndex, filteredCommitIndices, setCommitIndex]);
+  const viewPrevCommit = useCallback(() => {
+    const nextCommitIndex = Math.max(((commitIndex: any): number) - 1, 0);
+    setCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [commitIndex, filteredCommitIndices, setCommitIndex]);
 
-  // TODO (profiling) This is not sufficient; index here doesn't map to a meaningful index in the profiling data.
-  let filteredCommitDurations = commitDurations;
-  let filteredCommitTimes = commitTimes;
-  if (isMinCommitDurationEnabled) {
-    filteredCommitDurations = [];
-    filteredCommitTimes = [];
-    for (let i = 0; i < commitDurations.length; i++) {
-      if (commitDurations[i] >= minCommitDuration) {
-        filteredCommitDurations.push(commitDurations[i]);
-        filteredCommitTimes.push(commitTimes[i]);
-      }
-    }
+  if (rendererID === null || rootID === null) {
+    return null;
   }
 
-  const numCommits = filteredCommitDurations.length;
-  const currentCommitNumber = `${
-    numCommits > 0 ? commitIndex + 1 : '-'
-  }`.padStart(`${numCommits}`.length, '0');
-
-  // TODO (profiler) We need to guard commit index and share filterd statuses in a better way.
-
-  const viewNextCommit = () => {
-    setCommitIndex(Math.min(commitIndex + 1, numCommits - 1));
-  };
-  const viewPrevCommit = () => {
-    setCommitIndex(Math.max(commitIndex - 1, 0));
-  };
-
   return (
     <Fragment>
       <div className={styles.VRule} />
       <div className={styles.SnapshotSelector}>
         <span className={styles.Number}>
-          {currentCommitNumber} / {numCommits}
+          {numCommits > 0 ? `${currentCommitNumber} / ${numCommits}` : '-'}
         </span>
         <Button
           className={styles.Button}
-          disabled={numCommits === 0 || commitIndex <= 0}
+          disabled={commitIndex === null || commitIndex <= 0}
           onClick={viewPrevCommit}
         >
           <ButtonIcon type="previous" />
         </Button>
         <div className={styles.Commits}>
-          {numCommits > 0 && (
-            <SnapshotCommitList
-              commitDurations={filteredCommitDurations}
-              commitTimes={filteredCommitTimes}
-              selectedCommitIndex={commitIndex}
-              setCommitIndex={setCommitIndex}
-              viewNextCommit={viewNextCommit}
-              viewPrevCommit={viewPrevCommit}
-            />
-          )}
+          {numCommits > 0 && <SnapshotCommitList />}
           {numCommits === 0 && (
             <div className={styles.NoCommits}>No commits</div>
           )}
         </div>
         <Button
           className={styles.Button}
-          disabled={commitIndex >= numCommits - 1}
+          disabled={commitIndex === null || commitIndex >= numCommits - 1}
           onClick={viewNextCommit}
         >
           <ButtonIcon type="next" />
@@ -109,8 +75,3 @@ function SnapshotSelector(_: Props) {
     </Fragment>
   );
 }
-
-function SnapshotSelectorFallback() {
-  // TODO (profiling) Better loading UI
-  return <div className={styles.SnapshotSelector}>Loading...</div>;
-}
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index efbef3599737..c4c647372fcb 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -66,11 +66,14 @@
   .TabLabelSmall {
     display: none;
   }
+
+  .IconSizeSmall {
+    margin-right: 0;
+  }
 }
 
 @media screen and (max-width: 600px) {
-  .IconSizeLarge,
-  .IconSizeSmall {
+  .IconSizeLarge {
     margin-right: 0;
   }
 
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 2607d47d8026..6d28ead16e79 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -2,9 +2,15 @@
 
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
+type LocalStorageKey =
+  | 'displayDensity'
+  | 'isCommitFilterEnabled'
+  | 'minCommitDuration'
+  | 'theme';
+
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
-  key: string,
+  key: LocalStorageKey,
   initialValue: T
 ): [T, (value: T | (() => T)) => void] {
   const getValueFromLocalStorage = useCallback(() => {
@@ -85,24 +91,27 @@ export function useModalDismissSignal(
 }
 
 // Copied from https://github.com/facebook/react/pull/15022
-export function useSubscription<Value, Source>({
-  source,
+export function useSubscription<Value>({
   getCurrentValue,
   subscribe,
 }: {|
-  source: Source,
-  getCurrentValue: (source: Source) => Value,
-  subscribe: (source: Source, callback: Function) => () => void,
+  getCurrentValue: () => Value,
+  subscribe: (callback: Function) => () => void,
 |}): Value {
   const [state, setState] = useState({
-    source,
-    value: getCurrentValue(source),
+    getCurrentValue,
+    subscribe,
+    value: getCurrentValue(),
   });
 
-  if (state.source !== source) {
+  if (
+    state.getCurrentValue !== getCurrentValue ||
+    state.subscribe !== subscribe
+  ) {
     setState({
-      source,
-      value: getCurrentValue(source),
+      getCurrentValue,
+      subscribe,
+      value: getCurrentValue(),
     });
   }
 
@@ -115,11 +124,14 @@ export function useSubscription<Value, Source>({
       }
 
       setState(prevState => {
-        if (prevState.source !== source) {
+        if (
+          prevState.getCurrentValue !== getCurrentValue ||
+          prevState.subscribe !== subscribe
+        ) {
           return prevState;
         }
 
-        const value = getCurrentValue(source);
+        const value = getCurrentValue();
         if (prevState.value === value) {
           return prevState;
         }
@@ -127,7 +139,7 @@ export function useSubscription<Value, Source>({
         return { ...prevState, value };
       });
     };
-    const unsubscribe = subscribe(source, checkForUpdates);
+    const unsubscribe = subscribe(checkForUpdates);
 
     checkForUpdates();
 
@@ -135,7 +147,7 @@ export function useSubscription<Value, Source>({
       didUnsubscribe = true;
       unsubscribe();
     };
-  }, [getCurrentValue, source, subscribe]);
+  }, [getCurrentValue, subscribe]);
 
   return state.value;
 }

From 585c1cb3d2bacd4aa5ccca51b7f9824a07818e71 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Mar 2019 10:26:21 -0700
Subject: [PATCH 140/814] Refactored Profiler tree to better work with suspense

---
 src/devtools/views/DevTools.js                |  47 +++---
 src/devtools/views/Profiler/FilterModal.js    |  15 +-
 src/devtools/views/Profiler/Profiler.js       |  93 +++++-----
 .../views/Profiler/ProfilerContext.js         | 159 ++++++++++++++++++
 .../views/Profiler/ProfilerDataContext.js     |  94 -----------
 .../views/Profiler/ProfilerStatusContext.js   |  69 --------
 src/devtools/views/Profiler/RecordToggle.js   |   4 +-
 .../views/Profiler/SnapshotCommitList.js      |  96 ++++++-----
 .../views/Profiler/SnapshotCommitListItem.js  |  10 +-
 .../views/Profiler/SnapshotSelector.css       |  17 +-
 .../views/Profiler/SnapshotSelector.js        | 111 ++++++++----
 src/devtools/views/Profiler/constants.js      |   1 +
 src/devtools/views/hooks.js                   |   8 +-
 13 files changed, 391 insertions(+), 333 deletions(-)
 create mode 100644 src/devtools/views/Profiler/ProfilerContext.js
 delete mode 100644 src/devtools/views/Profiler/ProfilerDataContext.js
 delete mode 100644 src/devtools/views/Profiler/ProfilerStatusContext.js

diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index d2d9cb84748c..3473582f04cb 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -9,6 +9,7 @@ import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Elements/TreeContext';
+import { ProfilerContextController } from './Profiler/ProfilerContext';
 import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
@@ -104,27 +105,31 @@ export default function DevTools({
       <StoreContext.Provider value={store}>
         <SettingsContextController browserTheme={browserTheme}>
           <TreeContextController viewElementSource={viewElementSource}>
-            <div className={styles.DevTools}>
-              {showTabBar && (
-                <div className={styles.TabBar}>
-                  <ReactLogo />
-                  <span className={styles.DevToolsVersion}>
-                    {process.env.DEVTOOLS_VERSION}
-                  </span>
-                  <div className={styles.Spacer} />
-                  <TabBar
-                    currentTab={tab}
-                    id="DevTools"
-                    selectTab={setTab}
-                    size="large"
-                    tabs={
-                      supportsProfiling ? tabsWithProfiler : tabsWithoutProfiler
-                    }
-                  />
-                </div>
-              )}
-              <div className={styles.TabContent}>{tabElement}</div>
-            </div>
+            <ProfilerContextController>
+              <div className={styles.DevTools}>
+                {showTabBar && (
+                  <div className={styles.TabBar}>
+                    <ReactLogo />
+                    <span className={styles.DevToolsVersion}>
+                      {process.env.DEVTOOLS_VERSION}
+                    </span>
+                    <div className={styles.Spacer} />
+                    <TabBar
+                      currentTab={tab}
+                      id="DevTools"
+                      selectTab={setTab}
+                      size="large"
+                      tabs={
+                        supportsProfiling
+                          ? tabsWithProfiler
+                          : tabsWithoutProfiler
+                      }
+                    />
+                  </div>
+                )}
+                <div className={styles.TabContent}>{tabElement}</div>
+              </div>
+            </ProfilerContextController>
           </TreeContextController>
         </SettingsContextController>
       </StoreContext.Provider>
diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
index 085fee0a7f83..363919c08f30 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -1,7 +1,8 @@
 // @flow
 
-import React, { useCallback, useEffect, useRef } from 'react';
-import { useLocalStorage, useModalDismissSignal } from '../hooks';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { useModalDismissSignal } from '../hooks';
 
 import styles from './FilterModal.css';
 
@@ -10,14 +11,12 @@ type Props = {|
 |};
 
 export default function FilterModal({ dismissModal }: Props) {
-  const [
+  const {
     isCommitFilterEnabled,
+    minCommitDuration,
     setIsCommitFilterEnabled,
-  ] = useLocalStorage<boolean>('isCommitFilterEnabled', false);
-  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
-    'minCommitDuration',
-    0
-  );
+    setMinCommitDuration,
+  } = useContext(ProfilerContext);
 
   const handleNumberChange = useCallback(
     ({ currentTarget }) => {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 2e835066b53f..0a647919e9f8 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,11 +1,7 @@
 // @flow
 
 import React, { Suspense, useCallback, useContext, useState } from 'react';
-import { ProfilerDataContextController } from './ProfilerDataContext';
-import {
-  ProfilerStatusContext,
-  ProfilerStatusContextController,
-} from './ProfilerStatusContext';
+import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
@@ -15,46 +11,68 @@ import SnapshotSelector from './SnapshotSelector';
 
 import styles from './Profiler.css';
 
-export type Props = {||};
+export default function Profiler(_: {||}) {
+  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
 
-export default function ProfilerOuter(_: Props) {
-  return (
-    <ProfilerStatusContextController>
+  if (isProfiling || !hasProfilingData) {
+    return <NonSuspendingProfiler isProfiling={isProfiling} />;
+  } else {
+    return (
       <Suspense fallback={<ProfilerFallback />}>
-        <ProfilerDataContextController>
-          <ProfilerInner />
-        </ProfilerDataContextController>
+        <SuspendingProfiler />
       </Suspense>
-    </ProfilerStatusContextController>
+    );
+  }
+}
+
+// This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).
+// Nothing in this view's subtree suspends.
+// By not suspending while profiling is in progress, we avoid potential cache invalidation trickiness.
+function NonSuspendingProfiler({ isProfiling }: {| isProfiling: boolean |}) {
+  const view = isProfiling ? <RecortdingInProgress /> : <NoProfilingData />;
+
+  return (
+    <div className={styles.Profiler}>
+      <div className={styles.LeftColumn}>
+        <div className={styles.Toolbar}>
+          <RecordToggle />
+          <Button disabled title="Reload and start profiling">
+            {/* TODO (profiling) Wire up reload button */}
+            <ButtonIcon type="reload" />
+          </Button>
+          <div className={styles.VRule} />
+          <TabBar
+            currentTab={null}
+            disabled
+            id="Profiler"
+            selectTab={() => {}}
+            size="small"
+            tabs={tabs}
+          />
+        </div>
+        <div className={styles.Content}>{view}</div>
+      </div>
+    </div>
   );
 }
 
+// TODO (profiling) Real fallback UI
 function ProfilerFallback() {
-  // TODO (profiling) Real fallback UI
-  return null;
+  return <div>Loading...</div>;
 }
 
-function ProfilerInner(_: Props) {
-  const { hasProfilingData, isProfiling } = useContext(ProfilerStatusContext);
-
-  const showProfilingControls = !isProfiling && hasProfilingData;
-
+// This view is rendered when there is profiler data (even though there may not be any for the currently selected root).
+// This view's subtree uses suspense to request profiler data from the backend.
+function SuspendingProfiler(_: {||}) {
   const [tab, setTab] = useState('flame-chart');
   const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
 
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
-  let view = null;
-  if (isProfiling) {
-    view = <RecortdingInProgress />;
-  } else if (!hasProfilingData) {
-    view = <NoProfilingData />;
-  } else {
-    // TODO (profiling) Differentiate between no data and no data for the current root
-    // TODO (profiling) Show selected "tab" view
-    view = <div>Coming soon...</div>;
-  }
+  // TODO (profiling) Differentiate between no data and no data for the current root
+  // TODO (profiling) Show selected "tab" view
+  const view = <div>Coming soon...</div>;
 
   return (
     <div className={styles.Profiler}>
@@ -68,7 +86,6 @@ function ProfilerInner(_: Props) {
           <div className={styles.VRule} />
           <TabBar
             currentTab={tab}
-            disabled={!showProfilingControls}
             id="Profiler"
             selectTab={setTab}
             size="small"
@@ -78,7 +95,7 @@ function ProfilerInner(_: Props) {
           <Button onClick={showFilterModal} title="Filter commits by duration">
             <ButtonIcon type="filter" />
           </Button>
-          {showProfilingControls && <SnapshotSelector />}
+          <SnapshotSelector />
         </div>
         <div className={styles.Content}>
           {view}
@@ -87,13 +104,11 @@ function ProfilerInner(_: Props) {
           )}
         </div>
       </div>
-      {showProfilingControls && (
-        <div className={styles.RightColumn}>
-          {/* TODO (profiler) Dynamic information */}
-          <div className={styles.Toolbar}>Commit information</div>
-          <div className={styles.InspectedProperties} />
-        </div>
-      )}
+      <div className={styles.RightColumn}>
+        {/* TODO (profiler) Dynamic information */}
+        <div className={styles.Toolbar}>Commit information</div>
+        <div className={styles.InspectedProperties} />
+      </div>
     </div>
   );
 }
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
new file mode 100644
index 000000000000..fa8e827c0fec
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -0,0 +1,159 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { useLocalStorage, useSubscription } from '../hooks';
+import { TreeContext } from '../Elements/TreeContext';
+import { StoreContext } from '../context';
+import Store from '../../store';
+
+type Context = {|
+  // Have we recorded any profiling data?
+  // Are we currently profiling?
+  // This value may be modified by the record button in the Profiler toolbar,
+  // or from the backend itself (after a reload-and-profile action).
+  // It is synced between the backend and frontend via a Store subscription.
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+  startProfiling(value: boolean): void,
+  stopProfiling(value: boolean): void,
+
+  // Which renderer and root should profiling data be shown for?
+  // Often this will correspond to the selected renderer and root in the Elements panel.
+  // If nothing is selected though, this will default to the first root.
+  rendererID: number | null,
+  rootID: number | null,
+
+  // Controls whether commits are filtered by duration.
+  // This value is controlled by a filter toggle UI in the Profiler toolbar.
+  // It impacts the commit selector UI as well as the fiber commits bar chart.
+  isCommitFilterEnabled: boolean,
+  setIsCommitFilterEnabled: (value: boolean) => void,
+  minCommitDuration: number,
+  setMinCommitDuration: (value: number) => void,
+
+  // Which commit is currently selected in the commit selector UI.
+  // Note that this is the index of the commit in all commits (non-filtered) that were profiled.
+  // This value is controlled by the commit selector UI in the Profiler toolbar.
+  // It impacts the flame graph and ranked charts.
+  selectedCommitIndex: number | null,
+  setSelectedCommitIndex: (value: number | null) => void,
+|};
+
+const ProfilerContext = createContext<Context>(((null: any): Context));
+ProfilerContext.displayName = 'ProfilerContext';
+
+type StoreProfilingState = {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+|};
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ProfilerContextController({ children }: Props) {
+  const store = useContext(StoreContext);
+  const { selectedElementID } = useContext(TreeContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        hasProfilingData: store.hasProfilingData,
+        isProfiling: store.isProfiling,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('isProfiling', callback);
+        return () => store.removeListener('isProfiling', callback);
+      },
+    }),
+    [store]
+  );
+  const { isProfiling, hasProfilingData } = useSubscription<
+    StoreProfilingState,
+    Store
+  >(subscription);
+
+  // TODO (profiling) The browser extension is a multi-root app,
+  // so it won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
+  // We'll either need to lift that state up into the (shared) Store,
+  // or use a portal to share the contexts themselves between Chrome tabs.
+  let rendererID = null;
+  let rootID = null;
+  if (selectedElementID) {
+    rendererID = store.getRendererIDForElement(
+      ((selectedElementID: any): number)
+    );
+    rootID = store.getRootIDForElement(((selectedElementID: any): number));
+  } else if (store.roots.length > 0) {
+    // If no root is selected, assume the first root; many React apps are single root anyway.
+    rootID = store.roots[0];
+    rendererID = store.getRendererIDForElement(((rootID: any): number));
+  }
+
+  const startProfiling = useCallback(() => store.startProfiling(), [store]);
+  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
+
+  const [
+    isCommitFilterEnabled,
+    setIsCommitFilterEnabled,
+  ] = useLocalStorage<boolean>('isCommitFilterEnabled', false);
+  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
+    'minCommitDuration',
+    0
+  );
+
+  const [selectedCommitIndex, setSelectedCommitIndex] = useState<number | null>(
+    null
+  );
+
+  const value = useMemo(
+    () => ({
+      hasProfilingData,
+      isProfiling,
+      startProfiling,
+      stopProfiling,
+
+      rendererID,
+      rootID,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      setSelectedCommitIndex,
+    }),
+    [
+      hasProfilingData,
+      isProfiling,
+      startProfiling,
+      stopProfiling,
+
+      rendererID,
+      rootID,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      setSelectedCommitIndex,
+    ]
+  );
+
+  return (
+    <ProfilerContext.Provider value={value}>
+      {children}
+    </ProfilerContext.Provider>
+  );
+}
+
+export { ProfilerContext, ProfilerContextController };
diff --git a/src/devtools/views/Profiler/ProfilerDataContext.js b/src/devtools/views/Profiler/ProfilerDataContext.js
deleted file mode 100644
index 93b79316a612..000000000000
--- a/src/devtools/views/Profiler/ProfilerDataContext.js
+++ /dev/null
@@ -1,94 +0,0 @@
-// @flow
-
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
-import { StoreContext } from '../context';
-import { useLocalStorage } from '../hooks';
-import { ProfilerStatusContext } from './ProfilerStatusContext';
-
-type Context = {|
-  commitIndex: number | null,
-  filteredCommitIndices: Array<number>,
-  rendererID: number | null,
-  rootID: number | null,
-  setCommitIndex: (value: number) => void,
-|};
-
-const ProfilerDataContext = createContext<Context>(((null: any): Context));
-ProfilerDataContext.displayName = 'ProfilerDataContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function ProfilerDataContextController({ children }: Props) {
-  const store = useContext(StoreContext);
-
-  // TODO (profiling) The browser extension is a multi-root app,
-  // so it won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
-  // We'll either need to lift that state up into the (shared) Store,
-  // or use a portal to share the contexts themselves between Chrome tabs.
-  const { selectedElementID } = useContext(TreeContext);
-
-  // If no root is selected, assume the first root; many React apps are single root anyway.
-  let rendererID = null;
-  let rootID = null;
-  if (selectedElementID) {
-    rendererID = store.getRendererIDForElement(
-      ((selectedElementID: any): number)
-    );
-    rootID = store.getRootIDForElement(((selectedElementID: any): number));
-  } else if (store.roots.length > 0) {
-    rootID = store.roots[0];
-    rendererID = store.getRendererIDForElement(((rootID: any): number));
-  }
-
-  // This value is important because it ensure we re-render after our suspense cache has been cleared.
-  const { isProfiling } = useContext(ProfilerStatusContext);
-
-  const profilingSummary = store.profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
-  const [isCommitFilterEnabled] = useLocalStorage<boolean>(
-    'isCommitFilterEnabled',
-    false
-  );
-  const [minCommitDuration] = useLocalStorage<number>('minCommitDuration', 0);
-  const { commitDurations } = profilingSummary;
-  const filteredCommitIndices = useMemo(() => {
-    const array = [];
-    if (!isProfiling) {
-      for (let i = 0; i < commitDurations.length; i++) {
-        if (!isCommitFilterEnabled || commitDurations[i] >= minCommitDuration) {
-          array.push(i);
-        }
-      }
-    }
-    return array;
-  }, [commitDurations, isCommitFilterEnabled, isProfiling, minCommitDuration]);
-
-  const [commitIndex, setCommitIndex] = useState<number | null>(
-    commitDurations.length > 0 ? 0 : null
-  );
-
-  const value = useMemo(
-    () => ({
-      commitIndex,
-      filteredCommitIndices,
-      rendererID,
-      rootID,
-      setCommitIndex,
-    }),
-    [commitIndex, filteredCommitIndices, rendererID, rootID, setCommitIndex]
-  );
-
-  return (
-    <ProfilerDataContext.Provider value={value}>
-      {children}
-    </ProfilerDataContext.Provider>
-  );
-}
-
-export { ProfilerDataContext, ProfilerDataContextController };
diff --git a/src/devtools/views/Profiler/ProfilerStatusContext.js b/src/devtools/views/Profiler/ProfilerStatusContext.js
deleted file mode 100644
index 041aa1a2de1f..000000000000
--- a/src/devtools/views/Profiler/ProfilerStatusContext.js
+++ /dev/null
@@ -1,69 +0,0 @@
-// @flow
-
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
-import { useSubscription } from '../hooks';
-import { StoreContext } from '../context';
-import Store from '../../store';
-
-type Context = {|
-  hasProfilingData: boolean,
-  isProfiling: boolean,
-  startProfiling(value: boolean): void,
-  stopProfiling(value: boolean): void,
-|};
-
-const ProfilerStatusContext = createContext<Context>(((null: any): Context));
-ProfilerStatusContext.displayName = 'ProfilerStatusContext';
-
-type StoreProfilingState = {|
-  hasProfilingData: boolean,
-  isProfiling: boolean,
-|};
-
-type Props = {|
-  children: React$Node,
-|};
-
-function ProfilerStatusContextController({ children }: Props) {
-  const store = useContext(StoreContext);
-
-  const subscription = useMemo(
-    () => ({
-      getCurrentValue: () => ({
-        hasProfilingData: store.hasProfilingData,
-        isProfiling: store.isProfiling,
-      }),
-      subscribe: (callback: Function) => {
-        store.addListener('isProfiling', callback);
-        return () => store.removeListener('isProfiling', callback);
-      },
-    }),
-    [store]
-  );
-
-  const { isProfiling, hasProfilingData } = useSubscription<
-    StoreProfilingState,
-    Store
-  >(subscription);
-
-  const startProfiling = useCallback(() => store.startProfiling(), [store]);
-  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
-
-  const value = useMemo(
-    () => ({
-      hasProfilingData,
-      isProfiling,
-      startProfiling,
-      stopProfiling,
-    }),
-    [hasProfilingData, isProfiling, startProfiling, stopProfiling]
-  );
-
-  return (
-    <ProfilerStatusContext.Provider value={value}>
-      {children}
-    </ProfilerStatusContext.Provider>
-  );
-}
-
-export { ProfilerStatusContext, ProfilerStatusContextController };
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
index 85356e6fd936..4d1bb591d92f 100644
--- a/src/devtools/views/Profiler/RecordToggle.js
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -3,7 +3,7 @@
 import React, { useContext } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { ProfilerStatusContext } from './ProfilerStatusContext';
+import { ProfilerContext } from './ProfilerContext';
 
 import styles from './RecordToggle.css';
 
@@ -11,7 +11,7 @@ export type Props = {||};
 
 export default function RecordToggle(_: Props) {
   const { isProfiling, startProfiling, stopProfiling } = useContext(
-    ProfilerStatusContext
+    ProfilerContext
   );
 
   return (
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index c39ca7310335..62d32fb01dc7 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -2,7 +2,6 @@
 
 import React, {
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -12,72 +11,91 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
 import { minBarWidth } from './constants';
-import { ProfilerDataContext } from './ProfilerDataContext';
-import { StoreContext } from '../context';
 
 export type ItemData = {|
   commitDurations: Array<number>,
-  commitIndex: number | null,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   isMouseDown: boolean,
   maxDuration: number,
-  setCommitIndex: (index: number) => void,
+  selectedCommitIndex: number | null,
+  setSelectedCommitIndex: (index: number) => void,
 |};
 
-type Props = {||};
+type Props = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  setSelectedCommitIndex: (index: number) => void,
+|};
 
-export default function SnapshotCommitList(_: Props) {
+export default function SnapshotCommitList({
+  commitDurations,
+  commitTimes,
+  filteredCommitIndices,
+  selectedCommitIndex,
+  setSelectedCommitIndex,
+}: Props) {
   return (
     <AutoSizer>
-      {({ height, width }) => <List height={height} width={width} />}
+      {({ height, width }) => (
+        <List
+          commitDurations={commitDurations}
+          commitTimes={commitTimes}
+          height={height}
+          filteredCommitIndices={filteredCommitIndices}
+          selectedCommitIndex={selectedCommitIndex}
+          setSelectedCommitIndex={setSelectedCommitIndex}
+          width={width}
+        />
+      )}
     </AutoSizer>
   );
 }
 
 type ListProps = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
   height: number,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  setSelectedCommitIndex: (index: number) => void,
   width: number,
 |};
 
-function List({ height, width }: ListProps) {
+function List({
+  commitDurations,
+  selectedCommitIndex,
+  commitTimes,
+  height,
+  filteredCommitIndices,
+  setSelectedCommitIndex,
+  width,
+}: ListProps) {
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
-  const [isMouseDown, setIsMouseDown] = useState(false);
   const prevCommitIndexRef = useRef<number | null>(null);
 
-  const { profilingCache } = useContext(StoreContext);
-  const {
-    commitIndex,
-    filteredCommitIndices,
-    rendererID,
-    rootID,
-    setCommitIndex,
-  } = useContext(ProfilerDataContext);
-
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
-
-  // Make sure any newly selected snapshot is visible within the list.
+  // Make sure a newly selected snapshot is fully visible within the list.
   useEffect(() => {
-    if (commitIndex !== prevCommitIndexRef.current) {
-      prevCommitIndexRef.current = commitIndex;
-      if (commitIndex !== null && listRef.current !== null) {
-        listRef.current.scrollToItem(commitIndex);
+    if (selectedCommitIndex !== prevCommitIndexRef.current) {
+      prevCommitIndexRef.current = selectedCommitIndex;
+      if (selectedCommitIndex !== null && listRef.current !== null) {
+        listRef.current.scrollToItem(selectedCommitIndex);
       }
     }
-  }, [listRef, commitIndex]);
+  }, [listRef, selectedCommitIndex]);
 
+  // When the mouse is down, dragging over a commit should auto-select it.
+  // This provides a nice way for users to swipe across a range of commits to compare them.
+  // TODO (profiling) This interaction may not feel as nice with suspense; reconsider it?
+  const [isMouseDown, setIsMouseDown] = useState(false);
   const handleMouseDown = useCallback(() => {
     setIsMouseDown(true);
   }, []);
   const handleMouseUp = useCallback(() => {
     setIsMouseDown(false);
   }, []);
-
   useEffect(() => {
     window.addEventListener('mouseup', handleMouseUp);
     return () => {
@@ -86,8 +104,8 @@ function List({ height, width }: ListProps) {
   }, [handleMouseUp]);
 
   const itemSize = useMemo(
-    () => Math.max(minBarWidth, width / commitDurations.length),
-    [commitDurations, width]
+    () => Math.max(minBarWidth, width / filteredCommitIndices.length),
+    [filteredCommitIndices, width]
   );
   const maxDuration = useMemo(
     () =>
@@ -102,21 +120,21 @@ function List({ height, width }: ListProps) {
   const itemData = useMemo<ItemData>(
     () => ({
       commitDurations,
-      commitIndex,
       commitTimes,
       filteredCommitIndices,
       isMouseDown,
       maxDuration,
-      setCommitIndex,
+      selectedCommitIndex,
+      setSelectedCommitIndex,
     }),
     [
       commitDurations,
-      commitIndex,
       commitTimes,
       filteredCommitIndices,
       isMouseDown,
       maxDuration,
-      setCommitIndex,
+      selectedCommitIndex,
+      setSelectedCommitIndex,
     ]
   );
 
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 4debf7240188..e11bb883125a 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -17,12 +17,12 @@ type Props = {
 function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
   const {
     commitDurations,
-    commitIndex,
     commitTimes,
     filteredCommitIndices,
     isMouseDown,
     maxDuration,
-    setCommitIndex,
+    selectedCommitIndex,
+    setSelectedCommitIndex,
   } = itemData;
 
   index = filteredCommitIndices[index];
@@ -30,15 +30,15 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  const handleClick = useCallback(() => setCommitIndex(index), [
+  const handleClick = useCallback(() => setSelectedCommitIndex(index), [
     index,
-    setCommitIndex,
+    setSelectedCommitIndex,
   ]);
 
   // Guard against commits with duration 0
   const percentage =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
-  const isSelected = commitIndex === index;
+  const isSelected = selectedCommitIndex === index;
 
   // Leave a 1px gap between snapshots
   const width = parseFloat(style.width) - 1;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 48f11a2660a5..4249c7221741 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -1,21 +1,13 @@
-.SnapshotSelector {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--color-text-color);
-  margin-left: 0.5rem;
-}
-
 .Button {
+  flex: 0 0 auto;
   margin-left: 0.25rem;
 }
 
 .Commits {
-  flex: 1 1 auto;
   height: 2.25rem;
-  min-width: 50px;
+  min-width: 30px;
   margin-left: 0.25rem;
+  overflow: hidden;
 }
 
 .VRule {
@@ -25,7 +17,8 @@
   margin: 0 0.25rem;
 }
 
-.Number {
+.IndexLabel {
+  flex: 0 0 auto;
   white-space: nowrap;
   font-family: var(--font-family-monospace);
 }
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 66577fe5babe..f8dcac050c60 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -1,10 +1,12 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext } from 'react';
+import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { ProfilerDataContext } from './ProfilerDataContext';
+import { ProfilerContext } from './ProfilerContext';
 import SnapshotCommitList from './SnapshotCommitList';
+import { maxBarWidth } from './constants';
+import { StoreContext } from '../context';
 
 import styles from './SnapshotSelector.css';
 
@@ -12,17 +14,37 @@ export type Props = {||};
 
 export default function SnapshotSelector(_: Props) {
   const {
-    commitIndex,
-    filteredCommitIndices,
+    isCommitFilterEnabled,
+    minCommitDuration,
     rendererID,
     rootID,
-    setCommitIndex,
-  } = useContext(ProfilerDataContext);
+    selectedCommitIndex,
+    setSelectedCommitIndex,
+  } = useContext(ProfilerContext);
+
+  const { profilingCache } = useContext(StoreContext);
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
+
+  const filteredCommitIndices = useMemo(
+    () =>
+      commitDurations.reduce((reduced, commitDuration, index) => {
+        if (!isCommitFilterEnabled || commitDuration >= minCommitDuration) {
+          reduced.push(index);
+        }
+        return reduced;
+      }, []),
+    [commitDurations, isCommitFilterEnabled, minCommitDuration]
+  );
 
   const numCommits = filteredCommitIndices.length;
   let currentCommitNumber = '-';
   if (numCommits > 0) {
-    currentCommitNumber = `${commitIndex + 1}`.padStart(
+    currentCommitNumber = `${selectedCommitIndex + 1}`.padStart(
       `${numCommits}`.length,
       '0'
     );
@@ -30,15 +52,18 @@ export default function SnapshotSelector(_: Props) {
 
   const viewNextCommit = useCallback(() => {
     const nextCommitIndex = Math.min(
-      ((commitIndex: any): number) + 1,
+      ((selectedCommitIndex: any): number) + 1,
       filteredCommitIndices.length - 1
     );
-    setCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [commitIndex, filteredCommitIndices, setCommitIndex]);
+    setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
   const viewPrevCommit = useCallback(() => {
-    const nextCommitIndex = Math.max(((commitIndex: any): number) - 1, 0);
-    setCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [commitIndex, filteredCommitIndices, setCommitIndex]);
+    const nextCommitIndex = Math.max(
+      ((selectedCommitIndex: any): number) - 1,
+      0
+    );
+    setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
 
   if (rendererID === null || rootID === null) {
     return null;
@@ -47,31 +72,43 @@ export default function SnapshotSelector(_: Props) {
   return (
     <Fragment>
       <div className={styles.VRule} />
-      <div className={styles.SnapshotSelector}>
-        <span className={styles.Number}>
-          {numCommits > 0 ? `${currentCommitNumber} / ${numCommits}` : '-'}
-        </span>
-        <Button
-          className={styles.Button}
-          disabled={commitIndex === null || commitIndex <= 0}
-          onClick={viewPrevCommit}
-        >
-          <ButtonIcon type="previous" />
-        </Button>
-        <div className={styles.Commits}>
-          {numCommits > 0 && <SnapshotCommitList />}
-          {numCommits === 0 && (
-            <div className={styles.NoCommits}>No commits</div>
-          )}
-        </div>
-        <Button
-          className={styles.Button}
-          disabled={commitIndex === null || commitIndex >= numCommits - 1}
-          onClick={viewNextCommit}
-        >
-          <ButtonIcon type="next" />
-        </Button>
+      <span className={styles.IndexLabel}>
+        {numCommits > 0 ? `${currentCommitNumber} / ${numCommits}` : '-'}
+      </span>
+      <Button
+        className={styles.Button}
+        disabled={selectedCommitIndex === 0 || numCommits === 0}
+        onClick={viewPrevCommit}
+      >
+        <ButtonIcon type="previous" />
+      </Button>
+      <div
+        className={styles.Commits}
+        style={{
+          flex: numCommits > 0 ? '1 1 auto' : '0 0 auto',
+          maxWidth: numCommits > 0 ? numCommits * maxBarWidth : undefined,
+        }}
+      >
+        {numCommits > 0 && (
+          <SnapshotCommitList
+            commitDurations={commitDurations}
+            commitTimes={commitTimes}
+            filteredCommitIndices={filteredCommitIndices}
+            selectedCommitIndex={selectedCommitIndex}
+            setSelectedCommitIndex={setSelectedCommitIndex}
+          />
+        )}
+        {numCommits === 0 && <div className={styles.NoCommits}>No commits</div>}
       </div>
+      <Button
+        className={styles.Button}
+        disabled={
+          selectedCommitIndex === null || selectedCommitIndex >= numCommits - 1
+        }
+        onClick={viewNextCommit}
+      >
+        <ButtonIcon type="next" />
+      </Button>
     </Fragment>
   );
 }
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index f48ee282eb9e..ef3a21c27066 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,5 +1,6 @@
 // @flow
 
+export const maxBarWidth = 30;
 export const minBarHeight = 5;
 export const minBarWidth = 5;
 export const textHeight = 18;
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 6d28ead16e79..6eb8bb944c1a 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -2,15 +2,9 @@
 
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
-type LocalStorageKey =
-  | 'displayDensity'
-  | 'isCommitFilterEnabled'
-  | 'minCommitDuration'
-  | 'theme';
-
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
-  key: LocalStorageKey,
+  key: string,
   initialValue: T
 ): [T, (value: T | (() => T)) => void] {
   const getValueFromLocalStorage = useCallback(() => {

From 8a7be78ed734322576923283bcfc71666be2458a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Mar 2019 11:51:35 -0700
Subject: [PATCH 141/814] Finished iterating on commit selector UI for now

---
 src/devtools/views/Profiler/FilterModal.js    |  2 +-
 src/devtools/views/Profiler/Profiler.js       |  2 +-
 .../views/Profiler/SnapshotCommitList.js      | 42 +++++++++--------
 .../views/Profiler/SnapshotSelector.css       |  2 +-
 .../views/Profiler/SnapshotSelector.js        | 45 ++++++++++++++++---
 5 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
index 363919c08f30..fc58bd5616d8 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -20,7 +20,7 @@ export default function FilterModal({ dismissModal }: Props) {
 
   const handleNumberChange = useCallback(
     ({ currentTarget }) => {
-      const newValue = parseInt(currentTarget.value, 10);
+      const newValue = parseFloat(currentTarget.value);
       setMinCommitDuration(
         Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
       );
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 0a647919e9f8..e86f1b8cf95b 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -70,8 +70,8 @@ function SuspendingProfiler(_: {||}) {
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
-  // TODO (profiling) Differentiate between no data and no data for the current root
   // TODO (profiling) Show selected "tab" view
+  // TODO (profiling) Handle cases: no selected commit, no data for root
   const view = <div>Coming soon...</div>;
 
   return (
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 62d32fb01dc7..77ccf372a908 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -19,6 +19,7 @@ export type ItemData = {|
   isMouseDown: boolean,
   maxDuration: number,
   selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
   setSelectedCommitIndex: (index: number) => void,
 |};
 
@@ -27,6 +28,7 @@ type Props = {|
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
   setSelectedCommitIndex: (index: number) => void,
 |};
 
@@ -35,6 +37,7 @@ export default function SnapshotCommitList({
   commitTimes,
   filteredCommitIndices,
   selectedCommitIndex,
+  selectedFilteredCommitIndex,
   setSelectedCommitIndex,
 }: Props) {
   return (
@@ -46,6 +49,7 @@ export default function SnapshotCommitList({
           height={height}
           filteredCommitIndices={filteredCommitIndices}
           selectedCommitIndex={selectedCommitIndex}
+          selectedFilteredCommitIndex={selectedFilteredCommitIndex}
           setSelectedCommitIndex={setSelectedCommitIndex}
           width={width}
         />
@@ -60,6 +64,7 @@ type ListProps = {|
   height: number,
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
   setSelectedCommitIndex: (index: number) => void,
   width: number,
 |};
@@ -70,6 +75,7 @@ function List({
   commitTimes,
   height,
   filteredCommitIndices,
+  selectedFilteredCommitIndex,
   setSelectedCommitIndex,
   width,
 }: ListProps) {
@@ -78,13 +84,13 @@ function List({
 
   // Make sure a newly selected snapshot is fully visible within the list.
   useEffect(() => {
-    if (selectedCommitIndex !== prevCommitIndexRef.current) {
-      prevCommitIndexRef.current = selectedCommitIndex;
-      if (selectedCommitIndex !== null && listRef.current !== null) {
-        listRef.current.scrollToItem(selectedCommitIndex);
+    if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
+      prevCommitIndexRef.current = selectedFilteredCommitIndex;
+      if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
+        listRef.current.scrollToItem(selectedFilteredCommitIndex);
       }
     }
-  }, [listRef, selectedCommitIndex]);
+  }, [listRef, selectedFilteredCommitIndex]);
 
   // When the mouse is down, dragging over a commit should auto-select it.
   // This provides a nice way for users to swipe across a range of commits to compare them.
@@ -125,6 +131,7 @@ function List({
       isMouseDown,
       maxDuration,
       selectedCommitIndex,
+      selectedFilteredCommitIndex,
       setSelectedCommitIndex,
     }),
     [
@@ -134,6 +141,7 @@ function List({
       isMouseDown,
       maxDuration,
       selectedCommitIndex,
+      selectedFilteredCommitIndex,
       setSelectedCommitIndex,
     ]
   );
@@ -144,19 +152,17 @@ function List({
       onMouseUp={handleMouseUp}
       style={{ height, width }}
     >
-      {commitDurations.length > 0 && (
-        <FixedSizeList
-          direction="horizontal"
-          height={height}
-          itemCount={filteredCommitIndices.length}
-          itemData={itemData}
-          itemSize={itemSize}
-          ref={(listRef: any) /* Flow bug? */}
-          width={width}
-        >
-          {SnapshotCommitListItem}
-        </FixedSizeList>
-      )}
+      <FixedSizeList
+        direction="horizontal"
+        height={height}
+        itemCount={filteredCommitIndices.length}
+        itemData={itemData}
+        itemSize={itemSize}
+        ref={(listRef: any) /* Flow bug? */}
+        width={width}
+      >
+        {SnapshotCommitListItem}
+      </FixedSizeList>
     </div>
   );
 }
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 4249c7221741..0589bfa63a85 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -4,7 +4,7 @@
 }
 
 .Commits {
-  height: 2.25rem;
+  height: 100%;
   min-width: 30px;
   margin-left: 0.25rem;
   overflow: hidden;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index f8dcac050c60..bf63c4c4a701 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -42,9 +42,30 @@ export default function SnapshotSelector(_: Props) {
   );
 
   const numCommits = filteredCommitIndices.length;
+
+  // Map the (unfiltered) selected commit index to an index within the filtered data.
+  const selectedFilteredCommitIndex = useMemo(() => {
+    if (selectedCommitIndex !== null) {
+      for (let i = 0; i < filteredCommitIndices.length; i++) {
+        if (filteredCommitIndices[i] === selectedCommitIndex) {
+          return i;
+        }
+      }
+    }
+    return null;
+  }, [filteredCommitIndices, selectedCommitIndex]);
+
+  if (selectedFilteredCommitIndex === null) {
+    if (numCommits > 0) {
+      setSelectedCommitIndex(0);
+    }
+  } else if (selectedFilteredCommitIndex >= numCommits) {
+    setSelectedCommitIndex(numCommits === 0 ? null : numCommits - 1);
+  }
+
   let currentCommitNumber = '-';
   if (numCommits > 0) {
-    currentCommitNumber = `${selectedCommitIndex + 1}`.padStart(
+    currentCommitNumber = `${selectedFilteredCommitIndex + 1}`.padStart(
       `${numCommits}`.length,
       '0'
     );
@@ -52,18 +73,26 @@ export default function SnapshotSelector(_: Props) {
 
   const viewNextCommit = useCallback(() => {
     const nextCommitIndex = Math.min(
-      ((selectedCommitIndex: any): number) + 1,
+      ((selectedFilteredCommitIndex: any): number) + 1,
       filteredCommitIndices.length - 1
     );
     setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
+  }, [
+    selectedFilteredCommitIndex,
+    filteredCommitIndices,
+    setSelectedCommitIndex,
+  ]);
   const viewPrevCommit = useCallback(() => {
     const nextCommitIndex = Math.max(
-      ((selectedCommitIndex: any): number) - 1,
+      ((selectedFilteredCommitIndex: any): number) - 1,
       0
     );
     setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
+  }, [
+    selectedFilteredCommitIndex,
+    filteredCommitIndices,
+    setSelectedCommitIndex,
+  ]);
 
   if (rendererID === null || rootID === null) {
     return null;
@@ -77,7 +106,7 @@ export default function SnapshotSelector(_: Props) {
       </span>
       <Button
         className={styles.Button}
-        disabled={selectedCommitIndex === 0 || numCommits === 0}
+        disabled={selectedFilteredCommitIndex === 0 || numCommits === 0}
         onClick={viewPrevCommit}
       >
         <ButtonIcon type="previous" />
@@ -95,6 +124,7 @@ export default function SnapshotSelector(_: Props) {
             commitTimes={commitTimes}
             filteredCommitIndices={filteredCommitIndices}
             selectedCommitIndex={selectedCommitIndex}
+            selectedFilteredCommitIndex={selectedFilteredCommitIndex}
             setSelectedCommitIndex={setSelectedCommitIndex}
           />
         )}
@@ -103,7 +133,8 @@ export default function SnapshotSelector(_: Props) {
       <Button
         className={styles.Button}
         disabled={
-          selectedCommitIndex === null || selectedCommitIndex >= numCommits - 1
+          selectedFilteredCommitIndex === null ||
+          selectedFilteredCommitIndex >= numCommits - 1
         }
         onClick={viewNextCommit}
       >

From 821a6504b8b6341c0b1cac8ca436483e42ad30dd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Mar 2019 20:05:52 -0700
Subject: [PATCH 142/814] Added commit tree reconstruction

---
 OVERVIEW.md                                   |  29 ++-
 src/backend/agent.js                          |  21 ++
 src/backend/renderer.js                       |  68 ++++-
 src/backend/types.js                          |  22 +-
 src/constants.js                              |   1 +
 src/devtools/ProfilingCache.js                | 118 ++++++++-
 src/devtools/store.js                         |  17 +-
 .../views/Profiler/CommitFlamegraph.css       |   0
 .../views/Profiler/CommitFlamegraph.js        |  35 +++
 src/devtools/views/Profiler/CommitRanked.css  |   0
 src/devtools/views/Profiler/CommitRanked.js   |  35 +++
 .../views/Profiler/CommitTreeBuilder.js       | 235 ++++++++++++++++++
 src/devtools/views/Profiler/Profiler.css      |  10 +
 src/devtools/views/Profiler/Profiler.js       |  85 +++++--
 .../views/Profiler/ProfilerContext.js         |   8 +
 .../views/Profiler/SnapshotSelector.js        |  46 ++--
 src/devtools/views/Profiler/types.js          |  38 +--
 17 files changed, 678 insertions(+), 90 deletions(-)
 create mode 100644 src/devtools/views/Profiler/CommitFlamegraph.css
 create mode 100644 src/devtools/views/Profiler/CommitFlamegraph.js
 create mode 100644 src/devtools/views/Profiler/CommitRanked.css
 create mode 100644 src/devtools/views/Profiler/CommitRanked.js
 create mode 100644 src/devtools/views/Profiler/CommitTreeBuilder.js

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 78ae10aff2ed..e615faf4b3c2 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -16,7 +16,7 @@ Every React commit that changes the tree in a way DevTools cares about results i
 
 The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.
 
-We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
+No updates are required for many commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
 
 #### Adding a root node
 
@@ -25,7 +25,7 @@ Adding a root to the tree requires sending 4 numbers:
 1. add operation constant (`1`)
 1. fiber id
 1. element type constant (`8 === ElementTypeRoot`)
-1. profiling flag
+1. profiling supported flag
 
 For example, adding a root fiber with an id of 1:
 ```js
@@ -100,6 +100,23 @@ For example:
 ]
 ```
 
+#### Updating tree base duration
+
+While profiling is in progress, we send an extra operation any time a fiber is added or a updated in a way that affects its tree base duration. This information is needed by the Profiler UI in order to render the "snapshot" and "ranked" chart views.
+
+1. tree base duration constant (`4`)
+1. fiber id
+1. tree base duration
+
+For example, updating the base duration for a fiber with an id of 1:
+```js
+[
+  4,  // tree base duration operation
+  1,  // fiber id
+  32, // new tree base duration value
+]
+```
+
 ## Reconstructing the tree
 
 The frontend stores its information about the tree in a map of id to objects with the following keys:
@@ -251,12 +268,10 @@ Here is an example commit in which two elements were rendered and one interactio
   commitIndex: 0,
   interactions: [
     {
-      id: 1,
       timestamp: 4,
       name: "Foo"
     },
     {
-      id: 2,
       timestamp: 4,
       name: "Bar"
     }
@@ -265,13 +280,11 @@ Here is an example commit in which two elements were rendered and one interactio
     {
       id: 1,
       baseDuration: 15,
-      selfDuration: 4,
       actualDuration: 15
     },
     {
       id: 2,
       baseDuration: 11,
-      selfDuration: 8,
       actualDuration: 11
     }
   }
@@ -319,16 +332,16 @@ Here is an example of a profiling session consisting of two interactions:
   rootID: 1,
   interactions: [
     {
-      id: 1,
       name: "Foo",
+      timestamp: 4,
       commits: [
         0, // index of first commit
         2  // index of second commit
       ]
     },
     {
-      id: 2,
       name: "Bar",
+      timestamp: 4,
       commits: [
         0  // index of first commit
       ]
diff --git a/src/backend/agent.js b/src/backend/agent.js
index b7df24d42f22..7a7c7a62bb85 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -46,6 +46,7 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
@@ -76,6 +77,26 @@ export default class Agent extends EventEmitter {
     return null;
   }
 
+  getCommitDetails = ({
+    commitIndex,
+    rendererID,
+    rootID,
+  }: {
+    commitIndex: number,
+    rendererID: number,
+    rootID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      this._bridge.send(
+        'commitDetails',
+        renderer.getCommitDetails(rootID, commitIndex)
+      );
+    }
+  };
+
   getProfilingStatus = () => {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1d45f6c3e99d..a6510e1310d5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -19,11 +19,13 @@ import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { getUID } from '../utils';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
+  CommitDetails,
   DevToolsHook,
   Fiber,
   FiberData,
@@ -474,6 +476,10 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
+  function getInteractionID({ name, timestamp }: Interaction): string {
+    return `${timestamp}-${name}`;
+  }
+
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -623,6 +629,14 @@ export function attach(
       }
       addOperation(operation);
     }
+
+    if (isProfiling) {
+      const operation = new Uint32Array(3);
+      operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+      operation[1] = id;
+      operation[2] = fiber.treeBaseDuration;
+      addOperation(operation);
+    }
   }
 
   function enqueueUnmount(fiber) {
@@ -682,21 +696,26 @@ export function attach(
     if (isProfiling) {
       if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
         const id = getFiberID(getPrimaryFiber(fiber));
+        const { actualDuration, treeBaseDuration } = fiber;
+
+        const operation = new Uint32Array(3);
+        operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+        operation[1] = id;
+        operation[2] = treeBaseDuration;
+        addOperation(operation);
 
-        idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+        idToTreeBaseDurationMap.set(id, treeBaseDuration);
 
-        if (fiber.actualDuration > 0) {
+        if (actualDuration > 0) {
           // If profiling is active, store durations for elements that were rendered during the commit.
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
           metadata.committedFibers.push({
             id,
-            actualDuration: fiber.actualDuration,
-            selfDuration: fiber.selfDuration,
-            treeBaseDuration: fiber.treeBaseDuration,
+            actualDuration,
           });
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
-            fiber.actualDuration
+            actualDuration
           );
         }
       }
@@ -864,9 +883,10 @@ export function attach(
         committedFibers: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
-          ({ name, timestamp }: Interaction) => ({
-            name,
-            timestamp: timestamp - profilingStartTime,
+          (interaction: Interaction) => ({
+            id: getInteractionID(interaction),
+            name: interaction.name,
+            timestamp: interaction.timestamp - profilingStartTime,
           })
         ),
         maxActualDuration: 0,
@@ -1360,8 +1380,6 @@ export function attach(
   type CommittedFiber = {|
     actualDuration: number,
     id: number,
-    selfDuration: number,
-    treeBaseDuration: number,
   |};
 
   type CommitProfilingData = {|
@@ -1379,6 +1397,33 @@ export function attach(
   let profilingStartTime: number = 0;
   let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
 
+  function getCommitDetails(
+    rootID: number,
+    commitIndex: number
+  ): CommitDetails {
+    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+      rootID
+    );
+    if (commitProfilingMetadata != null) {
+      const commitProfilingData = commitProfilingMetadata[commitIndex];
+      if (commitProfilingData != null) {
+        return {
+          commitIndex,
+          interactions: commitProfilingData.interactions,
+          committedFibers: commitProfilingData.committedFibers,
+          rootID,
+        };
+      }
+    }
+    // TODO (profiling) Is this right? Should I return null? Does it matter?
+    return {
+      commitIndex,
+      interactions: [],
+      committedFibers: [],
+      rootID,
+    };
+  }
+
   function getProfilingSummary(rootID: number): ProfilingSummary {
     const interactions = new Set();
     const commitDurations = [];
@@ -1428,6 +1473,7 @@ export function attach(
 
   return {
     cleanup,
+    getCommitDetails,
     getFiberIDFromNative,
     getNativeFromReactElement,
     getProfilingSummary,
diff --git a/src/backend/types.js b/src/backend/types.js
index 47b0280860ce..64c6169a694d 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -19,11 +19,6 @@ export type FiberData = {|
   type: ElementType,
 |};
 
-export type Interaction = {|
-  name: string,
-  timestamp: number,
-|};
-
 export type NativeType = {};
 export type RendererID = number;
 
@@ -54,6 +49,22 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
+export type Interaction = {|
+  id: string,
+  name: string,
+  timestamp: number,
+|};
+
+export type CommitDetails = {|
+  commitIndex: number,
+  interactions: Array<Interaction>,
+  committedFibers: Array<{|
+    actualDuration: number,
+    id: number,
+  |}>,
+  rootID: number,
+|};
+
 export type ProfilingSummary = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
@@ -64,6 +75,7 @@ export type ProfilingSummary = {|
 
 export type RendererInterface = {
   cleanup: () => void,
+  getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getFiberIDFromNative: (
     component: NativeType,
diff --git a/src/constants.js b/src/constants.js
index dcbe8aa5856f..1800fa800115 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,5 +3,6 @@
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
+export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
 export const __DEBUG__ = false;
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index b718f81f51b6..a5a3b255e860 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -2,30 +2,110 @@
 
 import { createResource, invalidateResources } from './cache';
 import Store from './store';
+import { getCommitTree } from 'src/devtools/views/Profiler/CommitTreeBuilder';
 
 import type { Resource } from './cache';
 import type { Bridge } from '../types';
-import type { ProfilingSummary as ProfilingSummaryBackend } from 'src/backend/types';
-import type { ProfilingSummary as ProfilingSummaryFrontend } from 'src/devtools/views/Profiler/types';
+import type {
+  CommitDetails as CommitDetailsBackend,
+  ProfilingSummary as ProfilingSummaryBackend,
+} from 'src/backend/types';
+import type {
+  CommitDetails as CommitDetailsFrontend,
+  CommitTree,
+  ProfilingSummary as ProfilingSummaryFrontend,
+} from 'src/devtools/views/Profiler/types';
 
-type RendererAndRootID = {|
+type CommitDetailsParams = {|
+  commitIndex: number,
+  rootID: number,
+  rendererID: number,
+|};
+
+type CommitTreeParams = {|
+  commitIndex: number,
+  profilingSummary: ProfilingSummaryFrontend,
+  rendererID: number,
+  rootID: number,
+|};
+
+type ProfilingSummaryParams = {|
   rootID: number,
   rendererID: number,
 |};
 
 export default class ProfilingCache {
+  _pendingCommitDetailsMap: Map<
+    string,
+    (commitDetails: CommitDetailsFrontend) => void
+  > = new Map();
+
   _pendingProfileSummaryMap: Map<
     number,
     (profilingSummary: ProfilingSummaryFrontend) => void
   > = new Map();
 
-  ProfilingSummary: Resource<RendererAndRootID, ProfilingSummaryFrontend>;
+  CommitDetails: Resource<CommitDetailsParams, CommitDetailsFrontend>;
+  CommitTree: Resource<CommitTreeParams, CommitTree>;
+  ProfilingSummary: Resource<ProfilingSummaryParams, ProfilingSummaryFrontend>;
 
   constructor(bridge: Bridge, store: Store) {
+    this.CommitDetails = createResource(
+      ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
+        return new Promise(resolve => {
+          if (!store.profilingOperations.has(rootID)) {
+            // If no profiling data was recorded for this root, skip the round trip.
+            resolve({
+              committedFibers: [],
+              interactions: [],
+            });
+          } else {
+            this._pendingCommitDetailsMap.set(
+              `${rootID}-${commitIndex}`,
+              resolve
+            );
+            bridge.send('getCommitDetails', {
+              commitIndex,
+              rendererID,
+              rootID,
+            });
+          }
+        });
+      },
+      ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>
+        `${rootID}-${commitIndex}`
+    );
+
+    this.CommitTree = createResource(
+      ({
+        commitIndex,
+        profilingSummary,
+        rendererID,
+        rootID,
+      }: CommitTreeParams) =>
+        new Promise(resolve =>
+          resolve(
+            getCommitTree({
+              commitIndex,
+              profilingSummary,
+              rendererID,
+              rootID,
+              store,
+            })
+          )
+        ),
+      ({
+        commitIndex,
+        profilingSummary,
+        rendererID,
+        rootID,
+      }: CommitTreeParams) => `${rootID}-${commitIndex}`
+    );
+
     this.ProfilingSummary = createResource(
-      ({ rendererID, rootID }: RendererAndRootID) => {
+      ({ rendererID, rootID }: ProfilingSummaryParams) => {
         return new Promise(resolve => {
-          if (!store._profilingOperations.has(rootID)) {
+          if (!store.profilingOperations.has(rootID)) {
             // If no profiling data was recorded for this root, skip the round trip.
             resolve({
               commitDurations: [],
@@ -39,17 +119,38 @@ export default class ProfilingCache {
           }
         });
       },
-      ({ rendererID, rootID }: RendererAndRootID) => rootID
+      ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
     );
 
+    bridge.addListener('commitDetails', this.onCommitDetails);
     bridge.addListener('profilingSummary', this.onProfileSummary);
   }
 
   invalidate() {
     invalidateResources();
-    this._pendingProfileSummaryMap = new Map();
+
+    this._pendingCommitDetailsMap.clear();
+    this._pendingProfileSummaryMap.clear();
   }
 
+  onCommitDetails = ({
+    commitIndex,
+    committedFibers,
+    interactions,
+    rootID,
+  }: CommitDetailsBackend) => {
+    const key = `${rootID}-${commitIndex}`;
+    const resolve = this._pendingCommitDetailsMap.get(key);
+    if (resolve != null) {
+      this._pendingCommitDetailsMap.delete(key);
+
+      resolve({
+        committedFibers,
+        interactions,
+      });
+    }
+  };
+
   onProfileSummary = ({
     commitDurations,
     commitTimes,
@@ -59,6 +160,7 @@ export default class ProfilingCache {
   }: ProfilingSummaryBackend) => {
     const resolve = this._pendingProfileSummaryMap.get(rootID);
     if (resolve != null) {
+      this._pendingProfileSummaryMap.delete(rootID);
       const initialTreeBaseDurationsMap = new Map();
       for (let i = 0; i < initialTreeBaseDurations.length; i++) {
         initialTreeBaseDurationsMap.set(
diff --git a/src/devtools/store.js b/src/devtools/store.js
index ba731a0fd16b..76fa683fa45e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -5,6 +5,7 @@ import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
@@ -12,7 +13,7 @@ import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 
 import type { ElementType } from './types';
-import type { Element } from './views/elements/types';
+import type { Element } from './views/Elements/types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -119,6 +120,14 @@ export default class Store extends EventEmitter {
     return this._profilingCache;
   }
 
+  get profilingOperations(): Map<number, Array<Uint32Array>> {
+    return this._profilingOperations;
+  }
+
+  get profilingSnapshot(): Map<number, ProfilingSnapshotNode> {
+    return this._profilingSnapshot;
+  }
+
   get revision(): number {
     return this._revision;
   }
@@ -507,6 +516,12 @@ export default class Store extends EventEmitter {
 
           weightDelta = childWeight + 1 - prevWeight;
           break;
+        case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
+          // Base duration updates are only sent while profiling is in progress.
+          // We can ignore them at this point.
+          // The profiler UI uses them lazily in order to generate the tree.
+          i = i + 3;
+          break;
         default:
           throw Error(`Unsupported Bridge operation ${operation}`);
       }
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.css b/src/devtools/views/Profiler/CommitFlamegraph.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
new file mode 100644
index 000000000000..fe820621d648
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { StoreContext } from '../context';
+
+import styles from './CommitFlamegraph.css';
+
+export default function CommitFlamegraph(_: {||}) {
+  const { rendererID, rootID, selectedCommitIndex } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const commitDetails = profilingCache.CommitDetails.read({
+    commitIndex: ((selectedCommitIndex: any): number),
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const commitTree = profilingCache.CommitTree.read({
+    commitIndex: ((selectedCommitIndex: any): number),
+    profilingSummary,
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  return 'Coming soon: Flamegraph';
+}
diff --git a/src/devtools/views/Profiler/CommitRanked.css b/src/devtools/views/Profiler/CommitRanked.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
new file mode 100644
index 000000000000..8e50869a37b9
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { StoreContext } from '../context';
+
+import styles from './CommitRanked.css';
+
+export default function CommitRanked(_: {||}) {
+  const { rendererID, rootID, selectedCommitIndex } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const commitDetails = profilingCache.CommitDetails.read({
+    commitIndex: ((selectedCommitIndex: any): number),
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const commitTree = profilingCache.CommitTree.read({
+    commitIndex: ((selectedCommitIndex: any): number),
+    profilingSummary,
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  return 'Coming soon: Ranked';
+}
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
new file mode 100644
index 000000000000..449833c1b0b7
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -0,0 +1,235 @@
+// @flow
+
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from 'src/constants';
+import { utfDecodeString } from 'src/utils';
+import { ElementTypeRoot } from 'src/devtools/types';
+import Store from 'src/devtools/store';
+
+import type { ElementType } from 'src/devtools/types';
+import type {
+  CommitTree,
+  Node,
+  ProfilingSummary as ProfilingSummaryFrontend,
+} from 'src/devtools/views/Profiler/types';
+
+const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
+
+export function getCommitTree({
+  commitIndex,
+  profilingSummary,
+  rendererID,
+  rootID,
+  store,
+}: {|
+  commitIndex: number,
+  profilingSummary: ProfilingSummaryFrontend,
+  rendererID: number,
+  rootID: number,
+  store: Store,
+|}): CommitTree {
+  if (store.profilingSnapshot.has(rootID)) {
+    if (!rootToCommitTreeMap.has(rootID)) {
+      rootToCommitTreeMap.set(rootID, []);
+    }
+
+    const commitTrees = ((rootToCommitTreeMap.get(
+      rootID
+    ): any): Array<CommitTree>);
+
+    if (commitIndex < commitTrees.length) {
+      return commitTrees[commitIndex];
+    }
+
+    // Commits are generated sequentially and cached.
+    // If this is the very first commit, start with the cached snapshot and apply the first mutation.
+    // Otherwise load (or generate) the previous commit and append a mutation to it.
+    if (commitIndex === 0) {
+      const initialCommitTree = {
+        nodes: new Map(),
+        rootID,
+      };
+
+      // Construct the initial tree.
+      const queue: Array<number> = [rootID];
+      while (queue.length > 0) {
+        const currentID = queue.pop();
+        const currentNode = ((store.profilingSnapshot.get(
+          currentID
+        ): any): Node);
+
+        initialCommitTree.nodes.set(currentID, {
+          id: currentID,
+          children: currentNode.children,
+          displayName: currentNode.displayName,
+          key: currentNode.key,
+          parentID: 0,
+          treeBaseDuration: ((profilingSummary.initialTreeBaseDurations.get(
+            currentID
+          ): any): number),
+        });
+
+        queue.push(...currentNode.children);
+      }
+
+      // Mutate the tree
+      const commitOperations = store.profilingOperations.get(rootID);
+      if (commitOperations != null && commitIndex < commitOperations.length) {
+        const commitTree = updateTree(
+          initialCommitTree,
+          commitOperations[commitIndex]
+        );
+        commitTrees.push(commitTree);
+        return commitTree;
+      }
+    } else {
+      const previousCommitTree = getCommitTree({
+        commitIndex: commitIndex - 1,
+        profilingSummary,
+        rendererID,
+        rootID,
+        store,
+      });
+      const commitOperations = store.profilingOperations.get(rootID);
+      if (commitOperations != null && commitIndex < commitOperations.length) {
+        const commitTree = updateTree(
+          previousCommitTree,
+          commitOperations[commitIndex]
+        );
+        commitTrees.push(commitTree);
+        return commitTree;
+      }
+    }
+  }
+
+  // TODO (profiling) Should I throw here? Is this ever expected?
+  return {
+    nodes: new Map(),
+    rootID,
+  };
+}
+
+function updateTree(
+  commitTree: CommitTree,
+  operations: Uint32Array
+): CommitTree {
+  const nodes = new Map(commitTree.nodes);
+
+  let i = 2;
+  while (i < operations.length) {
+    let id: number = ((null: any): number);
+    let node: Node = ((null: any): Node);
+    let parentID: number = ((null: any): number);
+    let parentNode: Node = ((null: any): Node);
+    let type: ElementType = ((null: any): ElementType);
+
+    const operation = operations[i];
+
+    switch (operation) {
+      case TREE_OPERATION_ADD:
+        id = ((operations[i + 1]: any): number);
+        type = ((operations[i + 2]: any): ElementType);
+
+        i = i + 3;
+
+        if (type === ElementTypeRoot) {
+          // No-op
+        } else {
+          parentID = ((operations[i]: any): number);
+          i++;
+
+          i++; // ownerID
+
+          const displayNameLength = operations[i];
+          i++;
+          const displayName =
+            displayNameLength === 0
+              ? null
+              : utfDecodeString(
+                  (operations.slice(i, i + displayNameLength): any)
+                );
+          i += displayNameLength;
+
+          const keyLength = operations[i];
+          i++;
+          const key =
+            keyLength === 0
+              ? null
+              : utfDecodeString((operations.slice(i, i + keyLength): any));
+          i += +keyLength;
+
+          if (nodes.has(id)) {
+            // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
+            // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
+            // Maybe in the future we'll revisit this.
+          } else {
+            parentNode = ((nodes.get(parentID): any): Node);
+            parentNode.children = parentNode.children.concat(id);
+
+            const node: Node = {
+              children: [],
+              displayName,
+              id,
+              key,
+              parentID,
+              treeBaseDuration: 0, // This will be updated by a subsequent operation
+            };
+
+            nodes.set(id, node);
+          }
+        }
+        break;
+      case TREE_OPERATION_REMOVE:
+        id = ((operations[i + 1]: any): number);
+
+        i = i + 2;
+
+        node = ((nodes.get(id): any): Node);
+        parentID = node.parentID;
+
+        nodes.delete(id);
+
+        parentNode = ((nodes.get(parentID): any): Node);
+        if (parentNode == null) {
+          // No-op
+        } else {
+          parentNode.children = parentNode.children.filter(
+            childID => childID !== id
+          );
+        }
+        break;
+      case TREE_OPERATION_RESET_CHILDREN:
+        id = ((operations[i + 1]: any): number);
+        const numChildren = ((operations[i + 2]: any): number);
+        const children = ((operations.slice(
+          i + 3,
+          i + 3 + numChildren
+        ): any): Array<number>);
+
+        i = i + 3 + numChildren;
+
+        node = ((nodes.get(id): any): Node);
+        node.children = Array.from(children);
+        break;
+      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
+        id = operations[i + 1];
+
+        node = ((nodes.get(id): any): Node);
+        node.treeBaseDuration = operations[i + 2];
+
+        i = i + 3;
+        break;
+      default:
+        throw Error(`Unsupported Bridge operation ${operation}`);
+    }
+  }
+
+  return {
+    nodes,
+    rootID: commitTree.rootID,
+  };
+}
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 7829df4dff23..65c8c6bf6c67 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -81,3 +81,13 @@
   font-size: var(--font-size-sans-large);
   padding: 0.5rem;
 }
+
+.Fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index e86f1b8cf95b..add792692297 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -5,6 +5,8 @@ import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
+import CommitFlamegraph from './CommitFlamegraph';
+import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
 import RecordToggle from './RecordToggle';
 import SnapshotSelector from './SnapshotSelector';
@@ -12,24 +14,41 @@ import SnapshotSelector from './SnapshotSelector';
 import styles from './Profiler.css';
 
 export default function Profiler(_: {||}) {
-  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+  const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
+    ProfilerContext
+  );
 
-  if (isProfiling || !hasProfilingData) {
-    return <NonSuspendingProfiler isProfiling={isProfiling} />;
-  } else {
+  if (isProfiling || !rootHasProfilingData) {
     return (
-      <Suspense fallback={<ProfilerFallback />}>
-        <SuspendingProfiler />
-      </Suspense>
+      <NonSuspendingProfiler
+        hasProfilingData={hasProfilingData}
+        isProfiling={isProfiling}
+      />
     );
+  } else {
+    return <SuspendingProfiler />;
   }
 }
 
 // This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).
 // Nothing in this view's subtree suspends.
 // By not suspending while profiling is in progress, we avoid potential cache invalidation trickiness.
-function NonSuspendingProfiler({ isProfiling }: {| isProfiling: boolean |}) {
-  const view = isProfiling ? <RecortdingInProgress /> : <NoProfilingData />;
+// NOTE that the structure of this UI should mirror SuspendingProfiler.
+function NonSuspendingProfiler({
+  hasProfilingData,
+  isProfiling,
+}: {|
+  hasProfilingData: boolean,
+  isProfiling: boolean,
+|}) {
+  let view = null;
+  if (isProfiling) {
+    view = <RecortdingInProgress />;
+  } else if (!hasProfilingData) {
+    view = <NoProfilingData />;
+  } else {
+    view = <NoProfilingDataForRoot />;
+  }
 
   return (
     <div className={styles.Profiler}>
@@ -58,21 +77,33 @@ function NonSuspendingProfiler({ isProfiling }: {| isProfiling: boolean |}) {
 
 // TODO (profiling) Real fallback UI
 function ProfilerFallback() {
-  return <div>Loading...</div>;
+  return <div className={styles.Fallback}>Loading...</div>;
 }
 
 // This view is rendered when there is profiler data (even though there may not be any for the currently selected root).
 // This view's subtree uses suspense to request profiler data from the backend.
-function SuspendingProfiler(_: {||}) {
+// NOTE that the structure of this UI should mirror NonSuspendingProfiler.
+function SuspendingProfiler() {
   const [tab, setTab] = useState('flame-chart');
   const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
 
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
-  // TODO (profiling) Show selected "tab" view
-  // TODO (profiling) Handle cases: no selected commit, no data for root
-  const view = <div>Coming soon...</div>;
+  let view = null;
+  switch (tab) {
+    case 'flame-chart':
+      view = <CommitFlamegraph />;
+      break;
+    case 'ranked-chart':
+      view = <CommitRanked />;
+      break;
+    case 'interactions':
+      view = <div>Coming soon: Interactions</div>; // TODO (profiling)
+      break;
+    default:
+      break;
+  }
 
   return (
     <div className={styles.Profiler}>
@@ -95,19 +126,23 @@ function SuspendingProfiler(_: {||}) {
           <Button onClick={showFilterModal} title="Filter commits by duration">
             <ButtonIcon type="filter" />
           </Button>
-          <SnapshotSelector />
+          <Suspense fallback={<ProfilerFallback />}>
+            <SnapshotSelector />
+          </Suspense>
         </div>
         <div className={styles.Content}>
-          {view}
+          <Suspense fallback={<ProfilerFallback />}>{view}</Suspense>
           {isFilterModalShowing && (
             <FilterModal dismissModal={dismissFilterModal} />
           )}
         </div>
       </div>
       <div className={styles.RightColumn}>
-        {/* TODO (profiler) Dynamic information */}
-        <div className={styles.Toolbar}>Commit information</div>
-        <div className={styles.InspectedProperties} />
+        <Suspense fallback={<ProfilerFallback />}>
+          {/* TODO (profiler) Dynamic information */}
+          <div className={styles.Toolbar}>Commit information</div>
+          <div className={styles.InspectedProperties} />
+        </Suspense>
       </div>
     </div>
   );
@@ -143,6 +178,18 @@ const NoProfilingData = () => (
   </div>
 );
 
+const NoProfilingDataForRoot = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>
+      No profiling data has been recorded for the selected root.
+    </div>
+    <div className={styles.Row}>
+      Select a different root in the elements panel, or click the record button{' '}
+      <RecordToggle /> to start recording.
+    </div>
+  </div>
+);
+
 const RecortdingInProgress = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>Profiling is in progress...</div>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index fa8e827c0fec..d30c6385040b 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -28,6 +28,7 @@ type Context = {|
   // If nothing is selected though, this will default to the first root.
   rendererID: number | null,
   rootID: number | null,
+  rootHasProfilingData: boolean,
 
   // Controls whether commits are filtered by duration.
   // This value is controlled by a filter toggle UI in the Profiler toolbar.
@@ -85,14 +86,19 @@ function ProfilerContextController({ children }: Props) {
   // or use a portal to share the contexts themselves between Chrome tabs.
   let rendererID = null;
   let rootID = null;
+  let rootHasProfilingData = false;
   if (selectedElementID) {
     rendererID = store.getRendererIDForElement(
       ((selectedElementID: any): number)
     );
     rootID = store.getRootIDForElement(((selectedElementID: any): number));
+    rootHasProfilingData = store.profilingOperations.has(
+      ((rootID: any): number)
+    );
   } else if (store.roots.length > 0) {
     // If no root is selected, assume the first root; many React apps are single root anyway.
     rootID = store.roots[0];
+    rootHasProfilingData = store.profilingOperations.has(rootID);
     rendererID = store.getRendererIDForElement(((rootID: any): number));
   }
 
@@ -121,6 +127,7 @@ function ProfilerContextController({ children }: Props) {
 
       rendererID,
       rootID,
+      rootHasProfilingData,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,
@@ -138,6 +145,7 @@ function ProfilerContextController({ children }: Props) {
 
       rendererID,
       rootID,
+      rootHasProfilingData,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index bf63c4c4a701..c7293018f927 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -41,7 +41,7 @@ export default function SnapshotSelector(_: Props) {
     [commitDurations, isCommitFilterEnabled, minCommitDuration]
   );
 
-  const numCommits = filteredCommitIndices.length;
+  const numFilteredCommits = filteredCommitIndices.length;
 
   // Map the (unfiltered) selected commit index to an index within the filtered data.
   const selectedFilteredCommitIndex = useMemo(() => {
@@ -56,19 +56,24 @@ export default function SnapshotSelector(_: Props) {
   }, [filteredCommitIndices, selectedCommitIndex]);
 
   if (selectedFilteredCommitIndex === null) {
-    if (numCommits > 0) {
+    if (numFilteredCommits > 0) {
       setSelectedCommitIndex(0);
     }
-  } else if (selectedFilteredCommitIndex >= numCommits) {
-    setSelectedCommitIndex(numCommits === 0 ? null : numCommits - 1);
+  } else if (selectedFilteredCommitIndex >= numFilteredCommits) {
+    setSelectedCommitIndex(
+      numFilteredCommits === 0 ? null : numFilteredCommits - 1
+    );
   }
 
-  let currentCommitNumber = '-';
-  if (numCommits > 0) {
-    currentCommitNumber = `${selectedFilteredCommitIndex + 1}`.padStart(
-      `${numCommits}`.length,
-      '0'
-    );
+  let label = null;
+  if (numFilteredCommits > 0) {
+    label =
+      `${selectedFilteredCommitIndex + 1}`.padStart(
+        `${numFilteredCommits}`.length,
+        '0'
+      ) +
+      ' / ' +
+      numFilteredCommits;
   }
 
   const viewNextCommit = useCallback(() => {
@@ -101,12 +106,10 @@ export default function SnapshotSelector(_: Props) {
   return (
     <Fragment>
       <div className={styles.VRule} />
-      <span className={styles.IndexLabel}>
-        {numCommits > 0 ? `${currentCommitNumber} / ${numCommits}` : '-'}
-      </span>
+      <span className={styles.IndexLabel}>{label}</span>
       <Button
         className={styles.Button}
-        disabled={selectedFilteredCommitIndex === 0 || numCommits === 0}
+        disabled={selectedFilteredCommitIndex === 0 || numFilteredCommits === 0}
         onClick={viewPrevCommit}
       >
         <ButtonIcon type="previous" />
@@ -114,11 +117,14 @@ export default function SnapshotSelector(_: Props) {
       <div
         className={styles.Commits}
         style={{
-          flex: numCommits > 0 ? '1 1 auto' : '0 0 auto',
-          maxWidth: numCommits > 0 ? numCommits * maxBarWidth : undefined,
+          flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',
+          maxWidth:
+            numFilteredCommits > 0
+              ? numFilteredCommits * maxBarWidth
+              : undefined,
         }}
       >
-        {numCommits > 0 && (
+        {numFilteredCommits > 0 && (
           <SnapshotCommitList
             commitDurations={commitDurations}
             commitTimes={commitTimes}
@@ -128,13 +134,15 @@ export default function SnapshotSelector(_: Props) {
             setSelectedCommitIndex={setSelectedCommitIndex}
           />
         )}
-        {numCommits === 0 && <div className={styles.NoCommits}>No commits</div>}
+        {numFilteredCommits === 0 && (
+          <div className={styles.NoCommits}>No commits</div>
+        )}
       </div>
       <Button
         className={styles.Button}
         disabled={
           selectedFilteredCommitIndex === null ||
-          selectedFilteredCommitIndex >= numCommits - 1
+          selectedFilteredCommitIndex >= numFilteredCommits - 1
         }
         onClick={viewNextCommit}
       >
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 9cf9f6dd2804..bf87074dfc4a 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -1,31 +1,31 @@
 // @flow
 
-// Map of root ID to commit durations.
-// Roots that were committed during the profiling session will have a non-empty array of values.
-// Each value in the array represents the total amount of time the commit took.
-// More detailed information about a commit must be requested separately.
-export type CommitDurationsMap = Map<number, Array<number>>;
-
-export type Interaction = {|
-  id: number,
-  timestamp: number,
-  label: string,
-|};
-
 export type Node = {|
-  actualDuration: number,
-  baseDuration: number,
-  displayName: string,
   id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
   parentID: number,
-  selfDuration: number,
+  treeBaseDuration: number,
+|};
+
+export type CommitTree = {|
+  nodes: Map<number, Node>,
+  rootID: number,
+|};
+
+export type Interaction = {|
+  id: string,
+  name: string,
+  timestamp: number,
 |};
 
 export type CommitDetails = {|
-  duration: number,
   interactions: Array<Interaction>,
-  root: Node,
-  timestamp: number,
+  committedFibers: Array<{|
+    actualDuration: number,
+    id: number,
+  |}>,
 |};
 
 export type ProfilingSummary = {|

From a93dab7f837fe20adc744f819c4d09da4b4191f1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Mar 2019 08:50:28 -0700
Subject: [PATCH 143/814] Reset commit tree cache between profiles

---
 src/devtools/ProfilingCache.js                   | 6 +++++-
 src/devtools/views/Profiler/CommitTreeBuilder.js | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index a5a3b255e860..faf6a60b021e 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -2,7 +2,10 @@
 
 import { createResource, invalidateResources } from './cache';
 import Store from './store';
-import { getCommitTree } from 'src/devtools/views/Profiler/CommitTreeBuilder';
+import {
+  getCommitTree,
+  invalidateCommitTrees,
+} from 'src/devtools/views/Profiler/CommitTreeBuilder';
 
 import type { Resource } from './cache';
 import type { Bridge } from '../types';
@@ -128,6 +131,7 @@ export default class ProfilingCache {
 
   invalidate() {
     invalidateResources();
+    invalidateCommitTrees();
 
     this._pendingCommitDetailsMap.clear();
     this._pendingProfileSummaryMap.clear();
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 449833c1b0b7..af5200bc4421 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -233,3 +233,7 @@ function updateTree(
     rootID: commitTree.rootID,
   };
 }
+
+export function invalidateCommitTrees(): void {
+  rootToCommitTreeMap.clear();
+}

From 734e4146e7bbfdaebdfaf3762aaf79c22f93e328 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Mar 2019 10:52:08 -0700
Subject: [PATCH 144/814] Added Ranked chart data generation; fixed some logic
 errors in backend tree base duration tracking

---
 src/backend/agent.js                          |   3 +
 src/backend/renderer.js                       |  63 +++++----
 src/backend/types.js                          |   5 +-
 src/devtools/ProfilingCache.js                |  13 +-
 src/devtools/store.js                         |  56 ++++----
 src/devtools/views/Profiler/CommitRanked.js   |  55 ++++++++
 .../views/Profiler/CommitTreeBuilder.js       | 126 ++++++++++++++----
 .../views/Profiler/SnapshotSelector.js        |   2 +
 src/devtools/views/Profiler/types.js          |   5 +-
 src/devtools/views/Profiler/utils.js          |  26 ++++
 10 files changed, 258 insertions(+), 96 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 7a7c7a62bb85..34a5613520d7 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -46,6 +46,9 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    // TODO (profiling) Component commits
+    // TODO (profiling) Interactions
+
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index a6510e1310d5..f58d34c6b699 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -693,30 +693,32 @@ export function attach(
   ) {
     debug('enqueueUpdateIfNecessary()', fiber);
 
-    if (isProfiling) {
-      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
-        const id = getFiberID(getPrimaryFiber(fiber));
-        const { actualDuration, treeBaseDuration } = fiber;
-
-        const operation = new Uint32Array(3);
-        operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-        operation[1] = id;
-        operation[2] = treeBaseDuration;
-        addOperation(operation);
-
-        idToTreeBaseDurationMap.set(id, treeBaseDuration);
-
-        if (actualDuration > 0) {
-          // If profiling is active, store durations for elements that were rendered during the commit.
-          const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-          metadata.committedFibers.push({
-            id,
-            actualDuration,
-          });
-          metadata.maxActualDuration = Math.max(
-            metadata.maxActualDuration,
-            actualDuration
-          );
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+    if (isProfilingSupported) {
+      const id = getFiberID(getPrimaryFiber(fiber));
+      const { actualDuration, treeBaseDuration } = fiber;
+
+      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+
+      if (isProfiling) {
+        if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
+          const operation = new Uint32Array(3);
+          operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+          operation[1] = getFiberID(getPrimaryFiber(fiber));
+          operation[2] = treeBaseDuration;
+          addOperation(operation);
+        }
+
+        if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
+          if (actualDuration > 0) {
+            // If profiling is active, store durations for elements that were rendered during the commit.
+            const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
+            metadata.actualDurations.push(id, actualDuration);
+            metadata.maxActualDuration = Math.max(
+              metadata.maxActualDuration,
+              actualDuration
+            );
+          }
         }
       }
     }
@@ -880,7 +882,7 @@ export function attach(
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
-        committedFibers: [],
+        actualDurations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
           (interaction: Interaction) => ({
@@ -1377,13 +1379,8 @@ export function attach(
     }
   }
 
-  type CommittedFiber = {|
-    actualDuration: number,
-    id: number,
-  |};
-
   type CommitProfilingData = {|
-    committedFibers: Array<CommittedFiber>,
+    actualDurations: Array<number>,
     commitTime: number,
     interactions: Array<Interaction>,
     maxActualDuration: number,
@@ -1410,7 +1407,7 @@ export function attach(
         return {
           commitIndex,
           interactions: commitProfilingData.interactions,
-          committedFibers: commitProfilingData.committedFibers,
+          actualDurations: commitProfilingData.actualDurations,
           rootID,
         };
       }
@@ -1419,7 +1416,7 @@ export function attach(
     return {
       commitIndex,
       interactions: [],
-      committedFibers: [],
+      actualDurations: [],
       rootID,
     };
   }
diff --git a/src/backend/types.js b/src/backend/types.js
index 64c6169a694d..48da3b85f3a7 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -56,12 +56,9 @@ export type Interaction = {|
 |};
 
 export type CommitDetails = {|
+  actualDurations: Array<number>,
   commitIndex: number,
   interactions: Array<Interaction>,
-  committedFibers: Array<{|
-    actualDuration: number,
-    id: number,
-  |}>,
   rootID: number,
 |};
 
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index faf6a60b021e..7c76d0421d75 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -59,7 +59,7 @@ export default class ProfilingCache {
           if (!store.profilingOperations.has(rootID)) {
             // If no profiling data was recorded for this root, skip the round trip.
             resolve({
-              committedFibers: [],
+              actualDurations: new Map(),
               interactions: [],
             });
           } else {
@@ -139,7 +139,7 @@ export default class ProfilingCache {
 
   onCommitDetails = ({
     commitIndex,
-    committedFibers,
+    actualDurations,
     interactions,
     rootID,
   }: CommitDetailsBackend) => {
@@ -148,8 +148,13 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingCommitDetailsMap.delete(key);
 
+      const actualDurationsMap = new Map();
+      for (let i = 0; i < actualDurations.length; i += 2) {
+        actualDurationsMap.set(actualDurations[i], actualDurations[i + 1]);
+      }
+
       resolve({
-        committedFibers,
+        actualDurations: actualDurationsMap,
         interactions,
       });
     }
@@ -166,7 +171,7 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingProfileSummaryMap.delete(rootID);
       const initialTreeBaseDurationsMap = new Map();
-      for (let i = 0; i < initialTreeBaseDurations.length; i++) {
+      for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
         initialTreeBaseDurationsMap.set(
           initialTreeBaseDurations[i],
           initialTreeBaseDurations[i + 1]
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 76fa683fa45e..9884897acf9b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -575,33 +575,37 @@ export default class Store extends EventEmitter {
 
   // DEBUG
   __printTree = () => {
-    console.group('__printTree()');
-    this._roots.forEach((rootID: number) => {
-      const printElement = (id: number) => {
-        const element = ((this._idToElement.get(id): any): Element);
-        console.log(
-          `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
-            ''}${element.key ? `key:"${element.key}"` : ''} (${element.weight})`
-        );
-        element.children.forEach(printElement);
-      };
-      const root = ((this._idToElement.get(rootID): any): Element);
-      console.group(`${rootID}:root (${root.weight})`);
-      root.children.forEach(printElement);
-      console.groupEnd();
-    });
-    console.group(`List of ${this.numElements} elements`);
-    for (let i = 0; i < this.numElements; i++) {
-      //if (i === 4) { debugger }
-      const element = this.getElementAtIndex(i);
-      if (element != null) {
-        console.log(
-          `${'•'.repeat(element.depth)}${i}: ${element.displayName ||
-            'Unknown'}`
-        );
+    if (__DEBUG__) {
+      console.group('__printTree()');
+      this._roots.forEach((rootID: number) => {
+        const printElement = (id: number) => {
+          const element = ((this._idToElement.get(id): any): Element);
+          console.log(
+            `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
+              ''} ${element.key ? `key:"${element.key}"` : ''} (${
+              element.weight
+            })`
+          );
+          element.children.forEach(printElement);
+        };
+        const root = ((this._idToElement.get(rootID): any): Element);
+        console.group(`${rootID}:root (${root.weight})`);
+        root.children.forEach(printElement);
+        console.groupEnd();
+      });
+      console.group(`List of ${this.numElements} elements`);
+      for (let i = 0; i < this.numElements; i++) {
+        //if (i === 4) { debugger }
+        const element = this.getElementAtIndex(i);
+        if (element != null) {
+          console.log(
+            `${'•'.repeat(element.depth)}${i}: ${element.displayName ||
+              'Unknown'}`
+          );
+        }
       }
+      console.groupEnd();
+      console.groupEnd();
     }
-    console.groupEnd();
-    console.groupEnd();
   };
 }
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 8e50869a37b9..4e856656a4a1 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -2,10 +2,13 @@
 
 import React, { useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
+import { calculateSelfDuration } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './CommitRanked.css';
 
+import type { CommitDetails, CommitTree, Node } from './types';
+
 export default function CommitRanked(_: {||}) {
   const { rendererID, rootID, selectedCommitIndex } = useContext(
     ProfilerContext
@@ -31,5 +34,57 @@ export default function CommitRanked(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
+  const chartData = generateChartData(commitTree, commitDetails);
+
   return 'Coming soon: Ranked';
 }
+
+type ChartNode = {|
+  id: number,
+  label: string,
+  name: string,
+  title: string,
+  value: number,
+|};
+
+type ChartData = {|
+  maxValue: number,
+  nodes: Array<ChartNode>,
+|};
+
+const generateChartData = (
+  commitTree: CommitTree,
+  commitDetails: CommitDetails
+): ChartData => {
+  const { nodes } = commitTree;
+
+  let maxSelfDuration = 0;
+
+  const chartNodes: Array<ChartNode> = [];
+  commitDetails.actualDurations.forEach((actualDuration, id) => {
+    const node = ((nodes.get(id): any): Node);
+
+    // Don't show the root node in this chart.
+    if (node.parentID === 0) {
+      return;
+    }
+
+    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
+
+    const name = node.displayName || 'Unknown';
+    const label = `${name} (${selfDuration.toFixed(1)}ms)`;
+    chartNodes.push({
+      id,
+      label,
+      name,
+      title: label,
+      value: selfDuration,
+    });
+  });
+
+  return {
+    maxValue: maxSelfDuration,
+    nodes: chartNodes.sort((a, b) => b.value - a.value),
+  };
+};
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index af5200bc4421..24b92d665ad7 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -1,6 +1,7 @@
 // @flow
 
 import {
+  __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
@@ -17,6 +18,17 @@ import type {
   ProfilingSummary as ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
 
+const debug = (methodName, ...args) => {
+  if (__DEBUG__) {
+    console.log(
+      `%cCommitTreeBuilder %c${methodName}`,
+      'color: pink; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
+};
+
 const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
 
 export function getCommitTree({
@@ -49,40 +61,29 @@ export function getCommitTree({
     // If this is the very first commit, start with the cached snapshot and apply the first mutation.
     // Otherwise load (or generate) the previous commit and append a mutation to it.
     if (commitIndex === 0) {
-      const initialCommitTree = {
-        nodes: new Map(),
-        rootID,
-      };
+      const nodes = new Map();
 
       // Construct the initial tree.
-      const queue: Array<number> = [rootID];
-      while (queue.length > 0) {
-        const currentID = queue.pop();
-        const currentNode = ((store.profilingSnapshot.get(
-          currentID
-        ): any): Node);
-
-        initialCommitTree.nodes.set(currentID, {
-          id: currentID,
-          children: currentNode.children,
-          displayName: currentNode.displayName,
-          key: currentNode.key,
-          parentID: 0,
-          treeBaseDuration: ((profilingSummary.initialTreeBaseDurations.get(
-            currentID
-          ): any): number),
-        });
-
-        queue.push(...currentNode.children);
-      }
+      recursivelyIniitliazeTree(
+        rootID,
+        0,
+        nodes,
+        profilingSummary.initialTreeBaseDurations,
+        store
+      );
 
       // Mutate the tree
       const commitOperations = store.profilingOperations.get(rootID);
       if (commitOperations != null && commitIndex < commitOperations.length) {
         const commitTree = updateTree(
-          initialCommitTree,
+          { nodes, rootID },
           commitOperations[commitIndex]
         );
+
+        if (__DEBUG__) {
+          __printTree(commitTree);
+        }
+
         commitTrees.push(commitTree);
         return commitTree;
       }
@@ -100,6 +101,11 @@ export function getCommitTree({
           previousCommitTree,
           commitOperations[commitIndex]
         );
+
+        if (__DEBUG__) {
+          __printTree(commitTree);
+        }
+
         commitTrees.push(commitTree);
         return commitTree;
       }
@@ -113,6 +119,35 @@ export function getCommitTree({
   };
 }
 
+function recursivelyIniitliazeTree(
+  id: number,
+  parentID: number,
+  nodes: Map<number, Node>,
+  initialTreeBaseDurations: Map<number, number>,
+  store: Store
+): void {
+  const node = ((store.profilingSnapshot.get(id): any): Node);
+
+  nodes.set(id, {
+    id,
+    children: node.children,
+    displayName: node.displayName,
+    key: node.key,
+    parentID,
+    treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
+  });
+
+  node.children.forEach(childID =>
+    recursivelyIniitliazeTree(
+      childID,
+      id,
+      nodes,
+      initialTreeBaseDurations,
+      store
+    )
+  );
+}
+
 function updateTree(
   commitTree: CommitTree,
   operations: Uint32Array
@@ -170,6 +205,11 @@ function updateTree(
             parentNode = ((nodes.get(parentID): any): Node);
             parentNode.children = parentNode.children.concat(id);
 
+            debug(
+              'Add',
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+            );
+
             const node: Node = {
               children: [],
               displayName,
@@ -197,6 +237,8 @@ function updateTree(
         if (parentNode == null) {
           // No-op
         } else {
+          debug('Remove', `fiber ${id} from parent ${parentID}`);
+
           parentNode.children = parentNode.children.filter(
             childID => childID !== id
           );
@@ -212,8 +254,11 @@ function updateTree(
 
         i = i + 3 + numChildren;
 
+        debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+
         node = ((nodes.get(id): any): Node);
         node.children = Array.from(children);
+
         break;
       case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
         id = operations[i + 1];
@@ -221,6 +266,11 @@ function updateTree(
         node = ((nodes.get(id): any): Node);
         node.treeBaseDuration = operations[i + 2];
 
+        debug(
+          'Update',
+          `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`
+        );
+
         i = i + 3;
         break;
       default:
@@ -237,3 +287,29 @@ function updateTree(
 export function invalidateCommitTrees(): void {
   rootToCommitTreeMap.clear();
 }
+
+// DEBUG
+const __printTree = (commitTree: CommitTree) => {
+  if (__DEBUG__) {
+    const { nodes, rootID } = commitTree;
+    console.group('__printTree()');
+    const queue = [rootID, 0];
+    while (queue.length > 0) {
+      const id = queue.shift();
+      const depth = queue.shift();
+
+      const node = ((nodes.get(id): any): Node);
+
+      console.log(
+        `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
+          node.key ? `key:"${node.key}"` : ''
+        } (${node.treeBaseDuration})`
+      );
+
+      node.children.forEach(childID => {
+        queue.push(childID, depth + 1);
+      });
+    }
+    console.groupEnd();
+  }
+};
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index c7293018f927..fa6469b54e2b 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -55,6 +55,8 @@ export default function SnapshotSelector(_: Props) {
     return null;
   }, [filteredCommitIndices, selectedCommitIndex]);
 
+  // TODO (profiling) This should be managed by the context controller (reducer).
+  // TODO (profiling) We should also reset the selected index to 0 between profiling sessions.
   if (selectedFilteredCommitIndex === null) {
     if (numFilteredCommits > 0) {
       setSelectedCommitIndex(0);
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index bf87074dfc4a..0b4242457864 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -21,11 +21,8 @@ export type Interaction = {|
 |};
 
 export type CommitDetails = {|
+  actualDurations: Map<number, number>,
   interactions: Array<Interaction>,
-  committedFibers: Array<{|
-    actualDuration: number,
-    id: number,
-  |}>,
 |};
 
 export type ProfilingSummary = {|
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index ed9897f544df..d94c2ecd4ea2 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,5 +1,7 @@
 // @flow
 
+import type { CommitDetails, CommitTree, Node } from './types';
+
 const commitGradient = [
   'var(--color-commit-gradient-0)',
   'var(--color-commit-gradient-1)',
@@ -13,6 +15,30 @@ const commitGradient = [
   'var(--color-commit-gradient-9)',
 ];
 
+export const calculateSelfDuration = (
+  id: number,
+  commitTree: CommitTree,
+  commitDetails: CommitDetails
+): number => {
+  const { actualDurations } = commitDetails;
+  const { nodes } = commitTree;
+
+  if (!actualDurations.has(id)) {
+    return 0;
+  }
+
+  let selfDuration = ((actualDurations.get(id): any): number);
+
+  const node = ((nodes.get(id): any): Node);
+  node.children.forEach(childID => {
+    if (actualDurations.has(childID)) {
+      selfDuration -= ((actualDurations.get(childID): any): number);
+    }
+  });
+
+  return selfDuration;
+};
+
 export const getGradientColor = (value: number) => {
   const maxIndex = commitGradient.length - 1;
   let index;

From 01ad9f1da6d6db997b1b2c865b2eb36de577538d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Mar 2019 14:06:41 -0700
Subject: [PATCH 145/814] Implemented ranked chart

---
 src/devtools/ProfilingCache.js                | 175 ++++++++++--------
 src/devtools/views/Profiler/ChartNode.css     |  31 ++++
 src/devtools/views/Profiler/ChartNode.js      |  67 +++++++
 .../views/Profiler/CommitFlamegraph.js        |   2 +-
 src/devtools/views/Profiler/CommitRanked.css  |   5 +
 src/devtools/views/Profiler/CommitRanked.js   | 149 +++++++++------
 .../views/Profiler/CommitRankedListItem.js    |  51 +++++
 src/devtools/views/Profiler/NoCommitData.css  |  11 ++
 src/devtools/views/Profiler/NoCommitData.js   |  20 ++
 .../views/Profiler/ProfilerContext.js         |  12 ++
 .../views/Profiler/RankedChartBuilder.js      |  78 ++++++++
 .../views/Profiler/SnapshotSelector.css       |   1 +
 src/devtools/views/Profiler/constants.js      |   1 +
 src/devtools/views/Profiler/utils.js          |  10 +
 .../views/Settings/SettingsContext.js         |   1 +
 src/devtools/views/root.css                   |   2 +
 16 files changed, 484 insertions(+), 132 deletions(-)
 create mode 100644 src/devtools/views/Profiler/ChartNode.css
 create mode 100644 src/devtools/views/Profiler/ChartNode.js
 create mode 100644 src/devtools/views/Profiler/CommitRankedListItem.js
 create mode 100644 src/devtools/views/Profiler/NoCommitData.css
 create mode 100644 src/devtools/views/Profiler/NoCommitData.js
 create mode 100644 src/devtools/views/Profiler/RankedChartBuilder.js

diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 7c76d0421d75..bed859d66558 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -6,6 +6,10 @@ import {
   getCommitTree,
   invalidateCommitTrees,
 } from 'src/devtools/views/Profiler/CommitTreeBuilder';
+import {
+  getChartData as getRankedChartData,
+  invalidateChartData as invalidateRankedChartData,
+} from 'src/devtools/views/Profiler/RankedChartBuilder';
 
 import type { Resource } from './cache';
 import type { Bridge } from '../types';
@@ -15,9 +19,10 @@ import type {
 } from 'src/backend/types';
 import type {
   CommitDetails as CommitDetailsFrontend,
-  CommitTree,
+  CommitTree as CommitTreeFrontend,
   ProfilingSummary as ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
+import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/RankedChartBuilder';
 
 type CommitDetailsParams = {|
   commitIndex: number,
@@ -25,7 +30,7 @@ type CommitDetailsParams = {|
   rendererID: number,
 |};
 
-type CommitTreeParams = {|
+type GetCommitTreeParams = {|
   commitIndex: number,
   profilingSummary: ProfilingSummaryFrontend,
   rendererID: number,
@@ -38,6 +43,9 @@ type ProfilingSummaryParams = {|
 |};
 
 export default class ProfilingCache {
+  _bridge: Bridge;
+  _store: Store;
+
   _pendingCommitDetailsMap: Map<
     string,
     (commitDetails: CommitDetailsFrontend) => void
@@ -48,90 +56,105 @@ export default class ProfilingCache {
     (profilingSummary: ProfilingSummaryFrontend) => void
   > = new Map();
 
-  CommitDetails: Resource<CommitDetailsParams, CommitDetailsFrontend>;
-  CommitTree: Resource<CommitTreeParams, CommitTree>;
-  ProfilingSummary: Resource<ProfilingSummaryParams, ProfilingSummaryFrontend>;
+  CommitDetails: Resource<
+    CommitDetailsParams,
+    CommitDetailsFrontend
+  > = createResource(
+    ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
+      return new Promise(resolve => {
+        if (!this._store.profilingOperations.has(rootID)) {
+          // If no profiling data was recorded for this root, skip the round trip.
+          resolve({
+            actualDurations: new Map(),
+            interactions: [],
+          });
+        } else {
+          this._pendingCommitDetailsMap.set(
+            `${rootID}-${commitIndex}`,
+            resolve
+          );
+          this._bridge.send('getCommitDetails', {
+            commitIndex,
+            rendererID,
+            rootID,
+          });
+        }
+      });
+    },
+    ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>
+      `${rootID}-${commitIndex}`
+  );
+
+  ProfilingSummary: Resource<
+    ProfilingSummaryParams,
+    ProfilingSummaryFrontend
+  > = createResource(
+    ({ rendererID, rootID }: ProfilingSummaryParams) => {
+      return new Promise(resolve => {
+        if (!this._store.profilingOperations.has(rootID)) {
+          // If no profiling data was recorded for this root, skip the round trip.
+          resolve({
+            commitDurations: [],
+            commitTimes: [],
+            initialTreeBaseDurations: new Map(),
+            interactionCount: 0,
+          });
+        } else {
+          this._pendingProfileSummaryMap.set(rootID, resolve);
+          this._bridge.send('getProfilingSummary', { rendererID, rootID });
+        }
+      });
+    },
+    ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
+  );
 
   constructor(bridge: Bridge, store: Store) {
-    this.CommitDetails = createResource(
-      ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
-        return new Promise(resolve => {
-          if (!store.profilingOperations.has(rootID)) {
-            // If no profiling data was recorded for this root, skip the round trip.
-            resolve({
-              actualDurations: new Map(),
-              interactions: [],
-            });
-          } else {
-            this._pendingCommitDetailsMap.set(
-              `${rootID}-${commitIndex}`,
-              resolve
-            );
-            bridge.send('getCommitDetails', {
-              commitIndex,
-              rendererID,
-              rootID,
-            });
-          }
-        });
-      },
-      ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>
-        `${rootID}-${commitIndex}`
-    );
-
-    this.CommitTree = createResource(
-      ({
-        commitIndex,
-        profilingSummary,
-        rendererID,
-        rootID,
-      }: CommitTreeParams) =>
-        new Promise(resolve =>
-          resolve(
-            getCommitTree({
-              commitIndex,
-              profilingSummary,
-              rendererID,
-              rootID,
-              store,
-            })
-          )
-        ),
-      ({
-        commitIndex,
-        profilingSummary,
-        rendererID,
-        rootID,
-      }: CommitTreeParams) => `${rootID}-${commitIndex}`
-    );
-
-    this.ProfilingSummary = createResource(
-      ({ rendererID, rootID }: ProfilingSummaryParams) => {
-        return new Promise(resolve => {
-          if (!store.profilingOperations.has(rootID)) {
-            // If no profiling data was recorded for this root, skip the round trip.
-            resolve({
-              commitDurations: [],
-              commitTimes: [],
-              initialTreeBaseDurations: new Map(),
-              interactionCount: 0,
-            });
-          } else {
-            this._pendingProfileSummaryMap.set(rootID, resolve);
-            bridge.send('getProfilingSummary', { rendererID, rootID });
-          }
-        });
-      },
-      ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
-    );
+    this._bridge = bridge;
+    this._store = store;
 
     bridge.addListener('commitDetails', this.onCommitDetails);
     bridge.addListener('profilingSummary', this.onProfileSummary);
   }
 
+  getCommitTree = ({
+    commitIndex,
+    profilingSummary,
+    rendererID,
+    rootID,
+  }: GetCommitTreeParams) =>
+    getCommitTree({
+      commitIndex,
+      profilingSummary,
+      rendererID,
+      rootID,
+      store: this._store,
+    });
+
+  getRankedChartData = ({
+    commitDetails,
+    commitIndex,
+    commitTree,
+    rootID,
+  }: {|
+    commitDetails: CommitDetailsFrontend,
+    commitIndex: number,
+    commitTree: CommitTreeFrontend,
+    rootID: number,
+  |}): RankedChartData =>
+    getRankedChartData({
+      commitDetails,
+      commitIndex,
+      commitTree,
+      rootID,
+    });
+
   invalidate() {
+    // Invalidate Susepnse caches.
     invalidateResources();
+
+    // Invalidate non-Suspense caches too.
     invalidateCommitTrees();
+    invalidateRankedChartData();
 
     this._pendingCommitDetailsMap.clear();
     this._pendingProfileSummaryMap.clear();
diff --git a/src/devtools/views/Profiler/ChartNode.css b/src/devtools/views/Profiler/ChartNode.css
new file mode 100644
index 000000000000..e9ebea1a7adc
--- /dev/null
+++ b/src/devtools/views/Profiler/ChartNode.css
@@ -0,0 +1,31 @@
+.Group {
+  transition: all ease-in-out 250ms;
+}
+
+.Rect {
+  cursor: pointer;
+  stroke: var(--color-background);
+  transition: all ease-in-out 250ms;
+}
+
+.ForeignObject {
+  pointer-events: none;
+  transition: all ease-in-out 250ms;
+}
+
+.Div {
+  pointer-events: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: var(--font-family-sans);
+  font-family: var(--font-size-sans-normal);
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 1.5;
+  padding: 0 0 0;
+  font-weight: 400;
+  color: var(--color-commit-gradient-text);
+  text-align: left;
+  transition: all ease-in-out 250ms;
+}
diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
new file mode 100644
index 000000000000..085228502dd9
--- /dev/null
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -0,0 +1,67 @@
+// @flow
+
+import React from 'react';
+import { textHeight } from './constants';
+
+import styles from './ChartNode.css';
+
+type Props = {|
+  color: string,
+  height: number,
+  isDimmed?: boolean,
+  label: string,
+  onClick: Function,
+  onDoubleClick?: Function,
+  placeLabelAboveNode?: boolean,
+  title: string,
+  width: number,
+  x: number,
+  y: number,
+|};
+
+const minWidthToDisplay = 35;
+
+export default function ChartNode({
+  color,
+  height,
+  isDimmed = false,
+  label,
+  onClick,
+  onDoubleClick,
+  title,
+  width,
+  x,
+  y,
+}: Props) {
+  return (
+    <g className={styles.Group} transform={`translate(${x},${y})`}>
+      <title>{title}</title>
+      <rect
+        width={width}
+        height={height}
+        fill={color}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        className={styles.Rect}
+        style={{
+          opacity: isDimmed ? 0.5 : 1,
+        }}
+      />
+      {width >= minWidthToDisplay && (
+        <foreignObject
+          width={width}
+          height={height}
+          className={styles.ForeignObject}
+          style={{
+            paddingLeft: x < 0 ? -x : 0,
+            opacity: isDimmed ? 0.75 : 1,
+            display: width < minWidthToDisplay ? 'none' : 'block',
+          }}
+          y={height < textHeight ? -textHeight : 0}
+        >
+          <div className={styles.Div}>{label}</div>
+        </foreignObject>
+      )}
+    </g>
+  );
+}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index fe820621d648..7e5c533ce37a 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -24,7 +24,7 @@ export default function CommitFlamegraph(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
-  const commitTree = profilingCache.CommitTree.read({
+  const commitTree = profilingCache.getCommitTree({
     commitIndex: ((selectedCommitIndex: any): number),
     profilingSummary,
     rendererID: ((rendererID: any): number),
diff --git a/src/devtools/views/Profiler/CommitRanked.css b/src/devtools/views/Profiler/CommitRanked.css
index e69de29bb2d1..bc441e485e1f 100644
--- a/src/devtools/views/Profiler/CommitRanked.css
+++ b/src/devtools/views/Profiler/CommitRanked.css
@@ -0,0 +1,5 @@
+.Container {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 4e856656a4a1..1fb4ded3ee41 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -1,18 +1,55 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
-import { calculateSelfDuration } from './utils';
+import NoCommitData from './NoCommitData';
+import CommitRankedListItem from './CommitRankedListItem';
+import { barHeight } from './constants';
+import { scale } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './CommitRanked.css';
 
-import type { CommitDetails, CommitTree, Node } from './types';
+import type { ChartData } from './RankedChartBuilder';
 
-export default function CommitRanked(_: {||}) {
-  const { rendererID, rootID, selectedCommitIndex } = useContext(
-    ProfilerContext
+export type ItemData = {|
+  chartData: ChartData,
+  scaleX: (value: number, fallbackValue: number) => number,
+  selectedFiberID: number | null,
+  selectedFiberIndex: number,
+  selectFiber: (id: number | null) => void,
+  width: number,
+|};
+
+export default function CommitRankedAutoSizer(_: {||}) {
+  const { selectFiber } = useContext(ProfilerContext);
+  const deselectCurrentFiber = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(null);
+    },
+    [selectFiber]
+  );
+
+  return (
+    <div className={styles.Container} onClick={deselectCurrentFiber}>
+      <AutoSizer>
+        {({ height, width }) => <CommitRanked height={height} width={width} />}
+      </AutoSizer>
+    </div>
   );
+}
+
+function CommitRanked({ height, width }: {| height: number, width: number |}) {
+  const {
+    rendererID,
+    rootID,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectFiber,
+  } = useContext(ProfilerContext);
 
   const { profilingCache } = useContext(StoreContext);
 
@@ -27,64 +64,66 @@ export default function CommitRanked(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
-  const commitTree = profilingCache.CommitTree.read({
+  const commitTree = profilingCache.getCommitTree({
     commitIndex: ((selectedCommitIndex: any): number),
     profilingSummary,
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
 
-  const chartData = generateChartData(commitTree, commitDetails);
-
-  return 'Coming soon: Ranked';
-}
-
-type ChartNode = {|
-  id: number,
-  label: string,
-  name: string,
-  title: string,
-  value: number,
-|};
-
-type ChartData = {|
-  maxValue: number,
-  nodes: Array<ChartNode>,
-|};
+  const chartData = profilingCache.getRankedChartData({
+    commitDetails,
+    commitIndex: ((selectedCommitIndex: any): number),
+    commitTree,
+    rootID: ((rootID: any): number),
+  });
 
-const generateChartData = (
-  commitTree: CommitTree,
-  commitDetails: CommitDetails
-): ChartData => {
-  const { nodes } = commitTree;
+  const selectedFiberIndex = useMemo(
+    () => getNodeIndex(chartData, selectedFiberID),
+    [chartData, selectedFiberID]
+  );
 
-  let maxSelfDuration = 0;
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
+      selectedFiberID,
+      selectedFiberIndex,
+      selectFiber,
+      width,
+    }),
+    [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]
+  );
 
-  const chartNodes: Array<ChartNode> = [];
-  commitDetails.actualDurations.forEach((actualDuration, id) => {
-    const node = ((nodes.get(id): any): Node);
+  // If a commit contains no fibers with an actualDuration > 0,
+  // Display a fallback message.
+  if (chartData.nodes.length === 0) {
+    return <NoCommitData />;
+  }
+
+  return (
+    <FixedSizeList
+      height={height}
+      innerTagName="svg"
+      itemCount={chartData.nodes.length}
+      itemData={itemData}
+      itemSize={barHeight}
+      width={width}
+    >
+      {CommitRankedListItem}
+    </FixedSizeList>
+  );
+}
 
-    // Don't show the root node in this chart.
-    if (node.parentID === 0) {
-      return;
+const getNodeIndex = (chartData: ChartData, id: number | null): number => {
+  if (id === null) {
+    return 0;
+  }
+  const { nodes } = chartData;
+  for (let index = 0; index < nodes.length; index++) {
+    if (nodes[index].id === id) {
+      return index;
     }
-
-    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
-    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
-
-    const name = node.displayName || 'Unknown';
-    const label = `${name} (${selfDuration.toFixed(1)}ms)`;
-    chartNodes.push({
-      id,
-      label,
-      name,
-      title: label,
-      value: selfDuration,
-    });
-  });
-
-  return {
-    maxValue: maxSelfDuration,
-    nodes: chartNodes.sort((a, b) => b.value - a.value),
-  };
+  }
+  return 0;
 };
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
new file mode 100644
index 000000000000..d47ff5059a46
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -0,0 +1,51 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { barHeight, minBarWidth } from './constants';
+import { getGradientColor } from './utils';
+import ChartNode from './ChartNode';
+
+import type { ItemData } from './CommitRanked';
+
+export default function CommitRankedListItem({
+  data,
+  index,
+  style,
+}: {
+  data: ItemData,
+  index: number,
+  style: Object,
+}) {
+  const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;
+
+  const node = chartData.nodes[index];
+
+  const handleClick = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(node.id);
+    },
+    [node, selectFiber]
+  );
+
+  // List items are absolutely positioned using the CSS "top" attribute.
+  // The "left" value will always be 0.
+  // Since height is fixed, and width is based on the node's duration,
+  // We can ignore those values as well.
+  const top = parseInt(style.top, 10);
+
+  return (
+    <ChartNode
+      color={getGradientColor(node.value / chartData.maxValue)}
+      height={barHeight}
+      isDimmed={index < selectedFiberIndex}
+      key={node.id}
+      label={node.label}
+      onClick={handleClick}
+      title={node.title}
+      width={Math.max(minBarWidth, scaleX(node.value, width))}
+      x={0}
+      y={top}
+    />
+  );
+}
diff --git a/src/devtools/views/Profiler/NoCommitData.css b/src/devtools/views/Profiler/NoCommitData.css
new file mode 100644
index 000000000000..0f66490ee958
--- /dev/null
+++ b/src/devtools/views/Profiler/NoCommitData.css
@@ -0,0 +1,11 @@
+.NoCommitData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+}
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
new file mode 100644
index 000000000000..8cd316aa9359
--- /dev/null
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -0,0 +1,20 @@
+// @flow
+
+import React from 'react';
+
+import styles from './NoCommitData.css';
+
+export default function NoCommitData() {
+  return (
+    <div className={styles.NoCommitData}>
+      <p className={styles.Header}>
+        There is no timing data to display for the currently selected commit.
+      </p>
+      <p>
+        This can indicate that a render occurred too quickly for the timing API
+        to measure. Try selecting another commit in the upper, right-hand
+        corner.
+      </p>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index d30c6385040b..490db544c837 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -44,6 +44,10 @@ type Context = {|
   // It impacts the flame graph and ranked charts.
   selectedCommitIndex: number | null,
   setSelectedCommitIndex: (value: number | null) => void,
+
+  // Which fiber is currently selected in the Ranked or Flamegraph charts?
+  selectedFiberID: number | null,
+  selectFiber: (id: number | null) => void,
 |};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
@@ -118,6 +122,8 @@ function ProfilerContextController({ children }: Props) {
     null
   );
 
+  const [selectedFiberID, selectFiber] = useState<number | null>(null);
+
   const value = useMemo(
     () => ({
       hasProfilingData,
@@ -136,6 +142,9 @@ function ProfilerContextController({ children }: Props) {
 
       selectedCommitIndex,
       setSelectedCommitIndex,
+
+      selectedFiberID,
+      selectFiber,
     }),
     [
       hasProfilingData,
@@ -154,6 +163,9 @@ function ProfilerContextController({ children }: Props) {
 
       selectedCommitIndex,
       setSelectedCommitIndex,
+
+      selectedFiberID,
+      selectFiber,
     ]
   );
 
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
new file mode 100644
index 000000000000..0b3115b0238c
--- /dev/null
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -0,0 +1,78 @@
+// @flow
+
+import { calculateSelfDuration } from './utils';
+
+import type { CommitDetails, CommitTree, Node } from './types';
+
+export type ChartNode = {|
+  id: number,
+  label: string,
+  name: string,
+  title: string,
+  value: number,
+|};
+
+export type ChartData = {|
+  maxValue: number,
+  nodes: Array<ChartNode>,
+|};
+
+const cachedChartData: Map<string, ChartData> = new Map();
+
+export function getChartData({
+  commitDetails,
+  commitIndex,
+  commitTree,
+  rootID,
+}: {|
+  commitDetails: CommitDetails,
+  commitIndex: number,
+  commitTree: CommitTree,
+  rootID: number,
+|}): ChartData {
+  const key = `${rootID}-${commitIndex}`;
+
+  if (cachedChartData.has(key)) {
+    return ((cachedChartData.get(key): any): ChartData);
+  }
+
+  const { nodes } = commitTree;
+
+  let maxSelfDuration = 0;
+
+  const chartNodes: Array<ChartNode> = [];
+  commitDetails.actualDurations.forEach((actualDuration, id) => {
+    const node = ((nodes.get(id): any): Node);
+
+    // Don't show the root node in this chart.
+    if (node.parentID === 0) {
+      return;
+    }
+
+    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
+
+    const name = node.displayName || 'Unknown';
+    const label = `${name} (${selfDuration.toFixed(1)}ms)`;
+    chartNodes.push({
+      id,
+      label,
+      name,
+      title: label,
+      value: selfDuration,
+    });
+  });
+
+  const chartData = {
+    maxValue: maxSelfDuration,
+    nodes: chartNodes.sort((a, b) => b.value - a.value),
+  };
+
+  cachedChartData.set(key, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 0589bfa63a85..8d4fa32d1bbf 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -21,6 +21,7 @@
   flex: 0 0 auto;
   white-space: nowrap;
   font-family: var(--font-family-monospace);
+  margin-left: 0.25rem;
 }
 
 .NoCommits {
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index ef3a21c27066..61162f61c513 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,5 +1,6 @@
 // @flow
 
+export const barHeight = 20;
 export const maxBarWidth = 30;
 export const minBarHeight = 5;
 export const minBarWidth = 5;
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index d94c2ecd4ea2..c8e439ce73c5 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -58,3 +58,13 @@ export const formatPercentage = (percentage: number) =>
   Math.round(percentage * 100);
 export const formatTime = (timestamp: number) =>
   Math.round(Math.round(timestamp) / 100) / 10;
+
+export const scale = (
+  minValue: number,
+  maxValue: number,
+  minRange: number,
+  maxRange: number
+) => (value: number, fallbackValue: number) =>
+  maxValue - minValue === 0
+    ? fallbackValue
+    : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 9c4e36be8cc2..0c5458cbade7 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -145,6 +145,7 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-commit-gradient-7');
   updateStyleHelper(theme, 'color-commit-gradient-8');
   updateStyleHelper(theme, 'color-commit-gradient-9');
+  updateStyleHelper(theme, 'color-commit-gradient-text');
   updateStyleHelper(theme, 'color-component-name');
   updateStyleHelper(theme, 'color-component-name-inverted');
   updateStyleHelper(theme, 'color-dim');
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 1d4ac95ceaf8..65eb630d2422 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -27,6 +27,7 @@
   --light-color-commit-gradient-7: #dfba57;
   --light-color-commit-gradient-8: #efbb49;
   --light-color-commit-gradient-9: #febc38;
+  --light-color-commit-gradient-text: #000000;
   --light-color-component-name: #8155cb;
   --light-color-component-name-inverted: #ffffff;
   --light-color-dim: #777d88;
@@ -68,6 +69,7 @@
   --dark-color-commit-gradient-7: #dfba57;
   --dark-color-commit-gradient-8: #efbb49;
   --dark-color-commit-gradient-9: #febc38;
+  --dark-color-commit-gradient-text: #000000;
   --dark-color-component-name: #61dafb;
   --dark-color-component-name-inverted: ##282828;
   --dark-color-dim: #8f949d;

From c82a7fb56063f241ea3213f27a536b73da7f70a7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Mar 2019 09:49:10 -0700
Subject: [PATCH 146/814] First pass at flame graph chart

---
 src/backend/renderer.js                       |  12 +-
 src/devtools/ProfilingCache.js                |  24 ++++
 src/devtools/views/Profiler/ChartNode.js      |   4 +-
 .../views/Profiler/CommitFlamegraph.css       |   5 +
 .../views/Profiler/CommitFlamegraph.js        | 111 ++++++++++++++++-
 .../Profiler/CommitFlamegraphListItem.js      | 102 ++++++++++++++++
 .../views/Profiler/CommitRankedListItem.js    |   1 -
 .../views/Profiler/CommitTreeBuilder.js       |   2 +-
 .../views/Profiler/FlamegraphChartBuilder.js  | 112 ++++++++++++++++++
 .../views/Profiler/RankedChartBuilder.js      |   2 -
 src/devtools/views/Profiler/constants.js      |   1 +
 11 files changed, 363 insertions(+), 13 deletions(-)
 create mode 100644 src/devtools/views/Profiler/CommitFlamegraphListItem.js
 create mode 100644 src/devtools/views/Profiler/FlamegraphChartBuilder.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f58d34c6b699..9adcdd4af163 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -631,10 +631,14 @@ export function attach(
     }
 
     if (isProfiling) {
+      // Tree base duration updates are included in the operations typed array.
+      // So we have to convert them from milliseconds to microseconds so we can send them as ints.
+      const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
+
       const operation = new Uint32Array(3);
       operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
       operation[1] = id;
-      operation[2] = fiber.treeBaseDuration;
+      operation[2] = treeBaseDuration;
       addOperation(operation);
     }
   }
@@ -702,6 +706,10 @@ export function attach(
 
       if (isProfiling) {
         if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
+          // Tree base duration updates are included in the operations typed array.
+          // So we have to convert them from milliseconds to microseconds so we can send them as ints.
+          const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
+
           const operation = new Uint32Array(3);
           operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
           operation[1] = getFiberID(getPrimaryFiber(fiber));
@@ -1443,6 +1451,8 @@ export function attach(
     ((initialTreeBaseDurationsMap: any): Map<number, number>).forEach(
       (treeBaseDuration, id) => {
         if (idToRootMap.get(id) === rootID) {
+          // We don't need to convert milliseconds to microseconds in this case,
+          // because the profiling summary is JSON serialized.
           initialTreeBaseDurations.push(id, treeBaseDuration);
         }
       }
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index bed859d66558..a1b9675dad0b 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -6,6 +6,10 @@ import {
   getCommitTree,
   invalidateCommitTrees,
 } from 'src/devtools/views/Profiler/CommitTreeBuilder';
+import {
+  getChartData as getFlamegraphChartData,
+  invalidateChartData as invalidateFlamegraphChartData,
+} from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
 import {
   getChartData as getRankedChartData,
   invalidateChartData as invalidateRankedChartData,
@@ -22,6 +26,7 @@ import type {
   CommitTree as CommitTreeFrontend,
   ProfilingSummary as ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
+import type { ChartData as FlamegraphChartData } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
 import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/RankedChartBuilder';
 
 type CommitDetailsParams = {|
@@ -130,6 +135,24 @@ export default class ProfilingCache {
       store: this._store,
     });
 
+  getFlamegraphChartData = ({
+    commitDetails,
+    commitIndex,
+    commitTree,
+    rootID,
+  }: {|
+    commitDetails: CommitDetailsFrontend,
+    commitIndex: number,
+    commitTree: CommitTreeFrontend,
+    rootID: number,
+  |}): FlamegraphChartData =>
+    getFlamegraphChartData({
+      commitDetails,
+      commitIndex,
+      commitTree,
+      rootID,
+    });
+
   getRankedChartData = ({
     commitDetails,
     commitIndex,
@@ -154,6 +177,7 @@ export default class ProfilingCache {
 
     // Invalidate non-Suspense caches too.
     invalidateCommitTrees();
+    invalidateFlamegraphChartData();
     invalidateRankedChartData();
 
     this._pendingCommitDetailsMap.clear();
diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
index 085228502dd9..77fa24e1e81d 100644
--- a/src/devtools/views/Profiler/ChartNode.js
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -13,7 +13,6 @@ type Props = {|
   onClick: Function,
   onDoubleClick?: Function,
   placeLabelAboveNode?: boolean,
-  title: string,
   width: number,
   x: number,
   y: number,
@@ -28,14 +27,13 @@ export default function ChartNode({
   label,
   onClick,
   onDoubleClick,
-  title,
   width,
   x,
   y,
 }: Props) {
   return (
     <g className={styles.Group} transform={`translate(${x},${y})`}>
-      <title>{title}</title>
+      <title>{label}</title>
       <rect
         width={width}
         height={height}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.css b/src/devtools/views/Profiler/CommitFlamegraph.css
index e69de29bb2d1..bc441e485e1f 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.css
+++ b/src/devtools/views/Profiler/CommitFlamegraph.css
@@ -0,0 +1,5 @@
+.Container {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 7e5c533ce37a..75967d4b5938 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -1,16 +1,64 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
+import NoCommitData from './NoCommitData';
+import CommitFlamegraphListItem from './CommitFlamegraphListItem';
+import { barHeight } from './constants';
+import { scale } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './CommitFlamegraph.css';
 
-export default function CommitFlamegraph(_: {||}) {
-  const { rendererID, rootID, selectedCommitIndex } = useContext(
-    ProfilerContext
+import type { ChartData, ChartNode } from './FlamegraphChartBuilder';
+
+export type ItemData = {|
+  chartData: ChartData,
+  scaleX: (value: number, fallbackValue: number) => number,
+  selectedChartNode: ChartNode,
+  selectedChartNodeIndex: number,
+  selectFiber: (id: number | null) => void,
+  width: number,
+|};
+
+export default function CommitFlamegraphAutoSizer(_: {||}) {
+  const { selectFiber } = useContext(ProfilerContext);
+  const deselectCurrentFiber = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(null);
+    },
+    [selectFiber]
   );
 
+  return (
+    <div className={styles.Container} onClick={deselectCurrentFiber}>
+      <AutoSizer>
+        {({ height, width }) => (
+          <CommitFlamegraph height={height} width={width} />
+        )}
+      </AutoSizer>
+    </div>
+  );
+}
+
+function CommitFlamegraph({
+  height,
+  width,
+}: {|
+  height: number,
+  width: number,
+|}) {
+  const {
+    rendererID,
+    rootID,
+    selectedCommitIndex,
+    selectFiber,
+    selectedFiberID,
+  } = useContext(ProfilerContext);
+
   const { profilingCache } = useContext(StoreContext);
 
   const profilingSummary = profilingCache.ProfilingSummary.read({
@@ -31,5 +79,58 @@ export default function CommitFlamegraph(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
-  return 'Coming soon: Flamegraph';
+  const chartData = profilingCache.getFlamegraphChartData({
+    commitDetails,
+    commitIndex: ((selectedCommitIndex: any): number),
+    commitTree,
+    rootID: ((rootID: any): number),
+  });
+
+  const selectedChartNodeIndex = useMemo(
+    () =>
+      selectedFiberID === null
+        ? 0
+        : ((chartData.idToDepthMap.get(selectedFiberID): any): number) - 1,
+    [chartData, selectedFiberID]
+  );
+
+  const selectedChartNode = useMemo(() => {
+    if (selectedFiberID === null) {
+      return chartData.rows[0][0];
+    }
+    return ((chartData.rows[selectedChartNodeIndex].find(
+      chartNode => chartNode.id === selectedFiberID
+    ): any): ChartNode);
+  }, [chartData, selectedFiberID, selectedChartNodeIndex]);
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      scaleX: scale(0, selectedChartNode.treeBaseDuration, 0, width),
+      selectedChartNode,
+      selectedChartNodeIndex,
+      selectFiber,
+      width,
+    }),
+    [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]
+  );
+
+  // If a commit contains no fibers with an actualDuration > 0,
+  // Display a fallback message.
+  if (chartData.depth === 0) {
+    return <NoCommitData />;
+  }
+
+  return (
+    <FixedSizeList
+      height={height}
+      innerElementType="svg"
+      itemCount={chartData.depth}
+      itemData={itemData}
+      itemSize={barHeight}
+      width={width}
+    >
+      {CommitFlamegraphListItem}
+    </FixedSizeList>
+  );
 }
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
new file mode 100644
index 000000000000..7769381dfabd
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -0,0 +1,102 @@
+// @flow
+
+import React, { Fragment, useCallback } from 'react';
+import { barHeight, barWidthThreshold } from './constants';
+import { getGradientColor } from './utils';
+import ChartNode from './ChartNode';
+
+import type { ItemData } from './CommitFlamegraph';
+
+export default function CommitFlamegraphListItem({
+  data,
+  index,
+  style,
+}: {
+  data: ItemData,
+  index: number,
+  style: Object,
+}) {
+  const {
+    chartData,
+    scaleX,
+    selectedChartNode,
+    selectedChartNodeIndex,
+    selectFiber,
+    width,
+  } = data;
+  const { maxSelfDuration, rows } = chartData;
+
+  const handleClick = useCallback(
+    (event: MouseEvent, id: number) => {
+      event.stopPropagation();
+      selectFiber(id);
+    },
+    [selectFiber]
+  );
+
+  // List items are absolutely positioned using the CSS "top" attribute.
+  // The "left" value will always be 0.
+  // Since height is fixed, and width is based on the node's duration,
+  // We can ignore those values as well.
+  const top = parseInt(style.top, 10);
+
+  const row = rows[index];
+
+  let selectedNodeOffset = scaleX(selectedChartNode.offset, width);
+
+  return (
+    <Fragment>
+      {row.map(chartNode => {
+        const {
+          actualDuration,
+          didRender,
+          id,
+          name,
+          offset,
+          selfDuration,
+          treeBaseDuration,
+        } = chartNode;
+
+        const nodeOffset = scaleX(offset, width);
+        const nodeWidth = scaleX(treeBaseDuration, width);
+
+        // Filter out nodes that are too small to see or click.
+        // This also helps render large trees faster.
+        if (nodeWidth < barWidthThreshold) {
+          return null;
+        }
+
+        // Filter out nodes that are outside of the horizontal window.
+        if (
+          nodeOffset + nodeWidth < selectedNodeOffset ||
+          nodeOffset > selectedNodeOffset + width
+        ) {
+          return null;
+        }
+
+        let color = 'var(--color-commit-did-not-render)';
+        let label = name;
+        if (didRender) {
+          color = getGradientColor(selfDuration / maxSelfDuration);
+          label = `${name} (${selfDuration.toFixed(
+            1
+          )}ms of ${actualDuration.toFixed(1)}ms)`;
+        }
+
+        return (
+          <ChartNode
+            color={color}
+            height={barHeight}
+            isDimmed={index < selectedChartNodeIndex}
+            key={id}
+            label={label}
+            onClick={event => handleClick(event, id)}
+            width={nodeWidth}
+            x={nodeOffset - selectedNodeOffset}
+            y={top}
+          />
+        );
+      })}
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
index d47ff5059a46..4ed5500aaf70 100644
--- a/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -42,7 +42,6 @@ export default function CommitRankedListItem({
       key={node.id}
       label={node.label}
       onClick={handleClick}
-      title={node.title}
       width={Math.max(minBarWidth, scaleX(node.value, width))}
       x={0}
       y={top}
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 24b92d665ad7..4a9dbc5f8043 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -264,7 +264,7 @@ function updateTree(
         id = operations[i + 1];
 
         node = ((nodes.get(id): any): Node);
-        node.treeBaseDuration = operations[i + 2];
+        node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
 
         debug(
           'Update',
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
new file mode 100644
index 000000000000..347fa113b34f
--- /dev/null
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -0,0 +1,112 @@
+// @flow
+
+import { calculateSelfDuration } from './utils';
+
+import type { CommitDetails, CommitTree, Node } from './types';
+
+export type ChartNode = {|
+  actualDuration: number,
+  didRender: boolean,
+  id: number,
+  label: string,
+  name: string,
+  offset: number,
+  selfDuration: number,
+  treeBaseDuration: number,
+|};
+
+export type ChartData = {|
+  depth: number,
+  idToDepthMap: Map<number, number>,
+  maxSelfDuration: number,
+  rows: Array<Array<ChartNode>>,
+|};
+
+const cachedChartData: Map<string, ChartData> = new Map();
+
+export function getChartData({
+  commitDetails,
+  commitIndex,
+  commitTree,
+  rootID,
+}: {|
+  commitDetails: CommitDetails,
+  commitIndex: number,
+  commitTree: CommitTree,
+  rootID: number,
+|}): ChartData {
+  const key = `${rootID}-${commitIndex}`;
+
+  if (cachedChartData.has(key)) {
+    return ((cachedChartData.get(key): any): ChartData);
+  }
+
+  const { nodes } = commitTree;
+  const { actualDurations } = commitDetails;
+
+  const idToDepthMap: Map<number, number> = new Map();
+  const rows: Array<Array<ChartNode>> = [];
+
+  let maxDepth = 0;
+  let maxSelfDuration = 0;
+
+  // Generate flame graph structure using tree base durations.
+  const walkTree = (
+    id: number,
+    parentOffset: number = 0,
+    currentDepth: number = 1
+  ) => {
+    idToDepthMap.set(id, currentDepth);
+
+    const node = ((nodes.get(id): any): Node);
+    const name = node.displayName || 'Unknown';
+
+    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+
+    maxDepth = Math.max(maxDepth, currentDepth);
+    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
+
+    const chartNode: ChartNode = {
+      actualDuration: actualDurations.get(id) || 0,
+      didRender: actualDurations.has(id),
+      id,
+      label: `${name} (${selfDuration.toFixed(1)}ms)`,
+      name,
+      offset: parentOffset,
+      selfDuration,
+      treeBaseDuration: node.treeBaseDuration,
+    };
+
+    if (currentDepth > rows.length) {
+      rows.push([chartNode]);
+    } else {
+      rows[currentDepth - 1].push(chartNode);
+    }
+
+    node.children.forEach(childID => {
+      const childChartNode = walkTree(childID, parentOffset, currentDepth + 1);
+      parentOffset += childChartNode.treeBaseDuration;
+    });
+
+    return chartNode;
+  };
+
+  // Skip over the root; we don't want to show it in the flamegraph.
+  const root = ((nodes.get(rootID): any): Node);
+  walkTree(root.children[0]);
+
+  const chartData = {
+    depth: maxDepth,
+    idToDepthMap,
+    maxSelfDuration,
+    rows,
+  };
+
+  cachedChartData.set(key, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 0b3115b0238c..bf673f05d61a 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -8,7 +8,6 @@ export type ChartNode = {|
   id: number,
   label: string,
   name: string,
-  title: string,
   value: number,
 |};
 
@@ -58,7 +57,6 @@ export function getChartData({
       id,
       label,
       name,
-      title: label,
       value: selfDuration,
     });
   });
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index 61162f61c513..2a8ece16fc00 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,6 +1,7 @@
 // @flow
 
 export const barHeight = 20;
+export const barWidthThreshold = 2;
 export const maxBarWidth = 30;
 export const minBarHeight = 5;
 export const minBarWidth = 5;

From d685efd72f4f769c1bef63b77f31f12015c8d762 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Mar 2019 10:25:40 -0700
Subject: [PATCH 147/814] Fixed mutation bug in CommitTreeBuilder

---
 .../views/Profiler/CommitTreeBuilder.js        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 4a9dbc5f8043..95e5533c8e3d 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -152,8 +152,16 @@ function updateTree(
   commitTree: CommitTree,
   operations: Uint32Array
 ): CommitTree {
+  // Clone the original tree so edits don't affect it.
   const nodes = new Map(commitTree.nodes);
 
+  // Clone nodes before mutating them so edits don't affect them.
+  const getClonedNode = (id: number): Node => {
+    const clonedNode = ((Object.assign({}, nodes.get(id)): any): Node);
+    nodes.set(id, clonedNode);
+    return clonedNode;
+  };
+
   let i = 2;
   while (i < operations.length) {
     let id: number = ((null: any): number);
@@ -202,7 +210,7 @@ function updateTree(
             // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
             // Maybe in the future we'll revisit this.
           } else {
-            parentNode = ((nodes.get(parentID): any): Node);
+            parentNode = getClonedNode(parentID);
             parentNode.children = parentNode.children.concat(id);
 
             debug(
@@ -228,12 +236,12 @@ function updateTree(
 
         i = i + 2;
 
-        node = ((nodes.get(id): any): Node);
+        node = getClonedNode(id);
         parentID = node.parentID;
 
         nodes.delete(id);
 
-        parentNode = ((nodes.get(parentID): any): Node);
+        parentNode = getClonedNode(parentID);
         if (parentNode == null) {
           // No-op
         } else {
@@ -256,14 +264,14 @@ function updateTree(
 
         debug('Re-order', `fiber ${id} children ${children.join(',')}`);
 
-        node = ((nodes.get(id): any): Node);
+        node = getClonedNode(id);
         node.children = Array.from(children);
 
         break;
       case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
         id = operations[i + 1];
 
-        node = ((nodes.get(id): any): Node);
+        node = getClonedNode(id);
         node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
 
         debug(

From d3ee02cd35b73c09ab9c94ea87163e342820a699 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Mar 2019 10:58:20 -0700
Subject: [PATCH 148/814] Added "Profiler" tab

---
 shells/browser/chrome/manifest.json          |  1 +
 shells/browser/firefox/manifest.json         |  1 +
 shells/browser/shared/build.js               |  1 +
 shells/browser/shared/profiler.html          | 32 ++++++++++++++++++++
 shells/browser/shared/src/main.js            | 20 ++++++++++++
 shells/browser/shared/src/panels/profiler.js |  3 ++
 shells/browser/shared/webpack.config.js      |  1 +
 7 files changed, 59 insertions(+)
 create mode 100644 shells/browser/shared/profiler.html
 create mode 100644 shells/browser/shared/src/panels/profiler.js

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 3b3cec6d91df..ccbf29aa3c6c 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -30,6 +30,7 @@
   "web_accessible_resources": [
     "elements.html",
     "main.html",
+    "profiler.html",
     "settings.html",
     "build/backend.js"
   ],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 2829d100e62a..a1653d50051f 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -36,6 +36,7 @@
   "web_accessible_resources": [
     "elements.html",
     "main.html",
+    "profiler.html",
     "settings.html",
     "build/backend.js"
   ],
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 393319831c5a..3923c1f128d2 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -12,6 +12,7 @@ const STATIC_FILES = [
   'popups',
   'elements.html',
   'main.html',
+  'profiler.html',
   'settings.html',
 ];
 
diff --git a/shells/browser/shared/profiler.html b/shells/browser/shared/profiler.html
new file mode 100644
index 000000000000..0281d9d2cc22
--- /dev/null
+++ b/shells/browser/shared/profiler.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html style="display: flex">
+    <head>
+        <meta charset="utf8">
+        <style>
+            html {
+                display: flex;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                flex: 1;
+                display: flex;
+            }
+            #container {
+                display: flex;
+                flex: 1;
+                width: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">Unable to find React on the page.</div>
+        <script src="./build/profiler.js"></script>
+    </body>
+</html>
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index c300e2b126d0..9183a0c4ce6d 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -25,6 +25,7 @@ function createPanelIfReactLoaded() {
       let bridge = null;
       let store = null;
       let elementsPanel = null;
+      let profilerPanel = null;
       let settingsPanel = null;
 
       function initBridgeAndStore() {
@@ -56,6 +57,9 @@ function createPanelIfReactLoaded() {
         if (elementsPanel !== null) {
           elementsPanel.injectBridgeAndStore(bridge, store);
         }
+        if (profilerPanel !== null) {
+          profilerPanel.injectBridgeAndStore(bridge, store);
+        }
         if (settingsPanel !== null) {
           settingsPanel.injectBridgeAndStore(bridge, store);
         }
@@ -83,6 +87,22 @@ function createPanelIfReactLoaded() {
         }
       );
 
+      // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
+      chrome.devtools.panels.create(
+        '⚛ Profiler',
+        '',
+        'profiler.html',
+        panel => {
+          panel.onShown.addListener(panel => {
+            if (settingsPanel === null) {
+              panel.injectBridgeAndStore(bridge, store);
+            }
+
+            profilerPanel = panel;
+          });
+        }
+      );
+
       chrome.devtools.panels.create(
         '⚛ Settings',
         '',
diff --git a/shells/browser/shared/src/panels/profiler.js b/shells/browser/shared/src/panels/profiler.js
new file mode 100644
index 000000000000..23f028455b7e
--- /dev/null
+++ b/shells/browser/shared/src/panels/profiler.js
@@ -0,0 +1,3 @@
+import { createPanel } from './utils';
+
+createPanel('profiler');
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 0a304f4a64e5..e95c5cf418ee 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -17,6 +17,7 @@ module.exports = {
     inject: './src/GlobalHook.js',
     main: './src/main.js',
     elements: './src/panels/elements.js',
+    profiler: './src/panels/profiler.js',
     settings: './src/panels/settings.js',
   },
   output: {

From f3f4643a3af686b1e4d8711df17f6465a855925c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Mar 2019 13:52:37 -0700
Subject: [PATCH 149/814] Experimenting with portals

---
 shells/browser/chrome/manifest.json           |   8 +-
 shells/browser/firefox/manifest.json          |   8 +-
 shells/browser/shared/build.js                |   9 +-
 .../shared/{elements.html => panel.html}      |   2 +-
 shells/browser/shared/profiler.html           |  32 -----
 shells/browser/shared/settings.html           |  32 -----
 shells/browser/shared/src/main.js             | 127 +++++++++++-------
 shells/browser/shared/src/panel.js            |  20 +++
 shells/browser/shared/src/panels/elements.js  |   3 -
 shells/browser/shared/src/panels/profiler.js  |   3 -
 shells/browser/shared/src/panels/settings.js  |   3 -
 shells/browser/shared/src/panels/utils.js     |  72 ----------
 shells/browser/shared/src/utils.js            |  21 +++
 shells/browser/shared/webpack.config.js       |   4 +-
 src/devtools/views/DevTools.js                |  15 ++-
 15 files changed, 136 insertions(+), 223 deletions(-)
 rename shells/browser/shared/{elements.html => panel.html} (93%)
 delete mode 100644 shells/browser/shared/profiler.html
 delete mode 100644 shells/browser/shared/settings.html
 create mode 100644 shells/browser/shared/src/panel.js
 delete mode 100644 shells/browser/shared/src/panels/elements.js
 delete mode 100644 shells/browser/shared/src/panels/profiler.js
 delete mode 100644 shells/browser/shared/src/panels/settings.js
 delete mode 100644 shells/browser/shared/src/panels/utils.js

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index ccbf29aa3c6c..c22e4b38490c 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -27,13 +27,7 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": [
-    "elements.html",
-    "main.html",
-    "profiler.html",
-    "settings.html",
-    "build/backend.js"
-  ],
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index a1653d50051f..e0015a59ff7a 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -33,13 +33,7 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": [
-    "elements.html",
-    "main.html",
-    "profiler.html",
-    "settings.html",
-    "build/backend.js"
-  ],
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 3923c1f128d2..846f73967094 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -7,14 +7,7 @@ const { join } = require('path');
 
 // These files are copied along with Webpack-bundled files
 // to produce the final web extension
-const STATIC_FILES = [
-  'icons',
-  'popups',
-  'elements.html',
-  'main.html',
-  'profiler.html',
-  'settings.html',
-];
+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
 
 const preProcess = async (destinationPath, tempPath) => {
   await remove(destinationPath); // Clean up from previously completed builds
diff --git a/shells/browser/shared/elements.html b/shells/browser/shared/panel.html
similarity index 93%
rename from shells/browser/shared/elements.html
rename to shells/browser/shared/panel.html
index bbaa81a0f2f3..60fd1bdf13ff 100644
--- a/shells/browser/shared/elements.html
+++ b/shells/browser/shared/panel.html
@@ -27,6 +27,6 @@
     <body>
         <!-- main react mount point -->
         <div id="container">Unable to find React on the page.</div>
-        <script src="./build/elements.js"></script>
+        <script src="./build/panel.js"></script>
     </body>
 </html>
diff --git a/shells/browser/shared/profiler.html b/shells/browser/shared/profiler.html
deleted file mode 100644
index 0281d9d2cc22..000000000000
--- a/shells/browser/shared/profiler.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!doctype html>
-<html style="display: flex">
-    <head>
-        <meta charset="utf8">
-        <style>
-            html {
-                display: flex;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                flex: 1;
-                display: flex;
-            }
-            #container {
-                display: flex;
-                flex: 1;
-                width: 100%;
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <!-- main react mount point -->
-        <div id="container">Unable to find React on the page.</div>
-        <script src="./build/profiler.js"></script>
-    </body>
-</html>
diff --git a/shells/browser/shared/settings.html b/shells/browser/shared/settings.html
deleted file mode 100644
index 16beaccceaca..000000000000
--- a/shells/browser/shared/settings.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!doctype html>
-<html style="display: flex">
-    <head>
-        <meta charset="utf8">
-        <style>
-            html {
-                display: flex;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                flex: 1;
-                display: flex;
-            }
-            #container {
-                display: flex;
-                flex: 1;
-                width: 100%;
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <!-- main react mount point -->
-        <div id="container">Unable to find React on the page.</div>
-        <script src="./build/settings.js"></script>
-    </body>
-</html>
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 9183a0c4ce6d..d09dddf1bd98 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -1,8 +1,16 @@
 /* global chrome */
 
+import { createElement } from 'react';
+import { unstable_createRoot as createRoot } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/Store';
 import inject from './inject';
+import {
+  createViewElementSource,
+  getBrowserName,
+  getBrowserTheme,
+} from './utils';
+import DevTools from 'src/devtools/views/DevTools';
 
 let panelCreated = false;
 
@@ -22,6 +30,7 @@ function createPanelIfReactLoaded() {
 
       clearInterval(loadCheckInterval);
 
+      let renderRootToPortal = null;
       let bridge = null;
       let store = null;
       let elementsPanel = null;
@@ -54,69 +63,85 @@ function createPanelIfReactLoaded() {
         // Otherwise the Store may miss important initial tree op codes.
         inject(chrome.runtime.getURL('build/backend.js'));
 
+        const viewElementSource = createViewElementSource(bridge, store);
+
+        const container = document.createElement('div');
+        const root = createRoot(container);
+
+        renderRootToPortal = ({ overrideTab, portalContainer }) => {
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserName: getBrowserName(),
+              browserTheme: getBrowserTheme(),
+              overrideTab,
+              portalContainer,
+              showTabBar: false,
+              store,
+              viewElementSource,
+            })
+          );
+
+          const oldLinkTags = document.getElementsByTagName('link');
+          const newLinkTags = [];
+          for (let oldLinkTag of oldLinkTags) {
+            if (oldLinkTag.rel === 'stylesheet') {
+              const newLinkTag = document.createElement('link');
+              for (let attribute of oldLinkTag.attributes) {
+                newLinkTag.setAttribute(
+                  attribute.nodeName,
+                  attribute.nodeValue
+                );
+              }
+              newLinkTags.push(newLinkTag);
+            }
+          }
+
+          return newLinkTags;
+        };
+
         if (elementsPanel !== null) {
-          elementsPanel.injectBridgeAndStore(bridge, store);
-        }
-        if (profilerPanel !== null) {
-          profilerPanel.injectBridgeAndStore(bridge, store);
-        }
-        if (settingsPanel !== null) {
-          settingsPanel.injectBridgeAndStore(bridge, store);
+          elementsPanel.render(renderRootToPortal, 'elements');
         }
       }
 
       initBridgeAndStore();
 
-      chrome.devtools.panels.create(
-        '⚛ Elements',
-        '',
-        'elements.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (elementsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
-            }
+      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          elementsPanel = panel;
 
-            elementsPanel = panel;
+          if (renderRootToPortal !== null) {
+            elementsPanel.render(renderRootToPortal, 'elements');
+          }
 
-            // TODO: When the user switches to the panel, check for an Elements tab selection.
-          });
-          panel.onHidden.addListener(() => {
-            // TODO: Stop highlighting and stuff.
-          });
-        }
-      );
+          // TODO: When the user switches to the panel, check for an Elements tab selection.
+        });
+        panel.onHidden.addListener(() => {
+          // TODO: Stop highlighting and stuff.
+        });
+      });
 
       // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
-      chrome.devtools.panels.create(
-        '⚛ Profiler',
-        '',
-        'profiler.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (settingsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
-            }
+      chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          profilerPanel = panel;
 
-            profilerPanel = panel;
-          });
-        }
-      );
-
-      chrome.devtools.panels.create(
-        '⚛ Settings',
-        '',
-        'settings.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (settingsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
-            }
+          if (renderRootToPortal !== null) {
+            profilerPanel.render(renderRootToPortal, 'profiler');
+          }
+        });
+      });
 
-            settingsPanel = panel;
-          });
-        }
-      );
+      chrome.devtools.panels.create('⚛ Settings', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          settingsPanel = panel;
+
+          if (renderRootToPortal !== null) {
+            settingsPanel.render(renderRootToPortal, 'settings');
+          }
+        });
+      });
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
new file mode 100644
index 000000000000..b7413918f5c2
--- /dev/null
+++ b/shells/browser/shared/src/panel.js
@@ -0,0 +1,20 @@
+const container = document.getElementById('container');
+
+let hasInjectedStyles = false;
+
+window.render = (renderRootToPortal, tab) => {
+  container.innerHTML = '';
+
+  const linkTags = renderRootToPortal({
+    overrideTab: tab,
+    portalContainer: container,
+  });
+
+  if (!hasInjectedStyles) {
+    hasInjectedStyles = true;
+
+    for (let linkTag of linkTags) {
+      document.head.appendChild(linkTag);
+    }
+  }
+};
diff --git a/shells/browser/shared/src/panels/elements.js b/shells/browser/shared/src/panels/elements.js
deleted file mode 100644
index ef7f5e80df61..000000000000
--- a/shells/browser/shared/src/panels/elements.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createPanel } from './utils';
-
-createPanel('elements');
diff --git a/shells/browser/shared/src/panels/profiler.js b/shells/browser/shared/src/panels/profiler.js
deleted file mode 100644
index 23f028455b7e..000000000000
--- a/shells/browser/shared/src/panels/profiler.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createPanel } from './utils';
-
-createPanel('profiler');
diff --git a/shells/browser/shared/src/panels/settings.js b/shells/browser/shared/src/panels/settings.js
deleted file mode 100644
index a8dd78b0504c..000000000000
--- a/shells/browser/shared/src/panels/settings.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createPanel } from './utils';
-
-createPanel('settings');
diff --git a/shells/browser/shared/src/panels/utils.js b/shells/browser/shared/src/panels/utils.js
deleted file mode 100644
index 1f807fc922f1..000000000000
--- a/shells/browser/shared/src/panels/utils.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/* global chrome */
-
-import { createElement } from 'react';
-import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
-import DevTools from 'src/devtools/views/DevTools';
-import { getBrowserName, getBrowserTheme } from '../utils';
-
-export function createPanel(defaultTab) {
-  let injectedBridge = null;
-  let injectedStore = null;
-  let root = null;
-
-  // All DevTools panel share a single Bridge and Store instance.
-  // The main script will inject those shared instances using this method.
-  window.injectBridgeAndStore = (bridge, store) => {
-    injectedBridge = bridge;
-    injectedStore = store;
-
-    if (root === null) {
-      injectAndInit();
-    } else {
-      // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-      // We can revisit this in the future as a small optimization.
-      flushSync(() => root.unmount(injectAndInit));
-    }
-  };
-
-  function viewElementSource(id) {
-    if (injectedBridge == null || injectedStore == null) {
-      return;
-    }
-
-    const rendererID = injectedStore.getRendererIDForElement(id);
-    if (rendererID != null) {
-      // Ask the renderer interface to determine the component function,
-      // and store it as a global variable on the window
-      injectedBridge.send('viewElementSource', { id, rendererID });
-
-      setTimeout(() => {
-        // Ask Chrome to display the location of the component function,
-        // assuming the renderer found one.
-        chrome.devtools.inspectedWindow.eval(`
-          if (window.$type != null) {
-            inspect(window.$type);
-          }
-        `);
-      }, 100);
-    }
-  }
-
-  function injectAndInit() {
-    const container = ((document.getElementById(
-      'container'
-    ): any): HTMLElement);
-
-    // Clear the "React not found" initial message before rendering.
-    container.innerHTML = '';
-
-    root = createRoot(container);
-    root.render(
-      createElement(DevTools, {
-        bridge: injectedBridge,
-        browserName: getBrowserName(),
-        browserTheme: getBrowserTheme(),
-        defaultTab,
-        showTabBar: false,
-        store: injectedStore,
-        viewElementSource,
-      })
-    );
-  }
-}
diff --git a/shells/browser/shared/src/utils.js b/shells/browser/shared/src/utils.js
index 7f4c2eaa068b..0446ff9daf9a 100644
--- a/shells/browser/shared/src/utils.js
+++ b/shells/browser/shared/src/utils.js
@@ -2,6 +2,27 @@
 
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
 
+export function createViewElementSource(bridge: Bridge, store: Store) {
+  return function viewElementSource(id) {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID != null) {
+      // Ask the renderer interface to determine the component function,
+      // and store it as a global variable on the window
+      bridge.send('viewElementSource', { id, rendererID });
+
+      setTimeout(() => {
+        // Ask Chrome to display the location of the component function,
+        // assuming the renderer found one.
+        chrome.devtools.inspectedWindow.eval(`
+          if (window.$type != null) {
+            inspect(window.$type);
+          }
+        `);
+      }, 100);
+    }
+  };
+}
+
 export function getBrowserName() {
   return IS_CHROME ? 'Chrome' : 'Firefox';
 }
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index e95c5cf418ee..44e3d5b5c28f 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -16,9 +16,7 @@ module.exports = {
     contentScript: './src/contentScript.js',
     inject: './src/GlobalHook.js',
     main: './src/main.js',
-    elements: './src/panels/elements.js',
-    profiler: './src/panels/profiler.js',
-    settings: './src/panels/settings.js',
+    panel: './src/panel.js',
   },
   output: {
     path: __dirname + '/build',
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 3473582f04cb..2db0e2dcfb3a 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Elements from './Elements/Elements';
@@ -27,6 +28,8 @@ export type Props = {|
   browserName: BrowserName,
   defaultTab?: TabID,
   browserTheme: BrowserTheme,
+  overrideTab?: TabID,
+  portalContainer?: Element,
   showTabBar?: boolean,
   store: Store,
   viewElementSource?: ?Function,
@@ -59,11 +62,17 @@ export default function DevTools({
   browserName,
   defaultTab = 'elements',
   browserTheme = 'light',
+  overrideTab,
+  portalContainer,
   showTabBar = false,
   store,
   viewElementSource = null,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
+  if (overrideTab != null && overrideTab !== tab) {
+    setTab(overrideTab);
+  }
+
   const [supportsProfiling, setSupportsProfiling] = useState(
     store.supportsProfiling
   );
@@ -100,7 +109,7 @@ export default function DevTools({
       break;
   }
 
-  return (
+  const children = (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
         <SettingsContextController browserTheme={browserTheme}>
@@ -135,4 +144,8 @@ export default function DevTools({
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
+
+  return portalContainer != null
+    ? createPortal(children, portalContainer)
+    : children;
 }

From 11573bf8d9d6346121492d97d2db8a443f4a22a3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 09:11:28 -0700
Subject: [PATCH 150/814] Refactored portaling and fixed disconnected CSS vars

---
 shells/browser/shared/src/main.js             |  73 ++++---
 shells/browser/shared/src/panel.js            |  13 +-
 src/devtools/views/DevTools.js                |  32 +--
 src/devtools/views/Elements/Elements.js       |  13 +-
 src/devtools/views/Profiler/Profiler.js       |  16 +-
 src/devtools/views/Settings/Settings.js       |  13 +-
 .../views/Settings/SettingsContext.js         | 190 ++++++++++++------
 7 files changed, 222 insertions(+), 128 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index d09dddf1bd98..63859497b1d0 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -30,12 +30,13 @@ function createPanelIfReactLoaded() {
 
       clearInterval(loadCheckInterval);
 
-      let renderRootToPortal = null;
       let bridge = null;
       let store = null;
-      let elementsPanel = null;
-      let profilerPanel = null;
-      let settingsPanel = null;
+      let elementsPortalContainer = null;
+      let profilerPortalContainer = null;
+      let settingsPortalContainer = null;
+      let cloneStyleTags = null;
+      let render = null;
 
       function initBridgeAndStore() {
         let hasPortBeenDisconnected = false;
@@ -68,51 +69,47 @@ function createPanelIfReactLoaded() {
         const container = document.createElement('div');
         const root = createRoot(container);
 
-        renderRootToPortal = ({ overrideTab, portalContainer }) => {
+        render = overrideTab => {
           root.render(
             createElement(DevTools, {
               bridge,
               browserName: getBrowserName(),
               browserTheme: getBrowserTheme(),
+              elementsPortalContainer,
               overrideTab,
-              portalContainer,
+              profilerPortalContainer,
+              settingsPortalContainer,
               showTabBar: false,
               store,
               viewElementSource,
             })
           );
+        };
+      }
 
-          const oldLinkTags = document.getElementsByTagName('link');
-          const newLinkTags = [];
-          for (let oldLinkTag of oldLinkTags) {
-            if (oldLinkTag.rel === 'stylesheet') {
-              const newLinkTag = document.createElement('link');
-              for (let attribute of oldLinkTag.attributes) {
-                newLinkTag.setAttribute(
-                  attribute.nodeName,
-                  attribute.nodeValue
-                );
-              }
-              newLinkTags.push(newLinkTag);
+      cloneStyleTags = () => {
+        const linkTags = [];
+        for (let linkTag of document.getElementsByTagName('link')) {
+          if (linkTag.rel === 'stylesheet') {
+            const newLinkTag = document.createElement('link');
+            for (let attribute of linkTag.attributes) {
+              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
             }
+            linkTags.push(newLinkTag);
           }
-
-          return newLinkTags;
-        };
-
-        if (elementsPanel !== null) {
-          elementsPanel.render(renderRootToPortal, 'elements');
         }
-      }
+        return linkTags;
+      };
 
       initBridgeAndStore();
 
       chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
-          elementsPanel = panel;
-
-          if (renderRootToPortal !== null) {
-            elementsPanel.render(renderRootToPortal, 'elements');
+          elementsPortalContainer = panel.container;
+          if (elementsPortalContainer != null) {
+            elementsPortalContainer.innerHTML = '';
+            render('elements');
+            panel.injectStyles(cloneStyleTags);
           }
 
           // TODO: When the user switches to the panel, check for an Elements tab selection.
@@ -125,20 +122,22 @@ function createPanelIfReactLoaded() {
       // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
       chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
-          profilerPanel = panel;
-
-          if (renderRootToPortal !== null) {
-            profilerPanel.render(renderRootToPortal, 'profiler');
+          profilerPortalContainer = panel.container;
+          if (profilerPortalContainer != null) {
+            profilerPortalContainer.innerHTML = '';
+            render('profiler');
+            panel.injectStyles(cloneStyleTags);
           }
         });
       });
 
       chrome.devtools.panels.create('⚛ Settings', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
-          settingsPanel = panel;
-
-          if (renderRootToPortal !== null) {
-            settingsPanel.render(renderRootToPortal, 'settings');
+          settingsPortalContainer = panel.container;
+          if (settingsPortalContainer != null) {
+            settingsPortalContainer.innerHTML = '';
+            render('settings');
+            panel.injectStyles(cloneStyleTags);
           }
         });
       });
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index b7413918f5c2..1ce574dfcf42 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -1,18 +1,13 @@
-const container = document.getElementById('container');
+window.container = document.getElementById('container');
 
 let hasInjectedStyles = false;
 
-window.render = (renderRootToPortal, tab) => {
-  container.innerHTML = '';
-
-  const linkTags = renderRootToPortal({
-    overrideTab: tab,
-    portalContainer: container,
-  });
-
+window.injectStyles = getLinkTags => {
   if (!hasInjectedStyles) {
     hasInjectedStyles = true;
 
+    const linkTags = getLinkTags();
+
     for (let linkTag of linkTags) {
       document.head.appendChild(linkTag);
     }
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 2db0e2dcfb3a..d80a0ecbe119 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Elements from './Elements/Elements';
@@ -26,10 +25,12 @@ export type TabID = 'elements' | 'profiler' | 'settings';
 export type Props = {|
   bridge: Bridge,
   browserName: BrowserName,
-  defaultTab?: TabID,
   browserTheme: BrowserTheme,
+  defaultTab?: TabID,
+  elementsPortalContainer?: Element,
   overrideTab?: TabID,
-  portalContainer?: Element,
+  profilerPortalContainer?: Element,
+  settingsPortalContainer?: Element,
   showTabBar?: boolean,
   store: Store,
   viewElementSource?: ?Function,
@@ -60,10 +61,12 @@ const tabsWithoutProfiler = [elementTab, settingsTab];
 export default function DevTools({
   bridge,
   browserName,
-  defaultTab = 'elements',
   browserTheme = 'light',
+  defaultTab = 'elements',
+  elementsPortalContainer,
   overrideTab,
-  portalContainer,
+  profilerPortalContainer,
+  settingsPortalContainer,
   showTabBar = false,
   store,
   viewElementSource = null,
@@ -98,21 +101,26 @@ export default function DevTools({
   let tabElement;
   switch (tab) {
     case 'profiler':
-      tabElement = <Profiler />;
+      tabElement = <Profiler portalContainer={profilerPortalContainer} />;
       break;
     case 'settings':
-      tabElement = <Settings />;
+      tabElement = <Settings portalContainer={settingsPortalContainer} />;
       break;
     case 'elements':
     default:
-      tabElement = <Elements />;
+      tabElement = <Elements portalContainer={elementsPortalContainer} />;
       break;
   }
 
-  const children = (
+  return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <SettingsContextController browserTheme={browserTheme}>
+        <SettingsContextController
+          browserTheme={browserTheme}
+          elementsPortalContainer={elementsPortalContainer}
+          profilerPortalContainer={profilerPortalContainer}
+          settingsPortalContainer={settingsPortalContainer}
+        >
           <TreeContextController viewElementSource={viewElementSource}>
             <ProfilerContextController>
               <div className={styles.DevTools}>
@@ -144,8 +152,4 @@ export default function DevTools({
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
-
-  return portalContainer != null
-    ? createPortal(children, portalContainer)
-    : children;
 }
diff --git a/src/devtools/views/Elements/Elements.js b/src/devtools/views/Elements/Elements.js
index cb401ddfdba9..596a5c754a4a 100644
--- a/src/devtools/views/Elements/Elements.js
+++ b/src/devtools/views/Elements/Elements.js
@@ -1,15 +1,18 @@
 // @flow
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import styles from './Elements.css';
 
-export type Props = {||};
+export type Props = {|
+  portalContainer?: Element,
+|};
 
-export default function Elements(_: Props) {
+export default function Elements({ portalContainer }: Props) {
   // TODO Flex wrappers below should be user resizable.
-  return (
+  const children = (
     <div className={styles.Elements}>
       <div className={styles.TreeWrapper}>
         <Tree />
@@ -19,4 +22,8 @@ export default function Elements(_: Props) {
       </div>
     </div>
   );
+
+  return portalContainer != null
+    ? createPortal(children, portalContainer)
+    : children;
 }
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index add792692297..e5c2db601a9e 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Suspense, useCallback, useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -13,21 +14,30 @@ import SnapshotSelector from './SnapshotSelector';
 
 import styles from './Profiler.css';
 
-export default function Profiler(_: {||}) {
+export type Props = {|
+  portalContainer?: Element,
+|};
+
+export default function Profiler({ portalContainer }: Props) {
   const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
     ProfilerContext
   );
 
+  let children = null;
   if (isProfiling || !rootHasProfilingData) {
-    return (
+    children = (
       <NonSuspendingProfiler
         hasProfilingData={hasProfilingData}
         isProfiling={isProfiling}
       />
     );
   } else {
-    return <SuspendingProfiler />;
+    children = <SuspendingProfiler />;
   }
+
+  return portalContainer != null
+    ? createPortal(children, portalContainer)
+    : children;
 }
 
 // This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 37e4dd9198bf..d3a99360a0b5 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,13 +1,16 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
+import { createPortal } from 'react-dom';
 import { SettingsContext } from './SettingsContext';
 
 import styles from './Settings.css';
 
-export type Props = {||};
+export type Props = {|
+  portalContainer?: Element,
+|};
 
-export default function Settings(_: Props) {
+export default function Settings({ portalContainer }: Props) {
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
     SettingsContext
   );
@@ -26,7 +29,7 @@ export default function Settings(_: Props) {
     [setTheme]
   );
 
-  return (
+  const children = (
     <div className={styles.Settings}>
       <div className={styles.Section}>
         <div className={styles.Header}>Theme</div>
@@ -90,4 +93,8 @@ export default function Settings(_: Props) {
       </div>
     </div>
   );
+
+  return portalContainer != null
+    ? createPortal(children, portalContainer)
+    : children;
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 0c5458cbade7..f04af61f3212 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -23,18 +23,58 @@ type Context = {|
 const SettingsContext = createContext<Context>(((null: any): Context));
 SettingsContext.displayName = 'SettingsContext';
 
+type DocumentElements = Array<HTMLElement>;
+
 type Props = {|
   browserTheme: BrowserTheme,
   children: React$Node,
+  elementsPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+  settingsPortalContainer?: Element,
 |};
 
-function SettingsContextController({ browserTheme, children }: Props) {
+function SettingsContextController({
+  browserTheme,
+  children,
+  elementsPortalContainer,
+  profilerPortalContainer,
+  settingsPortalContainer,
+}: Props) {
   const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
     'displayDensity',
     'compact'
   );
   const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
 
+  const documentElements = useMemo<DocumentElements>(() => {
+    const array: Array<HTMLElement> = [
+      ((document.documentElement: any): HTMLElement),
+    ];
+    if (elementsPortalContainer != null) {
+      array.push(
+        ((elementsPortalContainer.ownerDocument
+          .documentElement: any): HTMLElement)
+      );
+    }
+    if (profilerPortalContainer != null) {
+      array.push(
+        ((profilerPortalContainer.ownerDocument
+          .documentElement: any): HTMLElement)
+      );
+    }
+    if (settingsPortalContainer != null) {
+      array.push(
+        ((settingsPortalContainer.ownerDocument
+          .documentElement: any): HTMLElement)
+      );
+    }
+    return array;
+  }, [
+    elementsPortalContainer,
+    profilerPortalContainer,
+    settingsPortalContainer,
+  ]);
+
   const comfortableLineHeight = parseInt(
     getComputedStyle((document.body: any)).getPropertyValue(
       '--comfortable-line-height-data'
@@ -51,31 +91,31 @@ function SettingsContextController({ browserTheme, children }: Props) {
   useLayoutEffect(() => {
     switch (displayDensity) {
       case 'compact':
-        updateDisplayDensity('compact');
+        updateDisplayDensity('compact', documentElements);
         break;
       case 'comfortable':
-        updateDisplayDensity('comfortable');
+        updateDisplayDensity('comfortable', documentElements);
         break;
       default:
         throw Error(`Unsupported displayDensity value "${displayDensity}"`);
     }
-  }, [displayDensity]);
+  }, [displayDensity, documentElements]);
 
   useLayoutEffect(() => {
     switch (theme) {
       case 'light':
-        updateThemeVariables('light');
+        updateThemeVariables('light', documentElements);
         break;
       case 'dark':
-        updateThemeVariables('dark');
+        updateThemeVariables('dark', documentElements);
         break;
       case 'auto':
-        updateThemeVariables(browserTheme);
+        updateThemeVariables(browserTheme, documentElements);
         break;
       default:
         throw Error(`Unsupported theme value "${theme}"`);
     }
-  }, [browserTheme, theme]);
+  }, [browserTheme, theme, documentElements]);
 
   const value = useMemo(
     () => ({
@@ -105,63 +145,95 @@ function SettingsContextController({ browserTheme, children }: Props) {
   );
 }
 
-function setStyleVariable(name: string, value: string) {
-  (document.documentElement: any).style.setProperty(name, value);
+function setStyleVariable(
+  name: string,
+  value: string,
+  documentElements: DocumentElements
+) {
+  documentElements.forEach(documentElement =>
+    documentElement.style.setProperty(name, value)
+  );
 }
 
-function updateStyleHelper(themeKey: string, style: string) {
-  setStyleVariable(`--${style}`, `var(--${themeKey}-${style})`);
+function updateStyleHelper(
+  themeKey: string,
+  style: string,
+  documentElements: DocumentElements
+) {
+  setStyleVariable(
+    `--${style}`,
+    `var(--${themeKey}-${style})`,
+    documentElements
+  );
 }
 
-function updateDisplayDensity(displayDensity: DisplayDensity): void {
-  updateStyleHelper(displayDensity, 'font-size-monospace-normal');
-  updateStyleHelper(displayDensity, 'font-size-monospace-large');
-  updateStyleHelper(displayDensity, 'font-size-sans-normal');
-  updateStyleHelper(displayDensity, 'font-size-sans-large');
-  updateStyleHelper(displayDensity, 'line-height-data');
+function updateDisplayDensity(
+  displayDensity: DisplayDensity,
+  documentElements: DocumentElements
+): void {
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-normal',
+    documentElements
+  );
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-large',
+    documentElements
+  );
+  updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
+  updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
+  updateStyleHelper(displayDensity, 'line-height-data', documentElements);
 }
 
-function updateThemeVariables(theme: Theme): void {
-  updateStyleHelper(theme, 'color-attribute-name');
-  updateStyleHelper(theme, 'color-attribute-value');
-  updateStyleHelper(theme, 'color-attribute-editable-value');
-  updateStyleHelper(theme, 'color-background');
-  updateStyleHelper(theme, 'color-border');
-  updateStyleHelper(theme, 'color-button-background');
-  updateStyleHelper(theme, 'color-button-background-focus');
-  updateStyleHelper(theme, 'color-button-background-hover');
-  updateStyleHelper(theme, 'color-button');
-  updateStyleHelper(theme, 'color-button-disabled');
-  updateStyleHelper(theme, 'color-button-focus');
-  updateStyleHelper(theme, 'color-button-hover');
-  updateStyleHelper(theme, 'color-commit-did-not-render');
-  updateStyleHelper(theme, 'color-commit-gradient-0');
-  updateStyleHelper(theme, 'color-commit-gradient-1');
-  updateStyleHelper(theme, 'color-commit-gradient-2');
-  updateStyleHelper(theme, 'color-commit-gradient-3');
-  updateStyleHelper(theme, 'color-commit-gradient-4');
-  updateStyleHelper(theme, 'color-commit-gradient-5');
-  updateStyleHelper(theme, 'color-commit-gradient-6');
-  updateStyleHelper(theme, 'color-commit-gradient-7');
-  updateStyleHelper(theme, 'color-commit-gradient-8');
-  updateStyleHelper(theme, 'color-commit-gradient-9');
-  updateStyleHelper(theme, 'color-commit-gradient-text');
-  updateStyleHelper(theme, 'color-component-name');
-  updateStyleHelper(theme, 'color-component-name-inverted');
-  updateStyleHelper(theme, 'color-dim');
-  updateStyleHelper(theme, 'color-dimmer');
-  updateStyleHelper(theme, 'color-dimmest');
-  updateStyleHelper(theme, 'color-jsx-arrow-brackets');
-  updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
-  updateStyleHelper(theme, 'color-modal-background');
-  updateStyleHelper(theme, 'color-record-active');
-  updateStyleHelper(theme, 'color-record-hover');
-  updateStyleHelper(theme, 'color-record-inactive');
-  updateStyleHelper(theme, 'color-tree-node-selected');
-  updateStyleHelper(theme, 'color-tree-node-hover');
-  updateStyleHelper(theme, 'color-search-match');
-  updateStyleHelper(theme, 'color-search-match-current');
-  updateStyleHelper(theme, 'color-text-color');
+function updateThemeVariables(
+  theme: Theme,
+  documentElements: DocumentElements
+): void {
+  updateStyleHelper(theme, 'color-attribute-name', documentElements);
+  updateStyleHelper(theme, 'color-attribute-value', documentElements);
+  updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
+  updateStyleHelper(theme, 'color-background', documentElements);
+  updateStyleHelper(theme, 'color-border', documentElements);
+  updateStyleHelper(theme, 'color-button-background', documentElements);
+  updateStyleHelper(theme, 'color-button-background-focus', documentElements);
+  updateStyleHelper(theme, 'color-button-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-button', documentElements);
+  updateStyleHelper(theme, 'color-button-disabled', documentElements);
+  updateStyleHelper(theme, 'color-button-focus', documentElements);
+  updateStyleHelper(theme, 'color-button-hover', documentElements);
+  updateStyleHelper(theme, 'color-commit-did-not-render', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
+  updateStyleHelper(theme, 'color-component-name', documentElements);
+  updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
+  updateStyleHelper(theme, 'color-dim', documentElements);
+  updateStyleHelper(theme, 'color-dimmer', documentElements);
+  updateStyleHelper(theme, 'color-dimmest', documentElements);
+  updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-jsx-arrow-brackets-inverted',
+    documentElements
+  );
+  updateStyleHelper(theme, 'color-modal-background', documentElements);
+  updateStyleHelper(theme, 'color-record-active', documentElements);
+  updateStyleHelper(theme, 'color-record-hover', documentElements);
+  updateStyleHelper(theme, 'color-record-inactive', documentElements);
+  updateStyleHelper(theme, 'color-tree-node-selected', documentElements);
+  updateStyleHelper(theme, 'color-tree-node-hover', documentElements);
+  updateStyleHelper(theme, 'color-search-match', documentElements);
+  updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(theme, 'color-text-color', documentElements);
 }
 
 export { SettingsContext, SettingsContextController };

From 2664036dbe42a137ecf0a345a0c15ab068982151 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 09:18:22 -0700
Subject: [PATCH 151/814] Tweaked profiling did-not-render color to be dimmer

---
 src/devtools/views/root.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 65eb630d2422..a8d562ee1692 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -16,7 +16,7 @@
   --light-color-button-focus: #3578e5;
   --light-color-button-hover: #3578e5;
   --light-color-border: #eeeeee;
-  --light-color-commit-did-not-render: #777d88;
+  --light-color-commit-did-not-render: #cfd1d5;
   --light-color-commit-gradient-0: #37afa9;
   --light-color-commit-gradient-1: #63b19e;
   --light-color-commit-gradient-2: #80b393;
@@ -58,7 +58,7 @@
   --dark-color-button-focus: #a2e9fc;
   --dark-color-button-hover: #a2e9fc;
   --dark-color-border: #3d424a;
-  --dark-color-commit-did-not-render: #8f949d;
+  --dark-color-commit-did-not-render: #777d88;
   --dark-color-commit-gradient-0: #37afa9;
   --dark-color-commit-gradient-1: #63b19e;
   --dark-color-commit-gradient-2: #80b393;

From c9920f095457e39c4c8f060c5a6d14c7a8f0cd6f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 09:20:00 -0700
Subject: [PATCH 152/814] Added a few inline comments

---
 shells/browser/shared/src/main.js  | 2 ++
 shells/browser/shared/src/panel.js | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 63859497b1d0..bf6726141ea3 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -32,9 +32,11 @@ function createPanelIfReactLoaded() {
 
       let bridge = null;
       let store = null;
+
       let elementsPortalContainer = null;
       let profilerPortalContainer = null;
       let settingsPortalContainer = null;
+
       let cloneStyleTags = null;
       let render = null;
 
diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
index 1ce574dfcf42..f84ac11beb1e 100644
--- a/shells/browser/shared/src/panel.js
+++ b/shells/browser/shared/src/panel.js
@@ -1,7 +1,10 @@
+// Portal target container.
 window.container = document.getElementById('container');
 
 let hasInjectedStyles = false;
 
+// DevTools styles are injected into the top-level document head (where the main React app is rendered).
+// This method copies those styles to the child window where each panel (e.g. Elements, Profiler) is portaled.
 window.injectStyles = getLinkTags => {
   if (!hasInjectedStyles) {
     hasInjectedStyles = true;

From e728ebc7b9c38770761fbd5f791c9334518f0131 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 09:36:47 -0700
Subject: [PATCH 153/814] Unmount and remount when main URL changes to avoid
 staleness problems

---
 shells/browser/shared/src/main.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index bf6726141ea3..0a596e42caa2 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
 import { createElement } from 'react';
-import { unstable_createRoot as createRoot } from 'react-dom';
+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/Store';
 import inject from './inject';
@@ -38,7 +38,9 @@ function createPanelIfReactLoaded() {
       let settingsPortalContainer = null;
 
       let cloneStyleTags = null;
+      let mostRecentOverrideTab = null;
       let render = null;
+      let root = null;
 
       function initBridgeAndStore() {
         let hasPortBeenDisconnected = false;
@@ -68,10 +70,11 @@ function createPanelIfReactLoaded() {
 
         const viewElementSource = createViewElementSource(bridge, store);
 
-        const container = document.createElement('div');
-        const root = createRoot(container);
+        root = createRoot(document.createElement('div'));
+
+        render = (overrideTab = mostRecentOverrideTab) => {
+          mostRecentOverrideTab = overrideTab;
 
-        render = overrideTab => {
           root.render(
             createElement(DevTools, {
               bridge,
@@ -87,6 +90,8 @@ function createPanelIfReactLoaded() {
             })
           );
         };
+
+        render();
       }
 
       cloneStyleTags = () => {
@@ -150,7 +155,9 @@ function createPanelIfReactLoaded() {
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         bridge.send('shutdown');
 
-        initBridgeAndStore();
+        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+        // We can revisit this in the future as a small optimization.
+        flushSync(() => root.unmount(initBridgeAndStore));
       });
     }
   );

From 50b6b1d5f9e8a3284971ca0b464fb88ce3f925ba Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 09:57:08 -0700
Subject: [PATCH 154/814] Added some inline comments about portal props

---
 src/devtools/views/DevTools.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index d80a0ecbe119..4f839c368009 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -27,13 +27,22 @@ export type Props = {|
   browserName: BrowserName,
   browserTheme: BrowserTheme,
   defaultTab?: TabID,
-  elementsPortalContainer?: Element,
-  overrideTab?: TabID,
-  profilerPortalContainer?: Element,
-  settingsPortalContainer?: Element,
   showTabBar?: boolean,
   store: Store,
   viewElementSource?: ?Function,
+
+  // This property is used only by the web extension target.
+  // The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.
+  // This is done to save space within the app.
+  // Because of this, the extension needs to be able to change which tab is active/rendered.
+  overrideTab?: TabID,
+
+  // To avoid potential multi-root trickiness, the web extension uses portals to render tabs.
+  // The root <DevTools> app is rendered in the top-level extension window,
+  // but individual tabs (e.g. Elements, Profiling) can be rendered into portals within their browser panels.
+  elementsPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+  settingsPortalContainer?: Element,
 |};
 
 const elementTab = {

From be48150fc69a078e4b51cdaef635b6eacaa1b4db Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 10:09:09 -0700
Subject: [PATCH 155/814] innerTagName -> innerElementType

---
 src/devtools/views/Profiler/CommitRanked.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 1fb4ded3ee41..acdd0cb8841e 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -104,7 +104,7 @@ function CommitRanked({ height, width }: {| height: number, width: number |}) {
   return (
     <FixedSizeList
       height={height}
-      innerTagName="svg"
+      innerElementType="svg"
       itemCount={chartData.nodes.length}
       itemData={itemData}
       itemSize={barHeight}

From 5f154b376e9658a6b7b7477dead472063be1541e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 13:37:37 -0700
Subject: [PATCH 156/814] Added profiling-not-supported message for browser
 extension

---
 src/devtools/views/Button.css               |  3 +-
 src/devtools/views/DevTools.js              |  7 +++-
 src/devtools/views/Profiler/Profiler.js     | 38 +++++++++++++++++++--
 src/devtools/views/Profiler/RecordToggle.js |  7 ++--
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
index 31291d7f3bde..a37af0ee30cc 100644
--- a/src/devtools/views/Button.css
+++ b/src/devtools/views/Button.css
@@ -22,7 +22,8 @@
   outline: none;
   box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
 }
-.Button:disabled {
+.Button:disabled,
+.Button:disabled:active {
   background: var(--color-button-background);
   color: var(--color-button-disabled);
   cursor: default;
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 4f839c368009..56eee3b56edc 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -110,7 +110,12 @@ export default function DevTools({
   let tabElement;
   switch (tab) {
     case 'profiler':
-      tabElement = <Profiler portalContainer={profilerPortalContainer} />;
+      tabElement = (
+        <Profiler
+          portalContainer={profilerPortalContainer}
+          supportsProfiling={supportsProfiling}
+        />
+      );
       break;
     case 'settings':
       tabElement = <Settings portalContainer={settingsPortalContainer} />;
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index e5c2db601a9e..4199efe1c25d 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -16,9 +16,13 @@ import styles from './Profiler.css';
 
 export type Props = {|
   portalContainer?: Element,
+  supportsProfiling: boolean,
 |};
 
-export default function Profiler({ portalContainer }: Props) {
+export default function Profiler({
+  portalContainer,
+  supportsProfiling,
+}: Props) {
   const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
     ProfilerContext
   );
@@ -29,6 +33,7 @@ export default function Profiler({ portalContainer }: Props) {
       <NonSuspendingProfiler
         hasProfilingData={hasProfilingData}
         isProfiling={isProfiling}
+        supportsProfiling={supportsProfiling}
       />
     );
   } else {
@@ -47,12 +52,16 @@ export default function Profiler({ portalContainer }: Props) {
 function NonSuspendingProfiler({
   hasProfilingData,
   isProfiling,
+  supportsProfiling,
 }: {|
   hasProfilingData: boolean,
   isProfiling: boolean,
+  supportsProfiling: boolean,
 |}) {
   let view = null;
-  if (isProfiling) {
+  if (!supportsProfiling) {
+    view = <ProfilingNotSupported />;
+  } else if (isProfiling) {
     view = <RecortdingInProgress />;
   } else if (!hasProfilingData) {
     view = <NoProfilingData />;
@@ -64,7 +73,7 @@ function NonSuspendingProfiler({
     <div className={styles.Profiler}>
       <div className={styles.LeftColumn}>
         <div className={styles.Toolbar}>
-          <RecordToggle />
+          <RecordToggle disabled={!supportsProfiling} />
           <Button disabled title="Reload and start profiling">
             {/* TODO (profiling) Wire up reload button */}
             <ButtonIcon type="reload" />
@@ -200,6 +209,29 @@ const NoProfilingDataForRoot = () => (
   </div>
 );
 
+const ProfilingNotSupported = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Profiling not supported.</div>
+    <div className={styles.Column}>
+      <p>
+        Profiling support requires either a development or production-profiling
+        build of React v16.5+.
+      </p>
+      <p>
+        Learn more at{' '}
+        <a
+          href="https://fb.me/react-profiling"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          fb.me/react-profiling
+        </a>
+        .
+      </p>
+    </div>
+  </div>
+);
+
 const RecortdingInProgress = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>Profiling is in progress...</div>
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
index 4d1bb591d92f..94074002ca1d 100644
--- a/src/devtools/views/Profiler/RecordToggle.js
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -7,9 +7,11 @@ import { ProfilerContext } from './ProfilerContext';
 
 import styles from './RecordToggle.css';
 
-export type Props = {||};
+export type Props = {|
+  disabled?: boolean,
+|};
 
-export default function RecordToggle(_: Props) {
+export default function RecordToggle({ disabled }: Props) {
   const { isProfiling, startProfiling, stopProfiling } = useContext(
     ProfilerContext
   );
@@ -19,6 +21,7 @@ export default function RecordToggle(_: Props) {
       className={
         isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
       }
+      disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
       title={isProfiling ? 'Stop profiling' : 'Start profiling'}
     >

From b64a76e6bdf8db0c9fd26ae038cbf308a4301e57 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 13:53:10 -0700
Subject: [PATCH 157/814] Reset selected commit and fiber between profiling
 sessions

---
 src/devtools/views/Profiler/ProfilerContext.js  | 9 +++++++++
 src/devtools/views/Profiler/SnapshotSelector.js | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 490db544c837..d6d0a96a4fc6 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -124,6 +124,15 @@ function ProfilerContextController({ children }: Props) {
 
   const [selectedFiberID, selectFiber] = useState<number | null>(null);
 
+  if (isProfiling) {
+    if (selectedFiberID !== null) {
+      selectFiber(null);
+    }
+    if (selectedCommitIndex !== null) {
+      setSelectedCommitIndex(null);
+    }
+  }
+
   const value = useMemo(
     () => ({
       hasProfilingData,
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index fa6469b54e2b..ff4abdf4ae8b 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -56,7 +56,8 @@ export default function SnapshotSelector(_: Props) {
   }, [filteredCommitIndices, selectedCommitIndex]);
 
   // TODO (profiling) This should be managed by the context controller (reducer).
-  // TODO (profiling) We should also reset the selected index to 0 between profiling sessions.
+  // It doesn't currently know about the filtered commits though (since it doesn't suspend).
+  // Maybe this component should pass filteredCommitIndices up?
   if (selectedFilteredCommitIndex === null) {
     if (numFilteredCommits > 0) {
       setSelectedCommitIndex(0);

From 2fc03eb151758917c0666c971ab89861fdcc9755 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 18 Mar 2019 15:11:41 -0700
Subject: [PATCH 158/814] Fixed keyboard/mouse events inside of extension by
 using ref.ownerDocument

---
 src/devtools/views/Elements/SearchInput.js    | 15 ++++++++++---
 src/devtools/views/Elements/Tree.js           | 17 +++++++++++----
 .../views/Profiler/SnapshotCommitList.js      | 18 +++++++++++-----
 src/devtools/views/hooks.js                   | 21 ++++++++++++-------
 4 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/devtools/views/Elements/SearchInput.js b/src/devtools/views/Elements/SearchInput.js
index 14d86e526195..4ea5783dffaa 100644
--- a/src/devtools/views/Elements/SearchInput.js
+++ b/src/devtools/views/Elements/SearchInput.js
@@ -52,19 +52,28 @@ export default function SearchInput(props: Props) {
 
   // Auto-focus search input
   useEffect(() => {
-    const handleWindowKeyDown = event => {
+    if (inputRef.current === null) {
+      return () => {};
+    }
+
+    const handleWindowKey = (event: KeyboardEvent) => {
       const { key, metaKey } = event;
       if (key === 'f' && metaKey) {
         if (inputRef.current !== null) {
           inputRef.current.focus();
           event.preventDefault();
+          event.stopPropagation();
         }
       }
     };
 
-    window.addEventListener('keydown', handleWindowKeyDown);
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = inputRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleWindowKey);
 
-    return () => window.removeEventListener('keydown', handleWindowKeyDown);
+    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
   }, [inputRef]);
 
   return (
diff --git a/src/devtools/views/Elements/Tree.js b/src/devtools/views/Elements/Tree.js
index ae6c2b7a4a12..049ef4632d3b 100644
--- a/src/devtools/views/Elements/Tree.js
+++ b/src/devtools/views/Elements/Tree.js
@@ -32,6 +32,7 @@ export default function Tree(props: Props) {
     selectPreviousElementInTree,
   } = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any> | null>(null);
+  const treeRef = useRef<HTMLDivElement | null>(null);
 
   const { lineHeight } = useContext(SettingsContext);
 
@@ -45,7 +46,11 @@ export default function Tree(props: Props) {
 
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
-    const handleKeyDown = event => {
+    if (treeRef.current === null) {
+      return () => {};
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
@@ -67,10 +72,14 @@ export default function Tree(props: Props) {
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = treeRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      ownerDocument.removeEventListener('keydown', handleKeyDown);
     };
   }, [
     selectNextElementInTree,
@@ -90,7 +99,7 @@ export default function Tree(props: Props) {
   );
 
   return (
-    <div className={styles.Tree}>
+    <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 77ccf372a908..bf9e4e55259e 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -80,6 +80,7 @@ function List({
   width,
 }: ListProps) {
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
+  const divRef = useRef<HTMLDivElement | null>(null);
   const prevCommitIndexRef = useRef<number | null>(null);
 
   // Make sure a newly selected snapshot is fully visible within the list.
@@ -103,11 +104,17 @@ function List({
     setIsMouseDown(false);
   }, []);
   useEffect(() => {
-    window.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      window.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [handleMouseUp]);
+    if (divRef.current === null) {
+      return () => {};
+    }
+
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = divRef.current.ownerDocument;
+    ownerDocument.addEventListener('mouseup', handleMouseUp);
+    return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);
+  }, [divRef, handleMouseUp]);
 
   const itemSize = useMemo(
     () => Math.max(minBarWidth, width / filteredCommitIndices.length),
@@ -150,6 +157,7 @@ function List({
     <div
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
+      ref={divRef}
       style={{ height, width }}
     >
       <FixedSizeList
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 6eb8bb944c1a..06364caa7700 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -58,6 +58,10 @@ export function useModalDismissSignal(
   dismissCallback: Function
 ): void {
   useEffect(() => {
+    if (modalRef.current === null) {
+      return () => {};
+    }
+
     const handleKeyDown = ({ key }: any) => {
       if (key === 'Escape') {
         dismissCallback();
@@ -71,15 +75,18 @@ export function useModalDismissSignal(
       }
     };
 
-    const body = ((document.body: any): HTMLBodyElement);
-    body.addEventListener('keydown', handleKeyDown);
-    body.addEventListener('mousedown', handleMouseOrTouch);
-    body.addEventListener('touchstart', handleMouseOrTouch);
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = modalRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleKeyDown);
+    ownerDocument.addEventListener('mousedown', handleMouseOrTouch);
+    ownerDocument.addEventListener('touchstart', handleMouseOrTouch);
 
     return () => {
-      body.removeEventListener('keydown', handleKeyDown);
-      body.removeEventListener('mousedown', handleMouseOrTouch);
-      body.removeEventListener('touchstart', handleMouseOrTouch);
+      ownerDocument.removeEventListener('keydown', handleKeyDown);
+      ownerDocument.removeEventListener('mousedown', handleMouseOrTouch);
+      ownerDocument.removeEventListener('touchstart', handleMouseOrTouch);
     };
   }, [modalRef, dismissCallback]);
 }

From 1846d4fe5907ee17434b65f68ea8986129d96c8b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Mar 2019 11:08:51 -0700
Subject: [PATCH 159/814] Fixed a bug where treeBaseDurations were undefined
 for fibers that were unmounted during profiling

---
 src/backend/renderer.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9adcdd4af163..71b894797740 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -592,6 +592,7 @@ export function attach(
 
       const ownerID =
         _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
+      const parentID = getFiberID(getPrimaryFiber(parentFiber));
 
       let encodedDisplayName = ((null: any): Uint8Array);
       let encodedKey = ((null: any): Uint8Array);
@@ -617,7 +618,7 @@ export function attach(
       operation[0] = TREE_OPERATION_ADD;
       operation[1] = id;
       operation[2] = type;
-      operation[3] = getFiberID(getPrimaryFiber(parentFiber));
+      operation[3] = parentID;
       operation[4] = ownerID;
       operation[5] = encodedDisplayNameSize;
       if (displayName !== null) {
@@ -1398,6 +1399,7 @@ export function attach(
 
   let currentCommitProfilingMetadata: CommitProfilingData | null = null;
   let initialTreeBaseDurationsMap: Map<number, number> | null = null;
+  let initialIDToRootMap: Map<number, number> | null = null;
   let isProfiling: boolean = false;
   let profilingStartTime: number = 0;
   let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
@@ -1450,7 +1452,9 @@ export function attach(
     const initialTreeBaseDurations = [];
     ((initialTreeBaseDurationsMap: any): Map<number, number>).forEach(
       (treeBaseDuration, id) => {
-        if (idToRootMap.get(id) === rootID) {
+        if (
+          ((initialIDToRootMap: any): Map<number, number>).get(id) === rootID
+        ) {
           // We don't need to convert milliseconds to microseconds in this case,
           // because the profiling summary is JSON serialized.
           initialTreeBaseDurations.push(id, treeBaseDuration);
@@ -1468,7 +1472,13 @@ export function attach(
   }
 
   function startProfiling() {
+    // Capture initial values as of the time profiling starts.
+    // It's important we snapshot both the durations and the id-to-root map,
+    // since either of these may change during the profiling session
+    // (e.g. when a fiber is re-rendered or when a fiber gets removed).
     initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);
+    initialIDToRootMap = new Map(idToRootMap);
+
     isProfiling = true;
     profilingStartTime = performance.now();
     rootToCommitProfilingMetadataMap = new Map();

From ac1a986acecbe146a2efd113f7fa336308a6ab33 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Mar 2019 11:19:30 -0700
Subject: [PATCH 160/814] Handle RTE in profiler when commit does not contain
 selected node

---
 .../views/Profiler/CommitFlamegraph.js        | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 75967d4b5938..f8ab0bff25ae 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -86,21 +86,29 @@ function CommitFlamegraph({
     rootID: ((rootID: any): number),
   });
 
-  const selectedChartNodeIndex = useMemo(
-    () =>
-      selectedFiberID === null
-        ? 0
-        : ((chartData.idToDepthMap.get(selectedFiberID): any): number) - 1,
-    [chartData, selectedFiberID]
-  );
+  const selectedChartNodeIndex = useMemo<number>(() => {
+    if (selectedFiberID === null) {
+      return 0;
+    }
+    // The selected node might not be in the tree for this commit,
+    // so it's important that we have a fallback plan.
+    const depth = chartData.idToDepthMap.get(selectedFiberID);
+    return depth !== undefined ? depth - 1 : 0;
+  }, [chartData, selectedFiberID]);
 
   const selectedChartNode = useMemo(() => {
-    if (selectedFiberID === null) {
+    let chartNode = null;
+    if (selectedFiberID !== null) {
+      chartNode = ((chartData.rows[selectedChartNodeIndex].find(
+        chartNode => chartNode.id === selectedFiberID
+      ): any): ChartNode);
+    }
+    // The selected node might not be in the tree for this commit,
+    // so it's important that we have a fallback plan.
+    if (chartNode == null) {
       return chartData.rows[0][0];
     }
-    return ((chartData.rows[selectedChartNodeIndex].find(
-      chartNode => chartNode.id === selectedFiberID
-    ): any): ChartNode);
+    return chartNode;
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);
 
   const itemData = useMemo<ItemData>(

From 433b6aadd6cda3caaa0a86a48ff2ce441010d8b4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Mar 2019 12:41:49 -0700
Subject: [PATCH 161/814] Added placeholder Profiler sidebar views

---
 src/devtools/views/Profiler/Profiler.css      |  4 --
 src/devtools/views/Profiler/Profiler.js       | 21 +++++--
 .../views/Profiler/SidebarCommitInfo.css      | 34 +++++++++++
 .../views/Profiler/SidebarCommitInfo.js       | 58 +++++++++++++++++++
 .../views/Profiler/SidebarInteractions.css    | 13 +++++
 .../views/Profiler/SidebarInteractions.js     | 24 ++++++++
 6 files changed, 145 insertions(+), 9 deletions(-)
 create mode 100644 src/devtools/views/Profiler/SidebarCommitInfo.css
 create mode 100644 src/devtools/views/Profiler/SidebarCommitInfo.js
 create mode 100644 src/devtools/views/Profiler/SidebarInteractions.css
 create mode 100644 src/devtools/views/Profiler/SidebarInteractions.js

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 65c8c6bf6c67..682532e88a44 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -62,10 +62,6 @@
   border-top: 1px solid var(--color-border);
 }
 
-.InspectedProperties {
-  padding: 0.5rem;
-}
-
 .VRule {
   height: 20px;
   width: 1px;
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 4199efe1c25d..5de8973a7610 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -11,6 +11,8 @@ import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
 import RecordToggle from './RecordToggle';
 import SnapshotSelector from './SnapshotSelector';
+import SidebarCommitInfo from './SidebarCommitInfo';
+import SidebarInteractions from './SidebarInteractions';
 
 import styles from './Profiler.css';
 
@@ -124,6 +126,19 @@ function SuspendingProfiler() {
       break;
   }
 
+  let sidebar = null;
+  switch (tab) {
+    case 'interactions':
+      sidebar = <SidebarInteractions />;
+      break;
+    case 'flame-chart':
+    case 'ranked-chart':
+      sidebar = <SidebarCommitInfo />;
+      break;
+    default:
+      break;
+  }
+
   return (
     <div className={styles.Profiler}>
       <div className={styles.LeftColumn}>
@@ -157,11 +172,7 @@ function SuspendingProfiler() {
         </div>
       </div>
       <div className={styles.RightColumn}>
-        <Suspense fallback={<ProfilerFallback />}>
-          {/* TODO (profiler) Dynamic information */}
-          <div className={styles.Toolbar}>Commit information</div>
-          <div className={styles.InspectedProperties} />
-        </Suspense>
+        <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
       </div>
     </div>
   );
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
new file mode 100644
index 000000000000..d36c4aec11a1
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -0,0 +1,34 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+}
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ListItem {
+  margin: 0 0 0.25rem;
+}
+
+.Label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: bold;
+}
+
+.Value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
new file mode 100644
index 000000000000..e2c8c987c197
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -0,0 +1,58 @@
+// @flow
+
+import React, { Fragment, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { formatDuration, formatTime } from './utils';
+import { StoreContext } from '../context';
+
+import styles from './SidebarCommitInfo.css';
+
+export type Props = {||};
+
+export default function SidebarCommitInfo(_: Props) {
+  const { selectedCommitIndex, rendererID, rootID } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
+
+  if (selectedCommitIndex === null) {
+    return 'TODO';
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>Commit information</div>
+      <div className={styles.Content}>
+        <ul className={styles.List}>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Committed at</label>:{' '}
+            <span className={styles.Value}>
+              {formatTime(commitTimes[selectedCommitIndex])}s
+            </span>
+          </li>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Render duration</label>:{' '}
+            <span className={styles.Value}>
+              {formatDuration(commitDurations[selectedCommitIndex])}ms
+            </span>
+          </li>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Interactions</label>:
+            <ul className={styles.List}>
+              <li className={styles.ListItem}>
+                <div>Coming soon</div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
new file mode 100644
index 000000000000..8c1e8510a862
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -0,0 +1,13 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
new file mode 100644
index 000000000000..101b62215c75
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -0,0 +1,24 @@
+// @flow
+
+import React, { Fragment, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { StoreContext } from '../context';
+
+import styles from './SidebarInteractions.css';
+
+export type Props = {||};
+
+export default function SidebarInteractions(_: Props) {
+  const { selectedCommitIndex, rendererID, rootID } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>Interaction</div>
+      <div className={styles.Content}>Coming soon</div>
+    </Fragment>
+  );
+}

From 3e82e4152e7a6c1646261f8952b9ac34f5e86bc0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Mar 2019 18:13:44 -0700
Subject: [PATCH 162/814] Added getInteractions message

---
 OVERVIEW.md                          |  4 +++
 src/backend/agent.js                 | 21 ++++++++++++
 src/backend/renderer.js              | 47 +++++++++++++++++++++-----
 src/backend/types.js                 | 13 +++++++-
 src/devtools/ProfilingCache.js       | 49 ++++++++++++++++++++++++++++
 src/devtools/views/Profiler/types.js | 10 +++++-
 6 files changed, 133 insertions(+), 11 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index e615faf4b3c2..f91b420332ea 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -268,10 +268,12 @@ Here is an example commit in which two elements were rendered and one interactio
   commitIndex: 0,
   interactions: [
     {
+      id: 8,
       timestamp: 4,
       name: "Foo"
     },
     {
+      id: 11,
       timestamp: 4,
       name: "Bar"
     }
@@ -332,6 +334,7 @@ Here is an example of a profiling session consisting of two interactions:
   rootID: 1,
   interactions: [
     {
+      id: 8,
       name: "Foo",
       timestamp: 4,
       commits: [
@@ -340,6 +343,7 @@ Here is an example of a profiling session consisting of two interactions:
       ]
     },
     {
+      id: 11,
       name: "Bar",
       timestamp: 4,
       commits: [
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 34a5613520d7..86dc674c74ce 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -50,6 +50,7 @@ export default class Agent extends EventEmitter {
     // TODO (profiling) Interactions
 
     bridge.addListener('getCommitDetails', this.getCommitDetails);
+    bridge.addListener('getInteractions', this.getInteractions);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
@@ -100,6 +101,26 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  getInteractions = ({
+    commitIndex,
+    rendererID,
+    rootID,
+  }: {
+    commitIndex: number,
+    rendererID: number,
+    rootID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      this._bridge.send(
+        'interactions',
+        renderer.getInteractions(rootID, commitIndex)
+      );
+    }
+  };
+
   getProfilingStatus = () => {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 71b894797740..4d1adcdd77a8 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -30,6 +30,8 @@ import type {
   Fiber,
   FiberData,
   Interaction,
+  Interactions,
+  InteractionWithCommits,
   ProfilingSummary,
   ReactRenderer,
   RendererInterface,
@@ -476,10 +478,6 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
-  function getInteractionID({ name, timestamp }: Interaction): string {
-    return `${timestamp}-${name}`;
-  }
-
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -894,11 +892,7 @@ export function attach(
         actualDurations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: Interaction) => ({
-            id: getInteractionID(interaction),
-            name: interaction.name,
-            timestamp: interaction.timestamp - profilingStartTime,
-          })
+          (interaction: Interaction) => ({ ...interaction })
         ),
         maxActualDuration: 0,
       };
@@ -1431,6 +1425,40 @@ export function attach(
     };
   }
 
+  function getInteractions(rootID: number, commitIndex: number): Interactions {
+    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+      rootID
+    );
+    if (commitProfilingMetadata != null) {
+      const interactionsMap: Map<number, InteractionWithCommits> = new Map();
+
+      commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
+        commitProfilingData.interactions.forEach(interaction => {
+          const interactionWithCommits = interactionsMap.get(interaction.id);
+          if (interactionWithCommits != null) {
+            interactionWithCommits.commits.push(commitIndex);
+          } else {
+            interactionsMap.set(interaction.id, {
+              ...interaction,
+              commits: [commitIndex],
+            });
+          }
+        });
+      });
+
+      return {
+        interactions: Array.from(interactionsMap.values()),
+        rootID,
+      };
+    }
+
+    // TODO (profiling) Is this right? Should I return null? Does it matter?
+    return {
+      interactions: [],
+      rootID,
+    };
+  }
+
   function getProfilingSummary(rootID: number): ProfilingSummary {
     const interactions = new Set();
     const commitDurations = [];
@@ -1492,6 +1520,7 @@ export function attach(
     cleanup,
     getCommitDetails,
     getFiberIDFromNative,
+    getInteractions,
     getNativeFromReactElement,
     getProfilingSummary,
     handleCommitFiberRoot,
diff --git a/src/backend/types.js b/src/backend/types.js
index 48da3b85f3a7..72659ccd9016 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -50,7 +50,7 @@ export type ReactRenderer = {
 };
 
 export type Interaction = {|
-  id: string,
+  id: number,
   name: string,
   timestamp: number,
 |};
@@ -62,6 +62,16 @@ export type CommitDetails = {|
   rootID: number,
 |};
 
+export type InteractionWithCommits = {|
+  ...Interaction,
+  commits: Array<number>,
+|};
+
+export type Interactions = {|
+  interactions: Array<InteractionWithCommits>,
+  rootID: number,
+|};
+
 export type ProfilingSummary = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
@@ -78,6 +88,7 @@ export type RendererInterface = {
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
+  getInteractions: (rootID: number, commitIndex: number) => Interactions,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index a1b9675dad0b..ad872c1a7a37 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -19,10 +19,12 @@ import type { Resource } from './cache';
 import type { Bridge } from '../types';
 import type {
   CommitDetails as CommitDetailsBackend,
+  Interactions as InteractionsBackend,
   ProfilingSummary as ProfilingSummaryBackend,
 } from 'src/backend/types';
 import type {
   CommitDetails as CommitDetailsFrontend,
+  Interactions as InteractionsFrontend,
   CommitTree as CommitTreeFrontend,
   ProfilingSummary as ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
@@ -35,6 +37,11 @@ type CommitDetailsParams = {|
   rendererID: number,
 |};
 
+type InteractionsParams = {|
+  rootID: number,
+  rendererID: number,
+|};
+
 type GetCommitTreeParams = {|
   commitIndex: number,
   profilingSummary: ProfilingSummaryFrontend,
@@ -56,6 +63,11 @@ export default class ProfilingCache {
     (commitDetails: CommitDetailsFrontend) => void
   > = new Map();
 
+  _pendingInteractionsMap: Map<
+    number,
+    (interactions: InteractionsFrontend) => void
+  > = new Map();
+
   _pendingProfileSummaryMap: Map<
     number,
     (profilingSummary: ProfilingSummaryFrontend) => void
@@ -90,6 +102,30 @@ export default class ProfilingCache {
       `${rootID}-${commitIndex}`
   );
 
+  Interactions: Resource<
+    InteractionsParams,
+    InteractionsFrontend
+  > = createResource(
+    ({ rendererID, rootID }: InteractionsParams) => {
+      return new Promise(resolve => {
+        if (!this._store.profilingOperations.has(rootID)) {
+          // If no profiling data was recorded for this root, skip the round trip.
+          resolve({
+            interactions: [],
+            rootID,
+          });
+        } else {
+          this._pendingInteractionsMap.set(rootID, resolve);
+          this._bridge.send('getInteractions', {
+            rendererID,
+            rootID,
+          });
+        }
+      });
+    },
+    ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
+  );
+
   ProfilingSummary: Resource<
     ProfilingSummaryParams,
     ProfilingSummaryFrontend
@@ -118,6 +154,7 @@ export default class ProfilingCache {
     this._store = store;
 
     bridge.addListener('commitDetails', this.onCommitDetails);
+    bridge.addListener('interactions', this.onInteractions);
     bridge.addListener('profilingSummary', this.onProfileSummary);
   }
 
@@ -207,6 +244,18 @@ export default class ProfilingCache {
     }
   };
 
+  onInteractions = ({ interactions, rootID }: InteractionsBackend) => {
+    const resolve = this._pendingInteractionsMap.get(rootID);
+    if (resolve != null) {
+      this._pendingInteractionsMap.delete(rootID);
+
+      resolve({
+        interactions,
+        rootID,
+      });
+    }
+  };
+
   onProfileSummary = ({
     commitDurations,
     commitTimes,
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 0b4242457864..dc0af5c95e23 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -15,11 +15,19 @@ export type CommitTree = {|
 |};
 
 export type Interaction = {|
-  id: string,
+  id: number,
   name: string,
   timestamp: number,
 |};
 
+export type Interactions = {|
+  interactions: Array<{|
+    ...Interaction,
+    commits: Array<number>,
+  |}>,
+  rootID: number,
+|};
+
 export type CommitDetails = {|
   actualDurations: Map<number, number>,
   interactions: Array<Interaction>,

From 17a966651cc1ee92ece83b71f4671133f2a830ce Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Mar 2019 09:39:14 -0700
Subject: [PATCH 163/814] Added suspense to TODO list and added interactions to
 'Commit Info' panel

---
 package.json                                  |  7 +--
 shells/dev/app/ToDoList/List.js               | 49 +++++++++++--------
 shells/dev/app/ToDoList/ListItem.js           |  6 ++-
 src/devtools/cache.js                         | 21 ++++++--
 .../views/Profiler/SidebarCommitInfo.css      | 12 +++--
 .../views/Profiler/SidebarCommitInfo.js       | 33 +++++++++----
 .../views/Profiler/SnapshotSelector.js        |  2 +
 yarn.lock                                     | 35 +++++++------
 8 files changed, 109 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index 938a3b6aca8a..94358e3197d9 100644
--- a/package.json
+++ b/package.json
@@ -93,13 +93,14 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
-    "react": "^16.8",
+    "react": "^16.8.4",
     "react-color": "^2.11.7",
-    "react-dom": "^16.8",
-    "react-is": "^16.8",
+    "react-dom": "^16.8.4",
+    "react-is": "^16.8.4",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.5.1",
+    "scheduler": "^0.13",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^1.10.1",
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index b8a2a4636aaa..f164d6975d79 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment, useCallback, useState } from 'react';
+import { unstable_trace as trace } from 'scheduler/tracing';
 import ListItem from './ListItem';
 import styles from './List.css';
 
@@ -23,16 +24,18 @@ export default function List(props: Props) {
 
   const handleClick = useCallback(() => {
     if (newItemText !== '') {
-      setItems([
-        ...items,
-        {
-          id: uid,
-          isComplete: false,
-          text: newItemText,
-        },
-      ]);
-      setUID(uid + 1);
-      setNewItemText('');
+      trace(`Add "${newItemText}"`, performance.now(), () => {
+        setItems([
+          ...items,
+          {
+            id: uid,
+            isComplete: false,
+            text: newItemText,
+          },
+        ]);
+        setUID(uid + 1);
+        setNewItemText('');
+      });
     }
   }, [newItemText, items, uid]);
 
@@ -54,24 +57,28 @@ export default function List(props: Props) {
 
   const removeItem = useCallback(
     itemToRemove => {
-      setItems(items.filter(item => item !== itemToRemove));
+      trace(`Remove "${itemToRemove.text}"`, performance.now(), () => {
+        setItems(items.filter(item => item !== itemToRemove));
+      });
     },
     [items]
   );
 
   const toggleItem = useCallback(
     itemToToggle => {
-      const index = items.indexOf(itemToToggle);
+      trace(`Toggle "${itemToToggle.text}"`, performance.now(), () => {
+        const index = items.indexOf(itemToToggle);
 
-      setItems(
-        items
-          .slice(0, index)
-          .concat({
-            ...itemToToggle,
-            isComplete: !itemToToggle.isComplete,
-          })
-          .concat(items.slice(index + 1))
-      );
+        setItems(
+          items
+            .slice(0, index)
+            .concat({
+              ...itemToToggle,
+              isComplete: !itemToToggle.isComplete,
+            })
+            .concat(items.slice(index + 1))
+        );
+      });
     },
     [items]
   );
diff --git a/shells/dev/app/ToDoList/ListItem.js b/shells/dev/app/ToDoList/ListItem.js
index e3e67941479e..2305e28ce6bd 100644
--- a/shells/dev/app/ToDoList/ListItem.js
+++ b/shells/dev/app/ToDoList/ListItem.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import styles from './ListItem.css';
 
 import type { Item } from './List';
@@ -11,7 +11,7 @@ type Props = {|
   toggleItem: (item: Item) => void,
 |};
 
-export default function ListItem({ item, removeItem, toggleItem }: Props) {
+function ListItem({ item, removeItem, toggleItem }: Props) {
   const handleDelete = useCallback(() => {
     removeItem(item);
   }, [item, removeItem]);
@@ -37,3 +37,5 @@ export default function ListItem({ item, removeItem, toggleItem }: Props) {
     </li>
   );
 }
+
+export default memo<Props>(ListItem);
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 92df88a37a17..58577adf3210 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 
 // Cache implementation was forked from the React repo:
 // https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
@@ -46,6 +46,21 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
+const ReactCurrentDispatcher = (React: any)
+  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
+
+function readContext(Context, observedBits) {
+  const dispatcher = ReactCurrentDispatcher.current;
+  if (dispatcher === null) {
+    throw new Error(
+      'react-cache: read and preload may only be called from within a ' +
+        "component's render. They are not supported in event handlers or " +
+        'lifecycle methods.'
+    );
+  }
+  return dispatcher.readContext(Context, observedBits);
+}
+
 function identityHashFn(input) {
   return input;
 }
@@ -106,7 +121,7 @@ export function createResource<I, K: string | number, V>(
     read(input: I): V {
       // Prevent access outside of render.
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      useContext(CacheContext);
+      readContext(CacheContext);
 
       const key = hashInput(input);
       const result: Result<V> = accessResult(resource, fetch, input, key);
@@ -132,7 +147,7 @@ export function createResource<I, K: string | number, V>(
     preload(input: I): void {
       // Prevent access outside of render.
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      useContext(CacheContext);
+      readContext(CacheContext);
 
       const key = hashInput(input);
       accessResult(resource, fetch, input, key);
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index d36c4aec11a1..c62374ab90c5 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -12,14 +12,20 @@
   padding: 0.5rem;
 }
 
-.List {
+.List,
+.InteractionList {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.ListItem {
-  margin: 0 0 0.25rem;
+.InteractionList {
+  padding: 0.5rem;
+}
+
+.ListItem,
+.InteractionListItem {
+  margin: 0 0 0.5rem;
 }
 
 .Label {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index e2c8c987c197..ce6616b615ab 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -15,6 +15,11 @@ export default function SidebarCommitInfo(_: Props) {
   );
 
   const { profilingCache } = useContext(StoreContext);
+
+  if (selectedCommitIndex === null) {
+    return null; // TODO (profiling) Use a better UI
+  }
+
   const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
     {
       rendererID: ((rendererID: any): number),
@@ -22,9 +27,11 @@ export default function SidebarCommitInfo(_: Props) {
     }
   );
 
-  if (selectedCommitIndex === null) {
-    return 'TODO';
-  }
+  const { interactions } = profilingCache.CommitDetails.read({
+    commitIndex: ((selectedCommitIndex: any): number),
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
 
   return (
     <Fragment>
@@ -34,21 +41,29 @@ export default function SidebarCommitInfo(_: Props) {
           <li className={styles.ListItem}>
             <label className={styles.Label}>Committed at</label>:{' '}
             <span className={styles.Value}>
-              {formatTime(commitTimes[selectedCommitIndex])}s
+              {formatTime(commitTimes[((selectedCommitIndex: any): number)])}s
             </span>
           </li>
           <li className={styles.ListItem}>
             <label className={styles.Label}>Render duration</label>:{' '}
             <span className={styles.Value}>
-              {formatDuration(commitDurations[selectedCommitIndex])}ms
+              {formatDuration(
+                commitDurations[((selectedCommitIndex: any): number)]
+              )}
+              ms
             </span>
           </li>
           <li className={styles.ListItem}>
             <label className={styles.Label}>Interactions</label>:
-            <ul className={styles.List}>
-              <li className={styles.ListItem}>
-                <div>Coming soon</div>
-              </li>
+            <ul className={styles.InteractionList}>
+              {interactions.length === 0 ? (
+                <li className={styles.InteractionListItem}>None</li>
+              ) : null}
+              {interactions.map((interaction, index) => (
+                <li key={index} className={styles.ListItem}>
+                  {interaction.name}
+                </li>
+              ))}
             </ul>
           </li>
         </ul>
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index ff4abdf4ae8b..81f72608887c 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -12,6 +12,8 @@ import styles from './SnapshotSelector.css';
 
 export type Props = {||};
 
+// TODO (profiling) Left/right arrow navigation.
+
 export default function SnapshotSelector(_: Props) {
   const {
     isCommitFilterEnabled,
diff --git a/yarn.lock b/yarn.lock
index 2f71613ed1db..3779ffc9ca2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8630,21 +8630,26 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^16.8:
-  version "16.8.3"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32"
-  integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA==
+react-dom@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
+  integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.3"
+    scheduler "^0.13.4"
 
-react-is@^16.8, react-is@^16.8.1:
+react-is@^16.8.1:
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.3.tgz#4ad8b029c2a718fc0cfc746c8d4e1b7221e5387d"
   integrity sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==
 
+react-is@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
+  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
+
 react-portal@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
@@ -8665,15 +8670,15 @@ react-window@^1.5.1:
     "@babel/runtime" "^7.0.0"
     memoize-one "^3.1.1"
 
-react@^16.8:
-  version "16.8.3"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"
-  integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA==
+react@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
+  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.3"
+    scheduler "^0.13.4"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9279,10 +9284,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896"
-  integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==
+scheduler@^0.13, scheduler@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
+  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 64e355bb749969e61a4d48af0f2638c5e64a3773 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Mar 2019 11:12:46 -0700
Subject: [PATCH 164/814] Added basic Interactions view (without graph for now)

---
 src/backend/agent.js                          |  7 +-
 src/backend/renderer.js                       |  2 +-
 src/backend/types.js                          |  2 +-
 src/devtools/views/Elements/Element.css       |  7 +-
 src/devtools/views/Elements/OwnersStack.css   |  6 +-
 .../views/Profiler/CommitFlamegraph.js        |  2 +-
 .../Profiler/CommitFlamegraphListItem.js      | 15 ++--
 src/devtools/views/Profiler/CommitRanked.js   |  2 +-
 .../views/Profiler/CommitRankedListItem.js    | 15 ++--
 .../views/Profiler/InteractionListItem.css    | 16 ++++
 .../views/Profiler/InteractionListItem.js     | 43 +++++++++++
 src/devtools/views/Profiler/Interactions.css  |  5 ++
 src/devtools/views/Profiler/Interactions.js   | 73 +++++++++++++++++++
 src/devtools/views/Profiler/NoCommitData.css  |  1 +
 src/devtools/views/Profiler/NoCommitData.js   | 10 ++-
 .../views/Profiler/NoInteractions.css         | 16 ++++
 src/devtools/views/Profiler/NoInteractions.js | 29 ++++++++
 src/devtools/views/Profiler/Profiler.css      |  4 +
 src/devtools/views/Profiler/Profiler.js       | 25 +++----
 .../views/Profiler/ProfilerContext.js         | 49 ++++++++++---
 .../views/Profiler/ReloadAndProfileButton.js  | 14 ++++
 .../views/Profiler/SidebarInteractions.css    | 16 ++++
 .../views/Profiler/SidebarInteractions.js     | 40 +++++++++-
 .../views/Profiler/SnapshotCommitListItem.js  |  2 +-
 src/devtools/views/Profiler/types.js          | 10 ++-
 src/devtools/views/Settings/Settings.css      |  2 +-
 .../views/Settings/SettingsContext.js         |  6 +-
 src/devtools/views/TabBar.css                 |  4 +-
 src/devtools/views/root.css                   | 12 ++-
 29 files changed, 361 insertions(+), 74 deletions(-)
 create mode 100644 src/devtools/views/Profiler/InteractionListItem.css
 create mode 100644 src/devtools/views/Profiler/InteractionListItem.js
 create mode 100644 src/devtools/views/Profiler/Interactions.css
 create mode 100644 src/devtools/views/Profiler/Interactions.js
 create mode 100644 src/devtools/views/Profiler/NoInteractions.css
 create mode 100644 src/devtools/views/Profiler/NoInteractions.js
 create mode 100644 src/devtools/views/Profiler/ReloadAndProfileButton.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 86dc674c74ce..a5973aca07c9 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -102,11 +102,9 @@ export default class Agent extends EventEmitter {
   };
 
   getInteractions = ({
-    commitIndex,
     rendererID,
     rootID,
   }: {
-    commitIndex: number,
     rendererID: number,
     rootID: number,
   }) => {
@@ -114,10 +112,7 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
     } else {
-      this._bridge.send(
-        'interactions',
-        renderer.getInteractions(rootID, commitIndex)
-      );
+      this._bridge.send('interactions', renderer.getInteractions(rootID));
     }
   };
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4d1adcdd77a8..b4adeeff9b63 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1425,7 +1425,7 @@ export function attach(
     };
   }
 
-  function getInteractions(rootID: number, commitIndex: number): Interactions {
+  function getInteractions(rootID: number): Interactions {
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
diff --git a/src/backend/types.js b/src/backend/types.js
index 72659ccd9016..49a4a4efa826 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -88,7 +88,7 @@ export type RendererInterface = {
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
-  getInteractions: (rootID: number, commitIndex: number) => Interactions,
+  getInteractions: (rootID: number) => Interactions,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/devtools/views/Elements/Element.css b/src/devtools/views/Elements/Element.css
index 4dafb11f5372..4f1748c9c1ac 100644
--- a/src/devtools/views/Elements/Element.css
+++ b/src/devtools/views/Elements/Element.css
@@ -9,16 +9,17 @@
   user-select: none;
 }
 .Element:hover {
-  background-color: var(--color-tree-node-hover);
+  background-color: var(--color-hover-background);
 }
 
 .SelectedElement {
-  background-color: var(--color-tree-node-selected);
+  background-color: var(--color-selected-background);
+  color: var(--color-selected-foreground);
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
-  --color-attribute-name: var(--color-tree-node-hover);
+  --color-attribute-name: var(--color-hover-background);
   --color-attribute-value: var(--color-component-name-inverted);
 }
 
diff --git a/src/devtools/views/Elements/OwnersStack.css b/src/devtools/views/Elements/OwnersStack.css
index 744d27614a0d..1b5f58f04a0c 100644
--- a/src/devtools/views/Elements/OwnersStack.css
+++ b/src/devtools/views/Elements/OwnersStack.css
@@ -21,12 +21,12 @@
   color: var(--color-component-name);
 }
 .Component:hover {
-  background-color: var(--color-tree-node-hover);
+  background-color: var(--color-hover-background);
 }
 
 .FocusedComponent {
-  background-color: var(--color-tree-node-selected);
-  color: var(--color-component-name-inverted);
+  background-color: var(--color-selected-background);
+  color: var(--color-selected-foreground);
 }
 
 .VRule {
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index f8ab0bff25ae..91a927413642 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -126,7 +126,7 @@ function CommitFlamegraph({
   // If a commit contains no fibers with an actualDuration > 0,
   // Display a fallback message.
   if (chartData.depth === 0) {
-    return <NoCommitData />;
+    return <NoCommitData height={height} width={width} />;
   }
 
   return (
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 7769381dfabd..57f53554d4c0 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -1,21 +1,20 @@
 // @flow
 
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment, memo, useCallback } from 'react';
+import { areEqual } from 'react-window';
 import { barHeight, barWidthThreshold } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
 
 import type { ItemData } from './CommitFlamegraph';
 
-export default function CommitFlamegraphListItem({
-  data,
-  index,
-  style,
-}: {
+type Props = {
   data: ItemData,
   index: number,
   style: Object,
-}) {
+};
+
+function CommitFlamegraphListItem({ data, index, style }: Props) {
   const {
     chartData,
     scaleX,
@@ -100,3 +99,5 @@ export default function CommitFlamegraphListItem({
     </Fragment>
   );
 }
+
+export default memo<Props>(CommitFlamegraphListItem, areEqual);
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index acdd0cb8841e..356caadde039 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -98,7 +98,7 @@ function CommitRanked({ height, width }: {| height: number, width: number |}) {
   // If a commit contains no fibers with an actualDuration > 0,
   // Display a fallback message.
   if (chartData.nodes.length === 0) {
-    return <NoCommitData />;
+    return <NoCommitData height={height} width={width} />;
   }
 
   return (
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
index 4ed5500aaf70..6c37a6db4690 100644
--- a/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -1,21 +1,20 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
+import { areEqual } from 'react-window';
 import { barHeight, minBarWidth } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
 
 import type { ItemData } from './CommitRanked';
 
-export default function CommitRankedListItem({
-  data,
-  index,
-  style,
-}: {
+type Props = {
   data: ItemData,
   index: number,
   style: Object,
-}) {
+};
+
+function CommitRankedListItem({ data, index, style }: Props) {
   const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;
 
   const node = chartData.nodes[index];
@@ -48,3 +47,5 @@ export default function CommitRankedListItem({
     />
   );
 }
+
+export default memo<Props>(CommitRankedListItem, areEqual);
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
new file mode 100644
index 000000000000..2f17864beb25
--- /dev/null
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -0,0 +1,16 @@
+.Interaction,
+.SelectedInteraction {
+  display: flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Interaction:hover {
+  background-color: var(--color-hover-background);
+}
+
+.SelectedInteraction {
+  background-color: var(--color-selected-background);
+  color: var(--color-selected-foreground);
+}
diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/src/devtools/views/Profiler/InteractionListItem.js
new file mode 100644
index 000000000000..6e679ea1406c
--- /dev/null
+++ b/src/devtools/views/Profiler/InteractionListItem.js
@@ -0,0 +1,43 @@
+// @flow
+
+import React, { memo, useCallback } from 'react';
+import { areEqual } from 'react-window';
+
+import styles from './InteractionListItem.css';
+
+import type { ItemData } from './Interactions';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+};
+
+function InteractionListItem({ data: itemData, index, style }: Props) {
+  const { interactions, selectedInteractionID, selectInteraction } = itemData;
+
+  const interaction = interactions[index];
+
+  const handleClick = useCallback(() => {
+    selectInteraction(interaction.id);
+  }, [interaction, selectInteraction]);
+
+  // TODO (profiling Render commit bar)
+
+  return (
+    <div
+      className={
+        selectedInteractionID === interaction.id
+          ? styles.SelectedInteraction
+          : styles.Interaction
+      }
+      onClick={handleClick}
+      style={style}
+      title={interaction.name}
+    >
+      {interaction.name}
+    </div>
+  );
+}
+
+export default memo<Props>(InteractionListItem, areEqual);
diff --git a/src/devtools/views/Profiler/Interactions.css b/src/devtools/views/Profiler/Interactions.css
new file mode 100644
index 000000000000..bc441e485e1f
--- /dev/null
+++ b/src/devtools/views/Profiler/Interactions.css
@@ -0,0 +1,5 @@
+.Container {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
new file mode 100644
index 000000000000..4b1c3462c8bc
--- /dev/null
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -0,0 +1,73 @@
+// @flow
+
+import React, { useContext, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
+import { ProfilerContext } from './ProfilerContext';
+import InteractionListItem from './InteractionListItem';
+import NoInteractions from './NoInteractions';
+import { StoreContext } from '../context';
+
+import styles from './Interactions.css';
+
+import type { InteractionWithCommits } from './types';
+
+export type ItemData = {|
+  interactions: Array<InteractionWithCommits>,
+  selectedInteractionID: number | null,
+  selectInteraction: (id: number | null) => void,
+|};
+
+export default function InteractionsAutoSizer(_: {||}) {
+  return (
+    <div className={styles.Container}>
+      <AutoSizer>
+        {({ height, width }) => <Interactions height={height} width={width} />}
+      </AutoSizer>
+    </div>
+  );
+}
+
+function Interactions({ height, width }: {| height: number, width: number |}) {
+  const {
+    rendererID,
+    rootID,
+    selectedInteractionID,
+    selectInteraction,
+  } = useContext(ProfilerContext);
+  const { profilingCache } = useContext(StoreContext);
+
+  const { interactions } = profilingCache.Interactions.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      interactions,
+      selectedInteractionID,
+      selectInteraction,
+    }),
+    [interactions, selectedInteractionID, selectInteraction]
+  );
+
+  // TODO (profiling) Up/down arrow keys to select prev/next interaction.
+
+  // If a commit contains no fibers with an actualDuration > 0,
+  // Display a fallback message.
+  if (interactions.length === 0) {
+    return <NoInteractions height={height} width={width} />;
+  }
+
+  return (
+    <FixedSizeList
+      height={height}
+      itemCount={interactions.length}
+      itemData={itemData}
+      itemSize={30}
+      width={width}
+    >
+      {InteractionListItem}
+    </FixedSizeList>
+  );
+}
diff --git a/src/devtools/views/Profiler/NoCommitData.css b/src/devtools/views/Profiler/NoCommitData.css
index 0f66490ee958..656834b3ebd4 100644
--- a/src/devtools/views/Profiler/NoCommitData.css
+++ b/src/devtools/views/Profiler/NoCommitData.css
@@ -2,6 +2,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
index 8cd316aa9359..601b55296662 100644
--- a/src/devtools/views/Profiler/NoCommitData.js
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -4,9 +4,15 @@ import React from 'react';
 
 import styles from './NoCommitData.css';
 
-export default function NoCommitData() {
+export default function NoCommitData({
+  height,
+  width,
+}: {|
+  height: number,
+  width: number,
+|}) {
   return (
-    <div className={styles.NoCommitData}>
+    <div className={styles.NoCommitData} style={{ height, width }}>
       <p className={styles.Header}>
         There is no timing data to display for the currently selected commit.
       </p>
diff --git a/src/devtools/views/Profiler/NoInteractions.css b/src/devtools/views/Profiler/NoInteractions.css
new file mode 100644
index 000000000000..6c6872058ac7
--- /dev/null
+++ b/src/devtools/views/Profiler/NoInteractions.css
@@ -0,0 +1,16 @@
+.NoInteractions {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+}
+
+.Link {
+  color: var(--color-button);
+}
diff --git a/src/devtools/views/Profiler/NoInteractions.js b/src/devtools/views/Profiler/NoInteractions.js
new file mode 100644
index 000000000000..f317aa2b6248
--- /dev/null
+++ b/src/devtools/views/Profiler/NoInteractions.js
@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react';
+
+import styles from './NoInteractions.css';
+
+export default function NoInteractions({
+  height,
+  width,
+}: {|
+  height: number,
+  width: number,
+|}) {
+  return (
+    <div className={styles.NoInteractions} style={{ height, width }}>
+      <p className={styles.Header}>No interactions were recorded.</p>
+      <p>
+        <a
+          className={styles.Link}
+          href="http://fb.me/react-interaction-tracing"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn more about the interaction tracing API here.
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 682532e88a44..3bf17ac9afeb 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -87,3 +87,7 @@
   font-size: var(--font-size-sans-large);
   color: var(--color-dim);
 }
+
+.Link {
+  color: var(--color-button);
+}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 5de8973a7610..97f39b8f6544 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -9,7 +9,9 @@ import TabBar from '../TabBar';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
+import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
+import ReloadAndProfileButton from './ReloadAndProfileButton';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
@@ -76,10 +78,7 @@ function NonSuspendingProfiler({
       <div className={styles.LeftColumn}>
         <div className={styles.Toolbar}>
           <RecordToggle disabled={!supportsProfiling} />
-          <Button disabled title="Reload and start profiling">
-            {/* TODO (profiling) Wire up reload button */}
-            <ButtonIcon type="reload" />
-          </Button>
+          <ReloadAndProfileButton />
           <div className={styles.VRule} />
           <TabBar
             currentTab={null}
@@ -105,14 +104,14 @@ function ProfilerFallback() {
 // This view's subtree uses suspense to request profiler data from the backend.
 // NOTE that the structure of this UI should mirror NonSuspendingProfiler.
 function SuspendingProfiler() {
-  const [tab, setTab] = useState('flame-chart');
+  const { selectedTabID, selectTab } = useContext(ProfilerContext);
   const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
 
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
   let view = null;
-  switch (tab) {
+  switch (selectedTabID) {
     case 'flame-chart':
       view = <CommitFlamegraph />;
       break;
@@ -120,14 +119,14 @@ function SuspendingProfiler() {
       view = <CommitRanked />;
       break;
     case 'interactions':
-      view = <div>Coming soon: Interactions</div>; // TODO (profiling)
+      view = <Interactions />;
       break;
     default:
       break;
   }
 
   let sidebar = null;
-  switch (tab) {
+  switch (selectedTabID) {
     case 'interactions':
       sidebar = <SidebarInteractions />;
       break;
@@ -144,15 +143,12 @@ function SuspendingProfiler() {
       <div className={styles.LeftColumn}>
         <div className={styles.Toolbar}>
           <RecordToggle />
-          <Button disabled title="Reload and start profiling">
-            {/* TODO (profiling) Wire up reload button */}
-            <ButtonIcon type="reload" />
-          </Button>
+          <ReloadAndProfileButton />
           <div className={styles.VRule} />
           <TabBar
-            currentTab={tab}
+            currentTab={selectedTabID}
             id="Profiler"
-            selectTab={setTab}
+            selectTab={selectTab}
             size="small"
             tabs={tabs}
           />
@@ -231,6 +227,7 @@ const ProfilingNotSupported = () => (
       <p>
         Learn more at{' '}
         <a
+          className={styles.Link}
           href="https://fb.me/react-profiling"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index d6d0a96a4fc6..dbfc3189b3e5 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -7,12 +7,19 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { useLocalStorage, useSubscription } from '../hooks';
 import { TreeContext } from '../Elements/TreeContext';
 import { StoreContext } from '../context';
 import Store from '../../store';
 
+export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
+
 type Context = {|
+  // Which tab is selexted in the Profiler UI?
+  selectedTabID: TabID,
+  selectTab(id: TabID): void,
+
   // Have we recorded any profiling data?
   // Are we currently profiling?
   // This value may be modified by the record button in the Profiler toolbar,
@@ -48,6 +55,10 @@ type Context = {|
   // Which fiber is currently selected in the Ranked or Flamegraph charts?
   selectedFiberID: number | null,
   selectFiber: (id: number | null) => void,
+
+  // Which interaction is currently selected in the Interactions graph?
+  selectedInteractionID: number | null,
+  selectInteraction: (id: number | null) => void,
 |};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
@@ -84,10 +95,6 @@ function ProfilerContextController({ children }: Props) {
     Store
   >(subscription);
 
-  // TODO (profiling) The browser extension is a multi-root app,
-  // so it won't work for the "Profiling" root to depend on a value that's set by the "Elements" root.
-  // We'll either need to lift that state up into the (shared) Store,
-  // or use a portal to share the contexts themselves between Chrome tabs.
   let rendererID = null;
   let rootID = null;
   let rootHasProfilingData = false;
@@ -121,20 +128,31 @@ function ProfilerContextController({ children }: Props) {
   const [selectedCommitIndex, setSelectedCommitIndex] = useState<number | null>(
     null
   );
-
+  const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
   const [selectedFiberID, selectFiber] = useState<number | null>(null);
+  const [selectedInteractionID, selectInteraction] = useState<number | null>(
+    null
+  );
 
   if (isProfiling) {
-    if (selectedFiberID !== null) {
-      selectFiber(null);
-    }
-    if (selectedCommitIndex !== null) {
-      setSelectedCommitIndex(null);
-    }
+    batchedUpdates(() => {
+      if (selectedCommitIndex !== null) {
+        setSelectedCommitIndex(null);
+      }
+      if (selectedFiberID !== null) {
+        selectFiber(null);
+      }
+      if (selectedInteractionID !== null) {
+        selectInteraction(null);
+      }
+    });
   }
 
   const value = useMemo(
     () => ({
+      selectedTabID,
+      selectTab,
+
       hasProfilingData,
       isProfiling,
       startProfiling,
@@ -154,8 +172,14 @@ function ProfilerContextController({ children }: Props) {
 
       selectedFiberID,
       selectFiber,
+
+      selectedInteractionID,
+      selectInteraction,
     }),
     [
+      selectedTabID,
+      selectTab,
+
       hasProfilingData,
       isProfiling,
       startProfiling,
@@ -175,6 +199,9 @@ function ProfilerContextController({ children }: Props) {
 
       selectedFiberID,
       selectFiber,
+
+      selectedInteractionID,
+      selectInteraction,
     ]
   );
 
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
new file mode 100644
index 000000000000..18a940c11cad
--- /dev/null
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -0,0 +1,14 @@
+// @flow
+
+import React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+export default function ReloadAndProfileButton() {
+  // TODO (profiling) Wire up reload button
+  return (
+    <Button disabled title="Reload and start profiling">
+      <ButtonIcon type="reload" />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index 8c1e8510a862..f2b91539cbb7 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -11,3 +11,19 @@
 .Content {
   padding: 0.5rem;
 }
+
+.Name {
+  font-size: var(--font-size-sans-large);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.NothingSelected {
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 101b62215c75..d6a5929f0124 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -2,23 +2,57 @@
 
 import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
+import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './SidebarInteractions.css';
 
+import type { InteractionWithCommits } from './types';
+
 export type Props = {||};
 
 export default function SidebarInteractions(_: Props) {
-  const { selectedCommitIndex, rendererID, rootID } = useContext(
+  const { selectedInteractionID, rendererID, rootID } = useContext(
     ProfilerContext
   );
 
   const { profilingCache } = useContext(StoreContext);
 
+  if (selectedInteractionID === null) {
+    return <div className={styles.NothingSelected}>Nothing selected</div>;
+  }
+
+  const { interactions } = profilingCache.Interactions.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
+
+  const interaction = ((interactions.find(
+    interaction => interaction.id === selectedInteractionID
+  ): any): InteractionWithCommits);
+
   return (
     <Fragment>
-      <div className={styles.Toolbar}>Interaction</div>
-      <div className={styles.Content}>Coming soon</div>
+      <div className={styles.Toolbar}>
+        <div className={styles.Name}>{interaction.name}</div>
+      </div>
+      <div className={styles.Content}>
+        <ul>
+          {interaction.commits.map(commitIndex => (
+            <li key={commitIndex}>
+              timestamp: {formatTime(commitTimes[commitIndex])}s
+              <br />
+              duration: {formatDuration(commitDurations[commitIndex])}ms
+            </li>
+          ))}
+        </ul>
+      </div>
     </Fragment>
   );
 }
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index e11bb883125a..651466c5c0b1 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -52,7 +52,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
         ...style,
         width,
         borderBottom: isSelected
-          ? '3px solid var(--color-tree-node-selected)'
+          ? '3px solid var(--color-selected-border)'
           : undefined,
       }}
       title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index dc0af5c95e23..98b15a8baef0 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -20,11 +20,13 @@ export type Interaction = {|
   timestamp: number,
 |};
 
+export type InteractionWithCommits = {|
+  ...Interaction,
+  commits: Array<number>,
+|};
+
 export type Interactions = {|
-  interactions: Array<{|
-    ...Interaction,
-    commits: Array<number>,
-  |}>,
+  interactions: Array<InteractionWithCommits>,
   rootID: number,
 |};
 
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index f92cf20de69c..1b29a756a5e5 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -38,7 +38,7 @@
 }
 
 .Option:hover {
-  background-color: var(--color-tree-node-hover);
+  background-color: var(--color-hover-background);
 }
 
 .Option:first-of-type {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index f04af61f3212..4e51b5554ecd 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -219,6 +219,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
+  updateStyleHelper(theme, 'color-hover-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
@@ -229,8 +230,9 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
-  updateStyleHelper(theme, 'color-tree-node-selected', documentElements);
-  updateStyleHelper(theme, 'color-tree-node-hover', documentElements);
+  updateStyleHelper(theme, 'color-selected-background', documentElements);
+  updateStyleHelper(theme, 'color-selected-border', documentElements);
+  updateStyleHelper(theme, 'color-selected-foreground', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(theme, 'color-text-color', documentElements);
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index c4c647372fcb..07362e6bde69 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -13,11 +13,11 @@
 }
 .Tab:hover,
 .TabCurrent:hover {
-  background-color: var(--color-tree-node-hover);
+  background-color: var(--color-hover-background);
 }
 
 .TabCurrent {
-  border-bottom: 3px solid var(--color-tree-node-selected);
+  border-bottom: 3px solid var(--color-selected-border);
 }
 
 .TabDisabled {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index a8d562ee1692..48f7919287de 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -33,6 +33,7 @@
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
+  --light-color-hover-background: #ebf1fb;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.25);
@@ -41,9 +42,10 @@
   --light-color-record-inactive: #cfd1d5;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
+  --light-color-selected-background: #0088fa;
+  --light-color-selected-border: #0088fa;
+  --light-color-selected-foreground: #ffffff;
   --light-color-text-color: #000000;
-  --light-color-tree-node-selected: #0088fa;
-  --light-color-tree-node-hover: #ebf1fb;
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
@@ -75,6 +77,7 @@
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
+  --dark-color-hover-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.25);
@@ -83,9 +86,10 @@
   --dark-color-record-inactive: #777d88;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
+  --dark-color-selected-background: #178fb9;
+  --dark-color-selected-border: #178fb9;
+  --dark-color-selected-foreground: #ffffff;
   --dark-color-text-color: #ffffff;
-  --dark-color-tree-node-selected: #178fb9;
-  --dark-color-tree-node-hover: #3d424a;
 
   /* Compact density */
   --compact-font-size-monospace-normal: 11px;

From 69cdd38c9d6411a7f8d8aab1ea40ffff941db07a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 09:07:00 -0700
Subject: [PATCH 165/814] Interaction chart with commit blocks rendering

---
 src/backend/renderer.js                       |  5 +-
 src/devtools/ProfilingCache.js                | 32 +++++++++---
 .../views/Profiler/InteractionListItem.css    | 29 ++++++++++-
 .../views/Profiler/InteractionListItem.js     | 51 +++++++++++++++++--
 src/devtools/views/Profiler/Interactions.js   | 45 +++++++++++++---
 .../Profiler/InteractionsChartBuilder.js      | 45 ++++++++++++++++
 .../views/Profiler/SidebarInteractions.js     |  2 +-
 src/devtools/views/Profiler/types.js          |  5 +-
 8 files changed, 187 insertions(+), 27 deletions(-)
 create mode 100644 src/devtools/views/Profiler/InteractionsChartBuilder.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b4adeeff9b63..63cae9238dc2 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -892,7 +892,10 @@ export function attach(
         actualDurations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: Interaction) => ({ ...interaction })
+          (interaction: Interaction) => ({
+            ...interaction,
+            timestamp: interaction.timestamp - profilingStartTime,
+          })
         ),
         maxActualDuration: 0,
       };
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index ad872c1a7a37..fa801954705f 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -10,6 +10,10 @@ import {
   getChartData as getFlamegraphChartData,
   invalidateChartData as invalidateFlamegraphChartData,
 } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
+import {
+  getChartData as getInteractionsChartData,
+  invalidateChartData as invalidateInteractionsChartData,
+} from 'src/devtools/views/Profiler/InteractionsChartBuilder';
 import {
   getChartData as getRankedChartData,
   invalidateChartData as invalidateRankedChartData,
@@ -25,10 +29,12 @@ import type {
 import type {
   CommitDetails as CommitDetailsFrontend,
   Interactions as InteractionsFrontend,
+  InteractionWithCommits,
   CommitTree as CommitTreeFrontend,
   ProfilingSummary as ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
 import type { ChartData as FlamegraphChartData } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
+import type { ChartData as InteractionsChartData } from 'src/devtools/views/Profiler/InteractionsChartBuilder';
 import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/RankedChartBuilder';
 
 type CommitDetailsParams = {|
@@ -110,10 +116,7 @@ export default class ProfilingCache {
       return new Promise(resolve => {
         if (!this._store.profilingOperations.has(rootID)) {
           // If no profiling data was recorded for this root, skip the round trip.
-          resolve({
-            interactions: [],
-            rootID,
-          });
+          resolve([]);
         } else {
           this._pendingInteractionsMap.set(rootID, resolve);
           this._bridge.send('getInteractions', {
@@ -190,6 +193,21 @@ export default class ProfilingCache {
       rootID,
     });
 
+  getInteractionsChartData = ({
+    interactions,
+    profilingSummary,
+    rootID,
+  }: {|
+    interactions: Array<InteractionWithCommits>,
+    profilingSummary: ProfilingSummaryFrontend,
+    rootID: number,
+  |}): InteractionsChartData =>
+    getInteractionsChartData({
+      interactions,
+      profilingSummary,
+      rootID,
+    });
+
   getRankedChartData = ({
     commitDetails,
     commitIndex,
@@ -215,6 +233,7 @@ export default class ProfilingCache {
     // Invalidate non-Suspense caches too.
     invalidateCommitTrees();
     invalidateFlamegraphChartData();
+    invalidateInteractionsChartData();
     invalidateRankedChartData();
 
     this._pendingCommitDetailsMap.clear();
@@ -249,10 +268,7 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingInteractionsMap.delete(rootID);
 
-      resolve({
-        interactions,
-        rootID,
-      });
+      resolve(interactions);
     }
   };
 
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
index 2f17864beb25..f34920230bd6 100644
--- a/src/devtools/views/Profiler/InteractionListItem.css
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -11,6 +11,31 @@
 }
 
 .SelectedInteraction {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  background-color: var(--color-hover-background);
+}
+
+.Name {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.Timeline {
+  position: relative;
+  height: 100%;
+}
+
+.InteractionLine {
+  position: absolute;
+  height: 3px;
+  background-color: var(--color-commit-did-not-render);
+  border-radius: 0.125rem;
+}
+
+.CommitBox {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: var(--color-commit-did-not-render);
+  cursor: pointer;
 }
diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/src/devtools/views/Profiler/InteractionListItem.js
index 6e679ea1406c..d7b85d6bd752 100644
--- a/src/devtools/views/Profiler/InteractionListItem.js
+++ b/src/devtools/views/Profiler/InteractionListItem.js
@@ -2,6 +2,7 @@
 
 import React, { memo, useCallback } from 'react';
 import { areEqual } from 'react-window';
+import { getGradientColor } from './utils';
 
 import styles from './InteractionListItem.css';
 
@@ -14,7 +15,18 @@ type Props = {
 };
 
 function InteractionListItem({ data: itemData, index, style }: Props) {
-  const { interactions, selectedInteractionID, selectInteraction } = itemData;
+  const {
+    chartData,
+    interactions,
+    labelWidth,
+    profilingSummary,
+    scaleX,
+    selectedInteractionID,
+    selectInteraction,
+  } = itemData;
+
+  const { maxCommitDuration } = chartData;
+  const { commitDurations, commitTimes } = profilingSummary;
 
   const interaction = interactions[index];
 
@@ -22,7 +34,11 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
     selectInteraction(interaction.id);
   }, [interaction, selectInteraction]);
 
-  // TODO (profiling Render commit bar)
+  const startTime = interaction.timestamp;
+  const stopTime =
+    interaction.commits.length > 0
+      ? commitTimes[interaction.commits[interaction.commits.length - 1]]
+      : interaction.timestamp;
 
   return (
     <div
@@ -33,9 +49,36 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
       }
       onClick={handleClick}
       style={style}
-      title={interaction.name}
     >
-      {interaction.name}
+      <div
+        className={styles.Name}
+        style={{ maxWidth: labelWidth }}
+        title={interaction.name}
+      >
+        {interaction.name}
+      </div>
+      <div
+        className={styles.InteractionLine}
+        style={{
+          left: labelWidth + scaleX(startTime, 0),
+          width: scaleX(stopTime - startTime, 0),
+        }}
+      />
+      {interaction.commits.map(commitIndex => (
+        <div
+          className={styles.CommitBox}
+          key={commitIndex}
+          style={{
+            backgroundColor: getGradientColor(
+              Math.min(
+                1,
+                Math.max(0, commitDurations[commitIndex] / maxCommitDuration)
+              ) || 0
+            ),
+            left: labelWidth + scaleX(commitTimes[commitIndex], 0),
+          }}
+        />
+      ))}
     </div>
   );
 }
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 4b1c3462c8bc..64032ea8a724 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -7,13 +7,19 @@ import { ProfilerContext } from './ProfilerContext';
 import InteractionListItem from './InteractionListItem';
 import NoInteractions from './NoInteractions';
 import { StoreContext } from '../context';
+import { scale } from './utils';
 
 import styles from './Interactions.css';
 
-import type { InteractionWithCommits } from './types';
+import type { ChartData } from './InteractionsChartBuilder';
+import type { InteractionWithCommits, ProfilingSummary } from './types';
 
 export type ItemData = {|
+  chartData: ChartData,
   interactions: Array<InteractionWithCommits>,
+  labelWidth: number,
+  profilingSummary: ProfilingSummary,
+  scaleX: (value: number, fallbackValue: number) => number,
   selectedInteractionID: number | null,
   selectInteraction: (id: number | null) => void,
 |};
@@ -37,19 +43,44 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   } = useContext(ProfilerContext);
   const { profilingCache } = useContext(StoreContext);
 
-  const { interactions } = profilingCache.Interactions.read({
+  const interactions = profilingCache.Interactions.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
 
-  const itemData = useMemo<ItemData>(
-    () => ({
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const chartData = profilingCache.getInteractionsChartData({
+    interactions,
+    profilingSummary,
+    rootID: ((rootID: any): number),
+  });
+
+  const itemData = useMemo<ItemData>(() => {
+    // TODO (profiling) constants
+    const labelWidth = Math.min(200, width / 5);
+    const timelineWidth = width - labelWidth - 10;
+
+    return {
+      chartData,
       interactions,
+      labelWidth,
+      profilingSummary,
+      scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
       selectedInteractionID,
       selectInteraction,
-    }),
-    [interactions, selectedInteractionID, selectInteraction]
-  );
+    };
+  }, [
+    chartData,
+    interactions,
+    profilingSummary,
+    selectedInteractionID,
+    selectInteraction,
+    width,
+  ]);
 
   // TODO (profiling) Up/down arrow keys to select prev/next interaction.
 
diff --git a/src/devtools/views/Profiler/InteractionsChartBuilder.js b/src/devtools/views/Profiler/InteractionsChartBuilder.js
new file mode 100644
index 000000000000..17bc9d661099
--- /dev/null
+++ b/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -0,0 +1,45 @@
+// @flow
+
+import type { InteractionWithCommits, ProfilingSummary } from './types';
+
+export type ChartData = {|
+  lastInteractionTime: number,
+  maxCommitDuration: number,
+|};
+
+const cachedChartData: Map<number, ChartData> = new Map();
+
+export function getChartData({
+  interactions,
+  profilingSummary,
+  rootID,
+}: {|
+  interactions: Array<InteractionWithCommits>,
+  profilingSummary: ProfilingSummary,
+  rootID: number,
+|}): ChartData {
+  if (cachedChartData.has(rootID)) {
+    return ((cachedChartData.get(rootID): any): ChartData);
+  }
+
+  const { commitDurations, commitTimes } = profilingSummary;
+
+  const lastInteractionTime =
+    commitTimes.length > 0 ? commitTimes[commitTimes.length - 1] : 0;
+
+  let maxCommitDuration = 0;
+
+  commitDurations.forEach(commitDuration => {
+    maxCommitDuration = Math.max(maxCommitDuration, commitDuration);
+  });
+
+  const chartData = { lastInteractionTime, maxCommitDuration };
+
+  cachedChartData.set(rootID, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index d6a5929f0124..423ad29389fc 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -22,7 +22,7 @@ export default function SidebarInteractions(_: Props) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const { interactions } = profilingCache.Interactions.read({
+  const interactions = profilingCache.Interactions.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 98b15a8baef0..6efa951bd153 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -25,10 +25,7 @@ export type InteractionWithCommits = {|
   commits: Array<number>,
 |};
 
-export type Interactions = {|
-  interactions: Array<InteractionWithCommits>,
-  rootID: number,
-|};
+export type Interactions = Array<InteractionWithCommits>;
 
 export type CommitDetails = {|
   actualDurations: Map<number, number>,

From 5602fc537104e11a065dd264dd400ee01889fe0b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 09:21:37 -0700
Subject: [PATCH 166/814] Added interaction tracing test harness to shell

---
 shells/dev/app/InteractionTracing/index.js | 58 ++++++++++++++++++++++
 shells/dev/app/ToDoList/List.js            | 51 ++++++++-----------
 shells/dev/app/index.js                    |  2 +
 3 files changed, 81 insertions(+), 30 deletions(-)
 create mode 100644 shells/dev/app/InteractionTracing/index.js

diff --git a/shells/dev/app/InteractionTracing/index.js b/shells/dev/app/InteractionTracing/index.js
new file mode 100644
index 000000000000..c67e60ca98d4
--- /dev/null
+++ b/shells/dev/app/InteractionTracing/index.js
@@ -0,0 +1,58 @@
+// @flow
+
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import {
+  unstable_trace as trace,
+  unstable_wrap as wrap,
+} from 'scheduler/tracing';
+
+export default function InteractionTracing() {
+  const [count, setCount] = useState(0);
+  const [shouldCascade, setShouldCascade] = useState(false);
+
+  const handleUpdate = useCallback(() => {
+    trace('count', performance.now(), () => {
+      setTimeout(
+        wrap(() => {
+          setCount(count + 1);
+        }),
+        count * 100
+      );
+    });
+  }, [count]);
+  const handleCascadingUpdate = useCallback(() => {
+    trace('cascade', performance.now(), () => {
+      setTimeout(
+        wrap(() => {
+          batchedUpdates(() => {
+            setCount(count + 1);
+            setShouldCascade(true);
+          });
+        }),
+        count * 100
+      );
+    });
+  }, [count]);
+
+  useEffect(() => {
+    if (shouldCascade) {
+      setTimeout(
+        wrap(() => {
+          setShouldCascade(false);
+        }),
+        count * 100
+      );
+    }
+  }, [count, shouldCascade]);
+
+  return (
+    <Fragment>
+      <h1>Interaction Tracing</h1>
+      <button onClick={handleUpdate}>Update ({count})</button>
+      <button onClick={handleCascadingUpdate}>
+        Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})
+      </button>
+    </Fragment>
+  );
+}
diff --git a/shells/dev/app/ToDoList/List.js b/shells/dev/app/ToDoList/List.js
index f164d6975d79..f96df7748a88 100644
--- a/shells/dev/app/ToDoList/List.js
+++ b/shells/dev/app/ToDoList/List.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { Fragment, useCallback, useState } from 'react';
-import { unstable_trace as trace } from 'scheduler/tracing';
 import ListItem from './ListItem';
 import styles from './List.css';
 
@@ -24,18 +23,16 @@ export default function List(props: Props) {
 
   const handleClick = useCallback(() => {
     if (newItemText !== '') {
-      trace(`Add "${newItemText}"`, performance.now(), () => {
-        setItems([
-          ...items,
-          {
-            id: uid,
-            isComplete: false,
-            text: newItemText,
-          },
-        ]);
-        setUID(uid + 1);
-        setNewItemText('');
-      });
+      setItems([
+        ...items,
+        {
+          id: uid,
+          isComplete: false,
+          text: newItemText,
+        },
+      ]);
+      setUID(uid + 1);
+      setNewItemText('');
     }
   }, [newItemText, items, uid]);
 
@@ -56,29 +53,23 @@ export default function List(props: Props) {
   );
 
   const removeItem = useCallback(
-    itemToRemove => {
-      trace(`Remove "${itemToRemove.text}"`, performance.now(), () => {
-        setItems(items.filter(item => item !== itemToRemove));
-      });
-    },
+    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
     [items]
   );
 
   const toggleItem = useCallback(
     itemToToggle => {
-      trace(`Toggle "${itemToToggle.text}"`, performance.now(), () => {
-        const index = items.indexOf(itemToToggle);
+      const index = items.indexOf(itemToToggle);
 
-        setItems(
-          items
-            .slice(0, index)
-            .concat({
-              ...itemToToggle,
-              isComplete: !itemToToggle.isComplete,
-            })
-            .concat(items.slice(index + 1))
-        );
-      });
+      setItems(
+        items
+          .slice(0, index)
+          .concat({
+            ...itemToToggle,
+            isComplete: !itemToToggle.isComplete,
+          })
+          .concat(items.slice(index + 1))
+      );
     },
     [items]
   );
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index ea813a28fe5e..1daae4559596 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -8,6 +8,7 @@ import DeeplyNestedComponents from './DeeplyNestedComponents';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
+import InteractionTracing from './InteractionTracing';
 import ToDoList from './ToDoList';
 
 import './styles.css';
@@ -26,6 +27,7 @@ function mountHelper(App) {
 
 function mountTestApp() {
   mountHelper(ToDoList);
+  mountHelper(InteractionTracing);
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);

From afba752034973ae42857aec2a50ee096db6478d4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 09:46:54 -0700
Subject: [PATCH 167/814] Clicking commits and interactions link to each other

---
 shells/dev/app/InteractionTracing/index.js    | 15 +++++++++++
 .../views/Profiler/InteractionListItem.js     |  8 ++++++
 src/devtools/views/Profiler/Interactions.js   |  9 +++++++
 .../views/Profiler/ProfilerContext.js         | 10 +++----
 .../views/Profiler/SidebarCommitInfo.css      | 13 +++++++---
 .../views/Profiler/SidebarCommitInfo.js       | 23 ++++++++++++----
 .../views/Profiler/SidebarInteractions.css    | 14 ++++++++++
 .../views/Profiler/SidebarInteractions.js     | 23 ++++++++++++----
 .../views/Profiler/SnapshotCommitList.js      | 16 ++++++------
 .../views/Profiler/SnapshotCommitListItem.js  |  6 ++---
 .../views/Profiler/SnapshotSelector.js        | 26 ++++++-------------
 11 files changed, 116 insertions(+), 47 deletions(-)

diff --git a/shells/dev/app/InteractionTracing/index.js b/shells/dev/app/InteractionTracing/index.js
index c67e60ca98d4..d062f976f961 100644
--- a/shells/dev/app/InteractionTracing/index.js
+++ b/shells/dev/app/InteractionTracing/index.js
@@ -21,6 +21,7 @@ export default function InteractionTracing() {
       );
     });
   }, [count]);
+
   const handleCascadingUpdate = useCallback(() => {
     trace('cascade', performance.now(), () => {
       setTimeout(
@@ -35,6 +36,19 @@ export default function InteractionTracing() {
     });
   }, [count]);
 
+  const handleMultiple = useCallback(() => {
+    trace('first', performance.now(), () => {
+      trace('second', performance.now(), () => {
+        setTimeout(
+          wrap(() => {
+            setCount(count + 1);
+          }),
+          count * 100
+        );
+      });
+    });
+  }, [count]);
+
   useEffect(() => {
     if (shouldCascade) {
       setTimeout(
@@ -53,6 +67,7 @@ export default function InteractionTracing() {
       <button onClick={handleCascadingUpdate}>
         Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})
       </button>
+      <button onClick={handleMultiple}>Multiple</button>
     </Fragment>
   );
 }
diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/src/devtools/views/Profiler/InteractionListItem.js
index d7b85d6bd752..a4e3cd705451 100644
--- a/src/devtools/views/Profiler/InteractionListItem.js
+++ b/src/devtools/views/Profiler/InteractionListItem.js
@@ -22,7 +22,9 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
     profilingSummary,
     scaleX,
     selectedInteractionID,
+    selectCommitIndex,
     selectInteraction,
+    selectTab,
   } = itemData;
 
   const { maxCommitDuration } = chartData;
@@ -40,6 +42,11 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
       ? commitTimes[interaction.commits[interaction.commits.length - 1]]
       : interaction.timestamp;
 
+  const viewCommit = (commitIndex: number) => {
+    selectTab('flame-chart');
+    selectCommitIndex(commitIndex);
+  };
+
   return (
     <div
       className={
@@ -68,6 +75,7 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
         <div
           className={styles.CommitBox}
           key={commitIndex}
+          onClick={() => viewCommit(commitIndex)}
           style={{
             backgroundColor: getGradientColor(
               Math.min(
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 64032ea8a724..827a8634fe8e 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -12,6 +12,7 @@ import { scale } from './utils';
 import styles from './Interactions.css';
 
 import type { ChartData } from './InteractionsChartBuilder';
+import type { TabID } from './ProfilerContext';
 import type { InteractionWithCommits, ProfilingSummary } from './types';
 
 export type ItemData = {|
@@ -21,7 +22,9 @@ export type ItemData = {|
   profilingSummary: ProfilingSummary,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedInteractionID: number | null,
+  selectCommitIndex: (id: number | null) => void,
   selectInteraction: (id: number | null) => void,
+  selectTab: (id: TabID) => void,
 |};
 
 export default function InteractionsAutoSizer(_: {||}) {
@@ -40,6 +43,8 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     rootID,
     selectedInteractionID,
     selectInteraction,
+    selectCommitIndex,
+    selectTab,
   } = useContext(ProfilerContext);
   const { profilingCache } = useContext(StoreContext);
 
@@ -71,14 +76,18 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
       profilingSummary,
       scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
       selectedInteractionID,
+      selectCommitIndex,
       selectInteraction,
+      selectTab,
     };
   }, [
     chartData,
     interactions,
     profilingSummary,
     selectedInteractionID,
+    selectCommitIndex,
     selectInteraction,
+    selectTab,
     width,
   ]);
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index dbfc3189b3e5..3cd6076ac2bc 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -50,7 +50,7 @@ type Context = {|
   // This value is controlled by the commit selector UI in the Profiler toolbar.
   // It impacts the flame graph and ranked charts.
   selectedCommitIndex: number | null,
-  setSelectedCommitIndex: (value: number | null) => void,
+  selectCommitIndex: (value: number | null) => void,
 
   // Which fiber is currently selected in the Ranked or Flamegraph charts?
   selectedFiberID: number | null,
@@ -125,7 +125,7 @@ function ProfilerContextController({ children }: Props) {
     0
   );
 
-  const [selectedCommitIndex, setSelectedCommitIndex] = useState<number | null>(
+  const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
     null
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
@@ -137,7 +137,7 @@ function ProfilerContextController({ children }: Props) {
   if (isProfiling) {
     batchedUpdates(() => {
       if (selectedCommitIndex !== null) {
-        setSelectedCommitIndex(null);
+        selectCommitIndex(null);
       }
       if (selectedFiberID !== null) {
         selectFiber(null);
@@ -168,7 +168,7 @@ function ProfilerContextController({ children }: Props) {
       setMinCommitDuration,
 
       selectedCommitIndex,
-      setSelectedCommitIndex,
+      selectCommitIndex,
 
       selectedFiberID,
       selectFiber,
@@ -195,7 +195,7 @@ function ProfilerContextController({ children }: Props) {
       setMinCommitDuration,
 
       selectedCommitIndex,
-      setSelectedCommitIndex,
+      selectCommitIndex,
 
       selectedFiberID,
       selectFiber,
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index c62374ab90c5..62991da49817 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -10,6 +10,7 @@
 
 .Content {
   padding: 0.5rem;
+  user-select: none;
 }
 
 .List,
@@ -20,14 +21,20 @@
 }
 
 .InteractionList {
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 
-.ListItem,
-.InteractionListItem {
+.ListItem {
   margin: 0 0 0.5rem;
 }
 
+.InteractionListItem {
+  padding: 0.25rem 0.5rem;
+}
+.InteractionListItem:hover {
+  background-color: var(--color-hover-background);
+}
+
 .Label {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index ce6616b615ab..9e31b15af197 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -10,9 +10,13 @@ import styles from './SidebarCommitInfo.css';
 export type Props = {||};
 
 export default function SidebarCommitInfo(_: Props) {
-  const { selectedCommitIndex, rendererID, rootID } = useContext(
-    ProfilerContext
-  );
+  const {
+    selectedCommitIndex,
+    rendererID,
+    rootID,
+    selectInteraction,
+    selectTab,
+  } = useContext(ProfilerContext);
 
   const { profilingCache } = useContext(StoreContext);
 
@@ -33,6 +37,11 @@ export default function SidebarCommitInfo(_: Props) {
     rootID: ((rootID: any): number),
   });
 
+  const viewInteraction = interaction => {
+    selectTab('interactions');
+    selectInteraction(interaction.id);
+  };
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>Commit information</div>
@@ -53,14 +62,18 @@ export default function SidebarCommitInfo(_: Props) {
               ms
             </span>
           </li>
-          <li className={styles.ListItem}>
+          <li className={styles.InteractionList}>
             <label className={styles.Label}>Interactions</label>:
             <ul className={styles.InteractionList}>
               {interactions.length === 0 ? (
                 <li className={styles.InteractionListItem}>None</li>
               ) : null}
               {interactions.map((interaction, index) => (
-                <li key={index} className={styles.ListItem}>
+                <li
+                  key={index}
+                  className={styles.InteractionListItem}
+                  onClick={() => viewInteraction(interaction)}
+                >
                   {interaction.name}
                 </li>
               ))}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index f2b91539cbb7..e0dbd3b4f5da 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -10,6 +10,7 @@
 
 .Content {
   padding: 0.5rem;
+  user-select: none;
 }
 
 .Name {
@@ -27,3 +28,16 @@
   height: 100%;
   color: var(--color-dim);
 }
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ListItem {
+  padding: 0.25rem 0.5rem;
+}
+.ListItem:hover {
+  background-color: var(--color-hover-background);
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 423ad29389fc..c5e788dba7f1 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -12,9 +12,13 @@ import type { InteractionWithCommits } from './types';
 export type Props = {||};
 
 export default function SidebarInteractions(_: Props) {
-  const { selectedInteractionID, rendererID, rootID } = useContext(
-    ProfilerContext
-  );
+  const {
+    selectedInteractionID,
+    rendererID,
+    rootID,
+    selectCommitIndex,
+    selectTab,
+  } = useContext(ProfilerContext);
 
   const { profilingCache } = useContext(StoreContext);
 
@@ -37,15 +41,24 @@ export default function SidebarInteractions(_: Props) {
     interaction => interaction.id === selectedInteractionID
   ): any): InteractionWithCommits);
 
+  const viewCommit = (commitIndex: number) => {
+    selectTab('flame-chart');
+    selectCommitIndex(commitIndex);
+  };
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>
         <div className={styles.Name}>{interaction.name}</div>
       </div>
       <div className={styles.Content}>
-        <ul>
+        <ul className={styles.List}>
           {interaction.commits.map(commitIndex => (
-            <li key={commitIndex}>
+            <li
+              key={commitIndex}
+              className={styles.ListItem}
+              onClick={() => viewCommit(commitIndex)}
+            >
               timestamp: {formatTime(commitTimes[commitIndex])}s
               <br />
               duration: {formatDuration(commitDurations[commitIndex])}ms
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index bf9e4e55259e..5b51f9ce346b 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -20,7 +20,7 @@ export type ItemData = {|
   maxDuration: number,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
-  setSelectedCommitIndex: (index: number) => void,
+  selectCommitIndex: (index: number) => void,
 |};
 
 type Props = {|
@@ -29,7 +29,7 @@ type Props = {|
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
-  setSelectedCommitIndex: (index: number) => void,
+  selectCommitIndex: (index: number) => void,
 |};
 
 export default function SnapshotCommitList({
@@ -38,7 +38,7 @@ export default function SnapshotCommitList({
   filteredCommitIndices,
   selectedCommitIndex,
   selectedFilteredCommitIndex,
-  setSelectedCommitIndex,
+  selectCommitIndex,
 }: Props) {
   return (
     <AutoSizer>
@@ -50,7 +50,7 @@ export default function SnapshotCommitList({
           filteredCommitIndices={filteredCommitIndices}
           selectedCommitIndex={selectedCommitIndex}
           selectedFilteredCommitIndex={selectedFilteredCommitIndex}
-          setSelectedCommitIndex={setSelectedCommitIndex}
+          selectCommitIndex={selectCommitIndex}
           width={width}
         />
       )}
@@ -65,7 +65,7 @@ type ListProps = {|
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
-  setSelectedCommitIndex: (index: number) => void,
+  selectCommitIndex: (index: number) => void,
   width: number,
 |};
 
@@ -76,7 +76,7 @@ function List({
   height,
   filteredCommitIndices,
   selectedFilteredCommitIndex,
-  setSelectedCommitIndex,
+  selectCommitIndex,
   width,
 }: ListProps) {
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
@@ -139,7 +139,7 @@ function List({
       maxDuration,
       selectedCommitIndex,
       selectedFilteredCommitIndex,
-      setSelectedCommitIndex,
+      selectCommitIndex,
     }),
     [
       commitDurations,
@@ -149,7 +149,7 @@ function List({
       maxDuration,
       selectedCommitIndex,
       selectedFilteredCommitIndex,
-      setSelectedCommitIndex,
+      selectCommitIndex,
     ]
   );
 
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 651466c5c0b1..bcca4494dc07 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -22,7 +22,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
     isMouseDown,
     maxDuration,
     selectedCommitIndex,
-    setSelectedCommitIndex,
+    selectCommitIndex,
   } = itemData;
 
   index = filteredCommitIndices[index];
@@ -30,9 +30,9 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  const handleClick = useCallback(() => setSelectedCommitIndex(index), [
+  const handleClick = useCallback(() => selectCommitIndex(index), [
     index,
-    setSelectedCommitIndex,
+    selectCommitIndex,
   ]);
 
   // Guard against commits with duration 0
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 81f72608887c..6a49e9d026ac 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -21,7 +21,7 @@ export default function SnapshotSelector(_: Props) {
     rendererID,
     rootID,
     selectedCommitIndex,
-    setSelectedCommitIndex,
+    selectCommitIndex,
   } = useContext(ProfilerContext);
 
   const { profilingCache } = useContext(StoreContext);
@@ -62,12 +62,10 @@ export default function SnapshotSelector(_: Props) {
   // Maybe this component should pass filteredCommitIndices up?
   if (selectedFilteredCommitIndex === null) {
     if (numFilteredCommits > 0) {
-      setSelectedCommitIndex(0);
+      selectCommitIndex(0);
     }
   } else if (selectedFilteredCommitIndex >= numFilteredCommits) {
-    setSelectedCommitIndex(
-      numFilteredCommits === 0 ? null : numFilteredCommits - 1
-    );
+    selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1);
   }
 
   let label = null;
@@ -86,23 +84,15 @@ export default function SnapshotSelector(_: Props) {
       ((selectedFilteredCommitIndex: any): number) + 1,
       filteredCommitIndices.length - 1
     );
-    setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [
-    selectedFilteredCommitIndex,
-    filteredCommitIndices,
-    setSelectedCommitIndex,
-  ]);
+    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
   const viewPrevCommit = useCallback(() => {
     const nextCommitIndex = Math.max(
       ((selectedFilteredCommitIndex: any): number) - 1,
       0
     );
-    setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [
-    selectedFilteredCommitIndex,
-    filteredCommitIndices,
-    setSelectedCommitIndex,
-  ]);
+    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
 
   if (rendererID === null || rootID === null) {
     return null;
@@ -136,7 +126,7 @@ export default function SnapshotSelector(_: Props) {
             filteredCommitIndices={filteredCommitIndices}
             selectedCommitIndex={selectedCommitIndex}
             selectedFilteredCommitIndex={selectedFilteredCommitIndex}
-            setSelectedCommitIndex={setSelectedCommitIndex}
+            selectCommitIndex={selectCommitIndex}
           />
         )}
         {numFilteredCommits === 0 && (

From 9d942b486a2562b7498cebdd9e76b404d9605534 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 09:58:56 -0700
Subject: [PATCH 168/814] Show commit boxes in interaxctions sidebar

---
 .../views/Profiler/SidebarInteractions.css    | 13 ++++++
 .../views/Profiler/SidebarInteractions.js     | 43 +++++++++++++++----
 2 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index e0dbd3b4f5da..f2a8432c7b22 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -29,6 +29,10 @@
   color: var(--color-dim);
 }
 
+.Commits {
+  font-weight: bold;
+}
+
 .List {
   list-style: none;
   margin: 0;
@@ -36,8 +40,17 @@
 }
 
 .ListItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   padding: 0.25rem 0.5rem;
 }
 .ListItem:hover {
   background-color: var(--color-hover-background);
 }
+
+.CommitBox {
+  width: 20px;
+  height: 20px;
+  margin-right: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index c5e788dba7f1..9159cc8d291a 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -4,6 +4,7 @@ import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
 import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
+import { getGradientColor } from './utils';
 
 import styles from './SidebarInteractions.css';
 
@@ -30,12 +31,19 @@ export default function SidebarInteractions(_: Props) {
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
+
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const { maxCommitDuration } = profilingCache.getInteractionsChartData({
+    interactions,
+    profilingSummary,
+    rootID: ((rootID: any): number),
+  });
+
+  const { commitDurations, commitTimes } = profilingSummary;
 
   const interaction = ((interactions.find(
     interaction => interaction.id === selectedInteractionID
@@ -52,6 +60,7 @@ export default function SidebarInteractions(_: Props) {
         <div className={styles.Name}>{interaction.name}</div>
       </div>
       <div className={styles.Content}>
+        <div className={styles.Commits}>Commits:</div>
         <ul className={styles.List}>
           {interaction.commits.map(commitIndex => (
             <li
@@ -59,9 +68,25 @@ export default function SidebarInteractions(_: Props) {
               className={styles.ListItem}
               onClick={() => viewCommit(commitIndex)}
             >
-              timestamp: {formatTime(commitTimes[commitIndex])}s
-              <br />
-              duration: {formatDuration(commitDurations[commitIndex])}ms
+              <div
+                className={styles.CommitBox}
+                style={{
+                  backgroundColor: getGradientColor(
+                    Math.min(
+                      1,
+                      Math.max(
+                        0,
+                        commitDurations[commitIndex] / maxCommitDuration
+                      )
+                    ) || 0
+                  ),
+                }}
+              />
+              <div>
+                timestamp: {formatTime(commitTimes[commitIndex])}s
+                <br />
+                duration: {formatDuration(commitDurations[commitIndex])}ms
+              </div>
             </li>
           ))}
         </ul>

From d973452c362ed7f9808f93663fa6219e25528864 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 10:14:28 -0700
Subject: [PATCH 169/814] Removed some outdated TODO comments

---
 shells/browser/shared/src/main.js                 |  1 -
 src/backend/agent.js                              |  3 ---
 src/backend/renderer.js                           | 11 +++++++++--
 src/devtools/views/Profiler/CommitTreeBuilder.js  |  5 ++++-
 src/devtools/views/Profiler/SnapshotCommitList.js |  1 -
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 0a596e42caa2..105e77ab7031 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -126,7 +126,6 @@ function createPanelIfReactLoaded() {
         });
       });
 
-      // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
       chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
           profilerPortalContainer = panel.container;
diff --git a/src/backend/agent.js b/src/backend/agent.js
index a5973aca07c9..fc113a9994c0 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -46,9 +46,6 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
-    // TODO (profiling) Component commits
-    // TODO (profiling) Interactions
-
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getInteractions', this.getInteractions);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 63cae9238dc2..8d9daf0fcef3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1419,7 +1419,11 @@ export function attach(
         };
       }
     }
-    // TODO (profiling) Is this right? Should I return null? Does it matter?
+
+    console.warn(
+      `getCommitDetails(): No profiling info recorded for root "${rootID}" and commit ${commitIndex}`
+    );
+
     return {
       commitIndex,
       interactions: [],
@@ -1455,7 +1459,10 @@ export function attach(
       };
     }
 
-    // TODO (profiling) Is this right? Should I return null? Does it matter?
+    console.warn(
+      `getInteractions(): No interactions recorded for root "${rootID}"`
+    );
+
     return {
       interactions: [],
       rootID,
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 95e5533c8e3d..944ecb08e0c1 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -112,7 +112,10 @@ export function getCommitTree({
     }
   }
 
-  // TODO (profiling) Should I throw here? Is this ever expected?
+  console.error(
+    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`
+  );
+
   return {
     nodes: new Map(),
     rootID,
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 5b51f9ce346b..fde83a236707 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -95,7 +95,6 @@ function List({
 
   // When the mouse is down, dragging over a commit should auto-select it.
   // This provides a nice way for users to swipe across a range of commits to compare them.
-  // TODO (profiling) This interaction may not feel as nice with suspense; reconsider it?
   const [isMouseDown, setIsMouseDown] = useState(false);
   const handleMouseDown = useCallback(() => {
     setIsMouseDown(true);

From 5718eaf0f323c50fa44ff321777f09eac5cb5a7f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 18:53:59 -0700
Subject: [PATCH 170/814] Added arrow key navigation for commits and
 interactions

---
 src/devtools/views/Elements/Tree.js           |  1 -
 src/devtools/views/Profiler/Interactions.css  |  4 ++
 src/devtools/views/Profiler/Interactions.js   | 49 ++++++++++++++-----
 .../views/Profiler/SnapshotSelector.css       |  3 ++
 .../views/Profiler/SnapshotSelector.js        | 22 ++++++++-
 5 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Elements/Tree.js b/src/devtools/views/Elements/Tree.js
index 049ef4632d3b..9354245a1247 100644
--- a/src/devtools/views/Elements/Tree.js
+++ b/src/devtools/views/Elements/Tree.js
@@ -58,7 +58,6 @@ export default function Tree(props: Props) {
           event.preventDefault();
           break;
         case 'ArrowLeft':
-          console.log('LEFT');
           selectParentElementInTree();
           break;
         case 'ArrowRight':
diff --git a/src/devtools/views/Profiler/Interactions.css b/src/devtools/views/Profiler/Interactions.css
index bc441e485e1f..935d2f221aa7 100644
--- a/src/devtools/views/Profiler/Interactions.css
+++ b/src/devtools/views/Profiler/Interactions.css
@@ -3,3 +3,7 @@
   height: 100%;
   padding: 0.5rem;
 }
+
+.FocusTarget:focus {
+  outline: none;
+}
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 827a8634fe8e..558760c8bcec 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
@@ -64,6 +64,31 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     rootID: ((rootID: any): number),
   });
 
+  const handleKeyDown = useCallback(
+    event => {
+      let index;
+      switch (event.key) {
+        case 'ArrowDown':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID
+          );
+          selectInteraction(Math.min(interactions.length - 1, index + 1));
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID
+          );
+          selectInteraction(Math.max(0, index - 1));
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [interactions, selectedInteractionID, selectInteraction]
+  );
+
   const itemData = useMemo<ItemData>(() => {
     // TODO (profiling) constants
     const labelWidth = Math.min(200, width / 5);
@@ -91,8 +116,6 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     width,
   ]);
 
-  // TODO (profiling) Up/down arrow keys to select prev/next interaction.
-
   // If a commit contains no fibers with an actualDuration > 0,
   // Display a fallback message.
   if (interactions.length === 0) {
@@ -100,14 +123,16 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   }
 
   return (
-    <FixedSizeList
-      height={height}
-      itemCount={interactions.length}
-      itemData={itemData}
-      itemSize={30}
-      width={width}
-    >
-      {InteractionListItem}
-    </FixedSizeList>
+    <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>
+      <FixedSizeList
+        height={height}
+        itemCount={interactions.length}
+        itemData={itemData}
+        itemSize={30}
+        width={width}
+      >
+        {InteractionListItem}
+      </FixedSizeList>
+    </div>
   );
 }
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 8d4fa32d1bbf..a68e5642072a 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -9,6 +9,9 @@
   margin-left: 0.25rem;
   overflow: hidden;
 }
+.Commits:focus {
+  outline: none;
+}
 
 .VRule {
   height: 20px;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 6a49e9d026ac..8965268b1eb3 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -12,8 +12,6 @@ import styles from './SnapshotSelector.css';
 
 export type Props = {||};
 
-// TODO (profiling) Left/right arrow navigation.
-
 export default function SnapshotSelector(_: Props) {
   const {
     isCommitFilterEnabled,
@@ -94,6 +92,24 @@ export default function SnapshotSelector(_: Props) {
     selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
   }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
 
+  const handleKeyDown = useCallback(
+    event => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          viewPrevCommit();
+          event.stopPropagation();
+          break;
+        case 'ArrowRight':
+          viewNextCommit();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [viewNextCommit, viewPrevCommit]
+  );
+
   if (rendererID === null || rootID === null) {
     return null;
   }
@@ -111,6 +127,7 @@ export default function SnapshotSelector(_: Props) {
       </Button>
       <div
         className={styles.Commits}
+        onKeyDown={handleKeyDown}
         style={{
           flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',
           maxWidth:
@@ -118,6 +135,7 @@ export default function SnapshotSelector(_: Props) {
               ? numFilteredCommits * maxBarWidth
               : undefined,
         }}
+        tabIndex={0}
       >
         {numFilteredCommits > 0 && (
           <SnapshotCommitList

From 3ba64e595517a7579a099709543ddc148b82e988 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 25 Mar 2019 10:18:38 -0700
Subject: [PATCH 171/814] Cleaned up edge cases around filtered commits

---
 .../Profiler/CommitFilterModalContext.js      |  35 +++++
 .../views/Profiler/CommitFlamegraph.js        | 123 ++++++++++--------
 src/devtools/views/Profiler/CommitRanked.js   | 115 +++++++++-------
 src/devtools/views/Profiler/NoCommitData.css  |   5 +
 src/devtools/views/Profiler/NoCommitData.js   |  51 +++++---
 src/devtools/views/Profiler/Profiler.js       |  24 ++--
 .../views/Profiler/SidebarCommitInfo.js       |   2 +-
 .../views/Profiler/SnapshotSelector.js        |   2 +
 .../Profiler/ToggleCommitFilterModalButton.js |  18 +++
 9 files changed, 249 insertions(+), 126 deletions(-)
 create mode 100644 src/devtools/views/Profiler/CommitFilterModalContext.js
 create mode 100644 src/devtools/views/Profiler/ToggleCommitFilterModalButton.js

diff --git a/src/devtools/views/Profiler/CommitFilterModalContext.js b/src/devtools/views/Profiler/CommitFilterModalContext.js
new file mode 100644
index 000000000000..fc68ad88a882
--- /dev/null
+++ b/src/devtools/views/Profiler/CommitFilterModalContext.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { createContext, useMemo, useState } from 'react';
+
+type Context = {|
+  isFilterModalShowing: boolean,
+  setIsFilterModalShowing: (value: boolean) => void,
+|};
+
+const CommitFilterModalContext = createContext<Context>(((null: any): Context));
+CommitFilterModalContext.displayName = 'CommitFilterModalContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function CommitFilterModalContextController({ children }: Props) {
+  const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
+
+  const value = useMemo(
+    () => ({
+      isFilterModalShowing,
+      setIsFilterModalShowing,
+    }),
+    [isFilterModalShowing]
+  );
+
+  return (
+    <CommitFilterModalContext.Provider value={value}>
+      {children}
+    </CommitFilterModalContext.Provider>
+  );
+}
+
+export { CommitFilterModalContext, CommitFilterModalContextController };
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 91a927413642..a1923303b9c0 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -13,6 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitFlamegraph.css';
 
 import type { ChartData, ChartNode } from './FlamegraphChartBuilder';
+import type { CommitDetails, CommitTree } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -24,7 +25,11 @@ export type ItemData = {|
 |};
 
 export default function CommitFlamegraphAutoSizer(_: {||}) {
-  const { selectFiber } = useContext(ProfilerContext);
+  const { profilingCache } = useContext(StoreContext);
+  const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(
+    ProfilerContext
+  );
+
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
@@ -33,58 +38,78 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
     [selectFiber]
   );
 
-  return (
-    <div className={styles.Container} onClick={deselectCurrentFiber}>
-      <AutoSizer>
-        {({ height, width }) => (
-          <CommitFlamegraph height={height} width={width} />
-        )}
-      </AutoSizer>
-    </div>
-  );
-}
-
-function CommitFlamegraph({
-  height,
-  width,
-}: {|
-  height: number,
-  width: number,
-|}) {
-  const {
-    rendererID,
-    rootID,
-    selectedCommitIndex,
-    selectFiber,
-    selectedFiberID,
-  } = useContext(ProfilerContext);
-
-  const { profilingCache } = useContext(StoreContext);
-
   const profilingSummary = profilingCache.ProfilingSummary.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
 
-  const commitDetails = profilingCache.CommitDetails.read({
-    commitIndex: ((selectedCommitIndex: any): number),
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  let commitDetails: CommitDetails | null = null;
+  let commitTree: CommitTree | null = null;
+  let chartData: ChartData | null = null;
+  if (selectedCommitIndex !== null) {
+    commitDetails = profilingCache.CommitDetails.read({
+      commitIndex: selectedCommitIndex,
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    });
+
+    commitTree = profilingCache.getCommitTree({
+      commitIndex: selectedCommitIndex,
+      profilingSummary,
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    });
+
+    chartData = profilingCache.getFlamegraphChartData({
+      commitDetails,
+      commitIndex: selectedCommitIndex,
+      commitTree,
+      rootID: ((rootID: any): number),
+    });
+  }
 
-  const commitTree = profilingCache.getCommitTree({
-    commitIndex: ((selectedCommitIndex: any): number),
-    profilingSummary,
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  if (
+    commitDetails != null &&
+    commitTree != null &&
+    chartData != null &&
+    chartData.depth > 0
+  ) {
+    return (
+      <div className={styles.Container} onClick={deselectCurrentFiber}>
+        <AutoSizer>
+          {({ height, width }) => (
+            <CommitFlamegraph
+              chartData={((chartData: any): ChartData)}
+              commitDetails={((commitDetails: any): CommitDetails)}
+              commitTree={((commitTree: any): CommitTree)}
+              height={height}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  } else {
+    return <NoCommitData />;
+  }
+}
 
-  const chartData = profilingCache.getFlamegraphChartData({
-    commitDetails,
-    commitIndex: ((selectedCommitIndex: any): number),
-    commitTree,
-    rootID: ((rootID: any): number),
-  });
+type Props = {|
+  chartData: ChartData,
+  commitDetails: CommitDetails,
+  commitTree: CommitTree,
+  height: number,
+  width: number,
+|};
+
+function CommitFlamegraph({
+  chartData,
+  commitDetails,
+  commitTree,
+  height,
+  width,
+}: Props) {
+  const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
     if (selectedFiberID === null) {
@@ -123,12 +148,6 @@ function CommitFlamegraph({
     [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]
   );
 
-  // If a commit contains no fibers with an actualDuration > 0,
-  // Display a fallback message.
-  if (chartData.depth === 0) {
-    return <NoCommitData height={height} width={width} />;
-  }
-
   return (
     <FixedSizeList
       height={height}
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 356caadde039..e13f54d81a7c 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -13,6 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitRanked.css';
 
 import type { ChartData } from './RankedChartBuilder';
+import type { CommitDetails, CommitTree } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -24,7 +25,11 @@ export type ItemData = {|
 |};
 
 export default function CommitRankedAutoSizer(_: {||}) {
-  const { selectFiber } = useContext(ProfilerContext);
+  const { profilingCache } = useContext(StoreContext);
+  const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(
+    ProfilerContext
+  );
+
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
@@ -33,50 +38,78 @@ export default function CommitRankedAutoSizer(_: {||}) {
     [selectFiber]
   );
 
-  return (
-    <div className={styles.Container} onClick={deselectCurrentFiber}>
-      <AutoSizer>
-        {({ height, width }) => <CommitRanked height={height} width={width} />}
-      </AutoSizer>
-    </div>
-  );
-}
-
-function CommitRanked({ height, width }: {| height: number, width: number |}) {
-  const {
-    rendererID,
-    rootID,
-    selectedCommitIndex,
-    selectedFiberID,
-    selectFiber,
-  } = useContext(ProfilerContext);
-
-  const { profilingCache } = useContext(StoreContext);
-
   const profilingSummary = profilingCache.ProfilingSummary.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
 
-  const commitDetails = profilingCache.CommitDetails.read({
-    commitIndex: ((selectedCommitIndex: any): number),
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  let commitDetails: CommitDetails | null = null;
+  let commitTree: CommitTree | null = null;
+  let chartData: ChartData | null = null;
+  if (selectedCommitIndex !== null) {
+    commitDetails = profilingCache.CommitDetails.read({
+      commitIndex: selectedCommitIndex,
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    });
+
+    commitTree = profilingCache.getCommitTree({
+      commitIndex: selectedCommitIndex,
+      profilingSummary,
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    });
+
+    chartData = profilingCache.getRankedChartData({
+      commitDetails,
+      commitIndex: selectedCommitIndex,
+      commitTree,
+      rootID: ((rootID: any): number),
+    });
+  }
 
-  const commitTree = profilingCache.getCommitTree({
-    commitIndex: ((selectedCommitIndex: any): number),
-    profilingSummary,
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  if (
+    commitDetails != null &&
+    commitTree != null &&
+    chartData != null &&
+    chartData.nodes.length > 0
+  ) {
+    return (
+      <div className={styles.Container} onClick={deselectCurrentFiber}>
+        <AutoSizer>
+          {({ height, width }) => (
+            <CommitRanked
+              chartData={((chartData: any): ChartData)}
+              commitDetails={((commitDetails: any): CommitDetails)}
+              commitTree={((commitTree: any): CommitTree)}
+              height={height}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  } else {
+    return <NoCommitData />;
+  }
+}
 
-  const chartData = profilingCache.getRankedChartData({
-    commitDetails,
-    commitIndex: ((selectedCommitIndex: any): number),
-    commitTree,
-    rootID: ((rootID: any): number),
-  });
+type Props = {|
+  chartData: ChartData,
+  commitDetails: CommitDetails,
+  commitTree: CommitTree,
+  height: number,
+  width: number,
+|};
+
+function CommitRanked({
+  chartData,
+  commitDetails,
+  commitTree,
+  height,
+  width,
+}: Props) {
+  const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
     () => getNodeIndex(chartData, selectedFiberID),
@@ -95,12 +128,6 @@ function CommitRanked({ height, width }: {| height: number, width: number |}) {
     [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]
   );
 
-  // If a commit contains no fibers with an actualDuration > 0,
-  // Display a fallback message.
-  if (chartData.nodes.length === 0) {
-    return <NoCommitData height={height} width={width} />;
-  }
-
   return (
     <FixedSizeList
       height={height}
diff --git a/src/devtools/views/Profiler/NoCommitData.css b/src/devtools/views/Profiler/NoCommitData.css
index 656834b3ebd4..15c7c1785e60 100644
--- a/src/devtools/views/Profiler/NoCommitData.css
+++ b/src/devtools/views/Profiler/NoCommitData.css
@@ -10,3 +10,8 @@
 .Header {
   font-size: var(--font-size-sans-large);
 }
+
+.FilterMessage {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
index 601b55296662..2ad17f3e3b0c 100644
--- a/src/devtools/views/Profiler/NoCommitData.js
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -1,26 +1,37 @@
 // @flow
 
-import React from 'react';
+import React, { useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
 
 import styles from './NoCommitData.css';
 
-export default function NoCommitData({
-  height,
-  width,
-}: {|
-  height: number,
-  width: number,
-|}) {
-  return (
-    <div className={styles.NoCommitData} style={{ height, width }}>
-      <p className={styles.Header}>
-        There is no timing data to display for the currently selected commit.
-      </p>
-      <p>
-        This can indicate that a render occurred too quickly for the timing API
-        to measure. Try selecting another commit in the upper, right-hand
-        corner.
-      </p>
-    </div>
-  );
+export default function NoCommitData(_: {||}) {
+  const { rootHasProfilingData } = useContext(ProfilerContext);
+
+  if (rootHasProfilingData) {
+    return (
+      <div className={styles.NoCommitData}>
+        <p className={styles.Header}>
+          There is no data matching the current filter criteria.
+        </p>
+        <p className={styles.FilterMessage}>
+          Try adjusting the commit filter <ToggleCommitFilterModalButton />
+        </p>
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.NoCommitData}>
+        <p className={styles.Header}>
+          There is no timing data to display for the currently selected commit.
+        </p>
+        <p>
+          This can indicate that a render occurred too quickly for the timing
+          API to measure. Try selecting another commit in the upper, right-hand
+          corner.
+        </p>
+      </div>
+    );
+  }
 }
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 97f39b8f6544..8f0276e76c16 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,10 +1,12 @@
 // @flow
 
-import React, { Suspense, useCallback, useContext, useState } from 'react';
+import React, { Suspense, useCallback, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import {
+  CommitFilterModalContext,
+  CommitFilterModalContextController,
+} from './CommitFilterModalContext';
 import { ProfilerContext } from './ProfilerContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
@@ -15,6 +17,7 @@ import ReloadAndProfileButton from './ReloadAndProfileButton';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
+import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
 
 import styles from './Profiler.css';
 
@@ -41,7 +44,11 @@ export default function Profiler({
       />
     );
   } else {
-    children = <SuspendingProfiler />;
+    children = (
+      <CommitFilterModalContextController>
+        <SuspendingProfiler />
+      </CommitFilterModalContextController>
+    );
   }
 
   return portalContainer != null
@@ -105,9 +112,10 @@ function ProfilerFallback() {
 // NOTE that the structure of this UI should mirror NonSuspendingProfiler.
 function SuspendingProfiler() {
   const { selectedTabID, selectTab } = useContext(ProfilerContext);
-  const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
+  const { isFilterModalShowing, setIsFilterModalShowing } = useContext(
+    CommitFilterModalContext
+  );
 
-  const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
   let view = null;
@@ -153,9 +161,7 @@ function SuspendingProfiler() {
             tabs={tabs}
           />
           <div className={styles.Spacer} />
-          <Button onClick={showFilterModal} title="Filter commits by duration">
-            <ButtonIcon type="filter" />
-          </Button>
+          <ToggleCommitFilterModalButton />
           <Suspense fallback={<ProfilerFallback />}>
             <SnapshotSelector />
           </Suspense>
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 9e31b15af197..aefae459f103 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -32,7 +32,7 @@ export default function SidebarCommitInfo(_: Props) {
   );
 
   const { interactions } = profilingCache.CommitDetails.read({
-    commitIndex: ((selectedCommitIndex: any): number),
+    commitIndex: selectedCommitIndex,
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 8965268b1eb3..db6b328a53c8 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -61,6 +61,8 @@ export default function SnapshotSelector(_: Props) {
   if (selectedFilteredCommitIndex === null) {
     if (numFilteredCommits > 0) {
       selectCommitIndex(0);
+    } else {
+      selectCommitIndex(null);
     }
   } else if (selectedFilteredCommitIndex >= numFilteredCommits) {
     selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1);
diff --git a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
new file mode 100644
index 000000000000..ddb7f300f9b1
--- /dev/null
+++ b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
@@ -0,0 +1,18 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import { CommitFilterModalContext } from './CommitFilterModalContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+export default function ToggleCommitFilterModalButton() {
+  const { setIsFilterModalShowing } = useContext(CommitFilterModalContext);
+
+  const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
+
+  return (
+    <Button onClick={showFilterModal} title="Filter commits by duration">
+      <ButtonIcon type="filter" />
+    </Button>
+  );
+}

From 030914fdcad02d04cb811e4707232b24e30d252f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 25 Mar 2019 10:29:25 -0700
Subject: [PATCH 172/814] Moved some shared CSS vars into CSS

---
 .../views/Profiler/InteractionListItem.css     |  4 ++--
 src/devtools/views/Profiler/Interactions.js    | 18 +++++++++++++++---
 src/devtools/views/Profiler/constants.js       |  2 ++
 src/devtools/views/root.css                    |  4 ++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
index f34920230bd6..1cdf323d55ca 100644
--- a/src/devtools/views/Profiler/InteractionListItem.css
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -34,8 +34,8 @@
 
 .CommitBox {
   position: absolute;
-  width: 10px;
-  height: 10px;
+  width: var(--interaction-commit-size);
+  height: var(--interaction-commit-size);
   background-color: var(--color-commit-did-not-render);
   cursor: pointer;
 }
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 558760c8bcec..868fb75a521c 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -90,9 +90,21 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   );
 
   const itemData = useMemo<ItemData>(() => {
-    // TODO (profiling) constants
-    const labelWidth = Math.min(200, width / 5);
-    const timelineWidth = width - labelWidth - 10;
+    const interactionCommitSize = parseInt(
+      getComputedStyle((document.body: any)).getPropertyValue(
+        '--interaction-commit-size'
+      ),
+      10
+    );
+    const interactionLabelWidth = parseInt(
+      getComputedStyle((document.body: any)).getPropertyValue(
+        '--interaction-label-width'
+      ),
+      10
+    );
+
+    const labelWidth = Math.min(interactionLabelWidth, width / 5);
+    const timelineWidth = width - labelWidth - interactionCommitSize;
 
     return {
       chartData,
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index 2a8ece16fc00..d050882f2abb 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -2,6 +2,8 @@
 
 export const barHeight = 20;
 export const barWidthThreshold = 2;
+export const interactionCommitSize = 10;
+export const interactionLabelWidth = 200;
 export const maxBarWidth = 30;
 export const minBarHeight = 5;
 export const minBarWidth = 5;
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 48f7919287de..34325488d3ad 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -110,6 +110,10 @@
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+
+  /* Constant values shared between JS and CSS */
+  --interaction-commit-size: 10px;
+  --interaction-label-width: 200px;
 }
 
 * {

From 3fa951d3c303ecca5fac1d34b649faf208345f29 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 25 Mar 2019 10:34:22 -0700
Subject: [PATCH 173/814] Cleaned up a no-selection state

---
 src/devtools/views/Profiler/Profiler.css            |  1 +
 src/devtools/views/Profiler/SidebarCommitInfo.css   | 11 +++++++++--
 src/devtools/views/Profiler/SidebarCommitInfo.js    |  2 +-
 src/devtools/views/Profiler/SidebarInteractions.css |  4 +---
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 3bf17ac9afeb..ce55714c189d 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -22,6 +22,7 @@
   flex: 1 1 100px;
   max-width: 300px;
   border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
 }
 
 .Content {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 62991da49817..38a4c7f7d046 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -4,13 +4,12 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
 }
 
 .Content {
   padding: 0.5rem;
   user-select: none;
+  border-top: 1px solid var(--color-border);
 }
 
 .List,
@@ -45,3 +44,11 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
+
+.NothingSelected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index aefae459f103..cefbb8effc28 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -21,7 +21,7 @@ export default function SidebarCommitInfo(_: Props) {
   const { profilingCache } = useContext(StoreContext);
 
   if (selectedCommitIndex === null) {
-    return null; // TODO (profiling) Use a better UI
+    return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
   const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index f2a8432c7b22..99327dbb9c18 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -4,13 +4,12 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
 }
 
 .Content {
   padding: 0.5rem;
   user-select: none;
+  border-top: 1px solid var(--color-border);
 }
 
 .Name {
@@ -21,7 +20,6 @@
 }
 
 .NothingSelected {
-  border-top: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;

From 894990919cafc8c69dfbf9bbdbc9e03728557638 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 26 Mar 2019 11:13:40 -0700
Subject: [PATCH 174/814] Fixed a tab restoration bug in browser extension

---
 shells/browser/shared/src/main.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 105e77ab7031..b010914979d6 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -110,9 +110,17 @@ function createPanelIfReactLoaded() {
 
       initBridgeAndStore();
 
+      let currentPanel = null;
+
       chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
+          if (currentPanel === panel) {
+            return;
+          }
+
+          currentPanel = panel;
           elementsPortalContainer = panel.container;
+
           if (elementsPortalContainer != null) {
             elementsPortalContainer.innerHTML = '';
             render('elements');
@@ -128,7 +136,13 @@ function createPanelIfReactLoaded() {
 
       chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
+          if (currentPanel === panel) {
+            return;
+          }
+
+          currentPanel = panel;
           profilerPortalContainer = panel.container;
+
           if (profilerPortalContainer != null) {
             profilerPortalContainer.innerHTML = '';
             render('profiler');
@@ -139,7 +153,13 @@ function createPanelIfReactLoaded() {
 
       chrome.devtools.panels.create('⚛ Settings', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
+          if (currentPanel === panel) {
+            return;
+          }
+
+          currentPanel = panel;
           settingsPortalContainer = panel.container;
+
           if (settingsPortalContainer != null) {
             settingsPortalContainer.innerHTML = '';
             render('settings');

From 691068b0a38e011a88c1a4a69be18e4d1b2b0b1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 26 Mar 2019 11:23:19 -0700
Subject: [PATCH 175/814] Suppress horizontal scroll bars in snapshot selector

---
 src/devtools/views/Profiler/SnapshotCommitList.css | 9 +++++++++
 src/devtools/views/Profiler/SnapshotCommitList.js  | 3 +++
 2 files changed, 12 insertions(+)
 create mode 100644 src/devtools/views/Profiler/SnapshotCommitList.css

diff --git a/src/devtools/views/Profiler/SnapshotCommitList.css b/src/devtools/views/Profiler/SnapshotCommitList.css
new file mode 100644
index 000000000000..7324c034b1f2
--- /dev/null
+++ b/src/devtools/views/Profiler/SnapshotCommitList.css
@@ -0,0 +1,9 @@
+.List {
+  /**
+   * The decision to suppress the default (horizontal) scroll bars is intentional.
+   * The snapshot selector is small enough that the scrollbar renders it essentially useless.
+   * There are two alternative navigation mechanisms (arrow keys and arrow buttons).
+   * If necessary, we could also expand the click-and-drag mechanism to scroll.
+   */
+  overflow-x: hidden;
+}
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index fde83a236707..16538ae1efd3 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -12,6 +12,8 @@ import { FixedSizeList } from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
 import { minBarWidth } from './constants';
 
+import styles from './SnapshotCommitList.css';
+
 export type ItemData = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
@@ -160,6 +162,7 @@ function List({
       style={{ height, width }}
     >
       <FixedSizeList
+        className={styles.List}
         direction="horizontal"
         height={height}
         itemCount={filteredCommitIndices.length}

From ea5f310fe1948ab6f50d12ff2468c5652982087e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 26 Mar 2019 13:22:55 -0700
Subject: [PATCH 176/814] Webpack config injects a __DEV_ constant

---
 shells/browser/shared/webpack.backend.js | 11 +++++++++++
 shells/browser/shared/webpack.config.js  | 25 +++++++++---------------
 shells/dev/webpack.config.js             |  3 +++
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index d09dc87c4ec2..bf158326f52b 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,8 +1,13 @@
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
+const DEVTOOLS_VERSION = JSON.parse(
+  readFileSync(resolve(__dirname, '../../../package.json'))
+).version;
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -18,6 +23,12 @@ module.exports = {
       src: resolve(__dirname, '../../../src'),
     },
   },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: true,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+    }),
+  ],
   module: {
     rules: [
       {
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 44e3d5b5c28f..5c11458ac75a 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -2,7 +2,8 @@ const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
+const NODE_ENV = process.env.NODE_ENV;
+const __DEV__ = NODE_ENV !== 'production';
 
 const DEVTOOLS_VERSION = JSON.parse(
   readFileSync(resolve(__dirname, '../../../package.json'))
@@ -27,21 +28,13 @@ module.exports = {
       src: resolve(__dirname, '../../../src'),
     },
   },
-  plugins: __DEV__
-    ? [
-        new DefinePlugin({
-          'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
-        }),
-      ]
-    : [
-        // Ensure we get production React
-        new DefinePlugin({
-          'process.env.NODE_ENV': '"production"',
-        }),
-        new DefinePlugin({
-          'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
-        }),
-      ],
+  plugins: [
+    new DefinePlugin({
+      __DEV__: false,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
   module: {
     rules: [
       {
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 0629609f3bcf..8e9ec32d2340 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -2,6 +2,8 @@ const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
 const DEVTOOLS_VERSION = JSON.parse(
   readFileSync(resolve(__dirname, '../../package.json'))
 ).version;
@@ -27,6 +29,7 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({
+      __DEV__: __DEV__,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
   ],

From 7d24e83989f76e941885a1eaee5efab592b24a3a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Mar 2019 09:41:12 -0700
Subject: [PATCH 177/814] Implemented reload-and-profile. Also fixed an couple
 of minor profiling bugs along the way

---
 shells/browser/shared/src/contentScript.js    |  18 +-
 shells/browser/shared/src/main.js             |  20 +-
 src/backend/agent.js                          |  30 +++
 src/backend/renderer.js                       |  28 +++
 src/devtools/store.js                         |  22 ++-
 .../views/Profiler/CommitTreeBuilder.js       | 174 ++++++++++--------
 .../views/Profiler/ReloadAndProfileButton.js  |  17 +-
 7 files changed, 219 insertions(+), 90 deletions(-)

diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
index 19a0ba7faaf9..68a44e21afcf 100644
--- a/shells/browser/shared/src/contentScript.js
+++ b/shells/browser/shared/src/contentScript.js
@@ -61,13 +61,17 @@ port.onDisconnect.addListener(handleDisconnect);
 
 window.addEventListener('message', handleMessageFromPage);
 
+sayHelloToBackend();
+
 // The backend waits to install the global hook until notified by the content script.
 // In the event of a page reload, the content script might be loaded before the backend is injected.
 // Because of this we need to poll the backend until it has been initialized.
-const intervalID = setInterval(() => {
-  if (backendInitialized || backendDisconnected) {
-    clearInterval(intervalID);
-  } else {
-    sayHelloToBackend();
-  }
-}, 500);
+if (!backendInitialized) {
+  const intervalID = setInterval(() => {
+    if (backendInitialized || backendDisconnected) {
+      clearInterval(intervalID);
+    } else {
+      sayHelloToBackend();
+    }
+  }, 500);
+}
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index b010914979d6..b23beb289dcd 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -12,6 +12,8 @@ import {
 } from './utils';
 import DevTools from 'src/devtools/views/DevTools';
 
+const SUPPORTS_PROFILING_KEY = 'React::DevTools::supportsProfiling';
+
 let panelCreated = false;
 
 function createPanelIfReactLoaded() {
@@ -61,8 +63,24 @@ function createPanelIfReactLoaded() {
             }
           },
         });
+        bridge.addListener('reloadAppForProfiling', () => {
+          localStorage.setItem(SUPPORTS_PROFILING_KEY, 'true');
+          chrome.devtools.inspectedWindow.eval('window.location.reload();');
+        });
 
-        store = new Store(bridge);
+        // This flag lets us tip the Store off early that we expect to be profiling.
+        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+        // after a user has clicked the "reload and profile" button.
+        let supportsProfiling = false;
+        if (localStorage.getItem(SUPPORTS_PROFILING_KEY) === 'true') {
+          supportsProfiling = true;
+          localStorage.removeItem(SUPPORTS_PROFILING_KEY);
+        }
+
+        store = new Store(bridge, {
+          supportsReloadAndProfile: true,
+          supportsProfiling,
+        });
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
diff --git a/src/backend/agent.js b/src/backend/agent.js
index fc113a9994c0..b8a5d15cd82a 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -38,11 +38,23 @@ type SetInParams = {|
   value: any,
 |};
 
+const RELOAD_AND_PROFILE_KEY = 'React::DevTools::reloadAndProfile';
+
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
 
+  constructor() {
+    super();
+
+    if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
+      this._isProfiling = true;
+
+      localStorage.removeItem(RELOAD_AND_PROFILE_KEY);
+    }
+  }
+
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
@@ -56,6 +68,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('overrideHookState', this.overrideHookState);
     bridge.addListener('overrideProps', this.overrideProps);
     bridge.addListener('overrideState', this.overrideState);
+    bridge.addListener('reloadAndProfile', this.reloadAndProfile);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('startProfiling', this.startProfiling);
@@ -63,6 +76,10 @@ export default class Agent extends EventEmitter {
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener('viewElementSource', this.viewElementSource);
+
+    if (this._isProfiling) {
+      this._bridge.send('profilingStatus', true);
+    }
   }
 
   getIDForNode(node: Object): number | null {
@@ -179,6 +196,15 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  reloadAndProfile = () => {
+    localStorage.setItem(RELOAD_AND_PROFILE_KEY, 'true');
+
+    // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
+    // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
+    // The agent can't do this in a way that is renderer agnostic.
+    this._bridge.send('reloadAppForProfiling');
+  };
+
   selectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -235,6 +261,10 @@ export default class Agent extends EventEmitter {
     rendererInterface: RendererInterface
   ) {
     this._rendererInterfaces[rendererID] = rendererInterface;
+
+    if (this._isProfiling) {
+      rendererInterface.startProfiling();
+    }
   }
 
   shutdown = () => {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8d9daf0fcef3..819d9ff7579a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -639,6 +639,17 @@ export function attach(
       operation[1] = id;
       operation[2] = treeBaseDuration;
       addOperation(operation);
+
+      const { actualDuration } = fiber;
+      if (actualDuration > 0) {
+        // If profiling is active, store durations for elements that were rendered during the commit.
+        const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
+        metadata.actualDurations.push(id, actualDuration);
+        metadata.maxActualDuration = Math.max(
+          metadata.maxActualDuration,
+          actualDuration
+        );
+      }
     }
   }
 
@@ -866,6 +877,23 @@ export function attach(
     // Hydrate all the roots for the first time.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
+
+      if (isProfiling) {
+        // If profiling is active, store commit time and duration, and the current interactions.
+        // The frontend may request this information after profiling has stopped.
+        currentCommitProfilingMetadata = {
+          actualDurations: [],
+          commitTime: performance.now() - profilingStartTime,
+          interactions: Array.from(root.memoizedInteractions).map(
+            (interaction: Interaction) => ({
+              ...interaction,
+              timestamp: interaction.timestamp - profilingStartTime,
+            })
+          ),
+          maxActualDuration: 0,
+        };
+      }
+
       mountFiber(root.current, null);
       flushPendingEvents(root);
       currentRootID = -1;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 9884897acf9b..3895689d76e6 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -27,6 +27,11 @@ const debug = (methodName, ...args) => {
   }
 };
 
+type Config = {|
+  supportsReloadAndProfile?: boolean,
+  supportsProfiling?: boolean,
+|};
+
 type ProfilingSnapshotNode = {|
   id: number,
   children: Array<number>,
@@ -86,11 +91,22 @@ export default class Store extends EventEmitter {
 
   _supportsProfiling: boolean = false;
 
-  constructor(bridge: Bridge) {
+  _supportsReloadAndProfile: boolean = false;
+
+  constructor(bridge: Bridge, config?: Config) {
     super();
 
     debug('constructor', 'subscribing to Bridge');
 
+    if (config != null) {
+      if (config.supportsProfiling) {
+        this._supportsProfiling = true;
+      }
+      if (config.supportsReloadAndProfile) {
+        this._supportsReloadAndProfile = true;
+      }
+    }
+
     this._bridge = bridge;
     bridge.addListener('operations', this.onBridgeOperations);
     bridge.addListener('profilingStatus', this.onProfilingStatus);
@@ -140,6 +156,10 @@ export default class Store extends EventEmitter {
     return this._supportsProfiling;
   }
 
+  get supportsReloadAndProfile(): boolean {
+    return this._supportsReloadAndProfile;
+  }
+
   getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
       console.warn(
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 944ecb08e0c1..6412aa819c86 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -44,71 +44,69 @@ export function getCommitTree({
   rootID: number,
   store: Store,
 |}): CommitTree {
-  if (store.profilingSnapshot.has(rootID)) {
-    if (!rootToCommitTreeMap.has(rootID)) {
-      rootToCommitTreeMap.set(rootID, []);
-    }
-
-    const commitTrees = ((rootToCommitTreeMap.get(
-      rootID
-    ): any): Array<CommitTree>);
+  if (!rootToCommitTreeMap.has(rootID)) {
+    rootToCommitTreeMap.set(rootID, []);
+  }
 
-    if (commitIndex < commitTrees.length) {
-      return commitTrees[commitIndex];
-    }
+  const commitTrees = ((rootToCommitTreeMap.get(
+    rootID
+  ): any): Array<CommitTree>);
 
-    // Commits are generated sequentially and cached.
-    // If this is the very first commit, start with the cached snapshot and apply the first mutation.
-    // Otherwise load (or generate) the previous commit and append a mutation to it.
-    if (commitIndex === 0) {
-      const nodes = new Map();
+  if (commitIndex < commitTrees.length) {
+    return commitTrees[commitIndex];
+  }
 
-      // Construct the initial tree.
-      recursivelyIniitliazeTree(
-        rootID,
-        0,
-        nodes,
-        profilingSummary.initialTreeBaseDurations,
-        store
-      );
+  // Commits are generated sequentially and cached.
+  // If this is the very first commit, start with the cached snapshot and apply the first mutation.
+  // Otherwise load (or generate) the previous commit and append a mutation to it.
+  if (commitIndex === 0) {
+    const nodes = new Map();
 
-      // Mutate the tree
-      const commitOperations = store.profilingOperations.get(rootID);
-      if (commitOperations != null && commitIndex < commitOperations.length) {
-        const commitTree = updateTree(
-          { nodes, rootID },
-          commitOperations[commitIndex]
-        );
+    // Construct the initial tree.
+    recursivelyIniitliazeTree(
+      rootID,
+      0,
+      nodes,
+      profilingSummary.initialTreeBaseDurations,
+      store
+    );
 
-        if (__DEBUG__) {
-          __printTree(commitTree);
-        }
+    // Mutate the tree
+    const commitOperations = store.profilingOperations.get(rootID);
+    if (commitOperations != null && commitIndex < commitOperations.length) {
+      const commitTree = updateTree(
+        { nodes, rootID },
+        commitOperations[commitIndex]
+      );
 
-        commitTrees.push(commitTree);
-        return commitTree;
+      if (__DEBUG__) {
+        __printTree(commitTree);
       }
-    } else {
-      const previousCommitTree = getCommitTree({
-        commitIndex: commitIndex - 1,
-        profilingSummary,
-        rendererID,
-        rootID,
-        store,
-      });
-      const commitOperations = store.profilingOperations.get(rootID);
-      if (commitOperations != null && commitIndex < commitOperations.length) {
-        const commitTree = updateTree(
-          previousCommitTree,
-          commitOperations[commitIndex]
-        );
 
-        if (__DEBUG__) {
-          __printTree(commitTree);
-        }
+      commitTrees.push(commitTree);
+      return commitTree;
+    }
+  } else {
+    const previousCommitTree = getCommitTree({
+      commitIndex: commitIndex - 1,
+      profilingSummary,
+      rendererID,
+      rootID,
+      store,
+    });
+    const commitOperations = store.profilingOperations.get(rootID);
+    if (commitOperations != null && commitIndex < commitOperations.length) {
+      const commitTree = updateTree(
+        previousCommitTree,
+        commitOperations[commitIndex]
+      );
 
-        commitTrees.push(commitTree);
-        return commitTree;
+      if (__DEBUG__) {
+        __printTree(commitTree);
       }
+
+      commitTrees.push(commitTree);
+      return commitTree;
     }
   }
 
@@ -129,26 +127,27 @@ function recursivelyIniitliazeTree(
   initialTreeBaseDurations: Map<number, number>,
   store: Store
 ): void {
-  const node = ((store.profilingSnapshot.get(id): any): Node);
-
-  nodes.set(id, {
-    id,
-    children: node.children,
-    displayName: node.displayName,
-    key: node.key,
-    parentID,
-    treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
-  });
-
-  node.children.forEach(childID =>
-    recursivelyIniitliazeTree(
-      childID,
+  const node = store.profilingSnapshot.get(id);
+  if (node != null) {
+    nodes.set(id, {
       id,
-      nodes,
-      initialTreeBaseDurations,
-      store
-    )
-  );
+      children: node.children,
+      displayName: node.displayName,
+      key: node.key,
+      parentID,
+      treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
+    });
+
+    node.children.forEach(childID =>
+      recursivelyIniitliazeTree(
+        childID,
+        id,
+        nodes,
+        initialTreeBaseDurations,
+        store
+      )
+    );
+  }
 }
 
 function updateTree(
@@ -183,7 +182,26 @@ function updateTree(
         i = i + 3;
 
         if (type === ElementTypeRoot) {
-          // No-op
+          i++; // supportsProfiling flag
+
+          debug('Add', `new root fiber ${id}`);
+
+          if (nodes.has(id)) {
+            // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
+            // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
+            // Maybe in the future we'll revisit this.
+          } else {
+            const node: Node = {
+              children: [],
+              displayName: null,
+              id,
+              key: null,
+              parentID: 0,
+              treeBaseDuration: 0, // This will be updated by a subsequent operation
+            };
+
+            nodes.set(id, node);
+          }
         } else {
           parentID = ((operations[i]: any): number);
           i++;
@@ -213,14 +231,14 @@ function updateTree(
             // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
             // Maybe in the future we'll revisit this.
           } else {
-            parentNode = getClonedNode(parentID);
-            parentNode.children = parentNode.children.concat(id);
-
             debug(
               'Add',
               `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
             );
 
+            parentNode = getClonedNode(parentID);
+            parentNode.children = parentNode.children.concat(id);
+
             const node: Node = {
               children: [],
               displayName,
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 18a940c11cad..5af7d8bf9e94 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -1,13 +1,24 @@
 // @flow
 
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
 
 export default function ReloadAndProfileButton() {
-  // TODO (profiling) Wire up reload button
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const reloadAndProfile = useCallback(() => bridge.send('reloadAndProfile'), [
+    bridge,
+  ]);
+
+  if (!store.supportsReloadAndProfile) {
+    return null;
+  }
+
   return (
-    <Button disabled title="Reload and start profiling">
+    <Button onClick={reloadAndProfile} title="Reload and start profiling">
       <ButtonIcon type="reload" />
     </Button>
   );

From 61a251f01af4012e91ce61f415b86127011b75b9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Mar 2019 09:50:19 -0700
Subject: [PATCH 178/814] Disable reload-and-profile button if no renderers
 support profiling

---
 src/devtools/views/Profiler/ReloadAndProfileButton.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 5af7d8bf9e94..ac33e1feec42 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -18,7 +18,11 @@ export default function ReloadAndProfileButton() {
   }
 
   return (
-    <Button onClick={reloadAndProfile} title="Reload and start profiling">
+    <Button
+      disabled={!store.supportsProfiling}
+      onClick={reloadAndProfile}
+      title="Reload and start profiling"
+    >
       <ButtonIcon type="reload" />
     </Button>
   );

From a450a23e318c5a8fcba5a52c8fdc2e23584650b3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 29 Mar 2019 08:53:39 -0700
Subject: [PATCH 179/814] Improved Profiler suspense boundary UI

---
 src/devtools/views/Profiler/Profiler.css         | 12 +++++++++++-
 src/devtools/views/Profiler/Profiler.js          | 16 ++++++++++------
 src/devtools/views/Profiler/SnapshotSelector.css |  7 -------
 src/devtools/views/Profiler/SnapshotSelector.js  |  1 -
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index ce55714c189d..f3718e2e601d 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -79,7 +79,7 @@
   padding: 0.5rem;
 }
 
-.Fallback {
+.ContentFallback {
   width: 100%;
   height: 100%;
   display: flex;
@@ -89,6 +89,16 @@
   color: var(--color-dim);
 }
 
+.SnapshotSelectorFallback {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
+
 .Link {
   color: var(--color-button);
 }
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 8f0276e76c16..224accdcb6a9 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -102,9 +102,12 @@ function NonSuspendingProfiler({
   );
 }
 
-// TODO (profiling) Real fallback UI
-function ProfilerFallback() {
-  return <div className={styles.Fallback}>Loading...</div>;
+function ContentFallback() {
+  return <div className={styles.ContentFallback}>Loading...</div>;
+}
+
+function SnapshotSelectorFallback() {
+  return <div className={styles.SnapshotSelectorFallback}>Loading...</div>;
 }
 
 // This view is rendered when there is profiler data (even though there may not be any for the currently selected root).
@@ -162,19 +165,20 @@ function SuspendingProfiler() {
           />
           <div className={styles.Spacer} />
           <ToggleCommitFilterModalButton />
-          <Suspense fallback={<ProfilerFallback />}>
+          <div className={styles.VRule} />
+          <Suspense fallback={<SnapshotSelectorFallback />}>
             <SnapshotSelector />
           </Suspense>
         </div>
         <div className={styles.Content}>
-          <Suspense fallback={<ProfilerFallback />}>{view}</Suspense>
+          <Suspense fallback={<ContentFallback />}>{view}</Suspense>
           {isFilterModalShowing && (
             <FilterModal dismissModal={dismissFilterModal} />
           )}
         </div>
       </div>
       <div className={styles.RightColumn}>
-        <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
+        <Suspense fallback={<ContentFallback />}>{sidebar}</Suspense>
       </div>
     </div>
   );
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index a68e5642072a..4a19d964bfac 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -13,13 +13,6 @@
   outline: none;
 }
 
-.VRule {
-  height: 20px;
-  width: 1px;
-  background-color: var(--color-border);
-  margin: 0 0.25rem;
-}
-
 .IndexLabel {
   flex: 0 0 auto;
   white-space: nowrap;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index db6b328a53c8..5502218ddfc7 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -118,7 +118,6 @@ export default function SnapshotSelector(_: Props) {
 
   return (
     <Fragment>
-      <div className={styles.VRule} />
       <span className={styles.IndexLabel}>{label}</span>
       <Button
         className={styles.Button}

From b223ec3b393ffc19e2741903ab36661f550795c3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 29 Mar 2019 23:58:42 -0700
Subject: [PATCH 180/814] Avoid flashing "Loading..." in right pane

---
 src/devtools/views/Elements/SelectedElement.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Elements/SelectedElement.js b/src/devtools/views/Elements/SelectedElement.js
index 2cec5677ba13..6b1401f5b874 100644
--- a/src/devtools/views/Elements/SelectedElement.js
+++ b/src/devtools/views/Elements/SelectedElement.js
@@ -30,7 +30,9 @@ export default function SelectedElement(_: Props) {
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
-  const inspectedElement = useInspectedElement(selectedElementID);
+  const actualInspectedElement = useInspectedElement(selectedElementID);
+  // The UI lags behind to avoid flashing a loading state.
+  const inspectedElement = useLastNonNullValue(actualInspectedElement);
 
   const highlightElement = useCallback(() => {
     if (element !== null && selectedElementID !== null) {
@@ -284,3 +286,11 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
   return inspectedElement;
 }
+
+function useLastNonNullValue<T>(value: T | null): T | null {
+  const [lastNonNullValue, setLastNonNullValue] = useState(value);
+  if (value !== null && value !== lastNonNullValue) {
+    setLastNonNullValue(value);
+  }
+  return lastNonNullValue;
+}

From 7bd8c02f1093e8f6b614f690c00a2b2d24b04d00 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 30 Mar 2019 09:01:52 -0700
Subject: [PATCH 181/814] Added export and clear buttons for Profiler, cleaned
 up record toggle

---
 src/devtools/views/ButtonIcon.js              | 18 ++++++++++++++++
 .../Profiler/ClearProfilingDataButton.js      | 21 +++++++++++++++++++
 src/devtools/views/Profiler/Profiler.js       |  6 ++++++
 src/devtools/views/Profiler/RecordToggle.css  |  8 +++++--
 .../views/Profiler/SaveProfilingDataButton.js | 15 +++++++++++++
 src/devtools/views/root.css                   |  8 +++----
 6 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/devtools/views/Profiler/ClearProfilingDataButton.js
 create mode 100644 src/devtools/views/Profiler/SaveProfilingDataButton.js

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 98bb14e5ed51..fb6a14f52221 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -5,9 +5,11 @@ import styles from './ButtonIcon.css';
 
 export type IconType =
   | 'back'
+  | 'cancel'
   | 'close'
   | 'copy'
   | 'down'
+  | 'download'
   | 'filter'
   | 'more'
   | 'next'
@@ -30,6 +32,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'back':
       pathData = PATH_BACK;
       break;
+    case 'cancel':
+      pathData = PATH_CANCEL;
+      break;
     case 'close':
       pathData = PATH_CLOSE;
       break;
@@ -39,6 +44,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'download':
+      pathData = PATH_DOWNLOAD;
+      break;
     case 'filter':
       pathData = PATH_FILTER;
       break;
@@ -97,6 +105,11 @@ const PATH_BACK = `
   10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
 `;
 
+const PATH_CANCEL = `
+  M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
+  16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
+`;
+
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
@@ -107,6 +120,11 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_DOWNLOAD = `
+  M 21.855469 8.460938 L 16.214844 8.460938 L 16.214844 0 L 7.753906 0 L 7.753906 8.460938 L 2.113281 8.460938 L 11.984375
+  18.332031 Z M 2.113281 21.152344 L 2.113281 23.972656 L 21.855469 23.972656 L 21.855469 21.152344 Z M 2.113281 21.152344
+`;
+
 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
 
 const PATH_MORE = `
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/src/devtools/views/Profiler/ClearProfilingDataButton.js
new file mode 100644
index 000000000000..23cb4f7cea5f
--- /dev/null
+++ b/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -0,0 +1,21 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import { StoreContext } from '../context';
+
+export default function ClearProfilingDataButton() {
+  const store = useContext(StoreContext);
+  const clear = useCallback(() => store.clearProfilingData(), [store]);
+
+  return (
+    <Button
+      disabled={!store.hasProfilingData}
+      onClick={clear}
+      title="Clear profiling data"
+    >
+      <ButtonIcon type="cancel" />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 224accdcb6a9..7158e2bf2959 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -8,12 +8,14 @@ import {
 } from './CommitFilterModalContext';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
+import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
 import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
+import SaveProfilingDataButton from './SaveProfilingDataButton';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
@@ -86,6 +88,8 @@ function NonSuspendingProfiler({
         <div className={styles.Toolbar}>
           <RecordToggle disabled={!supportsProfiling} />
           <ReloadAndProfileButton />
+          <ClearProfilingDataButton />
+          <SaveProfilingDataButton />
           <div className={styles.VRule} />
           <TabBar
             currentTab={null}
@@ -155,6 +159,8 @@ function SuspendingProfiler() {
         <div className={styles.Toolbar}>
           <RecordToggle />
           <ReloadAndProfileButton />
+          <ClearProfilingDataButton />
+          <SaveProfilingDataButton />
           <div className={styles.VRule} />
           <TabBar
             currentTab={selectedTabID}
diff --git a/src/devtools/views/Profiler/RecordToggle.css b/src/devtools/views/Profiler/RecordToggle.css
index bc16dfd3ac6f..7dc0c6e36536 100644
--- a/src/devtools/views/Profiler/RecordToggle.css
+++ b/src/devtools/views/Profiler/RecordToggle.css
@@ -1,7 +1,9 @@
 .ActiveRecordToggle {
   color: var(--color-record-active);
 }
-.ActiveRecordToggle:hover,
+.ActiveRecordToggle:hover {
+  color: var(--color-record-active);
+}
 .ActiveRecordToggle:focus {
   color: var(--color-record-active);
 }
@@ -12,7 +14,9 @@
 .InactiveRecordToggle {
   color: var(--color-record-inactive);
 }
-.InactiveRecordToggle:hover,
+.InactiveRecordToggle:hover {
+  color: var(--color-record-hover);
+}
 .InactiveRecordToggle:focus {
   color: var(--color-record-inactive);
 }
diff --git a/src/devtools/views/Profiler/SaveProfilingDataButton.js b/src/devtools/views/Profiler/SaveProfilingDataButton.js
new file mode 100644
index 000000000000..c95bd56190c2
--- /dev/null
+++ b/src/devtools/views/Profiler/SaveProfilingDataButton.js
@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+export default function SaveProfilingDataButton() {
+  // TODO (profiling) Support export
+
+  return (
+    <Button disabled title="Save profile...">
+      <ButtonIcon type="download" />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 34325488d3ad..be3f66e9a89e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -38,8 +38,8 @@
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.25);
   --light-color-record-active: #fc3a4b;
-  --light-color-record-hover: #000000;
-  --light-color-record-inactive: #cfd1d5;
+  --light-color-record-hover: #3578e5;
+  --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-selected-background: #0088fa;
@@ -82,8 +82,8 @@
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.25);
   --dark-color-record-active: #fc3a4b;
-  --dark-color-record-hover: #ffffff;
-  --dark-color-record-inactive: #777d88;
+  --dark-color-record-hover: #a2e9fc;
+  --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-background: #178fb9;

From 7cac619c6862ed0068a464a6d1053a964353c260 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 30 Mar 2019 09:02:02 -0700
Subject: [PATCH 182/814] Added initial support for EventComponent/EventTarget

---
 src/backend/renderer.js | 59 ++++++++++++++++++++++++++++++++++-------
 src/devtools/store.js   | 11 ++++++++
 src/devtools/types.js   | 20 +++++++-------
 3 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 819d9ff7579a..c896b77ae361 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -5,6 +5,8 @@ import {
   ElementTypeClass,
   ElementTypeFunction,
   ElementTypeContext,
+  ElementTypeEventComponent,
+  ElementTypeEventTarget,
   ElementTypeForwardRef,
   ElementTypeMemo,
   ElementTypeOtherOrUnknown,
@@ -47,6 +49,12 @@ function getInternalReactConstants(version) {
     CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',
     CONTEXT_PROVIDER_NUMBER: 0xeacd,
     CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',
+    EVENT_COMPONENT_NUMBER: 0xead5,
+    EVENT_COMPONENT_STRING: 'Symbol(react.event_component)',
+    EVENT_TARGET_NUMBER: 0xead6,
+    EVENT_TARGET_STRING: 'Symbol(react.event_target)',
+    EVENT_TARGET_TOUCH_HIT_NUMBER: 0xead7,
+    EVENT_TARGET_TOUCH_HIT_STRING: 'Symbol(react.event_target.touch_hit)',
     FORWARD_REF_NUMBER: 0xead0,
     FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',
     MEMO_NUMBER: 0xead3,
@@ -79,6 +87,8 @@ function getInternalReactConstants(version) {
       ContextProvider: 10,
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
+      EventComponent: 19, // Added in 16.9
+      EventTarget: 20, // Added in 16.9
       ForwardRef: 11,
       Fragment: 7,
       FunctionComponent: 0,
@@ -103,6 +113,8 @@ function getInternalReactConstants(version) {
       ContextProvider: 12,
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
+      EventComponent: -1, // Doesn't exist yet
+      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 13,
       Fragment: 9,
       FunctionComponent: 0,
@@ -127,6 +139,8 @@ function getInternalReactConstants(version) {
       ContextProvider: 13,
       CoroutineComponent: 7,
       CoroutineHandlerPhase: 8,
+      EventComponent: -1, // Doesn't exist yet
+      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 14,
       Fragment: 10,
       FunctionComponent: 1,
@@ -172,6 +186,8 @@ export function attach(
     FunctionComponent,
     ClassComponent,
     ContextConsumer,
+    EventComponent,
+    EventTarget,
     Fragment,
     ForwardRef,
     HostRoot,
@@ -191,6 +207,8 @@ export function attach(
     CONTEXT_CONSUMER_SYMBOL_STRING,
     CONTEXT_PROVIDER_NUMBER,
     CONTEXT_PROVIDER_SYMBOL_STRING,
+    EVENT_TARGET_TOUCH_HIT_NUMBER,
+    EVENT_TARGET_TOUCH_HIT_STRING,
     PROFILER_NUMBER,
     PROFILER_SYMBOL_STRING,
     STRICT_MODE_NUMBER,
@@ -241,13 +259,14 @@ export function attach(
       case MemoComponent:
       case SimpleMemoComponent:
         return false;
+      case EventComponent:
       case HostPortal:
       case HostComponent:
       case HostText:
       case Fragment:
         return true;
       default:
-        const typeSymbol = getTypeSymbol(fiber);
+        const typeSymbol = getTypeSymbol(fiber.type);
 
         switch (typeSymbol) {
           case CONCURRENT_MODE_NUMBER:
@@ -272,9 +291,7 @@ export function attach(
     }
   }
 
-  function getTypeSymbol(fiber: Fiber): Symbol | number {
-    const { type } = fiber;
-
+  function getTypeSymbol(type: any): Symbol | number {
     const symbolOrNumber =
       typeof type === 'object' && type !== null ? type.$$typeof : type;
 
@@ -318,6 +335,29 @@ export function attach(
           type: ElementTypeFunction,
         };
         break;
+      case EventComponent:
+        fiberData = {
+          displayName: null,
+          key,
+          type: ElementTypeEventComponent,
+        };
+        break;
+      case EventTarget:
+        switch (getTypeSymbol(elementType.type)) {
+          case EVENT_TARGET_TOUCH_HIT_NUMBER:
+          case EVENT_TARGET_TOUCH_HIT_STRING:
+            displayName = 'TouchHitTarget';
+            break;
+          default:
+            displayName = 'EventTarget';
+            break;
+        }
+        fiberData = {
+          displayName,
+          key,
+          type: ElementTypeEventTarget,
+        };
+        break;
       case ForwardRef:
         const functionName = getDisplayName(resolvedType.render, '');
         displayName =
@@ -342,7 +382,7 @@ export function attach(
       case Fragment:
         return {
           displayName: null,
-          key: null,
+          key,
           type: ElementTypeOtherOrUnknown,
         };
       case MemoComponent:
@@ -360,7 +400,7 @@ export function attach(
         };
         break;
       default:
-        const typeSymbol = getTypeSymbol(fiber);
+        const typeSymbol = getTypeSymbol(type);
 
         switch (typeSymbol) {
           case CONCURRENT_MODE_NUMBER:
@@ -1254,7 +1294,7 @@ export function attach(
         tag === ForwardRef) &&
       !!memoizedState;
 
-    const typeSymbol = getTypeSymbol(fiber);
+    const typeSymbol = getTypeSymbol(type);
 
     let canViewSource = false;
     let context = null;
@@ -1284,13 +1324,12 @@ export function attach(
       // Look for overridden value.
       let current = ((fiber: any): Fiber).return;
       while (current !== null) {
-        const currentTypeSymbol = getTypeSymbol(current);
+        const currentType = current.type;
+        const currentTypeSymbol = getTypeSymbol(currentType);
         if (
           currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||
           currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING
         ) {
-          const currentType = current.type;
-
           // 16.3.0 exposed the context object as "context"
           // PR #12501 changed it to "_context" for 16.3.1+
           // NOTE Keep in sync with getDataForFiber()
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 3895689d76e6..aabf1edcf917 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -160,6 +160,17 @@ export default class Store extends EventEmitter {
     return this._supportsReloadAndProfile;
   }
 
+  clearProfilingData(): void {
+    this._profilingOperations = new Map();
+    this._profilingSnapshot = new Map();
+
+    // Invalidate suspense cache if profiling data is being (re-)recorded.
+    // Note that we clear now because any existing data is "stale".
+    this._profilingCache.invalidate();
+
+    this.emit('isProfiling');
+  }
+
   getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
       console.warn(
diff --git a/src/devtools/types.js b/src/devtools/types.js
index de9b1529c37c..40425b72754b 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -1,16 +1,18 @@
 // @flow
 
 export const ElementTypeClass = 1;
-export const ElementTypeFunction = 2;
-export const ElementTypeContext = 3;
-export const ElementTypeForwardRef = 4;
-export const ElementTypeMemo = 5;
-export const ElementTypeOtherOrUnknown = 6;
-export const ElementTypeProfiler = 7;
-export const ElementTypeRoot = 8;
-export const ElementTypeSuspense = 9;
+export const ElementTypeEventComponent = 2;
+export const ElementTypeEventTarget = 3;
+export const ElementTypeFunction = 4;
+export const ElementTypeContext = 5;
+export const ElementTypeForwardRef = 6;
+export const ElementTypeMemo = 7;
+export const ElementTypeOtherOrUnknown = 8;
+export const ElementTypeProfiler = 9;
+export const ElementTypeRoot = 10;
+export const ElementTypeSuspense = 11;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;

From e5400f76f04a58714b41a70b6148104fb8d17cf4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 30 Mar 2019 14:16:34 -0700
Subject: [PATCH 183/814] Added save profiling data button to Profiler

---
 shells/browser/chrome/manifest.json           |  9 +++-
 shells/browser/firefox/manifest.json          |  9 +++-
 shells/browser/shared/src/background.js       | 47 ++++++++++++-------
 shells/browser/shared/src/main.js             |  8 ++++
 src/backend/agent.js                          | 22 +++++++++
 src/backend/renderer.js                       | 22 +++++++++
 src/backend/types.js                          |  1 +
 src/devtools/store.js                         | 21 +++++++--
 .../Profiler/ClearProfilingDataButton.js      |  5 +-
 .../views/Profiler/SaveProfilingDataButton.js | 24 ++++++++--
 10 files changed, 142 insertions(+), 26 deletions(-)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index c22e4b38490c..2458a4a0f5e1 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -34,7 +34,14 @@
     "persistent": false
   },
 
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "permissions": [
+    "background",
+    "downloads",
+    "tabs",
+    "file:///*",
+    "http://*/*",
+    "https://*/*"
+  ],
 
   "content_scripts": [
     {
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index e0015a59ff7a..0cff52c594a1 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -40,7 +40,14 @@
     "persistent": false
   },
 
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "permissions": [
+    "background",
+    "downloads",
+    "tabs",
+    "file:///*",
+    "http://*/*",
+    "https://*/*"
+  ],
 
   "content_scripts": [
     {
diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index ca22f3950cd2..da95e315d703 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -88,24 +88,37 @@ if (IS_FIREFOX) {
   });
 }
 
-chrome.runtime.onMessage.addListener((req, sender) => {
-  // This is sent from the hook content script.
-  // It tells us a renderer has attached.
-  if (req.hasDetectedReact && sender.tab) {
-    // We use browserAction instead of pageAction because this lets us
-    // display a custom default popup when React is *not* detected.
-    // It is specified in the manifest.
-    let reactBuildType = req.reactBuildType;
-    if (sender.url.indexOf('facebook.github.io/react') !== -1) {
-      // Cheat: We use the development version on the website because
-      // it is better for interactive examples. However we're going
-      // to get misguided bug reports if the extension highlights it
-      // as using the dev version. We're just going to special case
-      // our own documentation and cheat. It is acceptable to use dev
-      // version of React in React docs, but not in any other case.
-      reactBuildType = 'production';
+chrome.runtime.onMessage.addListener((request, sender) => {
+  if (sender.tab) {
+    // This is sent from the hook content script.
+    // It tells us a renderer has attached.
+    if (request.hasDetectedReact) {
+      // We use browserAction instead of pageAction because this lets us
+      // display a custom default popup when React is *not* detected.
+      // It is specified in the manifest.
+      let reactBuildType = request.reactBuildType;
+      if (sender.url.indexOf('facebook.github.io/react') !== -1) {
+        // Cheat: We use the development version on the website because
+        // it is better for interactive examples. However we're going
+        // to get misguided bug reports if the extension highlights it
+        // as using the dev version. We're just going to special case
+        // our own documentation and cheat. It is acceptable to use dev
+        // version of React in React docs, but not in any other case.
+        reactBuildType = 'production';
+      }
+
+      setIconAndPopup(reactBuildType, sender.tab.id);
     }
 
-    setIconAndPopup(reactBuildType, sender.tab.id);
+    if (request.downloadFile) {
+      let { contents, filename } = request;
+      if (!Array.isArray(contents)) {
+        contents = [contents];
+      }
+
+      const blob = new Blob(contents, { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      chrome.downloads.download({ filename, saveAs: true, url });
+    }
   }
 });
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index b23beb289dcd..a867972f49b1 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -67,6 +67,13 @@ function createPanelIfReactLoaded() {
           localStorage.setItem(SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
+        bridge.addListener('downloadFile', ({ contents, filename }) => {
+          chrome.runtime.sendMessage({
+            downloadFile: true,
+            contents,
+            filename,
+          });
+        });
 
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
@@ -78,6 +85,7 @@ function createPanelIfReactLoaded() {
         }
 
         store = new Store(bridge, {
+          supportsDownloads: true,
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index b8a5d15cd82a..fc0c38878604 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -58,6 +58,10 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    bridge.addListener(
+      'downloadProfilingSummary',
+      this.downloadProfilingSummary
+    );
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getInteractions', this.getInteractions);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
@@ -95,6 +99,24 @@ export default class Agent extends EventEmitter {
     return null;
   }
 
+  downloadProfilingSummary = ({
+    rendererID,
+    rootID,
+  }: {
+    rendererID: number,
+    rootID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      this._bridge.send('downloadFile', {
+        contents: renderer.getProfilingSummaryForDownload(rootID),
+        filename: 'profile-data.json',
+      });
+    }
+  };
+
   getCommitDetails = ({
     commitIndex,
     rendererID,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c896b77ae361..476630717a03 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1536,6 +1536,27 @@ export function attach(
     };
   }
 
+  function getProfilingSummaryForDownload(rootID: number): string {
+    const commitDetails = [];
+    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+      rootID
+    );
+    if (commitProfilingMetadata != null) {
+      for (let index = 0; index < commitProfilingMetadata.length; index++) {
+        commitDetails.push(getCommitDetails(rootID, index));
+      }
+    }
+    return JSON.stringify(
+      {
+        summary: getProfilingSummary(rootID),
+        interactions: getInteractions(rootID),
+        commitDetails,
+      },
+      null,
+      2
+    );
+  }
+
   function getProfilingSummary(rootID: number): ProfilingSummary {
     const interactions = new Set();
     const commitDurations = [];
@@ -1599,6 +1620,7 @@ export function attach(
     getFiberIDFromNative,
     getInteractions,
     getNativeFromReactElement,
+    getProfilingSummaryForDownload,
     getProfilingSummary,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
diff --git a/src/backend/types.js b/src/backend/types.js
index 49a4a4efa826..1384692c1916 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -89,6 +89,7 @@ export type RendererInterface = {
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
   getInteractions: (rootID: number) => Interactions,
+  getProfilingSummaryForDownload: (rootID: number) => string,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index aabf1edcf917..75fd3322c8d3 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -28,6 +28,7 @@ const debug = (methodName, ...args) => {
 };
 
 type Config = {|
+  supportsDownloads?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
 |};
@@ -89,8 +90,10 @@ export default class Store extends EventEmitter {
   // Renderer ID is needed to support inspection fiber props, state, and hooks.
   _rootIDToRendererID: Map<number, number> = new Map();
 
+  // These options may be initially set by a confiugraiton option when constructing the Store.
+  // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
+  _supportsDownloads: boolean = false;
   _supportsProfiling: boolean = false;
-
   _supportsReloadAndProfile: boolean = false;
 
   constructor(bridge: Bridge, config?: Config) {
@@ -99,10 +102,18 @@ export default class Store extends EventEmitter {
     debug('constructor', 'subscribing to Bridge');
 
     if (config != null) {
-      if (config.supportsProfiling) {
+      const {
+        supportsDownloads,
+        supportsProfiling,
+        supportsReloadAndProfile,
+      } = config;
+      if (supportsDownloads) {
+        this._supportsDownloads = true;
+      }
+      if (supportsProfiling) {
         this._supportsProfiling = true;
       }
-      if (config.supportsReloadAndProfile) {
+      if (supportsReloadAndProfile) {
         this._supportsReloadAndProfile = true;
       }
     }
@@ -152,6 +163,10 @@ export default class Store extends EventEmitter {
     return this._roots;
   }
 
+  get supportsDownloads(): boolean {
+    return this._supportsDownloads;
+  }
+
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 23cb4f7cea5f..082d3ec7b1d8 100644
--- a/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -1,17 +1,20 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { StoreContext } from '../context';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
+  const { isProfiling } = useContext(ProfilerContext);
+
   const clear = useCallback(() => store.clearProfilingData(), [store]);
 
   return (
     <Button
-      disabled={!store.hasProfilingData}
+      disabled={isProfiling || !store.hasProfilingData}
       onClick={clear}
       title="Clear profiling data"
     >
diff --git a/src/devtools/views/Profiler/SaveProfilingDataButton.js b/src/devtools/views/Profiler/SaveProfilingDataButton.js
index c95bd56190c2..70fe798770c1 100644
--- a/src/devtools/views/Profiler/SaveProfilingDataButton.js
+++ b/src/devtools/views/Profiler/SaveProfilingDataButton.js
@@ -1,14 +1,32 @@
 // @flow
 
-import React from 'react';
+import React, { useContext, useCallback } from 'react';
+import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
 
 export default function SaveProfilingDataButton() {
-  // TODO (profiling) Support export
+  const bridge = useContext(BridgeContext);
+  const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(
+    ProfilerContext
+  );
+  const store = useContext(StoreContext);
+
+  const saveProfiler = useCallback(() => {
+    bridge.send('downloadProfilingSummary', { rendererID, rootID });
+  }, [bridge, rendererID, rootID]);
+
+  if (!store.supportsDownloads) {
+    return null;
+  }
 
   return (
-    <Button disabled title="Save profile...">
+    <Button
+      disabled={isProfiling || !rootHasProfilingData}
+      onClick={saveProfiler}
+      title="Save profile..."
+    >
       <ButtonIcon type="download" />
     </Button>
   );

From bfb152f1608918020ae8356f682b37a362d3f045 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 31 Mar 2019 17:02:30 -0700
Subject: [PATCH 184/814] Import/export feature

---
 shells/browser/shared/src/background.js       |   2 +-
 shells/browser/shared/src/main.js             |   6 +-
 src/backend/agent.js                          |  24 ++--
 src/backend/renderer.js                       |  19 ++--
 src/backend/types.js                          |   2 +-
 src/devtools/ProfilingCache.js                |  99 +++++++++-------
 src/devtools/store.js                         |  46 +++++---
 src/devtools/views/ButtonIcon.js              |  17 +--
 .../views/Profiler/CommitFlamegraph.js        |   3 -
 src/devtools/views/Profiler/CommitRanked.js   |   3 -
 .../views/Profiler/CommitTreeBuilder.js       |  25 ++--
 .../views/Profiler/FlamegraphChartBuilder.js  |   9 +-
 src/devtools/views/Profiler/Interactions.js   |   1 -
 .../Profiler/InteractionsChartBuilder.js      |   4 +-
 src/devtools/views/Profiler/Profiler.css      |   5 +-
 src/devtools/views/Profiler/Profiler.js       |   6 +-
 .../views/Profiler/ProfilerContext.js         |  23 +++-
 .../Profiler/ProfilingImportExportButtons.css |  18 +++
 .../Profiler/ProfilingImportExportButtons.js  | 107 ++++++++++++++++++
 .../views/Profiler/RankedChartBuilder.js      |  10 +-
 .../views/Profiler/SaveProfilingDataButton.js |  33 ------
 .../views/Profiler/SidebarInteractions.js     |   1 -
 .../views/Profiler/SnapshotCommitList.css     |   2 +-
 .../views/Profiler/SnapshotSelector.js        |   2 +-
 src/devtools/views/Profiler/types.js          |  20 ++++
 25 files changed, 327 insertions(+), 160 deletions(-)
 create mode 100644 src/devtools/views/Profiler/ProfilingImportExportButtons.css
 create mode 100644 src/devtools/views/Profiler/ProfilingImportExportButtons.js
 delete mode 100644 src/devtools/views/Profiler/SaveProfilingDataButton.js

diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index da95e315d703..1625f3dfb4d7 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -110,7 +110,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       setIconAndPopup(reactBuildType, sender.tab.id);
     }
 
-    if (request.downloadFile) {
+    if (request.exportFile) {
       let { contents, filename } = request;
       if (!Array.isArray(contents)) {
         contents = [contents];
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index a867972f49b1..6e8f00a1e04f 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -67,9 +67,9 @@ function createPanelIfReactLoaded() {
           localStorage.setItem(SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
-        bridge.addListener('downloadFile', ({ contents, filename }) => {
+        bridge.addListener('exportFile', ({ contents, filename }) => {
           chrome.runtime.sendMessage({
-            downloadFile: true,
+            exportFile: true,
             contents,
             filename,
           });
@@ -85,7 +85,7 @@ function createPanelIfReactLoaded() {
         }
 
         store = new Store(bridge, {
-          supportsDownloads: true,
+          supportsFileDownloads: true,
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index fc0c38878604..ef363dbaae1a 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -58,10 +58,7 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
-    bridge.addListener(
-      'downloadProfilingSummary',
-      this.downloadProfilingSummary
-    );
+    bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getInteractions', this.getInteractions);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
@@ -99,10 +96,14 @@ export default class Agent extends EventEmitter {
     return null;
   }
 
-  downloadProfilingSummary = ({
+  exportProfilingSummary = ({
+    profilingOperations,
+    profilingSnapshot,
     rendererID,
     rootID,
   }: {
+    profilingOperations: Array<any>,
+    profilingSnapshot: Array<any>,
     rendererID: number,
     rootID: number,
   }) => {
@@ -110,8 +111,17 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
     } else {
-      this._bridge.send('downloadFile', {
-        contents: renderer.getProfilingSummaryForDownload(rootID),
+      const rendererData = renderer.getProfilingDataForDownload(rootID);
+      this._bridge.send('exportFile', {
+        contents: JSON.stringify(
+          {
+            ...rendererData,
+            profilingOperations,
+            profilingSnapshot,
+          },
+          null,
+          2
+        ),
         filename: 'profile-data.json',
       });
     }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 476630717a03..6a43c969ef90 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1536,7 +1536,7 @@ export function attach(
     };
   }
 
-  function getProfilingSummaryForDownload(rootID: number): string {
+  function getProfilingDataForDownload(rootID: number): Object {
     const commitDetails = [];
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
@@ -1546,15 +1546,12 @@ export function attach(
         commitDetails.push(getCommitDetails(rootID, index));
       }
     }
-    return JSON.stringify(
-      {
-        summary: getProfilingSummary(rootID),
-        interactions: getInteractions(rootID),
-        commitDetails,
-      },
-      null,
-      2
-    );
+    return {
+      version: 1,
+      profilingSummary: getProfilingSummary(rootID),
+      commitDetails,
+      interactions: getInteractions(rootID),
+    };
   }
 
   function getProfilingSummary(rootID: number): ProfilingSummary {
@@ -1620,7 +1617,7 @@ export function attach(
     getFiberIDFromNative,
     getInteractions,
     getNativeFromReactElement,
-    getProfilingSummaryForDownload,
+    getProfilingDataForDownload,
     getProfilingSummary,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
diff --git a/src/backend/types.js b/src/backend/types.js
index 1384692c1916..9e85dac6d280 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -89,7 +89,7 @@ export type RendererInterface = {
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
   getInteractions: (rootID: number) => Interactions,
-  getProfilingSummaryForDownload: (rootID: number) => string,
+  getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index fa801954705f..1699f95f8c50 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -51,8 +51,6 @@ type InteractionsParams = {|
 type GetCommitTreeParams = {|
   commitIndex: number,
   profilingSummary: ProfilingSummaryFrontend,
-  rendererID: number,
-  rootID: number,
 |};
 
 type ProfilingSummaryParams = {|
@@ -85,13 +83,19 @@ export default class ProfilingCache {
   > = createResource(
     ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
       return new Promise(resolve => {
-        if (!this._store.profilingOperations.has(rootID)) {
-          // If no profiling data was recorded for this root, skip the round trip.
-          resolve({
-            actualDurations: new Map(),
-            interactions: [],
-          });
-        } else {
+        const importedProfilingData = this._store.importedProfilingData;
+        if (importedProfilingData !== null) {
+          const { commitDetails } = (importedProfilingData: any);
+          if (commitDetails != null && commitIndex < commitDetails.length) {
+            const response = commitDetails[commitIndex];
+            this._pendingCommitDetailsMap.set(
+              `${response.rootID}-${commitIndex}`,
+              resolve
+            );
+            this.onCommitDetails(response);
+            return;
+          }
+        } else if (this._store.profilingOperations.has(rootID)) {
           this._pendingCommitDetailsMap.set(
             `${rootID}-${commitIndex}`,
             resolve
@@ -101,7 +105,16 @@ export default class ProfilingCache {
             rendererID,
             rootID,
           });
+          return;
         }
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
+          rootID,
+          commitIndex,
+          actualDurations: new Map(),
+          interactions: [],
+        });
       });
     },
     ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>
@@ -114,16 +127,25 @@ export default class ProfilingCache {
   > = createResource(
     ({ rendererID, rootID }: InteractionsParams) => {
       return new Promise(resolve => {
-        if (!this._store.profilingOperations.has(rootID)) {
-          // If no profiling data was recorded for this root, skip the round trip.
-          resolve([]);
-        } else {
+        const importedProfilingData = this._store.importedProfilingData;
+        if (importedProfilingData !== null) {
+          const { interactions } = (importedProfilingData: any);
+          if (interactions != null) {
+            this._pendingInteractionsMap.set(interactions.rootID, resolve);
+            this.onInteractions(interactions);
+            return;
+          }
+        } else if (this._store.profilingOperations.has(rootID)) {
           this._pendingInteractionsMap.set(rootID, resolve);
           this._bridge.send('getInteractions', {
             rendererID,
             rootID,
           });
+          return;
         }
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve([]);
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -135,18 +157,31 @@ export default class ProfilingCache {
   > = createResource(
     ({ rendererID, rootID }: ProfilingSummaryParams) => {
       return new Promise(resolve => {
-        if (!this._store.profilingOperations.has(rootID)) {
-          // If no profiling data was recorded for this root, skip the round trip.
-          resolve({
-            commitDurations: [],
-            commitTimes: [],
-            initialTreeBaseDurations: new Map(),
-            interactionCount: 0,
-          });
-        } else {
+        const importedProfilingData = this._store.importedProfilingData;
+        if (importedProfilingData !== null) {
+          const { profilingSummary } = (importedProfilingData: any);
+          if (profilingSummary != null) {
+            this._pendingProfileSummaryMap.set(
+              profilingSummary.rootID,
+              resolve
+            );
+            this.onProfileSummary(profilingSummary);
+            return;
+          }
+        } else if (this._store.profilingOperations.has(rootID)) {
           this._pendingProfileSummaryMap.set(rootID, resolve);
           this._bridge.send('getProfilingSummary', { rendererID, rootID });
+          return;
         }
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
+          rootID,
+          commitDurations: [],
+          commitTimes: [],
+          initialTreeBaseDurations: new Map(),
+          interactionCount: 0,
+        });
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -161,17 +196,10 @@ export default class ProfilingCache {
     bridge.addListener('profilingSummary', this.onProfileSummary);
   }
 
-  getCommitTree = ({
-    commitIndex,
-    profilingSummary,
-    rendererID,
-    rootID,
-  }: GetCommitTreeParams) =>
+  getCommitTree = ({ commitIndex, profilingSummary }: GetCommitTreeParams) =>
     getCommitTree({
       commitIndex,
       profilingSummary,
-      rendererID,
-      rootID,
       store: this._store,
     });
 
@@ -179,18 +207,15 @@ export default class ProfilingCache {
     commitDetails,
     commitIndex,
     commitTree,
-    rootID,
   }: {|
     commitDetails: CommitDetailsFrontend,
     commitIndex: number,
     commitTree: CommitTreeFrontend,
-    rootID: number,
   |}): FlamegraphChartData =>
     getFlamegraphChartData({
       commitDetails,
       commitIndex,
       commitTree,
-      rootID,
     });
 
   getInteractionsChartData = ({
@@ -200,30 +225,25 @@ export default class ProfilingCache {
   }: {|
     interactions: Array<InteractionWithCommits>,
     profilingSummary: ProfilingSummaryFrontend,
-    rootID: number,
   |}): InteractionsChartData =>
     getInteractionsChartData({
       interactions,
       profilingSummary,
-      rootID,
     });
 
   getRankedChartData = ({
     commitDetails,
     commitIndex,
     commitTree,
-    rootID,
   }: {|
     commitDetails: CommitDetailsFrontend,
     commitIndex: number,
     commitTree: CommitTreeFrontend,
-    rootID: number,
   |}): RankedChartData =>
     getRankedChartData({
       commitDetails,
       commitIndex,
       commitTree,
-      rootID,
     });
 
   invalidate() {
@@ -257,6 +277,8 @@ export default class ProfilingCache {
       }
 
       resolve({
+        rootID,
+        commitIndex,
         actualDurations: actualDurationsMap,
         interactions,
       });
@@ -291,6 +313,7 @@ export default class ProfilingCache {
       }
 
       resolve({
+        rootID,
         commitDurations,
         commitTimes,
         initialTreeBaseDurations: initialTreeBaseDurationsMap,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 75fd3322c8d3..708f3ee50b93 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -14,6 +14,10 @@ import ProfilingCache from './ProfilingCache';
 
 import type { ElementType } from './types';
 import type { Element } from './views/Elements/types';
+import type {
+  ImportedProfilingData,
+  ProfilingSnapshotNode,
+} from './views/Profiler/types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -28,18 +32,11 @@ const debug = (methodName, ...args) => {
 };
 
 type Config = {|
-  supportsDownloads?: boolean,
+  supportsFileDownloads?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
 |};
 
-type ProfilingSnapshotNode = {|
-  id: number,
-  children: Array<number>,
-  displayName: string | null,
-  key: number | string | null,
-|};
-
 export type Capabilities = {|
   supportsProfiling: boolean,
 |};
@@ -55,6 +52,9 @@ export default class Store extends EventEmitter {
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
 
+  // The user has imported a previously exported profiling session.
+  _importedProfilingData: ImportedProfilingData | null = null;
+
   // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
@@ -92,7 +92,7 @@ export default class Store extends EventEmitter {
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
-  _supportsDownloads: boolean = false;
+  _supportsFileDownloads: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 
@@ -103,12 +103,12 @@ export default class Store extends EventEmitter {
 
     if (config != null) {
       const {
-        supportsDownloads,
+        supportsFileDownloads,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
-      if (supportsDownloads) {
-        this._supportsDownloads = true;
+      if (supportsFileDownloads) {
+        this._supportsFileDownloads = true;
       }
       if (supportsProfiling) {
         this._supportsProfiling = true;
@@ -132,7 +132,21 @@ export default class Store extends EventEmitter {
 
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
-    return this._profilingOperations.size > 0;
+    return (
+      this._importedProfilingData !== null || this._profilingOperations.size > 0
+    );
+  }
+
+  get importedProfilingData(): ImportedProfilingData | null {
+    return this._importedProfilingData;
+  }
+  set importedProfilingData(value: ImportedProfilingData | null): void {
+    this._importedProfilingData = value;
+    this._profilingOperations = new Map();
+    this._profilingSnapshot = new Map();
+    this._profilingCache.invalidate();
+
+    this.emit('importedProfilingData');
   }
 
   get isProfiling(): boolean {
@@ -163,8 +177,8 @@ export default class Store extends EventEmitter {
     return this._roots;
   }
 
-  get supportsDownloads(): boolean {
-    return this._supportsDownloads;
+  get supportsFileDownloads(): boolean {
+    return this._supportsFileDownloads;
   }
 
   get supportsProfiling(): boolean {
@@ -176,6 +190,7 @@ export default class Store extends EventEmitter {
   }
 
   clearProfilingData(): void {
+    this._importedProfilingData = null;
     this._profilingOperations = new Map();
     this._profilingSnapshot = new Map();
 
@@ -600,6 +615,7 @@ export default class Store extends EventEmitter {
 
   onProfilingStatus = (isProfiling: boolean) => {
     if (isProfiling) {
+      this._importedProfilingData = null;
       this._profilingOperations = new Map();
       this._profilingSnapshot = new Map();
       this.roots.forEach(this._takeProfilingSnapshotRecursive);
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index fb6a14f52221..6d423dca00b7 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -9,8 +9,9 @@ export type IconType =
   | 'close'
   | 'copy'
   | 'down'
-  | 'download'
+  | 'export'
   | 'filter'
+  | 'import'
   | 'more'
   | 'next'
   | 'previous'
@@ -44,12 +45,15 @@ export default function ButtonIcon({ type }: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
-    case 'download':
-      pathData = PATH_DOWNLOAD;
+    case 'export':
+      pathData = PATH_EXPORT;
       break;
     case 'filter':
       pathData = PATH_FILTER;
       break;
+    case 'import':
+      pathData = PATH_IMPORT;
+      break;
     case 'more':
       pathData = PATH_MORE;
       break;
@@ -120,13 +124,12 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
-const PATH_DOWNLOAD = `
-  M 21.855469 8.460938 L 16.214844 8.460938 L 16.214844 0 L 7.753906 0 L 7.753906 8.460938 L 2.113281 8.460938 L 11.984375
-  18.332031 Z M 2.113281 21.152344 L 2.113281 23.972656 L 21.855469 23.972656 L 21.855469 21.152344 Z M 2.113281 21.152344
-`;
+const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';
 
 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
 
+const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';
+
 const PATH_MORE = `
   M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9
   13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index a1923303b9c0..a44bce868be8 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -56,15 +56,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
       profilingSummary,
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
     });
 
     chartData = profilingCache.getFlamegraphChartData({
       commitDetails,
       commitIndex: selectedCommitIndex,
       commitTree,
-      rootID: ((rootID: any): number),
     });
   }
 
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index e13f54d81a7c..238a7cbe3d02 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -56,15 +56,12 @@ export default function CommitRankedAutoSizer(_: {||}) {
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
       profilingSummary,
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
     });
 
     chartData = profilingCache.getRankedChartData({
       commitDetails,
       commitIndex: selectedCommitIndex,
       commitTree,
-      rootID: ((rootID: any): number),
     });
   }
 
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 6412aa819c86..92e85c62adaa 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -34,16 +34,14 @@ const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
 export function getCommitTree({
   commitIndex,
   profilingSummary,
-  rendererID,
-  rootID,
   store,
 }: {|
   commitIndex: number,
   profilingSummary: ProfilingSummaryFrontend,
-  rendererID: number,
-  rootID: number,
   store: Store,
 |}): CommitTree {
+  const { rootID } = profilingSummary;
+
   if (!rootToCommitTreeMap.has(rootID)) {
     rootToCommitTreeMap.set(rootID, []);
   }
@@ -56,6 +54,12 @@ export function getCommitTree({
     return commitTrees[commitIndex];
   }
 
+  const { importedProfilingData } = store;
+  const profilingOperations =
+    importedProfilingData != null
+      ? importedProfilingData.profilingOperations
+      : store.profilingOperations;
+
   // Commits are generated sequentially and cached.
   // If this is the very first commit, start with the cached snapshot and apply the first mutation.
   // Otherwise load (or generate) the previous commit and append a mutation to it.
@@ -72,7 +76,7 @@ export function getCommitTree({
     );
 
     // Mutate the tree
-    const commitOperations = store.profilingOperations.get(rootID);
+    const commitOperations = profilingOperations.get(rootID);
     if (commitOperations != null && commitIndex < commitOperations.length) {
       const commitTree = updateTree(
         { nodes, rootID },
@@ -90,11 +94,9 @@ export function getCommitTree({
     const previousCommitTree = getCommitTree({
       commitIndex: commitIndex - 1,
       profilingSummary,
-      rendererID,
-      rootID,
       store,
     });
-    const commitOperations = store.profilingOperations.get(rootID);
+    const commitOperations = profilingOperations.get(rootID);
     if (commitOperations != null && commitIndex < commitOperations.length) {
       const commitTree = updateTree(
         previousCommitTree,
@@ -127,7 +129,12 @@ function recursivelyIniitliazeTree(
   initialTreeBaseDurations: Map<number, number>,
   store: Store
 ): void {
-  const node = store.profilingSnapshot.get(id);
+  const { importedProfilingData } = store;
+  const profilingSnapshot =
+    importedProfilingData != null
+      ? importedProfilingData.profilingSnapshot
+      : store.profilingSnapshot;
+  const node = profilingSnapshot.get(id);
   if (node != null) {
     nodes.set(id, {
       id,
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 347fa113b34f..df183d63d9a1 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -28,22 +28,19 @@ export function getChartData({
   commitDetails,
   commitIndex,
   commitTree,
-  rootID,
 }: {|
   commitDetails: CommitDetails,
   commitIndex: number,
   commitTree: CommitTree,
-  rootID: number,
 |}): ChartData {
-  const key = `${rootID}-${commitIndex}`;
+  const { actualDurations, rootID } = commitDetails;
+  const { nodes } = commitTree;
 
+  const key = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(key)) {
     return ((cachedChartData.get(key): any): ChartData);
   }
 
-  const { nodes } = commitTree;
-  const { actualDurations } = commitDetails;
-
   const idToDepthMap: Map<number, number> = new Map();
   const rows: Array<Array<ChartNode>> = [];
 
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 868fb75a521c..6ce175c24562 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -61,7 +61,6 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   const chartData = profilingCache.getInteractionsChartData({
     interactions,
     profilingSummary,
-    rootID: ((rootID: any): number),
   });
 
   const handleKeyDown = useCallback(
diff --git a/src/devtools/views/Profiler/InteractionsChartBuilder.js b/src/devtools/views/Profiler/InteractionsChartBuilder.js
index 17bc9d661099..b1391a6eeae1 100644
--- a/src/devtools/views/Profiler/InteractionsChartBuilder.js
+++ b/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -12,12 +12,12 @@ const cachedChartData: Map<number, ChartData> = new Map();
 export function getChartData({
   interactions,
   profilingSummary,
-  rootID,
 }: {|
   interactions: Array<InteractionWithCommits>,
   profilingSummary: ProfilingSummary,
-  rootID: number,
 |}): ChartData {
+  const { rootID } = profilingSummary;
+
   if (cachedChartData.has(rootID)) {
     return ((cachedChartData.get(rootID): any): ChartData);
   }
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index f3718e2e601d..346257bc5ebd 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -66,8 +66,9 @@
 .VRule {
   height: 20px;
   width: 1px;
-  background-color: var(--color-border);
-  margin: 0 0.25rem;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
 }
 
 .Spacer {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 7158e2bf2959..49145e47bc96 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -15,7 +15,7 @@ import FilterModal from './FilterModal';
 import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
-import SaveProfilingDataButton from './SaveProfilingDataButton';
+import ProfilingImportExportButtons from './ProfilingImportExportButtons';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
@@ -89,7 +89,7 @@ function NonSuspendingProfiler({
           <RecordToggle disabled={!supportsProfiling} />
           <ReloadAndProfileButton />
           <ClearProfilingDataButton />
-          <SaveProfilingDataButton />
+          <ProfilingImportExportButtons />
           <div className={styles.VRule} />
           <TabBar
             currentTab={null}
@@ -160,7 +160,7 @@ function SuspendingProfiler() {
           <RecordToggle />
           <ReloadAndProfileButton />
           <ClearProfilingDataButton />
-          <SaveProfilingDataButton />
+          <ProfilingImportExportButtons />
           <div className={styles.VRule} />
           <TabBar
             currentTab={selectedTabID}
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 3cd6076ac2bc..123386e156bd 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -13,6 +13,8 @@ import { TreeContext } from '../Elements/TreeContext';
 import { StoreContext } from '../context';
 import Store from '../../store';
 
+import type { ImportedProfilingData } from './types';
+
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
 type Context = {|
@@ -66,6 +68,7 @@ ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
   hasProfilingData: boolean,
+  importedProfilingData: ImportedProfilingData | null,
   isProfiling: boolean,
 |};
 
@@ -81,24 +84,32 @@ function ProfilerContextController({ children }: Props) {
     () => ({
       getCurrentValue: () => ({
         hasProfilingData: store.hasProfilingData,
+        importedProfilingData: store.importedProfilingData,
         isProfiling: store.isProfiling,
       }),
       subscribe: (callback: Function) => {
+        store.addListener('importedProfilingData', callback);
         store.addListener('isProfiling', callback);
-        return () => store.removeListener('isProfiling', callback);
+        return () => {
+          store.removeListener('importedProfilingData', callback);
+          store.removeListener('isProfiling', callback);
+        };
       },
     }),
     [store]
   );
-  const { isProfiling, hasProfilingData } = useSubscription<
-    StoreProfilingState,
-    Store
-  >(subscription);
+  const {
+    isProfiling,
+    hasProfilingData,
+    importedProfilingData,
+  } = useSubscription<StoreProfilingState, Store>(subscription);
 
   let rendererID = null;
   let rootID = null;
   let rootHasProfilingData = false;
-  if (selectedElementID) {
+  if (importedProfilingData !== null) {
+    rootHasProfilingData = true;
+  } else if (selectedElementID) {
     rendererID = store.getRendererIDForElement(
       ((selectedElementID: any): number)
     );
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.css b/src/devtools/views/Profiler/ProfilingImportExportButtons.css
new file mode 100644
index 000000000000..edfe2b3a6c43
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.css
@@ -0,0 +1,18 @@
+.VRule {
+  height: 20px;
+  width: 1px;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
+ */
+.Input {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
new file mode 100644
index 000000000000..b97c2a317c0e
--- /dev/null
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -0,0 +1,107 @@
+// @flow
+
+import React, { Fragment, useContext, useCallback, useRef } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
+
+import styles from './ProfilingImportExportButtons.css';
+
+import type { ImportedProfilingData } from './types';
+
+export default function ProfilingImportExportButtons() {
+  const bridge = useContext(BridgeContext);
+  const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(
+    ProfilerContext
+  );
+  const store = useContext(StoreContext);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const downloadData = useCallback(() => {
+    if (rootID === null) {
+      return;
+    }
+
+    const profilingOperationsForRoot = [];
+    const operations = store.profilingOperations.get(rootID);
+    if (operations != null) {
+      operations.forEach(operations => {
+        // Convert typed Array before JSON serialization, or it will be converted to an Object.
+        profilingOperationsForRoot.push(Array.from(operations));
+      });
+    }
+
+    const profilingSnapshotForRoot = [];
+    const queue = [rootID];
+    while (queue.length) {
+      const id = queue.pop();
+      profilingSnapshotForRoot.push([id, store.profilingSnapshot.get(id)]);
+    }
+
+    bridge.send('exportProfilingSummary', {
+      profilingOperations: [[rootID, profilingOperationsForRoot]],
+      profilingSnapshot: profilingSnapshotForRoot,
+      rendererID,
+      rootID,
+    });
+  }, [
+    bridge,
+    rendererID,
+    rootID,
+    store.profilingOperations,
+    store.profilingSnapshot,
+  ]);
+
+  const uploadData = useCallback(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.click();
+    }
+  }, []);
+
+  const handleFiles = useCallback(() => {
+    const input = inputRef.current;
+    if (input !== null && input.files.length > 0) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => {
+        const data = JSON.parse((fileReader.result: any));
+        data.profilingOperations = new Map(data.profilingOperations);
+        data.profilingSnapshot = new Map(data.profilingSnapshot);
+
+        // TODO (profiling) Version check; warn if older version.
+
+        store.importedProfilingData = ((data: any): ImportedProfilingData);
+      });
+      fileReader.readAsText(input.files[0]);
+    }
+  }, [store]);
+
+  return (
+    <Fragment>
+      <div className={styles.VRule} />
+      <input
+        ref={inputRef}
+        className={styles.Input}
+        type="file"
+        onChange={handleFiles}
+      />
+      <Button
+        disabled={isProfiling}
+        onClick={uploadData}
+        title="Load profile..."
+      >
+        <ButtonIcon type="import" />
+      </Button>
+      {store.supportsFileDownloads && (
+        <Button
+          disabled={isProfiling || !rootHasProfilingData}
+          onClick={downloadData}
+          title="Save profile..."
+        >
+          <ButtonIcon type="export" />
+        </Button>
+      )}
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index bf673f05d61a..f900a6d3f0a6 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -22,25 +22,23 @@ export function getChartData({
   commitDetails,
   commitIndex,
   commitTree,
-  rootID,
 }: {|
   commitDetails: CommitDetails,
   commitIndex: number,
   commitTree: CommitTree,
-  rootID: number,
 |}): ChartData {
-  const key = `${rootID}-${commitIndex}`;
+  const { actualDurations, rootID } = commitDetails;
+  const { nodes } = commitTree;
 
+  const key = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(key)) {
     return ((cachedChartData.get(key): any): ChartData);
   }
 
-  const { nodes } = commitTree;
-
   let maxSelfDuration = 0;
 
   const chartNodes: Array<ChartNode> = [];
-  commitDetails.actualDurations.forEach((actualDuration, id) => {
+  actualDurations.forEach((actualDuration, id) => {
     const node = ((nodes.get(id): any): Node);
 
     // Don't show the root node in this chart.
diff --git a/src/devtools/views/Profiler/SaveProfilingDataButton.js b/src/devtools/views/Profiler/SaveProfilingDataButton.js
deleted file mode 100644
index 70fe798770c1..000000000000
--- a/src/devtools/views/Profiler/SaveProfilingDataButton.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// @flow
-
-import React, { useContext, useCallback } from 'react';
-import { ProfilerContext } from './ProfilerContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import { BridgeContext, StoreContext } from '../context';
-
-export default function SaveProfilingDataButton() {
-  const bridge = useContext(BridgeContext);
-  const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(
-    ProfilerContext
-  );
-  const store = useContext(StoreContext);
-
-  const saveProfiler = useCallback(() => {
-    bridge.send('downloadProfilingSummary', { rendererID, rootID });
-  }, [bridge, rendererID, rootID]);
-
-  if (!store.supportsDownloads) {
-    return null;
-  }
-
-  return (
-    <Button
-      disabled={isProfiling || !rootHasProfilingData}
-      onClick={saveProfiler}
-      title="Save profile..."
-    >
-      <ButtonIcon type="download" />
-    </Button>
-  );
-}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 9159cc8d291a..22fb062e6859 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -40,7 +40,6 @@ export default function SidebarInteractions(_: Props) {
   const { maxCommitDuration } = profilingCache.getInteractionsChartData({
     interactions,
     profilingSummary,
-    rootID: ((rootID: any): number),
   });
 
   const { commitDurations, commitTimes } = profilingSummary;
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.css b/src/devtools/views/Profiler/SnapshotCommitList.css
index 7324c034b1f2..53faae5c3812 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.css
+++ b/src/devtools/views/Profiler/SnapshotCommitList.css
@@ -5,5 +5,5 @@
    * There are two alternative navigation mechanisms (arrow keys and arrow buttons).
    * If necessary, we could also expand the click-and-drag mechanism to scroll.
    */
-  overflow-x: hidden;
+  overflow-x: hidden !important;
 }
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 5502218ddfc7..537b7155171a 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -112,7 +112,7 @@ export default function SnapshotSelector(_: Props) {
     [viewNextCommit, viewPrevCommit]
   );
 
-  if (rendererID === null || rootID === null) {
+  if (commitDurations.length === 0) {
     return null;
   }
 
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 6efa951bd153..fc7d22e770cd 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -28,11 +28,15 @@ export type InteractionWithCommits = {|
 export type Interactions = Array<InteractionWithCommits>;
 
 export type CommitDetails = {|
+  rootID: number,
+  commitIndex: number,
   actualDurations: Map<number, number>,
   interactions: Array<Interaction>,
 |};
 
 export type ProfilingSummary = {|
+  rootID: number,
+
   // Commit durations
   commitDurations: Array<number>,
 
@@ -44,3 +48,19 @@ export type ProfilingSummary = {|
 
   interactionCount: number,
 |};
+
+export type ProfilingSnapshotNode = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+|};
+
+export type ImportedProfilingData = {|
+  version: number,
+  profilingOperations: Map<number, Array<Uint32Array>>,
+  profilingSnapshot: Map<number, ProfilingSnapshotNode>,
+  commitDetails: CommitDetails,
+  interactions: Interactions,
+  profilingSummary: ProfilingSummary,
+|};

From 628c1b2f08d8d3bf42a090753058c8c1fbed942a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 31 Mar 2019 19:18:06 -0700
Subject: [PATCH 185/814] Disable export profiling data option in Firefox.
 (downloads.download seems to just fail silently.)

---
 shells/browser/shared/src/main.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 6e8f00a1e04f..0b850a1b1050 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -84,8 +84,10 @@ function createPanelIfReactLoaded() {
           localStorage.removeItem(SUPPORTS_PROFILING_KEY);
         }
 
+        const browserName = getBrowserName();
+
         store = new Store(bridge, {
-          supportsFileDownloads: true,
+          supportsFileDownloads: browserName === 'Chrome',
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
@@ -104,7 +106,7 @@ function createPanelIfReactLoaded() {
           root.render(
             createElement(DevTools, {
               bridge,
-              browserName: getBrowserName(),
+              browserName,
               browserTheme: getBrowserTheme(),
               elementsPortalContainer,
               overrideTab,

From e634777027bf8e63cffe85b1ce727895193931b5 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Mon, 1 Apr 2019 10:25:57 -0300
Subject: [PATCH 186/814] Fix casing on store import

---
 shells/browser/shared/src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 0b850a1b1050..08befa651b06 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -3,7 +3,7 @@
 import { createElement } from 'react';
 import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
-import Store from 'src/devtools/Store';
+import Store from 'src/devtools/store';
 import inject from './inject';
 import {
   createViewElementSource,

From 2c14f3e88e00a99ad81ba74eecbcda2afc8d8d94 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Apr 2019 07:48:04 -0700
Subject: [PATCH 187/814] Inject early on when reloading-and-profiling

---
 shells/browser/chrome/manifest.json     |  7 +++-
 shells/browser/firefox/manifest.json    |  7 +++-
 shells/browser/shared/src/GlobalHook.js | 50 ++++++++++++++++++-------
 shells/browser/shared/src/renderer.js   | 21 +++++++++++
 shells/browser/shared/webpack.config.js |  1 +
 src/backend/agent.js                    |  4 +-
 src/backend/index.js                    | 12 +++++-
 src/backend/renderer.js                 |  9 +++++
 src/constants.js                        |  2 +
 src/hook.js                             | 14 +++++++
 10 files changed, 107 insertions(+), 20 deletions(-)
 create mode 100644 shells/browser/shared/src/renderer.js

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 2458a4a0f5e1..6a26c7b21af5 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -27,7 +27,12 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/backend.js",
+    "build/renderer.js"
+  ],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 0cff52c594a1..7f6a1281b5e9 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -33,7 +33,12 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/backend.js",
+    "build/renderer.js"
+  ],
 
   "background": {
     "scripts": ["build/background.js"],
diff --git a/shells/browser/shared/src/GlobalHook.js b/shells/browser/shared/src/GlobalHook.js
index 9ccab3bb8a2a..074b289db6d3 100644
--- a/shells/browser/shared/src/GlobalHook.js
+++ b/shells/browser/shared/src/GlobalHook.js
@@ -2,13 +2,24 @@
 
 import nullthrows from 'nullthrows';
 import { installHook } from 'src/hook';
+import { RELOAD_AND_PROFILE_KEY } from 'src/constants';
+
+function injectCode(code) {
+  const script = document.createElement('script');
+  script.textContent = code;
+
+  // This script runs before the <head> element is created,
+  // so we add the script to <html> instead.
+  nullthrows(document.documentElement).appendChild(script);
+  nullthrows(script.parentNode).removeChild(script);
+}
 
 let lastDetectionResult;
 
-// We want to detect when a renderer attaches, and notify the "background
-// page" (which is shared between tabs and can highlight the React icon).
-// Currently we are in "content script" context, so we can't listen
-// to the hook directly (it will be injected directly into the page).
+// We want to detect when a renderer attaches, and notify the "background page"
+// (which is shared between tabs and can highlight the React icon).
+// Currently we are in "content script" context, so we can't listen to the hook directly
+// (it will be injected directly into the page).
 // So instead, the hook will use postMessage() to pass message to us here.
 // And when this happens, we'll send a message to the "background page".
 window.addEventListener('message', function(evt) {
@@ -51,14 +62,27 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;
 window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
+// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
+if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
+  const rendererURL = chrome.runtime.getURL('build/renderer.js');
+  let rendererCode;
+
+  // We need to inject in time to catch the initial mount.
+  // This means we need to synchronously read the renderer code itself,
+  // and synchronously inject it into the page.
+  // There are very few ways to actually do this.
+  // This seems to be the best approach.
+  const request = new XMLHttpRequest();
+  request.addEventListener('load', function() {
+    rendererCode = this.responseText;
+  });
+  request.open('GET', rendererURL, false);
+  request.send();
+  injectCode(rendererCode);
+}
+
 // Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the
 // devtools are installed (and skip its suggestion to install the devtools).
-const js =
-  ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact;
-
-// This script runs before the <head> element is created, so we add the script
-// to <html> instead.
-const script = document.createElement('script');
-script.textContent = js;
-nullthrows(document.documentElement).appendChild(script);
-nullthrows(script.parentNode).removeChild(script);
+injectCode(
+  ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact
+);
diff --git a/shells/browser/shared/src/renderer.js b/shells/browser/shared/src/renderer.js
new file mode 100644
index 000000000000..5fcc38a8ca75
--- /dev/null
+++ b/shells/browser/shared/src/renderer.js
@@ -0,0 +1,21 @@
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note because Chrome content scripts cannot directly modify the window object,
+ * we are evaling this function by inserting a script tag.
+ * That's why we have to inline the whole event emitter implementation here.
+ *
+ * @flow
+ */
+
+import { attach } from 'src/backend/renderer';
+
+Object.defineProperty(
+  window,
+  '__REACT_DEVTOOLS_ATTACH__',
+  ({
+    enumerable: false,
+    get() {
+      return attach;
+    },
+  }: Object)
+);
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 5c11458ac75a..b33c9248dd2c 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -18,6 +18,7 @@ module.exports = {
     inject: './src/GlobalHook.js',
     main: './src/main.js',
     panel: './src/panel.js',
+    renderer: './src/renderer.js',
   },
   output: {
     path: __dirname + '/build',
diff --git a/src/backend/agent.js b/src/backend/agent.js
index ef363dbaae1a..dab48def1392 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,7 +1,7 @@
 // @flow
 
 import EventEmitter from 'events';
-import { __DEBUG__ } from '../constants';
+import { RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
 import type { RendererID, RendererInterface } from './types';
@@ -38,8 +38,6 @@ type SetInParams = {|
   value: any,
 |};
 
-const RELOAD_AND_PROFILE_KEY = 'React::DevTools::reloadAndProfile';
-
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _isProfiling: boolean = false;
diff --git a/src/backend/index.js b/src/backend/index.js
index 4b08474056b8..a45c843c13fb 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -33,8 +33,16 @@ export function initBackend(
   ];
 
   const attachRenderer = (id: number, renderer: ReactRenderer) => {
-    const rendererInterface = attach(hook, id, renderer, global);
-    hook.rendererInterfaces.set(id, rendererInterface);
+    let rendererInterface = hook.rendererInterfaces.get(id);
+
+    // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
+    if (!rendererInterface) {
+      rendererInterface = attach(hook, id, renderer, global);
+
+      hook.rendererInterfaces.set(id, rendererInterface);
+    }
+
+    // Notify the DevTools frontend about any renderers that were attached early.
     hook.emit('renderer-attached', {
       id,
       renderer,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 6a43c969ef90..f0a3db897ac7 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1595,6 +1595,10 @@ export function attach(
   }
 
   function startProfiling() {
+    if (isProfiling) {
+      return;
+    }
+
     // Capture initial values as of the time profiling starts.
     // It's important we snapshot both the durations and the id-to-root map,
     // since either of these may change during the profiling session
@@ -1611,6 +1615,11 @@ export function attach(
     isProfiling = false;
   }
 
+  // Automatically start profiling so that we don't miss timing info from initial "mount".
+  if (localStorage.getItem('React::DevTools::reloadAndProfile') === 'true') {
+    startProfiling();
+  }
+
   return {
     cleanup,
     getCommitDetails,
diff --git a/src/constants.js b/src/constants.js
index 1800fa800115..3523aa5214be 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,4 +5,6 @@ export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
+export const RELOAD_AND_PROFILE_KEY = 'React::DevTools::reloadAndProfile';
+
 export const __DEBUG__ = false;
diff --git a/src/hook.js b/src/hook.js
index e5d66c40accb..5eaf9b63fd28 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -79,6 +79,20 @@ export function installHook(target: any): DevToolsHook | null {
 
     hook.emit('renderer', { id, renderer, reactBuildType });
 
+    // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
+    // Otherwise the renderer won't yet exist and we can skip this step.
+    const attach = target.__REACT_DEVTOOLS_ATTACH__;
+    if (typeof attach === 'function') {
+      const rendererInterface = attach(hook, id, renderer, target);
+      hook.rendererInterfaces.set(id, rendererInterface);
+
+      /*hook.emit('renderer-attached', {
+        id,
+        renderer,
+        rendererInterface,
+      });*/
+    }
+
     return id;
   }
 

From 74cd1a5d29dc670788ac2955495150f57d911db7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Apr 2019 09:05:40 -0700
Subject: [PATCH 188/814] Misc cleanup of comments and localStorage key names

---
 shells/browser/shared/src/renderer.js          |  9 +++++----
 src/backend/index.js                           |  3 ++-
 src/backend/renderer.js                        |  3 ++-
 src/devtools/views/Profiler/ProfilerContext.js |  2 +-
 src/devtools/views/Settings/SettingsContext.js |  7 +++++--
 src/hook.js                                    | 10 ++--------
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/shells/browser/shared/src/renderer.js b/shells/browser/shared/src/renderer.js
index 5fcc38a8ca75..c4cc4c6f55cc 100644
--- a/shells/browser/shared/src/renderer.js
+++ b/shells/browser/shared/src/renderer.js
@@ -1,8 +1,9 @@
 /**
- * Install the hook on window, which is an event emitter.
- * Note because Chrome content scripts cannot directly modify the window object,
- * we are evaling this function by inserting a script tag.
- * That's why we have to inline the whole event emitter implementation here.
+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
+ * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.
+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
+ * The normal case (not a reload-and-profile) will not make use of this entry point though.
  *
  * @flow
  */
diff --git a/src/backend/index.js b/src/backend/index.js
index a45c843c13fb..efa6e83489e7 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -42,7 +42,8 @@ export function initBackend(
       hook.rendererInterfaces.set(id, rendererInterface);
     }
 
-    // Notify the DevTools frontend about any renderers that were attached early.
+    // Notify the DevTools frontend about new renderers.
+    // This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).
     hook.emit('renderer-attached', {
       id,
       renderer,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f0a3db897ac7..8f9d866a41b4 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -18,6 +18,7 @@ import { getDisplayName, utfEncodeString } from '../utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
+  RELOAD_AND_PROFILE_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
@@ -1616,7 +1617,7 @@ export function attach(
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
-  if (localStorage.getItem('React::DevTools::reloadAndProfile') === 'true') {
+  if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
     startProfiling();
   }
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 123386e156bd..b50cd12f98d5 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -130,7 +130,7 @@ function ProfilerContextController({ children }: Props) {
   const [
     isCommitFilterEnabled,
     setIsCommitFilterEnabled,
-  ] = useLocalStorage<boolean>('isCommitFilterEnabled', false);
+  ] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
   const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
     'minCommitDuration',
     0
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4e51b5554ecd..c47fc224b4ad 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -41,10 +41,13 @@ function SettingsContextController({
   settingsPortalContainer,
 }: Props) {
   const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
-    'displayDensity',
+    'React::DevTools::displayDensity',
     'compact'
   );
-  const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
+  const [theme, setTheme] = useLocalStorage<Theme>(
+    'React::DevTools::theme',
+    'auto'
+  );
 
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
diff --git a/src/hook.js b/src/hook.js
index 5eaf9b63fd28..fa960d73bea1 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -77,22 +77,16 @@ export function installHook(target: any): DevToolsHook | null {
       ? 'deadcode'
       : detectReactBuildType(renderer);
 
-    hook.emit('renderer', { id, renderer, reactBuildType });
-
     // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
     // Otherwise the renderer won't yet exist and we can skip this step.
     const attach = target.__REACT_DEVTOOLS_ATTACH__;
     if (typeof attach === 'function') {
       const rendererInterface = attach(hook, id, renderer, target);
       hook.rendererInterfaces.set(id, rendererInterface);
-
-      /*hook.emit('renderer-attached', {
-        id,
-        renderer,
-        rendererInterface,
-      });*/
     }
 
+    hook.emit('renderer', { id, renderer, reactBuildType });
+
     return id;
   }
 

From f5f7cb5bdf7822a65b772ccdb901aa678f645c45 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Apr 2019 14:29:52 -0700
Subject: [PATCH 189/814] Fixed some missing operations that could happen after
 reload-and-profile

---
 src/backend/index.js                          |  5 +-
 src/backend/renderer.js                       | 75 ++++++++++++-------
 src/backend/types.js                          |  2 +-
 .../views/Profiler/CommitTreeBuilder.js       |  7 +-
 .../views/Profiler/FlamegraphChartBuilder.js  |  5 ++
 .../views/Profiler/RankedChartBuilder.js      |  4 +
 6 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index efa6e83489e7..298d06a121e7 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -23,7 +23,10 @@ export function initBackend(
         rendererInterface: RendererInterface,
       }) => {
         agent.setRendererInterface(id, rendererInterface);
-        rendererInterface.walkTree();
+
+        // Now that the Store and the renderer interface are connected,
+        // it's time to flush the pending operation codes to the frontend.
+        rendererInterface.flushInitialOperations();
       }
     ),
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8f9d866a41b4..821060fc788a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -567,6 +567,7 @@ export function attach(
   }
 
   let pendingOperations: Uint32Array = new Uint32Array(0);
+  let pendingOperationsQueue: Array<Uint32Array> | null = [];
 
   function addOperation(
     newAction: Uint32Array,
@@ -604,7 +605,16 @@ export function attach(
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
     // so we do no longer need to dispatch a separate root-committed event.
-    hook.emit('operations', pendingOperations);
+    if (pendingOperationsQueue !== null) {
+      // Until the frontend has been connected, store the tree operations.
+      // This will let us avoid walking the tree later when the frontend connects,
+      // and it enables the Profiler's reload-and-profile functionality to work as well.
+      pendingOperationsQueue.push(pendingOperations);
+    } else {
+      // If we've already connected to the frontend, just pass the operations through.
+      hook.emit('operations', pendingOperations);
+    }
+
     pendingOperations = new Uint32Array(0);
   }
 
@@ -914,31 +924,46 @@ export function attach(
     // We don't patch any methods so there is no cleanup.
   }
 
-  function walkTree() {
-    // Hydrate all the roots for the first time.
-    hook.getFiberRoots(rendererID).forEach(root => {
-      currentRootID = getFiberID(getPrimaryFiber(root.current));
+  function flushInitialOperations() {
+    const localPendingOperationsQueue = pendingOperationsQueue;
 
-      if (isProfiling) {
-        // If profiling is active, store commit time and duration, and the current interactions.
-        // The frontend may request this information after profiling has stopped.
-        currentCommitProfilingMetadata = {
-          actualDurations: [],
-          commitTime: performance.now() - profilingStartTime,
-          interactions: Array.from(root.memoizedInteractions).map(
-            (interaction: Interaction) => ({
-              ...interaction,
-              timestamp: interaction.timestamp - profilingStartTime,
-            })
-          ),
-          maxActualDuration: 0,
-        };
-      }
+    pendingOperationsQueue = null;
 
-      mountFiber(root.current, null);
-      flushPendingEvents(root);
-      currentRootID = -1;
-    });
+    if (
+      localPendingOperationsQueue !== null &&
+      localPendingOperationsQueue.length > 0
+    ) {
+      // We may have already queued up some operations before the frontend connected
+      // If so, let the frontend know about them.
+      localPendingOperationsQueue.forEach(pendingOperations => {
+        hook.emit('operations', pendingOperations);
+      });
+    } else {
+      // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
+      hook.getFiberRoots(rendererID).forEach(root => {
+        currentRootID = getFiberID(getPrimaryFiber(root.current));
+
+        if (isProfiling) {
+          // If profiling is active, store commit time and duration, and the current interactions.
+          // The frontend may request this information after profiling has stopped.
+          currentCommitProfilingMetadata = {
+            actualDurations: [],
+            commitTime: performance.now() - profilingStartTime,
+            interactions: Array.from(root.memoizedInteractions).map(
+              (interaction: Interaction) => ({
+                ...interaction,
+                timestamp: interaction.timestamp - profilingStartTime,
+              })
+            ),
+            maxActualDuration: 0,
+          };
+        }
+
+        mountFiber(root.current, null);
+        flushPendingEvents(root);
+        currentRootID = -1;
+      });
+    }
   }
 
   function handleCommitFiberUnmount(fiber) {
@@ -1623,6 +1648,7 @@ export function attach(
 
   return {
     cleanup,
+    flushInitialOperations,
     getCommitDetails,
     getFiberIDFromNative,
     getInteractions,
@@ -1641,6 +1667,5 @@ export function attach(
     setInState,
     startProfiling,
     stopProfiling,
-    walkTree,
   };
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index 9e85dac6d280..8768715d4153 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -82,6 +82,7 @@ export type ProfilingSummary = {|
 
 export type RendererInterface = {
   cleanup: () => void,
+  flushInitialOperations: () => void,
   getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
   getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getFiberIDFromNative: (
@@ -108,7 +109,6 @@ export type RendererInterface = {
   setInState: (id: number, path: Array<string | number>, value: any) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
-  walkTree: () => void,
 };
 
 export type Handler = (data: any) => void;
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 92e85c62adaa..2f714aaa9d9f 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -112,14 +112,9 @@ export function getCommitTree({
     }
   }
 
-  console.error(
+  throw Error(
     `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`
   );
-
-  return {
-    nodes: new Map(),
-    rootID,
-  };
 }
 
 function recursivelyIniitliazeTree(
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index df183d63d9a1..9a7339cd0165 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -56,6 +56,11 @@ export function getChartData({
     idToDepthMap.set(id, currentDepth);
 
     const node = ((nodes.get(id): any): Node);
+
+    if (node == null) {
+      throw Error(`Could not find node with id "${id}" in commit tree`);
+    }
+
     const name = node.displayName || 'Unknown';
 
     const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index f900a6d3f0a6..b514cac3bc7f 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -41,6 +41,10 @@ export function getChartData({
   actualDurations.forEach((actualDuration, id) => {
     const node = ((nodes.get(id): any): Node);
 
+    if (node == null) {
+      throw Error(`Could not find node with id "${id}" in commit tree`);
+    }
+
     // Don't show the root node in this chart.
     if (node.parentID === 0) {
       return;

From 2a80f8ca9ca0be44cca9539d83ede9a5d62b62d0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Apr 2019 14:43:46 -0700
Subject: [PATCH 190/814] Show is-recording indicator earlier after a
 reload-and-profile

---
 shells/browser/shared/src/main.js | 3 +++
 src/devtools/store.js             | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 08befa651b06..d1d4eb1024f7 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -78,15 +78,18 @@ function createPanelIfReactLoaded() {
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
         // after a user has clicked the "reload and profile" button.
+        let isProfiling = false;
         let supportsProfiling = false;
         if (localStorage.getItem(SUPPORTS_PROFILING_KEY) === 'true') {
           supportsProfiling = true;
+          isProfiling = true;
           localStorage.removeItem(SUPPORTS_PROFILING_KEY);
         }
 
         const browserName = getBrowserName();
 
         store = new Store(bridge, {
+          isProfiling,
           supportsFileDownloads: browserName === 'Chrome',
           supportsReloadAndProfile: true,
           supportsProfiling,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 708f3ee50b93..345dee9b0c7e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -103,10 +103,14 @@ export default class Store extends EventEmitter {
 
     if (config != null) {
       const {
+        isProfiling,
         supportsFileDownloads,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
+      if (isProfiling) {
+        this._isProfiling = true;
+      }
       if (supportsFileDownloads) {
         this._supportsFileDownloads = true;
       }

From f415e2447e43af21835b5b51de1bb407a49d3e04 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Apr 2019 11:53:18 -0700
Subject: [PATCH 191/814] Added missing Flow annotation

---
 src/devtools/store.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 345dee9b0c7e..963b915c7fcf 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -32,6 +32,7 @@ const debug = (methodName, ...args) => {
 };
 
 type Config = {|
+  isProfiling?: boolean,
   supportsFileDownloads?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,

From de730da2305b9ed7093072ba87811858c02a3e5a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 2 Apr 2019 19:46:55 +0100
Subject: [PATCH 192/814] Elements -> Components (label)

---
 shells/browser/shared/src/main.js | 2 +-
 src/devtools/views/DevTools.js    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index d1d4eb1024f7..256e2a534073 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -143,7 +143,7 @@ function createPanelIfReactLoaded() {
 
       let currentPanel = null;
 
-      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
+      chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
           if (currentPanel === panel) {
             return;
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 56eee3b56edc..d297c70db736 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -48,8 +48,8 @@ export type Props = {|
 const elementTab = {
   id: ('elements': TabID),
   icon: 'elements',
-  label: 'Elements',
-  title: 'React Elements',
+  label: 'Components',
+  title: 'React Components',
 };
 const profilerTab = {
   id: ('profiler': TabID),

From 83bd211c9e94aa2b1f3b8b9085f079d2d9d9ec85 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 2 Apr 2019 19:53:46 +0100
Subject: [PATCH 193/814] Elements -> Components (naming)

---
 shells/browser/shared/src/main.js             | 12 ++++----
 src/backend/renderer.js                       |  2 +-
 src/backend/types.js                          |  2 +-
 src/backend/utils.js                          |  2 +-
 src/devtools/store.js                         |  2 +-
 .../Components.css}                           |  4 +--
 .../Elements.js => Components/Components.js}  |  6 ++--
 .../EditableValue.css                         |  0
 .../{Elements => Components}/EditableValue.js |  0
 .../{Elements => Components}/Element.css      |  0
 .../views/{Elements => Components}/Element.js |  0
 .../{Elements => Components}/HooksTree.css    |  0
 .../{Elements => Components}/HooksTree.js     |  0
 .../InspectHostNodesToggle.js                 |  0
 .../InspectedElementTree.css                  |  0
 .../InspectedElementTree.js                   |  0
 .../{Elements => Components}/KeyValue.css     |  0
 .../{Elements => Components}/KeyValue.js      |  0
 .../{Elements => Components}/OwnersStack.css  |  0
 .../{Elements => Components}/OwnersStack.js   |  0
 .../{Elements => Components}/SearchInput.css  |  0
 .../{Elements => Components}/SearchInput.js   |  0
 .../SelectedElement.css                       |  0
 .../SelectedElement.js                        |  0
 .../views/{Elements => Components}/Tree.css   |  0
 .../views/{Elements => Components}/Tree.js    |  0
 .../{Elements => Components}/TreeContext.js   |  0
 .../views/{Elements => Components}/types.js   |  0
 src/devtools/views/DevTools.js                | 30 +++++++++----------
 src/devtools/views/Icon.js                    |  8 ++---
 .../views/Profiler/ProfilerContext.js         |  2 +-
 .../views/Settings/SettingsContext.js         | 10 +++----
 32 files changed, 40 insertions(+), 40 deletions(-)
 rename src/devtools/views/{Elements/Elements.css => Components/Components.css} (93%)
 rename src/devtools/views/{Elements/Elements.js => Components/Components.js} (79%)
 rename src/devtools/views/{Elements => Components}/EditableValue.css (100%)
 rename src/devtools/views/{Elements => Components}/EditableValue.js (100%)
 rename src/devtools/views/{Elements => Components}/Element.css (100%)
 rename src/devtools/views/{Elements => Components}/Element.js (100%)
 rename src/devtools/views/{Elements => Components}/HooksTree.css (100%)
 rename src/devtools/views/{Elements => Components}/HooksTree.js (100%)
 rename src/devtools/views/{Elements => Components}/InspectHostNodesToggle.js (100%)
 rename src/devtools/views/{Elements => Components}/InspectedElementTree.css (100%)
 rename src/devtools/views/{Elements => Components}/InspectedElementTree.js (100%)
 rename src/devtools/views/{Elements => Components}/KeyValue.css (100%)
 rename src/devtools/views/{Elements => Components}/KeyValue.js (100%)
 rename src/devtools/views/{Elements => Components}/OwnersStack.css (100%)
 rename src/devtools/views/{Elements => Components}/OwnersStack.js (100%)
 rename src/devtools/views/{Elements => Components}/SearchInput.css (100%)
 rename src/devtools/views/{Elements => Components}/SearchInput.js (100%)
 rename src/devtools/views/{Elements => Components}/SelectedElement.css (100%)
 rename src/devtools/views/{Elements => Components}/SelectedElement.js (100%)
 rename src/devtools/views/{Elements => Components}/Tree.css (100%)
 rename src/devtools/views/{Elements => Components}/Tree.js (100%)
 rename src/devtools/views/{Elements => Components}/TreeContext.js (100%)
 rename src/devtools/views/{Elements => Components}/types.js (100%)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 256e2a534073..6f52639709d2 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -35,7 +35,7 @@ function createPanelIfReactLoaded() {
       let bridge = null;
       let store = null;
 
-      let elementsPortalContainer = null;
+      let componentsPortalContainer = null;
       let profilerPortalContainer = null;
       let settingsPortalContainer = null;
 
@@ -111,7 +111,7 @@ function createPanelIfReactLoaded() {
               bridge,
               browserName,
               browserTheme: getBrowserTheme(),
-              elementsPortalContainer,
+              componentsPortalContainer,
               overrideTab,
               profilerPortalContainer,
               settingsPortalContainer,
@@ -150,11 +150,11 @@ function createPanelIfReactLoaded() {
           }
 
           currentPanel = panel;
-          elementsPortalContainer = panel.container;
+          componentsPortalContainer = panel.container;
 
-          if (elementsPortalContainer != null) {
-            elementsPortalContainer.innerHTML = '';
-            render('elements');
+          if (componentsPortalContainer != null) {
+            componentsPortalContainer.innerHTML = '';
+            render('components');
             panel.injectStyles(cloneStyleTags);
           }
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 821060fc788a..21322e6e5bf9 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -39,7 +39,7 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type { InspectedElement } from 'src/devtools/views/elements/types';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
diff --git a/src/backend/types.js b/src/backend/types.js
index 8768715d4153..83ad660ee779 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,7 +1,7 @@
 // @flow
 
 import type { ElementType } from 'src/devtools/types';
-import type { InspectedElement } from 'src/devtools/views/elements/types';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
   | 0 // PROD
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 980565e2235f..7b6499ac23fb 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -2,7 +2,7 @@
 
 import { dehydrate } from '../hydration';
 
-import type { DehydratedData } from 'src/devtools/views/elements/types';
+import type { DehydratedData } from 'src/devtools/views/Components/types';
 
 export function cleanForBridge(data: Object | null): DehydratedData | null {
   if (data !== null) {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 963b915c7fcf..4e57c62772df 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -13,7 +13,7 @@ import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 
 import type { ElementType } from './types';
-import type { Element } from './views/Elements/types';
+import type { Element } from './views/Components/types';
 import type {
   ImportedProfilingData,
   ProfilingSnapshotNode,
diff --git a/src/devtools/views/Elements/Elements.css b/src/devtools/views/Components/Components.css
similarity index 93%
rename from src/devtools/views/Elements/Elements.css
rename to src/devtools/views/Components/Components.css
index e3fbdd2a6d64..172abb5c9e56 100644
--- a/src/devtools/views/Elements/Elements.css
+++ b/src/devtools/views/Components/Components.css
@@ -1,4 +1,4 @@
-.Elements {
+.Components {
   width: 100%;
   height: 100%;
   display: flex;
@@ -20,7 +20,7 @@
 }
 
 @media screen and (max-width: 600px) {
-  .Elements {
+  .Components {
     flex-direction: column;
   }
 }
diff --git a/src/devtools/views/Elements/Elements.js b/src/devtools/views/Components/Components.js
similarity index 79%
rename from src/devtools/views/Elements/Elements.js
rename to src/devtools/views/Components/Components.js
index 596a5c754a4a..8a6216baec27 100644
--- a/src/devtools/views/Elements/Elements.js
+++ b/src/devtools/views/Components/Components.js
@@ -4,16 +4,16 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
-import styles from './Elements.css';
+import styles from './Components.css';
 
 export type Props = {|
   portalContainer?: Element,
 |};
 
-export default function Elements({ portalContainer }: Props) {
+export default function Components({ portalContainer }: Props) {
   // TODO Flex wrappers below should be user resizable.
   const children = (
-    <div className={styles.Elements}>
+    <div className={styles.Components}>
       <div className={styles.TreeWrapper}>
         <Tree />
       </div>
diff --git a/src/devtools/views/Elements/EditableValue.css b/src/devtools/views/Components/EditableValue.css
similarity index 100%
rename from src/devtools/views/Elements/EditableValue.css
rename to src/devtools/views/Components/EditableValue.css
diff --git a/src/devtools/views/Elements/EditableValue.js b/src/devtools/views/Components/EditableValue.js
similarity index 100%
rename from src/devtools/views/Elements/EditableValue.js
rename to src/devtools/views/Components/EditableValue.js
diff --git a/src/devtools/views/Elements/Element.css b/src/devtools/views/Components/Element.css
similarity index 100%
rename from src/devtools/views/Elements/Element.css
rename to src/devtools/views/Components/Element.css
diff --git a/src/devtools/views/Elements/Element.js b/src/devtools/views/Components/Element.js
similarity index 100%
rename from src/devtools/views/Elements/Element.js
rename to src/devtools/views/Components/Element.js
diff --git a/src/devtools/views/Elements/HooksTree.css b/src/devtools/views/Components/HooksTree.css
similarity index 100%
rename from src/devtools/views/Elements/HooksTree.css
rename to src/devtools/views/Components/HooksTree.css
diff --git a/src/devtools/views/Elements/HooksTree.js b/src/devtools/views/Components/HooksTree.js
similarity index 100%
rename from src/devtools/views/Elements/HooksTree.js
rename to src/devtools/views/Components/HooksTree.js
diff --git a/src/devtools/views/Elements/InspectHostNodesToggle.js b/src/devtools/views/Components/InspectHostNodesToggle.js
similarity index 100%
rename from src/devtools/views/Elements/InspectHostNodesToggle.js
rename to src/devtools/views/Components/InspectHostNodesToggle.js
diff --git a/src/devtools/views/Elements/InspectedElementTree.css b/src/devtools/views/Components/InspectedElementTree.css
similarity index 100%
rename from src/devtools/views/Elements/InspectedElementTree.css
rename to src/devtools/views/Components/InspectedElementTree.css
diff --git a/src/devtools/views/Elements/InspectedElementTree.js b/src/devtools/views/Components/InspectedElementTree.js
similarity index 100%
rename from src/devtools/views/Elements/InspectedElementTree.js
rename to src/devtools/views/Components/InspectedElementTree.js
diff --git a/src/devtools/views/Elements/KeyValue.css b/src/devtools/views/Components/KeyValue.css
similarity index 100%
rename from src/devtools/views/Elements/KeyValue.css
rename to src/devtools/views/Components/KeyValue.css
diff --git a/src/devtools/views/Elements/KeyValue.js b/src/devtools/views/Components/KeyValue.js
similarity index 100%
rename from src/devtools/views/Elements/KeyValue.js
rename to src/devtools/views/Components/KeyValue.js
diff --git a/src/devtools/views/Elements/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
similarity index 100%
rename from src/devtools/views/Elements/OwnersStack.css
rename to src/devtools/views/Components/OwnersStack.css
diff --git a/src/devtools/views/Elements/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
similarity index 100%
rename from src/devtools/views/Elements/OwnersStack.js
rename to src/devtools/views/Components/OwnersStack.js
diff --git a/src/devtools/views/Elements/SearchInput.css b/src/devtools/views/Components/SearchInput.css
similarity index 100%
rename from src/devtools/views/Elements/SearchInput.css
rename to src/devtools/views/Components/SearchInput.css
diff --git a/src/devtools/views/Elements/SearchInput.js b/src/devtools/views/Components/SearchInput.js
similarity index 100%
rename from src/devtools/views/Elements/SearchInput.js
rename to src/devtools/views/Components/SearchInput.js
diff --git a/src/devtools/views/Elements/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
similarity index 100%
rename from src/devtools/views/Elements/SelectedElement.css
rename to src/devtools/views/Components/SelectedElement.css
diff --git a/src/devtools/views/Elements/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
similarity index 100%
rename from src/devtools/views/Elements/SelectedElement.js
rename to src/devtools/views/Components/SelectedElement.js
diff --git a/src/devtools/views/Elements/Tree.css b/src/devtools/views/Components/Tree.css
similarity index 100%
rename from src/devtools/views/Elements/Tree.css
rename to src/devtools/views/Components/Tree.css
diff --git a/src/devtools/views/Elements/Tree.js b/src/devtools/views/Components/Tree.js
similarity index 100%
rename from src/devtools/views/Elements/Tree.js
rename to src/devtools/views/Components/Tree.js
diff --git a/src/devtools/views/Elements/TreeContext.js b/src/devtools/views/Components/TreeContext.js
similarity index 100%
rename from src/devtools/views/Elements/TreeContext.js
rename to src/devtools/views/Components/TreeContext.js
diff --git a/src/devtools/views/Elements/types.js b/src/devtools/views/Components/types.js
similarity index 100%
rename from src/devtools/views/Elements/types.js
rename to src/devtools/views/Components/types.js
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index d297c70db736..aec2f9961a34 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -3,12 +3,12 @@
 import React, { useEffect, useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
-import Elements from './Elements/Elements';
+import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
 import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
-import { TreeContextController } from './Elements/TreeContext';
+import { TreeContextController } from './Components/TreeContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import ReactLogo from './ReactLogo';
 
@@ -20,7 +20,7 @@ import type { Bridge } from '../../types';
 
 export type BrowserName = 'Chrome' | 'Firefox';
 export type BrowserTheme = 'dark' | 'light';
-export type TabID = 'elements' | 'profiler' | 'settings';
+export type TabID = 'components' | 'profiler' | 'settings';
 
 export type Props = {|
   bridge: Bridge,
@@ -39,15 +39,15 @@ export type Props = {|
 
   // To avoid potential multi-root trickiness, the web extension uses portals to render tabs.
   // The root <DevTools> app is rendered in the top-level extension window,
-  // but individual tabs (e.g. Elements, Profiling) can be rendered into portals within their browser panels.
-  elementsPortalContainer?: Element,
+  // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
+  componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
   settingsPortalContainer?: Element,
 |};
 
-const elementTab = {
-  id: ('elements': TabID),
-  icon: 'elements',
+const componentsTab = {
+  id: ('components': TabID),
+  icon: 'components',
   label: 'Components',
   title: 'React Components',
 };
@@ -64,15 +64,15 @@ const settingsTab = {
   title: 'React Settings',
 };
 
-const tabsWithProfiler = [elementTab, profilerTab, settingsTab];
-const tabsWithoutProfiler = [elementTab, settingsTab];
+const tabsWithProfiler = [componentsTab, profilerTab, settingsTab];
+const tabsWithoutProfiler = [componentsTab, settingsTab];
 
 export default function DevTools({
   bridge,
   browserName,
   browserTheme = 'light',
-  defaultTab = 'elements',
-  elementsPortalContainer,
+  defaultTab = 'components',
+  componentsPortalContainer,
   overrideTab,
   profilerPortalContainer,
   settingsPortalContainer,
@@ -120,9 +120,9 @@ export default function DevTools({
     case 'settings':
       tabElement = <Settings portalContainer={settingsPortalContainer} />;
       break;
-    case 'elements':
+    case 'components':
     default:
-      tabElement = <Elements portalContainer={elementsPortalContainer} />;
+      tabElement = <Components portalContainer={componentsPortalContainer} />;
       break;
   }
 
@@ -131,7 +131,7 @@ export default function DevTools({
       <StoreContext.Provider value={store}>
         <SettingsContextController
           browserTheme={browserTheme}
-          elementsPortalContainer={elementsPortalContainer}
+          componentsPortalContainer={componentsPortalContainer}
           profilerPortalContainer={profilerPortalContainer}
           settingsPortalContainer={settingsPortalContainer}
         >
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
index 4b93b8d03cb8..66e9e64fbe62 100644
--- a/src/devtools/views/Icon.js
+++ b/src/devtools/views/Icon.js
@@ -5,7 +5,7 @@ import styles from './Icon.css';
 
 export type IconType =
   | 'arrow'
-  | 'elements'
+  | 'components'
   | 'flame-chart'
   | 'interactions'
   | 'profiler'
@@ -24,8 +24,8 @@ export default function Icon({ className = '', type }: Props) {
     case 'arrow':
       pathData = PATH_ARROW;
       break;
-    case 'elements':
-      pathData = PATH_ELEMENTS;
+    case 'components':
+      pathData = PATH_COMPONENTS;
       break;
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
@@ -66,7 +66,7 @@ export default function Icon({ className = '', type }: Props) {
 
 const PATH_ARROW = 'M8 5v14l11-7z';
 
-const PATH_ELEMENTS =
+const PATH_COMPONENTS =
   'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';
 
 const PATH_FLAME_CHART = `
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index b50cd12f98d5..60e6fd2b2be1 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { useLocalStorage, useSubscription } from '../hooks';
-import { TreeContext } from '../Elements/TreeContext';
+import { TreeContext } from '../Components/TreeContext';
 import { StoreContext } from '../context';
 import Store from '../../store';
 
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index c47fc224b4ad..d6f3ba4a9a91 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -28,7 +28,7 @@ type DocumentElements = Array<HTMLElement>;
 type Props = {|
   browserTheme: BrowserTheme,
   children: React$Node,
-  elementsPortalContainer?: Element,
+  componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
   settingsPortalContainer?: Element,
 |};
@@ -36,7 +36,7 @@ type Props = {|
 function SettingsContextController({
   browserTheme,
   children,
-  elementsPortalContainer,
+  componentsPortalContainer,
   profilerPortalContainer,
   settingsPortalContainer,
 }: Props) {
@@ -53,9 +53,9 @@ function SettingsContextController({
     const array: Array<HTMLElement> = [
       ((document.documentElement: any): HTMLElement),
     ];
-    if (elementsPortalContainer != null) {
+    if (componentsPortalContainer != null) {
       array.push(
-        ((elementsPortalContainer.ownerDocument
+        ((componentsPortalContainer.ownerDocument
           .documentElement: any): HTMLElement)
       );
     }
@@ -73,7 +73,7 @@ function SettingsContextController({
     }
     return array;
   }, [
-    elementsPortalContainer,
+    componentsPortalContainer,
     profilerPortalContainer,
     settingsPortalContainer,
   ]);

From c111288c549bea32b2e0760f5aef30aac70ad5d7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Apr 2019 15:04:04 -0700
Subject: [PATCH 194/814] Store screenshots after each commit when profiling

---
 shells/browser/chrome/manifest.json           |  1 +
 shells/browser/firefox/manifest.json          |  1 +
 shells/browser/shared/src/background.js       | 17 ++++++
 shells/browser/shared/src/contentScript.js    | 12 +++++
 shells/browser/shared/src/main.js             |  9 ++++
 src/backend/agent.js                          | 16 ++++++
 src/devtools/store.js                         | 29 ++++++++++-
 .../views/Profiler/SidebarCommitInfo.css      | 22 ++++++++
 .../views/Profiler/SidebarCommitInfo.js       | 52 ++++++++++++++++++-
 src/devtools/views/root.css                   |  4 +-
 10 files changed, 157 insertions(+), 6 deletions(-)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 6a26c7b21af5..3fba06d99fa0 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -40,6 +40,7 @@
   },
 
   "permissions": [
+    "<all_urls>",
     "background",
     "downloads",
     "tabs",
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 7f6a1281b5e9..026dd05dd61e 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -46,6 +46,7 @@
   },
 
   "permissions": [
+    "<all_urls>",
     "background",
     "downloads",
     "tabs",
diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index 1625f3dfb4d7..4c14fd02e409 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -120,5 +120,22 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       const url = URL.createObjectURL(blob);
       chrome.downloads.download({ filename, saveAs: true, url });
     }
+
+    if (request.captureScreenshot) {
+      const { commitIndex } = request;
+      chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
+        // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
+        // so we have to use the chrome.tabs API for this instead.
+        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+          chrome.tabs.sendMessage(tabs[0].id, {
+            event: 'screenshotCaptured',
+            payload: {
+              commitIndex,
+              dataURL,
+            },
+          });
+        });
+      });
+    }
   }
 });
diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
index 68a44e21afcf..af4e328f0d66 100644
--- a/shells/browser/shared/src/contentScript.js
+++ b/shells/browser/shared/src/contentScript.js
@@ -75,3 +75,15 @@ if (!backendInitialized) {
     }
   }, 500);
 }
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  if (request.event === 'screenshotCaptured') {
+    window.postMessage(
+      {
+        source: 'react-devtools-content-script',
+        payload: request,
+      },
+      '*'
+    );
+  }
+});
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index d1d4eb1024f7..59b9ff5f0901 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -74,6 +74,15 @@ function createPanelIfReactLoaded() {
             filename,
           });
         });
+        bridge.addListener('captureScreenshot', ({ commitIndex }) => {
+          chrome.runtime.sendMessage(
+            {
+              captureScreenshot: true,
+              commitIndex,
+            },
+            response => bridge.send('screenshotCaptured', response)
+          );
+        });
 
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
diff --git a/src/backend/agent.js b/src/backend/agent.js
index dab48def1392..b114c227952b 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -56,6 +56,7 @@ export default class Agent extends EventEmitter {
   addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
+    bridge.addListener('captureScreenshot', this.captureScreenshot);
     bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getInteractions', this.getInteractions);
@@ -68,6 +69,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('overrideProps', this.overrideProps);
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
+    bridge.addListener('screenshotCaptured', this.screenshotCaptured);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('startProfiling', this.startProfiling);
@@ -81,6 +83,10 @@ export default class Agent extends EventEmitter {
     }
   }
 
+  captureScreenshot = ({ commitIndex }: { commitIndex: number }) => {
+    this._bridge.send('captureScreenshot', { commitIndex });
+  };
+
   getIDForNode(node: Object): number | null {
     for (let rendererID in this._rendererInterfaces) {
       // A renderer will throw if it can't find a fiber for the specified node.
@@ -235,6 +241,16 @@ export default class Agent extends EventEmitter {
     this._bridge.send('reloadAppForProfiling');
   };
 
+  screenshotCaptured = ({
+    commitIndex,
+    dataURL,
+  }: {|
+    commitIndex: number,
+    dataURL: string,
+  |}) => {
+    this._bridge.send('screenshotCaptured', { commitIndex, dataURL });
+  };
+
   selectElement = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 963b915c7fcf..989efc14c4f3 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -72,6 +72,9 @@ export default class Store extends EventEmitter {
   // to reconstruct the state of each root for each commit.
   _profilingOperations: Map<number, Array<Uint32Array>> = new Map();
 
+  // Stores screenshots for each commit (when profiling).
+  _profilingScreenshots: Map<number, string> = new Map();
+
   // Snapshot of the state of the main Store (including all roots) when profiling started.
   // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
   // to reconstruct the state of each root for each commit.
@@ -126,6 +129,7 @@ export default class Store extends EventEmitter {
     this._bridge = bridge;
     bridge.addListener('operations', this.onBridgeOperations);
     bridge.addListener('profilingStatus', this.onProfilingStatus);
+    bridge.addListener('screenshotCaptured', this.onScreenshotCaptured);
     bridge.addListener('shutdown', this.onBridgeShutdown);
 
     // It's possible that profiling has already started (e.g. "reload and start profiling")
@@ -170,6 +174,10 @@ export default class Store extends EventEmitter {
     return this._profilingOperations;
   }
 
+  get profilingScreenshots(): Map<number, string> {
+    return this._profilingScreenshots;
+  }
+
   get profilingSnapshot(): Map<number, ProfilingSnapshotNode> {
     return this._profilingSnapshot;
   }
@@ -197,6 +205,7 @@ export default class Store extends EventEmitter {
   clearProfilingData(): void {
     this._importedProfilingData = null;
     this._profilingOperations = new Map();
+    this._profilingScreenshots = new Map();
     this._profilingSnapshot = new Map();
 
     // Invalidate suspense cache if profiling data is being (re-)recorded.
@@ -400,12 +409,17 @@ export default class Store extends EventEmitter {
     const rootID = operations[1];
 
     if (this._isProfiling) {
-      const profilingOperations = this._profilingOperations.get(rootID);
+      let profilingOperations = this._profilingOperations.get(rootID);
       if (profilingOperations == null) {
-        this._profilingOperations.set(rootID, [operations]);
+        profilingOperations = [operations];
+        this._profilingOperations.set(rootID, profilingOperations);
       } else {
         profilingOperations.push(operations);
       }
+
+      const commitIndex = profilingOperations.length - 1;
+
+      this._bridge.send('captureScreenshot', { commitIndex });
     }
 
     let addedElementIDs: Uint32Array = new Uint32Array(0);
@@ -622,6 +636,7 @@ export default class Store extends EventEmitter {
     if (isProfiling) {
       this._importedProfilingData = null;
       this._profilingOperations = new Map();
+      this._profilingScreenshots = new Map();
       this._profilingSnapshot = new Map();
       this.roots.forEach(this._takeProfilingSnapshotRecursive);
     }
@@ -632,6 +647,16 @@ export default class Store extends EventEmitter {
     }
   };
 
+  onScreenshotCaptured = ({
+    commitIndex,
+    dataURL,
+  }: {|
+    commitIndex: number,
+    dataURL: string,
+  |}) => {
+    this._profilingScreenshots.set(commitIndex, dataURL);
+  };
+
   onBridgeShutdown = () => {
     debug('onBridgeShutdown', 'unsubscribing from Bridge');
 
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 38a4c7f7d046..a7eba6a3ba8c 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -52,3 +52,25 @@
   height: 100%;
   color: var(--color-dim);
 }
+
+.Screenshot {
+  width: 100%;
+}
+
+.Modal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-modal-background);
+  padding: 0.5rem;
+}
+
+.ModalImage {
+  max-height: 100%;
+  max-width: 100%;
+}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index cefbb8effc28..86debc8e0454 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment, useCallback, useContext, useState } from 'react';
 import { ProfilerContext } from './ProfilerContext';
 import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
@@ -18,7 +18,25 @@ export default function SidebarCommitInfo(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilingCache } = useContext(StoreContext);
+  const { profilingCache, profilingScreenshots } = useContext(StoreContext);
+
+  const screenshot =
+    selectedCommitIndex !== null
+      ? profilingScreenshots.get(selectedCommitIndex)
+      : null;
+  const [
+    isScreenshotModalVisible,
+    setIsScreenshotModalVisible,
+  ] = useState<boolean>(false);
+
+  const hideScreenshotModal = useCallback(
+    () => setIsScreenshotModalVisible(false),
+    []
+  );
+  const showScreenshotModal = useCallback(
+    () => setIsScreenshotModalVisible(true),
+    []
+  );
 
   if (selectedCommitIndex === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
@@ -79,8 +97,38 @@ export default function SidebarCommitInfo(_: Props) {
               ))}
             </ul>
           </li>
+          {screenshot != null && (
+            <li>
+              <img
+                alt="Screenshot"
+                className={styles.Screenshot}
+                onClick={showScreenshotModal}
+                src={screenshot}
+              />
+            </li>
+          )}
+          {screenshot != null && isScreenshotModalVisible && (
+            <ScreenshotModal
+              hideScreenshotModal={hideScreenshotModal}
+              screenshot={screenshot}
+            />
+          )}
         </ul>
       </div>
     </Fragment>
   );
 }
+
+function ScreenshotModal({
+  hideScreenshotModal,
+  screenshot,
+}: {|
+  hideScreenshotModal: Function,
+  screenshot: string,
+|}) {
+  return (
+    <div className={styles.Modal} onClick={hideScreenshotModal}>
+      <img alt="Screenshot" className={styles.ModalImage} src={screenshot} />
+    </div>
+  );
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index be3f66e9a89e..c2b2432145d7 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -36,7 +36,7 @@
   --light-color-hover-background: #ebf1fb;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --light-color-modal-background: rgba(255, 255, 255, 0.25);
+  --light-color-modal-background: rgba(255, 255, 255, 0.75);
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
@@ -80,7 +80,7 @@
   --dark-color-hover-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --dark-color-modal-background: rgba(0, 0, 0, 0.25);
+  --dark-color-modal-background: rgba(0, 0, 0, 0.75);
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;

From 6772f2a9e172f32608bf820c518c471edb81b306 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 07:52:30 -0700
Subject: [PATCH 195/814] Revert fa317be (temporarily show previously selected
 element props)

---
 src/devtools/views/Components/SelectedElement.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 6b1401f5b874..2cec5677ba13 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -30,9 +30,7 @@ export default function SelectedElement(_: Props) {
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
-  const actualInspectedElement = useInspectedElement(selectedElementID);
-  // The UI lags behind to avoid flashing a loading state.
-  const inspectedElement = useLastNonNullValue(actualInspectedElement);
+  const inspectedElement = useInspectedElement(selectedElementID);
 
   const highlightElement = useCallback(() => {
     if (element !== null && selectedElementID !== null) {
@@ -286,11 +284,3 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
   return inspectedElement;
 }
-
-function useLastNonNullValue<T>(value: T | null): T | null {
-  const [lastNonNullValue, setLastNonNullValue] = useState(value);
-  if (value !== null && value !== lastNonNullValue) {
-    setLastNonNullValue(value);
-  }
-  return lastNonNullValue;
-}

From 6493db4acc44dad64c43e105fd268fc1d143c134 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 08:12:43 -0700
Subject: [PATCH 196/814] Fixed an arrow navigation bug

---
 src/devtools/views/Components/SearchInput.js | 29 ++++++++++++++------
 src/devtools/views/Components/Tree.js        |  4 +++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 4ea5783dffaa..51d0e58d3b12 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -17,6 +17,8 @@ export default function SearchInput(props: Props) {
     searchIndex,
     searchResults,
     searchText,
+    selectNextElementInTree,
+    selectPreviousElementInTree,
     setSearchText,
   } = useContext(TreeContext);
 
@@ -31,15 +33,24 @@ export default function SearchInput(props: Props) {
     setSearchText('');
   }, [setSearchText]);
 
-  const handleKeyDown = useCallback(event => {
-    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
-      // It's convenient for up/down arrow keys to change the selected element when focused on the search input.
-      // But e.g. left/right arrow keys should move the text cursor.
-      // For now just block everything except for up/down arrow keys.
-      // TODO Revisit this approach.
-      event.stopPropagation();
-    }
-  }, []);
+  const handleKeyDown = useCallback(
+    event => {
+      // For convenience, let up/down arrow keys change Tree selection.
+      switch (event.key) {
+        case 'ArrowDown':
+          selectNextElementInTree();
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          selectPreviousElementInTree();
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    },
+    [selectNextElementInTree, selectPreviousElementInTree]
+  );
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 9354245a1247..9b60539aef4e 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -51,6 +51,10 @@ export default function Tree(props: Props) {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event: any).target.tagName === 'INPUT') {
+        return;
+      }
+
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':

From b2cd77d2e63281e8105c57c27c72cb613d2f491e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 3 Apr 2019 17:04:31 +0100
Subject: [PATCH 197/814] Add a space in <Foo />

---
 src/devtools/views/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 03bb8e3cd17d..5b42a27e06c7 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -12,7 +12,7 @@ export function createRegExp(string: string): RegExp {
 export function getMetaValueLabel(data: Object): string | null {
   switch (data[meta.type]) {
     case 'react_element':
-      return `<${data[meta.name]}/>`;
+      return `<${data[meta.name]} />`;
     case 'function':
       return `${data[meta.name] || 'fn'}()`;
     case 'object':

From f92d2bbf83360b358ecf08c0db85cff6fd08cbff Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 09:29:33 -0700
Subject: [PATCH 198/814] Fixed editing props for memo and forwardRef
 components

---
 shells/dev/app/EditableProps/index.js         | 47 +++++++++++++++----
 src/devtools/views/Components/HooksTree.css   |  5 ++
 src/devtools/views/Components/HooksTree.js    | 18 +++----
 src/devtools/views/Components/KeyValue.css    |  5 ++
 src/devtools/views/Components/KeyValue.js     | 11 +++--
 .../views/Components/SelectedElement.js       | 14 +++++-
 6 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/shells/dev/app/EditableProps/index.js b/shells/dev/app/EditableProps/index.js
index c86d717ee376..f5a39fc92f97 100644
--- a/shells/dev/app/EditableProps/index.js
+++ b/shells/dev/app/EditableProps/index.js
@@ -3,7 +3,9 @@
 import React, {
   createContext,
   Component,
+  forwardRef,
   Fragment,
+  memo,
   useCallback,
   useDebugValue,
   useEffect,
@@ -38,7 +40,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
   );
 
   return (
-    <Fragment>
+    <ul>
       <li>Name: {name}</li>
       <li>
         <button onClick={handleUpdateCountClick}>
@@ -51,7 +53,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
       <li>
         <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
       </li>
-    </Fragment>
+    </ul>
   );
 }
 
@@ -76,7 +78,7 @@ class StatefulClass extends Component<Props, State> {
 
   render() {
     return (
-      <Fragment>
+      <ul>
         <li>Name: {this.props.name}</li>
         <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
         <li>
@@ -84,19 +86,48 @@ class StatefulClass extends Component<Props, State> {
         </li>
         <li>Cities: {this.state.cities.join(', ')}</li>
         <li>Context: {this.context ? 'true' : 'false'}</li>
-      </Fragment>
+      </ul>
     );
   }
 }
 
+const MemoizedStatefulClass = memo(StatefulClass);
+const MemoizedStatefulFunction = memo(StatefulFunction);
+
+const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(
+  ({ name }, ref) => {
+    const [count, updateCount] = useState(0);
+    const debouncedCount = useDebounce(count, 1000);
+    const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+      count,
+    ]);
+    return (
+      <ul ref={ref}>
+        <li>Name: {name}</li>
+        <li>
+          <button onClick={handleUpdateCountClick}>
+            Debounced count: {debouncedCount}
+          </button>
+        </li>
+      </ul>
+    );
+  }
+);
+
 export default function EditableProps() {
   return (
     <Fragment>
       <h1>Editable props</h1>
-      <ul>
-        <StatefulClass name="Brian" toggle={true} />
-        <StatefulFunction name="Brian" />
-      </ul>
+      <strong>Class</strong>
+      <StatefulClass name="Brian" toggle={true} />
+      <strong>Function</strong>
+      <StatefulFunction name="Brian" />
+      <strong>Memoized Class</strong>
+      <MemoizedStatefulClass name="Brian" toggle={true} />
+      <strong>Memoized Function</strong>
+      <MemoizedStatefulFunction name="Brian" />
+      <strong>Forward Ref</strong>
+      <ForwardRef name="Brian" />
     </Fragment>
   );
 }
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index ad07918e4ae4..57a6fe39dc71 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -25,6 +25,11 @@
   color: var(--color-dim);
   flex: 0 0 auto;
 }
+.EditableName {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.EditableName:after,
 .Name:after {
   color: var(--color-text-color);
   content: ': ';
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 65cfb9cc22d8..c95f6b9b3cff 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -110,12 +110,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <div className={styles.NameValueRow}>
             <span className={styles.Name}>{name}</span>
           </div>
-          <KeyValue
-            depth={1}
-            name="DebugValue"
-            nameClassName={styles.Name}
-            value={value}
-          />
+          <KeyValue depth={1} name="DebugValue" value={value} />
           <InnerHooksTreeView
             canEditHooks={canEditHooks}
             hooks={subHooks}
@@ -160,7 +155,6 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <KeyValue
             depth={0}
             name={name}
-            nameClassName={styles.Name}
             overrideValueFn={overrideValueFn}
             value={value}
           />
@@ -170,7 +164,15 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.Name}>{name}</span>
+            <span
+              className={
+                typeof overrideValueFn === 'function'
+                  ? styles.EditableName
+                  : styles.Name
+              }
+            >
+              {name}
+            </span>
             {typeof overrideValueFn === 'function' ? (
               <EditableValue
                 dataType={type}
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 7a9e2dbf4acf..29603981062e 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -3,9 +3,14 @@
 }
 
 .Name {
+  color: var(--color-dim);
+  flex: 0 0 auto;
+}
+.EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
 }
+.EditableName:after,
 .Name:after {
   content: ': ';
   color: var(--color-text-color);
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ead0293b8fd8..3c8156eb640b 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -11,7 +11,6 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 type KeyValueProps = {|
   depth: number,
   name: string,
-  nameClassName?: string,
   overrideValueFn?: ?OverrideValueFn,
   path?: Array<any>,
   value: any,
@@ -20,7 +19,6 @@ type KeyValueProps = {|
 export default function KeyValue({
   depth,
   name,
-  nameClassName = styles.Name,
   overrideValueFn,
   path = [],
   value,
@@ -47,6 +45,9 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    const nameClassName =
+      typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;
+
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={nameClassName}>{name}</span>
@@ -66,7 +67,7 @@ export default function KeyValue({
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={nameClassName}>{name}</span>
+        <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
@@ -88,7 +89,7 @@ export default function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={nameClassName}>{name}</span>
+          <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
@@ -110,7 +111,7 @@ export default function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={nameClassName}>{name}</span>
+          <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>
       );
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 2cec5677ba13..76b338feec06 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -15,7 +15,12 @@ import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
-import { ElementTypeClass, ElementTypeFunction } from '../../types';
+import {
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+} from '../../types';
 
 import type { InspectedElement } from './types';
 import type { DehydratedData, Element } from './types';
@@ -145,7 +150,12 @@ function InspectedElementView({
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideState', { id, path, rendererID, value });
     };
-  } else if (type === ElementTypeFunction && canEditFunctionProps) {
+  } else if (
+    (type === ElementTypeFunction ||
+      type === ElementTypeMemo ||
+      type === ElementTypeForwardRef) &&
+    canEditFunctionProps
+  ) {
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideProps', { id, path, rendererID, value });

From 5b879ac0954e97cd371adbcb67f017a7faec63d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 09:57:13 -0700
Subject: [PATCH 199/814] Fixed a name typo in a radio button

---
 src/devtools/views/Settings/Settings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index d3a99360a0b5..97d366f2e3fd 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -37,7 +37,7 @@ export default function Settings({ portalContainer }: Props) {
           <label className={styles.Option}>
             <input
               type="radio"
-              name="Settings-Settings-theme"
+              name="Settings-theme"
               checked={theme === 'auto'}
               value="auto"
               onChange={updateTheme}

From c60f991d8755d64afce71d832364451f8ec3b56c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 3 Apr 2019 18:58:00 +0100
Subject: [PATCH 200/814] Make tree reachable by focus

---
 src/devtools/views/Components/Tree.js | 48 ++++++++++++++++++---------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 9b60539aef4e..936c34853e8f 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -113,7 +113,7 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
-              innerElementType={innerElementType}
+              innerElementType={TreeWrapper}
               itemCount={numElements}
               itemData={itemData}
               itemSize={lineHeight}
@@ -129,18 +129,34 @@ export default function Tree(props: Props) {
   );
 }
 
-// This style override enables the background color to fill the full visible width,
-// when combined with the CSS tweaks in Element.
-// A lot of options were considered; this seemed the one that requires the least code.
-// See https://github.com/bvaughn/react-devtools-experimental/issues/9
-const innerElementType = ({ style, ...rest }) => (
-  <div
-    style={{
-      ...style,
-      display: 'inline-block',
-      minWidth: '100%',
-      width: undefined,
-    }}
-    {...rest}
-  />
-);
+function TreeWrapper({ style, ...rest }) {
+  const {
+    numElements,
+    selectedElementIndex,
+    selectElementAtIndex,
+  } = useContext(TreeContext);
+
+  const handleFocus = () => {
+    if (selectedElementIndex === null && numElements > 0) {
+      selectElementAtIndex(0);
+    }
+  };
+
+  // This style override enables the background color to fill the full visible width,
+  // when combined with the CSS tweaks in Element.
+  // A lot of options were considered; this seemed the one that requires the least code.
+  // See https://github.com/bvaughn/react-devtools-experimental/issues/9
+  return (
+    <div
+      tabIndex={0}
+      onFocus={handleFocus}
+      style={{
+        ...style,
+        display: 'inline-block',
+        minWidth: '100%',
+        width: undefined,
+      }}
+      {...rest}
+    />
+  );
+}

From 07bf8e53c1e6fbf6503bebc170622ab161cf3b8f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 11:01:28 -0700
Subject: [PATCH 201/814] Renamed GlobalHook content script references to
 injectGlobalHook to avoid confusion

---
 shells/browser/chrome/manifest.json                             | 2 +-
 shells/browser/firefox/manifest.json                            | 2 +-
 .../browser/shared/src/{GlobalHook.js => injectGlobalHook.js}   | 0
 shells/browser/shared/webpack.config.js                         | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename shells/browser/shared/src/{GlobalHook.js => injectGlobalHook.js} (100%)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 3fba06d99fa0..3c1556380e67 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -52,7 +52,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["build/inject.js"],
+      "js": ["build/injectGlobalHook.js"],
       "run_at": "document_start"
     }
   ]
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 026dd05dd61e..a7969cb304a5 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -58,7 +58,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["build/inject.js"],
+      "js": ["build/injectGlobalHook.js"],
       "run_at": "document_start"
     }
   ]
diff --git a/shells/browser/shared/src/GlobalHook.js b/shells/browser/shared/src/injectGlobalHook.js
similarity index 100%
rename from shells/browser/shared/src/GlobalHook.js
rename to shells/browser/shared/src/injectGlobalHook.js
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index b33c9248dd2c..42fc87775193 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -15,7 +15,7 @@ module.exports = {
   entry: {
     background: './src/background.js',
     contentScript: './src/contentScript.js',
-    inject: './src/GlobalHook.js',
+    injectGlobalHook: './src/injectGlobalHook.js',
     main: './src/main.js',
     panel: './src/panel.js',
     renderer: './src/renderer.js',

From ed6e34da8e839bf63edb9085086b4e2567771e46 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 14:32:16 -0700
Subject: [PATCH 202/814] Added option to disable screenshot capturing while
 profiling

---
 package.json                                  |  1 +
 shells/browser/shared/src/injectGlobalHook.js |  4 +-
 shells/browser/shared/src/main.js             | 12 ++++--
 shells/dev/src/backend.js                     | 10 +++++
 shells/dev/src/devtools.js                    |  2 +-
 src/backend/agent.js                          |  8 ++--
 src/backend/renderer.js                       |  4 +-
 src/constants.js                              |  3 +-
 src/devtools/store.js                         | 36 ++++++++++++++++-
 .../views/Profiler/SidebarCommitInfo.css      |  5 +++
 src/devtools/views/Settings/Settings.js       | 40 ++++++++++++++++++-
 yarn.lock                                     | 19 +++++++++
 12 files changed, 128 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 94358e3197d9..e843d0f13369 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
     "css-loader": "^1.0.1",
+    "html2canvas": "^1.0.0-alpha.12",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
     "escape-string-regexp": "^1.0.5",
diff --git a/shells/browser/shared/src/injectGlobalHook.js b/shells/browser/shared/src/injectGlobalHook.js
index 074b289db6d3..7a1147a040d9 100644
--- a/shells/browser/shared/src/injectGlobalHook.js
+++ b/shells/browser/shared/src/injectGlobalHook.js
@@ -2,7 +2,7 @@
 
 import nullthrows from 'nullthrows';
 import { installHook } from 'src/hook';
-import { RELOAD_AND_PROFILE_KEY } from 'src/constants';
+import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src/constants';
 
 function injectCode(code) {
   const script = document.createElement('script');
@@ -63,7 +63,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
 // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
-if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
+if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
   const rendererURL = chrome.runtime.getURL('build/renderer.js');
   let rendererCode;
 
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index a0e4a9a613e2..e96b10fd7cc9 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -12,7 +12,8 @@ import {
 } from './utils';
 import DevTools from 'src/devtools/views/DevTools';
 
-const SUPPORTS_PROFILING_KEY = 'React::DevTools::supportsProfiling';
+const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
+  'React::DevTools::supportsProfiling';
 
 let panelCreated = false;
 
@@ -64,7 +65,7 @@ function createPanelIfReactLoaded() {
           },
         });
         bridge.addListener('reloadAppForProfiling', () => {
-          localStorage.setItem(SUPPORTS_PROFILING_KEY, 'true');
+          localStorage.setItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
         bridge.addListener('exportFile', ({ contents, filename }) => {
@@ -89,16 +90,19 @@ function createPanelIfReactLoaded() {
         // after a user has clicked the "reload and profile" button.
         let isProfiling = false;
         let supportsProfiling = false;
-        if (localStorage.getItem(SUPPORTS_PROFILING_KEY) === 'true') {
+        if (
+          localStorage.getItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+        ) {
           supportsProfiling = true;
           isProfiling = true;
-          localStorage.removeItem(SUPPORTS_PROFILING_KEY);
+          localStorage.removeItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
 
         const browserName = getBrowserName();
 
         store = new Store(bridge, {
           isProfiling,
+          supportsCaptureScreenshots: true,
           supportsFileDownloads: browserName === 'Chrome',
           supportsReloadAndProfile: true,
           supportsProfiling,
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index c387b52c33bb..02ff78fd1919 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -1,5 +1,6 @@
 /** @flow */
 
+import html2canvas from 'html2canvas';
 import Agent from 'src/backend/agent';
 import Bridge from 'src/bridge';
 import { initBackend } from 'src/backend';
@@ -15,6 +16,15 @@ const bridge = new Bridge({
   },
 });
 
+bridge.addListener('captureScreenshot', ({ commitIndex }) => {
+  html2canvas(document.body, { logging: false }).then(canvas => {
+    bridge.send('screenshotCaptured', {
+      commitIndex,
+      dataURL: canvas.toDataURL(),
+    });
+  });
+});
+
 const agent = new Agent();
 agent.addBridge(bridge);
 
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index b248b670192f..3fb49174c505 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -54,7 +54,7 @@ inject('./build/app.js', () => {
 
       cb(bridge);
 
-      const store = new Store(bridge);
+      const store = new Store(bridge, { supportsCaptureScreenshots: true });
 
       const root = createRoot(container);
       const batch = root.createBatch();
diff --git a/src/backend/agent.js b/src/backend/agent.js
index b114c227952b..390772f35819 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,7 +1,7 @@
 // @flow
 
 import EventEmitter from 'events';
-import { RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
+import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
 import type { RendererID, RendererInterface } from './types';
@@ -46,10 +46,10 @@ export default class Agent extends EventEmitter {
   constructor() {
     super();
 
-    if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
+    if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
       this._isProfiling = true;
 
-      localStorage.removeItem(RELOAD_AND_PROFILE_KEY);
+      localStorage.removeItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
   }
 
@@ -233,7 +233,7 @@ export default class Agent extends EventEmitter {
   };
 
   reloadAndProfile = () => {
-    localStorage.setItem(RELOAD_AND_PROFILE_KEY, 'true');
+    localStorage.setItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
 
     // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
     // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 21322e6e5bf9..1046f6b838c7 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -18,7 +18,7 @@ import { getDisplayName, utfEncodeString } from '../utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
-  RELOAD_AND_PROFILE_KEY,
+  LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
@@ -1642,7 +1642,7 @@ export function attach(
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
-  if (localStorage.getItem(RELOAD_AND_PROFILE_KEY) === 'true') {
+  if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
     startProfiling();
   }
 
diff --git a/src/constants.js b/src/constants.js
index 3523aa5214be..ef69e21760e9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,6 +5,7 @@ export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
-export const RELOAD_AND_PROFILE_KEY = 'React::DevTools::reloadAndProfile';
+export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
+  'React::DevTools::reloadAndProfile';
 
 export const __DEBUG__ = false;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 838563fb0f29..2294ca89bd7b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -31,8 +31,12 @@ const debug = (methodName, ...args) => {
   }
 };
 
+const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
+  'React::DevTools::captureScreenshots';
+
 type Config = {|
   isProfiling?: boolean,
+  supportsCaptureScreenshots?: boolean,
   supportsFileDownloads?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
@@ -49,6 +53,8 @@ export type Capabilities = {|
 export default class Store extends EventEmitter {
   _bridge: Bridge;
 
+  _captureScreenshots: boolean = false;
+
   // Map of ID to Element.
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
@@ -96,6 +102,7 @@ export default class Store extends EventEmitter {
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
+  _supportsCaptureScreenshots: boolean = false;
   _supportsFileDownloads: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
@@ -108,6 +115,7 @@ export default class Store extends EventEmitter {
     if (config != null) {
       const {
         isProfiling,
+        supportsCaptureScreenshots,
         supportsFileDownloads,
         supportsProfiling,
         supportsReloadAndProfile,
@@ -115,6 +123,12 @@ export default class Store extends EventEmitter {
       if (isProfiling) {
         this._isProfiling = true;
       }
+      if (supportsCaptureScreenshots) {
+        this._supportsCaptureScreenshots = true;
+        this._captureScreenshots =
+          localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) !==
+          'false';
+      }
       if (supportsFileDownloads) {
         this._supportsFileDownloads = true;
       }
@@ -139,6 +153,20 @@ export default class Store extends EventEmitter {
     this._profilingCache = new ProfilingCache(bridge, this);
   }
 
+  get captureScreenshots(): boolean {
+    return this._captureScreenshots;
+  }
+  set captureScreenshots(value: boolean): void {
+    this._captureScreenshots = value;
+
+    localStorage.setItem(
+      LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY,
+      value ? 'true' : 'false'
+    );
+
+    this.emit('captureScreenshots');
+  }
+
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
     return (
@@ -190,6 +218,10 @@ export default class Store extends EventEmitter {
     return this._roots;
   }
 
+  get supportsCaptureScreenshots(): boolean {
+    return this._supportsCaptureScreenshots;
+  }
+
   get supportsFileDownloads(): boolean {
     return this._supportsFileDownloads;
   }
@@ -419,7 +451,9 @@ export default class Store extends EventEmitter {
 
       const commitIndex = profilingOperations.length - 1;
 
-      this._bridge.send('captureScreenshot', { commitIndex });
+      if (this._captureScreenshots) {
+        this._bridge.send('captureScreenshot', { commitIndex });
+      }
     }
 
     let addedElementIDs: Uint32Array = new Uint32Array(0);
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index a7eba6a3ba8c..a9bd56a2e77a 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -55,6 +55,9 @@
 
 .Screenshot {
   width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  cursor: pointer;
 }
 
 .Modal {
@@ -73,4 +76,6 @@
 .ModalImage {
   max-height: 100%;
   max-width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
 }
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 97d366f2e3fd..808697ea4c6b 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,8 +1,11 @@
 // @flow
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { useSubscription } from '../hooks';
+import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
+import Store from 'src/devtools/store';
 
 import styles from './Settings.css';
 
@@ -11,10 +14,23 @@ export type Props = {|
 |};
 
 export default function Settings({ portalContainer }: Props) {
+  const store = useContext(StoreContext);
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
     SettingsContext
   );
 
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.captureScreenshots,
+      subscribe: (callback: Function) => {
+        store.addListener('captureScreenshots', callback);
+        return () => store.removeListener('captureScreenshots', callback);
+      },
+    }),
+    [store]
+  );
+  const captureScreenshots = useSubscription<boolean, Store>(subscription);
+
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
       setDisplayDensity(currentTarget.value);
@@ -29,6 +45,13 @@ export default function Settings({ portalContainer }: Props) {
     [setTheme]
   );
 
+  const updateCaptureScreenshotsWhileProfiling = useCallback(
+    ({ currentTarget }) => {
+      store.captureScreenshots = currentTarget.checked;
+    },
+    [store]
+  );
+
   const children = (
     <div className={styles.Settings}>
       <div className={styles.Section}>
@@ -91,6 +114,21 @@ export default function Settings({ portalContainer }: Props) {
           </label>
         </div>
       </div>
+      {store.supportsCaptureScreenshots && (
+        <div className={styles.Section}>
+          <div className={styles.Header}>Profiler</div>
+          <div className={styles.OptionGroup}>
+            <label className={styles.Option}>
+              <input
+                type="checkbox"
+                checked={captureScreenshots}
+                onChange={updateCaptureScreenshotsWhileProfiling}
+              />{' '}
+              Capture screenshots while profiling
+            </label>
+          </div>
+        </div>
+      )}
     </div>
   );
 
diff --git a/yarn.lock b/yarn.lock
index 3779ffc9ca2b..622ecd77fac2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2038,6 +2038,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+  integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
+
 base64-js@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
@@ -3259,6 +3264,13 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+css-line-break@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
+  integrity sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=
+  dependencies:
+    base64-arraybuffer "^0.1.5"
+
 css-loader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -5392,6 +5404,13 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html2canvas@^1.0.0-alpha.12:
+  version "1.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz#3b1992e3c9b3f56063c35fd620494f37eba88513"
+  integrity sha1-OxmS48mz9WBjw1/WIElPN+uohRM=
+  dependencies:
+    css-line-break "1.0.1"
+
 htmlparser2@^3.9.1:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"

From 99f2e0da6f3aee53aa47b9d48574849f351b960b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 18:16:00 -0700
Subject: [PATCH 203/814] Hardened background script against potential errors

---
 shells/browser/shared/src/background.js | 30 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index 4c14fd02e409..947117a10501 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -123,19 +123,27 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
     if (request.captureScreenshot) {
       const { commitIndex } = request;
-      chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
-        // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
-        // so we have to use the chrome.tabs API for this instead.
-        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-          chrome.tabs.sendMessage(tabs[0].id, {
-            event: 'screenshotCaptured',
-            payload: {
-              commitIndex,
-              dataURL,
-            },
+      try {
+        chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
+          // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
+          // so we have to use the chrome.tabs API for this instead.
+          chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+            if (tabs.length > 0) {
+              chrome.tabs.sendMessage(tabs[0].id, {
+                event: 'screenshotCaptured',
+                payload: {
+                  commitIndex,
+                  dataURL,
+                },
+              });
+            }
           });
         });
-      });
+      } catch (error) {
+        // Screen captures may not always be allowed.
+        // DevTools is robust enough to handle missing images in this case.
+        // See https://stackoverflow.com/questions/55504938
+      }
     }
   }
 });

From 7fbdfd9f5ac5696a7a6b14267ddb1d9f729b603f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Apr 2019 18:20:18 -0700
Subject: [PATCH 204/814] Copied findCurrentFiberUsingSlowPath Suspense bug fix
 from recent PR https://github.com/facebook/react/pull/15312/files

---
 src/backend/renderer.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1046f6b838c7..44d07f0c0bfb 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1105,6 +1105,7 @@ export function attach(
   // This function is copied from React and should be kept in sync:
   // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
   // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
+  // BEGIN copied code
   function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
     let alternate = fiber.alternate;
     if (!alternate) {
@@ -1121,15 +1122,28 @@ export function attach(
     // If we have two possible branches, we'll walk backwards up to the root
     // to see what path the root points to. On the way we may hit one of the
     // special cases and we'll deal with them.
-    let a = fiber;
-    let b = alternate;
+    let a: Fiber = fiber;
+    let b: Fiber = alternate;
     while (true) {
       let parentA = a.return;
-      let parentB = parentA ? parentA.alternate : null;
-      if (!parentA || !parentB) {
+      if (parentA === null) {
         // We're at the root.
         break;
       }
+      let parentB = parentA.alternate;
+      if (parentB === null) {
+        // There is no alternate. This is an unusual case. Currently, it only
+        // happens when a Suspense component is hidden. An extra fragment fiber
+        // is inserted in between the Suspense fiber and its children. Skip
+        // over this extra fragment fiber and proceed to the next parent.
+        const nextParent = parentA.return;
+        if (nextParent !== null) {
+          a = b = nextParent;
+          continue;
+        }
+        // If there's no parent, we're at the root.
+        break;
+      }
 
       // If both copies of the parent fiber point to the same child, we can
       // assume that the child is current. This happens when we bailout on low
@@ -1234,6 +1248,7 @@ export function attach(
     // Otherwise B has to be current branch.
     return alternate;
   }
+  // END copied code
 
   function selectElement(id: number): void {
     let fiber = idToFiberMap.get(id);

From b1c675b8b135b45a2431dce814c2e98cd27f683d Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 09:54:18 +0100
Subject: [PATCH 205/814] Make owner stack reachable by keyboard

---
 src/devtools/views/Components/SelectedElement.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 76b338feec06..440ea8548073 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -206,12 +206,25 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
     selectElementByID,
   ]);
 
+  const handleKeyPress = useCallback(
+    e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        selectElementByID(id);
+      }
+    },
+    [id, selectElementByID]
+  );
+
   return (
     <div
       key={id}
       className={styles.Owner}
       onClick={handleClick}
+      onKeyPress={handleKeyPress}
       title={displayName}
+      tabIndex={0}
+      role="button"
     >
       {displayName}
     </div>

From ec71171becee3d5949229661e47c3bdbd565fc7f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 15:59:06 +0100
Subject: [PATCH 206/814] Move selection when typing in search field

---
 src/devtools/views/Components/TreeContext.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 1b3fa5c29130..3e0537224649 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -195,6 +195,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   } = state;
 
   const prevSearchIndex = searchIndex;
+  const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
   // Search isn't supported when the owner's tree is active.
@@ -307,8 +308,8 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     }
   }
 
-  // Changes in search index should override the selected element.
-  if (searchIndex !== prevSearchIndex) {
+  // Changes in search index or typing should override the selected element.
+  if (searchIndex !== prevSearchIndex || searchText.indexOf(prevSearchText) === 0) {
     if (searchIndex === null) {
       selectedElementIndex = null;
       selectedElementID = null;

From 8cfb0e20c7038abe0fa4b46bdda171b31d2b1855 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 16:22:21 +0100
Subject: [PATCH 207/814] Match search at word boundaries

---
 src/devtools/views/utils.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 5b42a27e06c7..27f9fdae75e5 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -6,7 +6,34 @@ import { meta } from '../../hydration';
 import type { HooksTree } from 'src/backend/types';
 
 export function createRegExp(string: string): RegExp {
-  return new RegExp(escapeStringRegExp(string), 'i');
+  // 'item' should match 'Item' and 'ListItem', but not 'InviteMom'.
+  // To do this, we'll slice off 'tem' and check first letter separately.
+  const escaped = escapeStringRegExp(string);
+  const firstLetter = escaped[0];
+  let restRegex = '';
+  // For 'item' input, restRegex becomes '[tT][eE][mM]'
+  // We can't simply make it case-insensitive because first letter case matters.
+  for (let i = 1; i < escaped.length; i++) {
+    const char = escaped[i];
+    restRegex += '[' + char.toLowerCase() + char.toUpperCase() + ']';
+  }
+  // Respect first letter only if it starts a word.
+  return new RegExp(
+    // For example:
+    // (^[iI]|I)[tT][eE][mM]
+    // Matches:
+    // 'Item'
+    // 'ListItem'
+    // but not 'InviteMom'
+    '(^[' +
+      firstLetter +
+      firstLetter.toLowerCase() +
+      ']' +
+      '|' +
+      firstLetter.toUpperCase() +
+      ')' +
+      restRegex
+  );
 }
 
 export function getMetaValueLabel(data: Object): string | null {

From 8c3a97401f883308a53e8e2759736fce35d5b705 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 08:35:25 -0700
Subject: [PATCH 208/814] Chagned owner div to be actual button

---
 .../views/Components/SelectedElement.css        | 11 ++++++++++-
 .../views/Components/SelectedElement.js         | 17 ++---------------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 4d0c7cbcf847..6aa12407917a 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -59,8 +59,17 @@
 }
 
 .Owner {
-  padding-left: 0.75rem;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  margin-left: 0.5rem;
   cursor: pointer;
+  background: none;
+  border: none;
+  display: block;
+}
+.Owner:focus {
+  outline: none;
+  background-color: var(--color-button-background-focus);
 }
 
 .Loading {
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 440ea8548073..b6b807023503 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -206,28 +206,15 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
     selectElementByID,
   ]);
 
-  const handleKeyPress = useCallback(
-    e => {
-      if (e.key === ' ' || e.key === 'Enter') {
-        e.preventDefault();
-        selectElementByID(id);
-      }
-    },
-    [id, selectElementByID]
-  );
-
   return (
-    <div
+    <button
       key={id}
       className={styles.Owner}
       onClick={handleClick}
-      onKeyPress={handleKeyPress}
       title={displayName}
-      tabIndex={0}
-      role="button"
     >
       {displayName}
-    </div>
+    </button>
   );
 }
 

From a9fced9b0d4eab36f70da29a32fcaca3b2a37b6c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 08:35:42 -0700
Subject: [PATCH 209/814] Prettier

---
 src/devtools/views/Components/TreeContext.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 3e0537224649..e403d708304a 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -309,7 +309,10 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   }
 
   // Changes in search index or typing should override the selected element.
-  if (searchIndex !== prevSearchIndex || searchText.indexOf(prevSearchText) === 0) {
+  if (
+    searchIndex !== prevSearchIndex ||
+    searchText.indexOf(prevSearchText) === 0
+  ) {
     if (searchIndex === null) {
       selectedElementIndex = null;
       selectedElementID = null;

From 39da33a7bf5a55c8398708fb7294e9ebc56249df Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 16:38:49 +0100
Subject: [PATCH 210/814] Fix regex

---
 src/devtools/views/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 27f9fdae75e5..00fb6ea9b72f 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -26,8 +26,8 @@ export function createRegExp(string: string): RegExp {
     // 'ListItem'
     // but not 'InviteMom'
     '(^[' +
-      firstLetter +
       firstLetter.toLowerCase() +
+      firstLetter.toUpperCase() +
       ']' +
       '|' +
       firstLetter.toUpperCase() +

From 0f0062a71c6e6d9f7b29fb30af2880cb7c316318 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 17:00:35 +0100
Subject: [PATCH 211/814] Fix special cases

---
 src/devtools/views/Components/SearchInput.js |  2 +-
 src/devtools/views/utils.js                  | 34 ++++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 51d0e58d3b12..9317f2d476ca 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -95,7 +95,7 @@ export default function SearchInput(props: Props) {
         onChange={handleTextChange}
         onKeyDown={handleKeyDown}
         onKeyPress={handleInputKeyPress}
-        placeholder="Search (text or /regex/)"
+        placeholder="Search"
         ref={inputRef}
         value={searchText}
       />
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 00fb6ea9b72f..2e54854982be 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -6,18 +6,36 @@ import { meta } from '../../hydration';
 import type { HooksTree } from 'src/backend/types';
 
 export function createRegExp(string: string): RegExp {
+  function isLetter(char: string) {
+    return char.toLowerCase() !== char.toUpperCase();
+  }
+
+  function matchAnyCase(char: string) {
+    if (!isLetter(char)) {
+      // Don't mess with special characters like [.
+      return char;
+    }
+    return '[' + char.toLowerCase() + char.toUpperCase() + ']';
+  }
+
   // 'item' should match 'Item' and 'ListItem', but not 'InviteMom'.
   // To do this, we'll slice off 'tem' and check first letter separately.
   const escaped = escapeStringRegExp(string);
-  const firstLetter = escaped[0];
+  const firstChar = escaped[0];
   let restRegex = '';
   // For 'item' input, restRegex becomes '[tT][eE][mM]'
   // We can't simply make it case-insensitive because first letter case matters.
   for (let i = 1; i < escaped.length; i++) {
-    const char = escaped[i];
-    restRegex += '[' + char.toLowerCase() + char.toUpperCase() + ']';
+    restRegex += matchAnyCase(escaped[i]);
+  }
+
+  if (!isLetter(firstChar)) {
+    // We can't put a non-character like [ in a group
+    // so we fall back to the simple case.
+    return new RegExp(firstChar + restRegex);
   }
-  // Respect first letter only if it starts a word.
+
+  // Construct a smarter regex.
   return new RegExp(
     // For example:
     // (^[iI]|I)[tT][eE][mM]
@@ -25,12 +43,10 @@ export function createRegExp(string: string): RegExp {
     // 'Item'
     // 'ListItem'
     // but not 'InviteMom'
-    '(^[' +
-      firstLetter.toLowerCase() +
-      firstLetter.toUpperCase() +
-      ']' +
+    '(^' +
+      matchAnyCase(firstChar) +
       '|' +
-      firstLetter.toUpperCase() +
+      firstChar.toUpperCase() +
       ')' +
       restRegex
   );

From 2afda3de37e55dc89e1cecd63fcd3d9056f335a3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 17:05:34 +0100
Subject: [PATCH 212/814] Add back regex support

---
 src/devtools/views/Components/SearchInput.js |  2 +-
 src/devtools/views/utils.js                  | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 9317f2d476ca..51d0e58d3b12 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -95,7 +95,7 @@ export default function SearchInput(props: Props) {
         onChange={handleTextChange}
         onKeyDown={handleKeyDown}
         onKeyPress={handleInputKeyPress}
-        placeholder="Search"
+        placeholder="Search (text or /regex/)"
         ref={inputRef}
         value={searchText}
       />
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 2e54854982be..2db6fb82a72c 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -6,6 +6,23 @@ import { meta } from '../../hydration';
 import type { HooksTree } from 'src/backend/types';
 
 export function createRegExp(string: string): RegExp {
+  // Allow /regex/ syntax with optional last /
+  if (string[0] === '/') {
+    // Cut off first slash
+    string = string.substring(1);
+    // Cut off last slash, but only if it's there
+    if (string[string.length - 1] === '/') {
+      string = string.substring(0, string.length - 1);
+    }
+    try {
+      return new RegExp(string, 'i');
+    } catch (err) {
+      // Bad regex. Make it not match anything.
+      // TODO: maybe warn in console?
+      return new RegExp('.^');
+    }
+  }
+
   function isLetter(char: string) {
     return char.toLowerCase() !== char.toUpperCase();
   }

From ded2ce03ee10b3a74b2c38fbad2238c4de948916 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 10:08:48 -0700
Subject: [PATCH 213/814] Renamed TreeWrapper to innerElementType

---
 src/devtools/views/Components/Tree.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 936c34853e8f..715c60a4faea 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -113,7 +113,7 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
-              innerElementType={TreeWrapper}
+              innerElementType={innerElementType}
               itemCount={numElements}
               itemData={itemData}
               itemSize={lineHeight}
@@ -129,7 +129,7 @@ export default function Tree(props: Props) {
   );
 }
 
-function TreeWrapper({ style, ...rest }) {
+function innerElementType({ style, ...rest }) {
   const {
     numElements,
     selectedElementIndex,

From 8478a526e646fdeeaf6e254bb73b90571f2f32b9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 19:28:42 +0100
Subject: [PATCH 214/814] Don't crash for deeply nested Hooks

---
 .../app/InspectableElements/CustomHooks.js    | 10 ++++++++
 .../app/InspectableElements/NestedProps.js    | 23 +++++++++++++++++++
 src/devtools/views/Components/HooksTree.js    |  6 +++++
 3 files changed, 39 insertions(+)

diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index 3c9ad8161b24..2b368a15fe99 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -32,6 +32,13 @@ function useCustomObject() {
   return useState(123);
 }
 
+function useVeryDeeplyNestedHook(i) {
+  useDebugValue(i);
+  if (i > 0) {
+    useVeryDeeplyNestedHook(i - 1);
+  }
+}
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
 
@@ -53,6 +60,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   // Tests nested custom hooks
   useNestedOuterHook();
 
+  // Verify deep nesting doesn't break
+  useVeryDeeplyNestedHook(50);
+
   return <button onClick={onClick}>Count: {debouncedCount}</button>;
 }
 const MemoWithHooks = memo(FunctionWithHooks);
diff --git a/shells/dev/app/InspectableElements/NestedProps.js b/shells/dev/app/InspectableElements/NestedProps.js
index 068b309a89f7..d6f5a804eb69 100644
--- a/shells/dev/app/InspectableElements/NestedProps.js
+++ b/shells/dev/app/InspectableElements/NestedProps.js
@@ -23,6 +23,29 @@ export default function ObjectProps() {
       array={['first', 'second', 'third']}
       objectInArray={[object]}
       arrayInObject={{ array: ['first', 'second', 'third'] }}
+      deepObject={{
+        // Known limitation: we won't go deeper than several levels.
+        // In the future, we might offer a way to request deeper access on demand.
+        a: {
+          b: {
+            c: {
+              d: {
+                e: {
+                  f: {
+                    g: {
+                      h: {
+                        i: {
+                          j: 10,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index c95f6b9b3cff..702318136ec0 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -9,6 +9,7 @@ import EditableValue from './EditableValue';
 import KeyValue from './KeyValue';
 import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
+import { meta } from '../../../hydration';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
 
@@ -71,6 +72,11 @@ type HookViewProps = {|
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const { name, id: hookID, isStateEditable, subHooks, value } = hook;
+  if (hook.hasOwnProperty(meta.inspected)) {
+    // This Hook is too deep and hasn't been hydrated.
+    // TODO: show UI to load its data.
+    return null;
+  }
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);

From 194f523331751bddf0e132891e134a58f5c45fc9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 19:36:04 +0100
Subject: [PATCH 215/814] Add size to owner stack items

---
 src/devtools/views/Components/SelectedElement.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 6aa12407917a..7120bfc0aa7e 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -32,6 +32,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--color-component-name);
+  font-size: var(--font-size-sans-normal);
 }
 .Component:before,
 .Owner:before {

From 18e337707a9dbfcd380deced8901cd1ec880d496 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 19:50:27 +0100
Subject: [PATCH 216/814] Stop mouseup propagation while inspecting

---
 src/backend/agent.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 390772f35819..84f9cca67612 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -320,6 +320,7 @@ export default class Agent extends EventEmitter {
   startInspectingDOM = () => {
     window.addEventListener('click', this._onClick, true);
     window.addEventListener('mousedown', this._onMouseDown, true);
+    window.addEventListener('mouseup', this._onMouseUp, true);
     window.addEventListener('mouseover', this._onMouseOver, true);
   };
 
@@ -339,6 +340,7 @@ export default class Agent extends EventEmitter {
 
     window.removeEventListener('click', this._onClick, true);
     window.removeEventListener('mousedown', this._onMouseDown, true);
+    window.removeEventListener('mouseup', this._onMouseUp, true);
     window.removeEventListener('mouseover', this._onMouseOver, true);
   };
 
@@ -408,6 +410,14 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  // While we don't do anything here, this makes choosing
+  // the inspected element less invasive and less likely
+  // to dismiss e.g. a context menu.
+  _onMouseUp = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
   _onMouseOver = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();

From 9351c8070dffcbf2eba449073c7e4028d224db6b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 19:54:56 +0100
Subject: [PATCH 217/814] Fix it all

---
 src/devtools/views/Components/SelectedElement.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 7120bfc0aa7e..7871f4710b79 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -32,7 +32,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--color-component-name);
-  font-size: var(--font-size-sans-normal);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
 }
 .Component:before,
 .Owner:before {

From 64b0fd8ecd9353d6d10965c81061623fffd6f2d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 13:52:53 -0700
Subject: [PATCH 218/814] Fixed owners header font family too

---
 src/devtools/views/Components/SelectedElement.css | 4 ++++
 src/devtools/views/Components/SelectedElement.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 7871f4710b79..c67d40a2ec2c 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -27,6 +27,10 @@
   border-top: 1px solid var(--color-border);
 }
 
+.OwnersHeader {
+  font-family: var(--font-family-sans);
+}
+
 .Component,
 .Owner {
   overflow: hidden;
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index b6b807023503..1872ca991fe6 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -184,7 +184,7 @@ function InspectedElementView({
 
       {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
-          <div>owner stack</div>
+          <div className={styles.OwnersHeader}>owner stack</div>
           {owners.map(owner => (
             <OwnerView
               key={owner.id}

From 8d435595cd87dc8a4b44f84741be18790016e694 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 14:09:10 -0700
Subject: [PATCH 219/814] Added truncation UI indicator for hooks. Addressed
 lint rule violations.

---
 .../app/InspectableElements/CustomHooks.js    | 29 +++++++++++++++----
 src/devtools/views/Components/HooksTree.css   |  4 +++
 src/devtools/views/Components/HooksTree.js    | 15 +++++++---
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index 2b368a15fe99..56eea075d100 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -32,11 +32,28 @@ function useCustomObject() {
   return useState(123);
 }
 
-function useVeryDeeplyNestedHook(i) {
-  useDebugValue(i);
-  if (i > 0) {
-    useVeryDeeplyNestedHook(i - 1);
-  }
+function useDeepHookA() {
+  useDebugValue('useDeepHookA');
+  useDeepHookB();
+}
+function useDeepHookB() {
+  useDebugValue('useDeepHookB');
+  useDeepHookC();
+}
+function useDeepHookC() {
+  useDebugValue('useDeepHookC');
+  useDeepHookD();
+}
+function useDeepHookD() {
+  useDebugValue('useDeepHookD');
+  useDeepHookE();
+}
+function useDeepHookE() {
+  useDebugValue('useDeepHookE');
+  useDeepHookF();
+}
+function useDeepHookF() {
+  useDebugValue('useDeepHookF');
 }
 
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
@@ -61,7 +78,7 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   useNestedOuterHook();
 
   // Verify deep nesting doesn't break
-  useVeryDeeplyNestedHook(50);
+  useDeepHookA();
 
   return <button onClick={onClick}>Count: {debouncedCount}</button>;
 }
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 57a6fe39dc71..a1acc5a49306 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -46,3 +46,7 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.TruncationIndicator {
+  color: var(--color-dimmer);
+}
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 702318136ec0..993760696c88 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -72,15 +72,22 @@ type HookViewProps = {|
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const { name, id: hookID, isStateEditable, subHooks, value } = hook;
+
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
     // TODO: show UI to load its data.
-    return null;
+    return (
+      <div className={styles.Hook}>
+        <div className={styles.NameValueRow}>
+          <span className={styles.TruncationIndicator}>...</span>
+        </div>
+      </div>
+    );
   }
 
-  const bridge = useContext(BridgeContext);
-  const store = useContext(StoreContext);
-
   // TODO Add click and key handlers for toggling element open/close state.
 
   const isCustomHook = subHooks.length > 0;

From 6c5c2cd3ad6b8978414a8e8536778521352c804f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 14:10:14 -0700
Subject: [PATCH 220/814] Renamed innerElementType -> InnerElementType to avoid
 confusing hooks lint rule

---
 src/devtools/views/Components/Tree.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 715c60a4faea..785adc4e7ae2 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -113,7 +113,7 @@ export default function Tree(props: Props) {
             <FixedSizeList
               className={styles.List}
               height={height}
-              innerElementType={innerElementType}
+              innerElementType={InnerElementType}
               itemCount={numElements}
               itemData={itemData}
               itemSize={lineHeight}
@@ -129,7 +129,7 @@ export default function Tree(props: Props) {
   );
 }
 
-function innerElementType({ style, ...rest }) {
+function InnerElementType({ style, ...rest }) {
   const {
     numElements,
     selectedElementIndex,

From 2928a0be742babe9e971e252c2f96bb2dbf6c564 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 00:03:17 +0100
Subject: [PATCH 221/814] Explicitly guard debug calls

---
 src/backend/agent.js                          |  4 +-
 src/backend/renderer.js                       | 12 ++++--
 src/devtools/store.js                         | 38 +++++++++++++------
 .../views/Profiler/CommitTreeBuilder.js       | 32 ++++++++++------
 4 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 84f9cca67612..ddbcee3e2c47 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -365,7 +365,9 @@ export default class Agent extends EventEmitter {
   };
 
   onHookOperations = (operations: Uint32Array) => {
-    debug('onHookOperations', operations);
+    if (__DEBUG__) {
+      debug('onHookOperations', operations);
+    }
 
     // TODO:
     // The chrome.runtime does not currently support transferables; it forces JSON serialization.
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 44d07f0c0bfb..c6381cdb27b5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -735,7 +735,9 @@ export function attach(
   }
 
   function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
-    debug('mountFiber()', fiber, parentFiber);
+    if (__DEBUG__) {
+      debug('mountFiber()', fiber, parentFiber);
+    }
 
     const shouldEnqueueMount = !shouldFilterFiber(fiber);
 
@@ -756,7 +758,9 @@ export function attach(
     fiber: Fiber,
     hasChildOrderChanged: boolean
   ) {
-    debug('enqueueUpdateIfNecessary()', fiber);
+    if (__DEBUG__) {
+      debug('enqueueUpdateIfNecessary()', fiber);
+    }
 
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
     if (isProfilingSupported) {
@@ -833,7 +837,9 @@ export function attach(
     prevFiber: Fiber,
     parentFiber: Fiber | null
   ) {
-    debug('enqueueUpdateIfNecessary()', nextFiber, parentFiber);
+    if (__DEBUG__) {
+      debug('enqueueUpdateIfNecessary()', nextFiber, parentFiber);
+    }
 
     const shouldEnqueueUpdate = !shouldFilterFiber(nextFiber);
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 2294ca89bd7b..e92f36845c6f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -110,7 +110,9 @@ export default class Store extends EventEmitter {
   constructor(bridge: Bridge, config?: Config) {
     super();
 
-    debug('constructor', 'subscribing to Bridge');
+    if (__DEBUG__) {
+      debug('constructor', 'subscribing to Bridge');
+    }
 
     if (config != null) {
       const {
@@ -433,7 +435,9 @@ export default class Store extends EventEmitter {
       operations = Uint32Array.from(Object.values(operations));
     }
 
-    debug('onBridgeOperations', operations);
+    if (__DEBUG__) {
+      debug('onBridgeOperations', operations);
+    }
 
     let haveRootsChanged = false;
 
@@ -479,7 +483,9 @@ export default class Store extends EventEmitter {
           i = i + 3;
 
           if (type === ElementTypeRoot) {
-            debug('Add', `new root fiber ${id}`);
+            if (__DEBUG__) {
+              debug('Add', `new root fiber ${id}`);
+            }
 
             if (this._idToElement.has(id)) {
               // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
@@ -532,10 +538,12 @@ export default class Store extends EventEmitter {
                 : utfDecodeString((operations.slice(i, i + keyLength): any));
             i += +keyLength;
 
-            debug(
-              'Add',
-              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
-            );
+            if (__DEBUG__) {
+              debug(
+                'Add',
+                `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+              );
+            }
 
             if (this._idToElement.has(id)) {
               // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
@@ -582,7 +590,9 @@ export default class Store extends EventEmitter {
 
           parentElement = ((this._idToElement.get(parentID): any): Element);
           if (parentElement == null) {
-            debug('Remove', `fiber ${id} root`);
+            if (__DEBUG__) {
+              debug('Remove', `fiber ${id} root`);
+            }
 
             this._roots = this._roots.filter(rootID => rootID !== id);
             this._rootIDToRendererID.delete(id);
@@ -590,7 +600,9 @@ export default class Store extends EventEmitter {
 
             haveRootsChanged = true;
           } else {
-            debug('Remove', `fiber ${id} from parent ${parentID}`);
+            if (__DEBUG__) {
+              debug('Remove', `fiber ${id} from parent ${parentID}`);
+            }
 
             parentElement.children = parentElement.children.filter(
               childID => childID !== id
@@ -613,7 +625,9 @@ export default class Store extends EventEmitter {
 
           i = i + 3 + numChildren;
 
-          debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+          if (__DEBUG__) {
+            debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+          }
 
           element = ((this._idToElement.get(id): any): Element);
           element.children = Array.from(children);
@@ -692,7 +706,9 @@ export default class Store extends EventEmitter {
   };
 
   onBridgeShutdown = () => {
-    debug('onBridgeShutdown', 'unsubscribing from Bridge');
+    if (__DEBUG__) {
+      debug('onBridgeShutdown', 'unsubscribing from Bridge');
+    }
 
     this._bridge.removeListener('operations', this.onBridgeOperations);
     this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 2f714aaa9d9f..0f229c2fc0db 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -186,7 +186,9 @@ function updateTree(
         if (type === ElementTypeRoot) {
           i++; // supportsProfiling flag
 
-          debug('Add', `new root fiber ${id}`);
+          if (__DEBUG__) {
+            debug('Add', `new root fiber ${id}`);
+          }
 
           if (nodes.has(id)) {
             // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
@@ -233,10 +235,12 @@ function updateTree(
             // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
             // Maybe in the future we'll revisit this.
           } else {
-            debug(
-              'Add',
-              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
-            );
+            if (__DEBUG__) {
+              debug(
+                'Add',
+                `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+              );
+            }
 
             parentNode = getClonedNode(parentID);
             parentNode.children = parentNode.children.concat(id);
@@ -268,7 +272,9 @@ function updateTree(
         if (parentNode == null) {
           // No-op
         } else {
-          debug('Remove', `fiber ${id} from parent ${parentID}`);
+          if (__DEBUG__) {
+            debug('Remove', `fiber ${id} from parent ${parentID}`);
+          }
 
           parentNode.children = parentNode.children.filter(
             childID => childID !== id
@@ -285,7 +291,9 @@ function updateTree(
 
         i = i + 3 + numChildren;
 
-        debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+        if (__DEBUG__) {
+          debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+        }
 
         node = getClonedNode(id);
         node.children = Array.from(children);
@@ -297,10 +305,12 @@ function updateTree(
         node = getClonedNode(id);
         node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
 
-        debug(
-          'Update',
-          `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`
-        );
+        if (__DEBUG__) {
+          debug(
+            'Update',
+            `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`
+          );
+        }
 
         i = i + 3;
         break;

From a8e46c67e67691813f130d72d097fc8ba542dea2 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 00:49:27 +0100
Subject: [PATCH 222/814] Don't move selection unless search text increased
 length

---
 src/devtools/views/Components/TreeContext.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index e403d708304a..a795e2eb39dd 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -309,10 +309,10 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   }
 
   // Changes in search index or typing should override the selected element.
-  if (
-    searchIndex !== prevSearchIndex ||
-    searchText.indexOf(prevSearchText) === 0
-  ) {
+  const didAddToSearchText =
+    searchText.length > prevSearchText.length &&
+    searchText.indexOf(prevSearchText) === 0;
+  if (searchIndex !== prevSearchIndex || didAddToSearchText) {
     if (searchIndex === null) {
       selectedElementIndex = null;
       selectedElementID = null;

From 4f5437edf767f153152d14e2565c777921dd1a47 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 15:26:11 +0100
Subject: [PATCH 223/814] Allow to toggle Suspense in Components pane

---
 shells/dev/app/index.js                       |  1 +
 src/backend/agent.js                          | 20 ++++++
 src/backend/renderer.js                       | 65 ++++++++++++++++++-
 src/backend/types.js                          |  5 ++
 .../views/Components/SelectedElement.js       | 33 ++++++++--
 src/devtools/views/Components/types.js        |  3 +
 6 files changed, 119 insertions(+), 8 deletions(-)

diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 1daae4559596..e731e64470a3 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -32,6 +32,7 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(DeeplyNestedComponents);
+  mountHelper(SuspenseTree);
 }
 
 function unmountTestApp() {
diff --git a/src/backend/agent.js b/src/backend/agent.js
index ddbcee3e2c47..1f49a0fa2d58 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -38,6 +38,12 @@ type SetInParams = {|
   value: any,
 |};
 
+type OverrideSuspenseParams = {|
+  id: number,
+  rendererID: number,
+  forceFallback: boolean,
+|};
+
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _isProfiling: boolean = false;
@@ -68,6 +74,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('overrideHookState', this.overrideHookState);
     bridge.addListener('overrideProps', this.overrideProps);
     bridge.addListener('overrideState', this.overrideState);
+    bridge.addListener('overrideSuspense', this.overrideSuspense);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
     bridge.addListener('screenshotCaptured', this.screenshotCaptured);
     bridge.addListener('selectElement', this.selectElement);
@@ -302,6 +309,19 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  overrideSuspense = ({
+    id,
+    rendererID,
+    forceFallback,
+  }: OverrideSuspenseParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideSuspense(id, forceFallback);
+    }
+  };
+
   setRendererInterface(
     rendererID: RendererID,
     rendererInterface: RendererInterface
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c6381cdb27b5..ea5710643817 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -199,6 +199,7 @@ export function attach(
     IndeterminateComponent,
     MemoComponent,
     SimpleMemoComponent,
+    SuspenseComponent,
   } = ReactTypeOfWork;
   const {
     CONCURRENT_MODE_NUMBER,
@@ -219,7 +220,15 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
-  const { overrideHookState, overrideProps } = renderer;
+  const {
+    overrideHookState,
+    overrideProps,
+    setSuspenseHandler,
+    scheduleUpdate,
+  } = renderer;
+  const supportsEditingSuspense =
+    typeof setSuspenseHandler === 'function' &&
+    typeof scheduleUpdate === 'function';
 
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
@@ -845,8 +854,7 @@ export function attach(
 
     // Suspense components only have a non-null memoizedState if they're timed-out.
     const isTimedOutSuspense =
-      nextFiber.tag === ReactTypeOfWork.SuspenseComponent &&
-      nextFiber.memoizedState !== null;
+      nextFiber.tag === SuspenseComponent && nextFiber.memoizedState !== null;
 
     if (isTimedOutSuspense) {
       // The behavior of timed-out Suspense trees is unique.
@@ -1411,6 +1419,9 @@ export function attach(
       }
     }
 
+    const isTimedOutSuspense =
+      tag === SuspenseComponent && memoizedState !== null;
+
     return {
       id,
 
@@ -1420,6 +1431,14 @@ export function attach(
       // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
 
+      canEditSuspense:
+        supportsEditingSuspense &&
+        // If it's showing the real content, we can always flip fallback.
+        (!isTimedOutSuspense ||
+          // If it's showing fallback because we previously forced it to,
+          // allow toggling it back to remove the fallback override.
+          forceFallbackForSuspenseIDs.has(id)),
+
       // Can view component source location.
       canViewSource,
 
@@ -1667,6 +1686,45 @@ export function attach(
     startProfiling();
   }
 
+  // React will switch between these implementations depending on whether
+  // we have any manually suspended Fibers or not.
+
+  function shouldSuspendFiberAlwaysFalse() {
+    return false;
+  }
+
+  let forceFallbackForSuspenseIDs = new Set();
+  function shouldSuspendFiberAccordingToSet(fiber) {
+    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    return forceFallbackForSuspenseIDs.has(id);
+  }
+
+  function overrideSuspense(id, forceFallback) {
+    if (
+      typeof setSuspenseHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideSuspense() to not get called for earlier React versions.'
+      );
+    }
+    if (forceFallback) {
+      forceFallbackForSuspenseIDs.add(id);
+      if (forceFallbackForSuspenseIDs.size === 1) {
+        // First override is added. Switch React to slower path.
+        setSuspenseHandler(shouldSuspendFiberAccordingToSet);
+      }
+    } else {
+      forceFallbackForSuspenseIDs.delete(id);
+      if (forceFallbackForSuspenseIDs.size === 0) {
+        // Last override is gone. Switch React back to fast path.
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
+    }
+    const fiber = idToFiberMap.get(id);
+    scheduleUpdate(fiber);
+  }
+
   return {
     cleanup,
     flushInitialOperations,
@@ -1680,6 +1738,7 @@ export function attach(
     handleCommitFiberUnmount,
     inspectElement,
     prepareViewElementSource,
+    overrideSuspense,
     renderer,
     selectElement,
     setInContext,
diff --git a/src/backend/types.js b/src/backend/types.js
index 83ad660ee779..b18c900d6239 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -45,6 +45,10 @@ export type ReactRenderer = {
     value: any
   ) => void,
 
+  // 16.9+
+  scheduleUpdate?: ?(fiber: Object) => void,
+  setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,
+
   // Only injected by React v16.8+ in order to support hooks inspection.
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
@@ -95,6 +99,7 @@ export type RendererInterface = {
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
+  overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 1872ca991fe6..6f4958040b4b 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -20,6 +20,7 @@ import {
   ElementTypeForwardRef,
   ElementTypeFunction,
   ElementTypeMemo,
+  ElementTypeSuspense,
 } from '../../types';
 
 import type { InspectedElement } from './types';
@@ -115,6 +116,8 @@ type InspectedElementViewProps = {|
   inspectedElement: InspectedElement,
 |};
 
+const IS_SUSPENDED = 'Suspended';
+
 function InspectedElementView({
   element,
   inspectedElement,
@@ -123,6 +126,7 @@ function InspectedElementView({
   const {
     canEditFunctionProps,
     canEditHooks,
+    canEditSuspense,
     context,
     hooks,
     owners,
@@ -137,6 +141,7 @@ function InspectedElementView({
   let overrideContextFn = null;
   let overridePropsFn = null;
   let overrideStateFn = null;
+  let overrideSuspenseFn = null;
   if (type === ElementTypeClass) {
     overrideContextFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
@@ -160,6 +165,14 @@ function InspectedElementView({
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideProps', { id, path, rendererID, value });
     };
+  } else if (type === ElementTypeSuspense && canEditSuspense) {
+    overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {
+      if (path.length !== 1 && path !== IS_SUSPENDED) {
+        throw new Error('Unexpected path.');
+      }
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('overrideSuspense', { id, rendererID, forceFallback: value });
+    };
   }
 
   return (
@@ -170,11 +183,21 @@ function InspectedElementView({
         overrideValueFn={overridePropsFn}
         showWhenEmpty
       />
-      <InspectedElementTree
-        label="state"
-        data={state}
-        overrideValueFn={overrideStateFn}
-      />
+      {type === ElementTypeSuspense ? (
+        <InspectedElementTree
+          label="suspense"
+          data={{
+            [IS_SUSPENDED]: state !== null,
+          }}
+          overrideValueFn={overrideSuspenseFn}
+        />
+      ) : (
+        <InspectedElementTree
+          label="state"
+          data={state}
+          overrideValueFn={overrideStateFn}
+        />
+      )}
       <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} />
       <InspectedElementTree
         label="context"
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 43dd38fa95ad..b26fb4edc172 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -41,6 +41,9 @@ export type InspectedElement = {|
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
+  // Is this Suspense, and can its value be overriden now?
+  canEditSuspense: boolean,
+
   // Can view component source location.
   canViewSource: boolean,
 

From 48a5aca127a9a0f3e6edb11dcb0e57f8157f10c8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 20:15:25 +0100
Subject: [PATCH 224/814] Fix highlighting timed out Suspense DOM node

---
 src/backend/agent.js    |  7 ++-----
 src/backend/renderer.js | 26 +++++++++++++++++++-------
 src/backend/types.js    |  2 +-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 1f49a0fa2d58..4e3be94eed46 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -210,11 +210,8 @@ export default class Agent extends EventEmitter {
     }
 
     let node: HTMLElement | null = null;
-    if (
-      renderer !== null &&
-      typeof renderer.getNativeFromReactElement === 'function'
-    ) {
-      node = ((renderer.getNativeFromReactElement(id): any): HTMLElement);
+    if (renderer !== null) {
+      node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
     }
 
     if (node != null) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ea5710643817..c149a2541efa 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1053,18 +1053,30 @@ export function attach(
     currentRootID = -1;
   }
 
-  // The naming is confusing.
-  // They deal with opaque nodes (fibers), not elements.
-  function getNativeFromReactElement(id: number) {
+  function findNativeByFiberID(id: number) {
     try {
-      const primaryFiber = getPrimaryFiber(idToFiberMap.get(id));
-      const hostInstance = renderer.findHostInstanceByFiber(primaryFiber);
-      return hostInstance;
+      const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+      if (fiber === null) {
+        return null;
+      }
+      const isTimedOutSuspense =
+        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
+      if (!isTimedOutSuspense) {
+        // Normal case.
+        return renderer.findHostInstanceByFiber(fiber);
+      } else {
+        // A timed-out Suspense's findDOMNode is useless.
+        // Try our best to find the fallback directly.
+        const maybeFallbackFiber =
+          (fiber.child && fiber.child.sibling) || fiber;
+        return renderer.findHostInstanceByFiber(maybeFallbackFiber);
+      }
     } catch (err) {
       // The fiber might have unmounted by now.
       return null;
     }
   }
+
   function getFiberIDFromNative(
     hostInstance,
     findNearestUnfilteredAncestor = false
@@ -1731,7 +1743,7 @@ export function attach(
     getCommitDetails,
     getFiberIDFromNative,
     getInteractions,
-    getNativeFromReactElement,
+    findNativeByFiberID,
     getProfilingDataForDownload,
     getProfilingSummary,
     handleCommitFiberRoot,
diff --git a/src/backend/types.js b/src/backend/types.js
index b18c900d6239..0ee472a01570 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -86,9 +86,9 @@ export type ProfilingSummary = {|
 
 export type RendererInterface = {
   cleanup: () => void,
+  findNativeByFiberID: (id: number) => ?NativeType,
   flushInitialOperations: () => void,
   getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
-  getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
   getFiberIDFromNative: (
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean

From b8245de5a116f7c704af70dcf475bca37170bebc Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Thu, 4 Apr 2019 21:53:57 +0100
Subject: [PATCH 225/814] Nits

---
 shells/dev/app/index.js                          | 1 -
 src/backend/renderer.js                          | 6 +++---
 src/devtools/views/Components/SelectedElement.js | 4 ++--
 src/devtools/views/Components/types.js           | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index e731e64470a3..1daae4559596 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -32,7 +32,6 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(DeeplyNestedComponents);
-  mountHelper(SuspenseTree);
 }
 
 function unmountTestApp() {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c149a2541efa..29caf523d747 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -226,7 +226,7 @@ export function attach(
     setSuspenseHandler,
     scheduleUpdate,
   } = renderer;
-  const supportsEditingSuspense =
+  const supportsTogglingSuspense =
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
@@ -1443,8 +1443,8 @@ export function attach(
       // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
 
-      canEditSuspense:
-        supportsEditingSuspense &&
+      canToggleSuspense:
+        supportsTogglingSuspense &&
         // If it's showing the real content, we can always flip fallback.
         (!isTimedOutSuspense ||
           // If it's showing fallback because we previously forced it to,
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 6f4958040b4b..4f6295bce9d2 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -126,7 +126,7 @@ function InspectedElementView({
   const {
     canEditFunctionProps,
     canEditHooks,
-    canEditSuspense,
+    canToggleSuspense,
     context,
     hooks,
     owners,
@@ -165,7 +165,7 @@ function InspectedElementView({
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideProps', { id, path, rendererID, value });
     };
-  } else if (type === ElementTypeSuspense && canEditSuspense) {
+  } else if (type === ElementTypeSuspense && canToggleSuspense) {
     overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {
       if (path.length !== 1 && path !== IS_SUSPENDED) {
         throw new Error('Unexpected path.');
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index b26fb4edc172..00d5a45844a8 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -42,7 +42,7 @@ export type InspectedElement = {|
   canEditFunctionProps: boolean,
 
   // Is this Suspense, and can its value be overriden now?
-  canEditSuspense: boolean,
+  canToggleSuspense: boolean,
 
   // Can view component source location.
   canViewSource: boolean,

From d1a5346c48323a8ed02c081ac97f8c60c4fb30a7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 5 Apr 2019 08:08:02 -0700
Subject: [PATCH 226/814] Improved keyboard UX and focus UI for Tree and
 OwnersStack

---
 src/devtools/views/Components/OwnersStack.css |  9 ++++++++
 src/devtools/views/Components/OwnersStack.js  | 14 +++++------
 src/devtools/views/Components/Tree.css        |  9 +++++++-
 src/devtools/views/Components/Tree.js         | 23 ++++++++++++++++++-
 src/devtools/views/Components/TreeContext.js  | 10 +++++---
 5 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 1b5f58f04a0c..2f0ebbd2a869 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -14,6 +14,8 @@
   font-size: var(--font-size-monospace-normal);
   white-space: nowrap;
   border-radius: 0.125rem;
+  border: none;
+  background: none;
 }
 
 .Component {
@@ -23,11 +25,18 @@
 .Component:hover {
   background-color: var(--color-hover-background);
 }
+.Component:focus {
+  outline: none;
+  background-color: var(--color-hover-background);
+}
 
 .FocusedComponent {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.FocusedComponent:focus {
+  outline: none;
+}
 
 .VRule {
   height: 20px;
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 4340c148bb6d..2049d4d5c1ff 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -42,22 +42,20 @@ function ElementView({ id, index }: Props) {
   const store = useContext(StoreContext);
   const { displayName } = ((store.getElementByID(id): any): Element);
 
-  const isCurrentlyFocusedOwner = ownerStackIndex === index;
+  const isSelected = ownerStackIndex === index;
 
   const handleClick = useCallback(() => {
-    if (!isCurrentlyFocusedOwner) {
+    if (!isSelected) {
       selectOwner(id);
     }
-  }, [id, isCurrentlyFocusedOwner, selectOwner]);
+  }, [id, isSelected, selectOwner]);
 
   return (
-    <span
-      className={
-        isCurrentlyFocusedOwner ? styles.FocusedComponent : styles.Component
-      }
+    <button
+      className={isSelected ? styles.FocusedComponent : styles.Component}
       onClick={handleClick}
     >
       {displayName}
-    </span>
+    </button>
   );
 }
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 51a3c7081865..c526dd93ceee 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -18,11 +18,18 @@
   width: 100%;
   overflow: auto;
   flex: 1 0 auto;
-  padding: 0.25rem;
 }
 
 .List {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
+  border: 0.25rem solid transparent;
+}
+.List:focus-within {
+  border-color: var(--color-button-background-focus);
+}
+
+.InnerElementType:focus {
+  outline: none;
 }
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 785adc4e7ae2..1d0599a20e35 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -132,8 +133,10 @@ export default function Tree(props: Props) {
 function InnerElementType({ style, ...rest }) {
   const {
     numElements,
+    selectedElementID,
     selectedElementIndex,
     selectElementAtIndex,
+    selectOwner,
   } = useContext(TreeContext);
 
   const handleFocus = () => {
@@ -142,20 +145,38 @@ function InnerElementType({ style, ...rest }) {
     }
   };
 
+  const handleKeyPress = useCallback(
+    event => {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          if (selectedElementID !== null) {
+            selectOwner(selectedElementID);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [selectedElementID, selectOwner]
+  );
+
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
   // See https://github.com/bvaughn/react-devtools-experimental/issues/9
   return (
     <div
-      tabIndex={0}
+      className={styles.InnerElementType}
       onFocus={handleFocus}
+      onKeyPress={handleKeyPress}
       style={{
         ...style,
         display: 'inline-block',
         minWidth: '100%',
         width: undefined,
       }}
+      tabIndex={0}
       {...rest}
     />
   );
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index a795e2eb39dd..940821c1a16c 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -134,9 +134,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         break;
       case 'SELECT_NEXT_ELEMENT_IN_TREE':
         if (
-          selectedElementIndex !== null &&
-          selectedElementIndex + 1 < numElements
+          selectedElementIndex === null ||
+          selectedElementIndex + 1 >= numElements
         ) {
+          selectedElementIndex = 0;
+        } else {
           selectedElementIndex++;
         }
         break;
@@ -152,7 +154,9 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         }
         break;
       case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
-        if (selectedElementIndex !== null && selectedElementIndex > 0) {
+        if (selectedElementIndex === null || selectedElementIndex === 0) {
+          selectedElementIndex = numElements - 1;
+        } else {
           selectedElementIndex--;
         }
         break;

From 0c8129c78abf8d7d4bff9abb6a8378eb8c2a466b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 5 Apr 2019 08:47:23 -0700
Subject: [PATCH 227/814] Sync selected Profiler node back to the Components
 tab

Also show element keys in Profiler charts
---
 .../Profiler/CommitFlamegraphListItem.js      |  7 +------
 .../views/Profiler/FlamegraphChartBuilder.js  | 20 +++++++++++++------
 .../views/Profiler/ProfilerContext.js         | 19 +++++++++++++++---
 .../views/Profiler/RankedChartBuilder.js      |  5 ++---
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 57f53554d4c0..fb655e25f588 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -47,10 +47,9 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
     <Fragment>
       {row.map(chartNode => {
         const {
-          actualDuration,
           didRender,
           id,
-          name,
+          label,
           offset,
           selfDuration,
           treeBaseDuration,
@@ -74,12 +73,8 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
         }
 
         let color = 'var(--color-commit-did-not-render)';
-        let label = name;
         if (didRender) {
           color = getGradientColor(selfDuration / maxSelfDuration);
-          label = `${name} (${selfDuration.toFixed(
-            1
-          )}ms of ${actualDuration.toFixed(1)}ms)`;
         }
 
         return (
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 9a7339cd0165..927f1291811f 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -9,7 +9,6 @@ export type ChartNode = {|
   didRender: boolean,
   id: number,
   label: string,
-  name: string,
   offset: number,
   selfDuration: number,
   treeBaseDuration: number,
@@ -61,19 +60,28 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
+    const actualDuration = actualDurations.get(id) || 0;
+    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    const didRender = actualDurations.has(id);
+
     const name = node.displayName || 'Unknown';
+    const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
 
-    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    let label = `${name}${maybeKey}`;
+    if (didRender) {
+      label += ` (${selfDuration.toFixed(1)}ms) of ${actualDuration.toFixed(
+        1
+      )}ms)`;
+    }
 
     maxDepth = Math.max(maxDepth, currentDepth);
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
     const chartNode: ChartNode = {
-      actualDuration: actualDurations.get(id) || 0,
-      didRender: actualDurations.has(id),
+      actualDuration,
+      didRender,
       id,
-      label: `${name} (${selfDuration.toFixed(1)}ms)`,
-      name,
+      label,
       offset: parentOffset,
       selfDuration,
       treeBaseDuration: node.treeBaseDuration,
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 60e6fd2b2be1..bd5eb831d666 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -78,7 +78,7 @@ type Props = {|
 
 function ProfilerContextController({ children }: Props) {
   const store = useContext(StoreContext);
-  const { selectedElementID } = useContext(TreeContext);
+  const { selectElementAtIndex, selectedElementID } = useContext(TreeContext);
 
   const subscription = useMemo(
     () => ({
@@ -140,18 +140,31 @@ function ProfilerContextController({ children }: Props) {
     null
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
-  const [selectedFiberID, selectFiber] = useState<number | null>(null);
+  const [selectedFiberID, selectFiberID] = useState<number | null>(null);
   const [selectedInteractionID, selectInteraction] = useState<number | null>(
     null
   );
 
+  const selectFiber = useCallback(
+    (id: number | null) => {
+      selectFiberID(id);
+      if (id !== null) {
+        const index = store.getIndexOfElementID(id);
+        if (index !== null) {
+          selectElementAtIndex(index);
+        }
+      }
+    },
+    [selectElementAtIndex, selectFiberID, store]
+  );
+
   if (isProfiling) {
     batchedUpdates(() => {
       if (selectedCommitIndex !== null) {
         selectCommitIndex(null);
       }
       if (selectedFiberID !== null) {
-        selectFiber(null);
+        selectFiberID(null);
       }
       if (selectedInteractionID !== null) {
         selectInteraction(null);
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index b514cac3bc7f..58235ad484b8 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -7,7 +7,6 @@ import type { CommitDetails, CommitTree, Node } from './types';
 export type ChartNode = {|
   id: number,
   label: string,
-  name: string,
   value: number,
 |};
 
@@ -54,11 +53,11 @@ export function getChartData({
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
     const name = node.displayName || 'Unknown';
-    const label = `${name} (${selfDuration.toFixed(1)}ms)`;
+    const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
+    const label = `${name}${maybeKey} (${selfDuration.toFixed(1)}ms)`;
     chartNodes.push({
       id,
       label,
-      name,
       value: selfDuration,
     });
   });

From 9170e5695ada95dc6898d1fcd65dd6dfeefde347 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 18:18:39 +0100
Subject: [PATCH 228/814] Fix double-adding fibers when traversing

---
 shells/dev/app/Toggle/index.js | 21 ++++++++
 shells/dev/app/index.js        |  2 +
 src/backend/renderer.js        | 13 +++--
 src/devtools/store.js          | 98 +++++++++++++++-------------------
 4 files changed, 74 insertions(+), 60 deletions(-)
 create mode 100644 shells/dev/app/Toggle/index.js

diff --git a/shells/dev/app/Toggle/index.js b/shells/dev/app/Toggle/index.js
new file mode 100644
index 000000000000..5e96cd447be7
--- /dev/null
+++ b/shells/dev/app/Toggle/index.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+export default function Toggle() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <h2>Toggle</h2>
+      <div>
+        <>
+          <button onClick={() => setShow(s => !s)}>Show child</button>
+          {show && ' '}
+          {show && <Greeting>Hello</Greeting>}
+        </>
+      </div>
+    </>
+  );
+}
+
+function Greeting({ children }) {
+  return <p>{children}</p>;
+}
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 1daae4559596..4857c0c2cfcb 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -10,6 +10,7 @@ import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import ToDoList from './ToDoList';
+import Toggle from './Toggle';
 
 import './styles.css';
 
@@ -31,6 +32,7 @@ function mountTestApp() {
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(Toggle);
   mountHelper(DeeplyNestedComponents);
 }
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 29caf523d747..cf0b973e68be 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -743,23 +743,26 @@ export function attach(
     }
   }
 
-  function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
+  function mountFiber(
+    fiber: Fiber,
+    parentFiber: Fiber | null,
+    traverseSiblings = false
+  ) {
     if (__DEBUG__) {
       debug('mountFiber()', fiber, parentFiber);
     }
 
     const shouldEnqueueMount = !shouldFilterFiber(fiber);
-
     if (shouldEnqueueMount) {
       enqueueMount(fiber, parentFiber);
     }
 
     if (fiber.child !== null) {
-      mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber);
+      mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);
     }
 
-    if (fiber.sibling) {
-      mountFiber(fiber.sibling, parentFiber);
+    if (traverseSiblings && fiber.sibling !== null) {
+      mountFiber(fiber.sibling, parentFiber, true);
     }
   }
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index e92f36845c6f..ccfe7985d64c 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -487,32 +487,26 @@ export default class Store extends EventEmitter {
               debug('Add', `new root fiber ${id}`);
             }
 
-            if (this._idToElement.has(id)) {
-              // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
-              // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
-              // Maybe in the future we'll revisit this.
-            } else {
-              const supportsProfiling = operations[i] > 0;
-              i++;
-
-              this._roots = this._roots.concat(id);
-              this._rootIDToRendererID.set(id, rendererID);
-              this._rootIDToCapabilities.set(id, { supportsProfiling });
-
-              this._idToElement.set(id, {
-                children: [],
-                depth: -1,
-                displayName: null,
-                id,
-                key: null,
-                ownerID: 0,
-                parentID: 0,
-                type,
-                weight: 0,
-              });
-
-              haveRootsChanged = true;
-            }
+            const supportsProfiling = operations[i] > 0;
+            i++;
+
+            this._roots = this._roots.concat(id);
+            this._rootIDToRendererID.set(id, rendererID);
+            this._rootIDToCapabilities.set(id, { supportsProfiling });
+
+            this._idToElement.set(id, {
+              children: [],
+              depth: -1,
+              displayName: null,
+              id,
+              key: null,
+              ownerID: 0,
+              parentID: 0,
+              type,
+              weight: 0,
+            });
+
+            haveRootsChanged = true;
           } else {
             parentID = ((operations[i]: any): number);
             i++;
@@ -545,35 +539,29 @@ export default class Store extends EventEmitter {
               );
             }
 
-            if (this._idToElement.has(id)) {
-              // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
-              // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
-              // Maybe in the future we'll revisit this.
-            } else {
-              parentElement = ((this._idToElement.get(parentID): any): Element);
-              parentElement.children = parentElement.children.concat(id);
-
-              const element: Element = {
-                children: [],
-                depth: parentElement.depth + 1,
-                displayName,
-                id,
-                key,
-                ownerID,
-                parentID: parentElement.id,
-                type,
-                weight: 1,
-              };
-
-              this._idToElement.set(id, element);
-
-              const oldAddedElementIDs = addedElementIDs;
-              addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
-              addedElementIDs.set(oldAddedElementIDs);
-              addedElementIDs[oldAddedElementIDs.length] = id;
-
-              weightDelta = 1;
-            }
+            parentElement = ((this._idToElement.get(parentID): any): Element);
+            parentElement.children = parentElement.children.concat(id);
+
+            const element: Element = {
+              children: [],
+              depth: parentElement.depth + 1,
+              displayName,
+              id,
+              key,
+              ownerID,
+              parentID: parentElement.id,
+              type,
+              weight: 1,
+            };
+
+            this._idToElement.set(id, element);
+
+            const oldAddedElementIDs = addedElementIDs;
+            addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
+            addedElementIDs.set(oldAddedElementIDs);
+            addedElementIDs[oldAddedElementIDs.length] = id;
+
+            weightDelta = 1;
           }
           break;
         case TREE_OPERATION_REMOVE:

From 96a7adf49e20197f802813224362470c66a38d20 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 18:25:22 +0100
Subject: [PATCH 229/814] Add error logs in __DEBUG__

---
 src/devtools/store.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index ccfe7985d64c..8231845edee8 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -482,6 +482,14 @@ export default class Store extends EventEmitter {
 
           i = i + 3;
 
+          if (__DEBUG__) {
+            if (this._idToElement.has(id)) {
+              console.error(
+                'Store already contains fiber ' + id + '. This is a bug.'
+              );
+            }
+          }
+
           if (type === ElementTypeRoot) {
             if (__DEBUG__) {
               debug('Add', `new root fiber ${id}`);
@@ -567,6 +575,14 @@ export default class Store extends EventEmitter {
         case TREE_OPERATION_REMOVE:
           id = ((operations[i + 1]: any): number);
 
+          if (__DEBUG__) {
+            if (!this._idToElement.has(id)) {
+              console.error(
+                'Store does not contain fiber ' + id + '. This is a bug.'
+              );
+            }
+          }
+
           i = i + 2;
 
           element = ((this._idToElement.get(id): any): Element);

From 2a5b8a9206277e0db0e9e29c20ec9b06bc48c90f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 18:41:13 +0100
Subject: [PATCH 230/814] Hard crash

---
 src/devtools/store.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 8231845edee8..fdafcb3f5c1c 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -482,12 +482,12 @@ export default class Store extends EventEmitter {
 
           i = i + 3;
 
-          if (__DEBUG__) {
-            if (this._idToElement.has(id)) {
-              console.error(
-                'Store already contains fiber ' + id + '. This is a bug.'
-              );
-            }
+          if (this._idToElement.has(id)) {
+            throw new Error(
+              'Store already contains fiber ' +
+                id +
+                '. This is a bug in React DevTools.'
+            );
           }
 
           if (type === ElementTypeRoot) {
@@ -575,12 +575,12 @@ export default class Store extends EventEmitter {
         case TREE_OPERATION_REMOVE:
           id = ((operations[i + 1]: any): number);
 
-          if (__DEBUG__) {
-            if (!this._idToElement.has(id)) {
-              console.error(
-                'Store does not contain fiber ' + id + '. This is a bug.'
-              );
-            }
+          if (!this._idToElement.has(id)) {
+            throw new Error(
+              'Store does not contain fiber ' +
+                id +
+                '. This is a bug in React DevTools.'
+            );
           }
 
           i = i + 2;

From 9bcd5b25761f63755ca98575ee0107e1defbeb97 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 00:29:47 +0100
Subject: [PATCH 231/814] Fix Suspense fragment edge cases

---
 shells/dev/app/SuspenseTree/index.js | 64 ++++++++++++++++++++++++++++
 shells/dev/app/index.js              |  2 +
 src/backend/renderer.js              | 30 ++++++++++++-
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 shells/dev/app/SuspenseTree/index.js

diff --git a/shells/dev/app/SuspenseTree/index.js b/shells/dev/app/SuspenseTree/index.js
new file mode 100644
index 000000000000..fb4ca80de606
--- /dev/null
+++ b/shells/dev/app/SuspenseTree/index.js
@@ -0,0 +1,64 @@
+// @flow
+
+import React, { Suspense, useState } from 'react';
+
+function SuspenseTree() {
+  return (
+    <>
+      <h1>Suspense</h1>
+      <Suspense fallback={<Fallback>Loading outer</Fallback>}>
+        <Parent />
+      </Suspense>
+    </>
+  );
+}
+
+function Parent() {
+  return (
+    <div>
+      <Suspense fallback={<Fallback>Loading inner 1</Fallback>}>
+        <Child>Hello</Child>
+      </Suspense>
+      <Suspense fallback={<Fallback>Loading inner 2</Fallback>}>
+        <Child>World</Child>
+      </Suspense>
+      <Suspense fallback={<Fallback>This will never load</Fallback>}>
+        <Never />
+      </Suspense>
+      <LoadLater />
+    </div>
+  );
+}
+
+function LoadLater() {
+  const [loadChild, setLoadChild] = useState(0);
+  return (
+    <Suspense
+      fallback={
+        <Fallback onClick={() => setLoadChild(true)}>Click to load</Fallback>
+      }
+    >
+      {loadChild ? (
+        <Child onClick={() => setLoadChild(false)}>
+          Loaded! Click to suspend again.
+        </Child>
+      ) : (
+        <Never />
+      )}
+    </Suspense>
+  );
+}
+
+function Child(props) {
+  return <p {...props} />;
+}
+
+function Fallback(props) {
+  return <h3 {...props}>{props.children}</h3>;
+}
+
+function Never() {
+  throw new Promise(resolve => {});
+}
+
+export default SuspenseTree;
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 4857c0c2cfcb..3a76db783f50 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -11,6 +11,7 @@ import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
+import SuspenseTree from './SuspenseTree';
 
 import './styles.css';
 
@@ -33,6 +34,7 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(Toggle);
+  mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);
 }
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cf0b973e68be..099e0b3743e4 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -716,6 +716,16 @@ export function attach(
   function enqueueUnmount(fiber) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
+    if (!fiberToIDMap.has(primaryFiber)) {
+      // If we've never seen this Fiber, it might be because
+      // it is inside a non-current Suspense fragment tree,
+      // and so the store is not even aware of it.
+      // In that case we can just ignore it, or otherwise
+      // there will be errors later on.
+      primaryFibers.delete(primaryFiber);
+      // TODO: this is fragile and can obscure actual bugs.
+      return;
+    }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
       const operation = new Uint32Array(2);
@@ -757,8 +767,24 @@ export function attach(
       enqueueMount(fiber, parentFiber);
     }
 
-    if (fiber.child !== null) {
-      mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);
+    const isTimedOutSuspense =
+      fiber.tag === ReactTypeOfWork.SuspenseComponent &&
+      fiber.memoizedState !== null;
+
+    if (isTimedOutSuspense) {
+      // Special case: if Suspense mounts in a timed-out state,
+      // get the fallback child from the inner fragment and mount
+      // it as if it was our own child. Updates handle this too.
+      const primaryChildFragment = fiber.child;
+      const fallbackChildFragment = primaryChildFragment.sibling;
+      const fallbackChild = fallbackChildFragment.child;
+      if (fallbackChild !== null) {
+        mountFiber(fallbackChild, shouldEnqueueMount ? fiber : parentFiber, true);
+      }
+    } else {
+      if (fiber.child !== null) {
+        mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);
+      }
     }
 
     if (traverseSiblings && fiber.sibling !== null) {

From d6257d382d6f9910fb36ad1b4707bfa23ac965d2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 14:57:40 +0100
Subject: [PATCH 232/814] Expand the test fixture

---
 shells/dev/app/SuspenseTree/index.js | 105 ++++++++++++++++++++++-----
 1 file changed, 88 insertions(+), 17 deletions(-)

diff --git a/shells/dev/app/SuspenseTree/index.js b/shells/dev/app/SuspenseTree/index.js
index fb4ca80de606..1e7fec726d3a 100644
--- a/shells/dev/app/SuspenseTree/index.js
+++ b/shells/dev/app/SuspenseTree/index.js
@@ -6,7 +6,66 @@ function SuspenseTree() {
   return (
     <>
       <h1>Suspense</h1>
-      <Suspense fallback={<Fallback>Loading outer</Fallback>}>
+      <PrimaryFallbackTest />
+      <NestedSuspenseTest />
+    </>
+  );
+}
+
+function PrimaryFallbackTest() {
+  const [suspend, setSuspend] = useState(false);
+  const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
+  const primaryStep = useTestSequence('primary', Primary1, Primary2);
+  return (
+    <>
+      <h3>Suspense Primary / Fallback</h3>
+      <label>
+        <input
+          checked={suspend}
+          onChange={e => setSuspend(e.target.checked)}
+          type="checkbox"
+        />
+        Suspend
+      </label>
+      <br />
+      <Suspense fallback={fallbackStep}>
+        {suspend ? <Never /> : primaryStep}
+      </Suspense>
+    </>
+  );
+}
+
+function useTestSequence(label, T1, T2) {
+  let [step, setStep] = useState(0);
+  let next = (
+    <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>
+      next {label} content
+    </button>
+  );
+  let allSteps = [
+    <>{next}</>,
+    <>
+      {next} <T1 prop={step}>mount</T1>
+    </>,
+    <>
+      {next} <T1 prop={step}>update</T1>
+    </>,
+    <>
+      {next} <T2 prop={step}>several</T2> <T1 prop={step}>different</T1>{' '}
+      <T2 prop={step}>children</T2>
+    </>,
+    <>
+      {next} <T2 prop={step}>goodbye</T2>
+    </>,
+  ];
+  return allSteps[step];
+}
+
+function NestedSuspenseTest() {
+  return (
+    <>
+      <h3>Nested Suspense</h3>
+      <Suspense fallback={<Fallback1>Loading outer</Fallback1>}>
         <Parent />
       </Suspense>
     </>
@@ -16,16 +75,20 @@ function SuspenseTree() {
 function Parent() {
   return (
     <div>
-      <Suspense fallback={<Fallback>Loading inner 1</Fallback>}>
-        <Child>Hello</Child>
-      </Suspense>
-      <Suspense fallback={<Fallback>Loading inner 2</Fallback>}>
-        <Child>World</Child>
+      <Suspense fallback={<Fallback1>Loading inner 1</Fallback1>}>
+        <Primary1>Hello</Primary1>
+      </Suspense>{' '}
+      <Suspense fallback={<Fallback2>Loading inner 2</Fallback2>}>
+        <Primary2>World</Primary2>
       </Suspense>
-      <Suspense fallback={<Fallback>This will never load</Fallback>}>
+      <br />
+      <Suspense fallback={<Fallback1>This will never load</Fallback1>}>
         <Never />
       </Suspense>
-      <LoadLater />
+      <br />
+      <b>
+        <LoadLater />
+      </b>
     </div>
   );
 }
@@ -35,13 +98,13 @@ function LoadLater() {
   return (
     <Suspense
       fallback={
-        <Fallback onClick={() => setLoadChild(true)}>Click to load</Fallback>
+        <Fallback1 onClick={() => setLoadChild(true)}>Click to load</Fallback1>
       }
     >
       {loadChild ? (
-        <Child onClick={() => setLoadChild(false)}>
+        <Primary1 onClick={() => setLoadChild(false)}>
           Loaded! Click to suspend again.
-        </Child>
+        </Primary1>
       ) : (
         <Never />
       )}
@@ -49,16 +112,24 @@ function LoadLater() {
   );
 }
 
-function Child(props) {
-  return <p {...props} />;
+function Never() {
+  throw new Promise(resolve => {});
+}
+
+function Fallback1({ prop, ...rest }) {
+  return <span {...rest} />;
 }
 
-function Fallback(props) {
-  return <h3 {...props}>{props.children}</h3>;
+function Fallback2({ prop, ...rest }) {
+  return <span {...rest} />;
 }
 
-function Never() {
-  throw new Promise(resolve => {});
+function Primary1({ prop, ...rest }) {
+  return <span {...rest} />;
+}
+
+function Primary2({ prop, ...rest }) {
+  return <span {...rest} />;
 }
 
 export default SuspenseTree;

From 0f536bba5c4354838d4dc1f3fdf226d1b0e67ee9 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 21:48:50 +0100
Subject: [PATCH 233/814] Rewrite the Suspense logic

---
 src/backend/renderer.js | 255 +++++++++++++++++++++++++---------------
 src/constants.js        |   1 +
 src/devtools/store.js   |  55 ++++++++-
 3 files changed, 210 insertions(+), 101 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 099e0b3743e4..db87d89cb298 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -22,6 +22,7 @@ import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { getUID } from '../utils';
@@ -627,7 +628,7 @@ export function attach(
     pendingOperations = new Uint32Array(0);
   }
 
-  function enqueueMount(fiber: Fiber, parentFiber: Fiber | null) {
+  function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
     const isRoot = fiber.tag === HostRoot;
     const id = getFiberID(getPrimaryFiber(fiber));
 
@@ -713,7 +714,7 @@ export function attach(
     }
   }
 
-  function enqueueUnmount(fiber) {
+  function recordUnmount(fiber) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
     if (!fiberToIDMap.has(primaryFiber)) {
@@ -753,18 +754,27 @@ export function attach(
     }
   }
 
-  function mountFiber(
+  function recordRecursiveRemoveChildren(fiber) {
+    const primaryFiber = getPrimaryFiber(fiber);
+    const id = getFiberID(primaryFiber);
+    const operation = new Uint32Array(2);
+    operation[0] = TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN;
+    operation[1] = id;
+    addOperation(operation, false);
+  }
+
+  function mountFiberRecursively(
     fiber: Fiber,
     parentFiber: Fiber | null,
     traverseSiblings = false
   ) {
     if (__DEBUG__) {
-      debug('mountFiber()', fiber, parentFiber);
+      debug('mountFiberRecursively()', fiber, parentFiber);
     }
 
-    const shouldEnqueueMount = !shouldFilterFiber(fiber);
-    if (shouldEnqueueMount) {
-      enqueueMount(fiber, parentFiber);
+    const shouldInclude = !shouldFilterFiber(fiber);
+    if (shouldInclude) {
+      recordMount(fiber, parentFiber);
     }
 
     const isTimedOutSuspense =
@@ -779,25 +789,45 @@ export function attach(
       const fallbackChildFragment = primaryChildFragment.sibling;
       const fallbackChild = fallbackChildFragment.child;
       if (fallbackChild !== null) {
-        mountFiber(fallbackChild, shouldEnqueueMount ? fiber : parentFiber, true);
+        mountFiberRecursively(
+          fallbackChild,
+          shouldInclude ? fiber : parentFiber,
+          true
+        );
       }
     } else {
       if (fiber.child !== null) {
-        mountFiber(fiber.child, shouldEnqueueMount ? fiber : parentFiber, true);
+        mountFiberRecursively(
+          fiber.child,
+          shouldInclude ? fiber : parentFiber,
+          true
+        );
       }
     }
 
     if (traverseSiblings && fiber.sibling !== null) {
-      mountFiber(fiber.sibling, parentFiber, true);
+      mountFiberRecursively(fiber.sibling, parentFiber, true);
     }
   }
 
-  function enqueueUpdateIfNecessary(
-    fiber: Fiber,
-    hasChildOrderChanged: boolean
-  ) {
+  function unmountFiberRecursively(fiber, traverseSiblings = false) {
     if (__DEBUG__) {
-      debug('enqueueUpdateIfNecessary()', fiber);
+      debug('unmountFiberRecursively()', fiber, traverseSiblings);
+    }
+    if (!shouldFilterFiber(fiber)) {
+      recordUnmount(fiber);
+    }
+    if (fiber.child !== null) {
+      unmountFiberRecursively(fiber.child, true);
+    }
+    if (traverseSiblings && fiber.sibling !== null) {
+      unmountFiberRecursively(fiber.sibling, true);
+    }
+  }
+
+  function maybeRecordUpdate(fiber: Fiber, hasChildOrderChanged: boolean) {
+    if (__DEBUG__) {
+      debug('maybeRecordUpdate()', fiber);
     }
 
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
@@ -844,7 +874,7 @@ export function attach(
       // We might want to revisit this if it proves to be too inefficient.
       let child = fiber.child;
       while (child !== null) {
-        findReorderedChildren(child, nextChildren);
+        findReorderedChildrenRecursively(child, nextChildren);
         child = child.sibling;
       }
 
@@ -858,109 +888,140 @@ export function attach(
     }
   }
 
-  function findReorderedChildren(fiber: Fiber, nextChildren: Array<number>) {
+  function findReorderedChildrenRecursively(
+    fiber: Fiber,
+    nextChildren: Array<number>
+  ) {
     if (!shouldFilterFiber(fiber)) {
       nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
     } else {
       let child = fiber.child;
       while (child !== null) {
-        findReorderedChildren(child, nextChildren);
+        findReorderedChildrenRecursively(child, nextChildren);
         child = child.sibling;
       }
     }
   }
 
-  function updateFiber(
+  function updateFiberRecursively(
     nextFiber: Fiber,
     prevFiber: Fiber,
     parentFiber: Fiber | null
   ) {
     if (__DEBUG__) {
-      debug('enqueueUpdateIfNecessary()', nextFiber, parentFiber);
+      debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
 
-    const shouldEnqueueUpdate = !shouldFilterFiber(nextFiber);
-
-    // Suspense components only have a non-null memoizedState if they're timed-out.
-    const isTimedOutSuspense =
-      nextFiber.tag === SuspenseComponent && nextFiber.memoizedState !== null;
-
-    if (isTimedOutSuspense) {
-      // The behavior of timed-out Suspense trees is unique.
-      // Rather than unmount the timed out content (and possibly lose important state),
-      // React re-parents this content within a hidden Fragment while the fallback is showing.
-      // This behavior doesn't need to be observable in the DevTools though.
-      // It might even result in a bad user experience for e.g. node selection in the Elements panel.
-      // The easiest fix is to strip out the intermediate Fragment fibers,
-      // so the Elements panel and Profiler don't need to special case them.
-      const primaryChildFragment = nextFiber.child;
-      const fallbackChildFragment = primaryChildFragment.sibling;
-      const fallbackChild = fallbackChildFragment.child;
-
-      // The primary, hidden child is never actually updated in this case,
-      // so we can skip any updates to its tree.
-      // We only need to track updates to the Fallback UI for now.
-      if (fallbackChild.alternate) {
-        updateFiber(fallbackChild, fallbackChild.alternate, nextFiber);
+    // The behavior of timed-out Suspense trees is unique.
+    // Rather than unmount the timed out content (and possibly lose important state),
+    // React re-parents this content within a hidden Fragment while the fallback is showing.
+    // This behavior doesn't need to be observable in the DevTools though.
+    // It might even result in a bad user experience for e.g. node selection in the Elements panel.
+    // The easiest fix is to strip out the intermediate Fragment fibers,
+    // so the Elements panel and Profiler don't need to special case them.
+    if (nextFiber.tag === SuspenseComponent) {
+      // Suspense components only have a non-null memoizedState if they're timed-out.
+      const prevDidTimeout = prevFiber.memoizedState !== null;
+      const nextDidTimeOut = nextFiber.memoizedState !== null;
+
+      // The logic below is inspired by the codepaths in updateSuspenseComponent()
+      // inside ReactFiberBeginWork in the React source code.
+      if (prevDidTimeout) {
+        if (nextDidTimeOut) {
+          // Fallback -> Fallback:
+          // 1. Reconcile fallback set.
+          const nextFallbackChildSet = nextFiber.child.sibling;
+          // Note: We can't use nextFiber.child.sibling.alternate
+          // because the set is special and alternate may not exist.
+          const prevFallbackChildSet = prevFiber.child.sibling;
+          updateFiberRecursively(
+            nextFallbackChildSet,
+            prevFallbackChildSet,
+            nextFiber
+          );
+          return;
+        } else {
+          // Fallback -> Primary:
+          // 1. Unmount fallback set
+          // Note: don't emulate fallback unmount because React actually did it.
+          // 2. Mount primary set
+          const nextPrimaryChildSet = nextFiber.child;
+          mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
+          return;
+        }
       } else {
-        mountFiber(fallbackChild, nextFiber);
+        if (nextDidTimeOut) {
+          // Primary -> Fallback:
+          // 1. Hide primary set
+          // This is not a real unmount, so it won't get reported by React.
+          // By this point it's *too late* to find the previous primary child set
+          // so we'll just tell the store to "forget" about those children.
+          // They might "resurface" later when we switch to primary content,
+          // but from the store's point of view they will be a new tree.
+          recordRecursiveRemoveChildren(nextFiber);
+          // 2. Mount fallback set
+          const nextFallbackChildSet = nextFiber.child.sibling;
+          mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
+          return;
+        } else {
+          // Primary -> Primary:
+          // 1. Reconcile primary set.
+          // Note: no return so we can passthrough to the logic below.
+        }
       }
+    }
 
-      if (shouldEnqueueUpdate) {
-        enqueueUpdateIfNecessary(nextFiber, false);
-      }
-    } else {
-      let hasChildOrderChanged = false;
-      if (nextFiber.child !== prevFiber.child) {
-        // If the first child is different, we need to traverse them.
-        // Each next child will be either a new child (mount) or an alternate (update).
-        let nextChild = nextFiber.child;
-        let prevChildAtSameIndex = prevFiber.child;
-        while (nextChild) {
-          // We already know children will be referentially different because
-          // they are either new mounts or alternates of previous children.
-          // Schedule updates and mounts depending on whether alternates exist.
-          // We don't track deletions here because they are reported separately.
-          if (nextChild.alternate) {
-            const prevChild = nextChild.alternate;
-            updateFiber(
-              nextChild,
-              prevChild,
-              shouldEnqueueUpdate ? nextFiber : parentFiber
-            );
-            // However we also keep track if the order of the children matches
-            // the previous order. They are always different referentially, but
-            // if the instances line up conceptually we'll want to know that.
-            if (!hasChildOrderChanged && prevChild !== prevChildAtSameIndex) {
-              hasChildOrderChanged = true;
-            }
-          } else {
-            mountFiber(
-              nextChild,
-              shouldEnqueueUpdate ? nextFiber : parentFiber
-            );
-            if (!hasChildOrderChanged) {
-              hasChildOrderChanged = true;
-            }
+    const shouldInclude = !shouldFilterFiber(nextFiber);
+    let hasChildOrderChanged = false;
+    if (nextFiber.child !== prevFiber.child) {
+      // If the first child is different, we need to traverse them.
+      // Each next child will be either a new child (mount) or an alternate (update).
+      let nextChild = nextFiber.child;
+      let prevChildAtSameIndex = prevFiber.child;
+      while (nextChild) {
+        // We already know children will be referentially different because
+        // they are either new mounts or alternates of previous children.
+        // Schedule updates and mounts depending on whether alternates exist.
+        // We don't track deletions here because they are reported separately.
+        if (nextChild.alternate) {
+          const prevChild = nextChild.alternate;
+          updateFiberRecursively(
+            nextChild,
+            prevChild,
+            shouldInclude ? nextFiber : parentFiber
+          );
+          // However we also keep track if the order of the children matches
+          // the previous order. They are always different referentially, but
+          // if the instances line up conceptually we'll want to know that.
+          if (!hasChildOrderChanged && prevChild !== prevChildAtSameIndex) {
+            hasChildOrderChanged = true;
           }
-          // Try the next child.
-          nextChild = nextChild.sibling;
-          // Advance the pointer in the previous list so that we can
-          // keep comparing if they line up.
-          if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
-            prevChildAtSameIndex = prevChildAtSameIndex.sibling;
+        } else {
+          mountFiberRecursively(
+            nextChild,
+            shouldInclude ? nextFiber : parentFiber
+          );
+          if (!hasChildOrderChanged) {
+            hasChildOrderChanged = true;
           }
         }
-        // If we have no more children, but used to, they don't line up.
+        // Try the next child.
+        nextChild = nextChild.sibling;
+        // Advance the pointer in the previous list so that we can
+        // keep comparing if they line up.
         if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
-          hasChildOrderChanged = true;
+          prevChildAtSameIndex = prevChildAtSameIndex.sibling;
         }
       }
-
-      if (shouldEnqueueUpdate) {
-        enqueueUpdateIfNecessary(nextFiber, hasChildOrderChanged);
+      // If we have no more children, but used to, they don't line up.
+      if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
+        hasChildOrderChanged = true;
       }
     }
+
+    if (shouldInclude) {
+      maybeRecordUpdate(nextFiber, hasChildOrderChanged);
+    }
   }
 
   function cleanup() {
@@ -1002,7 +1063,7 @@ export function attach(
           };
         }
 
-        mountFiber(root.current, null);
+        mountFiberRecursively(root.current, null);
         flushPendingEvents(root);
         currentRootID = -1;
       });
@@ -1013,7 +1074,7 @@ export function attach(
     // This is not recursive.
     // We can't traverse fibers after unmounting so instead
     // we rely on React telling us about each unmount.
-    enqueueUnmount(fiber);
+    recordUnmount(fiber);
   }
 
   function handleCommitFiberRoot(root) {
@@ -1047,17 +1108,17 @@ export function attach(
         current.memoizedState != null && current.memoizedState.element != null;
       if (!wasMounted && isMounted) {
         // Mount a new root.
-        mountFiber(current, null);
+        mountFiberRecursively(current, null);
       } else if (wasMounted && isMounted) {
         // Update an existing root.
-        updateFiber(current, alternate, null);
+        updateFiberRecursively(current, alternate, null);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
-        enqueueUnmount(current);
+        recordUnmount(current);
       }
     } else {
       // Mount a new root.
-      mountFiber(current, null);
+      mountFiberRecursively(current, null);
     }
 
     if (isProfiling) {
diff --git a/src/constants.js b/src/constants.js
index ef69e21760e9..d4ba28331966 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -4,6 +4,7 @@ export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
+export const TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN = 5;
 
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
diff --git a/src/devtools/store.js b/src/devtools/store.js
index fdafcb3f5c1c..69dbf451332e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -3,6 +3,7 @@
 import EventEmitter from 'events';
 import {
   TREE_OPERATION_ADD,
+  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
@@ -572,7 +573,52 @@ export default class Store extends EventEmitter {
             weightDelta = 1;
           }
           break;
-        case TREE_OPERATION_REMOVE:
+        case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN: {
+          id = ((operations[i + 1]: any): number);
+
+          if (!this._idToElement.has(id)) {
+            throw new Error(
+              'Store does not contain fiber ' +
+                id +
+                '. This is a bug in React DevTools.'
+            );
+          }
+
+          i = i + 2;
+
+          let justRemovedIDs = [];
+          const recursivelyRemove = childID => {
+            justRemovedIDs.push(childID);
+            const child = this._idToElement.get(childID);
+            if (!child) {
+              throw new Error(
+                'Store does not contain fiber ' +
+                  childID +
+                  '. This is a bug in React DevTools.'
+              );
+            }
+            this._idToElement.delete(childID);
+            child.children.forEach(recursivelyRemove);
+          };
+
+          // Track removed items so search results can be updated
+          const oldRemovedElementIDs = removedElementIDs;
+          removedElementIDs = new Uint32Array(
+            removedElementIDs.length + justRemovedIDs.length
+          );
+          removedElementIDs.set(oldRemovedElementIDs);
+          let startIndex = oldRemovedElementIDs.length;
+          for (let j = 0; j < justRemovedIDs.length; j++) {
+            removedElementIDs[startIndex + j] = oldRemovedElementIDs[j];
+          }
+
+          parentElement = ((this._idToElement.get(id): any): Element);
+          parentElement.children.forEach(recursivelyRemove);
+          parentElement.children = [];
+          weightDelta = -parentElement.weight + 1;
+          break;
+        }
+        case TREE_OPERATION_REMOVE: {
           id = ((operations[i + 1]: any): number);
 
           if (!this._idToElement.has(id)) {
@@ -614,11 +660,12 @@ export default class Store extends EventEmitter {
           }
 
           // Track removed items so search results can be updated
-          const oldRemovededElementIDs = removedElementIDs;
+          const oldRemovedElementIDs = removedElementIDs;
           removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
-          removedElementIDs.set(oldRemovededElementIDs);
-          removedElementIDs[oldRemovededElementIDs.length] = id;
+          removedElementIDs.set(oldRemovedElementIDs);
+          removedElementIDs[oldRemovedElementIDs.length] = id;
           break;
+        }
         case TREE_OPERATION_RESET_CHILDREN:
           id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);

From 80d9d8d841d02689d4c75360e2b42b543ab3477e Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 23:34:27 +0100
Subject: [PATCH 234/814] Fix profiler and nits

---
 shells/dev/app/SuspenseTree/index.js            | 10 ++++++----
 src/backend/renderer.js                         |  2 +-
 .../views/Profiler/CommitTreeBuilder.js         | 17 +++++++++++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/shells/dev/app/SuspenseTree/index.js b/shells/dev/app/SuspenseTree/index.js
index 1e7fec726d3a..e9a1fef4d2b5 100644
--- a/shells/dev/app/SuspenseTree/index.js
+++ b/shells/dev/app/SuspenseTree/index.js
@@ -6,19 +6,21 @@ function SuspenseTree() {
   return (
     <>
       <h1>Suspense</h1>
-      <PrimaryFallbackTest />
+      <h4>Primary to Fallback Cycle</h4>
+      <PrimaryFallbackTest initialSuspend={false} />
+      <h4>Fallback to Primary Cycle</h4>
+      <PrimaryFallbackTest initialSuspend={true} />
       <NestedSuspenseTest />
     </>
   );
 }
 
-function PrimaryFallbackTest() {
-  const [suspend, setSuspend] = useState(false);
+function PrimaryFallbackTest({ initialSuspend }) {
+  const [suspend, setSuspend] = useState(initialSuspend);
   const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
   const primaryStep = useTestSequence('primary', Primary1, Primary2);
   return (
     <>
-      <h3>Suspense Primary / Fallback</h3>
       <label>
         <input
           checked={suspend}
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index db87d89cb298..bfa313ff3c47 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -714,7 +714,7 @@ export function attach(
     }
   }
 
-  function recordUnmount(fiber) {
+  function recordUnmount(fiber: Fiber) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
     if (!fiberToIDMap.has(primaryFiber)) {
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 0f229c2fc0db..760524f141b8 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -3,6 +3,7 @@
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
+  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
@@ -258,6 +259,22 @@ function updateTree(
           }
         }
         break;
+      case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN:
+        id = ((operations[i + 1]: any): number);
+
+        i = i + 2;
+
+        node = getClonedNode(id);
+
+        const recursivelyRemove = childID => {
+          const child = getClonedNode(childID);
+          nodes.delete(childID);
+          child.children.forEach(recursivelyRemove);
+        };
+
+        node.children.forEach(recursivelyRemove);
+        node.children = [];
+        break;
       case TREE_OPERATION_REMOVE:
         id = ((operations[i + 1]: any): number);
 

From 7a03c5a8857840353de367709b728e0d32fff108 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 23:42:02 +0100
Subject: [PATCH 235/814] Update the commit tree to assume operations do not
 repeat

---
 .../views/Profiler/CommitTreeBuilder.js       | 101 +++++++++++-------
 1 file changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 760524f141b8..39fa6c131c48 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -184,6 +184,14 @@ function updateTree(
 
         i = i + 3;
 
+        if (nodes.has(id)) {
+          throw new Error(
+            'Commit tree already contains fiber ' +
+              id +
+              '. This is a bug in React DevTools.'
+          );
+        }
+
         if (type === ElementTypeRoot) {
           i++; // supportsProfiling flag
 
@@ -191,22 +199,16 @@ function updateTree(
             debug('Add', `new root fiber ${id}`);
           }
 
-          if (nodes.has(id)) {
-            // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
-            // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
-            // Maybe in the future we'll revisit this.
-          } else {
-            const node: Node = {
-              children: [],
-              displayName: null,
-              id,
-              key: null,
-              parentID: 0,
-              treeBaseDuration: 0, // This will be updated by a subsequent operation
-            };
-
-            nodes.set(id, node);
-          }
+          const node: Node = {
+            children: [],
+            displayName: null,
+            id,
+            key: null,
+            parentID: 0,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+          };
+
+          nodes.set(id, node);
         } else {
           parentID = ((operations[i]: any): number);
           i++;
@@ -231,32 +233,26 @@ function updateTree(
               : utfDecodeString((operations.slice(i, i + keyLength): any));
           i += +keyLength;
 
-          if (nodes.has(id)) {
-            // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
-            // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
-            // Maybe in the future we'll revisit this.
-          } else {
-            if (__DEBUG__) {
-              debug(
-                'Add',
-                `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
-              );
-            }
-
-            parentNode = getClonedNode(parentID);
-            parentNode.children = parentNode.children.concat(id);
-
-            const node: Node = {
-              children: [],
-              displayName,
-              id,
-              key,
-              parentID,
-              treeBaseDuration: 0, // This will be updated by a subsequent operation
-            };
-
-            nodes.set(id, node);
+          if (__DEBUG__) {
+            debug(
+              'Add',
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+            );
           }
+
+          parentNode = getClonedNode(parentID);
+          parentNode.children = parentNode.children.concat(id);
+
+          const node: Node = {
+            children: [],
+            displayName,
+            id,
+            key,
+            parentID,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+          };
+
+          nodes.set(id, node);
         }
         break;
       case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN:
@@ -264,9 +260,24 @@ function updateTree(
 
         i = i + 2;
 
+        if (!nodes.has(id)) {
+          throw new Error(
+            'Commit tree does not contain fiber ' +
+              id +
+              '. This is a bug in React DevTools.'
+          );
+        }
+
         node = getClonedNode(id);
 
         const recursivelyRemove = childID => {
+          if (!nodes.has(id)) {
+            throw new Error(
+              'Commit tree does not contain fiber ' +
+                id +
+                '. This is a bug in React DevTools.'
+            );
+          }
           const child = getClonedNode(childID);
           nodes.delete(childID);
           child.children.forEach(recursivelyRemove);
@@ -280,6 +291,14 @@ function updateTree(
 
         i = i + 2;
 
+        if (!nodes.has(id)) {
+          throw new Error(
+            'Commit tree does not contain fiber ' +
+              id +
+              '. This is a bug in React DevTools.'
+          );
+        }
+
         node = getClonedNode(id);
         parentID = node.parentID;
 

From d3d5c050bd11a0a90c4127f477896265be02d0ba Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 5 Apr 2019 23:45:34 +0100
Subject: [PATCH 236/814] Naming

---
 src/backend/renderer.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index bfa313ff3c47..5d3c5b999187 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -772,8 +772,8 @@ export function attach(
       debug('mountFiberRecursively()', fiber, parentFiber);
     }
 
-    const shouldInclude = !shouldFilterFiber(fiber);
-    if (shouldInclude) {
+    const shouldIncludeInTree = !shouldFilterFiber(fiber);
+    if (shouldIncludeInTree) {
       recordMount(fiber, parentFiber);
     }
 
@@ -791,7 +791,7 @@ export function attach(
       if (fallbackChild !== null) {
         mountFiberRecursively(
           fallbackChild,
-          shouldInclude ? fiber : parentFiber,
+          shouldIncludeInTree ? fiber : parentFiber,
           true
         );
       }
@@ -799,7 +799,7 @@ export function attach(
       if (fiber.child !== null) {
         mountFiberRecursively(
           fiber.child,
-          shouldInclude ? fiber : parentFiber,
+          shouldIncludeInTree ? fiber : parentFiber,
           true
         );
       }
@@ -971,7 +971,7 @@ export function attach(
       }
     }
 
-    const shouldInclude = !shouldFilterFiber(nextFiber);
+    const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
     let hasChildOrderChanged = false;
     if (nextFiber.child !== prevFiber.child) {
       // If the first child is different, we need to traverse them.
@@ -988,7 +988,7 @@ export function attach(
           updateFiberRecursively(
             nextChild,
             prevChild,
-            shouldInclude ? nextFiber : parentFiber
+            shouldIncludeInTree ? nextFiber : parentFiber
           );
           // However we also keep track if the order of the children matches
           // the previous order. They are always different referentially, but
@@ -999,7 +999,7 @@ export function attach(
         } else {
           mountFiberRecursively(
             nextChild,
-            shouldInclude ? nextFiber : parentFiber
+            shouldIncludeInTree ? nextFiber : parentFiber
           );
           if (!hasChildOrderChanged) {
             hasChildOrderChanged = true;
@@ -1019,7 +1019,7 @@ export function attach(
       }
     }
 
-    if (shouldInclude) {
+    if (shouldIncludeInTree) {
       maybeRecordUpdate(nextFiber, hasChildOrderChanged);
     }
   }

From ab9c1b84c866017107894d72a67a000f9fb881e0 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 6 Apr 2019 17:02:36 +0100
Subject: [PATCH 237/814] Show owner in DOM highilght overlay

---
 src/backend/agent.js         |  3 ++-
 src/backend/views/Overlay.js | 41 +++++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 4e3be94eed46..d018eef8cd7d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -443,6 +443,7 @@ export default class Agent extends EventEmitter {
 
     const target = ((event.target: any): HTMLElement);
 
-    showOverlay(target, target.tagName.toLowerCase());
+    // Pass an empty string so it can infer name from tag and owner.
+    showOverlay(target, '');
   };
 }
diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 41858e28791f..24b0933a431d 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -128,7 +128,15 @@ export default class Overlay {
       left: box.left - dims.marginLeft + 'px',
     });
 
-    this.nameSpan.textContent = name || node.nodeName.toLowerCase();
+    if (!name) {
+      name = node.nodeName.toLowerCase();
+      const ownerName = getOwnerDisplayName(node);
+      if (ownerName) {
+        name += ' (in ' + ownerName + ')';
+      }
+    }
+
+    this.nameSpan.textContent = name;
     this.dimSpan.textContent =
       Math.round(box.width) + 'px × ' + Math.round(box.height) + 'px';
 
@@ -145,6 +153,37 @@ export default class Overlay {
   }
 }
 
+function getOwnerDisplayName(node) {
+  const fiber = getFiber(node);
+  if (fiber === null) {
+    return null;
+  }
+  const owner = fiber._debugOwner;
+  if (owner && owner.type) {
+    const ownerName = owner.type.displayName || owner.type.name;
+    return ownerName || null;
+  }
+  return null;
+}
+
+let lastFoundInternalKey = null;
+function getFiber(node) {
+  if (
+    lastFoundInternalKey !== null &&
+    node.hasOwnProperty(lastFoundInternalKey)
+  ) {
+    return (node: any)[lastFoundInternalKey];
+  }
+  let internalKey = Object.keys(node).find(
+    key => key.indexOf('__reactInternalInstance') === 0
+  );
+  if (internalKey) {
+    lastFoundInternalKey = internalKey;
+    return (node: any)[lastFoundInternalKey];
+  }
+  return null;
+}
+
 function findTipPos(dims, win) {
   const tipHeight = 20;
   const margin = 5;

From 5eec8aed3344185a7ca2f6ed1d9a08729250e46a Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 6 Apr 2019 18:26:17 +0100
Subject: [PATCH 238/814] Nit

---
 src/backend/agent.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index d018eef8cd7d..ca711c419490 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -443,7 +443,8 @@ export default class Agent extends EventEmitter {
 
     const target = ((event.target: any): HTMLElement);
 
-    // Pass an empty string so it can infer name from tag and owner.
-    showOverlay(target, '');
+    // Don't pass the name explicitly.
+    // It will be inferred from DOM tag and Fiber owner.
+    showOverlay(target);
   };
 }

From 785bb9f56c6d93f506bcf58ba1f6047efd931df1 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 6 Apr 2019 20:25:49 +0100
Subject: [PATCH 239/814] Continuously update tree selection in DOM inspection
 mode

---
 src/backend/agent.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index ca711c419490..32f1c19b6eba 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -49,6 +49,9 @@ export default class Agent extends EventEmitter {
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
 
+  _selectInterval: null | IntervalID;
+  _nextFiberIDToSelect: null | number;
+
   constructor() {
     super();
 
@@ -339,6 +342,7 @@ export default class Agent extends EventEmitter {
     window.addEventListener('mousedown', this._onMouseDown, true);
     window.addEventListener('mouseup', this._onMouseUp, true);
     window.addEventListener('mouseover', this._onMouseOver, true);
+    this._selectInterval = setInterval(this._updateSelectedFiber, 200);
   };
 
   startProfiling = () => {
@@ -359,6 +363,11 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('mousedown', this._onMouseDown, true);
     window.removeEventListener('mouseup', this._onMouseUp, true);
     window.removeEventListener('mouseover', this._onMouseOver, true);
+
+    this._updateSelectedFiber();
+    clearInterval(this._selectInterval);
+    this._selectInterval = null;
+    this._nextFiberIDToSelect = null;
   };
 
   stopProfiling = () => {
@@ -423,9 +432,8 @@ export default class Agent extends EventEmitter {
 
     const target = ((event.target: any): HTMLElement);
     const id = this.getIDForNode(target);
-
     if (id !== null) {
-      this._bridge.send('selectFiber', id);
+      this._nextFiberIDToSelect = id;
     }
   };
 
@@ -442,9 +450,20 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     const target = ((event.target: any): HTMLElement);
-
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
     showOverlay(target);
+
+    const id = this.getIDForNode(target);
+    if (id !== null) {
+      this._nextFiberIDToSelect = id;
+    }
+  };
+
+  _updateSelectedFiber = () => {
+    const id = this._nextFiberIDToSelect;
+    if (id !== null) {
+      this._bridge.send('selectFiber', id);
+    }
   };
 }

From 99593444b98bd0c0ae255fb897867a02c4a73d25 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 6 Apr 2019 21:30:06 +0100
Subject: [PATCH 240/814] Address review

---
 src/backend/agent.js | 39 +++++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 32f1c19b6eba..98cbb9acfa4a 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -49,8 +49,8 @@ export default class Agent extends EventEmitter {
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
 
-  _selectInterval: null | IntervalID;
-  _nextFiberIDToSelect: null | number;
+  _selectFiberInterval: null | IntervalID;
+  _lastInspectedNode: null | HTMLElement;
 
   constructor() {
     super();
@@ -342,7 +342,10 @@ export default class Agent extends EventEmitter {
     window.addEventListener('mousedown', this._onMouseDown, true);
     window.addEventListener('mouseup', this._onMouseUp, true);
     window.addEventListener('mouseover', this._onMouseOver, true);
-    this._selectInterval = setInterval(this._updateSelectedFiber, 200);
+    this._selectFiberInterval = setInterval(
+      this._selectFiberForLastInspectedNode,
+      200
+    );
   };
 
   startProfiling = () => {
@@ -364,10 +367,10 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('mouseup', this._onMouseUp, true);
     window.removeEventListener('mouseover', this._onMouseOver, true);
 
-    this._updateSelectedFiber();
-    clearInterval(this._selectInterval);
-    this._selectInterval = null;
-    this._nextFiberIDToSelect = null;
+    this._selectFiberForLastInspectedNode();
+    clearInterval(this._selectFiberInterval);
+    this._selectFiberInterval = null;
+    this._lastInspectedNode = null;
   };
 
   stopProfiling = () => {
@@ -431,10 +434,7 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     const target = ((event.target: any): HTMLElement);
-    const id = this.getIDForNode(target);
-    if (id !== null) {
-      this._nextFiberIDToSelect = id;
-    }
+    this._lastInspectedNode = target;
   };
 
   // While we don't do anything here, this makes choosing
@@ -453,17 +453,16 @@ export default class Agent extends EventEmitter {
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
     showOverlay(target);
-
-    const id = this.getIDForNode(target);
-    if (id !== null) {
-      this._nextFiberIDToSelect = id;
-    }
+    this._lastInspectedNode = target;
   };
 
-  _updateSelectedFiber = () => {
-    const id = this._nextFiberIDToSelect;
-    if (id !== null) {
-      this._bridge.send('selectFiber', id);
+  _selectFiberForLastInspectedNode = () => {
+    const node = this._lastInspectedNode;
+    if (node !== null) {
+      const id = this.getIDForNode(node);
+      if (id !== null) {
+        this._bridge.send('selectFiber', id);
+      }
     }
   };
 }

From 9fc2a3400cddbb00448c5e57c10ca349f2b3e4c8 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 6 Apr 2019 21:36:08 +0100
Subject: [PATCH 241/814] Remove dead code

---
 src/backend/renderer.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 5d3c5b999187..ebc5b0684a8a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -810,21 +810,6 @@ export function attach(
     }
   }
 
-  function unmountFiberRecursively(fiber, traverseSiblings = false) {
-    if (__DEBUG__) {
-      debug('unmountFiberRecursively()', fiber, traverseSiblings);
-    }
-    if (!shouldFilterFiber(fiber)) {
-      recordUnmount(fiber);
-    }
-    if (fiber.child !== null) {
-      unmountFiberRecursively(fiber.child, true);
-    }
-    if (traverseSiblings && fiber.sibling !== null) {
-      unmountFiberRecursively(fiber.sibling, true);
-    }
-  }
-
   function maybeRecordUpdate(fiber: Fiber, hasChildOrderChanged: boolean) {
     if (__DEBUG__) {
       debug('maybeRecordUpdate()', fiber);

From d766d3b2e554e2998fbc3b30c6585520c75d95f3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 6 Apr 2019 13:58:55 -0700
Subject: [PATCH 242/814] Throttle screenshots to reduce impact on performance.

---
 package.json                                  |  3 ++-
 src/devtools/store.js                         | 20 ++++++++++----
 .../views/Profiler/SidebarCommitInfo.css      | 10 +++++++
 .../views/Profiler/SidebarCommitInfo.js       | 26 +++++++++++++------
 src/devtools/views/Settings/Settings.css      |  6 +++++
 src/devtools/views/Settings/Settings.js       | 24 ++++++++++-------
 yarn.lock                                     |  5 ++++
 7 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index e843d0f13369..cfdf5851a600 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
     "css-loader": "^1.0.1",
-    "html2canvas": "^1.0.0-alpha.12",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
     "escape-string-regexp": "^1.0.5",
@@ -81,10 +80,12 @@
     "flow-bin": "^0.94.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
+    "html2canvas": "^1.0.0-alpha.12",
     "immutable": "3.7.6",
     "jest": "22.1.4",
     "lerna": "^2.8.0",
     "lint-staged": "^7.0.5",
+    "lodash.throttle": "^4.1.1",
     "log-update": "^2.0.0",
     "lru-cache": "^4.1.3",
     "memoize-one": "^3.1.1",
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 69dbf451332e..225f9a8ac83e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -1,6 +1,8 @@
 // @flow
 
 import EventEmitter from 'events';
+import memoize from 'memoize-one';
+import throttle from 'lodash.throttle';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
@@ -35,6 +37,8 @@ const debug = (methodName, ...args) => {
 const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
   'React::DevTools::captureScreenshots';
 
+const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
+
 type Config = {|
   isProfiling?: boolean,
   supportsCaptureScreenshots?: boolean,
@@ -129,8 +133,8 @@ export default class Store extends EventEmitter {
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
         this._captureScreenshots =
-          localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) !==
-          'false';
+          localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) ===
+          'true';
       }
       if (supportsFileDownloads) {
         this._supportsFileDownloads = true;
@@ -416,6 +420,13 @@ export default class Store extends EventEmitter {
     this.emit('isProfiling');
   }
 
+  _captureScreenshot = throttle(
+    memoize((commitIndex: number) => {
+      this._bridge.send('captureScreenshot', { commitIndex });
+    }),
+    THROTTLE_CAPTURE_SCREENSHOT_DURATION
+  );
+
   _takeProfilingSnapshotRecursive = (id: number) => {
     const element = this.getElementByID(id);
     if (element !== null) {
@@ -454,10 +465,9 @@ export default class Store extends EventEmitter {
         profilingOperations.push(operations);
       }
 
-      const commitIndex = profilingOperations.length - 1;
-
       if (this._captureScreenshots) {
-        this._bridge.send('captureScreenshot', { commitIndex });
+        const commitIndex = profilingOperations.length - 1;
+        this._captureScreenshot(commitIndex);
       }
     }
 
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index a9bd56a2e77a..6e99ac4ff343 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -79,3 +79,13 @@
   border: 1px solid var(--color-border);
   border-radius: 0.5rem;
 }
+
+.NoScreenshot {
+  width: 100%;
+  height: 200px;
+  background-color: var(--color-button-background-focus);
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 86debc8e0454..a786d6e8db0b 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -18,7 +18,11 @@ export default function SidebarCommitInfo(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilingCache, profilingScreenshots } = useContext(StoreContext);
+  const {
+    captureScreenshots,
+    profilingCache,
+    profilingScreenshots,
+  } = useContext(StoreContext);
 
   const screenshot =
     selectedCommitIndex !== null
@@ -97,14 +101,20 @@ export default function SidebarCommitInfo(_: Props) {
               ))}
             </ul>
           </li>
-          {screenshot != null && (
+          {captureScreenshots && (
             <li>
-              <img
-                alt="Screenshot"
-                className={styles.Screenshot}
-                onClick={showScreenshotModal}
-                src={screenshot}
-              />
+              {screenshot != null ? (
+                <img
+                  alt="Screenshot"
+                  className={styles.Screenshot}
+                  onClick={showScreenshotModal}
+                  src={screenshot}
+                />
+              ) : (
+                <div className={styles.NoScreenshot}>
+                  No screenshot available
+                </div>
+              )}
             </li>
           )}
           {screenshot != null && isScreenshotModalVisible && (
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 1b29a756a5e5..01afd5a23d40 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -51,3 +51,9 @@
   border-bottom-right-radius: 0.25rem;
   border-right: 1px solid var(--color-border);
 }
+
+.ScreenshotThrottling {
+  background-color: var(--color-hover-background);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 808697ea4c6b..f647162a8a12 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -117,16 +117,20 @@ export default function Settings({ portalContainer }: Props) {
       {store.supportsCaptureScreenshots && (
         <div className={styles.Section}>
           <div className={styles.Header}>Profiler</div>
-          <div className={styles.OptionGroup}>
-            <label className={styles.Option}>
-              <input
-                type="checkbox"
-                checked={captureScreenshots}
-                onChange={updateCaptureScreenshotsWhileProfiling}
-              />{' '}
-              Capture screenshots while profiling
-            </label>
-          </div>
+          <label>
+            <input
+              type="checkbox"
+              checked={captureScreenshots}
+              onChange={updateCaptureScreenshotsWhileProfiling}
+            />{' '}
+            Capture screenshots while profiling
+            {captureScreenshots && (
+              <p className={styles.ScreenshotThrottling}>
+                Screenshots will be throttled in order to reduce the negative
+                impact on performance.
+              </p>
+            )}
+          </label>
         </div>
       )}
     </div>
diff --git a/yarn.lock b/yarn.lock
index 622ecd77fac2..b92e1ee9d8b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7053,6 +7053,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash@3.10.1, lodash@^3.10.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

From 5334249bda1917ead38860b2272af2169bb7036d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 6 Apr 2019 18:01:44 -0700
Subject: [PATCH 243/814] Fixed a typo in flamegraph duration label

---
 src/devtools/views/Profiler/ChartNode.css             | 8 ++++----
 src/devtools/views/Profiler/FlamegraphChartBuilder.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Profiler/ChartNode.css b/src/devtools/views/Profiler/ChartNode.css
index e9ebea1a7adc..3117ea19322f 100644
--- a/src/devtools/views/Profiler/ChartNode.css
+++ b/src/devtools/views/Profiler/ChartNode.css
@@ -18,10 +18,10 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-size: var(--font-family-sans);
-  font-family: var(--font-size-sans-normal);
-  margin-left: 4px;
-  margin-right: 4px;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
   line-height: 1.5;
   padding: 0 0 0;
   font-weight: 400;
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 927f1291811f..9478c42d7e53 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -69,7 +69,7 @@ export function getChartData({
 
     let label = `${name}${maybeKey}`;
     if (didRender) {
-      label += ` (${selfDuration.toFixed(1)}ms) of ${actualDuration.toFixed(
+      label += ` (${selfDuration.toFixed(1)}ms of ${actualDuration.toFixed(
         1
       )}ms)`;
     }

From ce04f531d41ca79640ded42e6d1f9736fd8f9e67 Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Sun, 7 Apr 2019 11:37:12 +0200
Subject: [PATCH 244/814] Implemented new OwnerStack UI enhancement

---
 .flowconfig                                   |   1 -
 .gitignore                                    |   3 +-
 src/backend/views/Overlay.js                  |  19 +-
 src/devtools/views/ButtonIcon.js              |   7 +
 src/devtools/views/Components/OwnersStack.css |  44 ++++-
 src/devtools/views/Components/OwnersStack.js  | 173 ++++++++++++++++--
 src/utils.js                                  |  18 ++
 7 files changed, 226 insertions(+), 39 deletions(-)

diff --git a/.flowconfig b/.flowconfig
index 35306bd54a6c..c1209df27300 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -4,7 +4,6 @@
 .*node_modules/archiver-utils
 .*node_modules/babel.*
 .*node_modules/browserify-zlib/.*
-.*node_modules/classnames.*
 .*node_modules/gh-pages/.*
 .*node_modules/invariant/.*
 .*node_modules/json-loader.*
diff --git a/.gitignore b/.gitignore
index 514ad873cd20..ee4e445f06b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ npm-debug.log
 yarn-error.log
 .DS_Store
 yarn-error.log
-.vscode
\ No newline at end of file
+.vscode
+.idea
diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 24b0933a431d..a54547e5255c 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -1,6 +1,7 @@
 // @flow
 
 import assign from 'object-assign';
+import { getElementDimensions } from '../../utils';
 
 type Rect = {
   bottom: number,
@@ -215,24 +216,6 @@ function findTipPos(dims, win) {
   return { top, left: dims.left + margin + 'px' };
 }
 
-function getElementDimensions(domElement) {
-  const calculatedStyle = window.getComputedStyle(domElement);
-  return {
-    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
-    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
-    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
-    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
-    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
-    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
-    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
-    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
-    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
-    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
-    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
-    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
-  };
-}
-
 // Get the window object for the document that a node belongs to,
 // or return null if it cannot be found (node not attached to DOM,
 // etc).
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 6d423dca00b7..7558ddfec867 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -7,6 +7,7 @@ export type IconType =
   | 'back'
   | 'cancel'
   | 'close'
+  | 'colon'
   | 'copy'
   | 'down'
   | 'export'
@@ -39,6 +40,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'close':
       pathData = PATH_CLOSE;
       break;
+    case 'colon':
+      pathData = PATH_COLON;
+      break;
     case 'copy':
       pathData = PATH_COPY;
       break;
@@ -117,6 +121,9 @@ const PATH_CANCEL = `
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
+const PATH_COLON =
+  'M10,9a2,2 0 1,0 4,0a2,2 0 1,0 -4,0 M10,19a2,2 0 1,0 4,0a2,2 0 1,0 -4,0';
+
 const PATH_COPY = `
   M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 2f0ebbd2a869..2af09bc30e12 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -2,7 +2,6 @@
   flex: 1;
   display: flex;
   align-items: center;
-  overflow-x: auto;
 }
 
 .Component,
@@ -12,7 +11,6 @@
   color: var(--color-component-name);
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
-  white-space: nowrap;
   border-radius: 0.125rem;
   border: none;
   background: none;
@@ -38,7 +36,49 @@
   outline: none;
 }
 
+.ElementsBar {
+  flex: 1 0 auto;
+}
+
+.ElementsBarSelectedOnly {
+  margin-left: 0.25rem;
+}
+
+.ElementsBarSelectedOnly .Component {
+  visibility: hidden;
+}
+.ElementsBarSelectedOnly .FocusedComponent {
+  float: left;
+}
+
+.ElementsDropdown {
+  position: relative;
+}
+
+.Dropdown {
+  z-index: 1;
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  min-height: 200px;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-selected-border);
+  overflow-y: auto;
+}
+
+.Dropdown .Component,
+.Dropdown .FocusedComponent {
+  display: block;
+  margin: 0.25rem 0.75rem 0.35rem;
+}
+
+.DropdownButtonActive {
+  background-color: var(--color-selected-background);
+  color: var(--color-selected-foreground);
+}
+
 .VRule {
+  flex: 0 0 auto;
   height: 20px;
   width: 1px;
   background-color: var(--color-border);
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 2049d4d5c1ff..55afea5de375 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -1,43 +1,84 @@
 // @flow
-
-import React, { useCallback, useContext } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  createRef,
+  forwardRef,
+} from 'react';
+import classNames from 'classnames';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
+import { getElementDimensions } from '../../../utils';
 
 import type { Element } from './types';
 
 import styles from './OwnersStack.css';
 
-export default function OwnerStack() {
-  const { ownerStack, resetOwnerStack } = useContext(TreeContext);
+type ElementsDropdownProps = {
+  selectedElementIndex: number | null,
+  children: Array<any>,
+};
+function ElementsDropdown({
+  selectedElementIndex,
+  children,
+}: ElementsDropdownProps) {
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const handleClick = useCallback(() => {
+    setIsDropdownVisible(!isDropdownVisible);
+  }, [isDropdownVisible, setIsDropdownVisible]);
 
-  const elements = ownerStack.map((id, index) => (
-    <ElementView key={id} id={id} index={index} />
-  ));
+  useEffect(() => {
+    setIsDropdownVisible(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedElementIndex]);
 
   return (
-    <div className={styles.OwnerStack}>
+    <div className={styles.ElementsDropdown}>
       <Button
-        className={styles.IconButton}
-        onClick={resetOwnerStack}
-        title="Back to tree view"
+        className={classNames(styles.IconButton, {
+          [styles.DropdownButtonActive]: isDropdownVisible,
+        })}
+        onClick={handleClick}
+        title="Open elements dropdown"
       >
-        <ButtonIcon type="close" />
+        <ButtonIcon type="colon" />
       </Button>
-      <div className={styles.VRule} />
-      {elements}
+      {isDropdownVisible && <div className={styles.Dropdown}>{children}</div>}
     </div>
   );
 }
 
-type Props = {
+type ElementsBarProps = {
+  elements: Array<any>,
+  showSelectedOnly: boolean,
+};
+const ElementsBar = forwardRef(
+  (
+    { elements, showSelectedOnly }: ElementsBarProps,
+    ref: Object
+  ) => {
+    return (
+      <div
+        className={classNames(styles.ElementsBar, {
+          [styles.ElementsBarSelectedOnly]: showSelectedOnly,
+        })}
+        ref={ref}
+      >
+        {elements}
+      </div>
+    );
+  }
+);
+
+type ElementViewProps = {
   id: number,
   index: number,
 };
-
-function ElementView({ id, index }: Props) {
+function ElementView({ id, index }: ElementViewProps) {
   const { ownerStackIndex, selectOwner } = useContext(TreeContext);
   const store = useContext(StoreContext);
   const { displayName } = ((store.getElementByID(id): any): Element);
@@ -59,3 +100,101 @@ function ElementView({ id, index }: Props) {
     </button>
   );
 }
+
+export default function OwnerStack() {
+  const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
+    TreeContext
+  );
+  const [isElementsBarOverflowing, setIsElementsBarOverflowing] = useState(
+    false
+  );
+  const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
+  const elementsBarRef = createRef<HTMLDivElement | null>();
+  const elements = ownerStack.map((id, index) => (
+    <ElementView key={id} id={id} index={index} />
+  ));
+
+  useEffect(() => {
+    if (elementsBarRef.current === null) {
+      return () => {};
+    }
+    const elements = Array.from(elementsBarRef.current.children);
+    const elementsTotalWidth = elements.reduce((acc, el) => {
+      const { offsetWidth } = el;
+      const { marginRight } = getElementDimensions(el);
+      return acc + (offsetWidth + marginRight);
+    }, 0);
+
+    setElementsTotalWidth(elementsTotalWidth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ownerStackIndex, elementsBarRef]);
+
+  useElementsBarOverflowing(
+    elementsBarRef,
+    elementsTotalWidth,
+    isElementsBarOverflowing => {
+      setIsElementsBarOverflowing(isElementsBarOverflowing);
+    }
+  );
+
+  return (
+    <div className={styles.OwnerStack}>
+      <Button
+        className={styles.IconButton}
+        onClick={resetOwnerStack}
+        title="Back to tree view"
+      >
+        <ButtonIcon type="close" />
+      </Button>
+      {isElementsBarOverflowing && (
+        <ElementsDropdown selectedElementIndex={ownerStackIndex}>
+          {elements}
+        </ElementsDropdown>
+      )}
+      <div className={styles.VRule} />
+      <ElementsBar
+        elements={elements}
+        showSelectedOnly={isElementsBarOverflowing}
+        ref={elementsBarRef}
+      />
+    </div>
+  );
+}
+
+function useElementsBarOverflowing(
+  elementsBarRef: Object,
+  elementsTotalWidth: number,
+  callback: Function
+) {
+  const isElementsBarOverflowing = useCallback(() => {
+    if (elementsBarRef.current !== null) {
+      const elementsBarWidth = elementsBarRef.current.clientWidth;
+      return elementsBarWidth <= elementsTotalWidth;
+    }
+    return false;
+  }, [elementsBarRef, elementsTotalWidth]);
+
+  useEffect(() => {
+    let timeoutID = null;
+    const handleResize = () => {
+      callback(isElementsBarOverflowing());
+    };
+    const debounceHandleResize = () => {
+      clearTimeout(((timeoutID: any): TimeoutID));
+      timeoutID = setTimeout(handleResize, 100);
+    };
+
+    handleResize();
+    // It's important to listen to the ownerDocument.defaultView to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;
+    ownerWindow.addEventListener('resize', debounceHandleResize);
+    return () => {
+      ownerWindow.removeEventListener('resize', debounceHandleResize);
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [elementsBarRef, isElementsBarOverflowing, callback]);
+}
diff --git a/src/utils.js b/src/utils.js
index 9c2c9189b97a..aa79351fc642 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -63,3 +63,21 @@ export function utfEncodeString(string: string): Uint32Array {
 function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
+
+export function getElementDimensions(domElement: Element) {
+  const calculatedStyle = window.getComputedStyle(domElement);
+  return {
+    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
+    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
+    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
+    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
+    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
+    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
+    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
+    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
+    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
+    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
+    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
+    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
+  };
+}

From 2620050abfce392f53c19bec170d1501a25e49eb Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Sun, 7 Apr 2019 11:48:35 +0200
Subject: [PATCH 245/814] Removed unneeded min-height. Using throttle for
 resize function.

---
 src/devtools/views/Components/OwnersStack.css |  1 -
 src/devtools/views/Components/OwnersStack.js  | 10 ++--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 2af09bc30e12..d2ebdde61eb7 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -60,7 +60,6 @@
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  min-height: 200px;
   background-color: var(--color-background);
   border: 1px solid var(--color-selected-border);
   overflow-y: auto;
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 55afea5de375..295c3fd97d00 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -7,6 +7,7 @@ import React, {
   createRef,
   forwardRef,
 } from 'react';
+import throttle from 'lodash.throttle';
 import classNames from 'classnames';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -175,14 +176,10 @@ function useElementsBarOverflowing(
   }, [elementsBarRef, elementsTotalWidth]);
 
   useEffect(() => {
-    let timeoutID = null;
     const handleResize = () => {
       callback(isElementsBarOverflowing());
     };
-    const debounceHandleResize = () => {
-      clearTimeout(((timeoutID: any): TimeoutID));
-      timeoutID = setTimeout(handleResize, 100);
-    };
+    const debounceHandleResize = throttle(handleResize, 100);
 
     handleResize();
     // It's important to listen to the ownerDocument.defaultView to support the browser extension.
@@ -192,9 +189,6 @@ function useElementsBarOverflowing(
     ownerWindow.addEventListener('resize', debounceHandleResize);
     return () => {
       ownerWindow.removeEventListener('resize', debounceHandleResize);
-      if (timeoutID !== null) {
-        clearTimeout(timeoutID);
-      }
     };
   }, [elementsBarRef, isElementsBarOverflowing, callback]);
 }

From 44c0febd234bb7c4c26af0f2643f850395db386f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 08:36:37 -0700
Subject: [PATCH 246/814] Profiler shows commit times and durations for
 selected fiber

---
 src/backend/agent.js                          | 21 +++++
 src/backend/renderer.js                       | 35 ++++++++
 src/backend/types.js                          |  7 ++
 src/devtools/ProfilingCache.js                | 69 +++++++++++++++-
 .../views/Profiler/CommitFlamegraph.js        |  4 +-
 .../Profiler/CommitFlamegraphListItem.js      |  7 +-
 src/devtools/views/Profiler/CommitRanked.js   |  4 +-
 .../views/Profiler/CommitRankedListItem.js    |  2 +-
 .../views/Profiler/FlamegraphChartBuilder.js  |  2 +
 src/devtools/views/Profiler/Profiler.js       | 11 ++-
 .../views/Profiler/ProfilerContext.js         | 12 ++-
 .../views/Profiler/RankedChartBuilder.js      |  2 +
 .../views/Profiler/SidebarCommitInfo.css      |  9 ++-
 .../views/Profiler/SidebarCommitInfo.js       |  3 +-
 .../Profiler/SidebarSelectedFiberInfo.css     | 52 ++++++++++++
 .../Profiler/SidebarSelectedFiberInfo.js      | 79 +++++++++++++++++++
 src/devtools/views/Profiler/types.js          |  6 ++
 17 files changed, 307 insertions(+), 18 deletions(-)
 create mode 100644 src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
 create mode 100644 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index ca711c419490..3bde89b9531d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -65,6 +65,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('captureScreenshot', this.captureScreenshot);
     bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);
     bridge.addListener('getCommitDetails', this.getCommitDetails);
+    bridge.addListener('getFiberCommits', this.getFiberCommits);
     bridge.addListener('getInteractions', this.getInteractions);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
@@ -158,6 +159,26 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  getFiberCommits = ({
+    fiberID,
+    rendererID,
+    rootID,
+  }: {
+    fiberID: number,
+    rendererID: number,
+    rootID: number,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      this._bridge.send(
+        'fiberCommits',
+        renderer.getFiberCommits(rootID, fiberID)
+      );
+    }
+  };
+
   getInteractions = ({
     rendererID,
     rootID,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ebc5b0684a8a..3a4cb9f1c91b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -32,6 +32,7 @@ import type {
   CommitDetails,
   DevToolsHook,
   Fiber,
+  FiberCommits,
   FiberData,
   Interaction,
   Interactions,
@@ -1652,6 +1653,39 @@ export function attach(
     };
   }
 
+  function getFiberCommits(rootID: number, fiberID: number): FiberCommits {
+    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+      rootID
+    );
+    if (commitProfilingMetadata != null) {
+      const commitDurations = [];
+      commitProfilingMetadata.forEach(({ actualDurations }, commitIndex) => {
+        for (let i = 0; i < actualDurations.length; i += 2) {
+          if (actualDurations[i] === fiberID) {
+            commitDurations.push(commitIndex, actualDurations[i + 1]);
+            break;
+          }
+        }
+      });
+
+      return {
+        commitDurations,
+        fiberID,
+        rootID,
+      };
+    }
+
+    console.warn(
+      `getFiberCommits(): No profiling info recorded for root "${rootID}"`
+    );
+
+    return {
+      commitDurations: [],
+      fiberID,
+      rootID,
+    };
+  }
+
   function getInteractions(rootID: number): Interactions {
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
@@ -1817,6 +1851,7 @@ export function attach(
     flushInitialOperations,
     getCommitDetails,
     getFiberIDFromNative,
+    getFiberCommits,
     getInteractions,
     findNativeByFiberID,
     getProfilingDataForDownload,
diff --git a/src/backend/types.js b/src/backend/types.js
index 0ee472a01570..620119d7900d 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -66,6 +66,12 @@ export type CommitDetails = {|
   rootID: number,
 |};
 
+export type FiberCommits = {|
+  commitDurations: Array<number>,
+  fiberID: number,
+  rootID: number,
+|};
+
 export type InteractionWithCommits = {|
   ...Interaction,
   commits: Array<number>,
@@ -93,6 +99,7 @@ export type RendererInterface = {
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
+  getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,
   getInteractions: (rootID: number) => Interactions,
   getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 1699f95f8c50..e0b4cfabc93f 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -23,11 +23,13 @@ import type { Resource } from './cache';
 import type { Bridge } from '../types';
 import type {
   CommitDetails as CommitDetailsBackend,
+  FiberCommits as FiberCommitsBackend,
   Interactions as InteractionsBackend,
   ProfilingSummary as ProfilingSummaryBackend,
 } from 'src/backend/types';
 import type {
   CommitDetails as CommitDetailsFrontend,
+  FiberCommits as FiberCommitsFrontend,
   Interactions as InteractionsFrontend,
   InteractionWithCommits,
   CommitTree as CommitTreeFrontend,
@@ -39,13 +41,19 @@ import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/R
 
 type CommitDetailsParams = {|
   commitIndex: number,
+  rendererID: number,
   rootID: number,
+|};
+
+type FiberCommitsParams = {|
+  fiberID: number,
   rendererID: number,
+  rootID: number,
 |};
 
 type InteractionsParams = {|
-  rootID: number,
   rendererID: number,
+  rootID: number,
 |};
 
 type GetCommitTreeParams = {|
@@ -54,8 +62,8 @@ type GetCommitTreeParams = {|
 |};
 
 type ProfilingSummaryParams = {|
-  rootID: number,
   rendererID: number,
+  rootID: number,
 |};
 
 export default class ProfilingCache {
@@ -67,6 +75,11 @@ export default class ProfilingCache {
     (commitDetails: CommitDetailsFrontend) => void
   > = new Map();
 
+  _pendingFiberCommitsMap: Map<
+    string,
+    (fiberCommits: FiberCommitsFrontend) => void
+  > = new Map();
+
   _pendingInteractionsMap: Map<
     number,
     (interactions: InteractionsFrontend) => void
@@ -121,6 +134,38 @@ export default class ProfilingCache {
       `${rootID}-${commitIndex}`
   );
 
+  FiberCommits: Resource<
+    FiberCommitsParams,
+    FiberCommitsFrontend
+  > = createResource(
+    ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {
+      return new Promise(resolve => {
+        const importedProfilingData = this._store.importedProfilingData;
+        if (importedProfilingData !== null) {
+          // TODO (profiling) commit details
+          // Copy from renderer getFiberCommits()
+        } else if (this._store.profilingOperations.has(rootID)) {
+          this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);
+          this._bridge.send('getFiberCommits', {
+            fiberID,
+            rendererID,
+            rootID,
+          });
+          return;
+        }
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
+          commitDurations: [],
+          fiberID,
+          rootID,
+        });
+      });
+    },
+    ({ fiberID, rendererID, rootID }: FiberCommitsParams) =>
+      `${rootID}-${fiberID}`
+  );
+
   Interactions: Resource<
     InteractionsParams,
     InteractionsFrontend
@@ -192,6 +237,7 @@ export default class ProfilingCache {
     this._store = store;
 
     bridge.addListener('commitDetails', this.onCommitDetails);
+    bridge.addListener('fiberCommits', this.onFiberCommits);
     bridge.addListener('interactions', this.onInteractions);
     bridge.addListener('profilingSummary', this.onProfileSummary);
   }
@@ -285,6 +331,24 @@ export default class ProfilingCache {
     }
   };
 
+  onFiberCommits = ({
+    commitDurations,
+    fiberID,
+    rootID,
+  }: FiberCommitsBackend) => {
+    const key = `${rootID}-${fiberID}`;
+    const resolve = this._pendingFiberCommitsMap.get(key);
+    if (resolve != null) {
+      this._pendingFiberCommitsMap.delete(key);
+
+      resolve({
+        commitDurations,
+        fiberID,
+        rootID,
+      });
+    }
+  };
+
   onInteractions = ({ interactions, rootID }: InteractionsBackend) => {
     const resolve = this._pendingInteractionsMap.get(rootID);
     if (resolve != null) {
@@ -304,6 +368,7 @@ export default class ProfilingCache {
     const resolve = this._pendingProfileSummaryMap.get(rootID);
     if (resolve != null) {
       this._pendingProfileSummaryMap.delete(rootID);
+
       const initialTreeBaseDurationsMap = new Map();
       for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
         initialTreeBaseDurationsMap.set(
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index a44bce868be8..a4ad534a8279 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -20,7 +20,7 @@ export type ItemData = {|
   scaleX: (value: number, fallbackValue: number) => number,
   selectedChartNode: ChartNode,
   selectedChartNodeIndex: number,
-  selectFiber: (id: number | null) => void,
+  selectFiber: (id: number | null, name: string | null) => void,
   width: number,
 |};
 
@@ -33,7 +33,7 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
-      selectFiber(null);
+      selectFiber(null, null);
     },
     [selectFiber]
   );
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index fb655e25f588..8d55d781b091 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -26,9 +26,9 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
   const { maxSelfDuration, rows } = chartData;
 
   const handleClick = useCallback(
-    (event: MouseEvent, id: number) => {
+    (event: MouseEvent, id: number, name: string) => {
       event.stopPropagation();
-      selectFiber(id);
+      selectFiber(id, name);
     },
     [selectFiber]
   );
@@ -50,6 +50,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
           didRender,
           id,
           label,
+          name,
           offset,
           selfDuration,
           treeBaseDuration,
@@ -84,7 +85,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
             isDimmed={index < selectedChartNodeIndex}
             key={id}
             label={label}
-            onClick={event => handleClick(event, id)}
+            onClick={event => handleClick(event, id, name)}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}
             y={top}
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 238a7cbe3d02..63cb41cd7161 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -20,7 +20,7 @@ export type ItemData = {|
   scaleX: (value: number, fallbackValue: number) => number,
   selectedFiberID: number | null,
   selectedFiberIndex: number,
-  selectFiber: (id: number | null) => void,
+  selectFiber: (id: number | null, name: string | null) => void,
   width: number,
 |};
 
@@ -33,7 +33,7 @@ export default function CommitRankedAutoSizer(_: {||}) {
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
-      selectFiber(null);
+      selectFiber(null, null);
     },
     [selectFiber]
   );
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
index 6c37a6db4690..996a20746971 100644
--- a/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -22,7 +22,7 @@ function CommitRankedListItem({ data, index, style }: Props) {
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
-      selectFiber(node.id);
+      selectFiber(node.id, node.name);
     },
     [node, selectFiber]
   );
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 9478c42d7e53..bfb912adcc04 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -9,6 +9,7 @@ export type ChartNode = {|
   didRender: boolean,
   id: number,
   label: string,
+  name: string,
   offset: number,
   selfDuration: number,
   treeBaseDuration: number,
@@ -82,6 +83,7 @@ export function getChartData({
       didRender,
       id,
       label,
+      name,
       offset: parentOffset,
       selfDuration,
       treeBaseDuration: node.treeBaseDuration,
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 49145e47bc96..4b346dd413aa 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -19,6 +19,7 @@ import ProfilingImportExportButtons from './ProfilingImportExportButtons';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
+import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
 import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
 
 import styles from './Profiler.css';
@@ -118,7 +119,9 @@ function SnapshotSelectorFallback() {
 // This view's subtree uses suspense to request profiler data from the backend.
 // NOTE that the structure of this UI should mirror NonSuspendingProfiler.
 function SuspendingProfiler() {
-  const { selectedTabID, selectTab } = useContext(ProfilerContext);
+  const { selectedFiberID, selectedTabID, selectTab } = useContext(
+    ProfilerContext
+  );
   const { isFilterModalShowing, setIsFilterModalShowing } = useContext(
     CommitFilterModalContext
   );
@@ -147,7 +150,11 @@ function SuspendingProfiler() {
       break;
     case 'flame-chart':
     case 'ranked-chart':
-      sidebar = <SidebarCommitInfo />;
+      if (selectedFiberID !== null) {
+        sidebar = <SidebarSelectedFiberInfo />;
+      } else {
+        sidebar = <SidebarCommitInfo />;
+      }
       break;
     default:
       break;
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index bd5eb831d666..d06b5dab7331 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -56,7 +56,8 @@ type Context = {|
 
   // Which fiber is currently selected in the Ranked or Flamegraph charts?
   selectedFiberID: number | null,
-  selectFiber: (id: number | null) => void,
+  selectedFiberName: string | null,
+  selectFiber: (id: number | null, name: string | null) => void,
 
   // Which interaction is currently selected in the Interactions graph?
   selectedInteractionID: number | null,
@@ -141,13 +142,15 @@ function ProfilerContextController({ children }: Props) {
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
   const [selectedFiberID, selectFiberID] = useState<number | null>(null);
+  const [selectedFiberName, selectFiberName] = useState<string | null>(null);
   const [selectedInteractionID, selectInteraction] = useState<number | null>(
     null
   );
 
   const selectFiber = useCallback(
-    (id: number | null) => {
+    (id: number | null, name: string | null) => {
       selectFiberID(id);
+      selectFiberName(name);
       if (id !== null) {
         const index = store.getIndexOfElementID(id);
         if (index !== null) {
@@ -155,7 +158,7 @@ function ProfilerContextController({ children }: Props) {
         }
       }
     },
-    [selectElementAtIndex, selectFiberID, store]
+    [selectElementAtIndex, selectFiberID, selectFiberName, store]
   );
 
   if (isProfiling) {
@@ -165,6 +168,7 @@ function ProfilerContextController({ children }: Props) {
       }
       if (selectedFiberID !== null) {
         selectFiberID(null);
+        selectFiberName(null);
       }
       if (selectedInteractionID !== null) {
         selectInteraction(null);
@@ -195,6 +199,7 @@ function ProfilerContextController({ children }: Props) {
       selectCommitIndex,
 
       selectedFiberID,
+      selectedFiberName,
       selectFiber,
 
       selectedInteractionID,
@@ -222,6 +227,7 @@ function ProfilerContextController({ children }: Props) {
       selectCommitIndex,
 
       selectedFiberID,
+      selectedFiberName,
       selectFiber,
 
       selectedInteractionID,
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 58235ad484b8..981692c90c12 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -7,6 +7,7 @@ import type { CommitDetails, CommitTree, Node } from './types';
 export type ChartNode = {|
   id: number,
   label: string,
+  name: string,
   value: number,
 |};
 
@@ -58,6 +59,7 @@ export function getChartData({
     chartNodes.push({
       id,
       label,
+      name,
       value: selfDuration,
     });
   });
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 6e99ac4ff343..cde971ef672d 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -20,20 +20,25 @@
 }
 
 .InteractionList {
-  padding: 0.25rem;
+  margin: 0 0 0.5rem;
 }
 
 .ListItem {
   margin: 0 0 0.5rem;
 }
 
-.InteractionListItem {
+.InteractionListItem,
+.InteractionListItemNone {
   padding: 0.25rem 0.5rem;
 }
 .InteractionListItem:hover {
   background-color: var(--color-hover-background);
 }
 
+.InteractionListItemNone {
+  color: var(--color-dim);
+}
+
 .Label {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index a786d6e8db0b..085ce46195f4 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -88,7 +88,7 @@ export default function SidebarCommitInfo(_: Props) {
             <label className={styles.Label}>Interactions</label>:
             <ul className={styles.InteractionList}>
               {interactions.length === 0 ? (
-                <li className={styles.InteractionListItem}>None</li>
+                <li className={styles.InteractionListItemNone}>None</li>
               ) : null}
               {interactions.map((interaction, index) => (
                 <li
@@ -103,6 +103,7 @@ export default function SidebarCommitInfo(_: Props) {
           </li>
           {captureScreenshots && (
             <li>
+              <label className={styles.Label}>Screenshot</label>:
               {screenshot != null ? (
                 <img
                   alt="Screenshot"
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
new file mode 100644
index 000000000000..357c3fd4f57f
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -0,0 +1,52 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.Content {
+  padding: 0.5rem;
+  user-select: none;
+  border-top: 1px solid var(--color-border);
+}
+
+.Component {
+  flex: 1;
+  color: var(--color-component-name);
+}
+.Component:before {
+  white-space: nowrap;
+  content: '<';
+  color: var(--color-jsx-arrow-brackets);
+}
+.Component:after {
+  white-space: nowrap;
+  content: '>';
+  color: var(--color-jsx-arrow-brackets);
+}
+
+.Label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.CurrentListItem,
+.ListItem {
+  padding: 0.25rem 0.5rem;
+}
+.ListItem:hover {
+  background-color: var(--color-hover-background);
+}
+
+.CurrentListItem {
+  background-color: var(--color-selected-background);
+  color: var(--color-selected-foreground);
+}
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
new file mode 100644
index 000000000000..cf8d1c84b7d0
--- /dev/null
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -0,0 +1,79 @@
+// @flow
+
+import React, { Fragment, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { formatDuration, formatTime } from './utils';
+import { StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './SidebarSelectedFiberInfo.css';
+
+export type Props = {||};
+
+export default function SidebarSelectedFiberInfo(_: Props) {
+  const { profilingCache } = useContext(StoreContext);
+  const {
+    rendererID,
+    rootID,
+    selectCommitIndex,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectedFiberName,
+    selectFiber,
+  } = useContext(ProfilerContext);
+
+  const { commitTimes } = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const { commitDurations } = profilingCache.FiberCommits.read({
+    fiberID: ((selectedFiberID: any): number),
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const listItems = [];
+  for (let i = 0; i < commitDurations.length; i += 2) {
+    const commitIndex = commitDurations[i];
+    const duration = commitDurations[i + 1];
+    const time = commitTimes[commitIndex];
+
+    listItems.push(
+      <li
+        key={commitIndex}
+        className={
+          selectedCommitIndex === commitIndex
+            ? styles.CurrentListItem
+            : styles.ListItem
+        }
+        onClick={() => selectCommitIndex(commitIndex)}
+      >
+        {formatTime(time)}s for {formatDuration(duration)}ms
+      </li>
+    );
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>
+        <div className={styles.Component}>
+          {selectedFiberName || 'Selected component'}
+        </div>
+
+        <Button
+          className={styles.IconButton}
+          onClick={() => selectFiber(null, null)}
+          title="Back to commit view"
+        >
+          <ButtonIcon type="close" />
+        </Button>
+      </div>
+      <div className={styles.Content}>
+        <label className={styles.Label}>Rendered at</label>:
+        <ul className={styles.List}>{listItems}</ul>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index fc7d22e770cd..eb9dd1b49426 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -34,6 +34,12 @@ export type CommitDetails = {|
   interactions: Array<Interaction>,
 |};
 
+export type FiberCommits = {|
+  commitDurations: Array<number>,
+  fiberID: number,
+  rootID: number,
+|};
+
 export type ProfilingSummary = {|
   rootID: number,
 

From 2b868821d5ade63da9da4befd967377770c6b6fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:00:52 -0700
Subject: [PATCH 247/814] Improved keyboard navigation for tabs, interactions,
 and fiber-commits

---
 .../Profiler/ProfilingImportExportButtons.js  |  1 +
 .../views/Profiler/SidebarCommitInfo.css      | 29 +++++++++++--------
 .../views/Profiler/SidebarCommitInfo.js       | 14 ++++-----
 .../Profiler/SidebarSelectedFiberInfo.css     | 25 +++++++++-------
 .../Profiler/SidebarSelectedFiberInfo.js      | 11 ++++---
 .../views/Profiler/SnapshotSelector.css       |  1 +
 src/devtools/views/TabBar.css                 |  4 +++
 7 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index b97c2a317c0e..a6c0b14b2b37 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -85,6 +85,7 @@ export default function ProfilingImportExportButtons() {
         className={styles.Input}
         type="file"
         onChange={handleFiles}
+        tabIndex={-1}
       />
       <Button
         disabled={isProfiling}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index cde971ef672d..276bbb5708d3 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -12,33 +12,38 @@
   border-top: 1px solid var(--color-border);
 }
 
-.List,
-.InteractionList {
+.List {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.InteractionList {
+.ListItem {
   margin: 0 0 0.5rem;
 }
 
-.ListItem {
-  margin: 0 0 0.5rem;
+.NoInteractions {
+  color: var(--color-dim);
 }
 
-.InteractionListItem,
-.InteractionListItemNone {
+.Interactions {
+  margin: 0 0 0.5rem;
+}
+.Interaction {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
   padding: 0.25rem 0.5rem;
+  color: var(--color-text);
 }
-.InteractionListItem:hover {
+.Interaction:focus,
+.Interaction:hover {
+  outline: none;
   background-color: var(--color-hover-background);
 }
 
-.InteractionListItemNone {
-  color: var(--color-dim);
-}
-
 .Label {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 085ce46195f4..1ee99b2b8228 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -84,22 +84,22 @@ export default function SidebarCommitInfo(_: Props) {
               ms
             </span>
           </li>
-          <li className={styles.InteractionList}>
+          <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
-            <ul className={styles.InteractionList}>
+            <div className={styles.InteractionList}>
               {interactions.length === 0 ? (
-                <li className={styles.InteractionListItemNone}>None</li>
+                <div className={styles.NoInteractions}>None</div>
               ) : null}
               {interactions.map((interaction, index) => (
-                <li
+                <button
                   key={index}
-                  className={styles.InteractionListItem}
+                  className={styles.Interaction}
                   onClick={() => viewInteraction(interaction)}
                 >
                   {interaction.name}
-                </li>
+                </button>
               ))}
-            </ul>
+            </div>
           </li>
           {captureScreenshots && (
             <li>
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 357c3fd4f57f..a3759a1a6d30 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -32,21 +32,26 @@
   margin-bottom: 0.5rem;
 }
 
-.List {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.CurrentListItem,
-.ListItem {
+.CurrentCommit,
+.Commit {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
   padding: 0.25rem 0.5rem;
+  color: var(--color-text);
 }
-.ListItem:hover {
+.Commit:focus,
+.Commit:hover {
+  outline: none;
   background-color: var(--color-hover-background);
 }
 
-.CurrentListItem {
+.CurrentCommit {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.CurrentCommit:focus {
+  outline: none;
+}
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index cf8d1c84b7d0..8739509575da 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -41,17 +41,17 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     const time = commitTimes[commitIndex];
 
     listItems.push(
-      <li
+      <button
         key={commitIndex}
         className={
           selectedCommitIndex === commitIndex
-            ? styles.CurrentListItem
-            : styles.ListItem
+            ? styles.CurrentCommit
+            : styles.Commit
         }
         onClick={() => selectCommitIndex(commitIndex)}
       >
         {formatTime(time)}s for {formatDuration(duration)}ms
-      </li>
+      </button>
     );
   }
 
@@ -71,8 +71,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         </Button>
       </div>
       <div className={styles.Content}>
-        <label className={styles.Label}>Rendered at</label>:
-        <ul className={styles.List}>{listItems}</ul>
+        <label className={styles.Label}>Rendered at</label>: {listItems}
       </div>
     </Fragment>
   );
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 4a19d964bfac..e4f8aec57d4e 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -11,6 +11,7 @@
 }
 .Commits:focus {
   outline: none;
+  background-color: var(--color-button-background-focus);
 }
 
 .IndexLabel {
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 07362e6bde69..e1a536e07fcc 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -15,6 +15,10 @@
 .TabCurrent:hover {
   background-color: var(--color-hover-background);
 }
+.Tab:focus-within,
+.TabCurrent:focus-within {
+  background-color: var(--color-hover-background);
+}
 
 .TabCurrent {
   border-bottom: 3px solid var(--color-selected-border);

From 9a2f9ac880ef47e0195afa20a1f23993ce35c425 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:42:52 -0700
Subject: [PATCH 248/814] Moved getElementDimensions() back into Overlay
 component

---
 src/backend/views/Overlay.js                 | 19 ++++++++++++++++++-
 src/devtools/views/Components/OwnersStack.js |  8 ++------
 src/utils.js                                 | 18 ------------------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index a54547e5255c..90e74464615f 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -1,7 +1,6 @@
 // @flow
 
 import assign from 'object-assign';
-import { getElementDimensions } from '../../utils';
 
 type Rect = {
   bottom: number,
@@ -216,6 +215,24 @@ function findTipPos(dims, win) {
   return { top, left: dims.left + margin + 'px' };
 }
 
+export function getElementDimensions(domElement: Element) {
+  const calculatedStyle = window.getComputedStyle(domElement);
+  return {
+    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
+    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
+    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
+    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
+    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
+    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
+    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
+    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
+    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
+    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
+    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
+    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
+  };
+}
+
 // Get the window object for the document that a node belongs to,
 // or return null if it cannot be found (node not attached to DOM,
 // etc).
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 295c3fd97d00..2fabc1e7fb75 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -13,7 +13,6 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
-import { getElementDimensions } from '../../../utils';
 
 import type { Element } from './types';
 
@@ -58,10 +57,7 @@ type ElementsBarProps = {
   showSelectedOnly: boolean,
 };
 const ElementsBar = forwardRef(
-  (
-    { elements, showSelectedOnly }: ElementsBarProps,
-    ref: Object
-  ) => {
+  ({ elements, showSelectedOnly }: ElementsBarProps, ref: Object) => {
     return (
       <div
         className={classNames(styles.ElementsBar, {
@@ -122,7 +118,7 @@ export default function OwnerStack() {
     const elements = Array.from(elementsBarRef.current.children);
     const elementsTotalWidth = elements.reduce((acc, el) => {
       const { offsetWidth } = el;
-      const { marginRight } = getElementDimensions(el);
+      const marginRight = parseInt(getComputedStyle(el).marginRight, 10);
       return acc + (offsetWidth + marginRight);
     }, 0);
 
diff --git a/src/utils.js b/src/utils.js
index aa79351fc642..9c2c9189b97a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -63,21 +63,3 @@ export function utfEncodeString(string: string): Uint32Array {
 function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
-
-export function getElementDimensions(domElement: Element) {
-  const calculatedStyle = window.getComputedStyle(domElement);
-  return {
-    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
-    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
-    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
-    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
-    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
-    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
-    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
-    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
-    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
-    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
-    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
-    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
-  };
-}

From f2951fb51fa338da7a651cf414a074f2acf8b4cb Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sun, 7 Apr 2019 17:40:53 +0100
Subject: [PATCH 249/814] Preserve selection on exiting owner mode

---
 src/devtools/views/Components/TreeContext.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 940821c1a16c..b83078f653d3 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -383,7 +383,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     case 'RESET_OWNER_STACK':
       ownerStack = [];
       ownerStackIndex = null;
-      selectedElementIndex = null;
+      selectedElementIndex =
+        selectedElementID !== null
+          ? store.getIndexOfElementID(selectedElementID)
+          : null;
       _ownerFlatTree = null;
       break;
     case 'SELECT_ELEMENT_AT_INDEX':

From 9255ad1025d219842e1b9ac2a1a2734533b357ce Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:46:44 -0700
Subject: [PATCH 250/814] Replaced "colon" icon with more standard 3-dot "more"

---
 src/devtools/views/ButtonIcon.js             | 13 ++-----------
 src/devtools/views/Components/OwnersStack.js |  2 +-
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 7558ddfec867..82a48d64150b 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -7,7 +7,6 @@ export type IconType =
   | 'back'
   | 'cancel'
   | 'close'
-  | 'colon'
   | 'copy'
   | 'down'
   | 'export'
@@ -40,9 +39,6 @@ export default function ButtonIcon({ type }: Props) {
     case 'close':
       pathData = PATH_CLOSE;
       break;
-    case 'colon':
-      pathData = PATH_COLON;
-      break;
     case 'copy':
       pathData = PATH_COPY;
       break;
@@ -121,9 +117,6 @@ const PATH_CANCEL = `
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
-const PATH_COLON =
-  'M10,9a2,2 0 1,0 4,0a2,2 0 1,0 -4,0 M10,19a2,2 0 1,0 4,0a2,2 0 1,0 -4,0';
-
 const PATH_COPY = `
   M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
@@ -138,10 +131,8 @@ const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
 const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';
 
 const PATH_MORE = `
-  M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9
-  13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83
-  0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5
-  1.5.67 1.5 1.5-.67 1.5-1.5 1.5z
+  M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 
+  2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z
 `;
 
 const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 2fabc1e7fb75..f2de0c47a9bf 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -45,7 +45,7 @@ function ElementsDropdown({
         onClick={handleClick}
         title="Open elements dropdown"
       >
-        <ButtonIcon type="colon" />
+        <ButtonIcon type="more" />
       </Button>
       {isDropdownVisible && <div className={styles.Dropdown}>{children}</div>}
     </div>

From 252a87efe58771bde9bc85d7156f7015f9f484ef Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:51:54 -0700
Subject: [PATCH 251/814] Use 'classnames' in TabBar to simplify an attribute

---
 src/devtools/views/TabBar.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index 81611fb7a2f1..d5ba8c5cb62b 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import React, { Fragment, useCallback } from 'react';
 import Icon from './Icon';
 
@@ -60,9 +61,11 @@ export default function TabBar({
     <Fragment>
       {tabs.map(({ icon, id, label, title }) => (
         <label
-          className={`${tabClassName} ${
-            disabled ? styles.TabDisabled : styles.Tab
-          } ${!disabled && currentTab === id ? styles.TabCurrent : ''}`}
+          className={classNames(
+            tabClassName,
+            disabled ? styles.TabDisabled : styles.Tab,
+            !disabled && currentTab === id ? styles.TabCurrent : null
+          )}
           key={id}
           onKeyDown={handleKeyDown}
           title={title || label}

From 850dda0fb93cde4c9e86abfac6b4d3b1d9685545 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:53:34 -0700
Subject: [PATCH 252/814] Cleaned up an old Overlay helper function

---
 src/backend/views/Overlay.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 90e74464615f..60d0cb8156f1 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -218,18 +218,18 @@ function findTipPos(dims, win) {
 export function getElementDimensions(domElement: Element) {
   const calculatedStyle = window.getComputedStyle(domElement);
   return {
-    borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
-    borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
-    borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
-    borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
-    marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
-    marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
-    marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
-    marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
-    paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
-    paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
-    paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
-    paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
+    borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),
+    borderRight: parseInt(calculatedStyle.borderRightWidth, 10),
+    borderTop: parseInt(calculatedStyle.borderTopWidth, 10),
+    borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),
+    marginLeft: parseInt(calculatedStyle.marginLeft, 10),
+    marginRight: parseInt(calculatedStyle.marginRight, 10),
+    marginTop: parseInt(calculatedStyle.marginTop, 10),
+    marginBottom: parseInt(calculatedStyle.marginBottom, 10),
+    paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),
+    paddingRight: parseInt(calculatedStyle.paddingRight, 10),
+    paddingTop: parseInt(calculatedStyle.paddingTop, 10),
+    paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),
   };
 }
 

From a42a3a2d72cb969e0703cbf182592031f7d49a8a Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sun, 7 Apr 2019 17:55:27 +0100
Subject: [PATCH 253/814] Bump overscan

---
 src/devtools/views/Components/Tree.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 1d0599a20e35..8019a6176807 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -118,6 +118,7 @@ export default function Tree(props: Props) {
               itemCount={numElements}
               itemData={itemData}
               itemSize={lineHeight}
+              overscanCount={3}
               ref={listRef}
               width={width}
             >

From df00a9639ea648f0bcd7f62fb545cb403844396f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:58:34 -0700
Subject: [PATCH 254/814] Removed some unnecessary functions

---
 src/devtools/views/Components/OwnersStack.js | 25 ++++++++------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index f2de0c47a9bf..d7d7a59fd274 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -129,9 +129,7 @@ export default function OwnerStack() {
   useElementsBarOverflowing(
     elementsBarRef,
     elementsTotalWidth,
-    isElementsBarOverflowing => {
-      setIsElementsBarOverflowing(isElementsBarOverflowing);
-    }
+    setIsElementsBarOverflowing
   );
 
   return (
@@ -163,28 +161,25 @@ function useElementsBarOverflowing(
   elementsTotalWidth: number,
   callback: Function
 ) {
-  const isElementsBarOverflowing = useCallback(() => {
-    if (elementsBarRef.current !== null) {
-      const elementsBarWidth = elementsBarRef.current.clientWidth;
-      return elementsBarWidth <= elementsTotalWidth;
-    }
-    return false;
-  }, [elementsBarRef, elementsTotalWidth]);
-
   useEffect(() => {
     const handleResize = () => {
-      callback(isElementsBarOverflowing());
+      let isElementsBarOverflowing = false;
+      if (elementsBarRef.current !== null) {
+        const elementsBarWidth = elementsBarRef.current.clientWidth;
+        isElementsBarOverflowing = elementsBarWidth <= elementsTotalWidth;
+      }
+      callback(isElementsBarOverflowing);
     };
     const debounceHandleResize = throttle(handleResize, 100);
 
     handleResize();
+
     // It's important to listen to the ownerDocument.defaultView to support the browser extension.
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;
     ownerWindow.addEventListener('resize', debounceHandleResize);
-    return () => {
+    return () =>
       ownerWindow.removeEventListener('resize', debounceHandleResize);
-    };
-  }, [elementsBarRef, isElementsBarOverflowing, callback]);
+  }, [elementsBarRef, elementsTotalWidth, callback]);
 }

From 5b6dbb8dd7490604ac508a5f7dbee67ce916e1b6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 10:01:18 -0700
Subject: [PATCH 255/814] Replaced some passive effects with layout effects to
 avoid flash of overflowed owners

---
 src/devtools/views/Components/OwnersStack.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index d7d7a59fd274..e04bf18ce878 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -2,7 +2,7 @@
 import React, {
   useCallback,
   useContext,
-  useEffect,
+  useLayoutEffect,
   useState,
   createRef,
   forwardRef,
@@ -31,7 +31,7 @@ function ElementsDropdown({
     setIsDropdownVisible(!isDropdownVisible);
   }, [isDropdownVisible, setIsDropdownVisible]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setIsDropdownVisible(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedElementIndex]);
@@ -111,7 +111,7 @@ export default function OwnerStack() {
     <ElementView key={id} id={id} index={index} />
   ));
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (elementsBarRef.current === null) {
       return () => {};
     }
@@ -161,16 +161,15 @@ function useElementsBarOverflowing(
   elementsTotalWidth: number,
   callback: Function
 ) {
-  useEffect(() => {
-    const handleResize = () => {
+  useLayoutEffect(() => {
+    const handleResize = throttle(() => {
       let isElementsBarOverflowing = false;
       if (elementsBarRef.current !== null) {
         const elementsBarWidth = elementsBarRef.current.clientWidth;
         isElementsBarOverflowing = elementsBarWidth <= elementsTotalWidth;
       }
       callback(isElementsBarOverflowing);
-    };
-    const debounceHandleResize = throttle(handleResize, 100);
+    }, 100);
 
     handleResize();
 
@@ -178,8 +177,7 @@ function useElementsBarOverflowing(
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;
-    ownerWindow.addEventListener('resize', debounceHandleResize);
-    return () =>
-      ownerWindow.removeEventListener('resize', debounceHandleResize);
+    ownerWindow.addEventListener('resize', handleResize);
+    return () => ownerWindow.removeEventListener('resize', handleResize);
   }, [elementsBarRef, elementsTotalWidth, callback]);
 }

From 2607b39fe158d71f134a0e7df30ce7e59246ebb2 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sun, 7 Apr 2019 18:20:34 +0100
Subject: [PATCH 256/814] Remove tree focus ring

---
 src/devtools/views/Components/Tree.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index c526dd93ceee..777e332ba765 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -24,10 +24,6 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
-  border: 0.25rem solid transparent;
-}
-.List:focus-within {
-  border-color: var(--color-button-background-focus);
 }
 
 .InnerElementType:focus {

From 2e5e88e127f5bac959aef7c0536b9d0cecd746ab Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 10:34:44 -0700
Subject: [PATCH 257/814] Cleaned up is-overflowing hook and dependencies

---
 src/devtools/views/Components/OwnersStack.js | 65 ++++++--------------
 src/devtools/views/hooks.js                  | 33 ++++++++++
 2 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index e04bf18ce878..f3888c181761 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -7,12 +7,12 @@ import React, {
   createRef,
   forwardRef,
 } from 'react';
-import throttle from 'lodash.throttle';
 import classNames from 'classnames';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
+import { useIsOverflowing } from '../hooks';
 
 import type { Element } from './types';
 
@@ -27,6 +27,7 @@ function ElementsDropdown({
   children,
 }: ElementsDropdownProps) {
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
   const handleClick = useCallback(() => {
     setIsDropdownVisible(!isDropdownVisible);
   }, [isDropdownVisible, setIsDropdownVisible]);
@@ -102,11 +103,11 @@ export default function OwnerStack() {
   const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
     TreeContext
   );
-  const [isElementsBarOverflowing, setIsElementsBarOverflowing] = useState(
-    false
-  );
+
   const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
   const elementsBarRef = createRef<HTMLDivElement | null>();
+  const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
+
   const elements = ownerStack.map((id, index) => (
     <ElementView key={id} id={id} index={index} />
   ));
@@ -115,22 +116,20 @@ export default function OwnerStack() {
     if (elementsBarRef.current === null) {
       return () => {};
     }
-    const elements = Array.from(elementsBarRef.current.children);
-    const elementsTotalWidth = elements.reduce((acc, el) => {
-      const { offsetWidth } = el;
-      const marginRight = parseInt(getComputedStyle(el).marginRight, 10);
-      return acc + (offsetWidth + marginRight);
-    }, 0);
 
-    setElementsTotalWidth(elementsTotalWidth);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ownerStackIndex, elementsBarRef]);
+    let elementsTotalWidth = 0;
+    for (let i = 0; i < ownerStack.length; i++) {
+      const element = elementsBarRef.current.children[i];
+      const computedStyle = getComputedStyle(element);
 
-  useElementsBarOverflowing(
-    elementsBarRef,
-    elementsTotalWidth,
-    setIsElementsBarOverflowing
-  );
+      elementsTotalWidth +=
+        element.offsetWidth +
+        parseInt(computedStyle.marginLeft, 10) +
+        parseInt(computedStyle.marginRight, 10);
+    }
+
+    setElementsTotalWidth(elementsTotalWidth);
+  }, [elementsBarRef, ownerStack.length]);
 
   return (
     <div className={styles.OwnerStack}>
@@ -141,7 +140,7 @@ export default function OwnerStack() {
       >
         <ButtonIcon type="close" />
       </Button>
-      {isElementsBarOverflowing && (
+      {isOverflowing && (
         <ElementsDropdown selectedElementIndex={ownerStackIndex}>
           {elements}
         </ElementsDropdown>
@@ -149,35 +148,9 @@ export default function OwnerStack() {
       <div className={styles.VRule} />
       <ElementsBar
         elements={elements}
-        showSelectedOnly={isElementsBarOverflowing}
+        showSelectedOnly={isOverflowing}
         ref={elementsBarRef}
       />
     </div>
   );
 }
-
-function useElementsBarOverflowing(
-  elementsBarRef: Object,
-  elementsTotalWidth: number,
-  callback: Function
-) {
-  useLayoutEffect(() => {
-    const handleResize = throttle(() => {
-      let isElementsBarOverflowing = false;
-      if (elementsBarRef.current !== null) {
-        const elementsBarWidth = elementsBarRef.current.clientWidth;
-        isElementsBarOverflowing = elementsBarWidth <= elementsTotalWidth;
-      }
-      callback(isElementsBarOverflowing);
-    }, 100);
-
-    handleResize();
-
-    // It's important to listen to the ownerDocument.defaultView to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;
-    ownerWindow.addEventListener('resize', handleResize);
-    return () => ownerWindow.removeEventListener('resize', handleResize);
-  }, [elementsBarRef, elementsTotalWidth, callback]);
-}
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 06364caa7700..933a8097ba5b 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -1,7 +1,40 @@
 // @flow
 
+import throttle from 'lodash.throttle';
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
+export function useIsOverflowing(
+  containerRef: { current: HTMLDivElement | null },
+  totalChildWidth: number
+): boolean {
+  const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
+
+  // It's important to use a layout effect, so that we avoid showing a flash of overflowed content.
+  useLayoutEffect(() => {
+    if (containerRef.current === null) {
+      return () => {};
+    }
+
+    const container = ((containerRef.current: any): HTMLDivElement);
+
+    const handleResize = throttle(
+      () => setIsOverflowing(container.clientWidth <= totalChildWidth),
+      100
+    );
+
+    handleResize();
+
+    // It's important to listen to the ownerDocument.defaultView to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerWindow = container.ownerDocument.defaultView;
+    ownerWindow.addEventListener('resize', handleResize);
+    return () => ownerWindow.removeEventListener('resize', handleResize);
+  }, [containerRef, totalChildWidth]);
+
+  return isOverflowing;
+}
+
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
   key: string,

From 5a118701b0fd6bb59d18fa7b2e33638471b04df7 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sun, 7 Apr 2019 18:44:11 +0100
Subject: [PATCH 258/814] Pass Toggle label through

---
 src/devtools/views/Toggle.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index 43803f25bc56..aa36a60b5259 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -18,6 +18,7 @@ export default function Toggle({
   isDisabled = false,
   isChecked,
   onChange,
+  title,
 }: Props) {
   let defaultClassName;
   if (isDisabled) {
@@ -36,7 +37,7 @@ export default function Toggle({
   );
 
   return (
-    <label className={`${defaultClassName} ${className}`}>
+    <label className={`${defaultClassName} ${className}`} title={title}>
       <input
         type="checkbox"
         className={styles.Input}

From 2ac815784b9aff97fb367d605c126d55846cecc7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 15:19:17 -0700
Subject: [PATCH 259/814] Removed unnecessary layout effect in favor of a
 setState

---
 src/devtools/views/Components/OwnersStack.css |  45 ++--
 src/devtools/views/Components/OwnersStack.js  | 201 +++++++++---------
 2 files changed, 117 insertions(+), 129 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index d2ebdde61eb7..270e22ee3b69 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -5,7 +5,7 @@
 }
 
 .Component,
-.FocusedComponent {
+.SelectedComponent {
   padding: 0.25rem;
   margin-right: 0.5rem;
   color: var(--color-component-name);
@@ -14,11 +14,8 @@
   border-radius: 0.125rem;
   border: none;
   background: none;
-}
-
-.Component {
   cursor: pointer;
-  color: var(--color-component-name);
+  text-align: left;
 }
 .Component:hover {
   background-color: var(--color-hover-background);
@@ -28,52 +25,38 @@
   background-color: var(--color-hover-background);
 }
 
-.FocusedComponent {
+.SelectedComponent {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
-.FocusedComponent:focus {
+.SelectedComponent:focus {
   outline: none;
 }
 
-.ElementsBar {
+.Bar {
+  display: flex;
   flex: 1 0 auto;
 }
 
-.ElementsBarSelectedOnly {
-  margin-left: 0.25rem;
-}
-
-.ElementsBarSelectedOnly .Component {
-  visibility: hidden;
-}
-.ElementsBarSelectedOnly .FocusedComponent {
-  float: left;
+.Toggle {
+  margin-right: 0.5rem;
 }
 
-.ElementsDropdown {
+.DropdownWrapper {
+  display: inline-block;
   position: relative;
 }
 
 .Dropdown {
   z-index: 1;
   position: absolute;
-  top: calc(100% + 5px);
+  top: calc(100% + 0.25rem);
   left: 0;
   background-color: var(--color-background);
-  border: 1px solid var(--color-selected-border);
   overflow-y: auto;
-}
-
-.Dropdown .Component,
-.Dropdown .FocusedComponent {
-  display: block;
-  margin: 0.25rem 0.75rem 0.35rem;
-}
-
-.DropdownButtonActive {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  max-height: 10rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .VRule {
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index f3888c181761..9bf7c5773231 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -3,13 +3,12 @@ import React, {
   useCallback,
   useContext,
   useLayoutEffect,
+  useRef,
   useState,
-  createRef,
-  forwardRef,
 } from 'react';
-import classNames from 'classnames';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
@@ -18,67 +17,129 @@ import type { Element } from './types';
 
 import styles from './OwnersStack.css';
 
+export default function OwnerStack() {
+  const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
+    TreeContext
+  );
+
+  const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
+  const elementsBarRef = useRef<HTMLDivElement | null>(null);
+  const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
+
+  useLayoutEffect(() => {
+    if (elementsBarRef.current === null) {
+      return () => {};
+    }
+
+    let elementsTotalWidth = 0;
+    for (let i = 0; i < ownerStack.length; i++) {
+      const element = elementsBarRef.current.children[i];
+      const computedStyle = getComputedStyle(element);
+
+      elementsTotalWidth +=
+        element.offsetWidth +
+        parseInt(computedStyle.marginLeft, 10) +
+        parseInt(computedStyle.marginRight, 10);
+    }
+
+    setElementsTotalWidth(elementsTotalWidth);
+  }, [elementsBarRef, ownerStack.length]);
+
+  return (
+    <div className={styles.OwnerStack}>
+      <Button
+        className={styles.IconButton}
+        onClick={resetOwnerStack}
+        title="Back to tree view"
+      >
+        <ButtonIcon type="close" />
+      </Button>
+      <div className={styles.VRule} />
+      <div className={styles.Bar} ref={elementsBarRef}>
+        {isOverflowing && (
+          <ElementsDropdown
+            ownerStack={ownerStack}
+            ownerStackIndex={ownerStackIndex}
+          />
+        )}
+        {isOverflowing ? (
+          <ElementView
+            id={ownerStack[((ownerStackIndex: any): number)]}
+            index={ownerStackIndex}
+          />
+        ) : (
+          ownerStack.map((id, index) => (
+            <ElementView key={id} id={id} index={index} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
 type ElementsDropdownProps = {
-  selectedElementIndex: number | null,
-  children: Array<any>,
+  ownerStack: Array<number>,
+  ownerStackIndex: number | null,
 };
 function ElementsDropdown({
-  selectedElementIndex,
-  children,
+  ownerStack,
+  ownerStackIndex,
 }: ElementsDropdownProps) {
+  const store = useContext(StoreContext);
+  const { selectOwner } = useContext(TreeContext);
+
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
 
-  const handleClick = useCallback(() => {
+  const handleDropdownButtonClick = useCallback(() => {
     setIsDropdownVisible(!isDropdownVisible);
   }, [isDropdownVisible, setIsDropdownVisible]);
 
-  useLayoutEffect(() => {
-    setIsDropdownVisible(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedElementIndex]);
+  const handleElementClick = useCallback(
+    (id: number) => {
+      selectOwner(id);
+      setIsDropdownVisible(false);
+    },
+    [selectOwner, setIsDropdownVisible]
+  );
 
   return (
-    <div className={styles.ElementsDropdown}>
-      <Button
-        className={classNames(styles.IconButton, {
-          [styles.DropdownButtonActive]: isDropdownVisible,
-        })}
-        onClick={handleClick}
+    <div className={styles.DropdownWrapper}>
+      <Toggle
+        className={styles.Toggle}
+        isChecked={isDropdownVisible}
+        onChange={handleDropdownButtonClick}
         title="Open elements dropdown"
       >
         <ButtonIcon type="more" />
-      </Button>
-      {isDropdownVisible && <div className={styles.Dropdown}>{children}</div>}
+      </Toggle>
+      {isDropdownVisible && (
+        <div className={styles.Dropdown}>
+          {ownerStack.map((id, index) => (
+            <button
+              className={
+                ownerStackIndex === index
+                  ? styles.SelectedComponent
+                  : styles.Component
+              }
+              onClick={() => handleElementClick(id)}
+            >
+              {((store.getElementByID(id): any): Element).displayName}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 
-type ElementsBarProps = {
-  elements: Array<any>,
-  showSelectedOnly: boolean,
-};
-const ElementsBar = forwardRef(
-  ({ elements, showSelectedOnly }: ElementsBarProps, ref: Object) => {
-    return (
-      <div
-        className={classNames(styles.ElementsBar, {
-          [styles.ElementsBarSelectedOnly]: showSelectedOnly,
-        })}
-        ref={ref}
-      >
-        {elements}
-      </div>
-    );
-  }
-);
-
 type ElementViewProps = {
   id: number,
-  index: number,
+  index: number | null,
 };
 function ElementView({ id, index }: ElementViewProps) {
-  const { ownerStackIndex, selectOwner } = useContext(TreeContext);
   const store = useContext(StoreContext);
+  const { ownerStackIndex, selectOwner } = useContext(TreeContext);
+
   const { displayName } = ((store.getElementByID(id): any): Element);
 
   const isSelected = ownerStackIndex === index;
@@ -91,66 +152,10 @@ function ElementView({ id, index }: ElementViewProps) {
 
   return (
     <button
-      className={isSelected ? styles.FocusedComponent : styles.Component}
+      className={isSelected ? styles.SelectedComponent : styles.Component}
       onClick={handleClick}
     >
       {displayName}
     </button>
   );
 }
-
-export default function OwnerStack() {
-  const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
-    TreeContext
-  );
-
-  const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
-  const elementsBarRef = createRef<HTMLDivElement | null>();
-  const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
-
-  const elements = ownerStack.map((id, index) => (
-    <ElementView key={id} id={id} index={index} />
-  ));
-
-  useLayoutEffect(() => {
-    if (elementsBarRef.current === null) {
-      return () => {};
-    }
-
-    let elementsTotalWidth = 0;
-    for (let i = 0; i < ownerStack.length; i++) {
-      const element = elementsBarRef.current.children[i];
-      const computedStyle = getComputedStyle(element);
-
-      elementsTotalWidth +=
-        element.offsetWidth +
-        parseInt(computedStyle.marginLeft, 10) +
-        parseInt(computedStyle.marginRight, 10);
-    }
-
-    setElementsTotalWidth(elementsTotalWidth);
-  }, [elementsBarRef, ownerStack.length]);
-
-  return (
-    <div className={styles.OwnerStack}>
-      <Button
-        className={styles.IconButton}
-        onClick={resetOwnerStack}
-        title="Back to tree view"
-      >
-        <ButtonIcon type="close" />
-      </Button>
-      {isOverflowing && (
-        <ElementsDropdown selectedElementIndex={ownerStackIndex}>
-          {elements}
-        </ElementsDropdown>
-      )}
-      <div className={styles.VRule} />
-      <ElementsBar
-        elements={elements}
-        showSelectedOnly={isOverflowing}
-        ref={elementsBarRef}
-      />
-    </div>
-  );
-}

From e489c8ac8e16ac90d95faefb171926658d836a8e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 15:32:13 -0700
Subject: [PATCH 260/814] Owners stack modal behaves and looks more like a
 modal

---
 src/devtools/views/Components/OwnersStack.css | 34 +++++++++----------
 src/devtools/views/Components/OwnersStack.js  | 14 +++++---
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 270e22ee3b69..f7acd996126d 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -2,6 +2,7 @@
   flex: 1;
   display: flex;
   align-items: center;
+  position: relative;
 }
 
 .Component,
@@ -42,23 +43,6 @@
   margin-right: 0.5rem;
 }
 
-.DropdownWrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.Dropdown {
-  z-index: 1;
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  background-color: var(--color-background);
-  overflow-y: auto;
-  max-height: 10rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .VRule {
   flex: 0 0 auto;
   height: 20px;
@@ -66,3 +50,19 @@
   background-color: var(--color-border);
   margin: 0 0.5rem;
 }
+
+.Modal {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 2.5rem;
+  z-index: 1;
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  padding: 0.5rem;
+  padding-right: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  max-height: 10rem;
+  overflow: auto;
+}
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 9bf7c5773231..a9d789ac4a31 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -1,5 +1,6 @@
 // @flow
 import React, {
+  Fragment,
   useCallback,
   useContext,
   useLayoutEffect,
@@ -11,7 +12,7 @@ import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
-import { useIsOverflowing } from '../hooks';
+import { useIsOverflowing, useModalDismissSignal } from '../hooks';
 
 import type { Element } from './types';
 
@@ -102,8 +103,13 @@ function ElementsDropdown({
     [selectOwner, setIsDropdownVisible]
   );
 
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const dismissModal = useCallback(() => setIsDropdownVisible(false));
+
+  useModalDismissSignal(modalRef, dismissModal);
+
   return (
-    <div className={styles.DropdownWrapper}>
+    <Fragment>
       <Toggle
         className={styles.Toggle}
         isChecked={isDropdownVisible}
@@ -113,7 +119,7 @@ function ElementsDropdown({
         <ButtonIcon type="more" />
       </Toggle>
       {isDropdownVisible && (
-        <div className={styles.Dropdown}>
+        <div className={styles.Modal} ref={modalRef}>
           {ownerStack.map((id, index) => (
             <button
               className={
@@ -128,7 +134,7 @@ function ElementsDropdown({
           ))}
         </div>
       )}
-    </div>
+    </Fragment>
   );
 }
 

From 77267e8544bf52abf21fa56315497d39527e6b46 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 15:34:35 -0700
Subject: [PATCH 261/814] Fixed Toggle Flow prop types

---
 src/devtools/views/Toggle.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index aa36a60b5259..c5c0a138fe86 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -10,6 +10,7 @@ type Props = {
   isChecked: boolean,
   isDisabled?: boolean,
   onChange: (isChecked: boolean) => void,
+  title?: string,
 };
 
 export default function Toggle({

From 0a6d637619fe357ee44f43827487d2dbe6051486 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sun, 7 Apr 2019 21:09:51 +0100
Subject: [PATCH 262/814] Fix spurious autoscroll

---
 src/devtools/views/Components/Element.js | 26 +++++++++++++++++++-----
 src/devtools/views/Components/Tree.js    | 14 +++++++++++--
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index eef967d931e2..14acf8ae2f33 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -4,7 +4,7 @@ import React, {
   Fragment,
   useCallback,
   useContext,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from 'react';
@@ -19,9 +19,11 @@ import styles from './Element.css';
 type Props = {
   index: number,
   style: Object,
+  // TODO: I can't get the correct type to work here:
+  data: Object,
 };
 
-export default function ElementView({ index, style }: Props) {
+export default function ElementView({ index, style, data }: Props) {
   const {
     baseDepth,
     getElementAtIndex,
@@ -29,11 +31,11 @@ export default function ElementView({ index, style }: Props) {
     selectedElementID,
     selectElementByID,
   } = useContext(TreeContext);
-
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
+  const lastScrolledIDRef = data.lastScrolledIDRef;
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
@@ -43,8 +45,22 @@ export default function ElementView({ index, style }: Props) {
 
   const ref = useRef<HTMLSpanElement | null>(null);
 
-  useEffect(() => {
+  // The tree above has its own autoscrolling, but it only works for rows.
+  // However, even when the row gets into the viewport, the component name
+  // might be too far left or right on the screen. Adjust it in this case.
+  useLayoutEffect(() => {
     if (isSelected) {
+      // Don't select the same item twice.
+      // A row may appear and disappear just by scrolling:
+      // https://github.com/bvaughn/react-devtools-experimental/issues/67
+      // It doesn't necessarily indicate a user action.
+      // TODO: we might want to revamp the autoscroll logic
+      // to only happen explicitly for user-initiated events.
+      if (lastScrolledIDRef.current === id) {
+        return;
+      }
+      lastScrolledIDRef.current = id;
+
       if (ref.current !== null) {
         ref.current.scrollIntoView({
           behavior: 'auto',
@@ -53,7 +69,7 @@ export default function ElementView({ index, style }: Props) {
         });
       }
     }
-  }, [isSelected]);
+  }, [id, isSelected, lastScrolledIDRef]);
 
   // TODO Add click and key handlers for toggling element open/close state.
 
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 8019a6176807..4b87eb77d183 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -38,13 +38,22 @@ export default function Tree(props: Props) {
   const { lineHeight } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
-  // This is helpful for things like the owners list.
+  // This is helpful for things like the owners list and search.
   useLayoutEffect(() => {
     if (selectedElementIndex !== null && listRef.current != null) {
       listRef.current.scrollToItem(selectedElementIndex);
+      // Note this autoscroll only works for rows.
+      // There's another autoscroll inside the elements
+      // that ensures the component name is visible horizontally.
+      // It's too early to do it now because the row might not exist yet.
     }
   }, [listRef, selectedElementIndex]);
 
+  // This ref is passed down the context to elements.
+  // It lets them avoid autoscrolling to the same item many times
+  // when a selected virtual row goes in and out of the viewport.
+  const lastScrolledIDRef = useRef(null);
+
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
     if (treeRef.current === null) {
@@ -98,8 +107,9 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
+      lastScrolledIDRef,
     }),
-    [baseDepth, numElements, getElementAtIndex]
+    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]
   );
 
   return (

From 132529da79feeb790db3c9633715a11bf2707111 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 15:29:51 +0100
Subject: [PATCH 263/814] Preserve state when switching tabs

---
 shells/browser/shared/src/main.js | 14 ++++++++++---
 src/devtools/views/DevTools.js    | 35 +++++++++++++------------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index e96b10fd7cc9..ab86699f1967 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -154,6 +154,14 @@ function createPanelIfReactLoaded() {
 
       initBridgeAndStore();
 
+      function ensureInitialHTMLIsCleared(container) {
+        if (container._hasInitialHTMLBeenCleared) {
+          return;
+        }
+        container.innerHTML = '';
+        container._hasInitialHTMLBeenCleared = true;
+      }
+
       let currentPanel = null;
 
       chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
@@ -166,7 +174,7 @@ function createPanelIfReactLoaded() {
           componentsPortalContainer = panel.container;
 
           if (componentsPortalContainer != null) {
-            componentsPortalContainer.innerHTML = '';
+            ensureInitialHTMLIsCleared(componentsPortalContainer);
             render('components');
             panel.injectStyles(cloneStyleTags);
           }
@@ -188,7 +196,7 @@ function createPanelIfReactLoaded() {
           profilerPortalContainer = panel.container;
 
           if (profilerPortalContainer != null) {
-            profilerPortalContainer.innerHTML = '';
+            ensureInitialHTMLIsCleared(profilerPortalContainer);
             render('profiler');
             panel.injectStyles(cloneStyleTags);
           }
@@ -205,7 +213,7 @@ function createPanelIfReactLoaded() {
           settingsPortalContainer = panel.container;
 
           if (settingsPortalContainer != null) {
-            settingsPortalContainer.innerHTML = '';
+            ensureInitialHTMLIsCleared(settingsPortalContainer);
             render('settings');
             panel.injectStyles(cloneStyleTags);
           }
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index aec2f9961a34..e5cad6eb9e50 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -107,25 +107,6 @@ export default function DevTools({
     };
   }, [store, supportsProfiling]);
 
-  let tabElement;
-  switch (tab) {
-    case 'profiler':
-      tabElement = (
-        <Profiler
-          portalContainer={profilerPortalContainer}
-          supportsProfiling={supportsProfiling}
-        />
-      );
-      break;
-    case 'settings':
-      tabElement = <Settings portalContainer={settingsPortalContainer} />;
-      break;
-    case 'components':
-    default:
-      tabElement = <Components portalContainer={componentsPortalContainer} />;
-      break;
-  }
-
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -158,7 +139,21 @@ export default function DevTools({
                     />
                   </div>
                 )}
-                <div className={styles.TabContent}>{tabElement}</div>
+                <div
+                  className={styles.TabContent}
+                  hidden={tab !== 'components'}
+                >
+                  <Components portalContainer={componentsPortalContainer} />
+                </div>
+                <div className={styles.TabContent} hidden={tab !== 'profiler'}>
+                  <Profiler
+                    portalContainer={profilerPortalContainer}
+                    supportsProfiling={supportsProfiling}
+                  />
+                </div>
+                <div className={styles.TabContent} hidden={tab !== 'settings'}>
+                  <Settings portalContainer={settingsPortalContainer} />
+                </div>
               </div>
             </ProfilerContextController>
           </TreeContextController>

From edfab66104fc0efa55010c14b6041884b8b0318c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 15:40:40 +0100
Subject: [PATCH 264/814] Rename "owner stack" label to "rendered by"

---
 src/devtools/views/Components/SelectedElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 4f6295bce9d2..f413af28fda0 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -207,7 +207,7 @@ function InspectedElementView({
 
       {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
-          <div className={styles.OwnersHeader}>owner stack</div>
+          <div className={styles.OwnersHeader}>rendered by</div>
           {owners.map(owner => (
             <OwnerView
               key={owner.id}

From 39223239bbcea68f801d2d3607c5326099e22e91 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 14:26:16 +0100
Subject: [PATCH 265/814] Select DOM nodes on hover

---
 src/backend/agent.js                          | 19 +++++++++++++++----
 src/backend/views/Highlighter.js              |  7 +++++--
 src/devtools/views/Components/Element.js      | 18 ++++++++++++++++++
 .../views/Components/SelectedElement.js       |  2 ++
 src/devtools/views/Components/Tree.js         |  8 +++++++-
 5 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 3bde89b9531d..5e2f332b8558 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -63,6 +63,10 @@ export default class Agent extends EventEmitter {
     this._bridge = bridge;
 
     bridge.addListener('captureScreenshot', this.captureScreenshot);
+    bridge.addListener(
+      'clearHighlightedElementInDOM',
+      this.clearHighlightedElementInDOM
+    );
     bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);
     bridge.addListener('getCommitDetails', this.getCommitDetails);
     bridge.addListener('getFiberCommits', this.getFiberCommits);
@@ -216,14 +220,22 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  clearHighlightedElementInDOM = () => {
+    hideOverlay();
+  };
+
   highlightElementInDOM = ({
     displayName,
     id,
+    isSticky,
     rendererID,
+    scrollIntoView,
   }: {
     displayName: string,
     id: number,
+    isSticky: boolean,
     rendererID: number,
+    scrollIntoView: boolean,
   }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -236,13 +248,12 @@ export default class Agent extends EventEmitter {
     }
 
     if (node != null) {
-      if (typeof node.scrollIntoView === 'function') {
+      if (scrollIntoView && typeof node.scrollIntoView === 'function') {
         // If the node isn't visible show it before highlighting it.
         // We may want to reconsider this; it might be a little disruptive.
         node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }
-
-      showOverlay(((node: any): HTMLElement), displayName);
+      showOverlay(((node: any): HTMLElement), displayName, isSticky);
     } else {
       hideOverlay();
     }
@@ -466,6 +477,6 @@ export default class Agent extends EventEmitter {
 
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
-    showOverlay(target);
+    showOverlay(target, null, true);
   };
 }
diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter.js
index fc98d4a134b1..8b1c17676adc 100644
--- a/src/backend/views/Highlighter.js
+++ b/src/backend/views/Highlighter.js
@@ -18,7 +18,8 @@ export function hideOverlay() {
 
 export function showOverlay(
   element: HTMLElement | null,
-  componentName: string = ''
+  componentName: string | null,
+  isSticky: boolean
 ) {
   if (timeoutID !== null) {
     clearTimeout(timeoutID);
@@ -34,5 +35,7 @@ export function showOverlay(
 
   overlay.inspect(element, componentName);
 
-  timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+  if (!isSticky) {
+    timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+  }
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 14acf8ae2f33..f10284cc916f 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -11,6 +11,7 @@ import React, {
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
+import { BridgeContext, StoreContext } from '../context';
 
 import type { Element } from './types';
 
@@ -31,6 +32,9 @@ export default function ElementView({ index, style, data }: Props) {
     selectedElementID,
     selectElementByID,
   } = useContext(TreeContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
@@ -82,6 +86,19 @@ export default function ElementView({ index, style, data }: Props) {
     [id, selectElementByID]
   );
 
+  const rendererID = store.getRendererIDForElement(element.id) || null;
+  const handleMouseEnter = useCallback(() => {
+    if (rendererID !== null) {
+      bridge.send('highlightElementInDOM', {
+        displayName: element.displayName,
+        id: element.id,
+        rendererID,
+        scrollIntoView: false,
+        isSticky: true,
+      });
+    }
+  }, [bridge, element, rendererID]);
+
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
     console.warn(`<ElementView> Could not find element at index ${index}`);
@@ -100,6 +117,7 @@ export default function ElementView({ index, style, data }: Props) {
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
+      onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       style={{
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index f413af28fda0..df07d46dbfda 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -47,6 +47,8 @@ export default function SelectedElement(_: Props) {
           displayName: element.displayName,
           id: selectedElementID,
           rendererID,
+          scrollIntoView: true,
+          isSticky: false,
         });
       }
     }
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 4b87eb77d183..0809b7851b21 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -12,6 +12,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
+import { BridgeContext } from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
@@ -32,6 +33,7 @@ export default function Tree(props: Props) {
     selectParentElementInTree,
     selectPreviousElementInTree,
   } = useContext(TreeContext);
+  const bridge = useContext(BridgeContext);
   const listRef = useRef<FixedSizeList<any> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
 
@@ -112,13 +114,17 @@ export default function Tree(props: Props) {
     [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]
   );
 
+  const handleMouseLeave = useCallback(() => {
+    bridge.send('clearHighlightedElementInDOM');
+  }, [bridge]);
+
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
       </div>
-      <div className={styles.AutoSizerWrapper}>
+      <div className={styles.AutoSizerWrapper} onMouseLeave={handleMouseLeave}>
         <AutoSizer>
           {({ height, width }) => (
             <FixedSizeList

From 6538e7141a2e47be1ef6c21bb1dc3f250d9f88e3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 14:39:00 +0100
Subject: [PATCH 266/814] Add a comment

---
 src/devtools/views/Components/Element.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index f10284cc916f..f188770ce9c4 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -87,6 +87,8 @@ export default function ElementView({ index, style, data }: Props) {
   );
 
   const rendererID = store.getRendererIDForElement(element.id) || null;
+  // Individual elements don't have a corresponding leave handler.
+  // Instead, it's implemented on the tree level.
   const handleMouseEnter = useCallback(() => {
     if (rendererID !== null) {
       bridge.send('highlightElementInDOM', {

From c6ee445ea974e133ea9974aec37c65d387fdcfd7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 18:00:48 +0100
Subject: [PATCH 267/814] Address review

---
 src/backend/agent.js                             | 8 ++++----
 src/backend/views/Highlighter.js                 | 4 ++--
 src/devtools/views/Components/Element.js         | 4 ++--
 src/devtools/views/Components/SelectedElement.js | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5e2f332b8558..c96b05b0aa27 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -226,14 +226,14 @@ export default class Agent extends EventEmitter {
 
   highlightElementInDOM = ({
     displayName,
+    hideAfterTimeout,
     id,
-    isSticky,
     rendererID,
     scrollIntoView,
   }: {
     displayName: string,
+    hideAfterTimeout: boolean,
     id: number,
-    isSticky: boolean,
     rendererID: number,
     scrollIntoView: boolean,
   }) => {
@@ -253,7 +253,7 @@ export default class Agent extends EventEmitter {
         // We may want to reconsider this; it might be a little disruptive.
         node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }
-      showOverlay(((node: any): HTMLElement), displayName, isSticky);
+      showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout);
     } else {
       hideOverlay();
     }
@@ -477,6 +477,6 @@ export default class Agent extends EventEmitter {
 
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
-    showOverlay(target, null, true);
+    showOverlay(target, null, false);
   };
 }
diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter.js
index 8b1c17676adc..c5339f676389 100644
--- a/src/backend/views/Highlighter.js
+++ b/src/backend/views/Highlighter.js
@@ -19,7 +19,7 @@ export function hideOverlay() {
 export function showOverlay(
   element: HTMLElement | null,
   componentName: string | null,
-  isSticky: boolean
+  hideAfterTimeout: boolean
 ) {
   if (timeoutID !== null) {
     clearTimeout(timeoutID);
@@ -35,7 +35,7 @@ export function showOverlay(
 
   overlay.inspect(element, componentName);
 
-  if (!isSticky) {
+  if (hideAfterTimeout) {
     timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
   }
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index f188770ce9c4..4ac576c95bd7 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -86,17 +86,17 @@ export default function ElementView({ index, style, data }: Props) {
     [id, selectElementByID]
   );
 
-  const rendererID = store.getRendererIDForElement(element.id) || null;
+  const rendererID = store.getRendererIDForElement(element.id);
   // Individual elements don't have a corresponding leave handler.
   // Instead, it's implemented on the tree level.
   const handleMouseEnter = useCallback(() => {
     if (rendererID !== null) {
       bridge.send('highlightElementInDOM', {
         displayName: element.displayName,
+        hideAfterTimeout: false,
         id: element.id,
         rendererID,
         scrollIntoView: false,
-        isSticky: true,
       });
     }
   }, [bridge, element, rendererID]);
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index df07d46dbfda..bba8d803dad6 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -45,10 +45,10 @@ export default function SelectedElement(_: Props) {
       if (rendererID !== null) {
         bridge.send('highlightElementInDOM', {
           displayName: element.displayName,
+          hideAfterTimeout: true,
           id: selectedElementID,
           rendererID,
           scrollIntoView: true,
-          isSticky: false,
         });
       }
     }
@@ -271,7 +271,7 @@ function useInspectedElement(id: number | null): InspectedElement | null {
       return () => {};
     }
 
-    const rendererID = store.getRendererIDForElement(id) || null;
+    const rendererID = store.getRendererIDForElement(id);
 
     // Update the $r variable.
     bridge.send('selectElement', { id, rendererID });

From 52014671bf42df73fd8764de2c18c979cad47ff8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 18:03:48 +0100
Subject: [PATCH 268/814] Make Flow happy

---
 src/devtools/views/Components/Element.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 4ac576c95bd7..421195d5af34 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -86,20 +86,20 @@ export default function ElementView({ index, style, data }: Props) {
     [id, selectElementByID]
   );
 
-  const rendererID = store.getRendererIDForElement(element.id);
+  const rendererID = id !== null ? store.getRendererIDForElement(id) : null;
   // Individual elements don't have a corresponding leave handler.
   // Instead, it's implemented on the tree level.
   const handleMouseEnter = useCallback(() => {
-    if (rendererID !== null) {
+    if (element !== null && id !== null && rendererID !== null) {
       bridge.send('highlightElementInDOM', {
         displayName: element.displayName,
         hideAfterTimeout: false,
-        id: element.id,
+        id,
         rendererID,
         scrollIntoView: false,
       });
     }
-  }, [bridge, element, rendererID]);
+  }, [bridge, element, id, rendererID]);
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {

From b176cd44144393439817b0026bd13302139e5550 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 16:20:17 +0100
Subject: [PATCH 269/814] Refactor: split inspectElementRaw

---
 src/backend/renderer.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3a4cb9f1c91b..3529612f312a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1410,7 +1410,7 @@ export function attach(
     }
   }
 
-  function inspectElement(id: number): InspectedElement | null {
+  function inspectElementRaw(id: number): InspectedElement | null {
     let fiber = idToFiberMap.get(id);
 
     if (fiber == null) {
@@ -1491,7 +1491,7 @@ export function attach(
     if (context !== null) {
       // To simplify hydration and display logic for context, wrap in a value object.
       // Otherwise simple values (e.g. strings, booleans) become harder to handle.
-      context = cleanForBridge({ value: context });
+      context = { value: context };
     }
 
     let owners = null;
@@ -1534,12 +1534,10 @@ export function attach(
       // TODO Review sanitization approach for the below inspectable values.
       context,
       hooks: usesHooks
-        ? cleanForBridge(
-            inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
-          )
+        ? inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
         : null,
-      props: cleanForBridge(memoizedProps),
-      state: usesHooks ? null : cleanForBridge(memoizedState),
+      props: memoizedProps,
+      state: usesHooks ? null : memoizedState,
 
       // List of owners
       owners,
@@ -1549,6 +1547,19 @@ export function attach(
     };
   }
 
+  function inspectElement(id: number): InspectedElement | null {
+    let result = inspectElementRaw(id);
+    if (result === null) {
+      return null;
+    }
+    // TODO Review sanitization approach for the below inspectable values.
+    result.context = cleanForBridge(result.context);
+    result.hooks = cleanForBridge(result.hooks);
+    result.props = cleanForBridge(result.props);
+    result.state = cleanForBridge(result.state);
+    return result;
+  }
+
   function setInHook(
     id: number,
     index: number,

From 5b120d6b24e29972ec8bc8b00638051c55f08a43 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 18:37:00 +0100
Subject: [PATCH 270/814] Add a separate button for logging values

---
 src/backend/agent.js                          | 10 +++++
 src/backend/renderer.js                       | 40 +++++++++++++++++++
 src/backend/types.js                          |  1 +
 src/devtools/views/ButtonIcon.js              |  4 ++
 .../views/Components/SelectedElement.js       | 28 +++++++++++--
 src/devtools/views/Components/types.js        |  2 +
 6 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index c96b05b0aa27..419bb9b760e1 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -75,6 +75,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('logElementToConsole', this.logElementToConsole);
     bridge.addListener('overrideContext', this.overrideContext);
     bridge.addListener('overrideHookState', this.overrideHookState);
     bridge.addListener('overrideProps', this.overrideProps);
@@ -268,6 +269,15 @@ export default class Agent extends EventEmitter {
     }
   };
 
+  logElementToConsole = ({ id, rendererID }: InspectSelectParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.logElementToConsole(id);
+    }
+  };
+
   reloadAndProfile = () => {
     localStorage.setItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3529612f312a..0607b7c2ad75 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1530,6 +1530,8 @@ export function attach(
       // Can view component source location.
       canViewSource,
 
+      displayName: getDataForFiber(fiber).displayName,
+
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
       context,
@@ -1560,6 +1562,43 @@ export function attach(
     return result;
   }
 
+  function logElementToConsole(id) {
+    const result = inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    const label =
+      '[Click to expand] <' + (result.displayName || 'Component') + ' />';
+
+    if (supportsGroup) {
+      console.groupCollapsed(label);
+    }
+    if (result.props !== null) {
+      console.log('Props:', result.props);
+    }
+    if (result.state !== null) {
+      console.log('State:', result.state);
+    }
+    if (result.hooks !== null) {
+      console.log('Hooks:', result.hooks);
+    }
+    const nativeNode = findNativeByFiberID(id);
+    if (nativeNode !== null) {
+      console.log('Node:', nativeNode);
+    }
+    if (window.chrome || /firefox/i.test(navigator.userAgent)) {
+      console.log(
+        'Right-click any value to save it as a global variable for further inspection.'
+      );
+    }
+    if (supportsGroup) {
+      console.groupEnd();
+    }
+  }
+
   function setInHook(
     id: number,
     index: number,
@@ -1870,6 +1909,7 @@ export function attach(
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
+    logElementToConsole,
     prepareViewElementSource,
     overrideSuspense,
     renderer,
diff --git a/src/backend/types.js b/src/backend/types.js
index 620119d7900d..bd4562eef793 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -106,6 +106,7 @@ export type RendererInterface = {
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
+  logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
   renderer: ReactRenderer | null,
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 82a48d64150b..caf53a7549bd 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -12,6 +12,7 @@ export type IconType =
   | 'export'
   | 'filter'
   | 'import'
+  | 'log-data'
   | 'more'
   | 'next'
   | 'previous'
@@ -54,6 +55,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'import':
       pathData = PATH_IMPORT;
       break;
+    case 'log-data':
+      pathData = PATH_EXPORT; // TODO: real icon
+      break;
     case 'more':
       pathData = PATH_MORE;
       break;
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index bba8d803dad6..d17e75616182 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -39,14 +39,14 @@ export default function SelectedElement(_: Props) {
   const inspectedElement = useInspectedElement(selectedElementID);
 
   const highlightElement = useCallback(() => {
-    if (element !== null && selectedElementID !== null) {
-      const rendererID =
-        store.getRendererIDForElement(selectedElementID) || null;
+    const id = selectedElementID;
+    if (element !== null && id !== null) {
+      const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
         bridge.send('highlightElementInDOM', {
           displayName: element.displayName,
           hideAfterTimeout: true,
-          id: selectedElementID,
+          id,
           rendererID,
           scrollIntoView: true,
         });
@@ -54,6 +54,19 @@ export default function SelectedElement(_: Props) {
     }
   }, [bridge, element, selectedElementID, store]);
 
+  const logElement = useCallback(() => {
+    const id = selectedElementID;
+    if (id !== null) {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('logElementToConsole', {
+          id,
+          rendererID,
+        });
+      }
+    }
+  }, [bridge, selectedElementID, store]);
+
   const viewSource = useCallback(() => {
     if (viewElementSource != null && selectedElementID !== null) {
       viewElementSource(selectedElementID);
@@ -89,6 +102,13 @@ export default function SelectedElement(_: Props) {
         >
           <ButtonIcon type="view-dom" />
         </Button>
+        <Button
+          className={styles.IconButton}
+          onClick={logElement}
+          title="Log this component data to the console"
+        >
+          <ButtonIcon type="log-data" />
+        </Button>
         <Button
           className={styles.IconButton}
           disabled={!canViewSource}
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 00d5a45844a8..5f231a61e9f6 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -58,6 +58,8 @@ export type InspectedElement = {|
 
   // Location of component in source coude.
   source: Object | null,
+
+  displayName: string | null,
 |};
 
 // TODO: Add profiling type

From 7115408751aa19e51494a3be28d6a394b7321f99 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 10:40:40 -0700
Subject: [PATCH 271/814] Added  for itemData

---
 src/devtools/views/Components/Element.js |  6 +++---
 src/devtools/views/Components/Tree.js    | 21 ++++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 421195d5af34..01f983c21795 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -13,18 +13,18 @@ import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
 
+import type { ItemData } from './Tree';
 import type { Element } from './types';
 
 import styles from './Element.css';
 
 type Props = {
+  data: ItemData,
   index: number,
   style: Object,
-  // TODO: I can't get the correct type to work here:
-  data: Object,
 };
 
-export default function ElementView({ index, style, data }: Props) {
+export default function ElementView({ data, index, style }: Props) {
   const {
     baseDepth,
     getElementAtIndex,
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 0809b7851b21..2c7d18f14ae1 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -13,13 +13,22 @@ import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
 import { BridgeContext } from '../context';
-import Element from './Element';
+import ElementView from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
 
 import styles from './Tree.css';
 
+import type { Element } from './types';
+
+export type ItemData = {|
+  baseDepth: number,
+  numElements: number,
+  getElementAtIndex: (index: number) => Element | null,
+  lastScrolledIDRef: { current: number | null },
+|};
+
 type Props = {||};
 
 export default function Tree(props: Props) {
@@ -34,7 +43,8 @@ export default function Tree(props: Props) {
     selectPreviousElementInTree,
   } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
-  const listRef = useRef<FixedSizeList<any> | null>(null);
+  // $FlowFixMe https://github.com/facebook/flow/issues/7341
+  const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
 
   const { lineHeight } = useContext(SettingsContext);
@@ -54,7 +64,7 @@ export default function Tree(props: Props) {
   // This ref is passed down the context to elements.
   // It lets them avoid autoscrolling to the same item many times
   // when a selected virtual row goes in and out of the viewport.
-  const lastScrolledIDRef = useRef(null);
+  const lastScrolledIDRef = useRef<number | null>(null);
 
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
@@ -104,7 +114,7 @@ export default function Tree(props: Props) {
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
-  const itemData = useMemo(
+  const itemData = useMemo<ItemData>(
     () => ({
       baseDepth,
       numElements,
@@ -127,6 +137,7 @@ export default function Tree(props: Props) {
       <div className={styles.AutoSizerWrapper} onMouseLeave={handleMouseLeave}>
         <AutoSizer>
           {({ height, width }) => (
+            // $FlowFixMe https://github.com/facebook/flow/issues/7341
             <FixedSizeList
               className={styles.List}
               height={height}
@@ -138,7 +149,7 @@ export default function Tree(props: Props) {
               ref={listRef}
               width={width}
             >
-              {Element}
+              {ElementView}
             </FixedSizeList>
           )}
         </AutoSizer>

From b3ba758798d4ffcf5fd777599c9c5538c2aa31d4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 10:40:46 -0700
Subject: [PATCH 272/814] Updated flow-bin

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index cfdf5851a600..68c3bc693e66 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
     "firefox-profile": "^1.0.2",
-    "flow-bin": "^0.94.0",
+    "flow-bin": "^0.96.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "html2canvas": "^1.0.0-alpha.12",
diff --git a/yarn.lock b/yarn.lock
index b92e1ee9d8b4..0f79da19d3ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4683,10 +4683,10 @@ flatstr@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3"
 
-flow-bin@^0.94.0:
-  version "0.94.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.94.0.tgz#b5d58fe7559705b73a18229f97edfc3ab6ffffcb"
-  integrity sha512-DYF7r9CJ/AksfmmB4+q+TyLMoeQPRnqtF1Pk7KY3zgfkB/nVuA3nXyzqgsIPIvnMSiFEXQcFK4z+iPxSLckZhQ==
+flow-bin@^0.96.0:
+  version "0.96.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.96.0.tgz#3b0379d97304dc1879ae6db627cd2d6819998661"
+  integrity sha512-OSxERs0EdhVxEVCst/HmlT/RcnXsQQIRqcfK9J9wC8/93JQj+xQz4RtlsmYe1PSRYaozuDLyPS5pIA81Zwzaww==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"

From ab89d6500fe873155d511eb3ae44bf35f867a9a4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 19:01:20 +0100
Subject: [PATCH 273/814] Fix missing key

---
 src/devtools/views/Components/OwnersStack.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index a9d789ac4a31..96a74c96fe54 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -122,6 +122,7 @@ function ElementsDropdown({
         <div className={styles.Modal} ref={modalRef}>
           {ownerStack.map((id, index) => (
             <button
+              key={id}
               className={
                 ownerStackIndex === index
                   ? styles.SelectedComponent

From 58ae3c63a803bab23c13628df96f4b70e7efe4e6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 11:41:25 -0700
Subject: [PATCH 274/814] Added export-log icon. Removed unnecessary variable
 assignment.

---
 src/devtools/views/ButtonIcon.js                 |  9 ++++++++-
 src/devtools/views/Components/SelectedElement.js | 14 ++++++--------
 src/devtools/views/Components/types.js           |  4 ++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index caf53a7549bd..7aa08b3c6c57 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -56,7 +56,7 @@ export default function ButtonIcon({ type }: Props) {
       pathData = PATH_IMPORT;
       break;
     case 'log-data':
-      pathData = PATH_EXPORT; // TODO: real icon
+      pathData = PATH_LOG_DATA;
       break;
     case 'more':
       pathData = PATH_MORE;
@@ -134,6 +134,13 @@ const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
 
 const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';
 
+const PATH_LOG_DATA = `
+  M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41
+  3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04
+  1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6
+  8h-4v-2h4v2zm0-4h-4v-2h4v2z
+`;
+
 const PATH_MORE = `
   M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 
   2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index d17e75616182..954b13f7455e 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -39,14 +39,13 @@ export default function SelectedElement(_: Props) {
   const inspectedElement = useInspectedElement(selectedElementID);
 
   const highlightElement = useCallback(() => {
-    const id = selectedElementID;
-    if (element !== null && id !== null) {
-      const rendererID = store.getRendererIDForElement(id);
+    if (element !== null && selectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(selectedElementID);
       if (rendererID !== null) {
         bridge.send('highlightElementInDOM', {
           displayName: element.displayName,
           hideAfterTimeout: true,
-          id,
+          id: selectedElementID,
           rendererID,
           scrollIntoView: true,
         });
@@ -55,12 +54,11 @@ export default function SelectedElement(_: Props) {
   }, [bridge, element, selectedElementID, store]);
 
   const logElement = useCallback(() => {
-    const id = selectedElementID;
-    if (id !== null) {
-      const rendererID = store.getRendererIDForElement(id);
+    if (selectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(selectedElementID);
       if (rendererID !== null) {
         bridge.send('logElementToConsole', {
-          id,
+          id: selectedElementID,
           rendererID,
         });
       }
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 5f231a61e9f6..fc71d5e9bba2 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -35,6 +35,8 @@ export type Owner = {|
 export type InspectedElement = {|
   id: number,
 
+  displayName: string | null,
+
   // Does the current renderer support editable hooks?
   canEditHooks: boolean,
 
@@ -58,8 +60,6 @@ export type InspectedElement = {|
 
   // Location of component in source coude.
   source: Object | null,
-
-  displayName: string | null,
 |};
 
 // TODO: Add profiling type

From e43cfa02396fa5fb00c2d23378811c1d0e54bb6b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 12:05:07 -0700
Subject: [PATCH 275/814] Don't re-measure owners stack sizes unnecessarily

---
 src/devtools/views/Components/OwnersStack.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 96a74c96fe54..e7cfcbb69d7f 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -28,7 +28,10 @@ export default function OwnerStack() {
   const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
 
   useLayoutEffect(() => {
-    if (elementsBarRef.current === null) {
+    // If we're already overflowing, then we don't need to re-measure items.
+    // That's because once the owners stack is open, it can only get larger (by driling in).
+    // A totally new stack can only be reached by exiting this mode and re-entering it.
+    if (elementsBarRef.current === null || isOverflowing) {
       return () => {};
     }
 
@@ -44,7 +47,7 @@ export default function OwnerStack() {
     }
 
     setElementsTotalWidth(elementsTotalWidth);
-  }, [elementsBarRef, ownerStack.length]);
+  }, [elementsBarRef, isOverflowing, ownerStack.length]);
 
   return (
     <div className={styles.OwnerStack}>

From 44ecff31e3b8d6963711dd375045e5deca068fc7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 12:20:45 -0700
Subject: [PATCH 276/814] Fixed an unpleasant interaction with owners modal
 "..." button

---
 src/devtools/views/hooks.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 933a8097ba5b..3b0c064ba0d1 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -101,9 +101,15 @@ export function useModalDismissSignal(
       }
     };
 
-    const handleMouseOrTouch = ({ target }: any) => {
+    const handleClick = (event: any) => {
       // $FlowFixMe
-      if (modalRef.current !== null && !modalRef.current.contains(target)) {
+      if (
+        modalRef.current !== null &&
+        !modalRef.current.contains(event.target)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+
         dismissCallback();
       }
     };
@@ -113,13 +119,11 @@ export function useModalDismissSignal(
     // and the root document might belong to a different window.
     const ownerDocument = modalRef.current.ownerDocument;
     ownerDocument.addEventListener('keydown', handleKeyDown);
-    ownerDocument.addEventListener('mousedown', handleMouseOrTouch);
-    ownerDocument.addEventListener('touchstart', handleMouseOrTouch);
+    ownerDocument.addEventListener('click', handleClick);
 
     return () => {
       ownerDocument.removeEventListener('keydown', handleKeyDown);
-      ownerDocument.removeEventListener('mousedown', handleMouseOrTouch);
-      ownerDocument.removeEventListener('touchstart', handleMouseOrTouch);
+      ownerDocument.removeEventListener('click', handleClick);
     };
   }, [modalRef, dismissCallback]);
 }

From 4a301bd0e0457542994d0064dfa7687dd9191be3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 20:41:01 +0100
Subject: [PATCH 277/814] Sync DevTools Elements and Components tabs

---
 shells/browser/shared/src/main.js | 36 +++++++++++++++++++++++++++++--
 src/backend/agent.js              | 23 ++++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index ab86699f1967..af02c900b2cd 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -162,10 +162,43 @@ function createPanelIfReactLoaded() {
         container._hasInitialHTMLBeenCleared = true;
       }
 
+      function maybeSetReactSelectionFromBrowser() {
+        // When the user chooses a different node in the browser Elements tab,
+        // copy it over to the hook object so that we can sync the selection.
+        chrome.devtools.inspectedWindow.eval(
+          // Don't reset selection if it didn't change in Elements tab.
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0)' +
+            '  ? (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true)' +
+            '  : false',
+          (didChangeSelection, error) => {
+            if (error) {
+              console.error(error);
+            } else if (didChangeSelection) {
+              bridge.send('syncSelectionFromBrowserTools');
+            }
+          }
+        );
+      }
+
+      function maybeSetBrowserSelectionFromReact() {
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 != null)' +
+            '  ? (inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true)' +
+            '  : false',
+          (didChangeSelection, error) => {
+            if (error) {
+              console.error(error);
+            }
+          }
+        );
+      }
+
       let currentPanel = null;
 
       chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
+          maybeSetReactSelectionFromBrowser();
+
           if (currentPanel === panel) {
             return;
           }
@@ -178,10 +211,9 @@ function createPanelIfReactLoaded() {
             render('components');
             panel.injectStyles(cloneStyleTags);
           }
-
-          // TODO: When the user switches to the panel, check for an Elements tab selection.
         });
         panel.onHidden.addListener(() => {
+          maybeSetBrowserSelectionFromReact();
           // TODO: Stop highlighting and stuff.
         });
       });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index c96b05b0aa27..3469d621a488 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -87,6 +87,10 @@ export default class Agent extends EventEmitter {
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('stopProfiling', this.stopProfiling);
+    bridge.addListener(
+      'syncSelectionFromBrowserTools',
+      this.syncSelectionFromBrowserTools
+    );
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
@@ -292,6 +296,14 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
+      // Update the active DOM node on the global hook object.
+      // The content script will read this to update window.$0
+      // when we switch tabs.
+      let node: HTMLElement | null = null;
+      node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
+      if (node !== null) {
+        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+      }
       this._bridge.send('selectElement', renderer.selectElement(id));
     }
   };
@@ -362,6 +374,17 @@ export default class Agent extends EventEmitter {
     }
   }
 
+  syncSelectionFromBrowserTools = () => {
+    const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
+    if (target == null) {
+      return;
+    }
+    const id = this.getIDForNode(target);
+    if (id !== null) {
+      this._bridge.send('selectFiber', id);
+    }
+  };
+
   shutdown = () => {
     this.emit('shutdown');
   };

From 5db5e40bf19c53dc8a44765f45da751703ab460d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 13:50:04 -0700
Subject: [PATCH 278/814] Replaced Agent setInterval with throttle+memoize

---
 src/backend/agent.js | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index a50598010aed..0bbd304869b3 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,6 +1,8 @@
 // @flow
 
 import EventEmitter from 'events';
+import memoize from 'memoize-one';
+import throttle from 'lodash.throttle';
 import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
@@ -49,9 +51,6 @@ export default class Agent extends EventEmitter {
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
 
-  _selectFiberInterval: null | IntervalID;
-  _lastInspectedNode: null | HTMLElement;
-
   constructor() {
     super();
 
@@ -384,10 +383,6 @@ export default class Agent extends EventEmitter {
     window.addEventListener('mousedown', this._onMouseDown, true);
     window.addEventListener('mouseup', this._onMouseUp, true);
     window.addEventListener('mouseover', this._onMouseOver, true);
-    this._selectFiberInterval = setInterval(
-      this._selectFiberForLastInspectedNode,
-      200
-    );
   };
 
   startProfiling = () => {
@@ -408,11 +403,6 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('mousedown', this._onMouseDown, true);
     window.removeEventListener('mouseup', this._onMouseUp, true);
     window.removeEventListener('mouseover', this._onMouseOver, true);
-
-    this._selectFiberForLastInspectedNode();
-    clearInterval(this._selectFiberInterval);
-    this._selectFiberInterval = null;
-    this._lastInspectedNode = null;
   };
 
   stopProfiling = () => {
@@ -475,8 +465,7 @@ export default class Agent extends EventEmitter {
     event.preventDefault();
     event.stopPropagation();
 
-    const target = ((event.target: any): HTMLElement);
-    this._lastInspectedNode = target;
+    this._selectFiberForNode(((event.target: any): HTMLElement));
   };
 
   // While we don't do anything here, this makes choosing
@@ -492,19 +481,21 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     const target = ((event.target: any): HTMLElement);
+
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
     showOverlay(target, null, false);
-    this._lastInspectedNode = target;
+
+    this._selectFiberForNode(target);
   };
 
-  _selectFiberForLastInspectedNode = () => {
-    const node = this._lastInspectedNode;
-    if (node !== null) {
+  _selectFiberForNode = throttle(
+    memoize((node: HTMLElement) => {
       const id = this.getIDForNode(node);
       if (id !== null) {
         this._bridge.send('selectFiber', id);
       }
-    }
-  };
+    }),
+    200
+  );
 }

From c91676b557438727cc0f13d462159f15cf9f908d Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 21:57:13 +0100
Subject: [PATCH 279/814] Don't change browser selection unless React selection
 changed

---
 shells/browser/shared/src/main.js | 20 +++++++++++++++++++-
 src/backend/agent.js              |  3 ++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index af02c900b2cd..36adb1db3729 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -85,6 +85,16 @@ function createPanelIfReactLoaded() {
           );
         });
 
+        // Remember if we should sync the browser DevTools to the React tab.
+        // We'll only do that if user intentionally chooses a different React component.
+        let lastSelectedID = null;
+        bridge.addListener('selectElement', ({ id }) => {
+          if (!hasReactSelectionChanged && lastSelectedID !== id) {
+            hasReactSelectionChanged = true;
+            lastSelectedID = id;
+          }
+        });
+
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
         // after a user has clicked the "reload and profile" button.
@@ -180,12 +190,20 @@ function createPanelIfReactLoaded() {
         );
       }
 
+      let hasReactSelectionChanged = false;
+
       function maybeSetBrowserSelectionFromReact() {
+        // Don't change the browser element selection when navigating away
+        // from the Components tab if the user didn't change the React selection.
+        if (!hasReactSelectionChanged) {
+          return;
+        }
+        hasReactSelectionChanged = false;
         chrome.devtools.inspectedWindow.eval(
           '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 != null)' +
             '  ? (inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true)' +
             '  : false',
-          (didChangeSelection, error) => {
+          (_, error) => {
             if (error) {
               console.error(error);
             }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 3469d621a488..dae3392b561d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -304,7 +304,8 @@ export default class Agent extends EventEmitter {
       if (node !== null) {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
       }
-      this._bridge.send('selectElement', renderer.selectElement(id));
+      renderer.selectElement(id);
+      this._bridge.send('selectElement', { id });
     }
   };
 

From 7aecd58d818de7fb3dde9122be25f9c7f44eeebe Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 23:28:31 +0100
Subject: [PATCH 280/814] Nits

---
 shells/browser/shared/src/main.js | 2 +-
 src/backend/agent.js              | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 36adb1db3729..d723c4cec288 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -184,7 +184,7 @@ function createPanelIfReactLoaded() {
             if (error) {
               console.error(error);
             } else if (didChangeSelection) {
-              bridge.send('syncSelectionFromBrowserTools');
+              bridge.send('syncSelectionFromNativeElementsPanel');
             }
           }
         );
diff --git a/src/backend/agent.js b/src/backend/agent.js
index dae3392b561d..b097578e901c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -88,8 +88,8 @@ export default class Agent extends EventEmitter {
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener(
-      'syncSelectionFromBrowserTools',
-      this.syncSelectionFromBrowserTools
+      'syncSelectionFromNativeElementsPanel',
+      this.syncSelectionFromNativeElementsPanel
     );
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener('viewElementSource', this.viewElementSource);
@@ -299,8 +299,7 @@ export default class Agent extends EventEmitter {
       // Update the active DOM node on the global hook object.
       // The content script will read this to update window.$0
       // when we switch tabs.
-      let node: HTMLElement | null = null;
-      node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
+      const node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
       if (node !== null) {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
       }
@@ -375,7 +374,7 @@ export default class Agent extends EventEmitter {
     }
   }
 
-  syncSelectionFromBrowserTools = () => {
+  syncSelectionFromNativeElementsPanel = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
     if (target == null) {
       return;

From 436912ab2d0bbc7be0fa1b41c0376e44a940bd94 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 23:35:01 +0100
Subject: [PATCH 281/814] Remove unnecessary logic

---
 shells/browser/shared/src/main.js | 8 ++------
 src/backend/agent.js              | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index d723c4cec288..261c94ccb050 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -87,12 +87,8 @@ function createPanelIfReactLoaded() {
 
         // Remember if we should sync the browser DevTools to the React tab.
         // We'll only do that if user intentionally chooses a different React component.
-        let lastSelectedID = null;
-        bridge.addListener('selectElement', ({ id }) => {
-          if (!hasReactSelectionChanged && lastSelectedID !== id) {
-            hasReactSelectionChanged = true;
-            lastSelectedID = id;
-          }
+        bridge.addListener('selectElement', () => {
+          hasReactSelectionChanged = true;
         });
 
         // This flag lets us tip the Store off early that we expect to be profiling.
diff --git a/src/backend/agent.js b/src/backend/agent.js
index b097578e901c..5c85cd4562da 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -304,7 +304,7 @@ export default class Agent extends EventEmitter {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
       }
       renderer.selectElement(id);
-      this._bridge.send('selectElement', { id });
+      this._bridge.send('selectElement');
     }
   };
 

From 3b793953b1ec26e69a2b3a537880b3af9992ccba Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 23:46:23 +0100
Subject: [PATCH 282/814] Keep DOM selection if last $0 resolves to same
 component

---
 src/backend/agent.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5c85cd4562da..c6d705524533 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -296,12 +296,19 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      // Update the active DOM node on the global hook object.
-      // The content script will read this to update window.$0
-      // when we switch tabs.
+      // When a different React component is selected, we want to store
+      // the active DOM node ($0) on the global hook so that content script
+      // can update the native elements panel to match it.
       const node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
       if (node !== null) {
-        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        // However, we don't want to do it if the current $0 node already
+        // belongs to this component. In this case we were probably inspecting
+        // a part of its host subtree, and changing $0 would be disuptive.
+        const prev$0 = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
+        const prev$0ID = this.getIDForNode(prev$0);
+        if (prev$0ID !== id) {
+          window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        }
       }
       renderer.selectElement(id);
       this._bridge.send('selectElement');

From 72eccb465d7f7b4659d002e2a8510423546f0928 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Tue, 9 Apr 2019 01:30:40 +0100
Subject: [PATCH 283/814] Make DOM selection binding one-way

---
 shells/browser/shared/src/main.js | 53 ++++++++++++-------------------
 src/backend/agent.js              | 19 +++--------
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 261c94ccb050..72cc6fcf4d2b 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -85,12 +85,6 @@ function createPanelIfReactLoaded() {
           );
         });
 
-        // Remember if we should sync the browser DevTools to the React tab.
-        // We'll only do that if user intentionally chooses a different React component.
-        bridge.addListener('selectElement', () => {
-          hasReactSelectionChanged = true;
-        });
-
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
         // after a user has clicked the "reload and profile" button.
@@ -168,51 +162,39 @@ function createPanelIfReactLoaded() {
         container._hasInitialHTMLBeenCleared = true;
       }
 
-      function maybeSetReactSelectionFromBrowser() {
+      function setReactSelectionFromBrowser() {
         // When the user chooses a different node in the browser Elements tab,
         // copy it over to the hook object so that we can sync the selection.
         chrome.devtools.inspectedWindow.eval(
-          // Don't reset selection if it didn't change in Elements tab.
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0)' +
-            '  ? (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true)' +
-            '  : false',
-          (didChangeSelection, error) => {
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, undefined)',
+          (_, error) => {
             if (error) {
               console.error(error);
-            } else if (didChangeSelection) {
+            } else {
               bridge.send('syncSelectionFromNativeElementsPanel');
             }
           }
         );
       }
 
-      let hasReactSelectionChanged = false;
-
-      function maybeSetBrowserSelectionFromReact() {
-        // Don't change the browser element selection when navigating away
-        // from the Components tab if the user didn't change the React selection.
-        if (!hasReactSelectionChanged) {
+      // When the user selects another item in the native Elements tab,
+      // select the corresponding React component.
+      let isListeningToNativeSelectionChange = false;
+      function ensureListeningToNativeSelectionChange() {
+        if (isListeningToNativeSelectionChange) {
           return;
         }
-        hasReactSelectionChanged = false;
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 != null)' +
-            '  ? (inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true)' +
-            '  : false',
-          (_, error) => {
-            if (error) {
-              console.error(error);
-            }
-          }
-        );
+        isListeningToNativeSelectionChange = true;
+        setReactSelectionFromBrowser();
+        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+          setReactSelectionFromBrowser();
+        });
       }
 
       let currentPanel = null;
 
       chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
-          maybeSetReactSelectionFromBrowser();
-
           if (currentPanel === panel) {
             return;
           }
@@ -225,9 +207,14 @@ function createPanelIfReactLoaded() {
             render('components');
             panel.injectStyles(cloneStyleTags);
           }
+
+          // Don't start listening to native selection change
+          // until *after* the panel is visible. Otherwise, we'll
+          // set the selected element too early and won't scroll
+          // to it the first time we open Components panel.
+          ensureListeningToNativeSelectionChange();
         });
         panel.onHidden.addListener(() => {
-          maybeSetBrowserSelectionFromReact();
           // TODO: Stop highlighting and stuff.
         });
       });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index c88b2daa5a93..3c1600bae038 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -308,22 +308,13 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      // When a different React component is selected, we want to store
-      // the active DOM node ($0) on the global hook so that content script
-      // can update the native elements panel to match it.
-      const node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
-      if (node !== null) {
-        // However, we don't want to do it if the current $0 node already
-        // belongs to this component. In this case we were probably inspecting
-        // a part of its host subtree, and changing $0 would be disuptive.
-        const prev$0 = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
-        const prev$0ID = this.getIDForNode(prev$0);
-        if (prev$0ID !== id) {
-          window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
-        }
-      }
       renderer.selectElement(id);
       this._bridge.send('selectElement');
+      // TODO: If there was a way to change the selected DOM element
+      // in native Elements tab without forcing a switch to it, we'd do it here.
+      // For now, it doesn't seem like there is a way to do that:
+      // https://github.com/bvaughn/react-devtools-experimental/issues/102
+      // (Setting $0 doesn't work, and calling inspect() switches the tab.)
     }
   };
 

From a2d84fa6138c81a551ea683288596d3e5b42162e Mon Sep 17 00:00:00 2001
From: Sophie Alpert <sophiebits@humu.com>
Date: Mon, 8 Apr 2019 18:26:30 -0700
Subject: [PATCH 284/814] pointer-events: none to fix flicker on Overlay "tip"

If click-to-inspect then hover an element in just the right place, it flickers between two elements because this "tip" element catches the hover. This should fix it.
---
 src/backend/views/Overlay.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 60d0cb8156f1..276055f83058 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -58,6 +58,7 @@ export default class Overlay {
         '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
       fontWeight: 'bold',
       padding: '3px 5px',
+      pointerEvents: 'none',
       position: 'fixed',
       fontSize: '12px',
     });

From ba994445154e9546645c0701b1666c4f0406cdcc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Apr 2019 18:34:48 -0700
Subject: [PATCH 285/814] Use @reach MenuButton for owner stack menu

---
 package.json                                  |   1 +
 src/devtools/views/Components/OwnersStack.css |  43 +++--
 src/devtools/views/Components/OwnersStack.js  |  69 +++-----
 src/devtools/views/DevTools.js                |   1 +
 yarn.lock                                     | 153 +++++++++++++++++-
 5 files changed, 204 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 68c3bc693e66..07019d599d85 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@reach/menu-button": "^0.1.9",
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index f7acd996126d..9ea1641bddbe 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -18,6 +18,7 @@
   cursor: pointer;
   text-align: left;
 }
+.Component[data-selected],
 .Component:hover {
   background-color: var(--color-hover-background);
 }
@@ -39,10 +40,6 @@
   flex: 1 0 auto;
 }
 
-.Toggle {
-  margin-right: 0.5rem;
-}
-
 .VRule {
   flex: 0 0 auto;
   height: 20px;
@@ -51,18 +48,46 @@
   margin: 0 0.5rem;
 }
 
-.Modal {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 2.5rem;
-  z-index: 1;
+.MenuButton {
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  margin-right: 0.5rem;
+}
+.MenuButton:hover {
+  background: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+.MenuButton[aria-expanded='true'],
+.MenuButton[aria-expanded='true']:active {
+  background: var(--color-button-background-focus);
+  color: var(--color-button-focus);
+  outline: none;
+}
+.MenuButton:focus-within {
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  outline: none;
+}
+
+.Modal[data-reach-menu-list] {
   display: inline-flex;
   flex-direction: column;
   background-color: var(--color-background);
+  color: var(--color-text-color);
   padding: 0.5rem;
   padding-right: 0;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
+
+  /* Reach UI tries to set its own :( */
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
 }
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index e7cfcbb69d7f..e459e1eee4ee 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -1,18 +1,17 @@
 // @flow
 import React, {
-  Fragment,
   useCallback,
   useContext,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
+import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
-import { useIsOverflowing, useModalDismissSignal } from '../hooks';
+import { useIsOverflowing } from '../hooks';
 
 import type { Element } from './types';
 
@@ -92,53 +91,27 @@ function ElementsDropdown({
   const store = useContext(StoreContext);
   const { selectOwner } = useContext(TreeContext);
 
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-
-  const handleDropdownButtonClick = useCallback(() => {
-    setIsDropdownVisible(!isDropdownVisible);
-  }, [isDropdownVisible, setIsDropdownVisible]);
-
-  const handleElementClick = useCallback(
-    (id: number) => {
-      selectOwner(id);
-      setIsDropdownVisible(false);
-    },
-    [selectOwner, setIsDropdownVisible]
-  );
-
-  const modalRef = useRef<HTMLDivElement | null>(null);
-  const dismissModal = useCallback(() => setIsDropdownVisible(false));
-
-  useModalDismissSignal(modalRef, dismissModal);
-
   return (
-    <Fragment>
-      <Toggle
-        className={styles.Toggle}
-        isChecked={isDropdownVisible}
-        onChange={handleDropdownButtonClick}
-        title="Open elements dropdown"
-      >
+    <Menu>
+      <MenuButton className={styles.MenuButton} title="Open elements dropdown">
         <ButtonIcon type="more" />
-      </Toggle>
-      {isDropdownVisible && (
-        <div className={styles.Modal} ref={modalRef}>
-          {ownerStack.map((id, index) => (
-            <button
-              key={id}
-              className={
-                ownerStackIndex === index
-                  ? styles.SelectedComponent
-                  : styles.Component
-              }
-              onClick={() => handleElementClick(id)}
-            >
-              {((store.getElementByID(id): any): Element).displayName}
-            </button>
-          ))}
-        </div>
-      )}
-    </Fragment>
+      </MenuButton>
+      <MenuList className={styles.Modal}>
+        {ownerStack.map((id, index) => (
+          <MenuItem
+            key={id}
+            className={
+              ownerStackIndex === index
+                ? styles.SelectedComponent
+                : styles.Component
+            }
+            onSelect={() => selectOwner(id)}
+          >
+            {((store.getElementByID(id): any): Element).displayName}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
   );
 }
 
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index e5cad6eb9e50..0a3225f5fee5 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -14,6 +14,7 @@ import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
 
+import '@reach/menu-button/styles.css';
 import './root.css';
 
 import type { Bridge } from '../../types';
diff --git a/yarn.lock b/yarn.lock
index 0f79da19d3ec..71cb56e316c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -745,6 +745,67 @@
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@reach/component-component@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
+  integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
+
+"@reach/menu-button@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.9.tgz#d5957f69efa51d29beb4239403eabf49f9a4bb3e"
+  integrity sha512-894lhzcCpaGJKvmCuUX8AJ7xg0Ov/xRKKR5RRVJUroHYuWNuvgZSluO657Y2fNaMKgG0LPqLrtOGUq2CN0golg==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+    "@reach/portal" "^0.1.3"
+    "@reach/rect" "^0.2.0"
+    "@reach/router" "^1.1.0"
+    "@reach/utils" "^0.2.0"
+    "@reach/window-size" "^0.1.3"
+    warning "^4.0.2"
+
+"@reach/observe-rect@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
+  integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
+
+"@reach/portal@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.1.3.tgz#31d820f31bbab73570d5b5a449e2b0fa6457802f"
+  integrity sha512-yDcu5XZWfWKmKvbOs/uS7vITPVFXmn+XY5V6YcGhlz20KgwG+aJX2c7yvYzO++Zr0qvmtQCmxA4EGEciqIys6g==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+
+"@reach/rect@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.0.tgz#3e8dd4e2188294228ea223223a956885a8a33472"
+  integrity sha512-/C0r28VC/0dJ7ehKqkiebU7WvyiqXw5ViWC4KUWQRVTwauLENmslJ3jgEDUQZn6M3Ko63owaMZ2/rAivFfpIGQ==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+    "@reach/observe-rect" "^1.0.3"
+
+"@reach/router@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
+  integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
+  dependencies:
+    create-react-context "^0.2.1"
+    invariant "^2.2.3"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    warning "^3.0.0"
+
+"@reach/utils@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
+  integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
+
+"@reach/window-size@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
+  integrity sha512-XU/PdGZ9GoRHUkIqIEcARIKWvfEDYCR/b2/Yubo+acKXJQ2I/YkQJdpILdIhNqF93nGa4zIAHrRHXkXdW11Xyg==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -3177,6 +3238,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn-async@^2.2.2:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
@@ -3739,6 +3808,13 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -4487,6 +4563,19 @@ fbjs@0.5.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
+fbjs@^0.8.0:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -5169,6 +5258,11 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gulp-util@^3.0.4:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -5469,7 +5563,7 @@ iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
-iconv-lite@^0.4.17, iconv-lite@^0.4.4:
+iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5642,7 +5736,7 @@ invariant@^2.2.0:
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.2:
+invariant@^2.2.2, invariant@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5967,7 +6061,7 @@ is-retry-allowed@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
   integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
 
-is-stream@^1.0.0, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6041,6 +6135,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7597,6 +7699,14 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-firefox-connect@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/node-firefox-connect/-/node-firefox-connect-1.2.0.tgz#42403848313240c98514ef14b3302816fe3b84e1"
@@ -8467,7 +8577,14 @@ promise@^7.0.3:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2:
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8674,6 +8791,11 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-portal@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
@@ -9375,7 +9497,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -10369,7 +10491,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-ua-parser-js@^0.7.9:
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
   integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
@@ -10646,6 +10768,20 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
@@ -10781,6 +10917,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
 whatwg-fetch@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"

From db629fa0734b51ff96bb31faf4edc11a9addedb7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 08:30:24 -0700
Subject: [PATCH 286/814] Updated OwnersStack CSS to properly override React
 styles

---
 src/devtools/views/Components/OwnersStack.css | 15 +++++++++++----
 src/devtools/views/Components/OwnersStack.js  |  6 +-----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 9ea1641bddbe..cf657f27574b 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -6,6 +6,7 @@
 }
 
 .Component,
+.Component[data-reach-menu-item],
 .SelectedComponent {
   padding: 0.25rem;
   margin-right: 0.5rem;
@@ -18,19 +19,25 @@
   cursor: pointer;
   text-align: left;
 }
-.Component[data-selected],
-.Component:hover {
+
+.Component:hover,
+.Component[data-reach-menu-item]:hover {
   background-color: var(--color-hover-background);
 }
-.Component:focus {
+.Component:focus,
+.Component[data-reach-menu-item]:focus {
   outline: none;
   background-color: var(--color-hover-background);
 }
 
-.SelectedComponent {
+.Component[data-reach-menu-item][data-selected],
+.Component[data-reach-menu-item][data-selected]:hover,
+.SelectedComponent,
+.SelectedComponent:hover {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.Component[data-reach-menu-item][data-selected]:focus,
 .SelectedComponent:focus {
   outline: none;
 }
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index e459e1eee4ee..983d8e502a50 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -100,11 +100,7 @@ function ElementsDropdown({
         {ownerStack.map((id, index) => (
           <MenuItem
             key={id}
-            className={
-              ownerStackIndex === index
-                ? styles.SelectedComponent
-                : styles.Component
-            }
+            className={styles.Component}
             onSelect={() => selectOwner(id)}
           >
             {((store.getElementByID(id): any): Element).displayName}

From 163bc234df9b4d5f711ed3b8a34a2a020b153747 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 08:36:54 -0700
Subject: [PATCH 287/814] Disable text selection for OwnersStack buttons

---
 src/devtools/views/Components/OwnersStack.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index cf657f27574b..9b85fec60a84 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -18,6 +18,7 @@
   background: none;
   cursor: pointer;
   text-align: left;
+  user-select: none;
 }
 
 .Component:hover,

From a29ab9ab795f4962fc72f01ab85d9307f61a0808 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 08:37:34 -0700
Subject: [PATCH 288/814] Tree arrow navigation respects event.defaultPrevented
 This prevents Reach MenuButton operations from also changing the tree
 selection in the background

---
 src/devtools/views/Components/Tree.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 2c7d18f14ae1..42df5111c401 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -73,7 +73,7 @@ export default function Tree(props: Props) {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event: any).target.tagName === 'INPUT') {
+      if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
         return;
       }
 

From dbf6942512afd314981589b3b5df39766288b55f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 08:54:43 -0700
Subject: [PATCH 289/814] Added (local) fork of @reach/portal to unblock
 OwnersStack MenuButton PR

---
 .eslintignore                                 |  1 +
 .prettierignore                               |  1 +
 package.json                                  |  4 +-
 vendor/@reach/portal/.eslintignore            |  1 +
 vendor/@reach/portal/es/index.js              | 44 +++++++++++++++
 .../@reach/portal/examples/basic.example.js   | 35 ++++++++++++
 vendor/@reach/portal/index.js                 | 56 +++++++++++++++++++
 vendor/@reach/portal/package.json             | 28 ++++++++++
 vendor/@reach/portal/src/index.js             | 30 ++++++++++
 yarn.lock                                     | 13 +----
 10 files changed, 201 insertions(+), 12 deletions(-)
 create mode 100644 vendor/@reach/portal/.eslintignore
 create mode 100644 vendor/@reach/portal/es/index.js
 create mode 100644 vendor/@reach/portal/examples/basic.example.js
 create mode 100644 vendor/@reach/portal/index.js
 create mode 100644 vendor/@reach/portal/package.json
 create mode 100644 vendor/@reach/portal/src/index.js

diff --git a/.eslintignore b/.eslintignore
index c21ee38faa5d..640e359715bd 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,6 +3,7 @@ node_modules
 shells/browser/chrome/build
 shells/browser/firefox/build
 shells/dev/build
+vendor
 
 package-lock.json
 yarn.lock
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index c21ee38faa5d..640e359715bd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@ node_modules
 shells/browser/chrome/build
 shells/browser/firefox/build
 shells/dev/build
+vendor
 
 package-lock.json
 yarn.lock
\ No newline at end of file
diff --git a/package.json b/package.json
index 07019d599d85..970f1f99d54c 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,9 @@
     ],
     "**/*.js": "eslint --max-warnings 0"
   },
+  "resolutions": {
+    "@reach/portal": "file:./vendor/@reach/portal"
+  },
   "dependencies": {
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -100,7 +103,6 @@
     "react-color": "^2.11.7",
     "react-dom": "^16.8.4",
     "react-is": "^16.8.4",
-    "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.5.1",
     "scheduler": "^0.13",
diff --git a/vendor/@reach/portal/.eslintignore b/vendor/@reach/portal/.eslintignore
new file mode 100644
index 000000000000..945ce43a909d
--- /dev/null
+++ b/vendor/@reach/portal/.eslintignore
@@ -0,0 +1 @@
+index.js
\ No newline at end of file
diff --git a/vendor/@reach/portal/es/index.js b/vendor/@reach/portal/es/index.js
new file mode 100644
index 000000000000..b08b2dce7382
--- /dev/null
+++ b/vendor/@reach/portal/es/index.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import Component from "@reach/component-component";
+
+var Portal = function Portal(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === undefined ? "reach-portal" : _ref$type;
+  return React.createElement(Component, {
+    getRefs: function getRefs() {
+      return { mountNode: null, portalNode: null };
+    },
+    didMount: function didMount(_ref2) {
+      var refs = _ref2.refs,
+          forceUpdate = _ref2.forceUpdate;
+
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      var ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
+      forceUpdate();
+    },
+    willUnmount: function willUnmount(_ref3) {
+      var portalNode = _ref3.refs.portalNode;
+
+      portalNode.ownerDocument.body.removeChild(portalNode);
+    },
+    render: function render(_ref4) {
+      var refs = _ref4.refs;
+      var portalNode = refs.portalNode;
+
+      if (!portalNode) {
+        return React.createElement("div", { ref: function ref(div) {
+            return refs.mountNode = div;
+          } });
+      } else {
+        return createPortal(children, portalNode);
+      }
+    }
+  });
+};
+
+export default Portal;
\ No newline at end of file
diff --git a/vendor/@reach/portal/examples/basic.example.js b/vendor/@reach/portal/examples/basic.example.js
new file mode 100644
index 000000000000..5f2e8c2e3b2b
--- /dev/null
+++ b/vendor/@reach/portal/examples/basic.example.js
@@ -0,0 +1,35 @@
+import React from "react";
+import Portal from "../src/index";
+
+export let name = "Basic";
+
+export let Example = () => (
+  <div
+    style={{
+      height: 40,
+      overflow: "auto"
+    }}
+  >
+    <div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}>
+      This is in the normal react root, with an overflow hidden parent, clips
+      the box.
+    </div>
+    <Portal>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 20,
+          width: 100,
+          border: "solid 5px",
+          padding: 20,
+          background: "#f0f0f0"
+        }}
+      >
+        This is in the portal, rendered in the DOM at the document root so the
+        CSS doesn't screw things up, but we render it in the react hierarchy
+        where it makes sense.
+      </div>
+    </Portal>
+  </div>
+);
diff --git a/vendor/@reach/portal/index.js b/vendor/@reach/portal/index.js
new file mode 100644
index 000000000000..738c274b0fb4
--- /dev/null
+++ b/vendor/@reach/portal/index.js
@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require("react-dom");
+
+var _componentComponent = require("@reach/component-component");
+
+var _componentComponent2 = _interopRequireDefault(_componentComponent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Portal = function Portal(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === undefined ? "reach-portal" : _ref$type;
+  return _react2.default.createElement(_componentComponent2.default, {
+    getRefs: function getRefs() {
+      return { mountNode: null, portalNode: null };
+    },
+    didMount: function didMount(_ref2) {
+      var refs = _ref2.refs,
+          forceUpdate = _ref2.forceUpdate;
+
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      var ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
+      forceUpdate();
+    },
+    willUnmount: function willUnmount(_ref3) {
+      var portalNode = _ref3.refs.portalNode;
+
+      portalNode.ownerDocument.body.removeChild(portalNode);
+    },
+    render: function render(_ref4) {
+      var refs = _ref4.refs;
+      var portalNode = refs.portalNode;
+
+      if (!portalNode) {
+        return _react2.default.createElement("div", { ref: function ref(div) {
+            return refs.mountNode = div;
+          } });
+      } else {
+        return (0, _reactDom.createPortal)(children, portalNode);
+      }
+    }
+  });
+};
+
+exports.default = Portal;
\ No newline at end of file
diff --git a/vendor/@reach/portal/package.json b/vendor/@reach/portal/package.json
new file mode 100644
index 000000000000..3641c4c70e2f
--- /dev/null
+++ b/vendor/@reach/portal/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@reach/portal",
+  "version": "0.1.3",
+  "description": "Declarative portals for React",
+  "main": "index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "test": "echo \"Write some tests you bum!\"",
+    "build": "node ../../shared/build-package",
+    "lint": "eslint . --max-warnings=0"
+  },
+  "dependencies": {
+    "@reach/component-component": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0"
+  },
+  "author": "",
+  "license": "MIT",
+  "files": [
+    "es",
+    "src",
+    "lib",
+    "index.js",
+    "styles.css"
+  ]
+}
diff --git a/vendor/@reach/portal/src/index.js b/vendor/@reach/portal/src/index.js
new file mode 100644
index 000000000000..6b569d5737d0
--- /dev/null
+++ b/vendor/@reach/portal/src/index.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import Component from "@reach/component-component";
+
+let Portal = ({ children, type = "reach-portal" }) => (
+  <Component
+    getRefs={() => ({ mountNode: null, portalNode: null })}
+    didMount={({ refs, forceUpdate }) => {
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      const ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
+      forceUpdate();
+    }}
+    willUnmount={({ refs: { portalNode } }) => {
+      portalNode.ownerDocument.body.removeChild(portalNode);
+    }}
+    render={({ refs }) => {
+      const { portalNode } = refs;
+      if (!portalNode) {
+        return <div ref={div => (refs.mountNode = div)} />;
+      } else {
+        return createPortal(children, portalNode);
+      }
+    }}
+  />
+);
+
+export default Portal;
diff --git a/yarn.lock b/yarn.lock
index 71cb56e316c4..25a54310d85c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -768,10 +768,8 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
   integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
 
-"@reach/portal@^0.1.3":
+"@reach/portal@^0.1.3", "@reach/portal@file:./vendor/@reach/portal":
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.1.3.tgz#31d820f31bbab73570d5b5a449e2b0fa6457802f"
-  integrity sha512-yDcu5XZWfWKmKvbOs/uS7vITPVFXmn+XY5V6YcGhlz20KgwG+aJX2c7yvYzO++Zr0qvmtQCmxA4EGEciqIys6g==
   dependencies:
     "@reach/component-component" "^0.1.3"
 
@@ -8584,7 +8582,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8796,13 +8794,6 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-portal@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
-  integrity sha512-avb1FreAZAVCvNNyS2dCpxZiPYPJnAasHYPxdVBTROgNFeI+KSb+OoMHNsC1GbDawESCriPwCX+qKua6WSPIFw==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"

From d6bd3dc503d867d52c9292882deba6e08f334100 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 10:18:04 -0700
Subject: [PATCH 290/814] Fixed owner stack size calculation bug that sometimes
 caused bad overflow

---
 src/devtools/views/Components/OwnersStack.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 9b85fec60a84..d49a03f7f87c 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -1,4 +1,6 @@
 .OwnerStack {
+  max-width: 100%;
+  overflow-x: auto;
   flex: 1;
   display: flex;
   align-items: center;
@@ -19,6 +21,9 @@
   cursor: pointer;
   text-align: left;
   user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .Component:hover,
@@ -45,7 +50,8 @@
 
 .Bar {
   display: flex;
-  flex: 1 0 auto;
+  flex: 0 1 auto;
+  overflow-x: auto;
 }
 
 .VRule {

From 49f6a22b5b8a1b7d5e2a774262357e2992ad0ca0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 10:58:43 -0700
Subject: [PATCH 291/814] Remember max Tree width as new nested items are
 rendered

---
 src/devtools/views/Components/Tree.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 42df5111c401..5bb94c77f730 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -161,6 +161,7 @@ export default function Tree(props: Props) {
 function InnerElementType({ style, ...rest }) {
   const {
     numElements,
+    ownerStack,
     selectedElementID,
     selectedElementIndex,
     selectElementAtIndex,
@@ -189,6 +190,25 @@ function InnerElementType({ style, ...rest }) {
     [selectedElementID, selectOwner]
   );
 
+  // The list may need to scroll horizontally due to deeply nested elements.
+  // We don't know the maximum scroll width up front, because we're windowing.
+  // What we can do instead, is passively measure the width of the current rows,
+  // and ensure that once we've grown to a new max size, we don't shrink below it.
+  // This improves the user experience when scrolling between wide and narrow rows.
+  // We shouldn't retain this width across different conceptual trees though,
+  // so when the user opens the "owners tree" view, we should discard the previous width.
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const minWidthRef = useRef<number>(parseInt(style.width, 10));
+  const minWidth = ownerStack.length > 0 ? '100%' : minWidthRef.current;
+  useEffect(() => {
+    if (divRef.current !== null) {
+      minWidthRef.current = Math.max(
+        minWidthRef.current,
+        divRef.current.offsetWidth
+      );
+    }
+  });
+
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
@@ -201,9 +221,10 @@ function InnerElementType({ style, ...rest }) {
       style={{
         ...style,
         display: 'inline-block',
-        minWidth: '100%',
+        minWidth,
         width: undefined,
       }}
+      ref={divRef}
       tabIndex={0}
       {...rest}
     />

From 1cc219009a4a176a9e9f3673b535d9bf080c33a1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 11:12:39 -0700
Subject: [PATCH 292/814] Tweaked owners stack CSS to fix another overflow
 issue

---
 src/devtools/views/Components/OwnersStack.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index d49a03f7f87c..bfe407fa648f 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -22,8 +22,6 @@
   text-align: left;
   user-select: none;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .Component:hover,
@@ -50,7 +48,7 @@
 
 .Bar {
   display: flex;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   overflow-x: auto;
 }
 

From edc598e62a97b4858ecbc8cf4e2b72add8e366fb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 11:43:49 -0700
Subject: [PATCH 293/814] Fixed Tree minWidth initial case to fill 100% width

---
 src/devtools/views/Components/Tree.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 5bb94c77f730..b97ff5a9cf52 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -198,12 +198,15 @@ function InnerElementType({ style, ...rest }) {
   // We shouldn't retain this width across different conceptual trees though,
   // so when the user opens the "owners tree" view, we should discard the previous width.
   const divRef = useRef<HTMLDivElement | null>(null);
-  const minWidthRef = useRef<number>(parseInt(style.width, 10));
-  const minWidth = ownerStack.length > 0 ? '100%' : minWidthRef.current;
+  const minWidthRef = useRef<number | null>(null);
+  const minWidth =
+    ownerStack.length > 0 || minWidthRef.current === null
+      ? '100%'
+      : minWidthRef.current;
   useEffect(() => {
     if (divRef.current !== null) {
       minWidthRef.current = Math.max(
-        minWidthRef.current,
+        minWidthRef.current || 0,
         divRef.current.offsetWidth
       );
     }

From 43bb821f601b345cbd51dd4f225b7237c251ca84 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Apr 2019 20:04:33 +0100
Subject: [PATCH 294/814] Send the bridge sync event lazily

---
 shells/browser/shared/src/main.js | 38 +++++++++++++------------------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 72cc6fcf4d2b..0ed5fa04d4d5 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -166,35 +166,35 @@ function createPanelIfReactLoaded() {
         // When the user chooses a different node in the browser Elements tab,
         // copy it over to the hook object so that we can sync the selection.
         chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, undefined)',
-          (_, error) => {
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+            'false',
+          (didSelectionChange, error) => {
             if (error) {
               console.error(error);
-            } else {
-              bridge.send('syncSelectionFromNativeElementsPanel');
+            } else if (didSelectionChange) {
+              // Remember to sync the selection next time we show Components tab.
+              needsToSyncElementSelection = true;
             }
           }
         );
       }
 
-      // When the user selects another item in the native Elements tab,
-      // select the corresponding React component.
-      let isListeningToNativeSelectionChange = false;
-      function ensureListeningToNativeSelectionChange() {
-        if (isListeningToNativeSelectionChange) {
-          return;
-        }
-        isListeningToNativeSelectionChange = true;
+      setReactSelectionFromBrowser();
+      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
         setReactSelectionFromBrowser();
-        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
-          setReactSelectionFromBrowser();
-        });
-      }
+      });
 
       let currentPanel = null;
+      let needsToSyncElementSelection = false;
 
       chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
         panel.onShown.addListener(panel => {
+          if (needsToSyncElementSelection) {
+            needsToSyncElementSelection = false;
+            bridge.send('syncSelectionFromNativeElementsPanel');
+          }
+
           if (currentPanel === panel) {
             return;
           }
@@ -207,12 +207,6 @@ function createPanelIfReactLoaded() {
             render('components');
             panel.injectStyles(cloneStyleTags);
           }
-
-          // Don't start listening to native selection change
-          // until *after* the panel is visible. Otherwise, we'll
-          // set the selected element too early and won't scroll
-          // to it the first time we open Components panel.
-          ensureListeningToNativeSelectionChange();
         });
         panel.onHidden.addListener(() => {
           // TODO: Stop highlighting and stuff.

From 26106a4b9de506d9cd08c11070d7327acd5d094c Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Tue, 9 Apr 2019 15:39:47 -0300
Subject: [PATCH 295/814] Add check for inactive window on selected element

---
 src/devtools/views/Components/Element.css     |  6 +++-
 src/devtools/views/Components/Element.js      | 36 ++++++++++++++++++-
 .../views/Settings/SettingsContext.js         |  1 +
 src/devtools/views/root.css                   |  2 ++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 4f1748c9c1ac..5a0c9c210cff 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -1,5 +1,6 @@
 .Element,
-.SelectedElement {
+.SelectedElement,
+.InactiveElement {
   border-radius: 0.25em;
   white-space: nowrap;
   line-height: var(--line-height-data);
@@ -11,6 +12,9 @@
 .Element:hover {
   background-color: var(--color-hover-background);
 }
+.InactiveElement {
+  background-color: var(--color-inactive-background);
+}
 
 .SelectedElement {
   background-color: var(--color-selected-background);
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 01f983c21795..8de6eb63dc98 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -2,8 +2,10 @@
 
 import React, {
   Fragment,
+  useState,
   useCallback,
   useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -35,6 +37,8 @@ export default function ElementView({ data, index, style }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const [windowFocused, setWindowFocused] = useState<boolean>(true);
+
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
@@ -49,6 +53,30 @@ export default function ElementView({ data, index, style }: Props) {
 
   const ref = useRef<HTMLSpanElement | null>(null);
 
+  useEffect(() => {
+    if (ref.current === null || !isSelected) {
+      return () => {};
+    }
+
+    const handleFocus = () => {
+      setWindowFocused(true);
+    };
+
+    const handleBlur = () => {
+      setWindowFocused(false);
+    };
+
+    const ownerDocument = ref.current.ownerDocument.defaultView;
+
+    ownerDocument.addEventListener('focus', handleFocus);
+    ownerDocument.addEventListener('blur', handleBlur);
+
+    return () => {
+      ownerDocument.removeEventListener('focus', handleFocus);
+      ownerDocument.removeEventListener('blur', handleBlur);
+    };
+  }, [isSelected]);
+
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
   // might be too far left or right on the screen. Adjust it in this case.
@@ -118,7 +146,13 @@ export default function ElementView({ data, index, style }: Props) {
 
   return (
     <div
-      className={isSelected ? styles.SelectedElement : styles.Element}
+      className={
+        isSelected && windowFocused
+          ? styles.SelectedElement
+          : isSelected
+          ? styles.InactiveElement
+          : styles.Element
+      }
       onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index d6f3ba4a9a91..44244f38df7e 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -223,6 +223,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-hover-background', documentElements);
+  updateStyleHelper(theme, 'color-inactive-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index c2b2432145d7..884ff3e0d4d0 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -34,6 +34,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-hover-background: #ebf1fb;
+  --light-color-inactive-background: #ccc;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -78,6 +79,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-hover-background: #3d424a;
+  --dark-color-inactive-background: #44474c;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From 1c57ca0a1c00705a679e26bc6950d2bf28ec9e82 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Tue, 9 Apr 2019 18:58:10 -0300
Subject: [PATCH 296/814] Use focus state from elements tree instead of
 ownerDocument

---
 src/devtools/views/Components/Element.js | 31 ++-----------------
 src/devtools/views/Components/Tree.js    | 38 ++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 8de6eb63dc98..22b8d04e0514 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -2,10 +2,8 @@
 
 import React, {
   Fragment,
-  useState,
   useCallback,
   useContext,
-  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -37,13 +35,12 @@ export default function ElementView({ data, index, style }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const [windowFocused, setWindowFocused] = useState<boolean>(true);
-
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
   const lastScrolledIDRef = data.lastScrolledIDRef;
+  const treeFocused = data.treeFocused;
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
@@ -53,30 +50,6 @@ export default function ElementView({ data, index, style }: Props) {
 
   const ref = useRef<HTMLSpanElement | null>(null);
 
-  useEffect(() => {
-    if (ref.current === null || !isSelected) {
-      return () => {};
-    }
-
-    const handleFocus = () => {
-      setWindowFocused(true);
-    };
-
-    const handleBlur = () => {
-      setWindowFocused(false);
-    };
-
-    const ownerDocument = ref.current.ownerDocument.defaultView;
-
-    ownerDocument.addEventListener('focus', handleFocus);
-    ownerDocument.addEventListener('blur', handleBlur);
-
-    return () => {
-      ownerDocument.removeEventListener('focus', handleFocus);
-      ownerDocument.removeEventListener('blur', handleBlur);
-    };
-  }, [isSelected]);
-
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
   // might be too far left or right on the screen. Adjust it in this case.
@@ -147,7 +120,7 @@ export default function ElementView({ data, index, style }: Props) {
   return (
     <div
       className={
-        isSelected && windowFocused
+        isSelected && treeFocused
           ? styles.SelectedElement
           : isSelected
           ? styles.InactiveElement
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index b97ff5a9cf52..a4f1b1797f0d 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  useState,
   useCallback,
   useContext,
   useEffect,
@@ -27,6 +28,7 @@ export type ItemData = {|
   numElements: number,
   getElementAtIndex: (index: number) => Element | null,
   lastScrolledIDRef: { current: number | null },
+  treeFocused: boolean,
 |};
 
 type Props = {||};
@@ -46,6 +48,9 @@ export default function Tree(props: Props) {
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
+  const elementsRef = useRef<HTMLDivElement | null>(null);
+
+  const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
   const { lineHeight } = useContext(SettingsContext);
 
@@ -112,6 +117,30 @@ export default function Tree(props: Props) {
     selectPreviousElementInTree,
   ]);
 
+  useEffect(() => {
+    if (elementsRef.current === null) {
+      return () => {};
+    }
+
+    const handleFocusIn = () => {
+      setTreeFocused(true);
+    };
+
+    const handleFocusOut = () => {
+      setTreeFocused(false);
+    };
+
+    const elementsElement = elementsRef.current;
+
+    elementsElement.addEventListener('focusin', handleFocusIn);
+    elementsElement.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      elementsElement.removeEventListener('focusin', handleFocusIn);
+      elementsElement.removeEventListener('focusout', handleFocusOut);
+    };
+  }, []);
+
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
@@ -120,8 +149,9 @@ export default function Tree(props: Props) {
       numElements,
       getElementAtIndex,
       lastScrolledIDRef,
+      treeFocused,
     }),
-    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]
+    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef, treeFocused]
   );
 
   const handleMouseLeave = useCallback(() => {
@@ -134,7 +164,11 @@ export default function Tree(props: Props) {
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
       </div>
-      <div className={styles.AutoSizerWrapper} onMouseLeave={handleMouseLeave}>
+      <div
+        className={styles.AutoSizerWrapper}
+        onMouseLeave={handleMouseLeave}
+        ref={elementsRef}
+      >
         <AutoSizer>
           {({ height, width }) => (
             // $FlowFixMe https://github.com/facebook/flow/issues/7341

From 6d222080ad3acbbf43c0484adef0fc7a99238b18 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:13:11 -0700
Subject: [PATCH 297/814] Format logElementToConsole() slightly

---
 src/backend/renderer.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 0607b7c2ad75..cccc27779a83 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1570,11 +1570,12 @@ export function attach(
     }
 
     const supportsGroup = typeof console.groupCollapsed === 'function';
-    const label =
-      '[Click to expand] <' + (result.displayName || 'Component') + ' />';
-
     if (supportsGroup) {
-      console.groupCollapsed(label);
+      console.groupCollapsed(
+        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
+        'color: var(--dom-tag-name-color); font-weight: normal;'
+      );
     }
     if (result.props !== null) {
       console.log('Props:', result.props);

From 84478a41ffa1ba978797a5c4f6910e004905391c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 14:25:58 +0100
Subject: [PATCH 298/814] Put DevTools in dev shell above the inspector

---
 shells/dev/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shells/dev/index.html b/shells/dev/index.html
index 2b031d0d70bf..842137bc2399 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -13,6 +13,7 @@
         height: 400px;
         max-height: 50%;
         overflow: hidden;
+        z-index: 10000001;
       }
       body {
         display: flex;

From 75a4312d87df15e0c8176a47d553c29ba6d6d534 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 14:40:41 +0100
Subject: [PATCH 299/814] Add missing Button titles

---
 src/devtools/views/Button.js                          | 1 +
 src/devtools/views/Components/HooksTree.js            | 2 +-
 src/devtools/views/Components/InspectedElementTree.js | 2 +-
 src/devtools/views/Profiler/SnapshotSelector.js       | 2 ++
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index 398ec23284d8..b3e016fb072b 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -6,6 +6,7 @@ import styles from './Button.css';
 
 type Props = {
   className?: string,
+  title: string,
 };
 
 export default function Button({ className, ...rest }: Props) {
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 993760696c88..f89bd93cbcac 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -31,7 +31,7 @@ export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          <Button onClick={handleCopy}>
+          <Button onClick={handleCopy} title="Copy to clipboard">
             <ButtonIcon type="copy" />
           </Button>
         </div>
diff --git a/src/devtools/views/Components/InspectedElementTree.js b/src/devtools/views/Components/InspectedElementTree.js
index 727760cd6b4d..aeab263fce69 100644
--- a/src/devtools/views/Components/InspectedElementTree.js
+++ b/src/devtools/views/Components/InspectedElementTree.js
@@ -38,7 +38,7 @@ export default function InspectedElementTree({
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>{label}</div>
           {!isEmpty && (
-            <Button onClick={handleCopy}>
+            <Button onClick={handleCopy} title="Copy to clipboard">
               <ButtonIcon type="copy" />
             </Button>
           )}
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index 537b7155171a..f609d2cdcf81 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -123,6 +123,7 @@ export default function SnapshotSelector(_: Props) {
         className={styles.Button}
         disabled={selectedFilteredCommitIndex === 0 || numFilteredCommits === 0}
         onClick={viewPrevCommit}
+        title="Select previous commit"
       >
         <ButtonIcon type="previous" />
       </Button>
@@ -159,6 +160,7 @@ export default function SnapshotSelector(_: Props) {
           selectedFilteredCommitIndex >= numFilteredCommits - 1
         }
         onClick={viewNextCommit}
+        title="Select next commit"
       >
         <ButtonIcon type="next" />
       </Button>

From 07299828c9e0d9050e6a8c63ed129b16a4d4bf0d Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Tue, 9 Apr 2019 00:06:13 +0100
Subject: [PATCH 300/814] Pressing next forces search to select

---
 src/devtools/views/Components/TreeContext.js | 21 +++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index b83078f653d3..41dd0eb51898 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -202,17 +202,25 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
+  // We track explicitly whether search was requested because
+  // we might want to search even if search index didn't change.
+  // For example, if you press "next result" on a search with a single
+  // result but a different current selection, we'll set this to true.
+  let didRequestSearch = false;
+
   // Search isn't supported when the owner's tree is active.
   if (ownerStack.length === 0) {
     switch (type) {
       case 'GO_TO_NEXT_SEARCH_RESULT':
         if (numPrevSearchResults > 0) {
+          didRequestSearch = true;
           searchIndex =
             searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;
         }
         break;
       case 'GO_TO_PREVIOUS_SEARCH_RESULT':
         if (numPrevSearchResults > 0) {
+          didRequestSearch = true;
           searchIndex =
             ((searchIndex: any): number) > 0
               ? ((searchIndex: any): number) - 1
@@ -313,10 +321,17 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   }
 
   // Changes in search index or typing should override the selected element.
-  const didAddToSearchText =
+  if (searchIndex !== prevSearchIndex) {
+    didRequestSearch = true;
+  }
+  if (
+    // Did the user type more?
     searchText.length > prevSearchText.length &&
-    searchText.indexOf(prevSearchText) === 0;
-  if (searchIndex !== prevSearchIndex || didAddToSearchText) {
+    searchText.indexOf(prevSearchText) === 0
+  ) {
+    didRequestSearch = true;
+  }
+  if (didRequestSearch) {
     if (searchIndex === null) {
       selectedElementIndex = null;
       selectedElementID = null;

From 3eca0bbe6144dcb2d542766e323bf3c6f005cd08 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 15:08:13 +0100
Subject: [PATCH 301/814] Use heuristic suggested by @sophiebits

---
 src/devtools/views/Components/TreeContext.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 41dd0eb51898..92b59770cfe4 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -320,16 +320,20 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     }
   }
 
-  // Changes in search index or typing should override the selected element.
   if (searchIndex !== prevSearchIndex) {
+    // The user intentionally navigated between search results
     didRequestSearch = true;
   }
-  if (
-    // Did the user type more?
-    searchText.length > prevSearchText.length &&
-    searchText.indexOf(prevSearchText) === 0
-  ) {
-    didRequestSearch = true;
+  if (searchText !== prevSearchText) {
+    if (searchResults.indexOf(selectedElementID) === -1) {
+      // Only move the selection if the new query
+      // doesn't match the current selection anymore.
+      didRequestSearch = true;
+    } else {
+      // Selected item still matches the new search query.
+      // Adjust the index to reflect its position in new results.
+      searchIndex = searchResults.indexOf(selectedElementID);
+    }
   }
   if (didRequestSearch) {
     if (searchIndex === null) {

From 1102fc5c1190b08ad5032333975ec57d9a0b5254 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 15:25:03 +0100
Subject: [PATCH 302/814] Refactor: extract a variable

---
 src/devtools/views/Components/TreeContext.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 92b59770cfe4..8e264f826f53 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -325,14 +325,15 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     didRequestSearch = true;
   }
   if (searchText !== prevSearchText) {
-    if (searchResults.indexOf(selectedElementID) === -1) {
+    const newSearchIndex = searchResults.indexOf(selectedElementID);
+    if (newSearchIndex === -1) {
       // Only move the selection if the new query
       // doesn't match the current selection anymore.
       didRequestSearch = true;
     } else {
       // Selected item still matches the new search query.
       // Adjust the index to reflect its position in new results.
-      searchIndex = searchResults.indexOf(selectedElementID);
+      searchIndex = newSearchIndex;
     }
   }
   if (didRequestSearch) {

From 79827c535bda8ada21a2dca8138b4a218788419e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:10:17 -0700
Subject: [PATCH 303/814] Added isToggled boolean to tree nodes and
 toggleIsCollapsed() method to Store

---
 src/devtools/store.js                  | 49 +++++++++++++++++++++++---
 src/devtools/views/Components/types.js |  3 ++
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 225f9a8ac83e..424ec333eb5b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -287,16 +287,18 @@ export default class Store extends EventEmitter {
     let currentElement = ((this._idToElement.get(firstChildID): any): Element);
     let currentWeight = rootWeight;
     while (index !== currentWeight) {
-      for (let i = 0; i < currentElement.children.length; i++) {
+      const numChildren = currentElement.children.length;
+      for (let i = 0; i < numChildren; i++) {
         const childID = currentElement.children[i];
         const child = ((this._idToElement.get(childID): any): Element);
-        const { weight } = child;
-        if (index <= currentWeight + weight) {
+        const childWeight = child.isCollapsed ? 1 : child.weight;
+
+        if (index <= currentWeight + childWeight) {
           currentWeight++;
           currentElement = child;
           break;
         } else {
-          currentWeight += weight;
+          currentWeight += childWeight;
         }
       }
     }
@@ -420,6 +422,28 @@ export default class Store extends EventEmitter {
     this.emit('isProfiling');
   }
 
+  toggleIsCollapsed(id: number, isCollapsed: boolean): void {
+    const element = this.getElementByID(id);
+    if (element !== null) {
+      element.isCollapsed = isCollapsed;
+
+      const weightDelta = isCollapsed ? 1 - element.weight : element.weight - 1;
+
+      this._numElements += weightDelta;
+
+      let parentElement = this._idToElement.get(element.parentID);
+      while (parentElement != null) {
+        parentElement.weight += weightDelta;
+        parentElement = this._idToElement.get(parentElement.parentID);
+      }
+
+      // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
+      // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
+      // Updating the selected search index later may require auto-expanding a collapsed subtree though.
+      this.emit('mutated', [[], []]);
+    }
+  }
+
   _captureScreenshot = throttle(
     memoize((commitIndex: number) => {
       this._bridge.send('captureScreenshot', { commitIndex });
@@ -518,6 +542,7 @@ export default class Store extends EventEmitter {
               depth: -1,
               displayName: null,
               id,
+              isCollapsed: false,
               key: null,
               ownerID: 0,
               parentID: 0,
@@ -566,6 +591,7 @@ export default class Store extends EventEmitter {
               depth: parentElement.depth + 1,
               displayName,
               id,
+              isCollapsed: false,
               key,
               ownerID,
               parentID: parentElement.id,
@@ -715,14 +741,27 @@ export default class Store extends EventEmitter {
           throw Error(`Unsupported Bridge operation ${operation}`);
       }
 
-      this._numElements += weightDelta;
+      let isInsideCollapsedSubTree = false;
 
       while (parentElement != null) {
         parentElement.weight += weightDelta;
+
+        // Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.
+        // Their weight will bubble up when the parent is expanded.
+        if (parentElement.isCollapsed) {
+          isInsideCollapsedSubTree = true;
+          break;
+        }
+
         parentElement = ((this._idToElement.get(
           parentElement.parentID
         ): any): Element);
       }
+
+      // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
+      if (!isInsideCollapsedSubTree) {
+        this._numElements += weightDelta;
+      }
     }
 
     this._revision++;
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index fc71d5e9bba2..ca3c7e3df078 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -14,6 +14,9 @@ export type Element = {|
   displayName: string | null,
   key: number | string | null,
 
+  // Should the elements children be visible in the tree?
+  isCollapsed: boolean,
+
   // Owner (if available)
   ownerID: number,
 

From b6df86c90c43a8346013a2d3b5a4ecde28c2eef8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:10:57 -0700
Subject: [PATCH 304/814] Added toggle button to Tree > Element views

---
 src/devtools/views/ButtonIcon.js          | 12 ++++++
 src/devtools/views/Components/Element.css | 10 +++++
 src/devtools/views/Components/Element.js  | 46 +++++++++++++++++++++--
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 7aa08b3c6c57..c27e63183c91 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -7,8 +7,10 @@ export type IconType =
   | 'back'
   | 'cancel'
   | 'close'
+  | 'collapsed'
   | 'copy'
   | 'down'
+  | 'expanded'
   | 'export'
   | 'filter'
   | 'import'
@@ -40,12 +42,18 @@ export default function ButtonIcon({ type }: Props) {
     case 'close':
       pathData = PATH_CLOSE;
       break;
+    case 'collapsed':
+      pathData = PATH_COLLAPSED;
+      break;
     case 'copy':
       pathData = PATH_COPY;
       break;
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'expanded':
+      pathData = PATH_EXPANDED;
+      break;
     case 'export':
       pathData = PATH_EXPORT;
       break;
@@ -121,6 +129,8 @@ const PATH_CANCEL = `
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
+const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';
+
 const PATH_COPY = `
   M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
@@ -128,6 +138,8 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_EXPANDED = 'M7 10l5 5 5-5z';
+
 const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';
 
 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 4f1748c9c1ac..72f6d68a2f1d 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -7,6 +7,8 @@
   align-items: center;
   cursor: default;
   user-select: none;
+
+  --color-expand-collapse-toggle: var(--color-dim);
 }
 .Element:hover {
   background-color: var(--color-hover-background);
@@ -21,6 +23,7 @@
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-hover-background);
   --color-attribute-value: var(--color-component-name-inverted);
+  --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 
 .DollarR {
@@ -55,3 +58,10 @@
 .CurrentHighlight {
   background-color: var(--color-search-match-current);
 }
+
+.ExpandCollapseToggle {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-expand-collapse-toggle);
+}
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 01f983c21795..c3cc65c0cf58 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -9,6 +9,8 @@ import React, {
   useRef,
 } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
+import Store from 'src/devtools/store';
+import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
@@ -75,8 +77,6 @@ export default function ElementView({ data, index, style }: Props) {
     }
   }, [id, isSelected, lastScrolledIDRef]);
 
-  // TODO Add click and key handlers for toggling element open/close state.
-
   const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
@@ -114,8 +114,6 @@ export default function ElementView({ data, index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
-  // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
-
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
@@ -138,6 +136,7 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <ExpandCollapseToggle element={element} store={store} />
       <span className={styles.Component} ref={ref}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
@@ -152,6 +151,45 @@ export default function ElementView({ data, index, style }: Props) {
   );
 }
 
+// Prevent double clicks on toggle from drilling into the owner list.
+const swallowDoubleClick = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+type ExpandCollapseToggleProps = {|
+  element: Element,
+  store: Store,
+|};
+
+function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
+  const { children, id, isCollapsed } = element;
+
+  const toggleCollapsed = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      store.toggleIsCollapsed(id, !isCollapsed);
+    },
+    [id, isCollapsed, store]
+  );
+
+  if (children.length === 0) {
+    return <div className={styles.ExpandCollapseToggle} />;
+  }
+
+  return (
+    <div
+      className={styles.ExpandCollapseToggle}
+      onClick={toggleCollapsed}
+      onDoubleClick={swallowDoubleClick}
+    >
+      <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} />
+    </div>
+  );
+}
+
 type DisplayNameProps = {|
   displayName: string | null,
   id: number,

From 4c522c4c3845aac5442fd5f12957da6167b609b4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:11:40 -0700
Subject: [PATCH 305/814] Selected search result auto-opens collapsed nodes
 when necessary.

Also fixed an unrelated bug about when we reset search index when text changes.
---
 src/devtools/views/Components/TreeContext.js | 50 ++++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 8e264f826f53..d9d9233c8014 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -24,6 +24,7 @@ import React, {
   useEffect,
   useMemo,
   useReducer,
+  useRef,
 } from 'react';
 import { createRegExp } from '../utils';
 import { BridgeContext, StoreContext } from '../context';
@@ -198,7 +199,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
   } = state;
 
-  const prevSearchIndex = searchIndex;
+  let prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
@@ -306,10 +307,25 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             if (prevSearchIndex === null) {
               searchIndex = 0;
             } else {
-              searchIndex = Math.min(
-                ((prevSearchIndex: any): number),
-                searchResults.length - 1
-              );
+              // Changes in search index or typing should override the selected element.
+              // The one exception is when a search is broadened (e.g. "Cat" -> "Ca").
+              // In this case, it's probably desirable to maintain a stable selection.
+              // Replacements of text( e.g. "cat" -> "dog") likely require an index change.
+              const didRelaxSearchText =
+                prevSearchText.length > searchText.length &&
+                prevSearchText.startsWith(searchText);
+              if (didRelaxSearchText) {
+                searchIndex = prevSearchIndex;
+              } else {
+                searchIndex = Math.min(
+                  ((prevSearchIndex: any): number),
+                  searchResults.length - 1
+                );
+
+                // Force selected element ID to be re-evaluated below, even if the search index didn't change,
+                // because new search text means the same index may now point to a new element.
+                prevSearchIndex = null;
+              }
             }
           }
         }
@@ -686,6 +702,30 @@ function TreeContextController({ children, viewElementSource }: Props) {
     return () => bridge.removeListener('selectFiber', handleSelectFiber);
   }, [bridge, dispatch]);
 
+  // If a newly-selected search result is inside of a collapsed subtree, auto expand it.
+  // We also need to handle when the search text changed (selecting a new element) without changing the index.
+  const prevSearchIndex = useRef<number | null>(null);
+  const prevSearchText = useRef<string>('');
+  useEffect(() => {
+    if (
+      state.searchIndex !== prevSearchIndex.current ||
+      state.searchText !== prevSearchText.current
+    ) {
+      prevSearchIndex.current = state.searchIndex;
+      prevSearchText.current = state.searchText;
+
+      if (state.searchIndex !== null && state.selectedElementID !== null) {
+        let element = store.getElementByID(state.selectedElementID);
+        while (element !== null && element.parentID > 0) {
+          element = ((store.getElementByID(element.parentID): any): Element);
+          if (element.isCollapsed) {
+            store.toggleIsCollapsed(element.id, false);
+          }
+        }
+      }
+    }
+  }, [state.searchIndex, state.searchText, state.selectedElementID, store]);
+
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
     const handleStoreMutated = ([

From f7212d8035cb8fadfdefda6728fce269ed2a4c87 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:11:57 -0700
Subject: [PATCH 306/814] Upgrade react-window to fix a scroll-to bug

---
 package.json |  2 +-
 yarn.lock    | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 970f1f99d54c..aa58a10370e2 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "react-dom": "^16.8.4",
     "react-is": "^16.8.4",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.5.1",
+    "react-window": "^1.7.2",
     "scheduler": "^0.13",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
diff --git a/yarn.lock b/yarn.lock
index 25a54310d85c..4b0e19920e3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7323,6 +7323,11 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^2.0.0"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
+  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
+
 memoize-one@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -8799,13 +8804,13 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@^1.5.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.2.tgz#39dbfd7aa47c1d80b37928f3269f7112a5900294"
-  integrity sha512-xGGKS9bR2y/XbkyQBk0qRO3y1mdENXVfksjAIn1fcbZ9qwiML52HryKfCaK50c1bIX3f0xqPgu8Q6FIxHKKbag==
+react-window@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.2.tgz#2e1528d5b9991e863302bfe74cb52d0ff7082e78"
+  integrity sha512-GK1gxSeGPLBDSQhPmYhCYrtf5MkGK8rwVjeyPgxZLvLRw0wvyzKZPMc/jfemiGNGfuJyW3kx1z6QR9uK7r2XdA==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    memoize-one "^3.1.1"
+    memoize-one ">=3.1.1 <6"
 
 react@^16.8.4:
   version "16.8.4"

From 55b3635f2837b7bf1fc2e4f6d9bffcb7259b9d12 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 18:27:10 -0700
Subject: [PATCH 307/814] Left/right arrow toggles node collapsed state as well

---
 src/devtools/views/Components/Tree.js | 36 ++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index b97ff5a9cf52..d5a2b3182659 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -12,7 +12,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
-import { BridgeContext } from '../context';
+import { BridgeContext, StoreContext } from '../context';
 import ElementView from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
@@ -37,12 +37,14 @@ export default function Tree(props: Props) {
     getElementAtIndex,
     numElements,
     ownerStack,
+    selectedElementID,
     selectedElementIndex,
     selectNextElementInTree,
     selectParentElementInTree,
     selectPreviousElementInTree,
   } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
@@ -77,6 +79,8 @@ export default function Tree(props: Props) {
         return;
       }
 
+      let element;
+
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
@@ -84,10 +88,34 @@ export default function Tree(props: Props) {
           event.preventDefault();
           break;
         case 'ArrowLeft':
-          selectParentElementInTree();
+          element =
+            selectedElementID !== null
+              ? store.getElementByID(selectedElementID)
+              : null;
+          if (
+            element !== null &&
+            element.children.length > 0 &&
+            !element.isCollapsed
+          ) {
+            store.toggleIsCollapsed(element.id, true);
+          } else {
+            selectParentElementInTree();
+          }
           break;
         case 'ArrowRight':
-          selectNextElementInTree();
+          element =
+            selectedElementID !== null
+              ? store.getElementByID(selectedElementID)
+              : null;
+          if (
+            element !== null &&
+            element.children.length > 0 &&
+            element.isCollapsed
+          ) {
+            store.toggleIsCollapsed(element.id, false);
+          } else {
+            selectNextElementInTree();
+          }
           event.preventDefault();
           break;
         case 'ArrowUp':
@@ -107,9 +135,11 @@ export default function Tree(props: Props) {
       ownerDocument.removeEventListener('keydown', handleKeyDown);
     };
   }, [
+    selectedElementID,
     selectNextElementInTree,
     selectParentElementInTree,
     selectPreviousElementInTree,
+    store,
   ]);
 
   // Let react-window know to re-render any time the underlying tree data changes.

From 61203f77cf850b07a6da57ea4257bcfeea200ae5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 21:35:09 -0700
Subject: [PATCH 308/814] Hide toggle arrows in owners list mode

---
 src/devtools/views/Components/Element.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index c3cc65c0cf58..f696a1e3cdf6 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -30,6 +30,7 @@ export default function ElementView({ data, index, style }: Props) {
   const {
     baseDepth,
     getElementAtIndex,
+    ownerStack,
     selectOwner,
     selectedElementID,
     selectElementByID,
@@ -136,7 +137,9 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
-      <ExpandCollapseToggle element={element} store={store} />
+      {ownerStack.length === 0 ? (
+        <ExpandCollapseToggle element={element} store={store} />
+      ) : null}
       <span className={styles.Component} ref={ref}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (

From 102267b1d61b4362eb6cfeaebe226548d318027d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 07:31:34 -0700
Subject: [PATCH 309/814] Renamed _numElements attribute based on PR feedback

---
 src/devtools/store.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 424ec333eb5b..844d7e9b07fc 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -71,10 +71,6 @@ export default class Store extends EventEmitter {
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
 
-  // Total number of visible elements (within all roots).
-  // Used for windowing purposes.
-  _numElements: number = 0;
-
   // Suspense cache for reading profilign data.
   _profilingCache: ProfilingCache;
 
@@ -112,6 +108,10 @@ export default class Store extends EventEmitter {
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 
+  // Total number of visible elements (within all roots).
+  // Used for windowing purposes.
+  _weightAcrossRoots: number = 0;
+
   constructor(bridge: Bridge, config?: Config) {
     super();
 
@@ -198,7 +198,7 @@ export default class Store extends EventEmitter {
   }
 
   get numElements(): number {
-    return this._numElements;
+    return this._weightAcrossRoots;
   }
 
   get profilingCache(): ProfilingCache {
@@ -429,7 +429,7 @@ export default class Store extends EventEmitter {
 
       const weightDelta = isCollapsed ? 1 - element.weight : element.weight - 1;
 
-      this._numElements += weightDelta;
+      this._weightAcrossRoots += weightDelta;
 
       let parentElement = this._idToElement.get(element.parentID);
       while (parentElement != null) {
@@ -760,7 +760,7 @@ export default class Store extends EventEmitter {
 
       // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
       if (!isInsideCollapsedSubTree) {
-        this._numElements += weightDelta;
+        this._weightAcrossRoots += weightDelta;
       }
     }
 

From b004a794152df4051e02661c04dcd718f7b60c7e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 07:45:45 -0700
Subject: [PATCH 310/814] Reverted some unnecessary changes to TreeContext
 after Dan's PR 101 was merged

---
 src/devtools/views/Components/TreeContext.js | 25 ++++----------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index d9d9233c8014..26a925a7178a 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -199,7 +199,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
   } = state;
 
-  let prevSearchIndex = searchIndex;
+  const prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
@@ -307,25 +307,10 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             if (prevSearchIndex === null) {
               searchIndex = 0;
             } else {
-              // Changes in search index or typing should override the selected element.
-              // The one exception is when a search is broadened (e.g. "Cat" -> "Ca").
-              // In this case, it's probably desirable to maintain a stable selection.
-              // Replacements of text( e.g. "cat" -> "dog") likely require an index change.
-              const didRelaxSearchText =
-                prevSearchText.length > searchText.length &&
-                prevSearchText.startsWith(searchText);
-              if (didRelaxSearchText) {
-                searchIndex = prevSearchIndex;
-              } else {
-                searchIndex = Math.min(
-                  ((prevSearchIndex: any): number),
-                  searchResults.length - 1
-                );
-
-                // Force selected element ID to be re-evaluated below, even if the search index didn't change,
-                // because new search text means the same index may now point to a new element.
-                prevSearchIndex = null;
-              }
+              searchIndex = Math.min(
+                ((prevSearchIndex: any): number),
+                searchResults.length - 1
+              );
             }
           }
         }

From 1f7f0ea6913f261878d5e70cb4e538e141ea6109 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 07:53:06 -0700
Subject: [PATCH 311/814] Update Store.getIndexOfElementID to take isCollapsed
 into account

---
 src/devtools/store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 844d7e9b07fc..a764394184ec 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -353,7 +353,7 @@ export default class Store extends EventEmitter {
           break;
         }
         const child = ((this._idToElement.get(childID): any): Element);
-        index += child.weight;
+        index += child.isCollapsed ? 1 : child.weight;
       }
 
       previousID = current.id;

From dd84e8ff2bbb8193f585ec23d870716a0e2151c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 08:57:42 -0700
Subject: [PATCH 312/814] Newly selected components always auto-expand their
 ancestors

---
 src/devtools/store.js                         |  7 +++-
 src/devtools/views/Components/TreeContext.js  | 33 ++++++++++---------
 .../views/Profiler/ProfilerContext.js         | 11 ++++---
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index a764394184ec..66e84b578c10 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -353,7 +353,12 @@ export default class Store extends EventEmitter {
           break;
         }
         const child = ((this._idToElement.get(childID): any): Element);
-        index += child.isCollapsed ? 1 : child.weight;
+
+        // We intentionally ignore collapsed state when determining an item's index.
+        // We only do this for the direct path to an element.
+        // That's because the index of the element is meaningless if it's inside of a collapsed tree.
+        // If this index is used to display the element, the caller should also un-collapse its ancestors.
+        index += child.weight;
       }
 
       previousID = current.id;
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 26a925a7178a..915312d52124 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -22,6 +22,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useReducer,
   useRef,
@@ -110,6 +111,8 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
     selectedElementID,
   } = state;
 
+  let lookupIDForIndex = true;
+
   // Base tree should ignore selected element changes when the owner's tree is active.
   if (ownerStack.length === 0) {
     switch (type) {
@@ -128,6 +131,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         selectedElementIndex = ((payload: any): number | null);
         break;
       case 'SELECT_ELEMENT_BY_ID':
+        // Skip lookup in this case; it would be redundant.
+        // It might also cause problems if the specified element was inside of a (not yet expanded) subtree.
+        lookupIDForIndex = false;
+
+        selectedElementID = payload;
         selectedElementIndex =
           payload === null
             ? null
@@ -168,7 +176,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
   }
 
   // Keep selected item ID and index in sync.
-  if (selectedElementIndex !== state.selectedElementIndex) {
+  if (lookupIDForIndex && selectedElementIndex !== state.selectedElementIndex) {
     if (selectedElementIndex === null) {
       selectedElementID = null;
     } else {
@@ -687,19 +695,14 @@ function TreeContextController({ children, viewElementSource }: Props) {
     return () => bridge.removeListener('selectFiber', handleSelectFiber);
   }, [bridge, dispatch]);
 
-  // If a newly-selected search result is inside of a collapsed subtree, auto expand it.
-  // We also need to handle when the search text changed (selecting a new element) without changing the index.
-  const prevSearchIndex = useRef<number | null>(null);
-  const prevSearchText = useRef<string>('');
-  useEffect(() => {
-    if (
-      state.searchIndex !== prevSearchIndex.current ||
-      state.searchText !== prevSearchText.current
-    ) {
-      prevSearchIndex.current = state.searchIndex;
-      prevSearchText.current = state.searchText;
-
-      if (state.searchIndex !== null && state.selectedElementID !== null) {
+  // If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
+  // This needs to be a layout effect to avoid temporarily flashing an incorrect selection.
+  const prevSelectedElementID = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    if (state.selectedElementID !== prevSelectedElementID.current) {
+      prevSelectedElementID.current = state.selectedElementID;
+
+      if (state.selectedElementID !== null) {
         let element = store.getElementByID(state.selectedElementID);
         while (element !== null && element.parentID > 0) {
           element = ((store.getElementByID(element.parentID): any): Element);
@@ -709,7 +712,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
         }
       }
     }
-  }, [state.searchIndex, state.searchText, state.selectedElementID, store]);
+  }, [state.selectedElementID, store]);
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index d06b5dab7331..c8a89c0d9e56 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -79,7 +79,7 @@ type Props = {|
 
 function ProfilerContextController({ children }: Props) {
   const store = useContext(StoreContext);
-  const { selectElementAtIndex, selectedElementID } = useContext(TreeContext);
+  const { selectElementByID, selectedElementID } = useContext(TreeContext);
 
   const subscription = useMemo(
     () => ({
@@ -152,13 +152,14 @@ function ProfilerContextController({ children }: Props) {
       selectFiberID(id);
       selectFiberName(name);
       if (id !== null) {
-        const index = store.getIndexOfElementID(id);
-        if (index !== null) {
-          selectElementAtIndex(index);
+        // If this element is still in the store, then select it in the Components tab as well.
+        const element = store.getElementByID(id);
+        if (element !== null) {
+          selectElementByID(id);
         }
       }
     },
-    [selectElementAtIndex, selectFiberID, selectFiberName, store]
+    [selectElementByID, selectFiberID, selectFiberName, store]
   );
 
   if (isProfiling) {

From 74c9904e5d520662cc9c29f8b760818c77b537a3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 08:59:43 -0700
Subject: [PATCH 313/814] Rewrote weightDelta calculation to be more readable
 based on PR feedback

---
 src/devtools/store.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 66e84b578c10..d5f3a45b2521 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -430,9 +430,10 @@ export default class Store extends EventEmitter {
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
     const element = this.getElementByID(id);
     if (element !== null) {
+      const oldWeight = element.isCollapsed ? 1 : element.weight;
       element.isCollapsed = isCollapsed;
-
-      const weightDelta = isCollapsed ? 1 - element.weight : element.weight - 1;
+      const newWeight = element.isCollapsed ? 1 : element.weight;
+      const weightDelta = newWeight - oldWeight;
 
       this._weightAcrossRoots += weightDelta;
 

From f89f2b2146fa806c6bcabd23bb3a2af328f31f6b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 09:23:24 -0700
Subject: [PATCH 314/814] Reverted misguided index/collapsed behavior

---
 src/devtools/store.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index d5f3a45b2521..d81b6e89c1e7 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -353,12 +353,7 @@ export default class Store extends EventEmitter {
           break;
         }
         const child = ((this._idToElement.get(childID): any): Element);
-
-        // We intentionally ignore collapsed state when determining an item's index.
-        // We only do this for the direct path to an element.
-        // That's because the index of the element is meaningless if it's inside of a collapsed tree.
-        // If this index is used to display the element, the caller should also un-collapse its ancestors.
-        index += child.weight;
+        index += child.isCollapsed ? 1 : child.weight;
       }
 
       previousID = current.id;

From f1a8bd29235a2e267c88138a618d107cf5d4a9ea Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 17:28:36 +0100
Subject: [PATCH 315/814] Update selected index after mutation

---
 src/devtools/views/Components/TreeContext.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 8e264f826f53..a4ef1cfa2362 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -398,6 +398,20 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
             ownerStackIndex = ownerStack.length - 1;
           }
         }
+        if (selectedElementID !== null) {
+          // Mutation might have caused the index of this ID to shift.
+          selectedElementIndex = _ownerFlatTree.indexOf(selectedElementID);
+        }
+      } else {
+        if (selectedElementID !== null) {
+          // Mutation might have caused the index of this ID to shift.
+          selectedElementIndex = store.getIndexOfElementID(selectedElementID);
+        }
+      }
+      if (selectedElementIndex === -1) {
+        // If we couldn't find this ID after mutation, unselect it.
+        selectedElementIndex = null;
+        selectedElementID = null;
       }
       break;
     case 'RESET_OWNER_STACK':

From 5b480a85cb17b7455c6896e4d9b2f28abd080fc8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 17:46:34 +0100
Subject: [PATCH 316/814] Prevent default on all key navigations

---
 src/devtools/views/Components/Tree.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index d5a2b3182659..533f314a7953 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -84,10 +84,11 @@ export default function Tree(props: Props) {
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
-          selectNextElementInTree();
           event.preventDefault();
+          selectNextElementInTree();
           break;
         case 'ArrowLeft':
+          event.preventDefault();
           element =
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
@@ -103,6 +104,7 @@ export default function Tree(props: Props) {
           }
           break;
         case 'ArrowRight':
+          event.preventDefault();
           element =
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
@@ -116,11 +118,10 @@ export default function Tree(props: Props) {
           } else {
             selectNextElementInTree();
           }
-          event.preventDefault();
           break;
         case 'ArrowUp':
-          selectPreviousElementInTree();
           event.preventDefault();
+          selectPreviousElementInTree();
           break;
       }
     };

From 6836f15924bbfc6151f5c4d33aa8112ff313f9f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 09:56:21 -0700
Subject: [PATCH 317/814] Tweaked inactive CSS colors

---
 src/devtools/views/root.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 884ff3e0d4d0..47541ff67a72 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -34,7 +34,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-hover-background: #ebf1fb;
-  --light-color-inactive-background: #ccc;
+  --light-color-inactive-background: #f1f1f1;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -79,7 +79,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-hover-background: #3d424a;
-  --dark-color-inactive-background: #44474c;
+  --dark-color-inactive-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From caa74472f2a42d0a9acfa0e086d72228eac9c457 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 10:01:03 -0700
Subject: [PATCH 318/814] Replaced nested ternary

---
 src/devtools/views/Components/Element.css |  6 +++---
 src/devtools/views/Components/Element.js  | 15 ++++++++-------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 081a54d6cef9..b138fda32ad5 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -1,6 +1,6 @@
 .Element,
-.SelectedElement,
-.InactiveElement {
+.InactiveSelectedElement,
+.SelectedElement {
   border-radius: 0.25em;
   white-space: nowrap;
   line-height: var(--line-height-data);
@@ -14,7 +14,7 @@
 .Element:hover {
   background-color: var(--color-hover-background);
 }
-.InactiveElement {
+.InactiveSelectedElement {
   background-color: var(--color-inactive-background);
 }
 
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index a38fc842bd9a..3cb0ddd04e2e 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -116,15 +116,16 @@ export default function ElementView({ data, index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
+  let className = styles.Element;
+  if (isSelected) {
+    className = treeFocused
+      ? styles.SelectedElement
+      : styles.InactiveSelectedElement;
+  }
+
   return (
     <div
-      className={
-        isSelected && treeFocused
-          ? styles.SelectedElement
-          : isSelected
-          ? styles.InactiveElement
-          : styles.Element
-      }
+      className={className}
       onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}

From 268a7cb5b49499b89fff86401387a9b85b3f5ee4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 10:14:21 -0700
Subject: [PATCH 319/814] Moved blur/focus up to the AutoSizer wrapper and
 removed an effect+ref

---
 src/devtools/views/Components/Tree.css |  8 +--
 src/devtools/views/Components/Tree.js  | 84 +++++++++-----------------
 2 files changed, 33 insertions(+), 59 deletions(-)

diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 777e332ba765..53b576c4cc47 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--color-border);
+  padding: 0.25rem;
 }
 
 .SearchInput {
@@ -19,13 +20,12 @@
   overflow: auto;
   flex: 1 0 auto;
 }
+.AutoSizerWrapper:focus {
+  outline: none;
+}
 
 .List {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
-
-.InnerElementType:focus {
-  outline: none;
-}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 5ad130aad7c9..f26e9c7817c1 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -41,7 +41,9 @@ export default function Tree(props: Props) {
     ownerStack,
     selectedElementID,
     selectedElementIndex,
+    selectElementAtIndex,
     selectNextElementInTree,
+    selectOwner,
     selectParentElementInTree,
     selectPreviousElementInTree,
   } = useContext(TreeContext);
@@ -50,7 +52,6 @@ export default function Tree(props: Props) {
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
-  const elementsRef = useRef<HTMLDivElement | null>(null);
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
@@ -147,29 +148,31 @@ export default function Tree(props: Props) {
     store,
   ]);
 
-  useEffect(() => {
-    if (elementsRef.current === null) {
-      return () => {};
-    }
-
-    const handleFocusIn = () => {
-      setTreeFocused(true);
-    };
+  const handleBlur = useCallback(() => setTreeFocused(false));
 
-    const handleFocusOut = () => {
-      setTreeFocused(false);
-    };
+  const handleFocus = useCallback(() => {
+    setTreeFocused(true);
 
-    const elementsElement = elementsRef.current;
-
-    elementsElement.addEventListener('focusin', handleFocusIn);
-    elementsElement.addEventListener('focusout', handleFocusOut);
+    if (selectedElementIndex === null && numElements > 0) {
+      selectElementAtIndex(0);
+    }
+  }, [numElements, selectedElementIndex, selectElementAtIndex]);
 
-    return () => {
-      elementsElement.removeEventListener('focusin', handleFocusIn);
-      elementsElement.removeEventListener('focusout', handleFocusOut);
-    };
-  }, []);
+  const handleKeyPress = useCallback(
+    event => {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          if (selectedElementID !== null) {
+            selectOwner(selectedElementID);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [selectedElementID, selectOwner]
+  );
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
@@ -196,8 +199,11 @@ export default function Tree(props: Props) {
       </div>
       <div
         className={styles.AutoSizerWrapper}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyPress={handleKeyPress}
         onMouseLeave={handleMouseLeave}
-        ref={elementsRef}
+        tabIndex={0}
       >
         <AutoSizer>
           {({ height, width }) => (
@@ -223,36 +229,7 @@ export default function Tree(props: Props) {
 }
 
 function InnerElementType({ style, ...rest }) {
-  const {
-    numElements,
-    ownerStack,
-    selectedElementID,
-    selectedElementIndex,
-    selectElementAtIndex,
-    selectOwner,
-  } = useContext(TreeContext);
-
-  const handleFocus = () => {
-    if (selectedElementIndex === null && numElements > 0) {
-      selectElementAtIndex(0);
-    }
-  };
-
-  const handleKeyPress = useCallback(
-    event => {
-      switch (event.key) {
-        case 'Enter':
-        case ' ':
-          if (selectedElementID !== null) {
-            selectOwner(selectedElementID);
-          }
-          break;
-        default:
-          break;
-      }
-    },
-    [selectedElementID, selectOwner]
-  );
+  const { ownerStack } = useContext(TreeContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -283,8 +260,6 @@ function InnerElementType({ style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      onFocus={handleFocus}
-      onKeyPress={handleKeyPress}
       style={{
         ...style,
         display: 'inline-block',
@@ -292,7 +267,6 @@ function InnerElementType({ style, ...rest }) {
         width: undefined,
       }}
       ref={divRef}
-      tabIndex={0}
       {...rest}
     />
   );

From 4b0424fbed8b873d67684785bfbdf22323cb3125 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 10:16:09 -0700
Subject: [PATCH 320/814] Flow fix

---
 src/devtools/views/Components/TreeContext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 4e09ab4e0222..a2dcd63f65df 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -407,7 +407,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
             ownerStackIndex = ownerStack.length - 1;
           }
         }
-        if (selectedElementID !== null) {
+        if (selectedElementID !== null && _ownerFlatTree !== null) {
           // Mutation might have caused the index of this ID to shift.
           selectedElementIndex = _ownerFlatTree.indexOf(selectedElementID);
         }

From 1c381c588aed1ed6814f1be04fbe42cd069ce174 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 18:13:29 +0100
Subject: [PATCH 321/814] Picking a DOM node focuses the tree

---
 src/backend/agent.js                              |  2 +-
 .../views/Components/InspectHostNodesToggle.js    |  2 +-
 src/devtools/views/Components/Tree.js             | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 3c1600bae038..528c5715fec8 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -479,7 +479,7 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     this.stopInspectingDOM();
-    this._bridge.send('stopInspectingDOM');
+    this._bridge.send('stopInspectingDOM', true);
   };
 
   _onMouseDown = (event: MouseEvent) => {
diff --git a/src/devtools/views/Components/InspectHostNodesToggle.js b/src/devtools/views/Components/InspectHostNodesToggle.js
index a20107fcb7dd..c0893f7fa386 100644
--- a/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -16,7 +16,7 @@ export default function InspectHostNodesToggle() {
       if (isChecked) {
         bridge.send('startInspectingDOM');
       } else {
-        bridge.send('stopInspectingDOM');
+        bridge.send('stopInspectingDOM', false);
       }
     },
     [bridge]
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index f8a5da8fc338..be3316df51dc 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -52,6 +52,7 @@ export default function Tree(props: Props) {
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
+  const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
@@ -69,6 +70,19 @@ export default function Tree(props: Props) {
     }
   }, [listRef, selectedElementIndex]);
 
+  // Picking an element in the inspector should put focus into the tree.
+  // This ensures that keyboard navigation works right after picking a node.
+  useEffect(() => {
+    function handleStopInspectingDOM(didSelectNode) {
+      if (didSelectNode && focusTargetRef.current !== null) {
+        focusTargetRef.current.focus();
+      }
+    }
+    bridge.addListener('stopInspectingDOM', handleStopInspectingDOM);
+    return () =>
+      bridge.removeListener('stopInspectingDOM', handleStopInspectingDOM);
+  }, [bridge]);
+
   // This ref is passed down the context to elements.
   // It lets them avoid autoscrolling to the same item many times
   // when a selected virtual row goes in and out of the viewport.
@@ -204,6 +218,7 @@ export default function Tree(props: Props) {
         onFocus={handleFocus}
         onKeyPress={handleKeyPress}
         onMouseLeave={handleMouseLeave}
+        ref={focusTargetRef}
         tabIndex={0}
       >
         <AutoSizer>

From 0f955980a3db96e2197e52cb5549e8d46e28fa06 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Mon, 8 Apr 2019 22:42:32 -0300
Subject: [PATCH 322/814] Add collapsible icon for object and array types

---
 src/devtools/views/Components/KeyValue.css | 10 ++++
 src/devtools/views/Components/KeyValue.js  | 64 ++++++++++++++--------
 2 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 29603981062e..aef2b7874306 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -26,3 +26,13 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.Opener {
+  padding: 0.125rem;
+  margin-left: -1rem;
+}
+
+.Opener svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 3c8156eb640b..ffff29664c16 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -1,7 +1,9 @@
 // @flow
 
-import React from 'react';
+import React, { useState } from 'react';
 import EditableValue from './EditableValue';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
@@ -23,6 +25,12 @@ export default function KeyValue({
   path = [],
   value,
 }: KeyValueProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -72,45 +80,57 @@ export default function KeyValue({
       </div>
     );
   } else {
+    const opener = (
+      <Button className={styles.Opener} onClick={handleToggle}>
+        <ButtonIcon type={open ? 'up' : 'down'} />
+      </Button>
+    );
+
     if (Array.isArray(value)) {
-      children = value.map((innerValue, index) => (
-        <KeyValue
-          key={index}
-          depth={depth + 1}
-          name={index}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(index)}
-          value={value[index]}
-        />
-      ));
+      children = open
+        ? value.map((innerValue, index) => (
+            <KeyValue
+              key={index}
+              depth={depth + 1}
+              name={index}
+              overrideValueFn={overrideValueFn}
+              path={path.concat(index)}
+              value={value[index]}
+            />
+          ))
+        : [];
       children.unshift(
         <div
           key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft }}
         >
+          {value.length > 0 && opener}
           <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
     } else {
-      // $FlowFixMe "Missing type annotation for U" whatever that means
-      children = Object.entries(value).map(([name, value]) => (
-        <KeyValue
-          key={name}
-          depth={depth + 1}
-          name={name}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(name)}
-          value={value}
-        />
-      ));
+      children = open
+        ? // $FlowFixMe "Missing type annotation for U" whatever that means
+          Object.entries(value).map(([name, value]) => (
+            <KeyValue
+              key={name}
+              depth={depth + 1}
+              name={name}
+              overrideValueFn={overrideValueFn}
+              path={path.concat(name)}
+              value={value}
+            />
+          ))
+        : [];
       children.unshift(
         <div
           key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft }}
         >
+          {Object.entries(value).length > 0 && opener}
           <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>

From 99a1e07aa658142eba1f48dff187a7b9f554fd71 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Tue, 9 Apr 2019 21:09:41 -0300
Subject: [PATCH 323/814] Fix flow type

---
 src/devtools/views/Components/KeyValue.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ffff29664c16..e05bcecb3f7d 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useState } from 'react';
+import type { Element } from 'react';
 import EditableValue from './EditableValue';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -112,8 +113,7 @@ export default function KeyValue({
       );
     } else {
       children = open
-        ? // $FlowFixMe "Missing type annotation for U" whatever that means
-          Object.entries(value).map(([name, value]) => (
+        ? Object.entries(value).map<Element<any>>(([name, value]) => (
             <KeyValue
               key={name}
               depth={depth + 1}

From 2d516199eaf0979b1966f0122b7a46995caaae5a Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Wed, 10 Apr 2019 14:47:39 -0300
Subject: [PATCH 324/814] Update opener icon and remove negative margin

---
 src/devtools/views/Components/KeyValue.css | 12 ++++------
 src/devtools/views/Components/KeyValue.js  | 27 +++++++++++++++-------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index aef2b7874306..31f78013172e 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -1,5 +1,6 @@
 .Item {
   display: flex;
+  --color-expand-collapse-toggle: var(--color-dim);
 }
 
 .Name {
@@ -28,11 +29,8 @@
 }
 
 .Opener {
-  padding: 0.125rem;
-  margin-left: -1rem;
-}
-
-.Opener svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-expand-collapse-toggle);
 }
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index e05bcecb3f7d..9f8e4ec23c0c 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -3,7 +3,6 @@
 import React, { useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
-import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
@@ -82,12 +81,14 @@ export default function KeyValue({
     );
   } else {
     const opener = (
-      <Button className={styles.Opener} onClick={handleToggle}>
-        <ButtonIcon type={open ? 'up' : 'down'} />
-      </Button>
+      <div className={styles.Opener} onClick={handleToggle}>
+        <ButtonIcon type={open ? 'expanded' : 'collapsed'} />
+      </div>
     );
 
     if (Array.isArray(value)) {
+      const showOpener = value.length > 0;
+
       children = open
         ? value.map((innerValue, index) => (
             <KeyValue
@@ -104,14 +105,20 @@ export default function KeyValue({
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft }}
+          style={{
+            paddingLeft: showOpener
+              ? `calc(${paddingLeft} - 1rem)`
+              : paddingLeft,
+          }}
         >
-          {value.length > 0 && opener}
+          {showOpener && opener}
           <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
     } else {
+      const showOpener = Object.entries(value).length > 0;
+
       children = open
         ? Object.entries(value).map<Element<any>>(([name, value]) => (
             <KeyValue
@@ -128,9 +135,13 @@ export default function KeyValue({
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft }}
+          style={{
+            paddingLeft: showOpener
+              ? `calc(${paddingLeft} - 1rem)`
+              : paddingLeft,
+          }}
         >
-          {Object.entries(value).length > 0 && opener}
+          {showOpener && opener}
           <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>

From 6420f11d65f3c8aea5f352b36f5d78b101856b5d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 18:49:52 +0100
Subject: [PATCH 325/814] Left and right arrows only traverse parents

---
 src/devtools/views/Components/Tree.js        | 29 ++++++++----------
 src/devtools/views/Components/TreeContext.js | 31 ++++++++++++++++++--
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index be3316df51dc..a003da2dd4af 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -41,6 +41,7 @@ export default function Tree(props: Props) {
     ownerStack,
     selectedElementID,
     selectedElementIndex,
+    selectChildElementInTree,
     selectElementAtIndex,
     selectNextElementInTree,
     selectOwner,
@@ -113,14 +114,12 @@ export default function Tree(props: Props) {
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
               : null;
-          if (
-            element !== null &&
-            element.children.length > 0 &&
-            !element.isCollapsed
-          ) {
-            store.toggleIsCollapsed(element.id, true);
-          } else {
-            selectParentElementInTree();
+          if (element !== null) {
+            if (element.children.length > 0 && !element.isCollapsed) {
+              store.toggleIsCollapsed(element.id, true);
+            } else {
+              selectParentElementInTree();
+            }
           }
           break;
         case 'ArrowRight':
@@ -129,14 +128,12 @@ export default function Tree(props: Props) {
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
               : null;
-          if (
-            element !== null &&
-            element.children.length > 0 &&
-            element.isCollapsed
-          ) {
-            store.toggleIsCollapsed(element.id, false);
-          } else {
-            selectNextElementInTree();
+          if (element !== null) {
+            if (element.children.length > 0 && element.isCollapsed) {
+              store.toggleIsCollapsed(element.id, false);
+            } else {
+              selectChildElementInTree();
+            }
           }
           break;
         case 'ArrowUp':
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index a2dcd63f65df..7d23766767ba 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -40,6 +40,7 @@ type Context = {|
   selectedElementID: number | null,
   selectedElementIndex: number | null,
   getElementAtIndex(index: number): Element | null,
+  selectChildElementInTree(): void,
   selectElementAtIndex(index: number): void,
   selectElementByID(id: number | null): void,
   selectNextElementInTree(): void,
@@ -91,6 +92,7 @@ type Action = {|
     | 'GO_TO_PREVIOUS_SEARCH_RESULT'
     | 'HANDLE_STORE_MUTATION'
     | 'RESET_OWNER_STACK'
+    | 'SELECT_CHILD_ELEMENT_IN_TREE'
     | 'SELECT_ELEMENT_AT_INDEX'
     | 'SELECT_ELEMENT_BY_ID'
     | 'SELECT_NEXT_ELEMENT_IN_TREE'
@@ -127,6 +129,20 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           selectedElementIndex = null;
         }
         break;
+      case 'SELECT_CHILD_ELEMENT_IN_TREE':
+        if (selectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((selectedElementIndex: any): number)
+          );
+          if (selectedElement !== null && selectedElement.children.length > 0) {
+            const firstChildID = selectedElement.children[0];
+            const firstChildIndex = store.getIndexOfElementID(firstChildID);
+            if (firstChildIndex !== null) {
+              selectedElementIndex = firstChildIndex;
+            }
+          }
+        }
+        break;
       case 'SELECT_ELEMENT_AT_INDEX':
         selectedElementIndex = ((payload: any): number | null);
         break;
@@ -157,8 +173,12 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
             ((selectedElementIndex: any): number)
           );
           if (selectedElement !== null && selectedElement.parentID !== null) {
-            selectedElementIndex =
-              store.getIndexOfElementID(selectedElement.parentID) || 0;
+            const parentIndex = store.getIndexOfElementID(
+              selectedElement.parentID
+            );
+            if (parentIndex !== null) {
+              selectedElementIndex = parentIndex;
+            }
           }
         }
         break;
@@ -568,6 +588,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
         case 'RESET_OWNER_STACK':
         case 'SELECT_ELEMENT_AT_INDEX':
         case 'SELECT_ELEMENT_BY_ID':
+        case 'SELECT_CHILD_ELEMENT_IN_TREE':
         case 'SELECT_NEXT_ELEMENT_IN_TREE':
         case 'SELECT_PARENT_ELEMENT_IN_TREE':
         case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
@@ -636,6 +657,10 @@ function TreeContextController({ children, viewElementSource }: Props) {
     () => dispatch({ type: 'RESET_OWNER_STACK' }),
     [dispatch]
   );
+  const selectChildElementInTree = useCallback(
+    () => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
+    [dispatch]
+  );
   const selectNextElementInTree = useCallback(
     () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
     [dispatch]
@@ -661,6 +686,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       selectedElementID: state.selectedElementID,
       selectedElementIndex: state.selectedElementIndex,
       getElementAtIndex,
+      selectChildElementInTree,
       selectElementByID,
       selectElementAtIndex,
       selectNextElementInTree,
@@ -689,6 +715,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       goToNextSearchResult,
       goToPreviousSearchResult,
       resetOwnerStack,
+      selectChildElementInTree,
       selectElementAtIndex,
       selectElementByID,
       selectNextElementInTree,

From 944a6192e2d5fab7b3c340258c86473bdef45b37 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Wed, 10 Apr 2019 15:00:51 -0300
Subject: [PATCH 326/814] Use button instead of div for a11y

---
 src/devtools/views/Components/KeyValue.css | 1 +
 src/devtools/views/Components/KeyValue.js  | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 31f78013172e..bb3363c8885d 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -32,5 +32,6 @@
   display: inline-flex;
   width: 1rem;
   height: 1rem;
+  padding: 0;
   color: var(--color-expand-collapse-toggle);
 }
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 9f8e4ec23c0c..f8361fdecfa8 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
+import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
@@ -81,9 +82,13 @@ export default function KeyValue({
     );
   } else {
     const opener = (
-      <div className={styles.Opener} onClick={handleToggle}>
+      <Button
+        className={styles.Opener}
+        onClick={handleToggle}
+        title={`${open ? 'Collapse' : 'Expand'} prop value`}
+      >
         <ButtonIcon type={open ? 'expanded' : 'collapsed'} />
-      </div>
+      </Button>
     );
 
     if (Array.isArray(value)) {

From f0fb1805fe85422e517cecc6b811b366c3f1486b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 11:03:32 -0700
Subject: [PATCH 327/814] Added new color-expand-collapse-toggle CSS var

---
 src/devtools/views/Components/Element.css      | 2 --
 src/devtools/views/Components/KeyValue.css     | 1 -
 src/devtools/views/Settings/SettingsContext.js | 1 +
 src/devtools/views/root.css                    | 2 ++
 4 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index b138fda32ad5..3353ede02abf 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -8,8 +8,6 @@
   align-items: center;
   cursor: default;
   user-select: none;
-
-  --color-expand-collapse-toggle: var(--color-dim);
 }
 .Element:hover {
   background-color: var(--color-hover-background);
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index bb3363c8885d..6e01c7153c37 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -1,6 +1,5 @@
 .Item {
   display: flex;
-  --color-expand-collapse-toggle: var(--color-dim);
 }
 
 .Name {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 44244f38df7e..1d0555c38882 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -222,6 +222,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
+  updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
   updateStyleHelper(theme, 'color-hover-background', documentElements);
   updateStyleHelper(theme, 'color-inactive-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 47541ff67a72..a68c3ffc85bc 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -33,6 +33,7 @@
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
+  --light-color-expand-collapse-toggle: #777d88;
   --light-color-hover-background: #ebf1fb;
   --light-color-inactive-background: #f1f1f1;
   --light-color-jsx-arrow-brackets: #333333;
@@ -78,6 +79,7 @@
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
+  --dark-color-expand-collapse-toggle: #8f949d;
   --dark-color-hover-background: #3d424a;
   --dark-color-inactive-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;

From 952c8cda00f7edf519fd23fc8671a61727f1133f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 19:30:45 +0100
Subject: [PATCH 328/814] Fix a bug that caused it to jump over nodes when
 pressing too fast

---
 src/devtools/views/Components/TreeContext.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 7d23766767ba..d610cddfb397 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -134,7 +134,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           const selectedElement = store.getElementAtIndex(
             ((selectedElementIndex: any): number)
           );
-          if (selectedElement !== null && selectedElement.children.length > 0) {
+          if (
+            selectedElement !== null &&
+            selectedElement.children.length > 0 &&
+            !selectedElement.isCollapsed
+          ) {
             const firstChildID = selectedElement.children[0];
             const firstChildIndex = store.getIndexOfElementID(firstChildID);
             if (firstChildIndex !== null) {

From 4f254c0a05cc6eba1aa8828736ef3617fc54017a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 11:44:45 -0700
Subject: [PATCH 329/814] Refactored KeyValue toggle so columns with toggles
 align better below those without

---
 src/devtools/views/Components/KeyValue.css |  3 +-
 src/devtools/views/Components/KeyValue.js  | 92 ++++++++++++----------
 2 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 6e01c7153c37..3d75d7fa1f62 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -5,6 +5,7 @@
 .Name {
   color: var(--color-dim);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName {
   color: var(--color-attribute-name);
@@ -27,7 +28,7 @@
   font-style: italic;
 }
 
-.Opener {
+.ExpandCollapseToggle {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index f8361fdecfa8..a980ef46d3f4 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
 import Button from '../Button';
@@ -26,11 +26,7 @@ export default function KeyValue({
   path = [],
   value,
 }: KeyValueProps) {
-  const [open, setOpen] = useState(false);
-
-  const handleToggle = () => {
-    setOpen(prevOpen => !prevOpen);
-  };
+  const [isOpen, setIsOpen] = useState<boolean>(true);
 
   const dataType = typeof value;
   const isSimpleType =
@@ -39,7 +35,9 @@ export default function KeyValue({
     dataType === 'boolean' ||
     value == null;
 
-  const paddingLeft = `${depth * 0.75}rem`;
+  const style = {
+    paddingLeft: `${(depth - 1) * 0.75}rem`,
+  };
 
   let children = null;
   if (isSimpleType) {
@@ -58,7 +56,8 @@ export default function KeyValue({
       typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;
 
     children = (
-      <div key="root" className={styles.Item} style={{ paddingLeft }}>
+      <div key="root" className={styles.Item} style={style}>
+        <div className={styles.ExpandCollapseToggle} />
         <span className={nameClassName}>{name}</span>
         {typeof overrideValueFn === 'function' ? (
           <EditableValue
@@ -75,26 +74,17 @@ export default function KeyValue({
   } else if (value.hasOwnProperty(meta.type)) {
     // TODO Is this type even necessary? Can we just drop it?
     children = (
-      <div key="root" className={styles.Item} style={{ paddingLeft }}>
+      <div key="root" className={styles.Item} style={style}>
+        <div className={styles.ExpandCollapseToggle} />
         <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
   } else {
-    const opener = (
-      <Button
-        className={styles.Opener}
-        onClick={handleToggle}
-        title={`${open ? 'Collapse' : 'Expand'} prop value`}
-      >
-        <ButtonIcon type={open ? 'expanded' : 'collapsed'} />
-      </Button>
-    );
-
     if (Array.isArray(value)) {
-      const showOpener = value.length > 0;
+      const hasChildren = value.length > 0;
 
-      children = open
+      children = isOpen
         ? value.map((innerValue, index) => (
             <KeyValue
               key={index}
@@ -107,24 +97,20 @@ export default function KeyValue({
           ))
         : [];
       children.unshift(
-        <div
-          key={`${depth}-root`}
-          className={styles.Item}
-          style={{
-            paddingLeft: showOpener
-              ? `calc(${paddingLeft} - 1rem)`
-              : paddingLeft,
-          }}
-        >
-          {showOpener && opener}
+        <div key={`${depth}-root`} className={styles.Item} style={style}>
+          {hasChildren ? (
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+          ) : (
+            <div className={styles.ExpandCollapseToggle} />
+          )}
           <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
     } else {
-      const showOpener = Object.entries(value).length > 0;
+      const hasChildren = Object.entries(value).length > 0;
 
-      children = open
+      children = isOpen
         ? Object.entries(value).map<Element<any>>(([name, value]) => (
             <KeyValue
               key={name}
@@ -137,16 +123,12 @@ export default function KeyValue({
           ))
         : [];
       children.unshift(
-        <div
-          key={`${depth}-root`}
-          className={styles.Item}
-          style={{
-            paddingLeft: showOpener
-              ? `calc(${paddingLeft} - 1rem)`
-              : paddingLeft,
-          }}
-        >
-          {showOpener && opener}
+        <div key={`${depth}-root`} className={styles.Item} style={style}>
+          {hasChildren ? (
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+          ) : (
+            <div className={styles.ExpandCollapseToggle} />
+          )}
           <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>
@@ -156,3 +138,27 @@ export default function KeyValue({
 
   return children;
 }
+
+type ExpandCollapseToggleProps = {|
+  isOpen: boolean,
+  setIsOpen: Function,
+|};
+
+function ExpandCollapseToggle({
+  isOpen,
+  setIsOpen,
+}: ExpandCollapseToggleProps) {
+  const handleClick = useCallback(() => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  }, [setIsOpen]);
+
+  return (
+    <Button
+      className={styles.ExpandCollapseToggle}
+      onClick={handleClick}
+      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
+    >
+      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
+    </Button>
+  );
+}

From e9f385591e37129f7fb8e43779c994302949184e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 12:36:26 -0700
Subject: [PATCH 330/814] Double clicking on a name toggles expanded state in
 KeyValue

---
 src/devtools/views/Components/KeyValue.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index a980ef46d3f4..ee9d0b965b11 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -26,7 +26,12 @@ export default function KeyValue({
   path = [],
   value,
 }: KeyValueProps) {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    []
+  );
 
   const dataType = typeof value;
   const isSimpleType =
@@ -103,7 +108,12 @@ export default function KeyValue({
           ) : (
             <div className={styles.ExpandCollapseToggle} />
           )}
-          <span className={styles.Name}>{name}</span>
+          <span
+            className={styles.Name}
+            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+          >
+            {name}
+          </span>
           <span>Array</span>
         </div>
       );
@@ -129,7 +139,12 @@ export default function KeyValue({
           ) : (
             <div className={styles.ExpandCollapseToggle} />
           )}
-          <span className={styles.Name}>{name}</span>
+          <span
+            className={styles.Name}
+            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+          >
+            {name}
+          </span>
           <span>Object</span>
         </div>
       );

From 84a5a13525af9d2ce25cccc2485fcd7b589bd56c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 12:37:20 -0700
Subject: [PATCH 331/814] Editable name not text-selectable

---
 src/devtools/views/Components/KeyValue.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 3d75d7fa1f62..2c47ed23c9c1 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -10,6 +10,7 @@
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName:after,
 .Name:after {

From 40469a190e79ea13cb482620055c05e221f64c17 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 12:47:51 -0700
Subject: [PATCH 332/814] Fixed horizontal alignment for collapsable hooks

---
 src/devtools/views/Components/HooksTree.css |  9 +++++-
 src/devtools/views/Components/HooksTree.js  | 31 +++++++++++++--------
 src/devtools/views/Components/KeyValue.css  |  5 +++-
 src/devtools/views/Components/KeyValue.js   |  8 +++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index a1acc5a49306..67bd155b90f7 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -4,7 +4,10 @@
 }
 
 .Hook {
-  padding-left: 0.75rem;
+}
+
+.Children {
+  padding-left: 1rem;
 }
 
 .HeaderRow {
@@ -50,3 +53,7 @@
 .TruncationIndicator {
   color: var(--color-dimmer);
 }
+
+.ExpandCollapseToggleSpacer {
+  width: 1rem;
+}
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index f89bd93cbcac..cb27a2ee6764 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -121,28 +121,34 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span className={styles.Name}>{name}</span>
           </div>
-          <KeyValue depth={1} name="DebugValue" value={value} />
-          <InnerHooksTreeView
-            canEditHooks={canEditHooks}
-            hooks={subHooks}
-            id={id}
-          />
+          <div className={styles.Children}>
+            <KeyValue depth={1} name="DebugValue" value={value} />
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     } else {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          <InnerHooksTreeView
-            canEditHooks={canEditHooks}
-            hooks={subHooks}
-            id={id}
-          />
+          <div className={styles.Children}>
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     }
@@ -166,7 +172,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <KeyValue
-            depth={0}
+            depth={1}
             name={name}
             overrideValueFn={overrideValueFn}
             value={value}
@@ -177,6 +183,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span
               className={
                 typeof overrideValueFn === 'function'
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 2c47ed23c9c1..565e7fbe2723 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -30,9 +30,12 @@
 }
 
 .ExpandCollapseToggle {
-  display: inline-flex;
   width: 1rem;
   height: 1rem;
   padding: 0;
   color: var(--color-expand-collapse-toggle);
 }
+
+.ExpandCollapseToggleSpacer {
+  width: 1rem;
+}
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ee9d0b965b11..ed965943f552 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -62,7 +62,7 @@ export default function KeyValue({
 
     children = (
       <div key="root" className={styles.Item} style={style}>
-        <div className={styles.ExpandCollapseToggle} />
+        <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={nameClassName}>{name}</span>
         {typeof overrideValueFn === 'function' ? (
           <EditableValue
@@ -80,7 +80,7 @@ export default function KeyValue({
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={style}>
-        <div className={styles.ExpandCollapseToggle} />
+        <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
@@ -106,7 +106,7 @@ export default function KeyValue({
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
-            <div className={styles.ExpandCollapseToggle} />
+            <div className={styles.ExpandCollapseToggleSpacer} />
           )}
           <span
             className={styles.Name}
@@ -137,7 +137,7 @@ export default function KeyValue({
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
-            <div className={styles.ExpandCollapseToggle} />
+            <div className={styles.ExpandCollapseToggleSpacer} />
           )}
           <span
             className={styles.Name}

From 7c13ea2f2b9aa11859c44f01dfeef29d402b276c Mon Sep 17 00:00:00 2001
From: Sophie Alpert <sophiebits@humu.com>
Date: Wed, 10 Apr 2019 16:31:11 -0700
Subject: [PATCH 333/814] Improve bridge batching logic

Fixes #132.
---
 src/bridge.js | 52 +++++++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/bridge.js b/src/bridge.js
index 454c4b9cde07..9b3c3dd318a0 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -13,7 +13,6 @@ type Message = {|
 
 export default class Bridge extends EventEmitter {
   _messageQueue: Array<any> = [];
-  _time: number | null = null;
   _timeoutID: TimeoutID | null = null;
   _wall: Wall;
 
@@ -28,34 +27,39 @@ export default class Bridge extends EventEmitter {
   }
 
   send(event: string, payload: any, transferable?: Array<any>) {
-    const time = this._time;
-
-    if (time === null) {
-      this._wall.send(event, payload, transferable);
-      this._time = Date.now();
-    } else {
-      this._messageQueue.push(event, payload, transferable);
-
-      const now = Date.now();
-      if (now - time > BATCH_DURATION) {
-        this._flush();
-      } else {
-        this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
-      }
+    // When we receive a message:
+    // - we add it to our queue of messages to be sent
+    // - if there hasn't been a message recently, we set a timer for 0 ms in
+    //   the future, allowing all messages created in the same tick to be sent
+    //   together
+    // - if there *has* been a message flushed in the last BATCH_DURATION ms
+    //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
+    //   be set, and we'll simply add to the queue and wait for that
+
+    this._messageQueue.push(event, payload, transferable);
+    if (!this._timeoutID) {
+      this._timeoutID = setTimeout(this._flush, 0);
     }
   }
 
   _flush = () => {
-    while (this._messageQueue.length) {
-      this._wall.send.apply(this._wall, this._messageQueue.splice(0, 3));
-    }
+    clearTimeout(this._timeoutID);
+    this._timeoutID = null;
 
-    if (this._timeoutID !== null) {
-      clearTimeout(this._timeoutID);
-      this._timeoutID = null;
-    }
+    if (this._messageQueue.length) {
+      for (let i = 0; i < this._messageQueue.length; i += 3) {
+        this._wall.send(
+          this._messageQueue[i],
+          this._messageQueue[i + 1],
+          this._messageQueue[i + 2],
+        );
+      }
+      this._messageQueue.length = 0;
 
-    this._messageQueue = [];
-    this._time = null;
+      // Check again for queued messages in BATCH_DURATION ms. This will keep
+      // flushing in a loop as long as messages continue to be added. Once no
+      // more are, the timer expires.
+      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
+    }
   };
 }

From 0281a0d905e9f961c8c881183f67b2c33cb03b8a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 11 Apr 2019 13:20:32 +0100
Subject: [PATCH 334/814] Add a missing dep

---
 src/devtools/views/Components/Tree.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index a003da2dd4af..d4171af604c6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -154,6 +154,7 @@ export default function Tree(props: Props) {
     };
   }, [
     selectedElementID,
+    selectChildElementInTree,
     selectNextElementInTree,
     selectParentElementInTree,
     selectPreviousElementInTree,

From 38b7cf56936b55a59d2e3dd405a60122dfc00af7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 11 Apr 2019 13:25:44 +0100
Subject: [PATCH 335/814] Ignore hover when navigating with keyboard

---
 src/devtools/views/Components/Element.css |  5 +-
 src/devtools/views/Components/Element.js  | 36 ++++++-----
 src/devtools/views/Components/Tree.js     | 76 ++++++++++++++++++++---
 3 files changed, 91 insertions(+), 26 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index b138fda32ad5..b7fb32aff5d0 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -1,6 +1,7 @@
 .Element,
 .InactiveSelectedElement,
-.SelectedElement {
+.SelectedElement,
+.HoveredElement {
   border-radius: 0.25em;
   white-space: nowrap;
   line-height: var(--line-height-data);
@@ -11,7 +12,7 @@
 
   --color-expand-collapse-toggle: var(--color-dim);
 }
-.Element:hover {
+.HoveredElement {
   background-color: var(--color-hover-background);
 }
 .InactiveSelectedElement {
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 3cb0ddd04e2e..16fb243ff223 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -7,13 +7,14 @@ import React, {
   useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
-import { BridgeContext, StoreContext } from '../context';
+import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
 import type { Element } from './types';
@@ -27,6 +28,7 @@ type Props = {
 };
 
 export default function ElementView({ data, index, style }: Props) {
+  const [isHovered, setIsHovered] = useState(false);
   const {
     baseDepth,
     getElementAtIndex,
@@ -35,15 +37,18 @@ export default function ElementView({ data, index, style }: Props) {
     selectedElementID,
     selectElementByID,
   } = useContext(TreeContext);
-  const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
   const element = getElementAtIndex(index);
 
+  const {
+    lastScrolledIDRef,
+    treeFocused,
+    isNavigatingWithKeyboard,
+    onElementMouseEnter,
+  } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
-  const lastScrolledIDRef = data.lastScrolledIDRef;
-  const treeFocused = data.treeFocused;
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
@@ -88,20 +93,16 @@ export default function ElementView({ data, index, style }: Props) {
     [id, selectElementByID]
   );
 
-  const rendererID = id !== null ? store.getRendererIDForElement(id) : null;
-  // Individual elements don't have a corresponding leave handler.
-  // Instead, it's implemented on the tree level.
   const handleMouseEnter = useCallback(() => {
-    if (element !== null && id !== null && rendererID !== null) {
-      bridge.send('highlightElementInDOM', {
-        displayName: element.displayName,
-        hideAfterTimeout: false,
-        id,
-        rendererID,
-        scrollIntoView: false,
-      });
+    setIsHovered(true);
+    if (id !== null) {
+      onElementMouseEnter(id);
     }
-  }, [bridge, element, id, rendererID]);
+  }, [onElementMouseEnter, id]);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
@@ -121,12 +122,15 @@ export default function ElementView({ data, index, style }: Props) {
     className = treeFocused
       ? styles.SelectedElement
       : styles.InactiveSelectedElement;
+  } else if (isHovered && !isNavigatingWithKeyboard) {
+    className = styles.HoveredElement;
   }
 
   return (
     <div
       className={className}
       onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       style={{
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index be3316df51dc..56787e8b4fc7 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -27,7 +27,9 @@ export type ItemData = {|
   baseDepth: number,
   numElements: number,
   getElementAtIndex: (index: number) => Element | null,
+  isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
+  onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
 |};
 
@@ -49,6 +51,9 @@ export default function Tree(props: Props) {
   } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
+    false
+  );
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
@@ -100,8 +105,6 @@ export default function Tree(props: Props) {
       }
 
       let element;
-
-      // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
@@ -143,7 +146,10 @@ export default function Tree(props: Props) {
           event.preventDefault();
           selectPreviousElementInTree();
           break;
+        default:
+          return;
       }
+      setIsNavigatingWithKeyboard(true);
     };
 
     // It's important to listen to the ownerDocument to support the browser extension.
@@ -163,8 +169,8 @@ export default function Tree(props: Props) {
     store,
   ]);
 
+  // Focus management.
   const handleBlur = useCallback(() => setTreeFocused(false));
-
   const handleFocus = useCallback(() => {
     setTreeFocused(true);
 
@@ -189,6 +195,53 @@ export default function Tree(props: Props) {
     [selectedElementID, selectOwner]
   );
 
+  const highlightElementInDOM = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null) {
+        bridge.send('highlightElementInDOM', {
+          displayName: element.displayName,
+          hideAfterTimeout: false,
+          id,
+          rendererID,
+          scrollIntoView: false,
+        });
+      }
+    },
+    [store, bridge]
+  );
+
+  // If we switch the selected element while using the keyboard,
+  // start highlighting it in the DOM instead of the last hovered node.
+  useEffect(() => {
+    if (isNavigatingWithKeyboard && selectedElementID !== null) {
+      highlightElementInDOM(selectedElementID);
+    }
+  }, [isNavigatingWithKeyboard, highlightElementInDOM, selectedElementID]);
+
+  // Highlight last hovered element.
+  const handleElementMouseEnter = useCallback(
+    id => {
+      // Ignore hover while we're navigating with keyboard.
+      // This avoids flicker from the hovered nodes under the mouse.
+      if (!isNavigatingWithKeyboard) {
+        highlightElementInDOM(id);
+      }
+    },
+    [isNavigatingWithKeyboard, highlightElementInDOM]
+  );
+
+  const handleMouseMove = useCallback(() => {
+    // We started using the mouse again.
+    // This will enable hover styles in individual rows.
+    setIsNavigatingWithKeyboard(false);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    bridge.send('clearHighlightedElementInDOM');
+  }, [bridge]);
+
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
@@ -196,16 +249,22 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
+      isNavigatingWithKeyboard,
+      onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
     }),
-    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef, treeFocused]
+    [
+      baseDepth,
+      numElements,
+      getElementAtIndex,
+      isNavigatingWithKeyboard,
+      handleElementMouseEnter,
+      lastScrolledIDRef,
+      treeFocused,
+    ]
   );
 
-  const handleMouseLeave = useCallback(() => {
-    bridge.send('clearHighlightedElementInDOM');
-  }, [bridge]);
-
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
@@ -217,6 +276,7 @@ export default function Tree(props: Props) {
         onBlur={handleBlur}
         onFocus={handleFocus}
         onKeyPress={handleKeyPress}
+        onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
         ref={focusTargetRef}
         tabIndex={0}

From 367249c175ab6f333fdfa2caf74cf2cb2c34c5b5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 14:00:27 -0700
Subject: [PATCH 336/814] Don't drill into owners list if no owner metadata is
 available

---
 src/backend/renderer.js                       |  5 +-
 src/bridge.js                                 |  2 +-
 src/devtools/store.js                         | 30 +++++++++--
 src/devtools/views/Components/TreeContext.js  | 50 ++++++++++---------
 .../views/Profiler/CommitTreeBuilder.js       |  1 +
 5 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cccc27779a83..3c5729c73f07 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -639,12 +639,15 @@ export function attach(
       idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
     }
 
+    const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
+
     if (isRoot) {
-      const operation = new Uint32Array(4);
+      const operation = new Uint32Array(5);
       operation[0] = TREE_OPERATION_ADD;
       operation[1] = id;
       operation[2] = ElementTypeRoot;
       operation[3] = isProfilingSupported ? 1 : 0;
+      operation[4] = hasOwnerMetadata ? 1 : 0;
       addOperation(operation);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
diff --git a/src/bridge.js b/src/bridge.js
index 9b3c3dd318a0..3eed1efb16dd 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -51,7 +51,7 @@ export default class Bridge extends EventEmitter {
         this._wall.send(
           this._messageQueue[i],
           this._messageQueue[i + 1],
-          this._messageQueue[i + 2],
+          this._messageQueue[i + 2]
         );
       }
       this._messageQueue.length = 0;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d81b6e89c1e7..4a829938d5fb 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -48,6 +48,7 @@ type Config = {|
 |};
 
 export type Capabilities = {|
+  hasOwnerMetadata: boolean,
   supportsProfiling: boolean,
 |};
 
@@ -60,6 +61,9 @@ export default class Store extends EventEmitter {
 
   _captureScreenshots: boolean = false;
 
+  // At least one of the injected renderers contains (DEV only) owner metadata.
+  _hasOwnerMetadata: boolean = false;
+
   // Map of ID to Element.
   // Elements are mutable (for now) to avoid excessive cloning during tree updates.
   _idToElement: Map<number, Element> = new Map();
@@ -174,6 +178,10 @@ export default class Store extends EventEmitter {
     this.emit('captureScreenshots');
   }
 
+  get hasOwnerMetadata(): boolean {
+    return this._hasOwnerMetadata;
+  }
+
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
     return (
@@ -534,9 +542,15 @@ export default class Store extends EventEmitter {
             const supportsProfiling = operations[i] > 0;
             i++;
 
+            const hasOwnerMetadata = operations[i] > 0;
+            i++;
+
             this._roots = this._roots.concat(id);
             this._rootIDToRendererID.set(id, rendererID);
-            this._rootIDToCapabilities.set(id, { supportsProfiling });
+            this._rootIDToCapabilities.set(id, {
+              hasOwnerMetadata,
+              supportsProfiling,
+            });
 
             this._idToElement.set(id, {
               children: [],
@@ -768,12 +782,18 @@ export default class Store extends EventEmitter {
     this._revision++;
 
     if (haveRootsChanged) {
+      this._hasOwnerMetadata = false;
       this._supportsProfiling = false;
-      this._rootIDToCapabilities.forEach(({ supportsProfiling }) => {
-        if (supportsProfiling) {
-          this._supportsProfiling = true;
+      this._rootIDToCapabilities.forEach(
+        ({ hasOwnerMetadata, supportsProfiling }) => {
+          if (hasOwnerMetadata) {
+            this._hasOwnerMetadata = true;
+          }
+          if (supportsProfiling) {
+            this._supportsProfiling = true;
+          }
         }
-      });
+      );
 
       this.emit('roots');
     }
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index d610cddfb397..4594c7dfa041 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -484,30 +484,34 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       }
       break;
     case 'SELECT_OWNER':
-      ownerStackIndex = ownerStack.indexOf(payload);
-
-      // Always force reset selection to be the top of the new owner tree.
-      selectedElementIndex = 0;
-      prevSelectedElementIndex = null;
-
-      // If this owner is already in the current stack, just select it.
-      // Otherwise, create a new stack.
-      if (ownerStackIndex < 0) {
-        // Add this new owner, and fill in the owners above it as well.
-        ownerStack = [];
-        let currentOwnerID = ((payload: any): number);
-        while (currentOwnerID !== 0) {
-          ownerStack.unshift(currentOwnerID);
-          currentOwnerID = ((store.getElementByID(
-            currentOwnerID
-          ): any): Element).ownerID;
-        }
-        ownerStackIndex = ownerStack.length - 1;
+      // If the Store doesn't have any owners metadata, don't drill into an empty stack.
+      // This is a confusing user experience.
+      if (store.hasOwnerMetadata) {
+        ownerStackIndex = ownerStack.indexOf(payload);
+
+        // Always force reset selection to be the top of the new owner tree.
+        selectedElementIndex = 0;
+        prevSelectedElementIndex = null;
+
+        // If this owner is already in the current stack, just select it.
+        // Otherwise, create a new stack.
+        if (ownerStackIndex < 0) {
+          // Add this new owner, and fill in the owners above it as well.
+          ownerStack = [];
+          let currentOwnerID = ((payload: any): number);
+          while (currentOwnerID !== 0) {
+            ownerStack.unshift(currentOwnerID);
+            currentOwnerID = ((store.getElementByID(
+              currentOwnerID
+            ): any): Element).ownerID;
+          }
+          ownerStackIndex = ownerStack.length - 1;
 
-        if (searchText !== '') {
-          searchIndex = null;
-          searchResults = [];
-          searchText = '';
+          if (searchText !== '') {
+            searchIndex = null;
+            searchResults = [];
+            searchText = '';
+          }
         }
       }
       break;
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 39fa6c131c48..2629fbeedbca 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -194,6 +194,7 @@ function updateTree(
 
         if (type === ElementTypeRoot) {
           i++; // supportsProfiling flag
+          i++; // hasOwnerMetadata flag
 
           if (__DEBUG__) {
             debug('Add', `new root fiber ${id}`);

From 9642d26674671d8aa6a60e63ccfb166712b9f8d6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 17:19:03 -0700
Subject: [PATCH 337/814] Added ErrorBoundary with GitHub bug link

---
 .eslintrc                                     |   1 +
 shells/browser/shared/webpack.backend.js      |  10 ++
 shells/browser/shared/webpack.config.js       |  10 ++
 shells/dev/webpack.config.js                  |  10 ++
 src/devtools/views/Components/Components.js   |  16 +--
 src/devtools/views/ErrorBoundary.css          |  24 ++++
 src/devtools/views/ErrorBoundary.js           | 105 ++++++++++++++++++
 src/devtools/views/Profiler/Profiler.js       |  19 +---
 src/devtools/views/Settings/Settings.js       |  16 +--
 .../views/Settings/SettingsContext.js         |   6 +
 src/devtools/views/portaledContent.js         |  25 +++++
 src/devtools/views/root.css                   |   4 +
 12 files changed, 211 insertions(+), 35 deletions(-)
 create mode 100644 src/devtools/views/ErrorBoundary.css
 create mode 100644 src/devtools/views/ErrorBoundary.js
 create mode 100644 src/devtools/views/portaledContent.js

diff --git a/.eslintrc b/.eslintrc
index 7d12dff784a4..478f849f9442 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,6 +2,7 @@
   "extends": ["react-app","plugin:prettier/recommended"],
   "plugins": ["react-hooks"],
   "rules": {
+    "jsx-a11y/anchor-has-content": "off",
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error"
   },
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index bf158326f52b..08ffeaa92c6f 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,9 +1,18 @@
+const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
+// TODO potentially replac this with an fb.me URL (if it can forward the query params)
+const GITHUB_URL = execSync('git remote get-url origin')
+  .toString()
+  .trim()
+  .replace(':', '/')
+  .replace('git@', 'https://')
+  .replace('.git', '');
+
 const DEVTOOLS_VERSION = JSON.parse(
   readFileSync(resolve(__dirname, '../../../package.json'))
 ).version;
@@ -27,6 +36,7 @@ module.exports = {
     new DefinePlugin({
       __DEV__: true,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
   ],
   module: {
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 42fc87775193..2e59d3853c19 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -1,3 +1,4 @@
+const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
@@ -5,6 +6,14 @@ const { DefinePlugin } = require('webpack');
 const NODE_ENV = process.env.NODE_ENV;
 const __DEV__ = NODE_ENV !== 'production';
 
+// TODO potentially replac this with an fb.me URL (if it can forward the query params)
+const GITHUB_URL = execSync('git remote get-url origin')
+  .toString()
+  .trim()
+  .replace(':', '/')
+  .replace('git@', 'https://')
+  .replace('.git', '');
+
 const DEVTOOLS_VERSION = JSON.parse(
   readFileSync(resolve(__dirname, '../../../package.json'))
 ).version;
@@ -33,6 +42,7 @@ module.exports = {
     new DefinePlugin({
       __DEV__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
     }),
   ],
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 8e9ec32d2340..1b66e0688021 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -1,9 +1,18 @@
+const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
+// TODO potentially replac this with an fb.me URL (if it can forward the query params)
+const GITHUB_URL = execSync('git remote get-url origin')
+  .toString()
+  .trim()
+  .replace(':', '/')
+  .replace('git@', 'https://')
+  .replace('.git', '');
+
 const DEVTOOLS_VERSION = JSON.parse(
   readFileSync(resolve(__dirname, '../../package.json'))
 ).version;
@@ -30,6 +39,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: __DEV__,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
   ],
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 8a6216baec27..f38830baab6e 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -1,18 +1,14 @@
 // @flow
 
 import React from 'react';
-import { createPortal } from 'react-dom';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import styles from './Components.css';
+import portaledContent from '../portaledContent';
 
-export type Props = {|
-  portalContainer?: Element,
-|};
-
-export default function Components({ portalContainer }: Props) {
+function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
-  const children = (
+  return (
     <div className={styles.Components}>
       <div className={styles.TreeWrapper}>
         <Tree />
@@ -22,8 +18,6 @@ export default function Components({ portalContainer }: Props) {
       </div>
     </div>
   );
-
-  return portalContainer != null
-    ? createPortal(children, portalContainer)
-    : children;
 }
+
+export default portaledContent(Components);
diff --git a/src/devtools/views/ErrorBoundary.css b/src/devtools/views/ErrorBoundary.css
new file mode 100644
index 000000000000..eae6299fd74e
--- /dev/null
+++ b/src/devtools/views/ErrorBoundary.css
@@ -0,0 +1,24 @@
+.ErrorBoundary {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  color: red;
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  font-weight: bold;
+}
+
+.Stack {
+  margin-top: 0.5rem;
+  white-space: pre;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  background-color: hsl(0, 100%, 97%);
+  border: 1px solid hsl(0, 100%, 92%);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
diff --git a/src/devtools/views/ErrorBoundary.js b/src/devtools/views/ErrorBoundary.js
new file mode 100644
index 000000000000..c6cd9b16c1ff
--- /dev/null
+++ b/src/devtools/views/ErrorBoundary.js
@@ -0,0 +1,105 @@
+// @flow
+
+import React, { Component } from 'react';
+import styles from './ErrorBoundary.css';
+
+type Props = {|
+  children: React$Node,
+|};
+
+type State = {|
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+  hasError: boolean,
+|};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = {
+    callStack: null,
+    componentStack: null,
+    errorMessage: null,
+    hasError: false,
+  };
+
+  componentDidCatch(error: any, { componentStack }: any) {
+    const errorMessage =
+      typeof error === 'object' && error.hasOwnProperty('message')
+        ? error.message
+        : error;
+
+    const callStack =
+      typeof error === 'object' && error.hasOwnProperty('stack')
+        ? error.stack
+            .split('\n')
+            .slice(1)
+            .join('\n')
+        : null;
+
+    this.setState({
+      callStack,
+      componentStack,
+      errorMessage,
+      hasError: true,
+    });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { callStack, componentStack, errorMessage, hasError } = this.state;
+
+    let bugURL = process.env.GITHUB_URL;
+    if (bugURL) {
+      const title = `Error: "${errorMessage || ''}"`;
+      const label = '😭 bug';
+
+      let body = '<!-- please provide repro information here -->\n';
+      body += '\n---------------------------------------------';
+      body += '\nPlease do not remove the text below this line';
+      body += '\n---------------------------------------------';
+      body += `\n\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;
+      if (callStack) {
+        body += `\n\nCall stack: ${callStack.trim()}`;
+      }
+      if (componentStack) {
+        body += `\n\nComponent stack: ${componentStack.trim()}`;
+      }
+
+      bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
+        title
+      )}&body=${encodeURI(body)}`;
+    }
+
+    if (hasError) {
+      return (
+        <div className={styles.ErrorBoundary}>
+          <div className={styles.Header}>
+            An error was thrown: "{errorMessage}"
+          </div>
+          {bugURL && (
+            <a
+              href={bugURL}
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Report bug"
+            >
+              Report this issue
+            </a>
+          )}
+          {!!callStack && (
+            <div className={styles.Stack}>
+              The error was thrown {callStack.trim()}
+            </div>
+          )}
+          {!!componentStack && (
+            <div className={styles.Stack}>
+              The error occurred {componentStack.trim()}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 4b346dd413aa..1a5e002c8ab2 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { Suspense, useCallback, useContext } from 'react';
-import { createPortal } from 'react-dom';
 import {
   CommitFilterModalContext,
   CommitFilterModalContextController,
@@ -21,25 +20,21 @@ import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
 import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
 import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
+import portaledContent from '../portaledContent';
 
 import styles from './Profiler.css';
 
 export type Props = {|
-  portalContainer?: Element,
   supportsProfiling: boolean,
 |};
 
-export default function Profiler({
-  portalContainer,
-  supportsProfiling,
-}: Props) {
+function Profiler({ supportsProfiling }: Props) {
   const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
     ProfilerContext
   );
 
-  let children = null;
   if (isProfiling || !rootHasProfilingData) {
-    children = (
+    return (
       <NonSuspendingProfiler
         hasProfilingData={hasProfilingData}
         isProfiling={isProfiling}
@@ -47,16 +42,12 @@ export default function Profiler({
       />
     );
   } else {
-    children = (
+    return (
       <CommitFilterModalContextController>
         <SuspendingProfiler />
       </CommitFilterModalContextController>
     );
   }
-
-  return portalContainer != null
-    ? createPortal(children, portalContainer)
-    : children;
 }
 
 // This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).
@@ -271,3 +262,5 @@ const RecortdingInProgress = () => (
     </div>
   </div>
 );
+
+export default portaledContent(Profiler);
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index f647162a8a12..1725aa87d278 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,19 +1,15 @@
 // @flow
 
 import React, { useCallback, useContext, useMemo } from 'react';
-import { createPortal } from 'react-dom';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
 import Store from 'src/devtools/store';
+import portaledContent from '../portaledContent';
 
 import styles from './Settings.css';
 
-export type Props = {|
-  portalContainer?: Element,
-|};
-
-export default function Settings({ portalContainer }: Props) {
+function Settings(_: {||}) {
   const store = useContext(StoreContext);
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
     SettingsContext
@@ -52,7 +48,7 @@ export default function Settings({ portalContainer }: Props) {
     [store]
   );
 
-  const children = (
+  return (
     <div className={styles.Settings}>
       <div className={styles.Section}>
         <div className={styles.Header}>Theme</div>
@@ -135,8 +131,6 @@ export default function Settings({ portalContainer }: Props) {
       )}
     </div>
   );
-
-  return portalContainer != null
-    ? createPortal(children, portalContainer)
-    : children;
 }
+
+export default portaledContent(Settings);
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 1d0555c38882..f25f3a8153d9 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -184,8 +184,14 @@ function updateDisplayDensity(
     'font-size-monospace-large',
     documentElements
   );
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-small',
+    documentElements
+  );
   updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
   updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
+  updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
   updateStyleHelper(displayDensity, 'line-height-data', documentElements);
 }
 
diff --git a/src/devtools/views/portaledContent.js b/src/devtools/views/portaledContent.js
new file mode 100644
index 000000000000..546524b6959e
--- /dev/null
+++ b/src/devtools/views/portaledContent.js
@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import ErrorBoundary from './ErrorBoundary';
+
+export type Props = {
+  portalContainer?: Element,
+};
+
+export default function portaledContent(
+  Component: React$StatelessFunctionalComponent<any>
+): React$StatelessFunctionalComponent<any> {
+  return function PortaledContent({ portalContainer, ...rest }: Props) {
+    const children = (
+      <ErrorBoundary>
+        <Component {...rest} />
+      </ErrorBoundary>
+    );
+
+    return portalContainer != null
+      ? createPortal(children, portalContainer)
+      : children;
+  };
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index a68c3ffc85bc..24ce5b591538 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -96,15 +96,19 @@
   --dark-color-text-color: #ffffff;
 
   /* Compact density */
+  --compact-font-size-monospace-small: 9px;
   --compact-font-size-monospace-normal: 11px;
   --compact-font-size-monospace-large: 15px;
+  --compact-font-size-sans-small: 10px;
   --compact-font-size-sans-normal: 12px;
   --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
 
   /* Comfortable density */
+  --comfortable-font-size-monospace-small: 10px;
   --comfortable-font-size-monospace-normal: 13px;
   --comfortable-font-size-monospace-large: 17px;
+  --comfortable-font-size-sans-small: 12px;
   --comfortable-font-size-sans-normal: 14px;
   --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;

From 2671e7e0e017a82adbac9ccee0845004c715ab51 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Thu, 11 Apr 2019 21:38:57 -0300
Subject: [PATCH 338/814] Fix fiber info sidepanel not scrollable

---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index a3759a1a6d30..6c4a0ca65c1c 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -10,6 +10,7 @@
   padding: 0.5rem;
   user-select: none;
   border-top: 1px solid var(--color-border);
+  overflow-y: auto;
 }
 
 .Component {

From 3ea5fac959f863336a437dcaae0d465acf2a83ad Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 18:29:06 -0700
Subject: [PATCH 339/814] Enable text to wrap within error boundary stacks

---
 src/devtools/views/ErrorBoundary.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/ErrorBoundary.css b/src/devtools/views/ErrorBoundary.css
index eae6299fd74e..8a4b506c855b 100644
--- a/src/devtools/views/ErrorBoundary.css
+++ b/src/devtools/views/ErrorBoundary.css
@@ -14,7 +14,7 @@
 
 .Stack {
   margin-top: 0.5rem;
-  white-space: pre;
+  white-space: pre-wrap;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
   background-color: hsl(0, 100%, 97%);

From 9a0cf68a4d609a571d8840fada2e2e2d85a426bf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 18:44:44 -0700
Subject: [PATCH 340/814] Add Git revision to build version

---
 shells/browser/shared/build.js           |  8 +++++--
 shells/browser/shared/webpack.backend.js | 15 +++----------
 shells/browser/shared/webpack.config.js  | 15 +++----------
 shells/dev/webpack.config.js             | 17 +++------------
 shells/utils.js                          | 27 ++++++++++++++++++++++++
 5 files changed, 42 insertions(+), 40 deletions(-)
 create mode 100644 shells/utils.js

diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 846f73967094..2a6929feebaf 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -32,7 +32,9 @@ const build = async (tempPath, manifestPath) => {
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: Object.assign({}, process.env, { NODE_ENV: 'production' }),
+      env: Object.assign({}, process.env, {
+        NODE_ENV: 'production',
+      }),
       stdio: 'inherit',
     }
   );
@@ -40,7 +42,9 @@ const build = async (tempPath, manifestPath) => {
     `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: Object.assign({}, process.env, { NODE_ENV: 'production' }),
+      env: Object.assign({}, process.env, {
+        NODE_ENV: 'production',
+      }),
       stdio: 'inherit',
     }
   );
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index 08ffeaa92c6f..b5f6ef58c5b2 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,21 +1,12 @@
-const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../utils');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
-// TODO potentially replac this with an fb.me URL (if it can forward the query params)
-const GITHUB_URL = execSync('git remote get-url origin')
-  .toString()
-  .trim()
-  .replace(':', '/')
-  .replace('git@', 'https://')
-  .replace('.git', '');
-
-const DEVTOOLS_VERSION = JSON.parse(
-  readFileSync(resolve(__dirname, '../../../package.json'))
-).version;
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 2e59d3853c19..9e510d4b5fce 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -1,22 +1,13 @@
-const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 const __DEV__ = NODE_ENV !== 'production';
 
-// TODO potentially replac this with an fb.me URL (if it can forward the query params)
-const GITHUB_URL = execSync('git remote get-url origin')
-  .toString()
-  .trim()
-  .replace(':', '/')
-  .replace('git@', 'https://')
-  .replace('.git', '');
-
-const DEVTOOLS_VERSION = JSON.parse(
-  readFileSync(resolve(__dirname, '../../../package.json'))
-).version;
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 1b66e0688021..e84144a08cb5 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -1,23 +1,12 @@
-const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../utils');
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
-// TODO potentially replac this with an fb.me URL (if it can forward the query params)
-const GITHUB_URL = execSync('git remote get-url origin')
-  .toString()
-  .trim()
-  .replace(':', '/')
-  .replace('git@', 'https://')
-  .replace('.git', '');
-
-const DEVTOOLS_VERSION = JSON.parse(
-  readFileSync(resolve(__dirname, '../../package.json'))
-).version;
-
-// TODO Share Webpack configs like alias
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
   mode: 'development',
diff --git a/shells/utils.js b/shells/utils.js
new file mode 100644
index 000000000000..8f0d875d3226
--- /dev/null
+++ b/shells/utils.js
@@ -0,0 +1,27 @@
+const { execSync } = require('child_process');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
+
+function getGitHubURL() {
+  // TODO potentially replac this with an fb.me URL (if it can forward the query params)
+  return execSync('git remote get-url origin')
+    .toString()
+    .trim()
+    .replace(':', '/')
+    .replace('git@', 'https://')
+    .replace('.git', '');
+}
+
+function getVersionString() {
+  const packageVersion = JSON.parse(
+    readFileSync(resolve(__dirname, '../package.json'))
+  ).version;
+
+  const commit = execSync('git show -s --format=%h')
+    .toString()
+    .trim();
+
+  return `${packageVersion}-${commit}`;
+}
+
+module.exports = { getGitHubURL, getVersionString };

From 94810b2b5acc6b860df4dfa2881b62030806d518 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 19:06:07 -0700
Subject: [PATCH 341/814] Add Git revision to extension manifests

---
 shells/browser/shared/build.js | 10 +++++++++-
 shells/utils.js                | 12 ++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 2a6929feebaf..63b38b993cf7 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -2,8 +2,10 @@
 
 const AdmZip = require('adm-zip');
 const { execSync } = require('child_process');
+const { readFileSync, writeFileSync } = require('fs');
 const { copy, ensureDir, move, remove } = require('fs-extra');
 const { join } = require('path');
+const { getGitCommit } = require('../../utils');
 
 // These files are copied along with Webpack-bundled files
 // to produce the final web extension
@@ -52,13 +54,19 @@ const build = async (tempPath, manifestPath) => {
   // Make temp dir
   await ensureDir(zipPath);
 
+  const copiedManifestPath = join(zipPath, 'manifest.json');
+
   // Copy unbuilt source files to zip dir to be packaged:
   await copy(binPath, join(zipPath, 'build'));
-  await copy(manifestPath, join(zipPath, 'manifest.json'));
+  await copy(manifestPath, copiedManifestPath);
   await Promise.all(
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
   );
 
+  let manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  manifest.description += `\n\nCreated from revision ${getGitCommit()}`;
+  writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
+
   // Pack the extension
   const zip = new AdmZip();
   zip.addLocalFolder(zipPath);
diff --git a/shells/utils.js b/shells/utils.js
index 8f0d875d3226..6f55ca815897 100644
--- a/shells/utils.js
+++ b/shells/utils.js
@@ -2,6 +2,12 @@ const { execSync } = require('child_process');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 
+function getGitCommit() {
+  return execSync('git show -s --format=%h')
+    .toString()
+    .trim();
+}
+
 function getGitHubURL() {
   // TODO potentially replac this with an fb.me URL (if it can forward the query params)
   return execSync('git remote get-url origin')
@@ -17,11 +23,9 @@ function getVersionString() {
     readFileSync(resolve(__dirname, '../package.json'))
   ).version;
 
-  const commit = execSync('git show -s --format=%h')
-    .toString()
-    .trim();
+  const commit = getGitCommit();
 
   return `${packageVersion}-${commit}`;
 }
 
-module.exports = { getGitHubURL, getVersionString };
+module.exports = { getGitCommit, getGitHubURL, getVersionString };

From da4accda31fa35879c8cf56992fc8171a5b4b2fb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 08:39:03 -0700
Subject: [PATCH 342/814] Added expand/collapse toggles to custom hooks

---
 .../views/Components/ExpandCollapseToggle.css |  6 ++
 .../views/Components/ExpandCollapseToggle.js  | 31 ++++++++++
 src/devtools/views/Components/HooksTree.css   |  2 +
 src/devtools/views/Components/HooksTree.js    | 57 ++++++++++++-------
 src/devtools/views/Components/KeyValue.css    |  7 ---
 src/devtools/views/Components/KeyValue.js     | 27 +--------
 6 files changed, 77 insertions(+), 53 deletions(-)
 create mode 100644 src/devtools/views/Components/ExpandCollapseToggle.css
 create mode 100644 src/devtools/views/Components/ExpandCollapseToggle.js

diff --git a/src/devtools/views/Components/ExpandCollapseToggle.css b/src/devtools/views/Components/ExpandCollapseToggle.css
new file mode 100644
index 000000000000..a686fcd1dcca
--- /dev/null
+++ b/src/devtools/views/Components/ExpandCollapseToggle.css
@@ -0,0 +1,6 @@
+.ExpandCollapseToggle {
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  color: var(--color-expand-collapse-toggle);
+}
diff --git a/src/devtools/views/Components/ExpandCollapseToggle.js b/src/devtools/views/Components/ExpandCollapseToggle.js
new file mode 100644
index 000000000000..b5425c8129ea
--- /dev/null
+++ b/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './ExpandCollapseToggle.css';
+
+type ExpandCollapseToggleProps = {|
+  isOpen: boolean,
+  setIsOpen: Function,
+|};
+
+export default function ExpandCollapseToggle({
+  isOpen,
+  setIsOpen,
+}: ExpandCollapseToggleProps) {
+  const handleClick = useCallback(() => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  }, [setIsOpen]);
+
+  return (
+    <Button
+      className={styles.ExpandCollapseToggle}
+      onClick={handleClick}
+      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
+    >
+      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 67bd155b90f7..8eb3312b4dee 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -27,10 +27,12 @@
 .Name {
   color: var(--color-dim);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName:after,
 .Name:after {
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index cb27a2ee6764..ac6dee5ea1e0 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -1,11 +1,12 @@
 // @flow
 
 import { copy } from 'clipboard-js';
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import EditableValue from './EditableValue';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
 import KeyValue from './KeyValue';
 import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
@@ -76,6 +77,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    []
+  );
+
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
     // TODO: show UI to load its data.
@@ -121,34 +129,43 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.ExpandCollapseToggleSpacer} />
-            <span className={styles.Name}>{name}</span>
-          </div>
-          <div className={styles.Children}>
-            <KeyValue depth={1} name="DebugValue" value={value} />
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
-            />
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+              {name}
+            </span>
           </div>
+          {isOpen && (
+            <div className={styles.Children}>
+              <KeyValue depth={1} name="DebugValue" value={value} />
+              <InnerHooksTreeView
+                canEditHooks={canEditHooks}
+                hooks={subHooks}
+                id={id}
+              />
+            </div>
+          )}
         </div>
       );
     } else {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.ExpandCollapseToggleSpacer} />
-            <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+              {name}
+            </span>{' '}
+            {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          <div className={styles.Children}>
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
-            />
-          </div>
+          {isOpen && (
+            <div className={styles.Children}>
+              <InnerHooksTreeView
+                canEditHooks={canEditHooks}
+                hooks={subHooks}
+                id={id}
+              />
+            </div>
+          )}
         </div>
       );
     }
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 565e7fbe2723..25340bdd560a 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -29,13 +29,6 @@
   font-style: italic;
 }
 
-.ExpandCollapseToggle {
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  color: var(--color-expand-collapse-toggle);
-}
-
 .ExpandCollapseToggleSpacer {
   width: 1rem;
 }
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ed965943f552..cfcb04cc7007 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -3,8 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
@@ -153,27 +152,3 @@ export default function KeyValue({
 
   return children;
 }
-
-type ExpandCollapseToggleProps = {|
-  isOpen: boolean,
-  setIsOpen: Function,
-|};
-
-function ExpandCollapseToggle({
-  isOpen,
-  setIsOpen,
-}: ExpandCollapseToggleProps) {
-  const handleClick = useCallback(() => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  }, [setIsOpen]);
-
-  return (
-    <Button
-      className={styles.ExpandCollapseToggle}
-      onClick={handleClick}
-      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
-    >
-      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
-    </Button>
-  );
-}

From ae7ea00e06e04cc6747c831a6f6b88c7e1c0e7bc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 08:42:27 -0700
Subject: [PATCH 343/814] Fix small sizing issue with expand collapse toggle

---
 src/devtools/views/Components/ExpandCollapseToggle.css | 1 +
 src/devtools/views/Components/HooksTree.css            | 1 +
 src/devtools/views/Components/KeyValue.css             | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/devtools/views/Components/ExpandCollapseToggle.css b/src/devtools/views/Components/ExpandCollapseToggle.css
index a686fcd1dcca..38b2aa6f7e5c 100644
--- a/src/devtools/views/Components/ExpandCollapseToggle.css
+++ b/src/devtools/views/Components/ExpandCollapseToggle.css
@@ -1,4 +1,5 @@
 .ExpandCollapseToggle {
+  flex: 0 0 1rem;
   width: 1rem;
   height: 1rem;
   padding: 0;
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 8eb3312b4dee..819c556d3660 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -57,5 +57,6 @@
 }
 
 .ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
   width: 1rem;
 }
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 25340bdd560a..892bee1a3915 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -30,5 +30,6 @@
 }
 
 .ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
   width: 1rem;
 }

From 7aadcdf624a9588128ef4bb54466f2880afe2aa7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 08:53:41 -0700
Subject: [PATCH 344/814] Use :hidden attribute to collapse props/hooks

---
 src/devtools/views/Components/HooksTree.js | 34 +++++------
 src/devtools/views/Components/KeyValue.css |  2 +-
 src/devtools/views/Components/KeyValue.js  | 66 +++++++++++++---------
 3 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index ac6dee5ea1e0..81c19f650e5d 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -134,16 +134,14 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
               {name}
             </span>
           </div>
-          {isOpen && (
-            <div className={styles.Children}>
-              <KeyValue depth={1} name="DebugValue" value={value} />
-              <InnerHooksTreeView
-                canEditHooks={canEditHooks}
-                hooks={subHooks}
-                id={id}
-              />
-            </div>
-          )}
+          <div className={styles.Children} hidden={!isOpen}>
+            <KeyValue depth={1} name="DebugValue" value={value} />
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     } else {
@@ -157,15 +155,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
             {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          {isOpen && (
-            <div className={styles.Children}>
-              <InnerHooksTreeView
-                canEditHooks={canEditHooks}
-                hooks={subHooks}
-                id={id}
-              />
-            </div>
-          )}
+          <div className={styles.Children} hidden={!isOpen}>
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     }
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 892bee1a3915..08230f57ac33 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -1,4 +1,4 @@
-.Item {
+.Item:not([hidden]) {
   display: flex;
 }
 
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index cfcb04cc7007..955514de0dbe 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -12,6 +12,7 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type KeyValueProps = {|
   depth: number,
+  hidden?: boolean,
   name: string,
   overrideValueFn?: ?OverrideValueFn,
   path?: Array<any>,
@@ -20,6 +21,7 @@ type KeyValueProps = {|
 
 export default function KeyValue({
   depth,
+  hidden,
   name,
   overrideValueFn,
   path = [],
@@ -60,7 +62,7 @@ export default function KeyValue({
       typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;
 
     children = (
-      <div key="root" className={styles.Item} style={style}>
+      <div key="root" className={styles.Item} hidden={hidden} style={style}>
         <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={nameClassName}>{name}</span>
         {typeof overrideValueFn === 'function' ? (
@@ -78,7 +80,7 @@ export default function KeyValue({
   } else if (value.hasOwnProperty(meta.type)) {
     // TODO Is this type even necessary? Can we just drop it?
     children = (
-      <div key="root" className={styles.Item} style={style}>
+      <div key="root" className={styles.Item} hidden={hidden} style={style}>
         <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
@@ -88,20 +90,24 @@ export default function KeyValue({
     if (Array.isArray(value)) {
       const hasChildren = value.length > 0;
 
-      children = isOpen
-        ? value.map((innerValue, index) => (
-            <KeyValue
-              key={index}
-              depth={depth + 1}
-              name={index}
-              overrideValueFn={overrideValueFn}
-              path={path.concat(index)}
-              value={value[index]}
-            />
-          ))
-        : [];
+      children = value.map((innerValue, index) => (
+        <KeyValue
+          key={index}
+          depth={depth + 1}
+          hidden={hidden || !isOpen}
+          name={index}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(index)}
+          value={value[index]}
+        />
+      ));
       children.unshift(
-        <div key={`${depth}-root`} className={styles.Item} style={style}>
+        <div
+          key={`${depth}-root`}
+          className={styles.Item}
+          hidden={hidden}
+          style={style}
+        >
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
@@ -119,20 +125,24 @@ export default function KeyValue({
     } else {
       const hasChildren = Object.entries(value).length > 0;
 
-      children = isOpen
-        ? Object.entries(value).map<Element<any>>(([name, value]) => (
-            <KeyValue
-              key={name}
-              depth={depth + 1}
-              name={name}
-              overrideValueFn={overrideValueFn}
-              path={path.concat(name)}
-              value={value}
-            />
-          ))
-        : [];
+      children = Object.entries(value).map<Element<any>>(([name, value]) => (
+        <KeyValue
+          key={name}
+          depth={depth + 1}
+          hidden={hidden || !isOpen}
+          name={name}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(name)}
+          value={value}
+        />
+      ));
       children.unshift(
-        <div key={`${depth}-root`} className={styles.Item} style={style}>
+        <div
+          key={`${depth}-root`}
+          className={styles.Item}
+          hidden={hidden}
+          style={style}
+        >
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (

From 7621df5baf8bdcb2cebd71c39092437718d7538a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 15:42:55 -0700
Subject: [PATCH 345/814] Initial example test. Will iterate from here.

---
 .eslintignore                                 |    1 +
 .flowconfig                                   |    1 +
 .gitignore                                    |    1 +
 flow-typed/jest.js                            | 1183 +++++++++++
 package.json                                  |   23 +-
 .../__snapshots__/sanity-test.js.snap         |   11 +
 src/__tests__/sanity-test.js                  |   41 +
 src/__tests__/storeSerializer.js              |    9 +
 src/__tests__/utils.js                        |   40 +
 src/bridge.js                                 |   21 +-
 src/devtools/store.js                         |   55 +-
 yarn.lock                                     | 1776 +++++++++--------
 12 files changed, 2286 insertions(+), 876 deletions(-)
 create mode 100644 flow-typed/jest.js
 create mode 100644 src/__tests__/__snapshots__/sanity-test.js.snap
 create mode 100644 src/__tests__/sanity-test.js
 create mode 100644 src/__tests__/storeSerializer.js
 create mode 100644 src/__tests__/utils.js

diff --git a/.eslintignore b/.eslintignore
index 640e359715bd..4b11fc16b1c1 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,6 @@
 node_modules
 
+flow-typed
 shells/browser/chrome/build
 shells/browser/firefox/build
 shells/dev/build
diff --git a/.flowconfig b/.flowconfig
index c1209df27300..c2f42c17c7c9 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -19,6 +19,7 @@ shells/dev/build/*
 [include]
 
 [libs]
+/flow-typed/
 ./flow.js
 
 [lints]
diff --git a/.gitignore b/.gitignore
index ee4e445f06b2..105fe4f141cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
+.watchmanconfig
\ No newline at end of file
diff --git a/flow-typed/jest.js b/flow-typed/jest.js
new file mode 100644
index 000000000000..df83ee3ca35a
--- /dev/null
+++ b/flow-typed/jest.js
@@ -0,0 +1,1183 @@
+type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
+  (...args: TArguments): TReturn,
+  /**
+   * An object for introspecting mock calls
+   */
+  mock: {
+    /**
+     * An array that represents all calls that have been made into this mock
+     * function. Each call is represented by an array of arguments that were
+     * passed during the call.
+     */
+    calls: Array<TArguments>,
+    /**
+     * An array that contains all the object instances that have been
+     * instantiated from this mock function.
+     */
+    instances: Array<TReturn>,
+    /**
+     * An array that contains all the object results that have been
+     * returned by this mock function call
+     */
+    results: Array<{ isThrow: boolean, value: TReturn }>,
+  },
+  /**
+   * Resets all information stored in the mockFn.mock.calls and
+   * mockFn.mock.instances arrays. Often this is useful when you want to clean
+   * up a mock's usage data between two assertions.
+   */
+  mockClear(): void,
+  /**
+   * Resets all information stored in the mock. This is useful when you want to
+   * completely restore a mock back to its initial state.
+   */
+  mockReset(): void,
+  /**
+   * Removes the mock and restores the initial implementation. This is useful
+   * when you want to mock functions in certain test cases and restore the
+   * original implementation in others. Beware that mockFn.mockRestore only
+   * works when mock was created with jest.spyOn. Thus you have to take care of
+   * restoration yourself when manually assigning jest.fn().
+   */
+  mockRestore(): void,
+  /**
+   * Accepts a function that should be used as the implementation of the mock.
+   * The mock itself will still record all calls that go into and instances
+   * that come from itself -- the only difference is that the implementation
+   * will also be executed when the mock is called.
+   */
+  mockImplementation(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Accepts a function that will be used as an implementation of the mock for
+   * one call to the mocked function. Can be chained so that multiple function
+   * calls produce different results.
+   */
+  mockImplementationOnce(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Accepts a string to use in test result output in place of "jest.fn()" to
+   * indicate which mock function is being referenced.
+   */
+  mockName(name: string): JestMockFn<TArguments, TReturn>,
+  /**
+   * Just a simple sugar function for returning `this`
+   */
+  mockReturnThis(): void,
+  /**
+   * Accepts a value that will be returned whenever the mock function is called.
+   */
+  mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,
+  /**
+   * Sugar for only returning a value once inside your mock
+   */
+  mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>,
+  /**
+   * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))
+   */
+  mockResolvedValue(value: TReturn): JestMockFn<TArguments, Promise<TReturn>>,
+  /**
+   * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))
+   */
+  mockResolvedValueOnce(
+    value: TReturn
+  ): JestMockFn<TArguments, Promise<TReturn>>,
+  /**
+   * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))
+   */
+  mockRejectedValue(value: TReturn): JestMockFn<TArguments, Promise<any>>,
+  /**
+   * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))
+   */
+  mockRejectedValueOnce(value: TReturn): JestMockFn<TArguments, Promise<any>>,
+};
+
+type JestAsymmetricEqualityType = {
+  /**
+   * A custom Jasmine equality tester
+   */
+  asymmetricMatch(value: mixed): boolean,
+};
+
+type JestCallsType = {
+  allArgs(): mixed,
+  all(): mixed,
+  any(): boolean,
+  count(): number,
+  first(): mixed,
+  mostRecent(): mixed,
+  reset(): void,
+};
+
+type JestClockType = {
+  install(): void,
+  mockDate(date: Date): void,
+  tick(milliseconds?: number): void,
+  uninstall(): void,
+};
+
+type JestMatcherResult = {
+  message?: string | (() => string),
+  pass: boolean,
+};
+
+type JestMatcher = (
+  actual: any,
+  expected: any
+) => JestMatcherResult | Promise<JestMatcherResult>;
+
+type JestPromiseType = {
+  /**
+   * Use rejects to unwrap the reason of a rejected promise so any other
+   * matcher can be chained. If the promise is fulfilled the assertion fails.
+   */
+  rejects: JestExpectType,
+  /**
+   * Use resolves to unwrap the value of a fulfilled promise so any other
+   * matcher can be chained. If the promise is rejected the assertion fails.
+   */
+  resolves: JestExpectType,
+};
+
+/**
+ * Jest allows functions and classes to be used as test names in test() and
+ * describe()
+ */
+type JestTestName = string | Function;
+
+/**
+ *  Plugin: jest-styled-components
+ */
+
+type JestStyledComponentsMatcherValue =
+  | string
+  | JestAsymmetricEqualityType
+  | RegExp
+  | typeof undefined;
+
+type JestStyledComponentsMatcherOptions = {
+  media?: string,
+  modifier?: string,
+  supports?: string,
+};
+
+type JestStyledComponentsMatchersType = {
+  toHaveStyleRule(
+    property: string,
+    value: JestStyledComponentsMatcherValue,
+    options?: JestStyledComponentsMatcherOptions
+  ): void,
+};
+
+/**
+ *  Plugin: jest-enzyme
+ */
+type EnzymeMatchersType = {
+  // 5.x
+  toBeEmpty(): void,
+  toBePresent(): void,
+  // 6.x
+  toBeChecked(): void,
+  toBeDisabled(): void,
+  toBeEmptyRender(): void,
+  toContainMatchingElement(selector: string): void,
+  toContainMatchingElements(n: number, selector: string): void,
+  toContainExactlyOneMatchingElement(selector: string): void,
+  toContainReact(element: React$Element<any>): void,
+  toExist(): void,
+  toHaveClassName(className: string): void,
+  toHaveHTML(html: string): void,
+  toHaveProp: ((propKey: string, propValue?: any) => void) &
+    ((props: {}) => void),
+  toHaveRef(refName: string): void,
+  toHaveState: ((stateKey: string, stateValue?: any) => void) &
+    ((state: {}) => void),
+  toHaveStyle: ((styleKey: string, styleValue?: any) => void) &
+    ((style: {}) => void),
+  toHaveTagName(tagName: string): void,
+  toHaveText(text: string): void,
+  toHaveValue(value: any): void,
+  toIncludeText(text: string): void,
+  toMatchElement(
+    element: React$Element<any>,
+    options?: {| ignoreProps?: boolean, verbose?: boolean |}
+  ): void,
+  toMatchSelector(selector: string): void,
+  // 7.x
+  toHaveDisplayName(name: string): void,
+};
+
+// DOM testing library extensions https://github.com/kentcdodds/dom-testing-library#custom-jest-matchers
+type DomTestingLibraryType = {
+  toBeDisabled(): void,
+  toBeEmpty(): void,
+  toBeInTheDocument(): void,
+  toBeVisible(): void,
+  toContainElement(element: HTMLElement | null): void,
+  toContainHTML(htmlText: string): void,
+  toHaveAttribute(name: string, expectedValue?: string): void,
+  toHaveClass(...classNames: string[]): void,
+  toHaveFocus(): void,
+  toHaveFormValues(expectedValues: { [name: string]: any }): void,
+  toHaveStyle(css: string): void,
+  toHaveTextContent(
+    content: string | RegExp,
+    options?: { normalizeWhitespace: boolean }
+  ): void,
+  toBeInTheDOM(): void,
+};
+
+// Jest JQuery Matchers: https://github.com/unindented/custom-jquery-matchers
+type JestJQueryMatchersType = {
+  toExist(): void,
+  toHaveLength(len: number): void,
+  toHaveId(id: string): void,
+  toHaveClass(className: string): void,
+  toHaveTag(tag: string): void,
+  toHaveAttr(key: string, val?: any): void,
+  toHaveProp(key: string, val?: any): void,
+  toHaveText(text: string | RegExp): void,
+  toHaveData(key: string, val?: any): void,
+  toHaveValue(val: any): void,
+  toHaveCss(css: { [key: string]: any }): void,
+  toBeChecked(): void,
+  toBeDisabled(): void,
+  toBeEmpty(): void,
+  toBeHidden(): void,
+  toBeSelected(): void,
+  toBeVisible(): void,
+  toBeFocused(): void,
+  toBeInDom(): void,
+  toBeMatchedBy(sel: string): void,
+  toHaveDescendant(sel: string): void,
+  toHaveDescendantWithText(sel: string, text: string | RegExp): void,
+};
+
+// Jest Extended Matchers: https://github.com/jest-community/jest-extended
+type JestExtendedMatchersType = {
+  /**
+   * Note: Currently unimplemented
+   * Passing assertion
+   *
+   * @param {String} message
+   */
+  //  pass(message: string): void;
+
+  /**
+   * Note: Currently unimplemented
+   * Failing assertion
+   *
+   * @param {String} message
+   */
+  //  fail(message: string): void;
+
+  /**
+   * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.
+   */
+  toBeEmpty(): void,
+
+  /**
+   * Use .toBeOneOf when checking if a value is a member of a given Array.
+   * @param {Array.<*>} members
+   */
+  toBeOneOf(members: any[]): void,
+
+  /**
+   * Use `.toBeNil` when checking a value is `null` or `undefined`.
+   */
+  toBeNil(): void,
+
+  /**
+   * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.
+   * @param {Function} predicate
+   */
+  toSatisfy(predicate: (n: any) => boolean): void,
+
+  /**
+   * Use `.toBeArray` when checking if a value is an `Array`.
+   */
+  toBeArray(): void,
+
+  /**
+   * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.
+   * @param {Number} x
+   */
+  toBeArrayOfSize(x: number): void,
+
+  /**
+   * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.
+   * @param {Array.<*>} members
+   */
+  toIncludeAllMembers(members: any[]): void,
+
+  /**
+   * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.
+   * @param {Array.<*>} members
+   */
+  toIncludeAnyMembers(members: any[]): void,
+
+  /**
+   * Use `.toSatisfyAll` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean` for all values in an array.
+   * @param {Function} predicate
+   */
+  toSatisfyAll(predicate: (n: any) => boolean): void,
+
+  /**
+   * Use `.toBeBoolean` when checking if a value is a `Boolean`.
+   */
+  toBeBoolean(): void,
+
+  /**
+   * Use `.toBeTrue` when checking a value is equal (===) to `true`.
+   */
+  toBeTrue(): void,
+
+  /**
+   * Use `.toBeFalse` when checking a value is equal (===) to `false`.
+   */
+  toBeFalse(): void,
+
+  /**
+   * Use .toBeDate when checking if a value is a Date.
+   */
+  toBeDate(): void,
+
+  /**
+   * Use `.toBeFunction` when checking if a value is a `Function`.
+   */
+  toBeFunction(): void,
+
+  /**
+   * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.
+   *
+   * Note: Required Jest version >22
+   * Note: Your mock functions will have to be asynchronous to cause the timestamps inside of Jest to occur in a differentJS event loop, otherwise the mock timestamps will all be the same
+   *
+   * @param {Mock} mock
+   */
+  toHaveBeenCalledBefore(mock: JestMockFn<any, any>): void,
+
+  /**
+   * Use `.toBeNumber` when checking if a value is a `Number`.
+   */
+  toBeNumber(): void,
+
+  /**
+   * Use `.toBeNaN` when checking a value is `NaN`.
+   */
+  toBeNaN(): void,
+
+  /**
+   * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.
+   */
+  toBeFinite(): void,
+
+  /**
+   * Use `.toBePositive` when checking if a value is a positive `Number`.
+   */
+  toBePositive(): void,
+
+  /**
+   * Use `.toBeNegative` when checking if a value is a negative `Number`.
+   */
+  toBeNegative(): void,
+
+  /**
+   * Use `.toBeEven` when checking if a value is an even `Number`.
+   */
+  toBeEven(): void,
+
+  /**
+   * Use `.toBeOdd` when checking if a value is an odd `Number`.
+   */
+  toBeOdd(): void,
+
+  /**
+   * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).
+   *
+   * @param {Number} start
+   * @param {Number} end
+   */
+  toBeWithin(start: number, end: number): void,
+
+  /**
+   * Use `.toBeObject` when checking if a value is an `Object`.
+   */
+  toBeObject(): void,
+
+  /**
+   * Use `.toContainKey` when checking if an object contains the provided key.
+   *
+   * @param {String} key
+   */
+  toContainKey(key: string): void,
+
+  /**
+   * Use `.toContainKeys` when checking if an object has all of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainAllKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainAnyKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainValue` when checking if an object contains the provided value.
+   *
+   * @param {*} value
+   */
+  toContainValue(value: any): void,
+
+  /**
+   * Use `.toContainValues` when checking if an object contains all of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainValues(values: any[]): void,
+
+  /**
+   * Use `.toContainAllValues` when checking if an object only contains all of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainAllValues(values: any[]): void,
+
+  /**
+   * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainAnyValues(values: any[]): void,
+
+  /**
+   * Use `.toContainEntry` when checking if an object contains the provided entry.
+   *
+   * @param {Array.<String, String>} entry
+   */
+  toContainEntry(entry: [string, string]): void,
+
+  /**
+   * Use `.toContainEntries` when checking if an object contains all of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainAllEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainAnyEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toBeExtensible` when checking if an object is extensible.
+   */
+  toBeExtensible(): void,
+
+  /**
+   * Use `.toBeFrozen` when checking if an object is frozen.
+   */
+  toBeFrozen(): void,
+
+  /**
+   * Use `.toBeSealed` when checking if an object is sealed.
+   */
+  toBeSealed(): void,
+
+  /**
+   * Use `.toBeString` when checking if a value is a `String`.
+   */
+  toBeString(): void,
+
+  /**
+   * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.
+   *
+   * @param {String} string
+   */
+  toEqualCaseInsensitive(string: string): void,
+
+  /**
+   * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.
+   *
+   * @param {String} prefix
+   */
+  toStartWith(prefix: string): void,
+
+  /**
+   * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.
+   *
+   * @param {String} suffix
+   */
+  toEndWith(suffix: string): void,
+
+  /**
+   * Use `.toInclude` when checking if a `String` includes the given `String` substring.
+   *
+   * @param {String} substring
+   */
+  toInclude(substring: string): void,
+
+  /**
+   * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.
+   *
+   * @param {String} substring
+   * @param {Number} times
+   */
+  toIncludeRepeated(substring: string, times: number): void,
+
+  /**
+   * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.
+   *
+   * @param {Array.<String>} substring
+   */
+  toIncludeMultiple(substring: string[]): void,
+};
+
+interface JestExpectType {
+  not: JestExpectType &
+    EnzymeMatchersType &
+    DomTestingLibraryType &
+    JestJQueryMatchersType &
+    JestStyledComponentsMatchersType &
+    JestExtendedMatchersType;
+  /**
+   * If you have a mock function, you can use .lastCalledWith to test what
+   * arguments it was last called with.
+   */
+  lastCalledWith(...args: Array<any>): void;
+  /**
+   * toBe just checks that a value is what you expect. It uses === to check
+   * strict equality.
+   */
+  toBe(value: any): void;
+  /**
+   * Use .toBeCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toBeCalledWith(...args: Array<any>): void;
+  /**
+   * Using exact equality with floating point numbers is a bad idea. Rounding
+   * means that intuitive things fail.
+   */
+  toBeCloseTo(num: number, delta: any): void;
+  /**
+   * Use .toBeDefined to check that a variable is not undefined.
+   */
+  toBeDefined(): void;
+  /**
+   * Use .toBeFalsy when you don't care what a value is, you just want to
+   * ensure a value is false in a boolean context.
+   */
+  toBeFalsy(): void;
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThan.
+   */
+  toBeGreaterThan(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
+   */
+  toBeGreaterThanOrEqual(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeLessThan.
+   */
+  toBeLessThan(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeLessThanOrEqual.
+   */
+  toBeLessThanOrEqual(number: number): void;
+  /**
+   * Use .toBeInstanceOf(Class) to check that an object is an instance of a
+   * class.
+   */
+  toBeInstanceOf(cls: Class<*>): void;
+  /**
+   * .toBeNull() is the same as .toBe(null) but the error messages are a bit
+   * nicer.
+   */
+  toBeNull(): void;
+  /**
+   * Use .toBeTruthy when you don't care what a value is, you just want to
+   * ensure a value is true in a boolean context.
+   */
+  toBeTruthy(): void;
+  /**
+   * Use .toBeUndefined to check that a variable is undefined.
+   */
+  toBeUndefined(): void;
+  /**
+   * Use .toContain when you want to check that an item is in a list. For
+   * testing the items in the list, this uses ===, a strict equality check.
+   */
+  toContain(item: any): void;
+  /**
+   * Use .toContainEqual when you want to check that an item is in a list. For
+   * testing the items in the list, this matcher recursively checks the
+   * equality of all fields, rather than checking for object identity.
+   */
+  toContainEqual(item: any): void;
+  /**
+   * Use .toEqual when you want to check that two objects have the same value.
+   * This matcher recursively checks the equality of all fields, rather than
+   * checking for object identity.
+   */
+  toEqual(value: any): void;
+  /**
+   * Use .toHaveBeenCalled to ensure that a mock function got called.
+   */
+  toHaveBeenCalled(): void;
+  toBeCalled(): void;
+  /**
+   * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
+   * number of times.
+   */
+  toHaveBeenCalledTimes(number: number): void;
+  toBeCalledTimes(number: number): void;
+  /**
+   *
+   */
+  toHaveBeenNthCalledWith(nthCall: number, ...args: Array<any>): void;
+  nthCalledWith(nthCall: number, ...args: Array<any>): void;
+  /**
+   *
+   */
+  toHaveReturned(): void;
+  toReturn(): void;
+  /**
+   *
+   */
+  toHaveReturnedTimes(number: number): void;
+  toReturnTimes(number: number): void;
+  /**
+   *
+   */
+  toHaveReturnedWith(value: any): void;
+  toReturnWith(value: any): void;
+  /**
+   *
+   */
+  toHaveLastReturnedWith(value: any): void;
+  lastReturnedWith(value: any): void;
+  /**
+   *
+   */
+  toHaveNthReturnedWith(nthCall: number, value: any): void;
+  nthReturnedWith(nthCall: number, value: any): void;
+  /**
+   * Use .toHaveBeenCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toHaveBeenCalledWith(...args: Array<any>): void;
+  toBeCalledWith(...args: Array<any>): void;
+  /**
+   * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
+   * with specific arguments.
+   */
+  toHaveBeenLastCalledWith(...args: Array<any>): void;
+  lastCalledWith(...args: Array<any>): void;
+  /**
+   * Check that an object has a .length property and it is set to a certain
+   * numeric value.
+   */
+  toHaveLength(number: number): void;
+  /**
+   *
+   */
+  toHaveProperty(propPath: string, value?: any): void;
+  /**
+   * Use .toMatch to check that a string matches a regular expression or string.
+   */
+  toMatch(regexpOrString: RegExp | string): void;
+  /**
+   * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
+   */
+  toMatchObject(object: Object | Array<Object>): void;
+  /**
+   * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.
+   */
+  toStrictEqual(value: any): void;
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(propertyMatchers?: any, name?: string): void;
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(name: string): void;
+
+  toMatchInlineSnapshot(snapshot?: string): void;
+  toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;
+  /**
+   * Use .toThrow to test that a function throws when it is called.
+   * If you want to test that a specific error gets thrown, you can provide an
+   * argument to toThrow. The argument can be a string for the error message,
+   * a class for the error, or a regex that should match the error.
+   *
+   * Alias: .toThrowError
+   */
+  toThrow(message?: string | Error | Class<Error> | RegExp): void;
+  toThrowError(message?: string | Error | Class<Error> | RegExp): void;
+  /**
+   * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
+   * matching the most recent snapshot when it is called.
+   */
+  toThrowErrorMatchingSnapshot(): void;
+  toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;
+}
+
+type JestObjectType = {
+  /**
+   *  Disables automatic mocking in the module loader.
+   *
+   *  After this method is called, all `require()`s will return the real
+   *  versions of each module (rather than a mocked version).
+   */
+  disableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of disableAutomock
+   */
+  autoMockOff(): JestObjectType,
+  /**
+   * Enables automatic mocking in the module loader.
+   */
+  enableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of enableAutomock
+   */
+  autoMockOn(): JestObjectType,
+  /**
+   * Clears the mock.calls and mock.instances properties of all mocks.
+   * Equivalent to calling .mockClear() on every mocked function.
+   */
+  clearAllMocks(): JestObjectType,
+  /**
+   * Resets the state of all mocks. Equivalent to calling .mockReset() on every
+   * mocked function.
+   */
+  resetAllMocks(): JestObjectType,
+  /**
+   * Restores all mocks back to their original value.
+   */
+  restoreAllMocks(): JestObjectType,
+  /**
+   * Removes any pending timers from the timer system.
+   */
+  clearAllTimers(): void,
+  /**
+   * Returns the number of fake timers still left to run.
+   */
+  getTimerCount(): number,
+  /**
+   * The same as `mock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  doMock(moduleName: string, moduleFactory?: any): JestObjectType,
+  /**
+   * The same as `unmock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  dontMock(moduleName: string): JestObjectType,
+  /**
+   * Returns a new, unused mock function. Optionally takes a mock
+   * implementation.
+   */
+  fn<TArguments: $ReadOnlyArray<*>, TReturn>(
+    implementation?: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Determines if the given function is a mocked function.
+   */
+  isMockFunction(fn: Function): boolean,
+  /**
+   * Given the name of a module, use the automatic mocking system to generate a
+   * mocked version of the module for you.
+   */
+  genMockFromModule(moduleName: string): any,
+  /**
+   * Mocks a module with an auto-mocked version when it is being required.
+   *
+   * The second argument can be used to specify an explicit module factory that
+   * is being run instead of using Jest's automocking feature.
+   *
+   * The third argument can be used to create virtual mocks -- mocks of modules
+   * that don't exist anywhere in the system.
+   */
+  mock(
+    moduleName: string,
+    moduleFactory?: any,
+    options?: Object
+  ): JestObjectType,
+  /**
+   * Returns the actual module instead of a mock, bypassing all checks on
+   * whether the module should receive a mock implementation or not.
+   */
+  requireActual(moduleName: string): any,
+  /**
+   * Returns a mock module instead of the actual module, bypassing all checks
+   * on whether the module should be required normally or not.
+   */
+  requireMock(moduleName: string): any,
+  /**
+   * Resets the module registry - the cache of all required modules. This is
+   * useful to isolate modules where local state might conflict between tests.
+   */
+  resetModules(): JestObjectType,
+
+  /**
+   * Creates a sandbox registry for the modules that are loaded inside the
+   * callback function. This is useful to isolate specific modules for every
+   * test so that local module state doesn't conflict between tests.
+   */
+  isolateModules(fn: () => void): JestObjectType,
+
+  /**
+   * Exhausts the micro-task queue (usually interfaced in node via
+   * process.nextTick).
+   */
+  runAllTicks(): void,
+  /**
+   * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
+   * setInterval(), and setImmediate()).
+   */
+  runAllTimers(): void,
+  /**
+   * Exhausts all tasks queued by setImmediate().
+   */
+  runAllImmediates(): void,
+  /**
+   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+   * or setInterval() and setImmediate()).
+   */
+  advanceTimersByTime(msToRun: number): void,
+  /**
+   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+   * or setInterval() and setImmediate()).
+   *
+   * Renamed to `advanceTimersByTime`.
+   */
+  runTimersToTime(msToRun: number): void,
+  /**
+   * Executes only the macro-tasks that are currently pending (i.e., only the
+   * tasks that have been queued by setTimeout() or setInterval() up to this
+   * point)
+   */
+  runOnlyPendingTimers(): void,
+  /**
+   * Explicitly supplies the mock object that the module system should return
+   * for the specified module. Note: It is recommended to use jest.mock()
+   * instead.
+   */
+  setMock(moduleName: string, moduleExports: any): JestObjectType,
+  /**
+   * Indicates that the module system should never return a mocked version of
+   * the specified module from require() (e.g. that it should always return the
+   * real module).
+   */
+  unmock(moduleName: string): JestObjectType,
+  /**
+   * Instructs Jest to use fake versions of the standard timer functions
+   * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
+   * setImmediate and clearImmediate).
+   */
+  useFakeTimers(): JestObjectType,
+  /**
+   * Instructs Jest to use the real versions of the standard timer functions.
+   */
+  useRealTimers(): JestObjectType,
+  /**
+   * Creates a mock function similar to jest.fn but also tracks calls to
+   * object[methodName].
+   */
+  spyOn(
+    object: Object,
+    methodName: string,
+    accessType?: 'get' | 'set'
+  ): JestMockFn<any, any>,
+  /**
+   * Set the default timeout interval for tests and before/after hooks in milliseconds.
+   * Note: The default timeout interval is 5 seconds if this method is not called.
+   */
+  setTimeout(timeout: number): JestObjectType,
+};
+
+type JestSpyType = {
+  calls: JestCallsType,
+};
+
+/** Runs this function after every test inside this context */
+declare function afterEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before every test inside this context */
+declare function beforeEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function after all tests have finished inside this context */
+declare function afterAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before any tests have started inside this context */
+declare function beforeAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+
+/** A context for grouping tests together */
+declare var describe: {
+  /**
+   * Creates a block that groups together several related tests in one "test suite"
+   */
+  (name: JestTestName, fn: () => void): void,
+
+  /**
+   * Only run this describe block
+   */
+  only(name: JestTestName, fn: () => void): void,
+
+  /**
+   * Skip running this describe block
+   */
+  skip(name: JestTestName, fn: () => void): void,
+
+  /**
+   * each runs this test against array of argument arrays per each run
+   *
+   * @param {table} table of Test
+   */
+  each(
+    ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+  ): (
+    name: JestTestName,
+    fn?: (...args: Array<any>) => ?Promise<mixed>,
+    timeout?: number
+  ) => void,
+};
+
+/** An individual test unit */
+declare var it: {
+  /**
+   * An individual test unit
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  (
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * Only run this test
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  only(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): {
+    each(
+      ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+    ): (
+      name: JestTestName,
+      fn?: (...args: Array<any>) => ?Promise<mixed>,
+      timeout?: number
+    ) => void,
+  },
+
+  /**
+   * Skip running this test
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  skip(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * Highlight planned tests in the summary output
+   *
+   * @param {String} Name of Test to do
+   */
+  todo(name: string): void,
+
+  /**
+   * Run the test concurrently
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  concurrent(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * each runs this test against array of argument arrays per each run
+   *
+   * @param {table} table of Test
+   */
+  each(
+    ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+  ): (
+    name: JestTestName,
+    fn?: (...args: Array<any>) => ?Promise<mixed>,
+    timeout?: number
+  ) => void,
+};
+
+declare function fit(
+  name: JestTestName,
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** An individual test unit */
+declare var test: typeof it;
+/** A disabled group of tests */
+declare var xdescribe: typeof describe;
+/** A focused group of tests */
+declare var fdescribe: typeof describe;
+/** A disabled individual test */
+declare var xit: typeof it;
+/** A disabled individual test */
+declare var xtest: typeof it;
+
+type JestPrettyFormatColors = {
+  comment: { close: string, open: string },
+  content: { close: string, open: string },
+  prop: { close: string, open: string },
+  tag: { close: string, open: string },
+  value: { close: string, open: string },
+};
+
+type JestPrettyFormatIndent = string => string;
+type JestPrettyFormatRefs = Array<any>;
+type JestPrettyFormatPrint = any => string;
+type JestPrettyFormatStringOrNull = string | null;
+
+type JestPrettyFormatOptions = {|
+  callToJSON: boolean,
+  edgeSpacing: string,
+  escapeRegex: boolean,
+  highlight: boolean,
+  indent: number,
+  maxDepth: number,
+  min: boolean,
+  plugins: JestPrettyFormatPlugins,
+  printFunctionName: boolean,
+  spacing: string,
+  theme: {|
+    comment: string,
+    content: string,
+    prop: string,
+    tag: string,
+    value: string,
+  |},
+|};
+
+type JestPrettyFormatPlugin = {
+  print: (
+    val: any,
+    serialize: JestPrettyFormatPrint,
+    indent: JestPrettyFormatIndent,
+    opts: JestPrettyFormatOptions,
+    colors: JestPrettyFormatColors
+  ) => string,
+  test: any => boolean,
+};
+
+type JestPrettyFormatPlugins = Array<JestPrettyFormatPlugin>;
+
+/** The expect function is used every time you want to test a value */
+declare var expect: {
+  /** The object that you want to make assertions against */
+  (
+    value: any
+  ): JestExpectType &
+    JestPromiseType &
+    EnzymeMatchersType &
+    DomTestingLibraryType &
+    JestJQueryMatchersType &
+    JestStyledComponentsMatchersType &
+    JestExtendedMatchersType,
+
+  /** Add additional Jasmine matchers to Jest's roster */
+  extend(matchers: { [name: string]: JestMatcher }): void,
+  /** Add a module that formats application-specific data structures. */
+  addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,
+  assertions(expectedAssertions: number): void,
+  hasAssertions(): void,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): any,
+  arrayContaining(value: Array<mixed>): Array<mixed>,
+  objectContaining(value: Object): Object,
+  /** Matches any received string that contains the exact expected string. */
+  stringContaining(value: string): string,
+  stringMatching(value: string | RegExp): string,
+  not: {
+    arrayContaining: (value: $ReadOnlyArray<mixed>) => Array<mixed>,
+    objectContaining: (value: {}) => Object,
+    stringContaining: (value: string) => string,
+    stringMatching: (value: string | RegExp) => string,
+  },
+};
+
+// TODO handle return type
+// http://jasmine.github.io/2.4/introduction.html#section-Spies
+declare function spyOn(value: mixed, method: string): Object;
+
+/** Holds all functions related to manipulating test runner */
+declare var jest: JestObjectType;
+
+/**
+ * The global Jasmine object, this is generally not exposed as the public API,
+ * using features inside here could break in later versions of Jest.
+ */
+declare var jasmine: {
+  DEFAULT_TIMEOUT_INTERVAL: number,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): any,
+  arrayContaining(value: Array<mixed>): Array<mixed>,
+  clock(): JestClockType,
+  createSpy(name: string): JestSpyType,
+  createSpyObj(
+    baseName: string,
+    methodNames: Array<string>
+  ): { [methodName: string]: JestSpyType },
+  objectContaining(value: Object): Object,
+  stringMatching(value: string): string,
+};
diff --git a/package.json b/package.json
index aa58a10370e2..81e52871c225 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,18 @@
   "jest": {
     "modulePathIgnorePatterns": [
       "<rootDir>/shells"
+    ],
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "moduleNameMapper": {
+      "^src/(.*)$": "<rootDir>/src/$1"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/src/__tests__/storeSerializer"
+    ],
+    "testMatch": [
+      "**/__tests__/*-test.js"
     ]
   },
   "scripts": {
@@ -26,6 +38,7 @@
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
     "test": "jest",
+    "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",
     "test:firefox": "node ./shells/browser/firefox/test",
     "test:standalone": "cd packages/react-devtools && yarn start",
@@ -52,7 +65,7 @@
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.4",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
@@ -86,7 +99,7 @@
     "gh-pages": "^1.0.0",
     "html2canvas": "^1.0.0-alpha.12",
     "immutable": "3.7.6",
-    "jest": "22.1.4",
+    "jest": "^24.7.1",
     "lerna": "^2.8.0",
     "lint-staged": "^7.0.5",
     "lodash.throttle": "^4.1.1",
@@ -99,10 +112,10 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
-    "react": "^16.8.4",
+    "react": "^16.8.6",
     "react-color": "^2.11.7",
-    "react-dom": "^16.8.4",
-    "react-is": "^16.8.4",
+    "react-dom": "^16.8.6",
+    "react-is": "^16.8.6",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.7.2",
     "scheduler": "^0.13",
diff --git a/src/__tests__/__snapshots__/sanity-test.js.snap b/src/__tests__/__snapshots__/sanity-test.js.snap
new file mode 100644
index 000000000000..e1a57e551eb8
--- /dev/null
+++ b/src/__tests__/__snapshots__/sanity-test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sanity should pass 1`] = `
+▾ <Grandparent>
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+`;
diff --git a/src/__tests__/sanity-test.js b/src/__tests__/sanity-test.js
new file mode 100644
index 000000000000..80c475ed9921
--- /dev/null
+++ b/src/__tests__/sanity-test.js
@@ -0,0 +1,41 @@
+// @flow
+
+import { setup } from './utils';
+
+describe('sanity', () => {
+  let React;
+  let ReactDOM;
+  let store;
+
+  beforeEach(() => {
+    store = setup();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should pass', () => {
+    function Grandparent() {
+      return (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+    }
+
+    function Parent() {
+      return [<Child key="one" />, <Child key="two" />];
+    }
+
+    function Child() {
+      return <div>Hi!</div>;
+    }
+
+    ReactDOM.render(<Grandparent />, document.createElement('div'));
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
new file mode 100644
index 000000000000..0f4b8602fc43
--- /dev/null
+++ b/src/__tests__/storeSerializer.js
@@ -0,0 +1,9 @@
+import Store from 'src/devtools/store';
+
+export function test(value) {
+  return value instanceof Store;
+}
+
+export function print(value, serialize, indent) {
+  return value.__toSnapshot();
+}
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
new file mode 100644
index 000000000000..d9ef2b78f051
--- /dev/null
+++ b/src/__tests__/utils.js
@@ -0,0 +1,40 @@
+// @flow
+
+import Agent from 'src/backend/agent';
+import { initBackend } from 'src/backend';
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/store';
+import { installHook } from 'src/hook';
+
+export function setup(): Store {
+  installHook(global);
+
+  jest.useFakeTimers();
+
+  // TODO Replace this with a polyfill?
+  global.localStorage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    clear: jest.fn(),
+  };
+
+  const listeners = [];
+  const bridge = new Bridge(
+    {
+      listen(callback) {
+        listeners.push(callback);
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        listeners.forEach(callback => callback({ event, payload }));
+      },
+    },
+    { batchDuration: 0 }
+  );
+
+  const agent = new Agent();
+  agent.addBridge(bridge);
+
+  initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
+
+  return new Store(bridge);
+}
diff --git a/src/bridge.js b/src/bridge.js
index 3eed1efb16dd..6f40b07e59dc 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -6,19 +6,31 @@ import type { Wall } from './types';
 
 const BATCH_DURATION = 100;
 
+type Config = {|
+  batchDuration?: number,
+|};
+
 type Message = {|
   event: string,
   payload: any,
 |};
 
 export default class Bridge extends EventEmitter {
+  _batchDuration: number = BATCH_DURATION;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
   _wall: Wall;
 
-  constructor(wall: Wall) {
+  constructor(wall: Wall, config?: Config) {
     super();
 
+    if (config != null) {
+      const { batchDuration } = config;
+      if (batchDuration !== undefined) {
+        this._batchDuration = batchDuration;
+      }
+    }
+
     this._wall = wall;
 
     wall.listen((message: Message) => {
@@ -32,10 +44,9 @@ export default class Bridge extends EventEmitter {
     // - if there hasn't been a message recently, we set a timer for 0 ms in
     //   the future, allowing all messages created in the same tick to be sent
     //   together
-    // - if there *has* been a message flushed in the last BATCH_DURATION ms
+    // - if there *has* been a message flushed in the last X ms
     //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
     //   be set, and we'll simply add to the queue and wait for that
-
     this._messageQueue.push(event, payload, transferable);
     if (!this._timeoutID) {
       this._timeoutID = setTimeout(this._flush, 0);
@@ -56,10 +67,10 @@ export default class Bridge extends EventEmitter {
       }
       this._messageQueue.length = 0;
 
-      // Check again for queued messages in BATCH_DURATION ms. This will keep
+      // Check again for queued messages in X ms. This will keep
       // flushing in a loop as long as messages continue to be added. Once no
       // more are, the timer expires.
-      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
+      this._timeoutID = setTimeout(this._flush, this._batchDuration);
     }
   };
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 4a829938d5fb..b4945b0d7101 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -836,39 +836,30 @@ export default class Store extends EventEmitter {
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
-  // DEBUG
-  __printTree = () => {
-    if (__DEBUG__) {
-      console.group('__printTree()');
-      this._roots.forEach((rootID: number) => {
-        const printElement = (id: number) => {
-          const element = ((this._idToElement.get(id): any): Element);
-          console.log(
-            `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
-              ''} ${element.key ? `key:"${element.key}"` : ''} (${
-              element.weight
-            })`
-          );
-          element.children.forEach(printElement);
-        };
-        const root = ((this._idToElement.get(rootID): any): Element);
-        console.group(`${rootID}:root (${root.weight})`);
-        root.children.forEach(printElement);
-        console.groupEnd();
-      });
-      console.group(`List of ${this.numElements} elements`);
-      for (let i = 0; i < this.numElements; i++) {
-        //if (i === 4) { debugger }
-        const element = this.getElementAtIndex(i);
-        if (element != null) {
-          console.log(
-            `${'•'.repeat(element.depth)}${i}: ${element.displayName ||
-              'Unknown'}`
-          );
-        }
+  // Jest snapshot testing
+  __toSnapshot = () => {
+    const snapshot = [];
+
+    // TODO Include root (ids) in the snapshot?
+    for (let i = 0; i < this._weightAcrossRoots; i++) {
+      const element = ((this.getElementAtIndex(i): any): Element);
+
+      let prefix = ' ';
+      if (element.children.length > 0) {
+        prefix = element.isCollapsed ? '▸' : '▾';
+      }
+
+      let key = '';
+      if (element.key !== null) {
+        key = ` key="${element.key}"`;
       }
-      console.groupEnd();
-      console.groupEnd();
+
+      snapshot.push(
+        `${'  '.repeat(element.depth)}${prefix} <${element.displayName ||
+          'null'}${key}>`
+      );
     }
+
+    return snapshot.join('\n');
   };
 }
diff --git a/yarn.lock b/yarn.lock
index 4b0e19920e3f..9e334a0244f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,13 +9,25 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.39"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.39.tgz#91c90bb65207fc5a55128cb54956ded39e850457"
+"@babel/core@^7.1.0":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
+  integrity sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA==
   dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.0"
+    "@babel/helpers" "^7.4.3"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.11"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
 
 "@babel/core@^7.1.6":
   version "7.3.3"
@@ -37,6 +49,17 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.0.0", "@babel/generator@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.0.tgz#c230e79589ae7a729fd4631b9ded4dc220418196"
+  integrity sha512-/v5I+a1jhGSKLgZDcmAUZ4K/VePi43eRkUs3yePW1HB1iANOD5tqJXwGSG4BZhSksP8J9ejSlwGeTiiOFZOrXQ==
+  dependencies:
+    "@babel/types" "^7.4.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/generator@^7.2.2":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.0.tgz#f663838cd7b542366de3aa608a657b8ccb2a99eb"
@@ -223,6 +246,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-split-export-declaration@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.0.tgz#571bfd52701f492920d63b7f735030e9a3e10b55"
+  integrity sha512-7Cuc6JZiYShaZnybDmfwhY4UYHzI6rlqhWjaIqbsJGsIqPimEYy5uh3akSRLMg65LSdSEnJ8a8/bWQN6u2oMGw==
+  dependencies:
+    "@babel/types" "^7.4.0"
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -242,6 +272,15 @@
     "@babel/traverse" "^7.1.5"
     "@babel/types" "^7.3.0"
 
+"@babel/helpers@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.3.tgz#7b1d354363494b31cb9a2417ae86af32b7853a3b"
+  integrity sha512-BMh7X0oZqb36CfyhvtbSmcWc3GXocfxv3yNsAEuM0l+fAqSO22rQrUpijr3oE/10jCTrB6/0b9kzmG4VetCj8Q==
+  dependencies:
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+
 "@babel/highlight@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
@@ -256,6 +295,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.1.tgz#8f4ffd45f779e6132780835ffa7a215fa0b2d181"
   integrity sha512-ATz6yX/L8LEnC3dtLQnIx4ydcPxhLcoy9Vl6re00zb2w5lG6itY6Vhnr1KFRPq/FHNsgl/gh2mjNN20f9iJTTA==
 
+"@babel/parser@^7.1.0", "@babel/parser@^7.4.0", "@babel/parser@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b"
+  integrity sha512-gxpEUhTS1sGA63EGQGuA+WESPR/6tz6ng7tSHFCmaTJK/cGK8y37cBTspX+U2xCAue2IQVvF6Z0oigmjwD8YGQ==
+
 "@babel/parser@^7.2.2", "@babel/parser@^7.3.3":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.3.tgz#092d450db02bdb6ccb1ca8ffd47d8774a91aef87"
@@ -339,7 +383,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.2.0":
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
   integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
@@ -698,6 +742,15 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/template@^7.0.0", "@babel/template@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
+  integrity sha512-SOWwxxClTTh5NdbbYZ0BmaBVzxzTh2tO/TeLTbF6MO6EzVhHTnff8CdBXx3mEtazFBoysmEM6GU/wF+SuSx4Fw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.4.0"
+    "@babel/types" "^7.4.0"
+
 "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -722,6 +775,21 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
+"@babel/traverse@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84"
+  integrity sha512-HmA01qrtaCwwJWpSKpA948cBvU5BrmviAief/b3AVw936DtcdsTexlbyzNuDnthwhOQ37xshn7hvQaEQk7ISYQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
 "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.3":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.3.tgz#6c44d1cdac2a7625b624216657d5bc6c107ab436"
@@ -740,11 +808,172 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.0.tgz#670724f77d24cce6cc7d8cf64599d511d164894c"
+  integrity sha512-aPvkXyU2SPOnztlgo8n9cEiXW755mgyvueUPcpStqdzoSPm0fjO0vQBjLkt3JKJW7ufikfcnMTTPsN1xaTsBPA==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+  integrity sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@jest/console@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.7.1.tgz#32a9e42535a97aedfe037e725bd67e954b459545"
+  integrity sha512-iNhtIy2M8bXlAOULWVTUxmnelTLFneTNEkHCgPmgd+zNwy9zVddJ6oS5rZ9iwoscNdT5mMwUd0C51v/fSlzItg==
+  dependencies:
+    "@jest/source-map" "^24.3.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
+"@jest/core@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.7.1.tgz#6707f50db238d0c5988860680e2e414df0032024"
+  integrity sha512-ivlZ8HX/FOASfHcb5DJpSPFps8ydfUYzLZfgFFqjkLijYysnIEOieg72YRhO4ZUB32xu40hsSMmaw+IGYeKONA==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.7.1"
+    "@jest/test-result" "^24.7.1"
+    "@jest/transform" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.7.0"
+    jest-config "^24.7.1"
+    jest-haste-map "^24.7.1"
+    jest-message-util "^24.7.1"
+    jest-regex-util "^24.3.0"
+    jest-resolve-dependencies "^24.7.1"
+    jest-runner "^24.7.1"
+    jest-runtime "^24.7.1"
+    jest-snapshot "^24.7.1"
+    jest-util "^24.7.1"
+    jest-validate "^24.7.0"
+    jest-watcher "^24.7.1"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.7.1.tgz#9b9196bc737561f67ac07817d4c5ece772e33135"
+  integrity sha512-wmcTTYc4/KqA+U5h1zQd5FXXynfa7VGP2NfF+c6QeGJ7c+2nStgh65RQWNX62SC716dTtqheTRrZl0j+54oGHw==
+  dependencies:
+    "@jest/fake-timers" "^24.7.1"
+    "@jest/transform" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    jest-mock "^24.7.0"
+
+"@jest/fake-timers@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.7.1.tgz#56e5d09bdec09ee81050eaff2794b26c71d19db2"
+  integrity sha512-4vSQJDKfR2jScOe12L9282uiwuwQv9Lk7mgrCSZHA9evB9efB/qx8i0KJxsAKtp8fgJYBJdYY7ZU6u3F4/pyjA==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    jest-message-util "^24.7.1"
+    jest-mock "^24.7.0"
+
+"@jest/reporters@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.7.1.tgz#38ac0b096cd691bbbe3051ddc25988d42e37773a"
+  integrity sha512-bO+WYNwHLNhrjB9EbPL4kX/mCCG4ZhhfWmO3m4FSpbgr7N83MFejayz30kKjgqr7smLyeaRFCBQMbXpUgnhAJw==
+  dependencies:
+    "@jest/environment" "^24.7.1"
+    "@jest/test-result" "^24.7.1"
+    "@jest/transform" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-api "^2.1.1"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-source-maps "^3.0.1"
+    jest-haste-map "^24.7.1"
+    jest-resolve "^24.7.1"
+    jest-runtime "^24.7.1"
+    jest-util "^24.7.1"
+    jest-worker "^24.6.0"
+    node-notifier "^5.2.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0":
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.3.0.tgz#563be3aa4d224caf65ff77edc95cd1ca4da67f28"
+  integrity sha512-zALZt1t2ou8le/crCeeiRYzvdnTzaIlpOWaet45lNSqNJUnXbppUUFR4ZUAlzgDmKee4Q5P/tKXypI1RiHwgag==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
+"@jest/test-result@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.7.1.tgz#19eacdb29a114300aed24db651e5d975f08b6bbe"
+  integrity sha512-3U7wITxstdEc2HMfBX7Yx3JZgiNBubwDqQMh+BXmZXHa3G13YWF3p6cK+5g0hGkN3iufg/vGPl3hLxQXD74Npg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.7.1.tgz#9c18e428e1ad945fa74f6233a9d35745ca0e63e0"
+  integrity sha512-84HQkCpVZI/G1zq53gHJvSmhUer4aMYp9tTaffW28Ih5OxfCg8hGr3nTSbL1OhVDRrFZwvF+/R9gY6JRkDUpUA==
+  dependencies:
+    "@jest/test-result" "^24.7.1"
+    jest-haste-map "^24.7.1"
+    jest-runner "^24.7.1"
+    jest-runtime "^24.7.1"
+
+"@jest/transform@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.7.1.tgz#872318f125bcfab2de11f53b465ab1aa780789c2"
+  integrity sha512-EsOUqP9ULuJ66IkZQhI5LufCHlTbi7hrcllRMUEV/tOgqBVQi93+9qEvkX0n8mYpVXQ8VjwmICeRgg58mrtIEw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.7.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.7.1"
+    jest-regex-util "^24.3.0"
+    jest-util "^24.7.1"
+    micromatch "^3.1.10"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
+"@jest/types@^24.7.0":
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.7.0.tgz#c4ec8d1828cdf23234d9b4ee31f5482a3f04f48b"
+  integrity sha512-ipJUa2rFWiKoBqMKP63Myb6h9+iT3FHRTF2M8OR6irxWzItisa8i4dcSg14IbvmXUnBlHBlUQPYUHWyX3UPpYA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/yargs" "^12.0.9"
+
 "@reach/component-component@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
@@ -811,6 +1040,54 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@types/babel__core@^7.1.0":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.1.tgz#ce9a9e5d92b7031421e1d0d74ae59f572ba48be6"
+  integrity sha512-+hjBtgcFPYyCTo0A15+nxrCVJL7aC6Acg87TXd5OW3QhHswdrOLoles+ldL2Uk8q++7yIfl4tURtztccdeeyOw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.0.2.tgz#d2112a6b21fad600d7674274293c85dce0cb47fc"
+  integrity sha512-NHcOfab3Zw4q5sEE2COkpfXjoE7o+PmqD9DQW4koUT3roNxwziUdXGnRndMat/LJNUtePwn1TlP4do3uoe3KZQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.6.tgz#328dd1a8fc4cfe3c8458be9477b219ea158fd7b2"
+  integrity sha512-XYVgHF2sQ0YblLRMLNPB3CkFMewzFmlDsH/TneZFHUXDlABQgh88uOxuez7ZcXxayLFrqLwtDH1t+FmlFwNZxw==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.0.tgz#1eb8c033e98cf4e1a4cedcaf8bcafe8cb7591e85"
+  integrity sha512-eAtOAFZefEnfJiRFQBGw1eYqa5GTLCZ1y86N0XSI/D6EB+E8z6VPV/UL7Gi5UEclFqoQk+6NRqEDsfmDLXn8sg==
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
+"@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
+  version "12.0.12"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
+  integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
+
 "@webassemblyjs/ast@1.8.3":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.3.tgz#63a741bd715a6b6783f2ea5c6ab707516aa215eb"
@@ -1130,20 +1407,6 @@ ajv@^6.1.0:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-align-text@^0.1.1, align-text@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
-  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
-  dependencies:
-    kind-of "^3.0.2"
-    longest "^1.0.1"
-    repeat-string "^1.5.2"
-
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
-
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -1169,6 +1432,11 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1212,11 +1480,12 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-append-transform@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+append-transform@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-1.0.0.tgz#046a52ae582a228bd72f58acfbe2967c678759ab"
+  integrity sha512-P009oYkeHyU742iSZJzZZywj4QRJdnTWffaKuJQLablCZ1uz6/cW4yaRgcDaoQ+uwOxxnt0gRUcwfsNP2ri0gw==
   dependencies:
-    default-require-extensions "^1.0.0"
+    default-require-extensions "^2.0.0"
 
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
@@ -1444,12 +1713,12 @@ async@2.6.1:
   dependencies:
     lodash "^4.17.10"
 
-async@^1.4.0, async@^1.5.0, async@^1.5.2:
+async@^1.5.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.0.0, async@^2.5.0:
+async@^2.0.0, async@^2.5.0, async@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
   integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
@@ -1462,12 +1731,6 @@ async@^2.1.2, async@~2.5.0:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.4:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
-  dependencies:
-    lodash "^4.14.0"
-
 async@~2.1.2:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
@@ -1509,7 +1772,7 @@ axobject-query@^0.1.0:
   dependencies:
     ast-types-flow "0.0.7"
 
-babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.3.13:
+babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
   dependencies:
@@ -1525,32 +1788,6 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.0.0:
-  version "6.3.21"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.3.21.tgz#807f72b7702508c3e577b29eebad0d833baa65f9"
-  dependencies:
-    babel-code-frame "^6.3.13"
-    babel-generator "^6.3.21"
-    babel-helpers "^6.3.13"
-    babel-messages "^6.3.13"
-    babel-register "^6.3.13"
-    babel-runtime "^5.0.0"
-    babel-template "^6.3.13"
-    babel-traverse "^6.3.21"
-    babel-types "^6.3.21"
-    babylon "^6.3.21"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.4.0"
-    lodash "^3.10.0"
-    minimatch "^2.0.3"
-    path-exists "^1.0.0"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    shebang-regex "^1.0.0"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
 babel-core@^6.22.0, babel-core@^6.7.2:
   version "6.22.1"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648"
@@ -1592,20 +1829,7 @@ babel-eslint@^9.0.0:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-generator@^6.18.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.17.4"
-    source-map "^0.5.6"
-    trim-right "^1.0.1"
-
-babel-generator@^6.22.0, babel-generator@^6.3.21:
+babel-generator@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.22.0.tgz#d642bf4961911a8adc7c692b0c9297f325cda805"
   dependencies:
@@ -1677,27 +1901,25 @@ babel-helper-replace-supers@^6.22.0:
     babel-traverse "^6.22.0"
     babel-types "^6.22.0"
 
-babel-helpers@^6.22.0, babel-helpers@^6.3.13:
+babel-helpers@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.22.0.tgz#d275f55f2252b8101bff07bc0c556deda657392c"
   dependencies:
     babel-runtime "^6.22.0"
     babel-template "^6.22.0"
 
-babel-jest@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-22.1.0.tgz#7fae6f655fffe77e818a8c2868c754a42463fdfd"
-  dependencies:
-    babel-plugin-istanbul "^4.1.5"
-    babel-preset-jest "^22.1.0"
-
-babel-jest@^23.6.0:
-  version "23.6.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.6.0.tgz#a644232366557a2240a0c083da6b25786185a2f1"
-  integrity sha512-lqKGG6LYXYu+DQh/slrQ8nxXQkEkhugdXsU6St7GmhVS7Ilc/22ArwqXNJrf0QaOBjZB0360qZMwXqDYQHXaew==
+babel-jest@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.7.1.tgz#73902c9ff15a7dfbdc9994b0b17fcefd96042178"
+  integrity sha512-GPnLqfk8Mtt0i4OemjWkChi73A3ALs4w2/QbG64uAj8b5mmwzxc7jbJVRZt8NJkxi6FopVHog9S3xX6UJKb2qg==
   dependencies:
-    babel-plugin-istanbul "^4.1.6"
-    babel-preset-jest "^23.2.0"
+    "@jest/transform" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.6.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
 
 babel-loader@^8.0.4:
   version "8.0.5"
@@ -1709,50 +1931,33 @@ babel-loader@^8.0.4:
     mkdirp "^0.5.1"
     util.promisify "^1.0.0"
 
-babel-messages@^6.22.0, babel-messages@^6.3.13:
+babel-messages@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.22.0.tgz#36066a214f1217e4ed4164867669ecb39e3ea575"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-check-es2015-constants@^6.7.2:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-istanbul@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
+babel-plugin-istanbul@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.1.tgz#7981590f1956d75d67630ba46f0c22493588c893"
+  integrity sha512-RNNVv2lsHAXJQsEJ5jonQwrJVWK8AcZpG1oxhnjCUaAjL7xahYLANhPUZbzEQHjKy1NMYUwn+0NPKQc8iSY4xQ==
   dependencies:
-    find-up "^2.1.0"
-    istanbul-lib-instrument "^1.7.5"
-    test-exclude "^4.1.1"
+    find-up "^3.0.0"
+    istanbul-lib-instrument "^3.0.0"
+    test-exclude "^5.0.0"
 
-babel-plugin-istanbul@^4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
-  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
+babel-plugin-jest-hoist@^24.6.0:
+  version "24.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.6.0.tgz#f7f7f7ad150ee96d7a5e8e2c5da8319579e78019"
+  integrity sha512-3pKNH6hMt9SbOv0F3WVmy5CWQ4uogS3k0GY5XLyQHJ9EGpAT9XWkFd2ZiXXtkwFHdAHa5j7w7kfxSP5lAIwu7w==
   dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-    find-up "^2.1.0"
-    istanbul-lib-instrument "^1.10.1"
-    test-exclude "^4.2.1"
-
-babel-plugin-jest-hoist@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee"
-
-babel-plugin-jest-hoist@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
-  integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=
+    "@types/babel__traverse" "^7.0.6"
 
 babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
@@ -1762,7 +1967,7 @@ babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.5.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.5.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.5.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
 
@@ -1964,22 +2169,15 @@ babel-preset-fbjs@^1.0.0:
     babel-plugin-transform-object-rest-spread "^6.6.5"
     object-assign "^4.0.1"
 
-babel-preset-jest@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.1.0.tgz#ff4e704102f9642765e2254226050561d8942ec9"
-  dependencies:
-    babel-plugin-jest-hoist "^22.1.0"
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-
-babel-preset-jest@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
-  integrity sha1-jsegOhOPABoaj7HoETZSvxpV2kY=
+babel-preset-jest@^24.6.0:
+  version "24.6.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz#66f06136eefce87797539c0d63f1769cc3915984"
+  integrity sha512-pdZqLEdmy1ZK5kyRUfvBb2IfTPb2BUvIJczlPspS8fWmBQslNNDBqVfh7BW5leOVJMDZKzjD8XEyABTk6gQ5yw==
   dependencies:
-    babel-plugin-jest-hoist "^23.2.0"
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.6.0"
 
-babel-register@^6.22.0, babel-register@^6.3.13:
+babel-register@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.22.0.tgz#a61dd83975f9ca4a9e7d6eff3059494cd5ea4c63"
   dependencies:
@@ -1998,12 +2196,6 @@ babel-runtime@6.23.0, babel-runtime@^6.20.0, babel-runtime@^6.9.1:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-runtime@^5.0.0:
-  version "5.8.38"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-5.8.38.tgz#1c0b02eb63312f5f087ff20450827b425c9d4c19"
-  dependencies:
-    core-js "^1.0.0"
-
 babel-runtime@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
@@ -2011,24 +2203,7 @@ babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babel-template@^6.16.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-template@^6.22.0, babel-template@^6.3.13:
+babel-template@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb"
   dependencies:
@@ -2038,21 +2213,7 @@ babel-template@^6.22.0, babel-template@^6.3.13:
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.18.0, babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.3.21:
+babel-traverse@^6.22.0, babel-traverse@^6.22.1:
   version "6.22.1"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.22.1.tgz#3b95cd6b7427d6f1f757704908f2fc9748a5f59f"
   dependencies:
@@ -2066,16 +2227,7 @@ babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.3.21:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.18.0, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babel-types@^6.22.0, babel-types@^6.3.21:
+babel-types@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.22.0.tgz#2a447e8d0ea25d2512409e4175479fd78cc8b1db"
   dependencies:
@@ -2084,14 +2236,10 @@ babel-types@^6.22.0, babel-types@^6.3.21:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.15.0, babylon@^6.3.21:
+babylon@^6.11.0, babylon@^6.15.0:
   version "6.15.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
 
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2158,13 +2306,6 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
-  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
-  dependencies:
-    inherits "~2.0.0"
-
 bluebird@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
@@ -2252,9 +2393,10 @@ browser-process-hrtime@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
 
-browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
   dependencies:
     resolve "1.1.7"
 
@@ -2483,6 +2625,11 @@ callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -2505,11 +2652,6 @@ camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-camelcase@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
-  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
-
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -2529,6 +2671,13 @@ caniuse-lite@^1.0.30000939:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000939.tgz#b9ab7ac9e861bf78840b80c5dfbc471a5cd7e679"
   integrity sha512-oXB23ImDJOgQpGjRv1tCtzAvJr4/OvrHi5SO2vUgB0g0xpdZZoA/BxfImiWfdwoYdUTtQrPsXsvYU/dmCSM8gg==
 
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
+
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
@@ -2543,14 +2692,6 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
-center-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
-  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
-  dependencies:
-    align-text "^0.1.3"
-    lazy-cache "^1.0.3"
-
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -2561,7 +2702,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2679,6 +2820,11 @@ ci-info@^1.5.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
   integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
 
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -2745,15 +2891,6 @@ clipboard-js@^0.3.6:
   resolved "https://registry.yarnpkg.com/clipboard-js/-/clipboard-js-0.3.6.tgz#6260add69b5318fde40b80f9d3c8c863efdaf339"
   integrity sha512-hyrmvbrYCeRBHdiR3KrEz0tmrUTXXEU8HLeGW0Y0icUSwYmAsmc+d6wfE4EDb/TxZmAVJG0eTfMlulCIT+ecfw==
 
-cliui@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
-  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
-  dependencies:
-    center-align "^0.1.1"
-    right-align "^0.1.1"
-    wordwrap "0.0.2"
-
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -2884,6 +3021,11 @@ compare-func@^1.3.1:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
 
+compare-versions@^3.2.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.4.0.tgz#e0747df5c9cb7f054d6d3dc3e1dbc444f9e92b26"
+  integrity sha512-tK69D7oNXXqUW3ZNo/z7NXTEz22TCF0pTE+YF9cxvaAM9XnkLo1fV621xCLrRR6aevJlKxExkss0vWqUCUpqdg==
+
 component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -3472,7 +3614,7 @@ debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^4.1.0:
+debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -3487,7 +3629,7 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@1.2.0, decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@1.2.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -3507,11 +3649,6 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-extend@~0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
-  integrity sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3520,11 +3657,12 @@ deepcopy@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-0.6.3.tgz#634780f2f8656ab771af8fa8431ed1ccee55c7b0"
 
-default-require-extensions@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+default-require-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
+  integrity sha1-9fj7sYp9bVCyH2QfZJ67Uiz+JPc=
   dependencies:
-    strip-bom "^2.0.0"
+    strip-bom "^3.0.0"
 
 defaults@^1.0.3:
   version "1.0.3"
@@ -3617,9 +3755,10 @@ detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
 
-diff@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+diff-sequences@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
+  integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -4311,11 +4450,10 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-exec-sh@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
-  dependencies:
-    merge "^1.1.3"
+exec-sh@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
+  integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
 
 execa@^0.7.0:
   version "0.7.0"
@@ -4410,16 +4548,17 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-expect@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-22.1.0.tgz#f8f9b019ab275d859cbefed531fbaefe8972431d"
+expect@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.7.1.tgz#d91defbab4e627470a152feaf35b3c31aa1c7c14"
+  integrity sha512-mGfvMTPduksV3xoI0xur56pQsg2vJjNf5+a+bXOjqCkiCBbmCayrBbHS/75y9K430cfqyocPr2ZjiNiRx4SRKw==
   dependencies:
+    "@jest/types" "^24.7.0"
     ansi-styles "^3.2.0"
-    jest-diff "^22.1.0"
-    jest-get-type "^22.1.0"
-    jest-matcher-utils "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-regex-util "^22.1.0"
+    jest-get-type "^24.3.0"
+    jest-matcher-utils "^24.7.0"
+    jest-message-util "^24.7.1"
+    jest-regex-util "^24.3.0"
 
 extend-shallow@^2.0.1:
   version "2.0.1"
@@ -4633,9 +4772,10 @@ filenamify@^1.0.0:
     strip-outer "^1.0.0"
     trim-repeated "^1.0.0"
 
-fileset@^2.0.2:
+fileset@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  integrity sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=
   dependencies:
     glob "^7.0.3"
     minimatch "^3.0.3"
@@ -4901,13 +5041,6 @@ fsevents@^1.0.0:
     nan "^2.9.2"
     node-pre-gyp "^0.10.0"
 
-fsevents@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
-  dependencies:
-    nan "^2.3.0"
-    node-pre-gyp "^0.6.39"
-
 fsevents@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
@@ -4916,23 +5049,6 @@ fsevents@^1.2.7:
     nan "^2.9.2"
     node-pre-gyp "^0.10.0"
 
-fstream-ignore@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
-  dependencies:
-    fstream "^1.0.0"
-    inherits "2"
-    minimatch "^3.0.0"
-
-fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -5188,7 +5304,7 @@ globals@^9.0.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
 
-globals@^9.14.0, globals@^9.18.0:
+globals@^9.14.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -5301,15 +5417,16 @@ handlebars@^4.0.2:
   optionalDependencies:
     uglify-js "^3.1.4"
 
-handlebars@^4.0.3:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+handlebars@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.1.tgz#6e4e41c18ebe7719ae4d38e5aca3d32fa3dd23d3"
+  integrity sha512-3Zhi6C0euYZL5sM0Zcy7lInLXKQ+YLcF/olbN010mzGQ4XVm50JeyBnMqofHh696GrciGruC7kCcApPDJvVgwA==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -5435,7 +5552,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hawk@3.1.3, hawk@~3.1.3:
+hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
   dependencies:
@@ -5622,13 +5739,6 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
-import-local@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
-  dependencies:
-    pkg-dir "^2.0.0"
-    resolve-cwd "^2.0.0"
-
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -5667,7 +5777,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
@@ -5734,7 +5844,7 @@ invariant@^2.2.0:
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.2, invariant@^2.2.3:
+invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5800,6 +5910,13 @@ is-ci@^1.0.10:
   dependencies:
     ci-info "^1.5.0"
 
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -5895,9 +6012,10 @@ is-fullwidth-code-point@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
-is-generator-fn@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
@@ -6098,6 +6216,11 @@ is-windows@^1.0.1, is-windows@^1.0.2:
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -6146,333 +6269,400 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-api@^1.1.14:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
-  dependencies:
-    async "^2.1.4"
-    fileset "^2.0.2"
-    istanbul-lib-coverage "^1.1.1"
-    istanbul-lib-hook "^1.1.0"
-    istanbul-lib-instrument "^1.9.1"
-    istanbul-lib-report "^1.1.2"
-    istanbul-lib-source-maps "^1.2.2"
-    istanbul-reports "^1.1.3"
-    js-yaml "^3.7.0"
-    mkdirp "^0.5.1"
+istanbul-api@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-2.1.1.tgz#194b773f6d9cbc99a9258446848b0f988951c4d0"
+  integrity sha512-kVmYrehiwyeBAk/wE71tW6emzLiHGjYIiDrc8sfyty4F8M02/lrgXSm+R1kXysmF20zArvmZXjlE/mg24TVPJw==
+  dependencies:
+    async "^2.6.1"
+    compare-versions "^3.2.1"
+    fileset "^2.0.3"
+    istanbul-lib-coverage "^2.0.3"
+    istanbul-lib-hook "^2.0.3"
+    istanbul-lib-instrument "^3.1.0"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.2"
+    istanbul-reports "^2.1.1"
+    js-yaml "^3.12.0"
+    make-dir "^1.3.0"
+    minimatch "^3.0.4"
     once "^1.4.0"
 
-istanbul-lib-coverage@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
-
-istanbul-lib-coverage@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
-  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#0b891e5ad42312c2b9488554f603795f9a2211ba"
+  integrity sha512-dKWuzRGCs4G+67VfW9pBFFz2Jpi4vSp/k7zBcJ888ofV5Mi1g5CUML5GvMvV6u9Cjybftu+E8Cgp+k0dI1E5lw==
 
-istanbul-lib-hook@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+istanbul-lib-hook@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-2.0.3.tgz#e0e581e461c611be5d0e5ef31c5f0109759916fb"
+  integrity sha512-CLmEqwEhuCYtGcpNVJjLV1DQyVnIqavMLFHV/DP+np/g3qvdxu3gsPqYoJMXm15sN84xOlckFB3VNvRbf5yEgA==
   dependencies:
-    append-transform "^0.4.0"
+    append-transform "^1.0.0"
 
-istanbul-lib-instrument@^1.10.1:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
-  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+istanbul-lib-instrument@^3.0.0, istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.1.0.tgz#a2b5484a7d445f1f311e93190813fa56dfb62971"
+  integrity sha512-ooVllVGT38HIk8MxDj/OIHXSYvH+1tq/Vb38s8ixt9GoJadXska4WkGY+0wkmtYCZNYtaARniH/DixUGGLZ0uA==
   dependencies:
-    babel-generator "^6.18.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.2.1"
-    semver "^5.3.0"
-
-istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
-  dependencies:
-    babel-generator "^6.18.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.1.1"
-    semver "^5.3.0"
+    "@babel/generator" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    istanbul-lib-coverage "^2.0.3"
+    semver "^5.5.0"
 
-istanbul-lib-report@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+istanbul-lib-report@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.4.tgz#bfd324ee0c04f59119cb4f07dab157d09f24d7e4"
+  integrity sha512-sOiLZLAWpA0+3b5w5/dq0cjm2rrNdAfHWaGhmn7XEFW6X++IV9Ohn+pnELAl9K3rfpaeBfbmH9JU5sejacdLeA==
   dependencies:
-    istanbul-lib-coverage "^1.1.1"
-    mkdirp "^0.5.1"
-    path-parse "^1.0.5"
-    supports-color "^3.1.2"
+    istanbul-lib-coverage "^2.0.3"
+    make-dir "^1.3.0"
+    supports-color "^6.0.0"
 
-istanbul-lib-source-maps@^1.2.1, istanbul-lib-source-maps@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+istanbul-lib-source-maps@^3.0.1, istanbul-lib-source-maps@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.2.tgz#f1e817229a9146e8424a28e5d69ba220fda34156"
+  integrity sha512-JX4v0CiKTGp9fZPmoxpu9YEkPbEqCqBbO3403VabKjH+NRXo72HafD5UgnjTEqHL2SAjaZK1XDuDOkn6I5QVfQ==
   dependencies:
-    debug "^3.1.0"
-    istanbul-lib-coverage "^1.1.1"
-    mkdirp "^0.5.1"
-    rimraf "^2.6.1"
-    source-map "^0.5.3"
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.3"
+    make-dir "^1.3.0"
+    rimraf "^2.6.2"
+    source-map "^0.6.1"
 
-istanbul-reports@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+istanbul-reports@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.1.1.tgz#72ef16b4ecb9a4a7bd0e2001e00f95d1eec8afa9"
+  integrity sha512-FzNahnidyEPBCI0HcufJoSEoKykesRlFcSzQqjH9x0+LC8tnnE/p/90PBLu8iZTxr8yYZNyTtiAujUqyN+CIxw==
   dependencies:
-    handlebars "^4.0.3"
+    handlebars "^4.1.0"
 
 jed@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
 
-jest-changed-files@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.1.4.tgz#1f7844bcb739dec07e5899a633c0cb6d5069834e"
+jest-changed-files@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.7.0.tgz#39d723a11b16ed7b373ac83adc76a69464b0c4fa"
+  integrity sha512-33BgewurnwSfJrW7T5/ZAXGE44o7swLslwh8aUckzq2e17/2Os1V0QU506ZNik3hjs8MgnEMKNkcud442NCDTw==
   dependencies:
+    "@jest/types" "^24.7.0"
+    execa "^1.0.0"
     throat "^4.0.0"
 
-jest-cli@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.1.4.tgz#0fe9f3ac881b0cdc00227114c58583a2ebefcc04"
+jest-cli@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.7.1.tgz#6093a539073b6f4953145abeeb9709cd621044f1"
+  integrity sha512-32OBoSCVPzcTslGFl6yVCMzB2SqX3IrWwZCY5mZYkb0D2WsogmU3eV2o8z7+gRQa4o4sZPX/k7GU+II7CxM6WQ==
   dependencies:
-    ansi-escapes "^3.0.0"
+    "@jest/core" "^24.7.1"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
     chalk "^2.0.1"
     exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.1.11"
-    import-local "^1.0.0"
-    is-ci "^1.0.10"
-    istanbul-api "^1.1.14"
-    istanbul-lib-coverage "^1.1.1"
-    istanbul-lib-instrument "^1.8.0"
-    istanbul-lib-source-maps "^1.2.1"
-    jest-changed-files "^22.1.4"
-    jest-config "^22.1.4"
-    jest-environment-jsdom "^22.1.4"
-    jest-get-type "^22.1.0"
-    jest-haste-map "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-regex-util "^22.1.0"
-    jest-resolve-dependencies "^22.1.0"
-    jest-runner "^22.1.4"
-    jest-runtime "^22.1.4"
-    jest-snapshot "^22.1.2"
-    jest-util "^22.1.4"
-    jest-worker "^22.1.0"
-    micromatch "^2.3.11"
-    node-notifier "^5.1.2"
-    realpath-native "^1.0.0"
-    rimraf "^2.5.4"
-    slash "^1.0.0"
-    string-length "^2.0.0"
-    strip-ansi "^4.0.0"
-    which "^1.2.12"
-    yargs "^10.0.3"
-
-jest-config@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.1.4.tgz#075ffacce83c3e38cf85b1b9ba0d21bd3ee27ad0"
-  dependencies:
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.7.1"
+    jest-util "^24.7.1"
+    jest-validate "^24.7.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^12.0.2"
+
+jest-config@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.7.1.tgz#6c1dd4db82a89710a3cf66bdba97827c9a1cf052"
+  integrity sha512-8FlJNLI+X+MU37j7j8RE4DnJkvAghXmBWdArVzypW6WxfGuxiL/CCkzBg0gHtXhD2rxla3IMOSUAHylSKYJ83g==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    babel-jest "^24.7.1"
     chalk "^2.0.1"
     glob "^7.1.1"
-    jest-environment-jsdom "^22.1.4"
-    jest-environment-node "^22.1.4"
-    jest-get-type "^22.1.0"
-    jest-jasmine2 "^22.1.4"
-    jest-regex-util "^22.1.0"
-    jest-resolve "^22.1.4"
-    jest-util "^22.1.4"
-    jest-validate "^22.1.2"
-    pretty-format "^22.1.0"
-
-jest-diff@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.1.0.tgz#0fad9d96c87b453896bf939df3dc8aac6919ac38"
+    jest-environment-jsdom "^24.7.1"
+    jest-environment-node "^24.7.1"
+    jest-get-type "^24.3.0"
+    jest-jasmine2 "^24.7.1"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.7.1"
+    jest-util "^24.7.1"
+    jest-validate "^24.7.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.7.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.7.0.tgz#5d862899be46249754806f66e5729c07fcb3580f"
+  integrity sha512-ULQZ5B1lWpH70O4xsANC4tf4Ko6RrpwhE3PtG6ERjMg1TiYTC2Wp4IntJVGro6a8HG9luYHhhmF4grF0Pltckg==
   dependencies:
     chalk "^2.0.1"
-    diff "^3.2.0"
-    jest-get-type "^22.1.0"
-    pretty-format "^22.1.0"
+    diff-sequences "^24.3.0"
+    jest-get-type "^24.3.0"
+    pretty-format "^24.7.0"
 
 jest-docblock@^21.0.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
   integrity sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==
 
-jest-docblock@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.1.0.tgz#3fe5986d5444cbcb149746eb4b07c57c5a464dfd"
+jest-docblock@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.3.0.tgz#b9c32dac70f72e4464520d2ba4aec02ab14db5dd"
+  integrity sha512-nlANmF9Yq1dufhFlKG9rasfQlrY7wINJbo3q01tu56Jv5eBU5jirylhF2O5ZBnLxzOVBGRDz/9NAwNyBtG4Nyg==
   dependencies:
     detect-newline "^2.1.0"
 
-jest-environment-jsdom@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.1.4.tgz#704518ce8375f7ec5de048d1e9c4268b08a03e00"
+jest-each@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.7.1.tgz#fcc7dda4147c28430ad9fb6dc7211cd17ab54e74"
+  integrity sha512-4fsS8fEfLa3lfnI1Jw6NxjhyRTgfpuOVTeUZZFyVYqeTa4hPhr2YkToUhouuLTrL2eMGOfpbdMyRx0GQ/VooKA==
   dependencies:
-    jest-mock "^22.1.0"
-    jest-util "^22.1.4"
+    "@jest/types" "^24.7.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.3.0"
+    jest-util "^24.7.1"
+    pretty-format "^24.7.0"
+
+jest-environment-jsdom@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.7.1.tgz#a40e004b4458ebeb8a98082df135fd501b9fbbd6"
+  integrity sha512-Gnhb+RqE2JuQGb3kJsLF8vfqjt3PHKSstq4Xc8ic+ax7QKo4Z0RWGucU3YV+DwKR3T9SYc+3YCUQEJs8r7+Jxg==
+  dependencies:
+    "@jest/environment" "^24.7.1"
+    "@jest/fake-timers" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    jest-mock "^24.7.0"
+    jest-util "^24.7.1"
     jsdom "^11.5.1"
 
-jest-environment-node@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.1.4.tgz#0f2946e8f8686ce6c5d8fa280ce1cd8d58e869eb"
+jest-environment-node@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.7.1.tgz#fa2c047a31522a48038d26ee4f7c8fd9c1ecfe12"
+  integrity sha512-GJJQt1p9/C6aj6yNZMvovZuxTUd+BEJprETdvTKSb4kHcw4mFj8777USQV0FJoJ4V3djpOwA5eWyPwfq//PFBA==
   dependencies:
-    jest-mock "^22.1.0"
-    jest-util "^22.1.4"
+    "@jest/environment" "^24.7.1"
+    "@jest/fake-timers" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    jest-mock "^24.7.0"
+    jest-util "^24.7.1"
 
 jest-get-type@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.1.0.tgz#4e90af298ed6181edc85d2da500dbd2753e0d5a9"
 
-jest-haste-map@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.1.0.tgz#1174c6ff393f9818ebf1163710d8868b5370da2a"
+jest-get-type@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.3.0.tgz#582cfd1a4f91b5cdad1d43d2932f816d543c65da"
+  integrity sha512-HYF6pry72YUlVcvUx3sEpMRwXEWGEPlJ0bSPVnB3b3n++j4phUEoSPcS6GC0pPJ9rpyPSe4cb5muFo6D39cXow==
+
+jest-haste-map@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.7.1.tgz#772e215cd84080d4bbcb759cfb668ad649a21471"
+  integrity sha512-g0tWkzjpHD2qa03mTKhlydbmmYiA2KdcJe762SbfFo/7NIMgBWAA0XqQlApPwkWOF7Cxoi/gUqL0i6DIoLpMBw==
   dependencies:
+    "@jest/types" "^24.7.0"
+    anymatch "^2.0.0"
     fb-watchman "^2.0.0"
-    graceful-fs "^4.1.11"
-    jest-docblock "^22.1.0"
-    jest-worker "^22.1.0"
-    micromatch "^2.3.11"
-    sane "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.4.0"
+    jest-util "^24.7.1"
+    jest-worker "^24.6.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
 
-jest-jasmine2@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.1.4.tgz#cada0baf50a220c616a9575728b80d4ddedebe8b"
+jest-jasmine2@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.7.1.tgz#01398686dabe46553716303993f3be62e5d9d818"
+  integrity sha512-Y/9AOJDV1XS44wNwCaThq4Pw3gBPiOv/s6NcbOAkVRRUEPu+36L2xoPsqQXsDrxoBerqeyslpn2TpCI8Zr6J2w==
   dependencies:
-    callsites "^2.0.0"
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.7.1"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
     chalk "^2.0.1"
     co "^4.6.0"
-    expect "^22.1.0"
-    graceful-fs "^4.1.11"
-    is-generator-fn "^1.0.0"
-    jest-diff "^22.1.0"
-    jest-matcher-utils "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-snapshot "^22.1.2"
-    source-map-support "^0.5.0"
-
-jest-leak-detector@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.1.0.tgz#08376644cee07103da069baac19adb0299b772c2"
+    expect "^24.7.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.7.1"
+    jest-matcher-utils "^24.7.0"
+    jest-message-util "^24.7.1"
+    jest-runtime "^24.7.1"
+    jest-snapshot "^24.7.1"
+    jest-util "^24.7.1"
+    pretty-format "^24.7.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.7.0.tgz#323ff93ed69be12e898f5b040952f08a94288ff9"
+  integrity sha512-zV0qHKZGXtmPVVzT99CVEcHE9XDf+8LwiE0Ob7jjezERiGVljmqKFWpV2IkG+rkFIEUHFEkMiICu7wnoPM/RoQ==
   dependencies:
-    pretty-format "^22.1.0"
+    pretty-format "^24.7.0"
 
-jest-matcher-utils@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.1.0.tgz#e164665b5d313636ac29f7f6fe9ef0a6ce04febc"
+jest-matcher-utils@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.7.0.tgz#bbee1ff37bc8b2e4afcaabc91617c1526af4bcd4"
+  integrity sha512-158ieSgk3LNXeUhbVJYRXyTPSCqNgVXOp/GT7O94mYd3pk/8+odKTyR1JLtNOQSPzNi8NFYVONtvSWA/e1RDXg==
   dependencies:
     chalk "^2.0.1"
-    jest-get-type "^22.1.0"
-    pretty-format "^22.1.0"
+    jest-diff "^24.7.0"
+    jest-get-type "^24.3.0"
+    pretty-format "^24.7.0"
 
-jest-message-util@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.1.0.tgz#51ba0794cb6e579bfc4e9adfac452f9f1a0293fc"
+jest-message-util@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.7.1.tgz#f1dc3a6c195647096a99d0f1dadbc447ae547018"
+  integrity sha512-dk0gqVtyqezCHbcbk60CdIf+8UHgD+lmRHifeH3JRcnAqh4nEyPytSc9/L1+cQyxC+ceaeP696N4ATe7L+omcg==
   dependencies:
-    "@babel/code-frame" "^7.0.0-beta.35"
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/stack-utils" "^1.0.1"
     chalk "^2.0.1"
-    micromatch "^2.3.11"
-    slash "^1.0.0"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.1.0.tgz#87ec21c0599325671c9a23ad0e05c86fb5879b61"
-
-jest-regex-util@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-22.1.0.tgz#5daf2fe270074b6da63e5d85f1c9acc866768f53"
-
-jest-resolve-dependencies@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-22.1.0.tgz#340e4139fb13315cd43abc054e6c06136be51e31"
+jest-mock@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.7.0.tgz#e49ce7262c12d7f5897b0d8af77f6db8e538023b"
+  integrity sha512-6taW4B4WUcEiT2V9BbOmwyGuwuAFT2G8yghF7nyNW1/2gq5+6aTqSPcS9lS6ArvEkX55vbPAS/Jarx5LSm4Fng==
   dependencies:
-    jest-regex-util "^22.1.0"
+    "@jest/types" "^24.7.0"
 
-jest-resolve@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.1.4.tgz#72b9b371eaac48f84aad4ad732222ffe37692602"
-  dependencies:
-    browser-resolve "^1.11.2"
+jest-pnp-resolver@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
+  integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
+
+jest-regex-util@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
+  integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
+
+jest-resolve-dependencies@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.7.1.tgz#cf93bbef26999488a96a2b2012f9fe7375aa378f"
+  integrity sha512-2Eyh5LJB2liNzfk4eo7bD1ZyBbqEJIyyrFtZG555cSWW9xVHxII2NuOkSl1yUYTAYCAmM2f2aIT5A7HzNmubyg==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.7.1"
+
+jest-resolve@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.7.1.tgz#e4150198299298380a75a9fd55043fa3b9b17fde"
+  integrity sha512-Bgrc+/UUZpGJ4323sQyj85hV9d+ANyPNu6XfRDUcyFNX1QrZpSoM0kE4Mb2vZMAYTJZsBFzYe8X1UaOkOELSbw==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    browser-resolve "^1.11.3"
     chalk "^2.0.1"
-
-jest-runner@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.1.4.tgz#e039039110cb1b31febc0f99e349bf7c94304a2f"
-  dependencies:
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.7.1.tgz#41c8a02a06aa23ea82d8bffd69d7fa98d32f85bf"
+  integrity sha512-aNFc9liWU/xt+G9pobdKZ4qTeG/wnJrJna3VqunziDNsWT3EBpmxXZRBMKCsNMyfy+A/XHiV+tsMLufdsNdgCw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.7.1"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    chalk "^2.4.2"
     exit "^0.1.2"
-    jest-config "^22.1.4"
-    jest-docblock "^22.1.0"
-    jest-haste-map "^22.1.0"
-    jest-jasmine2 "^22.1.4"
-    jest-leak-detector "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-runtime "^22.1.4"
-    jest-util "^22.1.4"
-    jest-worker "^22.1.0"
+    graceful-fs "^4.1.15"
+    jest-config "^24.7.1"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.7.1"
+    jest-jasmine2 "^24.7.1"
+    jest-leak-detector "^24.7.0"
+    jest-message-util "^24.7.1"
+    jest-resolve "^24.7.1"
+    jest-runtime "^24.7.1"
+    jest-util "^24.7.1"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
     throat "^4.0.0"
 
-jest-runtime@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.1.4.tgz#1474d9f5cda518b702e0b25a17d4ef3fc563a20c"
-  dependencies:
-    babel-core "^6.0.0"
-    babel-jest "^22.1.0"
-    babel-plugin-istanbul "^4.1.5"
+jest-runtime@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.7.1.tgz#2ffd70b22dd03a5988c0ab9465c85cdf5d25c597"
+  integrity sha512-0VAbyBy7tll3R+82IPJpf6QZkokzXPIS71aDeqh+WzPRXRCNz6StQ45otFariPdJ4FmXpDiArdhZrzNAC3sj6A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.7.1"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/yargs" "^12.0.2"
     chalk "^2.0.1"
-    convert-source-map "^1.4.0"
     exit "^0.1.2"
-    graceful-fs "^4.1.11"
-    jest-config "^22.1.4"
-    jest-haste-map "^22.1.0"
-    jest-regex-util "^22.1.0"
-    jest-resolve "^22.1.4"
-    jest-util "^22.1.4"
-    json-stable-stringify "^1.0.1"
-    micromatch "^2.3.11"
-    realpath-native "^1.0.0"
-    slash "^1.0.0"
-    strip-bom "3.0.0"
-    write-file-atomic "^2.1.0"
-    yargs "^10.0.3"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.7.1"
+    jest-haste-map "^24.7.1"
+    jest-message-util "^24.7.1"
+    jest-mock "^24.7.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.7.1"
+    jest-snapshot "^24.7.1"
+    jest-util "^24.7.1"
+    jest-validate "^24.7.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^12.0.2"
+
+jest-serializer@^24.4.0:
+  version "24.4.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
+  integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
 
-jest-snapshot@^22.1.2:
-  version "22.1.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.1.2.tgz#b270cf6e3098f33aceeafda02b13eb0933dc6139"
+jest-snapshot@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.7.1.tgz#bd5a35f74aedff070975e9e9c90024f082099568"
+  integrity sha512-8Xk5O4p+JsZZn4RCNUS3pxA+ORKpEKepE+a5ejIKrId9CwrVN0NY+vkqEkXqlstA5NMBkNahXkR/4qEBy0t5yA==
   dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.7.0"
     chalk "^2.0.1"
-    jest-diff "^22.1.0"
-    jest-matcher-utils "^22.1.0"
+    expect "^24.7.1"
+    jest-diff "^24.7.0"
+    jest-matcher-utils "^24.7.0"
+    jest-message-util "^24.7.1"
+    jest-resolve "^24.7.1"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^22.1.0"
+    pretty-format "^24.7.0"
+    semver "^5.5.0"
 
-jest-util@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.1.4.tgz#ac8cbd43ee654102f1941f3f0e9d1d789a8b6a9b"
-  dependencies:
-    callsites "^2.0.0"
+jest-util@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.7.1.tgz#b4043df57b32a23be27c75a2763d8faf242038ff"
+  integrity sha512-/KilOue2n2rZ5AnEBYoxOXkeTu6vi7cjgQ8MXEkih0oeAXT6JkS3fr7/j8+engCjciOU1Nq5loMSKe0A1oeX0A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/fake-timers" "^24.7.1"
+    "@jest/source-map" "^24.3.0"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    callsites "^3.0.0"
     chalk "^2.0.1"
-    graceful-fs "^4.1.11"
-    is-ci "^1.0.10"
-    jest-message-util "^22.1.0"
-    jest-validate "^22.1.2"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
     mkdirp "^0.5.1"
-
-jest-validate@^22.1.2:
-  version "22.1.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.1.2.tgz#c3b06bcba7bd9a850919fe336b5f2a8c3a239404"
-  dependencies:
-    chalk "^2.0.1"
-    jest-get-type "^22.1.0"
-    leven "^2.1.0"
-    pretty-format "^22.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.0"
 
 jest-validate@^23.5.0:
   version "23.6.0"
@@ -6484,17 +6674,46 @@ jest-validate@^23.5.0:
     leven "^2.1.0"
     pretty-format "^23.6.0"
 
-jest-worker@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.1.0.tgz#0987832fe58fbdc205357f4c19b992446368cafb"
+jest-validate@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.7.0.tgz#70007076f338528ee1b1c8a8258b1b0bb982508d"
+  integrity sha512-cgai/gts9B2chz1rqVdmLhzYxQbgQurh1PEQSvSgPZ8KGa1AqXsqC45W5wKEwzxKrWqypuQrQxnF4+G9VejJJA==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    camelcase "^5.0.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.3.0"
+    leven "^2.1.0"
+    pretty-format "^24.7.0"
+
+jest-watcher@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.7.1.tgz#e161363d7f3f4e1ef3d389b7b3a0aad247b673f5"
+  integrity sha512-Wd6TepHLRHVKLNPacEsBwlp9raeBIO+01xrN24Dek4ggTS8HHnOzYSFnvp+6MtkkJ3KfMzy220KTi95e2rRkrw==
+  dependencies:
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/yargs" "^12.0.9"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.7.1"
+    string-length "^2.0.0"
+
+jest-worker@^24.6.0:
+  version "24.6.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.6.0.tgz#7f81ceae34b7cde0c9827a6980c35b7cdc0161b3"
+  integrity sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==
   dependencies:
     merge-stream "^1.0.1"
+    supports-color "^6.1.0"
 
-jest@22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-22.1.4.tgz#9ec71373a38f40ff92a3e5e96ae85687c181bb72"
+jest@^24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.7.1.tgz#0d94331cf510c75893ee32f87d7321d5bf8f2501"
+  integrity sha512-AbvRar5r++izmqo5gdbAjTeA6uNRGoNRuj5vHB0OnDXo2DXWZJVuaObiGgtlvhKb+cWy2oYbQSfxv7Q7GjnAtA==
   dependencies:
-    jest-cli "^22.1.4"
+    import-local "^2.0.0"
+    jest-cli "^24.7.1"
 
 jetpack-id@1.0.0:
   version "1.0.0"
@@ -6531,6 +6750,14 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^3.12.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^3.5.1:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -6538,13 +6765,6 @@ js-yaml@^3.5.1:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
-js-yaml@^3.7.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.12.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
@@ -6638,10 +6858,6 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.4.0.tgz#054352e4c4c80c86c0923877d449de176a732c8d"
-
 json5@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -6774,17 +6990,17 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
   integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
 
+kleur@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
   dependencies:
     package-json "^4.0.0"
 
-lazy-cache@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
-  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
-
 lazystream@^1.0.0, lazystream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
@@ -7158,7 +7374,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@3.10.1, lodash@^3.10.0:
+lodash@3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
@@ -7194,11 +7410,6 @@ log-update@^2.0.0, log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-longest@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
-  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7241,7 +7452,7 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-make-dir@^1.0.0:
+make-dir@^1.0.0, make-dir@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
   integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
@@ -7377,11 +7588,7 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
-merge@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
-
-micromatch@^2.1.5, micromatch@^2.3.11:
+micromatch@^2.1.5:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   dependencies:
@@ -7469,19 +7676,13 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^2.0.3:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
-  dependencies:
-    brace-expansion "^1.0.0"
-
 minimist-options@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
@@ -7549,7 +7750,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -7640,11 +7841,6 @@ mz@2.6.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.3.0:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
-  integrity sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==
-
 nan@^2.3.3:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
@@ -7692,7 +7888,7 @@ needle@^2.2.1:
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
-neo-async@^2.5.0:
+neo-async@^2.5.0, neo-async@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
   integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
@@ -7778,6 +7974,11 @@ node-libs-browser@^2.0.0:
     util "^0.11.0"
     vm-browserify "0.0.4"
 
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
+
 node-notifier@5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
@@ -7787,12 +7988,14 @@ node-notifier@5.1.2:
     shellwords "^0.1.0"
     which "^1.2.12"
 
-node-notifier@^5.1.2:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
+node-notifier@^5.2.1:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.0.tgz#7b455fdce9f7de0c63538297354f3db468426e6a"
+  integrity sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ==
   dependencies:
     growly "^1.3.0"
-    semver "^5.4.1"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
     shellwords "^0.1.1"
     which "^1.3.0"
 
@@ -7812,22 +8015,6 @@ node-pre-gyp@^0.10.0:
     semver "^5.3.0"
     tar "^4"
 
-node-pre-gyp@^0.6.39:
-  version "0.6.39"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
-  dependencies:
-    detect-libc "^1.0.2"
-    hawk "3.1.3"
-    mkdirp "^0.5.1"
-    nopt "^4.0.1"
-    npmlog "^4.0.2"
-    rc "^1.1.7"
-    request "2.81.0"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^2.2.1"
-    tar-pack "^3.4.0"
-
 node-releases@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.8.tgz#32a63fff63c5e51b7e0f540ac95947d220fc6862"
@@ -8016,7 +8203,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -8134,6 +8321,13 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
+  dependencies:
+    p-reduce "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -8182,6 +8376,11 @@ p-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.0.0.tgz#be18c5a5adeb8e156460651421aceca56c213a50"
   integrity sha512-GO107XdrSUmtHxVoi60qc9tUl/KkNKm+X2CF4P9amalpGxv5YqVPJNfSb0wcA+syCopkZvYYIzW8OVTQW59x/w==
 
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -8290,10 +8489,6 @@ path-dirname@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
   integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
-path-exists@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-1.0.0.tgz#d5a8998eb71ef37a74c34eb0d9eba6e878eea081"
-
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
@@ -8320,7 +8515,7 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-parse@^1.0.5, path-parse@^1.0.6:
+path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
@@ -8410,6 +8605,13 @@ pino@^4.6.0:
     quick-format-unescaped "^1.1.1"
     split2 "^2.0.1"
 
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
@@ -8521,13 +8723,6 @@ prettier@^1.16.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
   integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
-pretty-format@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.1.0.tgz#2277605b40ed4529ae4db51ff62f4be817647914"
-  dependencies:
-    ansi-regex "^3.0.0"
-    ansi-styles "^3.2.0"
-
 pretty-format@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
@@ -8536,16 +8731,21 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.7.0.tgz#d23106bc2edcd776079c2daa5da02bcb12ed0c10"
+  integrity sha512-apen5cjf/U4dj7tHetpC7UEFCvtAgnNZnBDkfPv3fokzIqyOJckAG9OlAPC1BlFALnqT/lGB2tl9EJjlK6eCsA==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
-process-nextick-args@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
-  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
-
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
@@ -8587,6 +8787,14 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prompts@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.0.4.tgz#179f9d4db3128b9933aa35f93a800d8fce76a682"
+  integrity sha512-HTzM3UWp/99A0gk51gAegwo1QRYA7xjcZufMNe33rCclFszUYAuHe1fIN/3ZmiHeGPkUsNaRyQm1hHOfM0PKxA==
+  dependencies:
+    kleur "^3.0.2"
+    sisteransi "^1.0.0"
+
 prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -8753,15 +8961,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-rc@^1.1.7:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.5.tgz#275cd687f6e3b36cc756baa26dfee80a790301fd"
-  dependencies:
-    deep-extend "~0.4.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-color@^2.11.7:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
@@ -8774,15 +8973,15 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
-  integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
+react-dom@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.4"
+    scheduler "^0.13.6"
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -8794,6 +8993,11 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-is@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8812,15 +9016,15 @@ react-window@^1.7.2:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
-  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
+react@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.4"
+    scheduler "^0.13.6"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -8860,6 +9064,14 @@ read-pkg-up@^3.0.0:
     find-up "^2.0.0"
     read-pkg "^3.0.0"
 
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg@^1.0.0, read-pkg@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -8909,18 +9121,6 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.1.4:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
-    util-deprecate "~1.0.1"
-
 readdirp@^2.0.0, readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -8938,9 +9138,10 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
-realpath-native@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.0.0.tgz#7885721a83b43bd5327609f0ddecb2482305fdf0"
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
   dependencies:
     util.promisify "^1.0.0"
 
@@ -8986,10 +9187,6 @@ regenerator-runtime@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@@ -9163,7 +9360,7 @@ request@2.79.0:
     tunnel-agent "~0.4.1"
     uuid "^3.0.0"
 
-request@2.81.0, request@^2.81.0:
+request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -9298,19 +9495,6 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-right-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
-  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
-  dependencies:
-    align-text "^0.1.1"
-
-rimraf@2, rimraf@^2.5.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
-  dependencies:
-    glob "^7.0.5"
-
 rimraf@^2.2.8:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
@@ -9343,6 +9527,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rsvp@^4.8.4:
+  version "4.8.4"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.4.tgz#b50e6b34583f3dd89329a2f23a8a2be072845911"
+  integrity sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA==
+
 run-async@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
@@ -9407,26 +9596,27 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sane@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.3.0.tgz#3f3df584abf69e63d4bb74f0f8c42468e4d7d46b"
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
   dependencies:
-    anymatch "^1.3.0"
-    exec-sh "^0.2.0"
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
     fb-watchman "^2.0.0"
-    minimatch "^3.0.2"
+    micromatch "^3.1.4"
     minimist "^1.1.1"
     walker "~1.0.5"
-    watch "~0.18.0"
-  optionalDependencies:
-    fsevents "^1.1.1"
 
 sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13, scheduler@^0.13.4:
+scheduler@^0.13:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
   integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
@@ -9434,6 +9624,14 @@ scheduler@^0.13, scheduler@^0.13.4:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -9586,11 +9784,21 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+sisteransi@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.0.tgz#77d9622ff909080f1c19e5f4a1df0c1b0a27b88c"
+  integrity sha512-N+z4pHB4AmUv0SjveWRd6q1Nj5w62m5jodv+GD8lvmbY/83T/rpbJGZOnK5T149OldDj4Db07BSv9xY4K6NTPQ==
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
   integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
@@ -9693,10 +9901,12 @@ source-map-support@^0.4.2:
   dependencies:
     source-map "^0.5.3"
 
-source-map-support@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+source-map-support@^0.5.6:
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
+  integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
   dependencies:
+    buffer-from "^1.0.0"
     source-map "^0.6.0"
 
 source-map-support@~0.5.9:
@@ -9712,14 +9922,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -9949,12 +10152,6 @@ string_decoder@~0.10.25, string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-string_decoder@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
-  dependencies:
-    safe-buffer "~5.1.0"
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -9994,6 +10191,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
 strip-bom-buf@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz#1cb45aaf57530f4caf86c7f75179d2c9a51dd572"
@@ -10007,10 +10211,6 @@ strip-bom-stream@3.0.0:
     first-chunk-stream "^2.0.0"
     strip-bom-buf "^1.0.0"
 
-strip-bom@3.0.0, strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -10018,6 +10218,10 @@ strip-bom@^2.0.0:
   dependencies:
     is-utf8 "^0.2.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -10076,7 +10280,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
@@ -10096,6 +10300,13 @@ supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.0.0, supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -10133,19 +10344,6 @@ tapable@^1.0.0, tapable@^1.1.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
   integrity sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==
 
-tar-pack@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
-  dependencies:
-    debug "^2.2.0"
-    fstream "^1.0.10"
-    fstream-ignore "^1.0.5"
-    once "^1.3.3"
-    readable-stream "^2.1.4"
-    rimraf "^2.5.1"
-    tar "^2.2.1"
-    uid-number "^0.0.6"
-
 tar-stream@^1.5.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
@@ -10159,14 +10357,6 @@ tar-stream@^1.5.0:
     to-buffer "^1.1.1"
     xtend "^4.0.0"
 
-tar@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
-  dependencies:
-    block-stream "*"
-    fstream "^1.0.2"
-    inherits "2"
-
 tar@^4:
   version "4.4.8"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
@@ -10234,25 +10424,14 @@ terser@^3.16.1:
     source-map "~0.6.1"
     source-map-support "~0.5.9"
 
-test-exclude@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
-  dependencies:
-    arrify "^1.0.1"
-    micromatch "^2.3.11"
-    object-assign "^4.1.0"
-    read-pkg-up "^1.0.1"
-    require-main-filename "^1.0.1"
-
-test-exclude@^4.2.1:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
-  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
+test-exclude@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.1.0.tgz#6ba6b25179d2d38724824661323b73e03c0c1de1"
+  integrity sha512-gwf0S2fFsANC55fSeSqpb8BYk6w3FDvwZxfNjeF6FRgvFa43r+7wRiA/Q0IxoRU37wB/LE8IQ4221BsNucTaCA==
   dependencies:
     arrify "^1.0.1"
-    micromatch "^2.3.11"
-    object-assign "^4.1.0"
-    read-pkg-up "^1.0.1"
+    minimatch "^3.0.4"
+    read-pkg-up "^4.0.0"
     require-main-filename "^1.0.1"
 
 text-extensions@^1.0.0:
@@ -10352,10 +10531,6 @@ to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -10492,16 +10667,6 @@ ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
   integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
 
-uglify-js@^2.6:
-  version "2.8.29"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
-  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
-  dependencies:
-    source-map "~0.5.1"
-    yargs "~3.10.0"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
-
 uglify-js@^3.1.4:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
@@ -10510,15 +10675,6 @@ uglify-js@^3.1.4:
     commander "~2.17.1"
     source-map "~0.6.1"
 
-uglify-to-browserify@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
-  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
-
-uid-number@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
-
 ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
@@ -10758,9 +10914,10 @@ walkdir@^0.0.11:
   resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
   integrity sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=
 
-walker@~1.0.5:
+walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
   dependencies:
     makeerror "1.0.x"
 
@@ -10778,13 +10935,6 @@ warning@^4.0.2:
   dependencies:
     loose-envify "^1.0.0"
 
-watch@~0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
-  dependencies:
-    exec-sh "^0.2.0"
-    minimist "^1.2.0"
-
 watchpack@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.0.tgz#5164d4faabb88dcf277f17c8a3b16bfd3da8bee3"
@@ -10995,20 +11145,10 @@ widest-line@^1.0.0:
   dependencies:
     string-width "^1.0.1"
 
-window-size@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
-  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
-
 winreg@0.0.12:
   version "0.0.12"
   resolved "https://registry.yarnpkg.com/winreg/-/winreg-0.0.12.tgz#07105554ba1a9d08979251d129475bffae3006b7"
 
-wordwrap@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
-  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
-
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
@@ -11046,18 +11186,19 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.2.tgz#a7181706dfba17855d221140a9c06e15fcdd87b9"
-  integrity sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==
+write-file-atomic@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-write-file-atomic@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.2.tgz#a7181706dfba17855d221140a9c06e15fcdd87b9"
+  integrity sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
@@ -11168,12 +11309,6 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs-parser@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
-  dependencies:
-    camelcase "^4.1.0"
-
 yargs@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
@@ -11210,24 +11345,7 @@ yargs@8.0.2, yargs@^8.0.1, yargs@^8.0.2:
     y18n "^3.2.1"
     yargs-parser "^7.0.0"
 
-yargs@^10.0.3:
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5"
-  dependencies:
-    cliui "^4.0.0"
-    decamelize "^1.1.1"
-    find-up "^2.1.0"
-    get-caller-file "^1.0.1"
-    os-locale "^2.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^8.1.0"
-
-yargs@^12.0.4:
+yargs@^12.0.2, yargs@^12.0.4:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
@@ -11245,16 +11363,6 @@ yargs@^12.0.4:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
-  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
-  dependencies:
-    camelcase "^1.0.2"
-    cliui "^2.1.0"
-    decamelize "^1.0.0"
-    window-size "0.1.0"
-
 yauzl@2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.8.0.tgz#79450aff22b2a9c5a41ef54e02db907ccfbf9ee2"

From 9fb794b6ed614b800e1ddd2601e72a7b95fc660c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 09:07:40 -0700
Subject: [PATCH 346/814] Added multi-test setup logic

---
 .eslintrc                                     |  4 ++
 flow.js                                       |  9 ++++
 package.json                                  |  6 +++
 .../__snapshots__/sanity-test.js.snap         | 11 ----
 .../__snapshots__/store-test.js.snap          | 20 ++++++++
 src/__tests__/sanity-test.js                  | 41 ---------------
 src/__tests__/setupEnv.js                     |  7 +++
 src/__tests__/setupTests.js                   | 50 +++++++++++++++++++
 src/__tests__/store-test.js                   | 43 ++++++++++++++++
 src/__tests__/utils.js                        | 40 ---------------
 src/hook.js                                   |  3 ++
 11 files changed, 142 insertions(+), 92 deletions(-)
 delete mode 100644 src/__tests__/__snapshots__/sanity-test.js.snap
 create mode 100644 src/__tests__/__snapshots__/store-test.js.snap
 delete mode 100644 src/__tests__/sanity-test.js
 create mode 100644 src/__tests__/setupEnv.js
 create mode 100644 src/__tests__/setupTests.js
 create mode 100644 src/__tests__/store-test.js
 delete mode 100644 src/__tests__/utils.js

diff --git a/.eslintrc b/.eslintrc
index 478f849f9442..0db22495291b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,5 +8,9 @@
   },
   "settings": {
     "version": "detect"
+  },
+  "globals": {
+    "__DEV__": "readonly",
+    "jasmine": "readonly"
   }
 }
diff --git a/flow.js b/flow.js
index ee27f03d085e..df570e10211c 100644
--- a/flow.js
+++ b/flow.js
@@ -9,3 +9,12 @@ declare module 'events' {
 
   declare export default typeof EventEmitter;
 }
+
+declare var __DEV__: boolean;
+
+declare var jasmine: {|
+  getEnv: () => {|
+    afterEach: (callback: Function) => void,
+    beforeEach: (callback: Function) => void,
+  |},
+|};
diff --git a/package.json b/package.json
index 81e52871c225..81c98bb0a7c9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,12 @@
     "moduleNameMapper": {
       "^src/(.*)$": "<rootDir>/src/$1"
     },
+    "setupFiles": [
+      "<rootDir>/src/__tests__/setupEnv"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/__tests__/setupTests"
+    ],
     "snapshotSerializers": [
       "<rootDir>/src/__tests__/storeSerializer"
     ],
diff --git a/src/__tests__/__snapshots__/sanity-test.js.snap b/src/__tests__/__snapshots__/sanity-test.js.snap
deleted file mode 100644
index e1a57e551eb8..000000000000
--- a/src/__tests__/__snapshots__/sanity-test.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`sanity should pass 1`] = `
-▾ <Grandparent>
-  ▾ <Parent>
-      <Child key="one">
-      <Child key="two">
-  ▾ <Parent>
-      <Child key="one">
-      <Child key="two">
-`;
diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
new file mode 100644
index 000000000000..278759222425
--- /dev/null
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store should initialize a multiple root tree 1`] = `
+▾ <Parent>
+    <Child key="one">
+    <Child key="two">
+▾ <Parent>
+    <Child key="one">
+    <Child key="two">
+`;
+
+exports[`Store should initialize a simple tree 1`] = `
+▾ <Grandparent>
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+`;
diff --git a/src/__tests__/sanity-test.js b/src/__tests__/sanity-test.js
deleted file mode 100644
index 80c475ed9921..000000000000
--- a/src/__tests__/sanity-test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// @flow
-
-import { setup } from './utils';
-
-describe('sanity', () => {
-  let React;
-  let ReactDOM;
-  let store;
-
-  beforeEach(() => {
-    store = setup();
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-  });
-
-  it('should pass', () => {
-    function Grandparent() {
-      return (
-        <React.Fragment>
-          <Parent />
-          <Parent />
-        </React.Fragment>
-      );
-    }
-
-    function Parent() {
-      return [<Child key="one" />, <Child key="two" />];
-    }
-
-    function Child() {
-      return <div>Hi!</div>;
-    }
-
-    ReactDOM.render(<Grandparent />, document.createElement('div'));
-
-    jest.runAllTimers(); // Flush Bridge operations
-
-    expect(store).toMatchSnapshot();
-  });
-});
diff --git a/src/__tests__/setupEnv.js b/src/__tests__/setupEnv.js
new file mode 100644
index 000000000000..af4769936055
--- /dev/null
+++ b/src/__tests__/setupEnv.js
@@ -0,0 +1,7 @@
+// @flow
+
+global.localStorage = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  clear: jest.fn(),
+};
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
new file mode 100644
index 000000000000..762784e7e40c
--- /dev/null
+++ b/src/__tests__/setupTests.js
@@ -0,0 +1,50 @@
+// @flow
+
+import Agent from 'src/backend/agent';
+import { initBackend } from 'src/backend';
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/store';
+import { installHook } from 'src/hook';
+
+let agent;
+let bridge;
+let bridgeListeners;
+
+// Mimic the global we set with Webpack's DefinePlugin
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+
+const env = jasmine.getEnv();
+env.beforeEach(() => {
+  // It's important to reset modules between test runs;
+  // Without this, ReactDOM won't re-inject itself into the new hook.
+  jest.resetModules();
+
+  // Fake timers let us flush Bridge operations between setup and assertions.
+  jest.useFakeTimers();
+
+  installHook(global);
+
+  bridgeListeners = [];
+
+  bridge = new Bridge(
+    {
+      listen(callback) {
+        bridgeListeners.push(callback);
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        bridgeListeners.forEach(callback => callback({ event, payload }));
+      },
+    },
+    { batchDuration: 0 }
+  );
+
+  agent = new Agent();
+  agent.addBridge(bridge);
+
+  initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
+
+  global.store = new Store(bridge);
+});
+env.afterEach(() => {
+  delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+});
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
new file mode 100644
index 000000000000..1b564a03cb08
--- /dev/null
+++ b/src/__tests__/store-test.js
@@ -0,0 +1,43 @@
+// @flow
+
+describe('Store', () => {
+  let React;
+  let ReactDOM;
+  let store;
+
+  beforeEach(() => {
+    store = global.store;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should initialize a simple tree', () => {
+    const Grandparent = () => (
+      <React.Fragment>
+        <Parent />
+        <Parent />
+      </React.Fragment>
+    );
+    const Parent = () => [<Child key="one" />, <Child key="two" />];
+    const Child = () => <div>Hi!</div>;
+
+    ReactDOM.render(<Grandparent />, document.createElement('div'));
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+  });
+
+  it('should initialize a multiple root tree', () => {
+    const Parent = () => [<Child key="one" />, <Child key="two" />];
+    const Child = () => <div>Hi!</div>;
+
+    ReactDOM.render(<Parent />, document.createElement('div'));
+    ReactDOM.render(<Parent />, document.createElement('div'));
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
deleted file mode 100644
index d9ef2b78f051..000000000000
--- a/src/__tests__/utils.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @flow
-
-import Agent from 'src/backend/agent';
-import { initBackend } from 'src/backend';
-import Bridge from 'src/bridge';
-import Store from 'src/devtools/store';
-import { installHook } from 'src/hook';
-
-export function setup(): Store {
-  installHook(global);
-
-  jest.useFakeTimers();
-
-  // TODO Replace this with a polyfill?
-  global.localStorage = {
-    getItem: jest.fn(),
-    setItem: jest.fn(),
-    clear: jest.fn(),
-  };
-
-  const listeners = [];
-  const bridge = new Bridge(
-    {
-      listen(callback) {
-        listeners.push(callback);
-      },
-      send(event: string, payload: any, transferable?: Array<any>) {
-        listeners.forEach(callback => callback({ event, payload }));
-      },
-    },
-    { batchDuration: 0 }
-  );
-
-  const agent = new Agent();
-  agent.addBridge(bridge);
-
-  initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
-
-  return new Store(bridge);
-}
diff --git a/src/hook.js b/src/hook.js
index fa960d73bea1..23f7280839ba 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -189,6 +189,9 @@ export function installHook(target: any): DevToolsHook | null {
     target,
     '__REACT_DEVTOOLS_GLOBAL_HOOK__',
     ({
+      // This property needs to be configurable for the test environment,
+      // else we won't be able to delete and recreate it beween tests.
+      configurable: __DEV__,
       enumerable: false,
       get() {
         return hook;

From 4926d160d6d270805ecc8c569125403e74d97c1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 09:09:41 -0700
Subject: [PATCH 347/814] Removed unnecessary configurable Bridge batch
 duration

---
 src/__tests__/setupTests.js | 17 +++++++----------
 src/bridge.js               | 20 ++++----------------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 762784e7e40c..72358692fd58 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -26,17 +26,14 @@ env.beforeEach(() => {
 
   bridgeListeners = [];
 
-  bridge = new Bridge(
-    {
-      listen(callback) {
-        bridgeListeners.push(callback);
-      },
-      send(event: string, payload: any, transferable?: Array<any>) {
-        bridgeListeners.forEach(callback => callback({ event, payload }));
-      },
+  bridge = new Bridge({
+    listen(callback) {
+      bridgeListeners.push(callback);
     },
-    { batchDuration: 0 }
-  );
+    send(event: string, payload: any, transferable?: Array<any>) {
+      bridgeListeners.forEach(callback => callback({ event, payload }));
+    },
+  });
 
   agent = new Agent();
   agent.addBridge(bridge);
diff --git a/src/bridge.js b/src/bridge.js
index 6f40b07e59dc..2a9d53fb4f57 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -6,31 +6,19 @@ import type { Wall } from './types';
 
 const BATCH_DURATION = 100;
 
-type Config = {|
-  batchDuration?: number,
-|};
-
 type Message = {|
   event: string,
   payload: any,
 |};
 
 export default class Bridge extends EventEmitter {
-  _batchDuration: number = BATCH_DURATION;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
   _wall: Wall;
 
-  constructor(wall: Wall, config?: Config) {
+  constructor(wall: Wall) {
     super();
 
-    if (config != null) {
-      const { batchDuration } = config;
-      if (batchDuration !== undefined) {
-        this._batchDuration = batchDuration;
-      }
-    }
-
     this._wall = wall;
 
     wall.listen((message: Message) => {
@@ -44,7 +32,7 @@ export default class Bridge extends EventEmitter {
     // - if there hasn't been a message recently, we set a timer for 0 ms in
     //   the future, allowing all messages created in the same tick to be sent
     //   together
-    // - if there *has* been a message flushed in the last X ms
+    // - if there *has* been a message flushed in the last BATCH_DURATION ms
     //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
     //   be set, and we'll simply add to the queue and wait for that
     this._messageQueue.push(event, payload, transferable);
@@ -67,10 +55,10 @@ export default class Bridge extends EventEmitter {
       }
       this._messageQueue.length = 0;
 
-      // Check again for queued messages in X ms. This will keep
+      // Check again for queued messages in BATCH_DURATION ms. This will keep
       // flushing in a loop as long as messages continue to be added. Once no
       // more are, the timer expires.
-      this._timeoutID = setTimeout(this._flush, this._batchDuration);
+      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
     }
   };
 }

From 25e918b4d98ad915110e5ad8516cbb0b64cf2757 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 09:25:39 -0700
Subject: [PATCH 348/814] Added [root] indicator to Store snapshot
 reprensentation

---
 .../__snapshots__/store-test.js.snap          | 23 ++++++----
 src/devtools/store.js                         | 46 +++++++++++--------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 278759222425..8683a9e943f3 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,20 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Store should initialize a multiple root tree 1`] = `
-▾ <Parent>
-    <Child key="one">
-    <Child key="two">
-▾ <Parent>
-    <Child key="one">
-    <Child key="two">
-`;
-
-exports[`Store should initialize a simple tree 1`] = `
-▾ <Grandparent>
+[root]
   ▾ <Parent>
       <Child key="one">
       <Child key="two">
+[root]
   ▾ <Parent>
       <Child key="one">
       <Child key="two">
 `;
+
+exports[`Store should initialize a simple tree 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="one">
+        <Child key="two">
+    ▾ <Parent>
+        <Child key="one">
+        <Child key="two">
+`;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b4945b0d7101..38d33f2a6a7f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -836,30 +836,40 @@ export default class Store extends EventEmitter {
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
-  // Jest snapshot testing
+  // Used for Jest snapshot testing.
+  // May also be useful for visually debugging the tree, so it lives on the Store.
   __toSnapshot = () => {
-    const snapshot = [];
+    const snapshotLines = [];
 
-    // TODO Include root (ids) in the snapshot?
-    for (let i = 0; i < this._weightAcrossRoots; i++) {
-      const element = ((this.getElementAtIndex(i): any): Element);
+    let rootWeight = 0;
 
-      let prefix = ' ';
-      if (element.children.length > 0) {
-        prefix = element.isCollapsed ? '▸' : '▾';
-      }
+    this._roots.forEach(rootID => {
+      snapshotLines.push('[root]');
+
+      const { weight } = ((this.getElementByID(rootID): any): Element);
+
+      for (let i = rootWeight; i < rootWeight + weight; i++) {
+        const element = ((this.getElementAtIndex(i): any): Element);
+
+        let prefix = ' ';
+        if (element.children.length > 0) {
+          prefix = element.isCollapsed ? '▸' : '▾';
+        }
+
+        let key = '';
+        if (element.key !== null) {
+          key = ` key="${element.key}"`;
+        }
 
-      let key = '';
-      if (element.key !== null) {
-        key = ` key="${element.key}"`;
+        snapshotLines.push(
+          `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
+            'null'}${key}>`
+        );
       }
 
-      snapshot.push(
-        `${'  '.repeat(element.depth)}${prefix} <${element.displayName ||
-          'null'}${key}>`
-      );
-    }
+      rootWeight += weight;
+    });
 
-    return snapshot.join('\n');
+    return snapshotLines.join('\n');
   };
 }

From 1bdae952b5e5675d5124d5d968522e8acc85065f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 09:27:41 -0700
Subject: [PATCH 349/814] Added separate mount+update tests

---
 .../__snapshots__/store-test.js.snap          | 54 ++++++++++++++-----
 src/__tests__/store-test.js                   | 40 ++++++++++----
 2 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 8683a9e943f3..cf044d7e4b8e 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,23 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store should initialize a multiple root tree 1`] = `
+exports[`Store should support mount and update operations 1`] = `
 [root]
-  ▾ <Parent>
-      <Child key="one">
-      <Child key="two">
-[root]
-  ▾ <Parent>
-      <Child key="one">
-      <Child key="two">
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
 `;
 
-exports[`Store should initialize a simple tree 1`] = `
+exports[`Store should support mount and update operations 2`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
-        <Child key="one">
-        <Child key="two">
+        <Child key="0">
+        <Child key="1">
     ▾ <Parent>
-        <Child key="one">
-        <Child key="two">
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store should support mount and update operations for multiple roots 1`] = `
+[root]
+  ▾ <Parent>
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+[root]
+  ▾ <Parent>
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`Store should support mount and update operations for multiple roots 2`] = `
+[root]
+  ▾ <Parent>
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+[root]
+  ▾ <Parent>
+      <Child key="0">
 `;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 1b564a03cb08..fb779cf4fc66 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -12,29 +12,49 @@ describe('Store', () => {
     ReactDOM = require('react-dom');
   });
 
-  it('should initialize a simple tree', () => {
-    const Grandparent = () => (
+  it('should support mount and update operations', () => {
+    const Grandparent = ({ count }) => (
       <React.Fragment>
-        <Parent />
-        <Parent />
+        <Parent count={count} />
+        <Parent count={count} />
       </React.Fragment>
     );
-    const Parent = () => [<Child key="one" />, <Child key="two" />];
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
     const Child = () => <div>Hi!</div>;
 
-    ReactDOM.render(<Grandparent />, document.createElement('div'));
+    const container = document.createElement('div');
+
+    ReactDOM.render(<Grandparent count={4} />, container);
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+
+    ReactDOM.render(<Grandparent count={2} />, container);
 
     jest.runAllTimers(); // Flush Bridge operations
 
     expect(store).toMatchSnapshot();
   });
 
-  it('should initialize a multiple root tree', () => {
-    const Parent = () => [<Child key="one" />, <Child key="two" />];
+  it('should support mount and update operations for multiple roots', () => {
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
     const Child = () => <div>Hi!</div>;
 
-    ReactDOM.render(<Parent />, document.createElement('div'));
-    ReactDOM.render(<Parent />, document.createElement('div'));
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    ReactDOM.render(<Parent count={3} />, containerA);
+    ReactDOM.render(<Parent count={2} />, containerB);
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+
+    ReactDOM.render(<Parent count={4} />, containerA);
+    ReactDOM.render(<Parent count={1} />, containerB);
 
     jest.runAllTimers(); // Flush Bridge operations
 

From 5d6a2082cc5554c7777c766fa406a93a71b26d25 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 10:19:18 -0700
Subject: [PATCH 350/814] Updated React test utils for newer version of act()

---
 package.json                         |  8 ++---
 shells/dev/app/ElementTypes/index.js |  2 +-
 yarn.lock                            | 44 ++++++++++++----------------
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 81c98bb0a7c9..1d5f2b8401e0 100644
--- a/package.json
+++ b/package.json
@@ -118,13 +118,13 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
-    "react": "^16.8.6",
+    "react": "^16.9.0-alpha.0",
     "react-color": "^2.11.7",
-    "react-dom": "^16.8.6",
-    "react-is": "^16.8.6",
+    "react-dom": "^16.9.0-alpha.0",
+    "react-is": "^16.9.0-alpha.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.7.2",
-    "scheduler": "^0.13",
+    "scheduler": "^0.14.0-alpha.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^1.10.1",
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index 4b2309a29bdb..fa027f59260d 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -10,7 +10,7 @@ import React, {
   unstable_ConcurrentMode as ConcurrentMode,
   Fragment,
   // $FlowFixMe Flow doesn't know about the Profiler import yet
-  unstable_Profiler as Profiler,
+  Profiler,
   StrictMode,
   Suspense,
 } from 'react';
diff --git a/yarn.lock b/yarn.lock
index 9e334a0244f3..bc52ab3846f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8973,15 +8973,15 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
-  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
+react-dom@^16.9.0-alpha.0:
+  version "16.9.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0-alpha.0.tgz#9dfaec18ac1a500fa72cab7b70f2ae29d0cd7716"
+  integrity sha512-BQ5gN42yIPuTnBvE6K9vSjNfDRpSNcYCs2sUx9XR5VaWKwlHTt3G6qIWK6zdXy8TYKb1+IxpsAI0RtbRdXQZ2A==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
+    scheduler "^0.14.0-alpha.0"
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -8993,10 +8993,10 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-is@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
-  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+react-is@^16.9.0-alpha.0:
+  version "16.9.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0-alpha.0.tgz#af943642da49460f9fe98630182b0a62db3e9e6a"
+  integrity sha512-psl0ePLTFliYfwcbwvimLgTNN156ZdeWB4zvP7dV/6lTAqWMHFfidg/mSZ2fFgE1LMNN8ZJOLl2DfZ8yg+3ETA==
 
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
@@ -9016,15 +9016,15 @@ react-window@^1.7.2:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
+react@^16.9.0-alpha.0:
+  version "16.9.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0-alpha.0.tgz#e350f3d8af36e3251079cbc90d304620e2f78ccb"
+  integrity sha512-y4bu7rJvtnPPsIwOj7sp5Y2SqlOb0jFupfkdjWxxn8ZeqzUARgpR9wJBUVwW1/QosVdOblmApjo/j6iiAXnebA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
+    scheduler "^0.14.0-alpha.0"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9616,18 +9616,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
-  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-scheduler@^0.13.6:
-  version "0.13.6"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
-  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+scheduler@^0.14.0-alpha.0:
+  version "0.14.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.14.0-alpha.0.tgz#6d301d8fd10373487e0e47e837ad24e863ce807d"
+  integrity sha512-qlVVnhIJqLu9E09ZYYJHG4nYwrS4TG2zfODfS/Mk3oSGjeJlrBZTFSU3yfMdu5lIrYzWmHHWFgERPsKbildS6Q==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 81183b1492bd3bc0f0b98fbb3b5ca9706be0892b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 10:19:31 -0700
Subject: [PATCH 351/814] Named snapshots. Tests use act() abstraction.

---
 .../__snapshots__/store-test.js.snap          | 65 +++++++++++--------
 src/__tests__/store-test.js                   | 49 ++++++++------
 2 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index cf044d7e4b8e..6a8b88da71d1 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,6 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store should support mount and update operations 1`] = `
+exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`Store should support mount and update operations for multiple roots: unmount A 1`] = ``;
+
+exports[`Store should support mount and update operations for multiple roots: unmount B 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+`;
+
+exports[`Store should support mount and update operations for multiple roots: update 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+`;
+
+exports[`Store should support mount and update operations: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -15,7 +50,9 @@ exports[`Store should support mount and update operations 1`] = `
         <Child key="3">
 `;
 
-exports[`Store should support mount and update operations 2`] = `
+exports[`Store should support mount and update operations: unmount 1`] = ``;
+
+exports[`Store should support mount and update operations: update 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -25,27 +62,3 @@ exports[`Store should support mount and update operations 2`] = `
         <Child key="0">
         <Child key="1">
 `;
-
-exports[`Store should support mount and update operations for multiple roots 1`] = `
-[root]
-  ▾ <Parent>
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-[root]
-  ▾ <Parent>
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`Store should support mount and update operations for multiple roots 2`] = `
-[root]
-  ▾ <Parent>
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
-[root]
-  ▾ <Parent>
-      <Child key="0">
-`;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index fb779cf4fc66..6d21a5bbd554 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -3,13 +3,23 @@
 describe('Store', () => {
   let React;
   let ReactDOM;
+  let TestUtils;
   let store;
 
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
   beforeEach(() => {
     store = global.store;
 
     React = require('react');
     ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
   });
 
   it('should support mount and update operations', () => {
@@ -25,17 +35,14 @@ describe('Store', () => {
 
     const container = document.createElement('div');
 
-    ReactDOM.render(<Grandparent count={4} />, container);
-
-    jest.runAllTimers(); // Flush Bridge operations
-
-    expect(store).toMatchSnapshot();
+    act(() => ReactDOM.render(<Grandparent count={4} />, container));
+    expect(store).toMatchSnapshot('mount');
 
-    ReactDOM.render(<Grandparent count={2} />, container);
+    act(() => ReactDOM.render(<Grandparent count={2} />, container));
+    expect(store).toMatchSnapshot('update');
 
-    jest.runAllTimers(); // Flush Bridge operations
-
-    expect(store).toMatchSnapshot();
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(store).toMatchSnapshot('unmount');
   });
 
   it('should support mount and update operations for multiple roots', () => {
@@ -46,18 +53,22 @@ describe('Store', () => {
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
 
-    ReactDOM.render(<Parent count={3} />, containerA);
-    ReactDOM.render(<Parent count={2} />, containerB);
-
-    jest.runAllTimers(); // Flush Bridge operations
-
-    expect(store).toMatchSnapshot();
+    act(() => {
+      ReactDOM.render(<Parent key="A" count={3} />, containerA);
+      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+    });
+    expect(store).toMatchSnapshot('mount');
 
-    ReactDOM.render(<Parent count={4} />, containerA);
-    ReactDOM.render(<Parent count={1} />, containerB);
+    act(() => {
+      ReactDOM.render(<Parent key="A" count={4} />, containerA);
+      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    });
+    expect(store).toMatchSnapshot('update');
 
-    jest.runAllTimers(); // Flush Bridge operations
+    act(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(store).toMatchSnapshot('unmount B');
 
-    expect(store).toMatchSnapshot();
+    act(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(store).toMatchSnapshot('unmount A');
   });
 });

From 4ad85b26c0d05ed00302f415d9fbe26072bbcd6a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 11:21:59 -0700
Subject: [PATCH 352/814] Cleaned up setup/polyfills

---
 package.json              |  1 +
 src/__tests__/setupEnv.js | 14 +++++++++-----
 yarn.lock                 | 12 ++++++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 1d5f2b8401e0..11af594114a7 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "jest": "^24.7.1",
     "lerna": "^2.8.0",
     "lint-staged": "^7.0.5",
+    "local-storage-fallback": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "log-update": "^2.0.0",
     "lru-cache": "^4.1.3",
diff --git a/src/__tests__/setupEnv.js b/src/__tests__/setupEnv.js
index af4769936055..eff4b0b9ffa7 100644
--- a/src/__tests__/setupEnv.js
+++ b/src/__tests__/setupEnv.js
@@ -1,7 +1,11 @@
 // @flow
 
-global.localStorage = {
-  getItem: jest.fn(),
-  setItem: jest.fn(),
-  clear: jest.fn(),
-};
+import storage from 'local-storage-fallback';
+
+// In case async/await syntax is used in a test.
+import 'regenerator-runtime/runtime';
+
+// DevTools stores preferences between sessions in localStorage
+if (!global.hasOwnProperty('localStorage')) {
+  global.localStorage = storage;
+}
diff --git a/yarn.lock b/yarn.lock
index bc52ab3846f7..4012daa81a2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3284,6 +3284,11 @@ convert-source-map@^1.4.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
+cookie@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+  integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -7199,6 +7204,13 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+local-storage-fallback@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/local-storage-fallback/-/local-storage-fallback-4.1.1.tgz#6dc964635c8e9ab6d522d7d88538f465b62bd161"
+  integrity sha512-Ka4rem1FOgvIaPMokxXTP8DgW8gjfAQSdJC8TGrplDug7vh3b0PZnY/9euG3O3cIGAvJLp33mMU6MJ13x6S+Pw==
+  dependencies:
+    cookie "^0.3.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"

From 16a7119bf296028a1e68ab57286d9ee2ee64823e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 11:22:15 -0700
Subject: [PATCH 353/814] Added a simple Suspense test

---
 .../__snapshots__/store-test.js.snap          | 25 +++++++++
 src/__tests__/store-test.js                   | 56 +++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 6a8b88da71d1..91c69b85d23e 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Store should display Suspense nodes properly in various states: loading 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading>
+`;
+
+exports[`Store should display Suspense nodes properly in various states: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Inside">
+`;
+
+exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▾ <Parent>
+        <Child>
+`;
+
 exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
 [root]
   ▾ <Parent key="A">
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 6d21a5bbd554..ed71129dcf87 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -71,4 +71,60 @@ describe('Store', () => {
     act(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(store).toMatchSnapshot('unmount A');
   });
+
+  it('should filter DOM nodes from the store tree', () => {
+    const Grandparent = () => (
+      <div>
+        <div>
+          <Parent />
+        </div>
+        <Parent />
+      </div>
+    );
+    const Parent = () => (
+      <div>
+        <Child />
+      </div>
+    );
+    const Child = () => <div>Hi!</div>;
+
+    act(() =>
+      ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
+    );
+    expect(store).toMatchSnapshot('mount');
+  });
+
+  // TODO We should write more complex Suspense tests than just this
+  it('should display Suspense nodes properly in various states', async done => {
+    const Loading = () => <div>Loading...</div>;
+    const SuspendingComponent = () => {
+      throw new Promise(() => {});
+    };
+    const Component = () => {
+      return <div>Hello</div>;
+    };
+    const Wrapper = ({ shouldSuspense }) => (
+      <React.Fragment>
+        <Component key="Outside" />
+        <React.Suspense fallback={<Loading />}>
+          {shouldSuspense ? (
+            <SuspendingComponent />
+          ) : (
+            <Component key="Inside" />
+          )}
+        </React.Suspense>
+      </React.Fragment>
+    );
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+    expect(store).toMatchSnapshot('loading');
+
+    act(async () => {
+      ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+    });
+    expect(store).toMatchSnapshot('resolved');
+
+    done();
+  });
 });

From 158b0b55674c83d30b52ae6290e6562507654a07 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 11:34:34 -0700
Subject: [PATCH 354/814] Added expand/collapse tests; chronologically ordered
 snapshots

---
 .../__snapshots__/store-test.js.snap          | 80 +++++++++++++++----
 src/__tests__/store-test.js                   | 56 ++++++++++---
 2 files changed, 111 insertions(+), 25 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 91c69b85d23e..102a3285585e 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store should display Suspense nodes properly in various states: loading 1`] = `
+exports[`Store should display Suspense nodes properly in various states: 1: loading 1`] = `
 [root]
   ▾ <Wrapper>
       <Component key="Outside">
@@ -8,7 +8,7 @@ exports[`Store should display Suspense nodes properly in various states: loading
         <Loading>
 `;
 
-exports[`Store should display Suspense nodes properly in various states: resolved 1`] = `
+exports[`Store should display Suspense nodes properly in various states: 2: resolved 1`] = `
 [root]
   ▾ <Wrapper>
       <Component key="Outside">
@@ -16,7 +16,7 @@ exports[`Store should display Suspense nodes properly in various states: resolve
         <Component key="Inside">
 `;
 
-exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
+exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -25,7 +25,57 @@ exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
         <Child>
 `;
 
-exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
+exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store should support collapsing parts of the tree: 4: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store should support mount and update operations for multiple roots: 1: mount 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
@@ -37,30 +87,30 @@ exports[`Store should support mount and update operations for multiple roots: mo
       <Child key="1">
 `;
 
-exports[`Store should support mount and update operations for multiple roots: unmount A 1`] = ``;
-
-exports[`Store should support mount and update operations for multiple roots: unmount B 1`] = `
+exports[`Store should support mount and update operations for multiple roots: 2: update 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
       <Child key="1">
       <Child key="2">
       <Child key="3">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
 `;
 
-exports[`Store should support mount and update operations for multiple roots: update 1`] = `
+exports[`Store should support mount and update operations for multiple roots: 3: unmount B 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
       <Child key="1">
       <Child key="2">
       <Child key="3">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
 `;
 
-exports[`Store should support mount and update operations: mount 1`] = `
+exports[`Store should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store should support mount and update operations: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -75,9 +125,7 @@ exports[`Store should support mount and update operations: mount 1`] = `
         <Child key="3">
 `;
 
-exports[`Store should support mount and update operations: unmount 1`] = ``;
-
-exports[`Store should support mount and update operations: update 1`] = `
+exports[`Store should support mount and update operations: 2: update 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -87,3 +135,5 @@ exports[`Store should support mount and update operations: update 1`] = `
         <Child key="0">
         <Child key="1">
 `;
+
+exports[`Store should support mount and update operations: 3: unmount 1`] = ``;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index ed71129dcf87..bdfa5e3d9aba 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -36,13 +36,13 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     act(() => ReactDOM.render(<Grandparent count={4} />, container));
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchSnapshot('1: mount');
 
     act(() => ReactDOM.render(<Grandparent count={2} />, container));
-    expect(store).toMatchSnapshot('update');
+    expect(store).toMatchSnapshot('2: update');
 
     act(() => ReactDOM.unmountComponentAtNode(container));
-    expect(store).toMatchSnapshot('unmount');
+    expect(store).toMatchSnapshot('3: unmount');
   });
 
   it('should support mount and update operations for multiple roots', () => {
@@ -57,19 +57,19 @@ describe('Store', () => {
       ReactDOM.render(<Parent key="A" count={3} />, containerA);
       ReactDOM.render(<Parent key="B" count={2} />, containerB);
     });
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchSnapshot('1: mount');
 
     act(() => {
       ReactDOM.render(<Parent key="A" count={4} />, containerA);
       ReactDOM.render(<Parent key="B" count={1} />, containerB);
     });
-    expect(store).toMatchSnapshot('update');
+    expect(store).toMatchSnapshot('2: update');
 
     act(() => ReactDOM.unmountComponentAtNode(containerB));
-    expect(store).toMatchSnapshot('unmount B');
+    expect(store).toMatchSnapshot('3: unmount B');
 
     act(() => ReactDOM.unmountComponentAtNode(containerA));
-    expect(store).toMatchSnapshot('unmount A');
+    expect(store).toMatchSnapshot('4: unmount A');
   });
 
   it('should filter DOM nodes from the store tree', () => {
@@ -91,7 +91,7 @@ describe('Store', () => {
     act(() =>
       ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
     );
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchSnapshot('1: mount');
   });
 
   // TODO We should write more complex Suspense tests than just this
@@ -118,13 +118,49 @@ describe('Store', () => {
 
     const container = document.createElement('div');
     act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
-    expect(store).toMatchSnapshot('loading');
+    expect(store).toMatchSnapshot('1: loading');
 
     act(async () => {
       ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
     });
-    expect(store).toMatchSnapshot('resolved');
+    expect(store).toMatchSnapshot('2: resolved');
 
     done();
   });
+
+  it('should support collapsing parts of the tree', () => {
+    const Grandparent = ({ count }) => (
+      <React.Fragment>
+        <Parent count={count} />
+        <Parent count={count} />
+      </React.Fragment>
+    );
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
+    const Child = () => <div>Hi!</div>;
+
+    act(() =>
+      ReactDOM.render(<Grandparent count={2} />, document.createElement('div'))
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    const grandparentID = store.getElementIDAtIndex(0);
+    const parentOneID = store.getElementIDAtIndex(1);
+    const parentTwoID = store.getElementIDAtIndex(4);
+
+    act(() => store.toggleIsCollapsed(parentOneID, true));
+    expect(store).toMatchSnapshot('2: collapse first Parent');
+
+    act(() => store.toggleIsCollapsed(parentTwoID, true));
+    expect(store).toMatchSnapshot('3: collapse second Parent');
+
+    act(() => store.toggleIsCollapsed(parentOneID, false));
+    expect(store).toMatchSnapshot('4: expand first Parent');
+
+    act(() => store.toggleIsCollapsed(grandparentID, true));
+    expect(store).toMatchSnapshot('5: collapse Grandparent');
+
+    act(() => store.toggleIsCollapsed(grandparentID, false));
+    expect(store).toMatchSnapshot('6: expand Grandparent');
+  });
 });

From e0ffa2b88d18e1df66c7b69b6a1ad24b3058be42 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 11:38:12 -0700
Subject: [PATCH 355/814] Moved a few vars inside of the setupTest beforeEach
 block

---
 src/__tests__/setupTests.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 72358692fd58..7ce53b3f7c79 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -6,10 +6,6 @@ import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import { installHook } from 'src/hook';
 
-let agent;
-let bridge;
-let bridgeListeners;
-
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 
@@ -24,9 +20,9 @@ env.beforeEach(() => {
 
   installHook(global);
 
-  bridgeListeners = [];
+  const bridgeListeners = [];
 
-  bridge = new Bridge({
+  const bridge = new Bridge({
     listen(callback) {
       bridgeListeners.push(callback);
     },
@@ -35,7 +31,7 @@ env.beforeEach(() => {
     },
   });
 
-  agent = new Agent();
+  const agent = new Agent();
   agent.addBridge(bridge);
 
   initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);

From 7bb2299de414cad78408187398345aa85950c6d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Apr 2019 11:38:45 -0700
Subject: [PATCH 356/814] Moved __DEV__ setup from setupTests to setupEnv

---
 src/__tests__/setupEnv.js   | 3 +++
 src/__tests__/setupTests.js | 3 ---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/setupEnv.js b/src/__tests__/setupEnv.js
index eff4b0b9ffa7..018e6ff62802 100644
--- a/src/__tests__/setupEnv.js
+++ b/src/__tests__/setupEnv.js
@@ -9,3 +9,6 @@ import 'regenerator-runtime/runtime';
 if (!global.hasOwnProperty('localStorage')) {
   global.localStorage = storage;
 }
+
+// Mimic the global we set with Webpack's DefinePlugin
+global.__DEV__ = process.env.NODE_ENV !== 'production';
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 7ce53b3f7c79..c7cdaa0b8e90 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -6,9 +6,6 @@ import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import { installHook } from 'src/hook';
 
-// Mimic the global we set with Webpack's DefinePlugin
-global.__DEV__ = process.env.NODE_ENV !== 'production';
-
 const env = jasmine.getEnv();
 env.beforeEach(() => {
   // It's important to reset modules between test runs;

From be930d549041fe88da22ee897d9ff99501a84fcd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 09:17:42 -0700
Subject: [PATCH 357/814] Use Circle CI to run lint, prettier, flow, and tests

---
 .circleci/config.yml | 39 +++++++++++++++++++++++++++++++++++++++
 package.json         |  4 +++-
 yarn.lock            |  2 +-
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 .circleci/config.yml

diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 000000000000..9247626f785e
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,39 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:7.10
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: yarn prettier:ci
+      - run: yarn lint:ci
+      - run: yarn flow
+      - run: yarn test
\ No newline at end of file
diff --git a/package.json b/package.json
index 11af594114a7..c17c845bd8b4 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,10 @@
     "deploy:firefox": "node ./shells/browser/firefox/deploy",
     "linc": "lint-staged",
     "lint": "eslint '**/*.js'",
+    "lint:ci": "eslint '**/*.js' --max-warnings 0",
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
+    "prettier:ci": "prettier --check '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
@@ -117,7 +119,7 @@
     "nullthrows": "^1.0.0",
     "object-assign": "4.0.1",
     "opener": "^1.5.1",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
     "react": "^16.9.0-alpha.0",
     "react-color": "^2.11.7",
diff --git a/yarn.lock b/yarn.lock
index 4012daa81a2a..8d30528004f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8730,7 +8730,7 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@^1.16.1:
+prettier@^1.16.4:
   version "1.16.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
   integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==

From af8a5d9311bce8689b435e64fabf0cf07e933785 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 09:24:16 -0700
Subject: [PATCH 358/814] Added devEngines entry to package.json

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index c17c845bd8b4..3514381d3142 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,9 @@
     "test:standalone": "cd packages/react-devtools && yarn start",
     "typecheck": "flow check"
   },
+  "devEngines": {
+    "node": "10.x || 11.x"
+  },
   "lint-staged": {
     "{shells,src}/**/*.{js,json,css}": [
       "prettier --write",

From 8f17ade7e5dfce75940197d0ba936e5f5005d523 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 09:27:53 -0700
Subject: [PATCH 359/814] Circle CI config changes

---
 .circleci/config.yml | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9247626f785e..ebec77b77e72 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:7.10
+      - image: circleci/node:10.12.0
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -21,19 +21,38 @@ jobs:
 
       # Download and cache dependencies
       - restore_cache:
+          name: Restore node_modules cache
           keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-
+            - v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v1-node-{{ arch }}-{{ .Branch }}-
+            - v1-node-{{ arch }}-
 
-      - run: yarn install
+      - run:
+          name: Nodejs Version
+          command: node --version
+
+      - run:
+          name: Install Packages
+          command: yarn install --frozen-lockfile
 
       - save_cache:
+          name: Save node_modules cache
+          key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
 
-      - run: yarn prettier:ci
-      - run: yarn lint:ci
-      - run: yarn flow
-      - run: yarn test
\ No newline at end of file
+      - run:
+          name: Check formatting
+          command: yarn prettier:ci
+
+      - run:
+          name: Check lint
+          command: yarn lint:ci
+
+      - run:
+          name: Check Flow
+          command: yarn flow
+
+      - run:
+          name: Test Packages
+          command: yarn test
\ No newline at end of file

From 403f150ade08082c6d2bc5a5104e59e045fe8189 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 12 Apr 2019 18:13:26 +0100
Subject: [PATCH 360/814] Use smart scrolling

---
 src/devtools/views/Components/Tree.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index dd3fe6255df8..eb31803f2375 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -68,7 +68,7 @@ export default function Tree(props: Props) {
   // This is helpful for things like the owners list and search.
   useLayoutEffect(() => {
     if (selectedElementIndex !== null && listRef.current != null) {
-      listRef.current.scrollToItem(selectedElementIndex);
+      listRef.current.scrollToItem(selectedElementIndex, 'smart');
       // Note this autoscroll only works for rows.
       // There's another autoscroll inside the elements
       // that ensures the component name is visible horizontally.

From dbd1d6b0bdb1da723d3e69989f1db07049b559f8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 10:20:23 -0700
Subject: [PATCH 361/814] Firefox only supports peristent background extensions
 so I've removed the persistent:false flag

---
 shells/browser/firefox/manifest.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index a7969cb304a5..d69d4179a1d4 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -41,8 +41,7 @@
   ],
 
   "background": {
-    "scripts": ["build/background.js"],
-    "persistent": false
+    "scripts": ["build/background.js"]
   },
 
   "permissions": [

From 9c1dad5059c2aef8511003ae4fc0762d020570d0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 10:57:56 -0700
Subject: [PATCH 362/814] react-window 1.8.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 3514381d3142..abe03c58e672 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,7 @@
     "react-dom": "^16.9.0-alpha.0",
     "react-is": "^16.9.0-alpha.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.7.2",
+    "react-window": "^1.8.0",
     "scheduler": "^0.14.0-alpha.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
diff --git a/yarn.lock b/yarn.lock
index 8d30528004f1..e043c36b0175 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9020,10 +9020,10 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.2.tgz#2e1528d5b9991e863302bfe74cb52d0ff7082e78"
-  integrity sha512-GK1gxSeGPLBDSQhPmYhCYrtf5MkGK8rwVjeyPgxZLvLRw0wvyzKZPMc/jfemiGNGfuJyW3kx1z6QR9uK7r2XdA==
+react-window@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.0.tgz#08196d1e0749fe60d0b29bb94ae682d37666e620"
+  integrity sha512-impIDEhm3+9/Y8ctiFaUI07a8Y/1jG0U4ONRUmYe7IsU+UQ2B0Ayyfbr+3R3nwAJpVGHx5pfI5SoDBt1o07YFw==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"

From 26361427ae1ee24827509a8fdf08953d7e4ec1c8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 13:46:05 -0700
Subject: [PATCH 363/814] Auto-update Chrome extension

---
 .gitignore                               |    4 +-
 package.json                             |    3 +-
 shells/browser/chrome/build.js           |    8 +
 shells/browser/chrome/manifest.json      |    2 +
 shells/browser/chrome/now.json           |    2 +-
 shells/browser/chrome/updates.xml        |    6 +
 shells/browser/shared/deploy.chrome.html |   10 +-
 shells/browser/shared/deploy.js          |   12 +-
 yarn.lock                                | 2414 ++++++++++++----------
 9 files changed, 1391 insertions(+), 1070 deletions(-)
 create mode 100644 shells/browser/chrome/updates.xml

diff --git a/.gitignore b/.gitignore
index 105fe4f141cc..d88ef334a01a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,6 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
-.watchmanconfig
\ No newline at end of file
+.watchmanconfig
+key.pem
+
diff --git a/package.json b/package.json
index abe03c58e672..73af1928ac3a 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
+    "crx": "git+https://github.com/oncletom/crx#ef150e8",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
@@ -133,7 +134,7 @@
     "scheduler": "^0.14.0-alpha.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
-    "web-ext": "^1.10.1",
+    "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2"
   }
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 57b2dbb1f9b1..128ee15a788a 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -1,11 +1,19 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
+const { execSync } = require('child_process');
+const { join } = require('path');
 const build = require('../shared/build');
 
 const main = async () => {
   await build('chrome');
 
+  const cwd = join(__dirname, 'build');
+  execSync('crx pack ./unpacked -o ReactDevTools.crx -p ../../../../key.pem', {
+    cwd,
+  });
+  execSync('rm packed.zip', { cwd });
+
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
   console.log(chalk.gray('\n# From the react-devtools root directory:'));
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 3c1556380e67..d6ee523d482f 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -4,6 +4,8 @@
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "4.0.0",
 
+  "update_url": "https://react-devtools-experimental-chrome.now.sh/updates.xml",
+
   "minimum_chrome_version": "49",
 
   "icons": {
diff --git a/shells/browser/chrome/now.json b/shells/browser/chrome/now.json
index 0dd396949c1a..fa36a08c687b 100644
--- a/shells/browser/chrome/now.json
+++ b/shells/browser/chrome/now.json
@@ -1,5 +1,5 @@
 {
   "name": "react-devtools-experimental-chrome",
   "alias": ["react-devtools-experimental-chrome"],
-  "files": ["index.html", "packed.zip"]
+  "files": ["index.html", "updates.xml", "ReactDevTools.crx"]
 }
diff --git a/shells/browser/chrome/updates.xml b/shells/browser/chrome/updates.xml
new file mode 100644
index 000000000000..460aa134034f
--- /dev/null
+++ b/shells/browser/chrome/updates.xml
@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
+  <app appid='akkpaehpnolchhkkfbedcdcikfdnjobk'>
+    <updatecheck codebase='https://react-devtools-experimental-chrome.now.sh/ReactDevTools.crx' version='4.0.0' />
+  </app>
+</gupdate>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.chrome.html b/shells/browser/shared/deploy.chrome.html
index be4282e148b6..620d4ea7916f 100644
--- a/shells/browser/shared/deploy.chrome.html
+++ b/shells/browser/shared/deploy.chrome.html
@@ -1,8 +1,6 @@
 <ol>
-  <li><a href="packed.zip">download extension</a></li>
-  <li>Double-click to extract</li>
-  <li>Visit <code>chrome://extensions</code></li>
-  <li>Ensure "Developer Mode" is enabled</li>
-  <li>Click "LOAD UNPACKED"</li>
-  <li>Select extension</li>
+  <li><a href="ReactDevTools.crx">download extension</a></li>
+  <li>Navigate to <a href="chrome://extensions/">chrome://extensions/</a></li>
+  <li>Drag <code>ReactDevTools.crx</code> into Chrome</li>
+  <li>Choose "Add Extension" when prompted</li>
 </ol>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index c896190c5da2..ad7167dd1bb4 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -3,18 +3,26 @@
 const { exec, execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 const { join } = require('path');
-const build = require('./build');
 
 const main = async buildId => {
   const root = join(__dirname, '..', buildId);
   const buildPath = join(root, 'build');
 
-  await build(buildId);
+  execSync(`node ${join(root, './build')}`);
 
   await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {
     cwd: root,
   });
 
+  if (buildId === 'chrome') {
+    await exec(
+      `cp ${join(root, 'updates.xml')} ${join(buildPath, 'updates.xml')}`,
+      {
+        cwd: root,
+      }
+    );
+  }
+
   const file = readFileSync(join(root, 'now.json'));
   const json = JSON.parse(file);
   const alias = json.alias[0];
diff --git a/yarn.lock b/yarn.lock
index e043c36b0175..85fba468a730 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -667,6 +667,14 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
+"@babel/polyfill@7.2.5":
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.2.5.tgz#6c54b964f71ad27edddc567d065e57e87ed7fa7d"
+  integrity sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==
+  dependencies:
+    core-js "^2.5.7"
+    regenerator-runtime "^0.12.0"
+
 "@babel/preset-env@^7.1.6":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.1.tgz#389e8ca6b17ae67aaf9a2111665030be923515db"
@@ -735,7 +743,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@^7.0.0":
+"@babel/runtime@7.3.1", "@babel/runtime@^7.0.0":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
   integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
@@ -817,6 +825,22 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@cliqz-oss/firefox-client@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@cliqz-oss/firefox-client/-/firefox-client-0.3.1.tgz#86479239f060835608b06584afe5e0a1dd91613c"
+  integrity sha512-RO+Tops/wGnBzWoZYkCraqyh2JqOejqJq5/a4b54HhmjTNSKdUPwAOK17EGg/zPb0nWqkuB7QyZsI9bo+ev8Kw==
+  dependencies:
+    colors "0.5.x"
+    js-select "~0.6.0"
+
+"@cliqz-oss/node-firefox-connect@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@cliqz-oss/node-firefox-connect/-/node-firefox-connect-1.2.1.tgz#1d42cf9a7ddcdde3ff232715d7712662966e2df4"
+  integrity sha512-O/IyiB5pfztCdmxQZg0/xeq5w+YiP3gtJz8d4We2EpLPKzbDVjOrtfLKYgVfm6Ya6mbvDge1uLkSRwaoVCWKnA==
+  dependencies:
+    "@cliqz-oss/firefox-client" "0.3.1"
+    es6-promise "^2.0.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1078,6 +1102,11 @@
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.0.tgz#1eb8c033e98cf4e1a4cedcaf8bcafe8cb7591e85"
   integrity sha512-eAtOAFZefEnfJiRFQBGw1eYqa5GTLCZ1y86N0XSI/D6EB+E8z6VPV/UL7Gi5UEclFqoQk+6NRqEDsfmDLXn8sg==
 
+"@types/node@*":
+  version "11.13.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.4.tgz#f83ec3c3e05b174b7241fadeb6688267fe5b22ca"
+  integrity sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1252,6 +1281,7 @@ Base64@~0.2.0:
 JSONSelect@0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.2.1.tgz#415418a526d33fe31d74b4defa3c836d485ec203"
+  integrity sha1-QVQYpSbTP+MddLTe+jyDbUhewgM=
 
 JSONStream@^1.0.4:
   version "1.3.5"
@@ -1287,6 +1317,11 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
+acorn-jsx@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
+  integrity sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -1296,50 +1331,94 @@ acorn@^5.0.0, acorn@^5.5.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
-
 acorn@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
 
+acorn@^6.0.2, acorn@^6.0.7:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
+  integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==
+
 acorn@^6.0.5:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.0.tgz#b0a3be31752c97a0f7013c5f4903b71a05db6818"
   integrity sha512-MW/FjM+IvU9CgBzjO3UIPCE2pyEwUsoFl+VGdczOPEdxfGFjuKny/gN54mOuX7Qxmb9Rg9MCn2oKiSUeW+pjrw==
 
+adbkit-logcat@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz#01d7f9b0cef9093a30bcb3b007efff301508962f"
+  integrity sha1-Adf5sM75CTowvLOwB+//MBUIli8=
+
+adbkit-monkey@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz#f291be701a2efc567a63fc7aa6afcded31430be1"
+  integrity sha1-8pG+cBou/FZ6Y/x6pq/N7TFDC+E=
+  dependencies:
+    async "~0.2.9"
+
+adbkit@2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/adbkit/-/adbkit-2.11.0.tgz#9a8da51e62790f8bae5296b1c52614f69e4c2684"
+  integrity sha512-j2vUhEeZmCiqBP+p77CpPWQTcT20rOmSmRHFUTZUwUpxzeCd3fXop4NAGYztSY9/FNU4bT/qqvYQ4EZKuCXhfA==
+  dependencies:
+    adbkit-logcat "^1.1.0"
+    adbkit-monkey "~1.0.1"
+    bluebird "~2.9.24"
+    commander "^2.3.0"
+    debug "~2.6.3"
+    node-forge "^0.7.1"
+    split "~0.3.3"
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
   integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
 
-addons-linter@0.22.3:
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-0.22.3.tgz#c954a32c569afd68281c37acb263c65374c6f5ad"
+addons-linter@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-1.6.1.tgz#c357fbb463f7191943c37718ee9bbc57a6f77644"
+  integrity sha512-3+N8cskdXHpId0dhfsldgbYGXamtgfGywvU4oPVb1M7imG3pHFoK+VcAr/kPk1VeYGkSmBl2LxnwGHcw1ERvmA==
   dependencies:
-    ajv "5.2.0"
-    chalk "1.1.3"
-    cheerio "0.22.0"
+    ajv "6.9.1"
+    ajv-merge-patch "4.1.0"
+    chalk "2.4.2"
+    cheerio "1.0.0-rc.2"
     columnify "1.5.4"
+    common-tags "1.8.0"
     crx-parser "0.1.2"
-    dispensary "0.10.10"
-    es6-promisify "5.0.0"
-    eslint "3.19.0"
+    deepmerge "3.1.0"
+    dispensary "0.30.0"
+    es6-promisify "6.0.1"
+    eslint "5.13.0"
     eslint-plugin-no-unsafe-innerhtml "1.0.16"
+    eslint-visitor-keys "1.0.0"
+    espree "5.0.0"
     esprima "3.1.3"
     first-chunk-stream "2.0.0"
+    fluent-syntax "0.10.0"
+    glob "7.1.3"
+    is-mergeable-object "1.1.0"
     jed "1.1.1"
-    pino "^4.6.0"
-    postcss "6.0.2"
+    mdn-browser-compat-data "0.0.66"
+    os-locale "3.1.0"
+    pino "5.11.1"
+    po2json "0.4.5"
+    postcss "7.0.14"
+    probe-image-size "4.0.0"
+    regenerator-runtime "0.13.1"
     relaxed-json "1.0.1"
-    semver "5.3.0"
-    source-map-support "0.4.15"
+    semver "5.6.0"
+    source-map-support "0.5.10"
     strip-bom-stream "3.0.0"
-    whatwg-url "5.0.0"
+    tosource "1.0.0"
+    upath "1.1.0"
+    whatwg-url "7.0.0"
     xmldom "0.1.27"
-    yargs "8.0.2"
-    yauzl "2.8.0"
+    yargs "13.1.0"
+    yauzl "2.10.0"
+  optionalDependencies:
+    fsevents "2.0.1"
 
 adm-zip@^0.4.7, adm-zip@~0.4.x:
   version "0.4.13"
@@ -1354,6 +1433,7 @@ ajv-errors@^1.0.0:
 ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+  integrity sha1-MU3QpLM2j609/NxU7eYXG4htrzw=
 
 ajv-keywords@^2.1.0:
   version "2.1.1"
@@ -1365,25 +1445,28 @@ ajv-keywords@^3.1.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
   integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
 
-ajv@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486"
+ajv-merge-patch@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz#cd580e5860ac53431d6aa901fa3d5e2eb2b74a6c"
+  integrity sha512-0mAYXMSauA8RZ7r+B4+EAOYcZEcO9OK5EiQCR7W7Cv4E44pJj56ZnkKLJ9/PAcOc0dT+LlV9fdDcq2TxVJfOYw==
   dependencies:
-    co "^4.6.0"
-    fast-deep-equal "^0.1.0"
-    json-schema-traverse "^0.3.0"
-    json-stable-stringify "^1.0.1"
+    fast-json-patch "^2.0.6"
+    json-merge-patch "^0.2.3"
 
-ajv@^4.7.0:
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.2.tgz#f166c3c11cbc6cb9dcc102a5bcfe5b72c95287e6"
+ajv@6.9.1:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.9.1.tgz#a4d3683d74abc5670e75f0b16520f70a20ea8dc1"
+  integrity sha512-XDN92U311aINL77ieWHmqCcNlwjoP5cHXDxIxbf2MaPYuCXOHS7gHH8jktxeK5omgd52XbSTX6a4Piwd1pQmzA==
   dependencies:
-    co "^4.6.0"
-    json-stable-stringify "^1.0.1"
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
 
-ajv@^4.9.1:
+ajv@^4.7.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  integrity sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
@@ -1407,17 +1490,29 @@ ajv@^6.1.0:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.5.3, ajv@^6.5.5, ajv@^6.9.1:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
+  integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  integrity sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=
   dependencies:
     string-width "^2.0.0"
 
 ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+  integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
 
-ansi-escapes@^3.0.0:
+ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
@@ -1455,22 +1550,20 @@ ansi-styles@^3.2.0:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+  integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=
+
 any-observable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
-any-promise@^1.0.0, any-promise@^1.1.0, any-promise@~1.3.0:
+any-promise@^1.0.0, any-promise@^1.1.0, any-promise@^1.3.0, any-promise@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-
-anymatch@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
-  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
-  dependencies:
-    micromatch "^2.1.5"
-    normalize-path "^2.0.0"
+  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
 
 anymatch@^2.0.0:
   version "2.0.0"
@@ -1504,20 +1597,36 @@ archiver-utils@^1.3.0:
     normalize-path "^2.0.0"
     readable-stream "^2.0.0"
 
-archiver@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.3.0.tgz#4f2194d6d8f99df3f531e6881f14f15d55faaf22"
-  integrity sha1-TyGU1tj5nfP1MeaIHxTxXVX6ryI=
+archiver-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.0.0.tgz#5639818a8b5d89d0ffc51b72c39283cf4fea14a1"
+  integrity sha512-JRBgcVvDX4Mwu2RBF8bBaHcQCSxab7afsxAPYDQ5W+19quIPP5CfKE7Ql+UHs9wYvwsaNR8oDuhtf5iqrKmzww==
   dependencies:
-    archiver-utils "^1.3.0"
+    glob "^7.0.0"
+    graceful-fs "^4.1.0"
+    lazystream "^1.0.0"
+    lodash.assign "^4.2.0"
+    lodash.defaults "^4.2.0"
+    lodash.difference "^4.5.0"
+    lodash.flatten "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.toarray "^4.4.0"
+    lodash.union "^4.6.0"
+    normalize-path "^3.0.0"
+    readable-stream "^2.0.0"
+
+archiver@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-3.0.0.tgz#50b2628cf032adcbf35d35d111b5324db95bfb69"
+  integrity sha512-5QeR6Xc5hSA9X1rbQfcuQ6VZuUXOaEdB65Dhmk9duuRJHYif/ZyJfuyJqsQrj34PFjU5emv5/MmfgA8un06onw==
+  dependencies:
+    archiver-utils "^2.0.0"
     async "^2.0.0"
     buffer-crc32 "^0.2.1"
     glob "^7.0.0"
-    lodash "^4.8.0"
     readable-stream "^2.0.0"
     tar-stream "^1.5.0"
-    walkdir "^0.0.11"
-    zip-stream "^1.1.0"
+    zip-stream "^2.0.1"
 
 archiver@~2.1.0:
   version "2.1.1"
@@ -1555,19 +1664,12 @@ aria-query@^0.7.0:
     ast-types-flow "0.0.7"
     commander "^2.11.0"
 
-arr-diff@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
-  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
-  dependencies:
-    arr-flatten "^1.0.1"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
   integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
 
-arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+arr-flatten@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
   integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
@@ -1588,15 +1690,17 @@ array-equal@^1.0.0:
 array-filter@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+  integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
   integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 
-array-from@2.1.1:
+array-from@~2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
 
 array-ify@^1.0.0:
   version "1.0.0"
@@ -1614,10 +1718,12 @@ array-includes@^3.0.3:
 array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+  integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=
 
 array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+  integrity sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=
 
 array-union@^1.0.1:
   version "1.0.2"
@@ -1631,11 +1737,6 @@ array-uniq@^1.0.1, array-uniq@^1.0.2:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
-array-unique@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
-  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
-
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1659,7 +1760,7 @@ asn1.js@^4.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-asn1@~0.2.3:
+asn1@^0.2.4, asn1@~0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
   integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
@@ -1671,11 +1772,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-assert-plus@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
-  integrity sha1-104bh+ev/A24qttwIfP+SBAasjQ=
-
 assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
@@ -1697,7 +1793,7 @@ astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
 
-async-each@^1.0.0, async-each@^1.0.1:
+async-each@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
   integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
@@ -1718,25 +1814,24 @@ async@^1.5.0, async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.0.0, async@^2.5.0, async@^2.6.1:
+async@^2.0.0, async@^2.5.0, async@^2.6.1, async@~2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
   integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
   dependencies:
     lodash "^4.17.11"
 
-async@^2.1.2, async@~2.5.0:
+async@~0.2.9:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+async@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
     lodash "^4.14.0"
 
-async@~2.1.2:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
-  dependencies:
-    lodash "^4.14.0"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1747,24 +1842,19 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-aws-sign2@~0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
-  integrity sha1-FDQt0428yU0OW4fXY81jYSwOeU8=
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
 
-aws4@^1.2.1:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
-
 aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
+
 axobject-query@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
@@ -1772,15 +1862,7 @@ axobject-query@^0.1.0:
   dependencies:
     ast-types-flow "0.0.7"
 
-babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
-  dependencies:
-    chalk "^1.1.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
-babel-code-frame@^6.26.0:
+babel-code-frame@^6.16.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
@@ -1788,6 +1870,14 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
+babel-code-frame@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 babel-core@^6.22.0, babel-core@^6.7.2:
   version "6.22.1"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648"
@@ -2127,19 +2217,12 @@ babel-plugin-transform-strict-mode@^6.22.0:
 babel-polyfill@6.16.0:
   version "6.16.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
+  integrity sha1-LUUCHfh+JqN0ttTRqcZZZNF/JCI=
   dependencies:
     babel-runtime "^6.9.1"
     core-js "^2.4.0"
     regenerator-runtime "^0.9.5"
 
-babel-polyfill@6.20.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
-  dependencies:
-    babel-runtime "^6.20.0"
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
 babel-preset-fbjs@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-1.0.0.tgz#c972e5c9b301d4ec9e7971f4aec3e14ac017a8b0"
@@ -2189,13 +2272,6 @@ babel-register@^6.22.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@6.23.0, babel-runtime@^6.20.0, babel-runtime@^6.9.1:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
 babel-runtime@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
@@ -2203,6 +2279,14 @@ babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
+babel-runtime@^6.9.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-template@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb"
@@ -2260,10 +2344,6 @@ base64-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
   integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
 
-base64url@2.0.0, base64url@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
-
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -2311,6 +2391,11 @@ bluebird@^3.5.3:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
   integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
 
+bluebird@~2.9.24:
+  version "2.9.34"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8"
+  integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g=
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -2319,13 +2404,7 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-
-boom@2.x.x:
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
-  integrity sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=
-  dependencies:
-    hoek "2.x.x"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
 boom@4.x.x:
   version "4.3.1"
@@ -2339,9 +2418,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-boxen@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.0.tgz#03478d84be7fe02189b80904d81d6a80384368f1"
+boxen@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
+  integrity sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==
   dependencies:
     ansi-align "^2.0.0"
     camelcase "^4.0.0"
@@ -2349,9 +2429,9 @@ boxen@^1.0.0:
     cli-boxes "^1.0.0"
     string-width "^2.0.0"
     term-size "^1.2.0"
-    widest-line "^1.0.0"
+    widest-line "^2.0.0"
 
-brace-expansion@^1.0.0, brace-expansion@^1.1.7:
+brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
@@ -2359,15 +2439,6 @@ brace-expansion@^1.0.0, brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^1.8.2:
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
-  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
-  dependencies:
-    expand-range "^1.8.1"
-    preserve "^0.2.0"
-    repeat-element "^1.1.2"
-
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -2501,6 +2572,7 @@ buffer-crc32@^0.2.1, buffer-crc32@~0.2.3:
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
 
 buffer-fill@^1.0.0:
   version "1.0.0"
@@ -2548,9 +2620,10 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bunyan@1.8.10:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.10.tgz#201fedd26c7080b632f416072f53a90b9a52981c"
+bunyan@1.8.12:
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
+  integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=
   optionalDependencies:
     dtrace-provider "~0.8"
     moment "^2.10.6"
@@ -2660,6 +2733,7 @@ camelcase@^2.0.0:
 camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
 camelcase@^5.0.0:
   version "5.0.0"
@@ -2683,16 +2757,20 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
-  integrity sha1-cVuW6phBWTzDMGeSP17GDr2k99c=
-
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
-chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -2702,15 +2780,6 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
@@ -2719,31 +2788,36 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
+  integrity sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=
+  dependencies:
+    ansi-styles "~1.0.0"
+    has-color "~0.1.0"
+    strip-ansi "~0.1.0"
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-cheerio@0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
+cheerio@1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
+  integrity sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=
   dependencies:
     css-select "~1.2.0"
     dom-serializer "~0.1.0"
     entities "~1.1.1"
     htmlparser2 "^3.9.1"
-    lodash.assignin "^4.0.9"
-    lodash.bind "^4.1.4"
-    lodash.defaults "^4.0.1"
-    lodash.filter "^4.4.0"
-    lodash.flatten "^4.2.0"
-    lodash.foreach "^4.3.0"
-    lodash.map "^4.4.0"
-    lodash.merge "^4.4.0"
-    lodash.pick "^4.2.1"
-    lodash.reduce "^4.4.0"
-    lodash.reject "^4.4.0"
-    lodash.some "^4.4.0"
+    lodash "^4.15.0"
+    parse5 "^3.0.1"
 
 child-process-promise@^2.2.1:
   version "2.2.1"
@@ -2753,21 +2827,6 @@ child-process-promise@^2.2.1:
     node-version "^1.0.0"
     promise-polyfill "^6.0.1"
 
-chokidar@^1.4.3:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
-  dependencies:
-    anymatch "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
-    is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-  optionalDependencies:
-    fsevents "^1.0.0"
-
 chokidar@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
@@ -2854,10 +2913,12 @@ classnames@2.2.1:
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha1-T6kXw+WclKAEzWH47lCdplFocUM=
 
 cli-cursor@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  integrity sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=
   dependencies:
     restore-cursor "^1.0.1"
 
@@ -2962,6 +3023,7 @@ color-name@1.1.3:
 colors@0.5.x:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+  integrity sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=
 
 columnify@1.5.4, columnify@^1.5.4:
   version "1.5.4"
@@ -2970,7 +3032,7 @@ columnify@1.5.4, columnify@^1.5.4:
     strip-ansi "^3.0.0"
     wcwidth "^1.0.0"
 
-combined-stream@^1.0.5, combined-stream@~1.0.5:
+combined-stream@^1.0.5, combined-stream@^1.0.6, combined-stream@~1.0.5, combined-stream@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
   integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==
@@ -2999,15 +3061,21 @@ commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@^2.6.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+commander@^2.19.0, commander@^2.3.0, commander@^2.6.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
 commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
+common-tags@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -3046,7 +3114,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
+concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -3056,7 +3124,7 @@ concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-concat-stream@^1.4.7, concat-stream@^1.5.2:
+concat-stream@^1.4.7:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -3065,8 +3133,9 @@ concat-stream@^1.4.7, concat-stream@^1.5.2:
     typedarray "^0.0.6"
 
 configstore@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.0.tgz#45df907073e26dfa1cf4b2d52f5b60545eaa11d1"
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
+  integrity sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==
   dependencies:
     dot-prop "^4.1.0"
     graceful-fs "^4.1.2"
@@ -3315,6 +3384,11 @@ core-js@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
+core-js@^2.5.7:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
+  integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3434,13 +3508,16 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
 crx-parser@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/crx-parser/-/crx-parser-0.1.2.tgz#7eeeed9eddc95e22c189382e34624044a89a5a6d"
+  integrity sha1-fu7tnt3JXiLBiTguNGJARKiaWm0=
 
-cryptiles@2.x.x:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
-  integrity sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=
+"crx@git+https://github.com/oncletom/crx#ef150e8":
+  version "4.0.1"
+  resolved "git+https://github.com/oncletom/crx#ef150e8abf1b2e093ce746584680876927c0fc21"
   dependencies:
-    boom "2.x.x"
+    archiver "^3.0.0"
+    commander "^2.19.0"
+    node-rsa "^1.0.3"
+    pbf "^3.1.0"
 
 cryptiles@3.x.x:
   version "3.1.2"
@@ -3477,6 +3554,7 @@ crypto-browserify@~3.2.6:
 crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
 css-line-break@1.0.1:
   version "1.0.1"
@@ -3506,6 +3584,7 @@ css-loader@^1.0.1:
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
   dependencies:
     boolbase "~1.0.0"
     css-what "2.1"
@@ -3522,8 +3601,9 @@ css-selector-tokenizer@^0.7.0:
     regexpu-core "^1.0.0"
 
 css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
 cssesc@^0.1.0:
   version "0.1.0"
@@ -3552,6 +3632,13 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  integrity sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=
+  dependencies:
+    es5-ext "^0.10.9"
+
 d@^0.1.1, d@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
@@ -3596,30 +3683,31 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debounce@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.0.2.tgz#503cc674d8d7f737099664fb75ddbd36b9626dc6"
-
-debug@^2.1.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
-  dependencies:
-    ms "0.7.2"
+debounce@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
+  integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==
 
-debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
+debug@^2.1.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
+  dependencies:
+    ms "0.7.2"
+
 debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-debug@^4.1.0, debug@^4.1.1:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -3634,7 +3722,14 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@1.2.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
+  integrity sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==
+  dependencies:
+    xregexp "4.0.0"
+
+decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -3649,6 +3744,11 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-equal@^1.0.0, deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -3661,6 +3761,17 @@ deep-is@~0.1.3:
 deepcopy@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-0.6.3.tgz#634780f2f8656ab771af8fa8431ed1ccee55c7b0"
+  integrity sha1-Y0eA8vhlardxr4+oQx7RzO5Vx7A=
+
+deepmerge@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.1.0.tgz#a612626ce4803da410d77554bfd80361599c034d"
+  integrity sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg==
+
+deepmerge@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
 default-require-extensions@^2.0.0:
   version "2.0.0"
@@ -3774,20 +3885,19 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-dispensary@0.10.10:
-  version "0.10.10"
-  resolved "https://registry.yarnpkg.com/dispensary/-/dispensary-0.10.10.tgz#cb7140c2e98ae84b951ebd6816760e4d402fc31e"
+dispensary@0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/dispensary/-/dispensary-0.30.0.tgz#b08876c17910884a84907219afb0cee144b29d1d"
+  integrity sha512-ZZipc2xaDky03RD3s1UJOM6zgygo2ncEzmjuqpPR6pT7jMo0cxH/FTzGarD3Pw2naAsBOXVGG10Fwxth9OrW0g==
   dependencies:
-    array-from "2.1.1"
-    async "^2.0.0"
-    eslint "3.19.0"
-    natural-compare-lite "^1.4.0"
-    pino "^4.6.0"
-    request "^2.81.0"
-    semver "5.3.0"
-    sha.js "^2.4.4"
-    source-map-support "0.4.15"
-    yargs "^8.0.1"
+    array-from "~2.1.1"
+    async "~2.6.0"
+    natural-compare-lite "~1.4.0"
+    pino "~5.11.0"
+    request "~2.88.0"
+    sha.js "~2.4.4"
+    source-map-support "~0.5.4"
+    yargs "~12.0.1"
 
 doctrine@1.5.0:
   version "1.5.0"
@@ -3797,14 +3907,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
-doctrine@^2.1.0:
+doctrine@^2.0.0, doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
@@ -3812,24 +3915,22 @@ doctrine@^2.1.0:
     esutils "^2.0.2"
 
 dom-serializer@0, dom-serializer@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
+  integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
   dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
+    domelementtype "^1.3.0"
+    entities "^1.1.1"
 
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@1, domelementtype@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-
-domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domexception@^1.0.0:
   version "1.0.1"
@@ -3838,21 +3939,24 @@ domexception@^1.0.0:
     webidl-conversions "^4.0.2"
 
 domhandler@^2.3.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
 domutils@^1.5.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
   dependencies:
     dom-serializer "0"
     domelementtype "1"
@@ -3865,16 +3969,18 @@ dot-prop@^3.0.0:
     is-obj "^1.0.0"
 
 dot-prop@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1"
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
   dependencies:
     is-obj "^1.0.0"
 
 dtrace-provider@~0.8:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.3.tgz#ba1bfc6493285ccfcfc6ab69cd5c61d74c2a43bf"
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.7.tgz#dc939b4d3e0620cfe0c1cd803d0d2d7ed04ffd04"
+  integrity sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ=
   dependencies:
-    nan "^2.3.3"
+    nan "^2.10.0"
 
 duplexer2@0.0.2:
   version "0.0.2"
@@ -3910,11 +4016,11 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-ecdsa-sig-formatter@1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz#4bc926274ec3b5abb5016e7e1d60921ac262b2a1"
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
   dependencies:
-    base64url "^2.0.0"
     safe-buffer "^5.0.1"
 
 electron-to-chromium@^1.3.113:
@@ -3945,6 +4051,11 @@ emoji-regex@^6.1.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
   integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
 
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3967,6 +4078,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
 end-of-stream@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
+  integrity sha1-6TUyWLqpEIll78QcsO+K3i88+wc=
   dependencies:
     once "~1.3.0"
 
@@ -3980,8 +4092,9 @@ enhanced-resolve@^4.1.0:
     tapable "^1.0.0"
 
 entities@^1.1.1, entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -4025,7 +4138,16 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
+es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.49"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.49.tgz#059a239de862c94494fec28f8150c977028c6c5e"
+  integrity sha512-3NMEhi57E31qdzmYp2jwRArIUsj1HI/RxbQ4bgnSB+AIKIxsAmTiK83bYMifIcpWvEc3P1X30DhUKOqEtF/kvg==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "^1.0.0"
+
+es5-ext@^0.10.7, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0.10.2:
   version "0.10.12"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
   dependencies:
@@ -4035,10 +4157,12 @@ es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0
 es6-error@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.0.tgz#f094c7041f662599bb12720da059d6b9c7ff0f40"
+  integrity sha1-8JTHBB9mJZm7EnINoFnWucf/D0A=
 
-es6-error@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
+es6-error@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
 es6-iterator@2:
   version "2.0.0"
@@ -4048,42 +4172,61 @@ es6-iterator@2:
     es5-ext "^0.10.7"
     es6-symbol "3"
 
+es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
 es6-map@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  integrity sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-set "~0.1.3"
-    es6-symbol "~3.1.0"
-    event-emitter "~0.3.4"
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-set "~0.1.5"
+    es6-symbol "~3.1.1"
+    event-emitter "~0.3.5"
 
 es6-promise@^2.0.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-2.3.0.tgz#96edb9f2fdb01995822b263dd8aadab6748181bc"
+  integrity sha1-lu258v2wGZWCKyY92KratnSBgbw=
 
 es6-promise@^4.0.3:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
+  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
 
 es6-promisify@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
   dependencies:
     es6-promise "^4.0.3"
 
-es6-set@~0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+es6-promisify@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-6.0.1.tgz#6edaa45f3bd570ffe08febce66f7116be4b1cdb6"
+  integrity sha512-J3ZkwbEnnO+fGAKrjVpeUAnZshAdfZvbhQpqfIH9kSAspReRC4nJnu8ewm55b4y9ElyeuhCTzJD0XiH8Tsbhlw==
+
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
+  integrity sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-symbol "3"
-    event-emitter "~0.3.4"
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-symbol "3.1.1"
+    event-emitter "~0.3.5"
 
-es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
+es6-symbol@3, es6-symbol@~3.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
   dependencies:
@@ -4097,14 +4240,23 @@ es6-symbol@3.0.2:
     d "~0.1.1"
     es5-ext "~0.10.10"
 
+es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
 es6-weak-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  integrity sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=
   dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.8"
-    es6-iterator "2"
-    es6-symbol "3"
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -4125,6 +4277,7 @@ escodegen@^1.9.0:
 escope@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  integrity sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=
   dependencies:
     es6-map "^0.1.3"
     es6-weak-map "^2.0.1"
@@ -4215,6 +4368,7 @@ eslint-plugin-jsx-a11y@^5:
 eslint-plugin-no-unsafe-innerhtml@1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz#7d02878c8e9bf7916b88836d5ac122b42f151932"
+  integrity sha1-fQKHjI6b95FriINtWsEitC8VGTI=
   dependencies:
     eslint "^3.7.1"
 
@@ -4288,24 +4442,72 @@ eslint-scope@^4.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-visitor-keys@^1.0.0:
+eslint-utils@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
+  integrity sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==
+
+eslint-visitor-keys@1.0.0, eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
   integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
-eslint@3.19.0, eslint@^3.7.1:
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
+eslint@5.13.0:
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.13.0.tgz#ce71cc529c450eed9504530939aa97527861ede9"
+  integrity sha512-nqD5WQMisciZC5EHZowejLKQjWGuFS5c70fxqSKlnDME+oz9zmE8KTlX+lHSg+/5wsC/kf9Q9eMkC8qS3oM2fg==
   dependencies:
-    babel-code-frame "^6.16.0"
-    chalk "^1.1.3"
-    concat-stream "^1.5.2"
-    debug "^2.1.1"
-    doctrine "^2.0.0"
-    escope "^3.6.0"
-    espree "^3.4.0"
-    esquery "^1.0.0"
-    estraverse "^4.2.0"
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.5.3"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^2.1.0"
+    eslint-scope "^4.0.0"
+    eslint-utils "^1.3.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^5.0.0"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^11.7.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^6.1.0"
+    js-yaml "^3.12.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.5"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.2"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^5.5.1"
+    strip-ansi "^4.0.0"
+    strip-json-comments "^2.0.1"
+    table "^5.0.2"
+    text-table "^0.2.0"
+
+eslint@^3.7.1:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
+  integrity sha1-yPxiAcf0DdCJQbh8CFdnOGpnmsw=
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.5.2"
+    debug "^2.1.1"
+    doctrine "^2.0.0"
+    escope "^3.6.0"
+    espree "^3.4.0"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     glob "^7.0.3"
@@ -4377,14 +4579,16 @@ eslint@^4.19.1:
     table "4.0.2"
     text-table "~0.2.0"
 
-espree@^3.4.0:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.3.tgz#2910b5ccd49ce893c2ffffaab4fd8b3a31b82374"
+espree@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.0.tgz#fc7f984b62b36a0f543b13fb9cd7b9f4a7f5b65c"
+  integrity sha512-1MpUfwsdS9MMoN7ZXqAr9e9UKdVHDcvrJpyx7mm1WuQlx/ygErEQBzgi5Nh5qBHIoYweprhtMkTCb9GhcAIcsA==
   dependencies:
-    acorn "^5.0.1"
-    acorn-jsx "^3.0.0"
+    acorn "^6.0.2"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
 
-espree@^3.5.4:
+espree@^3.4.0, espree@^3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
   integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
@@ -4392,14 +4596,19 @@ espree@^3.5.4:
     acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
+espree@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
+  dependencies:
+    acorn "^6.0.7"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
+
 esprima@3.1.3, esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
-esprima@^2.6.0:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
-
 esprima@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
@@ -4410,6 +4619,13 @@ esquery@^1.0.0:
   dependencies:
     estraverse "^4.0.0"
 
+esquery@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+  integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
+  dependencies:
+    estraverse "^4.0.0"
+
 esrecurse@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
@@ -4426,16 +4642,18 @@ esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
-event-emitter@~0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.7"
+    d "1"
+    es5-ext "~0.10.14"
 
 event-to-promise@0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/event-to-promise/-/event-to-promise-0.8.0.tgz#4b84f11772b6f25f7752fc74d971531ac6f5b626"
+  integrity sha1-S4TxF3K28l93Uvx02XFTGsb1tiY=
 
 events@^1.0.0:
   version "1.1.1"
@@ -4514,18 +4732,12 @@ execa@^1.0.0:
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+  integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
 
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
 
-expand-brackets@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
-  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
-  dependencies:
-    is-posix-bracket "^0.1.0"
-
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@@ -4539,13 +4751,6 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-expand-range@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
-  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
-  dependencies:
-    fill-range "^2.1.0"
-
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
@@ -4580,7 +4785,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.0:
+extend@3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -4598,12 +4803,14 @@ external-editor@^2.0.4:
     iconv-lite "^0.4.17"
     tmp "^0.0.33"
 
-extglob@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
-  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
+external-editor@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
+  integrity sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==
   dependencies:
-    is-extglob "^1.0.0"
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
 
 extglob@^2.0.4:
   version "2.0.4"
@@ -4636,10 +4843,6 @@ fancy-log@^1.1.0:
     chalk "^1.1.1"
     time-stamp "^1.0.0"
 
-fast-deep-equal@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz#5c6f4599aba6b333ee3342e2ed978672f1001f8d"
-
 fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
@@ -4654,9 +4857,12 @@ fast-diff@^1.1.1:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-json-parse@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.2.tgz#3fb1ca12db68a85933612cc3fab4d7060cfff1d7"
+fast-json-patch@^2.0.6:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-2.1.0.tgz#e348c330a5b2481b14f5fffd707aebfef8b7bef6"
+  integrity sha512-PipOsAKamRw7+CXtKiieehyjUeDVPJ5J7b2kdJYerEf6TSUQoD2ijpVyZ88KQm5YXziff4h762bz3+vzf56khg==
+  dependencies:
+    deep-equal "^1.0.1"
 
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
@@ -4667,9 +4873,15 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
-fast-safe-stringify@^1.0.8, fast-safe-stringify@^1.1.11:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.2.0.tgz#ebd42666fd18fe4f2ba4f0d295065f3f85cade96"
+fast-redact@^1.4.2, fast-redact@^1.4.4:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-1.5.0.tgz#302892f566750c4f5eec7b830bfc9bc473484034"
+  integrity sha512-Afo61CgUjkzdvOKDHn08qnZ0kwck38AOGcMlvSGzvJbIab6soAP5rdoQayecGCDsD69AiF9vJBXyq31eoEO2tQ==
+
+fast-safe-stringify@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.6.tgz#04b26106cc56681f51a044cfc0d76cf0008ac2c2"
+  integrity sha512-q8BZ89jjc+mz08rSxROs8VsrBBcn1SIw1kq9NjolL509tkABRk9io01RAjSaEv1Xb2uFLt8VtRiZbGp5H8iDtg==
 
 fastparse@^1.1.1:
   version "1.1.2"
@@ -4718,9 +4930,10 @@ fbjs@^0.8.0:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
-fd-slicer@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
   dependencies:
     pend "~1.2.0"
 
@@ -4750,11 +4963,6 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-filename-regex@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
-  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
-
 filename-reserved-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
@@ -4785,17 +4993,6 @@ fileset@^2.0.3:
     glob "^7.0.3"
     minimatch "^3.0.3"
 
-fill-range@^2.1.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
-  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
-  dependencies:
-    is-number "^2.1.0"
-    isobject "^2.0.0"
-    randomatic "^3.0.0"
-    repeat-element "^1.1.2"
-    repeat-string "^1.5.2"
-
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -4852,30 +5049,7 @@ findup-sync@^2.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
-firefox-client@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/firefox-client/-/firefox-client-0.3.0.tgz#3794460f6eb6afcf41376addcbc7462e24a4cd8b"
-  dependencies:
-    colors "0.5.x"
-    js-select "~0.6.0"
-
-firefox-profile@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-0.5.0.tgz#036de91fe3ff218d9ed8252d924f49bca0b672bd"
-  dependencies:
-    adm-zip "~0.4.x"
-    archiver "~1.3.0"
-    async "~2.1.2"
-    fs-extra "~2.1.2"
-    ini "~1.3.3"
-    jetpack-id "1.0.0"
-    lazystream "~1.0.0"
-    lodash "~4.17.2"
-    minimist "^1.1.1"
-    uuid "^3.0.0"
-    xml2js "~0.4.4"
-
-firefox-profile@^1.0.2:
+firefox-profile@1.2.0, firefox-profile@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.2.0.tgz#2068227924e714a2b10ec5fba8392e19b5788509"
   integrity sha512-TTEFfPOkyaz4EWx/5ZDQC1mJAe3a+JgVcchpIfD4Tvx1UspwlTJRJxOYA35x/z2iJcxaF6aW2rdh6oj6qwgd2g==
@@ -4895,6 +5069,7 @@ firefox-profile@^1.0.2:
 first-chunk-stream@2.0.0, first-chunk-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
+  integrity sha1-G97NuOCDwGZLkZRVgVd6Q6nzHXA=
   dependencies:
     readable-stream "^2.0.2"
 
@@ -4911,15 +5086,21 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flatstr@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3"
+flatstr@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.9.tgz#0950d56fec02de1030c1311847ecd58c25690eb9"
+  integrity sha512-qFlJnOBWDfIaunF54/lBqNKmXOI0HqNhu+mHkLmbaBXlS71PUd9OjFOdyevHt/aHoHB1+eW7eKHgRKOG5aHSpw==
 
 flow-bin@^0.96.0:
   version "0.96.0"
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.96.0.tgz#3b0379d97304dc1879ae6db627cd2d6819998661"
   integrity sha512-OSxERs0EdhVxEVCst/HmlT/RcnXsQQIRqcfK9J9wC8/93JQj+xQz4RtlsmYe1PSRYaozuDLyPS5pIA81Zwzaww==
 
+fluent-syntax@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/fluent-syntax/-/fluent-syntax-0.10.0.tgz#2dfa934752866e5d297b3df763e6d2b0ced04c5d"
+  integrity sha512-6qRhwQXDTgJjS9DW3IiXZWzUMUPqNPzqh+bZZyUOr6t8xYwkIe+5JONYZuvfvbOUk65paAno0kd8s8kUD2ptNA==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -4928,38 +5109,31 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-for-in@^1.0.1, for-in@^1.0.2:
+for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-for-own@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
-  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
-  dependencies:
-    for-in "^1.0.1"
-
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-form-data@~2.1.1:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
-  integrity sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
-form-data@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.5"
+    combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
 fragment-cache@^0.2.1:
@@ -5008,14 +5182,6 @@ fs-extra@^5.0.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@~2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
-  integrity sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -5038,13 +5204,10 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
-  integrity sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==
-  dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
+fsevents@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.0.1.tgz#cdc8dc0145fa4198f4500ec09df35e79e5e52cf7"
+  integrity sha512-p+CXqK/iLvDESUWdn3NA3JVO9HxdfI+iXx8xR3DqWgKZvQNiEVpAyUQo0lmwz8rqksb4xaGerG291xuwwhX2kA==
 
 fsevents@^1.2.7:
   version "1.2.7"
@@ -5064,12 +5227,13 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-fx-runner@1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.7.tgz#c102cfdf21234c2dbd16723dccb1186f99c0b641"
+fx-runner@1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.10.tgz#c58ff92d82f620db7bba8633d68423e6385ea69a"
+  integrity sha512-tXj0lMnSey89Dx7R3Lq+HMUy3ODmOmj5lhRYBgMWNOqbh7Vx8vPUiWMbyJ3HIzGuLnNeXAPH0x/GdFZ7h6h0vQ==
   dependencies:
     commander "2.9.0"
-    lodash "3.10.1"
+    lodash "4.17.11"
     shell-quote "1.6.1"
     spawn-sync "1.0.15"
     when "3.7.7"
@@ -5109,6 +5273,11 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
@@ -5164,6 +5333,13 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gettext-parser@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gettext-parser/-/gettext-parser-1.1.0.tgz#2c5a6638d893934b9b55037d0ad82cb7004b2679"
+  integrity sha1-LFpmONiTk0ubVQN9CtgstwBLJnk=
+  dependencies:
+    encoding "^0.1.11"
+
 gh-pages@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-1.2.0.tgz#1acb92801078f7c038a167f447221d1496ccfbee"
@@ -5199,6 +5375,7 @@ git-remote-origin-url@^2.0.0:
 git-rev-sync@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/git-rev-sync/-/git-rev-sync-1.9.1.tgz#a0c2e3dd392abcf6b76962e27fc75fb3223449ce"
+  integrity sha1-oMLj3TkqvPa3aWLif8dfsyI0Sc4=
   dependencies:
     escape-string-regexp "1.0.5"
     graceful-fs "4.1.11"
@@ -5219,21 +5396,6 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-glob-base@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
-  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
-  dependencies:
-    glob-parent "^2.0.0"
-    is-glob "^2.0.0"
-
-glob-parent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
-  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
-  dependencies:
-    is-glob "^2.0.0"
-
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5242,25 +5404,26 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+glob@7.1.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
   dependencies:
+    fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "2 || 3"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
-  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
   dependencies:
-    fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "2 || 3"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -5275,6 +5438,13 @@ glob@^7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global-dirs@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+  integrity sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=
+  dependencies:
+    ini "^1.3.4"
+
 global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -5300,7 +5470,7 @@ globals@^11.0.1:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
   integrity sha512-0GZF1RiPKU97IHUO5TORo9w1PwrH/NBPl+fS7oMLdaTRiYmYbwK4NWoZWrAdd0/abG9R2BU+OiwyQpTpE6pdfQ==
 
-globals@^11.1.0:
+globals@^11.1.0, globals@^11.7.0:
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.11.0.tgz#dcf93757fa2de5486fbeed7118538adf789e9c2e"
   integrity sha512-WHq43gS+6ufNOEqlrDBxVEbb8ntfXrfAUU2ZOpCxrBdGKW3gyv8mCxAfIBD0DroPKGrJ2eSsXsLtY9MPntsyTw==
@@ -5312,6 +5482,7 @@ globals@^9.0.0:
 globals@^9.14.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
 globby@^5.0.0:
   version "5.0.0"
@@ -5433,31 +5604,10 @@ handlebars@^4.1.0:
   optionalDependencies:
     uglify-js "^3.1.4"
 
-har-schema@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
-
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
-  integrity sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=
-  dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
-
-har-validator@~4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
-  dependencies:
-    ajv "^4.9.1"
-    har-schema "^1.0.5"
-
 har-validator@~5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
@@ -5465,6 +5615,14 @@ har-validator@~5.0.3:
     ajv "^5.1.0"
     har-schema "^2.0.0"
 
+har-validator@~5.1.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
+  dependencies:
+    ajv "^6.5.5"
+    har-schema "^2.0.0"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -5472,10 +5630,10 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+has-color@~0.1.0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+  integrity sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8=
 
 has-flag@^2.0.0:
   version "2.0.0"
@@ -5557,15 +5715,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hawk@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
-  dependencies:
-    boom "2.x.x"
-    cryptiles "2.x.x"
-    hoek "2.x.x"
-    sntp "1.x.x"
-
 hawk@~6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
@@ -5584,11 +5733,6 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@2.x.x:
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
-  integrity sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=
-
 hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
@@ -5626,15 +5770,16 @@ html2canvas@^1.0.0-alpha.12:
     css-line-break "1.0.1"
 
 htmlparser2@^3.9.1:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
   dependencies:
-    domelementtype "^1.3.0"
+    domelementtype "^1.3.1"
     domhandler "^2.3.0"
     domutils "^1.5.1"
     entities "^1.1.1"
     inherits "^2.0.1"
-    readable-stream "^2.0.2"
+    readable-stream "^3.1.1"
 
 http-browserify@^1.3.2:
   version "1.7.0"
@@ -5644,15 +5789,6 @@ http-browserify@^1.3.2:
     Base64 "~0.2.0"
     inherits "~2.0.1"
 
-http-signature@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
-  integrity sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=
-  dependencies:
-    assert-plus "^0.2.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -5683,7 +5819,7 @@ iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
-iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5702,6 +5838,11 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
+ieee754@^1.1.12:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
 ieee754@^1.1.4:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
@@ -5719,15 +5860,16 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.2.0:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
-
-ignore@^3.3.3, ignore@^3.3.6:
+ignore@^3.2.0, ignore@^3.3.3, ignore@^3.3.6:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 immutable@3.7.6:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -5740,9 +5882,18 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
+import-fresh@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.0.0.tgz#a3d897f420cab0e671236897f75bc14b4885c390"
+  integrity sha512-pOnA9tfM3Uwics+SaBLCNyZZZbK+4PTu0OPZtLlMIrv17EdBoC15S9Kn8ckJ9TZTyKb3ywNE5y1yeDxxGA7nTQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
 import-local@^2.0.0:
   version "2.0.0"
@@ -5800,6 +5951,7 @@ ini@^1.3.2, ini@^1.3.4, ini@~1.3.0, ini@~1.3.3:
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  integrity sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=
   dependencies:
     ansi-escapes "^1.1.0"
     ansi-regex "^2.0.0"
@@ -5834,11 +5986,26 @@ inquirer@^3.0.6, inquirer@^3.2.2:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-interpret@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
+inquirer@^6.1.0:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.2.2.tgz#46941176f65c9eb20804627149b743a218f25406"
+  integrity sha512-Z2rREiXA6cHRR9KBOarR3WuLlFzlIfAEIiB45ll5SSadMg7WqOh1MKEjjndfuH5ewXdixWCxqnVfGOQzPeiztA==
+  dependencies:
+    ansi-escapes "^3.2.0"
+    chalk "^2.4.2"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^2.0.0"
+    lodash "^4.17.11"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^2.1.0"
+    strip-ansi "^5.0.0"
+    through "^2.3.6"
 
-interpret@^1.1.0:
+interpret@^1.0.0, interpret@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
@@ -5869,6 +6036,7 @@ invert-kv@^2.0.0:
 is-absolute@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
+  integrity sha1-hHSREZ/MtftDYhfMc39/qtUPYD8=
   dependencies:
     is-relative "^0.1.0"
 
@@ -5964,18 +6132,6 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-dotfile@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
-  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
-
-is-equal-shallow@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
-  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
-  dependencies:
-    is-primitive "^2.0.0"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -5988,11 +6144,6 @@ is-extendable@^1.0.1:
   dependencies:
     is-plain-object "^2.0.4"
 
-is-extglob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
-  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
-
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -6022,13 +6173,6 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
-is-glob@^2.0.0, is-glob@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
-  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
-  dependencies:
-    is-extglob "^1.0.0"
-
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
@@ -6043,21 +6187,25 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-installed-globally@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+  integrity sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=
+  dependencies:
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
+
+is-mergeable-object@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.0.tgz#a846e8cf0e2bad6a8cf8b243b63b4c43b9907990"
+  integrity sha512-JfyDDwUdtS4yHCgUpxOyKB9dnfZ0gecufxB0eytX6BmSXSE+8dbxDGt+V7CNRIRJ9sYFV/WQt2KJG6hNob2sBw==
+
 is-my-ip-valid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
   integrity sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==
 
 is-my-json-valid@^2.10.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
-  dependencies:
-    generate-function "^2.0.0"
-    generate-object-property "^1.1.0"
-    jsonpointer "^4.0.0"
-    xtend "^4.0.0"
-
-is-my-json-valid@^2.12.4:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz#8fd6e40363cd06b963fa877d444bfb5eddc62175"
   integrity sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==
@@ -6071,13 +6219,7 @@ is-my-json-valid@^2.12.4:
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
-
-is-number@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
-  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
-  dependencies:
-    kind-of "^3.0.2"
+  integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
 
 is-number@^3.0.0:
   version "3.0.0"
@@ -6086,11 +6228,6 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
-is-number@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
-  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
-
 is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -6130,16 +6267,6 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-posix-bracket@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
-  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
-
-is-primitive@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
-  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
-
 is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
@@ -6170,6 +6297,7 @@ is-regexp@^1.0.0:
 is-relative@^0.1.0:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
+  integrity sha1-kF/uiuhvRbPsYUvDwVyGnfCHboI=
 
 is-resolvable@^1.0.0:
   version "1.0.0"
@@ -6236,10 +6364,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isemail@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
-
 isexe@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
@@ -6348,6 +6472,7 @@ istanbul-reports@^2.1.1:
 jed@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
+  integrity sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ=
 
 jest-changed-files@^24.7.0:
   version "24.7.0"
@@ -6725,15 +6850,6 @@ jetpack-id@1.0.0:
   resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
   integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
-joi@^6.10.1:
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
-  dependencies:
-    hoek "2.x.x"
-    isemail "1.x.x"
-    moment "2.x.x"
-    topo "1.x.x"
-
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -6742,6 +6858,7 @@ js-levenshtein@^1.1.3:
 js-select@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/js-select/-/js-select-0.6.0.tgz#c284e22824d5927aec962dcdf247174aefb0d190"
+  integrity sha1-woTiKCTVknrsli3N8kcXSu+w0ZA=
   dependencies:
     JSONSelect "0.2.1"
     traverse "0.4.x"
@@ -6755,7 +6872,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.12.0:
+js-yaml@^3.12.0, js-yaml@^3.5.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -6763,13 +6880,6 @@ js-yaml@^3.12.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.5.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^2.6.0"
-
 js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.12.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
@@ -6828,6 +6938,13 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+json-merge-patch@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-0.2.3.tgz#fa2c6b5af87da77bae2966a589d52e23ed81fe40"
+  integrity sha1-+ixrWvh9p3uuKWalidUuI+2B/kA=
+  dependencies:
+    deep-equal "^1.0.0"
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -6855,6 +6972,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
 json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
   dependencies:
     jsonify "~0.0.0"
 
@@ -6882,13 +7000,6 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonfile@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.0.tgz#92e7c7444e5ffd5fa32e6a9ae8b85034df8347d0"
@@ -6905,6 +7016,7 @@ jsonfile@^4.0.0:
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
 jsonparse@^1.2.0:
   version "1.3.1"
@@ -6916,14 +7028,20 @@ jsonpointer@^4.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
   integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
 
-jsonwebtoken@7.1.9:
-  version "7.1.9"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.1.9.tgz#847804e5258bec5a9499a8dc4a5e7a3bae08d58a"
-  dependencies:
-    joi "^6.10.1"
-    jws "^3.1.3"
+jsonwebtoken@8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.2.1.tgz#333ee39aa8f238f32fa41693e7a2fb7e42f82b31"
+  integrity sha512-l8rUBr0fqYYwPc8/ZGrue7GiW7vWdZtZqelxo4Sd5lMvuEeCK8/wS54sEo6tJhdZ6hqfutsj6COgC0d1XdbHGw==
+  dependencies:
+    jws "^3.1.4"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
     lodash.once "^4.0.0"
-    ms "^0.7.1"
+    ms "^2.1.1"
     xtend "^4.0.1"
 
 jsprim@^1.2.2:
@@ -6951,24 +7069,25 @@ jsx-ast-utils@^2.0.1:
 jszip@^2.4.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
+  integrity sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=
   dependencies:
     pako "~1.0.2"
 
-jwa@^1.1.4:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.5.tgz#a0552ce0220742cd52e153774a32905c30e756e5"
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
   dependencies:
-    base64url "2.0.0"
     buffer-equal-constant-time "1.0.1"
-    ecdsa-sig-formatter "1.0.9"
+    ecdsa-sig-formatter "1.0.11"
     safe-buffer "^5.0.1"
 
-jws@^3.1.3:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.4.tgz#f9e8b9338e8a847277d6444b1464f61880e050a2"
+jws@^3.1.4:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
   dependencies:
-    base64url "^2.0.0"
-    jwa "^1.1.4"
+    jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
@@ -7003,6 +7122,7 @@ kleur@^3.0.2:
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  integrity sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=
   dependencies:
     package-json "^4.0.0"
 
@@ -7263,35 +7383,34 @@ lodash._root@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
 
-lodash.assignin@^4.0.9:
+lodash.assign@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
 
-lodash.bind@^4.1.4:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
-
-lodash.defaults@^4.0.1:
+lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
+lodash.difference@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
+  integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
+
 lodash.escape@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
   dependencies:
     lodash._root "^3.0.0"
 
-lodash.filter@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
-
-lodash.flatten@^4.2.0:
+lodash.flatten@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
 
-lodash.foreach@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
 
 lodash.isarguments@^3.0.0:
   version "3.1.0"
@@ -7301,7 +7420,32 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.keys@^3.0.0:
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
+
+lodash.keys@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
   dependencies:
@@ -7309,38 +7453,15 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
-lodash.map@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
-
-lodash.merge@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
-
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
-
-lodash.pick@^4.2.1:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
-
-lodash.reduce@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
-
-lodash.reject@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
 lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
-lodash.some@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -7386,11 +7507,17 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
 
-lodash@>4.17.4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.2:
+lodash.union@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
+  integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
+
+lodash@4.17.11, lodash@>4.17.4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.2:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -7516,11 +7643,6 @@ material-colors@^1.2.1:
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
   integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
-math-random@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
-  integrity sha1-izqsWIuKZuSXXjzepn97sylgH6w=
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7530,6 +7652,13 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdn-browser-compat-data@0.0.66:
+  version "0.0.66"
+  resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.66.tgz#5739c6033059b5cb3d7414c00cb4367c8fceecb1"
+  integrity sha512-Exx+o05KYCltHmY2thfCoufBaHeqbIzqZHQPDtmcC+nkeFG++ONzwddBtgDBAKeI0IFFKqGIbRT1QBRwmk9QKA==
+  dependencies:
+    extend "3.0.2"
+
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
@@ -7600,24 +7729,6 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
-micromatch@^2.1.5:
-  version "2.3.11"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
-  dependencies:
-    arr-diff "^2.0.0"
-    array-unique "^0.2.1"
-    braces "^1.8.2"
-    expand-brackets "^0.1.4"
-    extglob "^0.3.1"
-    filename-regex "^2.0.0"
-    is-extglob "^1.0.0"
-    is-glob "^2.0.1"
-    kind-of "^3.0.2"
-    normalize-path "^2.0.1"
-    object.omit "^2.0.0"
-    parse-glob "^3.0.4"
-    regex-cache "^0.4.2"
-
 micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -7654,7 +7765,12 @@ mime-db@~1.37.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
   integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
 
-mime-types@^2.1.12, mime-types@~2.1.7:
+mime-db@~1.38.0:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad"
+  integrity sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==
+
+mime-types@^2.1.12:
   version "2.1.21"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
   integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
@@ -7667,6 +7783,13 @@ mime-types@~2.1.17:
   dependencies:
     mime-db "~1.30.0"
 
+mime-types@~2.1.19:
+  version "2.1.22"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.22.tgz#fe6b355a190926ab7698c9a0556a11199b2199bd"
+  integrity sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==
+  dependencies:
+    mime-db "~1.38.0"
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -7682,13 +7805,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
-  dependencies:
-    brace-expansion "^1.0.0"
-
-minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -7774,11 +7891,7 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@2.x.x, moment@^2.10.6:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
-
-moment@^2.6.0:
+moment@^2.10.6, moment@^2.6.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -7805,15 +7918,21 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@^0.7.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
-
 ms@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
+multimatch@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
+  integrity sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=
+  dependencies:
+    array-differ "^1.0.0"
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    minimatch "^3.0.0"
+
 multipipe@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
@@ -7823,6 +7942,7 @@ multipipe@^0.1.2:
 mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+  integrity sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA=
 
 mute-stream@0.0.7:
   version "0.0.7"
@@ -7832,6 +7952,7 @@ mute-stream@0.0.7:
 mv@~2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
+  integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
   dependencies:
     mkdirp "~0.5.1"
     ncp "~2.0.0"
@@ -7840,22 +7961,25 @@ mv@~2:
 mz@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.5.0.tgz#2859025df03d46b57bb317174b196477ce64cec1"
+  integrity sha1-KFkCXfA9RrV7sxcXSxlkd85kzsE=
   dependencies:
     any-promise "^1.0.0"
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-mz@2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.6.0.tgz#c8b8521d958df0a4f2768025db69c719ee4ef1ce"
+mz@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
   dependencies:
     any-promise "^1.0.0"
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.3.3:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
+nan@^2.10.0:
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.2.tgz#f51dc7ae66ba7d5d55e1e6d4d8092e802c9aefe7"
+  integrity sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==
 
 nan@^2.9.2:
   version "2.12.1"
@@ -7879,9 +8003,10 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-natural-compare-lite@^1.4.0:
+natural-compare-lite@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q=
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -7890,6 +8015,7 @@ natural-compare@^1.4.0:
 ncp@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
 needle@^2.2.1:
   version "2.2.4"
@@ -7905,6 +8031,11 @@ neo-async@^2.5.0, neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
   integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
 
+next-tick@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -7918,12 +8049,10 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-firefox-connect@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/node-firefox-connect/-/node-firefox-connect-1.2.0.tgz#42403848313240c98514ef14b3302816fe3b84e1"
-  dependencies:
-    es6-promise "^2.0.1"
-    firefox-client "^0.3.0"
+node-forge@^0.7.1:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
+  integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
 
 node-int64@^0.4.0:
   version "0.4.0"
@@ -7991,14 +8120,15 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+node-notifier@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
+  integrity sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==
   dependencies:
     growly "^1.3.0"
-    semver "^5.3.0"
-    shellwords "^0.1.0"
-    which "^1.2.12"
+    semver "^5.4.1"
+    shellwords "^0.1.1"
+    which "^1.3.0"
 
 node-notifier@^5.2.1:
   version "5.4.0"
@@ -8034,10 +8164,25 @@ node-releases@^1.1.8:
   dependencies:
     semver "^5.3.0"
 
+node-rsa@^1.0.3:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
+  integrity sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==
+  dependencies:
+    asn1 "^0.2.4"
+
 node-version@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.0.0.tgz#1b9b9584a9a7f7a6123f215cd14a652bf21ab19e"
 
+nomnom@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7"
+  integrity sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=
+  dependencies:
+    chalk "~0.4.0"
+    underscore "~1.6.0"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -8056,7 +8201,7 @@ normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
+normalize-path@^2.0.0, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
@@ -8125,8 +8270,9 @@ npmlog@^4.0.2, npmlog@^4.1.2:
     set-blocking "~2.0.0"
 
 nth-check@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
   dependencies:
     boolbase "~1.0.0"
 
@@ -8144,10 +8290,15 @@ nwmatcher@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
 
-oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
 object-assign@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd"
@@ -8200,14 +8351,6 @@ object.getownpropertydescriptors@^2.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.5.1"
 
-object.omit@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
-  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
-  dependencies:
-    for-own "^0.1.4"
-    is-extendable "^0.1.1"
-
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
@@ -8232,6 +8375,7 @@ once@~1.3.0:
 onetime@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
 
 onetime@^2.0.0:
   version "2.0.1"
@@ -8240,15 +8384,18 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-open@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
-
 opener@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
   integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
 
+opn@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
+  integrity sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==
+  dependencies:
+    is-wsl "^1.1.0"
+
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -8283,9 +8430,19 @@ os-homedir@^1.0.0:
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
+os-locale@3.1.0, os-locale@^3.0.0, os-locale@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
+  dependencies:
+    execa "^1.0.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
 os-locale@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
   dependencies:
     lcid "^1.0.0"
 
@@ -8298,20 +8455,11 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-locale@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
-  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
-  dependencies:
-    execa "^1.0.0"
-    lcid "^2.0.0"
-    mem "^4.0.0"
-
 os-shim@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
@@ -8418,8 +8566,9 @@ pako@~0.2.0:
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
 pako@~1.0.2:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.5.tgz#d2205dfe5b9da8af797e7c163db4d1f84e4600bc"
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
 
 pako@~1.0.5:
   version "1.0.8"
@@ -8435,6 +8584,13 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-asn1@^5.0.0:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.4.tgz#37f6628f823fbdeb2273b4d540434a22f3ef1fcc"
@@ -8452,31 +8608,21 @@ parse-github-repo-url@^1.3.0:
   resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
   integrity sha1-nn2LslKmy2ukJZUGC3v23z28H1A=
 
-parse-glob@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
-  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
+parse-json@4.0.0, parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
   dependencies:
-    glob-base "^0.3.0"
-    is-dotfile "^1.0.0"
-    is-extglob "^1.0.0"
-    is-glob "^2.0.0"
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
 
-parse-json@2.2.0, parse-json@^2.2.0:
+parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
   integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
   dependencies:
     error-ex "^1.2.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -8486,6 +8632,13 @@ parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
 
+parse5@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
+  dependencies:
+    "@types/node" "*"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -8555,6 +8708,14 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+pbf@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.0.tgz#e76f9f5114e395c25077ad6fe463b3507d6877fc"
+  integrity sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
@@ -8574,10 +8735,7 @@ pbkdf2@^3.0.3:
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-
-performance-now@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
 performance-now@^2.1.0:
   version "2.1.0"
@@ -8605,17 +8763,34 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-pino@^4.6.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-4.7.0.tgz#8d818313d1095dbb6ada09df2a10bce214dae9d1"
-  dependencies:
-    chalk "^2.0.1"
-    fast-json-parse "^1.0.0"
-    fast-safe-stringify "^1.1.11"
-    flatstr "^1.0.4"
-    pump "^1.0.2"
-    quick-format-unescaped "^1.1.1"
-    split2 "^2.0.1"
+pino-std-serializers@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-2.4.0.tgz#c0588b5ab0905ac55bae2cb61639ed93153681fb"
+  integrity sha512-ysT2ylXu1aEec9k8cm/lz7emBcfpdxFWHqvHeGXf1wvfw7TKPMGhLWwS+ciHw6u4ffnmV+pkAMF4MUIZmZZdSg==
+
+pino@5.11.1:
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-5.11.1.tgz#2d6d8edb7ebc7c354be03bfa04fd436352e1d67b"
+  integrity sha512-NIua0mGb9Adknq35ONvQmvh93LCUVUjp2+1q1EcvIkJmpJnSd3E5rHVKlKNjzMXFl/z3fI+QA0xXCjPEKNiLvQ==
+  dependencies:
+    fast-redact "^1.4.2"
+    fast-safe-stringify "^2.0.6"
+    flatstr "^1.0.9"
+    pino-std-serializers "^2.3.0"
+    quick-format-unescaped "^3.0.0"
+    sonic-boom "^0.7.1"
+
+pino@~5.11.0:
+  version "5.11.3"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-5.11.3.tgz#79f2f2aae8b77884136193e34da65d77e8af75b4"
+  integrity sha512-17Gv9b2fLFMkTfSkh2M5hr6YPAYNL+6GHmrOXD4AmlrYXS9ept6Jtz+gCGzxwdsLNsuKL2kIOr/G5Ws2HX5P8g==
+  dependencies:
+    fast-redact "^1.4.4"
+    fast-safe-stringify "^2.0.6"
+    flatstr "^1.0.9"
+    pino-std-serializers "^2.3.0"
+    quick-format-unescaped "^3.0.2"
+    sonic-boom "^0.7.3"
 
 pirates@^4.0.1:
   version "4.0.1"
@@ -8648,6 +8823,7 @@ please-upgrade-node@^3.0.2:
 pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+  integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
 
 pluralize@^7.0.0:
   version "7.0.0"
@@ -8658,6 +8834,14 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+po2json@0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/po2json/-/po2json-0.4.5.tgz#47bb2952da32d58a1be2f256a598eebc0b745118"
+  integrity sha1-R7spUtoy1Yob4vJWpZjuvAt0URg=
+  dependencies:
+    gettext-parser "1.1.0"
+    nomnom "1.8.1"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -8699,13 +8883,14 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss@6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
+postcss@7.0.14:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
   dependencies:
-    chalk "^1.1.3"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
 
 postcss@^6.0.1, postcss@^6.0.23:
   version "6.0.23"
@@ -8725,11 +8910,6 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-preserve@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
-  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
-
 prettier@^1.16.4:
   version "1.16.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
@@ -8758,6 +8938,18 @@ private@^0.1.6:
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
+probe-image-size@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-4.0.0.tgz#d35b71759e834bcf580ea9f18ec8b9265c0977eb"
+  integrity sha512-nm7RvWUxps+2+jZKNLkd04mNapXNariS6G5WIEVzvAqjx7EUuKcY1Dp3e6oUK7GLwzJ+3gbSbPLFAASHFQrPcQ==
+  dependencies:
+    any-promise "^1.3.0"
+    deepmerge "^2.0.1"
+    inherits "^2.0.3"
+    next-tick "^1.0.0"
+    request "^2.83.0"
+    stream-parser "~0.3.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
@@ -8771,6 +8963,7 @@ process@^0.11.0, process@^0.11.10, process@~0.11.0:
 progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
 
 progress@^2.0.0:
   version "2.0.3"
@@ -8816,6 +9009,11 @@ prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+protocol-buffers-schema@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
+  integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -8826,6 +9024,11 @@ pseudomap@^1.0.1, pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
+psl@^1.1.24:
+  version "1.1.31"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
+  integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==
+
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -8838,13 +9041,6 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
-pump@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
@@ -8890,19 +9086,15 @@ q@^1.4.1, q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@~6.3.0:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
-  integrity sha1-51vV9uJoEioqDgvaYwslUMFmUCw=
-
-qs@~6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
-
 qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
+qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -8921,11 +9113,10 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-quick-format-unescaped@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-1.1.1.tgz#e77555ef3e66e105d4039e13ef79201284fee916"
-  dependencies:
-    fast-safe-stringify "^1.0.8"
+quick-format-unescaped@^3.0.0, quick-format-unescaped@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-3.0.2.tgz#0137e94d8fb37ffeb70040535111c378e75396fb"
+  integrity sha512-FXTaCkwvpIlkdKeGDNgcq07SXWS383noQUuZjvdE1QcTt+eLuqof6/BDiEPqB59FWLie/l91+HtlJSw7iCViSA==
 
 quick-lru@^1.0.0:
   version "1.1.0"
@@ -8939,15 +9130,6 @@ quick-tmp@0.0.0:
     first-match "0.0.1"
     osenv "0.0.3"
 
-randomatic@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
-  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
-  dependencies:
-    is-number "^4.0.0"
-    kind-of "^6.0.0"
-    math-random "^1.0.1"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -9133,7 +9315,16 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdirp@^2.0.0, readdirp@^2.2.1:
+readable-stream@^3.1.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.3.0.tgz#cb8011aad002eb717bf040291feba8569c986fb9"
+  integrity sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
   integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
@@ -9145,6 +9336,7 @@ readdirp@^2.0.0, readdirp@^2.2.1:
 readline2@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  integrity sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
@@ -9160,6 +9352,7 @@ realpath-native@^1.1.0:
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
   dependencies:
     resolve "^1.1.6"
 
@@ -9191,14 +9384,20 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+regenerator-runtime@0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991"
+  integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==
 
 regenerator-runtime@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@@ -9207,6 +9406,7 @@ regenerator-runtime@^0.12.0:
 regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
+  integrity sha1-0z65XQ0gAaS+OWWXB8UbDLcc4Ck=
 
 regenerator-transform@^0.13.3:
   version "0.13.4"
@@ -9215,13 +9415,6 @@ regenerator-transform@^0.13.3:
   dependencies:
     private "^0.1.6"
 
-regex-cache@^0.4.2:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
-  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
-  dependencies:
-    is-equal-shallow "^0.1.3"
-
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -9240,6 +9433,11 @@ regexpp@^1.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
   integrity sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==
 
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -9303,6 +9501,7 @@ regjsparser@^0.6.0:
 relaxed-json@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/relaxed-json/-/relaxed-json-1.0.1.tgz#7c8d4aa2f095704cd020e32e8099bcae103f0bd4"
+  integrity sha1-fI1KovCVcEzQIOMugJm8rhA/C9Q=
   dependencies:
     chalk "^1.0.0"
     commander "^2.6.0"
@@ -9317,7 +9516,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.2, repeat-string@^1.6.1:
+repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -9347,57 +9546,31 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.0"
     tough-cookie ">=2.3.3"
 
-request@2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@2.87.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
   dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
-    forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    oauth-sign "~0.8.1"
-    qs "~6.3.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-    uuid "^3.0.0"
-
-request@^2.81.0:
-  version "2.81.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
     caseless "~0.12.0"
     combined-stream "~1.0.5"
-    extend "~3.0.0"
+    extend "~3.0.1"
     forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~4.2.1"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    oauth-sign "~0.8.1"
-    performance-now "^0.2.0"
-    qs "~6.4.0"
-    safe-buffer "^5.0.1"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
     tunnel-agent "^0.6.0"
-    uuid "^3.0.0"
+    uuid "^3.1.0"
 
 request@^2.83.0:
   version "2.83.0"
@@ -9426,6 +9599,32 @@ request@^2.83.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@~2.88.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -9436,6 +9635,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 require-uncached@1.0.3, require-uncached@^1.0.2, require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -9467,6 +9671,18 @@ resolve-from@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
   integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -9476,11 +9692,7 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
-
-resolve@^1.10.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
   integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
@@ -9490,6 +9702,7 @@ resolve@^1.10.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.5.0, resolve@^1.9.0:
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  integrity sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=
   dependencies:
     exit-hook "^1.0.0"
     onetime "^1.0.0"
@@ -9523,6 +9736,7 @@ rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
 rimraf@~2.4.0:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
+  integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
   dependencies:
     glob "^6.0.1"
 
@@ -9547,6 +9761,7 @@ rsvp@^4.8.4:
 run-async@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  integrity sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=
   dependencies:
     once "^1.3.0"
 
@@ -9579,6 +9794,7 @@ rx-lite@*, rx-lite@^4.0.8:
 rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+  integrity sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI=
 
 rxjs@^6.3.3:
   version "6.3.3"
@@ -9587,14 +9803,22 @@ rxjs@^6.3.3:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504"
+  integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-json-stringify@~1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.0.4.tgz#81a098f447e4bbc3ff3312a243521bc060ef5911"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
+  integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
 
 safe-regex@^1.1.0:
   version "1.1.0"
@@ -9653,17 +9877,19 @@ semver-compare@^1.0.0:
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  integrity sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
+"semver@2 || 3 || 4 || 5", semver@5.6.0, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
-semver@5.3.0, semver@^5.0.3:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+semver@^5.0.3:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
+  integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
 serialize-javascript@^1.4.0:
   version "1.6.1"
@@ -9705,7 +9931,7 @@ sha.js@2.2.6:
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
   integrity sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo=
 
-sha.js@^2.4.0, sha.js@^2.4.8:
+sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
   version "2.4.11"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
   integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
@@ -9713,12 +9939,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-sha.js@^2.4.4:
-  version "2.4.8"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
-  dependencies:
-    inherits "^2.0.1"
-
 shallow-copy@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
@@ -9738,6 +9958,7 @@ shebang-regex@^1.0.0:
 shell-quote@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  integrity sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=
   dependencies:
     array-filter "~0.0.0"
     array-map "~0.0.0"
@@ -9747,6 +9968,7 @@ shell-quote@1.6.1:
 shelljs@0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
+  integrity sha1-svXHfvlxSPS09uImguELuoZnz/E=
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -9755,30 +9977,28 @@ shelljs@0.7.7:
 shelljs@^0.7.5:
   version "0.7.8"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+  integrity sha1-3svPh0sNHl+3LhSxZKloMEjprLM=
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shellwords@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.0.tgz#66afd47b6a12932d9071cbfd98a52e785cd0ba14"
-
 shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-sign-addon@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-0.2.1.tgz#0172bdd9fdee7bdc636f3833b6977a556c75388e"
+sign-addon@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-0.3.1.tgz#7798ba994c8cd803a64a11a12a377ae6f714565e"
+  integrity sha512-feaoG7+8IXr9SymOEd8VTZCSlVZArWcBDZ33IIdfXlU5NWWzXdCxCjPDqAkLQplFa7RRZr1S4lSmgMPn80Ze1A==
   dependencies:
     babel-polyfill "6.16.0"
     deepcopy "0.6.3"
     es6-error "4.0.0"
     es6-promisify "5.0.0"
-    jsonwebtoken "7.1.9"
+    jsonwebtoken "8.2.1"
     mz "2.5.0"
-    request "2.79.0"
+    request "2.87.0"
     source-map-support "0.4.6"
     stream-to-promise "2.2.0"
     when "3.7.7"
@@ -9814,6 +10034,15 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -9844,19 +10073,19 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sntp@1.x.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
-  integrity sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=
-  dependencies:
-    hoek "2.x.x"
-
 sntp@2.x.x:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
   dependencies:
     hoek "4.x.x"
 
+sonic-boom@^0.7.1, sonic-boom@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-0.7.3.tgz#cbfc18e87c2b8078b00e38ad9475c05fce5ea696"
+  integrity sha512-A9EyoIeLD+g9vMLYQKjNCatJtAKdBQMW03+L8ZWWX/A6hq+srRCwdqHrBD1R8oSMLXov3oHN13dljtZf12q2Ow==
+  dependencies:
+    flatstr "^1.0.9"
+
 sort-keys@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@@ -9887,25 +10116,35 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@0.4.15:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
-  dependencies:
-    source-map "^0.5.6"
-
 source-map-support@0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  integrity sha1-MlUqpktFg5KoXqs7C17mFScWeus=
   dependencies:
     source-map "^0.5.3"
 
+source-map-support@0.5.10, source-map-support@~0.5.9:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
+  integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-support@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  integrity sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==
+  dependencies:
+    source-map "^0.6.0"
+
 source-map-support@^0.4.2:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.11.tgz#647f939978b38535909530885303daf23279f322"
   dependencies:
     source-map "^0.5.3"
 
-source-map-support@^0.5.6:
+source-map-support@^0.5.6, source-map-support@~0.5.4:
   version "0.5.12"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
   integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
@@ -9913,14 +10152,6 @@ source-map-support@^0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@~0.5.9:
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
-  integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -9991,12 +10222,6 @@ split2@^2.0.0:
   dependencies:
     through2 "^2.0.2"
 
-split2@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-2.1.1.tgz#7a1f551e176a90ecd3345f7246a0cfe175ef4fd0"
-  dependencies:
-    through2 "^2.0.2"
-
 split@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
@@ -10004,6 +10229,13 @@ split@^1.0.0:
   dependencies:
     through "2"
 
+split@~0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  integrity sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=
+  dependencies:
+    through "2"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -10091,6 +10323,13 @@ stream-http@^2.7.2:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
+stream-parser@~0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stream-parser/-/stream-parser-0.3.1.tgz#1618548694420021a1182ff0af1911c129761773"
+  integrity sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=
+  dependencies:
+    debug "2"
+
 stream-shift@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
@@ -10099,12 +10338,14 @@ stream-shift@^1.0.0:
 stream-to-array@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
+  integrity sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=
   dependencies:
     any-promise "^1.1.0"
 
 stream-to-promise@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/stream-to-promise/-/stream-to-promise-2.2.0.tgz#b1edb2e1c8cb11289d1b503c08d3f2aef51e650f"
+  integrity sha1-se2y4cjLESidG1A8CNPyrvUeZQ8=
   dependencies:
     any-promise "~1.3.0"
     end-of-stream "~1.1.0"
@@ -10144,7 +10385,16 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string_decoder@^1.0.0:
+string-width@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
   integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
@@ -10172,11 +10422,6 @@ stringify-object@^3.2.2:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-stringstream@~0.0.4:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
-  integrity sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==
-
 stringstream@~0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@@ -10195,22 +10440,29 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.0.0:
+strip-ansi@^5.0.0, strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
+  integrity sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=
+
 strip-bom-buf@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz#1cb45aaf57530f4caf86c7f75179d2c9a51dd572"
+  integrity sha1-HLRar1dTD0yvhsf3UXnSyaUd1XI=
   dependencies:
     is-utf8 "^0.2.1"
 
 strip-bom-stream@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-3.0.0.tgz#956bcc5d84430f69256a90ed823765cd858e159c"
+  integrity sha1-lWvMXYRDD2klapDtgjdlzYWOFZw=
   dependencies:
     first-chunk-stream "^2.0.0"
     strip-bom-buf "^1.0.0"
@@ -10243,7 +10495,7 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@~2.0.1:
+strip-json-comments@2.0.1, strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
@@ -10284,12 +10536,6 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@^4.0.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
@@ -10335,6 +10581,7 @@ table@4.0.2:
 table@^3.7.8:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  integrity sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=
   dependencies:
     ajv "^4.7.0"
     ajv-keywords "^1.0.0"
@@ -10343,6 +10590,16 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+table@^5.0.2:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.2.3.tgz#cde0cc6eb06751c009efab27e8c820ca5b67b7f2"
+  integrity sha512-N2RsDAMvDLvYwFcwbPyF3VmVSSkuF+G1e+8inhBLtHpvwXGw4QRPEZhihQNeEN0i1up6/f6ObCJXNdlRG3YVyQ==
+  dependencies:
+    ajv "^6.9.1"
+    lodash "^4.17.11"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
@@ -10402,6 +10659,7 @@ tempfile@^1.1.1:
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  integrity sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=
   dependencies:
     execa "^0.7.0"
 
@@ -10443,19 +10701,21 @@ text-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
   integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
 
-text-table@~0.2.0:
+text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
   dependencies:
     thenify ">= 3.1.0 < 4"
 
 "thenify@>= 3.1.0 < 4":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
+  integrity sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=
   dependencies:
     any-promise "^1.0.0"
 
@@ -10504,13 +10764,7 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
-tmp@0.0.30:
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
-  dependencies:
-    os-tmpdir "~1.0.1"
-
-tmp@^0.0.33:
+tmp@0.0.33, tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
   integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
@@ -10565,11 +10819,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-topo@1.x.x:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
-  dependencies:
-    hoek "2.x.x"
+tosource@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tosource/-/tosource-1.0.0.tgz#42d88dd116618bcf00d6106dd5446f3427902ff1"
+  integrity sha1-QtiN0RZhi88A1hBt1URvNCeQL/E=
 
 tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
   version "2.3.3"
@@ -10577,26 +10830,24 @@ tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
   dependencies:
     punycode "^1.4.1"
 
-tough-cookie@~2.3.0:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
-  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
+tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
   dependencies:
+    psl "^1.1.24"
     punycode "^1.4.1"
 
-tr46@^1.0.0:
+tr46@^1.0.0, tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
   dependencies:
     punycode "^2.1.0"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-
 traverse@0.4.x:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.4.6.tgz#d04b2280e4c792a5815429ef7b8b60c64c9ccc34"
+  integrity sha1-0EsigOTHkqWBVCnve4tgxkyczDQ=
 
 trim-newlines@^1.0.0:
   version "1.0.0"
@@ -10645,11 +10896,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
-  integrity sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -10683,6 +10929,11 @@ ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
 
+underscore@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+  integrity sha1-izixDKze9jM3uLJOT/htRa6lKag=
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -10733,6 +10984,7 @@ unique-slug@^2.0.0:
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  integrity sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=
   dependencies:
     crypto-random-string "^1.0.0"
 
@@ -10754,19 +11006,21 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
   integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-upath@^1.1.0:
+upath@1.1.0, upath@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
   integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
 
-update-notifier@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
+update-notifier@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
+  integrity sha1-TognpruRUUCrCTVZ1wFOPruDdFE=
   dependencies:
-    boxen "^1.0.0"
-    chalk "^1.0.0"
+    boxen "^1.2.1"
+    chalk "^2.0.1"
     configstore "^3.0.0"
     import-lazy "^2.1.0"
+    is-installed-globally "^0.1.0"
     is-npm "^1.0.0"
     latest-version "^3.0.0"
     semver-diff "^2.0.0"
@@ -10815,6 +11069,7 @@ use@^3.1.0:
 user-home@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  integrity sha1-nHC/2Babwdy/SGBODwS4tJzenp8=
   dependencies:
     os-homedir "^1.0.0"
 
@@ -10822,7 +11077,7 @@ userhome@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/userhome/-/userhome-1.0.0.tgz#b6491ff12d21a5e72671df9ccc8717e1c6688c0b"
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -10861,7 +11116,7 @@ uuid@^2.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
   integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
 
-uuid@^3.0.0, uuid@^3.0.1:
+uuid@^3.0.0, uuid@^3.0.1, uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
@@ -10913,11 +11168,6 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
-walkdir@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
-  integrity sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=
-
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -10939,13 +11189,14 @@ warning@^4.0.2:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.0.tgz#5164d4faabb88dcf277f17c8a3b16bfd3da8bee3"
+watchpack@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
+  integrity sha512-RSlipNQB1u48cq0wH/BNfCu1tD/cJ8ydFIkNYhp9o+3d+8unClkIovpW5qpFPgmL9OE48wfAnlZydXByWP82AA==
   dependencies:
-    async "^2.1.2"
-    chokidar "^1.4.3"
+    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
 
 watchpack@^1.5.0:
   version "1.6.0"
@@ -10963,45 +11214,44 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
-web-ext@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-1.10.1.tgz#c2d442deffefba15a89d24c9f28526b16740f469"
-  dependencies:
-    addons-linter "0.22.3"
-    babel-polyfill "6.20.0"
-    babel-runtime "6.23.0"
-    bunyan "1.8.10"
+web-ext@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-3.0.0.tgz#ec7bd5b260065d909960c8d3a84fdc12e96cf455"
+  integrity sha512-pUT2YYSnECH/SqKXB0m92HWzAAOt97wJpkSHu7AddyxzclN3R9A2IHq+KUzaXEjiwWzVs/+yUOSpmuwCDouNNg==
+  dependencies:
+    "@babel/polyfill" "7.2.5"
+    "@babel/runtime" "7.3.1"
+    "@cliqz-oss/firefox-client" "0.3.1"
+    "@cliqz-oss/node-firefox-connect" "1.2.1"
+    adbkit "2.11.0"
+    addons-linter "1.6.1"
+    bunyan "1.8.12"
     camelcase "4.1.0"
-    debounce "1.0.2"
-    decamelize "1.2.0"
-    es6-error "4.0.2"
+    debounce "1.1.0"
+    decamelize "2.0.0"
+    es6-error "4.1.1"
     es6-promisify "5.0.0"
     event-to-promise "0.8.0"
-    firefox-profile "0.5.0"
-    fx-runner "1.0.7"
+    firefox-profile "1.2.0"
+    fx-runner "1.0.10"
     git-rev-sync "1.9.1"
-    minimatch "3.0.4"
     mkdirp "0.5.1"
-    mz "2.6.0"
-    node-firefox-connect "1.2.0"
-    node-notifier "5.1.2"
-    open "0.0.5"
-    parse-json "2.2.0"
-    regenerator-runtime "0.10.5"
+    multimatch "2.1.0"
+    mz "2.7.0"
+    node-notifier "5.2.1"
+    opn "5.3.0"
+    parse-json "4.0.0"
     require-uncached "1.0.3"
-    sign-addon "0.2.1"
-    source-map-support "0.4.15"
+    sign-addon "0.3.1"
+    source-map-support "0.5.3"
     stream-to-promise "2.2.0"
-    tmp "0.0.30"
-    update-notifier "2.2.0"
-    watchpack "1.3.0"
+    strip-json-comments "2.0.1"
+    tmp "0.0.33"
+    update-notifier "2.3.0"
+    watchpack "1.5.0"
     yargs "6.6.0"
     zip-dir "1.0.2"
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-
 webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -11076,12 +11326,14 @@ whatwg-fetch@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
 
-whatwg-url@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+whatwg-url@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+  integrity sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==
   dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
 
 whatwg-url@^6.4.0:
   version "6.4.0"
@@ -11094,10 +11346,12 @@ whatwg-url@^6.4.0:
 when@3.7.7:
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
+  integrity sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg=
 
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
 
 which-module@^2.0.0:
   version "2.0.0"
@@ -11107,6 +11361,7 @@ which-module@^2.0.0:
 which@1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.4.tgz#1557f96080604e5b11b3599eb9f45b50a9efd722"
+  integrity sha1-FVf5YIBgTlsRs1meufRbUKnv1yI=
   dependencies:
     is-absolute "^0.1.7"
     isexe "^1.1.1"
@@ -11124,12 +11379,6 @@ which@^1.2.10, which@^1.2.14, which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
-which@^1.2.12:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
-  dependencies:
-    isexe "^2.0.0"
-
 which@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
@@ -11143,15 +11392,17 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-widest-line@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+widest-line@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
+  integrity sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==
   dependencies:
-    string-width "^1.0.1"
+    string-width "^2.1.1"
 
 winreg@0.0.12:
   version "0.0.12"
   resolved "https://registry.yarnpkg.com/winreg/-/winreg-0.0.12.tgz#07105554ba1a9d08979251d129475bffae3006b7"
+  integrity sha1-BxBVVLoanQiXklHRKUdb/64wBrc=
 
 wordwrap@~0.0.2:
   version "0.0.3"
@@ -11245,6 +11496,7 @@ ws@^4.0.0:
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+  integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
@@ -11266,6 +11518,12 @@ xmlbuilder@~9.0.1:
 xmldom@0.1.27:
   version "0.1.27"
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+  integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
+
+xregexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+  integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
@@ -11300,9 +11558,18 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.0.0.tgz#3fc44f3e76a8bdb1cc3602e860108602e5ccde8b"
+  integrity sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  integrity sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=
   dependencies:
     camelcase "^3.0.0"
 
@@ -11313,9 +11580,27 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.1.0.tgz#b2729ce4bfc0c584939719514099d8a916ad2301"
+  integrity sha512-1UhJbXfzHiPqkfXNHYhiz79qM/kZqjTE8yGlEjZa85Q+3+OwcV6NRkV7XOV1W2Eom2bzILeUn55pQYffjVOLAg==
+  dependencies:
+    cliui "^4.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.0.0"
+
 yargs@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  integrity sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=
   dependencies:
     camelcase "^3.0.0"
     cliui "^3.2.0"
@@ -11331,25 +11616,7 @@ yargs@6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
-yargs@8.0.2, yargs@^8.0.1, yargs@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
-  dependencies:
-    camelcase "^4.1.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^2.0.0"
-    read-pkg-up "^2.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^7.0.0"
-
-yargs@^12.0.2, yargs@^12.0.4:
+yargs@^12.0.2, yargs@^12.0.4, yargs@~12.0.1:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
@@ -11367,21 +11634,41 @@ yargs@^12.0.2, yargs@^12.0.4:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yauzl@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.8.0.tgz#79450aff22b2a9c5a41ef54e02db907ccfbf9ee2"
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
+yauzl@2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
   dependencies:
     buffer-crc32 "~0.2.3"
-    fd-slicer "~1.0.1"
+    fd-slicer "~1.1.0"
 
 zip-dir@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-1.0.2.tgz#253f907aead62a21acd8721d8b88032b2411c051"
+  integrity sha1-JT+QeurWKiGs2HIdi4gDKyQRwFE=
   dependencies:
     async "^1.5.2"
     jszip "^2.4.0"
 
-zip-stream@^1.1.0, zip-stream@^1.2.0:
+zip-stream@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
   integrity sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=
@@ -11390,3 +11677,12 @@ zip-stream@^1.1.0, zip-stream@^1.2.0:
     compress-commons "^1.2.0"
     lodash "^4.8.0"
     readable-stream "^2.0.0"
+
+zip-stream@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-2.0.1.tgz#48a062488afe91dda42f823700fae589753ccd34"
+  integrity sha512-c+eUhhkDpaK87G/py74wvWLtz2kzMPNCCkUApkun50ssE0oQliIQzWpTnwjB+MTKVIf2tGzIgHyqW/Y+W77ecQ==
+  dependencies:
+    archiver-utils "^2.0.0"
+    compress-commons "^1.2.0"
+    readable-stream "^2.0.0"

From 670d1348f15e6c24a702cb87c1d19e30255f4de8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 14:42:34 -0700
Subject: [PATCH 364/814] Chrome build+deploy script auto-increment a
 prerelease version

---
 package.json                    |  4 +++-
 shells/browser/chrome/build.js  | 19 ++++++++++++++++++-
 shells/browser/shared/build.js  | 16 +++++++++++-----
 shells/browser/shared/deploy.js | 16 ++++++++++------
 yarn.lock                       | 31 ++++++++++++++++++++++++++++++-
 5 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 73af1928ac3a..cdff07f283f4 100644
--- a/package.json
+++ b/package.json
@@ -131,11 +131,13 @@
     "react-is": "^16.9.0-alpha.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
+    "request-promise": "^4.2.4",
     "scheduler": "^0.14.0-alpha.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
-    "webpack-cli": "^3.1.2"
+    "webpack-cli": "^3.1.2",
+    "xml-js": "^1.6.11"
   }
 }
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 128ee15a788a..0f5905e2debf 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -3,10 +3,27 @@
 const chalk = require('chalk');
 const { execSync } = require('child_process');
 const { join } = require('path');
+const rp = require('request-promise');
+const convert = require('xml-js');
 const build = require('../shared/build');
 
 const main = async () => {
-  await build('chrome');
+  const manifestVersion = await rp(
+    'https://react-devtools-experimental-chrome.now.sh/updates.xml'
+  )
+    .then(xmlString => {
+      const parsedXML = convert.xml2js(xmlString);
+      const version =
+        parsedXML.elements[0].elements[0].elements[0].attributes.version;
+      const match = /(\d)\.(\d)\.(\d)\.*(\d)*/.exec(version);
+      if (match !== null) {
+        const prerelease = parseInt(match[4], 10) || 0;
+        return `${match[1]}.${match[2]}.${match[3]}.${prerelease + 1}`;
+      }
+    })
+    .catch(error => null);
+
+  await build('chrome', manifestVersion);
 
   const cwd = join(__dirname, 'build');
   execSync('crx pack ./unpacked -o ReactDevTools.crx -p ../../../../key.pem', {
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 63b38b993cf7..6a58205ef026 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -17,7 +17,7 @@ const preProcess = async (destinationPath, tempPath) => {
   await ensureDir(tempPath); // Create temp dir for this new build
 };
 
-const build = async (tempPath, manifestPath) => {
+const build = async (tempPath, manifestPath, manifestVersion) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
 
@@ -63,8 +63,14 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
   );
 
-  let manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
-  manifest.description += `\n\nCreated from revision ${getGitCommit()}`;
+  const commit = getGitCommit();
+
+  const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  manifest.description += `\n\nCreated from revision ${commit}`;
+  if (manifestVersion) {
+    manifest.version = manifestVersion;
+    manifest.version_name = `${manifestVersion} ${commit}`;
+  }
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
@@ -84,7 +90,7 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
-const main = async buildId => {
+const main = async (buildId, manifestVersion) => {
   const root = join(__dirname, '..', buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
@@ -92,7 +98,7 @@ const main = async buildId => {
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await preProcess(destinationPath, tempPath);
-    await build(tempPath, manifestPath);
+    await build(tempPath, manifestPath, manifestVersion);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
     await postProcess(tempPath, destinationPath);
diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index ad7167dd1bb4..f5206ce89365 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -3,6 +3,7 @@
 const { exec, execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 const { join } = require('path');
+const convert = require('xml-js');
 
 const main = async buildId => {
   const root = join(__dirname, '..', buildId);
@@ -15,12 +16,15 @@ const main = async buildId => {
   });
 
   if (buildId === 'chrome') {
-    await exec(
-      `cp ${join(root, 'updates.xml')} ${join(buildPath, 'updates.xml')}`,
-      {
-        cwd: root,
-      }
-    );
+    const file = readFileSync(join(buildPath, 'unpacked', 'manifest.json'));
+    const json = JSON.parse(file);
+    const { version } = json;
+
+    const xmlString = readFileSync(join(root, 'updates.xml'), 'utf8');
+    const parsedXML = convert.xml2js(xmlString);
+    parsedXML.elements[0].elements[0].elements[0].attributes.version = version;
+
+    writeFileSync(join(buildPath, 'updates.xml'), convert.js2xml(parsedXML));
   }
 
   const file = readFileSync(join(root, 'now.json'));
diff --git a/yarn.lock b/yarn.lock
index 85fba468a730..688e568a0496 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2386,6 +2386,11 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
+bluebird@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
+  integrity sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==
+
 bluebird@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
@@ -9538,6 +9543,13 @@ request-promise-core@1.1.1:
   dependencies:
     lodash "^4.13.1"
 
+request-promise-core@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
+  integrity sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==
+  dependencies:
+    lodash "^4.17.11"
+
 request-promise-native@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
@@ -9546,6 +9558,16 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.0"
     tough-cookie ">=2.3.3"
 
+request-promise@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/request-promise/-/request-promise-4.2.4.tgz#1c5ed0d71441e38ad58c7ce4ea4ea5b06d54b310"
+  integrity sha512-8wgMrvE546PzbR5WbYxUQogUnUDfM0S7QIFZMID+J73vdFARkFy+HElj4T+MWYhpXwlLp0EQ8Zoj8xUA0he4Vg==
+  dependencies:
+    bluebird "^3.5.0"
+    request-promise-core "1.1.2"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
 request@2.87.0:
   version "2.87.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
@@ -10284,7 +10306,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stealthy-require@^1.1.0:
+stealthy-require@^1.1.0, stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
 
@@ -11498,6 +11520,13 @@ xdg-basedir@^3.0.0:
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xml-js@^1.6.11:
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
+  integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
+  dependencies:
+    sax "^1.2.4"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"

From 801bb5e33a759fedfb4be0545b50b9a90f906abd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 14:45:39 -0700
Subject: [PATCH 365/814] Udpated Firefox installation instructions

---
 shells/browser/shared/deploy.firefox.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/shells/browser/shared/deploy.firefox.html b/shells/browser/shared/deploy.firefox.html
index bc899c5f01d9..57051bf58605 100644
--- a/shells/browser/shared/deploy.firefox.html
+++ b/shells/browser/shared/deploy.firefox.html
@@ -1,6 +1,7 @@
 <ol>
   <li><a href="packed.zip">download extension</a></li>
+  <li>Extract/unzip</li>
   <li>Visit <code>about:debugging</code></li>
   <li>Click "Load Temporary Add-on"</li>
-  <li>Select extension</li>
+  <li>Select the <code>manifest.json</code></li>
 </ol>
\ No newline at end of file

From 1e08261975a45b9e9fa5827f38e11382ed7b3200 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 15:08:14 -0700
Subject: [PATCH 366/814] Added missing instruction to Chrome install steps

---
 shells/browser/shared/deploy.chrome.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shells/browser/shared/deploy.chrome.html b/shells/browser/shared/deploy.chrome.html
index 620d4ea7916f..ccef0c2724fd 100644
--- a/shells/browser/shared/deploy.chrome.html
+++ b/shells/browser/shared/deploy.chrome.html
@@ -1,6 +1,7 @@
 <ol>
   <li><a href="ReactDevTools.crx">download extension</a></li>
   <li>Navigate to <a href="chrome://extensions/">chrome://extensions/</a></li>
+  <li>Enable "Developer mode"</li>
   <li>Drag <code>ReactDevTools.crx</code> into Chrome</li>
   <li>Choose "Add Extension" when prompted</li>
 </ol>
\ No newline at end of file

From 454bcf1e01bc2e180a7289b56d0a5e6b0693d679 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 01:07:35 +0100
Subject: [PATCH 367/814] Polish some mouse interactions

---
 src/devtools/views/Components/Element.js   | 6 ++++++
 src/devtools/views/Components/HooksTree.js | 4 ++--
 src/devtools/views/Components/KeyValue.js  | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 16fb243ff223..6bc9bfeb7efe 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -190,6 +190,11 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
     [id, isCollapsed, store]
   );
 
+  const stopPropagation = useCallback(event => {
+    // Prevent the row from selecting
+    event.stopPropagation();
+  }, []);
+
   if (children.length === 0) {
     return <div className={styles.ExpandCollapseToggle} />;
   }
@@ -197,6 +202,7 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
   return (
     <div
       className={styles.ExpandCollapseToggle}
+      onMouseDown={stopPropagation}
       onClick={toggleCollapsed}
       onDoubleClick={swallowDoubleClick}
     >
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 81c19f650e5d..eb42fbf9a08c 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -130,7 +130,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+            <span onClick={toggleIsOpen} className={styles.Name}>
               {name}
             </span>
           </div>
@@ -149,7 +149,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+            <span onClick={toggleIsOpen} className={styles.Name}>
               {name}
             </span>{' '}
             {/* $FlowFixMe */}
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 955514de0dbe..ca5504e7b16b 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -115,7 +115,7 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+            onClick={hasChildren ? toggleIsOpen : undefined}
           >
             {name}
           </span>
@@ -150,7 +150,7 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+            onClick={hasChildren ? toggleIsOpen : undefined}
           >
             {name}
           </span>

From ba9c763954276e18b6f577f721d0330d2eeb494b Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 01:58:05 +0100
Subject: [PATCH 368/814] Consistently scroll component name into view

---
 src/devtools/views/Components/Element.css |  5 +++++
 src/devtools/views/Components/Element.js  | 23 +++++++++++++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 2a923c15d987..425b901bd899 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -17,6 +17,11 @@
   background-color: var(--color-inactive-background);
 }
 
+.ScrollAnchor {
+  height: 100%;
+  width: 0;
+}
+
 .SelectedElement {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 16fb243ff223..bf81291f4a7f 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -56,7 +56,8 @@ export default function ElementView({ data, index, style }: Props) {
     }
   }, [id, selectOwner]);
 
-  const ref = useRef<HTMLSpanElement | null>(null);
+  const scrollAnchorStartRef = useRef<HTMLSpanElement | null>(null);
+  const scrollAnchorEndRef = useRef<HTMLSpanElement | null>(null);
 
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
@@ -74,8 +75,20 @@ export default function ElementView({ data, index, style }: Props) {
       }
       lastScrolledIDRef.current = id;
 
-      if (ref.current !== null) {
-        ref.current.scrollIntoView({
+      // We want to bring the whole <Component> name into view,
+      // including the expansion toggle and the "=== $r" hint.
+      // However, even calling scrollIntoView() on their parent node
+      // wouldn't guarantee that it will be *fully* brought into view.
+      // As a workaround, we'll have two anchor spans, and scroll each into view.
+      if (scrollAnchorStartRef.current !== null) {
+        scrollAnchorStartRef.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+      if (scrollAnchorEndRef.current !== null) {
+        scrollAnchorEndRef.current.scrollIntoView({
           behavior: 'auto',
           block: 'nearest',
           inline: 'nearest',
@@ -149,10 +162,11 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
       {ownerStack.length === 0 ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
-      <span className={styles.Component} ref={ref}>
+      <span className={styles.Component}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>
@@ -162,6 +176,7 @@ export default function ElementView({ data, index, style }: Props) {
         )}
       </span>
       {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
+      <span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
     </div>
   );
 }

From 097d0386b133f779f4c3622d2a745d64e1e32fc8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 12 Apr 2019 18:59:15 +0100
Subject: [PATCH 369/814] Track search navigation in DOM

---
 src/devtools/views/Components/Element.js     |  4 +-
 src/devtools/views/Components/SearchInput.js | 32 ++++++++++----
 src/devtools/views/Components/Tree.js        | 45 ++++++++++++++------
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 6bc9bfeb7efe..1d3ac200a9c1 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -44,7 +44,7 @@ export default function ElementView({ data, index, style }: Props) {
   const {
     lastScrolledIDRef,
     treeFocused,
-    isNavigatingWithKeyboard,
+    isUsingKeyboardOrSearch,
     onElementMouseEnter,
   } = data;
   const id = element === null ? null : element.id;
@@ -122,7 +122,7 @@ export default function ElementView({ data, index, style }: Props) {
     className = treeFocused
       ? styles.SelectedElement
       : styles.InactiveSelectedElement;
-  } else if (isHovered && !isNavigatingWithKeyboard) {
+  } else if (isHovered && !isUsingKeyboardOrSearch) {
     className = styles.HoveredElement;
   }
 
diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 51d0e58d3b12..dc4069e384b4 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -8,9 +8,12 @@ import Icon from '../Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {||};
+type Props = {|
+  onSearchInteraction: () => void,
+|};
 
 export default function SearchInput(props: Props) {
+  const { onSearchInteraction } = props;
   const {
     goToNextSearchResult,
     goToPreviousSearchResult,
@@ -25,13 +28,17 @@ export default function SearchInput(props: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) => setSearchText(currentTarget.value),
-    [setSearchText]
+    ({ currentTarget }) => {
+      setSearchText(currentTarget.value);
+      onSearchInteraction();
+    },
+    [setSearchText, onSearchInteraction]
   );
 
   const resetSearch = useCallback(() => {
     setSearchText('');
-  }, [setSearchText]);
+    onSearchInteraction();
+  }, [setSearchText, onSearchInteraction]);
 
   const handleKeyDown = useCallback(
     event => {
@@ -39,26 +46,29 @@ export default function SearchInput(props: Props) {
       switch (event.key) {
         case 'ArrowDown':
           selectNextElementInTree();
+          onSearchInteraction();
           event.preventDefault();
           break;
         case 'ArrowUp':
           selectPreviousElementInTree();
+          onSearchInteraction();
           event.preventDefault();
           break;
         default:
           break;
       }
     },
-    [selectNextElementInTree, selectPreviousElementInTree]
+    [selectNextElementInTree, selectPreviousElementInTree, onSearchInteraction]
   );
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
         goToNextSearchResult();
+        onSearchInteraction();
       }
     },
-    [goToNextSearchResult]
+    [goToNextSearchResult, onSearchInteraction]
   );
 
   // Auto-focus search input
@@ -109,7 +119,10 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToPreviousSearchResult}
+        onClick={() => {
+          goToPreviousSearchResult();
+          onSearchInteraction();
+        }}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
@@ -117,7 +130,10 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToNextSearchResult}
+        onClick={() => {
+          goToNextSearchResult();
+          onSearchInteraction();
+        }}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index eb31803f2375..c7c08518a485 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -27,7 +27,7 @@ export type ItemData = {|
   baseDepth: number,
   numElements: number,
   getElementAtIndex: (index: number) => Element | null,
-  isNavigatingWithKeyboard: boolean,
+  isUsingKeyboardOrSearch: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
@@ -52,9 +52,7 @@ export default function Tree(props: Props) {
   } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
-    false
-  );
+  const [isUsingKeyboardOrSearch, setIsUsingKeyboardOrSearch] = useState(false);
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
@@ -146,7 +144,7 @@ export default function Tree(props: Props) {
         default:
           return;
       }
-      setIsNavigatingWithKeyboard(true);
+      setIsUsingKeyboardOrSearch(true);
     };
 
     // It's important to listen to the ownerDocument to support the browser extension.
@@ -213,33 +211,48 @@ export default function Tree(props: Props) {
   // If we switch the selected element while using the keyboard,
   // start highlighting it in the DOM instead of the last hovered node.
   useEffect(() => {
-    if (isNavigatingWithKeyboard && selectedElementID !== null) {
-      highlightElementInDOM(selectedElementID);
+    if (isUsingKeyboardOrSearch) {
+      if (selectedElementID !== null) {
+        highlightElementInDOM(selectedElementID);
+      } else {
+        bridge.send('clearHighlightedElementInDOM');
+      }
     }
-  }, [isNavigatingWithKeyboard, highlightElementInDOM, selectedElementID]);
+  }, [
+    bridge,
+    isUsingKeyboardOrSearch,
+    highlightElementInDOM,
+    selectedElementID,
+  ]);
 
   // Highlight last hovered element.
   const handleElementMouseEnter = useCallback(
     id => {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
-      if (!isNavigatingWithKeyboard) {
+      if (!isUsingKeyboardOrSearch) {
         highlightElementInDOM(id);
       }
     },
-    [isNavigatingWithKeyboard, highlightElementInDOM]
+    [isUsingKeyboardOrSearch, highlightElementInDOM]
   );
 
   const handleMouseMove = useCallback(() => {
     // We started using the mouse again.
     // This will enable hover styles in individual rows.
-    setIsNavigatingWithKeyboard(false);
+    setIsUsingKeyboardOrSearch(false);
   }, []);
 
   const handleMouseLeave = useCallback(() => {
     bridge.send('clearHighlightedElementInDOM');
   }, [bridge]);
 
+  const handleSearchInteraction = useCallback(() => {
+    // We started navigating using search.
+    // This will disable hover styles and start highlighting DOM elements.
+    setIsUsingKeyboardOrSearch(true);
+  }, []);
+
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
@@ -247,7 +260,7 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
-      isNavigatingWithKeyboard,
+      isUsingKeyboardOrSearch,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
@@ -256,7 +269,7 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
-      isNavigatingWithKeyboard,
+      isUsingKeyboardOrSearch,
       handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
@@ -266,7 +279,11 @@ export default function Tree(props: Props) {
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
-        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
+        {ownerStack.length > 0 ? (
+          <OwnersStack />
+        ) : (
+          <SearchInput onSearchInteraction={handleSearchInteraction} />
+        )}
         <InspectHostNodesToggle />
       </div>
       <div

From ca7eb3c8293665fbff1b1f1fb49778dbb861efef Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Apr 2019 18:14:37 -0700
Subject: [PATCH 370/814] Changed highlight-on-search behavior to use
 TreeContext

---
 src/devtools/views/Components/Element.js     |  4 +-
 src/devtools/views/Components/SearchInput.js | 35 ++++----------
 src/devtools/views/Components/Tree.js        | 48 +++++++++++---------
 3 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 1d3ac200a9c1..6bc9bfeb7efe 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -44,7 +44,7 @@ export default function ElementView({ data, index, style }: Props) {
   const {
     lastScrolledIDRef,
     treeFocused,
-    isUsingKeyboardOrSearch,
+    isNavigatingWithKeyboard,
     onElementMouseEnter,
   } = data;
   const id = element === null ? null : element.id;
@@ -122,7 +122,7 @@ export default function ElementView({ data, index, style }: Props) {
     className = treeFocused
       ? styles.SelectedElement
       : styles.InactiveSelectedElement;
-  } else if (isHovered && !isUsingKeyboardOrSearch) {
+  } else if (isHovered && !isNavigatingWithKeyboard) {
     className = styles.HoveredElement;
   }
 
diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index dc4069e384b4..e609cfa7b214 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -8,12 +8,9 @@ import Icon from '../Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {|
-  onSearchInteraction: () => void,
-|};
+type Props = {||};
 
 export default function SearchInput(props: Props) {
-  const { onSearchInteraction } = props;
   const {
     goToNextSearchResult,
     goToPreviousSearchResult,
@@ -28,17 +25,10 @@ export default function SearchInput(props: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) => {
-      setSearchText(currentTarget.value);
-      onSearchInteraction();
-    },
-    [setSearchText, onSearchInteraction]
+    ({ currentTarget }) => setSearchText(currentTarget.value),
+    [setSearchText]
   );
-
-  const resetSearch = useCallback(() => {
-    setSearchText('');
-    onSearchInteraction();
-  }, [setSearchText, onSearchInteraction]);
+  const resetSearch = useCallback(() => setSearchText(''), [setSearchText]);
 
   const handleKeyDown = useCallback(
     event => {
@@ -46,29 +36,26 @@ export default function SearchInput(props: Props) {
       switch (event.key) {
         case 'ArrowDown':
           selectNextElementInTree();
-          onSearchInteraction();
           event.preventDefault();
           break;
         case 'ArrowUp':
           selectPreviousElementInTree();
-          onSearchInteraction();
           event.preventDefault();
           break;
         default:
           break;
       }
     },
-    [selectNextElementInTree, selectPreviousElementInTree, onSearchInteraction]
+    [selectNextElementInTree, selectPreviousElementInTree]
   );
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
         goToNextSearchResult();
-        onSearchInteraction();
       }
     },
-    [goToNextSearchResult, onSearchInteraction]
+    [goToNextSearchResult]
   );
 
   // Auto-focus search input
@@ -119,10 +106,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={() => {
-          goToPreviousSearchResult();
-          onSearchInteraction();
-        }}
+        onClick={goToPreviousSearchResult}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
@@ -130,10 +114,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={() => {
-          goToNextSearchResult();
-          onSearchInteraction();
-        }}
+        onClick={goToNextSearchResult}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index c7c08518a485..283bd4d66d03 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -27,7 +27,7 @@ export type ItemData = {|
   baseDepth: number,
   numElements: number,
   getElementAtIndex: (index: number) => Element | null,
-  isUsingKeyboardOrSearch: boolean,
+  isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
@@ -41,6 +41,8 @@ export default function Tree(props: Props) {
     getElementAtIndex,
     numElements,
     ownerStack,
+    searchIndex,
+    searchResults,
     selectedElementID,
     selectedElementIndex,
     selectChildElementInTree,
@@ -52,7 +54,9 @@ export default function Tree(props: Props) {
   } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const [isUsingKeyboardOrSearch, setIsUsingKeyboardOrSearch] = useState(false);
+  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
+    false
+  );
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
@@ -144,7 +148,7 @@ export default function Tree(props: Props) {
         default:
           return;
       }
-      setIsUsingKeyboardOrSearch(true);
+      setIsNavigatingWithKeyboard(true);
     };
 
     // It's important to listen to the ownerDocument to support the browser extension.
@@ -210,8 +214,18 @@ export default function Tree(props: Props) {
 
   // If we switch the selected element while using the keyboard,
   // start highlighting it in the DOM instead of the last hovered node.
+  const searchRef = useRef({ searchIndex, searchResults });
   useEffect(() => {
-    if (isUsingKeyboardOrSearch) {
+    let didSelectNewSearchResult = false;
+    if (
+      searchRef.current.searchIndex !== searchIndex ||
+      searchRef.current.searchResults !== searchResults
+    ) {
+      searchRef.current.searchIndex = searchIndex;
+      searchRef.current.searchResults = searchResults;
+      didSelectNewSearchResult = true;
+    }
+    if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
       if (selectedElementID !== null) {
         highlightElementInDOM(selectedElementID);
       } else {
@@ -220,8 +234,10 @@ export default function Tree(props: Props) {
     }
   }, [
     bridge,
-    isUsingKeyboardOrSearch,
+    isNavigatingWithKeyboard,
     highlightElementInDOM,
+    searchIndex,
+    searchResults,
     selectedElementID,
   ]);
 
@@ -230,29 +246,23 @@ export default function Tree(props: Props) {
     id => {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
-      if (!isUsingKeyboardOrSearch) {
+      if (!isNavigatingWithKeyboard) {
         highlightElementInDOM(id);
       }
     },
-    [isUsingKeyboardOrSearch, highlightElementInDOM]
+    [isNavigatingWithKeyboard, highlightElementInDOM]
   );
 
   const handleMouseMove = useCallback(() => {
     // We started using the mouse again.
     // This will enable hover styles in individual rows.
-    setIsUsingKeyboardOrSearch(false);
+    setIsNavigatingWithKeyboard(false);
   }, []);
 
   const handleMouseLeave = useCallback(() => {
     bridge.send('clearHighlightedElementInDOM');
   }, [bridge]);
 
-  const handleSearchInteraction = useCallback(() => {
-    // We started navigating using search.
-    // This will disable hover styles and start highlighting DOM elements.
-    setIsUsingKeyboardOrSearch(true);
-  }, []);
-
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
@@ -260,7 +270,7 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
-      isUsingKeyboardOrSearch,
+      isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
@@ -269,7 +279,7 @@ export default function Tree(props: Props) {
       baseDepth,
       numElements,
       getElementAtIndex,
-      isUsingKeyboardOrSearch,
+      isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
@@ -279,11 +289,7 @@ export default function Tree(props: Props) {
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
-        {ownerStack.length > 0 ? (
-          <OwnersStack />
-        ) : (
-          <SearchInput onSearchInteraction={handleSearchInteraction} />
-        )}
+        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
       </div>
       <div

From 55dcfe25e8472d8f6e8c6f6496dbbced3eeeeaa7 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 16:19:32 +0100
Subject: [PATCH 371/814] Don't reset selected item on search mismatch or exit

---
 src/devtools/views/Components/TreeContext.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 4594c7dfa041..0a10c4c9591d 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -369,16 +369,11 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
       searchIndex = newSearchIndex;
     }
   }
-  if (didRequestSearch) {
-    if (searchIndex === null) {
-      selectedElementIndex = null;
-      selectedElementID = null;
-    } else {
-      selectedElementID = ((searchResults[searchIndex]: any): number);
-      selectedElementIndex = store.getIndexOfElementID(
-        ((selectedElementID: any): number)
-      );
-    }
+  if (didRequestSearch && searchIndex !== null) {
+    selectedElementID = ((searchResults[searchIndex]: any): number);
+    selectedElementIndex = store.getIndexOfElementID(
+      ((selectedElementID: any): number)
+    );
   }
 
   return {

From 6d70028a2678947e14a8f5c007a624b7ce3b5431 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 16:38:34 +0100
Subject: [PATCH 372/814] Bump React Hooks plugin

---
 package.json                                              | 2 +-
 src/devtools/views/Components/Tree.js                     | 2 +-
 src/devtools/views/Profiler/Profiler.js                   | 4 +++-
 .../views/Profiler/ToggleCommitFilterModalButton.js       | 4 +++-
 yarn.lock                                                 | 8 ++++----
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index cdff07f283f4..46e26408884c 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-react-hooks": "^1.2.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-standard": "^3.0.1",
     "events": "^3.0.0",
     "fbjs": "0.5.1",
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 283bd4d66d03..30df78d05bd6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -170,7 +170,7 @@ export default function Tree(props: Props) {
   ]);
 
   // Focus management.
-  const handleBlur = useCallback(() => setTreeFocused(false));
+  const handleBlur = useCallback(() => setTreeFocused(false), []);
   const handleFocus = useCallback(() => {
     setTreeFocused(true);
 
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 1a5e002c8ab2..ed7b2907b0f2 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -117,7 +117,9 @@ function SuspendingProfiler() {
     CommitFilterModalContext
   );
 
-  const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
+  const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false), [
+    setIsFilterModalShowing,
+  ]);
 
   let view = null;
   switch (selectedTabID) {
diff --git a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
index ddb7f300f9b1..88f55298aa0d 100644
--- a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
+++ b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
@@ -8,7 +8,9 @@ import ButtonIcon from '../ButtonIcon';
 export default function ToggleCommitFilterModalButton() {
   const { setIsFilterModalShowing } = useContext(CommitFilterModalContext);
 
-  const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
+  const showFilterModal = useCallback(() => setIsFilterModalShowing(true), [
+    setIsFilterModalShowing,
+  ]);
 
   return (
     <Button onClick={showFilterModal} title="Filter commits by duration">
diff --git a/yarn.lock b/yarn.lock
index 688e568a0496..8da9aedb560e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4400,10 +4400,10 @@ eslint-plugin-promise@^3.7.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
   integrity sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ==
 
-eslint-plugin-react-hooks@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.2.0.tgz#a1c78e792b8d7d3e9c2a2aad28df80b9b5cd1101"
-  integrity sha512-pb/pwyHg0K3Ss/8loSwCGRSXIsvPBHWfzcP/6jeei0SgWBOyXRbcKFpGxolg0xSmph0jQKLyM27B74clbZM/YQ==
+eslint-plugin-react-hooks@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f"
+  integrity sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==
 
 eslint-plugin-react@^7.7.0:
   version "7.12.4"

From 9162b7165ad446cf12cea88eecf94f2787de6e75 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 16:49:10 +0100
Subject: [PATCH 373/814] Prefer to keep the start anchor visible

---
 src/devtools/views/Components/Element.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index bf81291f4a7f..48efeba6410f 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -80,15 +80,17 @@ export default function ElementView({ data, index, style }: Props) {
       // However, even calling scrollIntoView() on their parent node
       // wouldn't guarantee that it will be *fully* brought into view.
       // As a workaround, we'll have two anchor spans, and scroll each into view.
-      if (scrollAnchorStartRef.current !== null) {
-        scrollAnchorStartRef.current.scrollIntoView({
+      if (scrollAnchorEndRef.current !== null) {
+        scrollAnchorEndRef.current.scrollIntoView({
           behavior: 'auto',
           block: 'nearest',
           inline: 'nearest',
         });
       }
-      if (scrollAnchorEndRef.current !== null) {
-        scrollAnchorEndRef.current.scrollIntoView({
+      if (scrollAnchorStartRef.current !== null) {
+        // We scroll the start anchor last because it's
+        // more important for it to be in the view.
+        scrollAnchorStartRef.current.scrollIntoView({
           behavior: 'auto',
           block: 'nearest',
           inline: 'nearest',

From 6d53a2ec100c8d30ddb4ac180ab90a4320144a94 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 18:19:21 +0100
Subject: [PATCH 374/814] Adjust highlighting on window resize

---
 src/devtools/views/Components/Tree.js | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 283bd4d66d03..b65ca15efed4 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -333,23 +333,33 @@ function InnerElementType({ style, ...rest }) {
   // What we can do instead, is passively measure the width of the current rows,
   // and ensure that once we've grown to a new max size, we don't shrink below it.
   // This improves the user experience when scrolling between wide and narrow rows.
-  // We shouldn't retain this width across different conceptual trees though,
-  // so when the user opens the "owners tree" view, we should discard the previous width.
   const divRef = useRef<HTMLDivElement | null>(null);
-  const minWidthRef = useRef<number | null>(null);
-  const minWidth =
-    ownerStack.length > 0 || minWidthRef.current === null
-      ? '100%'
-      : minWidthRef.current;
+  const [minWidth, setMinWidth] = useState(null);
   useEffect(() => {
     if (divRef.current !== null) {
-      minWidthRef.current = Math.max(
-        minWidthRef.current || 0,
-        divRef.current.offsetWidth
-      );
+      const measuredWidth = divRef.current.offsetWidth;
+      setMinWidth(w => Math.max(w || 0, measuredWidth));
     }
   });
 
+  // When the window is resized, forget the specific min width.
+  // This will cause a render with 100% min-width, a measurement
+  // in an effect, and a second render where we know the width.
+  useEffect(() => {
+    const invalidateMinWidth = () => setMinWidth(null);
+    window.addEventListener('resize', invalidateMinWidth);
+    return () => window.removeEventListener('resize', invalidateMinWidth);
+  }, []);
+
+  // We shouldn't retain this width across different conceptual trees though,
+  // so when the user opens the "owners tree" view, we should discard the previous width.
+  const hasOwnerStack = ownerStack.length > 0;
+  const [prevHasOwnerStack, setPrevHasOwnerStack] = useState(hasOwnerStack);
+  if (hasOwnerStack !== prevHasOwnerStack) {
+    setPrevHasOwnerStack(hasOwnerStack);
+    setMinWidth(null);
+  }
+
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
@@ -360,7 +370,7 @@ function InnerElementType({ style, ...rest }) {
       style={{
         ...style,
         display: 'inline-block',
-        minWidth,
+        minWidth: minWidth || '100%',
         width: undefined,
       }}
       ref={divRef}

From ce335b89753a6858f076ac0a606c58f065f0634c Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Sat, 13 Apr 2019 18:55:51 +0100
Subject: [PATCH 375/814] View DOM button opens Elements tab

---
 shells/browser/shared/src/main.js             | 19 +++++++++++++++++++
 src/backend/agent.js                          |  6 ++++++
 .../views/Components/SelectedElement.js       |  3 ++-
 src/devtools/views/Components/Tree.js         |  1 +
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 0ed5fa04d4d5..8f3ad6823d67 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -84,6 +84,9 @@ function createPanelIfReactLoaded() {
             response => bridge.send('screenshotCaptured', response)
           );
         });
+        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+          setBrowserSelectionFromReact();
+        });
 
         // This flag lets us tip the Store off early that we expect to be profiling.
         // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
@@ -162,6 +165,22 @@ function createPanelIfReactLoaded() {
         container._hasInitialHTMLBeenCleared = true;
       }
 
+      function setBrowserSelectionFromReact() {
+        // This is currently only called on demand when you press "view DOM".
+        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+        // we could make this happen automatically when you select another component.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+            'false',
+          (didSelectionChange, error) => {
+            if (error) {
+              console.error(error);
+            }
+          }
+        );
+      }
+
       function setReactSelectionFromBrowser() {
         // When the user chooses a different node in the browser Elements tab,
         // copy it over to the hook object so that we can sync the selection.
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 528c5715fec8..f1f7532e1f2c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -235,12 +235,14 @@ export default class Agent extends EventEmitter {
     displayName,
     hideAfterTimeout,
     id,
+    openNativeElementsPanel,
     rendererID,
     scrollIntoView,
   }: {
     displayName: string,
     hideAfterTimeout: boolean,
     id: number,
+    openNativeElementsPanel: boolean,
     rendererID: number,
     scrollIntoView: boolean,
   }) => {
@@ -261,6 +263,10 @@ export default class Agent extends EventEmitter {
         node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }
       showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout);
+      if (openNativeElementsPanel) {
+        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        this._bridge.send('syncSelectionToNativeElementsPanel');
+      }
     } else {
       hideOverlay();
     }
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 954b13f7455e..92e41538ab6e 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -46,6 +46,7 @@ export default function SelectedElement(_: Props) {
           displayName: element.displayName,
           hideAfterTimeout: true,
           id: selectedElementID,
+          openNativeElementsPanel: true,
           rendererID,
           scrollIntoView: true,
         });
@@ -96,7 +97,7 @@ export default function SelectedElement(_: Props) {
         <Button
           className={styles.IconButton}
           onClick={highlightElement}
-          title="Highlight this element in the page"
+          title="Inspect the matching DOM element"
         >
           <ButtonIcon type="view-dom" />
         </Button>
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 283bd4d66d03..0bb0051744f6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -204,6 +204,7 @@ export default function Tree(props: Props) {
           displayName: element.displayName,
           hideAfterTimeout: false,
           id,
+          openNativeElementsPanel: false,
           rendererID,
           scrollIntoView: false,
         });

From 236f47f0739be5026ef2b94f340f568205b22a82 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Apr 2019 15:32:26 -0700
Subject: [PATCH 376/814] Tweaked .eslintignore and .gitignore

---
 .eslintignore | 1 +
 .gitignore    | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 4b11fc16b1c1..f863d8f44a63 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,6 +3,7 @@ node_modules
 flow-typed
 shells/browser/chrome/build
 shells/browser/firefox/build
+shells/browser/shared/build
 shells/dev/build
 vendor
 
diff --git a/.gitignore b/.gitignore
index d88ef334a01a..85e420fd9f81 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
-/shells/chrome.crx
-/shells/chrome.pem
-/shells/firefox/*.xpi
+/shells/browser/chrome/*.crx
+/shells/browser/chrome/*.pem
+/shells/browser/firefox/*.xpi
+/shells/browser/firefox/*.pem
+/shells/browser/shared/build
 build
 node_modules
 npm-debug.log

From b2cf896e8c758fa6239b1a15ffd4b46a8cc5eda8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Apr 2019 15:33:10 -0700
Subject: [PATCH 377/814] Fixed misplaced padding in Tree

---
 src/devtools/views/Components/Tree.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 53b576c4cc47..8f58e0f82f95 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--color-border);
-  padding: 0.25rem;
 }
 
 .SearchInput {
@@ -19,6 +18,7 @@
   width: 100%;
   overflow: auto;
   flex: 1 0 auto;
+  padding: 0.25rem;
 }
 .AutoSizerWrapper:focus {
   outline: none;

From 518f3d75f8eba06a44dc2e208c49f569b2d2cb3d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 13 Apr 2019 15:38:56 -0700
Subject: [PATCH 378/814] Tweaked an inline comment.

---
 src/devtools/views/Components/Element.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 48efeba6410f..da51484fbeeb 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -77,7 +77,7 @@ export default function ElementView({ data, index, style }: Props) {
 
       // We want to bring the whole <Component> name into view,
       // including the expansion toggle and the "=== $r" hint.
-      // However, even calling scrollIntoView() on their parent node
+      // However, even calling scrollIntoView() on a wrapper parent node (e.g. <span>)
       // wouldn't guarantee that it will be *fully* brought into view.
       // As a workaround, we'll have two anchor spans, and scroll each into view.
       if (scrollAnchorEndRef.current !== null) {

From 00f6466ec1a7f7dbcc2aef570d55e6ace113ebcf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Apr 2019 15:49:06 -0700
Subject: [PATCH 379/814] Temporarily disabled hooks lint failure for Tree
 useEffect

---
 src/devtools/views/Components/Tree.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 7d4a1b2daea4..bbfba9a76c8e 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -336,6 +336,8 @@ function InnerElementType({ style, ...rest }) {
   // This improves the user experience when scrolling between wide and narrow rows.
   const divRef = useRef<HTMLDivElement | null>(null);
   const [minWidth, setMinWidth] = useState(null);
+  // TODO This is a valid warning, but we're ignoring it for the time being.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
       const measuredWidth = divRef.current.offsetWidth;

From 7f6fdfea9560a781a19a2543e10b98e7de6943e6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Apr 2019 18:25:56 -0700
Subject: [PATCH 380/814] Add package commands for creating dev builds for
 easier debugging

---
 package.json                   | 10 +++++++---
 shells/browser/shared/build.js |  8 ++------
 yarn.lock                      | 10 +++++++++-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 46e26408884c..790e2d2fefb2 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,12 @@
     ]
   },
   "scripts": {
-    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
-    "build:extension:chrome": "node ./shells/browser/chrome/build",
-    "build:extension:firefox": "node ./shells/browser/firefox/build",
+    "build:extension": "cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox",
+    "build:extension:dev": "cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox",
+    "build:extension:chrome": "cross-env NODE_ENV=production node ./shells/browser/chrome/build",
+    "build:extension:chrome:dev": "cross-env NODE_ENV=development node ./shells/browser/chrome/build",
+    "build:extension:firefox": "cross-env NODE_ENV=production node ./shells/browser/firefox/build",
+    "build:extension:firefox:dev": "cross-env NODE_ENV=development node ./shells/browser/firefox/build",
     "build:standalone": "cd packages/react-devtools-core && yarn run build",
     "deploy": "yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox",
     "deploy:demo": "cd shells/dev/ && now deploy && now alias react-devtools-experimental",
@@ -83,6 +86,7 @@
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
+    "cross-env": "^5.2.0",
     "crx": "git+https://github.com/oncletom/crx#ef150e8",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 6a58205ef026..fb1037f7a84b 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -34,9 +34,7 @@ const build = async (tempPath, manifestPath, manifestVersion) => {
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: Object.assign({}, process.env, {
-        NODE_ENV: 'production',
-      }),
+      env: process.env,
       stdio: 'inherit',
     }
   );
@@ -44,9 +42,7 @@ const build = async (tempPath, manifestPath, manifestVersion) => {
     `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: Object.assign({}, process.env, {
-        NODE_ENV: 'production',
-      }),
+      env: process.env,
       stdio: 'inherit',
     }
   );
diff --git a/yarn.lock b/yarn.lock
index 8da9aedb560e..63269e7badd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3470,6 +3470,14 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+cross-env@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
+  integrity sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==
+  dependencies:
+    cross-spawn "^6.0.5"
+    is-windows "^1.0.0"
+
 cross-spawn-async@^2.2.2:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
@@ -6349,7 +6357,7 @@ is-utf8@^0.2.0, is-utf8@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-windows@^1.0.1, is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==

From b76372c93dcfb3646e8b231fccce4cb763c54db3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Apr 2019 18:29:39 -0700
Subject: [PATCH 381/814] Fixed an edge case profiling bug where the number of
 commits was wrong

---
 src/devtools/store.js | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 38d33f2a6a7f..63d87f2544dc 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -410,24 +410,19 @@ export default class Store extends EventEmitter {
   startProfiling(): void {
     this._bridge.send('startProfiling');
 
-    // Invalidate suspense cache if profiling data is being (re-)recorded.
-    // Note that we clear now because any existing data is "stale".
-    this._profilingCache.invalidate();
-
-    this._isProfiling = false;
-    this.emit('isProfiling');
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
   stopProfiling(): void {
     this._bridge.send('stopProfiling');
 
-    // Invalidate suspense cache if profiling data is being (re-)recorded.
-    // Note that we clear again, in case any views read from the cache while profiling.
-    // (That would have resolved a now-stale value without any profiling data.)
-    this._profilingCache.invalidate();
-
-    this._isProfiling = false;
-    this.emit('isProfiling');
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
@@ -812,6 +807,12 @@ export default class Store extends EventEmitter {
 
     if (this._isProfiling !== isProfiling) {
       this._isProfiling = isProfiling;
+
+      // Invalidate suspense cache if profiling data is being (re-)recorded.
+      // Note that we clear again, in case any views read from the cache while profiling.
+      // (That would have resolved a now-stale value without any profiling data.)
+      this._profilingCache.invalidate();
+
       this.emit('isProfiling');
     }
   };

From f569d27f86e19f11a9fca809198c0fb70397dddb Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 15 Apr 2019 01:45:52 +0100
Subject: [PATCH 382/814] Add a stress test for tree traversal

---
 .../__snapshots__/store-test.js.snap          |  21 +++
 src/__tests__/store-test.js                   | 174 +++++++++++++++++-
 2 files changed, 194 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 102a3285585e..cd0df483e46c 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -25,6 +25,27 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
         <Child>
 `;
 
+exports[`Store should handle a stress test with different tree operations: 1: abcde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+      <C key="c">
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`Store should handle a stress test with different tree operations: 2: abxde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+    ▾ <C key="c">
+        <X>
+      <D key="d">
+      <E key="e">
+`;
+
 exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index bdfa5e3d9aba..1d293f0213fe 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -5,12 +5,12 @@ describe('Store', () => {
   let ReactDOM;
   let TestUtils;
   let store;
+  let print;
 
   const act = (callback: Function) => {
     TestUtils.act(() => {
       callback();
     });
-
     jest.runAllTimers(); // Flush Bridge operations
   };
 
@@ -20,6 +20,8 @@ describe('Store', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     TestUtils = require('react-dom/test-utils');
+
+    print = require('./storeSerializer').print;
   });
 
   it('should support mount and update operations', () => {
@@ -163,4 +165,174 @@ describe('Store', () => {
     act(() => store.toggleIsCollapsed(grandparentID, false));
     expect(store).toMatchSnapshot('6: expand Grandparent');
   });
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  it('should handle a stress test with different tree operations', () => {
+    let setShowX;
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => {
+      // We'll be manually flipping this component back and forth in the test.
+      // We only do this for a single node in order to verify that DevTools
+      // can handle a subtree switching alternates while other subtrees are memoized.
+      let [showX, _setShowX] = React.useState(false);
+      setShowX = _setShowX;
+      return showX ? <X /> : 'c';
+    };
+    const D = () => 'd';
+    const E = () => 'e';
+    const X = () => 'x';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    function Parent({ children }) {
+      return children;
+    }
+
+    // 1. Render a normal version of [a, b, c, d, e].
+    let container = document.createElement('div');
+    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
+    expect(store).toMatchSnapshot('1: abcde');
+    expect(container.textContent).toMatch('abcde');
+    const snapshotForABCDE = print(store);
+
+    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
+    // This is how we'll test an update to a single component.
+    act(() => {
+      setShowX(true);
+    });
+    expect(store).toMatchSnapshot('2: abxde');
+    expect(container.textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(container.textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+
+    // Now comes the interesting part.
+    // All of these cases are equivalent to [a, b, c, d, e] in output.
+    // We'll verify that DevTools produces the same snapshots for them.
+    // These cases are picked so that rendering them sequentially in the same
+    // container results in a combination of mounts, updates, unmounts, and reorders.
+    // prettier-ignore
+    let cases = [
+      [a, b, c, d, e],
+      [[a], b, c, d, e],
+      [[a, b], c, d, e],
+      [[a, b], c, [d, e]],
+      [[a, b], c, [d, '', e]],
+      [[a], b, c, d, [e]],
+      [a, b, [[c]], d, e],
+      [[a, ''], [b], [c], [d], [e]],
+      [a, b, [c, [d, ['', e]]]],
+      [a, b, c, d, e],
+      [<div key="0">{a}</div>, b, c, d, e],
+      [<div key="0">{a}{b}</div>, c, d, e],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
+      [<span key="0">{a}</span>, b, c, d, [e]],
+      [a, b, <span key="0"><span>{c}</span></span>, d, e],
+      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
+      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
+      [a, [[]], b, c, [d, [[]], e]],
+      [[[a, b, c, d], e]],
+      [a, b, c, d, e]
+    ];
+
+    // 5. Test fresh mount for each case.
+    for (let i = 0; i < cases.length; i++) {
+      // Ensure fresh mount.
+      container = document.createElement('div');
+
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    container = document.createElement('div');
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+
+    // 7. Same as the previous step, but for Concurrent Mode.
+    container = document.createElement('div');
+    let root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+  });
 });

From 255385d25545796023a049df65461abdd49a61be Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 15 Apr 2019 14:41:58 +0100
Subject: [PATCH 383/814] Use LRU for encoded strings

---
 src/utils.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index 9c2c9189b97a..f085f550d5c1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,8 +1,14 @@
 // @flow
 
+const LRU = require('lru-cache');
+
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
+// On large trees, encoding takes significant time.
+// Try to reuse the already encoded strings.
+let encodedStringCache = new LRU({ max: 1000 });
+
 export function getDisplayName(
   type: Function,
   fallbackName: string = 'Unknown'
@@ -56,8 +62,15 @@ export function utfDecodeString(array: Uint32Array): string {
 }
 
 export function utfEncodeString(string: string): Uint32Array {
+  let cached = encodedStringCache.get(string);
+  if (cached !== undefined) {
+    return cached;
+  }
+
   // $FlowFixMe Flow's Uint32Array.from's type definition is wrong; first argument of mapFn will be string
-  return Uint32Array.from(string, toCodePoint);
+  const encoded = Uint32Array.from(string, toCodePoint);
+  encodedStringCache.set(string, encoded);
+  return encoded;
 }
 
 function toCodePoint(string: string) {

From 947e3c2c049c006da9ed814ded04583edfe4ff3d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 15 Apr 2019 15:39:25 +0100
Subject: [PATCH 384/814] Add production mode to dev shell

---
 package.json                 | 1 +
 shells/dev/webpack.config.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 790e2d2fefb2..54cbba4e125e 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
+    "start:prod": "cross-env NODE_ENV=production npm start",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index e84144a08cb5..68b4404656bd 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -9,7 +9,7 @@ const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
-  mode: 'development',
+  mode: __DEV__ ? 'development' : 'production',
   devtool: false,
   entry: {
     app: './app/index.js',

From 6b9b80faace37046e1abf10f4a41f4cfa654c5ba Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 15 Apr 2019 16:27:19 +0100
Subject: [PATCH 385/814] Don't materialize typed array until the transfer

---
 src/backend/renderer.js | 152 ++++++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 68 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3c5729c73f07..7ce924448fd6 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -577,22 +577,34 @@ export function attach(
     );
   }
 
-  let pendingOperations: Uint32Array = new Uint32Array(0);
-  let pendingOperationsQueue: Array<Uint32Array> | null = [];
-
-  function addOperation(
-    newAction: Uint32Array,
-    addToStartOfQueue: boolean = false
-  ): void {
-    const oldActions = pendingOperations;
-    pendingOperations = new Uint32Array(oldActions.length + newAction.length);
+  let pendingOperations: Array<number> = [];
+  let pendingOperationsQueue: Array<Array<number>> | null = [];
+
+  let nextOperation: Array<number> = [];
+  function beginNextOperation(size: number): void {
+    nextOperation.length = size;
+  }
+  function endNextOperation(addToStartOfQueue: boolean): void {
+    if (__DEV__) {
+      for (let i = 0; i < nextOperation.length; i++) {
+        if (!Number.isInteger(nextOperation[i])) {
+          console.error(
+            'endNextOperation() was called but some values are not integers.',
+            nextOperation
+          );
+        }
+      }
+    }
+
     if (addToStartOfQueue) {
-      pendingOperations.set(newAction);
-      pendingOperations.set(oldActions, newAction.length);
+      pendingOperations.splice.apply(
+        pendingOperations,
+        [0, 0].concat(nextOperation)
+      );
     } else {
-      pendingOperations.set(oldActions);
-      pendingOperations.set(newAction, oldActions.length);
+      pendingOperations.push.apply(pendingOperations, nextOperation);
     }
+    nextOperation.length = 0;
   }
 
   function flushPendingEvents(root: Object): void {
@@ -608,10 +620,10 @@ export function attach(
     // Identify which renderer this update is coming from.
     // This enables roots to be mapped to renderers,
     // Which in turn enables fiber props, states, and hooks to be inspected.
-    const idArray = new Uint32Array(2);
-    idArray[0] = rendererID;
-    idArray[1] = getFiberID(getPrimaryFiber(root.current));
-    addOperation(idArray, true);
+    beginNextOperation(2);
+    nextOperation[0] = rendererID;
+    nextOperation[1] = getFiberID(getPrimaryFiber(root.current));
+    endNextOperation(true);
 
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
@@ -623,10 +635,10 @@ export function attach(
       pendingOperationsQueue.push(pendingOperations);
     } else {
       // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', pendingOperations);
+      hook.emit('operations', Uint32Array.from(pendingOperations));
     }
 
-    pendingOperations = new Uint32Array(0);
+    pendingOperations = [];
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
@@ -642,13 +654,13 @@ export function attach(
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
 
     if (isRoot) {
-      const operation = new Uint32Array(5);
-      operation[0] = TREE_OPERATION_ADD;
-      operation[1] = id;
-      operation[2] = ElementTypeRoot;
-      operation[3] = isProfilingSupported ? 1 : 0;
-      operation[4] = hasOwnerMetadata ? 1 : 0;
-      addOperation(operation);
+      beginNextOperation(5);
+      nextOperation[0] = TREE_OPERATION_ADD;
+      nextOperation[1] = id;
+      nextOperation[2] = ElementTypeRoot;
+      nextOperation[3] = isProfilingSupported ? 1 : 0;
+      nextOperation[4] = hasOwnerMetadata ? 1 : 0;
+      endNextOperation(false);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
       const { _debugOwner } = fiber;
@@ -675,23 +687,25 @@ export function attach(
         displayName === null ? 0 : encodedDisplayName.length;
       const encodedKeySize = key === null ? 0 : encodedKey.length;
 
-      const operation = new Uint32Array(
-        7 + encodedDisplayNameSize + encodedKeySize
-      );
-      operation[0] = TREE_OPERATION_ADD;
-      operation[1] = id;
-      operation[2] = type;
-      operation[3] = parentID;
-      operation[4] = ownerID;
-      operation[5] = encodedDisplayNameSize;
+      beginNextOperation(7 + encodedDisplayNameSize + encodedKeySize);
+      nextOperation[0] = TREE_OPERATION_ADD;
+      nextOperation[1] = id;
+      nextOperation[2] = type;
+      nextOperation[3] = parentID;
+      nextOperation[4] = ownerID;
+      nextOperation[5] = encodedDisplayNameSize;
       if (displayName !== null) {
-        operation.set(encodedDisplayName, 6);
+        for (let i = 0; i < encodedDisplayName.length; i++) {
+          nextOperation[6 + i] = encodedDisplayName[i];
+        }
       }
-      operation[6 + encodedDisplayNameSize] = encodedKeySize;
+      nextOperation[6 + encodedDisplayNameSize] = encodedKeySize;
       if (key !== null) {
-        operation.set(encodedKey, 6 + encodedDisplayNameSize + 1);
+        for (let i = 0; i < encodedKey.length; i++) {
+          nextOperation[6 + encodedDisplayNameSize + 1 + i] = encodedKey[i];
+        }
       }
-      addOperation(operation);
+      endNextOperation(false);
     }
 
     if (isProfiling) {
@@ -699,11 +713,11 @@ export function attach(
       // So we have to convert them from milliseconds to microseconds so we can send them as ints.
       const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
 
-      const operation = new Uint32Array(3);
-      operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-      operation[1] = id;
-      operation[2] = treeBaseDuration;
-      addOperation(operation);
+      beginNextOperation(3);
+      nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+      nextOperation[1] = id;
+      nextOperation[2] = treeBaseDuration;
+      endNextOperation(false);
 
       const { actualDuration } = fiber;
       if (actualDuration > 0) {
@@ -733,19 +747,19 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      const operation = new Uint32Array(2);
-      operation[0] = TREE_OPERATION_REMOVE;
-      operation[1] = id;
-      addOperation(operation);
+      beginNextOperation(2);
+      nextOperation[0] = TREE_OPERATION_REMOVE;
+      nextOperation[1] = id;
+      endNextOperation(false);
     } else if (!shouldFilterFiber(fiber)) {
       // Non-root fibers are deleted during the commit phase.
       // They are deleted in the child-first order. However
       // DevTools currently expects deletions to be parent-first.
       // This is why we unshift deletions rather tha
-      const operation = new Uint32Array(2);
-      operation[0] = TREE_OPERATION_REMOVE;
-      operation[1] = id;
-      addOperation(operation, true);
+      beginNextOperation(2);
+      nextOperation[0] = TREE_OPERATION_REMOVE;
+      nextOperation[1] = id;
+      endNextOperation(true);
     }
     fiberToIDMap.delete(primaryFiber);
     idToFiberMap.delete(id);
@@ -761,10 +775,10 @@ export function attach(
   function recordRecursiveRemoveChildren(fiber) {
     const primaryFiber = getPrimaryFiber(fiber);
     const id = getFiberID(primaryFiber);
-    const operation = new Uint32Array(2);
-    operation[0] = TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN;
-    operation[1] = id;
-    addOperation(operation, false);
+    beginNextOperation(2);
+    nextOperation[0] = TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN;
+    nextOperation[1] = id;
+    endNextOperation(false);
   }
 
   function mountFiberRecursively(
@@ -832,11 +846,11 @@ export function attach(
           // So we have to convert them from milliseconds to microseconds so we can send them as ints.
           const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
 
-          const operation = new Uint32Array(3);
-          operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-          operation[1] = getFiberID(getPrimaryFiber(fiber));
-          operation[2] = treeBaseDuration;
-          addOperation(operation);
+          beginNextOperation(3);
+          nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+          nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
+          nextOperation[2] = treeBaseDuration;
+          endNextOperation(false);
         }
 
         if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
@@ -868,12 +882,14 @@ export function attach(
       }
 
       const numChildren = nextChildren.length;
-      const operation = new Uint32Array(3 + numChildren);
-      operation[0] = TREE_OPERATION_RESET_CHILDREN;
-      operation[1] = getFiberID(getPrimaryFiber(fiber));
-      operation[2] = numChildren;
-      operation.set(nextChildren, 3);
-      addOperation(operation);
+      beginNextOperation(3 + numChildren);
+      nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
+      nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
+      nextOperation[2] = numChildren;
+      for (let i = 0; i < nextChildren.length; i++) {
+        nextOperation[3 + i] = nextChildren[i];
+      }
+      endNextOperation(false);
     }
   }
 
@@ -1029,7 +1045,7 @@ export function attach(
       // We may have already queued up some operations before the frontend connected
       // If so, let the frontend know about them.
       localPendingOperationsQueue.forEach(pendingOperations => {
-        hook.emit('operations', pendingOperations);
+        hook.emit('operations', Uint32Array.from(pendingOperations));
       });
     } else {
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.

From 8c974ae4329b0060c4238489966f64567b73c931 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 15 Apr 2019 09:43:52 -0700
Subject: [PATCH 386/814] Flow and lint fix

---
 .eslintrc                   | 1 +
 src/__tests__/store-test.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.eslintrc b/.eslintrc
index 0db22495291b..5065c9aae871 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,7 @@
   "plugins": ["react-hooks"],
   "rules": {
     "jsx-a11y/anchor-has-content": "off",
+    "no-loop-func": "off",
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error"
   },
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 1d293f0213fe..3480b0662263 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -310,6 +310,7 @@ describe('Store', () => {
 
     // 7. Same as the previous step, but for Concurrent Mode.
     container = document.createElement('div');
+    // $FlowFixMe
     let root = ReactDOM.unstable_createRoot(container);
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.

From d89f79d6e6ce7b8eaada9d8596e594250651cb2f Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 00:14:49 +0100
Subject: [PATCH 387/814] Add Suspense stress test

---
 .../__snapshots__/store-test.js.snap          | 115 ++++++
 src/__tests__/setupTests.js                   |   1 +
 src/__tests__/store-test.js                   | 340 ++++++++++++++++++
 3 files changed, 456 insertions(+)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index cd0df483e46c..cf299a8c5e9d 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -25,6 +25,121 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
         <Child>
 `;
 
+exports[`Store should handle a stress test for Suspense 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`Store should handle a stress test for Suspense 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
 exports[`Store should handle a stress test with different tree operations: 1: abcde 1`] = `
 [root]
   ▾ <Parent>
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index c7cdaa0b8e90..fefe83b25875 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -33,6 +33,7 @@ env.beforeEach(() => {
 
   initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
 
+  global.bridge = bridge;
   global.store = new Store(bridge);
 });
 env.afterEach(() => {
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 3480b0662263..9c64c93adb0e 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -4,6 +4,7 @@ describe('Store', () => {
   let React;
   let ReactDOM;
   let TestUtils;
+  // let bridge;
   let store;
   let print;
 
@@ -15,6 +16,7 @@ describe('Store', () => {
   };
 
   beforeEach(() => {
+    // bridge = global.bridge;
     store = global.store;
 
     React = require('react');
@@ -336,4 +338,342 @@ describe('Store', () => {
     act(() => root.unmount());
     expect(print(store)).toBe('');
   });
+
+  it('should handle a stress test for Suspense', async () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    // const x = <X key="x" />;
+    // const y = <Y key="y" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      expect(print(store)).toEqual(snapshots[i]);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // TODO: fix the bugs
+    // // 4. Verify we can update from each step to each step in fallback mode.
+    // for (let i = 0; i < steps.length; i++) {
+    //   for (let j = 0; j < steps.length; j++) {
+    //     // Always start with a fresh container and steps[i].
+    //     container = document.createElement('div');
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[i]}>
+    //           <Z />
+    //           <Never />
+    //           <Z />
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     expect(print(store)).toEqual(snapshots[i]);
+    //     // Re-render with steps[j].
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[j]}>
+    //           <Z />
+    //           <Never />
+    //           <Z />
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     // Verify the successful transition to steps[j].
+    //     expect(print(store)).toEqual(snapshots[j]);
+    //     // Clean up after every iteration.
+    //     act(() => ReactDOM.unmountComponentAtNode(container));
+    //     expect(print(store)).toBe('');
+    //   }
+    // }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // TODO: fix the bugs
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    // for (let i = 0; i < steps.length; i++) {
+    //   for (let j = 0; j < steps.length; j++) {
+    //     // Always start with a fresh container and steps[i].
+    //     container = document.createElement('div');
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[i]}>
+    //           <Z />
+    //           <Never />
+    //           <Z />
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     expect(print(store)).toEqual(snapshots[i]);
+    //     // Re-render with steps[j].
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={z}>
+    //           {steps[j]}
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     // Verify the successful transition to steps[j].
+    //     expect(print(store)).toEqual(snapshots[j]);
+    //     // Clean up after every iteration.
+    //     act(() => ReactDOM.unmountComponentAtNode(container));
+    //     expect(print(store)).toBe('');
+    //   }
+    // }
+
+    // TODO: fix the bugs
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    // for (let i = 0; i < steps.length; i++) {
+    //   for (let j = 0; j < steps.length; j++) {
+    //     // Always start with a fresh container and steps[i].
+    //     container = document.createElement('div');
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[j]}>
+    //           {steps[i]}
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+
+    //     // We get ID from the index in the tree above:
+    //     // Root, X, Suspense, ...
+    //     //          ^ (index is 2)
+    //     const suspenseID = store.getElementIDAtIndex(2);
+
+    //     // Force fallback.
+    //     expect(print(store)).toEqual(snapshots[i]);
+    //     act(() => {
+    //       const suspenseID = store.getElementIDAtIndex(2);
+    //       bridge.send('overrideSuspense', {
+    //         id: suspenseID,
+    //         rendererID: store.getRendererIDForElement(suspenseID),
+    //         forceFallback: true
+    //       });
+    //     })
+    //     expect(print(store)).toEqual(snapshots[j]);
+
+    //     // Stop forcing fallback.
+    //     act(() => {
+    //       bridge.send('overrideSuspense', {
+    //         id: suspenseID,
+    //         rendererID: store.getRendererIDForElement(suspenseID),
+    //         forceFallback: false
+    //       });
+    //     })
+    //     expect(print(store)).toEqual(snapshots[i]);
+
+    //     // Trigger actual fallback.
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[j]}>
+    //           <Z />
+    //           <Never />
+    //           <Z />
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     expect(print(store)).toEqual(snapshots[j]);
+
+    //     // Force fallback while we're in fallback mode.
+    //     act(() => {
+    //       bridge.send('overrideSuspense', {
+    //         id: suspenseID,
+    //         rendererID: store.getRendererIDForElement(suspenseID),
+    //         forceFallback: true
+    //       });
+    //     })
+    //     // Keep seeing fallback content.
+    //     expect(print(store)).toEqual(snapshots[j]);
+
+    //     // Switch to primary mode.
+    //     act(() => ReactDOM.render(
+    //       <Root>
+    //         <X />
+    //         <React.Suspense fallback={steps[j]}>
+    //           {steps[i]}
+    //         </React.Suspense>
+    //         <Y />
+    //       </Root>,
+    //       container
+    //     ));
+    //     // Fallback is still forced though.
+    //     expect(print(store)).toEqual(snapshots[j]);
+
+    //     // Stop forcing fallback. This reverts to primary content.
+    //     act(() => {
+    //       bridge.send('overrideSuspense', {
+    //         id: suspenseID,
+    //         rendererID: store.getRendererIDForElement(suspenseID),
+    //         forceFallback: false
+    //       });
+    //     })
+    //     // Now we see primary content.
+    //     expect(print(store)).toEqual(snapshots[i]);
+
+    //     // Clean up after every iteration.
+    //     act(() => ReactDOM.unmountComponentAtNode(container));
+    //     expect(print(store)).toBe('');
+    //   }
+    // }
+
+    // TODO:
+    // Test Concurrent Mode
+  });
 });

From b081ffc518240ad39703c9e128cdded368991185 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 15:11:31 +0100
Subject: [PATCH 388/814] Add stress test for reordering

---
 .../__snapshots__/store-test.js.snap          | 102 ++++++++++++++++++
 src/__tests__/store-test.js                   | 102 +++++++++++++++++-
 2 files changed, 203 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index cf299a8c5e9d..97bd08f7ffca 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -161,6 +161,108 @@ exports[`Store should handle a stress test with different tree operations: 2: ab
       <E key="e">
 `;
 
+exports[`Store should handle stress test with reordering 1`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`Store should handle stress test with reordering 2`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`Store should handle stress test with reordering 3`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`Store should handle stress test with reordering 4`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`Store should handle stress test with reordering 5`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`Store should handle stress test with reordering 6`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`Store should handle stress test with reordering 7`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`Store should handle stress test with reordering 8`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`Store should handle stress test with reordering 9`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`Store should handle stress test with reordering 10`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`Store should handle stress test with reordering 11`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <B key="b">
+`;
+
+exports[`Store should handle stress test with reordering 12`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <A key="a">
+`;
+
+exports[`Store should handle stress test with reordering 13`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <C key="c">
+`;
+
+exports[`Store should handle stress test with reordering 14`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <B key="b">
+`;
+
+exports[`Store should handle stress test with reordering 15`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <C key="c">
+`;
+
+exports[`Store should handle stress test with reordering 16`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <A key="a">
+`;
+
 exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 9c64c93adb0e..54b5761f29ea 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -339,6 +339,106 @@ describe('Store', () => {
     expect(print(store)).toBe('');
   });
 
+  it('should handle stress test with reordering', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const D = () => 'd';
+    const E = () => 'e';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    // prettier-ignore
+    let steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify that we can update from every step to every other step and back.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 3. Same test as above, but this time we wrap children in a host component.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
   it('should handle a stress test for Suspense', async () => {
     const A = () => 'a';
     const B = () => 'b';
@@ -676,4 +776,4 @@ describe('Store', () => {
     // TODO:
     // Test Concurrent Mode
   });
-});
+});
\ No newline at end of file

From f4c3008cf539d5cec71d3a21e1dec6627ec628a3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:08:07 +0100
Subject: [PATCH 389/814] Refactor: split recordUpdate() into profiling and
 reorder

This doesn't change the actual algorithm but splits unrelated parts.
---
 src/backend/renderer.js | 101 ++++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7ce924448fd6..9fd0083f56e3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -828,69 +828,62 @@ export function attach(
     }
   }
 
-  function maybeRecordUpdate(fiber: Fiber, hasChildOrderChanged: boolean) {
-    if (__DEBUG__) {
-      debug('maybeRecordUpdate()', fiber);
-    }
-
-    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
-    if (isProfilingSupported) {
-      const id = getFiberID(getPrimaryFiber(fiber));
-      const { actualDuration, treeBaseDuration } = fiber;
+  function recordTreeDuration(fiber: Fiber) {
+    const id = getFiberID(getPrimaryFiber(fiber));
+    const { actualDuration, treeBaseDuration } = fiber;
 
-      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
 
-      if (isProfiling) {
-        if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
-          // Tree base duration updates are included in the operations typed array.
-          // So we have to convert them from milliseconds to microseconds so we can send them as ints.
-          const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
-
-          beginNextOperation(3);
-          nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-          nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
-          nextOperation[2] = treeBaseDuration;
-          endNextOperation(false);
-        }
+    if (isProfiling) {
+      if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
+        // Tree base duration updates are included in the operations typed array.
+        // So we have to convert them from milliseconds to microseconds so we can send them as ints.
+        const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
+
+        beginNextOperation(3);
+        nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
+        nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
+        nextOperation[2] = treeBaseDuration;
+        endNextOperation(false);
+      }
 
-        if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
-          if (actualDuration > 0) {
-            // If profiling is active, store durations for elements that were rendered during the commit.
-            const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-            metadata.actualDurations.push(id, actualDuration);
-            metadata.maxActualDuration = Math.max(
-              metadata.maxActualDuration,
-              actualDuration
-            );
-          }
+      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
+        if (actualDuration > 0) {
+          // If profiling is active, store durations for elements that were rendered during the commit.
+          const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
+          metadata.actualDurations.push(id, actualDuration);
+          metadata.maxActualDuration = Math.max(
+            metadata.maxActualDuration,
+            actualDuration
+          );
         }
       }
     }
+  }
 
+  function recordChildOrderChange(fiber: Fiber) {
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
-    if (hasChildOrderChanged) {
-      const nextChildren: Array<number> = [];
+    const nextChildren: Array<number> = [];
 
-      // This is a naive implimentation that shallowly recurses children.
-      // We might want to revisit this if it proves to be too inefficient.
-      let child = fiber.child;
-      while (child !== null) {
-        findReorderedChildrenRecursively(child, nextChildren);
-        child = child.sibling;
-      }
+    // This is a naive implimentation that shallowly recurses children.
+    // We might want to revisit this if it proves to be too inefficient.
+    let child = fiber.child;
+    while (child !== null) {
+      findReorderedChildrenRecursively(child, nextChildren);
+      child = child.sibling;
+    }
 
-      const numChildren = nextChildren.length;
-      beginNextOperation(3 + numChildren);
-      nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
-      nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
-      nextOperation[2] = numChildren;
-      for (let i = 0; i < nextChildren.length; i++) {
-        nextOperation[3 + i] = nextChildren[i];
-      }
-      endNextOperation(false);
+    const numChildren = nextChildren.length;
+    beginNextOperation(3 + numChildren);
+    nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
+    nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
+    nextOperation[2] = numChildren;
+    for (let i = 0; i < nextChildren.length; i++) {
+      nextOperation[3 + i] = nextChildren[i];
     }
+    endNextOperation(false);
   }
 
   function findReorderedChildrenRecursively(
@@ -1025,7 +1018,13 @@ export function attach(
     }
 
     if (shouldIncludeInTree) {
-      maybeRecordUpdate(nextFiber, hasChildOrderChanged);
+      const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');
+      if (isProfilingSupported) {
+        recordTreeDuration(nextFiber);
+      }
+      if (hasChildOrderChanged) {
+        recordChildOrderChange(nextFiber);
+      }
     }
   }
 

From 57e8513a300ea5b594d1bff8e659926eff2be409 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:17:31 +0100
Subject: [PATCH 390/814] Refactor: remove early returns from
 updateFiberRecursively

This doesn't change any logic, just the shape of the control flow.
I want to unify some branches at the end, so it's easier if there are no early returns.
---
 src/backend/renderer.js | 171 ++++++++++++++++++----------------------
 1 file changed, 78 insertions(+), 93 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9fd0083f56e3..fb2bfab4edbf 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -909,7 +909,9 @@ export function attach(
     if (__DEBUG__) {
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
-
+    const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
+    const isSuspense = nextFiber.tag === SuspenseComponent;
+    let hasChildOrderChanged = false;
     // The behavior of timed-out Suspense trees is unique.
     // Rather than unmount the timed out content (and possibly lose important state),
     // React re-parents this content within a hidden Fragment while the fallback is showing.
@@ -917,106 +919,89 @@ export function attach(
     // It might even result in a bad user experience for e.g. node selection in the Elements panel.
     // The easiest fix is to strip out the intermediate Fragment fibers,
     // so the Elements panel and Profiler don't need to special case them.
-    if (nextFiber.tag === SuspenseComponent) {
-      // Suspense components only have a non-null memoizedState if they're timed-out.
-      const prevDidTimeout = prevFiber.memoizedState !== null;
-      const nextDidTimeOut = nextFiber.memoizedState !== null;
-
-      // The logic below is inspired by the codepaths in updateSuspenseComponent()
-      // inside ReactFiberBeginWork in the React source code.
-      if (prevDidTimeout) {
-        if (nextDidTimeOut) {
-          // Fallback -> Fallback:
-          // 1. Reconcile fallback set.
-          const nextFallbackChildSet = nextFiber.child.sibling;
-          // Note: We can't use nextFiber.child.sibling.alternate
-          // because the set is special and alternate may not exist.
-          const prevFallbackChildSet = prevFiber.child.sibling;
-          updateFiberRecursively(
-            nextFallbackChildSet,
-            prevFallbackChildSet,
-            nextFiber
-          );
-          return;
-        } else {
-          // Fallback -> Primary:
-          // 1. Unmount fallback set
-          // Note: don't emulate fallback unmount because React actually did it.
-          // 2. Mount primary set
-          const nextPrimaryChildSet = nextFiber.child;
-          mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
-          return;
-        }
-      } else {
-        if (nextDidTimeOut) {
-          // Primary -> Fallback:
-          // 1. Hide primary set
-          // This is not a real unmount, so it won't get reported by React.
-          // By this point it's *too late* to find the previous primary child set
-          // so we'll just tell the store to "forget" about those children.
-          // They might "resurface" later when we switch to primary content,
-          // but from the store's point of view they will be a new tree.
-          recordRecursiveRemoveChildren(nextFiber);
-          // 2. Mount fallback set
-          const nextFallbackChildSet = nextFiber.child.sibling;
-          mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
-          return;
-        } else {
-          // Primary -> Primary:
-          // 1. Reconcile primary set.
-          // Note: no return so we can passthrough to the logic below.
-        }
-      }
-    }
-
-    const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
-    let hasChildOrderChanged = false;
-    if (nextFiber.child !== prevFiber.child) {
-      // If the first child is different, we need to traverse them.
-      // Each next child will be either a new child (mount) or an alternate (update).
-      let nextChild = nextFiber.child;
-      let prevChildAtSameIndex = prevFiber.child;
-      while (nextChild) {
-        // We already know children will be referentially different because
-        // they are either new mounts or alternates of previous children.
-        // Schedule updates and mounts depending on whether alternates exist.
-        // We don't track deletions here because they are reported separately.
-        if (nextChild.alternate) {
-          const prevChild = nextChild.alternate;
-          updateFiberRecursively(
-            nextChild,
-            prevChild,
-            shouldIncludeInTree ? nextFiber : parentFiber
-          );
-          // However we also keep track if the order of the children matches
-          // the previous order. They are always different referentially, but
-          // if the instances line up conceptually we'll want to know that.
-          if (!hasChildOrderChanged && prevChild !== prevChildAtSameIndex) {
+    // Suspense components only have a non-null memoizedState if they're timed-out.
+    const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
+    const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
+    // The logic below is inspired by the codepaths in updateSuspenseComponent()
+    // inside ReactFiberBeginWork in the React source code.
+    if (prevDidTimeout && nextDidTimeOut) {
+      // Fallback -> Fallback:
+      // 1. Reconcile fallback set.
+      const nextFallbackChildSet = nextFiber.child.sibling;
+      // Note: We can't use nextFiber.child.sibling.alternate
+      // because the set is special and alternate may not exist.
+      const prevFallbackChildSet = prevFiber.child.sibling;
+      updateFiberRecursively(
+        nextFallbackChildSet,
+        prevFallbackChildSet,
+        nextFiber
+      );
+    } else if (prevDidTimeout && !nextDidTimeOut) {
+      // Fallback -> Primary:
+      // 1. Unmount fallback set
+      // Note: don't emulate fallback unmount because React actually did it.
+      // 2. Mount primary set
+      const nextPrimaryChildSet = nextFiber.child;
+      mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
+    } else if (!prevDidTimeout && nextDidTimeOut) {
+      // Primary -> Fallback:
+      // 1. Hide primary set
+      // This is not a real unmount, so it won't get reported by React.
+      // By this point it's *too late* to find the previous primary child set
+      // so we'll just tell the store to "forget" about those children.
+      // They might "resurface" later when we switch to primary content,
+      // but from the store's point of view they will be a new tree.
+      recordRecursiveRemoveChildren(nextFiber);
+      // 2. Mount fallback set
+      const nextFallbackChildSet = nextFiber.child.sibling;
+      mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
+    } else if (!prevDidTimeout && !nextDidTimeOut) {
+      // Common case: Primary -> Primary.
+      // This is the same codepath as for non-Suspense fibers.
+      if (nextFiber.child !== prevFiber.child) {
+        // If the first child is different, we need to traverse them.
+        // Each next child will be either a new child (mount) or an alternate (update).
+        let nextChild = nextFiber.child;
+        let prevChildAtSameIndex = prevFiber.child;
+        while (nextChild) {
+          // We already know children will be referentially different because
+          // they are either new mounts or alternates of previous children.
+          // Schedule updates and mounts depending on whether alternates exist.
+          // We don't track deletions here because they are reported separately.
+          if (nextChild.alternate) {
+            const prevChild = nextChild.alternate;
+            updateFiberRecursively(
+              nextChild,
+              prevChild,
+              shouldIncludeInTree ? nextFiber : parentFiber
+            );
+            // However we also keep track if the order of the children matches
+            // the previous order. They are always different referentially, but
+            // if the instances line up conceptually we'll want to know that.
+            if (prevChild !== prevChildAtSameIndex) {
+              hasChildOrderChanged = true;
+            }
+          } else {
+            mountFiberRecursively(
+              nextChild,
+              shouldIncludeInTree ? nextFiber : parentFiber
+            );
             hasChildOrderChanged = true;
           }
-        } else {
-          mountFiberRecursively(
-            nextChild,
-            shouldIncludeInTree ? nextFiber : parentFiber
-          );
-          if (!hasChildOrderChanged) {
-            hasChildOrderChanged = true;
+          // Try the next child.
+          nextChild = nextChild.sibling;
+          // Advance the pointer in the previous list so that we can
+          // keep comparing if they line up.
+          if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
+            prevChildAtSameIndex = prevChildAtSameIndex.sibling;
           }
         }
-        // Try the next child.
-        nextChild = nextChild.sibling;
-        // Advance the pointer in the previous list so that we can
-        // keep comparing if they line up.
+        // If we have no more children, but used to, they don't line up.
         if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
-          prevChildAtSameIndex = prevChildAtSameIndex.sibling;
+          hasChildOrderChanged = true;
         }
       }
-      // If we have no more children, but used to, they don't line up.
-      if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
-        hasChildOrderChanged = true;
-      }
     }
-
     if (shouldIncludeInTree) {
       const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');
       if (isProfilingSupported) {

From dd935ea178970646874a98adb7003f051cebef65 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:31:18 +0100
Subject: [PATCH 391/814] Propagate the need to reset children to closest
 visible Fiber

This fixes the bug.
---
 src/backend/renderer.js | 64 ++++++++++++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index fb2bfab4edbf..eae85a10c09d 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -861,7 +861,7 @@ export function attach(
     }
   }
 
-  function recordChildOrderChange(fiber: Fiber) {
+  function recordResetChildren(fiber: Fiber) {
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -901,17 +901,18 @@ export function attach(
     }
   }
 
+  // Returns whether closest unfiltered fiber parent needs to reset its child list.
   function updateFiberRecursively(
     nextFiber: Fiber,
     prevFiber: Fiber,
     parentFiber: Fiber | null
-  ) {
+  ): boolean {
     if (__DEBUG__) {
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
     const isSuspense = nextFiber.tag === SuspenseComponent;
-    let hasChildOrderChanged = false;
+    let shouldResetChildren = false;
     // The behavior of timed-out Suspense trees is unique.
     // Rather than unmount the timed out content (and possibly lose important state),
     // React re-parents this content within a hidden Fragment while the fallback is showing.
@@ -931,11 +932,15 @@ export function attach(
       // Note: We can't use nextFiber.child.sibling.alternate
       // because the set is special and alternate may not exist.
       const prevFallbackChildSet = prevFiber.child.sibling;
-      updateFiberRecursively(
-        nextFallbackChildSet,
-        prevFallbackChildSet,
-        nextFiber
-      );
+      if (
+        updateFiberRecursively(
+          nextFallbackChildSet,
+          prevFallbackChildSet,
+          nextFiber
+        )
+      ) {
+        shouldResetChildren = true;
+      }
     } else if (prevDidTimeout && !nextDidTimeOut) {
       // Fallback -> Primary:
       // 1. Unmount fallback set
@@ -943,6 +948,7 @@ export function attach(
       // 2. Mount primary set
       const nextPrimaryChildSet = nextFiber.child;
       mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
+      shouldResetChildren = true;
     } else if (!prevDidTimeout && nextDidTimeOut) {
       // Primary -> Fallback:
       // 1. Hide primary set
@@ -955,6 +961,7 @@ export function attach(
       // 2. Mount fallback set
       const nextFallbackChildSet = nextFiber.child.sibling;
       mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
+      shouldResetChildren = true;
     } else if (!prevDidTimeout && !nextDidTimeOut) {
       // Common case: Primary -> Primary.
       // This is the same codepath as for non-Suspense fibers.
@@ -970,35 +977,42 @@ export function attach(
           // We don't track deletions here because they are reported separately.
           if (nextChild.alternate) {
             const prevChild = nextChild.alternate;
-            updateFiberRecursively(
-              nextChild,
-              prevChild,
-              shouldIncludeInTree ? nextFiber : parentFiber
-            );
+            if (
+              updateFiberRecursively(
+                nextChild,
+                prevChild,
+                shouldIncludeInTree ? nextFiber : parentFiber
+              )
+            ) {
+              // If a nested tree child order changed but it can't handle its own
+              // child order invalidation (e.g. because it's filtered out like host nodes),
+              // propagate the need to reset child order upwards to this Fiber.
+              shouldResetChildren = true;
+            }
             // However we also keep track if the order of the children matches
             // the previous order. They are always different referentially, but
             // if the instances line up conceptually we'll want to know that.
             if (prevChild !== prevChildAtSameIndex) {
-              hasChildOrderChanged = true;
+              shouldResetChildren = true;
             }
           } else {
             mountFiberRecursively(
               nextChild,
               shouldIncludeInTree ? nextFiber : parentFiber
             );
-            hasChildOrderChanged = true;
+            shouldResetChildren = true;
           }
           // Try the next child.
           nextChild = nextChild.sibling;
           // Advance the pointer in the previous list so that we can
           // keep comparing if they line up.
-          if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
+          if (!shouldResetChildren && prevChildAtSameIndex !== null) {
             prevChildAtSameIndex = prevChildAtSameIndex.sibling;
           }
         }
         // If we have no more children, but used to, they don't line up.
-        if (!hasChildOrderChanged && prevChildAtSameIndex != null) {
-          hasChildOrderChanged = true;
+        if (prevChildAtSameIndex !== null) {
+          shouldResetChildren = true;
         }
       }
     }
@@ -1007,9 +1021,19 @@ export function attach(
       if (isProfilingSupported) {
         recordTreeDuration(nextFiber);
       }
-      if (hasChildOrderChanged) {
-        recordChildOrderChange(nextFiber);
+    }
+    if (shouldResetChildren) {
+      if (shouldIncludeInTree) {
+        recordResetChildren(nextFiber);
+        // We've handled the child order change for this Fiber.
+        // Since it's included, there's no need to invalidate parent child order.
+        return false;
+      } else {
+        // Let the closest unfiltered parent Fiber reset its child order instead.
+        return true;
       }
+    } else {
+      return false;
     }
   }
 

From f4e223bcebdbda8a4c9ce4782fb1dc2538715274 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:45:53 +0100
Subject: [PATCH 392/814] When resetting Suspense children, use the fallback
 child set if needed

This fixes the bug I introduced in the previous refactor which Suspense test caught.
---
 src/backend/renderer.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index eae85a10c09d..9895adafb649 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -861,7 +861,7 @@ export function attach(
     }
   }
 
-  function recordResetChildren(fiber: Fiber) {
+  function recordResetChildren(fiber: Fiber, childSet: Fiber) {
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -869,7 +869,7 @@ export function attach(
 
     // This is a naive implimentation that shallowly recurses children.
     // We might want to revisit this if it proves to be too inefficient.
-    let child = fiber.child;
+    let child = childSet;
     while (child !== null) {
       findReorderedChildrenRecursively(child, nextChildren);
       child = child.sibling;
@@ -1023,8 +1023,16 @@ export function attach(
       }
     }
     if (shouldResetChildren) {
+      // We need to crawl the subtree for closest non-filtered Fibers
+      // so that we can display them in a flat children set.
       if (shouldIncludeInTree) {
-        recordResetChildren(nextFiber);
+        // Normally, search for children from the rendered child.
+        let nextChildSet = nextFiber.child;
+        if (nextDidTimeOut) {
+          // Special case: timed-out Suspense renders the fallback set.
+          nextChildSet = nextFiber.child.sibling;
+        }
+        recordResetChildren(nextFiber, nextChildSet);
         // We've handled the child order change for this Fiber.
         // Since it's included, there's no need to invalidate parent child order.
         return false;

From fe21ee7ca0f143d05b09ac43914db0d744380e08 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:47:14 +0100
Subject: [PATCH 393/814] Enable part of Suspense test that was failing before

This PR fixes it.
---
 src/__tests__/store-test.js | 83 +++++++++++++++++++------------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 54b5761f29ea..a457dd57e3ab 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -555,45 +555,48 @@ describe('Store', () => {
       }
     }
 
-    // TODO: fix the bugs
-    // // 4. Verify we can update from each step to each step in fallback mode.
-    // for (let i = 0; i < steps.length; i++) {
-    //   for (let j = 0; j < steps.length; j++) {
-    //     // Always start with a fresh container and steps[i].
-    //     container = document.createElement('div');
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[i]}>
-    //           <Z />
-    //           <Never />
-    //           <Z />
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     expect(print(store)).toEqual(snapshots[i]);
-    //     // Re-render with steps[j].
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[j]}>
-    //           <Z />
-    //           <Never />
-    //           <Z />
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     // Verify the successful transition to steps[j].
-    //     expect(print(store)).toEqual(snapshots[j]);
-    //     // Clean up after every iteration.
-    //     act(() => ReactDOM.unmountComponentAtNode(container));
-    //     expect(print(store)).toBe('');
-    //   }
-    // }
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
 
     // 5. Verify we can update from each step to each step when moving primary -> fallback.
     for (let i = 0; i < steps.length; i++) {
@@ -776,4 +779,4 @@ describe('Store', () => {
     // TODO:
     // Test Concurrent Mode
   });
-});
\ No newline at end of file
+});

From b1dea262517b1bad173c658cf2c8bba37ed5d5c0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 16:57:08 +0100
Subject: [PATCH 394/814] Fix the remaining issue when primary child is null

This lets us unlock the rest of the Suspense test.
---
 src/__tests__/store-test.js | 274 ++++++++++++++++++------------------
 src/backend/renderer.js     |   4 +-
 2 files changed, 141 insertions(+), 137 deletions(-)

diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index a457dd57e3ab..f060f9c28252 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -637,144 +637,146 @@ describe('Store', () => {
       }
     }
 
-    // TODO: fix the bugs
     // 6. Verify we can update from each step to each step when moving fallback -> primary.
-    // for (let i = 0; i < steps.length; i++) {
-    //   for (let j = 0; j < steps.length; j++) {
-    //     // Always start with a fresh container and steps[i].
-    //     container = document.createElement('div');
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[i]}>
-    //           <Z />
-    //           <Never />
-    //           <Z />
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     expect(print(store)).toEqual(snapshots[i]);
-    //     // Re-render with steps[j].
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={z}>
-    //           {steps[j]}
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     // Verify the successful transition to steps[j].
-    //     expect(print(store)).toEqual(snapshots[j]);
-    //     // Clean up after every iteration.
-    //     act(() => ReactDOM.unmountComponentAtNode(container));
-    //     expect(print(store)).toBe('');
-    //   }
-    // }
-
-    // TODO: fix the bugs
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
     // 7. Verify we can update from each step to each step when toggling Suspense.
-    // for (let i = 0; i < steps.length; i++) {
-    //   for (let j = 0; j < steps.length; j++) {
-    //     // Always start with a fresh container and steps[i].
-    //     container = document.createElement('div');
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[j]}>
-    //           {steps[i]}
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-
-    //     // We get ID from the index in the tree above:
-    //     // Root, X, Suspense, ...
-    //     //          ^ (index is 2)
-    //     const suspenseID = store.getElementIDAtIndex(2);
-
-    //     // Force fallback.
-    //     expect(print(store)).toEqual(snapshots[i]);
-    //     act(() => {
-    //       const suspenseID = store.getElementIDAtIndex(2);
-    //       bridge.send('overrideSuspense', {
-    //         id: suspenseID,
-    //         rendererID: store.getRendererIDForElement(suspenseID),
-    //         forceFallback: true
-    //       });
-    //     })
-    //     expect(print(store)).toEqual(snapshots[j]);
-
-    //     // Stop forcing fallback.
-    //     act(() => {
-    //       bridge.send('overrideSuspense', {
-    //         id: suspenseID,
-    //         rendererID: store.getRendererIDForElement(suspenseID),
-    //         forceFallback: false
-    //       });
-    //     })
-    //     expect(print(store)).toEqual(snapshots[i]);
-
-    //     // Trigger actual fallback.
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[j]}>
-    //           <Z />
-    //           <Never />
-    //           <Z />
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     expect(print(store)).toEqual(snapshots[j]);
-
-    //     // Force fallback while we're in fallback mode.
-    //     act(() => {
-    //       bridge.send('overrideSuspense', {
-    //         id: suspenseID,
-    //         rendererID: store.getRendererIDForElement(suspenseID),
-    //         forceFallback: true
-    //       });
-    //     })
-    //     // Keep seeing fallback content.
-    //     expect(print(store)).toEqual(snapshots[j]);
-
-    //     // Switch to primary mode.
-    //     act(() => ReactDOM.render(
-    //       <Root>
-    //         <X />
-    //         <React.Suspense fallback={steps[j]}>
-    //           {steps[i]}
-    //         </React.Suspense>
-    //         <Y />
-    //       </Root>,
-    //       container
-    //     ));
-    //     // Fallback is still forced though.
-    //     expect(print(store)).toEqual(snapshots[j]);
-
-    //     // Stop forcing fallback. This reverts to primary content.
-    //     act(() => {
-    //       bridge.send('overrideSuspense', {
-    //         id: suspenseID,
-    //         rendererID: store.getRendererIDForElement(suspenseID),
-    //         forceFallback: false
-    //       });
-    //     })
-    //     // Now we see primary content.
-    //     expect(print(store)).toEqual(snapshots[i]);
-
-    //     // Clean up after every iteration.
-    //     act(() => ReactDOM.unmountComponentAtNode(container));
-    //     expect(print(store)).toBe('');
-    //   }
-    // }
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          const suspenseID = store.getElementIDAtIndex(2);
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
 
     // TODO:
     // Test Concurrent Mode
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9895adafb649..ac79265d0486 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -947,7 +947,9 @@ export function attach(
       // Note: don't emulate fallback unmount because React actually did it.
       // 2. Mount primary set
       const nextPrimaryChildSet = nextFiber.child;
-      mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
+      if (nextPrimaryChildSet !== null) {
+        mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);
+      }
       shouldResetChildren = true;
     } else if (!prevDidTimeout && nextDidTimeOut) {
       // Primary -> Fallback:

From 3cf67ab859b10f7d1f4b5d939ed980ba98a49775 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 17:02:42 +0100
Subject: [PATCH 395/814] Harden the tests and fix Flow

---
 src/__tests__/store-test.js | 64 ++++++++++++++++++++++++++++++++++---
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index f060f9c28252..913302029b00 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -4,7 +4,7 @@ describe('Store', () => {
   let React;
   let ReactDOM;
   let TestUtils;
-  // let bridge;
+  let bridge;
   let store;
   let print;
 
@@ -16,7 +16,7 @@ describe('Store', () => {
   };
 
   beforeEach(() => {
-    // bridge = global.bridge;
+    bridge = global.bridge;
     store = global.store;
 
     React = require('react');
@@ -549,6 +549,18 @@ describe('Store', () => {
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -592,6 +604,22 @@ describe('Store', () => {
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -631,6 +659,18 @@ describe('Store', () => {
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -670,6 +710,22 @@ describe('Store', () => {
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -777,8 +833,6 @@ describe('Store', () => {
         expect(print(store)).toBe('');
       }
     }
-
-    // TODO:
-    // Test Concurrent Mode
+    // TODO: Test Concurrent Mode
   });
 });

From d4db178d334f65291b9210b864ba03d219cdfbf2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 17:39:26 +0100
Subject: [PATCH 396/814] Bump to canary

---
 package.json |  6 +++---
 yarn.lock    | 38 +++++++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 54cbba4e125e..ce01e85dc786 100644
--- a/package.json
+++ b/package.json
@@ -130,10 +130,10 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^16.9.0-alpha.0",
+    "react": "0.0.0-9ebe1768a",
     "react-color": "^2.11.7",
-    "react-dom": "^16.9.0-alpha.0",
-    "react-is": "^16.9.0-alpha.0",
+    "react-dom": "0.0.0-9ebe1768a",
+    "react-is": "0.0.0-9ebe1768a",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
diff --git a/yarn.lock b/yarn.lock
index 63269e7badd2..996b947f4f17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9180,15 +9180,20 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^16.9.0-alpha.0:
-  version "16.9.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0-alpha.0.tgz#9dfaec18ac1a500fa72cab7b70f2ae29d0cd7716"
-  integrity sha512-BQ5gN42yIPuTnBvE6K9vSjNfDRpSNcYCs2sUx9XR5VaWKwlHTt3G6qIWK6zdXy8TYKb1+IxpsAI0RtbRdXQZ2A==
+react-dom@0.0.0-9ebe1768a:
+  version "0.0.0-9ebe1768a"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-9ebe1768a.tgz#1e4c2e8b3cfb2bc109f835acb6ebefa60ec44f0c"
+  integrity sha512-rNZ0jEq75Z0T3o+UgQJNx0rggAU0B5Odi+ufoHxttsOijNOw26Iv/vvFrqS5pM1sZOduHTS3igTQoSuHl7tqOg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.14.0-alpha.0"
+    scheduler "0.0.0-9ebe1768a"
+
+react-is@0.0.0-9ebe1768a:
+  version "0.0.0-9ebe1768a"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-9ebe1768a.tgz#bbe9e123b66f8ee5d9c801b2a8a1bb4a5690cc0a"
+  integrity sha512-nhn5mK3ICHnacpEUmIYCfyGCq6cWSUM0GnBYpPfZBKCHrUiURZXuQXf7KnL1W7r0e8MWbiljuAxODFz+za4I+w==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9200,11 +9205,6 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-is@^16.9.0-alpha.0:
-  version "16.9.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0-alpha.0.tgz#af943642da49460f9fe98630182b0a62db3e9e6a"
-  integrity sha512-psl0ePLTFliYfwcbwvimLgTNN156ZdeWB4zvP7dV/6lTAqWMHFfidg/mSZ2fFgE1LMNN8ZJOLl2DfZ8yg+3ETA==
-
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -9223,15 +9223,15 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.9.0-alpha.0:
-  version "16.9.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0-alpha.0.tgz#e350f3d8af36e3251079cbc90d304620e2f78ccb"
-  integrity sha512-y4bu7rJvtnPPsIwOj7sp5Y2SqlOb0jFupfkdjWxxn8ZeqzUARgpR9wJBUVwW1/QosVdOblmApjo/j6iiAXnebA==
+react@0.0.0-9ebe1768a:
+  version "0.0.0-9ebe1768a"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-9ebe1768a.tgz#9bc108ad0369fcde70e6fdfd1a7abf64893a4777"
+  integrity sha512-Q+Fe06if74BAL9yMNcTvD9Xoa8hDZxKxH4Fc3OvP/4qrwouXDzOV0qPWH6g854EwSAncMGCTbccZmFVJOiGYMw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.14.0-alpha.0"
+    scheduler "0.0.0-9ebe1768a"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9882,6 +9882,14 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@0.0.0-9ebe1768a:
+  version "0.0.0-9ebe1768a"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-9ebe1768a.tgz#f25e35c5b13e1e0c2f2507e40d33ace39a069558"
+  integrity sha512-xP/Ctf6Rv58hPF3SC9pWsvZwoWbx3WkxJ11nbaTfUbI1JkJVCBeo3/7DCIiGSUbY3CV29hXvsoKFqYOSVDNF5w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.14.0-alpha.0:
   version "0.14.0-alpha.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.14.0-alpha.0.tgz#6d301d8fd10373487e0e47e837ad24e863ce807d"

From 8576c85b0dc6a1012c36ac7711e88c8fb1aac0a3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 18:10:15 +0100
Subject: [PATCH 397/814] Move stress tests to their own file

---
 .../__snapshots__/store-test.js.snap          | 238 ------
 .../__snapshots__/storeStress-test.js.snap    | 239 ++++++
 src/__tests__/store-test.js                   | 680 +----------------
 src/__tests__/storeStress-test.js             | 696 ++++++++++++++++++
 4 files changed, 937 insertions(+), 916 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/storeStress-test.js.snap
 create mode 100644 src/__tests__/storeStress-test.js

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 97bd08f7ffca..102a3285585e 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -25,244 +25,6 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
         <Child>
 `;
 
-exports[`Store should handle a stress test for Suspense 1`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 2`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 3`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-        <C key="c">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 4`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <B key="b">
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 5`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 6`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 7`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 8`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 9`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 10`] = `
-[root]
-  ▾ <Root>
-      <X>
-      <Suspense>
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 11`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <B key="b">
-      <Y>
-`;
-
-exports[`Store should handle a stress test for Suspense 12`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`Store should handle a stress test with different tree operations: 1: abcde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-      <C key="c">
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`Store should handle a stress test with different tree operations: 2: abxde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-    ▾ <C key="c">
-        <X>
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`Store should handle stress test with reordering 1`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`Store should handle stress test with reordering 2`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`Store should handle stress test with reordering 3`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`Store should handle stress test with reordering 4`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`Store should handle stress test with reordering 5`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`Store should handle stress test with reordering 6`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`Store should handle stress test with reordering 7`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`Store should handle stress test with reordering 8`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`Store should handle stress test with reordering 9`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`Store should handle stress test with reordering 10`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`Store should handle stress test with reordering 11`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <B key="b">
-`;
-
-exports[`Store should handle stress test with reordering 12`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <A key="a">
-`;
-
-exports[`Store should handle stress test with reordering 13`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <C key="c">
-`;
-
-exports[`Store should handle stress test with reordering 14`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <B key="b">
-`;
-
-exports[`Store should handle stress test with reordering 15`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <C key="c">
-`;
-
-exports[`Store should handle stress test with reordering 16`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <A key="a">
-`;
-
 exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
diff --git a/src/__tests__/__snapshots__/storeStress-test.js.snap b/src/__tests__/__snapshots__/storeStress-test.js.snap
new file mode 100644
index 000000000000..9deb51fb38ac
--- /dev/null
+++ b/src/__tests__/__snapshots__/storeStress-test.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StoreStress should handle a stress test for Suspense 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test for Suspense 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress should handle a stress test with different tree operations: 1: abcde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+      <C key="c">
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress should handle a stress test with different tree operations: 2: abxde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+    ▾ <C key="c">
+        <X>
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress should handle stress test with reordering 1`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress should handle stress test with reordering 2`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress should handle stress test with reordering 3`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress should handle stress test with reordering 4`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress should handle stress test with reordering 5`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress should handle stress test with reordering 6`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress should handle stress test with reordering 7`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress should handle stress test with reordering 8`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress should handle stress test with reordering 9`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress should handle stress test with reordering 10`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress should handle stress test with reordering 11`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <B key="b">
+`;
+
+exports[`StoreStress should handle stress test with reordering 12`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <A key="a">
+`;
+
+exports[`StoreStress should handle stress test with reordering 13`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <C key="c">
+`;
+
+exports[`StoreStress should handle stress test with reordering 14`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <B key="b">
+`;
+
+exports[`StoreStress should handle stress test with reordering 15`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <C key="c">
+`;
+
+exports[`StoreStress should handle stress test with reordering 16`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <A key="a">
+`;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 913302029b00..82da076f0a2c 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -4,9 +4,7 @@ describe('Store', () => {
   let React;
   let ReactDOM;
   let TestUtils;
-  let bridge;
   let store;
-  let print;
 
   const act = (callback: Function) => {
     TestUtils.act(() => {
@@ -16,14 +14,11 @@ describe('Store', () => {
   };
 
   beforeEach(() => {
-    bridge = global.bridge;
     store = global.store;
 
     React = require('react');
     ReactDOM = require('react-dom');
     TestUtils = require('react-dom/test-utils');
-
-    print = require('./storeSerializer').print;
   });
 
   it('should support mount and update operations', () => {
@@ -98,8 +93,7 @@ describe('Store', () => {
     expect(store).toMatchSnapshot('1: mount');
   });
 
-  // TODO We should write more complex Suspense tests than just this
-  it('should display Suspense nodes properly in various states', async done => {
+  it('should display Suspense nodes properly in various states', () => {
     const Loading = () => <div>Loading...</div>;
     const SuspendingComponent = () => {
       throw new Promise(() => {});
@@ -124,12 +118,10 @@ describe('Store', () => {
     act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
     expect(store).toMatchSnapshot('1: loading');
 
-    act(async () => {
+    act(() => {
       ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
     });
     expect(store).toMatchSnapshot('2: resolved');
-
-    done();
   });
 
   it('should support collapsing parts of the tree', () => {
@@ -167,672 +159,4 @@ describe('Store', () => {
     act(() => store.toggleIsCollapsed(grandparentID, false));
     expect(store).toMatchSnapshot('6: expand Grandparent');
   });
-
-  // This is a stress test for the tree mount/update/unmount traversal.
-  // It renders different trees that should produce the same output.
-  it('should handle a stress test with different tree operations', () => {
-    let setShowX;
-    const A = () => 'a';
-    const B = () => 'b';
-    const C = () => {
-      // We'll be manually flipping this component back and forth in the test.
-      // We only do this for a single node in order to verify that DevTools
-      // can handle a subtree switching alternates while other subtrees are memoized.
-      let [showX, _setShowX] = React.useState(false);
-      setShowX = _setShowX;
-      return showX ? <X /> : 'c';
-    };
-    const D = () => 'd';
-    const E = () => 'e';
-    const X = () => 'x';
-    const a = <A key="a" />;
-    const b = <B key="b" />;
-    const c = <C key="c" />;
-    const d = <D key="d" />;
-    const e = <E key="e" />;
-
-    function Parent({ children }) {
-      return children;
-    }
-
-    // 1. Render a normal version of [a, b, c, d, e].
-    let container = document.createElement('div');
-    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
-    expect(store).toMatchSnapshot('1: abcde');
-    expect(container.textContent).toMatch('abcde');
-    const snapshotForABCDE = print(store);
-
-    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
-    // This is how we'll test an update to a single component.
-    act(() => {
-      setShowX(true);
-    });
-    expect(store).toMatchSnapshot('2: abxde');
-    expect(container.textContent).toMatch('abxde');
-    const snapshotForABXDE = print(store);
-
-    // 3. Verify flipping it back produces the original result.
-    act(() => {
-      setShowX(false);
-    });
-    expect(container.textContent).toMatch('abcde');
-    expect(print(store)).toBe(snapshotForABCDE);
-
-    // 4. Clean up.
-    act(() => ReactDOM.unmountComponentAtNode(container));
-    expect(print(store)).toBe('');
-
-    // Now comes the interesting part.
-    // All of these cases are equivalent to [a, b, c, d, e] in output.
-    // We'll verify that DevTools produces the same snapshots for them.
-    // These cases are picked so that rendering them sequentially in the same
-    // container results in a combination of mounts, updates, unmounts, and reorders.
-    // prettier-ignore
-    let cases = [
-      [a, b, c, d, e],
-      [[a], b, c, d, e],
-      [[a, b], c, d, e],
-      [[a, b], c, [d, e]],
-      [[a, b], c, [d, '', e]],
-      [[a], b, c, d, [e]],
-      [a, b, [[c]], d, e],
-      [[a, ''], [b], [c], [d], [e]],
-      [a, b, [c, [d, ['', e]]]],
-      [a, b, c, d, e],
-      [<div key="0">{a}</div>, b, c, d, e],
-      [<div key="0">{a}{b}</div>, c, d, e],
-      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
-      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
-      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
-      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
-      [<span key="0">{a}</span>, b, c, d, [e]],
-      [a, b, <span key="0"><span>{c}</span></span>, d, e],
-      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
-      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
-      [a, [[]], b, c, [d, [[]], e]],
-      [[[a, b, c, d], e]],
-      [a, b, c, d, e]
-    ];
-
-    // 5. Test fresh mount for each case.
-    for (let i = 0; i < cases.length; i++) {
-      // Ensure fresh mount.
-      container = document.createElement('div');
-
-      // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toEqual(snapshotForABCDE);
-
-      // Verify switching to 'abxde'.
-      act(() => {
-        setShowX(true);
-      });
-      expect(container.textContent).toMatch('abxde');
-      expect(print(store)).toBe(snapshotForABXDE);
-
-      // Verify switching back to 'abcde'.
-      act(() => {
-        setShowX(false);
-      });
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toBe(snapshotForABCDE);
-
-      // Clean up.
-      act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(print(store)).toBe('');
-    }
-
-    // 6. Verify *updates* by reusing the container between iterations.
-    // There'll be no unmounting until the very end.
-    container = document.createElement('div');
-    for (let i = 0; i < cases.length; i++) {
-      // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toEqual(snapshotForABCDE);
-
-      // Verify switching to 'abxde'.
-      act(() => {
-        setShowX(true);
-      });
-      expect(container.textContent).toMatch('abxde');
-      expect(print(store)).toBe(snapshotForABXDE);
-
-      // Verify switching back to 'abcde'.
-      act(() => {
-        setShowX(false);
-      });
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toBe(snapshotForABCDE);
-      // Don't unmount. Reuse the container between iterations.
-    }
-    act(() => ReactDOM.unmountComponentAtNode(container));
-    expect(print(store)).toBe('');
-
-    // 7. Same as the previous step, but for Concurrent Mode.
-    container = document.createElement('div');
-    // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
-    for (let i = 0; i < cases.length; i++) {
-      // Verify mounting 'abcde'.
-      act(() => root.render(<Parent>{cases[i]}</Parent>));
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toEqual(snapshotForABCDE);
-
-      // Verify switching to 'abxde'.
-      act(() => {
-        setShowX(true);
-      });
-      expect(container.textContent).toMatch('abxde');
-      expect(print(store)).toBe(snapshotForABXDE);
-
-      // Verify switching back to 'abcde'.
-      act(() => {
-        setShowX(false);
-      });
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toBe(snapshotForABCDE);
-      // Don't unmount. Reuse the container between iterations.
-    }
-    act(() => root.unmount());
-    expect(print(store)).toBe('');
-  });
-
-  it('should handle stress test with reordering', () => {
-    const A = () => 'a';
-    const B = () => 'b';
-    const C = () => 'c';
-    const D = () => 'd';
-    const E = () => 'e';
-    const a = <A key="a" />;
-    const b = <B key="b" />;
-    const c = <C key="c" />;
-    const d = <D key="d" />;
-    const e = <E key="e" />;
-
-    // prettier-ignore
-    let steps = [
-      a,
-      b,
-      c,
-      d,
-      e,
-      [a],
-      [b],
-      [c],
-      [d],
-      [e],
-      [a, b],
-      [b, a],
-      [b, c],
-      [c, b],
-      [a, c],
-      [c, a],
-    ];
-
-    const Root = ({ children }) => {
-      return children;
-    };
-
-    // 1. Capture the expected render result.
-    let snapshots = [];
-    let container = document.createElement('div');
-    for (let i = 0; i < steps.length; i++) {
-      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
-      // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
-      snapshots.push(print(store));
-      act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(print(store)).toBe('');
-    }
-
-    // 2. Verify that we can update from every step to every other step and back.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
-        expect(print(store)).toMatch(snapshots[i]);
-        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
-        expect(print(store)).toMatch(snapshots[j]);
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
-        expect(print(store)).toMatch(snapshots[i]);
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-
-    // 3. Same test as above, but this time we wrap children in a host component.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        let container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <div>{steps[i]}</div>
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toMatch(snapshots[i]);
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <div>{steps[j]}</div>
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toMatch(snapshots[j]);
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <div>{steps[i]}</div>
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toMatch(snapshots[i]);
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-  });
-
-  it('should handle a stress test for Suspense', async () => {
-    const A = () => 'a';
-    const B = () => 'b';
-    const C = () => 'c';
-    const X = () => 'x';
-    const Y = () => 'y';
-    const Z = () => 'z';
-    const a = <A key="a" />;
-    const b = <B key="b" />;
-    const c = <C key="c" />;
-    // const x = <X key="x" />;
-    // const y = <Y key="y" />;
-    const z = <Z key="z" />;
-
-    // prettier-ignore
-    const steps = [
-      a,
-      [a],
-      [a, b, c],
-      [c, b, a],
-      [c, null, a],
-      <React.Fragment>{c}{a}</React.Fragment>,
-      <div>{c}{a}</div>,
-      <div><span>{a}</span>{b}</div>,
-      [[a]],
-      null,
-      b,
-      a
-    ];
-
-    const Never = () => {
-      throw new Promise(() => {});
-    };
-
-    const Root = ({ children }) => {
-      return children;
-    };
-
-    // 1. For each step, check Suspense can render them as initial primary content.
-    // This is the only step where we use Jest snapshots.
-    let snapshots = [];
-    let container = document.createElement('div');
-    for (let i = 0; i < steps.length; i++) {
-      act(() =>
-        ReactDOM.render(
-          <Root>
-            <X />
-            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
-            <Y />
-          </Root>,
-          container
-        )
-      );
-      // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
-      snapshots.push(print(store));
-      act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(print(store)).toBe('');
-    }
-
-    // 2. Verify check Suspense can render same steps as initial fallback content.
-    for (let i = 0; i < steps.length; i++) {
-      act(() =>
-        ReactDOM.render(
-          <Root>
-            <X />
-            <React.Suspense fallback={steps[i]}>
-              <Z />
-              <Never />
-              <Z />
-            </React.Suspense>
-            <Y />
-          </Root>,
-          container
-        )
-      );
-      expect(print(store)).toEqual(snapshots[i]);
-      act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(print(store)).toBe('');
-    }
-
-    // 3. Verify we can update from each step to each step in primary mode.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        // Always start with a fresh container and steps[i].
-        container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Re-render with steps[j].
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        // Verify the successful transition to steps[j].
-        expect(print(store)).toEqual(snapshots[j]);
-        // Check that we can transition back again.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Clean up after every iteration.
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-
-    // 4. Verify we can update from each step to each step in fallback mode.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        // Always start with a fresh container and steps[i].
-        container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[i]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Re-render with steps[j].
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[j]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        // Verify the successful transition to steps[j].
-        expect(print(store)).toEqual(snapshots[j]);
-        // Check that we can transition back again.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[i]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Clean up after every iteration.
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-
-    // 5. Verify we can update from each step to each step when moving primary -> fallback.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        // Always start with a fresh container and steps[i].
-        container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Re-render with steps[j].
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[j]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        // Verify the successful transition to steps[j].
-        expect(print(store)).toEqual(snapshots[j]);
-        // Check that we can transition back again.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Clean up after every iteration.
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-
-    // 6. Verify we can update from each step to each step when moving fallback -> primary.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        // Always start with a fresh container and steps[i].
-        container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[i]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Re-render with steps[j].
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        // Verify the successful transition to steps[j].
-        expect(print(store)).toEqual(snapshots[j]);
-        // Check that we can transition back again.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[i]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[i]);
-        // Clean up after every iteration.
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-
-    // 7. Verify we can update from each step to each step when toggling Suspense.
-    for (let i = 0; i < steps.length; i++) {
-      for (let j = 0; j < steps.length; j++) {
-        // Always start with a fresh container and steps[i].
-        container = document.createElement('div');
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-
-        // We get ID from the index in the tree above:
-        // Root, X, Suspense, ...
-        //          ^ (index is 2)
-        const suspenseID = store.getElementIDAtIndex(2);
-
-        // Force fallback.
-        expect(print(store)).toEqual(snapshots[i]);
-        act(() => {
-          const suspenseID = store.getElementIDAtIndex(2);
-          bridge.send('overrideSuspense', {
-            id: suspenseID,
-            rendererID: store.getRendererIDForElement(suspenseID),
-            forceFallback: true,
-          });
-        });
-        expect(print(store)).toEqual(snapshots[j]);
-
-        // Stop forcing fallback.
-        act(() => {
-          bridge.send('overrideSuspense', {
-            id: suspenseID,
-            rendererID: store.getRendererIDForElement(suspenseID),
-            forceFallback: false,
-          });
-        });
-        expect(print(store)).toEqual(snapshots[i]);
-
-        // Trigger actual fallback.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[j]}>
-                <Z />
-                <Never />
-                <Z />
-              </React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        expect(print(store)).toEqual(snapshots[j]);
-
-        // Force fallback while we're in fallback mode.
-        act(() => {
-          bridge.send('overrideSuspense', {
-            id: suspenseID,
-            rendererID: store.getRendererIDForElement(suspenseID),
-            forceFallback: true,
-          });
-        });
-        // Keep seeing fallback content.
-        expect(print(store)).toEqual(snapshots[j]);
-
-        // Switch to primary mode.
-        act(() =>
-          ReactDOM.render(
-            <Root>
-              <X />
-              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
-              <Y />
-            </Root>,
-            container
-          )
-        );
-        // Fallback is still forced though.
-        expect(print(store)).toEqual(snapshots[j]);
-
-        // Stop forcing fallback. This reverts to primary content.
-        act(() => {
-          bridge.send('overrideSuspense', {
-            id: suspenseID,
-            rendererID: store.getRendererIDForElement(suspenseID),
-            forceFallback: false,
-          });
-        });
-        // Now we see primary content.
-        expect(print(store)).toEqual(snapshots[i]);
-
-        // Clean up after every iteration.
-        act(() => ReactDOM.unmountComponentAtNode(container));
-        expect(print(store)).toBe('');
-      }
-    }
-    // TODO: Test Concurrent Mode
-  });
 });
diff --git a/src/__tests__/storeStress-test.js b/src/__tests__/storeStress-test.js
new file mode 100644
index 000000000000..22490c71aaa3
--- /dev/null
+++ b/src/__tests__/storeStress-test.js
@@ -0,0 +1,696 @@
+// @flow
+
+describe('StoreStress', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let bridge;
+  let store;
+  let print;
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+
+    print = require('./storeSerializer').print;
+  });
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  it('should handle a stress test with different tree operations', () => {
+    let setShowX;
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => {
+      // We'll be manually flipping this component back and forth in the test.
+      // We only do this for a single node in order to verify that DevTools
+      // can handle a subtree switching alternates while other subtrees are memoized.
+      let [showX, _setShowX] = React.useState(false);
+      setShowX = _setShowX;
+      return showX ? <X /> : 'c';
+    };
+    const D = () => 'd';
+    const E = () => 'e';
+    const X = () => 'x';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    function Parent({ children }) {
+      return children;
+    }
+
+    // 1. Render a normal version of [a, b, c, d, e].
+    let container = document.createElement('div');
+    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
+    expect(store).toMatchSnapshot('1: abcde');
+    expect(container.textContent).toMatch('abcde');
+    const snapshotForABCDE = print(store);
+
+    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
+    // This is how we'll test an update to a single component.
+    act(() => {
+      setShowX(true);
+    });
+    expect(store).toMatchSnapshot('2: abxde');
+    expect(container.textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(container.textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+
+    // Now comes the interesting part.
+    // All of these cases are equivalent to [a, b, c, d, e] in output.
+    // We'll verify that DevTools produces the same snapshots for them.
+    // These cases are picked so that rendering them sequentially in the same
+    // container results in a combination of mounts, updates, unmounts, and reorders.
+    // prettier-ignore
+    let cases = [
+      [a, b, c, d, e],
+      [[a], b, c, d, e],
+      [[a, b], c, d, e],
+      [[a, b], c, [d, e]],
+      [[a, b], c, [d, '', e]],
+      [[a], b, c, d, [e]],
+      [a, b, [[c]], d, e],
+      [[a, ''], [b], [c], [d], [e]],
+      [a, b, [c, [d, ['', e]]]],
+      [a, b, c, d, e],
+      [<div key="0">{a}</div>, b, c, d, e],
+      [<div key="0">{a}{b}</div>, c, d, e],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
+      [<span key="0">{a}</span>, b, c, d, [e]],
+      [a, b, <span key="0"><span>{c}</span></span>, d, e],
+      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
+      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
+      [a, [[]], b, c, [d, [[]], e]],
+      [[[a, b, c, d], e]],
+      [a, b, c, d, e]
+    ];
+
+    // 5. Test fresh mount for each case.
+    for (let i = 0; i < cases.length; i++) {
+      // Ensure fresh mount.
+      container = document.createElement('div');
+
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    container = document.createElement('div');
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+
+    // 7. Same as the previous step, but for Concurrent Mode.
+    container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+  });
+
+  it('should handle stress test with reordering', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const D = () => 'd';
+    const E = () => 'e';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    // prettier-ignore
+    let steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify that we can update from every step to every other step and back.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 3. Same test as above, but this time we wrap children in a host component.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense', async () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    // const x = <X key="x" />;
+    // const y = <Y key="y" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      expect(print(store)).toEqual(snapshots[i]);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          const suspenseID = store.getElementIDAtIndex(2);
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+    // TODO: Test Concurrent Mode
+  });
+});

From 58bb7cea41a024f6c0fede4a32de579d7fb85727 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 18:21:40 +0100
Subject: [PATCH 398/814] Remove unused lines

---
 src/__tests__/storeStress-test.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/__tests__/storeStress-test.js b/src/__tests__/storeStress-test.js
index 22490c71aaa3..ae13007cca7c 100644
--- a/src/__tests__/storeStress-test.js
+++ b/src/__tests__/storeStress-test.js
@@ -307,8 +307,6 @@ describe('StoreStress', () => {
     const a = <A key="a" />;
     const b = <B key="b" />;
     const c = <C key="c" />;
-    // const x = <X key="x" />;
-    // const y = <Y key="y" />;
     const z = <Z key="z" />;
 
     // prettier-ignore

From 9182d0b0aa52acc6912c56a7fefcdfea176896f2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 19:09:52 +0100
Subject: [PATCH 399/814] Bump alpha to get Andrew's fix

---
 package.json |  6 +++---
 yarn.lock    | 36 ++++++++++++++++++------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index ce01e85dc786..60850a905b6f 100644
--- a/package.json
+++ b/package.json
@@ -130,10 +130,10 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "0.0.0-9ebe1768a",
+    "react": "0.0.0-4221565e1",
     "react-color": "^2.11.7",
-    "react-dom": "0.0.0-9ebe1768a",
-    "react-is": "0.0.0-9ebe1768a",
+    "react-dom": "0.0.0-4221565e1",
+    "react-is": "0.0.0-4221565e1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
diff --git a/yarn.lock b/yarn.lock
index 996b947f4f17..dfd34ac54dea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9180,20 +9180,20 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@0.0.0-9ebe1768a:
-  version "0.0.0-9ebe1768a"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-9ebe1768a.tgz#1e4c2e8b3cfb2bc109f835acb6ebefa60ec44f0c"
-  integrity sha512-rNZ0jEq75Z0T3o+UgQJNx0rggAU0B5Odi+ufoHxttsOijNOw26Iv/vvFrqS5pM1sZOduHTS3igTQoSuHl7tqOg==
+react-dom@0.0.0-4221565e1:
+  version "0.0.0-4221565e1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"
+  integrity sha512-uoBFBMDt5OOAZQNWl72hqCuvVxE1YpAILqIHSwv2ktiLcHPmyByftiuFdqrjXVCJe3LR9sAQWrB8xWgC2bCi+w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-9ebe1768a"
+    scheduler "0.0.0-4221565e1"
 
-react-is@0.0.0-9ebe1768a:
-  version "0.0.0-9ebe1768a"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-9ebe1768a.tgz#bbe9e123b66f8ee5d9c801b2a8a1bb4a5690cc0a"
-  integrity sha512-nhn5mK3ICHnacpEUmIYCfyGCq6cWSUM0GnBYpPfZBKCHrUiURZXuQXf7KnL1W7r0e8MWbiljuAxODFz+za4I+w==
+react-is@0.0.0-4221565e1:
+  version "0.0.0-4221565e1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-4221565e1.tgz#b9516ac872939c5d805f970e7aff4b9d3b3cc99e"
+  integrity sha512-Ko7j3yyyQi5aB8tw3TmpmHrjeZbrzKm2FCKNpXJyXFAeummKLzeWH+M/gCh9w6EA6sZcX2W/YAX4U/KmeWjsWw==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9223,15 +9223,15 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@0.0.0-9ebe1768a:
-  version "0.0.0-9ebe1768a"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-9ebe1768a.tgz#9bc108ad0369fcde70e6fdfd1a7abf64893a4777"
-  integrity sha512-Q+Fe06if74BAL9yMNcTvD9Xoa8hDZxKxH4Fc3OvP/4qrwouXDzOV0qPWH6g854EwSAncMGCTbccZmFVJOiGYMw==
+react@0.0.0-4221565e1:
+  version "0.0.0-4221565e1"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-4221565e1.tgz#bc7f3e67f2c2c53693cda2e89e6fa71bfc89ebcd"
+  integrity sha512-iVAljelOxza6S9QcFMkxJCcj2Y+QDiv6XwGz9A8c5jtKejGOEKK/Xumg7uTDmGwy8vjGVDI7qGDW8Rta80xH9g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-9ebe1768a"
+    scheduler "0.0.0-4221565e1"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9882,10 +9882,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-9ebe1768a:
-  version "0.0.0-9ebe1768a"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-9ebe1768a.tgz#f25e35c5b13e1e0c2f2507e40d33ace39a069558"
-  integrity sha512-xP/Ctf6Rv58hPF3SC9pWsvZwoWbx3WkxJ11nbaTfUbI1JkJVCBeo3/7DCIiGSUbY3CV29hXvsoKFqYOSVDNF5w==
+scheduler@0.0.0-4221565e1:
+  version "0.0.0-4221565e1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-4221565e1.tgz#70c99271bd7bc4fbf4e7c69f31c003c4c61cd285"
+  integrity sha512-RhQ6QhkRJDXAcs6woR6p9UYDyjRguRsYXpWDFbCft45lWs4sSfszxPRr5TJVVLjIwPu0Wy0Mkd75smQ8TMponA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 3a6d6560903e882db8776017594ceab79e66a9da Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 Apr 2019 19:10:39 +0100
Subject: [PATCH 400/814] Remove unnecessary condition

---
 src/backend/renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ac79265d0486..7aa8b1555a8f 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -964,7 +964,7 @@ export function attach(
       const nextFallbackChildSet = nextFiber.child.sibling;
       mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
       shouldResetChildren = true;
-    } else if (!prevDidTimeout && !nextDidTimeOut) {
+    } else {
       // Common case: Primary -> Primary.
       // This is the same codepath as for non-Suspense fibers.
       if (nextFiber.child !== prevFiber.child) {

From 4b64d7c01715b9ed6fc70b757cdf8cdc0b03b503 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Apr 2019 13:59:36 -0700
Subject: [PATCH 401/814] Support configurable node/tree collapsed by default
 behavior

---
 .../__snapshots__/store-test.js.snap          | 159 ++++++-
 src/__tests__/store-test.js                   | 408 +++++++++++++-----
 src/__tests__/storeStress-test.js             |   1 +
 src/devtools/store.js                         |  28 +-
 src/devtools/views/Settings/Settings.css      |   5 +-
 src/devtools/views/Settings/Settings.js       |  71 ++-
 6 files changed, 521 insertions(+), 151 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 102a3285585e..7f135dc64180 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store should display Suspense nodes properly in various states: 1: loading 1`] = `
+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
 [root]
   ▾ <Wrapper>
       <Component key="Outside">
@@ -8,7 +8,7 @@ exports[`Store should display Suspense nodes properly in various states: 1: load
         <Loading>
 `;
 
-exports[`Store should display Suspense nodes properly in various states: 2: resolved 1`] = `
+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `
 [root]
   ▾ <Wrapper>
       <Component key="Outside">
@@ -16,7 +16,7 @@ exports[`Store should display Suspense nodes properly in various states: 2: reso
         <Component key="Inside">
 `;
 
-exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
+exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -25,7 +25,7 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `
         <Child>
 `;
 
-exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -36,7 +36,7 @@ exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `
         <Child key="1">
 `;
 
-exports[`Store should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▸ <Parent>
@@ -45,14 +45,14 @@ exports[`Store should support collapsing parts of the tree: 2: collapse first Pa
         <Child key="1">
 `;
 
-exports[`Store should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▸ <Parent>
     ▸ <Parent>
 `;
 
-exports[`Store should support collapsing parts of the tree: 4: expand first Parent 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -61,12 +61,12 @@ exports[`Store should support collapsing parts of the tree: 4: expand first Pare
     ▸ <Parent>
 `;
 
-exports[`Store should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
 [root]
   ▸ <Grandparent>
 `;
 
-exports[`Store should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -75,7 +75,7 @@ exports[`Store should support collapsing parts of the tree: 6: expand Grandparen
     ▸ <Parent>
 `;
 
-exports[`Store should support mount and update operations for multiple roots: 1: mount 1`] = `
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
@@ -87,7 +87,7 @@ exports[`Store should support mount and update operations for multiple roots: 1:
       <Child key="1">
 `;
 
-exports[`Store should support mount and update operations for multiple roots: 2: update 1`] = `
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
@@ -99,7 +99,7 @@ exports[`Store should support mount and update operations for multiple roots: 2:
       <Child key="0">
 `;
 
-exports[`Store should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
 [root]
   ▾ <Parent key="A">
       <Child key="0">
@@ -108,9 +108,9 @@ exports[`Store should support mount and update operations for multiple roots: 3:
       <Child key="3">
 `;
 
-exports[`Store should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
 
-exports[`Store should support mount and update operations: 1: mount 1`] = `
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -125,7 +125,7 @@ exports[`Store should support mount and update operations: 1: mount 1`] = `
         <Child key="3">
 `;
 
-exports[`Store should support mount and update operations: 2: update 1`] = `
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -136,4 +136,131 @@ exports[`Store should support mount and update operations: 2: update 1`] = `
         <Child key="1">
 `;
 
-exports[`Store should support mount and update operations: 3: unmount 1`] = ``;
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading>
+`;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Inside">
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 3: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 4: expand second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 5: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 6: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 7: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▸ <Parent key="A">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 82da076f0a2c..259984b74a5d 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -21,142 +21,324 @@ describe('Store', () => {
     TestUtils = require('react-dom/test-utils');
   });
 
-  it('should support mount and update operations', () => {
-    const Grandparent = ({ count }) => (
-      <React.Fragment>
-        <Parent count={count} />
-        <Parent count={count} />
-      </React.Fragment>
-    );
-    const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
-    const Child = () => <div>Hi!</div>;
-
-    const container = document.createElement('div');
-
-    act(() => ReactDOM.render(<Grandparent count={4} />, container));
-    expect(store).toMatchSnapshot('1: mount');
-
-    act(() => ReactDOM.render(<Grandparent count={2} />, container));
-    expect(store).toMatchSnapshot('2: update');
-
-    act(() => ReactDOM.unmountComponentAtNode(container));
-    expect(store).toMatchSnapshot('3: unmount');
+  it('should not allow a root node to be collapsed', () => {
+    // TODO
   });
 
-  it('should support mount and update operations for multiple roots', () => {
-    const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
-    const Child = () => <div>Hi!</div>;
+  describe('collapseNodesByDefault:false', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support mount and update operations', () => {
+      const Grandparent = ({ count }) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      expect(store).toMatchSnapshot('1: mount');
 
-    const containerA = document.createElement('div');
-    const containerB = document.createElement('div');
+      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      expect(store).toMatchSnapshot('2: update');
 
-    act(() => {
-      ReactDOM.render(<Parent key="A" count={3} />, containerA);
-      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
     });
-    expect(store).toMatchSnapshot('1: mount');
 
-    act(() => {
-      ReactDOM.render(<Parent key="A" count={4} />, containerA);
-      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
     });
-    expect(store).toMatchSnapshot('2: update');
 
-    act(() => ReactDOM.unmountComponentAtNode(containerB));
-    expect(store).toMatchSnapshot('3: unmount B');
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
 
-    act(() => ReactDOM.unmountComponentAtNode(containerA));
-    expect(store).toMatchSnapshot('4: unmount A');
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+    });
+
+    it('should display Suspense nodes properly in various states', () => {
+      const Loading = () => <div>Loading...</div>;
+      const SuspendingComponent = () => {
+        throw new Promise(() => {});
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({ shouldSuspense }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading />}>
+            {shouldSuspense ? (
+              <SuspendingComponent />
+            ) : (
+              <Component key="Inside" />
+            )}
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      expect(store).toMatchSnapshot('1: loading');
+
+      act(() => {
+        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+      });
+      expect(store).toMatchSnapshot('2: resolved');
+    });
+
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({ count }) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(4);
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('2: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('3: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('4: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('5: collapse Grandparent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('6: expand Grandparent');
+    });
   });
 
-  it('should filter DOM nodes from the store tree', () => {
-    const Grandparent = () => (
-      <div>
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+
+    it('should support mount and update operations', () => {
+      const Grandparent = ({ count }) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
         <div>
+          <div>
+            <Parent />
+          </div>
           <Parent />
         </div>
-        <Parent />
-      </div>
-    );
-    const Parent = () => (
-      <div>
-        <Child />
-      </div>
-    );
-    const Child = () => <div>Hi!</div>;
-
-    act(() =>
-      ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
-    );
-    expect(store).toMatchSnapshot('1: mount');
-  });
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
 
-  it('should display Suspense nodes properly in various states', () => {
-    const Loading = () => <div>Loading...</div>;
-    const SuspendingComponent = () => {
-      throw new Promise(() => {});
-    };
-    const Component = () => {
-      return <div>Hello</div>;
-    };
-    const Wrapper = ({ shouldSuspense }) => (
-      <React.Fragment>
-        <Component key="Outside" />
-        <React.Suspense fallback={<Loading />}>
-          {shouldSuspense ? (
-            <SuspendingComponent />
-          ) : (
-            <Component key="Inside" />
-          )}
-        </React.Suspense>
-      </React.Fragment>
-    );
-
-    const container = document.createElement('div');
-    act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
-    expect(store).toMatchSnapshot('1: loading');
-
-    act(() => {
-      ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('3: expand Parent');
     });
-    expect(store).toMatchSnapshot('2: resolved');
-  });
 
-  it('should support collapsing parts of the tree', () => {
-    const Grandparent = ({ count }) => (
-      <React.Fragment>
-        <Parent count={count} />
-        <Parent count={count} />
-      </React.Fragment>
-    );
-    const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
-    const Child = () => <div>Hi!</div>;
+    it('should display Suspense nodes properly in various states', () => {
+      const Loading = () => <div>Loading...</div>;
+      const SuspendingComponent = () => {
+        throw new Promise(() => {});
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({ shouldSuspense }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading />}>
+            {shouldSuspense ? (
+              <SuspendingComponent />
+            ) : (
+              <Component key="Inside" />
+            )}
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      expect(store).toMatchSnapshot('1: loading');
 
-    act(() =>
-      ReactDOM.render(<Grandparent count={2} />, document.createElement('div'))
-    );
-    expect(store).toMatchSnapshot('1: mount');
+      // This test isn't meaningful unless we expand the suspended tree
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));
+      expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
 
-    const grandparentID = store.getElementIDAtIndex(0);
-    const parentOneID = store.getElementIDAtIndex(1);
-    const parentTwoID = store.getElementIDAtIndex(4);
+      act(() => {
+        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+      });
+      expect(store).toMatchSnapshot('2: resolved');
+    });
+
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({ count }) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
 
-    act(() => store.toggleIsCollapsed(parentOneID, true));
-    expect(store).toMatchSnapshot('2: collapse first Parent');
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
 
-    act(() => store.toggleIsCollapsed(parentTwoID, true));
-    expect(store).toMatchSnapshot('3: collapse second Parent');
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(2);
 
-    act(() => store.toggleIsCollapsed(parentOneID, false));
-    expect(store).toMatchSnapshot('4: expand first Parent');
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('3: expand first Parent');
 
-    act(() => store.toggleIsCollapsed(grandparentID, true));
-    expect(store).toMatchSnapshot('5: collapse Grandparent');
+      act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchSnapshot('4: expand second Parent');
 
-    act(() => store.toggleIsCollapsed(grandparentID, false));
-    expect(store).toMatchSnapshot('6: expand Grandparent');
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('5: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('6: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('7: collapse Grandparent');
+    });
   });
 });
diff --git a/src/__tests__/storeStress-test.js b/src/__tests__/storeStress-test.js
index ae13007cca7c..12e111adf540 100644
--- a/src/__tests__/storeStress-test.js
+++ b/src/__tests__/storeStress-test.js
@@ -18,6 +18,7 @@ describe('StoreStress', () => {
   beforeEach(() => {
     bridge = global.bridge;
     store = global.store;
+    store.collapseNodesByDefault = false;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 63d87f2544dc..759e6bfc1797 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -36,6 +36,8 @@ const debug = (methodName, ...args) => {
 
 const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
   'React::DevTools::captureScreenshots';
+const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
+  'React::DevTools::collapseNodesByDefault';
 
 const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
 
@@ -61,6 +63,9 @@ export default class Store extends EventEmitter {
 
   _captureScreenshots: boolean = false;
 
+  // Should new nodes be collapsed by default when added to the tree?
+  _collapseNodesByDefault: boolean = true;
+
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -123,6 +128,11 @@ export default class Store extends EventEmitter {
       debug('constructor', 'subscribing to Bridge');
     }
 
+    // Default this setting to true unless otherwise specified.
+    this._collapseNodesByDefault =
+      localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
+      'false';
+
     if (config != null) {
       const {
         isProfiling,
@@ -178,6 +188,20 @@ export default class Store extends EventEmitter {
     this.emit('captureScreenshots');
   }
 
+  get collapseNodesByDefault(): boolean {
+    return this._collapseNodesByDefault;
+  }
+  set collapseNodesByDefault(value: boolean): void {
+    this._collapseNodesByDefault = value;
+
+    localStorage.setItem(
+      LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,
+      value ? 'true' : 'false'
+    );
+
+    this.emit('collapseNodesByDefault');
+  }
+
   get hasOwnerMetadata(): boolean {
     return this._hasOwnerMetadata;
   }
@@ -552,7 +576,7 @@ export default class Store extends EventEmitter {
               depth: -1,
               displayName: null,
               id,
-              isCollapsed: false,
+              isCollapsed: false, // Never collapse roots
               key: null,
               ownerID: 0,
               parentID: 0,
@@ -601,7 +625,7 @@ export default class Store extends EventEmitter {
               depth: parentElement.depth + 1,
               displayName,
               id,
-              isCollapsed: false,
+              isCollapsed: this._collapseNodesByDefault,
               key,
               ownerID,
               parentID: parentElement.id,
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 01afd5a23d40..7dc9755ca2c8 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -14,13 +14,14 @@
 
 .Section {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   margin-right: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
 .Header {
-  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
   font-size: var(--font-size-sans-large);
 }
 
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 1725aa87d278..1c1ed43bcf41 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -15,7 +15,7 @@ function Settings(_: {||}) {
     SettingsContext
   );
 
-  const subscription = useMemo(
+  const captureScreenshotsSubscription = useMemo(
     () => ({
       getCurrentValue: () => store.captureScreenshots,
       subscribe: (callback: Function) => {
@@ -25,7 +25,23 @@ function Settings(_: {||}) {
     }),
     [store]
   );
-  const captureScreenshots = useSubscription<boolean, Store>(subscription);
+  const captureScreenshots = useSubscription<boolean, Store>(
+    captureScreenshotsSubscription
+  );
+
+  const collapseNodesByDefaultSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.collapseNodesByDefault,
+      subscribe: (callback: Function) => {
+        store.addListener('collapseNodesByDefault', callback);
+        return () => store.removeListener('collapseNodesByDefault', callback);
+      },
+    }),
+    [store]
+  );
+  const collapseNodesByDefault = useSubscription<boolean, Store>(
+    collapseNodesByDefaultSubscription
+  );
 
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
@@ -47,6 +63,12 @@ function Settings(_: {||}) {
     },
     [store]
   );
+  const updateCollapseNodesByDefault = useCallback(
+    ({ currentTarget }) => {
+      store.collapseNodesByDefault = currentTarget.checked;
+    },
+    [store]
+  );
 
   return (
     <div className={styles.Settings}>
@@ -85,6 +107,17 @@ function Settings(_: {||}) {
           </label>
         </div>
       </div>
+      <div className={styles.Section}>
+        <div className={styles.Header}>Components tree</div>
+        <label>
+          <input
+            type="checkbox"
+            checked={collapseNodesByDefault}
+            onChange={updateCollapseNodesByDefault}
+          />{' '}
+          Collapse tree by default
+        </label>
+      </div>
       <div className={styles.Section}>
         <div className={styles.Header}>Display density</div>
         <div className={styles.OptionGroup}>
@@ -111,22 +144,24 @@ function Settings(_: {||}) {
         </div>
       </div>
       {store.supportsCaptureScreenshots && (
-        <div className={styles.Section}>
-          <div className={styles.Header}>Profiler</div>
-          <label>
-            <input
-              type="checkbox"
-              checked={captureScreenshots}
-              onChange={updateCaptureScreenshotsWhileProfiling}
-            />{' '}
-            Capture screenshots while profiling
-            {captureScreenshots && (
-              <p className={styles.ScreenshotThrottling}>
-                Screenshots will be throttled in order to reduce the negative
-                impact on performance.
-              </p>
-            )}
-          </label>
+        <div>
+          <div className={styles.Section}>
+            <div className={styles.Header}>Profiler</div>
+            <label>
+              <input
+                type="checkbox"
+                checked={captureScreenshots}
+                onChange={updateCaptureScreenshotsWhileProfiling}
+              />{' '}
+              Capture screenshots while profiling
+            </label>
+          </div>
+          {captureScreenshots && (
+            <div className={styles.ScreenshotThrottling}>
+              Screenshots will be throttled in order to reduce the negative
+              impact on performance.
+            </div>
+          )}
         </div>
       )}
     </div>

From 037bb0034c70d7b4d5be796b1db7042bfe68ab39 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Apr 2019 14:10:06 -0700
Subject: [PATCH 402/814] Throw if root node is collapsed

---
 src/__tests__/__snapshots__/store-test.js.snap |  5 +++++
 src/__tests__/store-test.js                    | 15 ++++++++++++++-
 src/devtools/store.js                          |  6 +++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 7f135dc64180..bb1e82b5dbc9 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -264,3 +264,8 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera
 `;
 
 exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
+[root]
+    <Component>
+`;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 259984b74a5d..fff720322af2 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -22,7 +22,20 @@ describe('Store', () => {
   });
 
   it('should not allow a root node to be collapsed', () => {
-    // TODO
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(<Component count={4} />, document.createElement('div'))
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    expect(store.roots).toHaveLength(1);
+
+    const rootID = store.roots[0];
+
+    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
+      'Root nodes cannot be collapsed'
+    );
   });
 
   describe('collapseNodesByDefault:false', () => {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 759e6bfc1797..425fe9b8da0e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -452,6 +452,10 @@ export default class Store extends EventEmitter {
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
     const element = this.getElementByID(id);
     if (element !== null) {
+      if (element.type === ElementTypeRoot) {
+        throw Error('Root nodes cannot be collapsed');
+      }
+
       const oldWeight = element.isCollapsed ? 1 : element.weight;
       element.isCollapsed = isCollapsed;
       const newWeight = element.isCollapsed ? 1 : element.weight;
@@ -576,7 +580,7 @@ export default class Store extends EventEmitter {
               depth: -1,
               displayName: null,
               id,
-              isCollapsed: false, // Never collapse roots
+              isCollapsed: false, // Never collapse roots; it would hide the entire tree.
               key: null,
               ownerID: 0,
               parentID: 0,

From 178e89927a4f5322311a1f00ca0e771bd7d358ca Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 07:45:33 -0700
Subject: [PATCH 403/814] Fixed some edge cases with collapsed by default.
 Still some bugs existing.

---
 .../__snapshots__/store-test.js.snap          | 63 ++++++++++--
 src/__tests__/setupTests.js                   |  5 +-
 src/__tests__/store-test.js                   | 71 ++++++++++++--
 src/devtools/store.js                         | 96 +++++++++++++++----
 src/devtools/views/Components/TreeContext.js  |  7 +-
 5 files changed, 199 insertions(+), 43 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index bb1e82b5dbc9..bfa9d217b1dd 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -179,19 +179,62 @@ exports[`Store collapseNodesByDefault:true should filter DOM nodes from the stor
     ▸ <Parent>
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 1: mount 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▸ <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
 [root]
   ▸ <Grandparent>
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 2: expand Grandparent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
 [root]
   ▾ <Grandparent>
     ▸ <Parent>
     ▸ <Parent>
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 3: expand first Parent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -200,7 +243,7 @@ exports[`Store collapseNodesByDefault:true should support collapsing parts of th
     ▸ <Parent>
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 4: expand second Parent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -211,7 +254,7 @@ exports[`Store collapseNodesByDefault:true should support collapsing parts of th
         <Child key="1">
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 5: collapse first Parent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▸ <Parent>
@@ -220,14 +263,14 @@ exports[`Store collapseNodesByDefault:true should support collapsing parts of th
         <Child key="1">
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 6: collapse second Parent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
 [root]
   ▾ <Grandparent>
     ▸ <Parent>
     ▸ <Parent>
 `;
 
-exports[`Store collapseNodesByDefault:true should support collapsing parts of the tree: 7: collapse Grandparent 1`] = `
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
 [root]
   ▸ <Grandparent>
 `;
@@ -255,12 +298,14 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera
 
 exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
 [root]
-  ▸ <Grandparent>
+  ▸ <Parent>
+  ▸ <Parent>
 `;
 
 exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
 [root]
-  ▸ <Grandparent>
+  ▸ <Parent>
+  ▸ <Parent>
 `;
 
 exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index fefe83b25875..40475c82456b 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -31,8 +31,11 @@ env.beforeEach(() => {
   const agent = new Agent();
   agent.addBridge(bridge);
 
-  initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
+  initBackend(hook, agent, global);
+
+  global.agent = agent;
   global.bridge = bridge;
   global.store = new Store(bridge);
 });
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index fff720322af2..c4e6b424978e 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -195,22 +195,32 @@ describe('Store', () => {
     });
 
     it('should support mount and update operations', () => {
-      const Grandparent = ({ count }) => (
-        <React.Fragment>
-          <Parent count={count} />
-          <Parent count={count} />
-        </React.Fragment>
-      );
       const Parent = ({ count }) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Parent count={1} />
+            <Parent count={3} />
+          </React.Fragment>,
+          container
+        )
+      );
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Parent count={2} />
+            <Parent count={1} />
+          </React.Fragment>,
+          container
+        )
+      );
       expect(store).toMatchSnapshot('2: update');
 
       act(() => ReactDOM.unmountComponentAtNode(container));
@@ -311,7 +321,7 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('2: resolved');
     });
 
-    it('should support collapsing parts of the tree', () => {
+    it('should support expanding parts of the tree', () => {
       const Grandparent = ({ count }) => (
         <React.Fragment>
           <Parent count={count} />
@@ -353,5 +363,48 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(grandparentID, true));
       expect(store).toMatchSnapshot('7: collapse Grandparent');
     });
+
+    it('should support expanding deep parts of the tree', () => {
+      const Wrapper = ({ forwardedRef }) => (
+        <Nested depth={3} forwardedRef={forwardedRef} />
+      );
+      const Nested = ({ depth, forwardedRef }) =>
+        depth > 0 ? (
+          <Nested depth={depth - 1} forwardedRef={forwardedRef} />
+        ) : (
+          <div ref={forwardedRef} />
+        );
+
+      const ref = React.createRef();
+
+      act(() =>
+        ReactDOM.render(
+          <Wrapper forwardedRef={ref} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const deepestedNodeID = global.agent.getIDForNode(ref.current);
+
+      act(() => store.toggleIsCollapsed(deepestedNodeID, false));
+      expect(store).toMatchSnapshot('2: expand deepest node');
+
+      const rootID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(rootID, true));
+      expect(store).toMatchSnapshot('3: collapse root');
+
+      act(() => store.toggleIsCollapsed(rootID, false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      const id = store.getElementIDAtIndex(1);
+
+      act(() => store.toggleIsCollapsed(id, true));
+      expect(store).toMatchSnapshot('5: collapse middle node');
+
+      act(() => store.toggleIsCollapsed(id, false));
+      expect(store).toMatchSnapshot('6: expand middle node');
+    });
   });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 425fe9b8da0e..2451abd98fca 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -315,9 +315,8 @@ export default class Store extends EventEmitter {
 
     // Find the element in the tree using the weight of each node...
     // Skip over the root itself, because roots aren't visible in the Elements tree.
-    const firstChildID = ((root: any): Element).children[0];
-    let currentElement = ((this._idToElement.get(firstChildID): any): Element);
-    let currentWeight = rootWeight;
+    let currentElement = ((root: any): Element);
+    let currentWeight = rootWeight - 1;
     while (index !== currentWeight) {
       const numChildren = currentElement.children.length;
       for (let i = 0; i < numChildren; i++) {
@@ -449,26 +448,67 @@ export default class Store extends EventEmitter {
     // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
+  // TODO Maybe split this into two methods: expand() and collapse()
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
     const element = this.getElementByID(id);
     if (element !== null) {
-      if (element.type === ElementTypeRoot) {
-        throw Error('Root nodes cannot be collapsed');
-      }
+      if (isCollapsed) {
+        if (element.type === ElementTypeRoot) {
+          throw Error('Root nodes cannot be collapsed');
+        }
+
+        if (element.isCollapsed) {
+          return;
+        }
 
-      const oldWeight = element.isCollapsed ? 1 : element.weight;
-      element.isCollapsed = isCollapsed;
-      const newWeight = element.isCollapsed ? 1 : element.weight;
-      const weightDelta = newWeight - oldWeight;
+        element.isCollapsed = true;
 
-      this._weightAcrossRoots += weightDelta;
+        const weightDelta = 1 - element.weight;
 
-      let parentElement = this._idToElement.get(element.parentID);
-      while (parentElement != null) {
-        parentElement.weight += weightDelta;
-        parentElement = this._idToElement.get(parentElement.parentID);
+        let parentElement = ((this._idToElement.get(
+          element.parentID
+        ): any): Element);
+        while (parentElement != null) {
+          parentElement.weight += weightDelta;
+          parentElement = this._idToElement.get(parentElement.parentID);
+        }
+      } else {
+        let currentElement = element;
+        while (currentElement != null) {
+          const oldWeight = currentElement.isCollapsed
+            ? 1
+            : currentElement.weight;
+          currentElement.isCollapsed = false;
+          const newWeight = currentElement.isCollapsed
+            ? 1
+            : currentElement.weight;
+          const weightDelta = newWeight - oldWeight;
+
+          let parentElement = ((this._idToElement.get(
+            currentElement.parentID
+          ): any): Element);
+          while (parentElement != null) {
+            parentElement.weight += weightDelta;
+            if (parentElement.isCollapsed) {
+              break;
+            }
+            parentElement = this._idToElement.get(parentElement.parentID);
+          }
+
+          currentElement =
+            currentElement.parentID !== 0
+              ? this.getElementByID(currentElement.parentID)
+              : null;
+        }
       }
 
+      let weightAcrossRoots = 0;
+      this._roots.forEach(rootID => {
+        const { weight } = ((this.getElementByID(rootID): any): Element);
+        weightAcrossRoots += weight;
+      });
+      this._weightAcrossRoots = weightAcrossRoots;
+
       // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
       // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
       // Updating the selected search index later may require auto-expanding a collapsed subtree though.
@@ -867,19 +907,23 @@ export default class Store extends EventEmitter {
 
   // Used for Jest snapshot testing.
   // May also be useful for visually debugging the tree, so it lives on the Store.
-  __toSnapshot = () => {
+  __toSnapshot = (includeWeight: boolean = false) => {
     const snapshotLines = [];
 
     let rootWeight = 0;
 
     this._roots.forEach(rootID => {
-      snapshotLines.push('[root]');
-
       const { weight } = ((this.getElementByID(rootID): any): Element);
 
+      snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
+
       for (let i = rootWeight; i < rootWeight + weight; i++) {
         const element = ((this.getElementAtIndex(i): any): Element);
 
+        if (element == null) {
+          throw Error(`No element for index ${i}`);
+        }
+
         let prefix = ' ';
         if (element.children.length > 0) {
           prefix = element.isCollapsed ? '▸' : '▾';
@@ -890,15 +934,29 @@ export default class Store extends EventEmitter {
           key = ` key="${element.key}"`;
         }
 
+        let suffix = '';
+        if (includeWeight) {
+          suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
+        }
+
         snapshotLines.push(
           `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
-            'null'}${key}>`
+            'null'}${key}>${suffix}`
         );
       }
 
       rootWeight += weight;
     });
 
+    // Make sure the pretty-printed test align with the Store's reported number of total rows.
+    if (rootWeight !== this._weightAcrossRoots) {
+      throw Error(
+        `Inconsistent store state. Individual root weights (${rootWeight}) do not match total weight (${
+          this._weightAcrossRoots
+        })`
+      );
+    }
+
     return snapshotLines.join('\n');
   };
 }
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 0a10c4c9591d..0be84a9e1db7 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -748,11 +748,8 @@ function TreeContextController({ children, viewElementSource }: Props) {
 
       if (state.selectedElementID !== null) {
         let element = store.getElementByID(state.selectedElementID);
-        while (element !== null && element.parentID > 0) {
-          element = ((store.getElementByID(element.parentID): any): Element);
-          if (element.isCollapsed) {
-            store.toggleIsCollapsed(element.id, false);
-          }
+        if (element !== null && element.parentID > 0) {
+          store.toggleIsCollapsed(element.parentID, false);
         }
       }
     }

From 74be38912464d63020eb52df016624b9d227335c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 09:39:54 -0700
Subject: [PATCH 404/814] Fixed a bug with re-ordering of children within a
 collapsed node

---
 .../__snapshots__/store-test.js.snap          | 30 +++++++++++++
 src/__tests__/store-test.js                   | 42 +++++++++++++++++++
 src/devtools/store.js                         | 24 +++++++----
 3 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index bfa9d217b1dd..fe37abce49c9 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -138,6 +138,26 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper
 
 exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
+[root]
+  ▾ <Component>
+    ▾ <Foo key="foo">
+        <Component key="0">
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
+[root]
+  ▾ <Component>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
 exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
 [root]
   ▸ <Wrapper>
@@ -310,6 +330,16 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera
 
 exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
+[root]
+  ▸ <Component>
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
+[root]
+  ▸ <Component>
+`;
+
 exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
     <Component>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index c4e6b424978e..bfe0d88da8ff 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -187,6 +187,27 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(grandparentID, false));
       expect(store).toMatchSnapshot('6: expand Grandparent');
     });
+
+    it('should support reordering of children', () => {
+      const Component = ({ children = null }) => children;
+
+      const Foo = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('3: reorder children');
+    });
   });
 
   describe('collapseNodesByDefault:true', () => {
@@ -406,5 +427,26 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(id, false));
       expect(store).toMatchSnapshot('6: expand middle node');
     });
+
+    it('should support reordering of children', () => {
+      const Component = ({ children = null }) => children;
+
+      const Foo = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('3: reorder children');
+    });
   });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 2451abd98fca..817af3daf0c0 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -544,6 +544,7 @@ export default class Store extends EventEmitter {
     }
 
     if (__DEBUG__) {
+      console.groupCollapsed('onBridgeOperations');
       debug('onBridgeOperations', operations);
     }
 
@@ -797,17 +798,19 @@ export default class Store extends EventEmitter {
           element = ((this._idToElement.get(id): any): Element);
           element.children = Array.from(children);
 
-          const prevWeight = element.weight;
-          let childWeight = 0;
+          if (!element.isCollapsed) {
+            const prevWeight = element.weight;
+            let childWeight = 0;
 
-          children.forEach(childID => {
-            const child = ((this._idToElement.get(childID): any): Element);
-            childWeight += child.weight;
-          });
+            children.forEach(childID => {
+              const child = ((this._idToElement.get(childID): any): Element);
+              childWeight += child.weight;
+            });
 
-          element.weight = childWeight + 1;
+            element.weight = childWeight + 1;
 
-          weightDelta = childWeight + 1 - prevWeight;
+            weightDelta = childWeight + 1 - prevWeight;
+          }
           break;
         case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
           // Base duration updates are only sent while profiling is in progress.
@@ -861,6 +864,11 @@ export default class Store extends EventEmitter {
       this.emit('roots');
     }
 
+    if (__DEBUG__) {
+      console.log(this.__toSnapshot(true));
+      console.groupEnd();
+    }
+
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 

From c107e03132638324011b920273df6f19ff70ff45 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 09:45:03 -0700
Subject: [PATCH 405/814] Flow fix

---
 .../__snapshots__/store-test.js.snap          |  8 +++----
 src/__tests__/store-test.js                   | 22 +++++++------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index fe37abce49c9..78585b906b8d 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -140,7 +140,7 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper
 
 exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
 [root]
-  ▾ <Component>
+  ▾ <Root>
     ▾ <Foo key="foo">
         <Component key="0">
     ▾ <Bar key="bar">
@@ -150,7 +150,7 @@ exports[`Store collapseNodesByDefault:false should support reordering of childre
 
 exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
 [root]
-  ▾ <Component>
+  ▾ <Root>
     ▾ <Bar key="bar">
         <Component key="0">
         <Component key="1">
@@ -332,12 +332,12 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera
 
 exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
 [root]
-  ▸ <Component>
+  ▸ <Root>
 `;
 
 exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
 [root]
-  ▸ <Component>
+  ▸ <Root>
 `;
 
 exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index bfe0d88da8ff..d25a9b1a65f4 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -189,7 +189,8 @@ describe('Store', () => {
     });
 
     it('should support reordering of children', () => {
-      const Component = ({ children = null }) => children;
+      const Root = ({ children }) => children;
+      const Component = () => null;
 
       const Foo = () => [<Component key="0" />];
       const Bar = () => [<Component key="0" />, <Component key="1" />];
@@ -198,14 +199,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() =>
-        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
-      );
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() =>
-        ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
-      );
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
     });
   });
@@ -429,7 +426,8 @@ describe('Store', () => {
     });
 
     it('should support reordering of children', () => {
-      const Component = ({ children = null }) => children;
+      const Root = ({ children }) => children;
+      const Component = () => null;
 
       const Foo = () => [<Component key="0" />];
       const Bar = () => [<Component key="0" />, <Component key="1" />];
@@ -438,14 +436,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() =>
-        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
-      );
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() =>
-        ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
-      );
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
     });
   });

From 3fb9f6cdaa47ed0094aed59ec5eb56fcaeca37b8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 11:40:55 -0700
Subject: [PATCH 406/814] Improve contrast for light mode

---
 src/devtools/views/Settings/SettingsContext.js | 3 +++
 src/devtools/views/root.css                    | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index f25f3a8153d9..d7838a2fc959 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -247,6 +247,9 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(theme, 'color-text-color', documentElements);
+
+  // Font smoothing varies based on the theme.
+  updateStyleHelper(theme, 'font-smoothing', documentElements);
 }
 
 export { SettingsContext, SettingsContextController };
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 24ce5b591538..fd71c319ea9c 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -28,7 +28,7 @@
   --light-color-commit-gradient-8: #efbb49;
   --light-color-commit-gradient-9: #febc38;
   --light-color-commit-gradient-text: #000000;
-  --light-color-component-name: #8155cb;
+  --light-color-component-name: #6a51b2;
   --light-color-component-name-inverted: #ffffff;
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
@@ -95,6 +95,11 @@
   --dark-color-selected-foreground: #ffffff;
   --dark-color-text-color: #ffffff;
 
+  /* Font smoothing */
+  --light-font-smoothing: auto;
+  --dark-font-smoothing: antialiased;
+  --font-smoothing: auto;
+
   /* Compact density */
   --compact-font-size-monospace-small: 9px;
   --compact-font-size-monospace-normal: 11px;
@@ -127,5 +132,5 @@
 * {
   box-sizing: border-box;
 
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: var(--font-smoothing);
 }

From 634d4fece2f800d95104eaa4cedf62b751f2a3d9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 13:03:18 -0700
Subject: [PATCH 407/814] Added more inline comments

---
 src/devtools/store.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 817af3daf0c0..99ba142fca24 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -458,6 +458,8 @@ export default class Store extends EventEmitter {
         }
 
         if (element.isCollapsed) {
+          // There's nothing to change in this case.
+          // We can exit early (without even emiting a "mutated" event).
           return;
         }
 
@@ -469,6 +471,8 @@ export default class Store extends EventEmitter {
           element.parentID
         ): any): Element);
         while (parentElement != null) {
+          // We don't need to break on a collapsed parent in the same way as the expand case below.
+          // That's because collapsing a node doesn't "bubble" and affect its parents.
           parentElement.weight += weightDelta;
           parentElement = this._idToElement.get(parentElement.parentID);
         }
@@ -490,6 +494,9 @@ export default class Store extends EventEmitter {
           while (parentElement != null) {
             parentElement.weight += weightDelta;
             if (parentElement.isCollapsed) {
+              // It's important to break on a collapsed parent when expanding nodes.
+              // That's because expanding a node "bubbles" up and expands all parents as well.
+              // Breaking in this case prevents us from over-incrementing the expanded weights.
               break;
             }
             parentElement = this._idToElement.get(parentElement.parentID);

From 75e1e1431b34f68c50f1971e20662540d285eeb6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 13:11:18 -0700
Subject: [PATCH 408/814] Expanded the reorder tests slightly

---
 .../__snapshots__/store-test.js.snap          | 37 +++++++++++++++++++
 src/__tests__/store-test.js                   | 18 +++++++++
 2 files changed, 55 insertions(+)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 78585b906b8d..1e1af1d66965 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -158,6 +158,21 @@ exports[`Store collapseNodesByDefault:false should support reordering of childre
         <Component key="0">
 `;
 
+exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
 exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
 [root]
   ▸ <Wrapper>
@@ -340,6 +355,28 @@ exports[`Store collapseNodesByDefault:true should support reordering of children
   ▸ <Root>
 `;
 
+exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▸ <Bar key="bar">
+    ▸ <Foo key="foo">
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
 exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
     <Component>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index d25a9b1a65f4..5dad4ed956b9 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -204,6 +204,12 @@ describe('Store', () => {
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('4: collapse root');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('5: expand root');
     });
   });
 
@@ -441,6 +447,18 @@ describe('Store', () => {
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
+      });
+      expect(store).toMatchSnapshot('5: expand leaves');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('6: collapse root');
     });
   });
 });

From 7ab93402a8de30fa7e0e885ff40aae2890b901c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Apr 2019 10:22:26 -0700
Subject: [PATCH 409/814] Initial support for v15+ via new legaacy renderer

---
 .gitignore                                    |   3 +-
 fixtures/regression/14.9.html                 |  39 +
 fixtures/regression/15.0.html                 |  39 +
 fixtures/regression/15.1.html                 |  39 +
 fixtures/regression/15.2.html                 |  39 +
 fixtures/regression/15.3.html                 |  39 +
 fixtures/regression/15.4.html                 |  39 +
 fixtures/regression/15.5.html                 |  39 +
 fixtures/regression/15.6.html                 |  39 +
 fixtures/regression/16.0.html                 |  39 +
 fixtures/regression/16.1.html                 |  39 +
 fixtures/regression/16.2.html                 |  39 +
 fixtures/regression/16.3.html                 |  39 +
 fixtures/regression/16.4.html                 |  39 +
 fixtures/regression/16.5.html                 |  41 +
 fixtures/regression/16.6.html                 |  42 +
 fixtures/regression/16.7.html                 |  42 +
 fixtures/regression/canary.html               |  42 +
 fixtures/regression/index.html                |  28 +
 fixtures/regression/next.html                 |  42 +
 fixtures/regression/shared.js                 | 330 ++++++++
 fixtures/regression/styles.css                |  37 +
 src/backend/agent.js                          |   4 +-
 src/backend/index.js                          |   7 +-
 src/backend/legacy/getChildren.js             |  63 ++
 src/backend/legacy/getData.js                 |  46 +
 src/backend/legacy/getElementType.js          |  22 +
 src/backend/legacy/renderer.js                | 787 ++++++++++++++++++
 src/backend/legacy/traverseAllChildrenImpl.js | 146 ++++
 src/backend/legacy/utils.js                   |  55 ++
 src/backend/renderer.js                       |  27 +-
 src/backend/types.js                          |  19 +-
 src/utils.js                                  | 105 ++-
 33 files changed, 2371 insertions(+), 24 deletions(-)
 create mode 100644 fixtures/regression/14.9.html
 create mode 100644 fixtures/regression/15.0.html
 create mode 100644 fixtures/regression/15.1.html
 create mode 100644 fixtures/regression/15.2.html
 create mode 100644 fixtures/regression/15.3.html
 create mode 100644 fixtures/regression/15.4.html
 create mode 100644 fixtures/regression/15.5.html
 create mode 100644 fixtures/regression/15.6.html
 create mode 100644 fixtures/regression/16.0.html
 create mode 100644 fixtures/regression/16.1.html
 create mode 100644 fixtures/regression/16.2.html
 create mode 100644 fixtures/regression/16.3.html
 create mode 100644 fixtures/regression/16.4.html
 create mode 100644 fixtures/regression/16.5.html
 create mode 100644 fixtures/regression/16.6.html
 create mode 100644 fixtures/regression/16.7.html
 create mode 100644 fixtures/regression/canary.html
 create mode 100644 fixtures/regression/index.html
 create mode 100644 fixtures/regression/next.html
 create mode 100644 fixtures/regression/shared.js
 create mode 100644 fixtures/regression/styles.css
 create mode 100644 src/backend/legacy/getChildren.js
 create mode 100644 src/backend/legacy/getData.js
 create mode 100644 src/backend/legacy/getElementType.js
 create mode 100644 src/backend/legacy/renderer.js
 create mode 100644 src/backend/legacy/traverseAllChildrenImpl.js
 create mode 100644 src/backend/legacy/utils.js

diff --git a/.gitignore b/.gitignore
index 85e420fd9f81..b3eab0762585 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,4 @@ yarn-error.log
 .vscode
 .idea
 .watchmanconfig
-key.pem
-
+key.pem
\ No newline at end of file
diff --git a/fixtures/regression/14.9.html b/fixtures/regression/14.9.html
new file mode 100644
index 000000000000..e92a3083011a
--- /dev/null
+++ b/fixtures/regression/14.9.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 14.9</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/14.9.html">http://localhost:9000/fixtures/regression/14.9.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.0.html b/fixtures/regression/15.0.html
new file mode 100644
index 000000000000..b3f05333c273
--- /dev/null
+++ b/fixtures/regression/15.0.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.0</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.0/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.0.html">http://localhost:9000/fixtures/regression/15.0.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.1.html b/fixtures/regression/15.1.html
new file mode 100644
index 000000000000..8712b56a9e6f
--- /dev/null
+++ b/fixtures/regression/15.1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.1</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.1/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.1.html">http://localhost:9000/fixtures/regression/15.1.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.2.html b/fixtures/regression/15.2.html
new file mode 100644
index 000000000000..acde32fe2140
--- /dev/null
+++ b/fixtures/regression/15.2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.2</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.2/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.2.html">http://localhost:9000/fixtures/regression/15.2.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.3.html b/fixtures/regression/15.3.html
new file mode 100644
index 000000000000..ced3559ea6c4
--- /dev/null
+++ b/fixtures/regression/15.3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.3</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.3/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.3.html">http://localhost:9000/fixtures/regression/15.3.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.4.html b/fixtures/regression/15.4.html
new file mode 100644
index 000000000000..0f23cdea7db1
--- /dev/null
+++ b/fixtures/regression/15.4.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.4</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.4/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.4.html">http://localhost:9000/fixtures/regression/15.4.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.5.html b/fixtures/regression/15.5.html
new file mode 100644
index 000000000000..361512d9bd26
--- /dev/null
+++ b/fixtures/regression/15.5.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.5</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.5/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.5.html">http://localhost:9000/fixtures/regression/15.5.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/15.6.html b/fixtures/regression/15.6.html
new file mode 100644
index 000000000000..97ff99ccf505
--- /dev/null
+++ b/fixtures/regression/15.6.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.6</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.6/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/15.6.html">http://localhost:9000/fixtures/regression/15.6.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.0.html b/fixtures/regression/16.0.html
new file mode 100644
index 000000000000..ea5cf812c99d
--- /dev/null
+++ b/fixtures/regression/16.0.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.0</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.0.html">http://localhost:9000/fixtures/regression/16.0.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.1.html b/fixtures/regression/16.1.html
new file mode 100644
index 000000000000..494cc979004d
--- /dev/null
+++ b/fixtures/regression/16.1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.1</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.1.html">http://localhost:9000/fixtures/regression/16.1.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.2.html b/fixtures/regression/16.2.html
new file mode 100644
index 000000000000..b1c3186720e5
--- /dev/null
+++ b/fixtures/regression/16.2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.2</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.2.html">http://localhost:9000/fixtures/regression/16.2.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.3.html b/fixtures/regression/16.3.html
new file mode 100644
index 000000000000..76799903d80f
--- /dev/null
+++ b/fixtures/regression/16.3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.3</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.3.html">http://localhost:9000/fixtures/regression/16.3.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.4.html b/fixtures/regression/16.4.html
new file mode 100644
index 000000000000..ca6c30dec121
--- /dev/null
+++ b/fixtures/regression/16.4.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.4</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.4.html">http://localhost:9000/fixtures/regression/16.4.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.5.html b/fixtures/regression/16.5.html
new file mode 100644
index 000000000000..48e14a457c1a
--- /dev/null
+++ b/fixtures/regression/16.5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.5</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
+    <script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.5/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.5.html">http://localhost:9000/fixtures/regression/16.5.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.6.html b/fixtures/regression/16.6.html
new file mode 100644
index 000000000000..ca32dc5b9cd9
--- /dev/null
+++ b/fixtures/regression/16.6.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.6</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.6/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.6.html">http://localhost:9000/fixtures/regression/16.6.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/16.7.html b/fixtures/regression/16.7.html
new file mode 100644
index 000000000000..2b7ec759fa24
--- /dev/null
+++ b/fixtures/regression/16.7.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.7</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/16.7.html">http://localhost:9000/fixtures/regression/16.7.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/canary.html b/fixtures/regression/canary.html
new file mode 100644
index 000000000000..cd25e6162aa8
--- /dev/null
+++ b/fixtures/regression/canary.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React canary</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@canary/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/canary.html">http://localhost:9000/fixtures/regression/canary.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/index.html b/fixtures/regression/index.html
new file mode 100644
index 000000000000..125a8e8baf9b
--- /dev/null
+++ b/fixtures/regression/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React DevTools regression test</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <iframe src="canary.html"></iframe>
+    <iframe src="next.html"></iframe>
+    <iframe src="16.7.html"></iframe>
+    <iframe src="16.6.html"></iframe>
+    <iframe src="16.5.html"></iframe>
+    <iframe src="16.4.html"></iframe>
+    <iframe src="16.3.html"></iframe>
+    <iframe src="16.2.html"></iframe>
+    <iframe src="16.1.html"></iframe>
+    <iframe src="16.0.html"></iframe>
+    <iframe src="15.6.html"></iframe>
+    <iframe src="15.5.html"></iframe>
+    <iframe src="15.4.html"></iframe>
+    <iframe src="15.3.html"></iframe>
+    <iframe src="15.2.html"></iframe>
+    <iframe src="15.1.html"></iframe>
+    <iframe src="15.0.html"></iframe>
+    <iframe src="14.9.html"></iframe>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/next.html b/fixtures/regression/next.html
new file mode 100644
index 000000000000..c457f03accad
--- /dev/null
+++ b/fixtures/regression/next.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React next</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@next/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/fixtures/regression/next.html">http://localhost:9000/fixtures/regression/next.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/regression/shared.js b/fixtures/regression/shared.js
new file mode 100644
index 000000000000..362e02e9113c
--- /dev/null
+++ b/fixtures/regression/shared.js
@@ -0,0 +1,330 @@
+/* eslint-disable no-fallthrough, react/react-in-jsx-scope, react/jsx-no-undef */
+/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing  */
+
+const apps = [];
+
+const pieces = React.version.split('.');
+const major =
+  pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);
+const minor =
+  pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
+
+// Convenience wrapper to organize API features in DevTools.
+function Feature({ children, label, version }) {
+  return (
+    <div className="Feature">
+      <div className="FeatureHeader">
+        <code className="FeatureCode">{label}</code>
+        <small>{version}</small>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// Simplify interaction tracing for tests below.
+let trace = null;
+if (typeof SchedulerTracing !== 'undefined') {
+  trace = SchedulerTracing.unstable_trace;
+} else if (typeof ScheduleTracing !== 'undefined') {
+  trace = ScheduleTracing.unstable_trace;
+} else {
+  trace = (_, __, callback) => callback();
+}
+
+// https://github.com/facebook/react/blob/master/CHANGELOG.md
+switch (major) {
+  case 16:
+    switch (minor) {
+      case 7:
+        if (typeof React.useState === 'function') {
+          // Hooks
+          function Hooks() {
+            const [count, setCount] = React.useState(0);
+            const incrementCount = React.useCallback(
+              () => setCount(count + 1),
+              [count]
+            );
+            return (
+              <div>
+                count: {count}{' '}
+                <button onClick={incrementCount}>increment</button>
+              </div>
+            );
+          }
+          apps.push(
+            <Feature key="Hooks" label="Hooks" version="16.7+">
+              <Hooks />
+            </Feature>
+          );
+        }
+      case 6:
+        // memo
+        function LabelComponent({ label }) {
+          return <label>{label}</label>;
+        }
+        const AnonymousMemoized = React.memo(({ label }) => (
+          <label>{label}</label>
+        ));
+        const Memoized = React.memo(LabelComponent);
+        const CustomMemoized = React.memo(LabelComponent);
+        CustomMemoized.displayName = 'MemoizedLabelFunction';
+        apps.push(
+          <Feature key="memo" label="memo" version="16.6+">
+            <AnonymousMemoized label="AnonymousMemoized" />
+            <Memoized label="Memoized" />
+            <CustomMemoized label="CustomMemoized" />
+          </Feature>
+        );
+
+        // Suspense
+        const loadResource = ([text, ms]) => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              resolve(text);
+            }, ms);
+          });
+        };
+        const getResourceKey = ([text, ms]) => text;
+        const Resource = ReactCache.unstable_createResource(
+          loadResource,
+          getResourceKey
+        );
+        class Suspending extends React.Component {
+          state = { useSuspense: false };
+          useSuspense = () => this.setState({ useSuspense: true });
+          render() {
+            if (this.state.useSuspense) {
+              const text = Resource.read(['loaded', 2000]);
+              return text;
+            } else {
+              return <button onClick={this.useSuspense}>load data</button>;
+            }
+          }
+        }
+        apps.push(
+          <Feature key="Suspense" label="Suspense" version="16.6+">
+            <React.Suspense fallback={<div>loading...</div>}>
+              <Suspending />
+            </React.Suspense>
+          </Feature>
+        );
+
+        // lazy
+        const LazyWithDefaultProps = React.lazy(
+          () =>
+            new Promise(resolve => {
+              function FooWithDefaultProps(props) {
+                return (
+                  <h1>
+                    {props.greeting}, {props.name}
+                  </h1>
+                );
+              }
+              FooWithDefaultProps.defaultProps = {
+                name: 'World',
+                greeting: 'Bonjour',
+              };
+              resolve({
+                default: FooWithDefaultProps,
+              });
+            })
+        );
+        apps.push(
+          <Feature key="lazy" label="lazy" version="16.6+">
+            <React.Suspense fallback={<div>loading...</div>}>
+              <LazyWithDefaultProps greeting="Hello" />
+            </React.Suspense>
+          </Feature>
+        );
+      case 5:
+      case 4:
+        // unstable_Profiler
+        class ProfilerChild extends React.Component {
+          state = { count: 0 };
+          incrementCount = () =>
+            this.setState(prevState => ({ count: prevState.count + 1 }));
+          render() {
+            return (
+              <div>
+                count: {this.state.count}{' '}
+                <button onClick={this.incrementCount}>increment</button>
+              </div>
+            );
+          }
+        }
+        const onRender = (...args) => console.log('onRender()', ...args);
+        const Profiler = React.unstable_Profiler || React.Profiler;
+        apps.push(
+          <Feature
+            key="unstable_Profiler"
+            label="unstable_Profiler"
+            version="16.4+"
+          >
+            <Profiler id="count" onRender={onRender}>
+              <div>
+                <ProfilerChild />
+              </div>
+            </Profiler>
+          </Feature>
+        );
+      case 3:
+        // createContext()
+        const LocaleContext = React.createContext();
+        LocaleContext.displayName = 'LocaleContext';
+        const ThemeContext = React.createContext();
+        apps.push(
+          <Feature key="createContext" label="createContext" version="16.3+">
+            <ThemeContext.Provider value="blue">
+              <ThemeContext.Consumer>
+                {theme => <div>theme: {theme}</div>}
+              </ThemeContext.Consumer>
+            </ThemeContext.Provider>
+            <LocaleContext.Provider value="en-US">
+              <LocaleContext.Consumer>
+                {locale => <div>locale: {locale}</div>}
+              </LocaleContext.Consumer>
+            </LocaleContext.Provider>
+          </Feature>
+        );
+
+        // forwardRef()
+        const AnonymousFunction = React.forwardRef((props, ref) => (
+          <div ref={ref}>{props.children}</div>
+        ));
+        const NamedFunction = React.forwardRef(function named(props, ref) {
+          return <div ref={ref}>{props.children}</div>;
+        });
+        const CustomName = React.forwardRef((props, ref) => (
+          <div ref={ref}>{props.children}</div>
+        ));
+        CustomName.displayName = 'CustomNameForwardRef';
+        apps.push(
+          <Feature key="forwardRef" label="forwardRef" version="16.3+">
+            <AnonymousFunction>AnonymousFunction</AnonymousFunction>
+            <NamedFunction>NamedFunction</NamedFunction>
+            <CustomName>CustomName</CustomName>
+          </Feature>
+        );
+
+        // StrictMode
+        class StrictModeChild extends React.Component {
+          render() {
+            return 'StrictModeChild';
+          }
+        }
+        apps.push(
+          <Feature key="StrictMode" label="StrictMode" version="16.3+">
+            <React.StrictMode>
+              <StrictModeChild />
+            </React.StrictMode>
+          </Feature>
+        );
+
+        // unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)
+        const ConcurrentMode =
+          React.ConcurrentMode ||
+          React.unstable_ConcurrentMode ||
+          React.unstable_AsyncMode;
+        apps.push(
+          <Feature
+            key="AsyncMode/ConcurrentMode"
+            label="AsyncMode/ConcurrentMode"
+            version="16.3+"
+          >
+            <ConcurrentMode>
+              <div>
+                unstable_AsyncMode was added in 16.3, renamed to
+                unstable_ConcurrentMode in 16.5, and then renamed to
+                ConcurrentMode in 16.7
+              </div>
+            </ConcurrentMode>
+          </Feature>
+        );
+      case 2:
+        // Fragment
+        apps.push(
+          <Feature key="Fragment" label="Fragment" version="16.4+">
+            <React.Fragment>
+              <div>one</div>
+              <div>two</div>
+            </React.Fragment>
+          </Feature>
+        );
+      case 1:
+      case 0:
+      default:
+        break;
+    }
+    break;
+  case 15:
+    break;
+  case 14:
+    break;
+  default:
+    break;
+}
+
+function Even() {
+  return <small>(even)</small>;
+}
+
+// Simple stateful app shared by all React versions
+class SimpleApp extends React.Component {
+  state = { count: 0 };
+  incrementCount = () => {
+    const updaterFn = prevState => ({ count: prevState.count + 1 });
+    trace('Updating count', performance.now(), () => this.setState(updaterFn));
+  };
+  render() {
+    const { count } = this.state;
+    return (
+      <div>
+        {count % 2 === 0 ? (
+          <span>
+            count: {count} <Even />
+          </span>
+        ) : (
+          <span>count: {count}</span>
+        )}{' '}
+        <button onClick={this.incrementCount}>increment</button>
+      </div>
+    );
+  }
+}
+apps.push(
+  <Feature key="Simple stateful app" label="Simple stateful app" version="any">
+    <SimpleApp />
+  </Feature>
+);
+
+// This component, with the version prop, helps organize DevTools at a glance.
+function TopLevelWrapperForDevTools({ version }) {
+  let header = <h1>React {version}</h1>;
+  if (version.includes('canary')) {
+    const commitSha = version.match(/.+canary-(.+)/)[1];
+    header = (
+      <h1>
+        React canary{' '}
+        <a href={`https://github.com/facebook/react/commit/${commitSha}`}>
+          {commitSha}
+        </a>
+      </h1>
+    );
+  } else if (version.includes('alpha')) {
+    header = <h1>React next</h1>;
+  }
+
+  return (
+    <div>
+      {header}
+      {apps}
+    </div>
+  );
+}
+TopLevelWrapperForDevTools.displayName = 'React';
+
+ReactDOM.render(
+  <TopLevelWrapperForDevTools version={React.version} />,
+  document.getElementById('root')
+);
diff --git a/fixtures/regression/styles.css b/fixtures/regression/styles.css
new file mode 100644
index 000000000000..6cbaaa5c0149
--- /dev/null
+++ b/fixtures/regression/styles.css
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 20px;
+}
+
+h2 {
+  margin: 1rem 0 0;
+}
+
+iframe {
+  border: 1px solid #ddd;
+  border-radius: 0.5rem;
+}
+
+code {
+  white-space: nowrap;
+}
+
+.Feature {
+  margin: 1rem 0;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 1rem;
+}
+.FeatureHeader {
+  font-size: 16px;
+  margin-bottom: 0.5rem;
+}
+.FeatureCode {
+  background-color: #eee;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
diff --git a/src/backend/agent.js b/src/backend/agent.js
index f1f7532e1f2c..5ca569664606 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -113,7 +113,7 @@ export default class Agent extends EventEmitter {
         const renderer = ((this._rendererInterfaces[
           (rendererID: any)
         ]: any): RendererInterface);
-        return renderer.getFiberIDFromNative(node, true);
+        return renderer.getInternalIDFromNative(node, true);
       } catch (e) {}
     }
     return null;
@@ -253,7 +253,7 @@ export default class Agent extends EventEmitter {
 
     let node: HTMLElement | null = null;
     if (renderer !== null) {
-      node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
+      node = ((renderer.getNativeFromInternal(id): any): HTMLElement);
     }
 
     if (node != null) {
diff --git a/src/backend/index.js b/src/backend/index.js
index 298d06a121e7..2df5c21154ab 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -4,6 +4,7 @@ import type { DevToolsHook, ReactRenderer, RendererInterface } from './types';
 import Agent from './agent';
 
 import { attach } from './renderer';
+import { attach as attachLegacy } from './legacy/renderer';
 
 export function initBackend(
   hook: DevToolsHook,
@@ -40,7 +41,11 @@ export function initBackend(
 
     // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
     if (!rendererInterface) {
-      rendererInterface = attach(hook, id, renderer, global);
+      if (typeof renderer.findFiberByHostInstance === 'function') {
+        rendererInterface = attach(hook, id, renderer, global);
+      } else {
+        rendererInterface = attachLegacy(hook, id, renderer, global);
+      }
 
       hook.rendererInterfaces.set(id, rendererInterface);
     }
diff --git a/src/backend/legacy/getChildren.js b/src/backend/legacy/getChildren.js
new file mode 100644
index 000000000000..1ed8b52e083e
--- /dev/null
+++ b/src/backend/legacy/getChildren.js
@@ -0,0 +1,63 @@
+// @flow
+
+export default function getChildren(internalInstance: Object): Array<any> {
+  // If the parent is a native node without rendered children, but with
+  // multiple string children, then the `element` that gets passed in here is
+  // a plain value -- a string or number.
+  if (internalInstance._renderedComponent) {
+    return [internalInstance._renderedComponent];
+  } else if (internalInstance._renderedChildren) {
+    return childrenToArray(internalInstance._renderedChildren);
+  } else if (
+    internalInstance._currentElement &&
+    internalInstance._currentElement.props
+  ) {
+    // DevTools doesn't need to display primative child types,
+    // So we can filter them out early.
+    /*
+    const children = [];
+
+    // This is a native node without rendered children -- meaning the children
+    // prop is the unfiltered list of children.
+    // This may include 'null' or even other invalid values, so we need to
+    // filter it the same way that ReactDOM does.
+    // Instead of pulling in the whole React library, we just copied over the
+    // 'traverseAllChildrenImpl' method.
+    // https://github.com/facebook/react/blob/240b84ed8e1db715d759afaae85033718a0b24e1/src/isomorphic/children/ReactChildren.js#L112-L158
+    const unfilteredChildren = internalInstance._currentElement.props.children;
+    traverseAllChildrenImpl(
+      unfilteredChildren,
+      '', // nameSoFar
+      (_traverseContext, child) => {
+        const childType = typeof child;
+        if (childType === 'string' || childType === 'number') {
+          children.push(child);
+        }
+      }
+      // traverseContext
+    );
+
+    return children;
+    */
+  }
+
+  if (internalInstance._instance) {
+    var inst = internalInstance._instance;
+    // TODO: React ART currently falls in this bucket, but this doesn't
+    // actually make sense and we should clean this up after stabilizing our
+    // API for backends
+    if (inst._renderedChildren) {
+      return childrenToArray(inst._renderedChildren);
+    }
+  }
+
+  return [];
+}
+
+function childrenToArray(children) {
+  const array = [];
+  for (var name in children) {
+    array.push(children[name]);
+  }
+  return array;
+}
diff --git a/src/backend/legacy/getData.js b/src/backend/legacy/getData.js
new file mode 100644
index 000000000000..200fd767a434
--- /dev/null
+++ b/src/backend/legacy/getData.js
@@ -0,0 +1,46 @@
+// @flow
+
+import {
+  ElementTypeClass,
+  ElementTypeOtherOrUnknown,
+} from 'src/devtools/types';
+import { getDisplayName } from 'src/utils';
+
+import type { InternalInstance } from './renderer';
+import type { FiberData } from '../types';
+
+export default function getData(internalInstance: InternalInstance): FiberData {
+  let displayName = null;
+  let key = null;
+  let type = ElementTypeOtherOrUnknown;
+
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    if (internalInstance._currentElement.key) {
+      key = String(internalInstance._currentElement.key);
+    }
+
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'string') {
+      // ...
+    } else if (typeof elementType === 'function') {
+      // TODO Can we differentiate between function and class component types?
+      //      Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14
+      //      getPublicInstance() returns null for function components
+      type = ElementTypeClass;
+      displayName = getDisplayName(elementType);
+    } else if (typeof internalInstance._stringText === 'string') {
+      // ...
+    } else {
+      // TODO What kind of case does this cover?
+      console.log('what is this type?');
+      displayName = getDisplayName(elementType);
+    }
+  }
+
+  return {
+    displayName,
+    key,
+    type,
+  };
+}
diff --git a/src/backend/legacy/getElementType.js b/src/backend/legacy/getElementType.js
new file mode 100644
index 000000000000..1740cfe9adf0
--- /dev/null
+++ b/src/backend/legacy/getElementType.js
@@ -0,0 +1,22 @@
+// @flow
+import {
+  ElementTypeClass,
+  ElementTypeOtherOrUnknown,
+} from 'src/devtools/types';
+
+import type { InternalInstance } from './renderer';
+import type { ElementType } from 'src/devtools/types';
+
+export default function getElementType(
+  internalInstance: InternalInstance
+): ElementType {
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'function') {
+      return ElementTypeClass;
+    }
+  }
+
+  return ElementTypeOtherOrUnknown;
+}
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
new file mode 100644
index 000000000000..5d4afa1eb50d
--- /dev/null
+++ b/src/backend/legacy/renderer.js
@@ -0,0 +1,787 @@
+// @flow
+
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+  ElementTypeRoot,
+  ElementTypeOtherOrUnknown,
+} from 'src/devtools/types';
+import { getUID, utfEncodeString, operationsArrayToString } from '../../utils';
+import { cleanForBridge, copyWithSet } from '../utils';
+import {
+  __DEBUG__,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+} from '../../constants';
+import getChildren from './getChildren';
+import getData from './getData';
+import getElementType from './getElementType';
+import {
+  decorateResult,
+  decorateMany,
+  forceUpdate,
+  restoreMany,
+} from './utils';
+
+import type {
+  DevToolsHook,
+  GetInternalIDFromNative,
+  GetNativeFromInternal,
+  NativeType,
+  RendererInterface,
+} from '../types';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
+
+export type InternalInstance = Object;
+type LegacyRenderer = Object;
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: LegacyRenderer,
+  global: Object
+): RendererInterface {
+  const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
+  const idToParentIDMap: Map<number, number> = new Map();
+  const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();
+  const mountedIDs: Set<number> = new Set();
+  const pendingMountIDs: Set<number> = new Set();
+  const pendingUnmountIDs: Set<number> = new Set();
+  const rootIDs: Set<number> = new Set();
+
+  function getID(internalInstance: InternalInstance): number {
+    if (!internalInstanceToIDMap.has(internalInstance)) {
+      const id = getUID();
+      internalInstanceToIDMap.set(internalInstance, id);
+      idToInternalInstanceMap.set(id, internalInstance);
+    }
+    return ((internalInstanceToIDMap.get(internalInstance): any): number);
+  }
+
+  function getChildIDs(internalInstance: InternalInstance): Array<number> {
+    return getChildren(internalInstance).map(getID);
+  }
+
+  //function getParentID(internalInstance: InternalInstance): number {
+  //  return getID(internalInstance._hostParent);
+  //}
+
+  function findNearestAncestorInTree(
+    internalInstance: InternalInstance
+  ): number | null {
+    let current = internalInstance;
+    while (current != null) {
+      const id = getID(current);
+      if (
+        rootIDs.has(id) ||
+        getElementType(current) !== ElementTypeOtherOrUnknown
+      ) {
+        return id;
+      }
+      const parentID = idToParentIDMap.get(id);
+      current = parentID != null ? idToInternalInstanceMap.get(parentID) : null;
+    }
+    return null;
+  }
+
+  let getInternalIDFromNative: GetInternalIDFromNative = ((null: any): GetInternalIDFromNative);
+  let getNativeFromInternal: (
+    id: number
+  ) => ?NativeType = ((null: any): GetNativeFromInternal);
+
+  // React Native
+  if (renderer.Mount.findNodeHandle && renderer.Mount.nativeTagToRootNodeID) {
+    getInternalIDFromNative = (nativeTag, findNearestUnfilteredAncestor) => {
+      const internalInstance = renderer.Mount.nativeTagToRootNodeID(nativeTag);
+      return findNearestAncestorInTree(internalInstance);
+    };
+    getNativeFromInternal = (id: number) => {
+      const internalInstance = idToInternalInstanceMap.get(id);
+      return renderer.Mount.findNodeHandle(internalInstance);
+    };
+
+    // React DOM 15+
+  } else if (renderer.ComponentTree) {
+    getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {
+      const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(
+        node
+      );
+      return findNearestAncestorInTree(internalInstance);
+    };
+    getNativeFromInternal = (id: number) => {
+      const internalInstance = idToInternalInstanceMap.get(id);
+      return renderer.ComponentTree.getNodeFromInstance(internalInstance);
+    };
+
+    // React DOM
+  } else if (renderer.Mount.getID && renderer.Mount.getNode) {
+    getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {
+      let id = renderer.Mount.getID(node);
+      while (node && node.parentNode && !id) {
+        node = node.parentNode;
+        id = renderer.Mount.getID(node);
+      }
+      return id;
+    };
+
+    getNativeFromInternal = (id: number) => {
+      try {
+        const internalInstance = idToInternalInstanceMap.get(id);
+        if (internalInstance != null) {
+          return renderer.Mount.getNode(internalInstance._rootNodeID);
+        }
+      } catch (e) {}
+
+      return null;
+    };
+  } else {
+    console.warn(
+      'Unknown React version (does not have getID), probably an unshimmed React Native'
+    );
+  }
+
+  let oldReconcilerMethods = null;
+  let oldRenderComponent = null;
+  let oldRenderRoot = null;
+
+  // React DOM
+  if (renderer.Mount._renderNewRootComponent) {
+    oldRenderRoot = decorateResult(
+      renderer.Mount,
+      '_renderNewRootComponent',
+      internalInstance => {
+        const id = getID(internalInstance);
+
+        rootIDs.add(id);
+
+        if (__DEBUG__) {
+          console.log('renderer.Mount._renderNewRootComponent()', id);
+        }
+
+        recordPendingMount(internalInstance);
+
+        // If we're mounting a root, we've just finished a batch of work,
+        // so it's safe to synchronously flush.
+        flushPendingEvents(id);
+      }
+    );
+
+    // React Native
+  } else if (renderer.Mount.renderComponent) {
+    oldRenderComponent = decorateResult(
+      renderer.Mount,
+      'renderComponent',
+      internalInstance => {
+        const id = getID(internalInstance);
+
+        rootIDs.add(id);
+
+        if (__DEBUG__) {
+          console.log('renderer.Mount.renderComponent()', id);
+        }
+
+        recordPendingMount(internalInstance);
+
+        // If we're mounting a root, we've just finished a batch of work,
+        // so it's safe to synchronously flush.
+        flushPendingEvents(id);
+      }
+    );
+  }
+
+  if (renderer.Reconciler) {
+    oldReconcilerMethods = decorateMany(renderer.Reconciler, {
+      mountComponent(internalInstance, rootID, transaction, context) {
+        recordPendingMount(internalInstance);
+      },
+      performUpdateIfNecessary(
+        internalInstance,
+        nextChild,
+        transaction,
+        context
+      ) {
+        // TODO Check for change in order of children
+      },
+      receiveComponent(internalInstance, nextChild, transaction, context) {
+        // TODO Check for change in order of children
+      },
+      unmountComponent(internalInstance) {
+        recordPendingUnmount(internalInstance);
+      },
+    });
+  }
+
+  function cleanup() {
+    if (oldReconcilerMethods !== null) {
+      if (renderer.Component) {
+        restoreMany(renderer.Component.Mixin, oldReconcilerMethods);
+      } else {
+        restoreMany(renderer.Reconciler, oldReconcilerMethods);
+      }
+    }
+    if (oldRenderRoot !== null) {
+      renderer.Mount._renderNewRootComponent = oldRenderRoot;
+    }
+    if (oldRenderComponent !== null) {
+      renderer.Mount.renderComponent = oldRenderComponent;
+    }
+    oldReconcilerMethods = null;
+    oldRenderRoot = null;
+    oldRenderComponent = null;
+  }
+
+  let pendingOperations: Uint32Array = new Uint32Array(0);
+
+  function addOperation(
+    newAction: Uint32Array,
+    addToStartOfQueue: boolean = false
+  ): void {
+    const oldActions = pendingOperations;
+    pendingOperations = new Uint32Array(oldActions.length + newAction.length);
+    if (addToStartOfQueue) {
+      pendingOperations.set(newAction);
+      pendingOperations.set(oldActions, newAction.length);
+    } else {
+      pendingOperations.set(oldActions);
+      pendingOperations.set(newAction, oldActions.length);
+    }
+  }
+
+  // TODO Rethink the below queueing mechanism.
+  // Every mount is some parent's update (except for the root mount which we can explicitly handle)
+  // So maybe we only need to call queueFlushPendingEvents() for updates,
+  // and maybe we can rely on an id-to-root Map for this case, to limit the scope of what  we crawl.
+
+  // Older React renderers did not have the concept of a commit.
+  // The data structure was just ad-hoc mutated in place.
+  // So except for the case of the root mounting the first time,
+  // there is no event we can observe to signal that a render is finished.
+  // However since older renderers were always synchronous,
+  // we can use setTimeout to batch operations together.
+  // In the case of a cascading update, we might batch multiple "commits"-
+  // but that should be okay, since the batching is not strictly necessary.
+  let flushPendingEventsTimeoutID: TimeoutID | null = null;
+  function queueFlushPendingEvents() {
+    if (flushPendingEventsTimeoutID === null) {
+      flushPendingEventsTimeoutID = setTimeout(() => {
+        flushPendingEventsTimeoutID = null;
+
+        // If there are pending operations, walk the tree and find them.
+        // Ideally we wouldjust pluck the pending operations out of the sets directly,
+        // but without doing a full traversal, it would be hard for us to determine the filtered parent.
+        // It should be possible to improve this though, by maintaining a map of id-to-parent,
+        // and crawling upward to the first non-filtered node.
+        // TODO Revisit this and think about it more...
+        if (pendingMountIDs.size > 0 || pendingUnmountIDs.size > 0) {
+          rootIDs.forEach(flushPendingEvents);
+        }
+      }, 0);
+    }
+  }
+
+  function flushInitialOperations() {
+    // Older versions of React do not support profiling mode, so there's nothing to flush.
+    // Crawl roots though and register any nodes that mounted before we were injected.
+
+    const roots =
+      renderer.Mount._instancesByReactRootID ||
+      renderer.Mount._instancesByContainerID;
+
+    for (let key in roots) {
+      const internalInstance = roots[key];
+      const id = getID(internalInstance);
+
+      rootIDs.add(id);
+
+      crawlAndRecordMounts(id, 0, true);
+
+      // It's safe to synchronously flush for the root we just crawled.
+      flushPendingEvents(id);
+    }
+  }
+
+  function crawlAndRecordMounts(
+    id: number,
+    parentID: number,
+    isInitialMount: boolean
+  ) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    const shouldIncludeInTree =
+      parentID === 0 ||
+      getElementType(internalInstance) !== ElementTypeOtherOrUnknown;
+
+    // Not all nodes are mounted in the frontend DevTools tree,
+    // but it's important to track parent info even for the unmounted ones.
+    idToParentIDMap.set(id, parentID);
+
+    if (__DEBUG__) {
+      console.group(
+        'crawlAndRecordMounts() id:',
+        id,
+        'shouldIncludeInTree?',
+        shouldIncludeInTree
+      );
+    }
+
+    if (shouldIncludeInTree) {
+      const didMount = isInitialMount || pendingMountIDs.has(id);
+      const didUnmount = pendingUnmountIDs.has(id);
+
+      // If this node was both mounted and unmounted in the same batch,
+      // just skip it and don't send any update.
+      if (didMount && didUnmount) {
+        pendingUnmountIDs.delete(id);
+        return;
+      } else if (didMount) {
+        recordMount(id, parentID);
+      }
+    }
+
+    getChildIDs(internalInstance).forEach(childID =>
+      crawlAndRecordMounts(
+        childID,
+        shouldIncludeInTree ? id : parentID,
+        isInitialMount
+      )
+    );
+
+    if (__DEBUG__) {
+      console.groupEnd();
+    }
+  }
+
+  function flushPendingEvents(rootID: number): void {
+    // Crawl tree and queue mounts/updates.
+    crawlAndRecordMounts(rootID, 0, false);
+
+    // Send pending deletions.
+    pendingUnmountIDs.forEach(id => {
+      if (mountedIDs.has(id)) {
+        recordUnmount(id);
+      }
+    });
+
+    // Identify which renderer this update is coming from.
+    // This enables roots to be mapped to renderers,
+    // Which in turn enables fiber props, states, and hooks to be inspected.
+    const idArray = new Uint32Array(2);
+    idArray[0] = rendererID;
+    idArray[1] = rootID;
+    addOperation(idArray, true);
+
+    if (__DEBUG__) {
+      operationsArrayToString(pendingOperations);
+    }
+
+    // If we've already connected to the frontend, just pass the operations through.
+    hook.emit('operations', pendingOperations);
+
+    pendingMountIDs.clear();
+    pendingUnmountIDs.clear();
+    pendingOperations = new Uint32Array(0);
+  }
+
+  function inspectElement(id: number): InspectedElement | null {
+    let result = inspectElementRaw(id);
+    if (result === null) {
+      return null;
+    }
+    // TODO Review sanitization approach for the below inspectable values.
+    result.context = cleanForBridge(result.context);
+    result.props = cleanForBridge(result.props);
+    result.state = cleanForBridge(result.state);
+    return result;
+  }
+
+  function inspectElementRaw(id: number): InspectedElement | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    const data = getData(internalInstance);
+
+    let context = null;
+    let owners = null;
+    let props = null;
+    let state = null;
+    let source = null;
+
+    if (internalInstance != null) {
+      const element = internalInstance._currentElement;
+      if (element !== null) {
+        props = element.props;
+        source = element._source != null ? element._source : null;
+
+        let owner = element._owner;
+        if (owner) {
+          owners = [];
+          while (owner != null) {
+            owners.push({
+              displayName: getData(owner).displayName || 'Unknown',
+              id: getID(owner),
+            });
+            owner = owner.owner;
+          }
+        }
+      }
+      context = internalInstance.context || null;
+      state = internalInstance.state || null;
+    }
+
+    return {
+      id,
+
+      // Hooks did not exist in legacy versions
+      canEditHooks: false,
+
+      // Does the current renderer support editable function props?
+      canEditFunctionProps: true,
+
+      // Suspense did not exist in legacy versions
+      canToggleSuspense: false,
+
+      // Can view component source location.
+      canViewSource:
+        data.type === ElementTypeClass || data.type === ElementTypeFunction,
+
+      displayName: data.displayName,
+
+      // Inspectable properties.
+      context,
+      hooks: null,
+      props,
+      state,
+
+      // List of owners
+      owners,
+
+      // Location of component in source coude.
+      source,
+    };
+  }
+
+  function logElementToConsole(id: number): void {
+    const result = inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return;
+    }
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    if (supportsGroup) {
+      console.groupCollapsed(
+        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
+        'color: var(--dom-tag-name-color); font-weight: normal;'
+      );
+    }
+    if (result.props !== null) {
+      console.log('Props:', result.props);
+    }
+    if (result.state !== null) {
+      console.log('State:', result.state);
+    }
+    if (result.context !== null) {
+      console.log('State:', result.context);
+    }
+    const nativeNode = getNativeFromInternal(id);
+    if (nativeNode !== null) {
+      console.log('Node:', nativeNode);
+    }
+    if (window.chrome || /firefox/i.test(navigator.userAgent)) {
+      console.log(
+        'Right-click any value to save it as a global variable for further inspection.'
+      );
+    }
+    if (supportsGroup) {
+      console.groupEnd();
+    }
+  }
+
+  function prepareViewElementSource(id: number): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return;
+    }
+
+    const element = internalInstance._currentElement;
+    if (element == null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return;
+    }
+
+    global.$type = element.type;
+  }
+
+  function selectElement(id: number): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return;
+    }
+
+    switch (getElementType(internalInstance)) {
+      case ElementTypeClass:
+      case ElementTypeFunction:
+        const element = internalInstance._currentElement;
+        if (element == null) {
+          console.warn(`Could not find element with id "${id}"`);
+          return;
+        }
+
+        global.$r = {
+          props: element.props,
+          type: element.type,
+        };
+        break;
+      default:
+        break;
+    }
+  }
+
+  function recordPendingMount(internalInstance: InternalInstance) {
+    pendingMountIDs.add(getID(internalInstance));
+
+    if (__DEBUG__) {
+      console.log(
+        '%crecordPendingMount()',
+        'color: green',
+        getID(internalInstance)
+      );
+    }
+
+    queueFlushPendingEvents();
+  }
+
+  function recordPendingUnmount(internalInstance: InternalInstance) {
+    const id = getID(internalInstance);
+
+    pendingUnmountIDs.add(id);
+
+    // Not all nodes are mounted (or unmounted) in the frontend DevTools tree,
+    // so it's important to remove entries from this map on pending unmount.
+    idToParentIDMap.delete(id);
+
+    if (__DEBUG__) {
+      console.log(
+        '%crecordPendingUnmount()',
+        'color: red',
+        getID(internalInstance)
+      );
+    }
+
+    queueFlushPendingEvents();
+  }
+
+  function recordMount(id: number, parentID: number) {
+    const internalInstance = ((idToInternalInstanceMap.get(
+      id
+    ): any): InternalInstance);
+    const isRoot = rootIDs.has(id);
+
+    if (__DEBUG__) {
+      console.log(
+        '%crecordMount()',
+        'color: green; font-weight: bold;',
+        id,
+        getData(internalInstance).displayName
+      );
+    }
+
+    mountedIDs.add(id);
+
+    if (isRoot) {
+      // TODO Is this right? For all versions?
+      const hasOwnerMetadata =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null;
+
+      const operation = new Uint32Array(5);
+      operation[0] = TREE_OPERATION_ADD;
+      operation[1] = id;
+      operation[2] = ElementTypeRoot;
+      operation[3] = 0; // isProfilingSupported?
+      operation[4] = hasOwnerMetadata ? 1 : 0;
+      addOperation(operation);
+    } else {
+      const { displayName, key, type } = getData(internalInstance);
+
+      const ownerID =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null
+          ? getID(internalInstance._currentElement._owner)
+          : 0;
+
+      let encodedDisplayName = ((null: any): Uint8Array);
+      let encodedKey = ((null: any): Uint8Array);
+
+      if (displayName !== null) {
+        encodedDisplayName = utfEncodeString(displayName);
+      }
+
+      if (key !== null) {
+        // React$Key supports string and number types as inputs,
+        // But React converts numeric keys to strings, so we only have to handle that type here.
+        // https://github.com/facebook/react/blob/0e67969cb1ad8c27a72294662e68fa5d7c2c9783/packages/react/src/ReactElement.js#L187
+        encodedKey = utfEncodeString(((key: any): string));
+      }
+
+      const encodedDisplayNameSize =
+        displayName === null ? 0 : encodedDisplayName.length;
+      const encodedKeySize = key === null ? 0 : encodedKey.length;
+
+      const operation = new Uint32Array(
+        7 + encodedDisplayNameSize + encodedKeySize
+      );
+      operation[0] = TREE_OPERATION_ADD;
+      operation[1] = id;
+      operation[2] = type;
+      operation[3] = parentID;
+      operation[4] = ownerID;
+      operation[5] = encodedDisplayNameSize;
+      if (displayName !== null) {
+        operation.set(encodedDisplayName, 6);
+      }
+      operation[6 + encodedDisplayNameSize] = encodedKeySize;
+      if (key !== null) {
+        operation.set(encodedKey, 6 + encodedDisplayNameSize + 1);
+      }
+      addOperation(operation);
+    }
+  }
+
+  function recordUnmount(id: number) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    const isRoot = rootIDs.has(id);
+
+    if (__DEBUG__) {
+      console.log(
+        '%crecordUnmount()',
+        'color: red; font-weight: bold;',
+        id,
+        getData(internalInstance).displayName
+      );
+    }
+
+    if (isRoot) {
+      const operation = new Uint32Array(2);
+      operation[0] = TREE_OPERATION_REMOVE;
+      operation[1] = id;
+      addOperation(operation);
+
+      rootIDs.delete(id);
+    } else {
+      const operation = new Uint32Array(2);
+      operation[0] = TREE_OPERATION_REMOVE;
+      operation[1] = id;
+      addOperation(operation);
+    }
+
+    idToInternalInstanceMap.delete(id);
+    internalInstanceToIDMap.delete(internalInstance);
+
+    mountedIDs.delete(id);
+  }
+
+  function setInProps(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const element = internalInstance._currentElement;
+      internalInstance._currentElement = {
+        ...element,
+        props: copyWithSet(element.props, path, value),
+      };
+      forceUpdate(internalInstance._instance);
+    }
+  }
+
+  function setInState(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      setIn(internalInstance.state, path, value);
+      internalInstance.forceUpdate();
+    }
+  }
+
+  function setInContext(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      setIn(internalInstance.context, path, value);
+      forceUpdate(internalInstance);
+    }
+  }
+
+  function setIn(obj: Object, path: Array<string | number>, value: any) {
+    const last = path.pop();
+    const parent = path.reduce(
+      // $FlowFixMe
+      (reduced, attr) => (reduced ? reduced[attr] : null),
+      obj
+    );
+    if (parent) {
+      // $FlowFixMe
+      parent[last] = value;
+    }
+  }
+
+  // v16+ only features
+  const getCommitDetails = () => {
+    throw new Error('getCommitDetails not supported by this renderer');
+  };
+  const getFiberCommits = () => {
+    throw new Error('getFiberCommits not supported by this renderer');
+  };
+  const getInteractions = () => {
+    throw new Error('getInteractions not supported by this renderer');
+  };
+  const getProfilingDataForDownload = () => {
+    throw new Error(
+      'getProfilingDataForDownload not supported by this renderer'
+    );
+  };
+  const getProfilingSummary = () => {
+    throw new Error('getProfilingSummary not supported by this renderer');
+  };
+  const handleCommitFiberRoot = () => {
+    throw new Error('handleCommitFiberRoot not supported by this renderer');
+  };
+  const handleCommitFiberUnmount = () => {
+    throw new Error('handleCommitFiberUnmount not supported by this renderer');
+  };
+  const overrideSuspense = () => {
+    throw new Error('overrideSuspense not supported by this renderer');
+  };
+  const setInHook = () => {
+    throw new Error('setInHook not supported by this renderer');
+  };
+  const startProfiling = () => {
+    throw new Error('startProfiling not supported by this renderer');
+  };
+  const stopProfiling = () => {
+    throw new Error('stopProfiling not supported by this renderer');
+  };
+
+  return {
+    cleanup,
+    flushInitialOperations,
+    getCommitDetails,
+    getFiberCommits,
+    getInteractions,
+    getInternalIDFromNative,
+    getNativeFromInternal,
+    getProfilingDataForDownload,
+    getProfilingSummary,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    inspectElement,
+    logElementToConsole,
+    overrideSuspense,
+    prepareViewElementSource,
+    renderer,
+    selectElement,
+    setInContext,
+    setInHook,
+    setInProps,
+    setInState,
+    startProfiling,
+    stopProfiling,
+  };
+}
diff --git a/src/backend/legacy/traverseAllChildrenImpl.js b/src/backend/legacy/traverseAllChildrenImpl.js
new file mode 100644
index 000000000000..a7e1cd399cba
--- /dev/null
+++ b/src/backend/legacy/traverseAllChildrenImpl.js
@@ -0,0 +1,146 @@
+// @flow
+
+const SEPARATOR = '.';
+const SUBSEPARATOR = ':';
+
+const FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+// The Symbol used to tag the ReactElement type. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+const REACT_ELEMENT_TYPE =
+  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
+  0xeac7;
+
+/**
+ * Escape and wrap key so it is safe to use as a reactid
+ *
+ * @param {string} key to be escaped.
+ * @return {string} the escaped key.
+ */
+function escape(key: string): string {
+  const escapeRegex = /[=:]/g;
+  const escaperLookup = {
+    '=': '=0',
+    ':': '=2',
+  };
+  const escapedString = ('' + key).replace(escapeRegex, function(match) {
+    return escaperLookup[match];
+  });
+
+  return '$' + escapedString;
+}
+
+/**
+ * Generate a key string that identifies a component within a set.
+ *
+ * @param {*} component A component that could contain a manual key.
+ * @param {number} index Index that is used if a manual key is not provided.
+ * @return {string}
+ */
+function getComponentKey(component, index) {
+  // Do some typechecking here since we call this blindly. We want to ensure
+  // that we don't block potential future ES APIs.
+  if (
+    typeof component === 'object' &&
+    component !== null &&
+    component.key != null
+  ) {
+    // Explicit key
+    return escape(component.key);
+  }
+  // Implicit key determined by the index in the set
+  return index.toString(36);
+}
+
+/**
+ * We do a copied the 'traverseAllChildrenImpl' method from
+ * `React.Children` so that we don't pull in the whole React library.
+ * @param {?*} children Children tree container.
+ * @param {!string} nameSoFar Name of the key path so far.
+ * @param {!function} callback Callback to invoke with each child found.
+ * @param {?*} traverseContext Used to pass information throughout the traversal
+ * process.
+ * @return {!number} The number of children in this subtree.
+ */
+export default function traverseAllChildrenImpl(
+  children: any,
+  nameSoFar: string,
+  callback: Function,
+  traverseContext: any
+): number {
+  const type = typeof children;
+
+  if (type === 'undefined' || type === 'boolean') {
+    // All of the above are perceived as null.
+    children = null;
+  }
+
+  if (
+    children === null ||
+    type === 'string' ||
+    type === 'number' ||
+    // The following is inlined from ReactElement. This means we can optimize
+    // some checks. React Fiber also inlines this logic for similar purposes.
+    (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE)
+  ) {
+    callback(
+      traverseContext,
+      children,
+      // If it's the only child, treat the name as if it was wrapped in an array
+      // so that it's consistent if the number of children grows.
+      nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar
+    );
+    return 1;
+  }
+
+  let child;
+  let nextName;
+  let subtreeCount = 0; // Count of children found in the current subtree.
+  let nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
+
+  if (Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      child = children[i];
+      nextName = nextNamePrefix + getComponentKey(child, i);
+      subtreeCount += traverseAllChildrenImpl(
+        child,
+        nextName,
+        callback,
+        traverseContext
+      );
+    }
+  } else {
+    let iteratorFn =
+      (ITERATOR_SYMBOL && children[ITERATOR_SYMBOL]) ||
+      children[FAUX_ITERATOR_SYMBOL];
+    if (typeof iteratorFn === 'function') {
+      let iterator = iteratorFn.call(children);
+      let step;
+      let ii = 0;
+      while (!(step = iterator.next()).done) {
+        child = step.value;
+        nextName = nextNamePrefix + getComponentKey(child, ii++);
+        subtreeCount += traverseAllChildrenImpl(
+          child,
+          nextName,
+          callback,
+          traverseContext
+        );
+      }
+    } else if (type === 'object') {
+      let addendum =
+        ' If you meant to render a collection of children, use an array ' +
+        'instead.';
+      let childrenString = '' + children;
+      throw Error(
+        `The React Devtools cannot render an object as a child. (found: ${
+          childrenString === '[object Object]'
+            ? 'object with keys {' + Object.keys(children).join(', ') + '}'
+            : childrenString
+        }). ${addendum}`
+      );
+    }
+  }
+
+  return subtreeCount;
+}
diff --git a/src/backend/legacy/utils.js b/src/backend/legacy/utils.js
new file mode 100644
index 000000000000..49a67888a246
--- /dev/null
+++ b/src/backend/legacy/utils.js
@@ -0,0 +1,55 @@
+// @flow
+
+import type { InternalInstance } from './renderer';
+
+export function decorateResult(
+  object: Object,
+  attr: string,
+  fn: Function
+): Function {
+  const old = object[attr];
+  object[attr] = function(instance: InternalInstance) {
+    const res = old.apply(this, arguments);
+    fn(res);
+    return res;
+  };
+  return old;
+}
+
+export function decorate(object: Object, attr: string, fn: Function): Function {
+  const old = object[attr];
+  object[attr] = function(instance: InternalInstance) {
+    const res = old.apply(this, arguments);
+    fn.apply(this, arguments);
+    return res;
+  };
+  return old;
+}
+
+export function decorateMany(
+  source: Object,
+  fns: { [attr: string]: Function }
+): Object {
+  const olds = {};
+  for (const name in fns) {
+    olds[name] = decorate(source, name, fns[name]);
+  }
+  return olds;
+}
+
+export function restoreMany(source: Object, olds: Object): void {
+  for (let name in olds) {
+    source[name] = olds[name];
+  }
+}
+
+export function forceUpdate(instance: InternalInstance): void {
+  if (typeof instance.forceUpdate === 'function') {
+    instance.forceUpdate();
+  } else if (
+    instance.updater != null &&
+    typeof instance.updater.enqueueForceUpdate === 'function'
+  ) {
+    instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');
+  }
+}
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7aa8b1555a8f..d0acd59fa543 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -14,7 +14,7 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
 } from 'src/devtools/types';
-import { getDisplayName, utfEncodeString } from '../utils';
+import { getDisplayName, getUID, utfEncodeString } from '../utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
@@ -25,7 +25,6 @@ import {
   TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { getUID } from '../utils';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
@@ -312,8 +311,6 @@ export function attach(
       : symbolOrNumber;
   }
 
-  // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
-  // TODO: Keep in sync with getElementType()
   function getDataForFiber(fiber: Fiber): FiberData {
     const { elementType, type, key, tag } = fiber;
 
@@ -1166,7 +1163,7 @@ export function attach(
     currentRootID = -1;
   }
 
-  function findNativeByFiberID(id: number) {
+  function getNativeFromInternal(id: number) {
     try {
       const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
       if (fiber === null) {
@@ -1190,7 +1187,7 @@ export function attach(
     }
   }
 
-  function getFiberIDFromNative(
+  function getInternalIDFromNative(
     hostInstance,
     findNearestUnfilteredAncestor = false
   ) {
@@ -1441,6 +1438,14 @@ export function attach(
       case ForwardRef:
         global.$type = fiber.type.render;
         break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        const { elementType, type } = fiber;
+        global.$type =
+          elementType != null && elementType.type != null
+            ? elementType.type
+            : type;
+        break;
       default:
         global.$type = null;
         break;
@@ -1483,7 +1488,9 @@ export function attach(
       tag === FunctionComponent ||
       tag === IncompleteClassComponent ||
       tag === IndeterminateComponent ||
-      tag === ForwardRef
+      tag === MemoComponent ||
+      tag === ForwardRef ||
+      tag === SimpleMemoComponent
     ) {
       canViewSource = true;
       if (stateNode && stateNode.context != null) {
@@ -1623,7 +1630,7 @@ export function attach(
     if (result.hooks !== null) {
       console.log('Hooks:', result.hooks);
     }
-    const nativeNode = findNativeByFiberID(id);
+    const nativeNode = getNativeFromInternal(id);
     if (nativeNode !== null) {
       console.log('Node:', nativeNode);
     }
@@ -1938,10 +1945,10 @@ export function attach(
     cleanup,
     flushInitialOperations,
     getCommitDetails,
-    getFiberIDFromNative,
+    getInternalIDFromNative,
     getFiberCommits,
     getInteractions,
-    findNativeByFiberID,
+    getNativeFromInternal,
     getProfilingDataForDownload,
     getProfilingSummary,
     handleCommitFiberRoot,
diff --git a/src/backend/types.js b/src/backend/types.js
index bd4562eef793..afd060bb48e9 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -19,7 +19,7 @@ export type FiberData = {|
   type: ElementType,
 |};
 
-export type NativeType = {};
+export type NativeType = Object;
 export type RendererID = number;
 
 type Dispatcher = any;
@@ -90,17 +90,20 @@ export type ProfilingSummary = {|
   rootID: number,
 |};
 
+export type GetInternalIDFromNative = (
+  component: NativeType,
+  findNearestUnfilteredAncestor?: boolean
+) => number | null;
+export type GetNativeFromInternal = (id: number) => ?NativeType;
+
 export type RendererInterface = {
   cleanup: () => void,
-  findNativeByFiberID: (id: number) => ?NativeType,
   flushInitialOperations: () => void,
   getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
-  getFiberIDFromNative: (
-    component: NativeType,
-    findNearestUnfilteredAncestor?: boolean
-  ) => number | null,
   getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,
   getInteractions: (rootID: number) => Interactions,
+  getInternalIDFromNative: GetInternalIDFromNative,
+  getNativeFromInternal: GetNativeFromInternal,
   getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
@@ -112,14 +115,14 @@ export type RendererInterface = {
   renderer: ReactRenderer | null,
   selectElement: (id: number) => void,
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
+  setInProps: (id: number, path: Array<string | number>, value: any) => void,
+  setInState: (id: number, path: Array<string | number>, value: any) => void,
   setInHook: (
     id: number,
     index: number,
     path: Array<string | number>,
     value: any
   ) => void,
-  setInProps: (id: number, path: Array<string | number>, value: any) => void,
-  setInState: (id: number, path: Array<string | number>, value: any) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
 };
diff --git a/src/utils.js b/src/utils.js
index f085f550d5c1..7065a6fe3c5b 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,6 +1,16 @@
 // @flow
 
-const LRU = require('lru-cache');
+import LRU from 'lru-cache';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from './constants';
+import { ElementTypeRoot } from 'src/devtools/types';
+
+import type { ElementType } from 'src/devtools/types';
 
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -76,3 +86,96 @@ export function utfEncodeString(string: string): Uint32Array {
 function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
+
+export function operationsArrayToString(operations: Uint32Array) {
+  const rendererID = operations[0];
+  const rootID = operations[1];
+
+  console.group('rendererID:', rendererID, 'rootID:', rootID);
+
+  let i = 2;
+  while (i < operations.length) {
+    let id: number = ((null: any): number);
+    let parentID: number = ((null: any): number);
+    let type: ElementType = ((null: any): ElementType);
+
+    const operation = operations[i];
+
+    switch (operation) {
+      case TREE_OPERATION_ADD:
+        id = ((operations[i + 1]: any): number);
+        type = ((operations[i + 2]: any): ElementType);
+
+        i = i + 3;
+
+        if (type === ElementTypeRoot) {
+          console.log(`Add root fiber ${id}`);
+
+          i++; // supportsProfiling
+          i++; // hasOwnerMetadata
+        } else {
+          parentID = ((operations[i]: any): number);
+          i++;
+
+          i++; // ownerID
+
+          const displayNameLength = operations[i];
+          i++;
+          const displayName =
+            displayNameLength === 0
+              ? null
+              : utfDecodeString(
+                  (operations.slice(i, i + displayNameLength): any)
+                );
+          i += displayNameLength;
+
+          const keyLength = operations[i];
+          i++;
+          i += +keyLength;
+
+          console.log(
+            `Add fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+          );
+        }
+        break;
+      case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN: {
+        id = ((operations[i + 1]: any): number);
+
+        i = i + 2;
+
+        console.log(`Recursively remove children from fiber ${id}`);
+        break;
+      }
+      case TREE_OPERATION_REMOVE: {
+        id = ((operations[i + 1]: any): number);
+
+        i = i + 2;
+
+        console.log(`Remove fiber ${id}`);
+        break;
+      }
+      case TREE_OPERATION_RESET_CHILDREN:
+        id = ((operations[i + 1]: any): number);
+        const numChildren = ((operations[i + 2]: any): number);
+        const children = ((operations.slice(
+          i + 3,
+          i + 3 + numChildren
+        ): any): Array<number>);
+
+        i = i + 3 + numChildren;
+
+        console.log(`Re-order fiber ${id} children ${children.join(',')}`);
+        break;
+      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
+        // Base duration updates are only sent while profiling is in progress.
+        // We can ignore them at this point.
+        // The profiler UI uses them lazily in order to generate the tree.
+        i = i + 3;
+        break;
+      default:
+        throw Error(`Unsupported Bridge operation ${operation}`);
+    }
+  }
+
+  console.groupEnd();
+}

From 29811cd24ef304fb089c6d69692b2e2e21f47e1e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Apr 2019 15:30:20 -0700
Subject: [PATCH 410/814] Added legacy (v15) tests

---
 package.json                                  |   4 +-
 .../storeLegacy-v15-test.js.snap              | 279 ++++++++++++
 src/__tests__/legacy/storeLegacy-v15-test.js  | 404 ++++++++++++++++++
 yarn.lock                                     |  34 +-
 4 files changed, 718 insertions(+), 3 deletions(-)
 create mode 100644 src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
 create mode 100644 src/__tests__/legacy/storeLegacy-v15-test.js

diff --git a/package.json b/package.json
index 60850a905b6f..ac4b71b258d5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
       "<rootDir>/src/__tests__/storeSerializer"
     ],
     "testMatch": [
-      "**/__tests__/*-test.js"
+      "**/__tests__/**/*-test.js"
     ]
   },
   "scripts": {
@@ -131,8 +131,10 @@
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
     "react": "0.0.0-4221565e1",
+    "react-15": "npm:react@^15",
     "react-color": "^2.11.7",
     "react-dom": "0.0.0-4221565e1",
+    "react-dom-15": "npm:react-dom@^15",
     "react-is": "0.0.0-4221565e1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
new file mode 100644
index 000000000000..00e8eff3abfa
--- /dev/null
+++ b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▾ <Parent>
+        <Child>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▸ <Nested>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▸ <Parent key="A">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▸ <Parent>
+  ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
+[root]
+  ▸ <Parent>
+  ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
+[root]
+    <Component>
+`;
diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/src/__tests__/legacy/storeLegacy-v15-test.js
new file mode 100644
index 000000000000..748c2666ea2f
--- /dev/null
+++ b/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -0,0 +1,404 @@
+// @flow
+
+describe('Store (legacy)', () => {
+  let React;
+  let ReactDOM;
+  let store;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    store = global.store;
+
+    // Redirect all React/ReactDOM requires to the v15 UMD.
+    // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
+    jest.mock('react', () => require.requireActual('react-15/dist/react.js'));
+    jest.mock('react-dom', () => require.requireActual('react-dom-15/dist/react-dom.js'));
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should not allow a root node to be collapsed', () => {
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(<Component count={4} />, document.createElement('div'))
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    expect(store.roots).toHaveLength(1);
+
+    const rootID = store.roots[0];
+
+    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
+      'Root nodes cannot be collapsed'
+    );
+  });
+
+  describe('collapseNodesByDefault:false', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support mount and update operations', () => {
+      const Grandparent = ({ count }) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+    });
+
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({ count }) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(4);
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('2: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('3: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('4: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('5: collapse Grandparent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('6: expand Grandparent');
+    });
+
+    // TODO Re-enable this test once the renderer supports it.
+    xit('should support reordering of children', () => {
+      const Root = ({ children }) => <div>{children}</div>;
+      const Component = () => null;
+
+      const Foo = () => <div>{[<Component key="0" />]}</div>;
+      const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('4: collapse root');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('5: expand root');
+    });
+  });
+
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+
+    it('should support mount and update operations', () => {
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <div>
+            <Parent count={1} />
+            <Parent count={3} />
+          </div>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <div>
+            <Parent count={2} />
+            <Parent count={1} />
+          </div>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('3: expand Parent');
+    });
+
+    it('should support expanding parts of the tree', () => {
+      const Grandparent = ({ count }) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({ count }) =>
+        <div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(2);
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('3: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchSnapshot('4: expand second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('5: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('6: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('7: collapse Grandparent');
+    });
+
+    it('should support expanding deep parts of the tree', () => {
+      const Wrapper = ({ forwardedRef }) => (
+        <Nested depth={3} forwardedRef={forwardedRef} />
+      );
+      const Nested = ({ depth, forwardedRef }) =>
+        depth > 0 ? (
+          <Nested depth={depth - 1} forwardedRef={forwardedRef} />
+        ) : (
+          <div ref={forwardedRef} />
+        );
+
+      let ref = null;
+      const refSetter = value => {
+        ref = value;
+      };
+
+      act(() =>
+        ReactDOM.render(
+          <Wrapper forwardedRef={refSetter} />,
+          document.createElement('div')
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const deepestedNodeID = global.agent.getIDForNode(ref);
+
+      act(() => store.toggleIsCollapsed(deepestedNodeID, false));
+      expect(store).toMatchSnapshot('2: expand deepest node');
+
+      const rootID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(rootID, true));
+      expect(store).toMatchSnapshot('3: collapse root');
+
+      act(() => store.toggleIsCollapsed(rootID, false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      const id = store.getElementIDAtIndex(1);
+
+      act(() => store.toggleIsCollapsed(id, true));
+      expect(store).toMatchSnapshot('5: collapse middle node');
+
+      act(() => store.toggleIsCollapsed(id, false));
+      expect(store).toMatchSnapshot('6: expand middle node');
+    });
+
+    // TODO Re-enable this test once the renderer supports it.
+    xit('should support reordering of children', () => {
+      const Root = ({ children }) => <div>{children}</div>;
+      const Component = () => null;
+
+      const Foo = () => <div>{[<Component key="0" />]}</div>;
+      const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
+      });
+      expect(store).toMatchSnapshot('5: expand leaves');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('6: collapse root');
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index dfd34ac54dea..588a7f88d8ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3462,6 +3462,15 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.6.0:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 create-react-context@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -4930,7 +4939,7 @@ fbjs@0.5.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
-fbjs@^0.8.0:
+fbjs@^0.8.0, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -7562,7 +7571,7 @@ log-update@^2.0.0, log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9168,6 +9177,17 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+"react-15@npm:react@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+  integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-color@^2.11.7:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
@@ -9180,6 +9200,16 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+"react-dom-15@npm:react-dom@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+  integrity sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-dom@0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"

From c2865dbab9053ac82867ad40b5c831ec21383d3f Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Thu, 18 Apr 2019 08:16:52 +0100
Subject: [PATCH 411/814] Select tab when the mouse is pressed

Selecting the tab when the mouse is pressed rather than only when it is
released makes tab switching feel faster and also matches how the Chrome dev
tools behave.

The previous tab selection handler which listens for the radio button's
selection has been kept for the benefit of interaction methods which
don't trigger the mousedown handler.
---
 src/devtools/views/TabBar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index d5ba8c5cb62b..87031f7e2c34 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -68,6 +68,7 @@ export default function TabBar({
           )}
           key={id}
           onKeyDown={handleKeyDown}
+          onMouseDown={() => selectTab(id)}
           title={title || label}
         >
           <input

From 6df050e726b324dff9d92af8712dccc0121b96dd Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Thu, 18 Apr 2019 06:46:06 -0300
Subject: [PATCH 412/814] Assign timeoutID to avoid multiple requests

---
 src/devtools/views/Components/SelectedElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 92e41538ab6e..d5048a142e7b 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -320,7 +320,7 @@ function useInspectedElement(id: number | null): InspectedElement | null {
       // Ask for an update in a second.
       // Make sure we only ask once though.
       clearTimeout(((timeoutID: any): TimeoutID));
-      setTimeout(sendBridgeRequest, 1000);
+      timeoutID = setTimeout(sendBridgeRequest, 1000);
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);

From d02d93712ed6a5eda885ceb5116cdc9192b478f2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 16:02:08 +0100
Subject: [PATCH 413/814] Assert removal happens in the right order

---
 src/backend/renderer.js |  8 ++++----
 src/devtools/store.js   | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7aa8b1555a8f..870ceece79f7 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -752,13 +752,13 @@ export function attach(
       nextOperation[1] = id;
       endNextOperation(false);
     } else if (!shouldFilterFiber(fiber)) {
-      // Non-root fibers are deleted during the commit phase.
-      // They are deleted in the child-first order. However
-      // DevTools currently expects deletions to be parent-first.
-      // This is why we unshift deletions rather tha
       beginNextOperation(2);
       nextOperation[0] = TREE_OPERATION_REMOVE;
       nextOperation[1] = id;
+      // Non-root fibers are deleted during the commit phase.
+      // They are deleted in the parent-first order. However
+      // DevTools currently expects deletions to be child-first.
+      // This is why we prepend the delete operation to the queue.
       endNextOperation(true);
     }
     fiberToIDMap.delete(primaryFiber);
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 99ba142fca24..1e37ffcc1ee5 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -760,8 +760,7 @@ export default class Store extends EventEmitter {
 
           this._idToElement.delete(id);
 
-          parentElement = ((this._idToElement.get(parentID): any): Element);
-          if (parentElement == null) {
+          if (parentID === 0) {
             if (__DEBUG__) {
               debug('Remove', `fiber ${id} root`);
             }
@@ -775,7 +774,15 @@ export default class Store extends EventEmitter {
             if (__DEBUG__) {
               debug('Remove', `fiber ${id} from parent ${parentID}`);
             }
-
+            parentElement = ((this._idToElement.get(parentID): any): Element);
+            if (parentElement === undefined) {
+              throw new Error(
+                'Fiber ' +
+                  id +
+                  ' was removed after its parent. ' +
+                  'This is a bug in React DevTools.'
+              );
+            }
             parentElement.children = parentElement.children.filter(
               childID => childID !== id
             );

From 0f44e9fb9854a3abf4a3e835fa9577edb9d3f67d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 16:09:45 +0100
Subject: [PATCH 414/814] Move sync stress tests in their own file

---
 .../__snapshots__/storeStress-test.js.snap    | 239 ------------------
 .../storeStressSync-test.js.snap              | 239 ++++++++++++++++++
 ...Stress-test.js => storeStressSync-test.js} |  37 +--
 3 files changed, 243 insertions(+), 272 deletions(-)
 delete mode 100644 src/__tests__/__snapshots__/storeStress-test.js.snap
 create mode 100644 src/__tests__/__snapshots__/storeStressSync-test.js.snap
 rename src/__tests__/{storeStress-test.js => storeStressSync-test.js} (94%)

diff --git a/src/__tests__/__snapshots__/storeStress-test.js.snap b/src/__tests__/__snapshots__/storeStress-test.js.snap
deleted file mode 100644
index 9deb51fb38ac..000000000000
--- a/src/__tests__/__snapshots__/storeStress-test.js.snap
+++ /dev/null
@@ -1,239 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StoreStress should handle a stress test for Suspense 1`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 2`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 3`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-        <C key="c">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 4`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <B key="b">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 5`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 6`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 7`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 8`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 9`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 10`] = `
-[root]
-  ▾ <Root>
-      <X>
-      <Suspense>
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 11`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test for Suspense 12`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress should handle a stress test with different tree operations: 1: abcde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-      <C key="c">
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`StoreStress should handle a stress test with different tree operations: 2: abxde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-    ▾ <C key="c">
-        <X>
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`StoreStress should handle stress test with reordering 1`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`StoreStress should handle stress test with reordering 2`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`StoreStress should handle stress test with reordering 3`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`StoreStress should handle stress test with reordering 4`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`StoreStress should handle stress test with reordering 5`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`StoreStress should handle stress test with reordering 6`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`StoreStress should handle stress test with reordering 7`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`StoreStress should handle stress test with reordering 8`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`StoreStress should handle stress test with reordering 9`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`StoreStress should handle stress test with reordering 10`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`StoreStress should handle stress test with reordering 11`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <B key="b">
-`;
-
-exports[`StoreStress should handle stress test with reordering 12`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <A key="a">
-`;
-
-exports[`StoreStress should handle stress test with reordering 13`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <C key="c">
-`;
-
-exports[`StoreStress should handle stress test with reordering 14`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <B key="b">
-`;
-
-exports[`StoreStress should handle stress test with reordering 15`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <C key="c">
-`;
-
-exports[`StoreStress should handle stress test with reordering 16`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <A key="a">
-`;
diff --git a/src/__tests__/__snapshots__/storeStressSync-test.js.snap b/src/__tests__/__snapshots__/storeStressSync-test.js.snap
new file mode 100644
index 000000000000..d4a4f7e4667d
--- /dev/null
+++ b/src/__tests__/__snapshots__/storeStressSync-test.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 1: abcde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+      <C key="c">
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 2: abxde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+    ▾ <C key="c">
+        <X>
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <B key="b">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <A key="a">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <C key="c">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <B key="b">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <C key="c">
+`;
+
+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <A key="a">
+`;
diff --git a/src/__tests__/storeStress-test.js b/src/__tests__/storeStressSync-test.js
similarity index 94%
rename from src/__tests__/storeStress-test.js
rename to src/__tests__/storeStressSync-test.js
index 12e111adf540..30f48d9a2614 100644
--- a/src/__tests__/storeStress-test.js
+++ b/src/__tests__/storeStressSync-test.js
@@ -1,6 +1,6 @@
 // @flow
 
-describe('StoreStress', () => {
+describe('StoreStress (Sync Mode)', () => {
   let React;
   let ReactDOM;
   let TestUtils;
@@ -29,7 +29,7 @@ describe('StoreStress', () => {
 
   // This is a stress test for the tree mount/update/unmount traversal.
   // It renders different trees that should produce the same output.
-  it('should handle a stress test with different tree operations', () => {
+  it('should handle a stress test with different tree operations (Sync Mode)', () => {
     let setShowX;
     const A = () => 'a';
     const B = () => 'b';
@@ -168,37 +168,9 @@ describe('StoreStress', () => {
     }
     act(() => ReactDOM.unmountComponentAtNode(container));
     expect(print(store)).toBe('');
-
-    // 7. Same as the previous step, but for Concurrent Mode.
-    container = document.createElement('div');
-    // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
-    for (let i = 0; i < cases.length; i++) {
-      // Verify mounting 'abcde'.
-      act(() => root.render(<Parent>{cases[i]}</Parent>));
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toEqual(snapshotForABCDE);
-
-      // Verify switching to 'abxde'.
-      act(() => {
-        setShowX(true);
-      });
-      expect(container.textContent).toMatch('abxde');
-      expect(print(store)).toBe(snapshotForABXDE);
-
-      // Verify switching back to 'abcde'.
-      act(() => {
-        setShowX(false);
-      });
-      expect(container.textContent).toMatch('abcde');
-      expect(print(store)).toBe(snapshotForABCDE);
-      // Don't unmount. Reuse the container between iterations.
-    }
-    act(() => root.unmount());
-    expect(print(store)).toBe('');
   });
 
-  it('should handle stress test with reordering', () => {
+  it('should handle stress test with reordering (Sync Mode)', () => {
     const A = () => 'a';
     const B = () => 'b';
     const C = () => 'c';
@@ -298,7 +270,7 @@ describe('StoreStress', () => {
     }
   });
 
-  it('should handle a stress test for Suspense', async () => {
+  it('should handle a stress test for Suspense (Sync Mode)', async () => {
     const A = () => 'a';
     const B = () => 'b';
     const C = () => 'c';
@@ -690,6 +662,5 @@ describe('StoreStress', () => {
         expect(print(store)).toBe('');
       }
     }
-    // TODO: Test Concurrent Mode
   });
 });

From 24309fde06f0603f968532d4e41ec421e3434861 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 16:10:44 +0100
Subject: [PATCH 415/814] Add failing Concurrent Mode stress tests

---
 .../storeStressTestConcurrent-test.js.snap    | 239 +++++++
 .../storeStressTestConcurrent-test.js         | 671 ++++++++++++++++++
 2 files changed, 910 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
 create mode 100644 src/__tests__/storeStressTestConcurrent-test.js

diff --git a/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap b/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
new file mode 100644
index 000000000000..22f2fdf40690
--- /dev/null
+++ b/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 1: abcde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+      <C key="c">
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 2: abxde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+    ▾ <C key="c">
+        <X>
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <B key="b">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <A key="a">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <C key="c">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <B key="b">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <C key="c">
+`;
+
+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <A key="a">
+`;
diff --git a/src/__tests__/storeStressTestConcurrent-test.js b/src/__tests__/storeStressTestConcurrent-test.js
new file mode 100644
index 000000000000..6bfd86733703
--- /dev/null
+++ b/src/__tests__/storeStressTestConcurrent-test.js
@@ -0,0 +1,671 @@
+// @flow
+
+describe('StoreStressConcurrent', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let bridge;
+  let store;
+  let print;
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.advanceTimersByTime(1000); // Flush rendering and Suspense
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+
+    print = require('./storeSerializer').print;
+  });
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  it('should handle a stress test with different tree operations (Concurrent Mode)', () => {
+    let setShowX;
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => {
+      // We'll be manually flipping this component back and forth in the test.
+      // We only do this for a single node in order to verify that DevTools
+      // can handle a subtree switching alternates while other subtrees are memoized.
+      let [showX, _setShowX] = React.useState(false);
+      setShowX = _setShowX;
+      return showX ? <X /> : 'c';
+    };
+    const D = () => 'd';
+    const E = () => 'e';
+    const X = () => 'x';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    function Parent({ children }) {
+      return children;
+    }
+
+    // 1. Render a normal version of [a, b, c, d, e].
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.unstable_createRoot(container);
+    act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
+    expect(store).toMatchSnapshot('1: abcde');
+    expect(container.textContent).toMatch('abcde');
+    const snapshotForABCDE = print(store);
+
+    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
+    // This is how we'll test an update to a single component.
+    act(() => {
+      setShowX(true);
+    });
+    expect(store).toMatchSnapshot('2: abxde');
+    expect(container.textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(container.textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+
+    // Now comes the interesting part.
+    // All of these cases are equivalent to [a, b, c, d, e] in output.
+    // We'll verify that DevTools produces the same snapshots for them.
+    // These cases are picked so that rendering them sequentially in the same
+    // container results in a combination of mounts, updates, unmounts, and reorders.
+    // prettier-ignore
+    let cases = [
+      [a, b, c, d, e],
+      [[a], b, c, d, e],
+      [[a, b], c, d, e],
+      [[a, b], c, [d, e]],
+      [[a, b], c, [d, '', e]],
+      [[a], b, c, d, [e]],
+      [a, b, [[c]], d, e],
+      [[a, ''], [b], [c], [d], [e]],
+      [a, b, [c, [d, ['', e]]]],
+      [a, b, c, d, e],
+      [<div key="0">{a}</div>, b, c, d, e],
+      [<div key="0">{a}{b}</div>, c, d, e],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
+      [<span key="0">{a}</span>, b, c, d, [e]],
+      [a, b, <span key="0"><span>{c}</span></span>, d, e],
+      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
+      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
+      [a, [[]], b, c, [d, [[]], e]],
+      [[[a, b, c, d], e]],
+      [a, b, c, d, e]
+    ];
+
+    // 5. Test fresh mount for each case.
+    for (let i = 0; i < cases.length; i++) {
+      // Ensure fresh mount.
+      container = document.createElement('div');
+      // $FlowFixMe
+      root = ReactDOM.unstable_createRoot(container);
+
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    container = document.createElement('div');
+    // $FlowFixMe
+    root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+  });
+
+  it('should handle stress test with reordering (Concurrent Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const D = () => 'd';
+    const E = () => 'e';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    // prettier-ignore
+    let steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() => root.render(<Root>{steps[i]}</Root>));
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify that we can update from every step to every other step and back.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        // $FlowFixMe
+        let root = ReactDOM.unstable_createRoot(container);
+        act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.render(<Root>{steps[j]}</Root>));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 3. Same test as above, but this time we wrap children in a host component.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        let container = document.createElement('div');
+        // $FlowFixMe
+        let root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>
+          )
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>
+          )
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense (Concurrent Mode)', async () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>
+        )
+      );
+      expect(print(store)).toEqual(snapshots[i]);
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          const suspenseID = store.getElementIDAtIndex(2);
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+});

From 6a13ffd2314275b9e1ae8eda5acd614d22edc15a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 16:19:09 +0100
Subject: [PATCH 416/814] Traverse the previous current tree when switching
 from primary to fallback

---
 src/backend/renderer.js                       | 29 ++++++------
 src/constants.js                              |  1 -
 src/devtools/store.js                         | 46 -------------------
 .../views/Profiler/CommitTreeBuilder.js       | 32 -------------
 4 files changed, 14 insertions(+), 94 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 870ceece79f7..71c10da39264 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -22,7 +22,6 @@ import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
-  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { getUID } from '../utils';
@@ -772,15 +771,6 @@ export function attach(
     }
   }
 
-  function recordRecursiveRemoveChildren(fiber) {
-    const primaryFiber = getPrimaryFiber(fiber);
-    const id = getFiberID(primaryFiber);
-    beginNextOperation(2);
-    nextOperation[0] = TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN;
-    nextOperation[1] = id;
-    endNextOperation(false);
-  }
-
   function mountFiberRecursively(
     fiber: Fiber,
     parentFiber: Fiber | null,
@@ -828,6 +818,18 @@ export function attach(
     }
   }
 
+  function unmountFiberChildrenRecursively(fiber: Fiber) {
+    if (__DEBUG__) {
+      debug('unmountFiberChildrenRecursively()', fiber);
+    }
+    let child = fiber.child;
+    while (child !== null) {
+      recordUnmount(child);
+      unmountFiberChildrenRecursively(child);
+      child = child.sibling;
+    }
+  }
+
   function recordTreeDuration(fiber: Fiber) {
     const id = getFiberID(getPrimaryFiber(fiber));
     const { actualDuration, treeBaseDuration } = fiber;
@@ -955,11 +957,8 @@ export function attach(
       // Primary -> Fallback:
       // 1. Hide primary set
       // This is not a real unmount, so it won't get reported by React.
-      // By this point it's *too late* to find the previous primary child set
-      // so we'll just tell the store to "forget" about those children.
-      // They might "resurface" later when we switch to primary content,
-      // but from the store's point of view they will be a new tree.
-      recordRecursiveRemoveChildren(nextFiber);
+      // We need to manually walk the previous tree and record unmounts.
+      unmountFiberChildrenRecursively(prevFiber);
       // 2. Mount fallback set
       const nextFallbackChildSet = nextFiber.child.sibling;
       mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
diff --git a/src/constants.js b/src/constants.js
index d4ba28331966..ef69e21760e9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -4,7 +4,6 @@ export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
-export const TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN = 5;
 
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1e37ffcc1ee5..d1bc5884e109 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -5,7 +5,6 @@ import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import {
   TREE_OPERATION_ADD,
-  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
@@ -695,51 +694,6 @@ export default class Store extends EventEmitter {
             weightDelta = 1;
           }
           break;
-        case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN: {
-          id = ((operations[i + 1]: any): number);
-
-          if (!this._idToElement.has(id)) {
-            throw new Error(
-              'Store does not contain fiber ' +
-                id +
-                '. This is a bug in React DevTools.'
-            );
-          }
-
-          i = i + 2;
-
-          let justRemovedIDs = [];
-          const recursivelyRemove = childID => {
-            justRemovedIDs.push(childID);
-            const child = this._idToElement.get(childID);
-            if (!child) {
-              throw new Error(
-                'Store does not contain fiber ' +
-                  childID +
-                  '. This is a bug in React DevTools.'
-              );
-            }
-            this._idToElement.delete(childID);
-            child.children.forEach(recursivelyRemove);
-          };
-
-          // Track removed items so search results can be updated
-          const oldRemovedElementIDs = removedElementIDs;
-          removedElementIDs = new Uint32Array(
-            removedElementIDs.length + justRemovedIDs.length
-          );
-          removedElementIDs.set(oldRemovedElementIDs);
-          let startIndex = oldRemovedElementIDs.length;
-          for (let j = 0; j < justRemovedIDs.length; j++) {
-            removedElementIDs[startIndex + j] = oldRemovedElementIDs[j];
-          }
-
-          parentElement = ((this._idToElement.get(id): any): Element);
-          parentElement.children.forEach(recursivelyRemove);
-          parentElement.children = [];
-          weightDelta = -parentElement.weight + 1;
-          break;
-        }
         case TREE_OPERATION_REMOVE: {
           id = ((operations[i + 1]: any): number);
 
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 2629fbeedbca..b077f51e3bad 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -3,7 +3,6 @@
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
-  TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_RESET_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
@@ -256,37 +255,6 @@ function updateTree(
           nodes.set(id, node);
         }
         break;
-      case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN:
-        id = ((operations[i + 1]: any): number);
-
-        i = i + 2;
-
-        if (!nodes.has(id)) {
-          throw new Error(
-            'Commit tree does not contain fiber ' +
-              id +
-              '. This is a bug in React DevTools.'
-          );
-        }
-
-        node = getClonedNode(id);
-
-        const recursivelyRemove = childID => {
-          if (!nodes.has(id)) {
-            throw new Error(
-              'Commit tree does not contain fiber ' +
-                id +
-                '. This is a bug in React DevTools.'
-            );
-          }
-          const child = getClonedNode(childID);
-          nodes.delete(childID);
-          child.children.forEach(recursivelyRemove);
-        };
-
-        node.children.forEach(recursivelyRemove);
-        node.children = [];
-        break;
       case TREE_OPERATION_REMOVE:
         id = ((operations[i + 1]: any): number);
 

From 8c5794eab3cfb8a027bd6eb338a3ba16f03d3564 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 17:03:04 +0100
Subject: [PATCH 417/814] Fail tests on errors in renderer

---
 src/__tests__/setupTests.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 40475c82456b..ab3b0e1f82bf 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -15,6 +15,15 @@ env.beforeEach(() => {
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
 
+  const originalConsoleError = console.error;
+  console.error = (...args) => {
+    if (args[0] === 'Warning: React DevTools encountered an error: %s') {
+      // Rethrow errors from React.
+      throw args[1];
+    }
+    originalConsoleError.apply(console, args);
+  };
+
   installHook(global);
 
   const bridgeListeners = [];

From 358e63ac3d103ca4698fb36777d9278150a6fb37 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 09:38:41 -0700
Subject: [PATCH 418/814] Fixed a Suspense toggling bug that incorrectly
 impacted tree weight

---
 .../__snapshots__/store-test.js.snap          | 26 ++++++++++
 src/__tests__/store-test.js                   | 49 ++++++++++++++++++-
 src/devtools/store.js                         |  4 +-
 3 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 1e1af1d66965..a3b156a40b0e 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -214,6 +214,32 @@ exports[`Store collapseNodesByDefault:true should filter DOM nodes from the stor
     ▸ <Parent>
 `;
 
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `
+[root]
+  ▸ <SuspenseTree>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+      ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+        <Fallback>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+      ▸ <Parent>
+`;
+
 exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
 [root]
   ▸ <Wrapper>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 5dad4ed956b9..46383476be96 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -4,6 +4,7 @@ describe('Store', () => {
   let React;
   let ReactDOM;
   let TestUtils;
+  let agent;
   let store;
 
   const act = (callback: Function) => {
@@ -14,6 +15,7 @@ describe('Store', () => {
   };
 
   beforeEach(() => {
+    agent = global.agent;
     store = global.store;
 
     React = require('react');
@@ -409,7 +411,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('1: mount');
 
-      const deepestedNodeID = global.agent.getIDForNode(ref.current);
+      const deepestedNodeID = agent.getIDForNode(ref.current);
 
       act(() => store.toggleIsCollapsed(deepestedNodeID, false));
       expect(store).toMatchSnapshot('2: expand deepest node');
@@ -460,5 +462,50 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
       expect(store).toMatchSnapshot('6: collapse root');
     });
+
+    it('should not add new nodes when suspense is toggled', () => {
+      const SuspenseTree = () => {
+        return (
+          <React.Suspense fallback={<Fallback>Loading outer</Fallback>}>
+            <Parent />
+          </React.Suspense>
+        );
+      };
+
+      const Fallback = () => null;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(<SuspenseTree />, document.createElement('div'))
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('2: expand tree');
+
+      // HACK There's only one renderer for this test
+      const rendererID = Object.keys(agent._rendererInterfaces)[0];
+      const suspenseID = store.getElementIDAtIndex(1);
+
+      act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: true,
+        })
+      );
+      expect(store).toMatchSnapshot('3: toggle fallback on');
+
+      act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: false,
+        })
+      );
+      expect(store).toMatchSnapshot('4: toggle fallback on');
+    });
   });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d1bc5884e109..9ac8ac559806 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -551,7 +551,7 @@ export default class Store extends EventEmitter {
 
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');
-      debug('onBridgeOperations', operations);
+      debug('onBridgeOperations', operations.join(','));
     }
 
     let haveRootsChanged = false;
@@ -772,7 +772,7 @@ export default class Store extends EventEmitter {
 
             children.forEach(childID => {
               const child = ((this._idToElement.get(childID): any): Element);
-              childWeight += child.weight;
+              childWeight += child.isCollapsed ? 1 : child.weight;
             });
 
             element.weight = childWeight + 1;

From d6e829d7a5f0b105930e26f21fe05562e495fab3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 09:54:26 -0700
Subject: [PATCH 419/814] Fixed bug in reset-children to properly calculate new
 root weight

---
 src/__tests__/__snapshots__/store-test.js.snap |  7 +++++++
 src/__tests__/store-test.js                    | 12 ++++++++++++
 src/devtools/store.js                          |  9 +++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index a3b156a40b0e..1a620db0c426 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -407,3 +407,10 @@ exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
     <Component>
 `;
+
+exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `
+[root]
+    <Root>
+`;
+
+exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 46383476be96..55b20b4cdc1e 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -40,6 +40,18 @@ describe('Store', () => {
     );
   });
 
+  it('should properly handle a root with no visible nodes', () => {
+    const Root = ({ children }) => children;
+
+    const container = document.createElement('div');
+
+    act(() => ReactDOM.render(<Root>{null}</Root>, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => ReactDOM.render(<div />, container));
+    expect(store).toMatchSnapshot('2: add host nodes');
+  });
+
   describe('collapseNodesByDefault:false', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = false;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 9ac8ac559806..2b6aa61f7c37 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -768,16 +768,17 @@ export default class Store extends EventEmitter {
 
           if (!element.isCollapsed) {
             const prevWeight = element.weight;
-            let childWeight = 0;
+
+            let nextWeight = element.type === ElementTypeRoot ? 0 : 1;
 
             children.forEach(childID => {
               const child = ((this._idToElement.get(childID): any): Element);
-              childWeight += child.isCollapsed ? 1 : child.weight;
+              nextWeight += child.isCollapsed ? 1 : child.weight;
             });
 
-            element.weight = childWeight + 1;
+            element.weight = nextWeight;
 
-            weightDelta = childWeight + 1 - prevWeight;
+            weightDelta = nextWeight - prevWeight;
           }
           break;
         case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:

From d0b5e3a7cb92ed20c23a6ffdea72a66a7ee177b6 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 18:06:34 +0100
Subject: [PATCH 420/814] Update setupTests.js

---
 src/__tests__/setupTests.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index ab3b0e1f82bf..2c22aade0753 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -16,6 +16,7 @@ env.beforeEach(() => {
   jest.useFakeTimers();
 
   const originalConsoleError = console.error;
+  // $FlowFixMe
   console.error = (...args) => {
     if (args[0] === 'Warning: React DevTools encountered an error: %s') {
       // Rethrow errors from React.

From 7930bad8c6a6a178fc132deb8f63f32f88d3b5c5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 14:45:24 -0700
Subject: [PATCH 421/814] Deploy production extension builds

---
 shells/browser/shared/deploy.js          | 6 +++++-
 shells/browser/shared/webpack.backend.js | 2 +-
 shells/browser/shared/webpack.config.js  | 2 +-
 shells/dev/webpack.config.js             | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index f5206ce89365..b1e5dd308d92 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -9,7 +9,11 @@ const main = async buildId => {
   const root = join(__dirname, '..', buildId);
   const buildPath = join(root, 'build');
 
-  execSync(`node ${join(root, './build')}`);
+  execSync(`node ${join(root, './build')}`, {
+    cwd: __dirname,
+    env: process.env,
+    stdio: 'inherit',
+  });
 
   await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {
     cwd: root,
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index b5f6ef58c5b2..66554210c01b 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -3,7 +3,7 @@ const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
+const __DEV__ = process.env.NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 9e510d4b5fce..827d75a30c6b 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -4,7 +4,7 @@ const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
-const __DEV__ = NODE_ENV !== 'production';
+const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 68b4404656bd..deb695ed44a7 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -3,7 +3,7 @@ const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../utils');
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
+const __DEV__ = process.env.NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();

From 3dfbf8ad6bd85e85c131009bd4f6a6652e8fcf7b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 15:40:50 -0700
Subject: [PATCH 422/814] Added a new invariant to the store (bridge operations
 handler)

---
 src/devtools/store.js | 45 ++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 2b6aa61f7c37..e6cb334166fe 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -597,16 +597,14 @@ export default class Store extends EventEmitter {
           i = i + 3;
 
           if (this._idToElement.has(id)) {
-            throw new Error(
-              'Store already contains fiber ' +
-                id +
-                '. This is a bug in React DevTools.'
+            throw Error(
+              `Cannot add node ${id} because a node with that id is already in the Store.`
             );
           }
 
           if (type === ElementTypeRoot) {
             if (__DEBUG__) {
-              debug('Add', `new root fiber ${id}`);
+              debug('Add', `new root node ${id}`);
             }
 
             const supportsProfiling = operations[i] > 0;
@@ -664,7 +662,13 @@ export default class Store extends EventEmitter {
             if (__DEBUG__) {
               debug(
                 'Add',
-                `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+                `node ${id} (${displayName || 'null'}) as child of ${parentID}`
+              );
+            }
+
+            if (!this._idToElement.has(parentID)) {
+              throw Error(
+                `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`
               );
             }
 
@@ -698,10 +702,8 @@ export default class Store extends EventEmitter {
           id = ((operations[i + 1]: any): number);
 
           if (!this._idToElement.has(id)) {
-            throw new Error(
-              'Store does not contain fiber ' +
-                id +
-                '. This is a bug in React DevTools.'
+            throw Error(
+              `Cannot remove node ${id} because no matching node was found in the Store.`
             );
           }
 
@@ -716,7 +718,7 @@ export default class Store extends EventEmitter {
 
           if (parentID === 0) {
             if (__DEBUG__) {
-              debug('Remove', `fiber ${id} root`);
+              debug('Remove', `node ${id} root`);
             }
 
             this._roots = this._roots.filter(rootID => rootID !== id);
@@ -726,15 +728,12 @@ export default class Store extends EventEmitter {
             haveRootsChanged = true;
           } else {
             if (__DEBUG__) {
-              debug('Remove', `fiber ${id} from parent ${parentID}`);
+              debug('Remove', `node ${id} from parent ${parentID}`);
             }
             parentElement = ((this._idToElement.get(parentID): any): Element);
             if (parentElement === undefined) {
-              throw new Error(
-                'Fiber ' +
-                  id +
-                  ' was removed after its parent. ' +
-                  'This is a bug in React DevTools.'
+              throw Error(
+                `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`
               );
             }
             parentElement.children = parentElement.children.filter(
@@ -760,7 +759,13 @@ export default class Store extends EventEmitter {
           i = i + 3 + numChildren;
 
           if (__DEBUG__) {
-            debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+            debug('Re-order', `Node ${id} children ${children.join(',')}`);
+          }
+
+          if (!this._idToElement.has(id)) {
+            throw Error(
+              `Cannot reorder children for node ${id} because no matching node was found in the Store.`
+            );
           }
 
           element = ((this._idToElement.get(id): any): Element);
@@ -898,7 +903,7 @@ export default class Store extends EventEmitter {
         const element = ((this.getElementAtIndex(i): any): Element);
 
         if (element == null) {
-          throw Error(`No element for index ${i}`);
+          throw Error(`Could not find element at index ${i}`);
         }
 
         let prefix = ' ';
@@ -928,7 +933,7 @@ export default class Store extends EventEmitter {
     // Make sure the pretty-printed test align with the Store's reported number of total rows.
     if (rootWeight !== this._weightAcrossRoots) {
       throw Error(
-        `Inconsistent store state. Individual root weights (${rootWeight}) do not match total weight (${
+        `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${
           this._weightAcrossRoots
         })`
       );

From ccecde76d1ffc7beee5c3e80987990ea233b4ceb Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 00:29:08 +0100
Subject: [PATCH 423/814] Harden assertions

---
 src/backend/renderer.js | 13 +++++--------
 src/devtools/store.js   | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 71c10da39264..3c08c9adcdb4 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -239,15 +239,12 @@ export function attach(
         parentFiber == null ? null : getDataForFiber(parentFiber);
       const parentFiberDisplayName =
         (parentFiberData && parentFiberData.displayName) || 'null';
+      // NOTE: calling getFiberID or getPrimaryFiber is unsafe here
+      // because it will put them in the map. For now, we'll omit them.
+      // TODO: better debugging story for this.
       console.log(
-        `[renderer] %c${name} %c${getFiberID(
-          getPrimaryFiber(fiber)
-        )}:${fiberDisplayName} %c${
-          parentFiber
-            ? getFiberID(getPrimaryFiber(parentFiber)) +
-              ':' +
-              parentFiberDisplayName
-            : ''
+        `[renderer] %c${name} %c${fiberDisplayName} %c${
+          parentFiber ? parentFiberDisplayName : ''
         }`,
         'color: red; font-weight: bold;',
         'color: blue;',
diff --git a/src/devtools/store.js b/src/devtools/store.js
index e6cb334166fe..1010f5c56e6a 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -711,9 +711,17 @@ export default class Store extends EventEmitter {
 
           element = ((this._idToElement.get(id): any): Element);
           parentID = element.parentID;
-
           weightDelta = -element.weight;
 
+          if (element.children.length > 0) {
+            throw new Error(
+              'Fiber ' +
+                id +
+                ' was removed before its children. ' +
+                'This is a bug in React DevTools.'
+            );
+          }
+
           this._idToElement.delete(id);
 
           if (parentID === 0) {
@@ -769,7 +777,16 @@ export default class Store extends EventEmitter {
           }
 
           element = ((this._idToElement.get(id): any): Element);
+          const prevChildren = element.children;
           element.children = Array.from(children);
+          if (element.children.length !== prevChildren.length) {
+            throw new Error(
+              'Fiber ' +
+                id +
+                ' received a different number of children on reorder. ' +
+                'This is a bug in React DevTools.'
+            );
+          }
 
           if (!element.isCollapsed) {
             const prevWeight = element.weight;

From d44bf272ad1ffb9adfd21de760645840ffdaec86 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 20:02:59 +0100
Subject: [PATCH 424/814] Refactor: materialize typed array in one place

---
 src/backend/renderer.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3c08c9adcdb4..d59490ecc8fd 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -574,7 +574,7 @@ export function attach(
   }
 
   let pendingOperations: Array<number> = [];
-  let pendingOperationsQueue: Array<Array<number>> | null = [];
+  let pendingOperationsQueue: Array<Uint32Array> | null = [];
 
   let nextOperation: Array<number> = [];
   function beginNextOperation(size: number): void {
@@ -624,14 +624,15 @@ export function attach(
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
     // so we do no longer need to dispatch a separate root-committed event.
+    const ops = Uint32Array.from(pendingOperations);
     if (pendingOperationsQueue !== null) {
       // Until the frontend has been connected, store the tree operations.
       // This will let us avoid walking the tree later when the frontend connects,
       // and it enables the Profiler's reload-and-profile functionality to work as well.
-      pendingOperationsQueue.push(pendingOperations);
+      pendingOperationsQueue.push(ops);
     } else {
       // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', Uint32Array.from(pendingOperations));
+      hook.emit('operations', ops);
     }
 
     pendingOperations = [];
@@ -1058,8 +1059,8 @@ export function attach(
     ) {
       // We may have already queued up some operations before the frontend connected
       // If so, let the frontend know about them.
-      localPendingOperationsQueue.forEach(pendingOperations => {
-        hook.emit('operations', Uint32Array.from(pendingOperations));
+      localPendingOperationsQueue.forEach(ops => {
+        hook.emit('operations', ops);
       });
     } else {
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.

From 346b628b43f24e08ee7c0f09492a292436f13324 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 Apr 2019 19:58:36 +0100
Subject: [PATCH 425/814] Add failing tests for Suspense with same type

---
 .../storeStressSync-test.js.snap              | 254 ++++++++++
 src/__tests__/storeStressSync-test.js         | 436 ++++++++++++++++++
 2 files changed, 690 insertions(+)

diff --git a/src/__tests__/__snapshots__/storeStressSync-test.js.snap b/src/__tests__/__snapshots__/storeStressSync-test.js.snap
index d4a4f7e4667d..801ad148a09a 100644
--- a/src/__tests__/__snapshots__/storeStressSync-test.js.snap
+++ b/src/__tests__/__snapshots__/storeStressSync-test.js.snap
@@ -115,6 +115,260 @@ exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync
       <Y>
 `;
 
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <C key="c">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <B key="b">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 17`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 18`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 19`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 20`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 21`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 22`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 23`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 24`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
 exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 1: abcde 1`] = `
 [root]
   ▾ <Parent>
diff --git a/src/__tests__/storeStressSync-test.js b/src/__tests__/storeStressSync-test.js
index 30f48d9a2614..54d60ef13e4f 100644
--- a/src/__tests__/storeStressSync-test.js
+++ b/src/__tests__/storeStressSync-test.js
@@ -663,4 +663,440 @@ describe('StoreStress (Sync Mode)', () => {
       }
     }
   });
+
+  it('should handle a stress test for Suspense without type change (Sync Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const MaybeSuspend = ({ children, suspend }) => {
+      if (suspend) {
+        return (
+          <div>
+            {children}
+            <Never />
+            <X />
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <Z />
+        </div>
+      );
+    };
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>
+              <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    // We don't actually assert here because the tree includes <MaybeSuspend>
+    // which is different from the snapshots above. So we take more snapshots.
+    let fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      fallbackSnapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <Y />
+                  <X />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          const suspenseID = store.getElementIDAtIndex(2);
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container
+          )
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
 });

From 8830ba890cdfc27970f1183fec41f8c2025d5977 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 01:09:57 +0100
Subject: [PATCH 426/814] Fix more Suspense traversal bugs

---
 src/backend/renderer.js                       | 140 +++++++++----
 src/devtools/store.js                         | 184 ++++++++++--------
 .../views/Profiler/CommitTreeBuilder.js       |  80 ++++----
 3 files changed, 241 insertions(+), 163 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index d59490ecc8fd..a15771a1fcf7 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -574,13 +574,21 @@ export function attach(
   }
 
   let pendingOperations: Array<number> = [];
+  let pendingRealUnmountedIDs: Array<number> = [];
+  let pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<Uint32Array> | null = [];
 
+  // We keep track of which Fibers have been reported as unmounted by React
+  // during this commit phase so that we don't try to "hide" them or their
+  // children when Suspense flips to fallback. These Fibers won't have IDs.
+  let fibersUnmountedInThisCommitPhase: WeakSet<Fiber> = new WeakSet();
+
+  // TODO: we could make this layer DEV-only and write directly to pendingOperations.
   let nextOperation: Array<number> = [];
   function beginNextOperation(size: number): void {
     nextOperation.length = size;
   }
-  function endNextOperation(addToStartOfQueue: boolean): void {
+  function endNextOperation(): void {
     if (__DEV__) {
       for (let i = 0; i < nextOperation.length; i++) {
         if (!Number.isInteger(nextOperation[i])) {
@@ -591,20 +599,16 @@ export function attach(
         }
       }
     }
-
-    if (addToStartOfQueue) {
-      pendingOperations.splice.apply(
-        pendingOperations,
-        [0, 0].concat(nextOperation)
-      );
-    } else {
-      pendingOperations.push.apply(pendingOperations, nextOperation);
-    }
+    pendingOperations.push.apply(pendingOperations, nextOperation);
     nextOperation.length = 0;
   }
 
   function flushPendingEvents(root: Object): void {
-    if (pendingOperations.length === 0) {
+    if (
+      pendingOperations.length === 0 &&
+      pendingRealUnmountedIDs.length === 0 &&
+      pendingSimulatedUnmountedIDs.length === 0
+    ) {
       // If we're currently profiling, send an "operations" method even if there are no mutations to the tree.
       // The frontend needs this no-op info to know how to reconstruct the tree for each commit,
       // even if a particular commit didn't change the shape of the tree.
@@ -613,18 +617,48 @@ export function attach(
       }
     }
 
+    const ops = new Uint32Array(
+      // Identify which renderer this update is coming from.
+      2 + // [rendererID, rootFiberID]
+      // All unmounts are batched in a single message.
+      2 + // [TREE_OPERATION_REMOVE, removedIDLength]
+        pendingRealUnmountedIDs.length +
+        pendingSimulatedUnmountedIDs.length +
+        // Regular operations
+        pendingOperations.length
+    );
+
     // Identify which renderer this update is coming from.
     // This enables roots to be mapped to renderers,
     // Which in turn enables fiber props, states, and hooks to be inspected.
-    beginNextOperation(2);
-    nextOperation[0] = rendererID;
-    nextOperation[1] = getFiberID(getPrimaryFiber(root.current));
-    endNextOperation(true);
+    let i = 0;
+    ops[i++] = rendererID;
+    ops[i++] = getFiberID(getPrimaryFiber(root.current));
+
+    // All unmounts except roots are batched in a single message.
+    ops[i++] = TREE_OPERATION_REMOVE;
+    // The first number is how many unmounted IDs we're gonna send.
+    ops[i++] =
+      pendingRealUnmountedIDs.length + pendingSimulatedUnmountedIDs.length;
+    // Fill in the real unmounts in the reverse order.
+    // They were inserted parents-first by React, but we want children-first.
+    // So we traverse our array backwards.
+    for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
+      ops[i++] = pendingRealUnmountedIDs[j];
+    }
+    // Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
+    // (We want children to go before parents.)
+    // They go *after* the real unmounts because we know for sure they won't be
+    // children of already pushed "real" IDs. If they were, we wouldn't be able
+    // to discover them during the traversal, as they would have been deleted.
+    ops.set(pendingSimulatedUnmountedIDs, i);
+    i += pendingSimulatedUnmountedIDs.length;
+    // Fill in the rest of the operations.
+    ops.set(pendingOperations, i);
 
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
     // so we do no longer need to dispatch a separate root-committed event.
-    const ops = Uint32Array.from(pendingOperations);
     if (pendingOperationsQueue !== null) {
       // Until the frontend has been connected, store the tree operations.
       // This will let us avoid walking the tree later when the frontend connects,
@@ -635,7 +669,10 @@ export function attach(
       hook.emit('operations', ops);
     }
 
-    pendingOperations = [];
+    pendingOperations.length = 0;
+    pendingRealUnmountedIDs.length = 0;
+    pendingSimulatedUnmountedIDs.length = 0;
+    fibersUnmountedInThisCommitPhase = new WeakSet();
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
@@ -657,7 +694,7 @@ export function attach(
       nextOperation[2] = ElementTypeRoot;
       nextOperation[3] = isProfilingSupported ? 1 : 0;
       nextOperation[4] = hasOwnerMetadata ? 1 : 0;
-      endNextOperation(false);
+      endNextOperation();
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
       const { _debugOwner } = fiber;
@@ -702,7 +739,7 @@ export function attach(
           nextOperation[6 + encodedDisplayNameSize + 1 + i] = encodedKey[i];
         }
       }
-      endNextOperation(false);
+      endNextOperation();
     }
 
     if (isProfiling) {
@@ -714,7 +751,7 @@ export function attach(
       nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
       nextOperation[1] = id;
       nextOperation[2] = treeBaseDuration;
-      endNextOperation(false);
+      endNextOperation();
 
       const { actualDuration } = fiber;
       if (actualDuration > 0) {
@@ -729,7 +766,7 @@ export function attach(
     }
   }
 
-  function recordUnmount(fiber: Fiber) {
+  function recordUnmount(fiber: Fiber, isSimulated: boolean) {
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
     if (!fiberToIDMap.has(primaryFiber)) {
@@ -744,19 +781,22 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      beginNextOperation(2);
+      // Removing a root needs to happen at the end
+      // so we don't batch it with other unmounts.
+      beginNextOperation(3);
       nextOperation[0] = TREE_OPERATION_REMOVE;
-      nextOperation[1] = id;
-      endNextOperation(false);
+      nextOperation[1] = 1; // Remove one item
+      nextOperation[2] = id;
+      endNextOperation();
     } else if (!shouldFilterFiber(fiber)) {
-      beginNextOperation(2);
-      nextOperation[0] = TREE_OPERATION_REMOVE;
-      nextOperation[1] = id;
-      // Non-root fibers are deleted during the commit phase.
-      // They are deleted in the parent-first order. However
-      // DevTools currently expects deletions to be child-first.
-      // This is why we prepend the delete operation to the queue.
-      endNextOperation(true);
+      // To maintain child-first ordering,
+      // we'll push it into one of these queues,
+      // and later arrange them in the correct order.
+      if (isSimulated) {
+        pendingSimulatedUnmountedIDs.push(id);
+      } else {
+        pendingRealUnmountedIDs.push(id);
+      }
     }
     fiberToIDMap.delete(primaryFiber);
     idToFiberMap.delete(id);
@@ -816,14 +856,35 @@ export function attach(
     }
   }
 
+  // We use this to simulate unmounting for Suspense trees
+  // when we switch from primary to fallback.
   function unmountFiberChildrenRecursively(fiber: Fiber) {
     if (__DEBUG__) {
       debug('unmountFiberChildrenRecursively()', fiber);
     }
+
+    // We might meet a nested Suspense on our way.
+    const isTimedOutSuspense =
+      fiber.tag === ReactTypeOfWork.SuspenseComponent &&
+      fiber.memoizedState !== null;
+
     let child = fiber.child;
+    if (isTimedOutSuspense) {
+      // If it's showing fallback tree, let's traverse it instead.
+      const primaryChildFragment = fiber.child;
+      const fallbackChildFragment = primaryChildFragment.sibling;
+      // Skip over to the real Fiber child.
+      child = fallbackChildFragment.child;
+    }
+
     while (child !== null) {
-      recordUnmount(child);
-      unmountFiberChildrenRecursively(child);
+      // Record simulated unmounts children-first.
+      // We might find real committed unmounts along the way--skip them.
+      // Otherwise we would send duplicated messages for the same IDs.
+      if (!fibersUnmountedInThisCommitPhase.has(child)) {
+        unmountFiberChildrenRecursively(child);
+        recordUnmount(child, true);
+      }
       child = child.sibling;
     }
   }
@@ -844,7 +905,7 @@ export function attach(
         nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
         nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
         nextOperation[2] = treeBaseDuration;
-        endNextOperation(false);
+        endNextOperation();
       }
 
       if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
@@ -883,7 +944,7 @@ export function attach(
     for (let i = 0; i < nextChildren.length; i++) {
       nextOperation[3 + i] = nextChildren[i];
     }
-    endNextOperation(false);
+    endNextOperation();
   }
 
   function findReorderedChildrenRecursively(
@@ -1091,10 +1152,13 @@ export function attach(
   }
 
   function handleCommitFiberUnmount(fiber) {
+    // Remeber this is a real deletion so we don't
+    // go down this tree when hiding Suspense nodes.
+    fibersUnmountedInThisCommitPhase.add(fiber);
     // This is not recursive.
     // We can't traverse fibers after unmounting so instead
     // we rely on React telling us about each unmount.
-    recordUnmount(fiber);
+    recordUnmount(fiber, false);
   }
 
   function handleCommitFiberRoot(root) {
@@ -1134,7 +1198,7 @@ export function attach(
         updateFiberRecursively(current, alternate, null);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
-        recordUnmount(current);
+        recordUnmount(current, false);
       }
     } else {
       // Mount a new root.
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1010f5c56e6a..814f6799deb9 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -543,6 +543,33 @@ export default class Store extends EventEmitter {
     }
   };
 
+  _adjustParentTreeWeight = (
+    parentElement: Element | null,
+    weightDelta: number
+  ) => {
+    let isInsideCollapsedSubTree = false;
+
+    while (parentElement != null) {
+      parentElement.weight += weightDelta;
+
+      // Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.
+      // Their weight will bubble up when the parent is expanded.
+      if (parentElement.isCollapsed) {
+        isInsideCollapsedSubTree = true;
+        break;
+      }
+
+      parentElement = ((this._idToElement.get(
+        parentElement.parentID
+      ): any): Element);
+    }
+
+    // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
+    if (!isInsideCollapsedSubTree) {
+      this._weightAcrossRoots += weightDelta;
+    }
+  };
+
   onBridgeOperations = (operations: Uint32Array) => {
     if (!(operations instanceof Uint32Array)) {
       // $FlowFixMe TODO HACK Temporary workaround for the fact that Chrome is not transferring the typed array.
@@ -579,20 +606,11 @@ export default class Store extends EventEmitter {
 
     let i = 2;
     while (i < operations.length) {
-      let id: number = ((null: any): number);
-      let element: Element = ((null: any): Element);
-      let ownerID: number = 0;
-      let parentID: number = ((null: any): number);
-      let parentElement: Element = ((null: any): Element);
-      let type: ElementType = ((null: any): ElementType);
-      let weightDelta: number = 0;
-
       const operation = operations[i];
-
       switch (operation) {
-        case TREE_OPERATION_ADD:
-          id = ((operations[i + 1]: any): number);
-          type = ((operations[i + 2]: any): ElementType);
+        case TREE_OPERATION_ADD: {
+          const id = ((operations[i + 1]: any): number);
+          const type = ((operations[i + 2]: any): ElementType);
 
           i = i + 3;
 
@@ -602,6 +620,8 @@ export default class Store extends EventEmitter {
             );
           }
 
+          let ownerID: number = 0;
+          let parentID: number = ((null: any): number);
           if (type === ElementTypeRoot) {
             if (__DEBUG__) {
               debug('Add', `new root node ${id}`);
@@ -672,7 +692,9 @@ export default class Store extends EventEmitter {
               );
             }
 
-            parentElement = ((this._idToElement.get(parentID): any): Element);
+            const parentElement = ((this._idToElement.get(
+              parentID
+            ): any): Element);
             parentElement.children = parentElement.children.concat(id);
 
             const element: Element = {
@@ -690,74 +712,83 @@ export default class Store extends EventEmitter {
 
             this._idToElement.set(id, element);
 
+            // TODO: don't recreate this on every iteration.
             const oldAddedElementIDs = addedElementIDs;
             addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
             addedElementIDs.set(oldAddedElementIDs);
             addedElementIDs[oldAddedElementIDs.length] = id;
 
-            weightDelta = 1;
+            this._adjustParentTreeWeight(parentElement, 1);
           }
           break;
+        }
         case TREE_OPERATION_REMOVE: {
-          id = ((operations[i + 1]: any): number);
-
-          if (!this._idToElement.has(id)) {
-            throw Error(
-              `Cannot remove node ${id} because no matching node was found in the Store.`
-            );
-          }
-
+          const removeLength = ((operations[i + 1]: any): number);
           i = i + 2;
 
-          element = ((this._idToElement.get(id): any): Element);
-          parentID = element.parentID;
-          weightDelta = -element.weight;
-
-          if (element.children.length > 0) {
-            throw new Error(
-              'Fiber ' +
-                id +
-                ' was removed before its children. ' +
-                'This is a bug in React DevTools.'
-            );
-          }
-
-          this._idToElement.delete(id);
+          for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+            const id = ((operations[i]: any): number);
 
-          if (parentID === 0) {
-            if (__DEBUG__) {
-              debug('Remove', `node ${id} root`);
+            if (!this._idToElement.has(id)) {
+              throw Error(
+                `Cannot remove node ${id} because no matching node was found in the Store.`
+              );
             }
 
-            this._roots = this._roots.filter(rootID => rootID !== id);
-            this._rootIDToRendererID.delete(id);
-            this._rootIDToCapabilities.delete(id);
+            i = i + 1;
 
-            haveRootsChanged = true;
-          } else {
-            if (__DEBUG__) {
-              debug('Remove', `node ${id} from parent ${parentID}`);
+            const element = ((this._idToElement.get(id): any): Element);
+            if (element.children.length > 0) {
+              throw new Error(
+                'Fiber ' +
+                  id +
+                  ' was removed before its children. ' +
+                  'This is a bug in React DevTools.'
+              );
             }
-            parentElement = ((this._idToElement.get(parentID): any): Element);
-            if (parentElement === undefined) {
-              throw Error(
-                `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`
+
+            this._idToElement.delete(id);
+
+            const parentID = element.parentID;
+            let parentElement = null;
+            if (parentID === 0) {
+              if (__DEBUG__) {
+                debug('Remove', `fiber ${id} root`);
+              }
+
+              this._roots = this._roots.filter(rootID => rootID !== id);
+              this._rootIDToRendererID.delete(id);
+              this._rootIDToCapabilities.delete(id);
+
+              haveRootsChanged = true;
+            } else {
+              if (__DEBUG__) {
+                debug('Remove', `fiber ${id} from parent ${parentID}`);
+              }
+              parentElement = ((this._idToElement.get(parentID): any): Element);
+              if (parentElement === undefined) {
+                throw Error(
+                  `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`
+                );
+              }
+              parentElement.children = parentElement.children.filter(
+                childID => childID !== id
               );
             }
-            parentElement.children = parentElement.children.filter(
-              childID => childID !== id
-            );
-          }
 
-          // Track removed items so search results can be updated
-          const oldRemovedElementIDs = removedElementIDs;
-          removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
-          removedElementIDs.set(oldRemovedElementIDs);
-          removedElementIDs[oldRemovedElementIDs.length] = id;
+            this._adjustParentTreeWeight(parentElement, -element.weight);
+
+            // Track removed items so search results can be updated
+            // TODO: no need to recreate this in a loop.
+            const oldRemovedElementIDs = removedElementIDs;
+            removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
+            removedElementIDs.set(oldRemovedElementIDs);
+            removedElementIDs[oldRemovedElementIDs.length] = id;
+          }
           break;
         }
-        case TREE_OPERATION_RESET_CHILDREN:
-          id = ((operations[i + 1]: any): number);
+        case TREE_OPERATION_RESET_CHILDREN: {
+          const id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);
           const children = ((operations.slice(
             i + 3,
@@ -776,7 +807,7 @@ export default class Store extends EventEmitter {
             );
           }
 
-          element = ((this._idToElement.get(id): any): Element);
+          const element = ((this._idToElement.get(id): any): Element);
           const prevChildren = element.children;
           element.children = Array.from(children);
           if (element.children.length !== prevChildren.length) {
@@ -799,10 +830,13 @@ export default class Store extends EventEmitter {
             });
 
             element.weight = nextWeight;
-
-            weightDelta = nextWeight - prevWeight;
+            // TODO: passing null here is suspicious, but it's existing behavior.
+            // It is suspicious because either we shouldn't need a delta at all--
+            // or we should apply it to all parents, and not just this item.
+            this._adjustParentTreeWeight(null, nextWeight - prevWeight);
           }
           break;
+        }
         case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
           // Base duration updates are only sent while profiling is in progress.
           // We can ignore them at this point.
@@ -812,28 +846,6 @@ export default class Store extends EventEmitter {
         default:
           throw Error(`Unsupported Bridge operation ${operation}`);
       }
-
-      let isInsideCollapsedSubTree = false;
-
-      while (parentElement != null) {
-        parentElement.weight += weightDelta;
-
-        // Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.
-        // Their weight will bubble up when the parent is expanded.
-        if (parentElement.isCollapsed) {
-          isInsideCollapsedSubTree = true;
-          break;
-        }
-
-        parentElement = ((this._idToElement.get(
-          parentElement.parentID
-        ): any): Element);
-      }
-
-      // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
-      if (!isInsideCollapsedSubTree) {
-        this._weightAcrossRoots += weightDelta;
-      }
     }
 
     this._revision++;
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index b077f51e3bad..0737dd8d6acc 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -168,18 +168,12 @@ function updateTree(
 
   let i = 2;
   while (i < operations.length) {
-    let id: number = ((null: any): number);
-    let node: Node = ((null: any): Node);
-    let parentID: number = ((null: any): number);
-    let parentNode: Node = ((null: any): Node);
-    let type: ElementType = ((null: any): ElementType);
-
     const operation = operations[i];
 
     switch (operation) {
       case TREE_OPERATION_ADD:
-        id = ((operations[i + 1]: any): number);
-        type = ((operations[i + 2]: any): ElementType);
+        const id = ((operations[i + 1]: any): number);
+        const type = ((operations[i + 2]: any): ElementType);
 
         i = i + 3;
 
@@ -210,7 +204,7 @@ function updateTree(
 
           nodes.set(id, node);
         } else {
-          parentID = ((operations[i]: any): number);
+          const parentID = ((operations[i]: any): number);
           i++;
 
           i++; // ownerID
@@ -240,7 +234,7 @@ function updateTree(
             );
           }
 
-          parentNode = getClonedNode(parentID);
+          const parentNode = getClonedNode(parentID);
           parentNode.children = parentNode.children.concat(id);
 
           const node: Node = {
@@ -254,40 +248,46 @@ function updateTree(
 
           nodes.set(id, node);
         }
-        break;
-      case TREE_OPERATION_REMOVE:
-        id = ((operations[i + 1]: any): number);
 
+        break;
+      case TREE_OPERATION_REMOVE: {
+        const removeLength = ((operations[i + 1]: any): number);
         i = i + 2;
 
-        if (!nodes.has(id)) {
-          throw new Error(
-            'Commit tree does not contain fiber ' +
-              id +
-              '. This is a bug in React DevTools.'
-          );
-        }
+        for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+          const id = ((operations[i]: any): number);
+          i = i + 1;
+
+          if (!nodes.has(id)) {
+            throw new Error(
+              'Commit tree does not contain fiber ' +
+                id +
+                '. This is a bug in React DevTools.'
+            );
+          }
 
-        node = getClonedNode(id);
-        parentID = node.parentID;
+          const node = getClonedNode(id);
+          const parentID = node.parentID;
 
-        nodes.delete(id);
+          nodes.delete(id);
 
-        parentNode = getClonedNode(parentID);
-        if (parentNode == null) {
-          // No-op
-        } else {
-          if (__DEBUG__) {
-            debug('Remove', `fiber ${id} from parent ${parentID}`);
-          }
+          const parentNode = getClonedNode(parentID);
+          if (parentNode == null) {
+            // No-op
+          } else {
+            if (__DEBUG__) {
+              debug('Remove', `fiber ${id} from parent ${parentID}`);
+            }
 
-          parentNode.children = parentNode.children.filter(
-            childID => childID !== id
-          );
+            parentNode.children = parentNode.children.filter(
+              childID => childID !== id
+            );
+          }
         }
         break;
-      case TREE_OPERATION_RESET_CHILDREN:
-        id = ((operations[i + 1]: any): number);
+      }
+      case TREE_OPERATION_RESET_CHILDREN: {
+        const id = ((operations[i + 1]: any): number);
         const numChildren = ((operations[i + 2]: any): number);
         const children = ((operations.slice(
           i + 3,
@@ -300,14 +300,15 @@ function updateTree(
           debug('Re-order', `fiber ${id} children ${children.join(',')}`);
         }
 
-        node = getClonedNode(id);
+        const node = getClonedNode(id);
         node.children = Array.from(children);
 
         break;
-      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
-        id = operations[i + 1];
+      }
+      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: {
+        const id = operations[i + 1];
 
-        node = getClonedNode(id);
+        const node = getClonedNode(id);
         node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
 
         if (__DEBUG__) {
@@ -319,6 +320,7 @@ function updateTree(
 
         i = i + 3;
         break;
+      }
       default:
         throw Error(`Unsupported Bridge operation ${operation}`);
     }

From 534dfb0ca2e1640fa24a8cf2893b23aaf3e3199b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 01:13:25 +0100
Subject: [PATCH 427/814] Optimize: don't recreate ID arrays all the time

---
 src/devtools/store.js | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 814f6799deb9..f7def61a7b68 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -601,8 +601,8 @@ export default class Store extends EventEmitter {
       }
     }
 
-    let addedElementIDs: Uint32Array = new Uint32Array(0);
-    let removedElementIDs: Uint32Array = new Uint32Array(0);
+    let addedElementIDs: Array<number> = [];
+    let removedElementIDs: Array<number> = [];
 
     let i = 2;
     while (i < operations.length) {
@@ -711,13 +711,7 @@ export default class Store extends EventEmitter {
             };
 
             this._idToElement.set(id, element);
-
-            // TODO: don't recreate this on every iteration.
-            const oldAddedElementIDs = addedElementIDs;
-            addedElementIDs = new Uint32Array(addedElementIDs.length + 1);
-            addedElementIDs.set(oldAddedElementIDs);
-            addedElementIDs[oldAddedElementIDs.length] = id;
-
+            addedElementIDs.push(id);
             this._adjustParentTreeWeight(parentElement, 1);
           }
           break;
@@ -777,13 +771,7 @@ export default class Store extends EventEmitter {
             }
 
             this._adjustParentTreeWeight(parentElement, -element.weight);
-
-            // Track removed items so search results can be updated
-            // TODO: no need to recreate this in a loop.
-            const oldRemovedElementIDs = removedElementIDs;
-            removedElementIDs = new Uint32Array(removedElementIDs.length + 1);
-            removedElementIDs.set(oldRemovedElementIDs);
-            removedElementIDs[oldRemovedElementIDs.length] = id;
+            removedElementIDs.push(id);
           }
           break;
         }
@@ -872,7 +860,10 @@ export default class Store extends EventEmitter {
       console.groupEnd();
     }
 
-    this.emit('mutated', [addedElementIDs, removedElementIDs]);
+    this.emit('mutated', [
+      new Uint32Array(addedElementIDs),
+      new Uint32Array(removedElementIDs),
+    ]);
   };
 
   onProfilingStatus = (isProfiling: boolean) => {

From 72e67b343f2196c572d59e4ea95f8d7e3903647e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 01:18:25 +0100
Subject: [PATCH 428/814] Add Concurrent Mode test

---
 .../storeStressTestConcurrent-test.js.snap    | 254 +++++++++++
 .../storeStressTestConcurrent-test.js         | 431 ++++++++++++++++++
 2 files changed, 685 insertions(+)

diff --git a/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap b/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
index 22f2fdf40690..9527d9f6025d 100644
--- a/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
+++ b/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
@@ -115,6 +115,260 @@ exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurr
       <Y>
 `;
 
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <C key="c">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <B key="b">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 17`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 18`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 19`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 20`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 21`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 22`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 23`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 24`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
 exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 1: abcde 1`] = `
 [root]
   ▾ <Parent>
diff --git a/src/__tests__/storeStressTestConcurrent-test.js b/src/__tests__/storeStressTestConcurrent-test.js
index 6bfd86733703..546db55066b8 100644
--- a/src/__tests__/storeStressTestConcurrent-test.js
+++ b/src/__tests__/storeStressTestConcurrent-test.js
@@ -668,4 +668,435 @@ describe('StoreStressConcurrent', () => {
       }
     }
   });
+
+  it('should handle a stress test for Suspense without type change (Concurrent Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const MaybeSuspend = ({ children, suspend }) => {
+      if (suspend) {
+        return (
+          <div>
+            {children}
+            <Never />
+            <X />
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <Z />
+        </div>
+      );
+    };
+
+    const Root = ({ children }) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.unstable_createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>
+              <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+            </React.Suspense>
+            <Y />
+          </Root>
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    // We don't actually assert here because the tree includes <MaybeSuspend>
+    // which is different from the snapshots above. So we take more snapshots.
+    let fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>
+        )
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      fallbackSnapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <Y />
+                  <X />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.unstable_createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          const suspenseID = store.getElementIDAtIndex(2);
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>
+          )
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
 });

From b0c0a11f1b8f8047cbbd898ca481ca03b8d47710 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 01:41:00 +0100
Subject: [PATCH 429/814] Revert accidental change

---
 src/devtools/store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index f7def61a7b68..267a8cecde92 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -747,7 +747,7 @@ export default class Store extends EventEmitter {
             let parentElement = null;
             if (parentID === 0) {
               if (__DEBUG__) {
-                debug('Remove', `fiber ${id} root`);
+                debug('Remove', `node ${id} root`);
               }
 
               this._roots = this._roots.filter(rootID => rootID !== id);
@@ -757,7 +757,7 @@ export default class Store extends EventEmitter {
               haveRootsChanged = true;
             } else {
               if (__DEBUG__) {
-                debug('Remove', `fiber ${id} from parent ${parentID}`);
+                debug('Remove', `node ${id} from parent ${parentID}`);
               }
               parentElement = ((this._idToElement.get(parentID): any): Element);
               if (parentElement === undefined) {

From 3d09b4aaa5aa2e2096ba87e2448f4056185b0b6f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 01:54:39 +0100
Subject: [PATCH 430/814] Don't select search result unless user does something

---
 src/devtools/views/Components/TreeContext.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 0be84a9e1db7..f66ad3e46e15 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -353,10 +353,6 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     }
   }
 
-  if (searchIndex !== prevSearchIndex) {
-    // The user intentionally navigated between search results
-    didRequestSearch = true;
-  }
   if (searchText !== prevSearchText) {
     const newSearchIndex = searchResults.indexOf(selectedElementID);
     if (newSearchIndex === -1) {

From 24736e4ff57832b9fcc1da8137729ae65a78124a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 17:58:48 -0700
Subject: [PATCH 431/814] Hardened reorder child invariants

---
 src/devtools/store.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1010f5c56e6a..35ae73363c6e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -714,12 +714,7 @@ export default class Store extends EventEmitter {
           weightDelta = -element.weight;
 
           if (element.children.length > 0) {
-            throw new Error(
-              'Fiber ' +
-                id +
-                ' was removed before its children. ' +
-                'This is a bug in React DevTools.'
-            );
+            throw new Error(`Node ${id} was removed before its children.`);
           }
 
           this._idToElement.delete(id);
@@ -759,7 +754,7 @@ export default class Store extends EventEmitter {
         case TREE_OPERATION_RESET_CHILDREN:
           id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);
-          const children = ((operations.slice(
+          const nextChildren = ((operations.slice(
             i + 3,
             i + 3 + numChildren
           ): any): Array<number>);
@@ -767,7 +762,7 @@ export default class Store extends EventEmitter {
           i = i + 3 + numChildren;
 
           if (__DEBUG__) {
-            debug('Re-order', `Node ${id} children ${children.join(',')}`);
+            debug('Re-order', `Node ${id} children ${nextChildren.join(',')}`);
           }
 
           if (!this._idToElement.has(id)) {
@@ -777,23 +772,28 @@ export default class Store extends EventEmitter {
           }
 
           element = ((this._idToElement.get(id): any): Element);
+
           const prevChildren = element.children;
-          element.children = Array.from(children);
-          if (element.children.length !== prevChildren.length) {
-            throw new Error(
-              'Fiber ' +
-                id +
-                ' received a different number of children on reorder. ' +
-                'This is a bug in React DevTools.'
+          if (
+            nextChildren.length !== prevChildren.length ||
+            nextChildren.find(childID => {
+              const childElement = this._idToElement.get(childID);
+              return childElement == null || childElement.parentID !== id;
+            }) != null
+          ) {
+            throw Error(
+              `Children cannot be added or removed during a reorder operation.`
             );
           }
 
+          element.children = Array.from(nextChildren);
+
           if (!element.isCollapsed) {
             const prevWeight = element.weight;
 
             let nextWeight = element.type === ElementTypeRoot ? 0 : 1;
 
-            children.forEach(childID => {
+            nextChildren.forEach(childID => {
               const child = ((this._idToElement.get(childID): any): Element);
               nextWeight += child.isCollapsed ? 1 : child.weight;
             });

From 60b614f5272fd0fa400c555e011f8262582c5b55 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 17:59:53 -0700
Subject: [PATCH 432/814] Renamed TREE_OPERATION_RESET_CHILDREN ->
 TREE_OPERATION_REORDER_CHILDREN

---
 src/backend/renderer.js                          | 4 ++--
 src/constants.js                                 | 2 +-
 src/devtools/store.js                            | 4 ++--
 src/devtools/views/Profiler/CommitTreeBuilder.js | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3c08c9adcdb4..af10a64a72e6 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -21,7 +21,7 @@ import {
   LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
-  TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { getUID } from '../utils';
@@ -876,7 +876,7 @@ export function attach(
 
     const numChildren = nextChildren.length;
     beginNextOperation(3 + numChildren);
-    nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
+    nextOperation[0] = TREE_OPERATION_REORDER_CHILDREN;
     nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
     nextOperation[2] = numChildren;
     for (let i = 0; i < nextChildren.length; i++) {
diff --git a/src/constants.js b/src/constants.js
index ef69e21760e9..d64cc5da320a 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -2,7 +2,7 @@
 
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
-export const TREE_OPERATION_RESET_CHILDREN = 3;
+export const TREE_OPERATION_REORDER_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 35ae73363c6e..b2b18e118ccc 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -6,7 +6,7 @@ import throttle from 'lodash.throttle';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
-  TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { ElementTypeRoot } from './types';
@@ -751,7 +751,7 @@ export default class Store extends EventEmitter {
           removedElementIDs[oldRemovedElementIDs.length] = id;
           break;
         }
-        case TREE_OPERATION_RESET_CHILDREN:
+        case TREE_OPERATION_REORDER_CHILDREN:
           id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);
           const nextChildren = ((operations.slice(
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index b077f51e3bad..5f905b13917c 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -4,7 +4,7 @@ import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
-  TREE_OPERATION_RESET_CHILDREN,
+  TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from 'src/constants';
 import { utfDecodeString } from 'src/utils';
@@ -286,7 +286,7 @@ function updateTree(
           );
         }
         break;
-      case TREE_OPERATION_RESET_CHILDREN:
+      case TREE_OPERATION_REORDER_CHILDREN:
         id = ((operations[i + 1]: any): number);
         const numChildren = ((operations[i + 2]: any): number);
         const children = ((operations.slice(

From c0b414d58140f2dda765ef114d981a967992026b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 18:13:34 -0700
Subject: [PATCH 433/814] Node scripts should fail if not NODE_ENV specified

---
 package.json                             | 2 +-
 shells/browser/shared/webpack.backend.js | 8 +++++++-
 shells/browser/shared/webpack.config.js  | 5 +++++
 shells/dev/webpack.config.js             | 8 +++++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 60850a905b6f..48c6dd7a8e89 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
-    "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
+    "start": "cd ./shells/dev && opener ./index.html && cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
     "start:prod": "cross-env NODE_ENV=production npm start",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index 66554210c01b..99249b3053a7 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -3,7 +3,13 @@ const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
 
-const __DEV__ = process.env.NODE_ENV === 'development';
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 827d75a30c6b..8ff77ebc6eb3 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -4,6 +4,11 @@ const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
 const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index deb695ed44a7..7cd9c53b2ab0 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -3,7 +3,13 @@ const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../utils');
 
-const __DEV__ = process.env.NODE_ENV === 'development';
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();

From f286c0d901588b6d2ba811e4b9077a65279bdd70 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Apr 2019 18:19:10 -0700
Subject: [PATCH 434/814] Increased contrast for selected+inactive background
 color

---
 src/devtools/views/root.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index fd71c319ea9c..83dabea7445a 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -35,7 +35,7 @@
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
   --light-color-hover-background: #ebf1fb;
-  --light-color-inactive-background: #f1f1f1;
+  --light-color-inactive-background: #e5e5e5;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);

From 3e657a603181b41abf1fb01ea835ae73c9cac5fa Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 13:09:25 +0100
Subject: [PATCH 435/814] Prettier

---
 src/devtools/store.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 829f11b681e1..5e9c7b0993d1 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -799,10 +799,12 @@ export default class Store extends EventEmitter {
           }
           // This check is more expensive so it's gated
           if (__DEV__) {
-            if (nextChildren.find(childID => {
-              const childElement = this._idToElement.get(childID);
-              return childElement == null || childElement.parentID !== id;
-            }) != null) {
+            if (
+              nextChildren.find(childID => {
+                const childElement = this._idToElement.get(childID);
+                return childElement == null || childElement.parentID !== id;
+              }) != null
+            ) {
               console.error(
                 `Children cannot be added or removed during a reorder operation.`
               );

From efb5855c8c43511e3e6ed134660ed82aafcda829 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 13:17:17 +0100
Subject: [PATCH 436/814] Nits

---
 OVERVIEW.md           | 12 ++++++++----
 src/devtools/store.js | 21 ++-------------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index f91b420332ea..09d871462e07 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -69,16 +69,20 @@ For example, adding a function component `<Foo>` with an id 2:
 
 #### Removing a node
 
-Removing a fiber from the tree (a root or a leaf) only requires sending 2 numbers:
+Removing a fiber from the tree (a root or a leaf) requires sending:
 
 1. remove operation constant (`2`)
-1. fiber id
+1. how many items were removed
+1. number of children
+   * (followed by a children-first list of removed fiber ids)
 
-For example, removing a root fiber with an id of 1:
+For example, removing fibers with ids of 35 and 21:
 ```js
 [
   2, // remove operation
-  1, // fiber id
+  1, // number of removed fibers
+  35, // first removed id
+  21, // second removed id
 ]
 ```
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5e9c7b0993d1..048568d5bb04 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -601,8 +601,8 @@ export default class Store extends EventEmitter {
       }
     }
 
-    let addedElementIDs: Array<number> = [];
-    let removedElementIDs: Array<number> = [];
+    const addedElementIDs: Array<number> = [];
+    const removedElementIDs: Array<number> = [];
 
     let i = 2;
     while (i < operations.length) {
@@ -811,23 +811,6 @@ export default class Store extends EventEmitter {
             }
           }
           element.children = Array.from(nextChildren);
-
-          if (!element.isCollapsed) {
-            const prevWeight = element.weight;
-
-            let nextWeight = element.type === ElementTypeRoot ? 0 : 1;
-
-            nextChildren.forEach(childID => {
-              const child = ((this._idToElement.get(childID): any): Element);
-              nextWeight += child.isCollapsed ? 1 : child.weight;
-            });
-
-            element.weight = nextWeight;
-            // TODO: passing null here is suspicious, but it's existing behavior.
-            // It is suspicious because either we shouldn't need a delta at all--
-            // or we should apply it to all parents, and not just this item.
-            this._adjustParentTreeWeight(null, nextWeight - prevWeight);
-          }
           break;
         }
         case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:

From fb8ad3486e70aa96d3e183db90b79bd915f474a5 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 13:19:58 +0100
Subject: [PATCH 437/814] Don't reorder a single child

---
 src/backend/renderer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 09fc0881dab6..ea6771100533 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -937,6 +937,10 @@ export function attach(
     }
 
     const numChildren = nextChildren.length;
+    if (numChildren === 1) {
+      // No need to reorder a single child.
+      return;
+    }
     beginNextOperation(3 + numChildren);
     nextOperation[0] = TREE_OPERATION_REORDER_CHILDREN;
     nextOperation[1] = getFiberID(getPrimaryFiber(fiber));

From 9a395c2f2c78172147c974de29727824168b51a0 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Fri, 19 Apr 2019 13:21:09 +0100
Subject: [PATCH 438/814] No need to reorder empty children either

---
 src/backend/renderer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ea6771100533..aeb6615e6f04 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -937,8 +937,8 @@ export function attach(
     }
 
     const numChildren = nextChildren.length;
-    if (numChildren === 1) {
-      // No need to reorder a single child.
+    if (numChildren < 2) {
+      // No need to reorder.
       return;
     }
     beginNextOperation(3 + numChildren);

From d7e8fccd1a7a01ecb3cb27d39be87c4f0d9a8cde Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Apr 2019 07:54:30 -0700
Subject: [PATCH 439/814] Fixed an OVERVIEW typo

---
 OVERVIEW.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 09d871462e07..af1535faa8cc 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -80,7 +80,7 @@ For example, removing fibers with ids of 35 and 21:
 ```js
 [
   2, // remove operation
-  1, // number of removed fibers
+  2, // number of removed fibers
   35, // first removed id
   21, // second removed id
 ]

From a186dc2e8d11e13e6c32009305ec0501b740a829 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 13:46:56 +0100
Subject: [PATCH 440/814] Filter out dehydrated Suspense nodes

---
 src/backend/renderer.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index aeb6615e6f04..728f1c0e593e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -89,6 +89,7 @@ function getInternalReactConstants(version) {
       ContextProvider: 10,
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
+      DehydratedSuspenseComponent: 18, // Behind a flag
       EventComponent: 19, // Added in 16.9
       EventTarget: 20, // Added in 16.9
       ForwardRef: 11,
@@ -115,6 +116,7 @@ function getInternalReactConstants(version) {
       ContextProvider: 12,
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
+      DehydratedSuspenseComponent: -1, // Doesn't exist yet
       EventComponent: -1, // Doesn't exist yet
       EventTarget: -1, // Doesn't exist yet
       ForwardRef: 13,
@@ -141,6 +143,7 @@ function getInternalReactConstants(version) {
       ContextProvider: 13,
       CoroutineComponent: 7,
       CoroutineHandlerPhase: 8,
+      DehydratedSuspenseComponent: -1, // Doesn't exist yet
       EventComponent: -1, // Doesn't exist yet
       EventTarget: -1, // Doesn't exist yet
       ForwardRef: 14,
@@ -188,6 +191,7 @@ export function attach(
     FunctionComponent,
     ClassComponent,
     ContextConsumer,
+    DehydratedSuspenseComponent,
     EventComponent,
     EventTarget,
     Fragment,
@@ -267,6 +271,13 @@ export function attach(
       case MemoComponent:
       case SimpleMemoComponent:
         return false;
+      case DehydratedSuspenseComponent:
+        // TODO: ideally we would show dehydrated Suspense immediately.
+        // However, it has some special behavior (like disconnecting
+        // an alternate and turning into real Suspense) which breaks DevTools.
+        // For now, ignore it, and only show it once it gets hydrated.
+        // https://github.com/bvaughn/react-devtools-experimental/issues/197
+        return true;
       case EventComponent:
       case HostPortal:
       case HostComponent:

From d05106e364fbec4c09233d2ad2b669c58e1b48b1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 14:34:13 +0100
Subject: [PATCH 441/814] Clear DOM overlay on shutdown

---
 src/backend/agent.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index f1f7532e1f2c..74676d44b9a9 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -402,6 +402,8 @@ export default class Agent extends EventEmitter {
   };
 
   shutdown = () => {
+    // Clean up the overlay if visible, and associated events.
+    this.stopInspectingDOM();
     this.emit('shutdown');
   };
 

From 4ffdffb598cc66b08169f43ebd1f1560592b058b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 16:20:03 +0100
Subject: [PATCH 442/814] Fix scrolling to selected row in collapsed mode

---
 src/devtools/store.js                        | 15 +++++++++++++++
 src/devtools/views/Components/TreeContext.js | 14 ++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 048568d5bb04..ff9129cb29b3 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -429,6 +429,21 @@ export default class Store extends EventEmitter {
     return null;
   }
 
+  isInsideCollapsedSubTree(id: number): boolean {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        return false;
+      } else {
+        current = this._idToElement.get(current.parentID);
+        if (current != null && current.isCollapsed) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   startProfiling(): void {
     this._bridge.send('startProfiling');
 
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index f66ad3e46e15..bd295c920e35 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -596,6 +596,20 @@ function TreeContextController({ children, viewElementSource }: Props) {
           state = reduceTreeState(store, state, action);
           state = reduceSearchState(store, state, action);
           state = reduceOwnersState(store, state, action);
+
+          // If the selected ID is in a collapsed subtree, reset the selected index to null.
+          // We'll know the correct index after the layout effect will toggle the tree,
+          // and the store tree is mutated to account for that.
+          if (
+            state.selectedElementID !== null &&
+            store.isInsideCollapsedSubTree(state.selectedElementID)
+          ) {
+            return {
+              ...state,
+              selectedElementIndex: null,
+            };
+          }
+
           return state;
         default:
           throw new Error(`Unrecognized action "${type}"`);

From 4b9082eea14a71a5c709a35236f226fea5be1585 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Apr 2019 10:44:03 -0700
Subject: [PATCH 443/814] Changed style and position of search-for-element
 button to more closely matchin Chrome ( based on user testing)

---
 src/devtools/views/ButtonIcon.js              |  5 ++---
 src/devtools/views/Components/OwnersStack.js  | 16 ++++++++--------
 src/devtools/views/Components/SearchInput.css |  1 +
 src/devtools/views/Components/SearchInput.js  |  1 -
 src/devtools/views/Components/Tree.css        |  7 +++++++
 src/devtools/views/Components/Tree.js         |  3 ++-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index c27e63183c91..93891c5505cf 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -172,9 +172,8 @@ const PATH_RELOAD = `
 `;
 
 const PATH_SEARCH = `
-  M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
-  4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
-  0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
+  M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
+  M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
 `;
 
 const PATH_UNDO = `
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 983d8e502a50..968a107d01ca 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -50,14 +50,6 @@ export default function OwnerStack() {
 
   return (
     <div className={styles.OwnerStack}>
-      <Button
-        className={styles.IconButton}
-        onClick={resetOwnerStack}
-        title="Back to tree view"
-      >
-        <ButtonIcon type="close" />
-      </Button>
-      <div className={styles.VRule} />
       <div className={styles.Bar} ref={elementsBarRef}>
         {isOverflowing && (
           <ElementsDropdown
@@ -76,6 +68,14 @@ export default function OwnerStack() {
           ))
         )}
       </div>
+      <div className={styles.VRule} />
+      <Button
+        className={styles.IconButton}
+        onClick={resetOwnerStack}
+        title="Back to tree view"
+      >
+        <ButtonIcon type="close" />
+      </Button>
     </div>
   );
 }
diff --git a/src/devtools/views/Components/SearchInput.css b/src/devtools/views/Components/SearchInput.css
index a4c17ae1f585..d352cff8dd57 100644
--- a/src/devtools/views/Components/SearchInput.css
+++ b/src/devtools/views/Components/SearchInput.css
@@ -18,6 +18,7 @@
 .InputIcon {
   pointer-events: none;
   z-index: 2;
+  color: var(--color-dim);
 }
 
 .IndexLabel {
diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index e609cfa7b214..7a0744afe849 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -127,7 +127,6 @@ export default function SearchInput(props: Props) {
       >
         <ButtonIcon type="close" />
       </Button>
-      <div className={styles.RightVRule} />
     </div>
   );
 }
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 8f58e0f82f95..98b9b858700a 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -29,3 +29,10 @@
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index bbfba9a76c8e..44f9f94f656a 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -290,8 +290,9 @@ export default function Tree(props: Props) {
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
-        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
+        <div className={styles.VRule} />
+        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
       </div>
       <div
         className={styles.AutoSizerWrapper}

From 02a3a2275307389474c11119cef1f13763cfca60 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 21:05:52 +0100
Subject: [PATCH 444/814] Push operations directly to the array

---
 src/backend/renderer.js | 89 ++++++++++++++++-------------------------
 1 file changed, 34 insertions(+), 55 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 728f1c0e593e..acadd65bf203 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -594,24 +594,16 @@ export function attach(
   // children when Suspense flips to fallback. These Fibers won't have IDs.
   let fibersUnmountedInThisCommitPhase: WeakSet<Fiber> = new WeakSet();
 
-  // TODO: we could make this layer DEV-only and write directly to pendingOperations.
-  let nextOperation: Array<number> = [];
-  function beginNextOperation(size: number): void {
-    nextOperation.length = size;
-  }
-  function endNextOperation(): void {
+  function pushOperation(op: number): void {
     if (__DEV__) {
-      for (let i = 0; i < nextOperation.length; i++) {
-        if (!Number.isInteger(nextOperation[i])) {
-          console.error(
-            'endNextOperation() was called but some values are not integers.',
-            nextOperation
-          );
-        }
+      if (!Number.isInteger(op)) {
+        console.error(
+          'pushOperation() was called but the value is not an integer.',
+          op
+        );
       }
     }
-    pendingOperations.push.apply(pendingOperations, nextOperation);
-    nextOperation.length = 0;
+    pendingOperations.push(op);
   }
 
   function flushPendingEvents(root: Object): void {
@@ -699,13 +691,11 @@ export function attach(
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
 
     if (isRoot) {
-      beginNextOperation(5);
-      nextOperation[0] = TREE_OPERATION_ADD;
-      nextOperation[1] = id;
-      nextOperation[2] = ElementTypeRoot;
-      nextOperation[3] = isProfilingSupported ? 1 : 0;
-      nextOperation[4] = hasOwnerMetadata ? 1 : 0;
-      endNextOperation();
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(ElementTypeRoot);
+      pushOperation(isProfilingSupported ? 1 : 0);
+      pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
       const { displayName, key, type } = getDataForFiber(fiber);
       const { _debugOwner } = fiber;
@@ -732,25 +722,23 @@ export function attach(
         displayName === null ? 0 : encodedDisplayName.length;
       const encodedKeySize = key === null ? 0 : encodedKey.length;
 
-      beginNextOperation(7 + encodedDisplayNameSize + encodedKeySize);
-      nextOperation[0] = TREE_OPERATION_ADD;
-      nextOperation[1] = id;
-      nextOperation[2] = type;
-      nextOperation[3] = parentID;
-      nextOperation[4] = ownerID;
-      nextOperation[5] = encodedDisplayNameSize;
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(type);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(encodedDisplayNameSize);
       if (displayName !== null) {
         for (let i = 0; i < encodedDisplayName.length; i++) {
-          nextOperation[6 + i] = encodedDisplayName[i];
+          pushOperation(encodedDisplayName[i]);
         }
       }
-      nextOperation[6 + encodedDisplayNameSize] = encodedKeySize;
+      pushOperation(encodedKeySize);
       if (key !== null) {
         for (let i = 0; i < encodedKey.length; i++) {
-          nextOperation[6 + encodedDisplayNameSize + 1 + i] = encodedKey[i];
+          pushOperation(encodedKey[i]);
         }
       }
-      endNextOperation();
     }
 
     if (isProfiling) {
@@ -758,11 +746,9 @@ export function attach(
       // So we have to convert them from milliseconds to microseconds so we can send them as ints.
       const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
 
-      beginNextOperation(3);
-      nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-      nextOperation[1] = id;
-      nextOperation[2] = treeBaseDuration;
-      endNextOperation();
+      pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
+      pushOperation(id);
+      pushOperation(treeBaseDuration);
 
       const { actualDuration } = fiber;
       if (actualDuration > 0) {
@@ -794,11 +780,9 @@ export function attach(
     if (isRoot) {
       // Removing a root needs to happen at the end
       // so we don't batch it with other unmounts.
-      beginNextOperation(3);
-      nextOperation[0] = TREE_OPERATION_REMOVE;
-      nextOperation[1] = 1; // Remove one item
-      nextOperation[2] = id;
-      endNextOperation();
+      pushOperation(TREE_OPERATION_REMOVE);
+      pushOperation(1); // Remove one item
+      pushOperation(id);
     } else if (!shouldFilterFiber(fiber)) {
       // To maintain child-first ordering,
       // we'll push it into one of these queues,
@@ -911,12 +895,9 @@ export function attach(
         // Tree base duration updates are included in the operations typed array.
         // So we have to convert them from milliseconds to microseconds so we can send them as ints.
         const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
-
-        beginNextOperation(3);
-        nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
-        nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
-        nextOperation[2] = treeBaseDuration;
-        endNextOperation();
+        pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
+        pushOperation(getFiberID(getPrimaryFiber(fiber)));
+        pushOperation(treeBaseDuration);
       }
 
       if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
@@ -952,14 +933,12 @@ export function attach(
       // No need to reorder.
       return;
     }
-    beginNextOperation(3 + numChildren);
-    nextOperation[0] = TREE_OPERATION_REORDER_CHILDREN;
-    nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
-    nextOperation[2] = numChildren;
+    pushOperation(TREE_OPERATION_REORDER_CHILDREN);
+    pushOperation(getFiberID(getPrimaryFiber(fiber)));
+    pushOperation(numChildren);
     for (let i = 0; i < nextChildren.length; i++) {
-      nextOperation[3 + i] = nextChildren[i];
+      pushOperation(nextChildren[i]);
     }
-    endNextOperation();
   }
 
   function findReorderedChildrenRecursively(

From c0d7023a88d33aad7f01125645cf8322a5e808b8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 21:42:30 +0100
Subject: [PATCH 445/814] Replace WeakSet with return pointer check

---
 src/backend/renderer.js | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 728f1c0e593e..a4626740b3bd 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -589,11 +589,6 @@ export function attach(
   let pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<Uint32Array> | null = [];
 
-  // We keep track of which Fibers have been reported as unmounted by React
-  // during this commit phase so that we don't try to "hide" them or their
-  // children when Suspense flips to fallback. These Fibers won't have IDs.
-  let fibersUnmountedInThisCommitPhase: WeakSet<Fiber> = new WeakSet();
-
   // TODO: we could make this layer DEV-only and write directly to pendingOperations.
   let nextOperation: Array<number> = [];
   function beginNextOperation(size: number): void {
@@ -683,7 +678,6 @@ export function attach(
     pendingOperations.length = 0;
     pendingRealUnmountedIDs.length = 0;
     pendingSimulatedUnmountedIDs.length = 0;
-    fibersUnmountedInThisCommitPhase = new WeakSet();
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
@@ -890,9 +884,8 @@ export function attach(
 
     while (child !== null) {
       // Record simulated unmounts children-first.
-      // We might find real committed unmounts along the way--skip them.
-      // Otherwise we would send duplicated messages for the same IDs.
-      if (!fibersUnmountedInThisCommitPhase.has(child)) {
+      // We skip nodes without return because those are real unmounts.
+      if (child.return !== null) {
         unmountFiberChildrenRecursively(child);
         recordUnmount(child, true);
       }
@@ -1167,9 +1160,6 @@ export function attach(
   }
 
   function handleCommitFiberUnmount(fiber) {
-    // Remeber this is a real deletion so we don't
-    // go down this tree when hiding Suspense nodes.
-    fibersUnmountedInThisCommitPhase.add(fiber);
     // This is not recursive.
     // We can't traverse fibers after unmounting so instead
     // we rely on React telling us about each unmount.

From 006e03c38e191303b797cb69c35cec1f1069c7cd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 20 Apr 2019 22:17:12 +0100
Subject: [PATCH 446/814] Ignore leading edge of find-by-DOM throttle

---
 src/backend/agent.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 74676d44b9a9..378a70f271fd 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -525,6 +525,9 @@ export default class Agent extends EventEmitter {
         this._bridge.send('selectFiber', id);
       }
     }),
-    200
+    200,
+    // Don't change the selection in the very first 200ms
+    // because those are usually unintentional as you lift the cursor.
+    { leading: false }
   );
 }

From 403bf49a78c9c1b0ed0ebb919a32f101933f108c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Apr 2019 14:20:48 -0700
Subject: [PATCH 447/814] Use new @reach/tooltip

---
 package.json                                  |  6 +-
 shells/dev/index.html                         |  1 -
 src/devtools/views/Button.css                 |  1 -
 src/devtools/views/Button.js                  | 18 +++++-
 src/devtools/views/Components/OwnersStack.js  |  9 ++-
 src/devtools/views/DevTools.js                |  6 +-
 .../views/Settings/SettingsContext.js         |  2 +
 src/devtools/views/Toggle.css                 |  1 -
 src/devtools/views/Toggle.js                  | 16 +++++-
 src/devtools/views/Tooltip.css                |  8 +++
 src/devtools/views/root.css                   |  4 ++
 vendor/@reach/portal/.eslintignore            |  1 -
 vendor/@reach/portal/es/index.js              | 44 ---------------
 .../@reach/portal/examples/basic.example.js   | 35 ------------
 vendor/@reach/portal/index.js                 | 56 -------------------
 vendor/@reach/portal/package.json             | 28 ----------
 vendor/@reach/portal/src/index.js             | 30 ----------
 yarn.lock                                     | 52 ++++++++++++-----
 18 files changed, 95 insertions(+), 223 deletions(-)
 create mode 100644 src/devtools/views/Tooltip.css
 delete mode 100644 vendor/@reach/portal/.eslintignore
 delete mode 100644 vendor/@reach/portal/es/index.js
 delete mode 100644 vendor/@reach/portal/examples/basic.example.js
 delete mode 100644 vendor/@reach/portal/index.js
 delete mode 100644 vendor/@reach/portal/package.json
 delete mode 100644 vendor/@reach/portal/src/index.js

diff --git a/package.json b/package.json
index 48c6dd7a8e89..867eded41ecb 100644
--- a/package.json
+++ b/package.json
@@ -66,9 +66,6 @@
     ],
     "**/*.js": "eslint --max-warnings 0"
   },
-  "resolutions": {
-    "@reach/portal": "file:./vendor/@reach/portal"
-  },
   "dependencies": {
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -76,7 +73,8 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@reach/menu-button": "^0.1.9",
+    "@reach/menu-button": "^0.1.12",
+    "@reach/tooltip": "^0.1.1",
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
diff --git a/shells/dev/index.html b/shells/dev/index.html
index 842137bc2399..2b031d0d70bf 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -13,7 +13,6 @@
         height: 400px;
         max-height: 50%;
         overflow: hidden;
-        z-index: 10000001;
       }
       body {
         display: flex;
diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
index a37af0ee30cc..a72802ecc4af 100644
--- a/src/devtools/views/Button.css
+++ b/src/devtools/views/Button.css
@@ -6,7 +6,6 @@
   display: inline-flex;
   align-items: center;
   padding: 0.25rem;
-  cursor: pointer;
   flex: 0 0 auto;
 }
 .Button:hover {
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index b3e016fb072b..63621de60662 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -1,14 +1,28 @@
 // @flow
 
 import React from 'react';
+import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
+import tooltipStyles from './Tooltip.css';
 
 type Props = {
   className?: string,
   title: string,
 };
 
-export default function Button({ className, ...rest }: Props) {
-  return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
+export default function Button({ className, title, ...rest }: Props) {
+  let button = (
+    <button className={`${styles.Button} ${className || ''}`} {...rest} />
+  );
+
+  if (title) {
+    button = (
+      <Tooltip className={tooltipStyles.Tooltip} label={title}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
 }
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 968a107d01ca..3d86da1e1995 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
+import Tooltip from '@reach/tooltip';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
@@ -93,9 +94,11 @@ function ElementsDropdown({
 
   return (
     <Menu>
-      <MenuButton className={styles.MenuButton} title="Open elements dropdown">
-        <ButtonIcon type="more" />
-      </MenuButton>
+      <Tooltip label="Open elements dropdown">
+        <MenuButton className={styles.MenuButton}>
+          <ButtonIcon type="more" />
+        </MenuButton>
+      </Tooltip>
       <MenuList className={styles.Modal}>
         {ownerStack.map((id, index) => (
           <MenuItem
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 0a3225f5fee5..7fe30cb660e3 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -1,5 +1,10 @@
 // @flow
 
+// Reach styles need to come before any component styles.
+// This makes overridding the styles simpler.
+import '@reach/menu-button/styles.css';
+import '@reach/tooltip/styles.css';
+
 import React, { useEffect, useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
@@ -14,7 +19,6 @@ import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
 
-import '@reach/menu-button/styles.css';
 import './root.css';
 
 import type { Bridge } from '../../types';
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index d7838a2fc959..f5c1d73dbd5e 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -247,6 +247,8 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(theme, 'color-text-color', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
   // Font smoothing varies based on the theme.
   updateStyleHelper(theme, 'font-smoothing', documentElements);
diff --git a/src/devtools/views/Toggle.css b/src/devtools/views/Toggle.css
index a715dc779fa7..a9b595b1132e 100644
--- a/src/devtools/views/Toggle.css
+++ b/src/devtools/views/Toggle.css
@@ -5,7 +5,6 @@
   display: inline-flex;
   align-items: center;
   padding: 0.25rem;
-  cursor: pointer;
   flex: 0 0 auto;
 }
 
diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index c5c0a138fe86..31a6707a0cac 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -1,8 +1,10 @@
 // @flow
 
 import React, { useCallback } from 'react';
+import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
+import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -37,8 +39,8 @@ export default function Toggle({
     [onChange]
   );
 
-  return (
-    <label className={`${defaultClassName} ${className}`} title={title}>
+  let toggle = (
+    <label className={`${defaultClassName} ${className}`}>
       <input
         type="checkbox"
         className={styles.Input}
@@ -49,4 +51,14 @@ export default function Toggle({
       {children}
     </label>
   );
+
+  if (title) {
+    toggle = (
+      <Tooltip className={tooltipStyles.Tooltip} label={title}>
+        {toggle}
+      </Tooltip>
+    );
+  }
+
+  return toggle;
 }
diff --git a/src/devtools/views/Tooltip.css b/src/devtools/views/Tooltip.css
new file mode 100644
index 000000000000..90a45cc6eeae
--- /dev/null
+++ b/src/devtools/views/Tooltip.css
@@ -0,0 +1,8 @@
+.Tooltip {
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 12px;
+  background-color: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
+}
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 83dabea7445a..f7c8f381fab1 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -48,6 +48,8 @@
   --light-color-selected-border: #0088fa;
   --light-color-selected-foreground: #ffffff;
   --light-color-text-color: #000000;
+  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
+  --light-color-tooltip-text: #ffffff;
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
@@ -94,6 +96,8 @@
   --dark-color-selected-border: #178fb9;
   --dark-color-selected-foreground: #ffffff;
   --dark-color-text-color: #ffffff;
+  --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
+  --dark-color-tooltip-text: #000000;
 
   /* Font smoothing */
   --light-font-smoothing: auto;
diff --git a/vendor/@reach/portal/.eslintignore b/vendor/@reach/portal/.eslintignore
deleted file mode 100644
index 945ce43a909d..000000000000
--- a/vendor/@reach/portal/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-index.js
\ No newline at end of file
diff --git a/vendor/@reach/portal/es/index.js b/vendor/@reach/portal/es/index.js
deleted file mode 100644
index b08b2dce7382..000000000000
--- a/vendor/@reach/portal/es/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import { createPortal } from "react-dom";
-import Component from "@reach/component-component";
-
-var Portal = function Portal(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === undefined ? "reach-portal" : _ref$type;
-  return React.createElement(Component, {
-    getRefs: function getRefs() {
-      return { mountNode: null, portalNode: null };
-    },
-    didMount: function didMount(_ref2) {
-      var refs = _ref2.refs,
-          forceUpdate = _ref2.forceUpdate;
-
-      // It's possible that the content we are portal has, itself, been portaled.
-      // In that case, it's important to append to the correct document element.
-      var ownerDocument = refs.mountNode.ownerDocument;
-      refs.portalNode = ownerDocument.createElement(type);
-      ownerDocument.body.appendChild(refs.portalNode);
-      forceUpdate();
-    },
-    willUnmount: function willUnmount(_ref3) {
-      var portalNode = _ref3.refs.portalNode;
-
-      portalNode.ownerDocument.body.removeChild(portalNode);
-    },
-    render: function render(_ref4) {
-      var refs = _ref4.refs;
-      var portalNode = refs.portalNode;
-
-      if (!portalNode) {
-        return React.createElement("div", { ref: function ref(div) {
-            return refs.mountNode = div;
-          } });
-      } else {
-        return createPortal(children, portalNode);
-      }
-    }
-  });
-};
-
-export default Portal;
\ No newline at end of file
diff --git a/vendor/@reach/portal/examples/basic.example.js b/vendor/@reach/portal/examples/basic.example.js
deleted file mode 100644
index 5f2e8c2e3b2b..000000000000
--- a/vendor/@reach/portal/examples/basic.example.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Portal from "../src/index";
-
-export let name = "Basic";
-
-export let Example = () => (
-  <div
-    style={{
-      height: 40,
-      overflow: "auto"
-    }}
-  >
-    <div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}>
-      This is in the normal react root, with an overflow hidden parent, clips
-      the box.
-    </div>
-    <Portal>
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 20,
-          width: 100,
-          border: "solid 5px",
-          padding: 20,
-          background: "#f0f0f0"
-        }}
-      >
-        This is in the portal, rendered in the DOM at the document root so the
-        CSS doesn't screw things up, but we render it in the react hierarchy
-        where it makes sense.
-      </div>
-    </Portal>
-  </div>
-);
diff --git a/vendor/@reach/portal/index.js b/vendor/@reach/portal/index.js
deleted file mode 100644
index 738c274b0fb4..000000000000
--- a/vendor/@reach/portal/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require("react-dom");
-
-var _componentComponent = require("@reach/component-component");
-
-var _componentComponent2 = _interopRequireDefault(_componentComponent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Portal = function Portal(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === undefined ? "reach-portal" : _ref$type;
-  return _react2.default.createElement(_componentComponent2.default, {
-    getRefs: function getRefs() {
-      return { mountNode: null, portalNode: null };
-    },
-    didMount: function didMount(_ref2) {
-      var refs = _ref2.refs,
-          forceUpdate = _ref2.forceUpdate;
-
-      // It's possible that the content we are portal has, itself, been portaled.
-      // In that case, it's important to append to the correct document element.
-      var ownerDocument = refs.mountNode.ownerDocument;
-      refs.portalNode = ownerDocument.createElement(type);
-      ownerDocument.body.appendChild(refs.portalNode);
-      forceUpdate();
-    },
-    willUnmount: function willUnmount(_ref3) {
-      var portalNode = _ref3.refs.portalNode;
-
-      portalNode.ownerDocument.body.removeChild(portalNode);
-    },
-    render: function render(_ref4) {
-      var refs = _ref4.refs;
-      var portalNode = refs.portalNode;
-
-      if (!portalNode) {
-        return _react2.default.createElement("div", { ref: function ref(div) {
-            return refs.mountNode = div;
-          } });
-      } else {
-        return (0, _reactDom.createPortal)(children, portalNode);
-      }
-    }
-  });
-};
-
-exports.default = Portal;
\ No newline at end of file
diff --git a/vendor/@reach/portal/package.json b/vendor/@reach/portal/package.json
deleted file mode 100644
index 3641c4c70e2f..000000000000
--- a/vendor/@reach/portal/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "@reach/portal",
-  "version": "0.1.3",
-  "description": "Declarative portals for React",
-  "main": "index.js",
-  "module": "es/index.js",
-  "scripts": {
-    "test": "echo \"Write some tests you bum!\"",
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
-  },
-  "dependencies": {
-    "@reach/component-component": "^0.1.3"
-  },
-  "peerDependencies": {
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0"
-  },
-  "author": "",
-  "license": "MIT",
-  "files": [
-    "es",
-    "src",
-    "lib",
-    "index.js",
-    "styles.css"
-  ]
-}
diff --git a/vendor/@reach/portal/src/index.js b/vendor/@reach/portal/src/index.js
deleted file mode 100644
index 6b569d5737d0..000000000000
--- a/vendor/@reach/portal/src/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { createPortal } from "react-dom";
-import Component from "@reach/component-component";
-
-let Portal = ({ children, type = "reach-portal" }) => (
-  <Component
-    getRefs={() => ({ mountNode: null, portalNode: null })}
-    didMount={({ refs, forceUpdate }) => {
-      // It's possible that the content we are portal has, itself, been portaled.
-      // In that case, it's important to append to the correct document element.
-      const ownerDocument = refs.mountNode.ownerDocument;
-      refs.portalNode = ownerDocument.createElement(type);
-      ownerDocument.body.appendChild(refs.portalNode);
-      forceUpdate();
-    }}
-    willUnmount={({ refs: { portalNode } }) => {
-      portalNode.ownerDocument.body.removeChild(portalNode);
-    }}
-    render={({ refs }) => {
-      const { portalNode } = refs;
-      if (!portalNode) {
-        return <div ref={div => (refs.mountNode = div)} />;
-      } else {
-        return createPortal(children, portalNode);
-      }
-    }}
-  />
-);
-
-export default Portal;
diff --git a/yarn.lock b/yarn.lock
index dfd34ac54dea..873b29a77e6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -998,19 +998,24 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/yargs" "^12.0.9"
 
+"@reach/auto-id@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
+  integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
+
 "@reach/component-component@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
   integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
 
-"@reach/menu-button@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.9.tgz#d5957f69efa51d29beb4239403eabf49f9a4bb3e"
-  integrity sha512-894lhzcCpaGJKvmCuUX8AJ7xg0Ov/xRKKR5RRVJUroHYuWNuvgZSluO657Y2fNaMKgG0LPqLrtOGUq2CN0golg==
+"@reach/menu-button@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.12.tgz#209b52ddf0b329e4c0f6712c4d7fec88c433c344"
+  integrity sha512-16D1K9+NAfGdH4bZ3cJ721BKfp0cVvkv1lMNFLcp125ZcLTSaGXRnpUmpD+F1BJFCgP6g2cP+4MQxfiHMJ9IXg==
   dependencies:
     "@reach/component-component" "^0.1.3"
-    "@reach/portal" "^0.1.3"
-    "@reach/rect" "^0.2.0"
+    "@reach/portal" "^0.2.0"
+    "@reach/rect" "^0.2.1"
     "@reach/router" "^1.1.0"
     "@reach/utils" "^0.2.0"
     "@reach/window-size" "^0.1.3"
@@ -1021,15 +1026,17 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
   integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
 
-"@reach/portal@^0.1.3", "@reach/portal@file:./vendor/@reach/portal":
-  version "0.1.3"
+"@reach/portal@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.0.tgz#668a6d47ff749d81c2c6804c58c42323b31ac4fe"
+  integrity sha512-d+4m9LACj3uShSKsMDjKuR1Pw54lzYCh1h6kOvfkpdgLqOZEk/8RvjDCWLvQzvPJIgzCWVAA/Db55xDgOaOYQA==
   dependencies:
     "@reach/component-component" "^0.1.3"
 
-"@reach/rect@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.0.tgz#3e8dd4e2188294228ea223223a956885a8a33472"
-  integrity sha512-/C0r28VC/0dJ7ehKqkiebU7WvyiqXw5ViWC4KUWQRVTwauLENmslJ3jgEDUQZn6M3Ko63owaMZ2/rAivFfpIGQ==
+"@reach/rect@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
+  integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
   dependencies:
     "@reach/component-component" "^0.1.3"
     "@reach/observe-rect" "^1.0.3"
@@ -1045,11 +1052,28 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@reach/utils@^0.2.0":
+"@reach/tooltip@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.1.1.tgz#7f0385624eaffabcd4f075a098ef0fe4b472ce5d"
+  integrity sha512-EawPeRdeajl5HwtM8Q1rz0aNzOgRKnbs4GNW4tUa/6+F8yN93nZGxfYyefYGQgjzVOd0HdgeatUVqDQMgcldYA==
+  dependencies:
+    "@reach/auto-id" "0.2.0"
+    "@reach/portal" "^0.2.0"
+    "@reach/rect" "^0.2.1"
+    "@reach/utils" "0.2.0"
+    "@reach/visually-hidden" "^0.1.3"
+    prop-types "^15.7.2"
+
+"@reach/utils@0.2.0", "@reach/utils@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
   integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
 
+"@reach/visually-hidden@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.3.tgz#96f6ac9a0b62723b2f3e7d384b6143d49b45105a"
+  integrity sha512-kOmRRmUnWDsdKg6FIkljWk0Oc5v+SFCD5iVoF4moRRIJN/UvwxS2j6CqtCMlur8pc6KRi+D0mkO91nUzwQTYTg==
+
 "@reach/window-size@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
@@ -9013,7 +9037,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==

From a129089891a51883bd2541020e63c441bad02bf2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Apr 2019 15:44:24 -0700
Subject: [PATCH 448/814] Tweaking focus/active colors and only showing focus
 rect on tab

---
 src/devtools/views/Button.css                 | 14 +++++++--
 src/devtools/views/Button.js                  |  9 ++++--
 .../views/Settings/SettingsContext.js         |  2 ++
 src/devtools/views/Toggle.css                 | 23 +++++++++++----
 src/devtools/views/Toggle.js                  | 29 +++++++++----------
 src/devtools/views/root.css                   | 16 ++++++----
 6 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
index a72802ecc4af..0f7833c55209 100644
--- a/src/devtools/views/Button.css
+++ b/src/devtools/views/Button.css
@@ -2,12 +2,17 @@
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
+  padding: 0;
   border-radius: 0.25rem;
+  flex: 0 0 auto;
+}
+.ButtonContent {
   display: inline-flex;
   align-items: center;
+  border-radius: 0.25rem;
   padding: 0.25rem;
-  flex: 0 0 auto;
 }
+
 .Button:hover {
   background: var(--color-button-background-hover);
   color: var(--color-button-hover);
@@ -17,10 +22,15 @@
   color: var(--color-button-focus);
   outline: none;
 }
-.Button:focus {
+.Button:focus,
+.ButtonContent:focus {
   outline: none;
+}
+
+.Button:focus > .ButtonContent {
   box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
 }
+
 .Button:disabled,
 .Button:disabled:active {
   background: var(--color-button-background);
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index 63621de60662..b1b35002274d 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -7,13 +7,18 @@ import styles from './Button.css';
 import tooltipStyles from './Tooltip.css';
 
 type Props = {
+  children: React$Node,
   className?: string,
   title: string,
 };
 
-export default function Button({ className, title, ...rest }: Props) {
+export default function Button({ children, className, title, ...rest }: Props) {
   let button = (
-    <button className={`${styles.Button} ${className || ''}`} {...rest} />
+    <button className={`${styles.Button} ${className || ''}`} {...rest}>
+      <span className={styles.ButtonContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
   );
 
   if (title) {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index f5c1d73dbd5e..cd535eac420b 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -205,9 +205,11 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
+  updateStyleHelper(theme, 'color-button-background-active', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
   updateStyleHelper(theme, 'color-button-background-hover', documentElements);
   updateStyleHelper(theme, 'color-button', documentElements);
+  updateStyleHelper(theme, 'color-button-active', documentElements);
   updateStyleHelper(theme, 'color-button-disabled', documentElements);
   updateStyleHelper(theme, 'color-button-focus', documentElements);
   updateStyleHelper(theme, 'color-button-hover', documentElements);
diff --git a/src/devtools/views/Toggle.css b/src/devtools/views/Toggle.css
index a9b595b1132e..8b0790dc295e 100644
--- a/src/devtools/views/Toggle.css
+++ b/src/devtools/views/Toggle.css
@@ -1,11 +1,17 @@
 .ToggleDisabled,
 .ToggleOn,
 .ToggleOff {
+  border: none;
   border-radius: 0.25rem;
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+.ToggleContent {
   display: inline-flex;
   align-items: center;
+  border-radius: 0.25rem;
   padding: 0.25rem;
-  flex: 0 0 auto;
 }
 
 .ToggleOff {
@@ -20,17 +26,22 @@
 
 .ToggleOn,
 .ToggleOn:active {
-  background: var(--color-button-background-focus);
-  color: var(--color-button-focus);
+  background: var(--color-button-background-active);
+  color: var(--color-button-active);
   outline: none;
 }
 
-.ToggleOn:focus-within,
-.ToggleOff:focus-within {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+.ToggleOn:focus,
+.ToggleOff:focus,
+.ToggleContent:focus {
   outline: none;
 }
 
+.ToggleOn:focus > .ToggleContent,
+.ToggleOff:focus > .ToggleContent {
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+}
+
 .ToggleDisabled {
   background: var(--color-button-background);
   color: var(--color-button-disabled);
diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index 31a6707a0cac..5780c7f28c34 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -32,24 +32,21 @@ export default function Toggle({
     defaultClassName = styles.ToggleOff;
   }
 
-  const handleChange = useCallback(
-    ({ target }) => {
-      onChange(target.checked);
-    },
-    [onChange]
-  );
+  const handleClick = useCallback(() => onChange(!isChecked), [
+    isChecked,
+    onChange,
+  ]);
 
   let toggle = (
-    <label className={`${defaultClassName} ${className}`}>
-      <input
-        type="checkbox"
-        className={styles.Input}
-        checked={isChecked}
-        disabled={isDisabled}
-        onChange={handleChange}
-      />
-      {children}
-    </label>
+    <button
+      className={`${defaultClassName} ${className}`}
+      disabled={isDisabled}
+      onClick={handleClick}
+    >
+      <span className={styles.ToggleContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
   );
 
   if (title) {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f7c8f381fab1..6ade839769a4 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -9,12 +9,14 @@
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-button-background: #ffffff;
-  --light-color-button-background-focus: #ebf1fb;
+  --light-color-button-background-active: #ffffff;
+  --light-color-button-background-focus: #ededed;
   --light-color-button-background-hover: #ffffff;
-  --light-color-button: #0088fa;
+  --light-color-button: #5f6673;
   --light-color-button-disabled: #cfd1d5;
-  --light-color-button-focus: #3578e5;
-  --light-color-button-hover: #3578e5;
+  --light-color-button-active: #0088fa;
+  --light-color-button-focus: #333333;
+  --light-color-button-hover: #333333;
   --light-color-border: #eeeeee;
   --light-color-commit-did-not-render: #cfd1d5;
   --light-color-commit-gradient-0: #37afa9;
@@ -57,12 +59,14 @@
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-button-background: #282c34;
+  --dark-color-button-background-active: #3d424a;
   --dark-color-button-background-focus: #3d424a;
   --dark-color-button-background-hover: #282c34;
-  --dark-color-button: #61dafb;
+  --dark-color-button: #afb3b9;
+  --dark-color-button-active: #61dafb;
   --dark-color-button-disabled: #777d88;
   --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #a2e9fc;
+  --dark-color-button-hover: #cccccc;
   --dark-color-border: #3d424a;
   --dark-color-commit-did-not-render: #777d88;
   --dark-color-commit-gradient-0: #37afa9;

From 8220df734c8d33d1bc36fb50ab2c24cc393479d1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 08:23:20 -0700
Subject: [PATCH 449/814] Tweaked hover and focus colors. Temporarily disabled
 Tooltip.

---
 shells/dev/index.html                         |  1 +
 src/devtools/views/Button.css                 |  4 +-
 src/devtools/views/Button.js                  | 17 ++++---
 src/devtools/views/Components/OwnersStack.css | 45 +++++--------------
 src/devtools/views/Components/OwnersStack.js  | 30 +++++++------
 src/devtools/views/Components/SearchInput.css |  2 +-
 src/devtools/views/DevTools.js                |  2 +-
 src/devtools/views/ReactLogo.css              |  2 +-
 .../views/Settings/SettingsContext.js         |  2 -
 src/devtools/views/TabBar.css                 |  2 +-
 src/devtools/views/Toggle.css                 |  5 +--
 src/devtools/views/Toggle.js                  |  7 ++-
 src/devtools/views/Tooltip.css                |  4 ++
 src/devtools/views/root.css                   | 10 ++---
 14 files changed, 60 insertions(+), 73 deletions(-)

diff --git a/shells/dev/index.html b/shells/dev/index.html
index 2b031d0d70bf..842137bc2399 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -13,6 +13,7 @@
         height: 400px;
         max-height: 50%;
         overflow: hidden;
+        z-index: 10000001;
       }
       body {
         display: flex;
diff --git a/src/devtools/views/Button.css b/src/devtools/views/Button.css
index 0f7833c55209..d3885372b485 100644
--- a/src/devtools/views/Button.css
+++ b/src/devtools/views/Button.css
@@ -14,11 +14,9 @@
 }
 
 .Button:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 .Button:active {
-  background: var(--color-button-background-focus);
   color: var(--color-button-focus);
   outline: none;
 }
@@ -28,7 +26,7 @@
 }
 
 .Button:focus > .ButtonContent {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
 }
 
 .Button:disabled,
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index b1b35002274d..79a857429a4b 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
-import Tooltip from '@reach/tooltip';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -12,15 +12,21 @@ type Props = {
   title: string,
 };
 
-export default function Button({ children, className, title, ...rest }: Props) {
+export default function Button({
+  children,
+  className = '',
+  title,
+  ...rest
+}: Props) {
   let button = (
-    <button className={`${styles.Button} ${className || ''}`} {...rest}>
-      <span className={styles.ButtonContent} tabIndex={-1}>
+    <button className={`${styles.Button} ${className}`} title={title} {...rest}>
+      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
         {children}
       </span>
     </button>
   );
 
+  /* TODO (tooltips)
   if (title) {
     button = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -28,6 +34,7 @@ export default function Button({ children, className, title, ...rest }: Props) {
       </Tooltip>
     );
   }
+  */
 
   return button;
 }
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index bfe407fa648f..1cfcb6465318 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -8,41 +8,19 @@
 }
 
 .Component,
-.Component[data-reach-menu-item],
-.SelectedComponent {
-  padding: 0.25rem;
-  margin-right: 0.5rem;
-  color: var(--color-component-name);
+.Component[data-reach-menu-item] {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
-  border-radius: 0.125rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
   user-select: none;
   white-space: nowrap;
 }
 
-.Component:hover,
-.Component[data-reach-menu-item]:hover {
-  background-color: var(--color-hover-background);
-}
-.Component:focus,
-.Component[data-reach-menu-item]:focus {
-  outline: none;
-  background-color: var(--color-hover-background);
-}
-
 .Component[data-reach-menu-item][data-selected],
-.Component[data-reach-menu-item][data-selected]:hover,
-.SelectedComponent,
-.SelectedComponent:hover {
-  background-color: var(--color-selected-background);
+.Component[data-reach-menu-item][data-selected]:hover {
   color: var(--color-selected-foreground);
+  background: var(--color-selected-background);
 }
-.Component[data-reach-menu-item][data-selected]:focus,
-.SelectedComponent:focus {
+.Component[data-reach-menu-item][data-selected]:focus {
   outline: none;
 }
 
@@ -65,7 +43,6 @@
   display: inline-flex;
   align-items: center;
   padding: 0.25rem;
-  cursor: pointer;
   flex: 0 0 auto;
   border: none;
   background: var(--color-button-background);
@@ -73,17 +50,15 @@
   margin-right: 0.5rem;
 }
 .MenuButton:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 .MenuButton[aria-expanded='true'],
 .MenuButton[aria-expanded='true']:active {
-  background: var(--color-button-background-focus);
-  color: var(--color-button-focus);
+  color: var(--color-button-active);
   outline: none;
 }
 .MenuButton:focus-within {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
   outline: none;
 }
 
@@ -91,14 +66,18 @@
   display: inline-flex;
   flex-direction: column;
   background-color: var(--color-background);
-  color: var(--color-text-color);
-  padding: 0.5rem;
+  color: var(--color-button);
+  padding: 0.25rem 0;
   padding-right: 0;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
 
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+  position: relative;
+
   /* Reach UI tries to set its own :( */
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 3d86da1e1995..6d909d3a7010 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -6,10 +6,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
-import Tooltip from '@reach/tooltip';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
@@ -94,11 +95,11 @@ function ElementsDropdown({
 
   return (
     <Menu>
-      <Tooltip label="Open elements dropdown">
-        <MenuButton className={styles.MenuButton}>
-          <ButtonIcon type="more" />
-        </MenuButton>
-      </Tooltip>
+      {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
+      <MenuButton className={styles.MenuButton}>
+        <ButtonIcon type="more" />
+      </MenuButton>
+      {/* TODO (tooltips) </Tooltip> */}
       <MenuList className={styles.Modal}>
         {ownerStack.map((id, index) => (
           <MenuItem
@@ -124,20 +125,21 @@ function ElementView({ id, index }: ElementViewProps) {
 
   const { displayName } = ((store.getElementByID(id): any): Element);
 
-  const isSelected = ownerStackIndex === index;
+  const isChecked = ownerStackIndex === index;
 
-  const handleClick = useCallback(() => {
-    if (!isSelected) {
+  const handleChange = useCallback(() => {
+    if (!isChecked) {
       selectOwner(id);
     }
-  }, [id, isSelected, selectOwner]);
+  }, [id, isChecked, selectOwner]);
 
   return (
-    <button
-      className={isSelected ? styles.SelectedComponent : styles.Component}
-      onClick={handleClick}
+    <Toggle
+      className={styles.Component}
+      isChecked={isChecked}
+      onChange={handleChange}
     >
       {displayName}
-    </button>
+    </Toggle>
   );
 }
diff --git a/src/devtools/views/Components/SearchInput.css b/src/devtools/views/Components/SearchInput.css
index d352cff8dd57..89048c643e86 100644
--- a/src/devtools/views/Components/SearchInput.css
+++ b/src/devtools/views/Components/SearchInput.css
@@ -18,7 +18,7 @@
 .InputIcon {
   pointer-events: none;
   z-index: 2;
-  color: var(--color-dim);
+  color: var(--color-dimmer);
 }
 
 .IndexLabel {
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 7fe30cb660e3..8509b5b24465 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -3,7 +3,7 @@
 // Reach styles need to come before any component styles.
 // This makes overridding the styles simpler.
 import '@reach/menu-button/styles.css';
-import '@reach/tooltip/styles.css';
+// TODO (tooltips) import '@reach/tooltip/styles.css';
 
 import React, { useEffect, useState } from 'react';
 import Store from '../store';
diff --git a/src/devtools/views/ReactLogo.css b/src/devtools/views/ReactLogo.css
index 0c667c3851d0..a209f908d7f2 100644
--- a/src/devtools/views/ReactLogo.css
+++ b/src/devtools/views/ReactLogo.css
@@ -2,5 +2,5 @@
   width: 1.75rem;
   height: 1.75rem;
   margin: 0 0.75rem 0 0.25rem;
-  color: var(--color-button);
+  color: var(--color-button-active);
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index cd535eac420b..df4cd01fecec 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -205,9 +205,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
-  updateStyleHelper(theme, 'color-button-background-active', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
-  updateStyleHelper(theme, 'color-button-background-hover', documentElements);
   updateStyleHelper(theme, 'color-button', documentElements);
   updateStyleHelper(theme, 'color-button-active', documentElements);
   updateStyleHelper(theme, 'color-button-disabled', documentElements);
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index e1a536e07fcc..c73b42e82818 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -45,7 +45,7 @@
 .IconSizeLarge,
 .IconSizeSmall {
   margin-right: 0.5rem;
-  color: var(--color-button);
+  color: var(--color-button-active);
 }
 
 .IconDisabled {
diff --git a/src/devtools/views/Toggle.css b/src/devtools/views/Toggle.css
index 8b0790dc295e..a5f273bda43b 100644
--- a/src/devtools/views/Toggle.css
+++ b/src/devtools/views/Toggle.css
@@ -1,6 +1,7 @@
 .ToggleDisabled,
 .ToggleOn,
 .ToggleOff {
+  background: var(--color-button-background);
   border: none;
   border-radius: 0.25rem;
   padding: 0;
@@ -20,13 +21,11 @@
   color: var(--color-button);
 }
 .ToggleOff:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 
 .ToggleOn,
 .ToggleOn:active {
-  background: var(--color-button-background-active);
   color: var(--color-button-active);
   outline: none;
 }
@@ -39,7 +38,7 @@
 
 .ToggleOn:focus > .ToggleContent,
 .ToggleOff:focus > .ToggleContent {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
 }
 
 .ToggleDisabled {
diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index 5780c7f28c34..59baad2e919e 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -1,10 +1,10 @@
 // @flow
 
 import React, { useCallback } from 'react';
-import Tooltip from '@reach/tooltip';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -42,6 +42,7 @@ export default function Toggle({
       className={`${defaultClassName} ${className}`}
       disabled={isDisabled}
       onClick={handleClick}
+      title={title}
     >
       <span className={styles.ToggleContent} tabIndex={-1}>
         {children}
@@ -49,6 +50,7 @@ export default function Toggle({
     </button>
   );
 
+  /* TODO (tooltips)
   if (title) {
     toggle = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -56,6 +58,7 @@ export default function Toggle({
       </Tooltip>
     );
   }
+  */
 
   return toggle;
 }
diff --git a/src/devtools/views/Tooltip.css b/src/devtools/views/Tooltip.css
index 90a45cc6eeae..1703e2c76a9b 100644
--- a/src/devtools/views/Tooltip.css
+++ b/src/devtools/views/Tooltip.css
@@ -5,4 +5,8 @@
   font-size: 12px;
   background-color: var(--color-tooltip-background);
   color: var(--color-tooltip-text);
+
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+  position: relative;
 }
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 6ade839769a4..48b8254a8c11 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -9,14 +9,12 @@
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-button-background: #ffffff;
-  --light-color-button-background-active: #ffffff;
   --light-color-button-background-focus: #ededed;
-  --light-color-button-background-hover: #ffffff;
   --light-color-button: #5f6673;
   --light-color-button-disabled: #cfd1d5;
   --light-color-button-active: #0088fa;
-  --light-color-button-focus: #333333;
-  --light-color-button-hover: #333333;
+  --light-color-button-focus: #23272f;
+  --light-color-button-hover: #23272f;
   --light-color-border: #eeeeee;
   --light-color-commit-did-not-render: #cfd1d5;
   --light-color-commit-gradient-0: #37afa9;
@@ -59,14 +57,12 @@
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-button-background: #282c34;
-  --dark-color-button-background-active: #3d424a;
   --dark-color-button-background-focus: #3d424a;
-  --dark-color-button-background-hover: #282c34;
   --dark-color-button: #afb3b9;
   --dark-color-button-active: #61dafb;
   --dark-color-button-disabled: #777d88;
   --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #cccccc;
+  --dark-color-button-hover: #ededed;
   --dark-color-border: #3d424a;
   --dark-color-commit-did-not-render: #777d88;
   --dark-color-commit-gradient-0: #37afa9;

From 66df03d17995f637c5b7d47cd893d248d523fdd4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 08:29:51 -0700
Subject: [PATCH 450/814] Renamed CSS var color-text-color to color-text

---
 src/devtools/views/Components/Components.css           | 2 +-
 src/devtools/views/Components/HooksTree.css            | 2 +-
 src/devtools/views/Components/InspectedElementTree.css | 2 +-
 src/devtools/views/Components/KeyValue.css             | 2 +-
 src/devtools/views/Components/SearchInput.css          | 2 +-
 src/devtools/views/DevTools.css                        | 2 +-
 src/devtools/views/Profiler/Profiler.css               | 2 +-
 src/devtools/views/Settings/Settings.css               | 2 +-
 src/devtools/views/Settings/SettingsContext.js         | 2 +-
 src/devtools/views/TabBar.css                          | 2 +-
 src/devtools/views/root.css                            | 4 ++--
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/Components/Components.css b/src/devtools/views/Components/Components.css
index 172abb5c9e56..6523b5e515ee 100644
--- a/src/devtools/views/Components/Components.css
+++ b/src/devtools/views/Components/Components.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 819c556d3660..d82764c47951 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -36,7 +36,7 @@
 }
 .EditableName:after,
 .Name:after {
-  color: var(--color-text-color);
+  color: var(--color-text);
   content: ': ';
   margin-right: 0.5rem;
 }
diff --git a/src/devtools/views/Components/InspectedElementTree.css b/src/devtools/views/Components/InspectedElementTree.css
index 49b618665975..620fbf412dd0 100644
--- a/src/devtools/views/Components/InspectedElementTree.css
+++ b/src/devtools/views/Components/InspectedElementTree.css
@@ -26,7 +26,7 @@
 }
 .Name:after {
   content: ': ';
-  color: var(--color-text-color);
+  color: var(--color-text);
   margin-right: 0.5rem;
 }
 
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 08230f57ac33..9fb868e90999 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -15,7 +15,7 @@
 .EditableName:after,
 .Name:after {
   content: ': ';
-  color: var(--color-text-color);
+  color: var(--color-text);
   margin-right: 0.5rem;
 }
 
diff --git a/src/devtools/views/Components/SearchInput.css b/src/devtools/views/Components/SearchInput.css
index 89048c643e86..ddd1e70825b7 100644
--- a/src/devtools/views/Components/SearchInput.css
+++ b/src/devtools/views/Components/SearchInput.css
@@ -10,7 +10,7 @@
   outline: none;
   border: none;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
   padding-left: 1.5rem;
   margin-left: -1rem;
 }
diff --git a/src/devtools/views/DevTools.css b/src/devtools/views/DevTools.css
index 4001db68ebc5..34a530b16b90 100644
--- a/src/devtools/views/DevTools.css
+++ b/src/devtools/views/DevTools.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .TabBar {
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 346257bc5ebd..5ab888906d08 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -7,7 +7,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .LeftColumn {
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 7dc9755ca2c8..c0f9f4a1dbfb 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -9,7 +9,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .Section {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index df4cd01fecec..ef237f6dc06a 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -246,7 +246,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-selected-foreground', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
-  updateStyleHelper(theme, 'color-text-color', documentElements);
+  updateStyleHelper(theme, 'color-text', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index c73b42e82818..39dafa00c3ce 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -9,7 +9,7 @@
   border-bottom: 3px solid transparent;
   cursor: pointer;
   user-select: none;
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 .Tab:hover,
 .TabCurrent:hover {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 48b8254a8c11..19832f7d23e8 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -47,7 +47,7 @@
   --light-color-selected-background: #0088fa;
   --light-color-selected-border: #0088fa;
   --light-color-selected-foreground: #ffffff;
-  --light-color-text-color: #000000;
+  --light-color-text: #000000;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
 
@@ -95,7 +95,7 @@
   --dark-color-selected-background: #178fb9;
   --dark-color-selected-border: #178fb9;
   --dark-color-selected-foreground: #ffffff;
-  --dark-color-text-color: #ffffff;
+  --dark-color-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
   --dark-color-tooltip-text: #000000;
 

From 09b995ab1cf7e7e5d031ffef5b1dcdcb664bd275 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 08:38:58 -0700
Subject: [PATCH 451/814] Tidied up CSS variables

---
 src/devtools/views/Components/Element.css     | 10 +++++-----
 src/devtools/views/Components/OwnersStack.css |  4 ++--
 .../views/Profiler/InteractionListItem.css    |  4 ++--
 .../views/Profiler/SidebarCommitInfo.css      |  2 +-
 .../views/Profiler/SidebarInteractions.css    |  2 +-
 .../Profiler/SidebarSelectedFiberInfo.css     |  6 +++---
 .../views/Profiler/SnapshotCommitListItem.js  |  2 +-
 src/devtools/views/Settings/Settings.css      |  4 ++--
 .../views/Settings/SettingsContext.js         | 10 +++++-----
 src/devtools/views/TabBar.css                 |  6 +++---
 src/devtools/views/root.css                   | 20 +++++++++----------
 11 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 425b901bd899..da7a214de523 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -11,10 +11,10 @@
   user-select: none;
 }
 .HoveredElement {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 .InactiveSelectedElement {
-  background-color: var(--color-inactive-background);
+  background-color: var(--color-background-inactive);
 }
 
 .ScrollAnchor {
@@ -23,13 +23,13 @@
 }
 
 .SelectedElement {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
-  --color-attribute-name: var(--color-hover-background);
+  --color-attribute-name: var(--color-background-hover);
   --color-attribute-value: var(--color-component-name-inverted);
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 1cfcb6465318..443eadf54e18 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -17,8 +17,8 @@
 
 .Component[data-reach-menu-item][data-selected],
 .Component[data-reach-menu-item][data-selected]:hover {
-  color: var(--color-selected-foreground);
-  background: var(--color-selected-background);
+  color: var(--color-text-selected);
+  background: var(--color-background-selected);
 }
 .Component[data-reach-menu-item][data-selected]:focus {
   outline: none;
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
index 1cdf323d55ca..6d354ca0157e 100644
--- a/src/devtools/views/Profiler/InteractionListItem.css
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -7,11 +7,11 @@
 }
 
 .Interaction:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .SelectedInteraction {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Name {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 276bbb5708d3..5c28ac3b4c1b 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -41,7 +41,7 @@
 .Interaction:focus,
 .Interaction:hover {
   outline: none;
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Label {
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index 99327dbb9c18..9b105db21086 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -44,7 +44,7 @@
   padding: 0.25rem 0.5rem;
 }
 .ListItem:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .CommitBox {
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 6c4a0ca65c1c..30097488c746 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -46,12 +46,12 @@
 .Commit:focus,
 .Commit:hover {
   outline: none;
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .CurrentCommit {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
 }
 .CurrentCommit:focus {
   outline: none;
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index bcca4494dc07..4116d41f3612 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -52,7 +52,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
         ...style,
         width,
         borderBottom: isSelected
-          ? '3px solid var(--color-selected-border)'
+          ? '3px solid var(--color-tab-selected-border)'
           : undefined,
       }}
       title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index c0f9f4a1dbfb..581facc0e955 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -39,7 +39,7 @@
 }
 
 .Option:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Option:first-of-type {
@@ -54,7 +54,7 @@
 }
 
 .ScreenshotThrottling {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index ef237f6dc06a..0cc5dfb9a4fc 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -203,6 +203,9 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-attribute-value', documentElements);
   updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
   updateStyleHelper(theme, 'color-background', documentElements);
+  updateStyleHelper(theme, 'color-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-background-inactive', documentElements);
+  updateStyleHelper(theme, 'color-background-selected', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
@@ -229,8 +232,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-hover-background', documentElements);
-  updateStyleHelper(theme, 'color-inactive-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
@@ -241,12 +242,11 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
-  updateStyleHelper(theme, 'color-selected-background', documentElements);
-  updateStyleHelper(theme, 'color-selected-border', documentElements);
-  updateStyleHelper(theme, 'color-selected-foreground', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
+  updateStyleHelper(theme, 'color-text-selected', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 39dafa00c3ce..c1105c78d2e9 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -13,15 +13,15 @@
 }
 .Tab:hover,
 .TabCurrent:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 .Tab:focus-within,
 .TabCurrent:focus-within {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .TabCurrent {
-  border-bottom: 3px solid var(--color-selected-border);
+  border-bottom: 3px solid var(--color-tab-selected-border);
 }
 
 .TabDisabled {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 19832f7d23e8..ca0582a1710c 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -8,6 +8,9 @@
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
+  --light-color-background-hover: #ebf1fb;
+  --light-color-background-inactive: #e5e5e5;
+  --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
   --light-color-button-background-focus: #ededed;
   --light-color-button: #5f6673;
@@ -34,8 +37,6 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-hover-background: #ebf1fb;
-  --light-color-inactive-background: #e5e5e5;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -44,10 +45,9 @@
   --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
-  --light-color-selected-background: #0088fa;
-  --light-color-selected-border: #0088fa;
-  --light-color-selected-foreground: #ffffff;
+  --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
+  --light-color-text-selected: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
 
@@ -56,6 +56,9 @@
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
+  --dark-color-background-hover: #3d424a;
+  --dark-color-background-inactive: #3d424a;
+  --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
   --dark-color-button-background-focus: #3d424a;
   --dark-color-button: #afb3b9;
@@ -82,8 +85,6 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-hover-background: #3d424a;
-  --dark-color-inactive-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -92,10 +93,9 @@
   --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
-  --dark-color-selected-background: #178fb9;
-  --dark-color-selected-border: #178fb9;
-  --dark-color-selected-foreground: #ffffff;
+  --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
+  --dark-color-text-selected: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
   --dark-color-tooltip-text: #000000;
 

From 91f74a513433a7060c3ff6de6f2df88efb4f12d0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 08:59:24 -0700
Subject: [PATCH 452/814] Fixed focus styles for OwnersStack dropdown toggle
 button

---
 src/devtools/views/Components/OwnersStack.css | 16 +++++++++++++---
 src/devtools/views/Components/OwnersStack.js  |  4 +++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 443eadf54e18..db2d946b83a1 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -42,13 +42,19 @@
   border-radius: 0.25rem;
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem;
+  padding: 0;
   flex: 0 0 auto;
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
   margin-right: 0.5rem;
 }
+.MenuButtonContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
 .MenuButton:hover {
   color: var(--color-button-hover);
 }
@@ -57,10 +63,14 @@
   color: var(--color-button-active);
   outline: none;
 }
-.MenuButton:focus-within {
-  background: var(--color-button-background-focus);
+
+.MenuButton:focus,
+.MenuButtonContent:focus {
   outline: none;
 }
+.MenuButton:focus > .MenuButtonContent {
+  background: var(--color-button-background-focus);
+}
 
 .Modal[data-reach-menu-list] {
   display: inline-flex;
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 6d909d3a7010..860514fc78f1 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -97,7 +97,9 @@ function ElementsDropdown({
     <Menu>
       {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
       <MenuButton className={styles.MenuButton}>
-        <ButtonIcon type="more" />
+        <span className={styles.MenuButtonContent} tabIndex={-1}>
+          <ButtonIcon type="more" />
+        </span>
       </MenuButton>
       {/* TODO (tooltips) </Tooltip> */}
       <MenuList className={styles.Modal}>

From 129466ed91ed362bb8a970ef7edf930ac411adec Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 09:05:55 -0700
Subject: [PATCH 453/814] Yarn deploy sets production NODE_ENV

---
 shells/browser/shared/deploy.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index b1e5dd308d92..349c6c810651 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -11,7 +11,10 @@ const main = async buildId => {
 
   execSync(`node ${join(root, './build')}`, {
     cwd: __dirname,
-    env: process.env,
+    env: {
+      ...process.env,
+      NODE_ENV: 'production',
+    },
     stdio: 'inherit',
   });
 

From 52652f3456ab00581939f0b12327d0fae6d8fc66 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 12:20:23 -0700
Subject: [PATCH 454/814] Toggle method no longer emits 'mutated' event unless
 it mutated the store

---
 src/devtools/store.js | 93 +++++++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 048568d5bb04..0ec4d57fc0bc 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -449,6 +449,8 @@ export default class Store extends EventEmitter {
 
   // TODO Maybe split this into two methods: expand() and collapse()
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
+    let didMutate = false;
+
     const element = this.getElementByID(id);
     if (element !== null) {
       if (isCollapsed) {
@@ -456,24 +458,21 @@ export default class Store extends EventEmitter {
           throw Error('Root nodes cannot be collapsed');
         }
 
-        if (element.isCollapsed) {
-          // There's nothing to change in this case.
-          // We can exit early (without even emiting a "mutated" event).
-          return;
-        }
-
-        element.isCollapsed = true;
+        if (!element.isCollapsed) {
+          didMutate = true;
+          element.isCollapsed = true;
 
-        const weightDelta = 1 - element.weight;
+          const weightDelta = 1 - element.weight;
 
-        let parentElement = ((this._idToElement.get(
-          element.parentID
-        ): any): Element);
-        while (parentElement != null) {
-          // We don't need to break on a collapsed parent in the same way as the expand case below.
-          // That's because collapsing a node doesn't "bubble" and affect its parents.
-          parentElement.weight += weightDelta;
-          parentElement = this._idToElement.get(parentElement.parentID);
+          let parentElement = ((this._idToElement.get(
+            element.parentID
+          ): any): Element);
+          while (parentElement != null) {
+            // We don't need to break on a collapsed parent in the same way as the expand case below.
+            // That's because collapsing a node doesn't "bubble" and affect its parents.
+            parentElement.weight += weightDelta;
+            parentElement = this._idToElement.get(parentElement.parentID);
+          }
         }
       } else {
         let currentElement = element;
@@ -481,24 +480,29 @@ export default class Store extends EventEmitter {
           const oldWeight = currentElement.isCollapsed
             ? 1
             : currentElement.weight;
-          currentElement.isCollapsed = false;
-          const newWeight = currentElement.isCollapsed
-            ? 1
-            : currentElement.weight;
-          const weightDelta = newWeight - oldWeight;
 
-          let parentElement = ((this._idToElement.get(
-            currentElement.parentID
-          ): any): Element);
-          while (parentElement != null) {
-            parentElement.weight += weightDelta;
-            if (parentElement.isCollapsed) {
-              // It's important to break on a collapsed parent when expanding nodes.
-              // That's because expanding a node "bubbles" up and expands all parents as well.
-              // Breaking in this case prevents us from over-incrementing the expanded weights.
-              break;
+          if (currentElement.isCollapsed) {
+            didMutate = true;
+            currentElement.isCollapsed = false;
+
+            const newWeight = currentElement.isCollapsed
+              ? 1
+              : currentElement.weight;
+            const weightDelta = newWeight - oldWeight;
+
+            let parentElement = ((this._idToElement.get(
+              currentElement.parentID
+            ): any): Element);
+            while (parentElement != null) {
+              parentElement.weight += weightDelta;
+              if (parentElement.isCollapsed) {
+                // It's important to break on a collapsed parent when expanding nodes.
+                // That's because expanding a node "bubbles" up and expands all parents as well.
+                // Breaking in this case prevents us from over-incrementing the expanded weights.
+                break;
+              }
+              parentElement = this._idToElement.get(parentElement.parentID);
             }
-            parentElement = this._idToElement.get(parentElement.parentID);
           }
 
           currentElement =
@@ -508,17 +512,20 @@ export default class Store extends EventEmitter {
         }
       }
 
-      let weightAcrossRoots = 0;
-      this._roots.forEach(rootID => {
-        const { weight } = ((this.getElementByID(rootID): any): Element);
-        weightAcrossRoots += weight;
-      });
-      this._weightAcrossRoots = weightAcrossRoots;
-
-      // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
-      // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
-      // Updating the selected search index later may require auto-expanding a collapsed subtree though.
-      this.emit('mutated', [[], []]);
+      // Only re-calculate weights and emit an "update" event if the store was mutated.
+      if (didMutate) {
+        let weightAcrossRoots = 0;
+        this._roots.forEach(rootID => {
+          const { weight } = ((this.getElementByID(rootID): any): Element);
+          weightAcrossRoots += weight;
+        });
+        this._weightAcrossRoots = weightAcrossRoots;
+
+        // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
+        // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
+        // Updating the selected search index later may require auto-expanding a collapsed subtree though.
+        this.emit('mutated', [[], []]);
+      }
     }
   }
 

From 09b023a6e6f0d9a3eed95d488d6e910f305e4ad8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Apr 2019 14:54:28 -0700
Subject: [PATCH 455/814] Naive suspense implementation for selected element
 panel

This commit leaves a few major things uunresolved:
* We aren't yet polling for updates
* We aren't yet using the two setState pattern
* The resource cache will grow unbounded over time because we aren't yet clearing items from it
* The renderer interface is not smart enough to avoid resending unchanged data between requests
---
 src/backend/renderer.js                       |  1 +
 src/devtools/InspectedElementCache.js         | 93 ++++++++++++++++++
 src/devtools/ProfilingCache.js                |  4 +
 src/devtools/cache.js                         | 60 +++++++-----
 src/devtools/store.js                         | 11 ++-
 src/devtools/views/Components/Components.css  | 10 ++
 src/devtools/views/Components/Components.js   | 10 +-
 .../views/Components/SelectedElement.js       | 94 ++-----------------
 src/devtools/views/Components/TreeContext.js  |  4 +
 9 files changed, 175 insertions(+), 112 deletions(-)
 create mode 100644 src/devtools/InspectedElementCache.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index e41ea782ff67..ce607379ce5d 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1492,6 +1492,7 @@ export function attach(
     }
   }
 
+  // TODO Send a no-op message if the specified Fiber hasn't been committed since it was last inspected.
   function inspectElementRaw(id: number): InspectedElement | null {
     let fiber = idToFiberMap.get(id);
 
diff --git a/src/devtools/InspectedElementCache.js b/src/devtools/InspectedElementCache.js
new file mode 100644
index 000000000000..424589dd21bd
--- /dev/null
+++ b/src/devtools/InspectedElementCache.js
@@ -0,0 +1,93 @@
+// @flow
+
+import EventEmitter from 'events';
+import { createResource } from './cache';
+import Store from './store';
+import { hydrate } from 'src/hydration';
+
+import type {
+  DehydratedData,
+  InspectedElement,
+} from 'src/devtools/views/Components/types';
+import type { Resource } from './cache';
+import type { Bridge } from '../types';
+
+type ResolveFn = (inspectedElement: InspectedElement) => void;
+
+type Params = {|
+  id: number,
+  rendererID: number,
+|};
+
+// TODO Use an LRU for the underlying caching mechanism, to prevent memory leaks.
+
+// TODO Something needs to poll for (unprompted) updates.
+
+export default class InspectedElementCache extends EventEmitter {
+  _bridge: Bridge;
+  _store: Store;
+
+  _pendingRequests: Map<number, ResolveFn> = new Map();
+
+  _resource: Resource<Params, number, InspectedElement> = createResource(
+    ({ id, rendererID }: Params) => {
+      return new Promise(resolve => {
+        this._pendingRequests.set(id, resolve);
+        this._bridge.send('inspectElement', {
+          id,
+          rendererID,
+        });
+      });
+    },
+    ({ id, rendererID }: Params) => id
+  );
+
+  constructor(bridge: Bridge, store: Store) {
+    super();
+
+    this._bridge = bridge;
+    this._store = store;
+
+    bridge.addListener('inspectedElement', this._onInspectedElement);
+  }
+
+  read(id: number): InspectedElement | null {
+    const rendererID = this._store.getRendererIDForElement(id);
+
+    if (rendererID != null) {
+      return this._resource.read({ id, rendererID });
+    } else {
+      return null;
+    }
+  }
+
+  _onInspectedElement = (inspectedElement: InspectedElement) => {
+    const id = inspectedElement.id;
+
+    if (inspectedElement != null) {
+      inspectedElement.context = hydrateHelper(inspectedElement.context);
+      inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
+      inspectedElement.props = hydrateHelper(inspectedElement.props);
+      inspectedElement.state = hydrateHelper(inspectedElement.state);
+    }
+
+    const resolveFn = this._pendingRequests.get(id);
+    if (resolveFn != null) {
+      this._pendingRequests.delete(id);
+
+      resolveFn(inspectedElement);
+    } else {
+      this._resource.write(id, inspectedElement);
+
+      this.emit('invalidated', id);
+    }
+  };
+}
+
+function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
+  if (dehydratedData !== null) {
+    return hydrate(dehydratedData.data, dehydratedData.cleaned);
+  } else {
+    return null;
+  }
+}
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index e0b4cfabc93f..7dd8b3d9463e 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -92,6 +92,7 @@ export default class ProfilingCache {
 
   CommitDetails: Resource<
     CommitDetailsParams,
+    string,
     CommitDetailsFrontend
   > = createResource(
     ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
@@ -136,6 +137,7 @@ export default class ProfilingCache {
 
   FiberCommits: Resource<
     FiberCommitsParams,
+    string,
     FiberCommitsFrontend
   > = createResource(
     ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {
@@ -168,6 +170,7 @@ export default class ProfilingCache {
 
   Interactions: Resource<
     InteractionsParams,
+    number,
     InteractionsFrontend
   > = createResource(
     ({ rendererID, rootID }: InteractionsParams) => {
@@ -198,6 +201,7 @@ export default class ProfilingCache {
 
   ProfilingSummary: Resource<
     ProfilingSummaryParams,
+    number,
     ProfilingSummaryFrontend
   > = createResource(
     ({ rendererID, rootID }: ProfilingSummaryParams) => {
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 58577adf3210..a30fb7d20cef 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -25,9 +25,9 @@ type PendingResult = {|
   value: Suspender,
 |};
 
-type ResolvedResult<V> = {|
+type ResolvedResult<Value> = {|
   status: 1,
-  value: V,
+  value: Value,
 |};
 
 type RejectedResult = {|
@@ -35,11 +35,13 @@ type RejectedResult = {|
   value: mixed,
 |};
 
-type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
+type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;
 
-export type Resource<I, V> = {
-  read(I): V,
-  preload(I): void,
+export type Resource<Input, Key, Value> = {
+  invalidate(Key): void,
+  read(Input): Value,
+  preload(Input): void,
+  write(Key, Value): void,
 };
 
 const Pending = 0;
@@ -67,14 +69,14 @@ function identityHashFn(input) {
 
 const CacheContext = createContext(null);
 
-const entries: Map<Resource<any, any>, Map<any, any>> = new Map();
+const entries: Map<Resource<any, any, any>, Map<any, any>> = new Map();
 
-function accessResult<I, K, V>(
+function accessResult<Input, Key, Value>(
   resource: any,
-  fetch: I => Thenable<V>,
-  input: I,
-  key: K
-): Result<V> {
+  fetch: Input => Thenable<Value>,
+  input: Input,
+  key: Key
+): Result<Value> {
   let entriesForResource = entries.get(resource);
   if (entriesForResource === undefined) {
     entriesForResource = new Map();
@@ -86,7 +88,7 @@ function accessResult<I, K, V>(
     thenable.then(
       value => {
         if (newResult.status === Pending) {
-          const resolvedResult: ResolvedResult<V> = (newResult: any);
+          const resolvedResult: ResolvedResult<Value> = (newResult: any);
           resolvedResult.status = Resolved;
           resolvedResult.value = value;
         }
@@ -110,21 +112,28 @@ function accessResult<I, K, V>(
   }
 }
 
-export function createResource<I, K: string | number, V>(
-  fetch: I => Thenable<V>,
-  maybeHashInput?: I => K
-): Resource<I, V> {
-  const hashInput: I => K =
+export function createResource<Input, Key: string | number, Value>(
+  fetch: Input => Thenable<Value>,
+  maybeHashInput?: Input => Key
+): Resource<Input, Key, Value> {
+  const hashInput: Input => Key =
     maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
 
   const resource = {
-    read(input: I): V {
+    invalidate(key: Key): void {
+      const entriesForResource = entries.get(resource);
+      if (entriesForResource !== undefined) {
+        entriesForResource.delete(key);
+      }
+    },
+
+    read(input: Input): Value {
       // Prevent access outside of render.
       // eslint-disable-next-line react-hooks/rules-of-hooks
       readContext(CacheContext);
 
       const key = hashInput(input);
-      const result: Result<V> = accessResult(resource, fetch, input, key);
+      const result: Result<Value> = accessResult(resource, fetch, input, key);
       switch (result.status) {
         case Pending: {
           const suspender = result.value;
@@ -144,7 +153,7 @@ export function createResource<I, K: string | number, V>(
       }
     },
 
-    preload(input: I): void {
+    preload(input: Input): void {
       // Prevent access outside of render.
       // eslint-disable-next-line react-hooks/rules-of-hooks
       readContext(CacheContext);
@@ -152,6 +161,15 @@ export function createResource<I, K: string | number, V>(
       const key = hashInput(input);
       accessResult(resource, fetch, input, key);
     },
+
+    write(key: Key, value: Value): void {
+      let entriesForResource = entries.get(resource);
+      if (entriesForResource === undefined) {
+        entriesForResource = new Map();
+        entries.set(resource, entriesForResource);
+      }
+      entriesForResource.set(key, value);
+    },
   };
   return resource;
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index a59c9c9fa418..8692e29b6527 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -13,6 +13,7 @@ import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
+import InspectedElementCache from './InspectedElementCache';
 
 import type { ElementType } from './types';
 import type { Element } from './views/Components/types';
@@ -75,11 +76,14 @@ export default class Store extends EventEmitter {
   // The user has imported a previously exported profiling session.
   _importedProfilingData: ImportedProfilingData | null = null;
 
+  // Suspense cache for lazy-loaded inspected Element data.
+  _inspectedElementCache: InspectedElementCache;
+
   // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
 
-  // Suspense cache for reading profilign data.
+  // Suspense cache for reading profiling data.
   _profilingCache: ProfilingCache;
 
   // Map of root (id) to a list of tree mutation that occur during profiling.
@@ -170,6 +174,7 @@ export default class Store extends EventEmitter {
     // so the frontend needs to ask the backend for its status after mounting.
     bridge.send('getProfilingStatus');
 
+    this._inspectedElementCache = new InspectedElementCache(bridge, this);
     this._profilingCache = new ProfilingCache(bridge, this);
   }
 
@@ -224,6 +229,10 @@ export default class Store extends EventEmitter {
     this.emit('importedProfilingData');
   }
 
+  get inspectedElementCache(): InspectedElementCache {
+    return this._inspectedElementCache;
+  }
+
   get isProfiling(): boolean {
     return this._isProfiling;
   }
diff --git a/src/devtools/views/Components/Components.css b/src/devtools/views/Components/Components.css
index 6523b5e515ee..775b1faef115 100644
--- a/src/devtools/views/Components/Components.css
+++ b/src/devtools/views/Components/Components.css
@@ -24,3 +24,13 @@
     flex-direction: column;
   }
 }
+
+.Loading {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index f38830baab6e..bad008d0bc5f 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import styles from './Components.css';
@@ -14,10 +14,16 @@ function Components(_: {||}) {
         <Tree />
       </div>
       <div className={styles.SelectedElementWrapper}>
-        <SelectedElement />
+        <Suspense fallback={<Loading />}>
+          <SelectedElement />
+        </Suspense>
       </div>
     </div>
   );
 }
 
+function Loading() {
+  return <div className={styles.Loading}>Loading...</div>;
+}
+
 export default portaledContent(Components);
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index d5048a142e7b..359e59b33335 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -1,19 +1,12 @@
 // @flow
 
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext } from 'react';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
-import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
 import {
   ElementTypeClass,
@@ -23,8 +16,7 @@ import {
   ElementTypeSuspense,
 } from '../../types';
 
-import type { InspectedElement } from './types';
-import type { DehydratedData, Element } from './types';
+import type { Element, InspectedElement } from './types';
 
 export type Props = {||};
 
@@ -36,7 +28,10 @@ export default function SelectedElement(_: Props) {
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
-  const inspectedElement = useInspectedElement(selectedElementID);
+  const inspectedElement =
+    selectedElementID != null
+      ? store.inspectedElementCache.read(selectedElementID)
+      : null;
 
   const highlightElement = useCallback(() => {
     if (element !== null && selectedElementID !== null) {
@@ -261,80 +256,3 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
     </button>
   );
 }
-
-function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
-  if (dehydratedData !== null) {
-    return hydrate(dehydratedData.data, dehydratedData.cleaned);
-  } else {
-    return null;
-  }
-}
-
-function useInspectedElement(id: number | null): InspectedElement | null {
-  const idRef = useRef(id);
-  const bridge = useContext(BridgeContext);
-  const store = useContext(StoreContext);
-
-  const [inspectedElement, setInspectedElement] = useState(null);
-
-  useEffect(() => {
-    // Track the current selected element ID.
-    // We ignore any backend updates about previously selected elements.
-    idRef.current = id;
-
-    // Hide previous/stale insepected element to avoid temporarily showing the wrong values.
-    setInspectedElement(null);
-
-    // A null id indicates that there's nothing currently selected in the tree.
-    if (id === null) {
-      return () => {};
-    }
-
-    const rendererID = store.getRendererIDForElement(id);
-
-    // Update the $r variable.
-    bridge.send('selectElement', { id, rendererID });
-
-    // Update props, state, and context in the side panel.
-    const sendBridgeRequest = () => {
-      bridge.send('inspectElement', { id, rendererID });
-    };
-
-    let timeoutID = null;
-
-    const onInspectedElement = (inspectedElement: InspectedElement) => {
-      if (!inspectedElement || inspectedElement.id !== idRef.current) {
-        // Ignore bridge updates about previously selected elements.
-        return;
-      }
-
-      if (inspectedElement !== null) {
-        inspectedElement.context = hydrateHelper(inspectedElement.context);
-        inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
-        inspectedElement.props = hydrateHelper(inspectedElement.props);
-        inspectedElement.state = hydrateHelper(inspectedElement.state);
-      }
-
-      setInspectedElement(inspectedElement);
-
-      // Ask for an update in a second.
-      // Make sure we only ask once though.
-      clearTimeout(((timeoutID: any): TimeoutID));
-      timeoutID = setTimeout(sendBridgeRequest, 1000);
-    };
-
-    bridge.addListener('inspectedElement', onInspectedElement);
-
-    sendBridgeRequest();
-
-    return () => {
-      bridge.removeListener('inspectedElement', onInspectedElement);
-
-      if (timeoutID !== null) {
-        clearTimeout(timeoutID);
-      }
-    };
-  }, [bridge, id, idRef, store]);
-
-  return inspectedElement;
-}
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index bd295c920e35..5c8a300e8a5c 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -33,6 +33,10 @@ import Store from '../../store';
 
 import type { Element } from './types';
 
+// TODO Use two setState pattern for selecting Fibers:
+// The first update should be default priority and should select a new element in the Tree.
+// The second update should be deferred priority and should trigger suspense.
+
 type Context = {|
   // Tree
   baseDepth: number,

From c6b19cc1416070e341a7a9be2c160a8472b7577b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Apr 2019 08:33:00 -0700
Subject: [PATCH 456/814] Refactored insepected element cache to use the
 context API

---
 src/devtools/InspectedElementCache.js         |  93 -----------
 src/devtools/cache.js                         |  34 ++--
 src/devtools/store.js                         |   9 --
 src/devtools/views/Components/Components.js   |  12 +-
 .../Components/InspectedElementContext.js     | 145 ++++++++++++++++++
 .../views/Components/SelectedElement.js       |   7 +-
 6 files changed, 170 insertions(+), 130 deletions(-)
 delete mode 100644 src/devtools/InspectedElementCache.js
 create mode 100644 src/devtools/views/Components/InspectedElementContext.js

diff --git a/src/devtools/InspectedElementCache.js b/src/devtools/InspectedElementCache.js
deleted file mode 100644
index 424589dd21bd..000000000000
--- a/src/devtools/InspectedElementCache.js
+++ /dev/null
@@ -1,93 +0,0 @@
-// @flow
-
-import EventEmitter from 'events';
-import { createResource } from './cache';
-import Store from './store';
-import { hydrate } from 'src/hydration';
-
-import type {
-  DehydratedData,
-  InspectedElement,
-} from 'src/devtools/views/Components/types';
-import type { Resource } from './cache';
-import type { Bridge } from '../types';
-
-type ResolveFn = (inspectedElement: InspectedElement) => void;
-
-type Params = {|
-  id: number,
-  rendererID: number,
-|};
-
-// TODO Use an LRU for the underlying caching mechanism, to prevent memory leaks.
-
-// TODO Something needs to poll for (unprompted) updates.
-
-export default class InspectedElementCache extends EventEmitter {
-  _bridge: Bridge;
-  _store: Store;
-
-  _pendingRequests: Map<number, ResolveFn> = new Map();
-
-  _resource: Resource<Params, number, InspectedElement> = createResource(
-    ({ id, rendererID }: Params) => {
-      return new Promise(resolve => {
-        this._pendingRequests.set(id, resolve);
-        this._bridge.send('inspectElement', {
-          id,
-          rendererID,
-        });
-      });
-    },
-    ({ id, rendererID }: Params) => id
-  );
-
-  constructor(bridge: Bridge, store: Store) {
-    super();
-
-    this._bridge = bridge;
-    this._store = store;
-
-    bridge.addListener('inspectedElement', this._onInspectedElement);
-  }
-
-  read(id: number): InspectedElement | null {
-    const rendererID = this._store.getRendererIDForElement(id);
-
-    if (rendererID != null) {
-      return this._resource.read({ id, rendererID });
-    } else {
-      return null;
-    }
-  }
-
-  _onInspectedElement = (inspectedElement: InspectedElement) => {
-    const id = inspectedElement.id;
-
-    if (inspectedElement != null) {
-      inspectedElement.context = hydrateHelper(inspectedElement.context);
-      inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
-      inspectedElement.props = hydrateHelper(inspectedElement.props);
-      inspectedElement.state = hydrateHelper(inspectedElement.state);
-    }
-
-    const resolveFn = this._pendingRequests.get(id);
-    if (resolveFn != null) {
-      this._pendingRequests.delete(id);
-
-      resolveFn(inspectedElement);
-    } else {
-      this._resource.write(id, inspectedElement);
-
-      this.emit('invalidated', id);
-    }
-  };
-}
-
-function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
-  if (dehydratedData !== null) {
-    return hydrate(dehydratedData.data, dehydratedData.cleaned);
-  } else {
-    return null;
-  }
-}
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index a30fb7d20cef..11daf5d65fdc 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { createContext } from 'react';
+import LRU from 'lru-cache';
 
 // Cache implementation was forked from the React repo:
 // https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
@@ -63,10 +64,6 @@ function readContext(Context, observedBits) {
   return dispatcher.readContext(Context, observedBits);
 }
 
-function identityHashFn(input) {
-  return input;
-}
-
 const CacheContext = createContext(null);
 
 const entries: Map<Resource<any, any, any>, Map<any, any>> = new Map();
@@ -77,12 +74,8 @@ function accessResult<Input, Key, Value>(
   input: Input,
   key: Key
 ): Result<Value> {
-  let entriesForResource = entries.get(resource);
-  if (entriesForResource === undefined) {
-    entriesForResource = new Map();
-    entries.set(resource, entriesForResource);
-  }
-  let entry = entriesForResource.get(key);
+  const entriesForResource = ((entries.get(resource): any): Map<any, any>);
+  const entry = entriesForResource.get(key);
   if (entry === undefined) {
     const thenable = fetch(input);
     thenable.then(
@@ -114,16 +107,16 @@ function accessResult<Input, Key, Value>(
 
 export function createResource<Input, Key: string | number, Value>(
   fetch: Input => Thenable<Value>,
-  maybeHashInput?: Input => Key
+  hashInput: Input => Key,
+  useLRU?: boolean = false
 ): Resource<Input, Key, Value> {
-  const hashInput: Input => Key =
-    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
-
   const resource = {
     invalidate(key: Key): void {
-      const entriesForResource = entries.get(resource);
-      if (entriesForResource !== undefined) {
+      const entriesForResource = ((entries.get(resource): any): Map<any, any>);
+      if (entriesForResource instanceof Map) {
         entriesForResource.delete(key);
+      } else {
+        entriesForResource.set(key, undefined);
       }
     },
 
@@ -163,14 +156,13 @@ export function createResource<Input, Key: string | number, Value>(
     },
 
     write(key: Key, value: Value): void {
-      let entriesForResource = entries.get(resource);
-      if (entriesForResource === undefined) {
-        entriesForResource = new Map();
-        entries.set(resource, entriesForResource);
-      }
+      const entriesForResource = ((entries.get(resource): any): Map<any, any>);
       entriesForResource.set(key, value);
     },
   };
+
+  entries.set(resource, useLRU ? new LRU({ max: 10 }) : new Map());
+
   return resource;
 }
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 8692e29b6527..9b67920c6cec 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -13,7 +13,6 @@ import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
-import InspectedElementCache from './InspectedElementCache';
 
 import type { ElementType } from './types';
 import type { Element } from './views/Components/types';
@@ -76,9 +75,6 @@ export default class Store extends EventEmitter {
   // The user has imported a previously exported profiling session.
   _importedProfilingData: ImportedProfilingData | null = null;
 
-  // Suspense cache for lazy-loaded inspected Element data.
-  _inspectedElementCache: InspectedElementCache;
-
   // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
@@ -174,7 +170,6 @@ export default class Store extends EventEmitter {
     // so the frontend needs to ask the backend for its status after mounting.
     bridge.send('getProfilingStatus');
 
-    this._inspectedElementCache = new InspectedElementCache(bridge, this);
     this._profilingCache = new ProfilingCache(bridge, this);
   }
 
@@ -229,10 +224,6 @@ export default class Store extends EventEmitter {
     this.emit('importedProfilingData');
   }
 
-  get inspectedElementCache(): InspectedElementCache {
-    return this._inspectedElementCache;
-  }
-
   get isProfiling(): boolean {
     return this._isProfiling;
   }
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index bad008d0bc5f..bce5941af052 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -3,9 +3,11 @@
 import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
-import styles from './Components.css';
+import { InspectedElementContextController } from './InspectedElementContext';
 import portaledContent from '../portaledContent';
 
+import styles from './Components.css';
+
 function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
@@ -14,9 +16,11 @@ function Components(_: {||}) {
         <Tree />
       </div>
       <div className={styles.SelectedElementWrapper}>
-        <Suspense fallback={<Loading />}>
-          <SelectedElement />
-        </Suspense>
+        <InspectedElementContextController>
+          <Suspense fallback={<Loading />}>
+            <SelectedElement />
+          </Suspense>
+        </InspectedElementContextController>
       </div>
     </div>
   );
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
new file mode 100644
index 000000000000..53af90d5a108
--- /dev/null
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -0,0 +1,145 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { createResource } from '../../cache';
+import { BridgeContext, StoreContext } from '../context';
+import { hydrate } from 'src/hydration';
+
+import type {
+  DehydratedData,
+  InspectedElement,
+} from 'src/devtools/views/Components/types';
+import type { Resource } from '../../cache';
+
+// TODO Something needs to poll for (unprompted) updates.
+
+// TODO The curretn approach caches resources permanently.
+// We won't even ask for an update if an element is reselected.
+// I think we need to separate the polling for an update from the suspense cache.
+// This way we can always resened (and poll on an interval) for the selected id,
+// and the cache here can just invalidate itself as responses stream in.
+
+type Params = {|
+  id: number,
+  rendererID: number,
+|};
+
+type Context = {|
+  read(id: number): InspectedElement | null,
+|};
+
+const InspectedElementContext = createContext<Context>(((null: any): Context));
+InspectedElementContext.displayName = 'InspectedElementContext';
+
+type ResolveFn = (inspectedElement: InspectedElement) => void;
+type InProgressRequest = {|
+  promise: Promise<InspectedElement>,
+  resolveFn: ResolveFn,
+|};
+
+type Props = {|
+  children: React$Node,
+|};
+
+function InspectedElementContextController({ children }: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const [count, setCount] = useState(0);
+
+  const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
+    () => new Map(),
+    []
+  );
+
+  const resource = useMemo<Resource<Params, number, InspectedElement>>(
+    () =>
+      createResource(
+        ({ id, rendererID }: Params) => {
+          let request = inProgressRequests.get(id);
+          if (request != null) {
+            return request.promise;
+          }
+
+          let resolveFn = ((null: any): ResolveFn);
+          const promise = new Promise(resolve => {
+            resolveFn = resolve;
+
+            bridge.send('inspectElement', { id, rendererID });
+          });
+
+          inProgressRequests.set(id, { promise, resolveFn });
+
+          return promise;
+        },
+        ({ id, rendererID }: Params) => id
+      ),
+    [bridge, inProgressRequests]
+  );
+
+  useEffect(() => {
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+      if (inspectedElement != null) {
+        const id = inspectedElement.id;
+
+        inspectedElement.context = hydrateHelper(inspectedElement.context);
+        inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
+        inspectedElement.props = hydrateHelper(inspectedElement.props);
+        inspectedElement.state = hydrateHelper(inspectedElement.state);
+
+        const request = inProgressRequests.get(id);
+        if (request != null) {
+          inProgressRequests.delete(id);
+          request.resolveFn(inspectedElement);
+        } else {
+          resource.write(id, inspectedElement);
+
+          // Schedule update with React.
+          setCount(count => count + 1);
+        }
+      }
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
+    return () => bridge.removeListener('inspectElement', onInspectedElement);
+  }, [bridge, inProgressRequests, resource]);
+
+  const read = useCallback(
+    (id: number) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID != null) {
+        return resource.read({ id, rendererID });
+      } else {
+        return null;
+      }
+    },
+    [resource, store]
+  );
+
+  // "count" is intentionally passed so that it recreates the memoized object.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const value = useMemo(() => ({ read }), [count, read]);
+
+  return (
+    <InspectedElementContext.Provider value={value}>
+      {children}
+    </InspectedElementContext.Provider>
+  );
+}
+
+function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
+  if (dehydratedData !== null) {
+    return hydrate(dehydratedData.data, dehydratedData.cleaned);
+  } else {
+    return null;
+  }
+}
+
+export { InspectedElementContext, InspectedElementContextController };
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 359e59b33335..b8581983ab30 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -7,6 +7,7 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
+import { InspectedElementContext } from './InspectedElementContext';
 import styles from './SelectedElement.css';
 import {
   ElementTypeClass,
@@ -25,13 +26,13 @@ export default function SelectedElement(_: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const { read } = useContext(InspectedElementContext);
+
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
   const inspectedElement =
-    selectedElementID != null
-      ? store.inspectedElementCache.read(selectedElementID)
-      : null;
+    selectedElementID != null ? read(selectedElementID) : null;
 
   const highlightElement = useCallback(() => {
     if (element !== null && selectedElementID !== null) {

From 957c389566794307e663f53964ee181c7ce64df5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Apr 2019 10:35:19 -0700
Subject: [PATCH 457/814] Adding polling and initial stab at not serializing
 duplicate inspected Element props

---
 src/backend/renderer.js                       |  27 ++++
 src/devtools/cache.js                         |   8 +-
 .../Components/InspectedElementContext.js     | 118 +++++++++++-------
 .../views/Components/SelectedElement.js       |  32 ++---
 4 files changed, 125 insertions(+), 60 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ce607379ce5d..f700bbf8bef3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -959,6 +959,20 @@ export function attach(
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
+
+    // If this is the most recently inspected Fiber, take note of whether it was part of the new commit.
+    // If not, we can avoid re-serializing its props and state if asked again.
+    // Note that we avoid even comparing IDs for fibers not in the tree,
+    // so that we don't inadvertantly add them to the ID Map.
+    if (
+      shouldIncludeInTree &&
+      inspectedElementID !== null &&
+      inspectedElementID === getFiberID(getPrimaryFiber(nextFiber)) &&
+      nextFiber.actualDuration > 0
+    ) {
+      hasInspectedElementChanged = true;
+    }
+
     const isSuspense = nextFiber.tag === SuspenseComponent;
     let shouldResetChildren = false;
     // The behavior of timed-out Suspense trees is unique.
@@ -1632,16 +1646,29 @@ export function attach(
     };
   }
 
+  let inspectedElementID: number | null = null;
+  let hasInspectedElementChanged: boolean = false;
+
   function inspectElement(id: number): InspectedElement | null {
+    if (inspectedElementID === id && !hasInspectedElementChanged) {
+      // Optimization: Don't resend (and reserialize) unchanged props.
+      return null;
+    }
+
+    inspectedElementID = id;
+    hasInspectedElementChanged = false;
+
     let result = inspectElementRaw(id);
     if (result === null) {
       return null;
     }
+
     // TODO Review sanitization approach for the below inspectable values.
     result.context = cleanForBridge(result.context);
     result.hooks = cleanForBridge(result.hooks);
     result.props = cleanForBridge(result.props);
     result.state = cleanForBridge(result.state);
+
     return result;
   }
 
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 11daf5d65fdc..ee3835fec391 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -157,7 +157,13 @@ export function createResource<Input, Key: string | number, Value>(
 
     write(key: Key, value: Value): void {
       const entriesForResource = ((entries.get(resource): any): Map<any, any>);
-      entriesForResource.set(key, value);
+
+      const resolvedResult: ResolvedResult<Value> = {
+        status: Resolved,
+        value,
+      };
+
+      entriesForResource.set(key, resolvedResult);
     },
   };
 
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 53af90d5a108..196a98dcb452 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -2,7 +2,6 @@
 
 import React, {
   createContext,
-  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -11,6 +10,8 @@ import React, {
 import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
 import { hydrate } from 'src/hydration';
+import { unstable_next as next } from 'scheduler';
+import { TreeContext } from './TreeContext';
 
 import type {
   DehydratedData,
@@ -18,20 +19,10 @@ import type {
 } from 'src/devtools/views/Components/types';
 import type { Resource } from '../../cache';
 
-// TODO Something needs to poll for (unprompted) updates.
-
-// TODO The curretn approach caches resources permanently.
-// We won't even ask for an update if an element is reselected.
-// I think we need to separate the polling for an update from the suspense cache.
-// This way we can always resened (and poll on an interval) for the selected id,
-// and the cache here can just invalidate itself as responses stream in.
-
-type Params = {|
-  id: number,
-  rendererID: number,
-|};
+// TODO This isn't using the "two setState" pattern and updates sometimes feel janky.
 
 type Context = {|
+  inspectedElementID: number | null,
   read(id: number): InspectedElement | null,
 |};
 
@@ -52,17 +43,57 @@ function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const [count, setCount] = useState(0);
+  const { selectedElementID } = useContext(TreeContext);
+  const [inspectedElement, setInspectedElement] = useState<{
+    id: number | null,
+    inspectedElement: InspectedElement | null,
+  }>({
+    id: selectedElementID,
+    inspectedElement: null,
+  });
+  if (inspectedElement.id !== selectedElementID) {
+    if (selectedElementID === null) {
+      setInspectedElement({
+        id: selectedElementID,
+        inspectedElement: null,
+      });
+    } else {
+      next(() =>
+        setInspectedElement({
+          id: selectedElementID,
+          inspectedElement: null,
+        })
+      );
+    }
+  }
+
+  useEffect(() => {
+    if (inspectedElement.id === null) {
+      return () => {};
+    }
+
+    const rendererID = store.getRendererIDForElement(inspectedElement.id);
+
+    const requestUpdate = () => {
+      bridge.send('inspectElement', { id: inspectedElement.id, rendererID });
+    };
+
+    requestUpdate();
+
+    const intervalID = setInterval(requestUpdate, 1000);
+
+    return () => clearInterval(intervalID);
+  }, [bridge, inspectedElement.id, store]);
 
   const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
     () => new Map(),
     []
   );
 
-  const resource = useMemo<Resource<Params, number, InspectedElement>>(
+  const resource = useMemo<Resource<number, number, InspectedElement>>(
     () =>
       createResource(
-        ({ id, rendererID }: Params) => {
+        (id: number) => {
           let request = inProgressRequests.get(id);
           if (request != null) {
             return request.promise;
@@ -71,28 +102,31 @@ function InspectedElementContextController({ children }: Props) {
           let resolveFn = ((null: any): ResolveFn);
           const promise = new Promise(resolve => {
             resolveFn = resolve;
-
-            bridge.send('inspectElement', { id, rendererID });
           });
 
           inProgressRequests.set(id, { promise, resolveFn });
 
           return promise;
         },
-        ({ id, rendererID }: Params) => id
+        (id: number) => id
       ),
-    [bridge, inProgressRequests]
+    [inProgressRequests]
   );
 
   useEffect(() => {
-    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
-      if (inspectedElement != null) {
-        const id = inspectedElement.id;
-
-        inspectedElement.context = hydrateHelper(inspectedElement.context);
-        inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
-        inspectedElement.props = hydrateHelper(inspectedElement.props);
-        inspectedElement.state = hydrateHelper(inspectedElement.state);
+    const onInspectedElement = (
+      inspectedElementRaw: InspectedElement | null
+    ) => {
+      if (inspectedElementRaw != null) {
+        const id = inspectedElementRaw.id;
+
+        const inspectedElement = (({
+          ...inspectedElementRaw,
+          context: hydrateHelper(inspectedElementRaw.context),
+          hooks: hydrateHelper(inspectedElementRaw.hooks),
+          props: hydrateHelper(inspectedElementRaw.props),
+          state: hydrateHelper(inspectedElementRaw.state),
+        }: any): InspectedElement);
 
         const request = inProgressRequests.get(id);
         if (request != null) {
@@ -101,8 +135,10 @@ function InspectedElementContextController({ children }: Props) {
         } else {
           resource.write(id, inspectedElement);
 
-          // Schedule update with React.
-          setCount(count => count + 1);
+          // Schedule update with React if necessary.
+          setInspectedElement(prevState =>
+            prevState.id === id ? { id, inspectedElement } : prevState
+          );
         }
       }
     };
@@ -111,22 +147,16 @@ function InspectedElementContextController({ children }: Props) {
     return () => bridge.removeListener('inspectElement', onInspectedElement);
   }, [bridge, inProgressRequests, resource]);
 
-  const read = useCallback(
-    (id: number) => {
-      const rendererID = store.getRendererIDForElement(id);
-      if (rendererID != null) {
-        return resource.read({ id, rendererID });
-      } else {
-        return null;
-      }
-    },
-    [resource, store]
+  // We intentionally use the broader inspectedElement object, rather than the id,
+  // to enable updates to be scheduled with React after the cache has been invalidated.
+  const value = useMemo(
+    () => ({
+      inspectedElementID: inspectedElement.id,
+      read: resource.read,
+    }),
+    [inspectedElement, resource.read]
   );
 
-  // "count" is intentionally passed so that it recreates the memoized object.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const value = useMemo(() => ({ read }), [count, read]);
-
   return (
     <InspectedElementContext.Provider value={value}>
       {children}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index b8581983ab30..e0aee48cdf2c 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -22,51 +22,53 @@ import type { Element, InspectedElement } from './types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { selectedElementID, viewElementSource } = useContext(TreeContext);
+  const { viewElementSource } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const { read } = useContext(InspectedElementContext);
+  const { inspectedElementID, read } = useContext(InspectedElementContext);
 
   const element =
-    selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
+    inspectedElementID !== null
+      ? store.getElementByID(inspectedElementID)
+      : null;
 
   const inspectedElement =
-    selectedElementID != null ? read(selectedElementID) : null;
+    inspectedElementID != null ? read(inspectedElementID) : null;
 
   const highlightElement = useCallback(() => {
-    if (element !== null && selectedElementID !== null) {
-      const rendererID = store.getRendererIDForElement(selectedElementID);
+    if (element !== null && inspectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
       if (rendererID !== null) {
         bridge.send('highlightElementInDOM', {
           displayName: element.displayName,
           hideAfterTimeout: true,
-          id: selectedElementID,
+          id: inspectedElementID,
           openNativeElementsPanel: true,
           rendererID,
           scrollIntoView: true,
         });
       }
     }
-  }, [bridge, element, selectedElementID, store]);
+  }, [bridge, element, inspectedElementID, store]);
 
   const logElement = useCallback(() => {
-    if (selectedElementID !== null) {
-      const rendererID = store.getRendererIDForElement(selectedElementID);
+    if (inspectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
       if (rendererID !== null) {
         bridge.send('logElementToConsole', {
-          id: selectedElementID,
+          id: inspectedElementID,
           rendererID,
         });
       }
     }
-  }, [bridge, selectedElementID, store]);
+  }, [bridge, inspectedElementID, store]);
 
   const viewSource = useCallback(() => {
-    if (viewElementSource != null && selectedElementID !== null) {
-      viewElementSource(selectedElementID);
+    if (viewElementSource != null && inspectedElementID !== null) {
+      viewElementSource(inspectedElementID);
     }
-  }, [selectedElementID, viewElementSource]);
+  }, [inspectedElementID, viewElementSource]);
 
   if (element === null) {
     return (

From 3de18de25ec3c8b28423ab53a760f4cc2087c95c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 21 Apr 2019 12:16:42 -0700
Subject: [PATCH 458/814] Tried to implement two setState pattern, but it does
 not feel right

---
 .../Components/InspectedElementContext.js     |  48 ++------
 .../views/Components/SelectedElement.js       |   4 +-
 src/devtools/views/Components/TreeContext.js  | 104 ++++++++++++------
 3 files changed, 84 insertions(+), 72 deletions(-)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 196a98dcb452..e3ea5fd24684 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -10,7 +10,6 @@ import React, {
 import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
 import { hydrate } from 'src/hydration';
-import { unstable_next as next } from 'scheduler';
 import { TreeContext } from './TreeContext';
 
 import type {
@@ -19,10 +18,7 @@ import type {
 } from 'src/devtools/views/Components/types';
 import type { Resource } from '../../cache';
 
-// TODO This isn't using the "two setState" pattern and updates sometimes feel janky.
-
 type Context = {|
-  inspectedElementID: number | null,
   read(id: number): InspectedElement | null,
 |};
 
@@ -42,40 +38,19 @@ type Props = {|
 function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const { inspectedElementID } = useContext(TreeContext);
 
-  const { selectedElementID } = useContext(TreeContext);
-  const [inspectedElement, setInspectedElement] = useState<{
-    id: number | null,
-    inspectedElement: InspectedElement | null,
-  }>({
-    id: selectedElementID,
-    inspectedElement: null,
-  });
-  if (inspectedElement.id !== selectedElementID) {
-    if (selectedElementID === null) {
-      setInspectedElement({
-        id: selectedElementID,
-        inspectedElement: null,
-      });
-    } else {
-      next(() =>
-        setInspectedElement({
-          id: selectedElementID,
-          inspectedElement: null,
-        })
-      );
-    }
-  }
+  const [count, setCount] = useState<number>(0);
 
   useEffect(() => {
-    if (inspectedElement.id === null) {
+    if (inspectedElementID === null) {
       return () => {};
     }
 
-    const rendererID = store.getRendererIDForElement(inspectedElement.id);
+    const rendererID = store.getRendererIDForElement(inspectedElementID);
 
     const requestUpdate = () => {
-      bridge.send('inspectElement', { id: inspectedElement.id, rendererID });
+      bridge.send('inspectElement', { id: inspectedElementID, rendererID });
     };
 
     requestUpdate();
@@ -83,7 +58,7 @@ function InspectedElementContextController({ children }: Props) {
     const intervalID = setInterval(requestUpdate, 1000);
 
     return () => clearInterval(intervalID);
-  }, [bridge, inspectedElement.id, store]);
+  }, [bridge, inspectedElementID, store]);
 
   const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
     () => new Map(),
@@ -136,9 +111,7 @@ function InspectedElementContextController({ children }: Props) {
           resource.write(id, inspectedElement);
 
           // Schedule update with React if necessary.
-          setInspectedElement(prevState =>
-            prevState.id === id ? { id, inspectedElement } : prevState
-          );
+          setCount(count => count + 1);
         }
       }
     };
@@ -147,14 +120,13 @@ function InspectedElementContextController({ children }: Props) {
     return () => bridge.removeListener('inspectElement', onInspectedElement);
   }, [bridge, inProgressRequests, resource]);
 
-  // We intentionally use the broader inspectedElement object, rather than the id,
-  // to enable updates to be scheduled with React after the cache has been invalidated.
   const value = useMemo(
     () => ({
-      inspectedElementID: inspectedElement.id,
       read: resource.read,
     }),
-    [inspectedElement, resource.read]
+    // Count is used to invalidate the cache and schedule an update with React.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [count, resource.read]
   );
 
   return (
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index e0aee48cdf2c..c3de9a27185c 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -22,11 +22,11 @@ import type { Element, InspectedElement } from './types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { viewElementSource } = useContext(TreeContext);
+  const { inspectedElementID, viewElementSource } = useContext(TreeContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const { inspectedElementID, read } = useContext(InspectedElementContext);
+  const { read } = useContext(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 5c8a300e8a5c..ab1d7031cf49 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -27,16 +27,13 @@ import React, {
   useReducer,
   useRef,
 } from 'react';
+import { unstable_next as next } from 'scheduler';
 import { createRegExp } from '../utils';
 import { BridgeContext, StoreContext } from '../context';
 import Store from '../../store';
 
 import type { Element } from './types';
 
-// TODO Use two setState pattern for selecting Fibers:
-// The first update should be default priority and should select a new element in the Tree.
-// The second update should be deferred priority and should trigger suspense.
-
 type Context = {|
   // Tree
   baseDepth: number,
@@ -67,6 +64,10 @@ type Context = {|
 
   // Injected by parent HTML/JavaScript
   viewElementSource: Function | null,
+
+  // Inspection element panel
+  // Updated separately so we can avoid suspending when selection changes
+  inspectedElementID: number | null,
 |};
 
 const TreeContext = createContext<Context>(((null: any): Context));
@@ -88,6 +89,9 @@ type State = {|
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
   _ownerFlatTree: Array<number> | null,
+
+  // Inspection element panel
+  inspectedElementID: number | null,
 |};
 
 type Action = {|
@@ -103,7 +107,8 @@ type Action = {|
     | 'SELECT_PARENT_ELEMENT_IN_TREE'
     | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
     | 'SELECT_OWNER'
-    | 'SET_SEARCH_TEXT',
+    | 'SET_SEARCH_TEXT'
+    | 'UPDATE_INSPECTED_ELEMENT_ID',
   payload?: any,
 |};
 
@@ -566,6 +571,24 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   };
 }
 
+function reduceSuspenseState(
+  store: Store,
+  state: State,
+  action: Action
+): State {
+  const { type } = action;
+  switch (type) {
+    case 'UPDATE_INSPECTED_ELEMENT_ID':
+      return {
+        ...state,
+        inspectedElementID: state.selectedElementID,
+      };
+    default:
+      // React can bailout of no-op updates.
+      return state;
+  }
+}
+
 type Props = {|
   children: React$Node,
   viewElementSource: Function | null,
@@ -596,10 +619,12 @@ function TreeContextController({ children, viewElementSource }: Props) {
         case 'SELECT_PARENT_ELEMENT_IN_TREE':
         case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
         case 'SELECT_OWNER':
+        case 'UPDATE_INSPECTED_ELEMENT_ID':
         case 'SET_SEARCH_TEXT':
           state = reduceTreeState(store, state, action);
           state = reduceSearchState(store, state, action);
           state = reduceOwnersState(store, state, action);
+          state = reduceSuspenseState(store, state, action);
 
           // If the selected ID is in a collapsed subtree, reset the selected index to null.
           // We'll know the correct index after the layout effect will toggle the tree,
@@ -638,8 +663,19 @@ function TreeContextController({ children, viewElementSource }: Props) {
     ownerStack: [],
     ownerStackIndex: null,
     _ownerFlatTree: null,
+
+    // Inspection element panel
+    inspectedElementID: null,
   });
 
+  const dispatchWrapper = useCallback(
+    params => {
+      dispatch(params);
+      next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));
+    },
+    [dispatch]
+  );
+
   const getElementAtIndex = useCallback(
     (index: number) => {
       return state._ownerFlatTree === null
@@ -650,49 +686,50 @@ function TreeContextController({ children, viewElementSource }: Props) {
   );
   const selectElementAtIndex = useCallback(
     (index: number) =>
-      dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
-    [dispatch]
+      dispatchWrapper({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
+    [dispatchWrapper]
   );
   const selectElementByID = useCallback(
     (id: number | null) =>
-      dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),
-    [dispatch]
+      dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),
+    [dispatchWrapper]
   );
   const setSearchText = useCallback(
-    (text: string) => dispatch({ type: 'SET_SEARCH_TEXT', payload: text }),
-    [dispatch]
+    (text: string) =>
+      dispatchWrapper({ type: 'SET_SEARCH_TEXT', payload: text }),
+    [dispatchWrapper]
   );
   const goToNextSearchResult = useCallback(
-    () => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),
+    [dispatchWrapper]
   );
   const goToPreviousSearchResult = useCallback(
-    () => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),
+    [dispatchWrapper]
   );
   const resetOwnerStack = useCallback(
-    () => dispatch({ type: 'RESET_OWNER_STACK' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'RESET_OWNER_STACK' }),
+    [dispatchWrapper]
   );
   const selectChildElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
+    [dispatchWrapper]
   );
   const selectNextElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
+    [dispatchWrapper]
   );
   const selectParentElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),
+    [dispatchWrapper]
   );
   const selectPreviousElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
-    [dispatch]
+    () => dispatchWrapper({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
+    [dispatchWrapper]
   );
   const selectOwner = useCallback(
-    (id: number) => dispatch({ type: 'SELECT_OWNER', payload: id }),
-    [dispatch]
+    (id: number) => dispatchWrapper({ type: 'SELECT_OWNER', payload: id }),
+    [dispatchWrapper]
   );
 
   const value = useMemo(
@@ -724,6 +761,9 @@ function TreeContextController({ children, viewElementSource }: Props) {
       resetOwnerStack,
       selectOwner,
 
+      // Inspection element panel
+      inspectedElementID: state.inspectedElementID,
+
       // Injected by parent HTML/JavaScript
       viewElementSource,
     }),
@@ -748,10 +788,10 @@ function TreeContextController({ children, viewElementSource }: Props) {
   // Listen for host element selections.
   useEffect(() => {
     const handleSelectFiber = (id: number) =>
-      dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id });
+      dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id });
     bridge.addListener('selectFiber', handleSelectFiber);
     return () => bridge.removeListener('selectFiber', handleSelectFiber);
-  }, [bridge, dispatch]);
+  }, [bridge, dispatchWrapper]);
 
   // If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
   // This needs to be a layout effect to avoid temporarily flashing an incorrect selection.
@@ -775,7 +815,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       addedElementIDs,
       removedElementIDs,
     ]: Array<Uint32Array>) => {
-      dispatch({
+      dispatchWrapper({
         type: 'HANDLE_STORE_MUTATION',
         payload: [addedElementIDs, removedElementIDs],
       });
@@ -786,7 +826,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
       // At the moment, we can treat this as a mutation.
       // We don't know which Elements were newly added/removed, but that should be okay in this case.
       // It would only impact the search state, which is unlikely to exist yet at this point.
-      dispatch({
+      dispatchWrapper({
         type: 'HANDLE_STORE_MUTATION',
         payload: [new Uint32Array(0), new Uint32Array(0)],
       });
@@ -795,7 +835,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
     store.addListener('mutated', handleStoreMutated);
 
     return () => store.removeListener('mutated', handleStoreMutated);
-  }, [dispatch, initialRevision, store]);
+  }, [dispatchWrapper, initialRevision, store]);
 
   return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
 }

From 5970bf4b40335086d53403b59d2916bca6e7fc1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 08:52:15 -0700
Subject: [PATCH 459/814] Changed polling approach. Fixed remove event typo.

---
 .../Components/InspectedElementContext.js     | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index e3ea5fd24684..31c7f6431c2a 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -42,6 +42,7 @@ function InspectedElementContextController({ children }: Props) {
 
   const [count, setCount] = useState<number>(0);
 
+  // This effect handler polls for updates on the currently selected element.
   useEffect(() => {
     if (inspectedElementID === null) {
       return () => {};
@@ -49,15 +50,37 @@ function InspectedElementContextController({ children }: Props) {
 
     const rendererID = store.getRendererIDForElement(inspectedElementID);
 
-    const requestUpdate = () => {
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
       bridge.send('inspectElement', { id: inspectedElementID, rendererID });
     };
 
-    requestUpdate();
+    // Send the initial inspection request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+      if (
+        inspectedElement !== null &&
+        inspectedElement.id === inspectedElementID
+      ) {
+        // If this is the element we requested, wait a little bit and then ask for an update.
+        timeoutID = setTimeout(sendRequest, 1000);
+      }
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
 
-    const intervalID = setInterval(requestUpdate, 1000);
+    return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
 
-    return () => clearInterval(intervalID);
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
   }, [bridge, inspectedElementID, store]);
 
   const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
@@ -88,6 +111,7 @@ function InspectedElementContextController({ children }: Props) {
     [inProgressRequests]
   );
 
+  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onInspectedElement = (
       inspectedElementRaw: InspectedElement | null
@@ -117,7 +141,7 @@ function InspectedElementContextController({ children }: Props) {
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
-    return () => bridge.removeListener('inspectElement', onInspectedElement);
+    return () => bridge.removeListener('inspectedElement', onInspectedElement);
   }, [bridge, inProgressRequests, resource]);
 
   const value = useMemo(

From 70be637d48d78e932809b96a2b49a572e03e8e54 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 09:03:25 -0700
Subject: [PATCH 460/814] Don't schedule an update with React unless the curent
 element was invalidated

---
 .../Components/InspectedElementContext.js     | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 31c7f6431c2a..21c5aefb5f7f 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -42,47 +42,6 @@ function InspectedElementContextController({ children }: Props) {
 
   const [count, setCount] = useState<number>(0);
 
-  // This effect handler polls for updates on the currently selected element.
-  useEffect(() => {
-    if (inspectedElementID === null) {
-      return () => {};
-    }
-
-    const rendererID = store.getRendererIDForElement(inspectedElementID);
-
-    let timeoutID: TimeoutID | null = null;
-
-    const sendRequest = () => {
-      timeoutID = null;
-
-      bridge.send('inspectElement', { id: inspectedElementID, rendererID });
-    };
-
-    // Send the initial inspection request.
-    // We'll poll for an update in the response handler below.
-    sendRequest();
-
-    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
-      if (
-        inspectedElement !== null &&
-        inspectedElement.id === inspectedElementID
-      ) {
-        // If this is the element we requested, wait a little bit and then ask for an update.
-        timeoutID = setTimeout(sendRequest, 1000);
-      }
-    };
-
-    bridge.addListener('inspectedElement', onInspectedElement);
-
-    return () => {
-      bridge.removeListener('inspectedElement', onInspectedElement);
-
-      if (timeoutID !== null) {
-        clearTimeout(timeoutID);
-      }
-    };
-  }, [bridge, inspectedElementID, store]);
-
   const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
     () => new Map(),
     []
@@ -134,15 +93,58 @@ function InspectedElementContextController({ children }: Props) {
         } else {
           resource.write(id, inspectedElement);
 
-          // Schedule update with React if necessary.
-          setCount(count => count + 1);
+          // Schedule update with React if the curently-selected element has been invalidated.
+          if (id === inspectedElementID) {
+            setCount(count => count + 1);
+          }
         }
       }
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
     return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, inProgressRequests, resource]);
+  }, [bridge, inProgressRequests, inspectedElementID, resource]);
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(() => {
+    if (inspectedElementID === null) {
+      return () => {};
+    }
+
+    const rendererID = store.getRendererIDForElement(inspectedElementID);
+
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
+      bridge.send('inspectElement', { id: inspectedElementID, rendererID });
+    };
+
+    // Send the initial inspection request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+      if (
+        inspectedElement !== null &&
+        inspectedElement.id === inspectedElementID
+      ) {
+        // If this is the element we requested, wait a little bit and then ask for an update.
+        timeoutID = setTimeout(sendRequest, 1000);
+      }
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
+
+    return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
+
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [bridge, inspectedElementID, store]);
 
   const value = useMemo(
     () => ({

From d53ae2ea8a5db88232c6802fc8f480cb13c23576 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 10:19:59 -0700
Subject: [PATCH 461/814] Refactored TreeContext to use less memoization (based
 on feedback from Sebastian)

---
 src/devtools/views/Components/Element.js      |  34 +-
 .../Components/InspectedElementContext.js     |   4 +-
 src/devtools/views/Components/OwnersStack.js  |  20 +-
 src/devtools/views/Components/SearchInput.js  |  40 ++-
 .../views/Components/SelectedElement.js       |  22 +-
 src/devtools/views/Components/Tree.js         |  47 +--
 src/devtools/views/Components/TreeContext.js  | 314 +++++++-----------
 .../Components/ViewElementSourceContext.js    |   8 +
 src/devtools/views/DevTools.js                |  85 ++---
 .../views/Profiler/ProfilerContext.js         |  15 +-
 10 files changed, 268 insertions(+), 321 deletions(-)
 create mode 100644 src/devtools/views/Components/ViewElementSourceContext.js

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 5e5b52fe08e4..0fa93b40ac37 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -13,7 +13,7 @@ import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
@@ -28,18 +28,21 @@ type Props = {
 };
 
 export default function ElementView({ data, index, style }: Props) {
-  const [isHovered, setIsHovered] = useState(false);
+  const store = useContext(StoreContext);
   const {
     baseDepth,
-    getElementAtIndex,
+    ownerFlatTree,
     ownerStack,
-    selectOwner,
     selectedElementID,
-    selectElementByID,
-  } = useContext(TreeContext);
-  const store = useContext(StoreContext);
+  } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
-  const element = getElementAtIndex(index);
+  const element =
+    ownerFlatTree !== null
+      ? store.getElementByID(ownerFlatTree[index])
+      : store.getElementAtIndex(index);
+
+  const [isHovered, setIsHovered] = useState(false);
 
   const {
     lastScrolledIDRef,
@@ -52,9 +55,9 @@ export default function ElementView({ data, index, style }: Props) {
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
-      selectOwner(id);
+      dispatch({ type: 'SELECT_OWNER', payload: id });
     }
-  }, [id, selectOwner]);
+  }, [dispatch, id]);
 
   const scrollAnchorStartRef = useRef<HTMLSpanElement | null>(null);
   const scrollAnchorEndRef = useRef<HTMLSpanElement | null>(null);
@@ -102,10 +105,13 @@ export default function ElementView({ data, index, style }: Props) {
   const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
-        selectElementByID(metaKey ? null : id);
+        dispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: metaKey ? null : id,
+        });
       }
     },
-    [id, selectElementByID]
+    [dispatch, id]
   );
 
   const handleMouseEnter = useCallback(() => {
@@ -234,7 +240,9 @@ type DisplayNameProps = {|
 |};
 
 function DisplayName({ displayName, id }: DisplayNameProps) {
-  const { searchIndex, searchResults, searchText } = useContext(TreeContext);
+  const { searchIndex, searchResults, searchText } = useContext(
+    TreeStateContext
+  );
   const isSearchResult = useMemo(() => {
     return searchResults.includes(id);
   }, [id, searchResults]);
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 21c5aefb5f7f..fbbc572f7bec 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -10,7 +10,7 @@ import React, {
 import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
 import { hydrate } from 'src/hydration';
-import { TreeContext } from './TreeContext';
+import { TreeStateContext } from './TreeContext';
 
 import type {
   DehydratedData,
@@ -38,7 +38,7 @@ type Props = {|
 function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const { inspectedElementID } = useContext(TreeContext);
+  const { inspectedElementID } = useContext(TreeStateContext);
 
   const [count, setCount] = useState<number>(0);
 
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 860514fc78f1..b2f0c3299dbd 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -11,7 +11,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
 
@@ -20,9 +20,8 @@ import type { Element } from './types';
 import styles from './OwnersStack.css';
 
 export default function OwnerStack() {
-  const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
-    TreeContext
-  );
+  const { ownerStack, ownerStackIndex } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
   const elementsBarRef = useRef<HTMLDivElement | null>(null);
@@ -73,7 +72,7 @@ export default function OwnerStack() {
       <div className={styles.VRule} />
       <Button
         className={styles.IconButton}
-        onClick={resetOwnerStack}
+        onClick={() => dispatch({ type: 'RESET_OWNER_STACK' })}
         title="Back to tree view"
       >
         <ButtonIcon type="close" />
@@ -91,7 +90,7 @@ function ElementsDropdown({
   ownerStackIndex,
 }: ElementsDropdownProps) {
   const store = useContext(StoreContext);
-  const { selectOwner } = useContext(TreeContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   return (
     <Menu>
@@ -107,7 +106,7 @@ function ElementsDropdown({
           <MenuItem
             key={id}
             className={styles.Component}
-            onSelect={() => selectOwner(id)}
+            onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}
           >
             {((store.getElementByID(id): any): Element).displayName}
           </MenuItem>
@@ -123,7 +122,8 @@ type ElementViewProps = {
 };
 function ElementView({ id, index }: ElementViewProps) {
   const store = useContext(StoreContext);
-  const { ownerStackIndex, selectOwner } = useContext(TreeContext);
+  const { ownerStackIndex } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const { displayName } = ((store.getElementByID(id): any): Element);
 
@@ -131,9 +131,9 @@ function ElementView({ id, index }: ElementViewProps) {
 
   const handleChange = useCallback(() => {
     if (!isChecked) {
-      selectOwner(id);
+      dispatch({ type: 'SELECT_OWNER', payload: id });
     }
-  }, [id, isChecked, selectOwner]);
+  }, [dispatch, id, isChecked]);
 
   return (
     <Toggle
diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 7a0744afe849..ecae6beb2ea2 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
@@ -11,51 +11,49 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
-  const {
-    goToNextSearchResult,
-    goToPreviousSearchResult,
-    searchIndex,
-    searchResults,
-    searchText,
-    selectNextElementInTree,
-    selectPreviousElementInTree,
-    setSearchText,
-  } = useContext(TreeContext);
+  const { searchIndex, searchResults, searchText } = useContext(
+    TreeStateContext
+  );
+  const dispatch = useContext(TreeDispatcherContext);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) => setSearchText(currentTarget.value),
-    [setSearchText]
+    ({ currentTarget }) =>
+      dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),
+    [dispatch]
+  );
+  const resetSearch = useCallback(
+    () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),
+    [dispatch]
   );
-  const resetSearch = useCallback(() => setSearchText(''), [setSearchText]);
 
   const handleKeyDown = useCallback(
     event => {
       // For convenience, let up/down arrow keys change Tree selection.
       switch (event.key) {
         case 'ArrowDown':
-          selectNextElementInTree();
+          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
           event.preventDefault();
           break;
         case 'ArrowUp':
-          selectPreviousElementInTree();
+          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
           event.preventDefault();
           break;
         default:
           break;
       }
     },
-    [selectNextElementInTree, selectPreviousElementInTree]
+    [dispatch]
   );
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
-        goToNextSearchResult();
+        dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });
       }
     },
-    [goToNextSearchResult]
+    [dispatch]
   );
 
   // Auto-focus search input
@@ -106,7 +104,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToPreviousSearchResult}
+        onClick={() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
@@ -114,7 +112,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToNextSearchResult}
+        onClick={() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index c3de9a27185c..c2b62a6389f0 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -1,13 +1,14 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
+import ViewElementSourceContext from './ViewElementSourceContext';
 import styles from './SelectedElement.css';
 import {
   ElementTypeClass,
@@ -22,7 +23,8 @@ import type { Element, InspectedElement } from './types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { inspectedElementID, viewElementSource } = useContext(TreeContext);
+  const { inspectedElementID } = useContext(TreeStateContext);
+  const viewElementSource = useContext(ViewElementSourceContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -153,7 +155,7 @@ function InspectedElementView({
     state,
   } = inspectedElement;
 
-  const { ownerStack } = useContext(TreeContext);
+  const { ownerStack } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -241,12 +243,16 @@ function InspectedElementView({
 }
 
 function OwnerView({ displayName, id }: { displayName: string, id: number }) {
-  const { selectElementByID } = useContext(TreeContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
-  const handleClick = useCallback(() => selectElementByID(id), [
-    id,
-    selectElementByID,
-  ]);
+  const handleClick = useCallback(
+    () =>
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: id,
+      }),
+    [dispatch, id]
+  );
 
   return (
     <button
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 44f9f94f656a..9ecfa58e6081 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
 import { BridgeContext, StoreContext } from '../context';
 import ElementView from './Element';
@@ -21,12 +21,9 @@ import SearchInput from './SearchInput';
 
 import styles from './Tree.css';
 
-import type { Element } from './types';
-
 export type ItemData = {|
   baseDepth: number,
   numElements: number,
-  getElementAtIndex: (index: number) => Element | null,
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
@@ -36,22 +33,16 @@ export type ItemData = {|
 type Props = {||};
 
 export default function Tree(props: Props) {
+  const dispatch = useContext(TreeDispatcherContext);
   const {
     baseDepth,
-    getElementAtIndex,
     numElements,
     ownerStack,
     searchIndex,
     searchResults,
     selectedElementID,
     selectedElementIndex,
-    selectChildElementInTree,
-    selectElementAtIndex,
-    selectNextElementInTree,
-    selectOwner,
-    selectParentElementInTree,
-    selectPreviousElementInTree,
-  } = useContext(TreeContext);
+  } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
@@ -111,7 +102,7 @@ export default function Tree(props: Props) {
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
-          selectNextElementInTree();
+          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
           break;
         case 'ArrowLeft':
           event.preventDefault();
@@ -123,7 +114,7 @@ export default function Tree(props: Props) {
             if (element.children.length > 0 && !element.isCollapsed) {
               store.toggleIsCollapsed(element.id, true);
             } else {
-              selectParentElementInTree();
+              dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });
             }
           }
           break;
@@ -137,13 +128,13 @@ export default function Tree(props: Props) {
             if (element.children.length > 0 && element.isCollapsed) {
               store.toggleIsCollapsed(element.id, false);
             } else {
-              selectChildElementInTree();
+              dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });
             }
           }
           break;
         case 'ArrowUp':
           event.preventDefault();
-          selectPreviousElementInTree();
+          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
           break;
         default:
           return;
@@ -160,14 +151,7 @@ export default function Tree(props: Props) {
     return () => {
       ownerDocument.removeEventListener('keydown', handleKeyDown);
     };
-  }, [
-    selectedElementID,
-    selectChildElementInTree,
-    selectNextElementInTree,
-    selectParentElementInTree,
-    selectPreviousElementInTree,
-    store,
-  ]);
+  }, [dispatch, selectedElementID, store]);
 
   // Focus management.
   const handleBlur = useCallback(() => setTreeFocused(false), []);
@@ -175,9 +159,12 @@ export default function Tree(props: Props) {
     setTreeFocused(true);
 
     if (selectedElementIndex === null && numElements > 0) {
-      selectElementAtIndex(0);
+      dispatch({
+        type: 'SELECT_ELEMENT_AT_INDEX',
+        payload: 0,
+      });
     }
-  }, [numElements, selectedElementIndex, selectElementAtIndex]);
+  }, [dispatch, numElements, selectedElementIndex]);
 
   const handleKeyPress = useCallback(
     event => {
@@ -185,14 +172,14 @@ export default function Tree(props: Props) {
         case 'Enter':
         case ' ':
           if (selectedElementID !== null) {
-            selectOwner(selectedElementID);
+            dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });
           }
           break;
         default:
           break;
       }
     },
-    [selectedElementID, selectOwner]
+    [dispatch, selectedElementID]
   );
 
   const highlightElementInDOM = useCallback(
@@ -270,7 +257,6 @@ export default function Tree(props: Props) {
     () => ({
       baseDepth,
       numElements,
-      getElementAtIndex,
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
@@ -279,7 +265,6 @@ export default function Tree(props: Props) {
     [
       baseDepth,
       numElements,
-      getElementAtIndex,
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
@@ -328,7 +313,7 @@ export default function Tree(props: Props) {
 }
 
 function InnerElementType({ style, ...rest }) {
-  const { ownerStack } = useContext(TreeContext);
+  const { ownerStack } = useContext(TreeStateContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index ab1d7031cf49..1c4f4f9daecf 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -34,44 +34,98 @@ import Store from '../../store';
 
 import type { Element } from './types';
 
-type Context = {|
+type StateContext = {|
   // Tree
   baseDepth: number,
   numElements: number,
   selectedElementID: number | null,
   selectedElementIndex: number | null,
-  getElementAtIndex(index: number): Element | null,
-  selectChildElementInTree(): void,
-  selectElementAtIndex(index: number): void,
-  selectElementByID(id: number | null): void,
-  selectNextElementInTree(): void,
-  selectParentElementInTree(): void,
-  selectPreviousElementInTree(): void,
 
   // Search
   searchIndex: number | null,
   searchResults: Array<number>,
   searchText: string,
-  setSearchText(text: string): void,
-  goToNextSearchResult(): void,
-  goToPreviousSearchResult(): void,
 
   // Owners
+  ownerFlatTree: Array<number> | null,
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
-  resetOwnerStack(): void,
-  selectOwner(id: number): void,
-
-  // Injected by parent HTML/JavaScript
-  viewElementSource: Function | null,
 
   // Inspection element panel
-  // Updated separately so we can avoid suspending when selection changes
   inspectedElementID: number | null,
 |};
 
-const TreeContext = createContext<Context>(((null: any): Context));
-TreeContext.displayName = 'TreeContext';
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+  type: 'GO_TO_NEXT_SEARCH_RESULT',
+|};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+  type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
+|};
+type ACTION_HANDLE_STORE_MUTATION = {|
+  type: 'HANDLE_STORE_MUTATION',
+  payload: [Uint32Array, Uint32Array],
+|};
+type ACTION_RESET_OWNER_STACK = {|
+  type: 'RESET_OWNER_STACK',
+|};
+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|
+  type: 'SELECT_CHILD_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_ELEMENT_AT_INDEX = {|
+  type: 'SELECT_ELEMENT_AT_INDEX',
+  payload: number | null,
+|};
+type ACTION_SELECT_ELEMENT_BY_ID = {|
+  type: 'SELECT_ELEMENT_BY_ID',
+  payload: number | null,
+|};
+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_NEXT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PARENT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_OWNER = {|
+  type: 'SELECT_OWNER',
+  payload: number,
+|};
+type ACTION_SET_SEARCH_TEXT = {|
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
+|};
+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|
+  type: 'UPDATE_INSPECTED_ELEMENT_ID',
+|};
+
+type Action =
+  | ACTION_GO_TO_NEXT_SEARCH_RESULT
+  | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+  | ACTION_HANDLE_STORE_MUTATION
+  | ACTION_RESET_OWNER_STACK
+  | ACTION_SELECT_CHILD_ELEMENT_IN_TREE
+  | ACTION_SELECT_ELEMENT_AT_INDEX
+  | ACTION_SELECT_ELEMENT_BY_ID
+  | ACTION_SELECT_NEXT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PARENT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SELECT_OWNER
+  | ACTION_SET_SEARCH_TEXT
+  | ACTION_UPDATE_INSPECTED_ELEMENT_ID;
+
+type DispatcherContext = (action: Action) => void;
+
+const TreeStateContext = createContext<StateContext>(
+  ((null: any): StateContext)
+);
+TreeStateContext.displayName = 'TreeStateContext';
+
+const TreeDispatcherContext = createContext<DispatcherContext>(
+  ((null: any): DispatcherContext)
+);
+TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
 type State = {|
   // Tree
@@ -88,33 +142,13 @@ type State = {|
   // Owners
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
-  _ownerFlatTree: Array<number> | null,
+  ownerFlatTree: Array<number> | null,
 
   // Inspection element panel
   inspectedElementID: number | null,
 |};
 
-type Action = {|
-  type:
-    | 'GO_TO_NEXT_SEARCH_RESULT'
-    | 'GO_TO_PREVIOUS_SEARCH_RESULT'
-    | 'HANDLE_STORE_MUTATION'
-    | 'RESET_OWNER_STACK'
-    | 'SELECT_CHILD_ELEMENT_IN_TREE'
-    | 'SELECT_ELEMENT_AT_INDEX'
-    | 'SELECT_ELEMENT_BY_ID'
-    | 'SELECT_NEXT_ELEMENT_IN_TREE'
-    | 'SELECT_PARENT_ELEMENT_IN_TREE'
-    | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
-    | 'SELECT_OWNER'
-    | 'SET_SEARCH_TEXT'
-    | 'UPDATE_INSPECTED_ELEMENT_ID',
-  payload?: any,
-|};
-
 function reduceTreeState(store: Store, state: State, action: Action): State {
-  const { type, payload } = action;
-
   let {
     numElements,
     ownerStack,
@@ -126,7 +160,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
   // Base tree should ignore selected element changes when the owner's tree is active.
   if (ownerStack.length === 0) {
-    switch (type) {
+    switch (action.type) {
       case 'HANDLE_STORE_MUTATION':
         numElements = store.numElements;
 
@@ -157,18 +191,18 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         }
         break;
       case 'SELECT_ELEMENT_AT_INDEX':
-        selectedElementIndex = ((payload: any): number | null);
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
         break;
       case 'SELECT_ELEMENT_BY_ID':
         // Skip lookup in this case; it would be redundant.
         // It might also cause problems if the specified element was inside of a (not yet expanded) subtree.
         lookupIDForIndex = false;
 
-        selectedElementID = payload;
+        selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
         selectedElementIndex =
-          payload === null
+          selectedElementID === null
             ? null
-            : store.getIndexOfElementID(((payload: any): number));
+            : store.getIndexOfElementID(selectedElementID);
         break;
       case 'SELECT_NEXT_ELEMENT_IN_TREE':
         if (
@@ -229,8 +263,6 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 }
 
 function reduceSearchState(store: Store, state: State, action: Action): State {
-  const { type, payload } = action;
-
   let {
     ownerStack,
     searchIndex,
@@ -252,7 +284,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 
   // Search isn't supported when the owner's tree is active.
   if (ownerStack.length === 0) {
-    switch (type) {
+    switch (action.type) {
       case 'GO_TO_NEXT_SEARCH_RESULT':
         if (numPrevSearchResults > 0) {
           didRequestSearch = true;
@@ -274,7 +306,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
           const [
             addedElementIDs,
             removedElementIDs,
-          ] = ((payload: any): Array<Uint32Array>);
+          ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;
 
           removedElementIDs.forEach(id => {
             // Prune this item from the search results.
@@ -336,7 +368,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
       case 'SET_SEARCH_TEXT':
         searchIndex = null;
         searchResults = [];
-        searchText = ((payload: any): string);
+        searchText = (action: ACTION_SET_SEARCH_TEXT).payload;
 
         if (searchText !== '') {
           const regExp = createRegExp(searchText);
@@ -394,24 +426,22 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 }
 
 function reduceOwnersState(store: Store, state: State, action: Action): State {
-  const { payload, type } = action;
-
   let {
     baseDepth,
     numElements,
     selectedElementID,
     selectedElementIndex,
+    ownerFlatTree,
     ownerStack,
     ownerStackIndex,
     searchIndex,
     searchResults,
     searchText,
-    _ownerFlatTree,
   } = state;
 
   let prevSelectedElementIndex = selectedElementIndex;
 
-  switch (type) {
+  switch (action.type) {
     case 'HANDLE_STORE_MUTATION':
       if (ownerStack.length > 0) {
         let indexOfRemovedItem = -1;
@@ -425,15 +455,15 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         if (indexOfRemovedItem >= 0) {
           ownerStack = ownerStack.slice(0, indexOfRemovedItem);
           if (ownerStack.length === 0) {
-            _ownerFlatTree = null;
+            ownerFlatTree = null;
             ownerStackIndex = null;
           } else {
             ownerStackIndex = ownerStack.length - 1;
           }
         }
-        if (selectedElementID !== null && _ownerFlatTree !== null) {
+        if (selectedElementID !== null && ownerFlatTree !== null) {
           // Mutation might have caused the index of this ID to shift.
-          selectedElementIndex = _ownerFlatTree.indexOf(selectedElementID);
+          selectedElementIndex = ownerFlatTree.indexOf(selectedElementID);
         }
       } else {
         if (selectedElementID !== null) {
@@ -454,30 +484,31 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         selectedElementID !== null
           ? store.getIndexOfElementID(selectedElementID)
           : null;
-      _ownerFlatTree = null;
+      ownerFlatTree = null;
       break;
     case 'SELECT_ELEMENT_AT_INDEX':
-      if (_ownerFlatTree !== null) {
-        selectedElementIndex = ((payload: any): number | null);
+      if (ownerFlatTree !== null) {
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
       }
       break;
     case 'SELECT_ELEMENT_BY_ID':
-      if (_ownerFlatTree !== null) {
+      if (ownerFlatTree !== null) {
+        const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
         selectedElementIndex =
-          payload === null ? null : _ownerFlatTree.indexOf(payload);
+          payload === null ? null : ownerFlatTree.indexOf(payload);
       }
       break;
     case 'SELECT_NEXT_ELEMENT_IN_TREE':
-      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
         if (selectedElementIndex === null) {
           selectedElementIndex = 0;
-        } else if (selectedElementIndex + 1 < _ownerFlatTree.length) {
+        } else if (selectedElementIndex + 1 < ownerFlatTree.length) {
           selectedElementIndex++;
         }
       }
       break;
     case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
-      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
         if (selectedElementIndex !== null && selectedElementIndex > 0) {
           selectedElementIndex--;
         }
@@ -487,7 +518,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       // If the Store doesn't have any owners metadata, don't drill into an empty stack.
       // This is a confusing user experience.
       if (store.hasOwnerMetadata) {
-        ownerStackIndex = ownerStack.indexOf(payload);
+        const id = (action: ACTION_SELECT_OWNER).payload;
+        ownerStackIndex = ownerStack.indexOf(id);
 
         // Always force reset selection to be the top of the new owner tree.
         selectedElementIndex = 0;
@@ -498,7 +530,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         if (ownerStackIndex < 0) {
           // Add this new owner, and fill in the owners above it as well.
           ownerStack = [];
-          let currentOwnerID = ((payload: any): number);
+          let currentOwnerID = id;
           while (currentOwnerID !== 0) {
             ownerStack.unshift(currentOwnerID);
             currentOwnerID = ((store.getElementByID(
@@ -524,23 +556,23 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   if (
     ownerStackIndex !== state.ownerStackIndex ||
     ownerStack !== state.ownerStack ||
-    type === 'HANDLE_STORE_MUTATION'
+    action.type === 'HANDLE_STORE_MUTATION'
   ) {
     if (ownerStackIndex === null) {
-      _ownerFlatTree = null;
+      ownerFlatTree = null;
       baseDepth = 0;
       numElements = store.numElements;
     } else {
-      _ownerFlatTree = calculateCurrentOwnerList(
+      ownerFlatTree = calculateCurrentOwnerList(
         store,
         ownerStack[ownerStackIndex],
         ownerStack[ownerStackIndex],
         []
       );
 
-      baseDepth = ((store.getElementByID(_ownerFlatTree[0]): any): Element)
+      baseDepth = ((store.getElementByID(ownerFlatTree[0]): any): Element)
         .depth;
-      numElements = _ownerFlatTree.length;
+      numElements = ownerFlatTree.length;
     }
   }
 
@@ -548,8 +580,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   if (selectedElementIndex !== prevSelectedElementIndex) {
     if (selectedElementIndex === null) {
       selectedElementID = null;
-    } else if (_ownerFlatTree !== null) {
-      selectedElementID = _ownerFlatTree[((selectedElementIndex: any): number)];
+    } else if (ownerFlatTree !== null) {
+      selectedElementID = ownerFlatTree[((selectedElementIndex: any): number)];
     }
   }
 
@@ -567,7 +599,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 
     ownerStack,
     ownerStackIndex,
-    _ownerFlatTree,
+    ownerFlatTree,
   };
 }
 
@@ -589,13 +621,10 @@ function reduceSuspenseState(
   }
 }
 
-type Props = {|
-  children: React$Node,
-  viewElementSource: Function | null,
-|};
+type Props = {| children: React$Node |};
 
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
-function TreeContextController({ children, viewElementSource }: Props) {
+function TreeContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -662,129 +691,20 @@ function TreeContextController({ children, viewElementSource }: Props) {
     // Owners
     ownerStack: [],
     ownerStackIndex: null,
-    _ownerFlatTree: null,
+    ownerFlatTree: null,
 
     // Inspection element panel
     inspectedElementID: null,
   });
 
   const dispatchWrapper = useCallback(
-    params => {
-      dispatch(params);
+    (action: Action) => {
+      dispatch(action);
       next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));
     },
     [dispatch]
   );
 
-  const getElementAtIndex = useCallback(
-    (index: number) => {
-      return state._ownerFlatTree === null
-        ? store.getElementAtIndex(index)
-        : store.getElementByID(state._ownerFlatTree[index]);
-    },
-    [state, store]
-  );
-  const selectElementAtIndex = useCallback(
-    (index: number) =>
-      dispatchWrapper({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
-    [dispatchWrapper]
-  );
-  const selectElementByID = useCallback(
-    (id: number | null) =>
-      dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),
-    [dispatchWrapper]
-  );
-  const setSearchText = useCallback(
-    (text: string) =>
-      dispatchWrapper({ type: 'SET_SEARCH_TEXT', payload: text }),
-    [dispatchWrapper]
-  );
-  const goToNextSearchResult = useCallback(
-    () => dispatchWrapper({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),
-    [dispatchWrapper]
-  );
-  const goToPreviousSearchResult = useCallback(
-    () => dispatchWrapper({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),
-    [dispatchWrapper]
-  );
-  const resetOwnerStack = useCallback(
-    () => dispatchWrapper({ type: 'RESET_OWNER_STACK' }),
-    [dispatchWrapper]
-  );
-  const selectChildElementInTree = useCallback(
-    () => dispatchWrapper({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
-    [dispatchWrapper]
-  );
-  const selectNextElementInTree = useCallback(
-    () => dispatchWrapper({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
-    [dispatchWrapper]
-  );
-  const selectParentElementInTree = useCallback(
-    () => dispatchWrapper({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),
-    [dispatchWrapper]
-  );
-  const selectPreviousElementInTree = useCallback(
-    () => dispatchWrapper({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
-    [dispatchWrapper]
-  );
-  const selectOwner = useCallback(
-    (id: number) => dispatchWrapper({ type: 'SELECT_OWNER', payload: id }),
-    [dispatchWrapper]
-  );
-
-  const value = useMemo(
-    () => ({
-      // Tree (derived from Store or owners state)
-      baseDepth: state.baseDepth,
-      numElements: state.numElements,
-      selectedElementID: state.selectedElementID,
-      selectedElementIndex: state.selectedElementIndex,
-      getElementAtIndex,
-      selectChildElementInTree,
-      selectElementByID,
-      selectElementAtIndex,
-      selectNextElementInTree,
-      selectParentElementInTree,
-      selectPreviousElementInTree,
-
-      // Search
-      searchIndex: state.searchIndex,
-      searchResults: state.searchResults,
-      searchText: state.searchText,
-      setSearchText,
-      goToNextSearchResult,
-      goToPreviousSearchResult,
-
-      // Owners
-      ownerStack: state.ownerStack,
-      ownerStackIndex: state.ownerStackIndex,
-      resetOwnerStack,
-      selectOwner,
-
-      // Inspection element panel
-      inspectedElementID: state.inspectedElementID,
-
-      // Injected by parent HTML/JavaScript
-      viewElementSource,
-    }),
-    [
-      getElementAtIndex,
-      goToNextSearchResult,
-      goToPreviousSearchResult,
-      resetOwnerStack,
-      selectChildElementInTree,
-      selectElementAtIndex,
-      selectElementByID,
-      selectNextElementInTree,
-      selectParentElementInTree,
-      selectOwner,
-      selectPreviousElementInTree,
-      setSearchText,
-      state,
-      viewElementSource,
-    ]
-  );
-
   // Listen for host element selections.
   useEffect(() => {
     const handleSelectFiber = (id: number) =>
@@ -837,7 +757,13 @@ function TreeContextController({ children, viewElementSource }: Props) {
     return () => store.removeListener('mutated', handleStoreMutated);
   }, [dispatchWrapper, initialRevision, store]);
 
-  return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
+  return (
+    <TreeStateContext.Provider value={state}>
+      <TreeDispatcherContext.Provider value={dispatchWrapper}>
+        {children}
+      </TreeDispatcherContext.Provider>
+    </TreeStateContext.Provider>
+  );
 }
 
 function calculateCurrentOwnerList(
@@ -886,4 +812,4 @@ function recursivelySearchTree(
   );
 }
 
-export { TreeContext, TreeContextController };
+export { TreeDispatcherContext, TreeStateContext, TreeContextController };
diff --git a/src/devtools/views/Components/ViewElementSourceContext.js b/src/devtools/views/Components/ViewElementSourceContext.js
new file mode 100644
index 000000000000..0ce3191cff0a
--- /dev/null
+++ b/src/devtools/views/Components/ViewElementSourceContext.js
@@ -0,0 +1,8 @@
+// @flow
+
+import { createContext } from 'react';
+
+const ViewElementSourceContext = createContext<Function | null>(null);
+ViewElementSourceContext.displayName = 'ViewElementSourceContext';
+
+export default ViewElementSourceContext;
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 8509b5b24465..8e4ceca3c02b 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -14,6 +14,7 @@ import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Components/TreeContext';
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import ReactLogo from './ReactLogo';
 
@@ -121,47 +122,55 @@ export default function DevTools({
           profilerPortalContainer={profilerPortalContainer}
           settingsPortalContainer={settingsPortalContainer}
         >
-          <TreeContextController viewElementSource={viewElementSource}>
-            <ProfilerContextController>
-              <div className={styles.DevTools}>
-                {showTabBar && (
-                  <div className={styles.TabBar}>
-                    <ReactLogo />
-                    <span className={styles.DevToolsVersion}>
-                      {process.env.DEVTOOLS_VERSION}
-                    </span>
-                    <div className={styles.Spacer} />
-                    <TabBar
-                      currentTab={tab}
-                      id="DevTools"
-                      selectTab={setTab}
-                      size="large"
-                      tabs={
-                        supportsProfiling
-                          ? tabsWithProfiler
-                          : tabsWithoutProfiler
-                      }
+          <ViewElementSourceContext.Provider value={viewElementSource}>
+            <TreeContextController>
+              <ProfilerContextController>
+                <div className={styles.DevTools}>
+                  {showTabBar && (
+                    <div className={styles.TabBar}>
+                      <ReactLogo />
+                      <span className={styles.DevToolsVersion}>
+                        {process.env.DEVTOOLS_VERSION}
+                      </span>
+                      <div className={styles.Spacer} />
+                      <TabBar
+                        currentTab={tab}
+                        id="DevTools"
+                        selectTab={setTab}
+                        size="large"
+                        tabs={
+                          supportsProfiling
+                            ? tabsWithProfiler
+                            : tabsWithoutProfiler
+                        }
+                      />
+                    </div>
+                  )}
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'components'}
+                  >
+                    <Components portalContainer={componentsPortalContainer} />
+                  </div>
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'profiler'}
+                  >
+                    <Profiler
+                      portalContainer={profilerPortalContainer}
+                      supportsProfiling={supportsProfiling}
                     />
                   </div>
-                )}
-                <div
-                  className={styles.TabContent}
-                  hidden={tab !== 'components'}
-                >
-                  <Components portalContainer={componentsPortalContainer} />
-                </div>
-                <div className={styles.TabContent} hidden={tab !== 'profiler'}>
-                  <Profiler
-                    portalContainer={profilerPortalContainer}
-                    supportsProfiling={supportsProfiling}
-                  />
-                </div>
-                <div className={styles.TabContent} hidden={tab !== 'settings'}>
-                  <Settings portalContainer={settingsPortalContainer} />
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'settings'}
+                  >
+                    <Settings portalContainer={settingsPortalContainer} />
+                  </div>
                 </div>
-              </div>
-            </ProfilerContextController>
-          </TreeContextController>
+              </ProfilerContextController>
+            </TreeContextController>
+          </ViewElementSourceContext.Provider>
         </SettingsContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c8a89c0d9e56..2a9aa6c8fbfe 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -9,7 +9,10 @@ import React, {
 } from 'react';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { useLocalStorage, useSubscription } from '../hooks';
-import { TreeContext } from '../Components/TreeContext';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
 import { StoreContext } from '../context';
 import Store from '../../store';
 
@@ -79,7 +82,8 @@ type Props = {|
 
 function ProfilerContextController({ children }: Props) {
   const store = useContext(StoreContext);
-  const { selectElementByID, selectedElementID } = useContext(TreeContext);
+  const { selectedElementID } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const subscription = useMemo(
     () => ({
@@ -155,11 +159,14 @@ function ProfilerContextController({ children }: Props) {
         // If this element is still in the store, then select it in the Components tab as well.
         const element = store.getElementByID(id);
         if (element !== null) {
-          selectElementByID(id);
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: id,
+          });
         }
       }
     },
-    [selectElementByID, selectFiberID, selectFiberName, store]
+    [dispatch, selectFiberID, selectFiberName, store]
   );
 
   if (isProfiling) {

From 433934f55ef272b39281e9b56e4d6c3ff34f48fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 10:19:59 -0700
Subject: [PATCH 462/814] Refactored TreeContext to use less memoization (based
 on feedback from Sebastian)

---
 src/devtools/views/Components/Element.js      |  34 +-
 src/devtools/views/Components/OwnersStack.js  |  20 +-
 src/devtools/views/Components/SearchInput.js  |  40 ++-
 .../views/Components/SelectedElement.js       |  24 +-
 src/devtools/views/Components/Tree.js         |  47 +--
 src/devtools/views/Components/TreeContext.js  | 299 +++++++-----------
 .../Components/ViewElementSourceContext.js    |   8 +
 src/devtools/views/DevTools.js                |  85 ++---
 .../views/Profiler/ProfilerContext.js         |  15 +-
 9 files changed, 260 insertions(+), 312 deletions(-)
 create mode 100644 src/devtools/views/Components/ViewElementSourceContext.js

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 5e5b52fe08e4..0fa93b40ac37 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -13,7 +13,7 @@ import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
@@ -28,18 +28,21 @@ type Props = {
 };
 
 export default function ElementView({ data, index, style }: Props) {
-  const [isHovered, setIsHovered] = useState(false);
+  const store = useContext(StoreContext);
   const {
     baseDepth,
-    getElementAtIndex,
+    ownerFlatTree,
     ownerStack,
-    selectOwner,
     selectedElementID,
-    selectElementByID,
-  } = useContext(TreeContext);
-  const store = useContext(StoreContext);
+  } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
-  const element = getElementAtIndex(index);
+  const element =
+    ownerFlatTree !== null
+      ? store.getElementByID(ownerFlatTree[index])
+      : store.getElementAtIndex(index);
+
+  const [isHovered, setIsHovered] = useState(false);
 
   const {
     lastScrolledIDRef,
@@ -52,9 +55,9 @@ export default function ElementView({ data, index, style }: Props) {
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
-      selectOwner(id);
+      dispatch({ type: 'SELECT_OWNER', payload: id });
     }
-  }, [id, selectOwner]);
+  }, [dispatch, id]);
 
   const scrollAnchorStartRef = useRef<HTMLSpanElement | null>(null);
   const scrollAnchorEndRef = useRef<HTMLSpanElement | null>(null);
@@ -102,10 +105,13 @@ export default function ElementView({ data, index, style }: Props) {
   const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
-        selectElementByID(metaKey ? null : id);
+        dispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: metaKey ? null : id,
+        });
       }
     },
-    [id, selectElementByID]
+    [dispatch, id]
   );
 
   const handleMouseEnter = useCallback(() => {
@@ -234,7 +240,9 @@ type DisplayNameProps = {|
 |};
 
 function DisplayName({ displayName, id }: DisplayNameProps) {
-  const { searchIndex, searchResults, searchText } = useContext(TreeContext);
+  const { searchIndex, searchResults, searchText } = useContext(
+    TreeStateContext
+  );
   const isSearchResult = useMemo(() => {
     return searchResults.includes(id);
   }, [id, searchResults]);
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 860514fc78f1..b2f0c3299dbd 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -11,7 +11,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
 
@@ -20,9 +20,8 @@ import type { Element } from './types';
 import styles from './OwnersStack.css';
 
 export default function OwnerStack() {
-  const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(
-    TreeContext
-  );
+  const { ownerStack, ownerStackIndex } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
   const elementsBarRef = useRef<HTMLDivElement | null>(null);
@@ -73,7 +72,7 @@ export default function OwnerStack() {
       <div className={styles.VRule} />
       <Button
         className={styles.IconButton}
-        onClick={resetOwnerStack}
+        onClick={() => dispatch({ type: 'RESET_OWNER_STACK' })}
         title="Back to tree view"
       >
         <ButtonIcon type="close" />
@@ -91,7 +90,7 @@ function ElementsDropdown({
   ownerStackIndex,
 }: ElementsDropdownProps) {
   const store = useContext(StoreContext);
-  const { selectOwner } = useContext(TreeContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   return (
     <Menu>
@@ -107,7 +106,7 @@ function ElementsDropdown({
           <MenuItem
             key={id}
             className={styles.Component}
-            onSelect={() => selectOwner(id)}
+            onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}
           >
             {((store.getElementByID(id): any): Element).displayName}
           </MenuItem>
@@ -123,7 +122,8 @@ type ElementViewProps = {
 };
 function ElementView({ id, index }: ElementViewProps) {
   const store = useContext(StoreContext);
-  const { ownerStackIndex, selectOwner } = useContext(TreeContext);
+  const { ownerStackIndex } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const { displayName } = ((store.getElementByID(id): any): Element);
 
@@ -131,9 +131,9 @@ function ElementView({ id, index }: ElementViewProps) {
 
   const handleChange = useCallback(() => {
     if (!isChecked) {
-      selectOwner(id);
+      dispatch({ type: 'SELECT_OWNER', payload: id });
     }
-  }, [id, isChecked, selectOwner]);
+  }, [dispatch, id, isChecked]);
 
   return (
     <Toggle
diff --git a/src/devtools/views/Components/SearchInput.js b/src/devtools/views/Components/SearchInput.js
index 7a0744afe849..ecae6beb2ea2 100644
--- a/src/devtools/views/Components/SearchInput.js
+++ b/src/devtools/views/Components/SearchInput.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
@@ -11,51 +11,49 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
-  const {
-    goToNextSearchResult,
-    goToPreviousSearchResult,
-    searchIndex,
-    searchResults,
-    searchText,
-    selectNextElementInTree,
-    selectPreviousElementInTree,
-    setSearchText,
-  } = useContext(TreeContext);
+  const { searchIndex, searchResults, searchText } = useContext(
+    TreeStateContext
+  );
+  const dispatch = useContext(TreeDispatcherContext);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) => setSearchText(currentTarget.value),
-    [setSearchText]
+    ({ currentTarget }) =>
+      dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),
+    [dispatch]
+  );
+  const resetSearch = useCallback(
+    () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),
+    [dispatch]
   );
-  const resetSearch = useCallback(() => setSearchText(''), [setSearchText]);
 
   const handleKeyDown = useCallback(
     event => {
       // For convenience, let up/down arrow keys change Tree selection.
       switch (event.key) {
         case 'ArrowDown':
-          selectNextElementInTree();
+          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
           event.preventDefault();
           break;
         case 'ArrowUp':
-          selectPreviousElementInTree();
+          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
           event.preventDefault();
           break;
         default:
           break;
       }
     },
-    [selectNextElementInTree, selectPreviousElementInTree]
+    [dispatch]
   );
 
   const handleInputKeyPress = useCallback(
     ({ key }) => {
       if (key === 'Enter') {
-        goToNextSearchResult();
+        dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });
       }
     },
-    [goToNextSearchResult]
+    [dispatch]
   );
 
   // Auto-focus search input
@@ -106,7 +104,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToPreviousSearchResult}
+        onClick={() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
@@ -114,7 +112,7 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={goToNextSearchResult}
+        onClick={() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index d5048a142e7b..cf4a7c5f3335 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -7,13 +7,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
+import ViewElementSourceContext from './ViewElementSourceContext';
 import styles from './SelectedElement.css';
 import {
   ElementTypeClass,
@@ -29,7 +30,8 @@ import type { DehydratedData, Element } from './types';
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { selectedElementID, viewElementSource } = useContext(TreeContext);
+  const { selectedElementID } = useContext(TreeStateContext);
+  const viewElementSource = useContext(ViewElementSourceContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -155,7 +157,7 @@ function InspectedElementView({
     state,
   } = inspectedElement;
 
-  const { ownerStack } = useContext(TreeContext);
+  const { ownerStack } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -243,12 +245,16 @@ function InspectedElementView({
 }
 
 function OwnerView({ displayName, id }: { displayName: string, id: number }) {
-  const { selectElementByID } = useContext(TreeContext);
-
-  const handleClick = useCallback(() => selectElementByID(id), [
-    id,
-    selectElementByID,
-  ]);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const handleClick = useCallback(
+    () =>
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: id,
+      }),
+    [dispatch, id]
+  );
 
   return (
     <button
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 44f9f94f656a..9ecfa58e6081 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import { TreeContext } from './TreeContext';
+import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
 import { BridgeContext, StoreContext } from '../context';
 import ElementView from './Element';
@@ -21,12 +21,9 @@ import SearchInput from './SearchInput';
 
 import styles from './Tree.css';
 
-import type { Element } from './types';
-
 export type ItemData = {|
   baseDepth: number,
   numElements: number,
-  getElementAtIndex: (index: number) => Element | null,
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
@@ -36,22 +33,16 @@ export type ItemData = {|
 type Props = {||};
 
 export default function Tree(props: Props) {
+  const dispatch = useContext(TreeDispatcherContext);
   const {
     baseDepth,
-    getElementAtIndex,
     numElements,
     ownerStack,
     searchIndex,
     searchResults,
     selectedElementID,
     selectedElementIndex,
-    selectChildElementInTree,
-    selectElementAtIndex,
-    selectNextElementInTree,
-    selectOwner,
-    selectParentElementInTree,
-    selectPreviousElementInTree,
-  } = useContext(TreeContext);
+  } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
@@ -111,7 +102,7 @@ export default function Tree(props: Props) {
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
-          selectNextElementInTree();
+          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
           break;
         case 'ArrowLeft':
           event.preventDefault();
@@ -123,7 +114,7 @@ export default function Tree(props: Props) {
             if (element.children.length > 0 && !element.isCollapsed) {
               store.toggleIsCollapsed(element.id, true);
             } else {
-              selectParentElementInTree();
+              dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });
             }
           }
           break;
@@ -137,13 +128,13 @@ export default function Tree(props: Props) {
             if (element.children.length > 0 && element.isCollapsed) {
               store.toggleIsCollapsed(element.id, false);
             } else {
-              selectChildElementInTree();
+              dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });
             }
           }
           break;
         case 'ArrowUp':
           event.preventDefault();
-          selectPreviousElementInTree();
+          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
           break;
         default:
           return;
@@ -160,14 +151,7 @@ export default function Tree(props: Props) {
     return () => {
       ownerDocument.removeEventListener('keydown', handleKeyDown);
     };
-  }, [
-    selectedElementID,
-    selectChildElementInTree,
-    selectNextElementInTree,
-    selectParentElementInTree,
-    selectPreviousElementInTree,
-    store,
-  ]);
+  }, [dispatch, selectedElementID, store]);
 
   // Focus management.
   const handleBlur = useCallback(() => setTreeFocused(false), []);
@@ -175,9 +159,12 @@ export default function Tree(props: Props) {
     setTreeFocused(true);
 
     if (selectedElementIndex === null && numElements > 0) {
-      selectElementAtIndex(0);
+      dispatch({
+        type: 'SELECT_ELEMENT_AT_INDEX',
+        payload: 0,
+      });
     }
-  }, [numElements, selectedElementIndex, selectElementAtIndex]);
+  }, [dispatch, numElements, selectedElementIndex]);
 
   const handleKeyPress = useCallback(
     event => {
@@ -185,14 +172,14 @@ export default function Tree(props: Props) {
         case 'Enter':
         case ' ':
           if (selectedElementID !== null) {
-            selectOwner(selectedElementID);
+            dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });
           }
           break;
         default:
           break;
       }
     },
-    [selectedElementID, selectOwner]
+    [dispatch, selectedElementID]
   );
 
   const highlightElementInDOM = useCallback(
@@ -270,7 +257,6 @@ export default function Tree(props: Props) {
     () => ({
       baseDepth,
       numElements,
-      getElementAtIndex,
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
@@ -279,7 +265,6 @@ export default function Tree(props: Props) {
     [
       baseDepth,
       numElements,
-      getElementAtIndex,
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
@@ -328,7 +313,7 @@ export default function Tree(props: Props) {
 }
 
 function InnerElementType({ style, ...rest }) {
-  const { ownerStack } = useContext(TreeContext);
+  const { ownerStack } = useContext(TreeStateContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index bd295c920e35..85e4b8cd4e7e 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -19,7 +19,6 @@
 
 import React, {
   createContext,
-  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -33,40 +32,91 @@ import Store from '../../store';
 
 import type { Element } from './types';
 
-type Context = {|
+type StateContext = {|
   // Tree
   baseDepth: number,
   numElements: number,
   selectedElementID: number | null,
   selectedElementIndex: number | null,
-  getElementAtIndex(index: number): Element | null,
-  selectChildElementInTree(): void,
-  selectElementAtIndex(index: number): void,
-  selectElementByID(id: number | null): void,
-  selectNextElementInTree(): void,
-  selectParentElementInTree(): void,
-  selectPreviousElementInTree(): void,
 
   // Search
   searchIndex: number | null,
   searchResults: Array<number>,
   searchText: string,
-  setSearchText(text: string): void,
-  goToNextSearchResult(): void,
-  goToPreviousSearchResult(): void,
 
   // Owners
+  ownerFlatTree: Array<number> | null,
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
-  resetOwnerStack(): void,
-  selectOwner(id: number): void,
+|};
 
-  // Injected by parent HTML/JavaScript
-  viewElementSource: Function | null,
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+  type: 'GO_TO_NEXT_SEARCH_RESULT',
+|};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+  type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
+|};
+type ACTION_HANDLE_STORE_MUTATION = {|
+  type: 'HANDLE_STORE_MUTATION',
+  payload: [Uint32Array, Uint32Array],
+|};
+type ACTION_RESET_OWNER_STACK = {|
+  type: 'RESET_OWNER_STACK',
+|};
+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|
+  type: 'SELECT_CHILD_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_ELEMENT_AT_INDEX = {|
+  type: 'SELECT_ELEMENT_AT_INDEX',
+  payload: number | null,
+|};
+type ACTION_SELECT_ELEMENT_BY_ID = {|
+  type: 'SELECT_ELEMENT_BY_ID',
+  payload: number | null,
+|};
+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_NEXT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PARENT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_OWNER = {|
+  type: 'SELECT_OWNER',
+  payload: number,
+|};
+type ACTION_SET_SEARCH_TEXT = {|
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
 |};
 
-const TreeContext = createContext<Context>(((null: any): Context));
-TreeContext.displayName = 'TreeContext';
+type Action =
+  | ACTION_GO_TO_NEXT_SEARCH_RESULT
+  | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+  | ACTION_HANDLE_STORE_MUTATION
+  | ACTION_RESET_OWNER_STACK
+  | ACTION_SELECT_CHILD_ELEMENT_IN_TREE
+  | ACTION_SELECT_ELEMENT_AT_INDEX
+  | ACTION_SELECT_ELEMENT_BY_ID
+  | ACTION_SELECT_NEXT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PARENT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SELECT_OWNER
+  | ACTION_SET_SEARCH_TEXT;
+
+type DispatcherContext = (action: Action) => void;
+
+const TreeStateContext = createContext<StateContext>(
+  ((null: any): StateContext)
+);
+TreeStateContext.displayName = 'TreeStateContext';
+
+const TreeDispatcherContext = createContext<DispatcherContext>(
+  ((null: any): DispatcherContext)
+);
+TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
 type State = {|
   // Tree
@@ -83,29 +133,10 @@ type State = {|
   // Owners
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
-  _ownerFlatTree: Array<number> | null,
-|};
-
-type Action = {|
-  type:
-    | 'GO_TO_NEXT_SEARCH_RESULT'
-    | 'GO_TO_PREVIOUS_SEARCH_RESULT'
-    | 'HANDLE_STORE_MUTATION'
-    | 'RESET_OWNER_STACK'
-    | 'SELECT_CHILD_ELEMENT_IN_TREE'
-    | 'SELECT_ELEMENT_AT_INDEX'
-    | 'SELECT_ELEMENT_BY_ID'
-    | 'SELECT_NEXT_ELEMENT_IN_TREE'
-    | 'SELECT_PARENT_ELEMENT_IN_TREE'
-    | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'
-    | 'SELECT_OWNER'
-    | 'SET_SEARCH_TEXT',
-  payload?: any,
+  ownerFlatTree: Array<number> | null,
 |};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
-  const { type, payload } = action;
-
   let {
     numElements,
     ownerStack,
@@ -117,7 +148,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
   // Base tree should ignore selected element changes when the owner's tree is active.
   if (ownerStack.length === 0) {
-    switch (type) {
+    switch (action.type) {
       case 'HANDLE_STORE_MUTATION':
         numElements = store.numElements;
 
@@ -148,18 +179,18 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         }
         break;
       case 'SELECT_ELEMENT_AT_INDEX':
-        selectedElementIndex = ((payload: any): number | null);
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
         break;
       case 'SELECT_ELEMENT_BY_ID':
         // Skip lookup in this case; it would be redundant.
         // It might also cause problems if the specified element was inside of a (not yet expanded) subtree.
         lookupIDForIndex = false;
 
-        selectedElementID = payload;
+        selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
         selectedElementIndex =
-          payload === null
+          selectedElementID === null
             ? null
-            : store.getIndexOfElementID(((payload: any): number));
+            : store.getIndexOfElementID(selectedElementID);
         break;
       case 'SELECT_NEXT_ELEMENT_IN_TREE':
         if (
@@ -220,8 +251,6 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 }
 
 function reduceSearchState(store: Store, state: State, action: Action): State {
-  const { type, payload } = action;
-
   let {
     ownerStack,
     searchIndex,
@@ -243,7 +272,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 
   // Search isn't supported when the owner's tree is active.
   if (ownerStack.length === 0) {
-    switch (type) {
+    switch (action.type) {
       case 'GO_TO_NEXT_SEARCH_RESULT':
         if (numPrevSearchResults > 0) {
           didRequestSearch = true;
@@ -265,7 +294,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
           const [
             addedElementIDs,
             removedElementIDs,
-          ] = ((payload: any): Array<Uint32Array>);
+          ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;
 
           removedElementIDs.forEach(id => {
             // Prune this item from the search results.
@@ -327,7 +356,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
       case 'SET_SEARCH_TEXT':
         searchIndex = null;
         searchResults = [];
-        searchText = ((payload: any): string);
+        searchText = (action: ACTION_SET_SEARCH_TEXT).payload;
 
         if (searchText !== '') {
           const regExp = createRegExp(searchText);
@@ -385,24 +414,22 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 }
 
 function reduceOwnersState(store: Store, state: State, action: Action): State {
-  const { payload, type } = action;
-
   let {
     baseDepth,
     numElements,
     selectedElementID,
     selectedElementIndex,
+    ownerFlatTree,
     ownerStack,
     ownerStackIndex,
     searchIndex,
     searchResults,
     searchText,
-    _ownerFlatTree,
   } = state;
 
   let prevSelectedElementIndex = selectedElementIndex;
 
-  switch (type) {
+  switch (action.type) {
     case 'HANDLE_STORE_MUTATION':
       if (ownerStack.length > 0) {
         let indexOfRemovedItem = -1;
@@ -416,15 +443,15 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         if (indexOfRemovedItem >= 0) {
           ownerStack = ownerStack.slice(0, indexOfRemovedItem);
           if (ownerStack.length === 0) {
-            _ownerFlatTree = null;
+            ownerFlatTree = null;
             ownerStackIndex = null;
           } else {
             ownerStackIndex = ownerStack.length - 1;
           }
         }
-        if (selectedElementID !== null && _ownerFlatTree !== null) {
+        if (selectedElementID !== null && ownerFlatTree !== null) {
           // Mutation might have caused the index of this ID to shift.
-          selectedElementIndex = _ownerFlatTree.indexOf(selectedElementID);
+          selectedElementIndex = ownerFlatTree.indexOf(selectedElementID);
         }
       } else {
         if (selectedElementID !== null) {
@@ -445,30 +472,31 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         selectedElementID !== null
           ? store.getIndexOfElementID(selectedElementID)
           : null;
-      _ownerFlatTree = null;
+      ownerFlatTree = null;
       break;
     case 'SELECT_ELEMENT_AT_INDEX':
-      if (_ownerFlatTree !== null) {
-        selectedElementIndex = ((payload: any): number | null);
+      if (ownerFlatTree !== null) {
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
       }
       break;
     case 'SELECT_ELEMENT_BY_ID':
-      if (_ownerFlatTree !== null) {
+      if (ownerFlatTree !== null) {
+        const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
         selectedElementIndex =
-          payload === null ? null : _ownerFlatTree.indexOf(payload);
+          payload === null ? null : ownerFlatTree.indexOf(payload);
       }
       break;
     case 'SELECT_NEXT_ELEMENT_IN_TREE':
-      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
         if (selectedElementIndex === null) {
           selectedElementIndex = 0;
-        } else if (selectedElementIndex + 1 < _ownerFlatTree.length) {
+        } else if (selectedElementIndex + 1 < ownerFlatTree.length) {
           selectedElementIndex++;
         }
       }
       break;
     case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
-      if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
         if (selectedElementIndex !== null && selectedElementIndex > 0) {
           selectedElementIndex--;
         }
@@ -478,7 +506,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       // If the Store doesn't have any owners metadata, don't drill into an empty stack.
       // This is a confusing user experience.
       if (store.hasOwnerMetadata) {
-        ownerStackIndex = ownerStack.indexOf(payload);
+        const id = (action: ACTION_SELECT_OWNER).payload;
+        ownerStackIndex = ownerStack.indexOf(id);
 
         // Always force reset selection to be the top of the new owner tree.
         selectedElementIndex = 0;
@@ -489,7 +518,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         if (ownerStackIndex < 0) {
           // Add this new owner, and fill in the owners above it as well.
           ownerStack = [];
-          let currentOwnerID = ((payload: any): number);
+          let currentOwnerID = id;
           while (currentOwnerID !== 0) {
             ownerStack.unshift(currentOwnerID);
             currentOwnerID = ((store.getElementByID(
@@ -515,23 +544,23 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   if (
     ownerStackIndex !== state.ownerStackIndex ||
     ownerStack !== state.ownerStack ||
-    type === 'HANDLE_STORE_MUTATION'
+    action.type === 'HANDLE_STORE_MUTATION'
   ) {
     if (ownerStackIndex === null) {
-      _ownerFlatTree = null;
+      ownerFlatTree = null;
       baseDepth = 0;
       numElements = store.numElements;
     } else {
-      _ownerFlatTree = calculateCurrentOwnerList(
+      ownerFlatTree = calculateCurrentOwnerList(
         store,
         ownerStack[ownerStackIndex],
         ownerStack[ownerStackIndex],
         []
       );
 
-      baseDepth = ((store.getElementByID(_ownerFlatTree[0]): any): Element)
+      baseDepth = ((store.getElementByID(ownerFlatTree[0]): any): Element)
         .depth;
-      numElements = _ownerFlatTree.length;
+      numElements = ownerFlatTree.length;
     }
   }
 
@@ -539,8 +568,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   if (selectedElementIndex !== prevSelectedElementIndex) {
     if (selectedElementIndex === null) {
       selectedElementID = null;
-    } else if (_ownerFlatTree !== null) {
-      selectedElementID = _ownerFlatTree[((selectedElementIndex: any): number)];
+    } else if (ownerFlatTree !== null) {
+      selectedElementID = ownerFlatTree[((selectedElementIndex: any): number)];
     }
   }
 
@@ -558,17 +587,14 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 
     ownerStack,
     ownerStackIndex,
-    _ownerFlatTree,
+    ownerFlatTree,
   };
 }
 
-type Props = {|
-  children: React$Node,
-  viewElementSource: Function | null,
-|};
+type Props = {| children: React$Node |};
 
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
-function TreeContextController({ children, viewElementSource }: Props) {
+function TreeContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -633,114 +659,9 @@ function TreeContextController({ children, viewElementSource }: Props) {
     // Owners
     ownerStack: [],
     ownerStackIndex: null,
-    _ownerFlatTree: null,
+    ownerFlatTree: null,
   });
 
-  const getElementAtIndex = useCallback(
-    (index: number) => {
-      return state._ownerFlatTree === null
-        ? store.getElementAtIndex(index)
-        : store.getElementByID(state._ownerFlatTree[index]);
-    },
-    [state, store]
-  );
-  const selectElementAtIndex = useCallback(
-    (index: number) =>
-      dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),
-    [dispatch]
-  );
-  const selectElementByID = useCallback(
-    (id: number | null) =>
-      dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),
-    [dispatch]
-  );
-  const setSearchText = useCallback(
-    (text: string) => dispatch({ type: 'SET_SEARCH_TEXT', payload: text }),
-    [dispatch]
-  );
-  const goToNextSearchResult = useCallback(
-    () => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),
-    [dispatch]
-  );
-  const goToPreviousSearchResult = useCallback(
-    () => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),
-    [dispatch]
-  );
-  const resetOwnerStack = useCallback(
-    () => dispatch({ type: 'RESET_OWNER_STACK' }),
-    [dispatch]
-  );
-  const selectChildElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const selectNextElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const selectParentElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const selectPreviousElementInTree = useCallback(
-    () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),
-    [dispatch]
-  );
-  const selectOwner = useCallback(
-    (id: number) => dispatch({ type: 'SELECT_OWNER', payload: id }),
-    [dispatch]
-  );
-
-  const value = useMemo(
-    () => ({
-      // Tree (derived from Store or owners state)
-      baseDepth: state.baseDepth,
-      numElements: state.numElements,
-      selectedElementID: state.selectedElementID,
-      selectedElementIndex: state.selectedElementIndex,
-      getElementAtIndex,
-      selectChildElementInTree,
-      selectElementByID,
-      selectElementAtIndex,
-      selectNextElementInTree,
-      selectParentElementInTree,
-      selectPreviousElementInTree,
-
-      // Search
-      searchIndex: state.searchIndex,
-      searchResults: state.searchResults,
-      searchText: state.searchText,
-      setSearchText,
-      goToNextSearchResult,
-      goToPreviousSearchResult,
-
-      // Owners
-      ownerStack: state.ownerStack,
-      ownerStackIndex: state.ownerStackIndex,
-      resetOwnerStack,
-      selectOwner,
-
-      // Injected by parent HTML/JavaScript
-      viewElementSource,
-    }),
-    [
-      getElementAtIndex,
-      goToNextSearchResult,
-      goToPreviousSearchResult,
-      resetOwnerStack,
-      selectChildElementInTree,
-      selectElementAtIndex,
-      selectElementByID,
-      selectNextElementInTree,
-      selectParentElementInTree,
-      selectOwner,
-      selectPreviousElementInTree,
-      setSearchText,
-      state,
-      viewElementSource,
-    ]
-  );
-
   // Listen for host element selections.
   useEffect(() => {
     const handleSelectFiber = (id: number) =>
@@ -793,7 +714,13 @@ function TreeContextController({ children, viewElementSource }: Props) {
     return () => store.removeListener('mutated', handleStoreMutated);
   }, [dispatch, initialRevision, store]);
 
-  return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;
+  return (
+    <TreeStateContext.Provider value={state}>
+      <TreeDispatcherContext.Provider value={dispatch}>
+        {children}
+      </TreeDispatcherContext.Provider>
+    </TreeStateContext.Provider>
+  );
 }
 
 function calculateCurrentOwnerList(
@@ -842,4 +769,4 @@ function recursivelySearchTree(
   );
 }
 
-export { TreeContext, TreeContextController };
+export { TreeDispatcherContext, TreeStateContext, TreeContextController };
diff --git a/src/devtools/views/Components/ViewElementSourceContext.js b/src/devtools/views/Components/ViewElementSourceContext.js
new file mode 100644
index 000000000000..0ce3191cff0a
--- /dev/null
+++ b/src/devtools/views/Components/ViewElementSourceContext.js
@@ -0,0 +1,8 @@
+// @flow
+
+import { createContext } from 'react';
+
+const ViewElementSourceContext = createContext<Function | null>(null);
+ViewElementSourceContext.displayName = 'ViewElementSourceContext';
+
+export default ViewElementSourceContext;
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 8509b5b24465..8e4ceca3c02b 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -14,6 +14,7 @@ import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Components/TreeContext';
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import ReactLogo from './ReactLogo';
 
@@ -121,47 +122,55 @@ export default function DevTools({
           profilerPortalContainer={profilerPortalContainer}
           settingsPortalContainer={settingsPortalContainer}
         >
-          <TreeContextController viewElementSource={viewElementSource}>
-            <ProfilerContextController>
-              <div className={styles.DevTools}>
-                {showTabBar && (
-                  <div className={styles.TabBar}>
-                    <ReactLogo />
-                    <span className={styles.DevToolsVersion}>
-                      {process.env.DEVTOOLS_VERSION}
-                    </span>
-                    <div className={styles.Spacer} />
-                    <TabBar
-                      currentTab={tab}
-                      id="DevTools"
-                      selectTab={setTab}
-                      size="large"
-                      tabs={
-                        supportsProfiling
-                          ? tabsWithProfiler
-                          : tabsWithoutProfiler
-                      }
+          <ViewElementSourceContext.Provider value={viewElementSource}>
+            <TreeContextController>
+              <ProfilerContextController>
+                <div className={styles.DevTools}>
+                  {showTabBar && (
+                    <div className={styles.TabBar}>
+                      <ReactLogo />
+                      <span className={styles.DevToolsVersion}>
+                        {process.env.DEVTOOLS_VERSION}
+                      </span>
+                      <div className={styles.Spacer} />
+                      <TabBar
+                        currentTab={tab}
+                        id="DevTools"
+                        selectTab={setTab}
+                        size="large"
+                        tabs={
+                          supportsProfiling
+                            ? tabsWithProfiler
+                            : tabsWithoutProfiler
+                        }
+                      />
+                    </div>
+                  )}
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'components'}
+                  >
+                    <Components portalContainer={componentsPortalContainer} />
+                  </div>
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'profiler'}
+                  >
+                    <Profiler
+                      portalContainer={profilerPortalContainer}
+                      supportsProfiling={supportsProfiling}
                     />
                   </div>
-                )}
-                <div
-                  className={styles.TabContent}
-                  hidden={tab !== 'components'}
-                >
-                  <Components portalContainer={componentsPortalContainer} />
-                </div>
-                <div className={styles.TabContent} hidden={tab !== 'profiler'}>
-                  <Profiler
-                    portalContainer={profilerPortalContainer}
-                    supportsProfiling={supportsProfiling}
-                  />
-                </div>
-                <div className={styles.TabContent} hidden={tab !== 'settings'}>
-                  <Settings portalContainer={settingsPortalContainer} />
+                  <div
+                    className={styles.TabContent}
+                    hidden={tab !== 'settings'}
+                  >
+                    <Settings portalContainer={settingsPortalContainer} />
+                  </div>
                 </div>
-              </div>
-            </ProfilerContextController>
-          </TreeContextController>
+              </ProfilerContextController>
+            </TreeContextController>
+          </ViewElementSourceContext.Provider>
         </SettingsContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c8a89c0d9e56..2a9aa6c8fbfe 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -9,7 +9,10 @@ import React, {
 } from 'react';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { useLocalStorage, useSubscription } from '../hooks';
-import { TreeContext } from '../Components/TreeContext';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
 import { StoreContext } from '../context';
 import Store from '../../store';
 
@@ -79,7 +82,8 @@ type Props = {|
 
 function ProfilerContextController({ children }: Props) {
   const store = useContext(StoreContext);
-  const { selectElementByID, selectedElementID } = useContext(TreeContext);
+  const { selectedElementID } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
 
   const subscription = useMemo(
     () => ({
@@ -155,11 +159,14 @@ function ProfilerContextController({ children }: Props) {
         // If this element is still in the store, then select it in the Components tab as well.
         const element = store.getElementByID(id);
         if (element !== null) {
-          selectElementByID(id);
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: id,
+          });
         }
       }
     },
-    [selectElementByID, selectFiberID, selectFiberName, store]
+    [dispatch, selectFiberID, selectFiberName, store]
   );
 
   if (isProfiling) {

From e31ae91023cd6fc4d3c63b2c9afd5d5aca790cd5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 13:10:47 -0700
Subject: [PATCH 463/814] Removed duplicate scheduler module

---
 package.json |  6 +++---
 yarn.lock    | 14 +++-----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 867eded41ecb..01afa822cbc9 100644
--- a/package.json
+++ b/package.json
@@ -128,14 +128,14 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "0.0.0-4221565e1",
+    "react": "^0.0.0-4221565e1",
     "react-color": "^2.11.7",
-    "react-dom": "0.0.0-4221565e1",
+    "react-dom": "^0.0.0-4221565e1",
     "react-is": "0.0.0-4221565e1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
-    "scheduler": "^0.14.0-alpha.0",
+    "scheduler": "^0.0.0-4221565e1",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 873b29a77e6e..a7ba56e74353 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9204,7 +9204,7 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@0.0.0-4221565e1:
+react-dom@^0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"
   integrity sha512-uoBFBMDt5OOAZQNWl72hqCuvVxE1YpAILqIHSwv2ktiLcHPmyByftiuFdqrjXVCJe3LR9sAQWrB8xWgC2bCi+w==
@@ -9247,7 +9247,7 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@0.0.0-4221565e1:
+react@^0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-4221565e1.tgz#bc7f3e67f2c2c53693cda2e89e6fa71bfc89ebcd"
   integrity sha512-iVAljelOxza6S9QcFMkxJCcj2Y+QDiv6XwGz9A8c5jtKejGOEKK/Xumg7uTDmGwy8vjGVDI7qGDW8Rta80xH9g==
@@ -9906,7 +9906,7 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-4221565e1:
+scheduler@0.0.0-4221565e1, scheduler@^0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-4221565e1.tgz#70c99271bd7bc4fbf4e7c69f31c003c4c61cd285"
   integrity sha512-RhQ6QhkRJDXAcs6woR6p9UYDyjRguRsYXpWDFbCft45lWs4sSfszxPRr5TJVVLjIwPu0Wy0Mkd75smQ8TMponA==
@@ -9914,14 +9914,6 @@ scheduler@0.0.0-4221565e1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.14.0-alpha.0:
-  version "0.14.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.14.0-alpha.0.tgz#6d301d8fd10373487e0e47e837ad24e863ce807d"
-  integrity sha512-qlVVnhIJqLu9E09ZYYJHG4nYwrS4TG2zfODfS/Mk3oSGjeJlrBZTFSU3yfMdu5lIrYzWmHHWFgERPsKbildS6Q==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

From 2d8c28733d3e62ac3c02aab06d5d87d84b70d2ca Mon Sep 17 00:00:00 2001
From: Wellington Cordeiro <wellingtoncordeiro@workfront.com>
Date: Mon, 22 Apr 2019 15:10:22 -0600
Subject: [PATCH 464/814] fix: correct permissions for Firefox

remove the `background` permissions as it's not used by Firefox, but `activeTab` is and we needed
it.

fix #136
---
 shells/browser/firefox/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index d69d4179a1d4..3ef00fba01e4 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -46,8 +46,8 @@
 
   "permissions": [
     "<all_urls>",
-    "background",
     "downloads",
+    "activeTab",
     "tabs",
     "file:///*",
     "http://*/*",

From 64bc49d523c05e9fb23bd7b90c0969c0fb72edd2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 15:11:04 -0700
Subject: [PATCH 465/814] Run first setState with explicit priority in case of
 non-React event handlers

---
 src/devtools/views/Components/TreeContext.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 1c4f4f9daecf..21b16e89a042 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -27,7 +27,11 @@ import React, {
   useReducer,
   useRef,
 } from 'react';
-import { unstable_next as next } from 'scheduler';
+import {
+  unstable_next as next,
+  unstable_runWithPriority as runWithPriority,
+  unstable_UserBlockingPriority as UserBlockingPriority,
+} from 'scheduler';
 import { createRegExp } from '../utils';
 import { BridgeContext, StoreContext } from '../context';
 import Store from '../../store';
@@ -699,7 +703,10 @@ function TreeContextController({ children }: Props) {
 
   const dispatchWrapper = useCallback(
     (action: Action) => {
-      dispatch(action);
+      // Run the first update at "user-blocking" priority in case dispatch is called from a non-React event.
+      // In this case, the current (and "next") priorities would both be "normal",
+      // and suspense would potentially block both updates.
+      runWithPriority(UserBlockingPriority, () => dispatch(action));
       next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));
     },
     [dispatch]

From 64bb2d31f91ea8234db6c6161c8256ade21180b9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 15:18:32 -0700
Subject: [PATCH 466/814] Fixed bug with cache invalidation

---
 src/devtools/ProfilingCache.js                |  9 ++--
 src/devtools/cache.js                         | 31 +++++++++--
 .../Components/InspectedElementContext.js     | 51 ++++++++-----------
 3 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 7dd8b3d9463e..d313111e675f 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { createResource, invalidateResources } from './cache';
+import { createResource } from './cache';
 import Store from './store';
 import {
   getCommitTree,
@@ -297,8 +297,11 @@ export default class ProfilingCache {
     });
 
   invalidate() {
-    // Invalidate Susepnse caches.
-    invalidateResources();
+    // Invalidate Suspense caches.
+    this.CommitDetails.clear();
+    this.FiberCommits.clear();
+    this.Interactions.clear();
+    this.ProfilingSummary.clear();
 
     // Invalidate non-Suspense caches too.
     invalidateCommitTrees();
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index ee3835fec391..bf509ce8f3f1 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -39,6 +39,7 @@ type RejectedResult = {|
 type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;
 
 export type Resource<Input, Key, Value> = {
+  clear(): void,
   invalidate(Key): void,
   read(Input): Value,
   preload(Input): void,
@@ -66,7 +67,23 @@ function readContext(Context, observedBits) {
 
 const CacheContext = createContext(null);
 
+type Config = {
+  useLRU?: boolean,
+};
+
 const entries: Map<Resource<any, any, any>, Map<any, any>> = new Map();
+const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
+
+function getEntriesForResource(resource: any): Map<any, any> {
+  let entriesForResource = ((entries.get(resource): any): Map<any, any>);
+  if (entriesForResource === undefined) {
+    const config = resourceConfigs.get(resource);
+    entriesForResource =
+      config !== undefined && config.useLRU ? new LRU({ max: 10 }) : new Map();
+    entries.set(resource, entriesForResource);
+  }
+  return entriesForResource;
+}
 
 function accessResult<Input, Key, Value>(
   resource: any,
@@ -74,7 +91,7 @@ function accessResult<Input, Key, Value>(
   input: Input,
   key: Key
 ): Result<Value> {
-  const entriesForResource = ((entries.get(resource): any): Map<any, any>);
+  const entriesForResource = getEntriesForResource(resource);
   const entry = entriesForResource.get(key);
   if (entry === undefined) {
     const thenable = fetch(input);
@@ -108,11 +125,15 @@ function accessResult<Input, Key, Value>(
 export function createResource<Input, Key: string | number, Value>(
   fetch: Input => Thenable<Value>,
   hashInput: Input => Key,
-  useLRU?: boolean = false
+  config?: Config = {}
 ): Resource<Input, Key, Value> {
   const resource = {
+    clear(): void {
+      entries.delete(resource);
+    },
+
     invalidate(key: Key): void {
-      const entriesForResource = ((entries.get(resource): any): Map<any, any>);
+      const entriesForResource = getEntriesForResource(resource);
       if (entriesForResource instanceof Map) {
         entriesForResource.delete(key);
       } else {
@@ -156,7 +177,7 @@ export function createResource<Input, Key: string | number, Value>(
     },
 
     write(key: Key, value: Value): void {
-      const entriesForResource = ((entries.get(resource): any): Map<any, any>);
+      const entriesForResource = getEntriesForResource(resource);
 
       const resolvedResult: ResolvedResult<Value> = {
         status: Resolved,
@@ -167,7 +188,7 @@ export function createResource<Input, Key: string | number, Value>(
     },
   };
 
-  entries.set(resource, useLRU ? new LRU({ max: 10 }) : new Map());
+  resourceConfigs.set(resource, config);
 
   return resource;
 }
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index fbbc572f7bec..99263e4c1839 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -31,6 +31,27 @@ type InProgressRequest = {|
   resolveFn: ResolveFn,
 |};
 
+const inProgressRequests: Map<number, InProgressRequest> = new Map();
+const resource: Resource<number, number, InspectedElement> = createResource(
+  (id: number) => {
+    let request = inProgressRequests.get(id);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(id, { promise, resolveFn });
+
+    return promise;
+  },
+  (id: number) => id,
+  { useLRU: true }
+);
+
 type Props = {|
   children: React$Node,
 |};
@@ -42,34 +63,6 @@ function InspectedElementContextController({ children }: Props) {
 
   const [count, setCount] = useState<number>(0);
 
-  const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
-    () => new Map(),
-    []
-  );
-
-  const resource = useMemo<Resource<number, number, InspectedElement>>(
-    () =>
-      createResource(
-        (id: number) => {
-          let request = inProgressRequests.get(id);
-          if (request != null) {
-            return request.promise;
-          }
-
-          let resolveFn = ((null: any): ResolveFn);
-          const promise = new Promise(resolve => {
-            resolveFn = resolve;
-          });
-
-          inProgressRequests.set(id, { promise, resolveFn });
-
-          return promise;
-        },
-        (id: number) => id
-      ),
-    [inProgressRequests]
-  );
-
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onInspectedElement = (
@@ -103,7 +96,7 @@ function InspectedElementContextController({ children }: Props) {
 
     bridge.addListener('inspectedElement', onInspectedElement);
     return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, inProgressRequests, inspectedElementID, resource]);
+  }, [bridge, inspectedElementID]);
 
   // This effect handler polls for updates on the currently selected element.
   useEffect(() => {

From 00872e2e510daa4094fd24d7081528bf017474d0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 15:25:55 -0700
Subject: [PATCH 467/814] Fixed suspense fallback issue by moving inspection
 message side effect before suspending render

---
 .../Components/InspectedElementContext.js     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 99263e4c1839..ec6619fa0a6a 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -59,7 +59,11 @@ type Props = {|
 function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const { inspectedElementID } = useContext(TreeStateContext);
+
+  // It's very important that this context consumes selectedElementID and not inspectedElementID.
+  // Otherwise the effect that sends the "inspect" message across the bridge-
+  // would itself be blocked by the same render that suspends (waiting for the data).
+  const { selectedElementID } = useContext(TreeStateContext);
 
   const [count, setCount] = useState<number>(0);
 
@@ -87,7 +91,7 @@ function InspectedElementContextController({ children }: Props) {
           resource.write(id, inspectedElement);
 
           // Schedule update with React if the curently-selected element has been invalidated.
-          if (id === inspectedElementID) {
+          if (id === selectedElementID) {
             setCount(count => count + 1);
           }
         }
@@ -96,22 +100,22 @@ function InspectedElementContextController({ children }: Props) {
 
     bridge.addListener('inspectedElement', onInspectedElement);
     return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, inspectedElementID]);
+  }, [bridge, selectedElementID]);
 
   // This effect handler polls for updates on the currently selected element.
   useEffect(() => {
-    if (inspectedElementID === null) {
+    if (selectedElementID === null) {
       return () => {};
     }
 
-    const rendererID = store.getRendererIDForElement(inspectedElementID);
+    const rendererID = store.getRendererIDForElement(selectedElementID);
 
     let timeoutID: TimeoutID | null = null;
 
     const sendRequest = () => {
       timeoutID = null;
 
-      bridge.send('inspectElement', { id: inspectedElementID, rendererID });
+      bridge.send('inspectElement', { id: selectedElementID, rendererID });
     };
 
     // Send the initial inspection request.
@@ -121,7 +125,7 @@ function InspectedElementContextController({ children }: Props) {
     const onInspectedElement = (inspectedElement: InspectedElement | null) => {
       if (
         inspectedElement !== null &&
-        inspectedElement.id === inspectedElementID
+        inspectedElement.id === selectedElementID
       ) {
         // If this is the element we requested, wait a little bit and then ask for an update.
         timeoutID = setTimeout(sendRequest, 1000);
@@ -137,7 +141,7 @@ function InspectedElementContextController({ children }: Props) {
         clearTimeout(timeoutID);
       }
     };
-  }, [bridge, inspectedElementID, store]);
+  }, [bridge, selectedElementID, store]);
 
   const value = useMemo(
     () => ({
@@ -145,7 +149,7 @@ function InspectedElementContextController({ children }: Props) {
     }),
     // Count is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [count, resource.read]
+    [count]
   );
 
   return (

From 7f1531044b9f40e88b949dbe72e40e484c931465 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 15:37:55 -0700
Subject: [PATCH 468/814] Differentiate between no-change and no-element-found
 when inspecting element

---
 src/backend/renderer.js                       | 26 +++++----
 src/backend/types.js                          |  4 +-
 .../Components/InspectedElementContext.js     | 56 ++++++++++---------
 src/devtools/views/Components/types.js        |  5 ++
 4 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f700bbf8bef3..2c353d4acede 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -40,7 +40,10 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type {
+  InspectedElement,
+  InspectedElementResponse,
+} from 'src/devtools/views/Components/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -1649,27 +1652,30 @@ export function attach(
   let inspectedElementID: number | null = null;
   let hasInspectedElementChanged: boolean = false;
 
-  function inspectElement(id: number): InspectedElement | null {
+  function inspectElement(id: number): InspectedElementResponse | null {
     if (inspectedElementID === id && !hasInspectedElementChanged) {
       // Optimization: Don't resend (and reserialize) unchanged props.
-      return null;
+      return {
+        id,
+        inspectedElement: null,
+      };
     }
 
     inspectedElementID = id;
     hasInspectedElementChanged = false;
 
-    let result = inspectElementRaw(id);
-    if (result === null) {
+    let inspectedElement = inspectElementRaw(id);
+    if (inspectedElement === null) {
       return null;
     }
 
     // TODO Review sanitization approach for the below inspectable values.
-    result.context = cleanForBridge(result.context);
-    result.hooks = cleanForBridge(result.hooks);
-    result.props = cleanForBridge(result.props);
-    result.state = cleanForBridge(result.state);
+    inspectedElement.context = cleanForBridge(inspectedElement.context);
+    inspectedElement.hooks = cleanForBridge(inspectedElement.hooks);
+    inspectedElement.props = cleanForBridge(inspectedElement.props);
+    inspectedElement.state = cleanForBridge(inspectedElement.state);
 
-    return result;
+    return { id, inspectedElement };
   }
 
   function logElementToConsole(id) {
diff --git a/src/backend/types.js b/src/backend/types.js
index bd4562eef793..93b283cd21b8 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,7 +1,7 @@
 // @flow
 
 import type { ElementType } from 'src/devtools/types';
-import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type { InspectedElementResponse } from 'src/devtools/views/Components/types';
 
 type BundleType =
   | 0 // PROD
@@ -105,7 +105,7 @@ export type RendererInterface = {
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
-  inspectElement: (id: number) => InspectedElement | null,
+  inspectElement: (id: number) => InspectedElementResponse | null,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index ec6619fa0a6a..0ef21d598b94 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -15,6 +15,7 @@ import { TreeStateContext } from './TreeContext';
 import type {
   DehydratedData,
   InspectedElement,
+  InspectedElementResponse,
 } from 'src/devtools/views/Components/types';
 import type { Resource } from '../../cache';
 
@@ -70,29 +71,32 @@ function InspectedElementContextController({ children }: Props) {
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onInspectedElement = (
-      inspectedElementRaw: InspectedElement | null
+      inspectedElementResponse: InspectedElementResponse | null
     ) => {
-      if (inspectedElementRaw != null) {
-        const id = inspectedElementRaw.id;
-
-        const inspectedElement = (({
-          ...inspectedElementRaw,
-          context: hydrateHelper(inspectedElementRaw.context),
-          hooks: hydrateHelper(inspectedElementRaw.hooks),
-          props: hydrateHelper(inspectedElementRaw.props),
-          state: hydrateHelper(inspectedElementRaw.state),
-        }: any): InspectedElement);
-
-        const request = inProgressRequests.get(id);
-        if (request != null) {
-          inProgressRequests.delete(id);
-          request.resolveFn(inspectedElement);
-        } else {
-          resource.write(id, inspectedElement);
-
-          // Schedule update with React if the curently-selected element has been invalidated.
-          if (id === selectedElementID) {
-            setCount(count => count + 1);
+      if (inspectedElementResponse != null) {
+        let { inspectedElement } = inspectedElementResponse;
+        if (inspectedElement !== null) {
+          const id = inspectedElement.id;
+
+          inspectedElement = (({
+            ...inspectedElement,
+            context: hydrateHelper(inspectedElement.context),
+            hooks: hydrateHelper(inspectedElement.hooks),
+            props: hydrateHelper(inspectedElement.props),
+            state: hydrateHelper(inspectedElement.state),
+          }: any): InspectedElement);
+
+          const request = inProgressRequests.get(id);
+          if (request != null) {
+            inProgressRequests.delete(id);
+            request.resolveFn(inspectedElement);
+          } else {
+            resource.write(id, inspectedElement);
+
+            // Schedule update with React if the curently-selected element has been invalidated.
+            if (id === selectedElementID) {
+              setCount(count => count + 1);
+            }
           }
         }
       }
@@ -122,10 +126,12 @@ function InspectedElementContextController({ children }: Props) {
     // We'll poll for an update in the response handler below.
     sendRequest();
 
-    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+    const onInspectedElement = (
+      inspectedElementResponse: InspectedElementResponse | null
+    ) => {
       if (
-        inspectedElement !== null &&
-        inspectedElement.id === selectedElementID
+        inspectedElementResponse !== null &&
+        inspectedElementResponse.id === selectedElementID
       ) {
         // If this is the element we requested, wait a little bit and then ask for an update.
         timeoutID = setTimeout(sendRequest, 1000);
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index ca3c7e3df078..9953834f6b34 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -65,6 +65,11 @@ export type InspectedElement = {|
   source: Object | null,
 |};
 
+export type InspectedElementResponse = {|
+  id: number,
+  inspectedElement: InspectedElement | null,
+|};
+
 // TODO: Add profiling type
 
 export type DehydratedData = {|

From ec7536704d1f789b4cb9d4f885fd915a560d8791 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 19:32:16 -0700
Subject: [PATCH 469/814] Locked down canary versions

---
 package.json | 6 +++---
 yarn.lock    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 01afa822cbc9..96dc68449e37 100644
--- a/package.json
+++ b/package.json
@@ -128,14 +128,14 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^0.0.0-4221565e1",
+    "react": "0.0.0-4221565e1",
     "react-color": "^2.11.7",
-    "react-dom": "^0.0.0-4221565e1",
+    "react-dom": "0.0.0-4221565e1",
     "react-is": "0.0.0-4221565e1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
-    "scheduler": "^0.0.0-4221565e1",
+    "scheduler": "0.0.0-4221565e1",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index a7ba56e74353..5b81a1d8318a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9204,7 +9204,7 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^0.0.0-4221565e1:
+react-dom@0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"
   integrity sha512-uoBFBMDt5OOAZQNWl72hqCuvVxE1YpAILqIHSwv2ktiLcHPmyByftiuFdqrjXVCJe3LR9sAQWrB8xWgC2bCi+w==
@@ -9247,7 +9247,7 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^0.0.0-4221565e1:
+react0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-4221565e1.tgz#bc7f3e67f2c2c53693cda2e89e6fa71bfc89ebcd"
   integrity sha512-iVAljelOxza6S9QcFMkxJCcj2Y+QDiv6XwGz9A8c5jtKejGOEKK/Xumg7uTDmGwy8vjGVDI7qGDW8Rta80xH9g==
@@ -9906,7 +9906,7 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-4221565e1, scheduler@^0.0.0-4221565e1:
+scheduler@0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-4221565e1.tgz#70c99271bd7bc4fbf4e7c69f31c003c4c61cd285"
   integrity sha512-RhQ6QhkRJDXAcs6woR6p9UYDyjRguRsYXpWDFbCft45lWs4sSfszxPRr5TJVVLjIwPu0Wy0Mkd75smQ8TMponA==

From 8b33dd673d965d23d2516bd30c9c3d05386ce881 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 08:41:52 -0700
Subject: [PATCH 470/814] Added @reach/tooltip

---
 package.json                                 |   2 +-
 src/devtools/views/Button.js                 |   8 +-
 src/devtools/views/Components/OwnersStack.js |  12 +-
 src/devtools/views/DevTools.js               |   2 +-
 src/devtools/views/Toggle.js                 |   7 +-
 src/devtools/views/Tooltip.css               |   1 -
 vendor/@reach/tooltip/es/index.js            | 482 ++++++++++++++++++
 vendor/@reach/tooltip/index.js               | 502 +++++++++++++++++++
 vendor/@reach/tooltip/package.json           |  36 ++
 vendor/@reach/tooltip/src/.index.js.swp      | Bin 0 -> 32768 bytes
 vendor/@reach/tooltip/src/index.js           | 490 ++++++++++++++++++
 vendor/@reach/tooltip/styles.css             |  11 +
 yarn.lock                                    |   6 +-
 13 files changed, 1536 insertions(+), 23 deletions(-)
 create mode 100644 vendor/@reach/tooltip/es/index.js
 create mode 100644 vendor/@reach/tooltip/index.js
 create mode 100644 vendor/@reach/tooltip/package.json
 create mode 100644 vendor/@reach/tooltip/src/.index.js.swp
 create mode 100644 vendor/@reach/tooltip/src/index.js
 create mode 100644 vendor/@reach/tooltip/styles.css

diff --git a/package.json b/package.json
index 867eded41ecb..44549789ea8b 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@reach/menu-button": "^0.1.12",
-    "@reach/tooltip": "^0.1.1",
+    "@reach/tooltip": "file:./vendor/@reach/tooltip",
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index 79a857429a4b..78a9c8201f80 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
-// TODO (tooltips) import Tooltip from '@reach/tooltip';
+import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-// TODO (tooltips) import tooltipStyles from './Tooltip.css';
+import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -19,14 +19,13 @@ export default function Button({
   ...rest
 }: Props) {
   let button = (
-    <button className={`${styles.Button} ${className}`} title={title} {...rest}>
+    <button className={`${styles.Button} ${className}`} {...rest}>
       <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
         {children}
       </span>
     </button>
   );
 
-  /* TODO (tooltips)
   if (title) {
     button = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -34,7 +33,6 @@ export default function Button({
       </Tooltip>
     );
   }
-  */
 
   return button;
 }
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index b2f0c3299dbd..3e98b2e59442 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-// TODO (tooltips) import Tooltip from '@reach/tooltip';
+import Tooltip from '@reach/tooltip';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -94,13 +94,13 @@ function ElementsDropdown({
 
   return (
     <Menu>
-      {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
       <MenuButton className={styles.MenuButton}>
-        <span className={styles.MenuButtonContent} tabIndex={-1}>
-          <ButtonIcon type="more" />
-        </span>
+        <Tooltip label="Open elements dropdown">
+          <span className={styles.MenuButtonContent} tabIndex={-1}>
+            <ButtonIcon type="more" />
+          </span>
+        </Tooltip>
       </MenuButton>
-      {/* TODO (tooltips) </Tooltip> */}
       <MenuList className={styles.Modal}>
         {ownerStack.map((id, index) => (
           <MenuItem
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 8e4ceca3c02b..53ac73eaa46d 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -3,7 +3,7 @@
 // Reach styles need to come before any component styles.
 // This makes overridding the styles simpler.
 import '@reach/menu-button/styles.css';
-// TODO (tooltips) import '@reach/tooltip/styles.css';
+import '@reach/tooltip/styles.css';
 
 import React, { useEffect, useState } from 'react';
 import Store from '../store';
diff --git a/src/devtools/views/Toggle.js b/src/devtools/views/Toggle.js
index 59baad2e919e..5780c7f28c34 100644
--- a/src/devtools/views/Toggle.js
+++ b/src/devtools/views/Toggle.js
@@ -1,10 +1,10 @@
 // @flow
 
 import React, { useCallback } from 'react';
-// TODO (tooltips) import Tooltip from '@reach/tooltip';
+import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-// TODO (tooltips) import tooltipStyles from './Tooltip.css';
+import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -42,7 +42,6 @@ export default function Toggle({
       className={`${defaultClassName} ${className}`}
       disabled={isDisabled}
       onClick={handleClick}
-      title={title}
     >
       <span className={styles.ToggleContent} tabIndex={-1}>
         {children}
@@ -50,7 +49,6 @@ export default function Toggle({
     </button>
   );
 
-  /* TODO (tooltips)
   if (title) {
     toggle = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -58,7 +56,6 @@ export default function Toggle({
       </Tooltip>
     );
   }
-  */
 
   return toggle;
 }
diff --git a/src/devtools/views/Tooltip.css b/src/devtools/views/Tooltip.css
index 1703e2c76a9b..e8724b385556 100644
--- a/src/devtools/views/Tooltip.css
+++ b/src/devtools/views/Tooltip.css
@@ -8,5 +8,4 @@
 
   /* Make sure this is above the DevTools, which are above the Overlay */
   z-index: 10000002;
-  position: relative;
 }
diff --git a/vendor/@reach/tooltip/es/index.js b/vendor/@reach/tooltip/es/index.js
new file mode 100644
index 000000000000..7dd9a012bc95
--- /dev/null
+++ b/vendor/@reach/tooltip/es/index.js
@@ -0,0 +1,482 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+////////////////////////////////////////////////////////////////////////////////
+// Welcome to @reach/tooltip!
+//
+// Quick definitions:
+//
+// - "on rest" or "rested on": describes when the element receives keyboard
+//   focus or mouse hover after a short delay (and hopefully soon, touch
+//   longpress).
+//
+// - "activation": describes a mouse click, keyboard enter, or keyboard space.
+//
+// Only one tooltip can be visible at a time, so we use a global state chart to
+// describe the various states and transitions between states that are
+// possible.  With the all the timeouts involved with tooltips it's important to
+// "make impossible states impossible" with a state machine.
+//
+// It's also okay to use these module globals because you don't server render
+// tooltips. None of the state is changed outside of user events.
+//
+// There are a few features that are important to understand.
+//
+// 1. Tooltips don't show up until the user has rested on one, we don't
+//    want tooltips popupping up as you move your mouse around the page.
+//
+// 2. Once any tooltip becomes visible, other tooltips nearby should skip
+//    resting and display immediately.
+//
+// 3. Tooltips stick around for a little bit after blur/mouseleave.
+
+/* eslint-disable default-case */
+
+import React, { Fragment, cloneElement, Children, useState, useRef, forwardRef, useEffect } from "react";
+import { useId } from "@reach/auto-id";
+import { wrapEvent } from "@reach/utils";
+import Portal from "@reach/portal";
+import VisuallyHidden from "@reach/visually-hidden";
+import { useRect } from "@reach/rect";
+import { node, string, func } from "prop-types";
+
+////////////////////////////////////////////////////////////////////////////////
+var chart = {
+  initial: "idle",
+  states: {
+    idle: {
+      enter: clearContextId,
+      on: {
+        mouseenter: "focused",
+        focus: "focused"
+      }
+    },
+    focused: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        mousemove: "focused",
+        mouseleave: "idle",
+        mousedown: "dismissed",
+        blur: "idle",
+        rest: "visible"
+      }
+    },
+    visible: {
+      on: {
+        mouseleave: "leavingVisible",
+        blur: "leavingVisible",
+        mousedown: "dismissed",
+        selectWithKeyboard: "dismissed"
+      }
+    },
+    leavingVisible: {
+      enter: startLeavingVisibleTimer,
+      leave: function leave() {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        mouseenter: "visible",
+        focus: "visible",
+        timecomplete: "idle"
+      }
+    },
+    dismissed: {
+      leave: function leave() {
+        // allows us to come on back later w/o entering something else first
+        context.id = null;
+      },
+      on: {
+        mouseleave: "idle",
+        blur: "idle"
+      }
+    }
+  }
+};
+
+// chart context allows us to persist some data around, in Tooltip all we use
+// is the id of the current tooltip being interacted with.
+var context = { id: null };
+var state = chart.initial;
+
+////////////////////////////////////////////////////////////////////////////////
+// Finds the next state from the current state + action. If the chart doesn't
+// describe that transition, it will throw.
+//
+// It also manages lifecycles of the machine, (enter/leave hooks on the state
+// chart)
+function transition(action, newContext) {
+  var stateDef = chart.states[state];
+  var nextState = stateDef.on[action];
+
+  if (!nextState) {
+    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
+  }
+
+  if (stateDef.leave) {
+    stateDef.leave();
+  }
+
+  if (newContext) {
+    context = newContext;
+  }
+
+  var nextDef = chart.states[nextState];
+  if (nextDef.enter) {
+    nextDef.enter();
+  }
+
+  state = nextState;
+  notify();
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Subscriptions:
+//
+// We could require apps to render a <TooltipProvider> around the app and use
+// React context to notify Tooltips of changes to our state machine, instead
+// we manage subscriptions ourselves and simplify the Tooltip API.
+//
+// Maybe if default context could take a hook (instead of just a static value)
+// that was rendered at the root for us, that'd be cool! But it doesn't.
+var subscriptions = [];
+
+function subscribe(fn) {
+  subscriptions.push(fn);
+  return function () {
+    subscriptions.splice(subscriptions.indexOf(fn), 1);
+  };
+}
+
+function notify() {
+  subscriptions.forEach(function (fn) {
+    return fn(state, context);
+  });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Timeouts:
+
+// Manages when the user "rests" on an element. Keeps the interface from being
+// flashing tooltips all the time as the user moves the mouse around the screen.
+var restTimeout = void 0;
+function startRestTimer() {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(function () {
+    return transition("rest");
+  }, 100);
+}
+
+function clearRestTimer() {
+  clearTimeout(restTimeout);
+}
+
+// Manages the delay to hide the tooltip after rest leaves.
+var leavingVisibleTimer = void 0;
+function startLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(function () {
+    return transition("timecomplete");
+  }, 500);
+}
+
+function clearLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Rando helpers
+
+// allows us to come on back later w/o entering something else first after the
+// user leaves or dismisses
+function clearContextId() {
+  context.id = null;
+}
+
+// Avoids focus/mouseEnter from fighting with each other since you can have
+// one element focused and another mouseentered at the same time. The first
+// one sets the context.id and then the second one is ignored (for a single
+// element, most recent focus/mouseenter wins between elements).
+function isActive(id) {
+  return context.id === id;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// THE HOOK!
+export function useTooltip() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseMove = _ref.onMouseMove,
+      onMouseLeave = _ref.onMouseLeave,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      onKeyDown = _ref.onKeyDown,
+      onMouseDown = _ref.onMouseDown,
+      ref = _ref.ref;
+
+  var _useState = useState(state === "visible"),
+      isVisible = _useState[0],
+      setIsVisible = _useState[1];
+
+  // hopefully they always pass a ref if they ever pass one
+
+
+  var triggerRef = ref || useRef();
+  var triggerRect = useRect(triggerRef, isVisible);
+  var id = "tooltip:" + useId();
+
+  useEffect(function () {
+    return subscribe(function () {
+      if (context.id === id && (state === "visible" || state === "leavingVisible")) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    });
+  }, [id]);
+
+  var handleMouseEnter = function handleMouseEnter() {
+    if (isActive(id) &&
+    // enables leaving then entering again before the times up
+    state !== "leavingVisible") {
+      return;
+    }
+
+    switch (state) {
+      case "idle":
+      case "leavingVisible":
+        {
+          transition("mouseenter", { id: id });
+        }
+    }
+  };
+
+  var handleMouseMove = function handleMouseMove() {
+    switch (state) {
+      case "focused":
+        {
+          transition("mousemove", { id: id });
+        }
+    }
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isActive(id)) return;
+    switch (state) {
+      case "idle":
+      case "leavingVisible":
+        {
+          transition("focus", { id: id });
+        }
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed":
+        {
+          transition("mouseleave");
+        }
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed":
+        {
+          transition("blur");
+        }
+    }
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible":
+        {
+          transition("mousedown");
+        }
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      switch (state) {
+        case "visible":
+          {
+            transition("selectWithKeyboard");
+          }
+      }
+    }
+  };
+
+  var trigger = {
+    "aria-labelledby": id,
+    "data-reach-tooltip-trigger": "",
+    ref: triggerRef,
+    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
+    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
+    onFocus: wrapEvent(onFocus, handleFocus),
+    onBlur: wrapEvent(onFocus, handleBlur),
+    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
+  };
+
+  var tooltip = {
+    id: id,
+    triggerRect: triggerRect,
+    isVisible: isVisible
+  };
+
+  return [trigger, tooltip, isVisible];
+}
+
+////////////////////////////////////////////////////////////////////////////////
+export default function Tooltip(_ref2) {
+  var children = _ref2.children,
+      label = _ref2.label,
+      ariaLabel = _ref2.ariaLabel,
+      rest = _objectWithoutProperties(_ref2, ["children", "label", "ariaLabel"]);
+
+  var _useTooltip = useTooltip(),
+      trigger = _useTooltip[0],
+      tooltip = _useTooltip[1];
+
+  return React.createElement(
+    Fragment,
+    null,
+    cloneElement(Children.only(children), trigger),
+    React.createElement(TooltipPopup, _extends({
+      label: label,
+      ariaLabel: ariaLabel
+    }, tooltip, rest))
+  );
+}
+
+process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
+  children: node.isRequired,
+  label: node.isRequired,
+  ariaLabel: string
+} : void 0;
+
+////////////////////////////////////////////////////////////////////////////////
+var TooltipPopup = forwardRef(function TooltipPopup(_ref3, forwardRef) {
+  var label = _ref3.label,
+      ariaLabel = _ref3.ariaLabel,
+      position = _ref3.position,
+      isVisible = _ref3.isVisible,
+      id = _ref3.id,
+      triggerRect = _ref3.triggerRect,
+      rest = _objectWithoutProperties(_ref3, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect"]);
+
+  return isVisible ? React.createElement(
+    Portal,
+    null,
+    React.createElement(TooltipContent, _extends({
+      label: label,
+      ariaLabel: ariaLabel,
+      position: position,
+      isVisible: isVisible,
+      id: id,
+      triggerRect: triggerRect,
+      ref: forwardRef
+    }, rest))
+  ) : null;
+});
+
+export { TooltipPopup };
+process.env.NODE_ENV !== "production" ? TooltipPopup.propTypes = {
+  label: node.isRequired,
+  ariaLabel: string,
+  position: func
+} : void 0;
+
+// Need a separate component so that useRect works inside the portal
+var TooltipContent = forwardRef(function TooltipContent(_ref4, forwardRef) {
+  var label = _ref4.label,
+      ariaLabel = _ref4.ariaLabel,
+      _ref4$position = _ref4.position,
+      position = _ref4$position === undefined ? positionDefault : _ref4$position,
+      isVisible = _ref4.isVisible,
+      id = _ref4.id,
+      triggerRect = _ref4.triggerRect,
+      style = _ref4.style,
+      rest = _objectWithoutProperties(_ref4, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect", "style"]);
+
+  var useAriaLabel = ariaLabel != null;
+  var tooltipRef = useRef();
+  var tooltipRect = useRect(tooltipRef, isVisible);
+  return React.createElement(
+    Fragment,
+    null,
+    React.createElement("div", _extends({
+      "data-reach-tooltip": true,
+      role: useAriaLabel ? undefined : "tooltip",
+      id: useAriaLabel ? undefined : id,
+      children: label,
+      style: _extends({}, style, getStyles(position, triggerRect, tooltipRect)),
+      ref: function ref(node) {
+        tooltipRef.current = node;
+        if (forwardRef) forwardRef(node);
+      }
+    }, rest)),
+    useAriaLabel && React.createElement(
+      VisuallyHidden,
+      { role: "tooltip", id: id },
+      ariaLabel
+    )
+  );
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// TODO: research longpress tooltips on Android, iOS, implement here.
+// - Probably want to position it by default above, since your thumb
+//   is below and would cover it
+// - I'm thinking after longpress, display the tooltip and cancel any
+//   click events. Then on touchend, hide the tooltip after a timer
+//   in case their hand is obstructing it, then can remove and read
+//   the tooltip
+
+// feels awkward when it's perfectly aligned w/ the trigger
+var OFFSET = 8;
+
+var getStyles = function getStyles(position, triggerRect, tooltipRect) {
+  var haventMeasuredTooltipYet = !tooltipRect;
+  if (haventMeasuredTooltipYet) {
+    return { visibility: "hidden" };
+  }
+  return position(triggerRect, tooltipRect);
+};
+
+var positionDefault = function positionDefault(triggerRect, tooltipRect) {
+  var styles = {
+    left: triggerRect.left + window.scrollX + "px",
+    top: triggerRect.top + triggerRect.height + window.scrollY + "px"
+  };
+
+  var collisions = {
+    top: triggerRect.top - tooltipRect.height < 0,
+    right: window.innerWidth < triggerRect.left + tooltipRect.width,
+    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
+    left: triggerRect.left - tooltipRect.width < 0
+  };
+
+  var directionRight = collisions.right && !collisions.left;
+  var directionUp = collisions.bottom && !collisions.top;
+
+  return _extends({}, styles, {
+    left: directionRight ? triggerRect.right + OFFSET / 2 - tooltipRect.width + window.scrollX + "px" : triggerRect.left - OFFSET / 2 + window.scrollX + "px",
+    top: directionUp ? triggerRect.top - OFFSET - tooltipRect.height + window.scrollY + "px" : triggerRect.top + OFFSET + triggerRect.height + window.scrollY + "px"
+  });
+};
\ No newline at end of file
diff --git a/vendor/@reach/tooltip/index.js b/vendor/@reach/tooltip/index.js
new file mode 100644
index 000000000000..57668ecb3973
--- /dev/null
+++ b/vendor/@reach/tooltip/index.js
@@ -0,0 +1,502 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TooltipPopup = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.useTooltip = useTooltip;
+exports.default = Tooltip;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _autoId = require("@reach/auto-id");
+
+var _utils = require("@reach/utils");
+
+var _portal = require("@reach/portal");
+
+var _portal2 = _interopRequireDefault(_portal);
+
+var _visuallyHidden = require("@reach/visually-hidden");
+
+var _visuallyHidden2 = _interopRequireDefault(_visuallyHidden);
+
+var _rect = require("@reach/rect");
+
+var _propTypes = require("prop-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } ////////////////////////////////////////////////////////////////////////////////
+// Welcome to @reach/tooltip!
+//
+// Quick definitions:
+//
+// - "on rest" or "rested on": describes when the element receives keyboard
+//   focus or mouse hover after a short delay (and hopefully soon, touch
+//   longpress).
+//
+// - "activation": describes a mouse click, keyboard enter, or keyboard space.
+//
+// Only one tooltip can be visible at a time, so we use a global state chart to
+// describe the various states and transitions between states that are
+// possible.  With the all the timeouts involved with tooltips it's important to
+// "make impossible states impossible" with a state machine.
+//
+// It's also okay to use these module globals because you don't server render
+// tooltips. None of the state is changed outside of user events.
+//
+// There are a few features that are important to understand.
+//
+// 1. Tooltips don't show up until the user has rested on one, we don't
+//    want tooltips popupping up as you move your mouse around the page.
+//
+// 2. Once any tooltip becomes visible, other tooltips nearby should skip
+//    resting and display immediately.
+//
+// 3. Tooltips stick around for a little bit after blur/mouseleave.
+
+/* eslint-disable default-case */
+
+////////////////////////////////////////////////////////////////////////////////
+var chart = {
+  initial: "idle",
+  states: {
+    idle: {
+      enter: clearContextId,
+      on: {
+        mouseenter: "focused",
+        focus: "focused"
+      }
+    },
+    focused: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        mousemove: "focused",
+        mouseleave: "idle",
+        mousedown: "dismissed",
+        blur: "idle",
+        rest: "visible"
+      }
+    },
+    visible: {
+      on: {
+        mouseleave: "leavingVisible",
+        blur: "leavingVisible",
+        mousedown: "dismissed",
+        selectWithKeyboard: "dismissed"
+      }
+    },
+    leavingVisible: {
+      enter: startLeavingVisibleTimer,
+      leave: function leave() {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        mouseenter: "visible",
+        focus: "visible",
+        timecomplete: "idle"
+      }
+    },
+    dismissed: {
+      leave: function leave() {
+        // allows us to come on back later w/o entering something else first
+        context.id = null;
+      },
+      on: {
+        mouseleave: "idle",
+        blur: "idle"
+      }
+    }
+  }
+};
+
+// chart context allows us to persist some data around, in Tooltip all we use
+// is the id of the current tooltip being interacted with.
+var context = { id: null };
+var state = chart.initial;
+
+////////////////////////////////////////////////////////////////////////////////
+// Finds the next state from the current state + action. If the chart doesn't
+// describe that transition, it will throw.
+//
+// It also manages lifecycles of the machine, (enter/leave hooks on the state
+// chart)
+function transition(action, newContext) {
+  var stateDef = chart.states[state];
+  var nextState = stateDef.on[action];
+
+  if (!nextState) {
+    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
+  }
+
+  if (stateDef.leave) {
+    stateDef.leave();
+  }
+
+  if (newContext) {
+    context = newContext;
+  }
+
+  var nextDef = chart.states[nextState];
+  if (nextDef.enter) {
+    nextDef.enter();
+  }
+
+  state = nextState;
+  notify();
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Subscriptions:
+//
+// We could require apps to render a <TooltipProvider> around the app and use
+// React context to notify Tooltips of changes to our state machine, instead
+// we manage subscriptions ourselves and simplify the Tooltip API.
+//
+// Maybe if default context could take a hook (instead of just a static value)
+// that was rendered at the root for us, that'd be cool! But it doesn't.
+var subscriptions = [];
+
+function subscribe(fn) {
+  subscriptions.push(fn);
+  return function () {
+    subscriptions.splice(subscriptions.indexOf(fn), 1);
+  };
+}
+
+function notify() {
+  subscriptions.forEach(function (fn) {
+    return fn(state, context);
+  });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Timeouts:
+
+// Manages when the user "rests" on an element. Keeps the interface from being
+// flashing tooltips all the time as the user moves the mouse around the screen.
+var restTimeout = void 0;
+function startRestTimer() {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(function () {
+    return transition("rest");
+  }, 100);
+}
+
+function clearRestTimer() {
+  clearTimeout(restTimeout);
+}
+
+// Manages the delay to hide the tooltip after rest leaves.
+var leavingVisibleTimer = void 0;
+function startLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(function () {
+    return transition("timecomplete");
+  }, 500);
+}
+
+function clearLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Rando helpers
+
+// allows us to come on back later w/o entering something else first after the
+// user leaves or dismisses
+function clearContextId() {
+  context.id = null;
+}
+
+// Avoids focus/mouseEnter from fighting with each other since you can have
+// one element focused and another mouseentered at the same time. The first
+// one sets the context.id and then the second one is ignored (for a single
+// element, most recent focus/mouseenter wins between elements).
+function isActive(id) {
+  return context.id === id;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// THE HOOK!
+function useTooltip() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseMove = _ref.onMouseMove,
+      onMouseLeave = _ref.onMouseLeave,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      onKeyDown = _ref.onKeyDown,
+      onMouseDown = _ref.onMouseDown,
+      ref = _ref.ref;
+
+  var _useState = (0, _react.useState)(state === "visible"),
+      isVisible = _useState[0],
+      setIsVisible = _useState[1];
+
+  // hopefully they always pass a ref if they ever pass one
+
+
+  var triggerRef = ref || (0, _react.useRef)();
+  var triggerRect = (0, _rect.useRect)(triggerRef, isVisible);
+  var id = "tooltip:" + (0, _autoId.useId)();
+
+  (0, _react.useEffect)(function () {
+    return subscribe(function () {
+      if (context.id === id && (state === "visible" || state === "leavingVisible")) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    });
+  }, [id]);
+
+  var handleMouseEnter = function handleMouseEnter() {
+    if (isActive(id) &&
+    // enables leaving then entering again before the times up
+    state !== "leavingVisible") {
+      return;
+    }
+
+    switch (state) {
+      case "idle":
+      case "leavingVisible":
+        {
+          transition("mouseenter", { id: id });
+        }
+    }
+  };
+
+  var handleMouseMove = function handleMouseMove() {
+    switch (state) {
+      case "focused":
+        {
+          transition("mousemove", { id: id });
+        }
+    }
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isActive(id)) return;
+    switch (state) {
+      case "idle":
+      case "leavingVisible":
+        {
+          transition("focus", { id: id });
+        }
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed":
+        {
+          transition("mouseleave");
+        }
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed":
+        {
+          transition("blur");
+        }
+    }
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible":
+        {
+          transition("mousedown");
+        }
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      switch (state) {
+        case "visible":
+          {
+            transition("selectWithKeyboard");
+          }
+      }
+    }
+  };
+
+  var trigger = {
+    "aria-labelledby": id,
+    "data-reach-tooltip-trigger": "",
+    ref: triggerRef,
+    onMouseEnter: (0, _utils.wrapEvent)(onMouseEnter, handleMouseEnter),
+    onMouseMove: (0, _utils.wrapEvent)(onMouseMove, handleMouseMove),
+    onFocus: (0, _utils.wrapEvent)(onFocus, handleFocus),
+    onBlur: (0, _utils.wrapEvent)(onFocus, handleBlur),
+    onMouseLeave: (0, _utils.wrapEvent)(onMouseLeave, handleMouseLeave),
+    onKeyDown: (0, _utils.wrapEvent)(onKeyDown, handleKeyDown),
+    onMouseDown: (0, _utils.wrapEvent)(onMouseDown, handleMouseDown)
+  };
+
+  var tooltip = {
+    id: id,
+    triggerRect: triggerRect,
+    isVisible: isVisible
+  };
+
+  return [trigger, tooltip, isVisible];
+}
+
+////////////////////////////////////////////////////////////////////////////////
+function Tooltip(_ref2) {
+  var children = _ref2.children,
+      label = _ref2.label,
+      ariaLabel = _ref2.ariaLabel,
+      rest = _objectWithoutProperties(_ref2, ["children", "label", "ariaLabel"]);
+
+  var _useTooltip = useTooltip(),
+      trigger = _useTooltip[0],
+      tooltip = _useTooltip[1];
+
+  return _react2.default.createElement(
+    _react.Fragment,
+    null,
+    (0, _react.cloneElement)(_react.Children.only(children), trigger),
+    _react2.default.createElement(TooltipPopup, _extends({
+      label: label,
+      ariaLabel: ariaLabel
+    }, tooltip, rest))
+  );
+}
+
+process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
+  children: _propTypes.node.isRequired,
+  label: _propTypes.node.isRequired,
+  ariaLabel: _propTypes.string
+} : void 0;
+
+////////////////////////////////////////////////////////////////////////////////
+var TooltipPopup = (0, _react.forwardRef)(function TooltipPopup(_ref3, forwardRef) {
+  var label = _ref3.label,
+      ariaLabel = _ref3.ariaLabel,
+      position = _ref3.position,
+      isVisible = _ref3.isVisible,
+      id = _ref3.id,
+      triggerRect = _ref3.triggerRect,
+      rest = _objectWithoutProperties(_ref3, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect"]);
+
+  return isVisible ? _react2.default.createElement(
+    _portal2.default,
+    null,
+    _react2.default.createElement(TooltipContent, _extends({
+      label: label,
+      ariaLabel: ariaLabel,
+      position: position,
+      isVisible: isVisible,
+      id: id,
+      triggerRect: triggerRect,
+      ref: forwardRef
+    }, rest))
+  ) : null;
+});
+
+exports.TooltipPopup = TooltipPopup;
+process.env.NODE_ENV !== "production" ? TooltipPopup.propTypes = {
+  label: _propTypes.node.isRequired,
+  ariaLabel: _propTypes.string,
+  position: _propTypes.func
+} : void 0;
+
+// Need a separate component so that useRect works inside the portal
+var TooltipContent = (0, _react.forwardRef)(function TooltipContent(_ref4, forwardRef) {
+  var label = _ref4.label,
+      ariaLabel = _ref4.ariaLabel,
+      _ref4$position = _ref4.position,
+      position = _ref4$position === undefined ? positionDefault : _ref4$position,
+      isVisible = _ref4.isVisible,
+      id = _ref4.id,
+      triggerRect = _ref4.triggerRect,
+      style = _ref4.style,
+      rest = _objectWithoutProperties(_ref4, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect", "style"]);
+
+  var useAriaLabel = ariaLabel != null;
+  var tooltipRef = (0, _react.useRef)();
+  var tooltipRect = (0, _rect.useRect)(tooltipRef, isVisible);
+  return _react2.default.createElement(
+    _react.Fragment,
+    null,
+    _react2.default.createElement("div", _extends({
+      "data-reach-tooltip": true,
+      role: useAriaLabel ? undefined : "tooltip",
+      id: useAriaLabel ? undefined : id,
+      children: label,
+      style: _extends({}, style, getStyles(position, triggerRect, tooltipRect)),
+      ref: function ref(node) {
+        tooltipRef.current = node;
+        if (forwardRef) forwardRef(node);
+      }
+    }, rest)),
+    useAriaLabel && _react2.default.createElement(
+      _visuallyHidden2.default,
+      { role: "tooltip", id: id },
+      ariaLabel
+    )
+  );
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// TODO: research longpress tooltips on Android, iOS, implement here.
+// - Probably want to position it by default above, since your thumb
+//   is below and would cover it
+// - I'm thinking after longpress, display the tooltip and cancel any
+//   click events. Then on touchend, hide the tooltip after a timer
+//   in case their hand is obstructing it, then can remove and read
+//   the tooltip
+
+// feels awkward when it's perfectly aligned w/ the trigger
+var OFFSET = 8;
+
+var getStyles = function getStyles(position, triggerRect, tooltipRect) {
+  var haventMeasuredTooltipYet = !tooltipRect;
+  if (haventMeasuredTooltipYet) {
+    return { visibility: "hidden" };
+  }
+  return position(triggerRect, tooltipRect);
+};
+
+var positionDefault = function positionDefault(triggerRect, tooltipRect) {
+  var styles = {
+    left: triggerRect.left + window.scrollX + "px",
+    top: triggerRect.top + triggerRect.height + window.scrollY + "px"
+  };
+
+  var collisions = {
+    top: triggerRect.top - tooltipRect.height < 0,
+    right: window.innerWidth < triggerRect.left + tooltipRect.width,
+    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
+    left: triggerRect.left - tooltipRect.width < 0
+  };
+
+  var directionRight = collisions.right && !collisions.left;
+  var directionUp = collisions.bottom && !collisions.top;
+
+  return _extends({}, styles, {
+    left: directionRight ? triggerRect.right + OFFSET / 2 - tooltipRect.width + window.scrollX + "px" : triggerRect.left - OFFSET / 2 + window.scrollX + "px",
+    top: directionUp ? triggerRect.top - OFFSET - tooltipRect.height + window.scrollY + "px" : triggerRect.top + OFFSET + triggerRect.height + window.scrollY + "px"
+  });
+};
\ No newline at end of file
diff --git a/vendor/@reach/tooltip/package.json b/vendor/@reach/tooltip/package.json
new file mode 100644
index 000000000000..36f1bb2f12f7
--- /dev/null
+++ b/vendor/@reach/tooltip/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@reach/tooltip",
+  "version": "0.1.2",
+  "description": "Accessible tooltips",
+  "main": "index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "test": "echo \"Write some tests you bum!\"",
+    "build": "node ../../shared/build-package",
+    "lint": "eslint . --max-warnings=0"
+  },
+  "dependencies": {
+    "@reach/auto-id": "0.2.0",
+    "@reach/portal": "^0.2.0",
+    "@reach/rect": "^0.2.1",
+    "@reach/utils": "0.2.0",
+    "@reach/visually-hidden": "^0.1.3",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "react-spring": "^8.0.19"
+  },
+  "author": "Ryan Florence",
+  "license": "MIT",
+  "files": [
+    "es",
+    "src",
+    "lib",
+    "index.js",
+    "styles.css"
+  ]
+}
diff --git a/vendor/@reach/tooltip/src/.index.js.swp b/vendor/@reach/tooltip/src/.index.js.swp
new file mode 100644
index 0000000000000000000000000000000000000000..0172def704a42e25694612261a9df457f480ff5f
GIT binary patch
literal 32768
zcmeI53zQ^Pd4O9bAPB60k{C(6+aTK`^H|mdaCe7g*@wHrGO)X_;JRjex~pf3t?6p2
zx@Q=NQHcpjj0cVwF%dBwJ%Sovphm?+J@|e^kEnQpVvLWVCQ2}#gBYXv{{P-vRXsa1
zC|MJdRG;(hbl0uNz5o5|KK}dvcgI&>vVDg+YxwjEpC?u-H@@ft&pST8vvSj=l}a*O
zZ?~d23EGW7l9&4I<h*ofN4;@w93L3EFo}oO3`cRJ9xb@wg~c0=?1_^DBS}ziOxk~k
zdf`Z?-Z)U72-1;m97o--Gm<8ak+9tit{lERU2wPZXDNYF0>7{XdfnF0S;thKx#slM
za?Q!rmF9%wFaCuuFHbBbP)eYbKq-Mz0;L2>36v5jB~VJ>f4>B}ox>_Gq8N{JMVWSg
zU;h~U#r>%q;f`P9{=UHd_34jwzi)PbD+{jwHFx|Xf8K(0|NLz(ec|&TF5N%2{98((
zlt3wgQUav}N(qz_C?!xzpp-x<fl>mc1WE}UEP;BnQaOghZ;}Z->;E^qQ|?|-seBeb
z0Uw4t;b!<#NZ~nfF06+$;SBf<_{p)A%D3Szcqd#7*T9Qm4qgCz;9MAl6XB<1;2yXO
zJ_8?zkHMQ@26n>+7=RPtp`$C6d*Ms)IrtQO5^jYa?1WKR1uNhOPpDM>3BC?rfqURR
za5Y>G7s4s<n{YfF4M)J?@WZ1jl`q3>@EZ6%cse|IWTo<HxE7uZE8!$~DjWene>~5H
zuftd19=ILe0dI%r!wK*m3@i7-XW>=w5}1N9SPM0H8mxe$;PG$-JaBlW@<q4<Zh_as
z>);|d0an1zFuJ@K-UK(otKn)$;BvSOcEC1R2WNtT6W~7%t5oiTPr_T_I(QN6gUzr8
z2H>f%0-gXz!TlI&z62kFx5HcDub>5|!74Zjj)Cu^b6<nI;iGT|ybVMb-w1slW9A1d
zhR^Wua1x|l{hoGbqre{SCgH?Hkn9W^U3(yGy1(fqVH%G6^Ez=FcEh-BMvecvIcU{;
zk-My(g!S|5<3VJvj{MiTN+WKkU9;PIrfiDa-Jsp&F0DA3sVB{yL95p4wHtcx{*!8z
zkr8u25HwBQq(P^i)VqOc#8aKPEw@Nx)19n$O)m{3_htsinAC*rG;9W>1mrX6iZjjp
zItuMGz1GOnIFMy{tw|9=dqOg<*<NefaWfbW)1AQ;y)X$7h|Ac8ai`ZA?j&(%_iQIf
zDa9POACUVG7%uBYk$g91{m6y-@U!)oF(dwqF>|gW=3SC8NzfXd%f*o=6zXPluJ9v2
zBW#Y&h0VfmUuhinU-MKigV8zvEl<nDF*=uh%~Mq_qjUPlA6?&HTUwm;d9jnA+e_Le
z%ZAxtYLx*5W(rl$k44n8P}F6067`tGb;_h2{Gpmg>IH8n!^fA;UY-@GsGEkX8*wjc
ziUOI&WEeH^*fQfiG^vhybz_4ASKLc*tTJgh)rt6{ijwLhxICU|yN6P(mEcNIIPO_c
zcU73>m0eE}RX?;Jr}kOVy_S>rrIg%cQds&8I7s=qpX$Hp{8nT&#jEL+eOaxS_n>PV
z1+P(sm-3g^LKUM{40X|nXd<>mfn=t($yM!e+>T~zzM=;PjZ?D$`}p<6+&ks1aYI|5
zd)>)gW%Im`T19c(J5WOguKt_0Rn%st*r?U!GVu=DDj3Y$ph4d}n|XOf4y`JTjGzpZ
z#1-nGq73FQ>ArRH{%C_~@}nx&C0<G^9w!vrAZ9m++dE=pw3+v0t(i&coh{Q+A%(+(
zX0qOHMnQJofIcg3pBKy?e3?7wFLFNz>|5>bdVWx!4i<Tu9`{%3<Mc>&@wrhi>A!4i
z+~}qL3Q5k+)s$sU*7WRbeb|n8(Ok)4|A_3o{wuf8VJ^s-o~g(CuGJ&%V)~S|Ucu>N
zt%$14dbd8LzN15~#)e$AR@a(p)tx16#*j7=QP3QpCCQEnTvgiv!-A^zudx4%4romp
z{d5yNU3K_StENFjZ@nk%PEvp4F++f=Ye3}GMxDmEI&DWDJXyL6`J^*pw=rpIX_rBO
z?L|<~mZ=4zQo{#=Su;91YN{%Os=4Yavmn7#?NzoAR_mMsQ4~GdjGoQ&Dw+EF68OIc
zf#&6y64h>^+IjYu%Dg?^5`7Aq)wMifnF5i)Zg6FHIBc4glqhTtxEI%sEa-MNMo~Ot
z7@9N=m_{W3wvu?t(Bx_3Bt2KX9Ww$-cv7*vsyFglQR3RbFIU`gUVw!qZHDPom};4_
zidrB8Evv8A|9J_>Yy1cbuXP<s%knE1!9n$<&D0~vvkJR9Xy#BMdKIfZz9ytB40+uM
zzwn;f>I-R-A5KrhbR&cI>7a&&7FD!Z0Br~#LEcr~Q?!js<v-ITr+14q55;__;!9im
zNb^D)6C}mV$o&5rCR#6$`4;nkzyAMr=JGFxYvD@h!2o=n`TFPJGcXS_pMM5?lX>~|
za53zJ!{AQl-XDak;e~Jpe4jb>_uyujg=ts=r^5<37JkP3TISu~fV<&S@FBPzZh;%1
z4V%HhKQrI{2)qKWhmCML{5Bj9hr@T7Yu^hWfH%NRa0C1iTn;;6Bb*FJz<tcIKM(JN
z+u+S`BU}d|Y=;4O3_QeK`-kvVcsJY(SHU=320LIFo&*mvx4s{~17C(ap$E@}i(m^3
zz?0x;I2;}eKWA?JGk6E|;4(NHM&VzWOTQKph+!rCI>`K5=GCu(8$s&$3fKc@!3KDw
zAEtsMW@k{3qFEU}wtA7whD<XU?@dgE?WL2ml<dpmcbJe4%<6udZe*AAmuS8An@rdl
z1n;fuWSgO$KhY<0USqPJbcgjox>x^jUN%23^ndmygQgwKY_dI;9k|*%3^0T>+q<S7
zF-xDSw<S2mL}4pv%r+vv#x0$pPZ7luwiyA{^aUHyCRXQkoYK})G!NWOZrBXcMiP$8
z?4Eglo*4$POxnUIA|Z)qhUMI?gukSE2N8oUzwIZ*G|=cJO!oZY(~K?6u-R_&rBX1>
zI7r*8y4>y1ekzqH@Q?Nq58Din>R1mXiRzOf0M#Llx3w$CpqyfbwoEkXPK3TBegr-q
z(5_<zp}nF|*iINYO{zp}q5Qqkz<4G_2W7a>36eC#NR!4>fssKXGn2U2ZX(#Wx7<*d
zk(miZYu((^j*I;0$p1A)h6)TPwG(muzcG0i>XYnf(@@d*FwYqS3?G+K83&CPEGv?P
z9Qv}4O(+n387B;isTD;xGb1v6=bK1Fiq%EYCQJ}9yljPuvx6}gw$lYa8j`zbqZ*&B
zEK_+AyWvzImMChA$;N`BYUjjJKZ^AQbwbc=Et0&H9LQqgUa{>>nP^HT<-?m)PtNb_
z$#;{lBtK`7(itljF$eIbFLJfbtz4N85SEd|!NYlqmWi-h(VX&+*1rsw`;v3fIHl=-
zuA7m_J^J)#iL-JEI?*qaZ?T0IDxo6JkWW#0^V~gL?)!45iof7m8O-oFKW_1<d5$wx
z)LPw1?zArbiB4&>(iSATdoEK}uaN%f6)h?MXtupR`c(hOV&2?2nzu|B?TJ!a`)qBh
zQ~TYuXB62<gV&h`#<oFXHa)aWs+c%1(TV+SPOZ0t&Q>?5b{I2noBpbp2#302yRELv
zFQ7?N3$j1!93NiU=;o&}R_;l+y)A4uu@mZ)tLn}~-85}zQWNuwtU0v*WXWYc%Fmh0
zO(R)8-F<uAFj|<??TqI8Z&>ej<Dsz09esl2U$SnbwcgUA+ZDTiZeo_2(?Y9ZfN#5G
zm>@^Ju}r=ft!VPw8^{K|<QT`WYG9Z%k37Q!X+*Cx#H(Lt(SW{M7YBxPLh%f$herFE
z!@e^~sUDfQ+HOXNKy}6k-7Z&-)0x*>(um8uIFi3w(u>J$_{iHU?K#FHX|Fp`eb$6i
zQ$aJN9MP=ycWZ{t7!kOfGwY3ZW?Wir#viVI7&JOf_Q@%unR+rlYtl(I45tUePX0`1
z71jXT6bmy;0UgOhuVd<|nT>nAPRua)lGqo^mrmCr7y)UnPA|xy88f_)ht0@MdTnZ3
zM=VrGf?+JxV$y}vwK2ILl-^e_ae3O!44>i&rWMRU9g{ny)8UaEx37e=X49Y3&36%*
z7o;0Aq{HR{F&?-Pg}%lz(BNflPsrnYU0qWlU2~?!l2l8xy}K&4gS_|vRlrb!Go%ds
zI~6y3ROdt#k24Gu(bpwW1my}IB-0d>ffyNcWvWiq57>OCy7*)VZY=BYa@!+S9nnx^
zn@=}{)ZF+}hK&*XlFCv>Em8r}V@p98(M-qDv>O=ZH6Kbzit-XoD-1XTGmTvgn~%?t
zs9rt<mGX6G0vZO*R$d2kn=uT}QiJ|!Sh*Oia7SzAG7M(xnn7Bv*p0C`VkPIwX<N>2
z?Bq0LsxoGsu8WDex;D!xwc(UcEklC_%a|J3Y`2fXC;6e2xN+4=$s`?6+@4@1B~1rZ
zn$lokv63tF9b{ZC)n#8z#6KymZ8MNpuO`Bnj5{))p{Qvbx5ZH2YfQ?W$txNxuWVIr
zR+Vq6)qVM%nM8O}Q`iT^ZqEgc0Q*9k<<}McA~k%`zGxpqx3bnH><J<r38IDP*cRL=
z_)1PVw4aL1|7AV;gUpd-{y*v_gg;`gFFpWwz^ma8Ac7|Bg9|{`|4)LSGXMW7ybIm}
zZ-DDy5_Z7|JQ<FL3j8Cs0a@dJGrSINgqK1OYH$pQ{ou#g3%&{;2eBi(58e&8!)?%j
z8XOG|U^n<z_)EA5o(@&`BK85XAKVOA!WditL-1Y7{2llrNcsO7%1<eQQUav}N(qz_
zC?!xz;L#}onL4V8IRAqE+H6UZI1yhDSx{b?na#zZ%|WqT#8JT3OcVHU$f#RJw>r!h
z^S86H4|;>;b_}*$;@5EP${V9#Cd*40{Y#U5X|gX(_NB>Q8l}Y+BubOLN=7XRj~0`?
z%>Uoa8uC%BP0Re>$LIeW^ZNVYqi_p!Ab?BYJXj4f@Bci!7jA`Dz@@MQ&Vb|K+sxy|
zxBnCHLAV8`VLxnzQ5XW5_n!hM!(GhhUk1;HQ$hUpUjvuIvtcV71wUpE{~){{UJ8@2
z2{yp-umX;SyP4O27_Niuuo*VNAUuTa<6ZDZ*b6lfAAl-+lePU@;TDj!|Cd1uyI~Z>
zFaNRdVPy9<*bm3UF(C3h63S00fl>mc1RnhoP-kiVM|!EXX8$S0Pz_w%JLWVqwsq^S
zExY+r@S+}`48n=YE(d4uRl#iq=ax8%E}QRMxxZq2ybX)pZOGqk$gd~J;^o8Mjf}8N
zKsbv|U@q>sM;w&lC}?#t*}EK%m^BMCc&TJi)&u>gFZ-HWNOUH6&EibhWL4(0LTceD
zL+<cFWyarFq@>A`xk4#+N|GiJOrSwcsbtJKx@WUDmMQXbi<1*#X6c1_-SBwa?czIo
z>ZxXB;V81oy`!>g^=bW=+q^BfS~9s#W{yrPY^IAf?__+iY}T9AS{&nbB5b#VWSdo#
z^?lmoa*j&bfP{V}u!6O<WY4s2$C_bW*R96s-S=p%^xs@F*nexSJbOb`rDAzR$rsf|
z$|IM!#s5s~;@MOXklt_6_on!ehkISDm>1l}735$Q&9i0oMzdt|>4S%Gmy`H5Qfh^K
z$ikMc0gJ%B6SdZ~Q#*h8(ie$tSzjWrsdgzaWCeVd5w7zhu=*o5iAg+<+ua>OJ!O5j
zx!XSfvVh0WWzt>h9J0T%kmGd~TgZt3-$0@OC5Wx&vrO4g5FZY>SV8T@?zJ5?XQ@+K
zE5NVH)MpMzK%dctJY7!3txQ}GSP`s8;Y3^3Tu1C;tbK|)1&Bo^TN#z*Ld-C28wWr_
zC=1~%F0vdQj}v~?qxE9VJ;d#RR5?#p7IooWPGi}xY42ej<K0rV*)8X?2&rq5tTz)k
z;iCkdY_fGtStyp(XcT(;swtilwhySQfx0AQYovpj-$5b!>W@H{8bKs(2d*@-HY^_d
zlEE2uENJLTYACLSJcgaW$MKn%&En2{b%<Ld-U!Z>!qmsP49im}UJdGI(4Fi}jmu4T
zk8K`XD-$IA7YLKca_Os3-6=P=n@LP4hY81a@sD_~=|Zcx5y*<~q5a?_sJ?2>VeR1P
zFc)`4eG@v??_J{q$RusCaK!cfryKgsV6^ILvWm~7Mn(F&%;9#h(TAr>Q!l1I`79fs
zHlKU@S;JuNJ~L2orKw4*Xu&BDb@t6eYuGzy;=ssR^4i;vMtsU48-w8w_dSvxEqh0Q
zkr%Y$@1mi;g$Q3cu0KcTq_wag9|pG|rjwE)yFPhsz%fM^+j)H@5-1moN`1MLvl_{-
zIXD8zWodmgoYt?)$KhqdCE!;B@T3*4Wk*}+wU2w%O0n%#p6)MdStm)G+*jUFJZfAh
zGXXfx^VBx9xd!O^zxb~|nfb2F|Icv))&Fb${|`{UFTfpe8%PYmH82GMNId=+tO1e5
z)8R<?F7x{@!298y@D{iUUJeJ~JU9&=2mg*7e*|BH_khIXzYv<R7sg;UoCpu$)BgZ`
z5B?rL0yFSD*agpq)8Irn79J0W!DFBTw_~%JfxU1JY=9p;4nGIz!WD2bJO%E@&;R4_
zTDS?W0`dPp6HbO>K}Iq5W7ieR<piRtC5E7k09d9wEh7N>e58w>#+kFd&KmqGns0~w
z%f^tWi~vAFIKr0^0K_WVd1*10#Q9b(;}tJ%h=+DL!D^=jC*TqPsPyA6zFnd_o9sfh
z#FbS1yCq{HzuvuSHkQvSpX%ZOis3S)|NrC&%2xXSm;V2y|9|QKU;6+5zw!TP$-S~s
z=77xquaT)BpTA*!|NU?)Tn}Tg4K~9jI1Qc*$H5apd;z`zUxRz$cDNB_@4w%Nt098@
z@O;<@5)beb9{wQ6UVqPnr@)CIKL4_3Koi8z|2eQ4o(A`^_WunKzkq*$Ps5+X4e(0X
z3}?a_a3AacvR}X-LI~%>ao~Leeuxjim*5L<7u*2zum{$_eb@lL4c`LUJK!(iRUmr@
zY=Pf_XTrCb|9=9+J|O$}y%PQmw!u%C@4o|L*aPd}S#TEI$6Wp%_*-}@ycVv7m%uDU
zun+dY4mb*qgui3He=A%87r+j97Mujf!H<~tzZc#H*TYLd_TYOyTmsL5?Qkmm790T|
zLkHdfVk5W?{sjIQQrHioBj-Th$Bwq_b{h-AS^b!m@xAVbqjRMtc8$?dn>Vl7)dXv1
zv=%FQij9+!y=1Bj9;6p*ICapLpgltLZP>51t?OV<P2UrBO!DIa_Ad?Y(pV*8$Nd^&
zaVrq)t9n~mw&063u-WZ)cF2x7TO=r3)*SrO2}>b^W^dTs=ZvWNRwcez6d~wt_h!9X
zi)gak;yQ0*x^v5B-?=Op<frB$F>WIvyJwJ_D(J33R#>`~&;nukA#ne^RCnm{Wwv%=
zExudWNqggV%YvFOZy_WzJC?~wW8L>VYvtNg#I`C!^ZET!r&g4O1sZS56a%PVwpq#m
znx%6Q)@RuuiJP-Cl(mC0pU%U#SkRCao0<A7VUG1wLdxV4YE)BLQ%US`LfXXsWiz%n
zGrY1yQK&DsQQ9tvFtyt^^-G;<pC?muy78HAhR7|8TZHLPw^ftO^Wyfo#D&^#TXm1F
z{DSjk?q!oy+jhu`NuI3AH|Te2%eJ*Z61%O@z9xamX7{!&X4}}<dB1|VvEoK-$St#P
zs2&w|+UR?wG*d1tZjfL+0;v;%<A{;d2t6Ajt8c3;?B=0}?h+TzCjp35jNL$@@N8L@
zqGH{48wAMmTh3+4jYT_N`KGDy=A#9yJWWJ_NJ!FsoSust*X1p@@01M~)EsfO?A5^%
zUs`9E23cJr0+ye47Y6RNahgS`v{)3aCL812k`;bwgJc^EBme8I3)#(9!E^~w7C-5L
zsOdt%ywNDD=l<|@-bfWJwVznGOO18(dl#fq&i}HJ$t^2VeqHR`iLhfc8AP(<#;;<@
zO(a0WmB{7+guB-I8!<VW@WS;=L|z(1%$k~P_p0ZpY*e0$+<><gJ@QYm4O<=wTdQ_?
zir*Zg%07#~yLz=<i}@uoMmxOd?i89a*&}6<eCb;B4!7BiXq*jBB^-2##a^)hxtbq#
z+EdJ;B)d``B(t3^jm<X1l|eMGaQeeZNKO^WoW7W33il~KRwdH^Sdl~FY%PB)s;9cu
ziR(oqJUi0&PpU;C)kQL@^D<qvKW%)k3&xjpIxS+EH4NAbG>gyGYc+^BC7!p<d+(cq
zVRK#(bnGp42bvb~#r8ecZE5rsa1zz1-DOPVk08lbgX?lT5~h(3({OE}(Wtf9^X_cZ
zYTF(t3)UDYN|-(K!q#kFq0W7$|Ay=}5H{$@Y{%}NqW{(Q7#kV4rBYSd-2lM89WpxU
zzoOGiB~!)6yA#F(IW9^?Qzm=z6rY4*?cJyKtTFyGx<`P7&*#l-635anB-F9^NYuNl
zni6Z?po3d!&SiI7oC@5|My`HmNv3o6ZU(Le<qFvxw=41Zbw&s5vs<Hc>B>&K>;!Om
zkG#<((5;6JV&fwQS~O_VXtGU#-STNc-q{#|-C{)Nq|4DQb&<E~qw9Xn#tXM=rgUcs
z-<GqY&ic93O}>2uIk4LkplvZb6eMn#o9!s&vMTx6Bc+$JBz8Y%Q}2k9#{3r1Q3}76
zF`gLH_=O~A7q@QUY|Suw?+Uo9SS1pDerP{dkG(d^&`+c+yLe^MM%KNI6r;!RR2tUa
z){f?6>@BBehwaGM>XS?0Zn{o~+Z^{!_hz?7y|}L(dwW%oC;M%_BtP~6{)j58zeH~*
z50(Zx$n(>GyzdfyU!*AeFK!=b%l4GEygKMmZ$(o*WzGg(%~x%EV$a~PewnZCCs#hU
K>%U_S_CEob<B>}M

literal 0
HcmV?d00001

diff --git a/vendor/@reach/tooltip/src/index.js b/vendor/@reach/tooltip/src/index.js
new file mode 100644
index 000000000000..d13b83542f57
--- /dev/null
+++ b/vendor/@reach/tooltip/src/index.js
@@ -0,0 +1,490 @@
+////////////////////////////////////////////////////////////////////////////////
+// Welcome to @reach/tooltip!
+//
+// Quick definitions:
+//
+// - "on rest" or "rested on": describes when the element receives keyboard
+//   focus or mouse hover after a short delay (and hopefully soon, touch
+//   longpress).
+//
+// - "activation": describes a mouse click, keyboard enter, or keyboard space.
+//
+// Only one tooltip can be visible at a time, so we use a global state chart to
+// describe the various states and transitions between states that are
+// possible.  With the all the timeouts involved with tooltips it's important to
+// "make impossible states impossible" with a state machine.
+//
+// It's also okay to use these module globals because you don't server render
+// tooltips. None of the state is changed outside of user events.
+//
+// There are a few features that are important to understand.
+//
+// 1. Tooltips don't show up until the user has rested on one, we don't
+//    want tooltips popupping up as you move your mouse around the page.
+//
+// 2. Once any tooltip becomes visible, other tooltips nearby should skip
+//    resting and display immediately.
+//
+// 3. Tooltips stick around for a little bit after blur/mouseleave.
+
+/* eslint-disable default-case */
+
+import React, {
+  Fragment,
+  cloneElement,
+  Children,
+  useState,
+  useRef,
+  forwardRef,
+  useEffect
+} from "react";
+import { useId } from "@reach/auto-id";
+import { wrapEvent } from "@reach/utils";
+import Portal from "@reach/portal";
+import VisuallyHidden from "@reach/visually-hidden";
+import { useRect } from "@reach/rect";
+import { node, string, func } from "prop-types";
+
+////////////////////////////////////////////////////////////////////////////////
+const chart = {
+  initial: "idle",
+  states: {
+    idle: {
+      enter: clearContextId,
+      on: {
+        mouseenter: "focused",
+        focus: "focused"
+      }
+    },
+    focused: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        mousemove: "focused",
+        mouseleave: "idle",
+        mousedown: "dismissed",
+        blur: "idle",
+        rest: "visible"
+      }
+    },
+    visible: {
+      on: {
+        mouseleave: "leavingVisible",
+        blur: "leavingVisible",
+        mousedown: "dismissed",
+        selectWithKeyboard: "dismissed"
+      }
+    },
+    leavingVisible: {
+      enter: startLeavingVisibleTimer,
+      leave: () => {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        mouseenter: "visible",
+        focus: "visible",
+        timecomplete: "idle"
+      }
+    },
+    dismissed: {
+      leave: () => {
+        // allows us to come on back later w/o entering something else first
+        context.id = null;
+      },
+      on: {
+        mouseleave: "idle",
+        blur: "idle"
+      }
+    }
+  }
+};
+
+// chart context allows us to persist some data around, in Tooltip all we use
+// is the id of the current tooltip being interacted with.
+let context = { id: null };
+let state = chart.initial;
+
+////////////////////////////////////////////////////////////////////////////////
+// Finds the next state from the current state + action. If the chart doesn't
+// describe that transition, it will throw.
+//
+// It also manages lifecycles of the machine, (enter/leave hooks on the state
+// chart)
+function transition(action, newContext) {
+  const stateDef = chart.states[state];
+  const nextState = stateDef.on[action];
+
+  if (!nextState) {
+    throw new Error(
+      `Unknown state for action "${action}" from state "${state}"`
+    );
+  }
+
+  if (stateDef.leave) {
+    stateDef.leave();
+  }
+
+  if (newContext) {
+    context = newContext;
+  }
+
+  const nextDef = chart.states[nextState];
+  if (nextDef.enter) {
+    nextDef.enter();
+  }
+
+  state = nextState;
+  notify();
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Subscriptions:
+//
+// We could require apps to render a <TooltipProvider> around the app and use
+// React context to notify Tooltips of changes to our state machine, instead
+// we manage subscriptions ourselves and simplify the Tooltip API.
+//
+// Maybe if default context could take a hook (instead of just a static value)
+// that was rendered at the root for us, that'd be cool! But it doesn't.
+const subscriptions = [];
+
+function subscribe(fn) {
+  subscriptions.push(fn);
+  return () => {
+    subscriptions.splice(subscriptions.indexOf(fn), 1);
+  };
+}
+
+function notify() {
+  subscriptions.forEach(fn => fn(state, context));
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Timeouts:
+
+// Manages when the user "rests" on an element. Keeps the interface from being
+// flashing tooltips all the time as the user moves the mouse around the screen.
+let restTimeout;
+function startRestTimer() {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(() => transition("rest"), 100);
+}
+
+function clearRestTimer() {
+  clearTimeout(restTimeout);
+}
+
+// Manages the delay to hide the tooltip after rest leaves.
+let leavingVisibleTimer;
+function startLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(() => transition("timecomplete"), 500);
+}
+
+function clearLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Rando helpers
+
+// allows us to come on back later w/o entering something else first after the
+// user leaves or dismisses
+function clearContextId() {
+  context.id = null;
+}
+
+// Avoids focus/mouseEnter from fighting with each other since you can have
+// one element focused and another mouseentered at the same time. The first
+// one sets the context.id and then the second one is ignored (for a single
+// element, most recent focus/mouseenter wins between elements).
+function isActive(id) {
+  return context.id === id;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// THE HOOK!
+export function useTooltip({
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onMouseDown,
+  ref
+} = {}) {
+  const [isVisible, setIsVisible] = useState(state === "visible");
+
+  // hopefully they always pass a ref if they ever pass one
+  const triggerRef = ref || useRef();
+  const triggerRect = useRect(triggerRef, isVisible);
+  const id = `tooltip:${useId()}`;
+
+  useEffect(() => {
+    return subscribe(() => {
+      if (
+        context.id === id &&
+        (state === "visible" || state === "leavingVisible")
+      ) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    });
+  }, [id]);
+
+  const handleMouseEnter = () => {
+    if (
+      isActive(id) &&
+      // enables leaving then entering again before the times up
+      state !== "leavingVisible"
+    ) {
+      return;
+    }
+
+    switch (state) {
+      case "idle":
+      case "leavingVisible": {
+        transition("mouseenter", { id });
+      }
+    }
+  };
+
+  const handleMouseMove = () => {
+    switch (state) {
+      case "focused": {
+        transition("mousemove", { id });
+      }
+    }
+  };
+
+  const handleFocus = () => {
+    if (isActive(id)) return;
+    switch (state) {
+      case "idle":
+      case "leavingVisible": {
+        transition("focus", { id });
+      }
+    }
+  };
+
+  const handleMouseLeave = () => {
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed": {
+        transition("mouseleave");
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible":
+      case "dismissed": {
+        transition("blur");
+      }
+    }
+  };
+
+  const handleMouseDown = () => {
+    // Allow quick click from one tool to another
+    if (context.id !== id) return;
+    switch (state) {
+      case "focused":
+      case "visible": {
+        transition("mousedown");
+      }
+    }
+  };
+
+  const handleKeyDown = event => {
+    if (event.key === "Enter" || event.key === " ") {
+      switch (state) {
+        case "visible": {
+          transition("selectWithKeyboard");
+        }
+      }
+    }
+  };
+
+  const trigger = {
+    "aria-labelledby": id,
+    "data-reach-tooltip-trigger": "",
+    ref: triggerRef,
+    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
+    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
+    onFocus: wrapEvent(onFocus, handleFocus),
+    onBlur: wrapEvent(onFocus, handleBlur),
+    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
+  };
+
+  const tooltip = {
+    id,
+    triggerRect,
+    isVisible
+  };
+
+  return [trigger, tooltip, isVisible];
+}
+
+////////////////////////////////////////////////////////////////////////////////
+export default function Tooltip({ children, label, ariaLabel, ...rest }) {
+  const [trigger, tooltip] = useTooltip();
+  return (
+    <Fragment>
+      {cloneElement(Children.only(children), trigger)}
+      <TooltipPopup
+        label={label}
+        ariaLabel={ariaLabel}
+        {...tooltip}
+        {...rest}
+      />
+    </Fragment>
+  );
+}
+
+Tooltip.propTypes = {
+  children: node.isRequired,
+  label: node.isRequired,
+  ariaLabel: string
+};
+
+////////////////////////////////////////////////////////////////////////////////
+export const TooltipPopup = forwardRef(function TooltipPopup(
+  {
+    // own props
+    label, // could use children but want to encourage simple strings
+    ariaLabel,
+    position,
+
+    // hook spread props
+    isVisible,
+    id,
+    triggerRect,
+    ...rest
+  },
+  forwardRef
+) {
+  return isVisible ? (
+    <Portal>
+      <TooltipContent
+        label={label}
+        ariaLabel={ariaLabel}
+        position={position}
+        isVisible={isVisible}
+        id={id}
+        triggerRect={triggerRect}
+        ref={forwardRef}
+        {...rest}
+      />
+    </Portal>
+  ) : null;
+});
+
+TooltipPopup.propTypes = {
+  label: node.isRequired,
+  ariaLabel: string,
+  position: func
+};
+
+// Need a separate component so that useRect works inside the portal
+const TooltipContent = forwardRef(function TooltipContent(
+  {
+    label,
+    ariaLabel,
+    position = positionDefault,
+    isVisible,
+    id,
+    triggerRect,
+    style,
+    ...rest
+  },
+  forwardRef
+) {
+  const useAriaLabel = ariaLabel != null;
+  const tooltipRef = useRef();
+  const tooltipRect = useRect(tooltipRef, isVisible);
+  return (
+    <Fragment>
+      <div
+        data-reach-tooltip
+        role={useAriaLabel ? undefined : "tooltip"}
+        id={useAriaLabel ? undefined : id}
+        children={label}
+        style={{
+          ...style,
+          ...getStyles(position, triggerRect, tooltipRect)
+        }}
+        ref={node => {
+          tooltipRef.current = node;
+          if (forwardRef) forwardRef(node);
+        }}
+        {...rest}
+      />
+      {useAriaLabel && (
+        <VisuallyHidden role="tooltip" id={id}>
+          {ariaLabel}
+        </VisuallyHidden>
+      )}
+    </Fragment>
+  );
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// TODO: research longpress tooltips on Android, iOS, implement here.
+// - Probably want to position it by default above, since your thumb
+//   is below and would cover it
+// - I'm thinking after longpress, display the tooltip and cancel any
+//   click events. Then on touchend, hide the tooltip after a timer
+//   in case their hand is obstructing it, then can remove and read
+//   the tooltip
+
+// feels awkward when it's perfectly aligned w/ the trigger
+const OFFSET = 8;
+
+const getStyles = (position, triggerRect, tooltipRect) => {
+  const haventMeasuredTooltipYet = !tooltipRect;
+  if (haventMeasuredTooltipYet) {
+    return { visibility: "hidden" };
+  }
+  return position(triggerRect, tooltipRect);
+};
+
+const positionDefault = (triggerRect, tooltipRect) => {
+  const styles = {
+    left: `${triggerRect.left + window.scrollX}px`,
+    top: `${triggerRect.top + triggerRect.height + window.scrollY}px`
+  };
+
+  const collisions = {
+    top: triggerRect.top - tooltipRect.height < 0,
+    right: window.innerWidth < triggerRect.left + tooltipRect.width,
+    bottom:
+      window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
+    left: triggerRect.left - tooltipRect.width < 0
+  };
+
+  const directionRight = collisions.right && !collisions.left;
+  const directionUp = collisions.bottom && !collisions.top;
+
+  return {
+    ...styles,
+    left: directionRight
+      ? `${triggerRect.right +
+          OFFSET / 2 -
+          tooltipRect.width +
+          window.scrollX}px`
+      : `${triggerRect.left - OFFSET / 2 + window.scrollX}px`,
+    top: directionUp
+      ? `${triggerRect.top - OFFSET - tooltipRect.height + window.scrollY}px`
+      : `${triggerRect.top + OFFSET + triggerRect.height + window.scrollY}px`
+  };
+};
diff --git a/vendor/@reach/tooltip/styles.css b/vendor/@reach/tooltip/styles.css
new file mode 100644
index 000000000000..9c5e395afa11
--- /dev/null
+++ b/vendor/@reach/tooltip/styles.css
@@ -0,0 +1,11 @@
+[data-reach-tooltip] {
+  pointer-events: none;
+  position: absolute;
+  padding: 0.25em;
+  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
+  white-space: nowrap;
+  font-size: 85%;
+  background: #f0f0f0;
+  color: #444;
+  border: solid 1px #ccc;
+}
diff --git a/yarn.lock b/yarn.lock
index 873b29a77e6e..712643e1d57c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1052,10 +1052,8 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@reach/tooltip@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.1.1.tgz#7f0385624eaffabcd4f075a098ef0fe4b472ce5d"
-  integrity sha512-EawPeRdeajl5HwtM8Q1rz0aNzOgRKnbs4GNW4tUa/6+F8yN93nZGxfYyefYGQgjzVOd0HdgeatUVqDQMgcldYA==
+"@reach/tooltip@file:./vendor/@reach/tooltip":
+  version "0.1.2"
   dependencies:
     "@reach/auto-id" "0.2.0"
     "@reach/portal" "^0.2.0"

From 53c73384201e3abfcc7aa7e3a2124228ecc5cdd4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 09:00:25 -0700
Subject: [PATCH 471/814] Updated flow-bin  to attempt  to  fix the  error

---
 package.json                |  2 +-
 src/devtools/cache.js       |  4 ++--
 src/devtools/views/hooks.js |  2 +-
 yarn.lock                   | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index c92d52c09dd1..c8f49c3d1685 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
     "firefox-profile": "^1.0.2",
-    "flow-bin": "^0.96.0",
+    "flow-bin": "^0.97.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "html2canvas": "^1.0.0-alpha.12",
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index bf509ce8f3f1..8038dbcd4a4c 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -71,10 +71,10 @@ type Config = {
   useLRU?: boolean,
 };
 
-const entries: Map<Resource<any, any, any>, Map<any, any>> = new Map();
+const entries: Map<Resource<any, any, any>, Map<any, any> | LRU> = new Map();
 const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
 
-function getEntriesForResource(resource: any): Map<any, any> {
+function getEntriesForResource(resource: any): Map<any, any> | LRU {
   let entriesForResource = ((entries.get(resource): any): Map<any, any>);
   if (entriesForResource === undefined) {
     const config = resourceConfigs.get(resource);
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 3b0c064ba0d1..6d48915d2036 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -56,7 +56,7 @@ export function useLocalStorage<T>(
     value => {
       try {
         const valueToStore =
-          value instanceof Function ? value(storedValue) : value;
+          value instanceof Function ? (value: any)(storedValue) : value;
         setStoredValue(valueToStore);
         window.localStorage.setItem(key, JSON.stringify(valueToStore));
       } catch (error) {
diff --git a/yarn.lock b/yarn.lock
index 8fad6396cc0f..557d16989999 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5126,10 +5126,10 @@ flatstr@^1.0.9:
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.9.tgz#0950d56fec02de1030c1311847ecd58c25690eb9"
   integrity sha512-qFlJnOBWDfIaunF54/lBqNKmXOI0HqNhu+mHkLmbaBXlS71PUd9OjFOdyevHt/aHoHB1+eW7eKHgRKOG5aHSpw==
 
-flow-bin@^0.96.0:
-  version "0.96.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.96.0.tgz#3b0379d97304dc1879ae6db627cd2d6819998661"
-  integrity sha512-OSxERs0EdhVxEVCst/HmlT/RcnXsQQIRqcfK9J9wC8/93JQj+xQz4RtlsmYe1PSRYaozuDLyPS5pIA81Zwzaww==
+flow-bin@^0.97.0:
+  version "0.97.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.97.0.tgz#036ffcfc27503367a9d906ec9d843a0aa6f6bb83"
+  integrity sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w==
 
 fluent-syntax@0.10.0:
   version "0.10.0"
@@ -9245,7 +9245,7 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react0.0.0-4221565e1:
+react@0.0.0-4221565e1:
   version "0.0.0-4221565e1"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-4221565e1.tgz#bc7f3e67f2c2c53693cda2e89e6fa71bfc89ebcd"
   integrity sha512-iVAljelOxza6S9QcFMkxJCcj2Y+QDiv6XwGz9A8c5jtKejGOEKK/Xumg7uTDmGwy8vjGVDI7qGDW8Rta80xH9g==

From 4dcb34ea32dba72380720f65b2039b126d141e46 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 11:32:07 -0700
Subject: [PATCH 472/814] Fixed Flow error

---
 src/devtools/cache.js                                    | 2 +-
 src/devtools/views/Components/InspectedElementContext.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 8038dbcd4a4c..7aec26f21ee1 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -13,7 +13,7 @@ import LRU from 'lru-cache';
 //    The size of this cache is bounded by how many renders were profiled,
 //    and it will be fully reset between profiling sessions.
 
-type Thenable<T> = {
+export type Thenable<T> = {
   then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,
 };
 
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 0ef21d598b94..1aed0dd63e5a 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -17,7 +17,7 @@ import type {
   InspectedElement,
   InspectedElementResponse,
 } from 'src/devtools/views/Components/types';
-import type { Resource } from '../../cache';
+import type { Resource, Thenable } from '../../cache';
 
 type Context = {|
   read(id: number): InspectedElement | null,
@@ -28,7 +28,7 @@ InspectedElementContext.displayName = 'InspectedElementContext';
 
 type ResolveFn = (inspectedElement: InspectedElement) => void;
 type InProgressRequest = {|
-  promise: Promise<InspectedElement>,
+  promise: Thenable<InspectedElement>,
   resolveFn: ResolveFn,
 |};
 

From 1e5c0b7856a3b9a3113f993ff56dcf8a8491237c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 13:43:38 -0700
Subject: [PATCH 473/814] Re-added the  selection message

---
 src/devtools/views/Components/InspectedElementContext.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 1aed0dd63e5a..5d4bacb28b76 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -126,6 +126,9 @@ function InspectedElementContextController({ children }: Props) {
     // We'll poll for an update in the response handler below.
     sendRequest();
 
+    // Update the $r variable.
+    bridge.send('selectElement', { id: selectedElementID, rendererID });
+
     const onInspectedElement = (
       inspectedElementResponse: InspectedElementResponse | null
     ) => {

From 0aa7d2f8006888557e23b3e003eb3889747db19f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 14:03:58 -0700
Subject: [PATCH 474/814] Reverted optimization to avoid re-sending inspected
 fiber unless it committed

---
 src/backend/renderer.js                       | 52 +++--------------
 src/backend/types.js                          |  4 +-
 .../Components/InspectedElementContext.js     | 58 ++++++++-----------
 src/devtools/views/Components/types.js        |  5 --
 4 files changed, 36 insertions(+), 83 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 2c353d4acede..e41ea782ff67 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -40,10 +40,7 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type {
-  InspectedElement,
-  InspectedElementResponse,
-} from 'src/devtools/views/Components/types';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -962,20 +959,6 @@ export function attach(
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
-
-    // If this is the most recently inspected Fiber, take note of whether it was part of the new commit.
-    // If not, we can avoid re-serializing its props and state if asked again.
-    // Note that we avoid even comparing IDs for fibers not in the tree,
-    // so that we don't inadvertantly add them to the ID Map.
-    if (
-      shouldIncludeInTree &&
-      inspectedElementID !== null &&
-      inspectedElementID === getFiberID(getPrimaryFiber(nextFiber)) &&
-      nextFiber.actualDuration > 0
-    ) {
-      hasInspectedElementChanged = true;
-    }
-
     const isSuspense = nextFiber.tag === SuspenseComponent;
     let shouldResetChildren = false;
     // The behavior of timed-out Suspense trees is unique.
@@ -1509,7 +1492,6 @@ export function attach(
     }
   }
 
-  // TODO Send a no-op message if the specified Fiber hasn't been committed since it was last inspected.
   function inspectElementRaw(id: number): InspectedElement | null {
     let fiber = idToFiberMap.get(id);
 
@@ -1649,33 +1631,17 @@ export function attach(
     };
   }
 
-  let inspectedElementID: number | null = null;
-  let hasInspectedElementChanged: boolean = false;
-
-  function inspectElement(id: number): InspectedElementResponse | null {
-    if (inspectedElementID === id && !hasInspectedElementChanged) {
-      // Optimization: Don't resend (and reserialize) unchanged props.
-      return {
-        id,
-        inspectedElement: null,
-      };
-    }
-
-    inspectedElementID = id;
-    hasInspectedElementChanged = false;
-
-    let inspectedElement = inspectElementRaw(id);
-    if (inspectedElement === null) {
+  function inspectElement(id: number): InspectedElement | null {
+    let result = inspectElementRaw(id);
+    if (result === null) {
       return null;
     }
-
     // TODO Review sanitization approach for the below inspectable values.
-    inspectedElement.context = cleanForBridge(inspectedElement.context);
-    inspectedElement.hooks = cleanForBridge(inspectedElement.hooks);
-    inspectedElement.props = cleanForBridge(inspectedElement.props);
-    inspectedElement.state = cleanForBridge(inspectedElement.state);
-
-    return { id, inspectedElement };
+    result.context = cleanForBridge(result.context);
+    result.hooks = cleanForBridge(result.hooks);
+    result.props = cleanForBridge(result.props);
+    result.state = cleanForBridge(result.state);
+    return result;
   }
 
   function logElementToConsole(id) {
diff --git a/src/backend/types.js b/src/backend/types.js
index 93b283cd21b8..bd4562eef793 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,7 +1,7 @@
 // @flow
 
 import type { ElementType } from 'src/devtools/types';
-import type { InspectedElementResponse } from 'src/devtools/views/Components/types';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
   | 0 // PROD
@@ -105,7 +105,7 @@ export type RendererInterface = {
   getProfilingSummary: (rootID: number) => ProfilingSummary,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
-  inspectElement: (id: number) => InspectedElementResponse | null,
+  inspectElement: (id: number) => InspectedElement | null,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 5d4bacb28b76..6c0f2f6444f9 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -15,7 +15,6 @@ import { TreeStateContext } from './TreeContext';
 import type {
   DehydratedData,
   InspectedElement,
-  InspectedElementResponse,
 } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
 
@@ -70,33 +69,28 @@ function InspectedElementContextController({ children }: Props) {
 
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
-    const onInspectedElement = (
-      inspectedElementResponse: InspectedElementResponse | null
-    ) => {
-      if (inspectedElementResponse != null) {
-        let { inspectedElement } = inspectedElementResponse;
-        if (inspectedElement !== null) {
-          const id = inspectedElement.id;
-
-          inspectedElement = (({
-            ...inspectedElement,
-            context: hydrateHelper(inspectedElement.context),
-            hooks: hydrateHelper(inspectedElement.hooks),
-            props: hydrateHelper(inspectedElement.props),
-            state: hydrateHelper(inspectedElement.state),
-          }: any): InspectedElement);
-
-          const request = inProgressRequests.get(id);
-          if (request != null) {
-            inProgressRequests.delete(id);
-            request.resolveFn(inspectedElement);
-          } else {
-            resource.write(id, inspectedElement);
-
-            // Schedule update with React if the curently-selected element has been invalidated.
-            if (id === selectedElementID) {
-              setCount(count => count + 1);
-            }
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+      if (inspectedElement !== null) {
+        const id = inspectedElement.id;
+
+        inspectedElement = (({
+          ...inspectedElement,
+          context: hydrateHelper(inspectedElement.context),
+          hooks: hydrateHelper(inspectedElement.hooks),
+          props: hydrateHelper(inspectedElement.props),
+          state: hydrateHelper(inspectedElement.state),
+        }: any): InspectedElement);
+
+        const request = inProgressRequests.get(id);
+        if (request != null) {
+          inProgressRequests.delete(id);
+          request.resolveFn(inspectedElement);
+        } else {
+          resource.write(id, inspectedElement);
+
+          // Schedule update with React if the curently-selected element has been invalidated.
+          if (id === selectedElementID) {
+            setCount(count => count + 1);
           }
         }
       }
@@ -129,12 +123,10 @@ function InspectedElementContextController({ children }: Props) {
     // Update the $r variable.
     bridge.send('selectElement', { id: selectedElementID, rendererID });
 
-    const onInspectedElement = (
-      inspectedElementResponse: InspectedElementResponse | null
-    ) => {
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
       if (
-        inspectedElementResponse !== null &&
-        inspectedElementResponse.id === selectedElementID
+        inspectedElement !== null &&
+        inspectedElement.id === selectedElementID
       ) {
         // If this is the element we requested, wait a little bit and then ask for an update.
         timeoutID = setTimeout(sendRequest, 1000);
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 9953834f6b34..ca3c7e3df078 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -65,11 +65,6 @@ export type InspectedElement = {|
   source: Object | null,
 |};
 
-export type InspectedElementResponse = {|
-  id: number,
-  inspectedElement: InspectedElement | null,
-|};
-
 // TODO: Add profiling type
 
 export type DehydratedData = {|

From 7262a30cf38e6980e0b3f2245cc65f2b9510c071 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Apr 2019 18:04:25 -0700
Subject: [PATCH 475/814] Reverted optimization to avoid re-sending inspected
 fiber unless it committed

---
 src/devtools/cache.js                         | 22 +++----
 src/devtools/store.js                         |  5 +-
 .../Components/InspectedElementContext.js     | 59 ++++++++++++-------
 3 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 7aec26f21ee1..1e1279803093 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { createContext } from 'react';
-import LRU from 'lru-cache';
 
 // Cache implementation was forked from the React repo:
 // https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
@@ -68,18 +67,23 @@ function readContext(Context, observedBits) {
 const CacheContext = createContext(null);
 
 type Config = {
-  useLRU?: boolean,
+  useWeakMap?: boolean,
 };
 
-const entries: Map<Resource<any, any, any>, Map<any, any> | LRU> = new Map();
+const entries: Map<
+  Resource<any, any, any>,
+  Map<any, any> | WeakMap<any, any>
+> = new Map();
 const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
 
-function getEntriesForResource(resource: any): Map<any, any> | LRU {
+function getEntriesForResource(
+  resource: any
+): Map<any, any> | WeakMap<any, any> {
   let entriesForResource = ((entries.get(resource): any): Map<any, any>);
   if (entriesForResource === undefined) {
     const config = resourceConfigs.get(resource);
     entriesForResource =
-      config !== undefined && config.useLRU ? new LRU({ max: 10 }) : new Map();
+      config !== undefined && config.useWeakMap ? new WeakMap() : new Map();
     entries.set(resource, entriesForResource);
   }
   return entriesForResource;
@@ -122,7 +126,7 @@ function accessResult<Input, Key, Value>(
   }
 }
 
-export function createResource<Input, Key: string | number, Value>(
+export function createResource<Input, Key, Value>(
   fetch: Input => Thenable<Value>,
   hashInput: Input => Key,
   config?: Config = {}
@@ -134,11 +138,7 @@ export function createResource<Input, Key: string | number, Value>(
 
     invalidate(key: Key): void {
       const entriesForResource = getEntriesForResource(resource);
-      if (entriesForResource instanceof Map) {
-        entriesForResource.delete(key);
-      } else {
-        entriesForResource.set(key, undefined);
-      }
+      entriesForResource.delete(key);
     },
 
     read(input: Input): Value {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 9b67920c6cec..63d4ce543b2e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -68,8 +68,9 @@ export default class Store extends EventEmitter {
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
-  // Map of ID to Element.
-  // Elements are mutable (for now) to avoid excessive cloning during tree updates.
+  // Map of ID to (mutable) Element.
+  // Elements are mutated to avoid excessive cloning during tree updates.
+  // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
   // The user has imported a previously exported profiling session.
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 6c0f2f6444f9..0a87518f0523 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -2,6 +2,7 @@
 
 import React, {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -14,6 +15,7 @@ import { TreeStateContext } from './TreeContext';
 
 import type {
   DehydratedData,
+  Element,
   InspectedElement,
 } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
@@ -31,10 +33,10 @@ type InProgressRequest = {|
   resolveFn: ResolveFn,
 |};
 
-const inProgressRequests: Map<number, InProgressRequest> = new Map();
-const resource: Resource<number, number, InspectedElement> = createResource(
-  (id: number) => {
-    let request = inProgressRequests.get(id);
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<Element, Element, InspectedElement> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
     if (request != null) {
       return request.promise;
     }
@@ -44,12 +46,12 @@ const resource: Resource<number, number, InspectedElement> = createResource(
       resolveFn = resolve;
     });
 
-    inProgressRequests.set(id, { promise, resolveFn });
+    inProgressRequests.set(element, { promise, resolveFn });
 
     return promise;
   },
-  (id: number) => id,
-  { useLRU: true }
+  (element: Element) => element,
+  { useWeakMap: true }
 );
 
 type Props = {|
@@ -60,6 +62,18 @@ function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const read = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store]
+  );
+
   // It's very important that this context consumes selectedElementID and not inspectedElementID.
   // Otherwise the effect that sends the "inspect" message across the bridge-
   // would itself be blocked by the same render that suspends (waiting for the data).
@@ -81,16 +95,19 @@ function InspectedElementContextController({ children }: Props) {
           state: hydrateHelper(inspectedElement.state),
         }: any): InspectedElement);
 
-        const request = inProgressRequests.get(id);
-        if (request != null) {
-          inProgressRequests.delete(id);
-          request.resolveFn(inspectedElement);
-        } else {
-          resource.write(id, inspectedElement);
-
-          // Schedule update with React if the curently-selected element has been invalidated.
-          if (id === selectedElementID) {
-            setCount(count => count + 1);
+        const element = store.getElementByID(id);
+        if (element !== null) {
+          const request = inProgressRequests.get(element);
+          if (request != null) {
+            inProgressRequests.delete(element);
+            request.resolveFn(inspectedElement);
+          } else {
+            resource.write(element, inspectedElement);
+
+            // Schedule update with React if the curently-selected element has been invalidated.
+            if (id === selectedElementID) {
+              setCount(count => count + 1);
+            }
           }
         }
       }
@@ -98,7 +115,7 @@ function InspectedElementContextController({ children }: Props) {
 
     bridge.addListener('inspectedElement', onInspectedElement);
     return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, selectedElementID]);
+  }, [bridge, selectedElementID, store]);
 
   // This effect handler polls for updates on the currently selected element.
   useEffect(() => {
@@ -145,12 +162,10 @@ function InspectedElementContextController({ children }: Props) {
   }, [bridge, selectedElementID, store]);
 
   const value = useMemo(
-    () => ({
-      read: resource.read,
-    }),
+    () => ({ read }),
     // Count is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [count]
+    [count, read]
   );
 
   return (

From d8abecdcf997390eaf22dc1bb20fa3a0e81adf0b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 23 Apr 2019 15:25:55 +0100
Subject: [PATCH 476/814] Persist and restore selection in agent

This implements the infrastructure for saving and restoring renderer-specific selection state in the session storage.

Note this doesn't actually implement the calculation and tracking of paths in the renderer. It only simulates that the renderer can do it. The actual implementation will come in a later commit.
---
 src/backend/agent.js    | 98 +++++++++++++++++++++++++++++++++++++++--
 src/backend/renderer.js | 44 +++++++++++++++++-
 src/backend/types.js    | 14 ++++++
 src/constants.js        |  3 ++
 4 files changed, 154 insertions(+), 5 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 378a70f271fd..9f83fff38c1d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -3,10 +3,19 @@
 import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
-import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
+import {
+  LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_LAST_SELECTION_KEY,
+  __DEBUG__,
+} from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
-import type { RendererID, RendererInterface } from './types';
+import type {
+  PathFrame,
+  PathMatch,
+  RendererID,
+  RendererInterface,
+} from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -20,6 +29,11 @@ const debug = (methodName, ...args) => {
   }
 };
 
+type OperationsParams = {|
+  operations: Uint32Array,
+  rendererID: number,
+|};
+
 type InspectSelectParams = {|
   id: number,
   rendererID: number,
@@ -46,10 +60,17 @@ type OverrideSuspenseParams = {|
   forceFallback: boolean,
 |};
 
+type PersistedSelection = {|
+  rendererID: number,
+  path: Array<PathFrame>,
+|};
+
 export default class Agent extends EventEmitter {
   _bridge: Bridge = ((null: any): Bridge);
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
+  _persistedSelection: PersistedSelection | null = null;
+  _persistedSelectionMatch: PathMatch | null = null;
 
   constructor() {
     super();
@@ -59,6 +80,13 @@ export default class Agent extends EventEmitter {
 
       localStorage.removeItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
+
+    const persistedSelectionString = sessionStorage.getItem(
+      SESSION_STORAGE_LAST_SELECTION_KEY
+    );
+    if (persistedSelectionString != null) {
+      this._persistedSelection = JSON.parse(persistedSelectionString);
+    }
   }
 
   addBridge(bridge: Bridge) {
@@ -316,6 +344,19 @@ export default class Agent extends EventEmitter {
     } else {
       renderer.selectElement(id);
       this._bridge.send('selectElement');
+
+      // When user selects an element, stop trying to restore the selection,
+      // and instead remember the current selection for the next reload.
+      if (
+        this._persistedSelectionMatch === null ||
+        this._persistedSelectionMatch.id !== id
+      ) {
+        this._persistedSelection = null;
+        this._persistedSelectionMatch = null;
+        renderer.setTrackedPath(null);
+        this._throttledPersistSelection(rendererID, id);
+      }
+
       // TODO: If there was a way to change the selected DOM element
       // in native Elements tab without forcing a switch to it, we'd do it here.
       // For now, it doesn't seem like there is a way to do that:
@@ -388,6 +429,14 @@ export default class Agent extends EventEmitter {
     if (this._isProfiling) {
       rendererInterface.startProfiling();
     }
+
+    // When the renderer is attached, we need to tell it whether
+    // we remember the previous selection that we'd like to restore.
+    // It'll start tracking mounts for matches to the last selection path.
+    const selection = this._persistedSelection;
+    if (selection !== null && selection.rendererID === rendererID) {
+      rendererInterface.setTrackedPath(selection.path);
+    }
   }
 
   syncSelectionFromNativeElementsPanel = () => {
@@ -454,7 +503,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  onHookOperations = (operations: Uint32Array) => {
+  onHookOperations = ({ operations, rendererID }: OperationsParams) => {
     if (__DEBUG__) {
       debug('onHookOperations', operations);
     }
@@ -480,6 +529,31 @@ export default class Agent extends EventEmitter {
     //
     // this._bridge.send('operations', operations, [operations.buffer]);
     this._bridge.send('operations', operations);
+
+    if (this._persistedSelection !== null) {
+      if (this._persistedSelection.rendererID === rendererID) {
+        // Check if we can select a deeper match for the persisted selection.
+        const renderer = this._rendererInterfaces[rendererID];
+        const prevMatch = this._persistedSelectionMatch;
+        const nextMatch = renderer.getBestMatchForTrackedPath();
+        this._persistedSelectionMatch = nextMatch;
+        const prevMatchID = prevMatch !== null ? prevMatch.id : null;
+        const nextMatchID = nextMatch !== null ? nextMatch.id : null;
+        if (prevMatchID !== nextMatchID) {
+          if (nextMatchID !== null) {
+            // We moved forward, unlocking a deeper node.
+            this._bridge.send('selectFiber', nextMatchID);
+          }
+        }
+        if (nextMatch !== null && nextMatch.isFullMatch) {
+          // We've just unlocked the innermost selected node.
+          // There's no point tracking it further.
+          this._persistedSelection = null;
+          this._persistedSelectionMatch = null;
+          renderer.setTrackedPath(null);
+        }
+      }
+    }
   };
 
   _onClick = (event: MouseEvent) => {
@@ -530,4 +604,22 @@ export default class Agent extends EventEmitter {
     // because those are usually unintentional as you lift the cursor.
     { leading: false }
   );
+
+  _throttledPersistSelection = throttle((rendererID: number, id: number) => {
+    // This is throttled, so both renderer and selected ID
+    // might not be available by the time we read them.
+    // This is why we need the defensive checks here.
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      return;
+    }
+    const path = renderer.getPathForElement(id);
+    if (path === null) {
+      return;
+    }
+    sessionStorage.setItem(
+      SESSION_STORAGE_LAST_SELECTION_KEY,
+      JSON.stringify(({ rendererID, path }: PersistedSelection))
+    );
+  }, 1000);
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index e41ea782ff67..caf165dd8e0a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -36,6 +36,8 @@ import type {
   Interaction,
   Interactions,
   InteractionWithCommits,
+  PathFrame,
+  PathMatch,
   ProfilingSummary,
   ReactRenderer,
   RendererInterface,
@@ -664,7 +666,10 @@ export function attach(
       pendingOperationsQueue.push(ops);
     } else {
       // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', ops);
+      hook.emit('operations', {
+        operations: ops,
+        rendererID,
+      });
     }
 
     pendingOperations.length = 0;
@@ -1108,7 +1113,10 @@ export function attach(
       // We may have already queued up some operations before the frontend connected
       // If so, let the frontend know about them.
       localPendingOperationsQueue.forEach(ops => {
-        hook.emit('operations', ops);
+        hook.emit('operations', {
+          operations: ops,
+          rendererID,
+        });
       });
     } else {
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
@@ -1979,14 +1987,45 @@ export function attach(
     scheduleUpdate(fiber);
   }
 
+  let trackedPath: Array<PathFrame> | null = null;
+
+  function setTrackedPath(path: Array<PathFrame> | null) {
+    trackedPath = path;
+  }
+
+  function getPathForElement(id: number): Array<PathFrame> {
+    // TODO: this is not a real path.
+    return [
+      {
+        index: id,
+        key: null,
+        displayName: null,
+      },
+    ];
+  }
+
+  function getBestMatchForTrackedPath(): PathMatch | null {
+    // TODO: this is not a real lookup.
+    if (trackedPath !== null) {
+      const id = trackedPath[0].index;
+      const fiber = idToFiberMap.get(id);
+      if (fiber !== null) {
+        return { id, isFullMatch: true };
+      }
+    }
+    return null;
+  }
+
   return {
     cleanup,
     flushInitialOperations,
+    getBestMatchForTrackedPath,
     getCommitDetails,
     getFiberIDFromNative,
     getFiberCommits,
     getInteractions,
     findNativeByFiberID,
+    getPathForElement,
     getProfilingDataForDownload,
     getProfilingSummary,
     handleCommitFiberRoot,
@@ -2001,6 +2040,7 @@ export function attach(
     setInHook,
     setInProps,
     setInState,
+    setTrackedPath,
     startProfiling,
     stopProfiling,
   };
diff --git a/src/backend/types.js b/src/backend/types.js
index bd4562eef793..d77a6c1145dd 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -90,10 +90,22 @@ export type ProfilingSummary = {|
   rootID: number,
 |};
 
+export type PathFrame = {|
+  key: string | null,
+  index: number,
+  displayName: string | null,
+|};
+
+export type PathMatch = {|
+  id: number,
+  isFullMatch: boolean,
+|};
+
 export type RendererInterface = {
   cleanup: () => void,
   findNativeByFiberID: (id: number) => ?NativeType,
   flushInitialOperations: () => void,
+  getBestMatchForTrackedPath: () => PathMatch | null,
   getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
   getFiberIDFromNative: (
     component: NativeType,
@@ -103,6 +115,7 @@ export type RendererInterface = {
   getInteractions: (rootID: number) => Interactions,
   getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
+  getPathForElement: (id: number) => Array<PathFrame>,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
@@ -120,6 +133,7 @@ export type RendererInterface = {
   ) => void,
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
+  setTrackedPath: (path: Array<PathFrame> | null) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
 };
diff --git a/src/constants.js b/src/constants.js
index d64cc5da320a..588c8d42191a 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -8,4 +8,7 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
 
+export const SESSION_STORAGE_LAST_SELECTION_KEY =
+  'React::DevTools::lastSelection';
+
 export const __DEBUG__ = false;

From b1a7007cc5194d769610abf9de796eb152f161b1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 23 Apr 2019 15:42:51 +0100
Subject: [PATCH 477/814] Keep track of root insertion order in the renderer

Normally, Fibers have key or index which we'll use to match things up between reloads. However, roots don't have such a concept. We'll use their insertion order as an approximation. If it's consistent, we'll be able to restore the selection.
---
 src/backend/renderer.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index caf165dd8e0a..7275386270c0 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -539,6 +539,11 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
+  // Track the order in which roots were added.
+  // We will use it to disambiguate roots when restoring selection between reloads.
+  let nextRootIndex = 0;
+  const rootInsertionOrder: Map<number, number> = new Map();
+
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -690,6 +695,7 @@ export function attach(
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
 
     if (isRoot) {
+      rootInsertionOrder.set(id, nextRootIndex++);
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(ElementTypeRoot);
@@ -777,6 +783,7 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
+      rootInsertionOrder.delete(id);
       // Removing a root needs to happen at the end
       // so we don't batch it with other unmounts.
       pushOperation(TREE_OPERATION_REMOVE);

From 3bb837b683fcd41f48ca522b09ad7918e7fca6f7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 23 Apr 2019 16:01:31 +0100
Subject: [PATCH 478/814] Implement getPathForElement to serialize the selected
 path

Note this doesn't restore the selection yet.
---
 src/backend/renderer.js | 69 +++++++++++++++++++++++++++++++----------
 src/backend/types.js    |  5 +--
 2 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 7275386270c0..a3cc6272d44b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -324,7 +324,7 @@ export function attach(
   // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
   // TODO: Keep in sync with getElementType()
   function getDataForFiber(fiber: Fiber): FiberData {
-    const { elementType, type, key, tag } = fiber;
+    const { elementType, type, key, index, tag } = fiber;
 
     // This is to support lazy components with a Promise as the type.
     // see https://github.com/facebook/react/pull/13397
@@ -345,6 +345,7 @@ export function attach(
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
+          index,
           type: ElementTypeClass,
         };
         break;
@@ -353,6 +354,7 @@ export function attach(
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
+          index,
           type: ElementTypeFunction,
         };
         break;
@@ -360,6 +362,7 @@ export function attach(
         fiberData = {
           displayName: null,
           key,
+          index,
           type: ElementTypeEventComponent,
         };
         break;
@@ -376,6 +379,7 @@ export function attach(
         fiberData = {
           displayName,
           key,
+          index,
           type: ElementTypeEventTarget,
         };
         break;
@@ -388,6 +392,7 @@ export function attach(
         fiberData = {
           displayName,
           key,
+          index,
           type: ElementTypeForwardRef,
         };
         break;
@@ -395,6 +400,7 @@ export function attach(
         return {
           displayName: null,
           key: null,
+          index: 0,
           type: ElementTypeRoot,
         };
       case HostPortal:
@@ -404,6 +410,7 @@ export function attach(
         return {
           displayName: null,
           key,
+          index,
           type: ElementTypeOtherOrUnknown,
         };
       case MemoComponent:
@@ -417,6 +424,7 @@ export function attach(
         fiberData = {
           displayName,
           key,
+          index,
           type: ElementTypeMemo,
         };
         break;
@@ -430,6 +438,7 @@ export function attach(
             return {
               displayName: null,
               key: null,
+              index,
               type: ElementTypeOtherOrUnknown,
             };
           case CONTEXT_PROVIDER_NUMBER:
@@ -444,6 +453,7 @@ export function attach(
             fiberData = {
               displayName,
               key,
+              index,
               type: ElementTypeContext,
             };
             break;
@@ -462,6 +472,7 @@ export function attach(
             fiberData = {
               displayName,
               key,
+              index,
               type: ElementTypeContext,
             };
             break;
@@ -470,6 +481,7 @@ export function attach(
             fiberData = {
               displayName: null,
               key,
+              index,
               type: ElementTypeOtherOrUnknown,
             };
             break;
@@ -479,6 +491,7 @@ export function attach(
             fiberData = {
               displayName: 'Suspense',
               key,
+              index,
               type: ElementTypeSuspense,
             };
             break;
@@ -487,6 +500,7 @@ export function attach(
             fiberData = {
               displayName: `Profiler(${fiber.memoizedProps.id})`,
               key,
+              index,
               type: ElementTypeProfiler,
             };
             break;
@@ -496,6 +510,7 @@ export function attach(
             fiberData = {
               displayName: null,
               key,
+              index,
               type: ElementTypeOtherOrUnknown,
             };
             break;
@@ -2000,26 +2015,48 @@ export function attach(
     trackedPath = path;
   }
 
-  function getPathForElement(id: number): Array<PathFrame> {
-    // TODO: this is not a real path.
-    return [
-      {
-        index: id,
-        key: null,
-        displayName: null,
-      },
-    ];
+  function getPathFrame(fiber: Fiber): PathFrame {
+    let { displayName, key, index } = getDataForFiber(fiber);
+    if (fiber.tag === HostRoot) {
+      // Roots don't have a real index.
+      // Instead, we'll use the order in which it mounted.
+      const id = getFiberID(getPrimaryFiber(fiber));
+      const order = rootInsertionOrder.get(id);
+      if (typeof order !== 'number') {
+        throw new Error('Expected mounted root to have known insertion order.');
+      }
+      index = order;
+    }
+    return {
+      displayName,
+      key,
+      index,
+    };
+  }
+
+  // Produces a serializable representation that does a best effort
+  // of identifying a particular Fiber between page reloads.
+  // The return path will contain Fibers that are "invisible" to the store
+  // because their keys and indexes are important to restoring the selection.
+  function getPathForElement(id: number): Array<PathFrame> | null {
+    let fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      return null;
+    }
+    const keyPath = [];
+    while (fiber !== null) {
+      keyPath.push(getPathFrame(fiber));
+      fiber = fiber.return;
+    }
+    keyPath.reverse();
+    return keyPath;
   }
 
   function getBestMatchForTrackedPath(): PathMatch | null {
-    // TODO: this is not a real lookup.
     if (trackedPath !== null) {
-      const id = trackedPath[0].index;
-      const fiber = idToFiberMap.get(id);
-      if (fiber !== null) {
-        return { id, isFullMatch: true };
-      }
+      console.log('Looking for match for path: ', trackedPath);
     }
+    // TODO: implement this.
     return null;
   }
 
diff --git a/src/backend/types.js b/src/backend/types.js
index d77a6c1145dd..b9f0998e15df 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -14,7 +14,8 @@ export type Fiber = Object;
 // (e.g. props, state, context, hooks) then we could add a bitmask field for this
 // to keep the number of attributes small.
 export type FiberData = {|
-  key: React$Key | null,
+  key: string | null,
+  index: number,
   displayName: string | null,
   type: ElementType,
 |};
@@ -115,7 +116,7 @@ export type RendererInterface = {
   getInteractions: (rootID: number) => Interactions,
   getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummary,
-  getPathForElement: (id: number) => Array<PathFrame>,
+  getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,

From 7eb7c5a350f10a29c3629a72d08e2183ea2d9920 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 23 Apr 2019 16:56:24 +0100
Subject: [PATCH 479/814] Match Fibers to saved selection as they mount

This implements matching Fibers against the tracked selection path.

The algorithm is optimized to do as little checks as possible:

* When not trying to restore selection, we don't do anything
* When restoring selection, we only check .return pointers of new mounts
* Only when .return pointers match our current deepest match, we compare the frames
---
 src/backend/renderer.js | 132 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 126 insertions(+), 6 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index a3cc6272d44b..9d751756ae0e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -710,7 +710,6 @@ export function attach(
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
 
     if (isRoot) {
-      rootInsertionOrder.set(id, nextRootIndex++);
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(ElementTypeRoot);
@@ -784,6 +783,18 @@ export function attach(
   }
 
   function recordUnmount(fiber: Fiber, isSimulated: boolean) {
+    if (trackedPathMatchFiber !== null) {
+      // We're in the process of trying to restore previous selection.
+      // If this fiber matched but is being unmounted, there's no use trying.
+      // Reset the state so we don't keep holding onto it.
+      if (
+        fiber === trackedPathMatchFiber ||
+        fiber === trackedPathMatchFiber.alternate
+      ) {
+        setTrackedPath(null);
+      }
+    }
+
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
     if (!fiberToIDMap.has(primaryFiber)) {
@@ -798,7 +809,6 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      rootInsertionOrder.delete(id);
       // Removing a root needs to happen at the end
       // so we don't batch it with other unmounts.
       pushOperation(TREE_OPERATION_REMOVE);
@@ -834,6 +844,12 @@ export function attach(
       debug('mountFiberRecursively()', fiber, parentFiber);
     }
 
+    // If we have the tree selection from previous reload, try to match this Fiber.
+    // Also remember whether to do the same for siblings.
+    const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
+      fiber
+    );
+
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
     if (shouldIncludeInTree) {
       recordMount(fiber, parentFiber);
@@ -867,6 +883,10 @@ export function attach(
       }
     }
 
+    // We're exiting this Fiber now, and entering its siblings.
+    // If we have selection to restore, we might need to re-activate tracking.
+    updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);
+
     if (traverseSiblings && fiber.sibling !== null) {
       mountFiberRecursively(fiber.sibling, parentFiber, true);
     }
@@ -1141,9 +1161,15 @@ export function attach(
         });
       });
     } else {
+      // Before the traversals, remember to start tracking
+      // our path in case we have selection to restore.
+      if (trackedPath !== null) {
+        mightBeOnTrackedPath = true;
+      }
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
       hook.getFiberRoots(rendererID).forEach(root => {
         currentRootID = getFiberID(getPrimaryFiber(root.current));
+        rootInsertionOrder.set(currentRootID, nextRootIndex++);
 
         if (isProfiling) {
           // If profiling is active, store commit time and duration, and the current interactions.
@@ -1181,6 +1207,12 @@ export function attach(
 
     currentRootID = getFiberID(getPrimaryFiber(current));
 
+    // Before the traversals, remember to start tracking
+    // our path in case we have selection to restore.
+    if (trackedPath !== null) {
+      mightBeOnTrackedPath = true;
+    }
+
     if (isProfiling) {
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
@@ -1206,16 +1238,19 @@ export function attach(
         current.memoizedState != null && current.memoizedState.element != null;
       if (!wasMounted && isMounted) {
         // Mount a new root.
+        rootInsertionOrder.set(currentRootID, nextRootIndex++);
         mountFiberRecursively(current, null);
       } else if (wasMounted && isMounted) {
         // Update an existing root.
         updateFiberRecursively(current, alternate, null);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
+        rootInsertionOrder.delete(currentRootID);
         recordUnmount(current, false);
       }
     } else {
       // Mount a new root.
+      rootInsertionOrder.set(currentRootID, nextRootIndex++);
       mountFiberRecursively(current, null);
     }
 
@@ -2009,12 +2044,82 @@ export function attach(
     scheduleUpdate(fiber);
   }
 
+  // Remember if we're trying to restore the selection after reload.
+  // In that case, we'll do some extra checks for matching mounts.
   let trackedPath: Array<PathFrame> | null = null;
+  let trackedPathMatchFiber: Fiber | null = null;
+  let trackedPathMatchDepth = -1;
+  let mightBeOnTrackedPath = false;
 
   function setTrackedPath(path: Array<PathFrame> | null) {
+    if (path === null) {
+      trackedPathMatchFiber = null;
+      trackedPathMatchDepth = -1;
+      mightBeOnTrackedPath = false;
+    } else if (trackedPath !== null) {
+      throw new Error('Tracked path can only be set once.');
+    }
     trackedPath = path;
   }
 
+  // We call this before traversing a new mount.
+  // It remembers whether this Fiber is the next best match for tracked path.
+  // The return value signals whether we should keep matching siblings or not.
+  function updateTrackedPathStateBeforeMount(fiber: Fiber): boolean {
+    if (trackedPath === null || !mightBeOnTrackedPath) {
+      // Fast path: there's nothing to track so do nothing and ignore siblings.
+      return false;
+    }
+    const returnFiber = fiber.return;
+    const returnAlternate = returnFiber !== null ? returnFiber.alternate : null;
+    // By now we know there's some selection to restore, and this is a new Fiber.
+    // Is this newly mounted Fiber a direct child of the current best match?
+    // (This will also be true for new roots if we haven't matched anything yet.)
+    if (
+      trackedPathMatchFiber === returnFiber ||
+      (trackedPathMatchFiber === returnAlternate && returnAlternate !== null)
+    ) {
+      // Is this the next Fiber we should select? Let's compare the frames.
+      const actualFrame = getPathFrame(fiber);
+      const expectedFrame = trackedPath[trackedPathMatchDepth + 1];
+      if (expectedFrame === undefined) {
+        throw new Error('Expected to see a frame at the next depth.');
+      }
+      if (
+        actualFrame.index === expectedFrame.index &&
+        actualFrame.key === expectedFrame.key &&
+        actualFrame.displayName === expectedFrame.displayName
+      ) {
+        // We have our next match.
+        trackedPathMatchFiber = fiber;
+        trackedPathMatchDepth++;
+        // Are we out of frames to match?
+        if (trackedPathMatchDepth === trackedPath.length - 1) {
+          // There's nothing that can possibly match afterwards.
+          // Don't check the children.
+          mightBeOnTrackedPath = false;
+        } else {
+          // Check the children, as they might reveal the next match.
+          mightBeOnTrackedPath = true;
+        }
+        // In either case, since we have a match, we don't need
+        // to check the siblings. They'll never match.
+        return false;
+      }
+    }
+    // This Fiber's parent is on the path, but this Fiber itself isn't.
+    // There's no need to check its children--they won't be on the path either.
+    mightBeOnTrackedPath = false;
+    // However, one of its siblings may be on the path so keep searching.
+    return true;
+  }
+
+  function updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath) {
+    // updateTrackedPathStateBeforeMount() told us whether to match siblings.
+    // Now that we're entering siblings, let's use that information.
+    mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath;
+  }
+
   function getPathFrame(fiber: Fiber): PathFrame {
     let { displayName, key, index } = getDataForFiber(fiber);
     if (fiber.tag === HostRoot) {
@@ -2053,11 +2158,26 @@ export function attach(
   }
 
   function getBestMatchForTrackedPath(): PathMatch | null {
-    if (trackedPath !== null) {
-      console.log('Looking for match for path: ', trackedPath);
+    if (trackedPath === null) {
+      // Nothing to match.
+      return null;
     }
-    // TODO: implement this.
-    return null;
+    if (trackedPathMatchFiber === null) {
+      // We didn't find anything.
+      return null;
+    }
+    // Find the closest Fiber store is aware of.
+    let fiber = trackedPathMatchFiber;
+    while (fiber !== null && shouldFilterFiber(fiber)) {
+      fiber = fiber.return;
+    }
+    if (fiber === null) {
+      return null;
+    }
+    return {
+      id: getFiberID(getPrimaryFiber(fiber)),
+      isFullMatch: trackedPathMatchDepth === trackedPath.length - 1,
+    };
   }
 
   return {

From 26162988aa7f923b95b413ce9c6ec1503113162a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 23 Apr 2019 17:10:19 +0100
Subject: [PATCH 480/814] Fix tests

---
 src/backend/agent.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 9f83fff38c1d..39a1f383818a 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -81,11 +81,13 @@ export default class Agent extends EventEmitter {
       localStorage.removeItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
 
-    const persistedSelectionString = sessionStorage.getItem(
-      SESSION_STORAGE_LAST_SELECTION_KEY
-    );
-    if (persistedSelectionString != null) {
-      this._persistedSelection = JSON.parse(persistedSelectionString);
+    if (typeof sessionStorage !== 'undefined') {
+      const persistedSelectionString = sessionStorage.getItem(
+        SESSION_STORAGE_LAST_SELECTION_KEY
+      );
+      if (persistedSelectionString != null) {
+        this._persistedSelection = JSON.parse(persistedSelectionString);
+      }
     }
   }
 
@@ -617,9 +619,11 @@ export default class Agent extends EventEmitter {
     if (path === null) {
       return;
     }
-    sessionStorage.setItem(
-      SESSION_STORAGE_LAST_SELECTION_KEY,
-      JSON.stringify(({ rendererID, path }: PersistedSelection))
-    );
+    if (typeof sessionStorage !== 'undefined') {
+      sessionStorage.setItem(
+        SESSION_STORAGE_LAST_SELECTION_KEY,
+        JSON.stringify(({ rendererID, path }: PersistedSelection))
+      );
+    }
   }, 1000);
 }

From e050529c7d54af391330c991817c614ee6ef66dd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 15:00:46 +0100
Subject: [PATCH 481/814] Read renderer ID from operations

---
 src/backend/agent.js    |  8 ++------
 src/backend/renderer.js | 10 ++--------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 39a1f383818a..dee69506cbe4 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -29,11 +29,6 @@ const debug = (methodName, ...args) => {
   }
 };
 
-type OperationsParams = {|
-  operations: Uint32Array,
-  rendererID: number,
-|};
-
 type InspectSelectParams = {|
   id: number,
   rendererID: number,
@@ -505,7 +500,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  onHookOperations = ({ operations, rendererID }: OperationsParams) => {
+  onHookOperations = (operations: Uint32Array) => {
     if (__DEBUG__) {
       debug('onHookOperations', operations);
     }
@@ -533,6 +528,7 @@ export default class Agent extends EventEmitter {
     this._bridge.send('operations', operations);
 
     if (this._persistedSelection !== null) {
+      const rendererID = operations[0];
       if (this._persistedSelection.rendererID === rendererID) {
         // Check if we can select a deeper match for the persisted selection.
         const renderer = this._rendererInterfaces[rendererID];
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9d751756ae0e..f83dfcc6f971 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -686,10 +686,7 @@ export function attach(
       pendingOperationsQueue.push(ops);
     } else {
       // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', {
-        operations: ops,
-        rendererID,
-      });
+      hook.emit('operations', ops);
     }
 
     pendingOperations.length = 0;
@@ -1155,10 +1152,7 @@ export function attach(
       // We may have already queued up some operations before the frontend connected
       // If so, let the frontend know about them.
       localPendingOperationsQueue.forEach(ops => {
-        hook.emit('operations', {
-          operations: ops,
-          rendererID,
-        });
+        hook.emit('operations', ops);
       });
     } else {
       // Before the traversals, remember to start tracking

From 5d2d4213ec3d100b3245f8a3788bbc62c7361cef Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 15:02:52 +0100
Subject: [PATCH 482/814] Delete stale paths

---
 src/backend/agent.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index dee69506cbe4..976b838c889c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -608,18 +608,16 @@ export default class Agent extends EventEmitter {
     // might not be available by the time we read them.
     // This is why we need the defensive checks here.
     const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      return;
-    }
-    const path = renderer.getPathForElement(id);
-    if (path === null) {
-      return;
-    }
+    const path = renderer != null ? renderer.getPathForElement(id) : null;
     if (typeof sessionStorage !== 'undefined') {
-      sessionStorage.setItem(
-        SESSION_STORAGE_LAST_SELECTION_KEY,
-        JSON.stringify(({ rendererID, path }: PersistedSelection))
-      );
+      if (path !== null) {
+        sessionStorage.setItem(
+          SESSION_STORAGE_LAST_SELECTION_KEY,
+          JSON.stringify(({ rendererID, path }: PersistedSelection))
+        );
+      } else {
+        sessionStorage.removeItem(SESSION_STORAGE_LAST_SELECTION_KEY);
+      }
     }
   }, 1000);
 }

From f123763fe1b3d8c9bf188249afcc32baff3cc3fa Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 15:05:33 +0100
Subject: [PATCH 483/814] Read index off the Fiber

---
 src/backend/renderer.js | 20 +++-----------------
 src/backend/types.js    |  1 -
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f83dfcc6f971..cc3cae5c60d3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -324,7 +324,7 @@ export function attach(
   // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
   // TODO: Keep in sync with getElementType()
   function getDataForFiber(fiber: Fiber): FiberData {
-    const { elementType, type, key, index, tag } = fiber;
+    const { elementType, type, key, tag } = fiber;
 
     // This is to support lazy components with a Promise as the type.
     // see https://github.com/facebook/react/pull/13397
@@ -345,7 +345,6 @@ export function attach(
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
-          index,
           type: ElementTypeClass,
         };
         break;
@@ -354,7 +353,6 @@ export function attach(
         fiberData = {
           displayName: getDisplayName(resolvedType),
           key,
-          index,
           type: ElementTypeFunction,
         };
         break;
@@ -362,7 +360,6 @@ export function attach(
         fiberData = {
           displayName: null,
           key,
-          index,
           type: ElementTypeEventComponent,
         };
         break;
@@ -379,7 +376,6 @@ export function attach(
         fiberData = {
           displayName,
           key,
-          index,
           type: ElementTypeEventTarget,
         };
         break;
@@ -392,7 +388,6 @@ export function attach(
         fiberData = {
           displayName,
           key,
-          index,
           type: ElementTypeForwardRef,
         };
         break;
@@ -400,7 +395,6 @@ export function attach(
         return {
           displayName: null,
           key: null,
-          index: 0,
           type: ElementTypeRoot,
         };
       case HostPortal:
@@ -410,7 +404,6 @@ export function attach(
         return {
           displayName: null,
           key,
-          index,
           type: ElementTypeOtherOrUnknown,
         };
       case MemoComponent:
@@ -424,7 +417,6 @@ export function attach(
         fiberData = {
           displayName,
           key,
-          index,
           type: ElementTypeMemo,
         };
         break;
@@ -438,7 +430,6 @@ export function attach(
             return {
               displayName: null,
               key: null,
-              index,
               type: ElementTypeOtherOrUnknown,
             };
           case CONTEXT_PROVIDER_NUMBER:
@@ -453,7 +444,6 @@ export function attach(
             fiberData = {
               displayName,
               key,
-              index,
               type: ElementTypeContext,
             };
             break;
@@ -472,7 +462,6 @@ export function attach(
             fiberData = {
               displayName,
               key,
-              index,
               type: ElementTypeContext,
             };
             break;
@@ -481,7 +470,6 @@ export function attach(
             fiberData = {
               displayName: null,
               key,
-              index,
               type: ElementTypeOtherOrUnknown,
             };
             break;
@@ -491,7 +479,6 @@ export function attach(
             fiberData = {
               displayName: 'Suspense',
               key,
-              index,
               type: ElementTypeSuspense,
             };
             break;
@@ -500,7 +487,6 @@ export function attach(
             fiberData = {
               displayName: `Profiler(${fiber.memoizedProps.id})`,
               key,
-              index,
               type: ElementTypeProfiler,
             };
             break;
@@ -510,7 +496,6 @@ export function attach(
             fiberData = {
               displayName: null,
               key,
-              index,
               type: ElementTypeOtherOrUnknown,
             };
             break;
@@ -2115,7 +2100,8 @@ export function attach(
   }
 
   function getPathFrame(fiber: Fiber): PathFrame {
-    let { displayName, key, index } = getDataForFiber(fiber);
+    const { displayName, key } = getDataForFiber(fiber);
+    let index = fiber.index;
     if (fiber.tag === HostRoot) {
       // Roots don't have a real index.
       // Instead, we'll use the order in which it mounted.
diff --git a/src/backend/types.js b/src/backend/types.js
index b9f0998e15df..0bd16482333c 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -15,7 +15,6 @@ export type Fiber = Object;
 // to keep the number of attributes small.
 export type FiberData = {|
   key: string | null,
-  index: number,
   displayName: string | null,
   type: ElementType,
 |};

From 52deada495ce734aae582e31d48d20941bd68792 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 15:57:43 +0100
Subject: [PATCH 484/814] Bump React versions

---
 package.json |  8 ++++----
 yarn.lock    | 36 ++++++++++++++++++------------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index c8f49c3d1685..14ae85fd40de 100644
--- a/package.json
+++ b/package.json
@@ -128,14 +128,14 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "0.0.0-4221565e1",
+    "react": "0.0.0-fb28e9048",
     "react-color": "^2.11.7",
-    "react-dom": "0.0.0-4221565e1",
-    "react-is": "0.0.0-4221565e1",
+    "react-dom": "0.0.0-fb28e9048",
+    "react-is": "0.0.0-fb28e9048",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
-    "scheduler": "0.0.0-4221565e1",
+    "scheduler": "0.0.0-fb28e9048",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 557d16989999..2f1b774127e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9202,20 +9202,20 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@0.0.0-4221565e1:
-  version "0.0.0-4221565e1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"
-  integrity sha512-uoBFBMDt5OOAZQNWl72hqCuvVxE1YpAILqIHSwv2ktiLcHPmyByftiuFdqrjXVCJe3LR9sAQWrB8xWgC2bCi+w==
+react-dom@0.0.0-fb28e9048:
+  version "0.0.0-fb28e9048"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-fb28e9048.tgz#d4276f11a16f74b2cef0700bb5a8eefaee3761d2"
+  integrity sha512-C4bdIWINwV4pF1P0oN7fDAq+vTHOW2rxQLvGE5rDslGrK/DJ7bM5PrD81AcPkdgUnK3O/JvIkeGIvRcRgYemSw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-4221565e1"
+    scheduler "0.0.0-fb28e9048"
 
-react-is@0.0.0-4221565e1:
-  version "0.0.0-4221565e1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-4221565e1.tgz#b9516ac872939c5d805f970e7aff4b9d3b3cc99e"
-  integrity sha512-Ko7j3yyyQi5aB8tw3TmpmHrjeZbrzKm2FCKNpXJyXFAeummKLzeWH+M/gCh9w6EA6sZcX2W/YAX4U/KmeWjsWw==
+react-is@0.0.0-fb28e9048:
+  version "0.0.0-fb28e9048"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-fb28e9048.tgz#f2bdccfea1005ea5234719de192f25504ff4244e"
+  integrity sha512-McCC7GvLXMcY29GIiJ56bvuXFVTIwBr7wcz93TcGvUN23a7l0h9KjCwUjGQfEpBRG3pbeBtMxDc6GiXuVbK6Lg==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9245,15 +9245,15 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@0.0.0-4221565e1:
-  version "0.0.0-4221565e1"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-4221565e1.tgz#bc7f3e67f2c2c53693cda2e89e6fa71bfc89ebcd"
-  integrity sha512-iVAljelOxza6S9QcFMkxJCcj2Y+QDiv6XwGz9A8c5jtKejGOEKK/Xumg7uTDmGwy8vjGVDI7qGDW8Rta80xH9g==
+react@0.0.0-fb28e9048:
+  version "0.0.0-fb28e9048"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-fb28e9048.tgz#f3488c3e5cac772b2731d6d4bb3484410821254c"
+  integrity sha512-6zsjgsy9hcKC41T6X6SMbyf3fJ2VadmUxDgEXUVAJ2qV9q4SP0mnK4ttDfOwDvlFNbisqtS5HbS0hnWO/8iKxQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-4221565e1"
+    scheduler "0.0.0-fb28e9048"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9904,10 +9904,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-4221565e1:
-  version "0.0.0-4221565e1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-4221565e1.tgz#70c99271bd7bc4fbf4e7c69f31c003c4c61cd285"
-  integrity sha512-RhQ6QhkRJDXAcs6woR6p9UYDyjRguRsYXpWDFbCft45lWs4sSfszxPRr5TJVVLjIwPu0Wy0Mkd75smQ8TMponA==
+scheduler@0.0.0-fb28e9048:
+  version "0.0.0-fb28e9048"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-fb28e9048.tgz#5e7e37a44eb69204936a3ae67f187947980438a8"
+  integrity sha512-2s3rauGawjL8fGNLWHv5NJkUn8y1IOwAtptE6en0IRUcz33IZQyKlBlFpwdAKyarGScRL6p9FpcLYorXZCaDuw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 949384f4ca20651e56d1180289868d774162707e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 16:29:23 +0100
Subject: [PATCH 485/814] Select parent node if selection is removed

---
 src/devtools/store.js                        | 13 +++++----
 src/devtools/views/Components/TreeContext.js | 28 +++++++++++++-------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 63d4ce543b2e..ea501fd1af46 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -540,7 +540,7 @@ export default class Store extends EventEmitter {
         // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
         // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
         // Updating the selected search index later may require auto-expanding a collapsed subtree though.
-        this.emit('mutated', [[], []]);
+        this.emit('mutated', [[], new Map()]);
       }
     }
   }
@@ -625,7 +625,9 @@ export default class Store extends EventEmitter {
     }
 
     const addedElementIDs: Array<number> = [];
-    const removedElementIDs: Array<number> = [];
+    // This is a mapping of removed ID -> parent ID:
+    const removedElementIDs: Map<number, number> = new Map();
+    // We'll use the parent ID to adjust selection if it gets deleted.
 
     let i = 2;
     while (i < operations.length) {
@@ -789,7 +791,7 @@ export default class Store extends EventEmitter {
             }
 
             this._adjustParentTreeWeight(parentElement, -element.weight);
-            removedElementIDs.push(id);
+            removedElementIDs.set(id, parentID);
           }
           break;
         }
@@ -871,10 +873,7 @@ export default class Store extends EventEmitter {
       console.groupEnd();
     }
 
-    this.emit('mutated', [
-      new Uint32Array(addedElementIDs),
-      new Uint32Array(removedElementIDs),
-    ]);
+    this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
   onProfilingStatus = (isProfiling: boolean) => {
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 21b16e89a042..160dc44eaf61 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -67,7 +67,7 @@ type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
 |};
 type ACTION_HANDLE_STORE_MUTATION = {|
   type: 'HANDLE_STORE_MUTATION',
-  payload: [Uint32Array, Uint32Array],
+  payload: [Array<number>, Map<number, number>],
 |};
 type ACTION_RESET_OWNER_STACK = {|
   type: 'RESET_OWNER_STACK',
@@ -169,10 +169,20 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         numElements = store.numElements;
 
         // If the currently-selected Element has been removed from the tree, update selection state.
-        if (
+        const removedIDs = action.payload[1];
+        // Find the closest parent that wasn't removed during this batch.
+        // We deduce the parent-child mapping from removedIDs (id -> parentID)
+        // because by now it's too late to read them from the store.
+        while (
           selectedElementID !== null &&
-          store.getElementByID(selectedElementID) === null
+          removedIDs.has(selectedElementID)
         ) {
+          selectedElementID = ((removedIDs.get(
+            selectedElementID
+          ): any): number);
+        }
+        if (selectedElementID === 0) {
+          // The whole root was removed.
           selectedElementIndex = null;
         }
         break;
@@ -312,7 +322,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             removedElementIDs,
           ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;
 
-          removedElementIDs.forEach(id => {
+          removedElementIDs.forEach((parentID, id) => {
             // Prune this item from the search results.
             const index = searchResults.indexOf(id);
             if (index >= 0) {
@@ -738,10 +748,10 @@ function TreeContextController({ children }: Props) {
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
-    const handleStoreMutated = ([
-      addedElementIDs,
-      removedElementIDs,
-    ]: Array<Uint32Array>) => {
+    const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
+      Array<number>,
+      Map<number, number>,
+    ]) => {
       dispatchWrapper({
         type: 'HANDLE_STORE_MUTATION',
         payload: [addedElementIDs, removedElementIDs],
@@ -755,7 +765,7 @@ function TreeContextController({ children }: Props) {
       // It would only impact the search state, which is unlikely to exist yet at this point.
       dispatchWrapper({
         type: 'HANDLE_STORE_MUTATION',
-        payload: [new Uint32Array(0), new Uint32Array(0)],
+        payload: [[], new Map()],
       });
     }
 

From 7bae48f00c8e9e7228626ea3eb7388fcae87141f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Apr 2019 09:07:53 -0700
Subject: [PATCH 486/814] Fixed minor CSS overflow issue

---
 src/devtools/views/Profiler/SidebarCommitInfo.css   | 1 +
 src/devtools/views/Profiler/SidebarInteractions.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 5c28ac3b4c1b..0bbe66743201 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -10,6 +10,7 @@
   padding: 0.5rem;
   user-select: none;
   border-top: 1px solid var(--color-border);
+  overflow: auto;
 }
 
 .List {
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index 9b105db21086..c5643dfcd79f 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -10,6 +10,7 @@
   padding: 0.5rem;
   user-select: none;
   border-top: 1px solid var(--color-border);
+  overflow: auto;
 }
 
 .Name {

From 80597a23779fad309a74f79d390ccd3c631d5330 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Apr 2019 21:32:58 +0100
Subject: [PATCH 487/814] Use a heuristic for locating roots

---
 src/backend/renderer.js | 101 ++++++++++++++++++++++++++++++++--------
 1 file changed, 81 insertions(+), 20 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cc3cae5c60d3..27787f4f3c43 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -539,11 +539,6 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
-  // Track the order in which roots were added.
-  // We will use it to disambiguate roots when restoring selection between reloads.
-  let nextRootIndex = 0;
-  const rootInsertionOrder: Map<number, number> = new Map();
-
   function getFiberID(primaryFiber: Fiber): number {
     if (!fiberToIDMap.has(primaryFiber)) {
       const id = getUID();
@@ -1148,7 +1143,7 @@ export function attach(
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
       hook.getFiberRoots(rendererID).forEach(root => {
         currentRootID = getFiberID(getPrimaryFiber(root.current));
-        rootInsertionOrder.set(currentRootID, nextRootIndex++);
+        setRootPseudoKey(currentRootID, root.current);
 
         if (isProfiling) {
           // If profiling is active, store commit time and duration, and the current interactions.
@@ -1217,19 +1212,19 @@ export function attach(
         current.memoizedState != null && current.memoizedState.element != null;
       if (!wasMounted && isMounted) {
         // Mount a new root.
-        rootInsertionOrder.set(currentRootID, nextRootIndex++);
+        setRootPseudoKey(currentRootID, current);
         mountFiberRecursively(current, null);
       } else if (wasMounted && isMounted) {
         // Update an existing root.
         updateFiberRecursively(current, alternate, null);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
-        rootInsertionOrder.delete(currentRootID);
+        removeRootPseudoKey(currentRootID);
         recordUnmount(current, false);
       }
     } else {
       // Mount a new root.
-      rootInsertionOrder.set(currentRootID, nextRootIndex++);
+      setRootPseudoKey(currentRootID, current);
       mountFiberRecursively(current, null);
     }
 
@@ -2099,18 +2094,84 @@ export function attach(
     mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath;
   }
 
-  function getPathFrame(fiber: Fiber): PathFrame {
-    const { displayName, key } = getDataForFiber(fiber);
-    let index = fiber.index;
-    if (fiber.tag === HostRoot) {
-      // Roots don't have a real index.
-      // Instead, we'll use the order in which it mounted.
-      const id = getFiberID(getPrimaryFiber(fiber));
-      const order = rootInsertionOrder.get(id);
-      if (typeof order !== 'number') {
-        throw new Error('Expected mounted root to have known insertion order.');
+  // Roots don't have a real persistent identity.
+  // A root's "pseudo key" is "childDisplayName:indexWithThatName".
+  // For example, "App:0" or, in case of similar roots, "Story:0", "Story:1", etc.
+  // We will use this to try to disambiguate roots when restoring selection between reloads.
+  const rootPseudoKeys: Map<number, string> = new Map();
+  const rootDisplayNameCounter: Map<string, number> = new Map();
+
+  function setRootPseudoKey(id: number, fiber: Fiber) {
+    let preferredDisplayName = null;
+    let fallbackDisplayName = null;
+    let child = fiber.child;
+    // Go at most three levels deep into direct children
+    // while searching for a child that has a displayName.
+    for (let i = 0; i < 3; i++) {
+      if (child === null) {
+        break;
+      }
+      const displayName = getDataForFiber(child).displayName;
+      if (displayName !== null) {
+        // Prefer display names that we get from user-defined components.
+        // We want to avoid using e.g. 'Suspense' unless we find nothing else.
+        if (typeof child.type === 'function') {
+          // There's a few user-defined tags, but we'll prefer the ones
+          // that are usually explicitly named (function or class components).
+          preferredDisplayName = displayName;
+        } else if (fallbackDisplayName === null) {
+          fallbackDisplayName = displayName;
+        }
+      }
+      if (preferredDisplayName !== null) {
+        break;
       }
-      index = order;
+      child = child.child;
+    }
+    const name = preferredDisplayName || fallbackDisplayName || 'Unknown';
+    const counter = rootDisplayNameCounter.get(name) || 0;
+    rootDisplayNameCounter.set(name, counter + 1);
+    const pseudoKey = `${name}:${counter}`;
+    rootPseudoKeys.set(id, pseudoKey);
+  }
+
+  function removeRootPseudoKey(id: number) {
+    const pseudoKey = rootPseudoKeys.get(id);
+    if (pseudoKey === undefined) {
+      throw new Error('Expected root pseudo key to be known.');
+    }
+    const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));
+    const counter = rootDisplayNameCounter.get(name);
+    if (counter === undefined) {
+      throw new Error('Expected counter to be known.');
+    }
+    if (counter > 1) {
+      rootDisplayNameCounter.set(name, counter - 1);
+    } else {
+      rootDisplayNameCounter.delete(name);
+    }
+    rootPseudoKeys.delete(id);
+  }
+
+  function getPathFrame(fiber: Fiber): PathFrame {
+    let { displayName, key } = getDataForFiber(fiber);
+    const index = fiber.index;
+    switch (fiber.tag) {
+      case HostRoot:
+        // Roots don't have a real displayName, index, or key.
+        // Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).
+        const id = getFiberID(getPrimaryFiber(fiber));
+        const pseudoKey = rootPseudoKeys.get(id);
+        if (pseudoKey === undefined) {
+          throw new Error('Expected mounted root to have known pseudo key.');
+        }
+        displayName = pseudoKey;
+        break;
+      case HostComponent:
+        displayName = fiber.type;
+        break;
+      default:
+        break;
     }
     return {
       displayName,

From d5319566a163062de9e6bb8bfc8c466cf1d59f56 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 14:19:35 +0100
Subject: [PATCH 488/814] Fix broken start:prod command

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 14ae85fd40de..a97acfb8ba3e 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && opener ./index.html && cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
-    "start:prod": "cross-env NODE_ENV=production npm start",
+    "start:prod": "cd ./shells/dev && opener ./index.html && cross-env NODE_ENV=production webpack --config webpack.config.js --watch",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",

From 2993b168e55cd83d4bcf9265cad32bbe37e8a87e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 14:39:28 +0100
Subject: [PATCH 489/814] Mutate the children array

---
 src/devtools/store.js | 51 +++++++++++++++++++------------------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index ea501fd1af46..130ba146dedd 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -720,7 +720,7 @@ export default class Store extends EventEmitter {
             const parentElement = ((this._idToElement.get(
               parentID
             ): any): Element);
-            parentElement.children = parentElement.children.concat(id);
+            parentElement.children.push(id);
 
             const element: Element = {
               children: [],
@@ -785,9 +785,8 @@ export default class Store extends EventEmitter {
                   `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`
                 );
               }
-              parentElement.children = parentElement.children.filter(
-                childID => childID !== id
-              );
+              const index = parentElement.children.indexOf(id);
+              parentElement.children.splice(index, 1);
             }
 
             this._adjustParentTreeWeight(parentElement, -element.weight);
@@ -798,16 +797,7 @@ export default class Store extends EventEmitter {
         case TREE_OPERATION_REORDER_CHILDREN: {
           const id = ((operations[i + 1]: any): number);
           const numChildren = ((operations[i + 2]: any): number);
-          const nextChildren = ((operations.slice(
-            i + 3,
-            i + 3 + numChildren
-          ): any): Array<number>);
-
-          i = i + 3 + numChildren;
-
-          if (__DEBUG__) {
-            debug('Re-order', `Node ${id} children ${nextChildren.join(',')}`);
-          }
+          i = i + 3;
 
           if (!this._idToElement.has(id)) {
             throw Error(
@@ -816,26 +806,31 @@ export default class Store extends EventEmitter {
           }
 
           const element = ((this._idToElement.get(id): any): Element);
-          const prevChildren = element.children;
-          if (nextChildren.length !== prevChildren.length) {
+          const children = element.children;
+          if (children.length !== numChildren) {
             throw Error(
               `Children cannot be added or removed during a reorder operation.`
             );
           }
-          // This check is more expensive so it's gated
-          if (__DEV__) {
-            if (
-              nextChildren.find(childID => {
-                const childElement = this._idToElement.get(childID);
-                return childElement == null || childElement.parentID !== id;
-              }) != null
-            ) {
-              console.error(
-                `Children cannot be added or removed during a reorder operation.`
-              );
+
+          for (let j = 0; j < numChildren; j++) {
+            const childID = operations[i + j];
+            children[j] = childID;
+            if (__DEV__) {
+              // This check is more expensive so it's gated by __DEV__.
+              const childElement = this._idToElement.get(childID);
+              if (childElement == null || childElement.parentID !== id) {
+                console.error(
+                  `Children cannot be added or removed during a reorder operation.`
+                );
+              }
             }
           }
-          element.children = Array.from(nextChildren);
+          i = i + numChildren;
+
+          if (__DEBUG__) {
+            debug('Re-order', `Node ${id} children ${children.join(',')}`);
+          }
           break;
         }
         case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:

From e1383c666da1750beb74fb048cc5e70668cf3c7b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 14:57:38 +0100
Subject: [PATCH 490/814] Allow to set tracked path multiple times

Fixes #225. This happens when you close and reopen DevTools while on the same page.
---
 src/backend/renderer.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cc3cae5c60d3..09f34d7cf1ad 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2035,8 +2035,6 @@ export function attach(
       trackedPathMatchFiber = null;
       trackedPathMatchDepth = -1;
       mightBeOnTrackedPath = false;
-    } else if (trackedPath !== null) {
-      throw new Error('Tracked path can only be set once.');
     }
     trackedPath = path;
   }

From c8f8943c9ad60a5416cf1a5c57f9c0e966a49b4e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 17:11:24 +0100
Subject: [PATCH 491/814] Transfer strings in a string table

---
 OVERVIEW.md                                   | 43 +++++++++---
 src/backend/renderer.js                       | 70 +++++++++++--------
 src/devtools/store.js                         | 36 ++++++----
 .../views/Profiler/CommitTreeBuilder.js       | 36 ++++++----
 4 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index af1535faa8cc..f151512ee90c 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -14,10 +14,39 @@ The old DevTools also rendered the entire application tree in the form of a larg
 
 Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
 
-The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.
+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a string table. The rest of the array depends on the operations being made to the tree.
 
 No updates are required for many commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
 
+#### String table
+
+The string table is encoded right after the first two numbers.
+
+It consists of:
+
+1. the total length of next items that belong to string table
+2. for each string in a table:
+  1. encoded size
+  2. a list of its codepoints
+
+For example, for `Foo` and `Bar` we would see:
+
+```
+[
+  8,   // string table length
+  3,   // encoded display name size
+  70,  // "F"
+  111, // "o"
+  111, // "o"
+  3,   // encoded display name size
+  66,  // "B"
+  97,  // "a"
+  114, // "r"
+]
+```
+
+Later operations will reference strings by a one-based index. For example, `1` would mean `"Foo"`, and `2` would mean `"Bar"`. The `0` string id always represents `null` and isn't explicitly encoded in the table.
+
 #### Adding a root node
 
 Adding a root to the tree requires sending 4 numbers:
@@ -46,10 +75,8 @@ Adding a leaf node takes a variable number of numbers since we need to decode th
 1. element type constant (e.g. `1 === ElementTypeClass`)
 1. parent fiber id
 1. owner fiber id
-1. UTF encoded display name size
-   * (followed by this number of encoded values)
-1. UTF encoded key size
-   * (followed by this number of encoded values)
+1. string table id for `displayName`
+1. string table id for `key`
 
 For example, adding a function component `<Foo>` with an id 2:
 ```js
@@ -60,10 +87,8 @@ For example, adding a function component `<Foo>` with an id 2:
   1,   // parent id
   0,   // owner id
   3,   // encoded display name size
-  70,  // "F"
-  111, // "o"
-  111, // "o"
-  0,   // encoded key (null)
+  1,   // id of "Foo" displayName in the string table
+  0,   // id of null key in the string table (always zero for null)
 ]
 ```
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 07be08f9d159..89facf5165a6 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -590,6 +590,9 @@ export function attach(
   let pendingRealUnmountedIDs: Array<number> = [];
   let pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<Uint32Array> | null = [];
+  let pendingStringTable: Map<string, number> = new Map();
+  let pendingStringTableLength = 0;
+  let pendingStringTableCounter = 0;
 
   function pushOperation(op: number): void {
     if (__DEV__) {
@@ -620,6 +623,10 @@ export function attach(
     const ops = new Uint32Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
+      // How big is the string table?
+      1 + // [stringTableLength]
+      // Then goes the actual string table.
+      pendingStringTableLength +
       // All unmounts are batched in a single message.
       2 + // [TREE_OPERATION_REMOVE, removedIDLength]
         pendingRealUnmountedIDs.length +
@@ -635,6 +642,15 @@ export function attach(
     ops[i++] = rendererID;
     ops[i++] = getFiberID(getPrimaryFiber(root.current));
 
+    // Now fill in the string table.
+    // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
+    ops[i++] = pendingStringTableLength;
+    pendingStringTable.forEach((value, key) => {
+      ops[i++] = key.length;
+      ops.set(utfEncodeString(key), i);
+      i += key.length;
+    });
+
     // All unmounts except roots are batched in a single message.
     ops[i++] = TREE_OPERATION_REMOVE;
     // The first number is how many unmounted IDs we're gonna send.
@@ -672,6 +688,26 @@ export function attach(
     pendingOperations.length = 0;
     pendingRealUnmountedIDs.length = 0;
     pendingSimulatedUnmountedIDs.length = 0;
+    pendingStringTable.clear();
+    pendingStringTableLength = 0;
+    pendingStringTableCounter = 0;
+  }
+
+  function getStringID(str: string | null): number {
+    if (str === null) {
+      return 0;
+    }
+    const existingID = pendingStringTable.get(str);
+    if (existingID !== undefined) {
+      return existingID;
+    }
+    let id = ++pendingStringTableCounter;
+    pendingStringTable.set(str, id);
+    // The string table total length needs to account
+    // both for the string length, and for the array item
+    // that contains the length itself. Hence + 1.
+    pendingStringTableLength += str.length + 1;
+    return id;
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
@@ -700,41 +736,15 @@ export function attach(
         _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
       const parentID = getFiberID(getPrimaryFiber(parentFiber));
 
-      let encodedDisplayName = ((null: any): Uint8Array);
-      let encodedKey = ((null: any): Uint8Array);
-
-      if (displayName !== null) {
-        encodedDisplayName = utfEncodeString(displayName);
-      }
-
-      if (key !== null) {
-        // React$Key supports string and number types as inputs,
-        // But React converts numeric keys to strings, so we only have to handle that type here.
-        // https://github.com/facebook/react/blob/0e67969cb1ad8c27a72294662e68fa5d7c2c9783/packages/react/src/ReactElement.js#L187
-        encodedKey = utfEncodeString(((key: any): string));
-      }
-
-      const encodedDisplayNameSize =
-        displayName === null ? 0 : encodedDisplayName.length;
-      const encodedKeySize = key === null ? 0 : encodedKey.length;
-
+      let displayNameStringID = getStringID(displayName);
+      let keyStringID = getStringID(key);
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(type);
       pushOperation(parentID);
       pushOperation(ownerID);
-      pushOperation(encodedDisplayNameSize);
-      if (displayName !== null) {
-        for (let i = 0; i < encodedDisplayName.length; i++) {
-          pushOperation(encodedDisplayName[i]);
-        }
-      }
-      pushOperation(encodedKeySize);
-      if (key !== null) {
-        for (let i = 0; i < encodedKey.length; i++) {
-          pushOperation(encodedKey[i]);
-        }
-      }
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
     }
 
     if (isProfiling) {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 130ba146dedd..85ece39dd969 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -630,6 +630,22 @@ export default class Store extends EventEmitter {
     // We'll use the parent ID to adjust selection if it gets deleted.
 
     let i = 2;
+
+    // Reassemble the string table.
+    let stringTable = [
+      null, // ID = 0 corresponds to the null string.
+    ];
+    const stringTableSize = operations[i++];
+    const stringTableEnd = i + stringTableSize;
+    while (i < stringTableEnd) {
+      let nextLength = operations[i++];
+      let nextString = utfDecodeString(
+        (operations.slice(i, i + nextLength): any)
+      );
+      stringTable.push(nextString);
+      i += nextLength;
+    }
+
     while (i < operations.length) {
       const operation = operations[i];
       switch (operation) {
@@ -686,23 +702,13 @@ export default class Store extends EventEmitter {
             ownerID = ((operations[i]: any): number);
             i++;
 
-            const displayNameLength = operations[i];
+            const displayNameStringID = operations[i];
+            const displayName = stringTable[displayNameStringID];
             i++;
-            const displayName =
-              displayNameLength === 0
-                ? null
-                : utfDecodeString(
-                    (operations.slice(i, i + displayNameLength): any)
-                  );
-            i += displayNameLength;
-
-            const keyLength = operations[i];
+
+            const keyStringID = operations[i];
+            const key = stringTable[keyStringID];
             i++;
-            const key =
-              keyLength === 0
-                ? null
-                : utfDecodeString((operations.slice(i, i + keyLength): any));
-            i += +keyLength;
 
             if (__DEBUG__) {
               debug(
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index a91c7f0ab393..4e02f912fe2b 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -167,6 +167,22 @@ function updateTree(
   };
 
   let i = 2;
+
+  // Reassemble the string table.
+  let stringTable = [
+    null, // ID = 0 corresponds to the null string.
+  ];
+  const stringTableSize = operations[i++];
+  const stringTableEnd = i + stringTableSize;
+  while (i < stringTableEnd) {
+    let nextLength = operations[i++];
+    let nextString = utfDecodeString(
+      (operations.slice(i, i + nextLength): any)
+    );
+    stringTable.push(nextString);
+    i += nextLength;
+  }
+
   while (i < operations.length) {
     const operation = operations[i];
 
@@ -209,23 +225,13 @@ function updateTree(
 
           i++; // ownerID
 
-          const displayNameLength = operations[i];
+          const displayNameStringID = operations[i];
+          const displayName = stringTable[displayNameStringID];
           i++;
-          const displayName =
-            displayNameLength === 0
-              ? null
-              : utfDecodeString(
-                  (operations.slice(i, i + displayNameLength): any)
-                );
-          i += displayNameLength;
-
-          const keyLength = operations[i];
+
+          const keyStringID = operations[i];
+          const key = stringTable[keyStringID];
           i++;
-          const key =
-            keyLength === 0
-              ? null
-              : utfDecodeString((operations.slice(i, i + keyLength): any));
-          i += +keyLength;
 
           if (__DEBUG__) {
             debug(

From 3920ebd0a108144453e6d19f2d4f799201d3c9a1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 17:32:46 +0100
Subject: [PATCH 492/814] Clarify encoding in overview

---
 OVERVIEW.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index f151512ee90c..05069783d8fd 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -27,7 +27,7 @@ It consists of:
 1. the total length of next items that belong to string table
 2. for each string in a table:
   1. encoded size
-  2. a list of its codepoints
+  2. a list of its UTF encoded codepoints
 
 For example, for `Foo` and `Bar` we would see:
 
@@ -383,4 +383,4 @@ Here is an example of a profiling session consisting of two interactions:
 }
 ```
 
-The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profilingSummary_" message.
\ No newline at end of file
+The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profilingSummary_" message.

From af2d1374c4737b2e241528854650d1b4a0f4ce50 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 17:38:55 +0100
Subject: [PATCH 493/814] Let -> const

---
 src/devtools/store.js                            | 6 +++---
 src/devtools/views/Profiler/CommitTreeBuilder.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 85ece39dd969..60a99ed4b263 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -632,14 +632,14 @@ export default class Store extends EventEmitter {
     let i = 2;
 
     // Reassemble the string table.
-    let stringTable = [
+    const stringTable = [
       null, // ID = 0 corresponds to the null string.
     ];
     const stringTableSize = operations[i++];
     const stringTableEnd = i + stringTableSize;
     while (i < stringTableEnd) {
-      let nextLength = operations[i++];
-      let nextString = utfDecodeString(
+      const nextLength = operations[i++];
+      const nextString = utfDecodeString(
         (operations.slice(i, i + nextLength): any)
       );
       stringTable.push(nextString);
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 4e02f912fe2b..09bde587b55c 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -169,14 +169,14 @@ function updateTree(
   let i = 2;
 
   // Reassemble the string table.
-  let stringTable = [
+  const stringTable = [
     null, // ID = 0 corresponds to the null string.
   ];
   const stringTableSize = operations[i++];
   const stringTableEnd = i + stringTableSize;
   while (i < stringTableEnd) {
-    let nextLength = operations[i++];
-    let nextString = utfDecodeString(
+    const nextLength = operations[i++];
+    const nextString = utfDecodeString(
       (operations.slice(i, i + nextLength): any)
     );
     stringTable.push(nextString);

From 1bea469db0bdedd99fcc7257aa41f794c3fa4093 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Apr 2019 17:46:48 +0100
Subject: [PATCH 494/814] Remove unneeded variable

---
 src/backend/renderer.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 89facf5165a6..c4e515829b02 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -592,7 +592,6 @@ export function attach(
   let pendingOperationsQueue: Array<Uint32Array> | null = [];
   let pendingStringTable: Map<string, number> = new Map();
   let pendingStringTableLength = 0;
-  let pendingStringTableCounter = 0;
 
   function pushOperation(op: number): void {
     if (__DEV__) {
@@ -690,7 +689,6 @@ export function attach(
     pendingSimulatedUnmountedIDs.length = 0;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
-    pendingStringTableCounter = 0;
   }
 
   function getStringID(str: string | null): number {
@@ -701,7 +699,7 @@ export function attach(
     if (existingID !== undefined) {
       return existingID;
     }
-    let id = ++pendingStringTableCounter;
+    const id = pendingStringTable.size + 1;
     pendingStringTable.set(str, id);
     // The string table total length needs to account
     // both for the string length, and for the array item

From e88819a22ec1e62b3af1dbae046f0c329c623491 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Apr 2019 14:10:51 -0700
Subject: [PATCH 495/814] Reverse direction of menu items within drop-down
 owners list

---
 src/devtools/views/Components/OwnersStack.js | 26 +++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 3e98b2e59442..e252c6c9af9d 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -92,6 +92,20 @@ function ElementsDropdown({
   const store = useContext(StoreContext);
   const dispatch = useContext(TreeDispatcherContext);
 
+  const menuItems = [];
+  for (let index = ownerStack.length - 1; index >= 0; index--) {
+    const id = ownerStack[index];
+    menuItems.push(
+      <MenuItem
+        key={id}
+        className={styles.Component}
+        onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}
+      >
+        {((store.getElementByID(id): any): Element).displayName}
+      </MenuItem>
+    );
+  }
+
   return (
     <Menu>
       <MenuButton className={styles.MenuButton}>
@@ -101,17 +115,7 @@ function ElementsDropdown({
           </span>
         </Tooltip>
       </MenuButton>
-      <MenuList className={styles.Modal}>
-        {ownerStack.map((id, index) => (
-          <MenuItem
-            key={id}
-            className={styles.Component}
-            onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}
-          >
-            {((store.getElementByID(id): any): Element).displayName}
-          </MenuItem>
-        ))}
-      </MenuList>
+      <MenuList className={styles.Modal}>{menuItems}</MenuList>
     </Menu>
   );
 }

From b6d617ac7f06d712f0edd72fdfbccad3eaf06e68 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Apr 2019 15:05:39 -0700
Subject: [PATCH 496/814] Added 'back to owner' button when owners stack is
 collapsed

---
 src/devtools/views/ButtonIcon.js              | 10 ---
 src/devtools/views/Components/OwnersStack.css |  1 -
 src/devtools/views/Components/OwnersStack.js  | 62 +++++++++++++++----
 3 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 93891c5505cf..a42e02bdbc42 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -4,7 +4,6 @@ import React from 'react';
 import styles from './ButtonIcon.css';
 
 export type IconType =
-  | 'back'
   | 'cancel'
   | 'close'
   | 'collapsed'
@@ -33,9 +32,6 @@ type Props = {|
 export default function ButtonIcon({ type }: Props) {
   let pathData = null;
   switch (type) {
-    case 'back':
-      pathData = PATH_BACK;
-      break;
     case 'cancel':
       pathData = PATH_CANCEL;
       break;
@@ -115,12 +111,6 @@ export default function ButtonIcon({ type }: Props) {
   );
 }
 
-const PATH_BACK = `
-  M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9
-  2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41
-  10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
-`;
-
 const PATH_CANCEL = `
   M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
   16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index db2d946b83a1..1aba50714a33 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -47,7 +47,6 @@
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
-  margin-right: 0.5rem;
 }
 .MenuButtonContent {
   display: inline-flex;
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index e252c6c9af9d..dfe1fbb42beb 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -1,5 +1,6 @@
 // @flow
 import React, {
+  Fragment,
   useCallback,
   useContext,
   useLayoutEffect,
@@ -53,21 +54,25 @@ export default function OwnerStack() {
     <div className={styles.OwnerStack}>
       <div className={styles.Bar} ref={elementsBarRef}>
         {isOverflowing && (
-          <ElementsDropdown
-            ownerStack={ownerStack}
-            ownerStackIndex={ownerStackIndex}
-          />
+          <Fragment>
+            <ElementsDropdown
+              ownerStack={ownerStack}
+              ownerStackIndex={ownerStackIndex}
+            />
+            <BackToOwnerButton
+              ownerStack={ownerStack}
+              ownerStackIndex={ownerStackIndex}
+            />
+            <ElementView
+              id={ownerStack[((ownerStackIndex: any): number)]}
+              index={ownerStackIndex}
+            />
+          </Fragment>
         )}
-        {isOverflowing ? (
-          <ElementView
-            id={ownerStack[((ownerStackIndex: any): number)]}
-            index={ownerStackIndex}
-          />
-        ) : (
+        {!isOverflowing &&
           ownerStack.map((id, index) => (
             <ElementView key={id} id={id} index={index} />
-          ))
-        )}
+          ))}
       </div>
       <div className={styles.VRule} />
       <Button
@@ -149,3 +154,36 @@ function ElementView({ id, index }: ElementViewProps) {
     </Toggle>
   );
 }
+
+type BackToOwnerButtonProps = {|
+  ownerStack: Array<number>,
+  ownerStackIndex: number | null,
+|};
+function BackToOwnerButton({
+  ownerStack,
+  ownerStackIndex,
+}: BackToOwnerButtonProps) {
+  const store = useContext(StoreContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  if (ownerStackIndex === null || ownerStackIndex === 0) {
+    return null;
+  }
+
+  const ownerID = ownerStack[ownerStackIndex - 1];
+  const owner = store.getElementByID(ownerID);
+
+  return (
+    <Button
+      onClick={() =>
+        dispatch({
+          type: 'SELECT_OWNER',
+          payload: ownerID,
+        })
+      }
+      title={`Back to ${(owner !== null && owner.displayName) || 'owner'}`}
+    >
+      <ButtonIcon type="previous" />
+    </Button>
+  );
+}

From 15eacae02c1d526bdc54cbff6e32d068fd483257 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Apr 2019 15:19:13 -0700
Subject: [PATCH 497/814] Moved owners list calculations into the store and
 added tests

This is being done to fix a drill-through bug, although the initial fix is perhaps not the most performant one. At least we have test coverage now and a temporary fix.
---
 .../__snapshots__/storeOwners-test.js.snap    | 20 ++++
 src/__tests__/storeOwners-test.js             | 50 ++++++++++
 src/__tests__/storeSerializer.js              | 73 ++++++++++++++-
 src/devtools/store.js                         | 92 ++++++++-----------
 src/devtools/views/Components/Element.js      | 13 +--
 src/devtools/views/Components/Tree.js         |  4 -
 src/devtools/views/Components/TreeContext.js  | 58 +++---------
 7 files changed, 192 insertions(+), 118 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/storeOwners-test.js.snap
 create mode 100644 src/__tests__/storeOwners-test.js

diff --git a/src/__tests__/__snapshots__/storeOwners-test.js.snap b/src/__tests__/__snapshots__/storeOwners-test.js.snap
new file mode 100644
index 000000000000..cbb2177c9bee
--- /dev/null
+++ b/src/__tests__/__snapshots__/storeOwners-test.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf key="children">
+`;
+
+exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate>
+        <Leaf key=\\"children\\">"
+`;
+
+exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
+"  ▾ <Intermediate>
+    ▾ <Wrapper>"
+`;
diff --git a/src/__tests__/storeOwners-test.js b/src/__tests__/storeOwners-test.js
new file mode 100644
index 000000000000..7e49bc803feb
--- /dev/null
+++ b/src/__tests__/storeOwners-test.js
@@ -0,0 +1,50 @@
+// @flow
+
+const { printOwnersList } = require('./storeSerializer');
+
+describe('Store owners list', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let store;
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+  });
+
+  it('should drill through intermediate components', () => {
+    const Root = () => (
+      <Intermediate>
+        <Leaf key="children" />
+      </Intermediate>
+    );
+    const Wrapper = ({ children }) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(
+      printOwnersList(store.getOwnersListForElement(intermediateID))
+    ).toMatchSnapshot('3: components owned by <Intermediate>');
+  });
+});
diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
index 0f4b8602fc43..fc1b8d18ff8c 100644
--- a/src/__tests__/storeSerializer.js
+++ b/src/__tests__/storeSerializer.js
@@ -1,9 +1,74 @@
 import Store from 'src/devtools/store';
 
-export function test(value) {
-  return value instanceof Store;
+// test() is part of Jest's serializer API
+export function test(maybeStore) {
+  return maybeStore instanceof Store;
 }
 
-export function print(value, serialize, indent) {
-  return value.__toSnapshot();
+// print() is part of Jest's serializer API
+export function print(store, serialize, indent) {
+  return printStore(store);
+}
+
+export function printElement(element, includeWeight = false) {
+  let prefix = ' ';
+  if (element.children.length > 0) {
+    prefix = element.isCollapsed ? '▸' : '▾';
+  }
+
+  let key = '';
+  if (element.key !== null) {
+    key = ` key="${element.key}"`;
+  }
+
+  let suffix = '';
+  if (includeWeight) {
+    suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
+  }
+
+  return `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
+    'null'}${key}>${suffix}`;
+}
+
+export function printOwnersList(elements, includeWeight = false) {
+  return elements
+    .map(element => printElement(element, includeWeight))
+    .join('\n');
+}
+
+// Used for Jest snapshot testing.
+// May also be useful for visually debugging the tree, so it lives on the Store.
+export function printStore(store, includeWeight = false) {
+  const snapshotLines = [];
+
+  let rootWeight = 0;
+
+  store.roots.forEach(rootID => {
+    const { weight } = store.getElementByID(rootID);
+
+    snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
+
+    for (let i = rootWeight; i < rootWeight + weight; i++) {
+      const element = store.getElementAtIndex(i);
+
+      if (element == null) {
+        throw Error(`Could not find element at index ${i}`);
+      }
+
+      snapshotLines.push(printElement(element, includeWeight));
+    }
+
+    rootWeight += weight;
+  });
+
+  // Make sure the pretty-printed test align with the Store's reported number of total rows.
+  if (rootWeight !== store.numElements) {
+    throw Error(
+      `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${
+        store.numElements
+      })`
+    );
+  }
+
+  return snapshotLines.join('\n');
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 60a99ed4b263..16a447c98ca4 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -13,6 +13,7 @@ import { ElementTypeRoot } from './types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
+import { printStore } from 'src/__tests__/storeSerializer';
 
 import type { ElementType } from './types';
 import type { Element } from './views/Components/types';
@@ -405,6 +406,14 @@ export default class Store extends EventEmitter {
     return index;
   }
 
+  getOwnersListForElement(id: number): Array<Element> {
+    const list = [];
+
+    this._populateOwnersList(id, id, 0, list);
+
+    return list;
+  }
+
   getRendererIDForElement(id: number): number | null {
     let current = this._idToElement.get(id);
     while (current != null) {
@@ -552,6 +561,32 @@ export default class Store extends EventEmitter {
     THROTTLE_CAPTURE_SCREENSHOT_DURATION
   );
 
+  _populateOwnersList(
+    id: number,
+    ownerID: number,
+    depth: number,
+    list: Array<Element>
+  ) {
+    const element = this._idToElement.get(id);
+    if (element != null) {
+      const isInList = id === ownerID || element.ownerID === ownerID;
+      if (isInList) {
+        list.push({
+          ...element,
+          depth: depth,
+        });
+      }
+      element.children.forEach(childID =>
+        this._populateOwnersList(
+          childID,
+          ownerID,
+          isInList ? depth + 1 : depth,
+          list
+        )
+      );
+    }
+  }
+
   _takeProfilingSnapshotRecursive = (id: number) => {
     const element = this.getElementByID(id);
     if (element !== null) {
@@ -870,7 +905,7 @@ export default class Store extends EventEmitter {
     }
 
     if (__DEBUG__) {
-      console.log(this.__toSnapshot(true));
+      console.log(printStore(this, true));
       console.groupEnd();
     }
 
@@ -917,59 +952,4 @@ export default class Store extends EventEmitter {
     this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
-
-  // Used for Jest snapshot testing.
-  // May also be useful for visually debugging the tree, so it lives on the Store.
-  __toSnapshot = (includeWeight: boolean = false) => {
-    const snapshotLines = [];
-
-    let rootWeight = 0;
-
-    this._roots.forEach(rootID => {
-      const { weight } = ((this.getElementByID(rootID): any): Element);
-
-      snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
-
-      for (let i = rootWeight; i < rootWeight + weight; i++) {
-        const element = ((this.getElementAtIndex(i): any): Element);
-
-        if (element == null) {
-          throw Error(`Could not find element at index ${i}`);
-        }
-
-        let prefix = ' ';
-        if (element.children.length > 0) {
-          prefix = element.isCollapsed ? '▸' : '▾';
-        }
-
-        let key = '';
-        if (element.key !== null) {
-          key = ` key="${element.key}"`;
-        }
-
-        let suffix = '';
-        if (includeWeight) {
-          suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
-        }
-
-        snapshotLines.push(
-          `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
-            'null'}${key}>${suffix}`
-        );
-      }
-
-      rootWeight += weight;
-    });
-
-    // Make sure the pretty-printed test align with the Store's reported number of total rows.
-    if (rootWeight !== this._weightAcrossRoots) {
-      throw Error(
-        `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${
-          this._weightAcrossRoots
-        })`
-      );
-    }
-
-    return snapshotLines.join('\n');
-  };
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 0fa93b40ac37..bfe0ce65ce19 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -29,17 +29,14 @@ type Props = {
 
 export default function ElementView({ data, index, style }: Props) {
   const store = useContext(StoreContext);
-  const {
-    baseDepth,
-    ownerFlatTree,
-    ownerStack,
-    selectedElementID,
-  } = useContext(TreeStateContext);
+  const { ownerFlatTree, ownerStack, selectedElementID } = useContext(
+    TreeStateContext
+  );
   const dispatch = useContext(TreeDispatcherContext);
 
   const element =
     ownerFlatTree !== null
-      ? store.getElementByID(ownerFlatTree[index])
+      ? ownerFlatTree[index]
       : store.getElementAtIndex(index);
 
   const [isHovered, setIsHovered] = useState(false);
@@ -158,7 +155,7 @@ export default function ElementView({ data, index, style }: Props) {
         ...style, // "style" comes from react-window
 
         // Left padding presents the appearance of a nested tree structure.
-        paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
+        paddingLeft: `${depth * 0.75 + 0.25}rem`,
 
         // These style overrides enable the background color to fill the full visible width,
         // when combined with the CSS tweaks in Tree.
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 9ecfa58e6081..0a96f163b0ca 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -22,7 +22,6 @@ import SearchInput from './SearchInput';
 import styles from './Tree.css';
 
 export type ItemData = {|
-  baseDepth: number,
   numElements: number,
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
@@ -35,7 +34,6 @@ type Props = {||};
 export default function Tree(props: Props) {
   const dispatch = useContext(TreeDispatcherContext);
   const {
-    baseDepth,
     numElements,
     ownerStack,
     searchIndex,
@@ -255,7 +253,6 @@ export default function Tree(props: Props) {
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
     () => ({
-      baseDepth,
       numElements,
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
@@ -263,7 +260,6 @@ export default function Tree(props: Props) {
       treeFocused,
     }),
     [
-      baseDepth,
       numElements,
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 160dc44eaf61..002f6b619ee4 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -40,7 +40,6 @@ import type { Element } from './types';
 
 type StateContext = {|
   // Tree
-  baseDepth: number,
   numElements: number,
   selectedElementID: number | null,
   selectedElementIndex: number | null,
@@ -51,7 +50,7 @@ type StateContext = {|
   searchText: string,
 
   // Owners
-  ownerFlatTree: Array<number> | null,
+  ownerFlatTree: Array<Element> | null,
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
 
@@ -133,7 +132,6 @@ TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
 type State = {|
   // Tree
-  baseDepth: number,
   numElements: number,
   selectedElementID: number | null,
   selectedElementIndex: number | null,
@@ -146,7 +144,7 @@ type State = {|
   // Owners
   ownerStack: Array<number>,
   ownerStackIndex: number | null,
-  ownerFlatTree: Array<number> | null,
+  ownerFlatTree: Array<Element> | null,
 
   // Inspection element panel
   inspectedElementID: number | null,
@@ -441,7 +439,6 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
 
 function reduceOwnersState(store: Store, state: State, action: Action): State {
   let {
-    baseDepth,
     numElements,
     selectedElementID,
     selectedElementIndex,
@@ -477,7 +474,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
         }
         if (selectedElementID !== null && ownerFlatTree !== null) {
           // Mutation might have caused the index of this ID to shift.
-          selectedElementIndex = ownerFlatTree.indexOf(selectedElementID);
+          selectedElementIndex = ownerFlatTree.findIndex(
+            element => element.id === selectedElementID
+          );
         }
       } else {
         if (selectedElementID !== null) {
@@ -509,7 +508,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       if (ownerFlatTree !== null) {
         const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
         selectedElementIndex =
-          payload === null ? null : ownerFlatTree.indexOf(payload);
+          payload === null
+            ? null
+            : ownerFlatTree.findIndex(element => element.id === payload);
       }
       break;
     case 'SELECT_NEXT_ELEMENT_IN_TREE':
@@ -574,18 +575,11 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   ) {
     if (ownerStackIndex === null) {
       ownerFlatTree = null;
-      baseDepth = 0;
       numElements = store.numElements;
     } else {
-      ownerFlatTree = calculateCurrentOwnerList(
-        store,
-        ownerStack[ownerStackIndex],
-        ownerStack[ownerStackIndex],
-        []
+      ownerFlatTree = store.getOwnersListForElement(
+        ownerStack[ownerStackIndex]
       );
-
-      baseDepth = ((store.getElementByID(ownerFlatTree[0]): any): Element)
-        .depth;
       numElements = ownerFlatTree.length;
     }
   }
@@ -595,14 +589,14 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     if (selectedElementIndex === null) {
       selectedElementID = null;
     } else if (ownerFlatTree !== null) {
-      selectedElementID = ownerFlatTree[((selectedElementIndex: any): number)];
+      selectedElementID =
+        ownerFlatTree[((selectedElementIndex: any): number)].id;
     }
   }
 
   return {
     ...state,
 
-    baseDepth,
     numElements,
     selectedElementID,
     selectedElementIndex,
@@ -692,7 +686,6 @@ function TreeContextController({ children }: Props) {
 
   const [state, dispatch] = useReducer(reducer, {
     // Tree
-    baseDepth: 0,
     numElements: store.numElements,
     selectedElementIndex: null,
     selectedElementID: null,
@@ -783,33 +776,6 @@ function TreeContextController({ children }: Props) {
   );
 }
 
-function calculateCurrentOwnerList(
-  store: Store,
-  rootOwnerID: number,
-  elementID: number,
-  ownerList: Array<number>
-): Array<number> {
-  if (elementID === rootOwnerID) {
-    ownerList.push(elementID);
-    const { children } = ((store.getElementByID(elementID): any): Element);
-    children.forEach(childID =>
-      calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
-    );
-  } else {
-    const { children, ownerID } = ((store.getElementByID(
-      elementID
-    ): any): Element);
-    if (ownerID === rootOwnerID) {
-      ownerList.push(elementID);
-      children.forEach(childID =>
-        calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)
-      );
-    }
-  }
-
-  return ownerList;
-}
-
 function recursivelySearchTree(
   store: Store,
   elementID: number,

From 09029acf009aeecdd10bbaeddfe3463568d23c0d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Apr 2019 12:16:13 -0700
Subject: [PATCH 498/814] Refactored owners list to use cached metadata (and
 added more tests)

---
 .../__snapshots__/storeOwners-test.js.snap    | 105 ++++++++++++++-
 src/__tests__/storeOwners-test.js             | 123 +++++++++++++++++-
 src/devtools/store.js                         | 112 +++++++++++-----
 3 files changed, 306 insertions(+), 34 deletions(-)

diff --git a/src/__tests__/__snapshots__/storeOwners-test.js.snap b/src/__tests__/__snapshots__/storeOwners-test.js.snap
index cbb2177c9bee..28069711fd68 100644
--- a/src/__tests__/__snapshots__/storeOwners-test.js.snap
+++ b/src/__tests__/__snapshots__/storeOwners-test.js.snap
@@ -1,20 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate key="intermediate">
+        <Leaf key="leaf">
+      ▾ <Wrapper key="wrapper">
+          <Leaf>
+      <Leaf key="leaf">
+`;
+
+exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate key=\\"intermediate\\">
+        <Leaf>
+      <Leaf key=\\"leaf\\">"
+`;
+
+exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `
+"  ▾ <Intermediate key=\\"intermediate\\">
+      <Leaf key=\\"leaf\\">
+    ▾ <Wrapper key=\\"wrapper\\">"
+`;
+
 exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
 [root]
   ▾ <Root>
     ▾ <Intermediate>
       ▾ <Wrapper>
-          <Leaf key="children">
+          <Leaf>
 `;
 
 exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
 "  ▾ <Root>
     ▾ <Intermediate>
-        <Leaf key=\\"children\\">"
+        <Leaf>"
 `;
 
 exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
 "  ▾ <Intermediate>
     ▾ <Wrapper>"
 `;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate>
+        <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf>
+    ▾ <Intermediate>
+        <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `
+[root]
+    <Root>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `"    <Root>"`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf key="A">
+      <Leaf key="B">
+      <Leaf key="C">
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf key=\\"A\\">
+      <Leaf key=\\"B\\">
+      <Leaf key=\\"C\\">"
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf key="C">
+      <Leaf key="B">
+      <Leaf key="A">
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf key=\\"C\\">
+      <Leaf key=\\"B\\">
+      <Leaf key=\\"A\\">"
+`;
diff --git a/src/__tests__/storeOwners-test.js b/src/__tests__/storeOwners-test.js
index 7e49bc803feb..f4853b2fe0c7 100644
--- a/src/__tests__/storeOwners-test.js
+++ b/src/__tests__/storeOwners-test.js
@@ -27,7 +27,9 @@ describe('Store owners list', () => {
   it('should drill through intermediate components', () => {
     const Root = () => (
       <Intermediate>
-        <Leaf key="children" />
+        <div>
+          <Leaf />
+        </div>
       </Intermediate>
     );
     const Wrapper = ({ children }) => children;
@@ -47,4 +49,123 @@ describe('Store owners list', () => {
       printOwnersList(store.getOwnersListForElement(intermediateID))
     ).toMatchSnapshot('3: components owned by <Intermediate>');
   });
+
+  it('should drill through interleaved intermediate components', () => {
+    const Root = () => [
+      <Intermediate key="intermediate">
+        <Leaf />
+      </Intermediate>,
+      <Leaf key="leaf" />,
+    ];
+    const Wrapper = ({ children }) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({ children }) => [
+      <Leaf key="leaf" />,
+      <Wrapper key="wrapper">{children}</Wrapper>,
+    ];
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(
+      printOwnersList(store.getOwnersListForElement(intermediateID))
+    ).toMatchSnapshot('3: components owned by <Intermediate>');
+  });
+
+  it('should show the proper owners list order and contents after insertions and deletions', () => {
+    const Root = ({ includeDirect, includeIndirect }) => (
+      <div>
+        {includeDirect ? <Leaf /> : null}
+        {includeIndirect ? (
+          <Intermediate>
+            <Leaf />
+          </Intermediate>
+        ) : null}
+      </div>
+    );
+    const Wrapper = ({ children }) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+    const container = document.createElement('div');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={false} includeIndirect={true} />,
+        container
+      )
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={true} includeIndirect={true} />,
+        container
+      )
+    );
+    expect(store).toMatchSnapshot('3: update to add direct');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('4: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={true} includeIndirect={false} />,
+        container
+      )
+    );
+    expect(store).toMatchSnapshot('5: update to remove indirect');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('6: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={false} includeIndirect={false} />,
+        container
+      )
+    );
+    expect(store).toMatchSnapshot('7: update to remove both');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('8: components owned by <Root>');
+  });
+
+  it('should show the proper owners list ordering after reordered children', () => {
+    const Root = ({ ascending }) =>
+      ascending
+        ? [<Leaf key="A" />, <Leaf key="B" />, <Leaf key="C" />]
+        : [<Leaf key="C" />, <Leaf key="B" />, <Leaf key="A" />];
+    const Leaf = () => <div>Leaf</div>;
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Root ascending={true} />, container));
+    expect(store).toMatchSnapshot('1: mount (ascending)');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    act(() => ReactDOM.render(<Root ascending={false} />, container));
+    expect(store).toMatchSnapshot('3: update (descending)');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID))
+    ).toMatchSnapshot('4: components owned by <Root>');
+  });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 16a447c98ca4..dcb894160a0e 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -81,6 +81,10 @@ export default class Store extends EventEmitter {
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
 
+  // Map of element (id) to the set of elements (ids) it owns.
+  // This map enables getOwnersListForElement() to avoid traversing the entire tree.
+  _ownersMap: Map<number, Set<number>> = new Map();
+
   // Suspense cache for reading profiling data.
   _profilingCache: ProfilingCache;
 
@@ -406,10 +410,65 @@ export default class Store extends EventEmitter {
     return index;
   }
 
-  getOwnersListForElement(id: number): Array<Element> {
+  getOwnersListForElement(ownerID: number): Array<Element> {
     const list = [];
+    let element = this._idToElement.get(ownerID);
+    if (element != null) {
+      list.push({
+        ...element,
+        depth: 0,
+      });
 
-    this._populateOwnersList(id, id, 0, list);
+      const unsortedIDs = this._ownersMap.get(ownerID);
+      if (unsortedIDs !== undefined) {
+        const depthMap: Map<number, number> = new Map([[ownerID, 0]]);
+
+        // Items in a set are ordered based on insertion.
+        // This does not correlate with their order in the tree.
+        // So first we need to order them.
+        // I wish we could avoid this sorting operation; we could sort at insertion time,
+        // but then we'd have to pay sorting costs even if the owners list was never used.
+        // Seems better to defer the cost, since the set of ids is probably pretty small.
+        const sortedIDs = Array.from(unsortedIDs).sort(
+          (idA, idB) =>
+            ((this.getIndexOfElementID(idA): any): number) -
+            ((this.getIndexOfElementID(idB): any): number)
+        );
+
+        // Next we need to determine the appropriate depth for each element in the list.
+        // The depth in the list may not correspond to the depth in the tree,
+        // because the list has been filtered to remove intermediate components.
+        // Perhaps the easiest way to do this is to walk up the tree until we reach either:
+        // (1) another node that's already in the tree, or (2) the root (owner)
+        // at which point, our depth is just the depth of that node plus one.
+        sortedIDs.forEach(id => {
+          const element = this._idToElement.get(id);
+          if (element != null) {
+            let parentID = element.parentID;
+
+            let depth = 0;
+            while (parentID > 0) {
+              if (parentID === ownerID || unsortedIDs.has(parentID)) {
+                depth = depthMap.get(parentID) + 1;
+                depthMap.set(id, depth);
+                break;
+              }
+              const parent = this._idToElement.get(parentID);
+              if (parent == null) {
+                break;
+              }
+              parentID = parent.parentID;
+            }
+
+            if (depth === 0) {
+              throw Error('Invalid owners list');
+            }
+
+            list.push({ ...element, depth });
+          }
+        });
+      }
+    }
 
     return list;
   }
@@ -561,32 +620,6 @@ export default class Store extends EventEmitter {
     THROTTLE_CAPTURE_SCREENSHOT_DURATION
   );
 
-  _populateOwnersList(
-    id: number,
-    ownerID: number,
-    depth: number,
-    list: Array<Element>
-  ) {
-    const element = this._idToElement.get(id);
-    if (element != null) {
-      const isInList = id === ownerID || element.ownerID === ownerID;
-      if (isInList) {
-        list.push({
-          ...element,
-          depth: depth,
-        });
-      }
-      element.children.forEach(childID =>
-        this._populateOwnersList(
-          childID,
-          ownerID,
-          isInList ? depth + 1 : depth,
-          list
-        )
-      );
-    }
-  }
-
   _takeProfilingSnapshotRecursive = (id: number) => {
     const element = this.getElementByID(id);
     if (element !== null) {
@@ -779,6 +812,15 @@ export default class Store extends EventEmitter {
             this._idToElement.set(id, element);
             addedElementIDs.push(id);
             this._adjustParentTreeWeight(parentElement, 1);
+
+            if (ownerID > 0) {
+              let set = this._ownersMap.get(ownerID);
+              if (set === undefined) {
+                set = new Set();
+                this._ownersMap.set(ownerID, set);
+              }
+              set.add(id);
+            }
           }
           break;
         }
@@ -798,13 +840,13 @@ export default class Store extends EventEmitter {
             i = i + 1;
 
             const element = ((this._idToElement.get(id): any): Element);
-            if (element.children.length > 0) {
+            const { children, ownerID, parentID, weight } = element;
+            if (children.length > 0) {
               throw new Error(`Node ${id} was removed before its children.`);
             }
 
             this._idToElement.delete(id);
 
-            const parentID = element.parentID;
             let parentElement = null;
             if (parentID === 0) {
               if (__DEBUG__) {
@@ -830,8 +872,16 @@ export default class Store extends EventEmitter {
               parentElement.children.splice(index, 1);
             }
 
-            this._adjustParentTreeWeight(parentElement, -element.weight);
+            this._adjustParentTreeWeight(parentElement, -weight);
             removedElementIDs.set(id, parentID);
+
+            this._ownersMap.delete(id);
+            if (ownerID > 0) {
+              const set = this._ownersMap.get(ownerID);
+              if (set !== undefined) {
+                set.delete(id);
+              }
+            }
           }
           break;
         }

From 281616f462866f382c0fead366c7b2b5172a1ce5 Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 21 Apr 2019 01:06:02 -0700
Subject: [PATCH 499/814] Support highlighting of all DOM elements of
 Fragments, not just first

Fixes https://github.com/bvaughn/react-devtools-experimental/issues/131

Uses the new function `findAllCurrentHostFibers`.

Removes dependency on React's `renderer.findHostInstanceByFiber` function
which used to highlight only the first DOM element of a Fragment.

Reworked `src/backend/views/Overlay` to support highlighting
more than one element rectangle annotated with one tooltip.
Fixed minor issues with the tooltip position calculation.
---
 src/backend/agent.js             |  11 +-
 src/backend/renderer.js          |  52 +++++-
 src/backend/types.js             |   3 +-
 src/backend/views/Highlighter.js |   6 +-
 src/backend/views/Overlay.js     | 278 ++++++++++++++++++++++---------
 5 files changed, 250 insertions(+), 100 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 976b838c889c..40afd10c4bc1 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -276,18 +276,19 @@ export default class Agent extends EventEmitter {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     }
 
-    let node: HTMLElement | null = null;
+    let nodes: ?Array<HTMLElement> = null;
     if (renderer !== null) {
-      node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
+      nodes = ((renderer.findNativeByFiberID(id): any): ?Array<HTMLElement>);
     }
 
-    if (node != null) {
+    if (nodes != null && nodes[0] != null) {
+      const node = nodes[0];
       if (scrollIntoView && typeof node.scrollIntoView === 'function') {
         // If the node isn't visible show it before highlighting it.
         // We may want to reconsider this; it might be a little disruptive.
         node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }
-      showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout);
+      showOverlay(nodes, displayName, hideAfterTimeout);
       if (openNativeElementsPanel) {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
         this._bridge.send('syncSelectionToNativeElementsPanel');
@@ -585,7 +586,7 @@ export default class Agent extends EventEmitter {
 
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
-    showOverlay(target, null, false);
+    showOverlay([target], null, false);
 
     this._selectFiberForNode(target);
   };
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c4e515829b02..eddcafd0b194 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1258,24 +1258,58 @@ export function attach(
     currentRootID = -1;
   }
 
+  function findAllCurrentHostFibers(parent: Fiber): $ReadOnlyArray<Fiber> {
+    const fibers = [];
+    const currentParent = findCurrentFiberUsingSlowPath(parent);
+    if (!currentParent) {
+      return fibers;
+    }
+
+    // Next we'll drill down this component to find all HostComponent/Text.
+    let node: Fiber = currentParent;
+    while (true) {
+      if (node.tag === HostComponent || node.tag === HostText) {
+        fibers.push(node);
+      } else if (node.child) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === currentParent) {
+        return fibers;
+      }
+      while (!node.sibling) {
+        if (!node.return || node.return === currentParent) {
+          return fibers;
+        }
+        node = node.return;
+      }
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+    // Flow needs the return here, but ESLint complains about it.
+    // eslint-disable-next-line no-unreachable
+    return fibers;
+  }
+
   function findNativeByFiberID(id: number) {
     try {
-      const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+      let fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
       if (fiber === null) {
         return null;
       }
+      // Special case for a timed-out Suspense.
       const isTimedOutSuspense =
         fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-      if (!isTimedOutSuspense) {
-        // Normal case.
-        return renderer.findHostInstanceByFiber(fiber);
-      } else {
+      if (isTimedOutSuspense) {
         // A timed-out Suspense's findDOMNode is useless.
         // Try our best to find the fallback directly.
         const maybeFallbackFiber =
           (fiber.child && fiber.child.sibling) || fiber;
-        return renderer.findHostInstanceByFiber(maybeFallbackFiber);
+        fiber = maybeFallbackFiber;
       }
+      const hostFibers = findAllCurrentHostFibers(fiber);
+      return hostFibers.map(hostFiber => hostFiber.stateNode).filter(Boolean);
     } catch (err) {
       // The fiber might have unmounted by now.
       return null;
@@ -1715,9 +1749,9 @@ export function attach(
     if (result.hooks !== null) {
       console.log('Hooks:', result.hooks);
     }
-    const nativeNode = findNativeByFiberID(id);
-    if (nativeNode !== null) {
-      console.log('Node:', nativeNode);
+    const nativeNodes = findNativeByFiberID(id);
+    if (nativeNodes !== null) {
+      console.log('Nodes:', nativeNodes);
     }
     if (window.chrome || /firefox/i.test(navigator.userAgent)) {
       console.log(
diff --git a/src/backend/types.js b/src/backend/types.js
index 0bd16482333c..8b0a759e5100 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -25,7 +25,6 @@ export type RendererID = number;
 type Dispatcher = any;
 
 export type ReactRenderer = {
-  findHostInstanceByFiber: (fiber: Object) => ?NativeType,
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
   bundleType: BundleType,
@@ -103,7 +102,7 @@ export type PathMatch = {|
 
 export type RendererInterface = {
   cleanup: () => void,
-  findNativeByFiberID: (id: number) => ?NativeType,
+  findNativeByFiberID: (id: number) => ?Array<NativeType>,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
   getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter.js
index c5339f676389..9445d838e3de 100644
--- a/src/backend/views/Highlighter.js
+++ b/src/backend/views/Highlighter.js
@@ -17,7 +17,7 @@ export function hideOverlay() {
 }
 
 export function showOverlay(
-  element: HTMLElement | null,
+  elements: Array<HTMLElement> | null,
   componentName: string | null,
   hideAfterTimeout: boolean
 ) {
@@ -25,7 +25,7 @@ export function showOverlay(
     clearTimeout(timeoutID);
   }
 
-  if (element == null) {
+  if (elements == null) {
     return;
   }
 
@@ -33,7 +33,7 @@ export function showOverlay(
     overlay = new Overlay();
   }
 
-  overlay.inspect(element, componentName);
+  overlay.inspect(elements, componentName);
 
   if (hideAfterTimeout) {
     timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js
index 276055f83058..55ef361dc627 100644
--- a/src/backend/views/Overlay.js
+++ b/src/backend/views/Overlay.js
@@ -11,30 +11,17 @@ type Rect = {
   width: number,
 };
 
-// Note that this component is not affected by the active Theme,
-// because it highlights elements in the main Chrome window (outside of devtools).
+// Note that the Overlay components are not affected by the active Theme,
+// because they highlight elements in the main Chrome window (outside of devtools).
 // The colors below were chosen to roughly match those used by Chrome devtools.
-export default class Overlay {
-  window: window;
-  container: HTMLElement;
+
+class OverlayRect {
   node: HTMLElement;
   border: HTMLElement;
   padding: HTMLElement;
   content: HTMLElement;
-  tip: HTMLElement;
-  nameSpan: HTMLElement;
-  dimSpan: HTMLElement;
-
-  constructor() {
-    // Find the root window, because overlays are positioned relative to it.
-    let currentWindow = window;
-    while (currentWindow !== currentWindow.parent) {
-      currentWindow = currentWindow.parent;
-    }
 
-    const doc = currentWindow.document;
-    this.window = currentWindow;
-    this.container = doc.createElement('div');
+  constructor(doc, container) {
     this.node = doc.createElement('div');
     this.border = doc.createElement('div');
     this.padding = doc.createElement('div');
@@ -50,8 +37,59 @@ export default class Overlay {
       position: 'fixed',
     });
 
+    this.node.style.zIndex = '10000000';
+
+    this.node.appendChild(this.border);
+    this.border.appendChild(this.padding);
+    this.padding.appendChild(this.content);
+    container.appendChild(this.node);
+  }
+
+  remove() {
+    if (this.node.parentNode) {
+      this.node.parentNode.removeChild(this.node);
+    }
+  }
+
+  update(box, dims) {
+    boxWrap(dims, 'margin', this.node);
+    boxWrap(dims, 'border', this.border);
+    boxWrap(dims, 'padding', this.padding);
+
+    assign(this.content.style, {
+      height:
+        box.height -
+        dims.borderTop -
+        dims.borderBottom -
+        dims.paddingTop -
+        dims.paddingBottom +
+        'px',
+      width:
+        box.width -
+        dims.borderLeft -
+        dims.borderRight -
+        dims.paddingLeft -
+        dims.paddingRight +
+        'px',
+    });
+
+    assign(this.node.style, {
+      top: box.top - dims.marginTop + 'px',
+      left: box.left - dims.marginLeft + 'px',
+    });
+  }
+}
+
+class OverlayTip {
+  tip: HTMLElement;
+  nameSpan: HTMLElement;
+  dimSpan: HTMLElement;
+
+  constructor(doc, container) {
     this.tip = doc.createElement('div');
     assign(this.tip.style, {
+      display: 'flex',
+      flexFlow: 'row nowrap',
       backgroundColor: '#333740',
       borderRadius: '2px',
       fontFamily:
@@ -61,6 +99,7 @@ export default class Overlay {
       pointerEvents: 'none',
       position: 'fixed',
       fontSize: '12px',
+      whiteSpace: 'nowrap',
     });
 
     this.nameSpan = doc.createElement('span');
@@ -77,80 +116,151 @@ export default class Overlay {
       color: '#d7d7d7',
     });
 
-    this.container.style.zIndex = '10000000';
-    this.node.style.zIndex = '10000000';
     this.tip.style.zIndex = '10000000';
-    this.container.appendChild(this.node);
-    this.container.appendChild(this.tip);
-    this.node.appendChild(this.border);
-    this.border.appendChild(this.padding);
-    this.padding.appendChild(this.content);
+    container.appendChild(this.tip);
+  }
+
+  remove() {
+    if (this.tip.parentNode) {
+      this.tip.parentNode.removeChild(this.tip);
+    }
+  }
+
+  updateText(name, width, height) {
+    this.nameSpan.textContent = name;
+    this.dimSpan.textContent =
+      Math.round(width) + 'px × ' + Math.round(height) + 'px';
+  }
+
+  updatePosition(dims, bounds) {
+    const tipRect = this.tip.getBoundingClientRect();
+    const tipPos = findTipPos(dims, bounds, {
+      width: tipRect.width,
+      height: tipRect.height,
+    });
+    assign(this.tip.style, tipPos.style);
+  }
+}
+
+export default class Overlay {
+  window: window;
+  tipBoundsWindow: window;
+  container: HTMLElement;
+  tip: OverlayTip;
+  rects: Array<OverlayRect>;
+
+  constructor() {
+    // Find the root window, because overlays are positioned relative to it.
+    let currentWindow = window;
+    while (currentWindow !== currentWindow.parent) {
+      currentWindow = currentWindow.parent;
+    }
+    this.window = currentWindow;
+
+    // When opened in shells/dev, the tooltip should be bound by the app iframe, not by the topmost window.
+    let tipBoundsWindow = window;
+    while (
+      tipBoundsWindow !== tipBoundsWindow.parent &&
+      !tipBoundsWindow.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')
+    ) {
+      tipBoundsWindow = tipBoundsWindow.parent;
+    }
+    this.tipBoundsWindow = tipBoundsWindow;
+
+    const doc = currentWindow.document;
+    this.container = doc.createElement('div');
+    this.container.style.zIndex = '10000000';
+
+    this.tip = new OverlayTip(doc, this.container);
+    this.rects = [];
+
     doc.body.appendChild(this.container);
   }
 
   remove() {
+    this.tip.remove();
+    this.rects.forEach(rect => {
+      rect.remove();
+    });
+    this.rects.length = 0;
     if (this.container.parentNode) {
       this.container.parentNode.removeChild(this.container);
     }
   }
 
-  inspect(node: HTMLElement, name?: ?string) {
+  inspect(nodes: Array<HTMLElement>, name?: ?string) {
     // We can't get the size of text nodes or comment nodes. React as of v15
     // heavily uses comment nodes to delimit text.
-    if (node.nodeType !== Node.ELEMENT_NODE) {
+    const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+    while (this.rects.length > elements.length) {
+      const rect = this.rects.pop();
+      rect.remove();
+    }
+    if (elements.length === 0) {
       return;
     }
-    const box = getNestedBoundingClientRect(node, this.window);
-    const dims = getElementDimensions(node);
 
-    boxWrap(dims, 'margin', this.node);
-    boxWrap(dims, 'border', this.border);
-    boxWrap(dims, 'padding', this.padding);
-
-    assign(this.content.style, {
-      height:
-        box.height -
-        dims.borderTop -
-        dims.borderBottom -
-        dims.paddingTop -
-        dims.paddingBottom +
-        'px',
-      width:
-        box.width -
-        dims.borderLeft -
-        dims.borderRight -
-        dims.paddingLeft -
-        dims.paddingRight +
-        'px',
-    });
+    while (this.rects.length < elements.length) {
+      this.rects.push(new OverlayRect(this.window.document, this.container));
+    }
 
-    assign(this.node.style, {
-      top: box.top - dims.marginTop + 'px',
-      left: box.left - dims.marginLeft + 'px',
+    const outerBox = {
+      top: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY,
+      left: Number.POSITIVE_INFINITY,
+    };
+    elements.forEach((element, index) => {
+      const box = getNestedBoundingClientRect(element, this.window);
+      const dims = getElementDimensions(element);
+
+      outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
+      outerBox.right = Math.max(
+        outerBox.right,
+        box.left + box.width + dims.marginRight
+      );
+      outerBox.bottom = Math.max(
+        outerBox.bottom,
+        box.top + box.height + dims.marginBottom
+      );
+      outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
+
+      const rect = this.rects[index];
+      rect.update(box, dims);
     });
 
     if (!name) {
-      name = node.nodeName.toLowerCase();
-      const ownerName = getOwnerDisplayName(node);
+      name = elements[0].nodeName.toLowerCase();
+      const ownerName = getOwnerDisplayName(elements[0]);
       if (ownerName) {
         name += ' (in ' + ownerName + ')';
       }
     }
 
-    this.nameSpan.textContent = name;
-    this.dimSpan.textContent =
-      Math.round(box.width) + 'px × ' + Math.round(box.height) + 'px';
-
-    const tipPos = findTipPos(
+    this.tip.updateText(
+      name,
+      outerBox.right - outerBox.left,
+      outerBox.bottom - outerBox.top
+    );
+    const tipBounds = getNestedBoundingClientRect(
+      this.tipBoundsWindow.document.documentElement,
+      this.window
+    );
+    this.tip.updatePosition(
       {
-        top: box.top - dims.marginTop,
-        left: box.left - dims.marginLeft,
-        height: box.height + dims.marginTop + dims.marginBottom,
-        width: box.width + dims.marginLeft + dims.marginRight,
+        top: outerBox.top,
+        left: outerBox.left,
+        height: outerBox.bottom - outerBox.top,
+        width: outerBox.right - outerBox.left,
       },
-      this.window
+      {
+        top: tipBounds.top + this.tipBoundsWindow.scrollY,
+        left: tipBounds.left + this.tipBoundsWindow.scrollX,
+        height: this.tipBoundsWindow.innerHeight,
+        width: this.tipBoundsWindow.innerWidth,
+      }
     );
-    assign(this.tip.style, tipPos);
   }
 }
 
@@ -185,35 +295,41 @@ function getFiber(node) {
   return null;
 }
 
-function findTipPos(dims, win) {
-  const tipHeight = 20;
+function findTipPos(dims, bounds, tipSize) {
+  const tipHeight = Math.max(tipSize.height, 20);
+  const tipWidth = Math.max(tipSize.width, 60);
   const margin = 5;
+
   let top;
-  if (dims.top + dims.height + tipHeight <= win.innerHeight) {
-    if (dims.top + dims.height < 0) {
-      top = margin;
+  if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {
+    if (dims.top + dims.height < bounds.top + 0) {
+      top = bounds.top + margin;
     } else {
       top = dims.top + dims.height + margin;
     }
-  } else if (dims.top - tipHeight <= win.innerHeight) {
-    if (dims.top - tipHeight - margin < margin) {
-      top = margin;
+  } else if (dims.top - tipHeight <= bounds.top + bounds.height) {
+    if (dims.top - tipHeight - margin < bounds.top + margin) {
+      top = bounds.top + margin;
     } else {
       top = dims.top - tipHeight - margin;
     }
   } else {
-    top = win.innerHeight - tipHeight - margin;
+    top = bounds.top + bounds.height - tipHeight - margin;
   }
 
-  top += 'px';
-
-  if (dims.left < 0) {
-    return { top, left: margin };
+  let left = dims.left + margin;
+  if (dims.left < bounds.left) {
+    left = bounds.left + margin;
   }
-  if (dims.left + 200 > win.innerWidth) {
-    return { top, right: margin };
+  if (dims.left + tipWidth > bounds.left + bounds.width) {
+    left = bounds.left + bounds.width - tipWidth - margin;
   }
-  return { top, left: dims.left + margin + 'px' };
+
+  top += 'px';
+  left += 'px';
+  return {
+    style: { top, left },
+  };
 }
 
 export function getElementDimensions(domElement: Element) {

From c28acc5d471883a19ca562365f4974c36da48dd3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Apr 2019 09:38:25 -0700
Subject: [PATCH 500/814] Changed owners back button label to say 'Up to <...>'

---
 src/devtools/views/Components/OwnersStack.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index dfe1fbb42beb..9635045d3307 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -181,7 +181,7 @@ function BackToOwnerButton({
           payload: ownerID,
         })
       }
-      title={`Back to ${(owner !== null && owner.displayName) || 'owner'}`}
+      title={`Up to ${(owner !== null && owner.displayName) || 'owner'}`}
     >
       <ButtonIcon type="previous" />
     </Button>

From b6a55989f50d21bd916049888c81a311589c6168 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 26 Apr 2019 17:47:00 +0100
Subject: [PATCH 501/814] Assert empty maps when there are no roots

---
 src/__tests__/storeSerializer.js |  4 ++++
 src/devtools/store.js            | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
index fc1b8d18ff8c..f41cb0fb844a 100644
--- a/src/__tests__/storeSerializer.js
+++ b/src/__tests__/storeSerializer.js
@@ -70,5 +70,9 @@ export function printStore(store, includeWeight = false) {
     );
   }
 
+  if (store.roots.length === 0) {
+    store.assertEmptyMaps();
+  }
+
   return snapshotLines.join('\n');
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index dcb894160a0e..ecdf1683df26 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -179,6 +179,31 @@ export default class Store extends EventEmitter {
     this._profilingCache = new ProfilingCache(bridge, this);
   }
 
+  assertEmptyMaps() {
+    // This is only used in tests to avoid memory leaks.
+    if (this._idToElement.size !== 0) {
+      throw new Error('Expected _idToElement to be empty.');
+    }
+    if (this._ownersMap.size !== 0) {
+      throw new Error('Expected _ownersMap to be empty.');
+    }
+    if (this._profilingOperations.size !== 0) {
+      throw new Error('Expected _profilingOperations to be empty.');
+    }
+    if (this._profilingScreenshots.size !== 0) {
+      throw new Error('Expected _profilingScreenshots to be empty.');
+    }
+    if (this._profilingSnapshot.size !== 0) {
+      throw new Error('Expected _profilingSnapshot to be empty.');
+    }
+    if (this._rootIDToCapabilities.size !== 0) {
+      throw new Error('Expected _rootIDToCapabilities to be empty.');
+    }
+    if (this._rootIDToRendererID.size !== 0) {
+      throw new Error('Expected _rootIDToRendererID to be empty.');
+    }
+  }
+
   get captureScreenshots(): boolean {
     return this._captureScreenshots;
   }

From e5ed26687389669d5e21a5f4f50ec31ca6c3cfa2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 26 Apr 2019 19:29:51 +0100
Subject: [PATCH 502/814] Start using @babel/preset-env

---
 .babelrc                                 |  7 -----
 babel.config.js                          | 39 ++++++++++++++++++++++++
 shells/browser/shared/webpack.backend.js |  7 ++---
 shells/browser/shared/webpack.config.js  |  7 ++---
 shells/dev/webpack.config.js             |  5 +--
 5 files changed, 48 insertions(+), 17 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 babel.config.js

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 77ab280032c4..000000000000
--- a/.babelrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "plugins": [
-    ["@babel/plugin-transform-flow-strip-types"],
-    ["@babel/plugin-proposal-class-properties", { "loose": false }]
-  ],
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
-}
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000000..59bfbc27e23a
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,39 @@
+const chromeManifest = require('./shells/browser/chrome/manifest.json');
+const firefoxManifest = require('./shells/browser/firefox/manifest.json');
+
+const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);
+const minFirefoxVersion = parseInt(
+  firefoxManifest.applications.gecko.strict_min_version,
+  10
+);
+validateVersion(minChromeVersion);
+validateVersion(minFirefoxVersion);
+
+function validateVersion(version) {
+  if (version > 0 && version < 200) {
+    return;
+  }
+  throw new Error('Suspicious browser version in manifest: ' + version);
+}
+
+module.exports = api => {
+  const isTest = api.env('test');
+  const targets = {};
+  if (isTest) {
+    targets.node = 'current';
+  } else {
+    targets.chrome = minChromeVersion.toString();
+    targets.firefox = minFirefoxVersion.toString();
+  }
+  return {
+    plugins: [
+      ['@babel/plugin-transform-flow-strip-types'],
+      ['@babel/plugin-proposal-class-properties', { loose: false }],
+    ],
+    presets: [
+      ['@babel/preset-env', { targets }],
+      '@babel/preset-react',
+      '@babel/preset-flow',
+    ],
+  };
+};
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index 99249b3053a7..a091b269acdb 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -1,4 +1,3 @@
-const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
@@ -41,9 +40,9 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: JSON.parse(
-          readFileSync(resolve(__dirname, '../../../.babelrc'))
-        ),
+        options: {
+          configFile: resolve(__dirname, '../../../babel.config.js'),
+        },
       },
     ],
   },
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 8ff77ebc6eb3..dd2acc1f3c91 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -1,4 +1,3 @@
-const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../../utils');
@@ -47,9 +46,9 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: JSON.parse(
-          readFileSync(resolve(__dirname, '../../../.babelrc'))
-        ),
+        options: {
+          configFile: resolve(__dirname, '../../../babel.config.js'),
+        },
       },
       {
         test: /\.css$/,
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 7cd9c53b2ab0..38d5c70a6f3a 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -1,4 +1,3 @@
-const { readFileSync } = require('fs');
 const { resolve } = require('path');
 const { DefinePlugin } = require('webpack');
 const { getGitHubURL, getVersionString } = require('../utils');
@@ -43,7 +42,9 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+        options: {
+          configFile: require.resolve('../../babel.config.js'),
+        },
       },
       {
         test: /\.css$/,

From d81d74b2361248471ccca6f08595000a83a8a622 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 26 Apr 2019 20:04:28 +0100
Subject: [PATCH 503/814] Add test coverage for nested Suspense

---
 .../__snapshots__/store-test.js.snap          | 174 +++++++++++++++++
 src/__tests__/store-test.js                   | 176 ++++++++++++++++++
 2 files changed, 350 insertions(+)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 1a620db0c426..39bddd9b583a 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -138,6 +138,180 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper
 
 exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
 exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
 [root]
   ▾ <Root>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 55b20b4cdc1e..067448426ca5 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -163,6 +163,182 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('2: resolved');
     });
 
+    it('should support nested Suspense nodes', () => {
+      const Component = () => null;
+      const Loading = () => <div>Loading...</div>;
+      const Never = () => {
+        throw new Promise(() => {});
+      };
+
+      const Wrapper = ({
+        suspendFirst = false,
+        suspendSecond = false,
+        suspendParent = false,
+      }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense fallback={<Loading key="Suspense 1 Fallback" />}>
+              {suspendFirst ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 1 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 2 Fallback" />}>
+              {suspendSecond ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 2 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 3 Fallback" />}>
+              <Never />
+            </React.Suspense>
+            {suspendParent && <Never />}
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('1: third child is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('2: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('3: second and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('4: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={true}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('5: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('6: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('7: only third child is suspended');
+
+      // HACK There's only one renderer for this test
+      const rendererID = Object.keys(agent._rendererInterfaces)[0];
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: true,
+        })
+      );
+      expect(store).toMatchSnapshot('8: first and third child are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: true,
+        })
+      );
+      expect(store).toMatchSnapshot('9: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('10: parent is suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: false,
+        })
+      );
+      expect(store).toMatchSnapshot('11: all children are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: false,
+        })
+      );
+      expect(store).toMatchSnapshot('12: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('13: third child is suspended');
+    });
+
     it('should support collapsing parts of the tree', () => {
       const Grandparent = ({ count }) => (
         <React.Fragment>

From 19bfba79439b41a6681013f97c22f46ba17d52aa Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 28 Apr 2019 03:45:05 -0700
Subject: [PATCH 504/814] Fix typo `recursivelyIniitliazeTree` ->
 `recursivelyInitializeTree`

---
 src/devtools/views/Profiler/CommitTreeBuilder.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 09bde587b55c..c04cc6a6ae64 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -67,7 +67,7 @@ export function getCommitTree({
     const nodes = new Map();
 
     // Construct the initial tree.
-    recursivelyIniitliazeTree(
+    recursivelyInitializeTree(
       rootID,
       0,
       nodes,
@@ -117,7 +117,7 @@ export function getCommitTree({
   );
 }
 
-function recursivelyIniitliazeTree(
+function recursivelyInitializeTree(
   id: number,
   parentID: number,
   nodes: Map<number, Node>,
@@ -141,7 +141,7 @@ function recursivelyIniitliazeTree(
     });
 
     node.children.forEach(childID =>
-      recursivelyIniitliazeTree(
+      recursivelyInitializeTree(
         childID,
         id,
         nodes,

From 0b817777b480fc53e4080a36787b2c7a86b9c55e Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 28 Apr 2019 03:31:16 -0700
Subject: [PATCH 505/814] Remove Agent addBridge: there can only be one bridge,
 add in constructor

Let's make impossible states truly impossible, and fix Flow types, too.

All three usages of Agent called addBridge right after constructing it.
Agent has one field `_bridge` which is force-typed as not-null despite
there's a temporary zone between the constructor end and addBridge start
where `_bridge` is null.
---
 shells/browser/shared/src/backend.js | 3 +--
 shells/dev/src/backend.js            | 3 +--
 src/__tests__/setupTests.js          | 3 +--
 src/backend/agent.js                 | 8 +++-----
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index c86a1a5d4b6c..88723ff5636a 100644
--- a/shells/browser/shared/src/backend.js
+++ b/shells/browser/shared/src/backend.js
@@ -54,8 +54,7 @@ function setup(hook) {
     },
   });
 
-  const agent = new Agent();
-  agent.addBridge(bridge);
+  const agent = new Agent(bridge);
   agent.addListener('shutdown', () => {
     hook.emit('shutdown');
     listeners.forEach(fn => {
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 02ff78fd1919..bfc403bb6dde 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -25,7 +25,6 @@ bridge.addListener('captureScreenshot', ({ commitIndex }) => {
   });
 });
 
-const agent = new Agent();
-agent.addBridge(bridge);
+const agent = new Agent(bridge);
 
 initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window.parent);
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 2c22aade0753..33fa159c5e29 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -38,8 +38,7 @@ env.beforeEach(() => {
     },
   });
 
-  const agent = new Agent();
-  agent.addBridge(bridge);
+  const agent = new Agent(bridge);
 
   const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 976b838c889c..5364d048c520 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -61,13 +61,13 @@ type PersistedSelection = {|
 |};
 
 export default class Agent extends EventEmitter {
-  _bridge: Bridge = ((null: any): Bridge);
+  _bridge: Bridge;
   _isProfiling: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
 
-  constructor() {
+  constructor(bridge: Bridge) {
     super();
 
     if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
@@ -84,9 +84,7 @@ export default class Agent extends EventEmitter {
         this._persistedSelection = JSON.parse(persistedSelectionString);
       }
     }
-  }
 
-  addBridge(bridge: Bridge) {
     this._bridge = bridge;
 
     bridge.addListener('captureScreenshot', this.captureScreenshot);
@@ -123,7 +121,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
-      this._bridge.send('profilingStatus', true);
+      bridge.send('profilingStatus', true);
     }
   }
 

From 9f06bc345f78922bbe6f428280311b39a305e324 Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Fri, 26 Apr 2019 05:34:16 -0700
Subject: [PATCH 506/814] Add Flow types for Fiber

Fixes https://github.com/bvaughn/react-devtools-experimental/issues/165
---
 .flowconfig             |   1 +
 src/backend/renderer.js | 110 ++++++++++++++++++++++++++++------------
 src/backend/types.js    |  84 +++++++++++++++++++++++++++++-
 3 files changed, 160 insertions(+), 35 deletions(-)

diff --git a/.flowconfig b/.flowconfig
index c2f42c17c7c9..3280cac0e86e 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -26,6 +26,7 @@ shells/dev/build/*
 
 [options]
 esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
 suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c4e515829b02..052ec1ceffcf 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -573,7 +573,6 @@ export function attach(
     }
   }
 
-  // eslint-disable-next-line no-unused-vars
   function haveProfilerTimesChanged(
     prevFiber: Fiber,
     nextFiber: Fiber
@@ -715,7 +714,7 @@ export function attach(
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
     if (isProfilingSupported) {
       idToRootMap.set(id, currentRootID);
-      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
     }
 
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
@@ -732,7 +731,9 @@ export function attach(
 
       const ownerID =
         _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
-      const parentID = getFiberID(getPrimaryFiber(parentFiber));
+      const parentID = parentFiber
+        ? getFiberID(getPrimaryFiber(parentFiber))
+        : 0;
 
       let displayNameStringID = getStringID(displayName);
       let keyStringID = getStringID(key);
@@ -748,14 +749,14 @@ export function attach(
     if (isProfiling) {
       // Tree base duration updates are included in the operations typed array.
       // So we have to convert them from milliseconds to microseconds so we can send them as ints.
-      const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
+      const treeBaseDuration = Math.floor((fiber.treeBaseDuration || 0) * 1000);
 
       pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
       pushOperation(id);
       pushOperation(treeBaseDuration);
 
       const { actualDuration } = fiber;
-      if (actualDuration > 0) {
+      if (actualDuration != null && actualDuration > 0) {
         // If profiling is active, store durations for elements that were rendered during the commit.
         const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
         metadata.actualDurations.push(id, actualDuration);
@@ -849,8 +850,12 @@ export function attach(
       // get the fallback child from the inner fragment and mount
       // it as if it was our own child. Updates handle this too.
       const primaryChildFragment = fiber.child;
-      const fallbackChildFragment = primaryChildFragment.sibling;
-      const fallbackChild = fallbackChildFragment.child;
+      const fallbackChildFragment = primaryChildFragment
+        ? primaryChildFragment.sibling
+        : null;
+      const fallbackChild = fallbackChildFragment
+        ? fallbackChildFragment.child
+        : null;
       if (fallbackChild !== null) {
         mountFiberRecursively(
           fallbackChild,
@@ -893,9 +898,11 @@ export function attach(
     if (isTimedOutSuspense) {
       // If it's showing fallback tree, let's traverse it instead.
       const primaryChildFragment = fiber.child;
-      const fallbackChildFragment = primaryChildFragment.sibling;
+      const fallbackChildFragment = primaryChildFragment
+        ? primaryChildFragment.sibling
+        : null;
       // Skip over to the real Fiber child.
-      child = fallbackChildFragment.child;
+      child = fallbackChildFragment ? fallbackChildFragment.child : null;
     }
 
     while (child !== null) {
@@ -913,20 +920,27 @@ export function attach(
     const id = getFiberID(getPrimaryFiber(fiber));
     const { actualDuration, treeBaseDuration } = fiber;
 
-    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
+    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
 
     if (isProfiling) {
-      if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
+      const { alternate } = fiber;
+
+      if (
+        treeBaseDuration !==
+        (alternate ? alternate.treeBaseDuration : undefined)
+      ) {
         // Tree base duration updates are included in the operations typed array.
         // So we have to convert them from milliseconds to microseconds so we can send them as ints.
-        const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
+        const treeBaseDuration = Math.floor(
+          (fiber.treeBaseDuration || 0) * 1000
+        );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
         pushOperation(getFiberID(getPrimaryFiber(fiber)));
         pushOperation(treeBaseDuration);
       }
 
-      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
-        if (actualDuration > 0) {
+      if (alternate ? haveProfilerTimesChanged(alternate, fiber) : true) {
+        if (actualDuration != null && actualDuration > 0) {
           // If profiling is active, store durations for elements that were rendered during the commit.
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
           metadata.actualDurations.push(id, actualDuration);
@@ -1008,11 +1022,19 @@ export function attach(
     if (prevDidTimeout && nextDidTimeOut) {
       // Fallback -> Fallback:
       // 1. Reconcile fallback set.
-      const nextFallbackChildSet = nextFiber.child.sibling;
+      const nextFiberChild = nextFiber.child;
+      const nextFallbackChildSet = nextFiberChild
+        ? nextFiberChild.sibling
+        : null;
       // Note: We can't use nextFiber.child.sibling.alternate
       // because the set is special and alternate may not exist.
-      const prevFallbackChildSet = prevFiber.child.sibling;
+      const prevFiberChild = prevFiber.child;
+      const prevFallbackChildSet = prevFiberChild
+        ? prevFiberChild.sibling
+        : null;
       if (
+        nextFallbackChildSet != null &&
+        prevFallbackChildSet != null &&
         updateFiberRecursively(
           nextFallbackChildSet,
           prevFallbackChildSet,
@@ -1038,9 +1060,14 @@ export function attach(
       // We need to manually walk the previous tree and record unmounts.
       unmountFiberChildrenRecursively(prevFiber);
       // 2. Mount fallback set
-      const nextFallbackChildSet = nextFiber.child.sibling;
-      mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
-      shouldResetChildren = true;
+      const nextFiberChild = nextFiber.child;
+      const nextFallbackChildSet = nextFiberChild
+        ? nextFiberChild.sibling
+        : null;
+      if (nextFallbackChildSet != null) {
+        mountFiberRecursively(nextFallbackChildSet, nextFiber, true);
+        shouldResetChildren = true;
+      }
     } else {
       // Common case: Primary -> Primary.
       // This is the same codepath as for non-Suspense fibers.
@@ -1109,9 +1136,12 @@ export function attach(
         let nextChildSet = nextFiber.child;
         if (nextDidTimeOut) {
           // Special case: timed-out Suspense renders the fallback set.
-          nextChildSet = nextFiber.child.sibling;
+          const nextFiberChild = nextFiber.child;
+          nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;
+        }
+        if (nextChildSet != null) {
+          recordResetChildren(nextFiber, nextChildSet);
         }
-        recordResetChildren(nextFiber, nextChildSet);
         // We've handled the child order change for this Fiber.
         // Since it's included, there's no need to invalidate parent child order.
         return false;
@@ -1260,7 +1290,7 @@ export function attach(
 
   function findNativeByFiberID(id: number) {
     try {
-      const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+      const fiber = findCurrentFiberUsingSlowPathById(id);
       if (fiber === null) {
         return null;
       }
@@ -1550,6 +1580,11 @@ export function attach(
     // Find the currently mounted version of this fiber (so we don't show the wrong props and state).
     fiber = findCurrentFiberUsingSlowPath(fiber);
 
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return null;
+    }
+
     const {
       _debugOwner,
       _debugSource,
@@ -1558,7 +1593,7 @@ export function attach(
       memoizedState,
       tag,
       type,
-    } = ((fiber: any): Fiber);
+    } = fiber;
 
     const usesHooks =
       (tag === FunctionComponent ||
@@ -1632,7 +1667,7 @@ export function attach(
           displayName: getDataForFiber(owner).displayName || 'Unknown',
           id: getFiberID(getPrimaryFiber(owner)),
         });
-        owner = owner._debugOwner;
+        owner = owner._debugOwner || null;
       }
     }
 
@@ -1729,13 +1764,21 @@ export function attach(
     }
   }
 
+  function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
+    const fiber = idToFiberMap.get(id);
+    if (fiber) {
+      return findCurrentFiberUsingSlowPath(fiber);
+    }
+    return null;
+  }
+
   function setInHook(
     id: number,
     index: number,
     path: Array<string | number>,
     value: any
   ) {
-    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       if (typeof overrideHookState === 'function') {
         overrideHookState(fiber, index, path, value);
@@ -1744,7 +1787,7 @@ export function attach(
   }
 
   function setInProps(id: number, path: Array<string | number>, value: any) {
-    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       const instance = fiber.stateNode;
       if (instance === null) {
@@ -1759,7 +1802,7 @@ export function attach(
   }
 
   function setInState(id: number, path: Array<string | number>, value: any) {
-    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       const instance = fiber.stateNode;
       setInObject(instance.state, path, value);
@@ -1773,7 +1816,7 @@ export function attach(
     // We need to remove the first part of the path (the "value") before continuing.
     path = path.slice(1);
 
-    const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
+    const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       const instance = fiber.stateNode;
       if (path.length === 0) {
@@ -1940,17 +1983,18 @@ export function attach(
     }
 
     const initialTreeBaseDurations = [];
-    ((initialTreeBaseDurationsMap: any): Map<number, number>).forEach(
-      (treeBaseDuration, id) => {
+    if (initialTreeBaseDurationsMap != null) {
+      initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
         if (
-          ((initialIDToRootMap: any): Map<number, number>).get(id) === rootID
+          initialIDToRootMap != null &&
+          initialIDToRootMap.get(id) === rootID
         ) {
           // We don't need to convert milliseconds to microseconds in this case,
           // because the profiling summary is JSON serialized.
           initialTreeBaseDurations.push(id, treeBaseDuration);
         }
-      }
-    );
+      });
+    }
 
     return {
       commitDurations,
diff --git a/src/backend/types.js b/src/backend/types.js
index 0bd16482333c..705d2bc7ca93 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -7,8 +7,88 @@ type BundleType =
   | 0 // PROD
   | 1; // DEV
 
-// TODO: Better type for Fiber
-export type Fiber = Object;
+export type WorkTag = number;
+export type TypeOfMode = number;
+export type SideEffectTag = number;
+export type ExpirationTime = number;
+export type RefObject = {|
+  current: any,
+|};
+export type Source = {
+  fileName: string,
+  lineNumber: number,
+};
+export type HookType =
+  | 'useState'
+  | 'useReducer'
+  | 'useContext'
+  | 'useRef'
+  | 'useEffect'
+  | 'useLayoutEffect'
+  | 'useCallback'
+  | 'useMemo'
+  | 'useImperativeHandle'
+  | 'useDebugValue';
+
+// Copied modified from https://github.com/facebook/react/blob/v16.9.0-alpha.0/packages/react-reconciler/src/ReactFiber.js
+export type Fiber = {|
+  tag: WorkTag,
+
+  key: null | string,
+
+  elementType: any,
+
+  type: any,
+
+  stateNode: any,
+
+  return: Fiber | null,
+
+  child: Fiber | null,
+  sibling: Fiber | null,
+  index: number,
+
+  ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,
+
+  pendingProps: any, // This type will be more specific once we overload the tag.
+  memoizedProps: any, // The props used to create the output.
+
+  // updateQueue: UpdateQueue<any> | null,
+
+  memoizedState: any,
+
+  // contextDependencies: ContextDependencyList | null,
+
+  mode: TypeOfMode,
+
+  effectTag: SideEffectTag,
+
+  nextEffect: Fiber | null,
+
+  firstEffect: Fiber | null,
+  lastEffect: Fiber | null,
+
+  expirationTime: ExpirationTime,
+
+  childExpirationTime: ExpirationTime,
+
+  alternate: Fiber | null,
+
+  actualDuration?: number,
+
+  actualStartTime?: number,
+
+  selfBaseDuration?: number,
+
+  treeBaseDuration?: number,
+
+  _debugID?: number,
+  _debugSource?: Source | null,
+  _debugOwner?: Fiber | null,
+  _debugIsCurrentlyTiming?: boolean,
+
+  _debugHookTypes?: Array<HookType> | null,
+|};
 
 // TODO: If it's useful for the frontend to know which types of data an Element has
 // (e.g. props, state, context, hooks) then we could add a bitmask field for this

From d3e5fcd81cc74a97bd719f39d7886303490ba58a Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 28 Apr 2019 04:28:10 -0700
Subject: [PATCH 507/814] Rename Profiler types to disambiguate which is
 Frontend and Backend

Flow IDE shows the original type, not the file-scoped alias,
so it's confusing to see incompatible variables that have types
with the same name.

This started from `src/devtools/ProfilingCache.js` where
`ProfilingSummary` was incompatible, but I decided to make a bigger
change for consistency and to avoid similar mistakes in the future.
---
 src/backend/renderer.js                       | 34 ++++++++++--------
 src/backend/types.js                          | 29 ++++++++-------
 src/devtools/ProfilingCache.js                | 22 ++++++------
 .../views/Profiler/CommitFlamegraph.js        | 16 +++++----
 src/devtools/views/Profiler/CommitRanked.js   | 14 ++++----
 .../views/Profiler/CommitTreeBuilder.js       | 36 +++++++++++--------
 .../views/Profiler/FlamegraphChartBuilder.js  | 16 +++++----
 src/devtools/views/Profiler/Interactions.js   |  9 +++--
 .../Profiler/InteractionsChartBuilder.js      |  9 +++--
 .../views/Profiler/RankedChartBuilder.js      |  8 ++---
 .../views/Profiler/SidebarInteractions.js     | 14 ++++----
 src/devtools/views/Profiler/types.js          | 28 +++++++--------
 src/devtools/views/Profiler/utils.js          | 11 +++---
 13 files changed, 139 insertions(+), 107 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c4e515829b02..3b029be297a5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -28,17 +28,17 @@ import { getUID } from '../utils';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
-  CommitDetails,
+  CommitDetailsBackend,
   DevToolsHook,
   Fiber,
-  FiberCommits,
+  FiberCommitsBackend,
   FiberData,
-  Interaction,
-  Interactions,
-  InteractionWithCommits,
+  InteractionBackend,
+  InteractionsBackend,
+  InteractionWithCommitsBackend,
   PathFrame,
   PathMatch,
-  ProfilingSummary,
+  ProfilingSummaryBackend,
   ReactRenderer,
   RendererInterface,
 } from './types';
@@ -1160,7 +1160,7 @@ export function attach(
             actualDurations: [],
             commitTime: performance.now() - profilingStartTime,
             interactions: Array.from(root.memoizedInteractions).map(
-              (interaction: Interaction) => ({
+              (interaction: InteractionBackend) => ({
                 ...interaction,
                 timestamp: interaction.timestamp - profilingStartTime,
               })
@@ -1202,7 +1202,7 @@ export function attach(
         actualDurations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: Interaction) => ({
+          (interaction: InteractionBackend) => ({
             ...interaction,
             timestamp: interaction.timestamp - profilingStartTime,
           })
@@ -1789,7 +1789,7 @@ export function attach(
   type CommitProfilingData = {|
     actualDurations: Array<number>,
     commitTime: number,
-    interactions: Array<Interaction>,
+    interactions: Array<InteractionBackend>,
     maxActualDuration: number,
   |};
 
@@ -1805,7 +1805,7 @@ export function attach(
   function getCommitDetails(
     rootID: number,
     commitIndex: number
-  ): CommitDetails {
+  ): CommitDetailsBackend {
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
@@ -1833,7 +1833,10 @@ export function attach(
     };
   }
 
-  function getFiberCommits(rootID: number, fiberID: number): FiberCommits {
+  function getFiberCommits(
+    rootID: number,
+    fiberID: number
+  ): FiberCommitsBackend {
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
@@ -1866,12 +1869,15 @@ export function attach(
     };
   }
 
-  function getInteractions(rootID: number): Interactions {
+  function getInteractions(rootID: number): InteractionsBackend {
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
     if (commitProfilingMetadata != null) {
-      const interactionsMap: Map<number, InteractionWithCommits> = new Map();
+      const interactionsMap: Map<
+        number,
+        InteractionWithCommitsBackend
+      > = new Map();
 
       commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
         commitProfilingData.interactions.forEach(interaction => {
@@ -1921,7 +1927,7 @@ export function attach(
     };
   }
 
-  function getProfilingSummary(rootID: number): ProfilingSummary {
+  function getProfilingSummary(rootID: number): ProfilingSummaryBackend {
     const interactions = new Set();
     const commitDurations = [];
     const commitTimes = [];
diff --git a/src/backend/types.js b/src/backend/types.js
index 0bd16482333c..d1946d164a82 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -53,36 +53,36 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
-export type Interaction = {|
+export type InteractionBackend = {|
   id: number,
   name: string,
   timestamp: number,
 |};
 
-export type CommitDetails = {|
+export type CommitDetailsBackend = {|
   actualDurations: Array<number>,
   commitIndex: number,
-  interactions: Array<Interaction>,
+  interactions: Array<InteractionBackend>,
   rootID: number,
 |};
 
-export type FiberCommits = {|
+export type FiberCommitsBackend = {|
   commitDurations: Array<number>,
   fiberID: number,
   rootID: number,
 |};
 
-export type InteractionWithCommits = {|
-  ...Interaction,
+export type InteractionWithCommitsBackend = {|
+  ...InteractionBackend,
   commits: Array<number>,
 |};
 
-export type Interactions = {|
-  interactions: Array<InteractionWithCommits>,
+export type InteractionsBackend = {|
+  interactions: Array<InteractionWithCommitsBackend>,
   rootID: number,
 |};
 
-export type ProfilingSummary = {|
+export type ProfilingSummaryBackend = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
   initialTreeBaseDurations: Array<number>,
@@ -106,15 +106,18 @@ export type RendererInterface = {
   findNativeByFiberID: (id: number) => ?NativeType,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
-  getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
+  getCommitDetails: (
+    rootID: number,
+    commitIndex: number
+  ) => CommitDetailsBackend,
   getFiberIDFromNative: (
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
-  getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,
-  getInteractions: (rootID: number) => Interactions,
+  getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,
+  getInteractions: (rootID: number) => InteractionsBackend,
   getProfilingDataForDownload: (rootID: number) => Object,
-  getProfilingSummary: (rootID: number) => ProfilingSummary,
+  getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index d313111e675f..1ebbba06e17b 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -22,18 +22,18 @@ import {
 import type { Resource } from './cache';
 import type { Bridge } from '../types';
 import type {
-  CommitDetails as CommitDetailsBackend,
-  FiberCommits as FiberCommitsBackend,
-  Interactions as InteractionsBackend,
-  ProfilingSummary as ProfilingSummaryBackend,
+  CommitDetailsBackend,
+  FiberCommitsBackend,
+  InteractionsBackend,
+  ProfilingSummaryBackend,
 } from 'src/backend/types';
 import type {
-  CommitDetails as CommitDetailsFrontend,
-  FiberCommits as FiberCommitsFrontend,
-  Interactions as InteractionsFrontend,
-  InteractionWithCommits,
-  CommitTree as CommitTreeFrontend,
-  ProfilingSummary as ProfilingSummaryFrontend,
+  CommitDetailsFrontend,
+  FiberCommitsFrontend,
+  InteractionsFrontend,
+  InteractionWithCommitsFrontend,
+  CommitTreeFrontend,
+  ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
 import type { ChartData as FlamegraphChartData } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
 import type { ChartData as InteractionsChartData } from 'src/devtools/views/Profiler/InteractionsChartBuilder';
@@ -273,7 +273,7 @@ export default class ProfilingCache {
     profilingSummary,
     rootID,
   }: {|
-    interactions: Array<InteractionWithCommits>,
+    interactions: Array<InteractionWithCommitsFrontend>,
     profilingSummary: ProfilingSummaryFrontend,
   |}): InteractionsChartData =>
     getInteractionsChartData({
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index a4ad534a8279..84a1ca513452 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -13,7 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitFlamegraph.css';
 
 import type { ChartData, ChartNode } from './FlamegraphChartBuilder';
-import type { CommitDetails, CommitTree } from './types';
+import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -43,8 +43,8 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
-  let commitDetails: CommitDetails | null = null;
-  let commitTree: CommitTree | null = null;
+  let commitDetails: CommitDetailsFrontend | null = null;
+  let commitTree: CommitTreeFrontend | null = null;
   let chartData: ChartData | null = null;
   if (selectedCommitIndex !== null) {
     commitDetails = profilingCache.CommitDetails.read({
@@ -75,10 +75,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
       <div className={styles.Container} onClick={deselectCurrentFiber}>
         <AutoSizer>
           {({ height, width }) => (
+            // Force Flow types to avoid checking for `null` here because there's no static proof that
+            // by the time this render prop function is called, the values of the `let` variables have not changed.
             <CommitFlamegraph
               chartData={((chartData: any): ChartData)}
-              commitDetails={((commitDetails: any): CommitDetails)}
-              commitTree={((commitTree: any): CommitTree)}
+              commitDetails={((commitDetails: any): CommitDetailsFrontend)}
+              commitTree={((commitTree: any): CommitTreeFrontend)}
               height={height}
               width={width}
             />
@@ -93,8 +95,8 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
 
 type Props = {|
   chartData: ChartData,
-  commitDetails: CommitDetails,
-  commitTree: CommitTree,
+  commitDetails: CommitDetailsFrontend,
+  commitTree: CommitTreeFrontend,
   height: number,
   width: number,
 |};
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 63cb41cd7161..63200f37bab6 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -13,7 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitRanked.css';
 
 import type { ChartData } from './RankedChartBuilder';
-import type { CommitDetails, CommitTree } from './types';
+import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -43,8 +43,8 @@ export default function CommitRankedAutoSizer(_: {||}) {
     rootID: ((rootID: any): number),
   });
 
-  let commitDetails: CommitDetails | null = null;
-  let commitTree: CommitTree | null = null;
+  let commitDetails: CommitDetailsFrontend | null = null;
+  let commitTree: CommitTreeFrontend | null = null;
   let chartData: ChartData | null = null;
   if (selectedCommitIndex !== null) {
     commitDetails = profilingCache.CommitDetails.read({
@@ -77,8 +77,8 @@ export default function CommitRankedAutoSizer(_: {||}) {
           {({ height, width }) => (
             <CommitRanked
               chartData={((chartData: any): ChartData)}
-              commitDetails={((commitDetails: any): CommitDetails)}
-              commitTree={((commitTree: any): CommitTree)}
+              commitDetails={((commitDetails: any): CommitDetailsFrontend)}
+              commitTree={((commitTree: any): CommitTreeFrontend)}
               height={height}
               width={width}
             />
@@ -93,8 +93,8 @@ export default function CommitRankedAutoSizer(_: {||}) {
 
 type Props = {|
   chartData: ChartData,
-  commitDetails: CommitDetails,
-  commitTree: CommitTree,
+  commitDetails: CommitDetailsFrontend,
+  commitTree: CommitTreeFrontend,
   height: number,
   width: number,
 |};
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 09bde587b55c..3d457131b468 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -13,9 +13,9 @@ import Store from 'src/devtools/store';
 
 import type { ElementType } from 'src/devtools/types';
 import type {
-  CommitTree,
-  Node,
-  ProfilingSummary as ProfilingSummaryFrontend,
+  CommitTreeFrontend,
+  CommitTreeNodeFrontend,
+  ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
 
 const debug = (methodName, ...args) => {
@@ -29,7 +29,7 @@ const debug = (methodName, ...args) => {
   }
 };
 
-const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
+const rootToCommitTreeMap: Map<number, Array<CommitTreeFrontend>> = new Map();
 
 export function getCommitTree({
   commitIndex,
@@ -39,7 +39,7 @@ export function getCommitTree({
   commitIndex: number,
   profilingSummary: ProfilingSummaryFrontend,
   store: Store,
-|}): CommitTree {
+|}): CommitTreeFrontend {
   const { rootID } = profilingSummary;
 
   if (!rootToCommitTreeMap.has(rootID)) {
@@ -48,7 +48,7 @@ export function getCommitTree({
 
   const commitTrees = ((rootToCommitTreeMap.get(
     rootID
-  ): any): Array<CommitTree>);
+  ): any): Array<CommitTreeFrontend>);
 
   if (commitIndex < commitTrees.length) {
     return commitTrees[commitIndex];
@@ -120,7 +120,7 @@ export function getCommitTree({
 function recursivelyIniitliazeTree(
   id: number,
   parentID: number,
-  nodes: Map<number, Node>,
+  nodes: Map<number, CommitTreeNodeFrontend>,
   initialTreeBaseDurations: Map<number, number>,
   store: Store
 ): void {
@@ -153,15 +153,18 @@ function recursivelyIniitliazeTree(
 }
 
 function updateTree(
-  commitTree: CommitTree,
+  commitTree: CommitTreeFrontend,
   operations: Uint32Array
-): CommitTree {
+): CommitTreeFrontend {
   // Clone the original tree so edits don't affect it.
   const nodes = new Map(commitTree.nodes);
 
   // Clone nodes before mutating them so edits don't affect them.
-  const getClonedNode = (id: number): Node => {
-    const clonedNode = ((Object.assign({}, nodes.get(id)): any): Node);
+  const getClonedNode = (id: number): CommitTreeNodeFrontend => {
+    const clonedNode = ((Object.assign(
+      {},
+      nodes.get(id)
+    ): any): CommitTreeNodeFrontend);
     nodes.set(id, clonedNode);
     return clonedNode;
   };
@@ -209,7 +212,7 @@ function updateTree(
             debug('Add', `new root fiber ${id}`);
           }
 
-          const node: Node = {
+          const node: CommitTreeNodeFrontend = {
             children: [],
             displayName: null,
             id,
@@ -243,7 +246,7 @@ function updateTree(
           const parentNode = getClonedNode(parentID);
           parentNode.children = parentNode.children.concat(id);
 
-          const node: Node = {
+          const node: CommitTreeNodeFrontend = {
             children: [],
             displayName,
             id,
@@ -343,7 +346,7 @@ export function invalidateCommitTrees(): void {
 }
 
 // DEBUG
-const __printTree = (commitTree: CommitTree) => {
+const __printTree = (commitTree: CommitTreeFrontend) => {
   if (__DEBUG__) {
     const { nodes, rootID } = commitTree;
     console.group('__printTree()');
@@ -352,7 +355,10 @@ const __printTree = (commitTree: CommitTree) => {
       const id = queue.shift();
       const depth = queue.shift();
 
-      const node = ((nodes.get(id): any): Node);
+      const node = nodes.get(id);
+      if (node == null) {
+        throw Error(`Could not find node with id "${id}" in commit tree`);
+      }
 
       console.log(
         `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index bfb912adcc04..8096972175d6 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -2,7 +2,7 @@
 
 import { calculateSelfDuration } from './utils';
 
-import type { CommitDetails, CommitTree, Node } from './types';
+import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
 export type ChartNode = {|
   actualDuration: number,
@@ -29,9 +29,9 @@ export function getChartData({
   commitIndex,
   commitTree,
 }: {|
-  commitDetails: CommitDetails,
+  commitDetails: CommitDetailsFrontend,
   commitIndex: number,
-  commitTree: CommitTree,
+  commitTree: CommitTreeFrontend,
 |}): ChartData {
   const { actualDurations, rootID } = commitDetails;
   const { nodes } = commitTree;
@@ -55,8 +55,7 @@ export function getChartData({
   ) => {
     idToDepthMap.set(id, currentDepth);
 
-    const node = ((nodes.get(id): any): Node);
-
+    const node = nodes.get(id);
     if (node == null) {
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
@@ -104,7 +103,12 @@ export function getChartData({
   };
 
   // Skip over the root; we don't want to show it in the flamegraph.
-  const root = ((nodes.get(rootID): any): Node);
+  const root = nodes.get(rootID);
+  if (root == null) {
+    throw Error(`Could not find root node with id "${rootID}" in commit tree`);
+  }
+
+  // TODO: Looks like there's an assumption here that a root has only one child. Is that so with a fragment in the root?
   walkTree(root.children[0]);
 
   const chartData = {
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 6ce175c24562..f2ebbefce335 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -13,13 +13,16 @@ import styles from './Interactions.css';
 
 import type { ChartData } from './InteractionsChartBuilder';
 import type { TabID } from './ProfilerContext';
-import type { InteractionWithCommits, ProfilingSummary } from './types';
+import type {
+  InteractionWithCommitsFrontend,
+  ProfilingSummaryFrontend,
+} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
-  interactions: Array<InteractionWithCommits>,
+  interactions: Array<InteractionWithCommitsFrontend>,
   labelWidth: number,
-  profilingSummary: ProfilingSummary,
+  profilingSummary: ProfilingSummaryFrontend,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedInteractionID: number | null,
   selectCommitIndex: (id: number | null) => void,
diff --git a/src/devtools/views/Profiler/InteractionsChartBuilder.js b/src/devtools/views/Profiler/InteractionsChartBuilder.js
index b1391a6eeae1..08bf71be00ce 100644
--- a/src/devtools/views/Profiler/InteractionsChartBuilder.js
+++ b/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -1,6 +1,9 @@
 // @flow
 
-import type { InteractionWithCommits, ProfilingSummary } from './types';
+import type {
+  InteractionWithCommitsFrontend,
+  ProfilingSummaryFrontend,
+} from './types';
 
 export type ChartData = {|
   lastInteractionTime: number,
@@ -13,8 +16,8 @@ export function getChartData({
   interactions,
   profilingSummary,
 }: {|
-  interactions: Array<InteractionWithCommits>,
-  profilingSummary: ProfilingSummary,
+  interactions: Array<InteractionWithCommitsFrontend>,
+  profilingSummary: ProfilingSummaryFrontend,
 |}): ChartData {
   const { rootID } = profilingSummary;
 
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 981692c90c12..4274bac0c494 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -2,7 +2,7 @@
 
 import { calculateSelfDuration } from './utils';
 
-import type { CommitDetails, CommitTree, Node } from './types';
+import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
 export type ChartNode = {|
   id: number,
@@ -23,9 +23,9 @@ export function getChartData({
   commitIndex,
   commitTree,
 }: {|
-  commitDetails: CommitDetails,
+  commitDetails: CommitDetailsFrontend,
   commitIndex: number,
-  commitTree: CommitTree,
+  commitTree: CommitTreeFrontend,
 |}): ChartData {
   const { actualDurations, rootID } = commitDetails;
   const { nodes } = commitTree;
@@ -39,7 +39,7 @@ export function getChartData({
 
   const chartNodes: Array<ChartNode> = [];
   actualDurations.forEach((actualDuration, id) => {
-    const node = ((nodes.get(id): any): Node);
+    const node = nodes.get(id);
 
     if (node == null) {
       throw Error(`Could not find node with id "${id}" in commit tree`);
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 22fb062e6859..992a815c4906 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -8,8 +8,6 @@ import { getGradientColor } from './utils';
 
 import styles from './SidebarInteractions.css';
 
-import type { InteractionWithCommits } from './types';
-
 export type Props = {||};
 
 export default function SidebarInteractions(_: Props) {
@@ -31,6 +29,14 @@ export default function SidebarInteractions(_: Props) {
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
+  const interaction = interactions.find(
+    interaction => interaction.id === selectedInteractionID
+  );
+  if (interaction == null) {
+    throw Error(
+      `Could not find interaction by selected interaction id "${selectedInteractionID}"`
+    );
+  }
 
   const profilingSummary = profilingCache.ProfilingSummary.read({
     rendererID: ((rendererID: any): number),
@@ -44,10 +50,6 @@ export default function SidebarInteractions(_: Props) {
 
   const { commitDurations, commitTimes } = profilingSummary;
 
-  const interaction = ((interactions.find(
-    interaction => interaction.id === selectedInteractionID
-  ): any): InteractionWithCommits);
-
   const viewCommit = (commitIndex: number) => {
     selectTab('flame-chart');
     selectCommitIndex(commitIndex);
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index eb9dd1b49426..2cb024f808da 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-export type Node = {|
+export type CommitTreeNodeFrontend = {|
   id: number,
   children: Array<number>,
   displayName: string | null,
@@ -9,38 +9,38 @@ export type Node = {|
   treeBaseDuration: number,
 |};
 
-export type CommitTree = {|
-  nodes: Map<number, Node>,
+export type CommitTreeFrontend = {|
+  nodes: Map<number, CommitTreeNodeFrontend>,
   rootID: number,
 |};
 
-export type Interaction = {|
+export type InteractionFrontend = {|
   id: number,
   name: string,
   timestamp: number,
 |};
 
-export type InteractionWithCommits = {|
-  ...Interaction,
+export type InteractionWithCommitsFrontend = {|
+  ...InteractionFrontend,
   commits: Array<number>,
 |};
 
-export type Interactions = Array<InteractionWithCommits>;
+export type InteractionsFrontend = Array<InteractionWithCommitsFrontend>;
 
-export type CommitDetails = {|
+export type CommitDetailsFrontend = {|
   rootID: number,
   commitIndex: number,
   actualDurations: Map<number, number>,
-  interactions: Array<Interaction>,
+  interactions: Array<InteractionFrontend>,
 |};
 
-export type FiberCommits = {|
+export type FiberCommitsFrontend = {|
   commitDurations: Array<number>,
   fiberID: number,
   rootID: number,
 |};
 
-export type ProfilingSummary = {|
+export type ProfilingSummaryFrontend = {|
   rootID: number,
 
   // Commit durations
@@ -66,7 +66,7 @@ export type ImportedProfilingData = {|
   version: number,
   profilingOperations: Map<number, Array<Uint32Array>>,
   profilingSnapshot: Map<number, ProfilingSnapshotNode>,
-  commitDetails: CommitDetails,
-  interactions: Interactions,
-  profilingSummary: ProfilingSummary,
+  commitDetails: CommitDetailsFrontend,
+  interactions: InteractionsFrontend,
+  profilingSummary: ProfilingSummaryFrontend,
 |};
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index c8e439ce73c5..33c9217f8671 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { CommitDetails, CommitTree, Node } from './types';
+import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -17,8 +17,8 @@ const commitGradient = [
 
 export const calculateSelfDuration = (
   id: number,
-  commitTree: CommitTree,
-  commitDetails: CommitDetails
+  commitTree: CommitTreeFrontend,
+  commitDetails: CommitDetailsFrontend
 ): number => {
   const { actualDurations } = commitDetails;
   const { nodes } = commitTree;
@@ -28,8 +28,11 @@ export const calculateSelfDuration = (
   }
 
   let selfDuration = ((actualDurations.get(id): any): number);
+  const node = nodes.get(id);
+  if (node == null) {
+    throw Error(`Could not find node with id "${id}" in commit tree`);
+  }
 
-  const node = ((nodes.get(id): any): Node);
   node.children.forEach(childID => {
     if (actualDurations.has(childID)) {
       selfDuration -= ((actualDurations.get(childID): any): number);

From 1b5f043e015afae9e203bec0388805fa610ed917 Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Fri, 26 Apr 2019 04:30:04 -0700
Subject: [PATCH 508/814] Fix for 'Attempting to use a disconnected port
 object'

Fixes https://github.com/bvaughn/react-devtools-experimental/issues/217

The error reproduces with any two React websites, e.g. `https://reactjs.org` and `https://nextjs.org`, by keeping the DevTools Components tab open and switching between these websites in the same browser tab.

There are several issues with the code that contribute to this:
1. `Bridge` leaves behind a dangling timer that fires `_flush` after the bridge has been abandoned ("shutdown").
2. `bridge.send('shutdown')` is asynchronous, so the event handlers do not get unsubscribed in time.
3. `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation.
4. State management design of the code that uses shared variables and callbacks makes it hard to handle race conditions originating from the browser.

This commit cleans up some of the lacking symmetry when using `addListener`/`removeListener`, but the code in `shells/browser/shared/src/main.js` is hard to reason about with regards to race conditions, and there are many possible race conditions originating from the browser, so maybe there could be a better design paradigm (like a formal state machine) to manage the state changes in response to sequences of events than plain old event listeners, callbacks, and shared variables.

Unrelated, but clicking Chrome Back/Forward/Back/Forward very fast makes the browser and the DevTools and the DevTools of DevTools stall and become unresponsive for some time, then recovers but the Back/Forward/Stop/Refresh button and favicon loading indicator may remain broken. Looks like a Chrome bug, some kind of a temporary deadlock in handling the browser history.
---
 flow.js                              |  1 +
 shells/browser/shared/src/backend.js | 12 +++----
 shells/browser/shared/src/main.js    | 21 ++++++------
 shells/dev/src/backend.js            |  8 +++--
 shells/dev/src/devtools.js           | 10 ++++--
 src/__tests__/setupTests.js          |  7 +++-
 src/bridge.js                        | 48 +++++++++++++++++++++++++++-
 src/types.js                         |  3 +-
 8 files changed, 87 insertions(+), 23 deletions(-)

diff --git a/flow.js b/flow.js
index df570e10211c..fbbc999554e8 100644
--- a/flow.js
+++ b/flow.js
@@ -5,6 +5,7 @@ declare module 'events' {
     addListener: (type: string, fn: Function) => void;
     emit: (type: string, data: any) => void;
     removeListener: (type: string, fn: Function) => void;
+    removeAllListeners: (type?: string) => void;
   }
 
   declare export default typeof EventEmitter;
diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index c86a1a5d4b6c..4745a1549103 100644
--- a/shells/browser/shared/src/backend.js
+++ b/shells/browser/shared/src/backend.js
@@ -24,8 +24,6 @@ function setup(hook) {
   const Bridge = require('src/bridge').default;
   const { initBackend } = require('src/backend');
 
-  const listeners = [];
-
   const bridge = new Bridge({
     listen(fn) {
       const listener = event => {
@@ -39,8 +37,10 @@ function setup(hook) {
         }
         fn(event.data.payload);
       };
-      listeners.push(listener);
       window.addEventListener('message', listener);
+      return () => {
+        window.removeEventListener('message', listener);
+      };
     },
     send(event: string, payload: any, transferable?: Array<any>) {
       window.postMessage(
@@ -57,11 +57,9 @@ function setup(hook) {
   const agent = new Agent();
   agent.addBridge(bridge);
   agent.addListener('shutdown', () => {
+    // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
+    // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
     hook.emit('shutdown');
-    listeners.forEach(fn => {
-      window.removeEventListener('message', fn);
-    });
-    listeners.splice(0);
   });
 
   initBackend(hook, agent, window);
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 8f3ad6823d67..400ffa947552 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -46,22 +46,24 @@ function createPanelIfReactLoaded() {
       let root = null;
 
       function initBridgeAndStore() {
-        let hasPortBeenDisconnected = false;
         const port = chrome.runtime.connect({
           name: '' + chrome.devtools.inspectedWindow.tabId,
         });
-        port.onDisconnect.addListener(() => {
-          hasPortBeenDisconnected = true;
-        });
+        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+        // so it makes no sense to handle it here.
 
         bridge = new Bridge({
           listen(fn) {
-            port.onMessage.addListener(message => fn(message));
+            const listener = message => fn(message);
+            // Store the reference so that we unsubscribe from the same object.
+            const portOnMessage = port.onMessage;
+            portOnMessage.addListener(listener);
+            return () => {
+              portOnMessage.removeListener(listener);
+            };
           },
           send(event: string, payload: any, transferable?: Array<any>) {
-            if (!hasPortBeenDisconnected) {
-              port.postMessage({ event, payload }, transferable);
-            }
+            port.postMessage({ event, payload }, transferable);
           },
         });
         bridge.addListener('reloadAppForProfiling', () => {
@@ -270,7 +272,8 @@ function createPanelIfReactLoaded() {
 
       // Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-        bridge.send('shutdown');
+        // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
+        bridge.shutdown();
 
         // It's easiest to recreate the DevTools panel (to clean up potential stale state).
         // We can revisit this in the future as a small optimization.
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 02ff78fd1919..0d737ff7fd26 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -7,9 +7,13 @@ import { initBackend } from 'src/backend';
 
 const bridge = new Bridge({
   listen(fn) {
-    window.addEventListener('message', event => {
+    const listener = event => {
       fn(event.data);
-    });
+    };
+    window.addEventListener('message', listener);
+    return () => {
+      window.removeEventListener('message', listener);
+    };
   },
   send(event: string, payload: any, transferable?: Array<any>) {
     window.parent.postMessage({ event, payload }, '*', transferable);
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 3fb49174c505..50e6afd663ac 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -43,9 +43,15 @@ inject('./build/app.js', () => {
     connect(cb) {
       const bridge = new Bridge({
         listen(fn) {
-          contentWindow.parent.addEventListener('message', ({ data }) => {
+          const listener = ({ data }) => {
             fn(data);
-          });
+          };
+          // Preserve the reference to the window we subscribe to, so we can unsubscribe from it when required.
+          const contentWindowParent = contentWindow.parent;
+          contentWindowParent.addEventListener('message', listener);
+          return () => {
+            contentWindowParent.removeEventListener('message', listener);
+          };
         },
         send(event: string, payload: any, transferable?: Array<any>) {
           contentWindow.postMessage({ event, payload }, '*', transferable);
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 2c22aade0753..7da4eb6df87d 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -28,10 +28,15 @@ env.beforeEach(() => {
   installHook(global);
 
   const bridgeListeners = [];
-
   const bridge = new Bridge({
     listen(callback) {
       bridgeListeners.push(callback);
+      return () => {
+        const index = bridgeListeners.indexOf(callback);
+        if (index >= 0) {
+          bridgeListeners.splice(index, 1);
+        }
+      };
     },
     send(event: string, payload: any, transferable?: Array<any>) {
       bridgeListeners.forEach(callback => callback({ event, payload }));
diff --git a/src/bridge.js b/src/bridge.js
index 2a9d53fb4f57..eb9346207475 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -14,19 +14,25 @@ type Message = {|
 export default class Bridge extends EventEmitter {
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
+  _destroyed: boolean = false;
   _wall: Wall;
+  _wallUnlisten: Function | null = null;
 
   constructor(wall: Wall) {
     super();
 
     this._wall = wall;
 
-    wall.listen((message: Message) => {
+    this._wallUnlisten = wall.listen((message: Message) => {
       this.emit(message.event, message.payload);
     });
   }
 
   send(event: string, payload: any, transferable?: Array<any>) {
+    if (this._destroyed) {
+      return;
+    }
+
     // When we receive a message:
     // - we add it to our queue of messages to be sent
     // - if there hasn't been a message recently, we set a timer for 0 ms in
@@ -41,7 +47,47 @@ export default class Bridge extends EventEmitter {
     }
   }
 
+  shutdown() {
+    if (this._destroyed) {
+      return;
+    }
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._destroyed = true;
+
+    // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
+    this.addListener = function() {};
+    this.emit = function() {};
+    // NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.
+
+    // Unsubscribe this bridge incoming message listeners to be sure, and so they don't have to do that.
+    this.removeAllListeners();
+
+    // Stop accepting and emitting incoming messages from the wall.
+    const wallUnlisten = this._wallUnlisten;
+    if (wallUnlisten) {
+      wallUnlisten();
+    }
+
+    // Queue the shutdown outgoing message for subscribers.
+    this.send('shutdown');
+
+    // Synchronously flush all queued outgoing messages.
+    // At this step the subscribers' code may run in this call stack.
+    do {
+      this._flush();
+    } while (this._messageQueue.length);
+
+    // Make sure once again that there is no dangling timer.
+    clearTimeout(this._timeoutID);
+    this._timeoutID = null;
+  }
+
   _flush = () => {
+    // This method is used after the bridge is marked as destroyed in shutdown sequence,
+    // so we do not bail out if the bridge marked as destroyed.
+    // It is a private method that the bridge ensures is only called at the right times.
+
     clearTimeout(this._timeoutID);
     this._timeoutID = null;
 
diff --git a/src/types.js b/src/types.js
index 2bd576af9bee..9e5a9de04efd 100644
--- a/src/types.js
+++ b/src/types.js
@@ -7,6 +7,7 @@ export type Bridge = {
 };
 
 export type Wall = {|
-  listen: (fn: Function) => void,
+  // `listen` returns the "unlisten" function.
+  listen: (fn: Function) => Function,
   send: (event: string, payload: any, transferable?: Array<any>) => void,
 |};

From d35cf80921245ff7da4bcc7c17f68082f21088fb Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 28 Apr 2019 12:57:28 -0700
Subject: [PATCH 509/814] Remove Fiber type properties we don't use in DevTools

---
 src/backend/types.js | 26 +++-----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/backend/types.js b/src/backend/types.js
index 705d2bc7ca93..4a2c5372c9f5 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -8,7 +8,6 @@ type BundleType =
   | 1; // DEV
 
 export type WorkTag = number;
-export type TypeOfMode = number;
 export type SideEffectTag = number;
 export type ExpirationTime = number;
 export type RefObject = {|
@@ -30,7 +29,9 @@ export type HookType =
   | 'useImperativeHandle'
   | 'useDebugValue';
 
-// Copied modified from https://github.com/facebook/react/blob/v16.9.0-alpha.0/packages/react-reconciler/src/ReactFiber.js
+// The Fiber type is copied from React and should be kept in sync:
+// https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiber.js
+// The properties we don't use in DevTools are omitted.
 export type Fiber = {|
   tag: WorkTag,
 
@@ -53,41 +54,20 @@ export type Fiber = {|
   pendingProps: any, // This type will be more specific once we overload the tag.
   memoizedProps: any, // The props used to create the output.
 
-  // updateQueue: UpdateQueue<any> | null,
-
   memoizedState: any,
 
-  // contextDependencies: ContextDependencyList | null,
-
-  mode: TypeOfMode,
-
   effectTag: SideEffectTag,
 
-  nextEffect: Fiber | null,
-
-  firstEffect: Fiber | null,
-  lastEffect: Fiber | null,
-
-  expirationTime: ExpirationTime,
-
-  childExpirationTime: ExpirationTime,
-
   alternate: Fiber | null,
 
   actualDuration?: number,
 
   actualStartTime?: number,
 
-  selfBaseDuration?: number,
-
   treeBaseDuration?: number,
 
-  _debugID?: number,
   _debugSource?: Source | null,
   _debugOwner?: Fiber | null,
-  _debugIsCurrentlyTiming?: boolean,
-
-  _debugHookTypes?: Array<HookType> | null,
 |};
 
 // TODO: If it's useful for the frontend to know which types of data an Element has

From bfbde71657dacd2e418bd1868320da41bc1ecbac Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Mon, 29 Apr 2019 21:56:53 -0700
Subject: [PATCH 510/814] Fix Flow failure on CircleCI due to the number of
 workers

https://github.com/flowtype/flow-bin/issues/138#issuecomment-448416874
https://github.com/flowtype/flow-bin/issues/138#issuecomment-450367472

> This will stop flow from trying to consume too many virtual CPUs (which CircleCI doesn't actually provide), letting it run to completion without first running out of memory and killing its sub processes.

The log output in CircleCI was:
https://circleci.com/gh/bvaughn/react-devtools-experimental/201
```
#!/bin/bash -eo pipefail
yarn flow
yarn run v1.10.1
$ /home/circleci/repo/node_modules/.bin/flow
Launching Flow server for /home/circleci/repo
Spawned flow server (pid=259)
Logs will go to /tmp/flow/zShomezScirclecizSrepo.log
Monitor logs will go to /tmp/flow/zShomezScirclecizSrepo.monitor_log
Launching Flow server for /home/circleci/repo
Spawned flow server (pid=361)
Logs will go to /tmp/flow/zShomezScirclecizSrepo.log
Monitor logs will go to /tmp/flow/zShomezScirclecizSrepo.monitor_log
Launching Flow server for /home/circleci/repo
Spawned flow server (pid=464)
Logs will go to /tmp/flow/zShomezScirclecizSrepo.log
Monitor logs will go to /tmp/flow/zShomezScirclecizSrepo.monitor_log
Launching Flow server for /home/circleci/repo
Spawned flow server (pid=567)
Logs will go to /tmp/flow/zShomezScirclecizSrepo.log
Monitor logs will go to /tmp/flow/zShomezScirclecizSrepo.monitor_log
Lost connection to the flow server (0 retries remaining): -Out of retries, exiting!
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Exited with code 1
```
---
 .flowconfig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.flowconfig b/.flowconfig
index c2f42c17c7c9..d613bab513a3 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -25,6 +25,7 @@ shells/dev/build/*
 [lints]
 
 [options]
+server.max_workers=4
 esproposal.class_instance_fields=enable
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

From abcb613223c132dcd0e09a6941c628a0177a1d7a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 30 Apr 2019 09:23:11 -0700
Subject: [PATCH 511/814] Minor Bridge code tweaks:

1. Renamed a variable
2. Coerced undefined to null
3. Added a couple of console.warn() for unexpected paths
---
 src/bridge.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/bridge.js b/src/bridge.js
index eb9346207475..a839db53231c 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -12,9 +12,9 @@ type Message = {|
 |};
 
 export default class Bridge extends EventEmitter {
+  _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
-  _destroyed: boolean = false;
   _wall: Wall;
   _wallUnlisten: Function | null = null;
 
@@ -23,13 +23,17 @@ export default class Bridge extends EventEmitter {
 
     this._wall = wall;
 
-    this._wallUnlisten = wall.listen((message: Message) => {
-      this.emit(message.event, message.payload);
-    });
+    this._wallUnlisten =
+      wall.listen((message: Message) => {
+        this.emit(message.event, message.payload);
+      }) || null;
   }
 
   send(event: string, payload: any, transferable?: Array<any>) {
-    if (this._destroyed) {
+    if (this._isShutdown) {
+      console.warn(
+        `Cannot send message "${event}" through a Bridge that has been shutdown.`
+      );
       return;
     }
 
@@ -48,12 +52,13 @@ export default class Bridge extends EventEmitter {
   }
 
   shutdown() {
-    if (this._destroyed) {
+    if (this._isShutdown) {
+      console.warn('Bridge was already shutdown.');
       return;
     }
 
     // Mark this bridge as destroyed, i.e. disable its public API.
-    this._destroyed = true;
+    this._isShutdown = true;
 
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
     this.addListener = function() {};

From d1f6e762e483b134449d458b28dedab432bb264d Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 28 Apr 2019 03:44:36 -0700
Subject: [PATCH 512/814] Improve Flow coverage by reducing typecasts through
 `any`

There are many unnecessary typecasts through `any` which
break the Flow of types across the program.

It's more bulletproof to avoid lying to ourselves about types.

Also fixed sketchy null check where zero ID would be skipped:
```diff
-  } else if (selectedElementID) {
+  } else if (selectedElementID !== null) {
```
---
 src/devtools/store.js                             |  2 +-
 src/devtools/views/Profiler/ChartNode.js          |  4 ++--
 .../views/Profiler/CommitFlamegraphListItem.js    |  2 +-
 src/devtools/views/Profiler/FilterModal.js        | 13 +++++++------
 src/devtools/views/Profiler/ProfilerContext.js    | 15 ++++++---------
 src/devtools/views/Profiler/utils.js              |  5 +++--
 src/devtools/views/hooks.js                       |  2 +-
 7 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index ecdf1683df26..b02983ff49c5 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -503,7 +503,7 @@ export default class Store extends EventEmitter {
     while (current != null) {
       if (current.parentID === 0) {
         const rendererID = this._rootIDToRendererID.get(current.id);
-        return rendererID == null ? null : ((rendererID: any): number);
+        return rendererID == null ? null : rendererID;
       } else {
         current = this._idToElement.get(current.parentID);
       }
diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
index 77fa24e1e81d..b739434e637d 100644
--- a/src/devtools/views/Profiler/ChartNode.js
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -10,8 +10,8 @@ type Props = {|
   height: number,
   isDimmed?: boolean,
   label: string,
-  onClick: Function,
-  onDoubleClick?: Function,
+  onClick: (event: SyntheticMouseEvent<*>) => mixed,
+  onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
   placeLabelAboveNode?: boolean,
   width: number,
   x: number,
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 8d55d781b091..bd3b0bdb41f1 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -26,7 +26,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
   const { maxSelfDuration, rows } = chartData;
 
   const handleClick = useCallback(
-    (event: MouseEvent, id: number, name: string) => {
+    (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
       selectFiber(id, name);
     },
diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/FilterModal.js
index fc58bd5616d8..f1c1477e8ddd 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/FilterModal.js
@@ -7,7 +7,7 @@ import { useModalDismissSignal } from '../hooks';
 import styles from './FilterModal.css';
 
 type Props = {|
-  dismissModal: Function,
+  dismissModal: () => void,
 |};
 
 export default function FilterModal({ dismissModal }: Props) {
@@ -19,8 +19,8 @@ export default function FilterModal({ dismissModal }: Props) {
   } = useContext(ProfilerContext);
 
   const handleNumberChange = useCallback(
-    ({ currentTarget }) => {
-      const newValue = parseFloat(currentTarget.value);
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const newValue = parseFloat(event.currentTarget.value);
       setMinCommitDuration(
         Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
       );
@@ -29,9 +29,10 @@ export default function FilterModal({ dismissModal }: Props) {
   );
 
   const handleEnabledChange = useCallback(
-    ({ currentTarget }) => {
-      setIsCommitFilterEnabled(currentTarget.checked);
-      if (currentTarget.checked) {
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const checked = event.currentTarget.checked;
+      setIsCommitFilterEnabled(checked);
+      if (checked) {
         if (inputRef.current !== null) {
           inputRef.current.focus();
         }
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 2a9aa6c8fbfe..c2fd4b5a5dfc 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -114,19 +114,16 @@ function ProfilerContextController({ children }: Props) {
   let rootHasProfilingData = false;
   if (importedProfilingData !== null) {
     rootHasProfilingData = true;
-  } else if (selectedElementID) {
-    rendererID = store.getRendererIDForElement(
-      ((selectedElementID: any): number)
-    );
-    rootID = store.getRootIDForElement(((selectedElementID: any): number));
-    rootHasProfilingData = store.profilingOperations.has(
-      ((rootID: any): number)
-    );
+  } else if (selectedElementID !== null) {
+    rendererID = store.getRendererIDForElement(selectedElementID);
+    rootID = store.getRootIDForElement(selectedElementID);
+    rootHasProfilingData =
+      rootID === null ? false : store.profilingOperations.has(rootID);
   } else if (store.roots.length > 0) {
     // If no root is selected, assume the first root; many React apps are single root anyway.
     rootID = store.roots[0];
     rootHasProfilingData = store.profilingOperations.has(rootID);
-    rendererID = store.getRendererIDForElement(((rootID: any): number));
+    rendererID = store.getRendererIDForElement(rootID);
   }
 
   const startProfiling = useCallback(() => store.startProfiling(), [store]);
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 33c9217f8671..61d2725c76d4 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -27,15 +27,16 @@ export const calculateSelfDuration = (
     return 0;
   }
 
-  let selfDuration = ((actualDurations.get(id): any): number);
   const node = nodes.get(id);
   if (node == null) {
     throw Error(`Could not find node with id "${id}" in commit tree`);
   }
 
+  let selfDuration = actualDurations.get(id) || 0;
+
   node.children.forEach(childID => {
     if (actualDurations.has(childID)) {
-      selfDuration -= ((actualDurations.get(childID): any): number);
+      selfDuration -= actualDurations.get(childID) || 0;
     }
   });
 
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 6d48915d2036..2eddd25fec8e 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -88,7 +88,7 @@ export function useLocalStorage<T>(
 
 export function useModalDismissSignal(
   modalRef: { current: HTMLDivElement | null },
-  dismissCallback: Function
+  dismissCallback: () => void
 ): void {
   useEffect(() => {
     if (modalRef.current === null) {

From c6c71ef8f900341bfd2778c8dd60a45f34ec0273 Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Wed, 1 May 2019 01:07:36 -0700
Subject: [PATCH 513/814] Fix profiling screenshots data structure to map
 rootID to commitIndex

Propagate `rootID` throughout the code for `captureScreenshot`.

Rename private profiling maps of `store` to make relations more clear.

Fix missing cleanup for screenshots data in `set importedProfilingData` of `store`.
---
 shells/browser/shared/src/background.js       |  3 +-
 shells/browser/shared/src/main.js             |  3 +-
 shells/dev/src/backend.js                     |  3 +-
 src/backend/agent.js                          | 10 ++-
 src/devtools/store.js                         | 82 +++++++++++--------
 .../views/Profiler/SidebarCommitInfo.js       |  7 +-
 6 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index 947117a10501..64e0bfead84b 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -122,7 +122,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     }
 
     if (request.captureScreenshot) {
-      const { commitIndex } = request;
+      const { commitIndex, rootID } = request;
       try {
         chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
           // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
@@ -134,6 +134,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
                 payload: {
                   commitIndex,
                   dataURL,
+                  rootID,
                 },
               });
             }
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 400ffa947552..f4158fbdddb5 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -77,11 +77,12 @@ function createPanelIfReactLoaded() {
             filename,
           });
         });
-        bridge.addListener('captureScreenshot', ({ commitIndex }) => {
+        bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
           chrome.runtime.sendMessage(
             {
               captureScreenshot: true,
               commitIndex,
+              rootID,
             },
             response => bridge.send('screenshotCaptured', response)
           );
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index ac0799b97f23..20783cd2ec40 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -20,11 +20,12 @@ const bridge = new Bridge({
   },
 });
 
-bridge.addListener('captureScreenshot', ({ commitIndex }) => {
+bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
   html2canvas(document.body, { logging: false }).then(canvas => {
     bridge.send('screenshotCaptured', {
       commitIndex,
       dataURL: canvas.toDataURL(),
+      rootID,
     });
   });
 });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5364d048c520..5b03f505c95b 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -125,8 +125,14 @@ export default class Agent extends EventEmitter {
     }
   }
 
-  captureScreenshot = ({ commitIndex }: { commitIndex: number }) => {
-    this._bridge.send('captureScreenshot', { commitIndex });
+  captureScreenshot = ({
+    commitIndex,
+    rootID,
+  }: {
+    commitIndex: number,
+    rootID: number,
+  }) => {
+    this._bridge.send('captureScreenshot', { commitIndex, rootID });
   };
 
   getIDForNode(node: Object): number | null {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index ecdf1683df26..7fac462f117f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -91,16 +91,20 @@ export default class Store extends EventEmitter {
   // Map of root (id) to a list of tree mutation that occur during profiling.
   // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
   // to reconstruct the state of each root for each commit.
-  _profilingOperations: Map<number, Array<Uint32Array>> = new Map();
+  _profilingOperationsByRootID: Map<number, Array<Uint32Array>> = new Map();
 
+  // Map of root (id) to a Map of screenshots by commit ID.
   // Stores screenshots for each commit (when profiling).
-  _profilingScreenshots: Map<number, string> = new Map();
+  _profilingScreenshotsByRootID: Map<number, Map<number, string>> = new Map();
 
   // Snapshot of the state of the main Store (including all roots) when profiling started.
   // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
   // to reconstruct the state of each root for each commit.
   // It's okay to use a single root to store this information because node IDs are unique across all roots.
-  _profilingSnapshot: Map<number, ProfilingSnapshotNode> = new Map();
+  _profilingSnapshotsByElementID: Map<
+    number,
+    ProfilingSnapshotNode
+  > = new Map();
 
   // Incremented each time the store is mutated.
   // This enables a passive effect to detect a mutation between render and commit phase.
@@ -187,14 +191,14 @@ export default class Store extends EventEmitter {
     if (this._ownersMap.size !== 0) {
       throw new Error('Expected _ownersMap to be empty.');
     }
-    if (this._profilingOperations.size !== 0) {
-      throw new Error('Expected _profilingOperations to be empty.');
+    if (this._profilingOperationsByRootID.size !== 0) {
+      throw new Error('Expected _profilingOperationsByRootID to be empty.');
     }
-    if (this._profilingScreenshots.size !== 0) {
-      throw new Error('Expected _profilingScreenshots to be empty.');
+    if (this._profilingScreenshotsByRootID.size !== 0) {
+      throw new Error('Expected _profilingScreenshotsByRootID to be empty.');
     }
-    if (this._profilingSnapshot.size !== 0) {
-      throw new Error('Expected _profilingSnapshot to be empty.');
+    if (this._profilingSnapshotsByElementID.size !== 0) {
+      throw new Error('Expected _profilingSnapshotsByElementID to be empty.');
     }
     if (this._rootIDToCapabilities.size !== 0) {
       throw new Error('Expected _rootIDToCapabilities to be empty.');
@@ -239,7 +243,8 @@ export default class Store extends EventEmitter {
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
     return (
-      this._importedProfilingData !== null || this._profilingOperations.size > 0
+      this._importedProfilingData !== null ||
+      this._profilingOperationsByRootID.size > 0
     );
   }
 
@@ -248,8 +253,9 @@ export default class Store extends EventEmitter {
   }
   set importedProfilingData(value: ImportedProfilingData | null): void {
     this._importedProfilingData = value;
-    this._profilingOperations = new Map();
-    this._profilingSnapshot = new Map();
+    this._profilingOperationsByRootID = new Map();
+    this._profilingScreenshotsByRootID = new Map();
+    this._profilingSnapshotsByElementID = new Map();
     this._profilingCache.invalidate();
 
     this.emit('importedProfilingData');
@@ -268,15 +274,15 @@ export default class Store extends EventEmitter {
   }
 
   get profilingOperations(): Map<number, Array<Uint32Array>> {
-    return this._profilingOperations;
+    return this._profilingOperationsByRootID;
   }
 
-  get profilingScreenshots(): Map<number, string> {
-    return this._profilingScreenshots;
+  get profilingScreenshots(): Map<number, Map<number, string>> {
+    return this._profilingScreenshotsByRootID;
   }
 
   get profilingSnapshot(): Map<number, ProfilingSnapshotNode> {
-    return this._profilingSnapshot;
+    return this._profilingSnapshotsByElementID;
   }
 
   get revision(): number {
@@ -305,9 +311,9 @@ export default class Store extends EventEmitter {
 
   clearProfilingData(): void {
     this._importedProfilingData = null;
-    this._profilingOperations = new Map();
-    this._profilingScreenshots = new Map();
-    this._profilingSnapshot = new Map();
+    this._profilingOperationsByRootID = new Map();
+    this._profilingScreenshotsByRootID = new Map();
+    this._profilingSnapshotsByElementID = new Map();
 
     // Invalidate suspense cache if profiling data is being (re-)recorded.
     // Note that we clear now because any existing data is "stale".
@@ -639,17 +645,17 @@ export default class Store extends EventEmitter {
   }
 
   _captureScreenshot = throttle(
-    memoize((commitIndex: number) => {
-      this._bridge.send('captureScreenshot', { commitIndex });
+    memoize((rootID: number, commitIndex: number) => {
+      this._bridge.send('captureScreenshot', { commitIndex, rootID });
     }),
     THROTTLE_CAPTURE_SCREENSHOT_DURATION
   );
 
-  _takeProfilingSnapshotRecursive = (id: number) => {
-    const element = this.getElementByID(id);
+  _takeProfilingSnapshotRecursive = (elementID: number) => {
+    const element = this.getElementByID(elementID);
     if (element !== null) {
-      this._profilingSnapshot.set(id, {
-        id,
+      this._profilingSnapshotsByElementID.set(elementID, {
+        id: elementID,
         children: element.children.slice(0),
         displayName: element.displayName,
         key: element.key,
@@ -703,17 +709,17 @@ export default class Store extends EventEmitter {
     const rootID = operations[1];
 
     if (this._isProfiling) {
-      let profilingOperations = this._profilingOperations.get(rootID);
+      let profilingOperations = this._profilingOperationsByRootID.get(rootID);
       if (profilingOperations == null) {
         profilingOperations = [operations];
-        this._profilingOperations.set(rootID, profilingOperations);
+        this._profilingOperationsByRootID.set(rootID, profilingOperations);
       } else {
         profilingOperations.push(operations);
       }
 
       if (this._captureScreenshots) {
         const commitIndex = profilingOperations.length - 1;
-        this._captureScreenshot(commitIndex);
+        this._captureScreenshot(rootID, commitIndex);
       }
     }
 
@@ -990,9 +996,9 @@ export default class Store extends EventEmitter {
   onProfilingStatus = (isProfiling: boolean) => {
     if (isProfiling) {
       this._importedProfilingData = null;
-      this._profilingOperations = new Map();
-      this._profilingScreenshots = new Map();
-      this._profilingSnapshot = new Map();
+      this._profilingOperationsByRootID = new Map();
+      this._profilingScreenshotsByRootID = new Map();
+      this._profilingSnapshotsByElementID = new Map();
       this.roots.forEach(this._takeProfilingSnapshotRecursive);
     }
 
@@ -1011,11 +1017,23 @@ export default class Store extends EventEmitter {
   onScreenshotCaptured = ({
     commitIndex,
     dataURL,
+    rootID,
   }: {|
     commitIndex: number,
     dataURL: string,
+    rootID: number,
   |}) => {
-    this._profilingScreenshots.set(commitIndex, dataURL);
+    let profilingScreenshotsForRootByCommitIndex = this._profilingScreenshotsByRootID.get(
+      rootID
+    );
+    if (!profilingScreenshotsForRootByCommitIndex) {
+      profilingScreenshotsForRootByCommitIndex = new Map();
+      this._profilingScreenshotsByRootID.set(
+        rootID,
+        profilingScreenshotsForRootByCommitIndex
+      );
+    }
+    profilingScreenshotsForRootByCommitIndex.set(commitIndex, dataURL);
   };
 
   onBridgeShutdown = () => {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 1ee99b2b8228..635039b7276b 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -24,10 +24,13 @@ export default function SidebarCommitInfo(_: Props) {
     profilingScreenshots,
   } = useContext(StoreContext);
 
+  const screenshotsByCommitIndex =
+    rootID !== null ? profilingScreenshots.get(rootID) : null;
   const screenshot =
-    selectedCommitIndex !== null
-      ? profilingScreenshots.get(selectedCommitIndex)
+    screenshotsByCommitIndex != null && selectedCommitIndex !== null
+      ? screenshotsByCommitIndex.get(selectedCommitIndex)
       : null;
+
   const [
     isScreenshotModalVisible,
     setIsScreenshotModalVisible,

From cd89c0d75f6e323a3e3fc16ef9e2d09dc93675ed Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Wed, 1 May 2019 01:44:07 -0700
Subject: [PATCH 514/814] Clear profiling data for root when the root is
 unmounted

Fixes https://github.com/bvaughn/react-devtools-experimental/issues/232
---
 .../__snapshots__/profiler-test.js.snap       | 31 +++++++++
 src/__tests__/profiler-test.js                | 60 ++++++++++++++++++
 src/devtools/store.js                         | 63 ++++++++++++-------
 3 files changed, 133 insertions(+), 21 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/profiler-test.js.snap
 create mode 100644 src/__tests__/profiler-test.js

diff --git a/src/__tests__/__snapshots__/profiler-test.js.snap b/src/__tests__/__snapshots__/profiler-test.js.snap
new file mode 100644
index 000000000000..dade7370b5be
--- /dev/null
+++ b/src/__tests__/__snapshots__/profiler-test.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 1: mount 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 2: profiling started 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 3: update 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 4: unmount B 1`] = `
+[root]
+  ▸ <Parent key="A">
+`;
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 5: unmount A 1`] = ``;
+
+exports[`Profiler should start and stop profiling, handle root unmounting: 6: profiling stopped 1`] = ``;
diff --git a/src/__tests__/profiler-test.js b/src/__tests__/profiler-test.js
new file mode 100644
index 000000000000..28be905d05c4
--- /dev/null
+++ b/src/__tests__/profiler-test.js
@@ -0,0 +1,60 @@
+// @flow
+
+describe('Profiler', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let store;
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    store = global.store;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+  });
+
+  it('should start and stop profiling, handle root unmounting', async () => {
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
+    const Child = () => <div>Hi!</div>;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    act(() => {
+      ReactDOM.render(<Parent key="A" count={3} />, containerA);
+      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+    });
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => {
+      store.startProfiling();
+    });
+    expect(store).toMatchSnapshot('2: profiling started');
+
+    act(() => {
+      ReactDOM.render(<Parent key="A" count={4} />, containerA);
+      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    });
+    expect(store).toMatchSnapshot('3: update');
+
+    act(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(store).toMatchSnapshot('4: unmount B');
+
+    act(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(store).toMatchSnapshot('5: unmount A');
+
+    act(() => {
+      store.stopProfiling();
+    });
+    expect(store).toMatchSnapshot('6: profiling stopped');
+  });
+});
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 7fac462f117f..32f269b6b38c 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -185,27 +185,31 @@ export default class Store extends EventEmitter {
 
   assertEmptyMaps() {
     // This is only used in tests to avoid memory leaks.
-    if (this._idToElement.size !== 0) {
-      throw new Error('Expected _idToElement to be empty.');
-    }
-    if (this._ownersMap.size !== 0) {
-      throw new Error('Expected _ownersMap to be empty.');
-    }
-    if (this._profilingOperationsByRootID.size !== 0) {
-      throw new Error('Expected _profilingOperationsByRootID to be empty.');
-    }
-    if (this._profilingScreenshotsByRootID.size !== 0) {
-      throw new Error('Expected _profilingScreenshotsByRootID to be empty.');
-    }
-    if (this._profilingSnapshotsByElementID.size !== 0) {
-      throw new Error('Expected _profilingSnapshotsByElementID to be empty.');
-    }
-    if (this._rootIDToCapabilities.size !== 0) {
-      throw new Error('Expected _rootIDToCapabilities to be empty.');
-    }
-    if (this._rootIDToRendererID.size !== 0) {
-      throw new Error('Expected _rootIDToRendererID to be empty.');
-    }
+    const assertOneMap = (mapName, map) => {
+      if (map.size !== 0) {
+        throw new Error(
+          `Expected ${mapName} to be empty, got ${
+            map.size
+          }: ${require('util').inspect(this, { depth: 20 })}`
+        );
+      }
+    };
+    assertOneMap('_idToElement', this._idToElement);
+    assertOneMap('_ownersMap', this._ownersMap);
+    assertOneMap(
+      '_profilingOperationsByRootID',
+      this._profilingOperationsByRootID
+    );
+    assertOneMap(
+      '_profilingScreenshotsByRootID',
+      this._profilingScreenshotsByRootID
+    );
+    assertOneMap(
+      '_profilingSnapshotsByElementID',
+      this._profilingSnapshotsByElementID
+    );
+    assertOneMap('_rootIDToCapabilities', this._rootIDToCapabilities);
+    assertOneMap('_rootIDToRendererID', this._rootIDToRendererID);
   }
 
   get captureScreenshots(): boolean {
@@ -665,6 +669,15 @@ export default class Store extends EventEmitter {
     }
   };
 
+  _clearProfilingSnapshotRecursive = (elementID: number) => {
+    const element = this.getElementByID(elementID);
+    if (element !== null) {
+      this._profilingSnapshotsByElementID.delete(elementID);
+
+      element.children.forEach(this._clearProfilingSnapshotRecursive);
+    }
+  };
+
   _adjustParentTreeWeight = (
     parentElement: Element | null,
     weightDelta: number
@@ -876,6 +889,11 @@ export default class Store extends EventEmitter {
               throw new Error(`Node ${id} was removed before its children.`);
             }
 
+            // The following call depends on `getElementByID`
+            // which depends on the element being in `_idToElement`,
+            // so we have to do it before removing the element from `_idToElement`.
+            this._clearProfilingSnapshotRecursive(id);
+
             this._idToElement.delete(id);
 
             let parentElement = null;
@@ -888,6 +906,9 @@ export default class Store extends EventEmitter {
               this._rootIDToRendererID.delete(id);
               this._rootIDToCapabilities.delete(id);
 
+              this._profilingOperationsByRootID.delete(id);
+              this._profilingScreenshotsByRootID.delete(id);
+
               haveRootsChanged = true;
             } else {
               if (__DEBUG__) {

From b9ae9393b9000bc43c8039ad80faa84c96469e6c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 1 May 2019 17:13:33 +0100
Subject: [PATCH 515/814] Use WebpackDevServer for local testing

---
 package.json                 |   5 +-
 shells/dev/index.html        |   3 +-
 shells/dev/src/devtools.js   |   7 +-
 shells/dev/webpack.config.js |  10 +-
 yarn.lock                    | 887 +++++++++++++++++++++++++++++++++--
 5 files changed, 873 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index a97acfb8ba3e..4becfc24d1cc 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,8 @@
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
-    "start": "cd ./shells/dev && opener ./index.html && cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
-    "start:prod": "cd ./shells/dev && opener ./index.html && cross-env NODE_ENV=production webpack --config webpack.config.js --watch",
+    "start": "cd ./shells/dev && cross-env NODE_ENV=development webpack-dev-server --open",
+    "start:prod": "cd ./shells/dev && cross-env NODE_ENV=production webpack-dev-server --open",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",
@@ -141,6 +141,7 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.3.1",
     "xml-js": "^1.6.11"
   }
 }
diff --git a/shells/dev/index.html b/shells/dev/index.html
index 842137bc2399..4f27aafc7aa0 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -61,6 +61,7 @@
     <div id="devtools"></div>
 
     <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
-    <script src="build/devtools.js"></script>
+    <!-- It's served by webpack dev server and doesn't exist on disk -->
+    <script src="devtools.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 50e6afd663ac..82030b02eda4 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -38,7 +38,7 @@ mountButton.addEventListener('click', function() {
   }
 });
 
-inject('./build/app.js', () => {
+inject('./app.js', () => {
   initDevTools({
     connect(cb) {
       const bridge = new Bridge({
@@ -78,7 +78,10 @@ inject('./build/app.js', () => {
 
         // Initialize the backend only once the DevTools frontend Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
-        inject('./build/backend.js');
+        inject('./backend.js', () => {
+          // Clear noisy webpack "WDS: ..." output.
+          console.clear();
+        });
       });
     },
 
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 38d5c70a6f3a..dc2d0f7a240e 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -16,15 +16,17 @@ const DEVTOOLS_VERSION = getVersionString();
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: false,
+  devServer: {
+    hot: true,
+    port: 8080,
+    clientLogLevel: 'warning',
+    stats: 'errors-only',
+  },
   entry: {
     app: './app/index.js',
     backend: './src/backend.js',
     devtools: './src/devtools.js',
   },
-  output: {
-    path: __dirname + '/build',
-    filename: '[name].js',
-  },
   resolve: {
     alias: {
       src: resolve(__dirname, '../../src'),
diff --git a/yarn.lock b/yarn.lock
index 2f1b774127e5..2aee4bbdbde7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1119,11 +1119,30 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
+"@types/glob@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
 "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.0.tgz#1eb8c033e98cf4e1a4cedcaf8bcafe8cb7591e85"
   integrity sha512-eAtOAFZefEnfJiRFQBGw1eYqa5GTLCZ1y86N0XSI/D6EB+E8z6VPV/UL7Gi5UEclFqoQk+6NRqEDsfmDLXn8sg==
 
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
 "@types/node@*":
   version "11.13.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.4.tgz#f83ec3c3e05b174b7241fadeb6688267fe5b22ca"
@@ -1322,6 +1341,14 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+accepts@~1.3.4, accepts@~1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
 acorn-dynamic-import@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
@@ -1529,6 +1556,11 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
+ansi-colors@^3.0.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
+  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
+
 ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@@ -1539,6 +1571,11 @@ ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1719,6 +1756,16 @@ array-find-index@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
   integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
+array-flatten@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
+
 array-from@~2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
@@ -2379,6 +2426,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -2428,6 +2480,34 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
   integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
 
+body-parser@1.18.3:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
+  integrity sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "~1.6.3"
+    iconv-lite "0.4.23"
+    on-finished "~2.3.0"
+    qs "6.5.2"
+    raw-body "2.3.3"
+    type-is "~1.6.16"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -2611,6 +2691,11 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
+
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -2662,6 +2747,11 @@ byline@^5.0.0:
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
   integrity sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=
 
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
 cacache@^11.0.2:
   version "11.3.2"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
@@ -2873,6 +2963,25 @@ chokidar@^2.0.2:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.5.tgz#0ae8434d962281a5f56c72869e79cb6d9d86ad4d"
+  integrity sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
 chownr@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
@@ -3136,6 +3245,26 @@ compress-commons@^1.2.0:
     normalize-path "^2.0.0"
     readable-stream "^2.0.0"
 
+compressible@~2.0.16:
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
+  integrity sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==
+  dependencies:
+    mime-db ">= 1.40.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.16"
+    debug "2.6.9"
+    on-headers "~1.0.2"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3171,6 +3300,11 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -3198,10 +3332,20 @@ contains-path@^0.1.0:
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
   integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
 
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+  integrity sha1-DPaLud318r55YcOoUXjLhdunjLQ=
+
 content-type-parser@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
 
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
 conventional-changelog-angular@^1.6.6:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
@@ -3380,7 +3524,12 @@ convert-source-map@^1.4.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
-cookie@^0.3.1:
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.3.1, cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
@@ -3723,7 +3872,7 @@ debounce@1.1.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
   integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==
 
-debug@2, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
+debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -3742,6 +3891,13 @@ debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
+debug@^3.2.5, debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
 debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -3808,6 +3964,14 @@ deepmerge@^2.0.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
+default-gateway@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
+  dependencies:
+    execa "^1.0.0"
+    ip-regex "^2.1.0"
+
 default-require-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
@@ -3863,6 +4027,19 @@ del@^2.0.2:
     pinkie-promise "^2.0.0"
     rimraf "^2.2.8"
 
+del@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    globby "^6.1.0"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -3873,6 +4050,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -3881,6 +4063,11 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
 detect-file@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@@ -3906,6 +4093,11 @@ detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
 
+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
 diff-sequences@^24.3.0:
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
@@ -3934,6 +4126,26 @@ dispensary@0.30.0:
     source-map-support "~0.5.4"
     yargs "~12.0.1"
 
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
+
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
+  dependencies:
+    buffer-indexof "^1.0.0"
+
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -4058,6 +4270,11 @@ ecdsa-sig-formatter@1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
 electron-to-chromium@^1.3.113:
   version "1.3.113"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
@@ -4096,6 +4313,11 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
 encoding@^0.1.11:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
@@ -4293,6 +4515,11 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -4677,6 +4904,11 @@ esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
 event-emitter@~0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -4690,6 +4922,11 @@ event-to-promise@0.8.0:
   resolved "https://registry.yarnpkg.com/event-to-promise/-/event-to-promise-0.8.0.tgz#4b84f11772b6f25f7752fc74d971531ac6f5b626"
   integrity sha1-S4TxF3K28l93Uvx02XFTGsb1tiY=
 
+eventemitter3@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
@@ -4700,6 +4937,13 @@ events@^3.0.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
   integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
 
+eventsource@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
+  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
+  dependencies:
+    original "^1.0.0"
+
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@@ -4805,6 +5049,42 @@ expect@^24.7.1:
     jest-message-util "^24.7.1"
     jest-regex-util "^24.3.0"
 
+express@^4.16.4:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
+  integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==
+  dependencies:
+    accepts "~1.3.5"
+    array-flatten "1.1.1"
+    body-parser "1.18.3"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.1"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.4"
+    qs "6.5.2"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.2"
+    send "0.16.2"
+    serve-static "1.13.2"
+    setprototypeof "1.1.0"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -4923,6 +5203,20 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  integrity sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=
+  dependencies:
+    websocket-driver ">=0.5.1"
+
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
@@ -5038,6 +5332,19 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+finalhandler@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+  integrity sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.4.0"
+    unpipe "~1.0.0"
+
 find-cache-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
@@ -5144,6 +5451,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
+  dependencies:
+    debug "^3.2.6"
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -5171,6 +5485,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5178,6 +5497,11 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@@ -5617,6 +5941,11 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
+handle-thing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
+  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+
 handlebars@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.0.tgz#0d6a6f34ff1f63cecec8423aa4169827bf787c3a"
@@ -5791,12 +6120,27 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.5.0:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
   integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
 
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+
 html2canvas@^1.0.0-alpha.12:
   version "1.0.0-alpha.12"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz#3b1992e3c9b3f56063c35fd620494f37eba88513"
@@ -5824,6 +6168,45 @@ http-browserify@^1.3.2:
     Base64 "~0.2.0"
     inherits "~2.0.1"
 
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
+
+http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.4.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.0.tgz#d65edbede84349d0dc30320815a15d39cc3cbbd8"
+  integrity sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==
+
+http-proxy-middleware@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -5854,6 +6237,13 @@ iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
+iconv-lite@0.4.23:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6040,6 +6430,14 @@ inquirer@^6.1.0:
     strip-ansi "^5.0.0"
     through "^2.3.6"
 
+internal-ip@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
+  dependencies:
+    default-gateway "^4.2.0"
+    ipaddr.js "^1.9.0"
+
 interpret@^1.0.0, interpret@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -6068,6 +6466,21 @@ invert-kv@^2.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
   integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+
+ipaddr.js@1.9.0, ipaddr.js@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
+  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
+
 is-absolute@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
@@ -6278,18 +6691,37 @@ is-path-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
 
+is-path-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.1.0.tgz#2e0c7e463ff5b7a0eb60852d851a6809347a124c"
+  integrity sha512-Sc5j3/YnM8tDeyCsVeKlm/0p95075DyLmDEIkSgQ7mXkrOX+uTCtmQFm0CYzVyJwcCCmO3k8qfJt17SxQwB5Zw==
+
 is-path-in-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
   dependencies:
     is-path-inside "^1.0.0"
 
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
+  dependencies:
+    is-path-inside "^2.1.0"
+
 is-path-inside@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
   dependencies:
     path-is-inside "^1.0.1"
 
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
+  dependencies:
+    path-is-inside "^1.0.2"
+
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -7016,6 +7448,11 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json3@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+  integrity sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=
+
 json5@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -7125,6 +7562,11 @@ jws@^3.1.4:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+killable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -7584,6 +8026,11 @@ log-update@^2.0.0, log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
+loglevel@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+  integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7694,6 +8141,11 @@ mdn-browser-compat-data@0.0.66:
   dependencies:
     extend "3.0.2"
 
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
@@ -7719,7 +8171,7 @@ memoize-one@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
 
-memory-fs@^0.4.0, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
@@ -7758,12 +8210,22 @@ meow@^4.0.0:
     redent "^2.0.0"
     trim-newlines "^2.0.0"
 
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
   dependencies:
     readable-stream "^2.0.1"
 
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
 micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -7791,6 +8253,11 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
+mime-db@1.40.0, "mime-db@>= 1.40.0 < 2":
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
+  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
+
 mime-db@~1.30.0:
   version "1.30.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
@@ -7825,6 +8292,23 @@ mime-types@~2.1.19:
   dependencies:
     mime-db "~1.38.0"
 
+mime-types@~2.1.24:
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
+  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
+  dependencies:
+    mime-db "1.40.0"
+
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+  integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
+
+mime@^2.3.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.2.tgz#ce5229a5e99ffc313abac806b482c10e7ba6ac78"
+  integrity sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -7914,7 +8398,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -7958,6 +8442,19 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
 multimatch@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
@@ -8061,6 +8558,11 @@ needle@^2.2.1:
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
 neo-async@^2.5.0, neo-async@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
@@ -8084,6 +8586,11 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-forge@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+  integrity sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==
+
 node-forge@^0.7.1:
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
@@ -8393,6 +8900,23 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+obuf@^1.0.0, obuf@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -8431,6 +8955,13 @@ opn@5.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opn@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
+  dependencies:
+    is-wsl "^1.1.0"
+
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -8450,6 +8981,13 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
+original@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
+  dependencies:
+    url-parse "^1.4.3"
+
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
@@ -8674,6 +9212,11 @@ parse5@^3.0.1:
   dependencies:
     "@types/node" "*"
 
+parseurl@~1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -8720,6 +9263,11 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -8786,6 +9334,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -8877,6 +9430,15 @@ po2json@0.4.5:
     gettext-parser "1.1.0"
     nomnom "1.8.1"
 
+portfinder@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
+  integrity sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -9049,6 +9611,14 @@ protocol-buffers-schema@^3.3.1:
   resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
   integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
 
+proxy-addr@~2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
+  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.0"
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -9121,15 +9691,15 @@ q@^1.4.1, q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@~6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
-
-qs@~6.5.2:
+qs@6.5.2, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -9148,6 +9718,11 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
+querystringify@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
+  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
+
 quick-format-unescaped@^3.0.0, quick-format-unescaped@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-3.0.2.tgz#0137e94d8fb37ffeb70040535111c378e75396fb"
@@ -9180,6 +9755,21 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+  integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
+
+raw-body@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
+  integrity sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.3"
+    iconv-lite "0.4.23"
+    unpipe "1.0.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -9350,7 +9940,7 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^3.1.1:
+readable-stream@^3.0.6, readable-stream@^3.1.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.3.0.tgz#cb8011aad002eb717bf040291feba8569c986fb9"
   integrity sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==
@@ -9699,6 +10289,11 @@ require-uncached@1.0.3, require-uncached@^1.0.2, require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9778,7 +10373,7 @@ rimraf@^2.2.8:
   dependencies:
     glob "^7.0.5"
 
-rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -9862,7 +10457,7 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -9921,6 +10516,18 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+
+selfsigned@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
+  integrity sha512-9AukTiDmHXGXWtWjembZ5NDmVvP2695EtpgbCsxCa68w3c88B+alqbmZ4O3hZ4VWGXeGWzEVdvqgAJD8DQPCDw==
+  dependencies:
+    node-forge "0.7.5"
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -9943,11 +10550,58 @@ semver@^5.0.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
   integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
+semver@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
+  integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==
+
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
 serialize-javascript@^1.4.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
   integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
 
+serve-index@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  integrity sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.2"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -9978,6 +10632,11 @@ setimmediate@^1.0.4, setimmediate@^1.0.5:
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
+
 sha.js@2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
@@ -10131,6 +10790,26 @@ sntp@2.x.x:
   dependencies:
     hoek "4.x.x"
 
+sockjs-client@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
+  integrity sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
+    json3 "^3.3.2"
+    url-parse "^1.4.3"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
 sonic-boom@^0.7.1, sonic-boom@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-0.7.3.tgz#cbfc18e87c2b8078b00e38ad9475c05fce5ea696"
@@ -10260,6 +10939,29 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz#81c0ce8f21474756148bbb5f3bfc0f36bf15d76e"
   integrity sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g==
 
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
+  dependencies:
+    debug "^4.1.0"
+    detect-node "^2.0.4"
+    hpack.js "^2.1.6"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
+
+spdy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.0.tgz#81f222b5a743a329aa12cea6a390e60e9b613c52"
+  integrity sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==
+  dependencies:
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
+    http-deceiver "^1.2.7"
+    select-hose "^2.0.0"
+    spdy-transport "^3.0.0"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10336,6 +11038,16 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+  integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
+
 stealthy-require@^1.1.0, stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
@@ -10788,6 +11500,11 @@ through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+thunky@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
+  integrity sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==
+
 time-stamp@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.0.1.tgz#9f4bd23559c9365966f3302dbba2b07c6b99b151"
@@ -10959,6 +11676,14 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-is@~1.6.16:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -11045,6 +11770,11 @@ universalify@^0.1.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -11063,6 +11793,11 @@ upath@1.1.0, upath@^1.1.0:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
   integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
 
+upath@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
+  integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==
+
 update-notifier@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
@@ -11097,6 +11832,14 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
+url-parse@^1.4.3:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
+  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -11163,6 +11906,11 @@ util@~0.10.3:
   dependencies:
     inherits "2.0.3"
 
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
 uuid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
@@ -11190,6 +11938,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
@@ -11259,6 +12012,13 @@ watchpack@^1.5.0:
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
 
+wbuf@^1.1.0, wbuf@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
 wcwidth@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -11325,6 +12085,60 @@ webpack-cli@^3.1.2:
     v8-compile-cache "^2.0.2"
     yargs "^12.0.4"
 
+webpack-dev-middleware@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.6.2.tgz#f37a27ad7c09cd7dc67cd97655413abaa1f55942"
+  integrity sha512-A47I5SX60IkHrMmZUlB0ZKSWi29TZTcPz7cha1Z75yYOsgWh/1AcPmQEbC8ZIbU3A1ytSv1PMU0PyPz2Lmz2jg==
+  dependencies:
+    memory-fs "^0.4.1"
+    mime "^2.3.1"
+    range-parser "^1.0.3"
+    webpack-log "^2.0.0"
+
+webpack-dev-server@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.3.1.tgz#7046e49ded5c1255a82c5d942bcdda552b72a62d"
+  integrity sha512-jY09LikOyGZrxVTXK0mgIq9y2IhCoJ05848dKZqX1gAGLU1YDqgpOT71+W53JH/wI4v6ky4hm+KvSyW14JEs5A==
+  dependencies:
+    ansi-html "0.0.7"
+    bonjour "^3.5.0"
+    chokidar "^2.1.5"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
+    debug "^4.1.1"
+    del "^4.1.0"
+    express "^4.16.4"
+    html-entities "^1.2.1"
+    http-proxy-middleware "^0.19.1"
+    import-local "^2.0.0"
+    internal-ip "^4.2.0"
+    ip "^1.1.5"
+    killable "^1.0.1"
+    loglevel "^1.6.1"
+    opn "^5.5.0"
+    portfinder "^1.0.20"
+    schema-utils "^1.0.0"
+    selfsigned "^1.10.4"
+    semver "^6.0.0"
+    serve-index "^1.9.1"
+    sockjs "0.3.19"
+    sockjs-client "1.3.0"
+    spdy "^4.0.0"
+    strip-ansi "^3.0.1"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.6.2"
+    webpack-log "^2.0.0"
+    yargs "12.0.5"
+
+webpack-log@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
+  dependencies:
+    ansi-colors "^3.0.0"
+    uuid "^3.3.2"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
@@ -11363,6 +12177,19 @@ webpack@^4.26.0:
     watchpack "^1.5.0"
     webpack-sources "^1.3.0"
 
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  integrity sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
@@ -11639,6 +12466,24 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs@12.0.5, yargs@^12.0.2, yargs@^12.0.4, yargs@~12.0.1:
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
 yargs@13.1.0:
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.1.0.tgz#b2729ce4bfc0c584939719514099d8a916ad2301"
@@ -11675,24 +12520,6 @@ yargs@6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
-yargs@^12.0.2, yargs@^12.0.4, yargs@~12.0.1:
-  version "12.0.5"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
-  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
-  dependencies:
-    cliui "^4.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^1.0.1"
-    os-locale "^3.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^11.1.1"
-
 yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"

From 18b34b49268ab9256e5408b1746da4a45eec5ca1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Apr 2019 13:53:22 -0700
Subject: [PATCH 516/814] Rearranged Settings UI in prep for custom filter
 controls

---
 src/devtools/views/Settings/Settings.css | 47 +++++++++++++-----
 src/devtools/views/Settings/Settings.js  | 63 ++++++++++++------------
 2 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 581facc0e955..9e255d1233b9 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -13,48 +13,73 @@
 }
 
 .Section {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--color-border);
+}
+.Section:first-of-type {
+  padding-top: 0;
+  border-top: none;
 }
 
 .Header {
-  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
   font-size: var(--font-size-sans-large);
 }
 
 .OptionGroup {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
+  align-items: center;
   user-select: none;
+  margin: 0 1rem 0.5rem 0;
+}
+.OptionGroup:last-of-type {
+  margin-right: 0;
+}
+
+.OptionLabel {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-sans-normal);
 }
 
-.Option {
+.RadioOption {
   cursor: pointer;
   padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-right: none;
 }
 
-.Option:hover {
+.RadioOption:hover {
   background-color: var(--color-background-hover);
 }
 
-.Option:first-of-type {
+.RadioOption:first-of-type {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
 
-.Option:last-of-type {
+.RadioOption:last-of-type {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
   border-right: 1px solid var(--color-border);
 }
 
+.CheckboxOption {
+  display: block;
+  padding: 0.5rem 0;
+}
+
 .ScreenshotThrottling {
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
+
+.HRule {
+  height: 1px;
+  background-color: var(--color-border);
+  width: 100%;
+  border: none;
+  margin: 0.5rem 0;
+}
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 1c1ed43bcf41..b578fe5b389b 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -73,9 +73,10 @@ function Settings(_: {||}) {
   return (
     <div className={styles.Settings}>
       <div className={styles.Section}>
-        <div className={styles.Header}>Theme</div>
+        <div className={styles.Header}>Display preferences</div>
         <div className={styles.OptionGroup}>
-          <label className={styles.Option}>
+          <div className={styles.OptionLabel}>Theme</div>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -85,7 +86,7 @@ function Settings(_: {||}) {
             />{' '}
             Auto
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -95,7 +96,7 @@ function Settings(_: {||}) {
             />{' '}
             Light
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -106,22 +107,9 @@ function Settings(_: {||}) {
             Dark
           </label>
         </div>
-      </div>
-      <div className={styles.Section}>
-        <div className={styles.Header}>Components tree</div>
-        <label>
-          <input
-            type="checkbox"
-            checked={collapseNodesByDefault}
-            onChange={updateCollapseNodesByDefault}
-          />{' '}
-          Collapse tree by default
-        </label>
-      </div>
-      <div className={styles.Section}>
-        <div className={styles.Header}>Display density</div>
         <div className={styles.OptionGroup}>
-          <label className={styles.Option}>
+          <div className={styles.OptionLabel}>Display density</div>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-displayDensity"
@@ -131,7 +119,7 @@ function Settings(_: {||}) {
             />{' '}
             Compact
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-displayDensity"
@@ -143,19 +131,30 @@ function Settings(_: {||}) {
           </label>
         </div>
       </div>
+
+      <div className={styles.Section}>
+        <div className={styles.Header}>Components tree</div>
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={collapseNodesByDefault}
+            onChange={updateCollapseNodesByDefault}
+          />{' '}
+          Collapse newly added components by default
+        </label>
+      </div>
+
       {store.supportsCaptureScreenshots && (
-        <div>
-          <div className={styles.Section}>
-            <div className={styles.Header}>Profiler</div>
-            <label>
-              <input
-                type="checkbox"
-                checked={captureScreenshots}
-                onChange={updateCaptureScreenshotsWhileProfiling}
-              />{' '}
-              Capture screenshots while profiling
-            </label>
-          </div>
+        <div className={styles.Section}>
+          <div className={styles.Header}>Profiler</div>
+          <label className={styles.CheckboxOption}>
+            <input
+              type="checkbox"
+              checked={captureScreenshots}
+              onChange={updateCaptureScreenshotsWhileProfiling}
+            />{' '}
+            Capture screenshots while profiling
+          </label>
           {captureScreenshots && (
             <div className={styles.ScreenshotThrottling}>
               Screenshots will be throttled in order to reduce the negative

From 17c5feb66a625be8c6a3b223dedca29333de77db Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Apr 2019 14:02:32 -0700
Subject: [PATCH 517/814] Reorganized types shared between backend and frontend
 slightly.

---
 src/backend/renderer.js                       | 19 +++++++++++++------
 src/backend/types.js                          |  2 +-
 src/devtools/store.js                         |  5 ++---
 src/devtools/types.js                         | 18 ------------------
 src/devtools/views/Components/Element.js      |  2 +-
 .../views/Components/SelectedElement.js       |  2 +-
 src/devtools/views/Components/types.js        |  2 +-
 .../views/Profiler/CommitTreeBuilder.js       |  4 ++--
 src/types.js                                  | 18 ++++++++++++++++++
 9 files changed, 39 insertions(+), 33 deletions(-)
 delete mode 100644 src/devtools/types.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 3b029be297a5..9c216a90339b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -8,12 +8,13 @@ import {
   ElementTypeEventComponent,
   ElementTypeEventTarget,
   ElementTypeForwardRef,
+  ElementTypeHost,
   ElementTypeMemo,
   ElementTypeOtherOrUnknown,
   ElementTypeProfiler,
   ElementTypeRoot,
   ElementTypeSuspense,
-} from 'src/devtools/types';
+} from 'src/types';
 import { getDisplayName, utfEncodeString } from '../utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
@@ -259,19 +260,21 @@ export function attach(
     }
   };
 
-  // Keep this function in sync with getDataForFiber()
+  // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { tag } = fiber;
 
     switch (tag) {
       case ClassComponent:
       case FunctionComponent:
+      case HostComponent:
       case IncompleteClassComponent:
       case IndeterminateComponent:
       case ForwardRef:
       case HostRoot:
       case MemoComponent:
       case SimpleMemoComponent:
+        // TODO (filtering) Check custom filters
         return false;
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
@@ -282,7 +285,6 @@ export function attach(
         return true;
       case EventComponent:
       case HostPortal:
-      case HostComponent:
       case HostText:
       case Fragment:
         return true;
@@ -305,6 +307,7 @@ export function attach(
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
+            // TODO (filtering) Check custom filters
             return false;
           default:
             return false;
@@ -321,8 +324,7 @@ export function attach(
       : symbolOrNumber;
   }
 
-  // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
-  // TODO: Keep in sync with getElementType()
+  // NOTICE Keep in sync with shouldFilterFiber()
   function getDataForFiber(fiber: Fiber): FiberData {
     const { elementType, type, key, tag } = fiber;
 
@@ -397,8 +399,13 @@ export function attach(
           key: null,
           type: ElementTypeRoot,
         };
-      case HostPortal:
       case HostComponent:
+        return {
+          displayName: type,
+          key,
+          type: ElementTypeHost,
+        };
+      case HostPortal:
       case HostText:
       case Fragment:
         return {
diff --git a/src/backend/types.js b/src/backend/types.js
index d1946d164a82..ae5f395ba2c9 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'src/devtools/types';
+import type { ElementType } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
diff --git a/src/devtools/store.js b/src/devtools/store.js
index ecdf1683df26..242bb1575704 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -9,19 +9,18 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { ElementTypeRoot } from './types';
+import { ElementTypeRoot } from '../types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 import { printStore } from 'src/__tests__/storeSerializer';
 
-import type { ElementType } from './types';
 import type { Element } from './views/Components/types';
 import type {
   ImportedProfilingData,
   ProfilingSnapshotNode,
 } from './views/Profiler/types';
-import type { Bridge } from '../types';
+import type { ElementType, Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
diff --git a/src/devtools/types.js b/src/devtools/types.js
deleted file mode 100644
index 40425b72754b..000000000000
--- a/src/devtools/types.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @flow
-
-export const ElementTypeClass = 1;
-export const ElementTypeEventComponent = 2;
-export const ElementTypeEventTarget = 3;
-export const ElementTypeFunction = 4;
-export const ElementTypeContext = 5;
-export const ElementTypeForwardRef = 6;
-export const ElementTypeMemo = 7;
-export const ElementTypeOtherOrUnknown = 8;
-export const ElementTypeProfiler = 9;
-export const ElementTypeRoot = 10;
-export const ElementTypeSuspense = 11;
-
-// Different types of elements displayed in the Elements tree.
-// These types may be used to visually distinguish types,
-// or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index bfe0ce65ce19..322726784df6 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
+import { ElementTypeClass, ElementTypeFunction } from 'src/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index c2b62a6389f0..8740480a9863 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -16,7 +16,7 @@ import {
   ElementTypeFunction,
   ElementTypeMemo,
   ElementTypeSuspense,
-} from '../../types';
+} from 'src/types';
 
 import type { Element, InspectedElement } from './types';
 
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index ca3c7e3df078..0849ec019a13 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from '../../types';
+import type { ElementType } from 'src/types';
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index fdf98533c276..b9bf40650a88 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -8,10 +8,10 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from 'src/constants';
 import { utfDecodeString } from 'src/utils';
-import { ElementTypeRoot } from 'src/devtools/types';
+import { ElementTypeRoot } from 'src/types';
 import Store from 'src/devtools/store';
 
-import type { ElementType } from 'src/devtools/types';
+import type { ElementType } from 'src/types';
 import type {
   CommitTreeFrontend,
   CommitTreeNodeFrontend,
diff --git a/src/types.js b/src/types.js
index 9e5a9de04efd..5abee01c6c45 100644
--- a/src/types.js
+++ b/src/types.js
@@ -11,3 +11,21 @@ export type Wall = {|
   listen: (fn: Function) => Function,
   send: (event: string, payload: any, transferable?: Array<any>) => void,
 |};
+
+export const ElementTypeClass = 1;
+export const ElementTypeContext = 2;
+export const ElementTypeEventComponent = 3;
+export const ElementTypeEventTarget = 4;
+export const ElementTypeFunction = 5;
+export const ElementTypeForwardRef = 6;
+export const ElementTypeHost = 7;
+export const ElementTypeMemo = 8;
+export const ElementTypeOtherOrUnknown = 9;
+export const ElementTypeProfiler = 10;
+export const ElementTypeRoot = 11;
+export const ElementTypeSuspense = 12;
+
+// Different types of elements displayed in the Elements tree.
+// These types may be used to visually distinguish types,
+// or to enable/disable certain functionality.
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

From 9db209ee64b6eb12cbfb9cae8c74027fb2317d1f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Apr 2019 14:40:02 -0700
Subject: [PATCH 518/814] Initial pass at adding filter-by-type Flow types and
 support to renderer

---
 OVERVIEW.md             |  2 +-
 src/backend/renderer.js | 73 ++++++++++++++++++++++++++++++++++-------
 src/constants.js        |  2 ++
 src/types.js            | 16 ++++++++-
 src/utils.js            | 15 ++++++++-
 5 files changed, 93 insertions(+), 15 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 05069783d8fd..a2d8a67fa9a8 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -83,7 +83,7 @@ For example, adding a function component `<Foo>` with an id 2:
 [
   1,   // add operation
   2,   // fiber id
-  2,   // ElementTypeFunction
+  1,   // ElementTypeClass
   1,   // parent id
   0,   // owner id
   3,   // encoded display name size
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9c216a90339b..718b148d2159 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -3,19 +3,27 @@
 import { gte } from 'semver';
 import {
   ElementTypeClass,
-  ElementTypeFunction,
   ElementTypeContext,
   ElementTypeEventComponent,
   ElementTypeEventTarget,
+  ElementTypeFunction,
   ElementTypeForwardRef,
-  ElementTypeHost,
+  ElementTypeHostComponent,
   ElementTypeMemo,
   ElementTypeOtherOrUnknown,
   ElementTypeProfiler,
   ElementTypeRoot,
   ElementTypeSuspense,
+  FilterByElementType,
+  FilterByName,
+  FilterByPath,
 } from 'src/types';
-import { getDisplayName, utfEncodeString } from '../utils';
+import {
+  getDisplayName,
+  getSavedFilters,
+  getUID,
+  utfEncodeString,
+} from 'src/utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
@@ -25,7 +33,6 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { getUID } from '../utils';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
@@ -43,6 +50,7 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
+import type { ElementType, Filter } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 function getInternalReactConstants(version) {
@@ -260,22 +268,62 @@ export function attach(
     }
   };
 
+  const filterByElementTypeMap: Map<ElementType, boolean> = new Map();
+  const filterByNames: Set<RegExp> = new Set();
+  const filterByPaths: Set<RegExp> = new Set();
+
+  function updateFilters(filters: Array<Filter>): void {
+    filterByElementTypeMap.clear();
+    filterByNames.clear();
+    filterByPaths.clear();
+
+    filters.forEach(({ type, value }) => {
+      switch (type) {
+        case FilterByElementType:
+          filterByElementTypeMap.set(((value: any): ElementType), true);
+          break;
+        case FilterByName:
+          filterByNames.add(((value: any): RegExp));
+          break;
+        case FilterByPath:
+          filterByPaths.add(((value: any): RegExp));
+          break;
+        default:
+          console.error(`Unsupported filter type "${type}"`);
+          break;
+      }
+    });
+  }
+
+  // Initialize to the persisted values
+  updateFilters(getSavedFilters());
+
   // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { tag } = fiber;
 
+    // TODO (filter) This does not yet support display name or path based filtering.
+
     switch (tag) {
       case ClassComponent:
-      case FunctionComponent:
-      case HostComponent:
       case IncompleteClassComponent:
+        return filterByElementTypeMap.get(ElementTypeClass) === true;
+      case FunctionComponent:
+        return filterByElementTypeMap.get(ElementTypeFunction) === true;
       case IndeterminateComponent:
+        return (
+          filterByElementTypeMap.get(ElementTypeClass) === true ||
+          filterByElementTypeMap.get(ElementTypeFunction) === true
+        );
       case ForwardRef:
-      case HostRoot:
+        return filterByElementTypeMap.get(ElementTypeForwardRef) === true;
       case MemoComponent:
       case SimpleMemoComponent:
-        // TODO (filtering) Check custom filters
-        return false;
+        return filterByElementTypeMap.get(ElementTypeMemo) === true;
+      case HostComponent:
+        return filterByElementTypeMap.get(ElementTypeHostComponent) === true;
+      case HostRoot:
+        return false; // We never support filtering roots
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
         // However, it has some special behavior (like disconnecting
@@ -302,13 +350,14 @@ export function attach(
           case CONTEXT_PROVIDER_SYMBOL_STRING:
           case CONTEXT_CONSUMER_NUMBER:
           case CONTEXT_CONSUMER_SYMBOL_STRING:
+            return filterByElementTypeMap.get(ElementTypeContext) === true;
           case SUSPENSE_NUMBER:
           case SUSPENSE_SYMBOL_STRING:
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
+            return filterByElementTypeMap.get(ElementTypeSuspense) === true;
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
-            // TODO (filtering) Check custom filters
-            return false;
+            return filterByElementTypeMap.get(ElementTypeProfiler) === true;
           default:
             return false;
         }
@@ -403,7 +452,7 @@ export function attach(
         return {
           displayName: type,
           key,
-          type: ElementTypeHost,
+          type: ElementTypeHostComponent,
         };
       case HostPortal:
       case HostText:
diff --git a/src/constants.js b/src/constants.js
index 588c8d42191a..ea4e7642db36 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,6 +5,8 @@ export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
+export const LOCAL_STORAGE_FILTERS_KEY = 'React::DevTools::filters';
+
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
 
diff --git a/src/types.js b/src/types.js
index 5abee01c6c45..d831fcef37a4 100644
--- a/src/types.js
+++ b/src/types.js
@@ -18,7 +18,7 @@ export const ElementTypeEventComponent = 3;
 export const ElementTypeEventTarget = 4;
 export const ElementTypeFunction = 5;
 export const ElementTypeForwardRef = 6;
-export const ElementTypeHost = 7;
+export const ElementTypeHostComponent = 7;
 export const ElementTypeMemo = 8;
 export const ElementTypeOtherOrUnknown = 9;
 export const ElementTypeProfiler = 10;
@@ -29,3 +29,17 @@ export const ElementTypeSuspense = 12;
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export const FilterByElementType = 1;
+export const FilterByName = 2;
+export const FilterByPath = 3;
+
+export type Filter =
+  | {|
+      type: 1,
+      value: ElementType,
+    |}
+  | {|
+      type: 2 | 3,
+      value: RegExp,
+    |};
diff --git a/src/utils.js b/src/utils.js
index f085f550d5c1..9d07194fc7fb 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,6 +1,10 @@
 // @flow
 
-const LRU = require('lru-cache');
+import LRU from 'lru-cache';
+import { LOCAL_STORAGE_FILTERS_KEY } from './constants';
+import { ElementTypeHostComponent } from './types';
+
+import type { Filter } from './types';
 
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -76,3 +80,12 @@ export function utfEncodeString(string: string): Uint32Array {
 function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
+
+export function getSavedFilters(): Array<Filter> {
+  const filters = localStorage.getItem(LOCAL_STORAGE_FILTERS_KEY);
+  if (filters != null) {
+    return ((JSON.parse(filters): any): Array<Filter>);
+  } else {
+    return [{ type: 1, value: ElementTypeHostComponent }];
+  }
+}

From ee1b38e4dbfdf674ecdb17d3a07a1375ed01979a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 27 Apr 2019 10:31:40 -0700
Subject: [PATCH 519/814] Added filter preference types and plugged into
 renderer partly. Lots of work to do still.

---
 src/backend/renderer.js                    | 60 ++++++----------------
 src/constants.js                           |  3 +-
 src/devtools/views/ButtonIcon.js           | 20 +++++++-
 src/devtools/views/Settings/FilterList.css |  4 ++
 src/devtools/views/Settings/FilterList.js  | 40 +++++++++++++++
 src/devtools/views/Settings/Settings.css   |  1 +
 src/devtools/views/Settings/Settings.js    |  4 ++
 src/devtools/views/hooks.js                | 10 +++-
 src/types.js                               | 27 +++++-----
 src/utils.js                               | 46 ++++++++++++++---
 10 files changed, 147 insertions(+), 68 deletions(-)
 create mode 100644 src/devtools/views/Settings/FilterList.css
 create mode 100644 src/devtools/views/Settings/FilterList.js

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 718b148d2159..f1ee1bc7dac2 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -14,13 +14,10 @@ import {
   ElementTypeProfiler,
   ElementTypeRoot,
   ElementTypeSuspense,
-  FilterByElementType,
-  FilterByName,
-  FilterByPath,
 } from 'src/types';
 import {
   getDisplayName,
-  getSavedFilters,
+  getSavedFilterPreferences,
   getUID,
   utfEncodeString,
 } from 'src/utils';
@@ -50,7 +47,6 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type { ElementType, Filter } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 function getInternalReactConstants(version) {
@@ -268,35 +264,11 @@ export function attach(
     }
   };
 
-  const filterByElementTypeMap: Map<ElementType, boolean> = new Map();
-  const filterByNames: Set<RegExp> = new Set();
-  const filterByPaths: Set<RegExp> = new Set();
-
-  function updateFilters(filters: Array<Filter>): void {
-    filterByElementTypeMap.clear();
-    filterByNames.clear();
-    filterByPaths.clear();
-
-    filters.forEach(({ type, value }) => {
-      switch (type) {
-        case FilterByElementType:
-          filterByElementTypeMap.set(((value: any): ElementType), true);
-          break;
-        case FilterByName:
-          filterByNames.add(((value: any): RegExp));
-          break;
-        case FilterByPath:
-          filterByPaths.add(((value: any): RegExp));
-          break;
-        default:
-          console.error(`Unsupported filter type "${type}"`);
-          break;
-      }
-    });
-  }
-
-  // Initialize to the persisted values
-  updateFilters(getSavedFilters());
+  const {
+    hideElementsWithTypes,
+    // TOOD (filter) hideElementsWithDisplayNames,
+    // TOOD (filter) hideElementsWithPaths,
+  } = getSavedFilterPreferences();
 
   // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
@@ -307,21 +279,21 @@ export function attach(
     switch (tag) {
       case ClassComponent:
       case IncompleteClassComponent:
-        return filterByElementTypeMap.get(ElementTypeClass) === true;
+        return hideElementsWithTypes.has(ElementTypeClass);
       case FunctionComponent:
-        return filterByElementTypeMap.get(ElementTypeFunction) === true;
+        return hideElementsWithTypes.has(ElementTypeFunction);
       case IndeterminateComponent:
         return (
-          filterByElementTypeMap.get(ElementTypeClass) === true ||
-          filterByElementTypeMap.get(ElementTypeFunction) === true
+          hideElementsWithTypes.has(ElementTypeClass) ||
+          hideElementsWithTypes.has(ElementTypeFunction)
         );
       case ForwardRef:
-        return filterByElementTypeMap.get(ElementTypeForwardRef) === true;
+        return hideElementsWithTypes.has(ElementTypeForwardRef);
       case MemoComponent:
       case SimpleMemoComponent:
-        return filterByElementTypeMap.get(ElementTypeMemo) === true;
+        return hideElementsWithTypes.has(ElementTypeMemo);
       case HostComponent:
-        return filterByElementTypeMap.get(ElementTypeHostComponent) === true;
+        return hideElementsWithTypes.has(ElementTypeHostComponent);
       case HostRoot:
         return false; // We never support filtering roots
       case DehydratedSuspenseComponent:
@@ -350,14 +322,14 @@ export function attach(
           case CONTEXT_PROVIDER_SYMBOL_STRING:
           case CONTEXT_CONSUMER_NUMBER:
           case CONTEXT_CONSUMER_SYMBOL_STRING:
-            return filterByElementTypeMap.get(ElementTypeContext) === true;
+            return hideElementsWithTypes.has(ElementTypeContext);
           case SUSPENSE_NUMBER:
           case SUSPENSE_SYMBOL_STRING:
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
-            return filterByElementTypeMap.get(ElementTypeSuspense) === true;
+            return hideElementsWithTypes.has(ElementTypeSuspense);
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
-            return filterByElementTypeMap.get(ElementTypeProfiler) === true;
+            return hideElementsWithTypes.has(ElementTypeProfiler);
           default:
             return false;
         }
diff --git a/src/constants.js b/src/constants.js
index ea4e7642db36..f5c7683d690d 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,7 +5,8 @@ export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
-export const LOCAL_STORAGE_FILTERS_KEY = 'React::DevTools::filters';
+export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
+  'React::DevTools::filterPreferences';
 
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index a42e02bdbc42..3099068b5b49 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -4,10 +4,12 @@ import React from 'react';
 import styles from './ButtonIcon.css';
 
 export type IconType =
+  | 'add'
   | 'cancel'
   | 'close'
   | 'collapsed'
   | 'copy'
+  | 'delete'
   | 'down'
   | 'expanded'
   | 'export'
@@ -26,12 +28,16 @@ export type IconType =
   | 'view-source';
 
 type Props = {|
+  className?: string,
   type: IconType,
 |};
 
-export default function ButtonIcon({ type }: Props) {
+export default function ButtonIcon({ className = '', type }: Props) {
   let pathData = null;
   switch (type) {
+    case 'add':
+      pathData = PATH_ADD;
+      break;
     case 'cancel':
       pathData = PATH_CANCEL;
       break;
@@ -44,6 +50,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'copy':
       pathData = PATH_COPY;
       break;
+    case 'delete':
+      pathData = PATH_DELETE;
+      break;
     case 'down':
       pathData = PATH_DOWN;
       break;
@@ -100,7 +109,7 @@ export default function ButtonIcon({ type }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.ButtonIcon}
+      className={`${styles.ButtonIcon} ${className}`}
       width="24"
       height="24"
       viewBox="0 0 24 24"
@@ -111,6 +120,8 @@ export default function ButtonIcon({ type }: Props) {
   );
 }
 
+const PATH_ADD = 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z';
+
 const PATH_CANCEL = `
   M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
   16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
@@ -126,6 +137,11 @@ const PATH_COPY = `
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
 `;
 
+const PATH_DELETE = `
+  M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12
+  2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z
+`;
+
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
 const PATH_EXPANDED = 'M7 10l5 5 5-5z';
diff --git a/src/devtools/views/Settings/FilterList.css b/src/devtools/views/Settings/FilterList.css
new file mode 100644
index 000000000000..ed6024ed69ed
--- /dev/null
+++ b/src/devtools/views/Settings/FilterList.css
@@ -0,0 +1,4 @@
+.Filter {
+  display: block;
+  padding: 0.5rem 0;
+}
diff --git a/src/devtools/views/Settings/FilterList.js b/src/devtools/views/Settings/FilterList.js
new file mode 100644
index 000000000000..cb6201661d34
--- /dev/null
+++ b/src/devtools/views/Settings/FilterList.js
@@ -0,0 +1,40 @@
+// @flow
+
+import React, { Fragment, useCallback, useState } from 'react';
+import { getSavedFilterPreferences, saveFilterPreferences } from 'src/utils';
+import { ElementTypeHostComponent } from 'src/types';
+
+import styles from './FilterList.css';
+
+export default function FilterList(_: {||}) {
+  const [filterPreferences, setFilterPreferences] = useState(
+    getSavedFilterPreferences
+  );
+  const updateFilterPreferences = useCallback(() => {
+    const clonedFilterPreferences = { ...filterPreferences };
+    setFilterPreferences(clonedFilterPreferences);
+    saveFilterPreferences(clonedFilterPreferences);
+  }, [filterPreferences]);
+
+  const { hideElementsWithTypes } = filterPreferences;
+
+  return (
+    <Fragment>
+      <label className={styles.Filter}>
+        <input
+          type="checkbox"
+          checked={hideElementsWithTypes.has(ElementTypeHostComponent)}
+          onChange={() => {
+            if (hideElementsWithTypes.has(ElementTypeHostComponent)) {
+              hideElementsWithTypes.delete(ElementTypeHostComponent);
+            } else {
+              hideElementsWithTypes.add(ElementTypeHostComponent);
+            }
+            updateFilterPreferences();
+          }}
+        />{' '}
+        Hide host components (e.g. <code>&lt;div&gt;</code>)
+      </label>
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 9e255d1233b9..a514192750be 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -71,6 +71,7 @@
 }
 
 .ScreenshotThrottling {
+  display: inline-block;
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index b578fe5b389b..ae23bbbc7dd3 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -5,6 +5,7 @@ import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
 import Store from 'src/devtools/store';
+import FilterList from './FilterList';
 import portaledContent from '../portaledContent';
 
 import styles from './Settings.css';
@@ -134,6 +135,7 @@ function Settings(_: {||}) {
 
       <div className={styles.Section}>
         <div className={styles.Header}>Components tree</div>
+
         <label className={styles.CheckboxOption}>
           <input
             type="checkbox"
@@ -142,6 +144,8 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
+
+        <FilterList />
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index 6d48915d2036..b9e7dfc0b4f1 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -38,14 +38,20 @@ export function useIsOverflowing(
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
   key: string,
-  initialValue: T
+  initialValue: T | (() => T)
 ): [T, (value: T | (() => T)) => void] {
   const getValueFromLocalStorage = useCallback(() => {
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      if (item != null) {
+        return JSON.parse(item);
+      }
     } catch (error) {
       console.log(error);
+    }
+    if (typeof initialValue === 'function') {
+      return (initialValue: any)();
+    } else {
       return initialValue;
     }
   }, [initialValue, key]);
diff --git a/src/types.js b/src/types.js
index d831fcef37a4..b1af981fdeef 100644
--- a/src/types.js
+++ b/src/types.js
@@ -12,6 +12,10 @@ export type Wall = {|
   send: (event: string, payload: any, transferable?: Array<any>) => void,
 |};
 
+// WARNING
+// The values below are referenced by FilterPreferences (which is saved via localStorage).
+// Do not change them or it will break previously saved user customizations.
+// If new element types are added, use new numbers rather than re-ordering existing ones.
 export const ElementTypeClass = 1;
 export const ElementTypeContext = 2;
 export const ElementTypeEventComponent = 3;
@@ -30,16 +34,15 @@ export const ElementTypeSuspense = 12;
 // or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export const FilterByElementType = 1;
-export const FilterByName = 2;
-export const FilterByPath = 3;
+export type FilterPreferences = {|
+  // Hide all elements of types in this Set.
+  // We hide host components only by default.
+  hideElementsWithTypes: Set<ElementType>,
 
-export type Filter =
-  | {|
-      type: 1,
-      value: ElementType,
-    |}
-  | {|
-      type: 2 | 3,
-      value: RegExp,
-    |};
+  // Hide all elements with displayNames matching one or more of the RegExps in this Set.
+  hideElementsWithDisplayNames: Set<RegExp>,
+
+  // Hide all elements within paths matching one or more of the RegExps in this Set.
+  // This filter is only used for elements that include debug source location.
+  hideElementsWithPaths: Set<RegExp>,
+|};
diff --git a/src/utils.js b/src/utils.js
index 9d07194fc7fb..b20abd07fd3a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,10 +1,10 @@
 // @flow
 
 import LRU from 'lru-cache';
-import { LOCAL_STORAGE_FILTERS_KEY } from './constants';
+import { LOCAL_STORAGE_FILTER_PREFERENCES_KEY } from './constants';
 import { ElementTypeHostComponent } from './types';
 
-import type { Filter } from './types';
+import type { FilterPreferences } from './types';
 
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -81,11 +81,43 @@ function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
 
-export function getSavedFilters(): Array<Filter> {
-  const filters = localStorage.getItem(LOCAL_STORAGE_FILTERS_KEY);
-  if (filters != null) {
-    return ((JSON.parse(filters): any): Array<Filter>);
+export function getDefaultFilterPreferences(): FilterPreferences {
+  return {
+    hideElementsWithTypes: new Set([ElementTypeHostComponent]),
+    hideElementsWithDisplayNames: new Set(),
+    hideElementsWithPaths: new Set(),
+  };
+}
+
+export function getSavedFilterPreferences(): FilterPreferences {
+  const raw = localStorage.getItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+  if (raw != null) {
+    const json = JSON.parse(raw);
+    return {
+      hideElementsWithTypes: new Set(json.hideElementsWithTypes),
+      hideElementsWithDisplayNames: new Set(json.hideElementsWithDisplayNames),
+      hideElementsWithPaths: new Set(json.hideElementsWithPaths),
+    };
   } else {
-    return [{ type: 1, value: ElementTypeHostComponent }];
+    return getDefaultFilterPreferences();
   }
 }
+
+export function saveFilterPreferences(
+  filterPreferences: FilterPreferences
+): void {
+  localStorage.setItem(
+    LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+    JSON.stringify({
+      hideElementsWithTypes: Array.from(
+        filterPreferences.hideElementsWithTypes
+      ),
+      hideElementsWithDisplayNames: Array.from(
+        filterPreferences.hideElementsWithDisplayNames
+      ),
+      hideElementsWithPaths: Array.from(
+        filterPreferences.hideElementsWithPaths
+      ),
+    })
+  );
+}

From 27a182003913e80771cbe0d4f44a026bdc7a15f3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 28 Apr 2019 15:33:39 -0700
Subject: [PATCH 520/814] Refactored filter preferences a bit more to be stored
 in the Store

---
 src/devtools/store.js                      | 26 +++++++++-
 src/devtools/views/Settings/FilterList.css |  2 +-
 src/devtools/views/Settings/FilterList.js  | 59 +++++++++++++++-------
 src/devtools/views/Settings/Settings.css   |  2 +-
 4 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 242bb1575704..4752818f677b 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -10,7 +10,11 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { ElementTypeRoot } from '../types';
-import { utfDecodeString } from '../utils';
+import {
+  getSavedFilterPreferences,
+  saveFilterPreferences,
+  utfDecodeString,
+} from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 import { printStore } from 'src/__tests__/storeSerializer';
@@ -20,7 +24,7 @@ import type {
   ImportedProfilingData,
   ProfilingSnapshotNode,
 } from './views/Profiler/types';
-import type { ElementType, Bridge } from '../types';
+import type { Bridge, ElementType, FilterPreferences } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -65,6 +69,8 @@ export default class Store extends EventEmitter {
   // Should new nodes be collapsed by default when added to the tree?
   _collapseNodesByDefault: boolean = true;
 
+  _filterPreferences: FilterPreferences;
+
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -137,6 +143,8 @@ export default class Store extends EventEmitter {
       localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
       'false';
 
+    this._filterPreferences = getSavedFilterPreferences();
+
     if (config != null) {
       const {
         isProfiling,
@@ -231,6 +239,20 @@ export default class Store extends EventEmitter {
     this.emit('collapseNodesByDefault');
   }
 
+  get filterPreferences(): FilterPreferences {
+    return this._filterPreferences;
+  }
+  set filterPreferences(value: FilterPreferences): void {
+    this._filterPreferences = value;
+
+    saveFilterPreferences(value);
+
+    // TODO (filter) Dump all nodes, update renderer preferences,  and re-initialize tree.
+    // TODO (filter) Invariant check that  we aren't profiling.
+
+    this.emit('filterPreferences');
+  }
+
   get hasOwnerMetadata(): boolean {
     return this._hasOwnerMetadata;
   }
diff --git a/src/devtools/views/Settings/FilterList.css b/src/devtools/views/Settings/FilterList.css
index ed6024ed69ed..52b592e5e90f 100644
--- a/src/devtools/views/Settings/FilterList.css
+++ b/src/devtools/views/Settings/FilterList.css
@@ -1,4 +1,4 @@
 .Filter {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0 0 0.5rem;
 }
diff --git a/src/devtools/views/Settings/FilterList.js b/src/devtools/views/Settings/FilterList.js
index cb6201661d34..af9e8c36f203 100644
--- a/src/devtools/views/Settings/FilterList.js
+++ b/src/devtools/views/Settings/FilterList.js
@@ -1,37 +1,58 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
-import { getSavedFilterPreferences, saveFilterPreferences } from 'src/utils';
+import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { ElementTypeHostComponent } from 'src/types';
+import Store from 'src/devtools/store';
+import { StoreContext } from '../context';
+import { useSubscription } from '../hooks';
 
 import styles from './FilterList.css';
 
+import type { FilterPreferences } from 'src/types';
+
 export default function FilterList(_: {||}) {
-  const [filterPreferences, setFilterPreferences] = useState(
-    getSavedFilterPreferences
+  const store = useContext(StoreContext);
+
+  const filterPreferencesSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.filterPreferences,
+      subscribe: (callback: Function) => {
+        store.addListener('filterPreferences', callback);
+        return () => store.removeListener('filterPreferences', callback);
+      },
+    }),
+    [store]
+  );
+  const filterPreferences = useSubscription<FilterPreferences, Store>(
+    filterPreferencesSubscription
+  );
+
+  const updateFilterPreferences = useCallback(
+    ({ currentTarget }) => {
+      const filterPreferences = store.filterPreferences;
+      if (currentTarget.checked) {
+        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
+      } else {
+        filterPreferences.hideElementsWithTypes.delete(
+          ElementTypeHostComponent
+        );
+      }
+      store.filterPreferences = { ...filterPreferences };
+    },
+    [store]
   );
-  const updateFilterPreferences = useCallback(() => {
-    const clonedFilterPreferences = { ...filterPreferences };
-    setFilterPreferences(clonedFilterPreferences);
-    saveFilterPreferences(clonedFilterPreferences);
-  }, [filterPreferences]);
 
-  const { hideElementsWithTypes } = filterPreferences;
+  // TODO (filter) Disable toggles if isProfiling
 
   return (
     <Fragment>
       <label className={styles.Filter}>
         <input
           type="checkbox"
-          checked={hideElementsWithTypes.has(ElementTypeHostComponent)}
-          onChange={() => {
-            if (hideElementsWithTypes.has(ElementTypeHostComponent)) {
-              hideElementsWithTypes.delete(ElementTypeHostComponent);
-            } else {
-              hideElementsWithTypes.add(ElementTypeHostComponent);
-            }
-            updateFilterPreferences();
-          }}
+          checked={filterPreferences.hideElementsWithTypes.has(
+            ElementTypeHostComponent
+          )}
+          onChange={updateFilterPreferences}
         />{' '}
         Hide host components (e.g. <code>&lt;div&gt;</code>)
       </label>
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index a514192750be..8f3d567346cc 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -67,7 +67,7 @@
 
 .CheckboxOption {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0 0 0.5rem;
 }
 
 .ScreenshotThrottling {

From a241780dc249bc959c6b7e663dbe2e6deec1ab42 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 29 Apr 2019 13:08:35 -0700
Subject: [PATCH 521/814] Filter changes are applied to the renderer without
 reloading

---
 src/backend/agent.js    | 12 +++++++++++-
 src/backend/renderer.js | 32 +++++++++++++++++++++++++++++---
 src/backend/types.js    |  3 ++-
 src/devtools/store.js   |  4 +++-
 4 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5364d048c520..fed7344dbe04 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -16,7 +16,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type { Bridge } from '../types';
+import type { Bridge, FilterPreferences } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -118,6 +118,7 @@ export default class Agent extends EventEmitter {
       this.syncSelectionFromNativeElementsPanel
     );
     bridge.addListener('shutdown', this.shutdown);
+    bridge.addListener('updateFilterPreferences', this.updateFilterPreferences);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
@@ -489,6 +490,15 @@ export default class Agent extends EventEmitter {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  updateFilterPreferences = (filterPreferences: FilterPreferences) => {
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.updateFilterPreferences(filterPreferences);
+    }
+  };
+
   viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f1ee1bc7dac2..6a7326e3baa3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -48,6 +48,7 @@ import type {
   RendererInterface,
 } from './types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type { FilterPreferences } from 'src/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -264,12 +265,36 @@ export function attach(
     }
   };
 
-  const {
+  let {
     hideElementsWithTypes,
-    // TOOD (filter) hideElementsWithDisplayNames,
-    // TOOD (filter) hideElementsWithPaths,
+    hideElementsWithDisplayNames,
+    hideElementsWithPaths,
   } = getSavedFilterPreferences();
 
+  // TODO (filter) We could make this more efficient.
+  function updateFilterPreferences(filterPreferences: FilterPreferences) {
+    // Recursively unmount and then re-mount all roots.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      unmountFiberChildrenRecursively(root.current);
+      recordUnmount(root.current, false);
+      currentRootID = -1;
+    });
+
+    hideElementsWithTypes = filterPreferences.hideElementsWithTypes;
+    hideElementsWithDisplayNames =
+      filterPreferences.hideElementsWithDisplayNames;
+    hideElementsWithPaths = filterPreferences.hideElementsWithPaths;
+
+    // Recursively re-mount all roots with new filter criteria applied.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      mountFiberRecursively(root.current, null);
+      flushPendingEvents(root);
+      currentRootID = -1;
+    });
+  }
+
   // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { tag } = fiber;
@@ -2288,5 +2313,6 @@ export function attach(
     setTrackedPath,
     startProfiling,
     stopProfiling,
+    updateFilterPreferences,
   };
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index ae5f395ba2c9..a12dda629222 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'src/types';
+import type { ElementType, FilterPreferences } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
@@ -139,6 +139,7 @@ export type RendererInterface = {
   setTrackedPath: (path: Array<PathFrame> | null) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
+  updateFilterPreferences: (filterPreferences: FilterPreferences) => void,
 };
 
 export type Handler = (data: any) => void;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 4752818f677b..3e6a409d6521 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -247,8 +247,10 @@ export default class Store extends EventEmitter {
 
     saveFilterPreferences(value);
 
-    // TODO (filter) Dump all nodes, update renderer preferences,  and re-initialize tree.
+    // TODO (filter) Dump all nodes, update renderer preferences, and re-initialize tree.
     // TODO (filter) Invariant check that  we aren't profiling.
+    // TODO (filter) Flushing every time a filter setting is changed is too expensive. We probably need an explitit configm
+    this._bridge.send('updateFilterPreferences', value);
 
     this.emit('filterPreferences');
   }

From eb9705abc87d6b9a03eaec55cdf8465e69e9ab14 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 30 Apr 2019 08:17:20 -0700
Subject: [PATCH 522/814] Removed FilterList UI for now (collapsed into
 Settings component)

---
 src/devtools/views/Settings/FilterList.css |  4 --
 src/devtools/views/Settings/FilterList.js  | 61 ----------------------
 src/devtools/views/Settings/Settings.js    | 44 +++++++++++++++-
 3 files changed, 42 insertions(+), 67 deletions(-)
 delete mode 100644 src/devtools/views/Settings/FilterList.css
 delete mode 100644 src/devtools/views/Settings/FilterList.js

diff --git a/src/devtools/views/Settings/FilterList.css b/src/devtools/views/Settings/FilterList.css
deleted file mode 100644
index 52b592e5e90f..000000000000
--- a/src/devtools/views/Settings/FilterList.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.Filter {
-  display: block;
-  padding: 0 0 0.5rem;
-}
diff --git a/src/devtools/views/Settings/FilterList.js b/src/devtools/views/Settings/FilterList.js
deleted file mode 100644
index af9e8c36f203..000000000000
--- a/src/devtools/views/Settings/FilterList.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// @flow
-
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
-import { ElementTypeHostComponent } from 'src/types';
-import Store from 'src/devtools/store';
-import { StoreContext } from '../context';
-import { useSubscription } from '../hooks';
-
-import styles from './FilterList.css';
-
-import type { FilterPreferences } from 'src/types';
-
-export default function FilterList(_: {||}) {
-  const store = useContext(StoreContext);
-
-  const filterPreferencesSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.filterPreferences,
-      subscribe: (callback: Function) => {
-        store.addListener('filterPreferences', callback);
-        return () => store.removeListener('filterPreferences', callback);
-      },
-    }),
-    [store]
-  );
-  const filterPreferences = useSubscription<FilterPreferences, Store>(
-    filterPreferencesSubscription
-  );
-
-  const updateFilterPreferences = useCallback(
-    ({ currentTarget }) => {
-      const filterPreferences = store.filterPreferences;
-      if (currentTarget.checked) {
-        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
-      } else {
-        filterPreferences.hideElementsWithTypes.delete(
-          ElementTypeHostComponent
-        );
-      }
-      store.filterPreferences = { ...filterPreferences };
-    },
-    [store]
-  );
-
-  // TODO (filter) Disable toggles if isProfiling
-
-  return (
-    <Fragment>
-      <label className={styles.Filter}>
-        <input
-          type="checkbox"
-          checked={filterPreferences.hideElementsWithTypes.has(
-            ElementTypeHostComponent
-          )}
-          onChange={updateFilterPreferences}
-        />{' '}
-        Hide host components (e.g. <code>&lt;div&gt;</code>)
-      </label>
-    </Fragment>
-  );
-}
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index ae23bbbc7dd3..4ede5f1bf65a 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,15 +1,17 @@
 // @flow
 
 import React, { useCallback, useContext, useMemo } from 'react';
+import { ElementTypeHostComponent } from 'src/types';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
 import Store from 'src/devtools/store';
-import FilterList from './FilterList';
 import portaledContent from '../portaledContent';
 
 import styles from './Settings.css';
 
+import type { FilterPreferences } from 'src/types';
+
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
@@ -44,6 +46,35 @@ function Settings(_: {||}) {
     collapseNodesByDefaultSubscription
   );
 
+  const filterPreferencesSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.filterPreferences,
+      subscribe: (callback: Function) => {
+        store.addListener('filterPreferences', callback);
+        return () => store.removeListener('filterPreferences', callback);
+      },
+    }),
+    [store]
+  );
+  const filterPreferences = useSubscription<FilterPreferences, Store>(
+    filterPreferencesSubscription
+  );
+
+  const updateFilterPreferences = useCallback(
+    ({ currentTarget }) => {
+      const filterPreferences = store.filterPreferences;
+      if (currentTarget.checked) {
+        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
+      } else {
+        filterPreferences.hideElementsWithTypes.delete(
+          ElementTypeHostComponent
+        );
+      }
+      store.filterPreferences = { ...filterPreferences };
+    },
+    [store]
+  );
+
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
       setDisplayDensity(currentTarget.value);
@@ -145,7 +176,16 @@ function Settings(_: {||}) {
           Collapse newly added components by default
         </label>
 
-        <FilterList />
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={filterPreferences.hideElementsWithTypes.has(
+              ElementTypeHostComponent
+            )}
+            onChange={updateFilterPreferences}
+          />{' '}
+          Hide host components (e.g. <code>&lt;div&gt;</code>)
+        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (

From c4c51c0821d6ac37513da12d9174d0fe47a1390e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 30 Apr 2019 09:48:15 -0700
Subject: [PATCH 523/814] Prevent filter preference changes while profiling is
 active

---
 src/backend/renderer.js                 |  7 +++++++
 src/devtools/store.js                   |  7 ++++++-
 src/devtools/views/Settings/Settings.js | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 6a7326e3baa3..1370e45128fb 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -273,6 +273,12 @@ export function attach(
 
   // TODO (filter) We could make this more efficient.
   function updateFilterPreferences(filterPreferences: FilterPreferences) {
+    if (this._isProfiling) {
+      // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+      // If necessary, we could support this- but it doesn't seem like a necessary use case.
+      throw Error('Cannot modify filter preferences while profiling');
+    }
+
     // Recursively unmount and then re-mount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
@@ -2218,6 +2224,7 @@ export function attach(
     rootPseudoKeys.delete(id);
   }
 
+  // TODO (profiling) This breaks after filter preferences have been updated.
   function getPathFrame(fiber: Fiber): PathFrame {
     let { displayName, key } = getDataForFiber(fiber);
     const index = fiber.index;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 3e6a409d6521..539dccf71c57 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -243,12 +243,17 @@ export default class Store extends EventEmitter {
     return this._filterPreferences;
   }
   set filterPreferences(value: FilterPreferences): void {
+    if (this._isProfiling) {
+      // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+      // If necessary, we could support this- but it doesn't seem like a necessary use case.
+      throw Error('Cannot modify filter preferences while profiling');
+    }
+
     this._filterPreferences = value;
 
     saveFilterPreferences(value);
 
     // TODO (filter) Dump all nodes, update renderer preferences, and re-initialize tree.
-    // TODO (filter) Invariant check that  we aren't profiling.
     // TODO (filter) Flushing every time a filter setting is changed is too expensive. We probably need an explitit configm
     this._bridge.send('updateFilterPreferences', value);
 
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 4ede5f1bf65a..cc4faeff5131 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -46,6 +46,20 @@ function Settings(_: {||}) {
     collapseNodesByDefaultSubscription
   );
 
+  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+  // If necessary, we could support this- but it doesn't seem like a necessary use case.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.isProfiling,
+      subscribe: (callback: Function) => {
+        store.addListener('isProfiling', callback);
+        return () => store.removeListener('isProfiling', callback);
+      },
+    }),
+    [store]
+  );
+  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
+
   const filterPreferencesSubscription = useMemo(
     () => ({
       getCurrentValue: () => store.filterPreferences,
@@ -182,6 +196,7 @@ function Settings(_: {||}) {
             checked={filterPreferences.hideElementsWithTypes.has(
               ElementTypeHostComponent
             )}
+            disabled={isProfiling}
             onChange={updateFilterPreferences}
           />{' '}
           Hide host components (e.g. <code>&lt;div&gt;</code>)

From a2ba90bf96b387fd5b3147fdecf5231b9f726c26 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 30 Apr 2019 10:04:15 -0700
Subject: [PATCH 524/814] Fixed a path selection bug when filter pereferences
 are updated

---
 src/backend/renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1370e45128fb..153018f7e3fc 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -295,6 +295,7 @@ export function attach(
     // Recursively re-mount all roots with new filter criteria applied.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
+      setRootPseudoKey(currentRootID, root.current);
       mountFiberRecursively(root.current, null);
       flushPendingEvents(root);
       currentRootID = -1;
@@ -2224,7 +2225,6 @@ export function attach(
     rootPseudoKeys.delete(id);
   }
 
-  // TODO (profiling) This breaks after filter preferences have been updated.
   function getPathFrame(fiber: Fiber): PathFrame {
     let { displayName, key } = getDataForFiber(fiber);
     const index = fiber.index;

From 0b4bfbc98fdf3cf8c11a25ef7d8f8841cbc549d6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 30 Apr 2019 12:52:43 -0700
Subject: [PATCH 525/814] Add support for hide-by-name and hide-by-path
 component filter regexps

---
 src/backend/renderer.js | 300 +++++++++++++++++-----------------------
 src/devtools/store.js   |   5 +-
 src/utils.js            |  50 +++++--
 3 files changed, 169 insertions(+), 186 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 153018f7e3fc..4808b694e44e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -37,7 +37,6 @@ import type {
   DevToolsHook,
   Fiber,
   FiberCommitsBackend,
-  FiberData,
   InteractionBackend,
   InteractionsBackend,
   InteractionWithCommitsBackend,
@@ -48,7 +47,7 @@ import type {
   RendererInterface,
 } from './types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
-import type { FilterPreferences } from 'src/types';
+import type { ElementType, FilterPreferences } from 'src/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -245,18 +244,15 @@ export function attach(
 
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
-      const fiberData = getDataForFiber(fiber);
-      const fiberDisplayName = (fiberData && fiberData.displayName) || 'null';
-      const parentFiberData =
-        parentFiber == null ? null : getDataForFiber(parentFiber);
-      const parentFiberDisplayName =
-        (parentFiberData && parentFiberData.displayName) || 'null';
+      const displayName = getDisplayNameForFiber(fiber) || 'null';
+      const parentDisplayName =
+        (parentFiber !== null && getDisplayNameForFiber(parentFiber)) || 'null';
       // NOTE: calling getFiberID or getPrimaryFiber is unsafe here
       // because it will put them in the map. For now, we'll omit them.
       // TODO: better debugging story for this.
       console.log(
-        `[renderer] %c${name} %c${fiberDisplayName} %c${
-          parentFiber ? parentFiberDisplayName : ''
+        `[renderer] %c${name} %c${displayName} %c${
+          parentFiber ? parentDisplayName : ''
         }`,
         'color: red; font-weight: bold;',
         'color: blue;',
@@ -271,7 +267,10 @@ export function attach(
     hideElementsWithPaths,
   } = getSavedFilterPreferences();
 
-  // TODO (filter) We could make this more efficient.
+  // TODO (filter) Should we make this operation more efficient?
+  // For example, we could add a new recursive unmount tree operation.
+  // The unmount operations are already significantly smaller than mount opreations though.
+  // This is something to keep in mind for later.
   function updateFilterPreferences(filterPreferences: FilterPreferences) {
     if (this._isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
@@ -302,32 +301,11 @@ export function attach(
     });
   }
 
-  // NOTICE Keep in sync with getDataForFiber()
+  // NOTICE Keep in sync with get*ForFiber methods
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const { tag } = fiber;
-
-    // TODO (filter) This does not yet support display name or path based filtering.
+    const { _debugSource, tag, type } = fiber;
 
     switch (tag) {
-      case ClassComponent:
-      case IncompleteClassComponent:
-        return hideElementsWithTypes.has(ElementTypeClass);
-      case FunctionComponent:
-        return hideElementsWithTypes.has(ElementTypeFunction);
-      case IndeterminateComponent:
-        return (
-          hideElementsWithTypes.has(ElementTypeClass) ||
-          hideElementsWithTypes.has(ElementTypeFunction)
-        );
-      case ForwardRef:
-        return hideElementsWithTypes.has(ElementTypeForwardRef);
-      case MemoComponent:
-      case SimpleMemoComponent:
-        return hideElementsWithTypes.has(ElementTypeMemo);
-      case HostComponent:
-        return hideElementsWithTypes.has(ElementTypeHostComponent);
-      case HostRoot:
-        return false; // We never support filtering roots
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
         // However, it has some special behavior (like disconnecting
@@ -341,7 +319,7 @@ export function attach(
       case Fragment:
         return true;
       default:
-        const typeSymbol = getTypeSymbol(fiber.type);
+        const typeSymbol = getTypeSymbol(type);
 
         switch (typeSymbol) {
           case CONCURRENT_MODE_NUMBER:
@@ -350,22 +328,35 @@ export function attach(
           case STRICT_MODE_NUMBER:
           case STRICT_MODE_SYMBOL_STRING:
             return true;
-          case CONTEXT_PROVIDER_NUMBER:
-          case CONTEXT_PROVIDER_SYMBOL_STRING:
-          case CONTEXT_CONSUMER_NUMBER:
-          case CONTEXT_CONSUMER_SYMBOL_STRING:
-            return hideElementsWithTypes.has(ElementTypeContext);
-          case SUSPENSE_NUMBER:
-          case SUSPENSE_SYMBOL_STRING:
-          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
-            return hideElementsWithTypes.has(ElementTypeSuspense);
-          case PROFILER_NUMBER:
-          case PROFILER_SYMBOL_STRING:
-            return hideElementsWithTypes.has(ElementTypeProfiler);
           default:
-            return false;
+            break;
         }
     }
+
+    const elementType = getTypeForFiber(fiber);
+    if (hideElementsWithTypes.has(elementType)) {
+      return true;
+    }
+
+    if (hideElementsWithDisplayNames.size > 0) {
+      const displayName = getDisplayNameForFiber(fiber) || '';
+      for (let displayNameRegExp of hideElementsWithDisplayNames) {
+        if (displayNameRegExp.test(displayName)) {
+          return true;
+        }
+      }
+    }
+
+    if (_debugSource !== null && hideElementsWithPaths.size > 0) {
+      const { fileName } = _debugSource;
+      for (let pathRegExp of hideElementsWithPaths) {
+        if (pathRegExp.test(fileName)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
   }
 
   function getTypeSymbol(type: any): Symbol | number {
@@ -377,9 +368,9 @@ export function attach(
       : symbolOrNumber;
   }
 
-  // NOTICE Keep in sync with shouldFilterFiber()
-  function getDataForFiber(fiber: Fiber): FiberData {
-    const { elementType, type, key, tag } = fiber;
+  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
+  function getDisplayNameForFiber(fiber: Fiber): string | null {
+    const { elementType, type, tag } = fiber;
 
     // This is to support lazy components with a Promise as the type.
     // see https://github.com/facebook/react/pull/13397
@@ -390,96 +381,47 @@ export function attach(
       }
     }
 
-    let fiberData: FiberData = ((null: any): FiberData);
-    let displayName: string = ((null: any): string);
     let resolvedContext: any = null;
 
     switch (tag) {
       case ClassComponent:
       case IncompleteClassComponent:
-        fiberData = {
-          displayName: getDisplayName(resolvedType),
-          key,
-          type: ElementTypeClass,
-        };
-        break;
+        return getDisplayName(resolvedType);
       case FunctionComponent:
       case IndeterminateComponent:
-        fiberData = {
-          displayName: getDisplayName(resolvedType),
-          key,
-          type: ElementTypeFunction,
-        };
-        break;
+        return getDisplayName(resolvedType);
       case EventComponent:
-        fiberData = {
-          displayName: null,
-          key,
-          type: ElementTypeEventComponent,
-        };
-        break;
+        return null;
       case EventTarget:
         switch (getTypeSymbol(elementType.type)) {
           case EVENT_TARGET_TOUCH_HIT_NUMBER:
           case EVENT_TARGET_TOUCH_HIT_STRING:
-            displayName = 'TouchHitTarget';
-            break;
+            return 'TouchHitTarget';
           default:
-            displayName = 'EventTarget';
-            break;
+            return 'EventTarget';
         }
-        fiberData = {
-          displayName,
-          key,
-          type: ElementTypeEventTarget,
-        };
-        break;
       case ForwardRef:
         const functionName = getDisplayName(resolvedType.render, '');
-        displayName =
+        return (
           resolvedType.displayName ||
-          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef');
-
-        fiberData = {
-          displayName,
-          key,
-          type: ElementTypeForwardRef,
-        };
-        break;
+          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
+        );
       case HostRoot:
-        return {
-          displayName: null,
-          key: null,
-          type: ElementTypeRoot,
-        };
+        return null;
       case HostComponent:
-        return {
-          displayName: type,
-          key,
-          type: ElementTypeHostComponent,
-        };
+        return type;
       case HostPortal:
       case HostText:
       case Fragment:
-        return {
-          displayName: null,
-          key,
-          type: ElementTypeOtherOrUnknown,
-        };
+        return null;
       case MemoComponent:
       case SimpleMemoComponent:
         if (elementType.displayName) {
-          displayName = elementType.displayName;
+          return elementType.displayName;
         } else {
-          displayName = type.displayName || type.name;
-          displayName = displayName ? `Memo(${displayName})` : 'Memo';
+          const displayName = type.displayName || type.name;
+          return displayName ? `Memo(${displayName})` : 'Memo';
         }
-        fiberData = {
-          displayName,
-          key,
-          type: ElementTypeMemo,
-        };
-        break;
       default:
         const typeSymbol = getTypeSymbol(type);
 
@@ -487,26 +429,14 @@ export function attach(
           case CONCURRENT_MODE_NUMBER:
           case CONCURRENT_MODE_SYMBOL_STRING:
           case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
-            return {
-              displayName: null,
-              key: null,
-              type: ElementTypeOtherOrUnknown,
-            };
+            return null;
           case CONTEXT_PROVIDER_NUMBER:
           case CONTEXT_PROVIDER_SYMBOL_STRING:
             // 16.3.0 exposed the context object as "context"
             // PR #12501 changed it to "_context" for 16.3.1+
             // NOTE Keep in sync with inspectElement()
             resolvedContext = fiber.type._context || fiber.type.context;
-            displayName = `${resolvedContext.displayName ||
-              'Context'}.Provider`;
-
-            fiberData = {
-              displayName,
-              key,
-              type: ElementTypeContext,
-            };
-            break;
+            return `${resolvedContext.displayName || 'Context'}.Provider`;
           case CONTEXT_CONSUMER_NUMBER:
           case CONTEXT_CONSUMER_SYMBOL_STRING:
             // 16.3-16.5 read from "type" because the Consumer is the actual context object.
@@ -516,54 +446,81 @@ export function attach(
 
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
             // If you change the name, figure out a more resilient way to detect it.
-            displayName = `${resolvedContext.displayName ||
-              'Context'}.Consumer`;
-
-            fiberData = {
-              displayName,
-              key,
-              type: ElementTypeContext,
-            };
-            break;
+            return `${resolvedContext.displayName || 'Context'}.Consumer`;
           case STRICT_MODE_NUMBER:
           case STRICT_MODE_SYMBOL_STRING:
-            fiberData = {
-              displayName: null,
-              key,
-              type: ElementTypeOtherOrUnknown,
-            };
-            break;
+            return null;
           case SUSPENSE_NUMBER:
           case SUSPENSE_SYMBOL_STRING:
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
-            fiberData = {
-              displayName: 'Suspense',
-              key,
-              type: ElementTypeSuspense,
-            };
-            break;
+            return 'Suspense';
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
-            fiberData = {
-              displayName: `Profiler(${fiber.memoizedProps.id})`,
-              key,
-              type: ElementTypeProfiler,
-            };
-            break;
+            return `Profiler(${fiber.memoizedProps.id})`;
           default:
             // Unknown element type.
             // This may mean a new element type that has not yet been added to DevTools.
-            fiberData = {
-              displayName: null,
-              key,
-              type: ElementTypeOtherOrUnknown,
-            };
-            break;
+            return null;
         }
-        break;
     }
+  }
 
-    return fiberData;
+  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
+  function getTypeForFiber(fiber: Fiber): ElementType {
+    const { type, tag } = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+        return ElementTypeClass;
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return ElementTypeFunction;
+      case EventComponent:
+        return ElementTypeEventComponent;
+      case EventTarget:
+        return ElementTypeEventTarget;
+      case ForwardRef:
+        return ElementTypeForwardRef;
+      case HostRoot:
+        return ElementTypeRoot;
+      case HostComponent:
+        return ElementTypeHostComponent;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return ElementTypeOtherOrUnknown;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return ElementTypeMemo;
+      default:
+        const typeSymbol = getTypeSymbol(type);
+
+        switch (typeSymbol) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+            return ElementTypeOtherOrUnknown;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+            return ElementTypeContext;
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+            return ElementTypeContext;
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return ElementTypeOtherOrUnknown;
+          case SUSPENSE_NUMBER:
+          case SUSPENSE_SYMBOL_STRING:
+          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
+            return ElementTypeSuspense;
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            return ElementTypeProfiler;
+          default:
+            return ElementTypeOtherOrUnknown;
+        }
+    }
   }
 
   // This is a slightly annoying indirection.
@@ -787,7 +744,9 @@ export function attach(
       pushOperation(isProfilingSupported ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
-      const { displayName, key, type } = getDataForFiber(fiber);
+      const { key } = fiber;
+      const displayName = getDisplayNameForFiber(fiber);
+      const type = getTypeForFiber(fiber);
       const { _debugOwner } = fiber;
 
       const ownerID =
@@ -1647,7 +1606,7 @@ export function attach(
     ) {
       // 16.3-16.5 read from "type" because the Consumer is the actual context object.
       // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
-      // NOTE Keep in sync with getDataForFiber()
+      // NOTE Keep in sync with get*ForFiber methods
       const consumerResolvedContext = type._context || type;
 
       // Global context value.
@@ -1664,7 +1623,7 @@ export function attach(
         ) {
           // 16.3.0 exposed the context object as "context"
           // PR #12501 changed it to "_context" for 16.3.1+
-          // NOTE Keep in sync with getDataForFiber()
+          // NOTE Keep in sync with get*ForFiber methods
           const providerResolvedContext =
             currentType._context || currentType.context;
           if (providerResolvedContext === consumerResolvedContext) {
@@ -1689,7 +1648,7 @@ export function attach(
       let owner = _debugOwner;
       while (owner !== null) {
         owners.push({
-          displayName: getDataForFiber(owner).displayName || 'Unknown',
+          displayName: getDisplayNameForFiber(owner) || 'Unknown',
           id: getFiberID(getPrimaryFiber(owner)),
         });
         owner = owner._debugOwner;
@@ -1719,7 +1678,7 @@ export function attach(
       // Can view component source location.
       canViewSource,
 
-      displayName: getDataForFiber(fiber).displayName,
+      displayName: getDisplayNameForFiber(fiber),
 
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
@@ -2183,7 +2142,7 @@ export function attach(
       if (child === null) {
         break;
       }
-      const displayName = getDataForFiber(child).displayName;
+      const displayName = getDisplayNameForFiber(child);
       if (displayName !== null) {
         // Prefer display names that we get from user-defined components.
         // We want to avoid using e.g. 'Suspense' unless we find nothing else.
@@ -2226,7 +2185,8 @@ export function attach(
   }
 
   function getPathFrame(fiber: Fiber): PathFrame {
-    let { displayName, key } = getDataForFiber(fiber);
+    const { key } = fiber;
+    let displayName = getDisplayNameForFiber(fiber);
     const index = fiber.index;
     switch (fiber.tag) {
       case HostRoot:
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 539dccf71c57..7c062247cfd3 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -251,10 +251,11 @@ export default class Store extends EventEmitter {
 
     this._filterPreferences = value;
 
+    // Update persisted filter preferences stored in localStorage.
     saveFilterPreferences(value);
 
-    // TODO (filter) Dump all nodes, update renderer preferences, and re-initialize tree.
-    // TODO (filter) Flushing every time a filter setting is changed is too expensive. We probably need an explitit configm
+    // Notify the renderer that filter prefernces have changed.
+    // This is an expensive opreation; it unmounts and remounts the entire tree.
     this._bridge.send('updateFilterPreferences', value);
 
     this.emit('filterPreferences');
diff --git a/src/utils.js b/src/utils.js
index b20abd07fd3a..0e5caa2c93fd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -89,35 +89,57 @@ export function getDefaultFilterPreferences(): FilterPreferences {
   };
 }
 
+function getSavedFilterPreferencesFilter(key, value) {
+  if (typeof value === 'string' && value.indexOf('__REGEXP__') === 0) {
+    const match = value.substr(9).match(/\/(.*)\/(.*)?/);
+    return new RegExp(match[1], match[2] || '');
+  }
+  return value;
+}
+
 export function getSavedFilterPreferences(): FilterPreferences {
   const raw = localStorage.getItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
   if (raw != null) {
-    const json = JSON.parse(raw);
+    const json = JSON.parse(raw, getSavedFilterPreferencesFilter);
     return {
       hideElementsWithTypes: new Set(json.hideElementsWithTypes),
-      hideElementsWithDisplayNames: new Set(json.hideElementsWithDisplayNames),
-      hideElementsWithPaths: new Set(json.hideElementsWithPaths),
+      hideElementsWithDisplayNames: new Set(
+        json.hideElementsWithDisplayNames.map(source => new RegExp(source))
+      ),
+      hideElementsWithPaths: new Set(
+        json.hideElementsWithPaths.map(source => new RegExp(source))
+      ),
     };
   } else {
     return getDefaultFilterPreferences();
   }
 }
 
+function saveFilterPreferencesFilter(key, value) {
+  if (value instanceof RegExp) {
+    return '__REGEXP__' + value.toString();
+  }
+  return value;
+}
+
 export function saveFilterPreferences(
   filterPreferences: FilterPreferences
 ): void {
   localStorage.setItem(
     LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
-    JSON.stringify({
-      hideElementsWithTypes: Array.from(
-        filterPreferences.hideElementsWithTypes
-      ),
-      hideElementsWithDisplayNames: Array.from(
-        filterPreferences.hideElementsWithDisplayNames
-      ),
-      hideElementsWithPaths: Array.from(
-        filterPreferences.hideElementsWithPaths
-      ),
-    })
+    JSON.stringify(
+      {
+        hideElementsWithTypes: Array.from(
+          filterPreferences.hideElementsWithTypes
+        ),
+        hideElementsWithDisplayNames: Array.from(
+          filterPreferences.hideElementsWithDisplayNames
+        ),
+        hideElementsWithPaths: Array.from(
+          filterPreferences.hideElementsWithPaths
+        ),
+      },
+      saveFilterPreferencesFilter
+    )
   );
 }

From 84292201644143dd3f2aace2753f10caec339840 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 10:43:40 -0700
Subject: [PATCH 526/814] Added filter UI (but with a lot of $FlowFixMe
 comments)

---
 src/backend/agent.js                          |   8 +-
 src/backend/renderer.js                       |  62 ++-
 src/backend/types.js                          |   4 +-
 src/constants.js                              |   2 +-
 src/devtools/store.js                         |  24 +-
 src/devtools/views/Button.js                  |   4 +-
 src/devtools/views/ButtonIcon.js              |  50 ++-
 .../Components/ComponentFiltersModal.css      | 119 +++++
 .../views/Components/ComponentFiltersModal.js | 406 ++++++++++++++++++
 .../ComponentFiltersModalContext.js           |  37 ++
 .../ToggleComponentFiltersModalButton.js      |  42 ++
 src/devtools/views/Components/Tree.css        |   1 +
 src/devtools/views/Components/Tree.js         |  78 ++--
 .../Profiler/ClearProfilingDataButton.js      |   2 +-
 src/devtools/views/Settings/Settings.js       |  58 ---
 .../views/Settings/SettingsContext.js         |   5 +
 src/devtools/views/root.css                   |   8 +
 src/types.js                                  |  38 +-
 src/utils.js                                  |  79 ++--
 19 files changed, 831 insertions(+), 196 deletions(-)
 create mode 100644 src/devtools/views/Components/ComponentFiltersModal.css
 create mode 100644 src/devtools/views/Components/ComponentFiltersModal.js
 create mode 100644 src/devtools/views/Components/ComponentFiltersModalContext.js
 create mode 100644 src/devtools/views/Components/ToggleComponentFiltersModalButton.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index fed7344dbe04..32982814df40 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -16,7 +16,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type { Bridge, FilterPreferences } from '../types';
+import type { Bridge, ComponentFilter } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -118,7 +118,7 @@ export default class Agent extends EventEmitter {
       this.syncSelectionFromNativeElementsPanel
     );
     bridge.addListener('shutdown', this.shutdown);
-    bridge.addListener('updateFilterPreferences', this.updateFilterPreferences);
+    bridge.addListener('updateComponentFilters', this.updateComponentFilters);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
@@ -490,12 +490,12 @@ export default class Agent extends EventEmitter {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  updateFilterPreferences = (filterPreferences: FilterPreferences) => {
+  updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
     for (let rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-      renderer.updateFilterPreferences(filterPreferences);
+      renderer.updateComponentFilters(componentFilters);
     }
   };
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4808b694e44e..403f6277c967 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2,6 +2,9 @@
 
 import { gte } from 'semver';
 import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterPath,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeEventComponent,
@@ -17,7 +20,7 @@ import {
 } from 'src/types';
 import {
   getDisplayName,
-  getSavedFilterPreferences,
+  getSavedComponentFilters,
   getUID,
   utfEncodeString,
 } from 'src/utils';
@@ -47,7 +50,7 @@ import type {
   RendererInterface,
 } from './types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
-import type { ElementType, FilterPreferences } from 'src/types';
+import type { ComponentFilter, ElementType } from 'src/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -261,17 +264,53 @@ export function attach(
     }
   };
 
-  let {
-    hideElementsWithTypes,
-    hideElementsWithDisplayNames,
-    hideElementsWithPaths,
-  } = getSavedFilterPreferences();
+  // Configurable Components tree filters.
+  const hideElementsWithDisplayNames: Set<RegExp> = new Set();
+  const hideElementsWithPaths: Set<RegExp> = new Set();
+  const hideElementsWithTypes: Set<ElementType> = new Set();
+
+  function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
+    hideElementsWithTypes.clear();
+    hideElementsWithDisplayNames.clear();
+    hideElementsWithPaths.clear();
+
+    componentFilters.forEach(componentFilter => {
+      if (!componentFilter.isEnabled) {
+        return;
+      }
+
+      switch (componentFilter.type) {
+        case ComponentFilterDisplayName:
+          if (componentFilter.isValid && componentFilter.value !== '') {
+            hideElementsWithDisplayNames.add(
+              new RegExp(componentFilter.value, 'i')
+            );
+          }
+          break;
+        case ComponentFilterElementType:
+          hideElementsWithTypes.add(componentFilter.value);
+          break;
+        case ComponentFilterPath:
+          if (componentFilter.isValid && componentFilter.value !== '') {
+            hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));
+          }
+          break;
+        default:
+          console.warn(
+            `Invalid component filter type "${componentFilter.type}"`
+          );
+          break;
+      }
+    });
+  }
+
+  applyComponentFilters(getSavedComponentFilters());
 
   // TODO (filter) Should we make this operation more efficient?
   // For example, we could add a new recursive unmount tree operation.
   // The unmount operations are already significantly smaller than mount opreations though.
   // This is something to keep in mind for later.
-  function updateFilterPreferences(filterPreferences: FilterPreferences) {
+  function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
     if (this._isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
       // If necessary, we could support this- but it doesn't seem like a necessary use case.
@@ -286,10 +325,7 @@ export function attach(
       currentRootID = -1;
     });
 
-    hideElementsWithTypes = filterPreferences.hideElementsWithTypes;
-    hideElementsWithDisplayNames =
-      filterPreferences.hideElementsWithDisplayNames;
-    hideElementsWithPaths = filterPreferences.hideElementsWithPaths;
+    applyComponentFilters(componentFilters);
 
     // Recursively re-mount all roots with new filter criteria applied.
     hook.getFiberRoots(rendererID).forEach(root => {
@@ -2280,6 +2316,6 @@ export function attach(
     setTrackedPath,
     startProfiling,
     stopProfiling,
-    updateFilterPreferences,
+    updateComponentFilters,
   };
 }
diff --git a/src/backend/types.js b/src/backend/types.js
index a12dda629222..1675416f9638 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType, FilterPreferences } from 'src/types';
+import type { ComponentFilter, ElementType } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
@@ -139,7 +139,7 @@ export type RendererInterface = {
   setTrackedPath: (path: Array<PathFrame> | null) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
-  updateFilterPreferences: (filterPreferences: FilterPreferences) => void,
+  updateComponentFilters: (somponentFilters: Array<ComponentFilter>) => void,
 };
 
 export type Handler = (data: any) => void;
diff --git a/src/constants.js b/src/constants.js
index f5c7683d690d..fcbf9cb65e82 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -6,7 +6,7 @@ export const TREE_OPERATION_REORDER_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
-  'React::DevTools::filterPreferences';
+  'React::DevTools::componentFilters';
 
 export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 7c062247cfd3..6da87d3032a7 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -11,8 +11,8 @@ import {
 } from '../constants';
 import { ElementTypeRoot } from '../types';
 import {
-  getSavedFilterPreferences,
-  saveFilterPreferences,
+  getSavedComponentFilters,
+  saveComponentFilters,
   utfDecodeString,
 } from '../utils';
 import { __DEBUG__ } from '../constants';
@@ -24,7 +24,7 @@ import type {
   ImportedProfilingData,
   ProfilingSnapshotNode,
 } from './views/Profiler/types';
-import type { Bridge, ElementType, FilterPreferences } from '../types';
+import type { Bridge, ComponentFilter, ElementType } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -69,7 +69,7 @@ export default class Store extends EventEmitter {
   // Should new nodes be collapsed by default when added to the tree?
   _collapseNodesByDefault: boolean = true;
 
-  _filterPreferences: FilterPreferences;
+  _componentFilters: Array<ComponentFilter>;
 
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
@@ -143,7 +143,7 @@ export default class Store extends EventEmitter {
       localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
       'false';
 
-    this._filterPreferences = getSavedFilterPreferences();
+    this._componentFilters = getSavedComponentFilters();
 
     if (config != null) {
       const {
@@ -239,26 +239,26 @@ export default class Store extends EventEmitter {
     this.emit('collapseNodesByDefault');
   }
 
-  get filterPreferences(): FilterPreferences {
-    return this._filterPreferences;
+  get componentFilters(): Array<ComponentFilter> {
+    return this._componentFilters;
   }
-  set filterPreferences(value: FilterPreferences): void {
+  set componentFilters(value: Array<ComponentFilter>): void {
     if (this._isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
       // If necessary, we could support this- but it doesn't seem like a necessary use case.
       throw Error('Cannot modify filter preferences while profiling');
     }
 
-    this._filterPreferences = value;
+    this._componentFilters = value;
 
     // Update persisted filter preferences stored in localStorage.
-    saveFilterPreferences(value);
+    saveComponentFilters(value);
 
     // Notify the renderer that filter prefernces have changed.
     // This is an expensive opreation; it unmounts and remounts the entire tree.
-    this._bridge.send('updateFilterPreferences', value);
+    this._bridge.send('updateComponentFilters', value);
 
-    this.emit('filterPreferences');
+    this.emit('componentFilters');
   }
 
   get hasOwnerMetadata(): boolean {
diff --git a/src/devtools/views/Button.js b/src/devtools/views/Button.js
index 78a9c8201f80..bb55bca22f69 100644
--- a/src/devtools/views/Button.js
+++ b/src/devtools/views/Button.js
@@ -9,13 +9,13 @@ import tooltipStyles from './Tooltip.css';
 type Props = {
   children: React$Node,
   className?: string,
-  title: string,
+  title?: string,
 };
 
 export default function Button({
   children,
   className = '',
-  title,
+  title = '',
   ...rest
 }: Props) {
   let button = (
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 3099068b5b49..0e05ce771f41 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -6,6 +6,7 @@ import styles from './ButtonIcon.css';
 export type IconType =
   | 'add'
   | 'cancel'
+  | 'clear'
   | 'close'
   | 'collapsed'
   | 'copy'
@@ -21,7 +22,11 @@ export type IconType =
   | 'previous'
   | 'record'
   | 'reload'
+  | 'save'
   | 'search'
+  | 'settings'
+  | 'toggle_off'
+  | 'toggle_on'
   | 'undo'
   | 'up'
   | 'view-dom'
@@ -41,6 +46,9 @@ export default function ButtonIcon({ className = '', type }: Props) {
     case 'cancel':
       pathData = PATH_CANCEL;
       break;
+    case 'clear':
+      pathData = PATH_CLEAR;
+      break;
     case 'close':
       pathData = PATH_CLOSE;
       break;
@@ -86,9 +94,21 @@ export default function ButtonIcon({ className = '', type }: Props) {
     case 'reload':
       pathData = PATH_RELOAD;
       break;
+    case 'save':
+      pathData = PATH_SAVE;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
+    case 'settings':
+      pathData = PATH_SETTINGS;
+      break;
+    case 'toggle_off':
+      pathData = PATH_TOGGLE_OFF;
+      break;
+    case 'toggle_on':
+      pathData = PATH_TOGGLE_ON;
+      break;
     case 'undo':
       pathData = PATH_UNDO;
       break;
@@ -120,9 +140,14 @@ export default function ButtonIcon({ className = '', type }: Props) {
   );
 }
 
-const PATH_ADD = 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z';
+const PATH_ADD =
+  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z';
 
 const PATH_CANCEL = `
+  M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z
+`;
+
+const PATH_CLEAR = `
   M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
   16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
 `;
@@ -138,8 +163,8 @@ const PATH_COPY = `
 `;
 
 const PATH_DELETE = `
-  M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12
-  2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z
+  M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12
+  13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z
 `;
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
@@ -177,11 +202,30 @@ const PATH_RELOAD = `
   3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z
 `;
 
+const PATH_SAVE = `
+  M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z
+`;
+
 const PATH_SEARCH = `
   M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
   M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
 `;
 
+const PATH_SETTINGS = `
+  M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
+  2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
+  0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
+  1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
+  1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
+  .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
+`;
+
+const PATH_TOGGLE_OFF =
+  'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';
+
+const PATH_TOGGLE_ON =
+  'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';
+
 const PATH_UNDO = `
   M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
   3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
diff --git a/src/devtools/views/Components/ComponentFiltersModal.css b/src/devtools/views/Components/ComponentFiltersModal.css
new file mode 100644
index 000000000000..1e16c7e3dec5
--- /dev/null
+++ b/src/devtools/views/Components/ComponentFiltersModal.css
@@ -0,0 +1,119 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--color-modal-background);
+  overflow: auto;
+}
+
+.Modal {
+  position: relative;
+  z-index: 3;
+  min-width: 20rem;
+  max-width: 100%;
+  display: inline-block;
+  background-color: var(--color-background);
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+}
+
+.LeftRight {
+  display: flex;
+}
+.Left {
+}
+.Right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ButtonIcon {
+  margin-right: 0.25rem;
+}
+
+.NoFiltersCell {
+  padding: 0.25rem 0;
+  color: var(--color-dim);
+}
+
+.Table {
+  min-width: 20rem;
+  margin-top: 0.5rem;
+  border-spacing: 0;
+}
+
+.TableRow {
+  padding-bottom: 0.5rem;
+}
+
+.TableCell {
+  padding: 0;
+  padding-right: 0.5rem;
+}
+.TableCell:last-of-type {
+  text-align: right;
+  padding-right: 0;
+}
+
+.Select {
+}
+
+.Input {
+  border: none;
+  border-radius: 0.125rem;
+  padding: 0.125rem;
+}
+
+.CancelButton {
+  margin-right: 0.25rem;
+}
+
+.InvalidRegExp,
+.InvalidRegExp:active,
+.InvalidRegExp:focus,
+.InvalidRegExp:hover {
+  color: var(--color-value-invalid);
+}
+
+.ToggleOffInvalid,
+.ToggleOnInvalid,
+.ToggleOff,
+.ToggleOn {
+  border-radius: 0.75rem;
+  width: 1rem;
+  height: 0.625rem;
+  display: flex;
+  align-items: center;
+  padding: 0.125rem;
+}
+.ToggleOffInvalid {
+  background-color: var(--color-toggle-background-invalid);
+  justify-content: flex-start;
+}
+.ToggleOnInvalid {
+  background-color: var(--color-toggle-background-invalid);
+  justify-content: flex-end;
+}
+.ToggleOff {
+  background-color: var(--color-toggle-background-off);
+  justify-content: flex-start;
+}
+.ToggleOn {
+  background-color: var(--color-toggle-background-on);
+  justify-content: flex-end;
+}
+
+.ToggleInsideOff,
+.ToggleInsideOn {
+  border-radius: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: var(--color-toggle-text);
+}
diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
new file mode 100644
index 000000000000..e7a29f4e585a
--- /dev/null
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -0,0 +1,406 @@
+// @flow
+
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useModalDismissSignal, useSubscription } from '../hooks';
+import { ComponentFiltersModalContext } from './ComponentFiltersModalContext';
+import { StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import Store from 'src/devtools/store';
+import {
+  ComponentFilterElementType,
+  ComponentFilterDisplayName,
+  ComponentFilterPath,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeEventTarget,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeSuspense,
+} from 'src/types';
+import styles from './ComponentFiltersModal.css';
+
+import type {
+  ComponentFilter,
+  ElementType,
+  ElementTypeComponentFilter,
+  FilterType,
+  RegExpComponentFilter,
+} from 'src/types';
+
+export default function ComponentFiltersModalWrapper(_: {||}) {
+  const store = useContext(StoreContext);
+
+  const { isModalShowing, setIsModalShowing } = useContext(
+    ComponentFiltersModalContext
+  );
+
+  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+  // If necessary, we could support this- but it doesn't seem like a necessary use case.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.isProfiling,
+      subscribe: (callback: Function) => {
+        store.addListener('isProfiling', callback);
+        return () => store.removeListener('isProfiling', callback);
+      },
+    }),
+    [store]
+  );
+  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
+  if (isProfiling && isModalShowing) {
+    setIsModalShowing(false);
+  }
+
+  return isModalShowing ? (
+    <ComponentFiltersModal
+      store={store}
+      setIsModalShowing={setIsModalShowing}
+    />
+  ) : null;
+}
+
+type Props = {|
+  store: Store,
+  setIsModalShowing: (value: boolean) => void,
+|};
+
+function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
+  const dismissModal = useCallback(() => setIsModalShowing(false), [
+    setIsModalShowing,
+  ]);
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  useModalDismissSignal(modalRef, dismissModal);
+
+  const {
+    addFilter,
+    changeFilterType,
+    updateFilterValueElementType,
+    updateFilterValueRegExp,
+    componentFilters,
+    removeFilter,
+    saveFilters,
+    toggleFilterIsEnabled,
+  } = useComponentFilters();
+
+  const saveAndClose = useCallback(() => {
+    saveFilters();
+    dismissModal();
+  }, [dismissModal, saveFilters]);
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Modal} ref={modalRef}>
+        <div className={styles.LeftRight}>
+          <div className={styles.Left}>Hide components where...</div>
+          <div className={styles.Right}>
+            <Button onClick={addFilter}>
+              <ButtonIcon className={styles.ButtonIcon} type="add" />
+              Add filter
+            </Button>
+          </div>
+        </div>
+        <table className={styles.Table}>
+          <tbody>
+            {componentFilters.length === 0 && (
+              <tr className={styles.TableRow}>
+                <td className={styles.NoFiltersCell}>
+                  No filters have been added.
+                </td>
+              </tr>
+            )}
+            {componentFilters.map((componentFilter, index) => (
+              <tr className={styles.TableRow} key={index}>
+                <td className={styles.TableCell}>
+                  <Toggle
+                    className={
+                      componentFilter.isValid !== false
+                        ? ''
+                        : styles.InvalidRegExp
+                    }
+                    isChecked={componentFilter.isEnabled}
+                    onChange={isEnabled =>
+                      toggleFilterIsEnabled(componentFilter, isEnabled)
+                    }
+                    title={
+                      componentFilter.isValid === false
+                        ? 'Filter invalid'
+                        : componentFilter.isEnabled
+                        ? 'Filter enabled'
+                        : 'Filter disabled'
+                    }
+                  >
+                    <ToggleIcon
+                      isEnabled={componentFilter.isEnabled}
+                      isValid={
+                        componentFilter.isValid == null ||
+                        componentFilter.isValid === true
+                      }
+                    />
+                  </Toggle>
+                </td>
+                <td className={styles.TableCell}>
+                  <select
+                    className={styles.Select}
+                    value={componentFilter.type}
+                    onChange={({ currentTarget }) =>
+                      changeFilterType(
+                        componentFilter,
+                        // $FlowFixMe TODO (filters)
+                        parseInt(currentTarget.value, 10)
+                      )
+                    }
+                  >
+                    <option value={ComponentFilterElementType}>type</option>
+                    <option value={ComponentFilterDisplayName}>name</option>
+                    <option value={ComponentFilterPath}>path</option>
+                  </select>
+                </td>
+                <td className={styles.TableCell}>
+                  {componentFilter.type === ComponentFilterElementType
+                    ? 'equals'
+                    : 'matches'}
+                </td>
+                <td className={styles.TableCell}>
+                  {componentFilter.type === ComponentFilterElementType ? (
+                    <select
+                      className={styles.Select}
+                      value={componentFilter.value}
+                      onChange={({ currentTarget }) =>
+                        updateFilterValueElementType(
+                          componentFilter,
+                          // $FlowFixMe TODO (filters)
+                          parseInt(currentTarget.value, 10)
+                        )
+                      }
+                    >
+                      <option value={ElementTypeClass}>class</option>
+                      <option value={ElementTypeContext}>context</option>
+                      <option value={ElementTypeEventTarget}>event</option>
+                      <option value={ElementTypeFunction}>function</option>
+                      <option value={ElementTypeForwardRef}>forward ref</option>
+                      <option value={ElementTypeHostComponent}>
+                        host (e.g. &lt;div&gt;)
+                      </option>
+                      <option value={ElementTypeMemo}>memo</option>
+                      <option value={ElementTypeOtherOrUnknown}>other</option>
+                      <option value={ElementTypeProfiler}>profiler</option>
+                      <option value={ElementTypeSuspense}>suspense</option>
+                    </select>
+                  ) : (
+                    <input
+                      className={styles.Input}
+                      type="text"
+                      placeholder="Regular expression"
+                      onChange={({ currentTarget }) =>
+                        updateFilterValueRegExp(
+                          componentFilter,
+                          currentTarget.value
+                        )
+                      }
+                      value={componentFilter.value}
+                    />
+                  )}
+                </td>
+                <td className={styles.TableCell}>
+                  <Button
+                    onClick={() => removeFilter(index)}
+                    title="Delete filter"
+                  >
+                    <ButtonIcon type="delete" />
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className={styles.LeftRight}>
+          <div className={styles.Right}>
+            <Button className={styles.CancelButton} onClick={dismissModal}>
+              Cancel
+            </Button>
+            <Button onClick={saveAndClose}>Save Changes</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type ToggleIconProps = {|
+  isEnabled: boolean,
+  isValid: boolean,
+|};
+function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {
+  let className;
+  if (isValid) {
+    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
+  } else {
+    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
+  }
+  return (
+    <div className={className}>
+      <div
+        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
+      />
+    </div>
+  );
+}
+
+function useComponentFilters() {
+  const store = useContext(StoreContext);
+
+  const [componentFilters, setComponentFilters] = useState<
+    Array<ComponentFilter>
+  >(() => [...store.componentFilters]);
+
+  const addFilter = useCallback(() => {
+    setComponentFilters(componentFilters => {
+      return [
+        ...componentFilters,
+        {
+          type: ComponentFilterElementType,
+          value: ElementTypeHostComponent,
+          isEnabled: true,
+        },
+      ];
+    });
+  }, []);
+
+  const changeFilterType = useCallback(
+    (componentFilter: ComponentFilter, type: FilterType) => {
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          if (type === ComponentFilterElementType) {
+            // $FlowFixMe TODO (filters)
+            cloned[index] = ({
+              type,
+              isEnabled: componentFilter.isEnabled,
+              value: ElementTypeHostComponent,
+            }: ElementTypeComponentFilter);
+          } else if (
+            type === ComponentFilterDisplayName ||
+            type === ComponentFilterPath
+          ) {
+            // $FlowFixMe TODO (filters)
+            cloned[index] = ({
+              type,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            }: RegExpComponentFilter);
+          }
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const updateFilterValueElementType = useCallback(
+    (componentFilter: ComponentFilter, value: ElementType) => {
+      if (componentFilter.type !== ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          // $FlowFixMe TODO (filters)
+          cloned[index] = {
+            ...componentFilter,
+            value,
+          };
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const updateFilterValueRegExp = useCallback(
+    (componentFilter: ComponentFilter, value: string) => {
+      if (componentFilter.type === ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          let isValid = true;
+          try {
+            new RegExp(value);
+          } catch (error) {
+            isValid = false;
+          }
+          // $FlowFixMe TODO (filters)
+          cloned[index] = {
+            ...componentFilter,
+            isValid,
+            value,
+          };
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const removeFilter = useCallback((index: number) => {
+    setComponentFilters(componentFilters => {
+      const cloned: Array<ComponentFilter> = [...componentFilters];
+      cloned.splice(index, 1);
+      return cloned;
+    });
+  }, []);
+
+  const saveFilters = useCallback(() => {
+    store.componentFilters = [...componentFilters];
+  }, [componentFilters, store]);
+
+  const toggleFilterIsEnabled = useCallback(
+    (componentFilter: ComponentFilter, isEnabled: boolean) => {
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          // $FlowFixMe TODO (filters)
+          cloned[index] = {
+            ...cloned[index],
+            isEnabled,
+          };
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  return {
+    addFilter,
+    changeFilterType,
+    componentFilters,
+    removeFilter,
+    saveFilters,
+    toggleFilterIsEnabled,
+    updateFilterValueElementType,
+    updateFilterValueRegExp,
+  };
+}
diff --git a/src/devtools/views/Components/ComponentFiltersModalContext.js b/src/devtools/views/Components/ComponentFiltersModalContext.js
new file mode 100644
index 000000000000..6d2c46452a3d
--- /dev/null
+++ b/src/devtools/views/Components/ComponentFiltersModalContext.js
@@ -0,0 +1,37 @@
+// @flow
+
+import React, { createContext, useMemo, useState } from 'react';
+
+type Context = {|
+  isModalShowing: boolean,
+  setIsModalShowing: (value: boolean) => void,
+|};
+
+const ComponentFiltersModalContext = createContext<Context>(
+  ((null: any): Context)
+);
+ComponentFiltersModalContext.displayName = 'ComponentFiltersModalContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ComponentFiltersModalContextController({ children }: Props) {
+  const [isModalShowing, setIsModalShowing] = useState(false);
+
+  const value = useMemo(
+    () => ({
+      isModalShowing,
+      setIsModalShowing,
+    }),
+    [isModalShowing]
+  );
+
+  return (
+    <ComponentFiltersModalContext.Provider value={value}>
+      {children}
+    </ComponentFiltersModalContext.Provider>
+  );
+}
+
+export { ComponentFiltersModalContext, ComponentFiltersModalContextController };
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
new file mode 100644
index 000000000000..626849203049
--- /dev/null
+++ b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
@@ -0,0 +1,42 @@
+// @flow
+
+import React, { useContext, useMemo } from 'react';
+import { useSubscription } from '../hooks';
+import { ComponentFiltersModalContext } from './ComponentFiltersModalContext';
+import { StoreContext } from '../context';
+import Toggle from '../Toggle';
+import ButtonIcon from '../ButtonIcon';
+import Store from 'src/devtools/store';
+
+export default function ToggleCommitFilterModalButton() {
+  const store = useContext(StoreContext);
+
+  const { isModalShowing, setIsModalShowing } = useContext(
+    ComponentFiltersModalContext
+  );
+
+  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+  // If necessary, we could support this- but it doesn't seem like a necessary use case.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.isProfiling,
+      subscribe: (callback: Function) => {
+        store.addListener('isProfiling', callback);
+        return () => store.removeListener('isProfiling', callback);
+      },
+    }),
+    [store]
+  );
+  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
+
+  return (
+    <Toggle
+      isChecked={isModalShowing}
+      isDisabled={isProfiling}
+      onChange={setIsModalShowing}
+      title="Filter preferences"
+    >
+      <ButtonIcon type="filter" />
+    </Toggle>
+  );
+}
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 98b9b858700a..3ce44f0828c4 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -1,4 +1,5 @@
 .Tree {
+  position: relative;
   height: 100%;
   width: 100%;
   display: flex;
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 0a96f163b0ca..8c3c4031f7d6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -18,6 +18,9 @@ import ElementView from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
+import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
+import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
+import ComponentFiltersModal from './ComponentFiltersModal';
 
 import styles from './Tree.css';
 
@@ -269,42 +272,47 @@ export default function Tree(props: Props) {
   );
 
   return (
-    <div className={styles.Tree} ref={treeRef}>
-      <div className={styles.SearchInput}>
-        <InspectHostNodesToggle />
-        <div className={styles.VRule} />
-        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
+    <ComponentFiltersModalContextController>
+      <div className={styles.Tree} ref={treeRef}>
+        <div className={styles.SearchInput}>
+          <InspectHostNodesToggle />
+          <div className={styles.VRule} />
+          {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
+          <div className={styles.VRule} />
+          <ToggleComponentFiltersModalButton />
+        </div>
+        <div
+          className={styles.AutoSizerWrapper}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onKeyPress={handleKeyPress}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          ref={focusTargetRef}
+          tabIndex={0}
+        >
+          <AutoSizer>
+            {({ height, width }) => (
+              // $FlowFixMe https://github.com/facebook/flow/issues/7341
+              <FixedSizeList
+                className={styles.List}
+                height={height}
+                innerElementType={InnerElementType}
+                itemCount={numElements}
+                itemData={itemData}
+                itemSize={lineHeight}
+                overscanCount={3}
+                ref={listRef}
+                width={width}
+              >
+                {ElementView}
+              </FixedSizeList>
+            )}
+          </AutoSizer>
+        </div>
+        <ComponentFiltersModal />
       </div>
-      <div
-        className={styles.AutoSizerWrapper}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        onKeyPress={handleKeyPress}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        ref={focusTargetRef}
-        tabIndex={0}
-      >
-        <AutoSizer>
-          {({ height, width }) => (
-            // $FlowFixMe https://github.com/facebook/flow/issues/7341
-            <FixedSizeList
-              className={styles.List}
-              height={height}
-              innerElementType={InnerElementType}
-              itemCount={numElements}
-              itemData={itemData}
-              itemSize={lineHeight}
-              overscanCount={3}
-              ref={listRef}
-              width={width}
-            >
-              {ElementView}
-            </FixedSizeList>
-          )}
-        </AutoSizer>
-      </div>
-    </div>
+    </ComponentFiltersModalContextController>
   );
 }
 
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 082d3ec7b1d8..a8be6b0f6ccf 100644
--- a/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -18,7 +18,7 @@ export default function ClearProfilingDataButton() {
       onClick={clear}
       title="Clear profiling data"
     >
-      <ButtonIcon type="cancel" />
+      <ButtonIcon type="clear" />
     </Button>
   );
 }
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index cc4faeff5131..645ee254223c 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { useCallback, useContext, useMemo } from 'react';
-import { ElementTypeHostComponent } from 'src/types';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
@@ -10,8 +9,6 @@ import portaledContent from '../portaledContent';
 
 import styles from './Settings.css';
 
-import type { FilterPreferences } from 'src/types';
-
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
@@ -46,49 +43,6 @@ function Settings(_: {||}) {
     collapseNodesByDefaultSubscription
   );
 
-  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
-  // If necessary, we could support this- but it doesn't seem like a necessary use case.
-  const isProfilingSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.isProfiling,
-      subscribe: (callback: Function) => {
-        store.addListener('isProfiling', callback);
-        return () => store.removeListener('isProfiling', callback);
-      },
-    }),
-    [store]
-  );
-  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
-
-  const filterPreferencesSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.filterPreferences,
-      subscribe: (callback: Function) => {
-        store.addListener('filterPreferences', callback);
-        return () => store.removeListener('filterPreferences', callback);
-      },
-    }),
-    [store]
-  );
-  const filterPreferences = useSubscription<FilterPreferences, Store>(
-    filterPreferencesSubscription
-  );
-
-  const updateFilterPreferences = useCallback(
-    ({ currentTarget }) => {
-      const filterPreferences = store.filterPreferences;
-      if (currentTarget.checked) {
-        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
-      } else {
-        filterPreferences.hideElementsWithTypes.delete(
-          ElementTypeHostComponent
-        );
-      }
-      store.filterPreferences = { ...filterPreferences };
-    },
-    [store]
-  );
-
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
       setDisplayDensity(currentTarget.value);
@@ -189,18 +143,6 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
-
-        <label className={styles.CheckboxOption}>
-          <input
-            type="checkbox"
-            checked={filterPreferences.hideElementsWithTypes.has(
-              ElementTypeHostComponent
-            )}
-            disabled={isProfiling}
-            onChange={updateFilterPreferences}
-          />{' '}
-          Hide host components (e.g. <code>&lt;div&gt;</code>)
-        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 0cc5dfb9a4fc..e6f0ffbe8069 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -247,6 +247,11 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
   updateStyleHelper(theme, 'color-text-selected', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
+  updateStyleHelper(theme, 'color-toggle-text', documentElements);
+  updateStyleHelper(theme, 'color-toggle-text', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index ca0582a1710c..296d7dd1a3e9 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -48,6 +48,10 @@
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-selected: #ffffff;
+  --light-color-toggle-background-invalid: #fc3a4b;
+  --light-color-toggle-background-on: #0088fa;
+  --light-color-toggle-background-off: #cfd1d5;
+  --light-color-toggle-text: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
 
@@ -96,6 +100,10 @@
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
   --dark-color-text-selected: #ffffff;
+  --dark-color-toggle-background-invalid: #fc3a4b;
+  --dark-color-toggle-background-on: #178fb9;
+  --dark-color-toggle-background-off: #777d88;
+  --dark-color-toggle-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
   --dark-color-tooltip-text: #000000;
 
diff --git a/src/types.js b/src/types.js
index b1af981fdeef..fdcac1139553 100644
--- a/src/types.js
+++ b/src/types.js
@@ -13,7 +13,7 @@ export type Wall = {|
 |};
 
 // WARNING
-// The values below are referenced by FilterPreferences (which is saved via localStorage).
+// The values below are referenced by ComponentFilters (which are saved via localStorage).
 // Do not change them or it will break previously saved user customizations.
 // If new element types are added, use new numbers rather than re-ordering existing ones.
 export const ElementTypeClass = 1;
@@ -34,15 +34,33 @@ export const ElementTypeSuspense = 12;
 // or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export type FilterPreferences = {|
-  // Hide all elements of types in this Set.
-  // We hide host components only by default.
-  hideElementsWithTypes: Set<ElementType>,
+// WARNING
+// The values below are referenced by ComponentFilters (which are saved via localStorage).
+// Do not change them or it will break previously saved user customizations.
+// If new filter types are added, use new numbers rather than re-ordering existing ones.
+export const ComponentFilterElementType = 1;
+export const ComponentFilterDisplayName = 2;
+export const ComponentFilterPath = 3;
 
-  // Hide all elements with displayNames matching one or more of the RegExps in this Set.
-  hideElementsWithDisplayNames: Set<RegExp>,
+export type FilterType = 1 | 2 | 3;
 
-  // Hide all elements within paths matching one or more of the RegExps in this Set.
-  // This filter is only used for elements that include debug source location.
-  hideElementsWithPaths: Set<RegExp>,
+// Hide all elements of types in this Set.
+// We hide host components only by default.
+export type ElementTypeComponentFilter = {|
+  isEnabled: boolean,
+  type: 1,
+  value: ElementType,
 |};
+
+// Hide all elements with displayNames or paths matching one or more of the RegExps in this Set.
+// Path filters are only used when elements include debug source location.
+export type RegExpComponentFilter = {|
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 2 | 3,
+  value: string,
+|};
+
+export type ComponentFilter =
+  | ElementTypeComponentFilter
+  | RegExpComponentFilter;
diff --git a/src/utils.js b/src/utils.js
index 0e5caa2c93fd..1200687434ad 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -2,9 +2,9 @@
 
 import LRU from 'lru-cache';
 import { LOCAL_STORAGE_FILTER_PREFERENCES_KEY } from './constants';
-import { ElementTypeHostComponent } from './types';
+import { ComponentFilterElementType, ElementTypeHostComponent } from './types';
 
-import type { FilterPreferences } from './types';
+import type { ComponentFilter } from './types';
 
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -81,65 +81,34 @@ function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
 
-export function getDefaultFilterPreferences(): FilterPreferences {
-  return {
-    hideElementsWithTypes: new Set([ElementTypeHostComponent]),
-    hideElementsWithDisplayNames: new Set(),
-    hideElementsWithPaths: new Set(),
-  };
+// TODO (filters) Save the filters as the frontend needs them (an array, with type and "enabled" status)
+// Convert the fitlers to Sets for the renderer to consume.
+
+export function getDefaultComponentFilters(): Array<ComponentFilter> {
+  return [
+    {
+      type: ComponentFilterElementType,
+      value: ElementTypeHostComponent,
+      isEnabled: true,
+    },
+  ];
 }
 
-function getSavedFilterPreferencesFilter(key, value) {
-  if (typeof value === 'string' && value.indexOf('__REGEXP__') === 0) {
-    const match = value.substr(9).match(/\/(.*)\/(.*)?/);
-    return new RegExp(match[1], match[2] || '');
-  }
-  return value;
-}
-
-export function getSavedFilterPreferences(): FilterPreferences {
-  const raw = localStorage.getItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
-  if (raw != null) {
-    const json = JSON.parse(raw, getSavedFilterPreferencesFilter);
-    return {
-      hideElementsWithTypes: new Set(json.hideElementsWithTypes),
-      hideElementsWithDisplayNames: new Set(
-        json.hideElementsWithDisplayNames.map(source => new RegExp(source))
-      ),
-      hideElementsWithPaths: new Set(
-        json.hideElementsWithPaths.map(source => new RegExp(source))
-      ),
-    };
-  } else {
-    return getDefaultFilterPreferences();
-  }
-}
-
-function saveFilterPreferencesFilter(key, value) {
-  if (value instanceof RegExp) {
-    return '__REGEXP__' + value.toString();
-  }
-  return value;
+export function getSavedComponentFilters(): Array<ComponentFilter> {
+  try {
+    const raw = localStorage.getItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return getDefaultComponentFilters();
 }
 
-export function saveFilterPreferences(
-  filterPreferences: FilterPreferences
+export function saveComponentFilters(
+  componentFilters: Array<ComponentFilter>
 ): void {
   localStorage.setItem(
     LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
-    JSON.stringify(
-      {
-        hideElementsWithTypes: Array.from(
-          filterPreferences.hideElementsWithTypes
-        ),
-        hideElementsWithDisplayNames: Array.from(
-          filterPreferences.hideElementsWithDisplayNames
-        ),
-        hideElementsWithPaths: Array.from(
-          filterPreferences.hideElementsWithPaths
-        ),
-      },
-      saveFilterPreferencesFilter
-    )
+    JSON.stringify(componentFilters)
   );
 }

From 540207901d4af2ed894b76b6693f9d9c84f2711a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 13:31:55 -0700
Subject: [PATCH 527/814] Added some component filtering tests

---
 babel.config.js                               |   1 +
 package.json                                  |   1 +
 .../storeComponentFilters-test.js.snap        |  98 +++++++++
 src/__tests__/storeComponentFilters-test.js   | 191 ++++++++++++++++++
 src/backend/renderer.js                       |   9 +-
 .../Components/ComponentFiltersModal.css      |   2 +-
 .../views/Components/ComponentFiltersModal.js |   8 +-
 src/types.js                                  |   2 +-
 yarn.lock                                     |  15 ++
 9 files changed, 318 insertions(+), 9 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
 create mode 100644 src/__tests__/storeComponentFilters-test.js

diff --git a/babel.config.js b/babel.config.js
index 59bfbc27e23a..12a0e78baf99 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -29,6 +29,7 @@ module.exports = api => {
     plugins: [
       ['@babel/plugin-transform-flow-strip-types'],
       ['@babel/plugin-proposal-class-properties', { loose: false }],
+      ['@babel/plugin-transform-react-jsx-source'],
     ],
     presets: [
       ['@babel/preset-env', { targets }],
diff --git a/package.json b/package.json
index 4becfc24d1cc..7bf761f93bcc 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
diff --git a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
new file mode 100644
index 000000000000..86dbf043da8c
--- /dev/null
+++ b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store component filters should filter by display name: 1: mount 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+  ▾ <Bar>
+      <Text>
+  ▾ <Baz>
+      <Text>
+`;
+
+exports[`Store component filters should filter by display name: 2: filter "Foo" 1`] = `
+[root]
+    <Text>
+  ▾ <Bar>
+      <Text>
+  ▾ <Baz>
+      <Text>
+`;
+
+exports[`Store component filters should filter by display name: 3: filter "Ba" 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+    <Text>
+    <Text>
+`;
+
+exports[`Store component filters should filter by display name: 4: filter "B.z" 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+  ▾ <Bar>
+      <Text>
+    <Text>
+`;
+
+exports[`Store component filters should filter by path: 1: mount 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;
+
+exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+      <div>
+`;
+
+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `
+[root]
+  ▾ <Root>
+      <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component>
+          <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `
+[root]
+  ▾ <Root>
+      <Component>
+`;
+
+exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `
+[root]
+  ▾ <div>
+    ▾ <Component>
+        <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `
+[root]
+  ▾ <div>
+      <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component>
+          <div>
+`;
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
new file mode 100644
index 000000000000..547bb3c8010d
--- /dev/null
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -0,0 +1,191 @@
+// @flow
+
+describe('Store component filters', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let Types;
+  let store;
+
+  const createElementTypeFilter = (elementType, isEnabled = true) => ({
+    type: Types.ComponentFilterElementType,
+    isEnabled,
+    value: elementType,
+  });
+
+  const createDisplayNameFilter = (source, isEnabled = true) => {
+    let isValid = true;
+    try {
+      new RegExp(source);
+    } catch (error) {
+      isValid = false;
+    }
+    return {
+      type: Types.ComponentFilterDisplayName,
+      isEnabled,
+      isValid,
+      value: source,
+    };
+  };
+
+  const createLocationFilter = (source, isEnabled = true) => {
+    let isValid = true;
+    try {
+      new RegExp(source);
+    } catch (error) {
+      isValid = false;
+    }
+    return {
+      type: Types.ComponentFilterLocation,
+      isEnabled,
+      isValid,
+      value: source,
+    };
+  };
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.componentFilters = [];
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+    Types = require('src/types');
+  });
+
+  it('should support filtering by element type', () => {
+    class Root extends React.Component<{| children: React$Node |}> {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(
+        <Root>
+          <Component />
+        </Root>,
+        document.createElement('div')
+      )
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createElementTypeFilter(Types.ElementTypeHostComponent),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('2: hide host components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createElementTypeFilter(Types.ElementTypeClass),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('3: hide class components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createElementTypeFilter(Types.ElementTypeClass),
+          createElementTypeFilter(Types.ElementTypeFunction),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('4: hide class and function components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createElementTypeFilter(Types.ElementTypeClass, false),
+          createElementTypeFilter(Types.ElementTypeFunction, false),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('5: disable all filters');
+  });
+
+  it('should ignore invalid ElementTypeRoot filter', () => {
+    const Root = () => <div>Hi</div>;
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createElementTypeFilter(Types.ElementTypeRoot),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('2: add invalid filter');
+  });
+
+  it('should filter by display name', () => {
+    const Text = ({ label }) => label;
+    const Foo = () => <Text label="foo" />;
+    const Bar = () => <Text label="bar" />;
+    const Baz = () => <Text label="baz" />;
+
+    act(() =>
+      ReactDOM.render(
+        <React.Fragment>
+          <Foo />
+          <Bar />
+          <Baz />
+        </React.Fragment>,
+        document.createElement('div')
+      )
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => (store.componentFilters = [createDisplayNameFilter('Foo')]));
+    expect(store).toMatchSnapshot('2: filter "Foo"');
+
+    act(() => (store.componentFilters = [createDisplayNameFilter('Ba')]));
+    expect(store).toMatchSnapshot('3: filter "Ba"');
+
+    act(() => (store.componentFilters = [createDisplayNameFilter('B.z')]));
+    expect(store).toMatchSnapshot('4: filter "B.z"');
+  });
+
+  it('should filter by path', () => {
+    const Component = () => <div>Hi</div>;
+
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createLocationFilter(__filename.replace(__dirname, '')),
+        ])
+    );
+
+    expect(store).toMatchSnapshot(
+      '2: hide all components declared within this test filed'
+    );
+
+    act(
+      () =>
+        (store.componentFilters = [
+          createLocationFilter('this:is:a:made:up:path'),
+        ])
+    );
+
+    expect(store).toMatchSnapshot('3: hide components in a made up fake path');
+  });
+});
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 403f6277c967..cce0c7c6a7f5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -4,7 +4,7 @@ import { gte } from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
-  ComponentFilterPath,
+  ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeEventComponent,
@@ -290,7 +290,7 @@ export function attach(
         case ComponentFilterElementType:
           hideElementsWithTypes.add(componentFilter.value);
           break;
-        case ComponentFilterPath:
+        case ComponentFilterLocation:
           if (componentFilter.isValid && componentFilter.value !== '') {
             hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));
           }
@@ -354,6 +354,9 @@ export function attach(
       case HostText:
       case Fragment:
         return true;
+      case HostRoot:
+        // It is never valid to filter the root element.
+        return false;
       default:
         const typeSymbol = getTypeSymbol(type);
 
@@ -383,7 +386,7 @@ export function attach(
       }
     }
 
-    if (_debugSource !== null && hideElementsWithPaths.size > 0) {
+    if (_debugSource != null && hideElementsWithPaths.size > 0) {
       const { fileName } = _debugSource;
       for (let pathRegExp of hideElementsWithPaths) {
         if (pathRegExp.test(fileName)) {
diff --git a/src/devtools/views/Components/ComponentFiltersModal.css b/src/devtools/views/Components/ComponentFiltersModal.css
index 1e16c7e3dec5..43107c0c92f6 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.css
+++ b/src/devtools/views/Components/ComponentFiltersModal.css
@@ -66,7 +66,7 @@
 }
 
 .Input {
-  border: none;
+  border: 1px solid var(--color-border);
   border-radius: 0.125rem;
   padding: 0.125rem;
 }
diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
index e7a29f4e585a..6ff939292d55 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -17,7 +17,7 @@ import Store from 'src/devtools/store';
 import {
   ComponentFilterElementType,
   ComponentFilterDisplayName,
-  ComponentFilterPath,
+  ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeEventTarget,
@@ -164,9 +164,9 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                       )
                     }
                   >
-                    <option value={ComponentFilterElementType}>type</option>
+                    <option value={ComponentFilterLocation}>location</option>
                     <option value={ComponentFilterDisplayName}>name</option>
-                    <option value={ComponentFilterPath}>path</option>
+                    <option value={ComponentFilterElementType}>type</option>
                   </select>
                 </td>
                 <td className={styles.TableCell}>
@@ -295,7 +295,7 @@ function useComponentFilters() {
             }: ElementTypeComponentFilter);
           } else if (
             type === ComponentFilterDisplayName ||
-            type === ComponentFilterPath
+            type === ComponentFilterLocation
           ) {
             // $FlowFixMe TODO (filters)
             cloned[index] = ({
diff --git a/src/types.js b/src/types.js
index fdcac1139553..7e38c7a4e5c0 100644
--- a/src/types.js
+++ b/src/types.js
@@ -40,7 +40,7 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 // If new filter types are added, use new numbers rather than re-ordering existing ones.
 export const ComponentFilterElementType = 1;
 export const ComponentFilterDisplayName = 2;
-export const ComponentFilterPath = 3;
+export const ComponentFilterLocation = 3;
 
 export type FilterType = 1 | 2 | 3;
 
diff --git a/yarn.lock b/yarn.lock
index 2aee4bbdbde7..6ed41c6740af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -383,6 +383,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
+  integrity sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
@@ -605,6 +612,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.0.0"
 
+"@babel/plugin-transform-react-jsx-source@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz#20c8c60f0140f5dd3cd63418d452801cf3f7180f"
+  integrity sha512-A32OkKTp4i5U6aE88GwwcuV4HAprUgHcTq0sSafLxjr6AW0QahrCRCjxogkbbcdtpbXkuTOlgpjophCxb6sh5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
 "@babel/plugin-transform-react-jsx@^7.0.0":
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.1.6.tgz#e6188e7d2a2dcd2796d45a87f8b0a8c906f57d1a"

From e45deb5471ac8ec836635d9949fb6557dcec6a93 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 13:59:54 -0700
Subject: [PATCH 528/814] Removed $FlowFixMe comments

---
 .../views/Components/ComponentFiltersModal.js | 99 +++++++++++--------
 src/utils.js                                  |  3 -
 2 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
index 6ff939292d55..a23e1af8f553 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -159,8 +159,7 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                     onChange={({ currentTarget }) =>
                       changeFilterType(
                         componentFilter,
-                        // $FlowFixMe TODO (filters)
-                        parseInt(currentTarget.value, 10)
+                        ((parseInt(currentTarget.value, 10): any): FilterType)
                       )
                     }
                   >
@@ -182,8 +181,10 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                       onChange={({ currentTarget }) =>
                         updateFilterValueElementType(
                           componentFilter,
-                          // $FlowFixMe TODO (filters)
-                          parseInt(currentTarget.value, 10)
+                          ((parseInt(
+                            currentTarget.value,
+                            10
+                          ): any): ElementType)
                         )
                       }
                     >
@@ -287,23 +288,25 @@ function useComponentFilters() {
         const index = componentFilters.indexOf(componentFilter);
         if (index >= 0) {
           if (type === ComponentFilterElementType) {
-            // $FlowFixMe TODO (filters)
-            cloned[index] = ({
-              type,
+            cloned[index] = {
+              type: ComponentFilterElementType,
               isEnabled: componentFilter.isEnabled,
               value: ElementTypeHostComponent,
-            }: ElementTypeComponentFilter);
-          } else if (
-            type === ComponentFilterDisplayName ||
-            type === ComponentFilterLocation
-          ) {
-            // $FlowFixMe TODO (filters)
-            cloned[index] = ({
-              type,
+            };
+          } else if (type === ComponentFilterDisplayName) {
+            cloned[index] = {
+              type: ComponentFilterDisplayName,
               isEnabled: componentFilter.isEnabled,
               isValid: true,
               value: '',
-            }: RegExpComponentFilter);
+            };
+          } else if (type === ComponentFilterLocation) {
+            cloned[index] = {
+              type: ComponentFilterLocation,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            };
           }
         }
         return cloned;
@@ -320,13 +323,14 @@ function useComponentFilters() {
 
       setComponentFilters(componentFilters => {
         const cloned: Array<ComponentFilter> = [...componentFilters];
-        const index = componentFilters.indexOf(componentFilter);
-        if (index >= 0) {
-          // $FlowFixMe TODO (filters)
-          cloned[index] = {
-            ...componentFilter,
-            value,
-          };
+        if (componentFilter.type === ComponentFilterElementType) {
+          const index = componentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            cloned[index] = {
+              ...componentFilter,
+              value,
+            };
+          }
         }
         return cloned;
       });
@@ -342,20 +346,24 @@ function useComponentFilters() {
 
       setComponentFilters(componentFilters => {
         const cloned: Array<ComponentFilter> = [...componentFilters];
-        const index = componentFilters.indexOf(componentFilter);
-        if (index >= 0) {
-          let isValid = true;
-          try {
-            new RegExp(value);
-          } catch (error) {
-            isValid = false;
+        if (
+          componentFilter.type === ComponentFilterDisplayName ||
+          componentFilter.type === ComponentFilterLocation
+        ) {
+          const index = componentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            let isValid = true;
+            try {
+              new RegExp(value);
+            } catch (error) {
+              isValid = false;
+            }
+            cloned[index] = {
+              ...componentFilter,
+              isValid,
+              value,
+            };
           }
-          // $FlowFixMe TODO (filters)
-          cloned[index] = {
-            ...componentFilter,
-            isValid,
-            value,
-          };
         }
         return cloned;
       });
@@ -381,11 +389,20 @@ function useComponentFilters() {
         const cloned: Array<ComponentFilter> = [...componentFilters];
         const index = componentFilters.indexOf(componentFilter);
         if (index >= 0) {
-          // $FlowFixMe TODO (filters)
-          cloned[index] = {
-            ...cloned[index],
-            isEnabled,
-          };
+          if (componentFilter.type === ComponentFilterElementType) {
+            cloned[index] = {
+              ...((cloned[index]: any): ElementTypeComponentFilter),
+              isEnabled,
+            };
+          } else if (
+            componentFilter.type === ComponentFilterDisplayName ||
+            componentFilter.type === ComponentFilterLocation
+          ) {
+            cloned[index] = {
+              ...((cloned[index]: any): RegExpComponentFilter),
+              isEnabled,
+            };
+          }
         }
         return cloned;
       });
diff --git a/src/utils.js b/src/utils.js
index 1200687434ad..499a72bb1dbc 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -81,9 +81,6 @@ function toCodePoint(string: string) {
   return string.codePointAt(0);
 }
 
-// TODO (filters) Save the filters as the frontend needs them (an array, with type and "enabled" status)
-// Convert the fitlers to Sets for the renderer to consume.
-
 export function getDefaultComponentFilters(): Array<ComponentFilter> {
   return [
     {

From e6da4b9058987611018e64309225c38566516dff Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 14:01:03 -0700
Subject: [PATCH 529/814] Renamed FilterType -> ComponentFilterType

---
 src/devtools/views/Components/ComponentFiltersModal.js | 9 ++++++---
 src/types.js                                           | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
index a23e1af8f553..45e00b7ff43a 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -33,9 +33,9 @@ import styles from './ComponentFiltersModal.css';
 
 import type {
   ComponentFilter,
+  ComponentFilterType,
   ElementType,
   ElementTypeComponentFilter,
-  FilterType,
   RegExpComponentFilter,
 } from 'src/types';
 
@@ -159,7 +159,10 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                     onChange={({ currentTarget }) =>
                       changeFilterType(
                         componentFilter,
-                        ((parseInt(currentTarget.value, 10): any): FilterType)
+                        ((parseInt(
+                          currentTarget.value,
+                          10
+                        ): any): ComponentFilterType)
                       )
                     }
                   >
@@ -282,7 +285,7 @@ function useComponentFilters() {
   }, []);
 
   const changeFilterType = useCallback(
-    (componentFilter: ComponentFilter, type: FilterType) => {
+    (componentFilter: ComponentFilter, type: ComponentFilterType) => {
       setComponentFilters(componentFilters => {
         const cloned: Array<ComponentFilter> = [...componentFilters];
         const index = componentFilters.indexOf(componentFilter);
diff --git a/src/types.js b/src/types.js
index 7e38c7a4e5c0..7f89612cc73b 100644
--- a/src/types.js
+++ b/src/types.js
@@ -42,7 +42,7 @@ export const ComponentFilterElementType = 1;
 export const ComponentFilterDisplayName = 2;
 export const ComponentFilterLocation = 3;
 
-export type FilterType = 1 | 2 | 3;
+export type ComponentFilterType = 1 | 2 | 3;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.

From 4a4786ac2faaa558a4bb32a51cf6eaedcefb2cdc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 14:18:20 -0700
Subject: [PATCH 530/814] Misc cleanup

---
 src/__tests__/storeComponentFilters-test.js   |  7 +++++
 src/backend/renderer.js                       | 30 ++++++++++---------
 src/devtools/views/ButtonIcon.js              | 14 ---------
 .../views/Settings/SettingsContext.js         |  1 -
 src/devtools/views/hooks.js                   |  2 +-
 5 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 547bb3c8010d..8f408f49f77f 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -61,6 +61,13 @@ describe('Store component filters', () => {
     Types = require('src/types');
   });
 
+  it('should throw if filters are updated while profiling', () => {
+    act(() => store.startProfiling());
+    expect(() => (store.componentFilters = [])).toThrow(
+      'Cannot modify filter preferences while profiling'
+    );
+  });
+
   it('should support filtering by element type', () => {
     class Root extends React.Component<{| children: React$Node |}> {
       render() {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cce0c7c6a7f5..6b79b1221061 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -306,7 +306,7 @@ export function attach(
 
   applyComponentFilters(getSavedComponentFilters());
 
-  // TODO (filter) Should we make this operation more efficient?
+  // If necessary, we can revisit optimizing this operation.
   // For example, we could add a new recursive unmount tree operation.
   // The unmount operations are already significantly smaller than mount opreations though.
   // This is something to keep in mind for later.
@@ -317,7 +317,7 @@ export function attach(
       throw Error('Cannot modify filter preferences while profiling');
     }
 
-    // Recursively unmount and then re-mount all roots.
+    // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
       unmountFiberChildrenRecursively(root.current);
@@ -372,16 +372,18 @@ export function attach(
         }
     }
 
-    const elementType = getTypeForFiber(fiber);
+    const elementType = getElementTypeForFiber(fiber);
     if (hideElementsWithTypes.has(elementType)) {
       return true;
     }
 
     if (hideElementsWithDisplayNames.size > 0) {
-      const displayName = getDisplayNameForFiber(fiber) || '';
-      for (let displayNameRegExp of hideElementsWithDisplayNames) {
-        if (displayNameRegExp.test(displayName)) {
-          return true;
+      const displayName = getDisplayNameForFiber(fiber);
+      if (displayName != null) {
+        for (let displayNameRegExp of hideElementsWithDisplayNames) {
+          if (displayNameRegExp.test(displayName)) {
+            return true;
+          }
         }
       }
     }
@@ -473,14 +475,14 @@ export function attach(
           case CONTEXT_PROVIDER_SYMBOL_STRING:
             // 16.3.0 exposed the context object as "context"
             // PR #12501 changed it to "_context" for 16.3.1+
-            // NOTE Keep in sync with inspectElement()
+            // NOTE Keep in sync with inspectElementRaw()
             resolvedContext = fiber.type._context || fiber.type.context;
             return `${resolvedContext.displayName || 'Context'}.Provider`;
           case CONTEXT_CONSUMER_NUMBER:
           case CONTEXT_CONSUMER_SYMBOL_STRING:
             // 16.3-16.5 read from "type" because the Consumer is the actual context object.
             // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
-            // NOTE Keep in sync with inspectElement()
+            // NOTE Keep in sync with inspectElementRaw()
             resolvedContext = fiber.type._context || fiber.type;
 
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
@@ -505,7 +507,7 @@ export function attach(
   }
 
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
-  function getTypeForFiber(fiber: Fiber): ElementType {
+  function getElementTypeForFiber(fiber: Fiber): ElementType {
     const { type, tag } = fiber;
 
     switch (tag) {
@@ -785,7 +787,7 @@ export function attach(
     } else {
       const { key } = fiber;
       const displayName = getDisplayNameForFiber(fiber);
-      const type = getTypeForFiber(fiber);
+      const elementType = getElementTypeForFiber(fiber);
       const { _debugOwner } = fiber;
 
       const ownerID =
@@ -796,7 +798,7 @@ export function attach(
       let keyStringID = getStringID(key);
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
-      pushOperation(type);
+      pushOperation(elementType);
       pushOperation(parentID);
       pushOperation(ownerID);
       pushOperation(displayNameStringID);
@@ -1645,7 +1647,7 @@ export function attach(
     ) {
       // 16.3-16.5 read from "type" because the Consumer is the actual context object.
       // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
-      // NOTE Keep in sync with get*ForFiber methods
+      // NOTE Keep in sync with getDisplayNameForFiber()
       const consumerResolvedContext = type._context || type;
 
       // Global context value.
@@ -1662,7 +1664,7 @@ export function attach(
         ) {
           // 16.3.0 exposed the context object as "context"
           // PR #12501 changed it to "_context" for 16.3.1+
-          // NOTE Keep in sync with get*ForFiber methods
+          // NOTE Keep in sync with getDisplayNameForFiber()
           const providerResolvedContext =
             currentType._context || currentType.context;
           if (providerResolvedContext === consumerResolvedContext) {
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 0e05ce771f41..6e67143f8941 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -25,8 +25,6 @@ export type IconType =
   | 'save'
   | 'search'
   | 'settings'
-  | 'toggle_off'
-  | 'toggle_on'
   | 'undo'
   | 'up'
   | 'view-dom'
@@ -103,12 +101,6 @@ export default function ButtonIcon({ className = '', type }: Props) {
     case 'settings':
       pathData = PATH_SETTINGS;
       break;
-    case 'toggle_off':
-      pathData = PATH_TOGGLE_OFF;
-      break;
-    case 'toggle_on':
-      pathData = PATH_TOGGLE_ON;
-      break;
     case 'undo':
       pathData = PATH_UNDO;
       break;
@@ -220,12 +212,6 @@ const PATH_SETTINGS = `
   .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
 `;
 
-const PATH_TOGGLE_OFF =
-  'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';
-
-const PATH_TOGGLE_ON =
-  'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';
-
 const PATH_UNDO = `
   M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
   3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index e6f0ffbe8069..0136c8bbc8c1 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -251,7 +251,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
   updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
   updateStyleHelper(theme, 'color-toggle-text', documentElements);
-  updateStyleHelper(theme, 'color-toggle-text', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index b9e7dfc0b4f1..c6d8ce098427 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -50,7 +50,7 @@ export function useLocalStorage<T>(
       console.log(error);
     }
     if (typeof initialValue === 'function') {
-      return (initialValue: any)();
+      return ((initialValue: any): () => T)();
     } else {
       return initialValue;
     }

From 83b521c7b472823548292480f7bff4d5bb6c5c1f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 May 2019 17:44:38 -0700
Subject: [PATCH 531/814] Updated Flamechart to support multiple nodes at root

---
 src/devtools/views/Profiler/CommitFlamegraph.js  | 16 +++++++++-------
 .../views/Profiler/CommitFlamegraphListItem.js   |  5 ++++-
 .../views/Profiler/FlamegraphChartBuilder.js     | 11 +++++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 84a1ca513452..881da0e77bc2 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -18,7 +18,7 @@ import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 export type ItemData = {|
   chartData: ChartData,
   scaleX: (value: number, fallbackValue: number) => number,
-  selectedChartNode: ChartNode,
+  selectedChartNode: ChartNode | null,
   selectedChartNodeIndex: number,
   selectFiber: (id: number | null, name: string | null) => void,
   width: number,
@@ -127,18 +127,20 @@ function CommitFlamegraph({
         chartNode => chartNode.id === selectedFiberID
       ): any): ChartNode);
     }
-    // The selected node might not be in the tree for this commit,
-    // so it's important that we have a fallback plan.
-    if (chartNode == null) {
-      return chartData.rows[0][0];
-    }
     return chartNode;
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);
 
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
-      scaleX: scale(0, selectedChartNode.treeBaseDuration, 0, width),
+      scaleX: scale(
+        0,
+        selectedChartNode !== null
+          ? selectedChartNode.treeBaseDuration
+          : chartData.baseDuration,
+        0,
+        width
+      ),
       selectedChartNode,
       selectedChartNodeIndex,
       selectFiber,
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 8d55d781b091..171ebebb45f8 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -41,7 +41,10 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
 
   const row = rows[index];
 
-  let selectedNodeOffset = scaleX(selectedChartNode.offset, width);
+  let selectedNodeOffset = scaleX(
+    selectedChartNode !== null ? selectedChartNode.offset : 0,
+    width
+  );
 
   return (
     <Fragment>
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 8096972175d6..435c6f88062b 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -16,6 +16,7 @@ export type ChartNode = {|
 |};
 
 export type ChartData = {|
+  baseDuration: number,
   depth: number,
   idToDepthMap: Map<number, number>,
   maxSelfDuration: number,
@@ -108,10 +109,16 @@ export function getChartData({
     throw Error(`Could not find root node with id "${rootID}" in commit tree`);
   }
 
-  // TODO: Looks like there's an assumption here that a root has only one child. Is that so with a fragment in the root?
-  walkTree(root.children[0]);
+  // Don't assume a single root.
+  // Component filters or Fragments might lead to multiple "roots" in a flame graph.
+  let baseDuration = 0;
+  root.children.forEach(childID => {
+    const chartNode = walkTree(childID, baseDuration);
+    baseDuration += chartNode.treeBaseDuration;
+  });
 
   const chartData = {
+    baseDuration,
     depth: maxDepth,
     idToDepthMap,
     maxSelfDuration,

From 4e04907d13e8617dd38ce2f4f6c3c1ff031fed17 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 2 May 2019 10:53:40 -0700
Subject: [PATCH 532/814] Added badge for enabled filter count

---
 .../ToggleCommitFilterModalButton.css         |  8 ++++
 .../ToggleComponentFiltersModalButton.js      | 41 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/devtools/views/Components/ToggleCommitFilterModalButton.css

diff --git a/src/devtools/views/Components/ToggleCommitFilterModalButton.css b/src/devtools/views/Components/ToggleCommitFilterModalButton.css
new file mode 100644
index 000000000000..b53991b1e08f
--- /dev/null
+++ b/src/devtools/views/Components/ToggleCommitFilterModalButton.css
@@ -0,0 +1,8 @@
+.Wrapper {
+  display: flex;
+}
+
+.Label {
+  font-size: var(--font-size-sans-small);
+  font-family: var(--font-family-sans);
+}
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
index 626849203049..e3031b4e6029 100644
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+++ b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
@@ -8,6 +8,10 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import Store from 'src/devtools/store';
 
+import styles from './ToggleCommitFilterModalButton.css';
+
+import type { ComponentFilter } from 'src/types';
+
 export default function ToggleCommitFilterModalButton() {
   const store = useContext(StoreContext);
 
@@ -29,14 +33,47 @@ export default function ToggleCommitFilterModalButton() {
   );
   const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
 
+  const componentFiltersSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.componentFilters,
+      subscribe: (callback: Function) => {
+        store.addListener('componentFilters', callback);
+        return () => store.removeListener('componentFilters', callback);
+      },
+    }),
+    [store]
+  );
+  const componentFilters = useSubscription<Array<ComponentFilter>, Store>(
+    componentFiltersSubscription
+  );
+
+  const enabledCount = useMemo(
+    () =>
+      componentFilters.reduce(
+        (count, componentFilter) =>
+          componentFilter.isEnabled ? count + 1 : count,
+        0
+      ),
+    [componentFilters]
+  );
+
   return (
     <Toggle
       isChecked={isModalShowing}
       isDisabled={isProfiling}
       onChange={setIsModalShowing}
-      title="Filter preferences"
+      title={
+        enabledCount > 0
+          ? `Filter preferences (${enabledCount} enabled)`
+          : 'Filter preferences'
+      }
     >
-      <ButtonIcon type="filter" />
+      <div className={styles.Wrapper}>
+        <ButtonIcon type="filter" />
+        {enabledCount > 0 && (
+          <span className={styles.Label}>{enabledCount}</span>
+        )}
+      </div>
     </Toggle>
   );
 }

From d7447a8458c8196425e94ef746ba6c9d1be6f421 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 2 May 2019 15:12:57 -0700
Subject: [PATCH 533/814] Fixed bug in Store.getIndexOfElementID() that caused
 roots with multiple top-level children to return an incorrect item index

---
 src/__tests__/store-test.js | 87 +++++++++++++++++++++++++++++++++++++
 src/devtools/store.js       | 13 +++---
 2 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 067448426ca5..5942574a77ef 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -696,4 +696,91 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('4: toggle fallback on');
     });
   });
+
+  describe('getIndexOfElementID', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support a single root with a single child', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with one children each', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support a single root with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        )
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        );
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        );
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+  });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 6da87d3032a7..9c129d716217 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -429,12 +429,6 @@ export default class Store extends EventEmitter {
     let index = 0;
     while (true) {
       const current = ((this._idToElement.get(currentID): any): Element);
-      if (current.parentID === 0) {
-        // We found the root; stop crawling.
-        break;
-      }
-
-      index++;
 
       const { children } = current;
       for (let i = 0; i < children.length; i++) {
@@ -446,6 +440,13 @@ export default class Store extends EventEmitter {
         index += child.isCollapsed ? 1 : child.weight;
       }
 
+      if (current.parentID === 0) {
+        // We found the root; stop crawling.
+        break;
+      }
+
+      index++;
+
       previousID = current.id;
       currentID = current.parentID;
     }

From 4bf3ac19101c3273b205ed08f293795597485dee Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 2 May 2019 15:21:29 -0700
Subject: [PATCH 534/814] Fixed broken path-selection after filter changes

---
 src/backend/renderer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 8b22f623c7f3..b5a8557fbf18 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -327,6 +327,9 @@ export function attach(
 
     applyComponentFilters(componentFilters);
 
+    // Reset psuedo counters so that new path selections will be persisted.
+    rootDisplayNameCounter.clear();
+
     // Recursively re-mount all roots with new filter criteria applied.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));

From 7f4482e4388066373624bf1dd815386d3ceadd25 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 07:48:30 -0700
Subject: [PATCH 535/814] Removed optional_chaining from Flow config

---
 .flowconfig | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.flowconfig b/.flowconfig
index 00740cac4271..d613bab513a3 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -27,7 +27,6 @@ shells/dev/build/*
 [options]
 server.max_workers=4
 esproposal.class_instance_fields=enable
-esproposal.optional_chaining=enable
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
 suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore

From 868cf67aa48d9089151c8f00b95d75ca21269d94 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 07:56:24 -0700
Subject: [PATCH 536/814] Removed findCurrentFiberUsingSlowPath() in favor of
 findCurrentFiberUsingSlowPathById()

---
 src/backend/renderer.js | 44 ++++++++++++++---------------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b0a93dd46113..68b9ce548132 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1351,15 +1351,15 @@ export function attach(
     currentRootID = -1;
   }
 
-  function findAllCurrentHostFibers(parent: Fiber): $ReadOnlyArray<Fiber> {
+  function findAllCurrentHostFibers(id: number): $ReadOnlyArray<Fiber> {
     const fibers = [];
-    const currentParent = findCurrentFiberUsingSlowPath(parent);
-    if (!currentParent) {
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (!fiber) {
       return fibers;
     }
 
     // Next we'll drill down this component to find all HostComponent/Text.
-    let node: Fiber = currentParent;
+    let node: Fiber = fiber;
     while (true) {
       if (node.tag === HostComponent || node.tag === HostText) {
         fibers.push(node);
@@ -1368,11 +1368,11 @@ export function attach(
         node = node.child;
         continue;
       }
-      if (node === currentParent) {
+      if (node === fiber) {
         return fibers;
       }
       while (!node.sibling) {
-        if (!node.return || node.return === currentParent) {
+        if (!node.return || node.return === fiber) {
           return fibers;
         }
         node = node.return;
@@ -1402,7 +1402,7 @@ export function attach(
           fiber = maybeFallbackFiber;
         }
       }
-      const hostFibers = findAllCurrentHostFibers(fiber);
+      const hostFibers = findAllCurrentHostFibers(id);
       return hostFibers.map(hostFiber => hostFiber.stateNode).filter(Boolean);
     } catch (err) {
       // The fiber might have unmounted by now.
@@ -1465,7 +1465,13 @@ export function attach(
   // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
   // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
   // BEGIN copied code
-  function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
+  function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
+    const fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return null;
+    }
+
     let alternate = fiber.alternate;
     if (!alternate) {
       // If there is no alternate, then we only need to check if it is mounted.
@@ -1611,7 +1617,6 @@ export function attach(
 
   function selectElement(id: number): void {
     let fiber = idToFiberMap.get(id);
-
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -1645,7 +1650,6 @@ export function attach(
 
   function prepareViewElementSource(id: number): void {
     let fiber = idToFiberMap.get(id);
-
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -1668,18 +1672,8 @@ export function attach(
   }
 
   function inspectElementRaw(id: number): InspectedElement | null {
-    let fiber = idToFiberMap.get(id);
-
+    let fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
-      console.warn(`Could not find Fiber with id "${id}"`);
-      return null;
-    }
-
-    // Find the currently mounted version of this fiber (so we don't show the wrong props and state).
-    fiber = findCurrentFiberUsingSlowPath(fiber);
-
-    if (fiber == null) {
-      console.warn(`Could not find Fiber with id "${id}"`);
       return null;
     }
 
@@ -1862,14 +1856,6 @@ export function attach(
     }
   }
 
-  function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
-    const fiber = idToFiberMap.get(id);
-    if (fiber) {
-      return findCurrentFiberUsingSlowPath(fiber);
-    }
-    return null;
-  }
-
   function setInHook(
     id: number,
     index: number,

From 435e22ad1be514ce2ef844217aafb1ae57dd7eeb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 08:55:31 -0700
Subject: [PATCH 537/814] Fixed deploy script

---
 .gitignore                   |  1 +
 package.json                 |  7 ++++---
 shells/dev/index.html        |  5 +++--
 shells/dev/now.json          |  2 +-
 shells/dev/src/devtools.js   | 10 ++++++----
 shells/dev/webpack.config.js | 31 ++++++++++++++++++++++++-------
 6 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 85e420fd9f81..ef86dd7006f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 /shells/browser/firefox/*.xpi
 /shells/browser/firefox/*.pem
 /shells/browser/shared/build
+/shells/dev/dist
 build
 node_modules
 npm-debug.log
diff --git a/package.json b/package.json
index 7bf761f93bcc..479e7602417e 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     ]
   },
   "scripts": {
+    "build:demo": "cd ./shells/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
     "build:extension": "cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:dev": "cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:chrome": "cross-env NODE_ENV=production node ./shells/browser/chrome/build",
@@ -38,7 +39,7 @@
     "build:extension:firefox:dev": "cross-env NODE_ENV=development node ./shells/browser/firefox/build",
     "build:standalone": "cd packages/react-devtools-core && yarn run build",
     "deploy": "yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox",
-    "deploy:demo": "cd shells/dev/ && now deploy && now alias react-devtools-experimental",
+    "deploy:demo": "yarn run build:demo && cd shells/dev/ && now deploy && now alias react-devtools-experimental",
     "deploy:chrome": "node ./shells/browser/chrome/deploy",
     "deploy:firefox": "node ./shells/browser/firefox/deploy",
     "linc": "lint-staged",
@@ -47,8 +48,8 @@
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
-    "start": "cd ./shells/dev && cross-env NODE_ENV=development webpack-dev-server --open",
-    "start:prod": "cd ./shells/dev && cross-env NODE_ENV=production webpack-dev-server --open",
+    "start": "cd ./shells/dev && cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open",
+    "start:prod": "cd ./shells/dev && cross-env NODE_ENV=production cross-env TARGET=local webpack-dev-server --open",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",
diff --git a/shells/dev/index.html b/shells/dev/index.html
index 4f27aafc7aa0..f0252eee4dbd 100644
--- a/shells/dev/index.html
+++ b/shells/dev/index.html
@@ -61,7 +61,8 @@
     <div id="devtools"></div>
 
     <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
-    <!-- It's served by webpack dev server and doesn't exist on disk -->
-    <script src="devtools.js"></script>
+    <!-- In DEV mode, this file is served by the Webpack dev server -->
+    <!-- For production builds, it's built by Webpack and uploaded from the local file system -->
+    <script src="dist/devtools.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/shells/dev/now.json b/shells/dev/now.json
index 1ba53f408cbc..7c0805c3b165 100644
--- a/shells/dev/now.json
+++ b/shells/dev/now.json
@@ -1,5 +1,5 @@
 {
   "name": "react-devtools-experimental",
   "alias": ["react-devtools-experimental"],
-  "files": ["index.html", "build"]
+  "files": ["index.html", "dist"]
 }
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 82030b02eda4..d3de0e5d5ea1 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -38,7 +38,7 @@ mountButton.addEventListener('click', function() {
   }
 });
 
-inject('./app.js', () => {
+inject('dist/app.js', () => {
   initDevTools({
     connect(cb) {
       const bridge = new Bridge({
@@ -78,9 +78,11 @@ inject('./app.js', () => {
 
         // Initialize the backend only once the DevTools frontend Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
-        inject('./backend.js', () => {
-          // Clear noisy webpack "WDS: ..." output.
-          console.clear();
+        inject('dist/backend.js', () => {
+          if (__DEV__) {
+            // Clear noisy webpack "WDS: ..." output.
+            console.clear();
+          }
         });
       });
     },
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index dc2d0f7a240e..6738e1311746 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -8,20 +8,20 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
+const TARGET = process.env.TARGET;
+if (!TARGET) {
+  console.error('TARGET not set');
+  process.exit(1);
+}
+
 const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
-module.exports = {
+const config = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: false,
-  devServer: {
-    hot: true,
-    port: 8080,
-    clientLogLevel: 'warning',
-    stats: 'errors-only',
-  },
   entry: {
     app: './app/index.js',
     backend: './src/backend.js',
@@ -67,3 +67,20 @@ module.exports = {
     ],
   },
 };
+
+if (TARGET === 'local') {
+  config.devServer = {
+    hot: true,
+    port: 8080,
+    clientLogLevel: 'warning',
+    publicPath: '/dist/',
+    stats: 'errors-only',
+  };
+} else {
+  config.output = {
+    path: resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  };
+}
+
+module.exports = config;

From e71bda525799341e5f10200922760259b29a87fb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 09:21:26 -0700
Subject: [PATCH 538/814] Right-align flame graph children

---
 .../views/Profiler/FlamegraphChartBuilder.js  | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 435c6f88062b..dd6dc8f827d7 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -49,11 +49,7 @@ export function getChartData({
   let maxSelfDuration = 0;
 
   // Generate flame graph structure using tree base durations.
-  const walkTree = (
-    id: number,
-    parentOffset: number = 0,
-    currentDepth: number = 1
-  ) => {
+  const walkTree = (id: number, rightOffset: number, currentDepth: number) => {
     idToDepthMap.set(id, currentDepth);
 
     const node = nodes.get(id);
@@ -61,12 +57,14 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
+    const { children, displayName, key, treeBaseDuration } = node;
+
     const actualDuration = actualDurations.get(id) || 0;
     const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
     const didRender = actualDurations.has(id);
 
-    const name = node.displayName || 'Unknown';
-    const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
+    const name = displayName || 'Unknown';
+    const maybeKey = key !== null ? ` key="${key}"` : '';
 
     let label = `${name}${maybeKey}`;
     if (didRender) {
@@ -84,9 +82,9 @@ export function getChartData({
       id,
       label,
       name,
-      offset: parentOffset,
+      offset: rightOffset - treeBaseDuration,
       selfDuration,
-      treeBaseDuration: node.treeBaseDuration,
+      treeBaseDuration,
     };
 
     if (currentDepth > rows.length) {
@@ -95,10 +93,11 @@ export function getChartData({
       rows[currentDepth - 1].push(chartNode);
     }
 
-    node.children.forEach(childID => {
-      const childChartNode = walkTree(childID, parentOffset, currentDepth + 1);
-      parentOffset += childChartNode.treeBaseDuration;
-    });
+    for (let i = children.length - 1; i >= 0; i--) {
+      const childID = children[i];
+      const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);
+      rightOffset -= childChartNode.treeBaseDuration;
+    }
 
     return chartNode;
   };
@@ -112,10 +111,15 @@ export function getChartData({
   // Don't assume a single root.
   // Component filters or Fragments might lead to multiple "roots" in a flame graph.
   let baseDuration = 0;
-  root.children.forEach(childID => {
-    const chartNode = walkTree(childID, baseDuration);
-    baseDuration += chartNode.treeBaseDuration;
-  });
+  for (let i = root.children.length - 1; i >= 0; i--) {
+    const id = root.children[i];
+    const node = nodes.get(id);
+    if (node == null) {
+      throw Error(`Could not find node with id "${id}" in commit tree`);
+    }
+    baseDuration += node.treeBaseDuration;
+    walkTree(id, baseDuration, 1);
+  }
 
   const chartData = {
     baseDuration,

From 8585ee37dbfeb795ba4b7fc1f879af92fbb475dc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 09:30:48 -0700
Subject: [PATCH 539/814] Renamed assertOneMap -> assertEmptyMap

---
 src/devtools/store.js | 48 ++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index abb0d69b348a..5774292da225 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -190,33 +190,35 @@ export default class Store extends EventEmitter {
     this._profilingCache = new ProfilingCache(bridge, this);
   }
 
+  // This is only used in tests to avoid memory leaks.
   assertEmptyMaps() {
-    // This is only used in tests to avoid memory leaks.
-    const assertOneMap = (mapName, map) => {
-      if (map.size !== 0) {
-        throw new Error(
-          `Expected ${mapName} to be empty, got ${
-            map.size
-          }: ${require('util').inspect(this, { depth: 20 })}`
-        );
-      }
-    };
-    assertOneMap('_idToElement', this._idToElement);
-    assertOneMap('_ownersMap', this._ownersMap);
-    assertOneMap(
-      '_profilingOperationsByRootID',
-      this._profilingOperationsByRootID
+    this.assertEmptyMap(this._idToElement, '_idToElement');
+    this.assertEmptyMap(this._ownersMap, '_ownersMap');
+    this.assertEmptyMap(
+      this._profilingOperationsByRootID,
+      '_profilingOperationsByRootID'
     );
-    assertOneMap(
-      '_profilingScreenshotsByRootID',
-      this._profilingScreenshotsByRootID
+    this.assertEmptyMap(
+      this._profilingScreenshotsByRootID,
+      '_profilingScreenshotsByRootID'
     );
-    assertOneMap(
-      '_profilingSnapshotsByElementID',
-      this._profilingSnapshotsByElementID
+    this.assertEmptyMap(
+      this._profilingSnapshotsByElementID,
+      '_profilingSnapshotsByElementID'
     );
-    assertOneMap('_rootIDToCapabilities', this._rootIDToCapabilities);
-    assertOneMap('_rootIDToRendererID', this._rootIDToRendererID);
+    this.assertEmptyMap(this._rootIDToCapabilities, '_rootIDToCapabilities');
+    this.assertEmptyMap(this._rootIDToRendererID, '_rootIDToRendererID');
+  }
+
+  // This is only used in tests to avoid memory leaks.
+  assertEmptyMap(map: Map<any, any>, mapName: string) {
+    if (map.size !== 0) {
+      throw new Error(
+        `Expected ${mapName} to be empty, got ${
+          map.size
+        }: ${require('util').inspect(this, { depth: 20 })}`
+      );
+    }
   }
 
   get captureScreenshots(): boolean {

From a552b7b5f799ef2893d9fd9d5461d569917e4f33 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 10:12:45 -0700
Subject: [PATCH 540/814] Only clear Profiling snapshot on root-unmount

---
 src/devtools/store.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5774292da225..a0c4e90b5ca5 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -921,13 +921,6 @@ export default class Store extends EventEmitter {
               throw new Error(`Node ${id} was removed before its children.`);
             }
 
-            // The following call depends on `getElementByID`
-            // which depends on the element being in `_idToElement`,
-            // so we have to do it before removing the element from `_idToElement`.
-            this._clearProfilingSnapshotRecursive(id);
-
-            this._idToElement.delete(id);
-
             let parentElement = null;
             if (parentID === 0) {
               if (__DEBUG__) {
@@ -941,6 +934,11 @@ export default class Store extends EventEmitter {
               this._profilingOperationsByRootID.delete(id);
               this._profilingScreenshotsByRootID.delete(id);
 
+              // The following call depends on `getElementByID`
+              // which depends on the element being in `_idToElement`,
+              // so we have to do it before removing the element from `_idToElement`.
+              this._clearProfilingSnapshotRecursive(id);
+
               haveRootsChanged = true;
             } else {
               if (__DEBUG__) {
@@ -956,6 +954,8 @@ export default class Store extends EventEmitter {
               parentElement.children.splice(index, 1);
             }
 
+            this._idToElement.delete(id);
+
             this._adjustParentTreeWeight(parentElement, -weight);
             removedElementIDs.set(id, parentID);
 

From a8ed95445c56be24e0200f315c44904aadac28ea Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 14:59:20 -0700
Subject: [PATCH 541/814] Store profiler snapshot data by root (and clear on
 root unmount)

---
 src/backend/renderer.js                       | 75 +++++++++++--------
 src/devtools/store.js                         | 63 +++++++---------
 .../views/Profiler/CommitTreeBuilder.js       | 22 ++++--
 .../Profiler/ProfilingImportExportButtons.js  |  4 +-
 src/devtools/views/Profiler/types.js          |  2 +-
 5 files changed, 89 insertions(+), 77 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 68b9ce548132..4917a51d8948 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -651,7 +651,8 @@ export function attach(
   let pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<Uint32Array> | null = [];
   let pendingStringTable: Map<string, number> = new Map();
-  let pendingStringTableLength = 0;
+  let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: number | null = null;
 
   function pushOperation(op: number): void {
     if (__DEV__) {
@@ -669,7 +670,8 @@ export function attach(
     if (
       pendingOperations.length === 0 &&
       pendingRealUnmountedIDs.length === 0 &&
-      pendingSimulatedUnmountedIDs.length === 0
+      pendingSimulatedUnmountedIDs.length === 0 &&
+      pendingUnmountedRootID === null
     ) {
       // If we're currently profiling, send an "operations" method even if there are no mutations to the tree.
       // The frontend needs this no-op info to know how to reconstruct the tree for each commit,
@@ -679,17 +681,21 @@ export function attach(
       }
     }
 
+    const numUnmountIDs =
+      pendingRealUnmountedIDs.length +
+      pendingSimulatedUnmountedIDs.length +
+      (pendingUnmountedRootID === null ? 0 : 1);
+
     const ops = new Uint32Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
       // How big is the string table?
       1 + // [stringTableLength]
-      // Then goes the actual string table.
-      pendingStringTableLength +
-      // All unmounts are batched in a single message.
-      2 + // [TREE_OPERATION_REMOVE, removedIDLength]
-        pendingRealUnmountedIDs.length +
-        pendingSimulatedUnmountedIDs.length +
+        // Then goes the actual string table.
+        pendingStringTableLength +
+        // All unmounts are batched in a single message.
+        // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
+        (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
         // Regular operations
         pendingOperations.length
     );
@@ -699,7 +705,7 @@ export function attach(
     // Which in turn enables fiber props, states, and hooks to be inspected.
     let i = 0;
     ops[i++] = rendererID;
-    ops[i++] = getFiberID(getPrimaryFiber(root.current));
+    ops[i++] = currentRootID; // Use this ID in case the root was unmounted!
 
     // Now fill in the string table.
     // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
@@ -710,24 +716,30 @@ export function attach(
       i += key.length;
     });
 
-    // All unmounts except roots are batched in a single message.
-    ops[i++] = TREE_OPERATION_REMOVE;
-    // The first number is how many unmounted IDs we're gonna send.
-    ops[i++] =
-      pendingRealUnmountedIDs.length + pendingSimulatedUnmountedIDs.length;
-    // Fill in the real unmounts in the reverse order.
-    // They were inserted parents-first by React, but we want children-first.
-    // So we traverse our array backwards.
-    for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
-      ops[i++] = pendingRealUnmountedIDs[j];
-    }
-    // Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
-    // (We want children to go before parents.)
-    // They go *after* the real unmounts because we know for sure they won't be
-    // children of already pushed "real" IDs. If they were, we wouldn't be able
-    // to discover them during the traversal, as they would have been deleted.
-    ops.set(pendingSimulatedUnmountedIDs, i);
-    i += pendingSimulatedUnmountedIDs.length;
+    if (numUnmountIDs > 0) {
+      // All unmounts except roots are batched in a single message.
+      ops[i++] = TREE_OPERATION_REMOVE;
+      // The first number is how many unmounted IDs we're gonna send.
+      ops[i++] = numUnmountIDs;
+      // Fill in the real unmounts in the reverse order.
+      // They were inserted parents-first by React, but we want children-first.
+      // So we traverse our array backwards.
+      for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
+        ops[i++] = pendingRealUnmountedIDs[j];
+      }
+      // Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
+      // (We want children to go before parents.)
+      // They go *after* the real unmounts because we know for sure they won't be
+      // children of already pushed "real" IDs. If they were, we wouldn't be able
+      // to discover them during the traversal, as they would have been deleted.
+      ops.set(pendingSimulatedUnmountedIDs, i);
+      i += pendingSimulatedUnmountedIDs.length;
+      // The root ID should always be unmounted last.
+      if (pendingUnmountedRootID !== null) {
+        ops[i] = pendingUnmountedRootID;
+        i++;
+      }
+    }
     // Fill in the rest of the operations.
     ops.set(pendingOperations, i);
 
@@ -747,6 +759,7 @@ export function attach(
     pendingOperations.length = 0;
     pendingRealUnmountedIDs.length = 0;
     pendingSimulatedUnmountedIDs.length = 0;
+    pendingUnmountedRootID = null;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
   }
@@ -858,11 +871,9 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      // Removing a root needs to happen at the end
-      // so we don't batch it with other unmounts.
-      pushOperation(TREE_OPERATION_REMOVE);
-      pushOperation(1); // Remove one item
-      pushOperation(id);
+      // Roots must be removed only after all children (pending and simultated) have been removed.
+      // So we track it separately.
+      pendingUnmountedRootID = id;
     } else if (!shouldFilterFiber(fiber)) {
       // To maintain child-first ordering,
       // we'll push it into one of these queues,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index a0c4e90b5ca5..832170271795 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -3,6 +3,7 @@
 import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
+import { inspect } from 'util';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
@@ -106,9 +107,9 @@ export default class Store extends EventEmitter {
   // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
   // to reconstruct the state of each root for each commit.
   // It's okay to use a single root to store this information because node IDs are unique across all roots.
-  _profilingSnapshotsByElementID: Map<
+  _profilingSnapshotsByRootID: Map<
     number,
-    ProfilingSnapshotNode
+    Map<number, ProfilingSnapshotNode>
   > = new Map();
 
   // Incremented each time the store is mutated.
@@ -203,8 +204,8 @@ export default class Store extends EventEmitter {
       '_profilingScreenshotsByRootID'
     );
     this.assertEmptyMap(
-      this._profilingSnapshotsByElementID,
-      '_profilingSnapshotsByElementID'
+      this._profilingSnapshotsByRootID,
+      '_profilingSnapshotsByRootID'
     );
     this.assertEmptyMap(this._rootIDToCapabilities, '_rootIDToCapabilities');
     this.assertEmptyMap(this._rootIDToRendererID, '_rootIDToRendererID');
@@ -214,9 +215,9 @@ export default class Store extends EventEmitter {
   assertEmptyMap(map: Map<any, any>, mapName: string) {
     if (map.size !== 0) {
       throw new Error(
-        `Expected ${mapName} to be empty, got ${
-          map.size
-        }: ${require('util').inspect(this, { depth: 20 })}`
+        `Expected ${mapName} to be empty, got ${map.size}: ${inspect(map, {
+          depth: 20,
+        })}`
       );
     }
   }
@@ -290,7 +291,7 @@ export default class Store extends EventEmitter {
     this._importedProfilingData = value;
     this._profilingOperationsByRootID = new Map();
     this._profilingScreenshotsByRootID = new Map();
-    this._profilingSnapshotsByElementID = new Map();
+    this._profilingSnapshotsByRootID = new Map();
     this._profilingCache.invalidate();
 
     this.emit('importedProfilingData');
@@ -316,8 +317,8 @@ export default class Store extends EventEmitter {
     return this._profilingScreenshotsByRootID;
   }
 
-  get profilingSnapshot(): Map<number, ProfilingSnapshotNode> {
-    return this._profilingSnapshotsByElementID;
+  get profilingSnapshots(): Map<number, Map<number, ProfilingSnapshotNode>> {
+    return this._profilingSnapshotsByRootID;
   }
 
   get revision(): number {
@@ -348,7 +349,7 @@ export default class Store extends EventEmitter {
     this._importedProfilingData = null;
     this._profilingOperationsByRootID = new Map();
     this._profilingScreenshotsByRootID = new Map();
-    this._profilingSnapshotsByElementID = new Map();
+    this._profilingSnapshotsByRootID = new Map();
 
     // Invalidate suspense cache if profiling data is being (re-)recorded.
     // Note that we clear now because any existing data is "stale".
@@ -415,10 +416,8 @@ export default class Store extends EventEmitter {
 
   getElementByID(id: number): Element | null {
     const element = this._idToElement.get(id);
-
     if (element == null) {
       console.warn(`No element found with id "${id}"`);
-
       return null;
     }
 
@@ -687,26 +686,22 @@ export default class Store extends EventEmitter {
     THROTTLE_CAPTURE_SCREENSHOT_DURATION
   );
 
-  _takeProfilingSnapshotRecursive = (elementID: number) => {
+  _takeProfilingSnapshotRecursive = (
+    elementID: number,
+    profilingSnapshot: Map<number, ProfilingSnapshotNode>
+  ) => {
     const element = this.getElementByID(elementID);
     if (element !== null) {
-      this._profilingSnapshotsByElementID.set(elementID, {
+      profilingSnapshot.set(elementID, {
         id: elementID,
         children: element.children.slice(0),
         displayName: element.displayName,
         key: element.key,
       });
 
-      element.children.forEach(this._takeProfilingSnapshotRecursive);
-    }
-  };
-
-  _clearProfilingSnapshotRecursive = (elementID: number) => {
-    const element = this.getElementByID(elementID);
-    if (element !== null) {
-      this._profilingSnapshotsByElementID.delete(elementID);
-
-      element.children.forEach(this._clearProfilingSnapshotRecursive);
+      element.children.forEach(childID =>
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshot)
+      );
     }
   };
 
@@ -921,6 +916,8 @@ export default class Store extends EventEmitter {
               throw new Error(`Node ${id} was removed before its children.`);
             }
 
+            this._idToElement.delete(id);
+
             let parentElement = null;
             if (parentID === 0) {
               if (__DEBUG__) {
@@ -933,11 +930,7 @@ export default class Store extends EventEmitter {
 
               this._profilingOperationsByRootID.delete(id);
               this._profilingScreenshotsByRootID.delete(id);
-
-              // The following call depends on `getElementByID`
-              // which depends on the element being in `_idToElement`,
-              // so we have to do it before removing the element from `_idToElement`.
-              this._clearProfilingSnapshotRecursive(id);
+              this._profilingSnapshotsByRootID.delete(id);
 
               haveRootsChanged = true;
             } else {
@@ -954,8 +947,6 @@ export default class Store extends EventEmitter {
               parentElement.children.splice(index, 1);
             }
 
-            this._idToElement.delete(id);
-
             this._adjustParentTreeWeight(parentElement, -weight);
             removedElementIDs.set(id, parentID);
 
@@ -1051,8 +1042,12 @@ export default class Store extends EventEmitter {
       this._importedProfilingData = null;
       this._profilingOperationsByRootID = new Map();
       this._profilingScreenshotsByRootID = new Map();
-      this._profilingSnapshotsByElementID = new Map();
-      this.roots.forEach(this._takeProfilingSnapshotRecursive);
+      this._profilingSnapshotsByRootID = new Map();
+      this.roots.forEach(rootID => {
+        const profilingSnapshot = new Map();
+        this._profilingSnapshotsByRootID.set(rootID, profilingSnapshot);
+        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshot);
+      });
     }
 
     if (this._isProfiling !== isProfiling) {
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index b9bf40650a88..93f8bbcc85fa 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -15,6 +15,7 @@ import type { ElementType } from 'src/types';
 import type {
   CommitTreeFrontend,
   CommitTreeNodeFrontend,
+  ProfilingSnapshotNode,
   ProfilingSummaryFrontend,
 } from 'src/devtools/views/Profiler/types';
 
@@ -66,13 +67,23 @@ export function getCommitTree({
   if (commitIndex === 0) {
     const nodes = new Map();
 
+    const { importedProfilingData } = store;
+    const profilingSnapshot =
+      importedProfilingData != null
+        ? importedProfilingData.profilingSnapshots.get(rootID)
+        : store.profilingSnapshots.get(rootID);
+
+    if (profilingSnapshot == null) {
+      throw Error(`Could not find profiling snapshot for root "${rootID}"`);
+    }
+
     // Construct the initial tree.
     recursivelyInitializeTree(
       rootID,
       0,
       nodes,
       profilingSummary.initialTreeBaseDurations,
-      store
+      profilingSnapshot
     );
 
     // Mutate the tree
@@ -122,13 +133,8 @@ function recursivelyInitializeTree(
   parentID: number,
   nodes: Map<number, CommitTreeNodeFrontend>,
   initialTreeBaseDurations: Map<number, number>,
-  store: Store
+  profilingSnapshot: Map<number, ProfilingSnapshotNode>
 ): void {
-  const { importedProfilingData } = store;
-  const profilingSnapshot =
-    importedProfilingData != null
-      ? importedProfilingData.profilingSnapshot
-      : store.profilingSnapshot;
   const node = profilingSnapshot.get(id);
   if (node != null) {
     nodes.set(id, {
@@ -146,7 +152,7 @@ function recursivelyInitializeTree(
         id,
         nodes,
         initialTreeBaseDurations,
-        store
+        profilingSnapshot
       )
     );
   }
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index a6c0b14b2b37..fd6d5820a82e 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -37,7 +37,7 @@ export default function ProfilingImportExportButtons() {
     const queue = [rootID];
     while (queue.length) {
       const id = queue.pop();
-      profilingSnapshotForRoot.push([id, store.profilingSnapshot.get(id)]);
+      profilingSnapshotForRoot.push([id, store.profilingSnapshots.get(id)]);
     }
 
     bridge.send('exportProfilingSummary', {
@@ -51,7 +51,7 @@ export default function ProfilingImportExportButtons() {
     rendererID,
     rootID,
     store.profilingOperations,
-    store.profilingSnapshot,
+    store.profilingSnapshots,
   ]);
 
   const uploadData = useCallback(() => {
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 2cb024f808da..0da7a9922543 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -65,7 +65,7 @@ export type ProfilingSnapshotNode = {|
 export type ImportedProfilingData = {|
   version: number,
   profilingOperations: Map<number, Array<Uint32Array>>,
-  profilingSnapshot: Map<number, ProfilingSnapshotNode>,
+  profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
   commitDetails: CommitDetailsFrontend,
   interactions: InteractionsFrontend,
   profilingSummary: ProfilingSummaryFrontend,

From f7c8e3a05c9dd4f32891f563efa4307dc1333f5a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 May 2019 15:01:26 -0700
Subject: [PATCH 542/814] Experimenting with profiler tests

---
 package.json                                  |   2 +
 .../__snapshots__/profiler-test.js.snap       | 105 +++++++++++++++---
 src/__tests__/profiler-test.js                |  85 ++++++++++++--
 src/__tests__/profilingSummarySerializer.js   |  29 +++++
 src/__tests__/setupTests.js                   |  10 +-
 yarn.lock                                     |  10 ++
 6 files changed, 217 insertions(+), 24 deletions(-)
 create mode 100644 src/__tests__/profilingSummarySerializer.js

diff --git a/package.json b/package.json
index 479e7602417e..0c42947e5c0f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
       "<rootDir>/src/__tests__/setupTests"
     ],
     "snapshotSerializers": [
+      "<rootDir>/src/__tests__/profilingSummarySerializer",
       "<rootDir>/src/__tests__/storeSerializer"
     ],
     "testMatch": [
@@ -134,6 +135,7 @@
     "react-color": "^2.11.7",
     "react-dom": "0.0.0-fb28e9048",
     "react-is": "0.0.0-fb28e9048",
+    "react-test-renderer": "0.0.0-fb28e9048",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
diff --git a/src/__tests__/__snapshots__/profiler-test.js.snap b/src/__tests__/__snapshots__/profiler-test.js.snap
index dade7370b5be..3c68497cada7 100644
--- a/src/__tests__/__snapshots__/profiler-test.js.snap
+++ b/src/__tests__/__snapshots__/profiler-test.js.snap
@@ -1,31 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 1: mount 1`] = `
+exports[`Profiler should clean up after a root has been unmounted: 1: mount 1`] = `
 [root]
-  ▸ <Parent key="A">
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
 [root]
-  ▸ <Parent key="B">
+  ▾ <Parent key="B">
+      <Child key="0">
+      <Child key="1">
 `;
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 2: profiling started 1`] = `
+exports[`Profiler should clean up after a root has been unmounted: 2: profiling started 1`] = `
 [root]
-  ▸ <Parent key="A">
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
 [root]
-  ▸ <Parent key="B">
+  ▾ <Parent key="B">
+      <Child key="0">
+      <Child key="1">
 `;
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 3: update 1`] = `
+exports[`Profiler should clean up after a root has been unmounted: 3: update 1`] = `
 [root]
-  ▸ <Parent key="A">
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
 [root]
-  ▸ <Parent key="B">
+  ▾ <Parent key="B">
+      <Child key="0">
 `;
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 4: unmount B 1`] = `
+exports[`Profiler should clean up after a root has been unmounted: 4: unmount B 1`] = `
 [root]
-  ▸ <Parent key="A">
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
 `;
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 5: unmount A 1`] = ``;
+exports[`Profiler should clean up after a root has been unmounted: 5: unmount A 1`] = ``;
 
-exports[`Profiler should start and stop profiling, handle root unmounting: 6: profiling stopped 1`] = ``;
+exports[`Profiler should clean up after a root has been unmounted: 6: profiling stopped 1`] = ``;
+
+exports[`Profiler should collect basic profiling metrics: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`Profiler should collect basic profiling metrics: 2: add child 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+`;
+
+exports[`Profiler should collect basic profiling metrics: 3: remove children 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`Profiler should collect basic profiling metrics: 4: profiling stopped 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`Profiler should collect basic profiling metrics: ProfilingSummary 1`] = `
+{
+  "rootID": 1,
+  "commitDurations": [
+    0,
+    1
+  ],
+  "commitTimes": [
+    0,
+    1
+  ],
+  "initialTreeBaseDurations": [
+    [
+      1,
+      0
+    ],
+    [
+      2,
+      1
+    ],
+    [
+      3,
+      2
+    ],
+    [
+      4,
+      3
+    ]
+  ],
+  "interactionCount": 0
+}
+`;
diff --git a/src/__tests__/profiler-test.js b/src/__tests__/profiler-test.js
index 28be905d05c4..98c1172ae34a 100644
--- a/src/__tests__/profiler-test.js
+++ b/src/__tests__/profiler-test.js
@@ -3,7 +3,9 @@
 describe('Profiler', () => {
   let React;
   let ReactDOM;
+  let TestRenderer;
   let TestUtils;
+  let agent;
   let store;
 
   const act = (callback: Function) => {
@@ -13,15 +15,88 @@ describe('Profiler', () => {
     jest.runAllTimers(); // Flush Bridge operations
   };
 
+  const renderAndResolve = async (root, element) => {
+    // $FlowFixMe Flow doens't know about "await act()" yet
+    await TestUtils.act(async () => {
+      root.update(element);
+
+      // Resolve pending suspense promises
+      jest.runAllTimers();
+    });
+
+    // Re-render after resolved promises
+    jest.runAllTimers();
+  };
+
   beforeEach(() => {
+    agent = global.agent;
     store = global.store;
+    store.collapseNodesByDefault = false;
 
     React = require('react');
     ReactDOM = require('react-dom');
     TestUtils = require('react-dom/test-utils');
+
+    // Hide the hook before requiring TestRenderer, so we don't end up with a loop.
+    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    TestRenderer = require('react-test-renderer');
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+  });
+
+  it('should collect basic profiling metrics', async done => {
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
+    const Child = () => {
+      jest.advanceTimersByTime(1);
+      return null;
+    };
+
+    const container = document.createElement('div');
+
+    act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => store.startProfiling());
+
+    act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
+    expect(store).toMatchSnapshot('2: add child');
+
+    act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
+    expect(store).toMatchSnapshot('3: remove children');
+
+    act(() => store.stopProfiling());
+    expect(store).toMatchSnapshot('4: profiling stopped');
+
+    let profilingSummary;
+    function Suspender({ rendererID, rootID }) {
+      profilingSummary = store.profilingCache.ProfilingSummary.read({
+        rendererID,
+        rootID,
+      });
+      return null;
+    }
+
+    // HACK There's only one renderer for this test
+    const rendererID = Object.keys(agent._rendererInterfaces)[0];
+    const rootID = store.roots[0];
+
+    let root = TestRenderer.create();
+    await renderAndResolve(
+      root,
+      <React.Suspense fallback={null}>
+        <Suspender rendererID={rendererID} rootID={rootID} />
+      </React.Suspense>
+    );
+
+    // HACK root.toTree() doesn't handle Suspense yet
+    // but Jest serializer wouldn't work with a JSON string
+    expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
+
+    done();
   });
 
-  it('should start and stop profiling, handle root unmounting', async () => {
+  it('should clean up after a root has been unmounted', async () => {
     const Parent = ({ count }) =>
       new Array(count).fill(true).map((_, index) => <Child key={index} />);
     const Child = () => <div>Hi!</div>;
@@ -35,9 +110,7 @@ describe('Profiler', () => {
     });
     expect(store).toMatchSnapshot('1: mount');
 
-    act(() => {
-      store.startProfiling();
-    });
+    act(() => store.startProfiling());
     expect(store).toMatchSnapshot('2: profiling started');
 
     act(() => {
@@ -52,9 +125,7 @@ describe('Profiler', () => {
     act(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(store).toMatchSnapshot('5: unmount A');
 
-    act(() => {
-      store.stopProfiling();
-    });
+    act(() => store.stopProfiling());
     expect(store).toMatchSnapshot('6: profiling stopped');
   });
 });
diff --git a/src/__tests__/profilingSummarySerializer.js b/src/__tests__/profilingSummarySerializer.js
new file mode 100644
index 000000000000..45e8477dfd02
--- /dev/null
+++ b/src/__tests__/profilingSummarySerializer.js
@@ -0,0 +1,29 @@
+// test() is part of Jest's serializer API
+export function test(maybeProfilingSummary) {
+  return (
+    typeof maybeProfilingSummary === 'object' &&
+    maybeProfilingSummary !== null &&
+    typeof maybeProfilingSummary.rootID === 'number' &&
+    Array.isArray(maybeProfilingSummary.commitDurations) &&
+    Array.isArray(maybeProfilingSummary.commitTimes) &&
+    typeof maybeProfilingSummary.initialTreeBaseDurations === 'object' &&
+    maybeProfilingSummary.initialTreeBaseDurations !== null &&
+    typeof maybeProfilingSummary.interactionCount === 'number'
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(profilingSummary, serialize, indent) {
+  return JSON.stringify(
+    {
+      ...profilingSummary,
+      commitDurations: profilingSummary.commitDurations.map((_, i) => i),
+      commitTimes: profilingSummary.commitTimes.map((_, i) => i),
+      initialTreeBaseDurations: [
+        ...profilingSummary.initialTreeBaseDurations,
+      ].map(([id, _], index) => [id, index]),
+    },
+    null,
+    2
+  );
+}
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index ce96ed2b486b..b498a014fd20 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -8,10 +8,6 @@ import { installHook } from 'src/hook';
 
 const env = jasmine.getEnv();
 env.beforeEach(() => {
-  // It's important to reset modules between test runs;
-  // Without this, ReactDOM won't re-inject itself into the new hook.
-  jest.resetModules();
-
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
 
@@ -55,4 +51,10 @@ env.beforeEach(() => {
 });
 env.afterEach(() => {
   delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // It's important to reset modules between test runs;
+  // Without this, ReactDOM won't re-inject itself into the new hook.
+  // It's also important to reset after tests, rather than before,
+  // so that we don't disconnect the ReactCurrentDispatcher ref.
+  jest.resetModules();
 });
diff --git a/yarn.lock b/yarn.lock
index 6ed41c6740af..32a0156b37ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9837,6 +9837,16 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-test-renderer@0.0.0-fb28e9048:
+  version "0.0.0-fb28e9048"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-fb28e9048.tgz#1a94c8d19cbb1ac98ab37c66c0b294e5be280c52"
+  integrity sha512-WK/wQOh0v6+8Gbkurgb3he9hKoOKWueqQY+RFs2vM3u3vn7PMyYhzm/KkU75VvTG/GVciojNQBHBpekuvU5dYw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "0.0.0-fb28e9048"
+    scheduler "0.0.0-fb28e9048"
+
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"

From dd96b3314cf0ec0ad50d38d9348b591068c492c5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 4 May 2019 09:36:13 -0700
Subject: [PATCH 543/814] Cleaned up tests a bit. Profiling test uses mock
 timers now.

---
 .../__snapshots__/profiler-test.js.snap       | 110 ---------------
 .../__snapshots__/profiling-test.js.snap      |  61 ++++++++
 src/__tests__/profiler-test.js                | 131 ------------------
 src/__tests__/profiling-test.js               | 108 +++++++++++++++
 src/__tests__/profilingSummarySerializer.js   |   6 +-
 src/__tests__/store-test.js                   |   8 +-
 src/__tests__/storeOwners-test.js             |  11 +-
 src/__tests__/storeSerializer.js              |   6 +-
 src/__tests__/storeStressSync-test.js         |  11 +-
 .../storeStressTestConcurrent-test.js         |  12 +-
 src/__tests__/utils.js                        |  66 +++++++++
 src/devtools/store.js                         |  55 +++++---
 12 files changed, 286 insertions(+), 299 deletions(-)
 delete mode 100644 src/__tests__/__snapshots__/profiler-test.js.snap
 create mode 100644 src/__tests__/__snapshots__/profiling-test.js.snap
 delete mode 100644 src/__tests__/profiler-test.js
 create mode 100644 src/__tests__/profiling-test.js
 create mode 100644 src/__tests__/utils.js

diff --git a/src/__tests__/__snapshots__/profiler-test.js.snap b/src/__tests__/__snapshots__/profiler-test.js.snap
deleted file mode 100644
index 3c68497cada7..000000000000
--- a/src/__tests__/__snapshots__/profiler-test.js.snap
+++ /dev/null
@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Profiler should clean up after a root has been unmounted: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`Profiler should clean up after a root has been unmounted: 2: profiling started 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`Profiler should clean up after a root has been unmounted: 3: update 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
-`;
-
-exports[`Profiler should clean up after a root has been unmounted: 4: unmount B 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
-`;
-
-exports[`Profiler should clean up after a root has been unmounted: 5: unmount A 1`] = ``;
-
-exports[`Profiler should clean up after a root has been unmounted: 6: profiling stopped 1`] = ``;
-
-exports[`Profiler should collect basic profiling metrics: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`Profiler should collect basic profiling metrics: 2: add child 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-`;
-
-exports[`Profiler should collect basic profiling metrics: 3: remove children 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-`;
-
-exports[`Profiler should collect basic profiling metrics: 4: profiling stopped 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-`;
-
-exports[`Profiler should collect basic profiling metrics: ProfilingSummary 1`] = `
-{
-  "rootID": 1,
-  "commitDurations": [
-    0,
-    1
-  ],
-  "commitTimes": [
-    0,
-    1
-  ],
-  "initialTreeBaseDurations": [
-    [
-      1,
-      0
-    ],
-    [
-      2,
-      1
-    ],
-    [
-      3,
-      2
-    ],
-    [
-      4,
-      3
-    ]
-  ],
-  "interactionCount": 0
-}
-`;
diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
new file mode 100644
index 000000000000..a1e084986e51
--- /dev/null
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`profiling profilingSummary should be collected for each commit: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`profiling profilingSummary should be collected for each commit: 2: add child 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+`;
+
+exports[`profiling profilingSummary should be collected for each commit: 3: remove children 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`profiling profilingSummary should be collected for each commit: 4: profiling stopped 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`profiling profilingSummary should be collected for each commit: ProfilingSummary 1`] = `
+{
+  "rootID": 1,
+  "commitDurations": [
+    16,
+    12
+  ],
+  "commitTimes": [
+    16,
+    28
+  ],
+  "initialTreeBaseDurations": [
+    [
+      1,
+      14
+    ],
+    [
+      2,
+      14
+    ],
+    [
+      3,
+      2
+    ],
+    [
+      4,
+      2
+    ]
+  ],
+  "interactionCount": 0
+}
+`;
diff --git a/src/__tests__/profiler-test.js b/src/__tests__/profiler-test.js
deleted file mode 100644
index 98c1172ae34a..000000000000
--- a/src/__tests__/profiler-test.js
+++ /dev/null
@@ -1,131 +0,0 @@
-// @flow
-
-describe('Profiler', () => {
-  let React;
-  let ReactDOM;
-  let TestRenderer;
-  let TestUtils;
-  let agent;
-  let store;
-
-  const act = (callback: Function) => {
-    TestUtils.act(() => {
-      callback();
-    });
-    jest.runAllTimers(); // Flush Bridge operations
-  };
-
-  const renderAndResolve = async (root, element) => {
-    // $FlowFixMe Flow doens't know about "await act()" yet
-    await TestUtils.act(async () => {
-      root.update(element);
-
-      // Resolve pending suspense promises
-      jest.runAllTimers();
-    });
-
-    // Re-render after resolved promises
-    jest.runAllTimers();
-  };
-
-  beforeEach(() => {
-    agent = global.agent;
-    store = global.store;
-    store.collapseNodesByDefault = false;
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
-
-    // Hide the hook before requiring TestRenderer, so we don't end up with a loop.
-    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    TestRenderer = require('react-test-renderer');
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
-  });
-
-  it('should collect basic profiling metrics', async done => {
-    const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
-    const Child = () => {
-      jest.advanceTimersByTime(1);
-      return null;
-    };
-
-    const container = document.createElement('div');
-
-    act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
-    expect(store).toMatchSnapshot('1: mount');
-
-    act(() => store.startProfiling());
-
-    act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
-    expect(store).toMatchSnapshot('2: add child');
-
-    act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
-    expect(store).toMatchSnapshot('3: remove children');
-
-    act(() => store.stopProfiling());
-    expect(store).toMatchSnapshot('4: profiling stopped');
-
-    let profilingSummary;
-    function Suspender({ rendererID, rootID }) {
-      profilingSummary = store.profilingCache.ProfilingSummary.read({
-        rendererID,
-        rootID,
-      });
-      return null;
-    }
-
-    // HACK There's only one renderer for this test
-    const rendererID = Object.keys(agent._rendererInterfaces)[0];
-    const rootID = store.roots[0];
-
-    let root = TestRenderer.create();
-    await renderAndResolve(
-      root,
-      <React.Suspense fallback={null}>
-        <Suspender rendererID={rendererID} rootID={rootID} />
-      </React.Suspense>
-    );
-
-    // HACK root.toTree() doesn't handle Suspense yet
-    // but Jest serializer wouldn't work with a JSON string
-    expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
-
-    done();
-  });
-
-  it('should clean up after a root has been unmounted', async () => {
-    const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
-    const Child = () => <div>Hi!</div>;
-
-    const containerA = document.createElement('div');
-    const containerB = document.createElement('div');
-
-    act(() => {
-      ReactDOM.render(<Parent key="A" count={3} />, containerA);
-      ReactDOM.render(<Parent key="B" count={2} />, containerB);
-    });
-    expect(store).toMatchSnapshot('1: mount');
-
-    act(() => store.startProfiling());
-    expect(store).toMatchSnapshot('2: profiling started');
-
-    act(() => {
-      ReactDOM.render(<Parent key="A" count={4} />, containerA);
-      ReactDOM.render(<Parent key="B" count={1} />, containerB);
-    });
-    expect(store).toMatchSnapshot('3: update');
-
-    act(() => ReactDOM.unmountComponentAtNode(containerB));
-    expect(store).toMatchSnapshot('4: unmount B');
-
-    act(() => ReactDOM.unmountComponentAtNode(containerA));
-    expect(store).toMatchSnapshot('5: unmount A');
-
-    act(() => store.stopProfiling());
-    expect(store).toMatchSnapshot('6: profiling stopped');
-  });
-});
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
new file mode 100644
index 000000000000..e740d45e4a32
--- /dev/null
+++ b/src/__tests__/profiling-test.js
@@ -0,0 +1,108 @@
+// @flow
+
+describe('profiling', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let TestRenderer;
+  let store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  describe('profilingSummary', () => {
+    it('should be collected for each commit', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return new Array(count)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      };
+      const Child = () => {
+        Scheduler.advanceTime(2);
+        return null;
+      };
+
+      const container = document.createElement('div');
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      utils.act(() => store.startProfiling());
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
+      expect(store).toMatchSnapshot('2: add child');
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
+      expect(store).toMatchSnapshot('3: remove children');
+
+      utils.act(() => store.stopProfiling());
+      expect(store).toMatchSnapshot('4: profiling stopped');
+
+      let profilingSummary;
+      function Suspender({ rendererID, rootID }) {
+        profilingSummary = store.profilingCache.ProfilingSummary.read({
+          rendererID,
+          rootID,
+        });
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender rendererID={rendererID} rootID={rootID} />
+          </React.Suspense>
+        )
+      );
+
+      expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
+
+      done();
+    });
+  });
+
+  it('should remove profiling data when roots are unmounted', async () => {
+    const Parent = ({ count }) =>
+      new Array(count).fill(true).map((_, index) => <Child key={index} />);
+    const Child = () => <div>Hi!</div>;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={3} />, containerA);
+      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+    });
+
+    utils.act(() => store.startProfiling());
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={4} />, containerA);
+      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    });
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
+
+    utils.act(() => store.stopProfiling());
+
+    // Assert all maps are empty
+    store.assertExpectedRootMapSizes();
+  });
+});
diff --git a/src/__tests__/profilingSummarySerializer.js b/src/__tests__/profilingSummarySerializer.js
index 45e8477dfd02..a2bcb1b5a0f4 100644
--- a/src/__tests__/profilingSummarySerializer.js
+++ b/src/__tests__/profilingSummarySerializer.js
@@ -17,11 +17,7 @@ export function print(profilingSummary, serialize, indent) {
   return JSON.stringify(
     {
       ...profilingSummary,
-      commitDurations: profilingSummary.commitDurations.map((_, i) => i),
-      commitTimes: profilingSummary.commitTimes.map((_, i) => i),
-      initialTreeBaseDurations: [
-        ...profilingSummary.initialTreeBaseDurations,
-      ].map(([id, _], index) => [id, index]),
+      initialTreeBaseDurations: [...profilingSummary.initialTreeBaseDurations],
     },
     null,
     2
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 5942574a77ef..4208eb06ec15 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -6,6 +6,7 @@ describe('Store', () => {
   let TestUtils;
   let agent;
   let store;
+  let utils;
 
   const act = (callback: Function) => {
     TestUtils.act(() => {
@@ -21,6 +22,7 @@ describe('Store', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     TestUtils = require('react-dom/test-utils');
+    utils = require('./utils');
   });
 
   it('should not allow a root node to be collapsed', () => {
@@ -281,8 +283,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('7: only third child is suspended');
 
-      // HACK There's only one renderer for this test
-      const rendererID = Object.keys(agent._rendererInterfaces)[0];
+      const rendererID = utils.getRendererID();
       act(() =>
         agent.overrideSuspense({
           id: store.getElementIDAtIndex(4),
@@ -673,8 +674,7 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
       expect(store).toMatchSnapshot('2: expand tree');
 
-      // HACK There's only one renderer for this test
-      const rendererID = Object.keys(agent._rendererInterfaces)[0];
+      const rendererID = utils.getRendererID();
       const suspenseID = store.getElementIDAtIndex(1);
 
       act(() =>
diff --git a/src/__tests__/storeOwners-test.js b/src/__tests__/storeOwners-test.js
index f4853b2fe0c7..9ed0e53fdcc0 100644
--- a/src/__tests__/storeOwners-test.js
+++ b/src/__tests__/storeOwners-test.js
@@ -5,23 +5,16 @@ const { printOwnersList } = require('./storeSerializer');
 describe('Store owners list', () => {
   let React;
   let ReactDOM;
-  let TestUtils;
+  let act;
   let store;
 
-  const act = (callback: Function) => {
-    TestUtils.act(() => {
-      callback();
-    });
-    jest.runAllTimers(); // Flush Bridge operations
-  };
-
   beforeEach(() => {
     store = global.store;
     store.collapseNodesByDefault = false;
 
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
+    act = require('./utils').act;
   });
 
   it('should drill through intermediate components', () => {
diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
index f41cb0fb844a..80a5b3f1e158 100644
--- a/src/__tests__/storeSerializer.js
+++ b/src/__tests__/storeSerializer.js
@@ -70,9 +70,9 @@ export function printStore(store, includeWeight = false) {
     );
   }
 
-  if (store.roots.length === 0) {
-    store.assertEmptyMaps();
-  }
+  // If roots have been unmounted, verify that they've been removed from maps.
+  // This helps ensure the Store doesn't leak memory.
+  store.assertExpectedRootMapSizes();
 
   return snapshotLines.join('\n');
 }
diff --git a/src/__tests__/storeStressSync-test.js b/src/__tests__/storeStressSync-test.js
index 54d60ef13e4f..8877d5d9992d 100644
--- a/src/__tests__/storeStressSync-test.js
+++ b/src/__tests__/storeStressSync-test.js
@@ -3,18 +3,11 @@
 describe('StoreStress (Sync Mode)', () => {
   let React;
   let ReactDOM;
-  let TestUtils;
+  let act;
   let bridge;
   let store;
   let print;
 
-  const act = (callback: Function) => {
-    TestUtils.act(() => {
-      callback();
-    });
-    jest.runAllTimers(); // Flush Bridge operations
-  };
-
   beforeEach(() => {
     bridge = global.bridge;
     store = global.store;
@@ -22,7 +15,7 @@ describe('StoreStress (Sync Mode)', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
+    act = require('./utils').act;
 
     print = require('./storeSerializer').print;
   });
diff --git a/src/__tests__/storeStressTestConcurrent-test.js b/src/__tests__/storeStressTestConcurrent-test.js
index 546db55066b8..d2a834ca9850 100644
--- a/src/__tests__/storeStressTestConcurrent-test.js
+++ b/src/__tests__/storeStressTestConcurrent-test.js
@@ -3,19 +3,11 @@
 describe('StoreStressConcurrent', () => {
   let React;
   let ReactDOM;
-  let TestUtils;
+  let act;
   let bridge;
   let store;
   let print;
 
-  const act = (callback: Function) => {
-    TestUtils.act(() => {
-      callback();
-    });
-    jest.advanceTimersByTime(1000); // Flush rendering and Suspense
-    jest.runAllTimers(); // Flush Bridge operations
-  };
-
   beforeEach(() => {
     bridge = global.bridge;
     store = global.store;
@@ -23,7 +15,7 @@ describe('StoreStressConcurrent', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
+    act = require('./utils').act;
 
     print = require('./storeSerializer').print;
   });
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
new file mode 100644
index 000000000000..cb15590ee5fd
--- /dev/null
+++ b/src/__tests__/utils.js
@@ -0,0 +1,66 @@
+// @flow
+
+export function act(callback: Function): void {
+  const TestUtils = require('react-dom/test-utils');
+  TestUtils.act(() => {
+    callback();
+  });
+
+  // Flush Bridge operations
+  jest.runAllTimers();
+}
+
+export async function actSuspense(callback: Function) {
+  const TestUtils = require('react-dom/test-utils');
+  const Scheduler = require('scheduler');
+
+  // $FlowFixMe Flow doens't know about "await act()" yet
+  await TestUtils.act(async () => {
+    callback();
+
+    // Resolve pending suspense promises
+    jest.runAllTimers();
+  });
+
+  // Re-render after resolved promises
+  Scheduler.flushAll();
+}
+
+export function beforeEachProfiling() {
+  // Mock React's timing information so that test runs are predictable.
+  jest.mock('scheduler', () =>
+    // $FlowFixMe Flow does not konw about requireActual
+    require.requireActual('scheduler/unstable_mock')
+  );
+
+  // DevTools itself uses performance.now() to offset commit times
+  // so they appear relative to when profiling was started in the UI.
+  jest.spyOn(performance, 'now').mockImplementation(
+    // $FlowFixMe Flow does not konw about requireActual
+    require.requireActual('scheduler/unstable_mock').unstable_now
+  );
+}
+
+export function getRendererID() {
+  if (global.agent == null) {
+    throw Error('Agent unavailable.');
+  }
+  const ids = Object.keys(global.agent._rendererInterfaces);
+  if (ids.length !== 1) {
+    throw Error('Multiple renderers attached.');
+  }
+  return ids[0];
+}
+
+export function requireTestRenderer() {
+  let hook;
+  try {
+    // Hide the hook before requiring TestRenderer, so we don't end up with a loop.
+    hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+    return require('react-test-renderer');
+  } finally {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+  }
+}
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 832170271795..d6e93d9fb908 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -192,30 +192,49 @@ export default class Store extends EventEmitter {
   }
 
   // This is only used in tests to avoid memory leaks.
-  assertEmptyMaps() {
-    this.assertEmptyMap(this._idToElement, '_idToElement');
-    this.assertEmptyMap(this._ownersMap, '_ownersMap');
-    this.assertEmptyMap(
-      this._profilingOperationsByRootID,
-      '_profilingOperationsByRootID'
-    );
-    this.assertEmptyMap(
-      this._profilingScreenshotsByRootID,
-      '_profilingScreenshotsByRootID'
+  assertExpectedRootMapSizes() {
+    if (this.roots.length === 0) {
+      // The only safe time to assert these maps are empty is when the store is empty.
+      this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');
+      this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');
+
+      // These maps will be empty unless profiling mode has been started.
+      // After this, their size should always match the number of roots,
+      // but unless we want to track additional metadata about profiling history,
+      // the only safe time to assert this is when the store is empty.
+      this.assertMapSizeMatchesRootCount(
+        this._profilingOperationsByRootID,
+        '_profilingOperationsByRootID'
+      );
+      this.assertMapSizeMatchesRootCount(
+        this._profilingScreenshotsByRootID,
+        '_profilingScreenshotsByRootID'
+      );
+      this.assertMapSizeMatchesRootCount(
+        this._profilingSnapshotsByRootID,
+        '_profilingSnapshotsByRootID'
+      );
+    }
+
+    // These maps should always be the same size as the number of roots
+    this.assertMapSizeMatchesRootCount(
+      this._rootIDToCapabilities,
+      '_rootIDToCapabilities'
     );
-    this.assertEmptyMap(
-      this._profilingSnapshotsByRootID,
-      '_profilingSnapshotsByRootID'
+    this.assertMapSizeMatchesRootCount(
+      this._rootIDToRendererID,
+      '_rootIDToRendererID'
     );
-    this.assertEmptyMap(this._rootIDToCapabilities, '_rootIDToCapabilities');
-    this.assertEmptyMap(this._rootIDToRendererID, '_rootIDToRendererID');
   }
 
   // This is only used in tests to avoid memory leaks.
-  assertEmptyMap(map: Map<any, any>, mapName: string) {
-    if (map.size !== 0) {
+  assertMapSizeMatchesRootCount(map: Map<any, any>, mapName: string) {
+    const expectedSize = this.roots.length;
+    if (map.size !== expectedSize) {
       throw new Error(
-        `Expected ${mapName} to be empty, got ${map.size}: ${inspect(map, {
+        `Expected ${mapName} to contain ${expectedSize} items, but it contains ${
+          map.size
+        } items\n\n${inspect(map, {
           depth: 20,
         })}`
       );

From da1e5776b1491177c59d68e7723ad0e787e7fc49 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 4 May 2019 13:11:56 -0700
Subject: [PATCH 544/814] Added a second Profiling test (for CommitDetails) and
 fixed some module reset prolems

---
 package.json                                  |   1 -
 .../__snapshots__/profiling-test.js.snap      | 107 ++++++++++++++----
 src/__tests__/profiling-test.js               |  87 ++++++++++++++
 src/__tests__/profilingSummarySerializer.js   |  25 ----
 src/__tests__/setupTests.js                   |  16 ++-
 src/__tests__/storeSerializer.js              |   7 +-
 src/devtools/cache.js                         |   2 +
 7 files changed, 185 insertions(+), 60 deletions(-)
 delete mode 100644 src/__tests__/profilingSummarySerializer.js

diff --git a/package.json b/package.json
index 0c42947e5c0f..0dfb1b3c71fa 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
       "<rootDir>/src/__tests__/setupTests"
     ],
     "snapshotSerializers": [
-      "<rootDir>/src/__tests__/profilingSummarySerializer",
       "<rootDir>/src/__tests__/storeSerializer"
     ],
     "testMatch": [
diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index a1e084986e51..4f9c7ae56d74 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -1,5 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`profiling commitDetails should be collected for each commit: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 2: add child 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 3: remove children 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 4: profiling stopped 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 5: CommitDetails: mount 1`] = `
+Object {
+  "actualDurations": Map {
+    1 => 14,
+    2 => 14,
+    3 => 2,
+    4 => 2,
+  },
+  "commitIndex": 0,
+  "interactions": Array [],
+  "rootID": 1,
+}
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 6: CommitDetails: add child 1`] = `
+Object {
+  "actualDurations": Map {
+    3 => 2,
+    4 => 2,
+    5 => 2,
+    2 => 16,
+    1 => 16,
+  },
+  "commitIndex": 1,
+  "interactions": Array [],
+  "rootID": 1,
+}
+`;
+
+exports[`profiling commitDetails should be collected for each commit: 7: CommitDetails: remove children 1`] = `
+Object {
+  "actualDurations": Map {
+    3 => 2,
+    2 => 12,
+    1 => 12,
+  },
+  "commitIndex": 2,
+  "interactions": Array [],
+  "rootID": 1,
+}
+`;
+
 exports[`profiling profilingSummary should be collected for each commit: 1: mount 1`] = `
 [root]
   ▾ <Parent key="A">
@@ -28,34 +97,22 @@ exports[`profiling profilingSummary should be collected for each commit: 4: prof
 `;
 
 exports[`profiling profilingSummary should be collected for each commit: ProfilingSummary 1`] = `
-{
-  "rootID": 1,
-  "commitDurations": [
+Object {
+  "commitDurations": Array [
     16,
-    12
+    12,
   ],
-  "commitTimes": [
+  "commitTimes": Array [
     16,
-    28
+    28,
   ],
-  "initialTreeBaseDurations": [
-    [
-      1,
-      14
-    ],
-    [
-      2,
-      14
-    ],
-    [
-      3,
-      2
-    ],
-    [
-      4,
-      2
-    ]
-  ],
-  "interactionCount": 0
+  "initialTreeBaseDurations": Map {
+    1 => 14,
+    2 => 14,
+    3 => 2,
+    4 => 2,
+  },
+  "interactionCount": 0,
+  "rootID": 1,
 }
 `;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index e740d45e4a32..253270cf135e 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -76,6 +76,93 @@ describe('profiling', () => {
     });
   });
 
+  describe('commitDetails', () => {
+    it('should be collected for each commit', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return new Array(count)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      };
+      const Child = () => {
+        Scheduler.advanceTime(2);
+        return null;
+      };
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
+      expect(store).toMatchSnapshot('2: add child');
+
+      utils.act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
+      expect(store).toMatchSnapshot('3: remove children');
+
+      utils.act(() => store.stopProfiling());
+      expect(store).toMatchSnapshot('4: profiling stopped');
+
+      let commitDetails;
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={0}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
+      );
+      expect(commitDetails).toMatchSnapshot('5: CommitDetails: mount');
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={1}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
+      );
+      expect(commitDetails).toMatchSnapshot('6: CommitDetails: add child');
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={2}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
+      );
+      expect(commitDetails).toMatchSnapshot(
+        '7: CommitDetails: remove children'
+      );
+
+      done();
+    });
+  });
+
   it('should remove profiling data when roots are unmounted', async () => {
     const Parent = ({ count }) =>
       new Array(count).fill(true).map((_, index) => <Child key={index} />);
diff --git a/src/__tests__/profilingSummarySerializer.js b/src/__tests__/profilingSummarySerializer.js
deleted file mode 100644
index a2bcb1b5a0f4..000000000000
--- a/src/__tests__/profilingSummarySerializer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// test() is part of Jest's serializer API
-export function test(maybeProfilingSummary) {
-  return (
-    typeof maybeProfilingSummary === 'object' &&
-    maybeProfilingSummary !== null &&
-    typeof maybeProfilingSummary.rootID === 'number' &&
-    Array.isArray(maybeProfilingSummary.commitDurations) &&
-    Array.isArray(maybeProfilingSummary.commitTimes) &&
-    typeof maybeProfilingSummary.initialTreeBaseDurations === 'object' &&
-    maybeProfilingSummary.initialTreeBaseDurations !== null &&
-    typeof maybeProfilingSummary.interactionCount === 'number'
-  );
-}
-
-// print() is part of Jest's serializer API
-export function print(profilingSummary, serialize, indent) {
-  return JSON.stringify(
-    {
-      ...profilingSummary,
-      initialTreeBaseDurations: [...profilingSummary.initialTreeBaseDurations],
-    },
-    null,
-    2
-  );
-}
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index b498a014fd20..2aec331a95c3 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -1,13 +1,17 @@
 // @flow
 
-import Agent from 'src/backend/agent';
-import { initBackend } from 'src/backend';
-import Bridge from 'src/bridge';
-import Store from 'src/devtools/store';
-import { installHook } from 'src/hook';
-
 const env = jasmine.getEnv();
 env.beforeEach(() => {
+  // These files should be required (and re-reuired) before each test,
+  // rather than imported at the head of the module.
+  // That's because we reset modules between tests,
+  // which disconnects the DevTool's cache from the current dispatcher ref.
+  const Agent = require('src/backend/agent').default;
+  const { initBackend } = require('src/backend');
+  const Bridge = require('src/bridge').default;
+  const Store = require('src/devtools/store').default;
+  const { installHook } = require('src/hook');
+
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
 
diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
index 80a5b3f1e158..6e6400aaf5e3 100644
--- a/src/__tests__/storeSerializer.js
+++ b/src/__tests__/storeSerializer.js
@@ -1,8 +1,9 @@
-import Store from 'src/devtools/store';
-
 // test() is part of Jest's serializer API
 export function test(maybeStore) {
-  return maybeStore instanceof Store;
+  // It's important to lazy-require the Store rather than imported at the head of the module.
+  // Because we reset modules between tests, different Store implementations will be used for each test.
+  // Unfortunately Jest does not reset its own serializer modules.
+  return maybeStore instanceof require('src/devtools/store').default;
 }
 
 // print() is part of Jest's serializer API
diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 1e1279803093..7116600b6058 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -49,6 +49,8 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
+// TODO This file isn't being re-imported between tests it seems, so it's getting disconnected
+
 const ReactCurrentDispatcher = (React: any)
   .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
 

From 1c49a7ef59f5e35b11d7418fee163a6d93a0856a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 4 May 2019 14:22:50 -0700
Subject: [PATCH 545/814] Added remaining profiling tests. One currently fails
 because of a bug with act() and interaction tracing

---
 .../__snapshots__/profiling-test.js.snap      | 137 ++++++++-----
 src/__tests__/profiling-test.js               | 188 ++++++++++++------
 2 files changed, 218 insertions(+), 107 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index 4f9c7ae56d74..01204c9a6b5a 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -1,33 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`profiling commitDetails should be collected for each commit: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`profiling commitDetails should be collected for each commit: 2: add child 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-`;
-
-exports[`profiling commitDetails should be collected for each commit: 3: remove children 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-`;
-
-exports[`profiling commitDetails should be collected for each commit: 4: profiling stopped 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-`;
-
-exports[`profiling commitDetails should be collected for each commit: 5: CommitDetails: mount 1`] = `
+exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 0 1`] = `
 Object {
   "actualDurations": Map {
     1 => 14,
@@ -41,7 +14,7 @@ Object {
 }
 `;
 
-exports[`profiling commitDetails should be collected for each commit: 6: CommitDetails: add child 1`] = `
+exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 1 1`] = `
 Object {
   "actualDurations": Map {
     3 => 2,
@@ -56,7 +29,7 @@ Object {
 }
 `;
 
-exports[`profiling commitDetails should be collected for each commit: 7: CommitDetails: remove children 1`] = `
+exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 2 1`] = `
 Object {
   "actualDurations": Map {
     3 => 2,
@@ -69,42 +42,106 @@ Object {
 }
 `;
 
-exports[`profiling profilingSummary should be collected for each commit: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
+exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "actualDurations": Map {
+    2 => 10,
+    1 => 10,
+  },
+  "commitIndex": 3,
+  "interactions": Array [],
+  "rootID": 1,
+}
+`;
+
+exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 2 1`] = `
+Object {
+  "commitDurations": Array [
+    0,
+    12,
+    1,
+    14,
+    2,
+    16,
+  ],
+  "fiberID": 2,
+  "rootID": 1,
+}
+`;
+
+exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 3 1`] = `
+Object {
+  "commitDurations": Array [
+    0,
+    2,
+    1,
+    2,
+    2,
+    2,
+  ],
+  "fiberID": 3,
+  "rootID": 1,
+}
 `;
 
-exports[`profiling profilingSummary should be collected for each commit: 2: add child 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
+exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 4 1`] = `
+Object {
+  "commitDurations": Array [
+    1,
+    2,
+    2,
+    2,
+  ],
+  "fiberID": 4,
+  "rootID": 1,
+}
 `;
 
-exports[`profiling profilingSummary should be collected for each commit: 3: remove children 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
+exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 5 1`] = `
+Object {
+  "commitDurations": Array [
+    2,
+    2,
+  ],
+  "fiberID": 5,
+  "rootID": 1,
+}
 `;
 
-exports[`profiling profilingSummary should be collected for each commit: 4: profiling stopped 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
+exports[`profiling Interactions should be collected for every traced interaction: Interactions 1`] = `
+Array [
+  Object {
+    "__count": 0,
+    "commits": Array [
+      1,
+    ],
+    "id": 0,
+    "name": "one child",
+    "timestamp": 10,
+  },
+  Object {
+    "__count": 0,
+    "commits": Array [
+      2,
+    ],
+    "id": 1,
+    "name": "two children",
+    "timestamp": 22,
+  },
+]
 `;
 
-exports[`profiling profilingSummary should be collected for each commit: ProfilingSummary 1`] = `
+exports[`profiling ProfilingSummary should be collected for each commit: ProfilingSummary 1`] = `
 Object {
   "commitDurations": Array [
     16,
     12,
+    10,
   ],
   "commitTimes": Array [
     16,
     28,
+    38,
   ],
   "initialTreeBaseDurations": Map {
     1 => 14,
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 253270cf135e..b38c6dadd86e 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -4,6 +4,7 @@ describe('profiling', () => {
   let React;
   let ReactDOM;
   let Scheduler;
+  let SchedulerTracing;
   let TestRenderer;
   let store;
   let utils;
@@ -18,10 +19,11 @@ describe('profiling', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
     TestRenderer = utils.requireTestRenderer();
   });
 
-  describe('profilingSummary', () => {
+  describe('ProfilingSummary', () => {
     it('should be collected for each commit', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
@@ -36,26 +38,19 @@ describe('profiling', () => {
 
       const container = document.createElement('div');
 
-      utils.act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
-      expect(store).toMatchSnapshot('1: mount');
-
+      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
       utils.act(() => store.startProfiling());
-
-      utils.act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
-      expect(store).toMatchSnapshot('2: add child');
-
-      utils.act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
-      expect(store).toMatchSnapshot('3: remove children');
-
+      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={0} />, container));
       utils.act(() => store.stopProfiling());
-      expect(store).toMatchSnapshot('4: profiling stopped');
 
-      let profilingSummary;
       function Suspender({ rendererID, rootID }) {
-        profilingSummary = store.profilingCache.ProfilingSummary.read({
+        const profilingSummary = store.profilingCache.ProfilingSummary.read({
           rendererID,
           rootID,
         });
+        expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
         return null;
       }
 
@@ -70,13 +65,11 @@ describe('profiling', () => {
         )
       );
 
-      expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
-
       done();
     });
   });
 
-  describe('commitDetails', () => {
+  describe('CommitDetails', () => {
     it('should be collected for each commit', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
@@ -92,72 +85,153 @@ describe('profiling', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.startProfiling());
+      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+      utils.act(() => store.stopProfiling());
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        const commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        expect(commitDetails).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`
+        );
+        return null;
+      }
 
-      utils.act(() => ReactDOM.render(<Parent key="A" count={2} />, container));
-      expect(store).toMatchSnapshot('1: mount');
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
 
-      utils.act(() => ReactDOM.render(<Parent key="A" count={3} />, container));
-      expect(store).toMatchSnapshot('2: add child');
+      for (let commitIndex = 0; commitIndex <= 3; commitIndex++) {
+        await utils.actSuspense(() =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          )
+        );
+      }
 
-      utils.act(() => ReactDOM.render(<Parent key="A" count={1} />, container));
-      expect(store).toMatchSnapshot('3: remove children');
+      done();
+    });
+  });
 
+  describe('FiberCommits', () => {
+    it('should be collected for each rendered fiber', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return new Array(count)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      };
+      const Child = () => {
+        Scheduler.advanceTime(2);
+        return null;
+      };
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
       utils.act(() => store.stopProfiling());
-      expect(store).toMatchSnapshot('4: profiling stopped');
 
-      let commitDetails;
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
+      function Suspender({ fiberID, rendererID, rootID }) {
+        const fiberCommits = store.profilingCache.FiberCommits.read({
+          fiberID,
           rendererID,
           rootID,
         });
+        expect(fiberCommits).toMatchSnapshot(
+          `FiberCommits: element ${fiberID}`
+        );
         return null;
       }
 
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actSuspense(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={0}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
+      for (let index = 0; index < store.numElements; index++) {
+        await utils.actSuspense(() =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                fiberID={store.getElementIDAtIndex(index)}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          )
+        );
+      }
+
+      done();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should be collected for every traced interaction', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return new Array(count)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      };
+      const Child = () => {
+        Scheduler.advanceTime(2);
+        return null;
+      };
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+      console.log('[test] render one');
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'one child',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent count={1} />, container)
         )
       );
-      expect(commitDetails).toMatchSnapshot('5: CommitDetails: mount');
-
-      await utils.actSuspense(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={1}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
+      console.log('[test] render two');
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'two children',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent count={2} />, container)
         )
       );
-      expect(commitDetails).toMatchSnapshot('6: CommitDetails: add child');
+      console.log('[test] done');
+      utils.act(() => store.stopProfiling());
+
+      function Suspender({ rendererID, rootID }) {
+        const interactions = store.profilingCache.Interactions.read({
+          rendererID,
+          rootID,
+        });
+        expect(interactions).toMatchSnapshot('Interactions');
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
 
       await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={2}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
+            <Suspender rendererID={rendererID} rootID={rootID} />
           </React.Suspense>
         )
       );
-      expect(commitDetails).toMatchSnapshot(
-        '7: CommitDetails: remove children'
-      );
 
       done();
     });

From 269969b64564637dd2a0933b426d63059e9e3652 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 5 May 2019 09:52:27 -0700
Subject: [PATCH 546/814] Updated snapshot data after ReactDOM batch fix

---
 src/__tests__/__snapshots__/profiling-test.js.snap | 14 +++++++-------
 src/__tests__/profiling-test.js                    |  7 ++-----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index 01204c9a6b5a..c0dfd222e09d 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -111,22 +111,22 @@ Object {
 exports[`profiling Interactions should be collected for every traced interaction: Interactions 1`] = `
 Array [
   Object {
-    "__count": 0,
+    "__count": 1,
     "commits": Array [
-      1,
+      0,
     ],
     "id": 0,
-    "name": "one child",
-    "timestamp": 10,
+    "name": "mount: one child",
+    "timestamp": 0,
   },
   Object {
     "__count": 0,
     "commits": Array [
-      2,
+      1,
     ],
     "id": 1,
-    "name": "two children",
-    "timestamp": 22,
+    "name": "update: two children",
+    "timestamp": 12,
   },
 ]
 `;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index b38c6dadd86e..de2d4cf04ccc 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -194,23 +194,20 @@ describe('profiling', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.startProfiling());
-      console.log('[test] render one');
       utils.act(() =>
         SchedulerTracing.unstable_trace(
-          'one child',
+          'mount: one child',
           Scheduler.unstable_now(),
           () => ReactDOM.render(<Parent count={1} />, container)
         )
       );
-      console.log('[test] render two');
       utils.act(() =>
         SchedulerTracing.unstable_trace(
-          'two children',
+          'update: two children',
           Scheduler.unstable_now(),
           () => ReactDOM.render(<Parent count={2} />, container)
         )
       );
-      console.log('[test] done');
       utils.act(() => store.stopProfiling());
 
       function Suspender({ rendererID, rootID }) {

From c29483122ce8297c7c136c50cdf31cb89fcb4c04 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 5 May 2019 09:56:54 -0700
Subject: [PATCH 547/814] Removed outdated TODO comment

---
 src/devtools/cache.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/devtools/cache.js b/src/devtools/cache.js
index 7116600b6058..1e1279803093 100644
--- a/src/devtools/cache.js
+++ b/src/devtools/cache.js
@@ -49,8 +49,6 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-// TODO This file isn't being re-imported between tests it seems, so it's getting disconnected
-
 const ReactCurrentDispatcher = (React: any)
   .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
 

From 705cd9b10993fab6d05844f2a7d527d555dbeea6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 09:44:01 -0700
Subject: [PATCH 548/814] Added Flow types to profiling test

---
 flow-typed/npm/react-test-renderer_v16.x.x.js | 81 +++++++++++++++++++
 src/__tests__/profiling-test.js               | 25 ++++--
 src/__tests__/utils.js                        | 12 +--
 3 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 flow-typed/npm/react-test-renderer_v16.x.x.js

diff --git a/flow-typed/npm/react-test-renderer_v16.x.x.js b/flow-typed/npm/react-test-renderer_v16.x.x.js
new file mode 100644
index 000000000000..87a149a1d37d
--- /dev/null
+++ b/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -0,0 +1,81 @@
+// flow-typed signature: b6bb53397d83d2d821e258cc73818d1b
+// flow-typed version: 9c71eca8ef/react-test-renderer_v16.x.x/flow_>=v0.47.x
+
+// Type definitions for react-test-renderer 16.x.x
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
+
+type ReactComponentInstance = React$Component<any>;
+
+type ReactTestRendererJSON = {
+  type: string,
+  props: { [propName: string]: any },
+  children: null | ReactTestRendererJSON[],
+};
+
+type ReactTestRendererTree = ReactTestRendererJSON & {
+  nodeType: 'component' | 'host',
+  instance: ?ReactComponentInstance,
+  rendered: null | ReactTestRendererTree,
+};
+
+type ReactTestInstance = {
+  instance: ?ReactComponentInstance,
+  type: string,
+  props: { [propName: string]: any },
+  parent: null | ReactTestInstance,
+  children: Array<ReactTestInstance | string>,
+
+  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
+  findByType(type: React$ElementType): ReactTestInstance,
+  findByProps(props: { [propName: string]: any }): ReactTestInstance,
+
+  findAll(
+    predicate: (node: ReactTestInstance) => boolean,
+    options?: { deep: boolean }
+  ): ReactTestInstance[],
+  findAllByType(
+    type: React$ElementType,
+    options?: { deep: boolean }
+  ): ReactTestInstance[],
+  findAllByProps(
+    props: { [propName: string]: any },
+    options?: { deep: boolean }
+  ): ReactTestInstance[],
+};
+
+type TestRendererOptions = {
+  createNodeMock(element: React$Element<any>): any,
+};
+
+declare module 'react-test-renderer' {
+  declare export type ReactTestRenderer = {
+    toJSON(): null | ReactTestRendererJSON,
+    toTree(): null | ReactTestRendererTree,
+    unmount(nextElement?: React$Element<any>): void,
+    update(nextElement: React$Element<any>): void,
+    getInstance(): ?ReactComponentInstance,
+    root: ReactTestInstance,
+  };
+
+  declare type Thenable = {
+    then(resolve: () => mixed, reject?: () => mixed): mixed,
+  };
+
+  declare function create(
+    nextElement: React$Element<any>,
+    options?: TestRendererOptions
+  ): ReactTestRenderer;
+
+  declare function act(callback: () => void): Thenable;
+}
+
+declare module 'react-test-renderer/shallow' {
+  declare export default class ShallowRenderer {
+    static createRenderer(): ShallowRenderer;
+    getMountedInstance(): ReactTestInstance;
+    getRenderOutput<E: React$Element<any>>(): E;
+    getRenderOutput(): React$Element<any>;
+    render(element: React$Element<any>, context?: any): void;
+    unmount(): void;
+  }
+}
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index de2d4cf04ccc..5bd2e037bbf5 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -1,12 +1,17 @@
 // @flow
 
+import type React from 'react';
+import type ReactDOM from 'react-dom';
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type Store from 'src/devtools/store';
+
 describe('profiling', () => {
-  let React;
-  let ReactDOM;
+  let React: React;
+  let ReactDOM: ReactDOM;
   let Scheduler;
   let SchedulerTracing;
-  let TestRenderer;
-  let store;
+  let TestRenderer: ReactTestRenderer;
+  let store: Store;
   let utils;
 
   beforeEach(() => {
@@ -161,17 +166,21 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actSuspense(() =>
+        await utils.actSuspense(() => {
+          const fiberID = store.getElementIDAtIndex(index);
+          if (fiberID == null) {
+            throw Error(`Unexpected null ID for element at index ${index}`);
+          }
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
-                fiberID={store.getElementIDAtIndex(index)}
+                fiberID={fiberID}
                 rendererID={rendererID}
                 rootID={rootID}
               />
             </React.Suspense>
-          )
-        );
+          );
+        });
       }
 
       done();
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index cb15590ee5fd..1e3acc55ac27 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -1,5 +1,7 @@
 // @flow
 
+import typeof ReactTestRenderer from 'react-test-renderer';
+
 export function act(callback: Function): void {
   const TestUtils = require('react-dom/test-utils');
   TestUtils.act(() => {
@@ -10,7 +12,7 @@ export function act(callback: Function): void {
   jest.runAllTimers();
 }
 
-export async function actSuspense(callback: Function) {
+export async function actSuspense(callback: Function): Promise<void> {
   const TestUtils = require('react-dom/test-utils');
   const Scheduler = require('scheduler');
 
@@ -26,7 +28,7 @@ export async function actSuspense(callback: Function) {
   Scheduler.flushAll();
 }
 
-export function beforeEachProfiling() {
+export function beforeEachProfiling(): void {
   // Mock React's timing information so that test runs are predictable.
   jest.mock('scheduler', () =>
     // $FlowFixMe Flow does not konw about requireActual
@@ -41,7 +43,7 @@ export function beforeEachProfiling() {
   );
 }
 
-export function getRendererID() {
+export function getRendererID(): number {
   if (global.agent == null) {
     throw Error('Agent unavailable.');
   }
@@ -49,10 +51,10 @@ export function getRendererID() {
   if (ids.length !== 1) {
     throw Error('Multiple renderers attached.');
   }
-  return ids[0];
+  return parseInt(ids[0], 10);
 }
 
-export function requireTestRenderer() {
+export function requireTestRenderer(): ReactTestRenderer {
   let hook;
   try {
     // Hide the hook before requiring TestRenderer, so we don't end up with a loop.

From d86bc1020ec6122a0a37685f57ab2c7a88be71d8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 13:04:14 -0700
Subject: [PATCH 549/814] Hardened tests to ensure expectations are flushed

---
 src/__tests__/profiling-test.js | 26 +++++++++++++++++++++++---
 src/devtools/store.js           |  4 ++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 5bd2e037bbf5..6c4927284710 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -50,11 +50,14 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={0} />, container));
       utils.act(() => store.stopProfiling());
 
+      let suspenseResolved = false;
+
       function Suspender({ rendererID, rootID }) {
         const profilingSummary = store.profilingCache.ProfilingSummary.read({
           rendererID,
           rootID,
         });
+        suspenseResolved = true;
         expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
         return null;
       }
@@ -70,6 +73,8 @@ describe('profiling', () => {
         )
       );
 
+      expect(suspenseResolved).toBe(true);
+
       done();
     });
   });
@@ -96,12 +101,15 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={0} />, container));
       utils.act(() => store.stopProfiling());
 
+      let suspenseResolved = false;
+
       function Suspender({ commitIndex, rendererID, rootID }) {
         const commitDetails = store.profilingCache.CommitDetails.read({
           commitIndex,
           rendererID,
           rootID,
         });
+        suspenseResolved = true;
         expect(commitDetails).toMatchSnapshot(
           `CommitDetails commitIndex: ${commitIndex}`
         );
@@ -112,7 +120,8 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex <= 3; commitIndex++) {
-        await utils.actSuspense(() =>
+        suspenseResolved = false;
+        await utils.actSuspense(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -121,8 +130,9 @@ describe('profiling', () => {
                 rootID={rootID}
               />
             </React.Suspense>
-          )
-        );
+          );
+        });
+        expect(suspenseResolved).toBe(true);
       }
 
       done();
@@ -150,12 +160,15 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={3} />, container));
       utils.act(() => store.stopProfiling());
 
+      let suspenseResolved = false;
+
       function Suspender({ fiberID, rendererID, rootID }) {
         const fiberCommits = store.profilingCache.FiberCommits.read({
           fiberID,
           rendererID,
           rootID,
         });
+        suspenseResolved = true;
         expect(fiberCommits).toMatchSnapshot(
           `FiberCommits: element ${fiberID}`
         );
@@ -166,6 +179,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
+        suspenseResolved = false;
         await utils.actSuspense(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
@@ -181,6 +195,7 @@ describe('profiling', () => {
             </React.Suspense>
           );
         });
+        expect(suspenseResolved).toBe(true);
       }
 
       done();
@@ -219,11 +234,14 @@ describe('profiling', () => {
       );
       utils.act(() => store.stopProfiling());
 
+      let suspenseResolved = false;
+
       function Suspender({ rendererID, rootID }) {
         const interactions = store.profilingCache.Interactions.read({
           rendererID,
           rootID,
         });
+        suspenseResolved = true;
         expect(interactions).toMatchSnapshot('Interactions');
         return null;
       }
@@ -239,6 +257,8 @@ describe('profiling', () => {
         )
       );
 
+      expect(suspenseResolved).toBe(true);
+
       done();
     });
   });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d6e93d9fb908..7a84b3364760 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -852,6 +852,10 @@ export default class Store extends EventEmitter {
               weight: 0,
             });
 
+            if (this._isProfiling) {
+              this._profilingSnapshotsByRootID.set(id, new Map());
+            }
+
             haveRootsChanged = true;
           } else {
             parentID = ((operations[i]: any): number);

From b25d996fc4d8d84afe00bbb852f7480ab4725fa6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 13:37:06 -0700
Subject: [PATCH 550/814] Added profiling chart data tests

---
 .../profilingCharts-test.js.snap              | 333 ++++++++++++++++++
 src/__tests__/profiling-test.js               |   6 +-
 src/__tests__/profilingCharts-test.js         | 292 +++++++++++++++
 src/__tests__/utils.js                        |  17 +-
 4 files changed, 641 insertions(+), 7 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/profilingCharts-test.js.snap
 create mode 100644 src/__tests__/profilingCharts-test.js

diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
new file mode 100644
index 000000000000..36e4c8cf9040
--- /dev/null
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -0,0 +1,333 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
+Object {
+  "baseDuration": 14,
+  "depth": 2,
+  "idToDepthMap": Map {
+    2 => 1,
+    4 => 2,
+    3 => 2,
+  },
+  "maxSelfDuration": 10,
+  "rows": Array [
+    Array [
+      Object {
+        "actualDuration": 14,
+        "didRender": true,
+        "id": 2,
+        "label": "Parent (10.0ms of 14.0ms)",
+        "name": "Parent",
+        "offset": 0,
+        "selfDuration": 10,
+        "treeBaseDuration": 14,
+      },
+    ],
+    Array [
+      Object {
+        "actualDuration": 2,
+        "didRender": true,
+        "id": 4,
+        "label": "Memo(Child) key=\\"second\\" (2.0ms of 2.0ms)",
+        "name": "Memo(Child)",
+        "offset": 12,
+        "selfDuration": 2,
+        "treeBaseDuration": 2,
+      },
+      Object {
+        "actualDuration": 2,
+        "didRender": true,
+        "id": 3,
+        "label": "Memo(Child) key=\\"first\\" (2.0ms of 2.0ms)",
+        "name": "Memo(Child)",
+        "offset": 10,
+        "selfDuration": 2,
+        "treeBaseDuration": 2,
+      },
+    ],
+  ],
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
+Object {
+  "baseDuration": 14,
+  "depth": 2,
+  "idToDepthMap": Map {
+    2 => 1,
+    4 => 2,
+    3 => 2,
+  },
+  "maxSelfDuration": 10,
+  "rows": Array [
+    Array [
+      Object {
+        "actualDuration": 10,
+        "didRender": true,
+        "id": 2,
+        "label": "Parent (10.0ms of 10.0ms)",
+        "name": "Parent",
+        "offset": 0,
+        "selfDuration": 10,
+        "treeBaseDuration": 14,
+      },
+    ],
+    Array [
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 4,
+        "label": "Memo(Child) key=\\"second\\"",
+        "name": "Memo(Child)",
+        "offset": 12,
+        "selfDuration": 0,
+        "treeBaseDuration": 2,
+      },
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 3,
+        "label": "Memo(Child) key=\\"first\\"",
+        "name": "Memo(Child)",
+        "offset": 10,
+        "selfDuration": 0,
+        "treeBaseDuration": 2,
+      },
+    ],
+  ],
+}
+`;
+
+exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
+Object {
+  "lastInteractionTime": 24,
+  "maxCommitDuration": 14,
+}
+`;
+
+exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
+Object {
+  "lastInteractionTime": 24,
+  "maxCommitDuration": 14,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `
+Object {
+  "maxValue": 10,
+  "nodes": Array [
+    Object {
+      "id": 2,
+      "label": "Parent (10.0ms)",
+      "name": "Parent",
+      "value": 10,
+    },
+    Object {
+      "id": 3,
+      "label": "Memo(Child) key=\\"first\\" (2.0ms)",
+      "name": "Memo(Child)",
+      "value": 2,
+    },
+    Object {
+      "id": 4,
+      "label": "Memo(Child) key=\\"second\\" (2.0ms)",
+      "name": "Memo(Child)",
+      "value": 2,
+    },
+  ],
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `
+Object {
+  "maxValue": 10,
+  "nodes": Array [
+    Object {
+      "id": 2,
+      "label": "Parent (10.0ms)",
+      "name": "Parent",
+      "value": 10,
+    },
+  ],
+}
+`;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 6c4927284710..39dd595e49ec 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -1,13 +1,11 @@
 // @flow
 
-import type React from 'react';
-import type ReactDOM from 'react-dom';
 import typeof ReactTestRenderer from 'react-test-renderer';
 import type Store from 'src/devtools/store';
 
 describe('profiling', () => {
-  let React: React;
-  let ReactDOM: ReactDOM;
+  let React;
+  let ReactDOM;
   let Scheduler;
   let SchedulerTracing;
   let TestRenderer: ReactTestRenderer;
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
new file mode 100644
index 000000000000..3e2613b5af93
--- /dev/null
+++ b/src/__tests__/profilingCharts-test.js
@@ -0,0 +1,292 @@
+// @flow
+
+import typeof TestRendererType from 'react-test-renderer';
+import type Store from 'src/devtools/store';
+
+describe('profiling charts', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let SchedulerTracing;
+  let TestRenderer: TestRendererType;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  describe('flamegraph chart', () => {
+    it('should contain valid data', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" />
+            <Child key="second" />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child() {
+        Scheduler.advanceTime(2);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() => store.stopProfiling());
+
+      let suspenseResolved = false;
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        const profilingSummary = store.profilingCache.ProfilingSummary.read({
+          rendererID,
+          rootID,
+        });
+        const commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        suspenseResolved = true;
+        const commitTree = store.profilingCache.getCommitTree({
+          commitIndex,
+          profilingSummary,
+        });
+        const chartData = store.profilingCache.getFlamegraphChartData({
+          commitDetails,
+          commitIndex,
+          commitTree,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        expect(chartData).toMatchSnapshot(
+          `${commitIndex}: FlamegraphChartData`
+        );
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        suspenseResolved = false;
+
+        await utils.actSuspense(
+          () =>
+            TestRenderer.create(
+              <React.Suspense fallback={null}>
+                <Suspender
+                  commitIndex={commitIndex}
+                  rendererID={rendererID}
+                  rootID={rootID}
+                />
+              </React.Suspense>
+            ),
+          3
+        );
+
+        expect(suspenseResolved).toBe(true);
+      }
+
+      expect(suspenseResolved).toBe(true);
+
+      done();
+    });
+  });
+
+  describe('ranked chart', () => {
+    it('should contain valid data', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" />
+            <Child key="second" />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child() {
+        Scheduler.advanceTime(2);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() => store.stopProfiling());
+
+      let suspenseResolved = false;
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        const profilingSummary = store.profilingCache.ProfilingSummary.read({
+          rendererID,
+          rootID,
+        });
+        const commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        suspenseResolved = true;
+        const commitTree = store.profilingCache.getCommitTree({
+          commitIndex,
+          profilingSummary,
+        });
+        const chartData = store.profilingCache.getRankedChartData({
+          commitDetails,
+          commitIndex,
+          commitTree,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        suspenseResolved = false;
+
+        await utils.actSuspense(
+          () =>
+            TestRenderer.create(
+              <React.Suspense fallback={null}>
+                <Suspender
+                  commitIndex={commitIndex}
+                  rendererID={rendererID}
+                  rootID={rootID}
+                />
+              </React.Suspense>
+            ),
+          3
+        );
+
+        expect(suspenseResolved).toBe(true);
+      }
+
+      done();
+    });
+  });
+
+  describe('interactions', () => {
+    it('should contain valid data', async done => {
+      const Parent = ({ count }) => {
+        Scheduler.advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" />
+            <Child key="second" />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child() {
+        Scheduler.advanceTime(2);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container)
+        )
+      );
+      utils.act(() => store.stopProfiling());
+
+      let suspenseResolved = false;
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        const profilingSummary = store.profilingCache.ProfilingSummary.read({
+          rendererID,
+          rootID,
+        });
+        const interactions = store.profilingCache.Interactions.read({
+          rendererID,
+          rootID,
+        });
+        suspenseResolved = true;
+        const chartData = store.profilingCache.getInteractionsChartData({
+          interactions,
+          profilingSummary,
+        });
+        expect(chartData).toMatchSnapshot('Interactions');
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        suspenseResolved = false;
+
+        await utils.actSuspense(
+          () =>
+            TestRenderer.create(
+              <React.Suspense fallback={null}>
+                <Suspender
+                  commitIndex={commitIndex}
+                  rendererID={rendererID}
+                  rootID={rootID}
+                />
+              </React.Suspense>
+            ),
+          3
+        );
+
+        expect(suspenseResolved).toBe(true);
+      }
+
+      done();
+    });
+  });
+});
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 1e3acc55ac27..89c7ffd6b130 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -12,7 +12,10 @@ export function act(callback: Function): void {
   jest.runAllTimers();
 }
 
-export async function actSuspense(callback: Function): Promise<void> {
+export async function actSuspense(
+  callback: Function,
+  numTimesToFlush: number = 1
+): Promise<void> {
   const TestUtils = require('react-dom/test-utils');
   const Scheduler = require('scheduler');
 
@@ -24,8 +27,16 @@ export async function actSuspense(callback: Function): Promise<void> {
     jest.runAllTimers();
   });
 
-  // Re-render after resolved promises
-  Scheduler.flushAll();
+  // Run cascading microtasks and flush scheduled React work.
+  // Components that suspend multiple times will need to do this once per suspend operation.
+  // HACK Ideally the mock scheduler would provide an API to ask if there was outstanding work.
+  while (--numTimesToFlush >= 0) {
+    // $FlowFixMe Flow doens't know about "await act()" yet
+    await TestUtils.act(async () => {
+      jest.runAllTimers();
+      Scheduler.flushAll();
+    });
+  }
 }
 
 export function beforeEachProfiling(): void {

From c2bf71f406e530813b023eaa267c5e5e49869d32 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 13:41:36 -0700
Subject: [PATCH 551/814] Added commit tree builder test

---
 .../profilingCommitTreeBuilder-test.js.snap   | 162 ++++++++++++++++++
 .../profilingCommitTreeBuilder-test.js        |  91 ++++++++++
 2 files changed, 253 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
 create mode 100644 src/__tests__/profilingCommitTreeBuilder-test.js

diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
new file mode 100644
index 000000000000..b483cd5efce5
--- /dev/null
+++ b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 12,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 12,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 16,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 16,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "1",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 5,
+      "key": "2",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 4,
+      "key": "1",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 10,
+    },
+    2 => Object {
+      "children": Array [],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 10,
+    },
+  },
+  "rootID": 1,
+}
+`;
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
new file mode 100644
index 000000000000..bf7b63064664
--- /dev/null
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -0,0 +1,91 @@
+// @flow
+
+import typeof TestRendererType from 'react-test-renderer';
+import type Store from 'src/devtools/store';
+
+describe('commit tree', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let SchedulerTracing;
+  let TestRenderer: TestRendererType;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  it('should be able to rebuild the store tree for each commit', async done => {
+    const Parent = ({ count }) => {
+      Scheduler.advanceTime(10);
+      return new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} />);
+    };
+    const Child = React.memo(function Child() {
+      Scheduler.advanceTime(2);
+      return null;
+    });
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => store.stopProfiling());
+
+    let suspenseResolved = false;
+
+    function Suspender({ commitIndex, rendererID, rootID }) {
+      const profilingSummary = store.profilingCache.ProfilingSummary.read({
+        rendererID,
+        rootID,
+      });
+      suspenseResolved = true;
+      const commitTree = store.profilingCache.getCommitTree({
+        commitIndex,
+        profilingSummary,
+      });
+      expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+      return null;
+    }
+
+    const rendererID = utils.getRendererID();
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      suspenseResolved = false;
+
+      await utils.actSuspense(
+        () =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          ),
+        3
+      );
+
+      expect(suspenseResolved).toBe(true);
+    }
+
+    done();
+  });
+});

From 6ab897234557a951ed23ec57d925f6e3447d7497 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 13:52:27 -0700
Subject: [PATCH 552/814] Update to React canary release for interaction
 tracing bugfix

---
 package.json | 10 +++++-----
 yarn.lock    | 48 ++++++++++++++++++++++++------------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 0dfb1b3c71fa..a86f97bd333a 100644
--- a/package.json
+++ b/package.json
@@ -130,15 +130,15 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "0.0.0-fb28e9048",
+    "react": "^0.0.0-6da04b5d8",
     "react-color": "^2.11.7",
-    "react-dom": "0.0.0-fb28e9048",
-    "react-is": "0.0.0-fb28e9048",
-    "react-test-renderer": "0.0.0-fb28e9048",
+    "react-dom": "^0.0.0-6da04b5d8",
+    "react-is": "^0.0.0-6da04b5d8",
+    "react-test-renderer": "^0.0.0-6da04b5d8",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
-    "scheduler": "0.0.0-fb28e9048",
+    "scheduler": "^0.0.0-6da04b5d8",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 32a0156b37ce..4b65dd25f442 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9807,20 +9807,20 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@0.0.0-fb28e9048:
-  version "0.0.0-fb28e9048"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-fb28e9048.tgz#d4276f11a16f74b2cef0700bb5a8eefaee3761d2"
-  integrity sha512-C4bdIWINwV4pF1P0oN7fDAq+vTHOW2rxQLvGE5rDslGrK/DJ7bM5PrD81AcPkdgUnK3O/JvIkeGIvRcRgYemSw==
+react-dom@^0.0.0-6da04b5d8:
+  version "0.0.0-6da04b5d8"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-6da04b5d8.tgz#ee78e45a40771560c756b8fc7f1fa213f2179ebe"
+  integrity sha512-6oyfkucrweqCB5XyLsfEnPSWhvkFnttutkU9uUQovLAljuazgpAjvBy6MBGSewKptqch2OTNwopqvR3QUMD8AQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-fb28e9048"
+    scheduler "0.0.0-6da04b5d8"
 
-react-is@0.0.0-fb28e9048:
-  version "0.0.0-fb28e9048"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-fb28e9048.tgz#f2bdccfea1005ea5234719de192f25504ff4244e"
-  integrity sha512-McCC7GvLXMcY29GIiJ56bvuXFVTIwBr7wcz93TcGvUN23a7l0h9KjCwUjGQfEpBRG3pbeBtMxDc6GiXuVbK6Lg==
+react-is@0.0.0-6da04b5d8, react-is@^0.0.0-6da04b5d8:
+  version "0.0.0-6da04b5d8"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-6da04b5d8.tgz#ded1f02e9f1e2b8456812d0d45c341d70b7bf7db"
+  integrity sha512-+Df3meqx+XUir+3dCqiHNAHruwmOAgXVp3TYmlUvgtPNBu+LF0OdchTMZ/xMUok1gYVoe4l/xhfs9CTEPkWt3g==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9837,15 +9837,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-test-renderer@0.0.0-fb28e9048:
-  version "0.0.0-fb28e9048"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-fb28e9048.tgz#1a94c8d19cbb1ac98ab37c66c0b294e5be280c52"
-  integrity sha512-WK/wQOh0v6+8Gbkurgb3he9hKoOKWueqQY+RFs2vM3u3vn7PMyYhzm/KkU75VvTG/GVciojNQBHBpekuvU5dYw==
+react-test-renderer@^0.0.0-6da04b5d8:
+  version "0.0.0-6da04b5d8"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-6da04b5d8.tgz#01bed04c5a4cf22339f0ae3b23f89bb45e9a8f2a"
+  integrity sha512-yDt5RPDXLZXTqlWS0jXMJ1IyS1e/UZXSr0L8bG0UCsna4T7A3HIYR2zChlydGXsxjGMZntKqEfm27hUhFgC06Q==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    react-is "0.0.0-fb28e9048"
-    scheduler "0.0.0-fb28e9048"
+    react-is "0.0.0-6da04b5d8"
+    scheduler "0.0.0-6da04b5d8"
 
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
@@ -9860,15 +9860,15 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@0.0.0-fb28e9048:
-  version "0.0.0-fb28e9048"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-fb28e9048.tgz#f3488c3e5cac772b2731d6d4bb3484410821254c"
-  integrity sha512-6zsjgsy9hcKC41T6X6SMbyf3fJ2VadmUxDgEXUVAJ2qV9q4SP0mnK4ttDfOwDvlFNbisqtS5HbS0hnWO/8iKxQ==
+react@^0.0.0-6da04b5d8:
+  version "0.0.0-6da04b5d8"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-6da04b5d8.tgz#583d81f73b26771da41170a5042a5ab0bdcfe37a"
+  integrity sha512-8hXBHwDCKxSVFqj5Kb4OskZz7//2fx2IpUnYyukYV8qyAHlXr0qUl3GxwuryhdPzJHlzi776WjN0YEmEEANhYA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-fb28e9048"
+    scheduler "0.0.0-6da04b5d8"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -10524,10 +10524,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-fb28e9048:
-  version "0.0.0-fb28e9048"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-fb28e9048.tgz#5e7e37a44eb69204936a3ae67f187947980438a8"
-  integrity sha512-2s3rauGawjL8fGNLWHv5NJkUn8y1IOwAtptE6en0IRUcz33IZQyKlBlFpwdAKyarGScRL6p9FpcLYorXZCaDuw==
+scheduler@0.0.0-6da04b5d8, scheduler@^0.0.0-6da04b5d8:
+  version "0.0.0-6da04b5d8"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-6da04b5d8.tgz#5e0ec65c2b0a7f05ffdc5522fc3a6d95b693e5c9"
+  integrity sha512-upTrWBZvk4IjMsC/AcRpgCwjnSQl8i78+07KmcndqWOnWp7s4wauowWXhyswP9vucLtZaN5ussFdM3d7dXcTkw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 7ead6997148b1628dae43078859c2f6f539598ba Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 May 2019 13:58:49 -0700
Subject: [PATCH 553/814] Prettier

---
 .../profilingCommitTreeBuilder-test.js        |  2 --
 src/__tests__/store-test.js                   | 21 +++++++------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index bf7b63064664..1d037e778f53 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -7,7 +7,6 @@ describe('commit tree', () => {
   let React;
   let ReactDOM;
   let Scheduler;
-  let SchedulerTracing;
   let TestRenderer: TestRendererType;
   let store: Store;
   let utils;
@@ -22,7 +21,6 @@ describe('commit tree', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     TestRenderer = utils.requireTestRenderer();
   });
 
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 4208eb06ec15..38c5b33eab8e 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -3,17 +3,10 @@
 describe('Store', () => {
   let React;
   let ReactDOM;
-  let TestUtils;
   let agent;
+  let act;
+  let getRendererID;
   let store;
-  let utils;
-
-  const act = (callback: Function) => {
-    TestUtils.act(() => {
-      callback();
-    });
-    jest.runAllTimers(); // Flush Bridge operations
-  };
 
   beforeEach(() => {
     agent = global.agent;
@@ -21,8 +14,10 @@ describe('Store', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
-    utils = require('./utils');
+
+    const utils = require('./utils');
+    act = utils.act;
+    getRendererID = utils.getRendererID;
   });
 
   it('should not allow a root node to be collapsed', () => {
@@ -283,7 +278,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('7: only third child is suspended');
 
-      const rendererID = utils.getRendererID();
+      const rendererID = getRendererID();
       act(() =>
         agent.overrideSuspense({
           id: store.getElementIDAtIndex(4),
@@ -674,7 +669,7 @@ describe('Store', () => {
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
       expect(store).toMatchSnapshot('2: expand tree');
 
-      const rendererID = utils.getRendererID();
+      const rendererID = getRendererID();
       const suspenseID = store.getElementIDAtIndex(1);
 
       act(() =>

From acdc9bae674d27fb107a8ed99680148f07cfd55d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 May 2019 13:08:46 -0700
Subject: [PATCH 554/814] Added export+import profiling data test coverage Also
 fixed an incomplete import feature as well as a regression in export that had
 gone unnoticed due to previous lack of test coverage.

---
 package.json                                  |   3 +-
 src/__tests__/__mocks__/cssMock.js            |   1 +
 .../__snapshots__/profiling-test.js.snap      | 765 ++++++++++++++++++
 src/__tests__/profiling-test.js               | 205 ++++-
 src/backend/agent.js                          |   6 +-
 src/devtools/ProfilingCache.js                |  21 +-
 src/devtools/store.js                         |  12 +-
 .../views/Profiler/CommitTreeBuilder.js       |  12 +-
 .../Profiler/ProfilingImportExportButtons.js  |  41 +-
 src/devtools/views/Profiler/utils.js          |  54 +-
 10 files changed, 1043 insertions(+), 77 deletions(-)
 create mode 100644 src/__tests__/__mocks__/cssMock.js

diff --git a/package.json b/package.json
index a86f97bd333a..febe08344b3a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
       "<rootDir>"
     ],
     "moduleNameMapper": {
-      "^src/(.*)$": "<rootDir>/src/$1"
+      "^src/(.*)$": "<rootDir>/src/$1",
+      "\\.css$": "<rootDir>/src/__tests__/__mocks__/cssMock.js"
     },
     "setupFiles": [
       "<rootDir>/src/__tests__/setupEnv"
diff --git a/src/__tests__/__mocks__/cssMock.js b/src/__tests__/__mocks__/cssMock.js
new file mode 100644
index 000000000000..f053ebf7976e
--- /dev/null
+++ b/src/__tests__/__mocks__/cssMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index c0dfd222e09d..3c952e04f2b6 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -54,6 +54,222 @@ Object {
 }
 `;
 
+exports[`profiling CommitDetails should be collected for each commit: exported data 1`] = `
+Object {
+  "commitDetails": Array [
+    Object {
+      "actualDurations": Array [
+        1,
+        14,
+        2,
+        14,
+        3,
+        2,
+        4,
+        2,
+      ],
+      "commitIndex": 0,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        4,
+        2,
+        5,
+        2,
+        2,
+        16,
+        1,
+        16,
+      ],
+      "commitIndex": 1,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        2,
+        12,
+        1,
+        12,
+      ],
+      "commitIndex": 2,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        2,
+        10,
+        1,
+        10,
+      ],
+      "commitIndex": 3,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+  ],
+  "interactions": Object {
+    "interactions": Array [],
+    "rootID": 1,
+  },
+  "profilingOperations": Map {
+    1 => Array [
+      Array [
+        1,
+        1,
+        17,
+        6,
+        80,
+        97,
+        114,
+        101,
+        110,
+        116,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        48,
+        1,
+        49,
+        1,
+        1,
+        11,
+        1,
+        1,
+        4,
+        1,
+        14000,
+        1,
+        2,
+        5,
+        1,
+        0,
+        1,
+        0,
+        4,
+        2,
+        14000,
+        1,
+        3,
+        5,
+        2,
+        2,
+        2,
+        3,
+        4,
+        3,
+        2000,
+        1,
+        4,
+        5,
+        2,
+        2,
+        2,
+        4,
+        4,
+        4,
+        2000,
+      ],
+      Array [
+        1,
+        1,
+        8,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        50,
+        1,
+        5,
+        5,
+        2,
+        2,
+        1,
+        2,
+        4,
+        5,
+        2000,
+        4,
+        2,
+        16000,
+        3,
+        2,
+        3,
+        3,
+        4,
+        5,
+        4,
+        1,
+        16000,
+      ],
+      Array [
+        1,
+        1,
+        0,
+        2,
+        2,
+        5,
+        4,
+        4,
+        2,
+        12000,
+        4,
+        1,
+        12000,
+      ],
+      Array [
+        1,
+        1,
+        0,
+        2,
+        1,
+        3,
+        4,
+        2,
+        10000,
+        4,
+        1,
+        10000,
+      ],
+    ],
+  },
+  "profilingSnapshots": Map {
+    1 => Map {},
+  },
+  "profilingSummary": Object {
+    "commitDurations": Array [
+      14,
+      16,
+      12,
+      10,
+    ],
+    "commitTimes": Array [
+      14,
+      30,
+      42,
+      52,
+    ],
+    "initialTreeBaseDurations": Array [],
+    "interactionCount": 0,
+    "rootID": 1,
+  },
+  "version": 1,
+}
+`;
+
 exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 2 1`] = `
 Object {
   "commitDurations": Array [
@@ -108,6 +324,202 @@ Object {
 }
 `;
 
+exports[`profiling FiberCommits should be collected for each rendered fiber: exported data 1`] = `
+Object {
+  "commitDetails": Array [
+    Object {
+      "actualDurations": Array [
+        1,
+        12,
+        2,
+        12,
+        3,
+        2,
+      ],
+      "commitIndex": 0,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        4,
+        2,
+        2,
+        14,
+        1,
+        14,
+      ],
+      "commitIndex": 1,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        4,
+        2,
+        5,
+        2,
+        2,
+        16,
+        1,
+        16,
+      ],
+      "commitIndex": 2,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+  ],
+  "interactions": Object {
+    "interactions": Array [],
+    "rootID": 1,
+  },
+  "profilingOperations": Map {
+    1 => Array [
+      Array [
+        1,
+        1,
+        15,
+        6,
+        80,
+        97,
+        114,
+        101,
+        110,
+        116,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        48,
+        1,
+        1,
+        11,
+        1,
+        1,
+        4,
+        1,
+        12000,
+        1,
+        2,
+        5,
+        1,
+        0,
+        1,
+        0,
+        4,
+        2,
+        12000,
+        1,
+        3,
+        5,
+        2,
+        2,
+        2,
+        3,
+        4,
+        3,
+        2000,
+      ],
+      Array [
+        1,
+        1,
+        8,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        49,
+        1,
+        4,
+        5,
+        2,
+        2,
+        1,
+        2,
+        4,
+        4,
+        2000,
+        4,
+        2,
+        14000,
+        3,
+        2,
+        2,
+        3,
+        4,
+        4,
+        1,
+        14000,
+      ],
+      Array [
+        1,
+        1,
+        8,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        50,
+        1,
+        5,
+        5,
+        2,
+        2,
+        1,
+        2,
+        4,
+        5,
+        2000,
+        4,
+        2,
+        16000,
+        3,
+        2,
+        3,
+        3,
+        4,
+        5,
+        4,
+        1,
+        16000,
+      ],
+    ],
+  },
+  "profilingSnapshots": Map {
+    1 => Map {},
+  },
+  "profilingSummary": Object {
+    "commitDurations": Array [
+      12,
+      14,
+      16,
+    ],
+    "commitTimes": Array [
+      12,
+      26,
+      42,
+    ],
+    "initialTreeBaseDurations": Array [],
+    "interactionCount": 0,
+    "rootID": 1,
+  },
+  "version": 1,
+}
+`;
+
 exports[`profiling Interactions should be collected for every traced interaction: Interactions 1`] = `
 Array [
   Object {
@@ -131,6 +543,181 @@ Array [
 ]
 `;
 
+exports[`profiling Interactions should be collected for every traced interaction: exported data 1`] = `
+Object {
+  "commitDetails": Array [
+    Object {
+      "actualDurations": Array [
+        1,
+        12,
+        2,
+        12,
+        3,
+        2,
+      ],
+      "commitIndex": 0,
+      "interactions": Array [
+        Object {
+          "__count": 1,
+          "id": 0,
+          "name": "mount: one child",
+          "timestamp": 0,
+        },
+      ],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        4,
+        2,
+        2,
+        14,
+        1,
+        14,
+      ],
+      "commitIndex": 1,
+      "interactions": Array [
+        Object {
+          "__count": 0,
+          "id": 1,
+          "name": "update: two children",
+          "timestamp": 12,
+        },
+      ],
+      "rootID": 1,
+    },
+  ],
+  "interactions": Object {
+    "interactions": Array [
+      Object {
+        "__count": 1,
+        "commits": Array [
+          0,
+        ],
+        "id": 0,
+        "name": "mount: one child",
+        "timestamp": 0,
+      },
+      Object {
+        "__count": 0,
+        "commits": Array [
+          1,
+        ],
+        "id": 1,
+        "name": "update: two children",
+        "timestamp": 12,
+      },
+    ],
+    "rootID": 1,
+  },
+  "profilingOperations": Map {
+    1 => Array [
+      Array [
+        1,
+        1,
+        15,
+        6,
+        80,
+        97,
+        114,
+        101,
+        110,
+        116,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        48,
+        1,
+        1,
+        11,
+        1,
+        1,
+        4,
+        1,
+        12000,
+        1,
+        2,
+        5,
+        1,
+        0,
+        1,
+        0,
+        4,
+        2,
+        12000,
+        1,
+        3,
+        5,
+        2,
+        2,
+        2,
+        3,
+        4,
+        3,
+        2000,
+      ],
+      Array [
+        1,
+        1,
+        8,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        49,
+        1,
+        4,
+        5,
+        2,
+        2,
+        1,
+        2,
+        4,
+        4,
+        2000,
+        4,
+        2,
+        14000,
+        3,
+        2,
+        2,
+        3,
+        4,
+        4,
+        1,
+        14000,
+      ],
+    ],
+  },
+  "profilingSnapshots": Map {
+    1 => Map {},
+  },
+  "profilingSummary": Object {
+    "commitDurations": Array [
+      12,
+      14,
+    ],
+    "commitTimes": Array [
+      12,
+      26,
+    ],
+    "initialTreeBaseDurations": Array [],
+    "interactionCount": 2,
+    "rootID": 1,
+  },
+  "version": 1,
+}
+`;
+
 exports[`profiling ProfilingSummary should be collected for each commit: ProfilingSummary 1`] = `
 Object {
   "commitDurations": Array [
@@ -153,3 +740,181 @@ Object {
   "rootID": 1,
 }
 `;
+
+exports[`profiling ProfilingSummary should be collected for each commit: exported data 1`] = `
+Object {
+  "commitDetails": Array [
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        4,
+        2,
+        5,
+        2,
+        2,
+        16,
+        1,
+        16,
+      ],
+      "commitIndex": 0,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        3,
+        2,
+        2,
+        12,
+        1,
+        12,
+      ],
+      "commitIndex": 1,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+    Object {
+      "actualDurations": Array [
+        2,
+        10,
+        1,
+        10,
+      ],
+      "commitIndex": 2,
+      "interactions": Array [],
+      "rootID": 1,
+    },
+  ],
+  "interactions": Object {
+    "interactions": Array [],
+    "rootID": 1,
+  },
+  "profilingOperations": Map {
+    1 => Array [
+      Array [
+        1,
+        1,
+        8,
+        5,
+        67,
+        104,
+        105,
+        108,
+        100,
+        1,
+        50,
+        1,
+        5,
+        5,
+        2,
+        2,
+        1,
+        2,
+        4,
+        5,
+        2000,
+        4,
+        2,
+        16000,
+        3,
+        2,
+        3,
+        3,
+        4,
+        5,
+        4,
+        1,
+        16000,
+      ],
+      Array [
+        1,
+        1,
+        0,
+        2,
+        2,
+        5,
+        4,
+        4,
+        2,
+        12000,
+        4,
+        1,
+        12000,
+      ],
+      Array [
+        1,
+        1,
+        0,
+        2,
+        1,
+        3,
+        4,
+        2,
+        10000,
+        4,
+        1,
+        10000,
+      ],
+    ],
+  },
+  "profilingSnapshots": Map {
+    1 => Map {
+      1 => Object {
+        "children": Array [
+          2,
+        ],
+        "displayName": null,
+        "id": 1,
+        "key": null,
+      },
+      2 => Object {
+        "children": Array [
+          3,
+          4,
+        ],
+        "displayName": "Parent",
+        "id": 2,
+        "key": null,
+      },
+      3 => Object {
+        "children": Array [],
+        "displayName": "Child",
+        "id": 3,
+        "key": "0",
+      },
+      4 => Object {
+        "children": Array [],
+        "displayName": "Child",
+        "id": 4,
+        "key": "1",
+      },
+    },
+  },
+  "profilingSummary": Object {
+    "commitDurations": Array [
+      16,
+      12,
+      10,
+    ],
+    "commitTimes": Array [
+      16,
+      28,
+      38,
+    ],
+    "initialTreeBaseDurations": Array [
+      1,
+      14,
+      2,
+      14,
+      3,
+      2,
+      4,
+      2,
+    ],
+    "interactionCount": 0,
+    "rootID": 1,
+  },
+  "version": 1,
+}
+`;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 39dd595e49ec..52070bcaa7d2 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -1,6 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
+import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('profiling', () => {
@@ -9,13 +10,55 @@ describe('profiling', () => {
   let Scheduler;
   let SchedulerTracing;
   let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
   let store: Store;
   let utils;
 
+  const exportImportHelper = (rendererID: number, rootID: number) => {
+    const {
+      prepareProfilingExport,
+      prepareProfilingImport,
+    } = require('src/devtools/views/Profiler/utils');
+
+    let exportedProfilingSummary;
+    bridge.addListener('exportFile', ({ contents }) => {
+      exportedProfilingSummary = contents;
+    });
+
+    utils.act(() => {
+      const exportProfilingSummary = prepareProfilingExport(
+        store.profilingOperations,
+        store.profilingSnapshots,
+        rootID,
+        rendererID
+      );
+      bridge.send('exportProfilingSummary', exportProfilingSummary);
+    });
+
+    expect(exportedProfilingSummary).toBeDefined();
+
+    const importedProfilingSummary = prepareProfilingImport(
+      ((exportedProfilingSummary: any): string)
+    );
+
+    // Sanity check that profiling snapshots are serialized correctly.
+    expect(store.profilingSnapshots.get(rootID)).toEqual(
+      importedProfilingSummary.profilingSnapshots.get(rootID)
+    );
+
+    // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
+    expect(importedProfilingSummary).toMatchSnapshot('exported data');
+
+    utils.act(() => {
+      store.importedProfilingData = importedProfilingSummary;
+    });
+  };
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
 
@@ -48,15 +91,18 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={0} />, container));
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      let profilingSummary = null;
 
-      function Suspender({ rendererID, rootID }) {
-        const profilingSummary = store.profilingCache.ProfilingSummary.read({
+      function Suspender({ previousPofilingSummary, rendererID, rootID }) {
+        profilingSummary = store.profilingCache.ProfilingSummary.read({
           rendererID,
           rootID,
         });
-        suspenseResolved = true;
-        expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
+        if (previousPofilingSummary != null) {
+          expect(profilingSummary).toEqual(previousPofilingSummary);
+        } else {
+          expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
+        }
         return null;
       }
 
@@ -66,12 +112,30 @@ describe('profiling', () => {
       await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
-            <Suspender rendererID={rendererID} rootID={rootID} />
+            <Suspender
+              previousPofilingSummary={null}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
           </React.Suspense>
         )
       );
 
-      expect(suspenseResolved).toBe(true);
+      expect(profilingSummary).not.toBeNull();
+
+      exportImportHelper(rendererID, rootID);
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              previousPofilingSummary={profilingSummary}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
+      );
 
       done();
     });
@@ -99,38 +163,65 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={0} />, container));
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      const allCommitDetails = [];
 
-      function Suspender({ commitIndex, rendererID, rootID }) {
+      function Suspender({
+        commitIndex,
+        previousCommitDetails,
+        rendererID,
+        rootID,
+      }) {
         const commitDetails = store.profilingCache.CommitDetails.read({
           commitIndex,
           rendererID,
           rootID,
         });
-        suspenseResolved = true;
-        expect(commitDetails).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`
-        );
+        if (previousCommitDetails != null) {
+          expect(commitDetails).toEqual(previousCommitDetails);
+        } else {
+          allCommitDetails.push(commitDetails);
+          expect(commitDetails).toMatchSnapshot(
+            `CommitDetails commitIndex: ${commitIndex}`
+          );
+        }
         return null;
       }
 
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      for (let commitIndex = 0; commitIndex <= 3; commitIndex++) {
-        suspenseResolved = false;
+      for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
         await utils.actSuspense(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
                 commitIndex={commitIndex}
+                previousCommitDetails={null}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          );
+        });
+      }
+
+      expect(allCommitDetails).toHaveLength(4);
+
+      exportImportHelper(rendererID, rootID);
+
+      for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+        await utils.actSuspense(() => {
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                previousCommitDetails={allCommitDetails[commitIndex]}
                 rendererID={rendererID}
                 rootID={rootID}
               />
             </React.Suspense>
           );
         });
-        expect(suspenseResolved).toBe(true);
       }
 
       done();
@@ -158,18 +249,27 @@ describe('profiling', () => {
       utils.act(() => ReactDOM.render(<Parent count={3} />, container));
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      const allFiberCommits = [];
 
-      function Suspender({ fiberID, rendererID, rootID }) {
+      function Suspender({
+        fiberID,
+        previousFiberCommits,
+        rendererID,
+        rootID,
+      }) {
         const fiberCommits = store.profilingCache.FiberCommits.read({
           fiberID,
           rendererID,
           rootID,
         });
-        suspenseResolved = true;
-        expect(fiberCommits).toMatchSnapshot(
-          `FiberCommits: element ${fiberID}`
-        );
+        if (previousFiberCommits != null) {
+          expect(fiberCommits).toEqual(previousFiberCommits);
+        } else {
+          allFiberCommits.push(fiberCommits);
+          expect(fiberCommits).toMatchSnapshot(
+            `FiberCommits: element ${fiberID}`
+          );
+        }
         return null;
       }
 
@@ -177,7 +277,6 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
-        suspenseResolved = false;
         await utils.actSuspense(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
@@ -187,13 +286,36 @@ describe('profiling', () => {
             <React.Suspense fallback={null}>
               <Suspender
                 fiberID={fiberID}
+                previousFiberCommits={null}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          );
+        });
+      }
+
+      expect(allFiberCommits).toHaveLength(store.numElements);
+
+      exportImportHelper(rendererID, rootID);
+
+      for (let index = 0; index < store.numElements; index++) {
+        await utils.actSuspense(() => {
+          const fiberID = store.getElementIDAtIndex(index);
+          if (fiberID == null) {
+            throw Error(`Unexpected null ID for element at index ${index}`);
+          }
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                fiberID={fiberID}
+                previousFiberCommits={allFiberCommits[index]}
                 rendererID={rendererID}
                 rootID={rootID}
               />
             </React.Suspense>
           );
         });
-        expect(suspenseResolved).toBe(true);
       }
 
       done();
@@ -232,15 +354,18 @@ describe('profiling', () => {
       );
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      let interactions = null;
 
-      function Suspender({ rendererID, rootID }) {
-        const interactions = store.profilingCache.Interactions.read({
+      function Suspender({ previousInteractions, rendererID, rootID }) {
+        interactions = store.profilingCache.Interactions.read({
           rendererID,
           rootID,
         });
-        suspenseResolved = true;
-        expect(interactions).toMatchSnapshot('Interactions');
+        if (previousInteractions != null) {
+          expect(interactions).toEqual(previousInteractions);
+        } else {
+          expect(interactions).toMatchSnapshot('Interactions');
+        }
         return null;
       }
 
@@ -250,12 +375,30 @@ describe('profiling', () => {
       await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
-            <Suspender rendererID={rendererID} rootID={rootID} />
+            <Suspender
+              previousInteractions={null}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
           </React.Suspense>
         )
       );
 
-      expect(suspenseResolved).toBe(true);
+      expect(interactions).not.toBeNull();
+
+      exportImportHelper(rendererID, rootID);
+
+      await utils.actSuspense(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              previousInteractions={interactions}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
+      );
 
       done();
     });
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 715fb4b9e296..1a12eee29a95 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -151,12 +151,12 @@ export default class Agent extends EventEmitter {
 
   exportProfilingSummary = ({
     profilingOperations,
-    profilingSnapshot,
+    profilingSnapshots,
     rendererID,
     rootID,
   }: {
     profilingOperations: Array<any>,
-    profilingSnapshot: Array<any>,
+    profilingSnapshots: Array<any>,
     rendererID: number,
     rootID: number,
   }) => {
@@ -170,7 +170,7 @@ export default class Agent extends EventEmitter {
           {
             ...rendererData,
             profilingOperations,
-            profilingSnapshot,
+            profilingSnapshots,
           },
           null,
           2
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 1ebbba06e17b..9ef88565c8d7 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -144,8 +144,25 @@ export default class ProfilingCache {
       return new Promise(resolve => {
         const importedProfilingData = this._store.importedProfilingData;
         if (importedProfilingData !== null) {
-          // TODO (profiling) commit details
-          // Copy from renderer getFiberCommits()
+          const { commitDetails } = (importedProfilingData: any);
+          if (commitDetails != null) {
+            const commitDurations = [];
+            commitDetails.forEach(({ actualDurations }, commitIndex) => {
+              for (let i = 0; i < actualDurations.length; i += 2) {
+                if (actualDurations[i] === fiberID) {
+                  commitDurations.push(commitIndex, actualDurations[i + 1]);
+                  break;
+                }
+              }
+            });
+            this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);
+            this.onFiberCommits({
+              commitDurations,
+              fiberID,
+              rootID,
+            });
+            return;
+          }
         } else if (this._store.profilingOperations.has(rootID)) {
           this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);
           this._bridge.send('getFiberCommits', {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 7a84b3364760..b4c2403fe0ab 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -707,11 +707,11 @@ export default class Store extends EventEmitter {
 
   _takeProfilingSnapshotRecursive = (
     elementID: number,
-    profilingSnapshot: Map<number, ProfilingSnapshotNode>
+    profilingSnapshots: Map<number, ProfilingSnapshotNode>
   ) => {
     const element = this.getElementByID(elementID);
     if (element !== null) {
-      profilingSnapshot.set(elementID, {
+      profilingSnapshots.set(elementID, {
         id: elementID,
         children: element.children.slice(0),
         displayName: element.displayName,
@@ -719,7 +719,7 @@ export default class Store extends EventEmitter {
       });
 
       element.children.forEach(childID =>
-        this._takeProfilingSnapshotRecursive(childID, profilingSnapshot)
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)
       );
     }
   };
@@ -1067,9 +1067,9 @@ export default class Store extends EventEmitter {
       this._profilingScreenshotsByRootID = new Map();
       this._profilingSnapshotsByRootID = new Map();
       this.roots.forEach(rootID => {
-        const profilingSnapshot = new Map();
-        this._profilingSnapshotsByRootID.set(rootID, profilingSnapshot);
-        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshot);
+        const profilingSnapshots = new Map();
+        this._profilingSnapshotsByRootID.set(rootID, profilingSnapshots);
+        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
       });
     }
 
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 93f8bbcc85fa..ed61f3a535f3 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -68,12 +68,12 @@ export function getCommitTree({
     const nodes = new Map();
 
     const { importedProfilingData } = store;
-    const profilingSnapshot =
+    const profilingSnapshots =
       importedProfilingData != null
         ? importedProfilingData.profilingSnapshots.get(rootID)
         : store.profilingSnapshots.get(rootID);
 
-    if (profilingSnapshot == null) {
+    if (profilingSnapshots == null) {
       throw Error(`Could not find profiling snapshot for root "${rootID}"`);
     }
 
@@ -83,7 +83,7 @@ export function getCommitTree({
       0,
       nodes,
       profilingSummary.initialTreeBaseDurations,
-      profilingSnapshot
+      profilingSnapshots
     );
 
     // Mutate the tree
@@ -133,9 +133,9 @@ function recursivelyInitializeTree(
   parentID: number,
   nodes: Map<number, CommitTreeNodeFrontend>,
   initialTreeBaseDurations: Map<number, number>,
-  profilingSnapshot: Map<number, ProfilingSnapshotNode>
+  profilingSnapshots: Map<number, ProfilingSnapshotNode>
 ): void {
-  const node = profilingSnapshot.get(id);
+  const node = profilingSnapshots.get(id);
   if (node != null) {
     nodes.set(id, {
       id,
@@ -152,7 +152,7 @@ function recursivelyInitializeTree(
         id,
         nodes,
         initialTreeBaseDurations,
-        profilingSnapshot
+        profilingSnapshots
       )
     );
   }
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index fd6d5820a82e..ccdaef6efb8e 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -5,6 +5,7 @@ import { ProfilerContext } from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
+import { prepareProfilingExport, prepareProfilingImport } from './utils';
 
 import styles from './ProfilingImportExportButtons.css';
 
@@ -20,32 +21,19 @@ export default function ProfilingImportExportButtons() {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const downloadData = useCallback(() => {
-    if (rootID === null) {
+    if (rendererID === null || rootID === null) {
       return;
     }
 
-    const profilingOperationsForRoot = [];
-    const operations = store.profilingOperations.get(rootID);
-    if (operations != null) {
-      operations.forEach(operations => {
-        // Convert typed Array before JSON serialization, or it will be converted to an Object.
-        profilingOperationsForRoot.push(Array.from(operations));
-      });
-    }
-
-    const profilingSnapshotForRoot = [];
-    const queue = [rootID];
-    while (queue.length) {
-      const id = queue.pop();
-      profilingSnapshotForRoot.push([id, store.profilingSnapshots.get(id)]);
-    }
-
-    bridge.send('exportProfilingSummary', {
-      profilingOperations: [[rootID, profilingOperationsForRoot]],
-      profilingSnapshot: profilingSnapshotForRoot,
-      rendererID,
-      rootID,
-    });
+    bridge.send(
+      'exportProfilingSummary',
+      prepareProfilingExport(
+        store.profilingOperations,
+        store.profilingSnapshots,
+        rootID,
+        rendererID
+      )
+    );
   }, [
     bridge,
     rendererID,
@@ -65,11 +53,10 @@ export default function ProfilingImportExportButtons() {
     if (input !== null && input.files.length > 0) {
       const fileReader = new FileReader();
       fileReader.addEventListener('load', () => {
-        const data = JSON.parse((fileReader.result: any));
-        data.profilingOperations = new Map(data.profilingOperations);
-        data.profilingSnapshot = new Map(data.profilingSnapshot);
+        const raw = ((fileReader.result: any): string);
+        const data = prepareProfilingImport(raw);
 
-        // TODO (profiling) Version check; warn if older version.
+        // TODO (profiling) Catch possible version check error and show dialog.
 
         store.importedProfilingData = ((data: any): ImportedProfilingData);
       });
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 61d2725c76d4..6dfef38d8654 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,6 +1,10 @@
 // @flow
 
-import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
+import type {
+  CommitDetailsFrontend,
+  CommitTreeFrontend,
+  ProfilingSnapshotNode,
+} from './types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -43,6 +47,54 @@ export const calculateSelfDuration = (
   return selfDuration;
 };
 
+export const prepareProfilingExport = (
+  profilingOperations: Map<number, Array<Uint32Array>>,
+  profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
+  rendererID: number,
+  rootID: number
+) => {
+  const profilingOperationsForRoot = [];
+  const operations = profilingOperations.get(rootID);
+  if (operations != null) {
+    operations.forEach(operations => {
+      // Convert typed Array before JSON serialization, or it will be converted to an Object.
+      profilingOperationsForRoot.push(Array.from<number>(operations));
+    });
+  }
+
+  // Convert Map to Object or JSON.stringify will clobber the contents.
+  const profilingSnapshotsForRoot = {};
+  const profilingSnapshotsMap = profilingSnapshots.get(rootID);
+  if (profilingSnapshotsMap != null) {
+    for (let [id, snapshot] of profilingSnapshotsMap.entries()) {
+      profilingSnapshotsForRoot[id] = snapshot;
+    }
+  }
+
+  return {
+    profilingOperations: profilingOperationsForRoot,
+    profilingSnapshots: profilingSnapshotsForRoot,
+    rendererID,
+    rootID,
+  };
+};
+
+export const prepareProfilingImport = (raw: string) => {
+  const parsed = JSON.parse(raw);
+
+  // TODO (profiling) Version check; throw if older version.
+
+  const entries = [];
+  Object.values(parsed.profilingSnapshots).forEach(snapshot => {
+    entries.push([(snapshot: any).id, snapshot]);
+  });
+
+  const rootID = parsed.profilingSummary.rootID;
+  parsed.profilingOperations = new Map([[rootID, parsed.profilingOperations]]);
+  parsed.profilingSnapshots = new Map([[rootID, new Map(entries)]]);
+  return parsed;
+};
+
 export const getGradientColor = (value: number) => {
   const maxIndex = commitGradient.length - 1;
   let index;

From 278661715c28b01b9c32b775679e9636baad2b18 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 May 2019 14:38:11 -0700
Subject: [PATCH 555/814] Show import error dialog if profiling data import
 fails

---
 .../__snapshots__/profiling-test.js.snap      |  8 +--
 src/__tests__/profiling-test.js               | 13 +++++
 src/backend/renderer.js                       |  3 +-
 src/constants.js                              |  2 +
 ...{FilterModal.css => CommitFilterModal.css} |  0
 .../{FilterModal.js => CommitFilterModal.js}  | 14 +++---
 .../Profiler/CommitFilterModalContext.js      | 12 ++---
 .../views/Profiler/ImportFailedModal.css      | 39 +++++++++++++++
 .../views/Profiler/ImportFailedModal.js       | 35 +++++++++++++
 .../Profiler/ImportFailedModalContext.js      | 37 ++++++++++++++
 src/devtools/views/Profiler/Profiler.js       | 49 ++++++++++++-------
 .../Profiler/ProfilingImportExportButtons.js  | 17 ++++---
 .../Profiler/ToggleCommitFilterModalButton.js |  6 +--
 src/devtools/views/Profiler/utils.js          |  6 ++-
 14 files changed, 197 insertions(+), 44 deletions(-)
 rename src/devtools/views/Profiler/{FilterModal.css => CommitFilterModal.css} (100%)
 rename src/devtools/views/Profiler/{FilterModal.js => CommitFilterModal.js} (84%)
 create mode 100644 src/devtools/views/Profiler/ImportFailedModal.css
 create mode 100644 src/devtools/views/Profiler/ImportFailedModal.js
 create mode 100644 src/devtools/views/Profiler/ImportFailedModalContext.js

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index 3c952e04f2b6..d508f633a559 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -266,7 +266,7 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 1,
+  "version": 2,
 }
 `;
 
@@ -516,7 +516,7 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 1,
+  "version": 2,
 }
 `;
 
@@ -714,7 +714,7 @@ Object {
     "interactionCount": 2,
     "rootID": 1,
   },
-  "version": 1,
+  "version": 2,
 }
 `;
 
@@ -915,6 +915,6 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 1,
+  "version": 2,
 }
 `;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 52070bcaa7d2..37b7d40ccc96 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -69,6 +69,19 @@ describe('profiling', () => {
     TestRenderer = utils.requireTestRenderer();
   });
 
+  it('should throw if importing older/unsupported data', () => {
+    const {
+      prepareProfilingImport,
+    } = require('src/devtools/views/Profiler/utils');
+    expect(() =>
+      prepareProfilingImport(
+        JSON.stringify({
+          version: 0,
+        })
+      )
+    ).toThrow('Unsupported profiler export version "0"');
+  });
+
   describe('ProfilingSummary', () => {
     it('should be collected for each commit', async done => {
       const Parent = ({ count }) => {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4917a51d8948..4c7e0c175241 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -18,6 +18,7 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
 } from 'src/types';
+import { PROFILER_EXPORT_VERSION } from 'src/constants';
 import {
   getDisplayName,
   getSavedComponentFilters,
@@ -2058,7 +2059,7 @@ export function attach(
       }
     }
     return {
-      version: 1,
+      version: PROFILER_EXPORT_VERSION,
       profilingSummary: getProfilingSummary(rootID),
       commitDetails,
       interactions: getInteractions(rootID),
diff --git a/src/constants.js b/src/constants.js
index fcbf9cb65e82..0ba0cb8b6981 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -15,3 +15,5 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
 
 export const __DEBUG__ = false;
+
+export const PROFILER_EXPORT_VERSION = 2;
diff --git a/src/devtools/views/Profiler/FilterModal.css b/src/devtools/views/Profiler/CommitFilterModal.css
similarity index 100%
rename from src/devtools/views/Profiler/FilterModal.css
rename to src/devtools/views/Profiler/CommitFilterModal.css
diff --git a/src/devtools/views/Profiler/FilterModal.js b/src/devtools/views/Profiler/CommitFilterModal.js
similarity index 84%
rename from src/devtools/views/Profiler/FilterModal.js
rename to src/devtools/views/Profiler/CommitFilterModal.js
index f1c1477e8ddd..c47c254e0a3c 100644
--- a/src/devtools/views/Profiler/FilterModal.js
+++ b/src/devtools/views/Profiler/CommitFilterModal.js
@@ -1,16 +1,13 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { CommitFilterModalContext } from './CommitFilterModalContext';
 import { ProfilerContext } from './ProfilerContext';
 import { useModalDismissSignal } from '../hooks';
 
-import styles from './FilterModal.css';
+import styles from './CommitFilterModal.css';
 
-type Props = {|
-  dismissModal: () => void,
-|};
-
-export default function FilterModal({ dismissModal }: Props) {
+export default function FilterModal(_: {||}) {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
@@ -18,6 +15,11 @@ export default function FilterModal({ dismissModal }: Props) {
     setMinCommitDuration,
   } = useContext(ProfilerContext);
 
+  const { setIsModalShowing } = useContext(CommitFilterModalContext);
+  const dismissModal = useCallback(() => setIsModalShowing(false), [
+    setIsModalShowing,
+  ]);
+
   const handleNumberChange = useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const newValue = parseFloat(event.currentTarget.value);
diff --git a/src/devtools/views/Profiler/CommitFilterModalContext.js b/src/devtools/views/Profiler/CommitFilterModalContext.js
index fc68ad88a882..37412b8fe72b 100644
--- a/src/devtools/views/Profiler/CommitFilterModalContext.js
+++ b/src/devtools/views/Profiler/CommitFilterModalContext.js
@@ -3,8 +3,8 @@
 import React, { createContext, useMemo, useState } from 'react';
 
 type Context = {|
-  isFilterModalShowing: boolean,
-  setIsFilterModalShowing: (value: boolean) => void,
+  isModalShowing: boolean,
+  setIsModalShowing: (value: boolean) => void,
 |};
 
 const CommitFilterModalContext = createContext<Context>(((null: any): Context));
@@ -15,14 +15,14 @@ type Props = {|
 |};
 
 function CommitFilterModalContextController({ children }: Props) {
-  const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);
+  const [isModalShowing, setIsModalShowing] = useState(false);
 
   const value = useMemo(
     () => ({
-      isFilterModalShowing,
-      setIsFilterModalShowing,
+      isModalShowing,
+      setIsModalShowing,
     }),
-    [isFilterModalShowing]
+    [isModalShowing]
   );
 
   return (
diff --git a/src/devtools/views/Profiler/ImportFailedModal.css b/src/devtools/views/Profiler/ImportFailedModal.css
new file mode 100644
index 000000000000..ec0416caf1c9
--- /dev/null
+++ b/src/devtools/views/Profiler/ImportFailedModal.css
@@ -0,0 +1,39 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--color-modal-background);
+  overflow: auto;
+}
+
+.Dialog {
+  position: relative;
+  z-index: 3;
+  min-width: 20rem;
+  max-width: 100%;
+  display: inline-block;
+  background-color: var(--color-background);
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.Buttons {
+  text-align: right;
+}
+
+.ErrorMessage {
+  margin: 0.5rem 0;
+  color: var(--color-dim);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
diff --git a/src/devtools/views/Profiler/ImportFailedModal.js b/src/devtools/views/Profiler/ImportFailedModal.js
new file mode 100644
index 000000000000..8f28220c502c
--- /dev/null
+++ b/src/devtools/views/Profiler/ImportFailedModal.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { useCallback, useContext, useRef } from 'react';
+import { ImportFailedModalContext } from './ImportFailedModalContext';
+import Button from '../Button';
+import { useModalDismissSignal } from '../hooks';
+
+import styles from './ImportFailedModal.css';
+
+export default function ImportFailedModal(_: {||}) {
+  const { importError, setImportError } = useContext(ImportFailedModalContext);
+  const dismissModal = useCallback(() => setImportError(null), [
+    setImportError,
+  ]);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  useModalDismissSignal(modalRef, dismissModal);
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Dialog} ref={modalRef}>
+        <div className={styles.Header}>Import failed</div>
+        <div>The profiling data you selected cannot be imported.</div>
+        {importError !== null && (
+          <div className={styles.ErrorMessage}>{importError.message}</div>
+        )}
+        <div className={styles.Buttons}>
+          <Button autoFocus onClick={dismissModal}>
+            Okay
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/ImportFailedModalContext.js b/src/devtools/views/Profiler/ImportFailedModalContext.js
new file mode 100644
index 000000000000..a9a138e94212
--- /dev/null
+++ b/src/devtools/views/Profiler/ImportFailedModalContext.js
@@ -0,0 +1,37 @@
+// @flow
+
+import React, { createContext, useMemo, useState } from 'react';
+
+type Context = {|
+  importError: Error | null,
+  isModalShowing: boolean,
+  setImportError: (error: Error | null) => void,
+|};
+
+const ImportFailedModalContext = createContext<Context>(((null: any): Context));
+ImportFailedModalContext.displayName = 'ImportFailedModalContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ImportFailedModalContextController({ children }: Props) {
+  const [importError, setImportError] = useState<Error | null>(null);
+
+  const value = useMemo(
+    () => ({
+      importError,
+      isModalShowing: !!importError,
+      setImportError,
+    }),
+    [importError]
+  );
+
+  return (
+    <ImportFailedModalContext.Provider value={value}>
+      {children}
+    </ImportFailedModalContext.Provider>
+  );
+}
+
+export { ImportFailedModalContext, ImportFailedModalContextController };
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index ed7b2907b0f2..2ac74a50f3ca 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,16 +1,21 @@
 // @flow
 
-import React, { Suspense, useCallback, useContext } from 'react';
+import React, { Suspense, useContext } from 'react';
 import {
   CommitFilterModalContext,
   CommitFilterModalContextController,
 } from './CommitFilterModalContext';
+import {
+  ImportFailedModalContext,
+  ImportFailedModalContextController,
+} from './ImportFailedModalContext';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
 import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
-import FilterModal from './FilterModal';
+import CommitFilterModal from './CommitFilterModal';
+import ImportFailedModal from './ImportFailedModal';
 import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
@@ -35,16 +40,20 @@ function Profiler({ supportsProfiling }: Props) {
 
   if (isProfiling || !rootHasProfilingData) {
     return (
-      <NonSuspendingProfiler
-        hasProfilingData={hasProfilingData}
-        isProfiling={isProfiling}
-        supportsProfiling={supportsProfiling}
-      />
+      <ImportFailedModalContextController>
+        <NonSuspendingProfiler
+          hasProfilingData={hasProfilingData}
+          isProfiling={isProfiling}
+          supportsProfiling={supportsProfiling}
+        />
+      </ImportFailedModalContextController>
     );
   } else {
     return (
       <CommitFilterModalContextController>
-        <SuspendingProfiler />
+        <ImportFailedModalContextController>
+          <SuspendingProfiler />
+        </ImportFailedModalContextController>
       </CommitFilterModalContextController>
     );
   }
@@ -74,6 +83,10 @@ function NonSuspendingProfiler({
     view = <NoProfilingDataForRoot />;
   }
 
+  const { isModalShowing: isImportFailedModalShowing } = useContext(
+    ImportFailedModalContext
+  );
+
   return (
     <div className={styles.Profiler}>
       <div className={styles.LeftColumn}>
@@ -92,7 +105,10 @@ function NonSuspendingProfiler({
             tabs={tabs}
           />
         </div>
-        <div className={styles.Content}>{view}</div>
+        <div className={styles.Content}>
+          {view}
+          {isImportFailedModalShowing && <ImportFailedModal />}
+        </div>
       </div>
     </div>
   );
@@ -113,13 +129,13 @@ function SuspendingProfiler() {
   const { selectedFiberID, selectedTabID, selectTab } = useContext(
     ProfilerContext
   );
-  const { isFilterModalShowing, setIsFilterModalShowing } = useContext(
+
+  const { isModalShowing: isFilterModalShowing } = useContext(
     CommitFilterModalContext
   );
-
-  const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false), [
-    setIsFilterModalShowing,
-  ]);
+  const { isModalShowing: isImportFailedModalShowing } = useContext(
+    ImportFailedModalContext
+  );
 
   let view = null;
   switch (selectedTabID) {
@@ -178,9 +194,8 @@ function SuspendingProfiler() {
         </div>
         <div className={styles.Content}>
           <Suspense fallback={<ContentFallback />}>{view}</Suspense>
-          {isFilterModalShowing && (
-            <FilterModal dismissModal={dismissFilterModal} />
-          )}
+          {isFilterModalShowing && <CommitFilterModal />}
+          {isImportFailedModalShowing && <ImportFailedModal />}
         </div>
       </div>
       <div className={styles.RightColumn}>
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index ccdaef6efb8e..d5253ab6f665 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -2,6 +2,7 @@
 
 import React, { Fragment, useContext, useCallback, useRef } from 'react';
 import { ProfilerContext } from './ProfilerContext';
+import { ImportFailedModalContext } from './ImportFailedModalContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
@@ -20,6 +21,8 @@ export default function ProfilingImportExportButtons() {
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const { setImportError } = useContext(ImportFailedModalContext);
+
   const downloadData = useCallback(() => {
     if (rendererID === null || rootID === null) {
       return;
@@ -53,16 +56,18 @@ export default function ProfilingImportExportButtons() {
     if (input !== null && input.files.length > 0) {
       const fileReader = new FileReader();
       fileReader.addEventListener('load', () => {
-        const raw = ((fileReader.result: any): string);
-        const data = prepareProfilingImport(raw);
-
-        // TODO (profiling) Catch possible version check error and show dialog.
+        try {
+          const raw = ((fileReader.result: any): string);
+          const data = prepareProfilingImport(raw);
 
-        store.importedProfilingData = ((data: any): ImportedProfilingData);
+          store.importedProfilingData = ((data: any): ImportedProfilingData);
+        } catch (error) {
+          setImportError(error);
+        }
       });
       fileReader.readAsText(input.files[0]);
     }
-  }, [store]);
+  }, [store, setImportError]);
 
   return (
     <Fragment>
diff --git a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
index 88f55298aa0d..acc40d2a643a 100644
--- a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
+++ b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
@@ -6,10 +6,10 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 
 export default function ToggleCommitFilterModalButton() {
-  const { setIsFilterModalShowing } = useContext(CommitFilterModalContext);
+  const { setIsModalShowing } = useContext(CommitFilterModalContext);
 
-  const showFilterModal = useCallback(() => setIsFilterModalShowing(true), [
-    setIsFilterModalShowing,
+  const showFilterModal = useCallback(() => setIsModalShowing(true), [
+    setIsModalShowing,
   ]);
 
   return (
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 6dfef38d8654..ca8114a31889 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,5 +1,7 @@
 // @flow
 
+import { PROFILER_EXPORT_VERSION } from 'src/constants';
+
 import type {
   CommitDetailsFrontend,
   CommitTreeFrontend,
@@ -82,7 +84,9 @@ export const prepareProfilingExport = (
 export const prepareProfilingImport = (raw: string) => {
   const parsed = JSON.parse(raw);
 
-  // TODO (profiling) Version check; throw if older version.
+  if (parsed.version !== PROFILER_EXPORT_VERSION) {
+    throw Error(`Unsupported profiler export version "${parsed.version}".`);
+  }
 
   const entries = [];
   Object.values(parsed.profilingSnapshots).forEach(snapshot => {

From 97b7fdd2d9c1505b22ac25f0902378caf0a3897d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 May 2019 14:47:37 -0700
Subject: [PATCH 556/814] Fixed a deprecated prop warning from react-window

---
 src/devtools/views/Profiler/SnapshotCommitList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js
index 16538ae1efd3..433750fdd844 100644
--- a/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -163,7 +163,7 @@ function List({
     >
       <FixedSizeList
         className={styles.List}
-        direction="horizontal"
+        layout="horizontal"
         height={height}
         itemCount={filteredCommitIndices.length}
         itemData={itemData}

From 44e90e6ef4dab6860397ae2557278c3b452e36e6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 May 2019 15:22:57 -0700
Subject: [PATCH 557/814] Upgrade @reach UI and remove tooltip fork

---
 package.json                            |   4 +-
 vendor/@reach/tooltip/es/index.js       | 482 -----------------------
 vendor/@reach/tooltip/index.js          | 502 ------------------------
 vendor/@reach/tooltip/package.json      |  36 --
 vendor/@reach/tooltip/src/.index.js.swp | Bin 32768 -> 0 bytes
 vendor/@reach/tooltip/src/index.js      | 490 -----------------------
 vendor/@reach/tooltip/styles.css        |  11 -
 yarn.lock                               | 154 ++------
 8 files changed, 41 insertions(+), 1638 deletions(-)
 delete mode 100644 vendor/@reach/tooltip/es/index.js
 delete mode 100644 vendor/@reach/tooltip/index.js
 delete mode 100644 vendor/@reach/tooltip/package.json
 delete mode 100644 vendor/@reach/tooltip/src/.index.js.swp
 delete mode 100644 vendor/@reach/tooltip/src/index.js
 delete mode 100644 vendor/@reach/tooltip/styles.css

diff --git a/package.json b/package.json
index febe08344b3a..3958ceb4bdea 100644
--- a/package.json
+++ b/package.json
@@ -76,8 +76,8 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@reach/menu-button": "^0.1.12",
-    "@reach/tooltip": "file:./vendor/@reach/tooltip",
+    "@reach/menu-button": "^0.1.17",
+    "@reach/tooltip": "^0.2.0",
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
diff --git a/vendor/@reach/tooltip/es/index.js b/vendor/@reach/tooltip/es/index.js
deleted file mode 100644
index 7dd9a012bc95..000000000000
--- a/vendor/@reach/tooltip/es/index.js
+++ /dev/null
@@ -1,482 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-////////////////////////////////////////////////////////////////////////////////
-// Welcome to @reach/tooltip!
-//
-// Quick definitions:
-//
-// - "on rest" or "rested on": describes when the element receives keyboard
-//   focus or mouse hover after a short delay (and hopefully soon, touch
-//   longpress).
-//
-// - "activation": describes a mouse click, keyboard enter, or keyboard space.
-//
-// Only one tooltip can be visible at a time, so we use a global state chart to
-// describe the various states and transitions between states that are
-// possible.  With the all the timeouts involved with tooltips it's important to
-// "make impossible states impossible" with a state machine.
-//
-// It's also okay to use these module globals because you don't server render
-// tooltips. None of the state is changed outside of user events.
-//
-// There are a few features that are important to understand.
-//
-// 1. Tooltips don't show up until the user has rested on one, we don't
-//    want tooltips popupping up as you move your mouse around the page.
-//
-// 2. Once any tooltip becomes visible, other tooltips nearby should skip
-//    resting and display immediately.
-//
-// 3. Tooltips stick around for a little bit after blur/mouseleave.
-
-/* eslint-disable default-case */
-
-import React, { Fragment, cloneElement, Children, useState, useRef, forwardRef, useEffect } from "react";
-import { useId } from "@reach/auto-id";
-import { wrapEvent } from "@reach/utils";
-import Portal from "@reach/portal";
-import VisuallyHidden from "@reach/visually-hidden";
-import { useRect } from "@reach/rect";
-import { node, string, func } from "prop-types";
-
-////////////////////////////////////////////////////////////////////////////////
-var chart = {
-  initial: "idle",
-  states: {
-    idle: {
-      enter: clearContextId,
-      on: {
-        mouseenter: "focused",
-        focus: "focused"
-      }
-    },
-    focused: {
-      enter: startRestTimer,
-      leave: clearRestTimer,
-      on: {
-        mousemove: "focused",
-        mouseleave: "idle",
-        mousedown: "dismissed",
-        blur: "idle",
-        rest: "visible"
-      }
-    },
-    visible: {
-      on: {
-        mouseleave: "leavingVisible",
-        blur: "leavingVisible",
-        mousedown: "dismissed",
-        selectWithKeyboard: "dismissed"
-      }
-    },
-    leavingVisible: {
-      enter: startLeavingVisibleTimer,
-      leave: function leave() {
-        clearLeavingVisibleTimer();
-        clearContextId();
-      },
-      on: {
-        mouseenter: "visible",
-        focus: "visible",
-        timecomplete: "idle"
-      }
-    },
-    dismissed: {
-      leave: function leave() {
-        // allows us to come on back later w/o entering something else first
-        context.id = null;
-      },
-      on: {
-        mouseleave: "idle",
-        blur: "idle"
-      }
-    }
-  }
-};
-
-// chart context allows us to persist some data around, in Tooltip all we use
-// is the id of the current tooltip being interacted with.
-var context = { id: null };
-var state = chart.initial;
-
-////////////////////////////////////////////////////////////////////////////////
-// Finds the next state from the current state + action. If the chart doesn't
-// describe that transition, it will throw.
-//
-// It also manages lifecycles of the machine, (enter/leave hooks on the state
-// chart)
-function transition(action, newContext) {
-  var stateDef = chart.states[state];
-  var nextState = stateDef.on[action];
-
-  if (!nextState) {
-    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
-  }
-
-  if (stateDef.leave) {
-    stateDef.leave();
-  }
-
-  if (newContext) {
-    context = newContext;
-  }
-
-  var nextDef = chart.states[nextState];
-  if (nextDef.enter) {
-    nextDef.enter();
-  }
-
-  state = nextState;
-  notify();
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Subscriptions:
-//
-// We could require apps to render a <TooltipProvider> around the app and use
-// React context to notify Tooltips of changes to our state machine, instead
-// we manage subscriptions ourselves and simplify the Tooltip API.
-//
-// Maybe if default context could take a hook (instead of just a static value)
-// that was rendered at the root for us, that'd be cool! But it doesn't.
-var subscriptions = [];
-
-function subscribe(fn) {
-  subscriptions.push(fn);
-  return function () {
-    subscriptions.splice(subscriptions.indexOf(fn), 1);
-  };
-}
-
-function notify() {
-  subscriptions.forEach(function (fn) {
-    return fn(state, context);
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Timeouts:
-
-// Manages when the user "rests" on an element. Keeps the interface from being
-// flashing tooltips all the time as the user moves the mouse around the screen.
-var restTimeout = void 0;
-function startRestTimer() {
-  clearTimeout(restTimeout);
-  restTimeout = setTimeout(function () {
-    return transition("rest");
-  }, 100);
-}
-
-function clearRestTimer() {
-  clearTimeout(restTimeout);
-}
-
-// Manages the delay to hide the tooltip after rest leaves.
-var leavingVisibleTimer = void 0;
-function startLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = setTimeout(function () {
-    return transition("timecomplete");
-  }, 500);
-}
-
-function clearLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Rando helpers
-
-// allows us to come on back later w/o entering something else first after the
-// user leaves or dismisses
-function clearContextId() {
-  context.id = null;
-}
-
-// Avoids focus/mouseEnter from fighting with each other since you can have
-// one element focused and another mouseentered at the same time. The first
-// one sets the context.id and then the second one is ignored (for a single
-// element, most recent focus/mouseenter wins between elements).
-function isActive(id) {
-  return context.id === id;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// THE HOOK!
-export function useTooltip() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      onMouseEnter = _ref.onMouseEnter,
-      onMouseMove = _ref.onMouseMove,
-      onMouseLeave = _ref.onMouseLeave,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onKeyDown = _ref.onKeyDown,
-      onMouseDown = _ref.onMouseDown,
-      ref = _ref.ref;
-
-  var _useState = useState(state === "visible"),
-      isVisible = _useState[0],
-      setIsVisible = _useState[1];
-
-  // hopefully they always pass a ref if they ever pass one
-
-
-  var triggerRef = ref || useRef();
-  var triggerRect = useRect(triggerRef, isVisible);
-  var id = "tooltip:" + useId();
-
-  useEffect(function () {
-    return subscribe(function () {
-      if (context.id === id && (state === "visible" || state === "leavingVisible")) {
-        setIsVisible(true);
-      } else {
-        setIsVisible(false);
-      }
-    });
-  }, [id]);
-
-  var handleMouseEnter = function handleMouseEnter() {
-    if (isActive(id) &&
-    // enables leaving then entering again before the times up
-    state !== "leavingVisible") {
-      return;
-    }
-
-    switch (state) {
-      case "idle":
-      case "leavingVisible":
-        {
-          transition("mouseenter", { id: id });
-        }
-    }
-  };
-
-  var handleMouseMove = function handleMouseMove() {
-    switch (state) {
-      case "focused":
-        {
-          transition("mousemove", { id: id });
-        }
-    }
-  };
-
-  var handleFocus = function handleFocus() {
-    if (isActive(id)) return;
-    switch (state) {
-      case "idle":
-      case "leavingVisible":
-        {
-          transition("focus", { id: id });
-        }
-    }
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed":
-        {
-          transition("mouseleave");
-        }
-    }
-  };
-
-  var handleBlur = function handleBlur() {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed":
-        {
-          transition("blur");
-        }
-    }
-  };
-
-  var handleMouseDown = function handleMouseDown() {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible":
-        {
-          transition("mousedown");
-        }
-    }
-  };
-
-  var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      switch (state) {
-        case "visible":
-          {
-            transition("selectWithKeyboard");
-          }
-      }
-    }
-  };
-
-  var trigger = {
-    "aria-labelledby": id,
-    "data-reach-tooltip-trigger": "",
-    ref: triggerRef,
-    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
-    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onBlur: wrapEvent(onFocus, handleBlur),
-    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
-  };
-
-  var tooltip = {
-    id: id,
-    triggerRect: triggerRect,
-    isVisible: isVisible
-  };
-
-  return [trigger, tooltip, isVisible];
-}
-
-////////////////////////////////////////////////////////////////////////////////
-export default function Tooltip(_ref2) {
-  var children = _ref2.children,
-      label = _ref2.label,
-      ariaLabel = _ref2.ariaLabel,
-      rest = _objectWithoutProperties(_ref2, ["children", "label", "ariaLabel"]);
-
-  var _useTooltip = useTooltip(),
-      trigger = _useTooltip[0],
-      tooltip = _useTooltip[1];
-
-  return React.createElement(
-    Fragment,
-    null,
-    cloneElement(Children.only(children), trigger),
-    React.createElement(TooltipPopup, _extends({
-      label: label,
-      ariaLabel: ariaLabel
-    }, tooltip, rest))
-  );
-}
-
-process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
-  children: node.isRequired,
-  label: node.isRequired,
-  ariaLabel: string
-} : void 0;
-
-////////////////////////////////////////////////////////////////////////////////
-var TooltipPopup = forwardRef(function TooltipPopup(_ref3, forwardRef) {
-  var label = _ref3.label,
-      ariaLabel = _ref3.ariaLabel,
-      position = _ref3.position,
-      isVisible = _ref3.isVisible,
-      id = _ref3.id,
-      triggerRect = _ref3.triggerRect,
-      rest = _objectWithoutProperties(_ref3, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect"]);
-
-  return isVisible ? React.createElement(
-    Portal,
-    null,
-    React.createElement(TooltipContent, _extends({
-      label: label,
-      ariaLabel: ariaLabel,
-      position: position,
-      isVisible: isVisible,
-      id: id,
-      triggerRect: triggerRect,
-      ref: forwardRef
-    }, rest))
-  ) : null;
-});
-
-export { TooltipPopup };
-process.env.NODE_ENV !== "production" ? TooltipPopup.propTypes = {
-  label: node.isRequired,
-  ariaLabel: string,
-  position: func
-} : void 0;
-
-// Need a separate component so that useRect works inside the portal
-var TooltipContent = forwardRef(function TooltipContent(_ref4, forwardRef) {
-  var label = _ref4.label,
-      ariaLabel = _ref4.ariaLabel,
-      _ref4$position = _ref4.position,
-      position = _ref4$position === undefined ? positionDefault : _ref4$position,
-      isVisible = _ref4.isVisible,
-      id = _ref4.id,
-      triggerRect = _ref4.triggerRect,
-      style = _ref4.style,
-      rest = _objectWithoutProperties(_ref4, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect", "style"]);
-
-  var useAriaLabel = ariaLabel != null;
-  var tooltipRef = useRef();
-  var tooltipRect = useRect(tooltipRef, isVisible);
-  return React.createElement(
-    Fragment,
-    null,
-    React.createElement("div", _extends({
-      "data-reach-tooltip": true,
-      role: useAriaLabel ? undefined : "tooltip",
-      id: useAriaLabel ? undefined : id,
-      children: label,
-      style: _extends({}, style, getStyles(position, triggerRect, tooltipRect)),
-      ref: function ref(node) {
-        tooltipRef.current = node;
-        if (forwardRef) forwardRef(node);
-      }
-    }, rest)),
-    useAriaLabel && React.createElement(
-      VisuallyHidden,
-      { role: "tooltip", id: id },
-      ariaLabel
-    )
-  );
-});
-
-////////////////////////////////////////////////////////////////////////////////
-// TODO: research longpress tooltips on Android, iOS, implement here.
-// - Probably want to position it by default above, since your thumb
-//   is below and would cover it
-// - I'm thinking after longpress, display the tooltip and cancel any
-//   click events. Then on touchend, hide the tooltip after a timer
-//   in case their hand is obstructing it, then can remove and read
-//   the tooltip
-
-// feels awkward when it's perfectly aligned w/ the trigger
-var OFFSET = 8;
-
-var getStyles = function getStyles(position, triggerRect, tooltipRect) {
-  var haventMeasuredTooltipYet = !tooltipRect;
-  if (haventMeasuredTooltipYet) {
-    return { visibility: "hidden" };
-  }
-  return position(triggerRect, tooltipRect);
-};
-
-var positionDefault = function positionDefault(triggerRect, tooltipRect) {
-  var styles = {
-    left: triggerRect.left + window.scrollX + "px",
-    top: triggerRect.top + triggerRect.height + window.scrollY + "px"
-  };
-
-  var collisions = {
-    top: triggerRect.top - tooltipRect.height < 0,
-    right: window.innerWidth < triggerRect.left + tooltipRect.width,
-    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
-    left: triggerRect.left - tooltipRect.width < 0
-  };
-
-  var directionRight = collisions.right && !collisions.left;
-  var directionUp = collisions.bottom && !collisions.top;
-
-  return _extends({}, styles, {
-    left: directionRight ? triggerRect.right + OFFSET / 2 - tooltipRect.width + window.scrollX + "px" : triggerRect.left - OFFSET / 2 + window.scrollX + "px",
-    top: directionUp ? triggerRect.top - OFFSET - tooltipRect.height + window.scrollY + "px" : triggerRect.top + OFFSET + triggerRect.height + window.scrollY + "px"
-  });
-};
\ No newline at end of file
diff --git a/vendor/@reach/tooltip/index.js b/vendor/@reach/tooltip/index.js
deleted file mode 100644
index 57668ecb3973..000000000000
--- a/vendor/@reach/tooltip/index.js
+++ /dev/null
@@ -1,502 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.TooltipPopup = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-exports.useTooltip = useTooltip;
-exports.default = Tooltip;
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _autoId = require("@reach/auto-id");
-
-var _utils = require("@reach/utils");
-
-var _portal = require("@reach/portal");
-
-var _portal2 = _interopRequireDefault(_portal);
-
-var _visuallyHidden = require("@reach/visually-hidden");
-
-var _visuallyHidden2 = _interopRequireDefault(_visuallyHidden);
-
-var _rect = require("@reach/rect");
-
-var _propTypes = require("prop-types");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } ////////////////////////////////////////////////////////////////////////////////
-// Welcome to @reach/tooltip!
-//
-// Quick definitions:
-//
-// - "on rest" or "rested on": describes when the element receives keyboard
-//   focus or mouse hover after a short delay (and hopefully soon, touch
-//   longpress).
-//
-// - "activation": describes a mouse click, keyboard enter, or keyboard space.
-//
-// Only one tooltip can be visible at a time, so we use a global state chart to
-// describe the various states and transitions between states that are
-// possible.  With the all the timeouts involved with tooltips it's important to
-// "make impossible states impossible" with a state machine.
-//
-// It's also okay to use these module globals because you don't server render
-// tooltips. None of the state is changed outside of user events.
-//
-// There are a few features that are important to understand.
-//
-// 1. Tooltips don't show up until the user has rested on one, we don't
-//    want tooltips popupping up as you move your mouse around the page.
-//
-// 2. Once any tooltip becomes visible, other tooltips nearby should skip
-//    resting and display immediately.
-//
-// 3. Tooltips stick around for a little bit after blur/mouseleave.
-
-/* eslint-disable default-case */
-
-////////////////////////////////////////////////////////////////////////////////
-var chart = {
-  initial: "idle",
-  states: {
-    idle: {
-      enter: clearContextId,
-      on: {
-        mouseenter: "focused",
-        focus: "focused"
-      }
-    },
-    focused: {
-      enter: startRestTimer,
-      leave: clearRestTimer,
-      on: {
-        mousemove: "focused",
-        mouseleave: "idle",
-        mousedown: "dismissed",
-        blur: "idle",
-        rest: "visible"
-      }
-    },
-    visible: {
-      on: {
-        mouseleave: "leavingVisible",
-        blur: "leavingVisible",
-        mousedown: "dismissed",
-        selectWithKeyboard: "dismissed"
-      }
-    },
-    leavingVisible: {
-      enter: startLeavingVisibleTimer,
-      leave: function leave() {
-        clearLeavingVisibleTimer();
-        clearContextId();
-      },
-      on: {
-        mouseenter: "visible",
-        focus: "visible",
-        timecomplete: "idle"
-      }
-    },
-    dismissed: {
-      leave: function leave() {
-        // allows us to come on back later w/o entering something else first
-        context.id = null;
-      },
-      on: {
-        mouseleave: "idle",
-        blur: "idle"
-      }
-    }
-  }
-};
-
-// chart context allows us to persist some data around, in Tooltip all we use
-// is the id of the current tooltip being interacted with.
-var context = { id: null };
-var state = chart.initial;
-
-////////////////////////////////////////////////////////////////////////////////
-// Finds the next state from the current state + action. If the chart doesn't
-// describe that transition, it will throw.
-//
-// It also manages lifecycles of the machine, (enter/leave hooks on the state
-// chart)
-function transition(action, newContext) {
-  var stateDef = chart.states[state];
-  var nextState = stateDef.on[action];
-
-  if (!nextState) {
-    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
-  }
-
-  if (stateDef.leave) {
-    stateDef.leave();
-  }
-
-  if (newContext) {
-    context = newContext;
-  }
-
-  var nextDef = chart.states[nextState];
-  if (nextDef.enter) {
-    nextDef.enter();
-  }
-
-  state = nextState;
-  notify();
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Subscriptions:
-//
-// We could require apps to render a <TooltipProvider> around the app and use
-// React context to notify Tooltips of changes to our state machine, instead
-// we manage subscriptions ourselves and simplify the Tooltip API.
-//
-// Maybe if default context could take a hook (instead of just a static value)
-// that was rendered at the root for us, that'd be cool! But it doesn't.
-var subscriptions = [];
-
-function subscribe(fn) {
-  subscriptions.push(fn);
-  return function () {
-    subscriptions.splice(subscriptions.indexOf(fn), 1);
-  };
-}
-
-function notify() {
-  subscriptions.forEach(function (fn) {
-    return fn(state, context);
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Timeouts:
-
-// Manages when the user "rests" on an element. Keeps the interface from being
-// flashing tooltips all the time as the user moves the mouse around the screen.
-var restTimeout = void 0;
-function startRestTimer() {
-  clearTimeout(restTimeout);
-  restTimeout = setTimeout(function () {
-    return transition("rest");
-  }, 100);
-}
-
-function clearRestTimer() {
-  clearTimeout(restTimeout);
-}
-
-// Manages the delay to hide the tooltip after rest leaves.
-var leavingVisibleTimer = void 0;
-function startLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = setTimeout(function () {
-    return transition("timecomplete");
-  }, 500);
-}
-
-function clearLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Rando helpers
-
-// allows us to come on back later w/o entering something else first after the
-// user leaves or dismisses
-function clearContextId() {
-  context.id = null;
-}
-
-// Avoids focus/mouseEnter from fighting with each other since you can have
-// one element focused and another mouseentered at the same time. The first
-// one sets the context.id and then the second one is ignored (for a single
-// element, most recent focus/mouseenter wins between elements).
-function isActive(id) {
-  return context.id === id;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// THE HOOK!
-function useTooltip() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      onMouseEnter = _ref.onMouseEnter,
-      onMouseMove = _ref.onMouseMove,
-      onMouseLeave = _ref.onMouseLeave,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onKeyDown = _ref.onKeyDown,
-      onMouseDown = _ref.onMouseDown,
-      ref = _ref.ref;
-
-  var _useState = (0, _react.useState)(state === "visible"),
-      isVisible = _useState[0],
-      setIsVisible = _useState[1];
-
-  // hopefully they always pass a ref if they ever pass one
-
-
-  var triggerRef = ref || (0, _react.useRef)();
-  var triggerRect = (0, _rect.useRect)(triggerRef, isVisible);
-  var id = "tooltip:" + (0, _autoId.useId)();
-
-  (0, _react.useEffect)(function () {
-    return subscribe(function () {
-      if (context.id === id && (state === "visible" || state === "leavingVisible")) {
-        setIsVisible(true);
-      } else {
-        setIsVisible(false);
-      }
-    });
-  }, [id]);
-
-  var handleMouseEnter = function handleMouseEnter() {
-    if (isActive(id) &&
-    // enables leaving then entering again before the times up
-    state !== "leavingVisible") {
-      return;
-    }
-
-    switch (state) {
-      case "idle":
-      case "leavingVisible":
-        {
-          transition("mouseenter", { id: id });
-        }
-    }
-  };
-
-  var handleMouseMove = function handleMouseMove() {
-    switch (state) {
-      case "focused":
-        {
-          transition("mousemove", { id: id });
-        }
-    }
-  };
-
-  var handleFocus = function handleFocus() {
-    if (isActive(id)) return;
-    switch (state) {
-      case "idle":
-      case "leavingVisible":
-        {
-          transition("focus", { id: id });
-        }
-    }
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed":
-        {
-          transition("mouseleave");
-        }
-    }
-  };
-
-  var handleBlur = function handleBlur() {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed":
-        {
-          transition("blur");
-        }
-    }
-  };
-
-  var handleMouseDown = function handleMouseDown() {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible":
-        {
-          transition("mousedown");
-        }
-    }
-  };
-
-  var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      switch (state) {
-        case "visible":
-          {
-            transition("selectWithKeyboard");
-          }
-      }
-    }
-  };
-
-  var trigger = {
-    "aria-labelledby": id,
-    "data-reach-tooltip-trigger": "",
-    ref: triggerRef,
-    onMouseEnter: (0, _utils.wrapEvent)(onMouseEnter, handleMouseEnter),
-    onMouseMove: (0, _utils.wrapEvent)(onMouseMove, handleMouseMove),
-    onFocus: (0, _utils.wrapEvent)(onFocus, handleFocus),
-    onBlur: (0, _utils.wrapEvent)(onFocus, handleBlur),
-    onMouseLeave: (0, _utils.wrapEvent)(onMouseLeave, handleMouseLeave),
-    onKeyDown: (0, _utils.wrapEvent)(onKeyDown, handleKeyDown),
-    onMouseDown: (0, _utils.wrapEvent)(onMouseDown, handleMouseDown)
-  };
-
-  var tooltip = {
-    id: id,
-    triggerRect: triggerRect,
-    isVisible: isVisible
-  };
-
-  return [trigger, tooltip, isVisible];
-}
-
-////////////////////////////////////////////////////////////////////////////////
-function Tooltip(_ref2) {
-  var children = _ref2.children,
-      label = _ref2.label,
-      ariaLabel = _ref2.ariaLabel,
-      rest = _objectWithoutProperties(_ref2, ["children", "label", "ariaLabel"]);
-
-  var _useTooltip = useTooltip(),
-      trigger = _useTooltip[0],
-      tooltip = _useTooltip[1];
-
-  return _react2.default.createElement(
-    _react.Fragment,
-    null,
-    (0, _react.cloneElement)(_react.Children.only(children), trigger),
-    _react2.default.createElement(TooltipPopup, _extends({
-      label: label,
-      ariaLabel: ariaLabel
-    }, tooltip, rest))
-  );
-}
-
-process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
-  children: _propTypes.node.isRequired,
-  label: _propTypes.node.isRequired,
-  ariaLabel: _propTypes.string
-} : void 0;
-
-////////////////////////////////////////////////////////////////////////////////
-var TooltipPopup = (0, _react.forwardRef)(function TooltipPopup(_ref3, forwardRef) {
-  var label = _ref3.label,
-      ariaLabel = _ref3.ariaLabel,
-      position = _ref3.position,
-      isVisible = _ref3.isVisible,
-      id = _ref3.id,
-      triggerRect = _ref3.triggerRect,
-      rest = _objectWithoutProperties(_ref3, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect"]);
-
-  return isVisible ? _react2.default.createElement(
-    _portal2.default,
-    null,
-    _react2.default.createElement(TooltipContent, _extends({
-      label: label,
-      ariaLabel: ariaLabel,
-      position: position,
-      isVisible: isVisible,
-      id: id,
-      triggerRect: triggerRect,
-      ref: forwardRef
-    }, rest))
-  ) : null;
-});
-
-exports.TooltipPopup = TooltipPopup;
-process.env.NODE_ENV !== "production" ? TooltipPopup.propTypes = {
-  label: _propTypes.node.isRequired,
-  ariaLabel: _propTypes.string,
-  position: _propTypes.func
-} : void 0;
-
-// Need a separate component so that useRect works inside the portal
-var TooltipContent = (0, _react.forwardRef)(function TooltipContent(_ref4, forwardRef) {
-  var label = _ref4.label,
-      ariaLabel = _ref4.ariaLabel,
-      _ref4$position = _ref4.position,
-      position = _ref4$position === undefined ? positionDefault : _ref4$position,
-      isVisible = _ref4.isVisible,
-      id = _ref4.id,
-      triggerRect = _ref4.triggerRect,
-      style = _ref4.style,
-      rest = _objectWithoutProperties(_ref4, ["label", "ariaLabel", "position", "isVisible", "id", "triggerRect", "style"]);
-
-  var useAriaLabel = ariaLabel != null;
-  var tooltipRef = (0, _react.useRef)();
-  var tooltipRect = (0, _rect.useRect)(tooltipRef, isVisible);
-  return _react2.default.createElement(
-    _react.Fragment,
-    null,
-    _react2.default.createElement("div", _extends({
-      "data-reach-tooltip": true,
-      role: useAriaLabel ? undefined : "tooltip",
-      id: useAriaLabel ? undefined : id,
-      children: label,
-      style: _extends({}, style, getStyles(position, triggerRect, tooltipRect)),
-      ref: function ref(node) {
-        tooltipRef.current = node;
-        if (forwardRef) forwardRef(node);
-      }
-    }, rest)),
-    useAriaLabel && _react2.default.createElement(
-      _visuallyHidden2.default,
-      { role: "tooltip", id: id },
-      ariaLabel
-    )
-  );
-});
-
-////////////////////////////////////////////////////////////////////////////////
-// TODO: research longpress tooltips on Android, iOS, implement here.
-// - Probably want to position it by default above, since your thumb
-//   is below and would cover it
-// - I'm thinking after longpress, display the tooltip and cancel any
-//   click events. Then on touchend, hide the tooltip after a timer
-//   in case their hand is obstructing it, then can remove and read
-//   the tooltip
-
-// feels awkward when it's perfectly aligned w/ the trigger
-var OFFSET = 8;
-
-var getStyles = function getStyles(position, triggerRect, tooltipRect) {
-  var haventMeasuredTooltipYet = !tooltipRect;
-  if (haventMeasuredTooltipYet) {
-    return { visibility: "hidden" };
-  }
-  return position(triggerRect, tooltipRect);
-};
-
-var positionDefault = function positionDefault(triggerRect, tooltipRect) {
-  var styles = {
-    left: triggerRect.left + window.scrollX + "px",
-    top: triggerRect.top + triggerRect.height + window.scrollY + "px"
-  };
-
-  var collisions = {
-    top: triggerRect.top - tooltipRect.height < 0,
-    right: window.innerWidth < triggerRect.left + tooltipRect.width,
-    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
-    left: triggerRect.left - tooltipRect.width < 0
-  };
-
-  var directionRight = collisions.right && !collisions.left;
-  var directionUp = collisions.bottom && !collisions.top;
-
-  return _extends({}, styles, {
-    left: directionRight ? triggerRect.right + OFFSET / 2 - tooltipRect.width + window.scrollX + "px" : triggerRect.left - OFFSET / 2 + window.scrollX + "px",
-    top: directionUp ? triggerRect.top - OFFSET - tooltipRect.height + window.scrollY + "px" : triggerRect.top + OFFSET + triggerRect.height + window.scrollY + "px"
-  });
-};
\ No newline at end of file
diff --git a/vendor/@reach/tooltip/package.json b/vendor/@reach/tooltip/package.json
deleted file mode 100644
index 36f1bb2f12f7..000000000000
--- a/vendor/@reach/tooltip/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "@reach/tooltip",
-  "version": "0.1.2",
-  "description": "Accessible tooltips",
-  "main": "index.js",
-  "module": "es/index.js",
-  "scripts": {
-    "test": "echo \"Write some tests you bum!\"",
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
-  },
-  "dependencies": {
-    "@reach/auto-id": "0.2.0",
-    "@reach/portal": "^0.2.0",
-    "@reach/rect": "^0.2.1",
-    "@reach/utils": "0.2.0",
-    "@reach/visually-hidden": "^0.1.3",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
-  },
-  "devDependencies": {
-    "react-spring": "^8.0.19"
-  },
-  "author": "Ryan Florence",
-  "license": "MIT",
-  "files": [
-    "es",
-    "src",
-    "lib",
-    "index.js",
-    "styles.css"
-  ]
-}
diff --git a/vendor/@reach/tooltip/src/.index.js.swp b/vendor/@reach/tooltip/src/.index.js.swp
deleted file mode 100644
index 0172def704a42e25694612261a9df457f480ff5f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 32768
zcmeI53zQ^Pd4O9bAPB60k{C(6+aTK`^H|mdaCe7g*@wHrGO)X_;JRjex~pf3t?6p2
zx@Q=NQHcpjj0cVwF%dBwJ%Sovphm?+J@|e^kEnQpVvLWVCQ2}#gBYXv{{P-vRXsa1
zC|MJdRG;(hbl0uNz5o5|KK}dvcgI&>vVDg+YxwjEpC?u-H@@ft&pST8vvSj=l}a*O
zZ?~d23EGW7l9&4I<h*ofN4;@w93L3EFo}oO3`cRJ9xb@wg~c0=?1_^DBS}ziOxk~k
zdf`Z?-Z)U72-1;m97o--Gm<8ak+9tit{lERU2wPZXDNYF0>7{XdfnF0S;thKx#slM
za?Q!rmF9%wFaCuuFHbBbP)eYbKq-Mz0;L2>36v5jB~VJ>f4>B}ox>_Gq8N{JMVWSg
zU;h~U#r>%q;f`P9{=UHd_34jwzi)PbD+{jwHFx|Xf8K(0|NLz(ec|&TF5N%2{98((
zlt3wgQUav}N(qz_C?!xzpp-x<fl>mc1WE}UEP;BnQaOghZ;}Z->;E^qQ|?|-seBeb
z0Uw4t;b!<#NZ~nfF06+$;SBf<_{p)A%D3Szcqd#7*T9Qm4qgCz;9MAl6XB<1;2yXO
zJ_8?zkHMQ@26n>+7=RPtp`$C6d*Ms)IrtQO5^jYa?1WKR1uNhOPpDM>3BC?rfqURR
za5Y>G7s4s<n{YfF4M)J?@WZ1jl`q3>@EZ6%cse|IWTo<HxE7uZE8!$~DjWene>~5H
zuftd19=ILe0dI%r!wK*m3@i7-XW>=w5}1N9SPM0H8mxe$;PG$-JaBlW@<q4<Zh_as
z>);|d0an1zFuJ@K-UK(otKn)$;BvSOcEC1R2WNtT6W~7%t5oiTPr_T_I(QN6gUzr8
z2H>f%0-gXz!TlI&z62kFx5HcDub>5|!74Zjj)Cu^b6<nI;iGT|ybVMb-w1slW9A1d
zhR^Wua1x|l{hoGbqre{SCgH?Hkn9W^U3(yGy1(fqVH%G6^Ez=FcEh-BMvecvIcU{;
zk-My(g!S|5<3VJvj{MiTN+WKkU9;PIrfiDa-Jsp&F0DA3sVB{yL95p4wHtcx{*!8z
zkr8u25HwBQq(P^i)VqOc#8aKPEw@Nx)19n$O)m{3_htsinAC*rG;9W>1mrX6iZjjp
zItuMGz1GOnIFMy{tw|9=dqOg<*<NefaWfbW)1AQ;y)X$7h|Ac8ai`ZA?j&(%_iQIf
zDa9POACUVG7%uBYk$g91{m6y-@U!)oF(dwqF>|gW=3SC8NzfXd%f*o=6zXPluJ9v2
zBW#Y&h0VfmUuhinU-MKigV8zvEl<nDF*=uh%~Mq_qjUPlA6?&HTUwm;d9jnA+e_Le
z%ZAxtYLx*5W(rl$k44n8P}F6067`tGb;_h2{Gpmg>IH8n!^fA;UY-@GsGEkX8*wjc
ziUOI&WEeH^*fQfiG^vhybz_4ASKLc*tTJgh)rt6{ijwLhxICU|yN6P(mEcNIIPO_c
zcU73>m0eE}RX?;Jr}kOVy_S>rrIg%cQds&8I7s=qpX$Hp{8nT&#jEL+eOaxS_n>PV
z1+P(sm-3g^LKUM{40X|nXd<>mfn=t($yM!e+>T~zzM=;PjZ?D$`}p<6+&ks1aYI|5
zd)>)gW%Im`T19c(J5WOguKt_0Rn%st*r?U!GVu=DDj3Y$ph4d}n|XOf4y`JTjGzpZ
z#1-nGq73FQ>ArRH{%C_~@}nx&C0<G^9w!vrAZ9m++dE=pw3+v0t(i&coh{Q+A%(+(
zX0qOHMnQJofIcg3pBKy?e3?7wFLFNz>|5>bdVWx!4i<Tu9`{%3<Mc>&@wrhi>A!4i
z+~}qL3Q5k+)s$sU*7WRbeb|n8(Ok)4|A_3o{wuf8VJ^s-o~g(CuGJ&%V)~S|Ucu>N
zt%$14dbd8LzN15~#)e$AR@a(p)tx16#*j7=QP3QpCCQEnTvgiv!-A^zudx4%4romp
z{d5yNU3K_StENFjZ@nk%PEvp4F++f=Ye3}GMxDmEI&DWDJXyL6`J^*pw=rpIX_rBO
z?L|<~mZ=4zQo{#=Su;91YN{%Os=4Yavmn7#?NzoAR_mMsQ4~GdjGoQ&Dw+EF68OIc
zf#&6y64h>^+IjYu%Dg?^5`7Aq)wMifnF5i)Zg6FHIBc4glqhTtxEI%sEa-MNMo~Ot
z7@9N=m_{W3wvu?t(Bx_3Bt2KX9Ww$-cv7*vsyFglQR3RbFIU`gUVw!qZHDPom};4_
zidrB8Evv8A|9J_>Yy1cbuXP<s%knE1!9n$<&D0~vvkJR9Xy#BMdKIfZz9ytB40+uM
zzwn;f>I-R-A5KrhbR&cI>7a&&7FD!Z0Br~#LEcr~Q?!js<v-ITr+14q55;__;!9im
zNb^D)6C}mV$o&5rCR#6$`4;nkzyAMr=JGFxYvD@h!2o=n`TFPJGcXS_pMM5?lX>~|
za53zJ!{AQl-XDak;e~Jpe4jb>_uyujg=ts=r^5<37JkP3TISu~fV<&S@FBPzZh;%1
z4V%HhKQrI{2)qKWhmCML{5Bj9hr@T7Yu^hWfH%NRa0C1iTn;;6Bb*FJz<tcIKM(JN
z+u+S`BU}d|Y=;4O3_QeK`-kvVcsJY(SHU=320LIFo&*mvx4s{~17C(ap$E@}i(m^3
zz?0x;I2;}eKWA?JGk6E|;4(NHM&VzWOTQKph+!rCI>`K5=GCu(8$s&$3fKc@!3KDw
zAEtsMW@k{3qFEU}wtA7whD<XU?@dgE?WL2ml<dpmcbJe4%<6udZe*AAmuS8An@rdl
z1n;fuWSgO$KhY<0USqPJbcgjox>x^jUN%23^ndmygQgwKY_dI;9k|*%3^0T>+q<S7
zF-xDSw<S2mL}4pv%r+vv#x0$pPZ7luwiyA{^aUHyCRXQkoYK})G!NWOZrBXcMiP$8
z?4Eglo*4$POxnUIA|Z)qhUMI?gukSE2N8oUzwIZ*G|=cJO!oZY(~K?6u-R_&rBX1>
zI7r*8y4>y1ekzqH@Q?Nq58Din>R1mXiRzOf0M#Llx3w$CpqyfbwoEkXPK3TBegr-q
z(5_<zp}nF|*iINYO{zp}q5Qqkz<4G_2W7a>36eC#NR!4>fssKXGn2U2ZX(#Wx7<*d
zk(miZYu((^j*I;0$p1A)h6)TPwG(muzcG0i>XYnf(@@d*FwYqS3?G+K83&CPEGv?P
z9Qv}4O(+n387B;isTD;xGb1v6=bK1Fiq%EYCQJ}9yljPuvx6}gw$lYa8j`zbqZ*&B
zEK_+AyWvzImMChA$;N`BYUjjJKZ^AQbwbc=Et0&H9LQqgUa{>>nP^HT<-?m)PtNb_
z$#;{lBtK`7(itljF$eIbFLJfbtz4N85SEd|!NYlqmWi-h(VX&+*1rsw`;v3fIHl=-
zuA7m_J^J)#iL-JEI?*qaZ?T0IDxo6JkWW#0^V~gL?)!45iof7m8O-oFKW_1<d5$wx
z)LPw1?zArbiB4&>(iSATdoEK}uaN%f6)h?MXtupR`c(hOV&2?2nzu|B?TJ!a`)qBh
zQ~TYuXB62<gV&h`#<oFXHa)aWs+c%1(TV+SPOZ0t&Q>?5b{I2noBpbp2#302yRELv
zFQ7?N3$j1!93NiU=;o&}R_;l+y)A4uu@mZ)tLn}~-85}zQWNuwtU0v*WXWYc%Fmh0
zO(R)8-F<uAFj|<??TqI8Z&>ej<Dsz09esl2U$SnbwcgUA+ZDTiZeo_2(?Y9ZfN#5G
zm>@^Ju}r=ft!VPw8^{K|<QT`WYG9Z%k37Q!X+*Cx#H(Lt(SW{M7YBxPLh%f$herFE
z!@e^~sUDfQ+HOXNKy}6k-7Z&-)0x*>(um8uIFi3w(u>J$_{iHU?K#FHX|Fp`eb$6i
zQ$aJN9MP=ycWZ{t7!kOfGwY3ZW?Wir#viVI7&JOf_Q@%unR+rlYtl(I45tUePX0`1
z71jXT6bmy;0UgOhuVd<|nT>nAPRua)lGqo^mrmCr7y)UnPA|xy88f_)ht0@MdTnZ3
zM=VrGf?+JxV$y}vwK2ILl-^e_ae3O!44>i&rWMRU9g{ny)8UaEx37e=X49Y3&36%*
z7o;0Aq{HR{F&?-Pg}%lz(BNflPsrnYU0qWlU2~?!l2l8xy}K&4gS_|vRlrb!Go%ds
zI~6y3ROdt#k24Gu(bpwW1my}IB-0d>ffyNcWvWiq57>OCy7*)VZY=BYa@!+S9nnx^
zn@=}{)ZF+}hK&*XlFCv>Em8r}V@p98(M-qDv>O=ZH6Kbzit-XoD-1XTGmTvgn~%?t
zs9rt<mGX6G0vZO*R$d2kn=uT}QiJ|!Sh*Oia7SzAG7M(xnn7Bv*p0C`VkPIwX<N>2
z?Bq0LsxoGsu8WDex;D!xwc(UcEklC_%a|J3Y`2fXC;6e2xN+4=$s`?6+@4@1B~1rZ
zn$lokv63tF9b{ZC)n#8z#6KymZ8MNpuO`Bnj5{))p{Qvbx5ZH2YfQ?W$txNxuWVIr
zR+Vq6)qVM%nM8O}Q`iT^ZqEgc0Q*9k<<}McA~k%`zGxpqx3bnH><J<r38IDP*cRL=
z_)1PVw4aL1|7AV;gUpd-{y*v_gg;`gFFpWwz^ma8Ac7|Bg9|{`|4)LSGXMW7ybIm}
zZ-DDy5_Z7|JQ<FL3j8Cs0a@dJGrSINgqK1OYH$pQ{ou#g3%&{;2eBi(58e&8!)?%j
z8XOG|U^n<z_)EA5o(@&`BK85XAKVOA!WditL-1Y7{2llrNcsO7%1<eQQUav}N(qz_
zC?!xz;L#}onL4V8IRAqE+H6UZI1yhDSx{b?na#zZ%|WqT#8JT3OcVHU$f#RJw>r!h
z^S86H4|;>;b_}*$;@5EP${V9#Cd*40{Y#U5X|gX(_NB>Q8l}Y+BubOLN=7XRj~0`?
z%>Uoa8uC%BP0Re>$LIeW^ZNVYqi_p!Ab?BYJXj4f@Bci!7jA`Dz@@MQ&Vb|K+sxy|
zxBnCHLAV8`VLxnzQ5XW5_n!hM!(GhhUk1;HQ$hUpUjvuIvtcV71wUpE{~){{UJ8@2
z2{yp-umX;SyP4O27_Niuuo*VNAUuTa<6ZDZ*b6lfAAl-+lePU@;TDj!|Cd1uyI~Z>
zFaNRdVPy9<*bm3UF(C3h63S00fl>mc1RnhoP-kiVM|!EXX8$S0Pz_w%JLWVqwsq^S
zExY+r@S+}`48n=YE(d4uRl#iq=ax8%E}QRMxxZq2ybX)pZOGqk$gd~J;^o8Mjf}8N
zKsbv|U@q>sM;w&lC}?#t*}EK%m^BMCc&TJi)&u>gFZ-HWNOUH6&EibhWL4(0LTceD
zL+<cFWyarFq@>A`xk4#+N|GiJOrSwcsbtJKx@WUDmMQXbi<1*#X6c1_-SBwa?czIo
z>ZxXB;V81oy`!>g^=bW=+q^BfS~9s#W{yrPY^IAf?__+iY}T9AS{&nbB5b#VWSdo#
z^?lmoa*j&bfP{V}u!6O<WY4s2$C_bW*R96s-S=p%^xs@F*nexSJbOb`rDAzR$rsf|
z$|IM!#s5s~;@MOXklt_6_on!ehkISDm>1l}735$Q&9i0oMzdt|>4S%Gmy`H5Qfh^K
z$ikMc0gJ%B6SdZ~Q#*h8(ie$tSzjWrsdgzaWCeVd5w7zhu=*o5iAg+<+ua>OJ!O5j
zx!XSfvVh0WWzt>h9J0T%kmGd~TgZt3-$0@OC5Wx&vrO4g5FZY>SV8T@?zJ5?XQ@+K
zE5NVH)MpMzK%dctJY7!3txQ}GSP`s8;Y3^3Tu1C;tbK|)1&Bo^TN#z*Ld-C28wWr_
zC=1~%F0vdQj}v~?qxE9VJ;d#RR5?#p7IooWPGi}xY42ej<K0rV*)8X?2&rq5tTz)k
z;iCkdY_fGtStyp(XcT(;swtilwhySQfx0AQYovpj-$5b!>W@H{8bKs(2d*@-HY^_d
zlEE2uENJLTYACLSJcgaW$MKn%&En2{b%<Ld-U!Z>!qmsP49im}UJdGI(4Fi}jmu4T
zk8K`XD-$IA7YLKca_Os3-6=P=n@LP4hY81a@sD_~=|Zcx5y*<~q5a?_sJ?2>VeR1P
zFc)`4eG@v??_J{q$RusCaK!cfryKgsV6^ILvWm~7Mn(F&%;9#h(TAr>Q!l1I`79fs
zHlKU@S;JuNJ~L2orKw4*Xu&BDb@t6eYuGzy;=ssR^4i;vMtsU48-w8w_dSvxEqh0Q
zkr%Y$@1mi;g$Q3cu0KcTq_wag9|pG|rjwE)yFPhsz%fM^+j)H@5-1moN`1MLvl_{-
zIXD8zWodmgoYt?)$KhqdCE!;B@T3*4Wk*}+wU2w%O0n%#p6)MdStm)G+*jUFJZfAh
zGXXfx^VBx9xd!O^zxb~|nfb2F|Icv))&Fb${|`{UFTfpe8%PYmH82GMNId=+tO1e5
z)8R<?F7x{@!298y@D{iUUJeJ~JU9&=2mg*7e*|BH_khIXzYv<R7sg;UoCpu$)BgZ`
z5B?rL0yFSD*agpq)8Irn79J0W!DFBTw_~%JfxU1JY=9p;4nGIz!WD2bJO%E@&;R4_
zTDS?W0`dPp6HbO>K}Iq5W7ieR<piRtC5E7k09d9wEh7N>e58w>#+kFd&KmqGns0~w
z%f^tWi~vAFIKr0^0K_WVd1*10#Q9b(;}tJ%h=+DL!D^=jC*TqPsPyA6zFnd_o9sfh
z#FbS1yCq{HzuvuSHkQvSpX%ZOis3S)|NrC&%2xXSm;V2y|9|QKU;6+5zw!TP$-S~s
z=77xquaT)BpTA*!|NU?)Tn}Tg4K~9jI1Qc*$H5apd;z`zUxRz$cDNB_@4w%Nt098@
z@O;<@5)beb9{wQ6UVqPnr@)CIKL4_3Koi8z|2eQ4o(A`^_WunKzkq*$Ps5+X4e(0X
z3}?a_a3AacvR}X-LI~%>ao~Leeuxjim*5L<7u*2zum{$_eb@lL4c`LUJK!(iRUmr@
zY=Pf_XTrCb|9=9+J|O$}y%PQmw!u%C@4o|L*aPd}S#TEI$6Wp%_*-}@ycVv7m%uDU
zun+dY4mb*qgui3He=A%87r+j97Mujf!H<~tzZc#H*TYLd_TYOyTmsL5?Qkmm790T|
zLkHdfVk5W?{sjIQQrHioBj-Th$Bwq_b{h-AS^b!m@xAVbqjRMtc8$?dn>Vl7)dXv1
zv=%FQij9+!y=1Bj9;6p*ICapLpgltLZP>51t?OV<P2UrBO!DIa_Ad?Y(pV*8$Nd^&
zaVrq)t9n~mw&063u-WZ)cF2x7TO=r3)*SrO2}>b^W^dTs=ZvWNRwcez6d~wt_h!9X
zi)gak;yQ0*x^v5B-?=Op<frB$F>WIvyJwJ_D(J33R#>`~&;nukA#ne^RCnm{Wwv%=
zExudWNqggV%YvFOZy_WzJC?~wW8L>VYvtNg#I`C!^ZET!r&g4O1sZS56a%PVwpq#m
znx%6Q)@RuuiJP-Cl(mC0pU%U#SkRCao0<A7VUG1wLdxV4YE)BLQ%US`LfXXsWiz%n
zGrY1yQK&DsQQ9tvFtyt^^-G;<pC?muy78HAhR7|8TZHLPw^ftO^Wyfo#D&^#TXm1F
z{DSjk?q!oy+jhu`NuI3AH|Te2%eJ*Z61%O@z9xamX7{!&X4}}<dB1|VvEoK-$St#P
zs2&w|+UR?wG*d1tZjfL+0;v;%<A{;d2t6Ajt8c3;?B=0}?h+TzCjp35jNL$@@N8L@
zqGH{48wAMmTh3+4jYT_N`KGDy=A#9yJWWJ_NJ!FsoSust*X1p@@01M~)EsfO?A5^%
zUs`9E23cJr0+ye47Y6RNahgS`v{)3aCL812k`;bwgJc^EBme8I3)#(9!E^~w7C-5L
zsOdt%ywNDD=l<|@-bfWJwVznGOO18(dl#fq&i}HJ$t^2VeqHR`iLhfc8AP(<#;;<@
zO(a0WmB{7+guB-I8!<VW@WS;=L|z(1%$k~P_p0ZpY*e0$+<><gJ@QYm4O<=wTdQ_?
zir*Zg%07#~yLz=<i}@uoMmxOd?i89a*&}6<eCb;B4!7BiXq*jBB^-2##a^)hxtbq#
z+EdJ;B)d``B(t3^jm<X1l|eMGaQeeZNKO^WoW7W33il~KRwdH^Sdl~FY%PB)s;9cu
ziR(oqJUi0&PpU;C)kQL@^D<qvKW%)k3&xjpIxS+EH4NAbG>gyGYc+^BC7!p<d+(cq
zVRK#(bnGp42bvb~#r8ecZE5rsa1zz1-DOPVk08lbgX?lT5~h(3({OE}(Wtf9^X_cZ
zYTF(t3)UDYN|-(K!q#kFq0W7$|Ay=}5H{$@Y{%}NqW{(Q7#kV4rBYSd-2lM89WpxU
zzoOGiB~!)6yA#F(IW9^?Qzm=z6rY4*?cJyKtTFyGx<`P7&*#l-635anB-F9^NYuNl
zni6Z?po3d!&SiI7oC@5|My`HmNv3o6ZU(Le<qFvxw=41Zbw&s5vs<Hc>B>&K>;!Om
zkG#<((5;6JV&fwQS~O_VXtGU#-STNc-q{#|-C{)Nq|4DQb&<E~qw9Xn#tXM=rgUcs
z-<GqY&ic93O}>2uIk4LkplvZb6eMn#o9!s&vMTx6Bc+$JBz8Y%Q}2k9#{3r1Q3}76
zF`gLH_=O~A7q@QUY|Suw?+Uo9SS1pDerP{dkG(d^&`+c+yLe^MM%KNI6r;!RR2tUa
z){f?6>@BBehwaGM>XS?0Zn{o~+Z^{!_hz?7y|}L(dwW%oC;M%_BtP~6{)j58zeH~*
z50(Zx$n(>GyzdfyU!*AeFK!=b%l4GEygKMmZ$(o*WzGg(%~x%EV$a~PewnZCCs#hU
K>%U_S_CEob<B>}M

diff --git a/vendor/@reach/tooltip/src/index.js b/vendor/@reach/tooltip/src/index.js
deleted file mode 100644
index d13b83542f57..000000000000
--- a/vendor/@reach/tooltip/src/index.js
+++ /dev/null
@@ -1,490 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-// Welcome to @reach/tooltip!
-//
-// Quick definitions:
-//
-// - "on rest" or "rested on": describes when the element receives keyboard
-//   focus or mouse hover after a short delay (and hopefully soon, touch
-//   longpress).
-//
-// - "activation": describes a mouse click, keyboard enter, or keyboard space.
-//
-// Only one tooltip can be visible at a time, so we use a global state chart to
-// describe the various states and transitions between states that are
-// possible.  With the all the timeouts involved with tooltips it's important to
-// "make impossible states impossible" with a state machine.
-//
-// It's also okay to use these module globals because you don't server render
-// tooltips. None of the state is changed outside of user events.
-//
-// There are a few features that are important to understand.
-//
-// 1. Tooltips don't show up until the user has rested on one, we don't
-//    want tooltips popupping up as you move your mouse around the page.
-//
-// 2. Once any tooltip becomes visible, other tooltips nearby should skip
-//    resting and display immediately.
-//
-// 3. Tooltips stick around for a little bit after blur/mouseleave.
-
-/* eslint-disable default-case */
-
-import React, {
-  Fragment,
-  cloneElement,
-  Children,
-  useState,
-  useRef,
-  forwardRef,
-  useEffect
-} from "react";
-import { useId } from "@reach/auto-id";
-import { wrapEvent } from "@reach/utils";
-import Portal from "@reach/portal";
-import VisuallyHidden from "@reach/visually-hidden";
-import { useRect } from "@reach/rect";
-import { node, string, func } from "prop-types";
-
-////////////////////////////////////////////////////////////////////////////////
-const chart = {
-  initial: "idle",
-  states: {
-    idle: {
-      enter: clearContextId,
-      on: {
-        mouseenter: "focused",
-        focus: "focused"
-      }
-    },
-    focused: {
-      enter: startRestTimer,
-      leave: clearRestTimer,
-      on: {
-        mousemove: "focused",
-        mouseleave: "idle",
-        mousedown: "dismissed",
-        blur: "idle",
-        rest: "visible"
-      }
-    },
-    visible: {
-      on: {
-        mouseleave: "leavingVisible",
-        blur: "leavingVisible",
-        mousedown: "dismissed",
-        selectWithKeyboard: "dismissed"
-      }
-    },
-    leavingVisible: {
-      enter: startLeavingVisibleTimer,
-      leave: () => {
-        clearLeavingVisibleTimer();
-        clearContextId();
-      },
-      on: {
-        mouseenter: "visible",
-        focus: "visible",
-        timecomplete: "idle"
-      }
-    },
-    dismissed: {
-      leave: () => {
-        // allows us to come on back later w/o entering something else first
-        context.id = null;
-      },
-      on: {
-        mouseleave: "idle",
-        blur: "idle"
-      }
-    }
-  }
-};
-
-// chart context allows us to persist some data around, in Tooltip all we use
-// is the id of the current tooltip being interacted with.
-let context = { id: null };
-let state = chart.initial;
-
-////////////////////////////////////////////////////////////////////////////////
-// Finds the next state from the current state + action. If the chart doesn't
-// describe that transition, it will throw.
-//
-// It also manages lifecycles of the machine, (enter/leave hooks on the state
-// chart)
-function transition(action, newContext) {
-  const stateDef = chart.states[state];
-  const nextState = stateDef.on[action];
-
-  if (!nextState) {
-    throw new Error(
-      `Unknown state for action "${action}" from state "${state}"`
-    );
-  }
-
-  if (stateDef.leave) {
-    stateDef.leave();
-  }
-
-  if (newContext) {
-    context = newContext;
-  }
-
-  const nextDef = chart.states[nextState];
-  if (nextDef.enter) {
-    nextDef.enter();
-  }
-
-  state = nextState;
-  notify();
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Subscriptions:
-//
-// We could require apps to render a <TooltipProvider> around the app and use
-// React context to notify Tooltips of changes to our state machine, instead
-// we manage subscriptions ourselves and simplify the Tooltip API.
-//
-// Maybe if default context could take a hook (instead of just a static value)
-// that was rendered at the root for us, that'd be cool! But it doesn't.
-const subscriptions = [];
-
-function subscribe(fn) {
-  subscriptions.push(fn);
-  return () => {
-    subscriptions.splice(subscriptions.indexOf(fn), 1);
-  };
-}
-
-function notify() {
-  subscriptions.forEach(fn => fn(state, context));
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Timeouts:
-
-// Manages when the user "rests" on an element. Keeps the interface from being
-// flashing tooltips all the time as the user moves the mouse around the screen.
-let restTimeout;
-function startRestTimer() {
-  clearTimeout(restTimeout);
-  restTimeout = setTimeout(() => transition("rest"), 100);
-}
-
-function clearRestTimer() {
-  clearTimeout(restTimeout);
-}
-
-// Manages the delay to hide the tooltip after rest leaves.
-let leavingVisibleTimer;
-function startLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = setTimeout(() => transition("timecomplete"), 500);
-}
-
-function clearLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Rando helpers
-
-// allows us to come on back later w/o entering something else first after the
-// user leaves or dismisses
-function clearContextId() {
-  context.id = null;
-}
-
-// Avoids focus/mouseEnter from fighting with each other since you can have
-// one element focused and another mouseentered at the same time. The first
-// one sets the context.id and then the second one is ignored (for a single
-// element, most recent focus/mouseenter wins between elements).
-function isActive(id) {
-  return context.id === id;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// THE HOOK!
-export function useTooltip({
-  onMouseEnter,
-  onMouseMove,
-  onMouseLeave,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  onMouseDown,
-  ref
-} = {}) {
-  const [isVisible, setIsVisible] = useState(state === "visible");
-
-  // hopefully they always pass a ref if they ever pass one
-  const triggerRef = ref || useRef();
-  const triggerRect = useRect(triggerRef, isVisible);
-  const id = `tooltip:${useId()}`;
-
-  useEffect(() => {
-    return subscribe(() => {
-      if (
-        context.id === id &&
-        (state === "visible" || state === "leavingVisible")
-      ) {
-        setIsVisible(true);
-      } else {
-        setIsVisible(false);
-      }
-    });
-  }, [id]);
-
-  const handleMouseEnter = () => {
-    if (
-      isActive(id) &&
-      // enables leaving then entering again before the times up
-      state !== "leavingVisible"
-    ) {
-      return;
-    }
-
-    switch (state) {
-      case "idle":
-      case "leavingVisible": {
-        transition("mouseenter", { id });
-      }
-    }
-  };
-
-  const handleMouseMove = () => {
-    switch (state) {
-      case "focused": {
-        transition("mousemove", { id });
-      }
-    }
-  };
-
-  const handleFocus = () => {
-    if (isActive(id)) return;
-    switch (state) {
-      case "idle":
-      case "leavingVisible": {
-        transition("focus", { id });
-      }
-    }
-  };
-
-  const handleMouseLeave = () => {
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed": {
-        transition("mouseleave");
-      }
-    }
-  };
-
-  const handleBlur = () => {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible":
-      case "dismissed": {
-        transition("blur");
-      }
-    }
-  };
-
-  const handleMouseDown = () => {
-    // Allow quick click from one tool to another
-    if (context.id !== id) return;
-    switch (state) {
-      case "focused":
-      case "visible": {
-        transition("mousedown");
-      }
-    }
-  };
-
-  const handleKeyDown = event => {
-    if (event.key === "Enter" || event.key === " ") {
-      switch (state) {
-        case "visible": {
-          transition("selectWithKeyboard");
-        }
-      }
-    }
-  };
-
-  const trigger = {
-    "aria-labelledby": id,
-    "data-reach-tooltip-trigger": "",
-    ref: triggerRef,
-    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
-    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onBlur: wrapEvent(onFocus, handleBlur),
-    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
-  };
-
-  const tooltip = {
-    id,
-    triggerRect,
-    isVisible
-  };
-
-  return [trigger, tooltip, isVisible];
-}
-
-////////////////////////////////////////////////////////////////////////////////
-export default function Tooltip({ children, label, ariaLabel, ...rest }) {
-  const [trigger, tooltip] = useTooltip();
-  return (
-    <Fragment>
-      {cloneElement(Children.only(children), trigger)}
-      <TooltipPopup
-        label={label}
-        ariaLabel={ariaLabel}
-        {...tooltip}
-        {...rest}
-      />
-    </Fragment>
-  );
-}
-
-Tooltip.propTypes = {
-  children: node.isRequired,
-  label: node.isRequired,
-  ariaLabel: string
-};
-
-////////////////////////////////////////////////////////////////////////////////
-export const TooltipPopup = forwardRef(function TooltipPopup(
-  {
-    // own props
-    label, // could use children but want to encourage simple strings
-    ariaLabel,
-    position,
-
-    // hook spread props
-    isVisible,
-    id,
-    triggerRect,
-    ...rest
-  },
-  forwardRef
-) {
-  return isVisible ? (
-    <Portal>
-      <TooltipContent
-        label={label}
-        ariaLabel={ariaLabel}
-        position={position}
-        isVisible={isVisible}
-        id={id}
-        triggerRect={triggerRect}
-        ref={forwardRef}
-        {...rest}
-      />
-    </Portal>
-  ) : null;
-});
-
-TooltipPopup.propTypes = {
-  label: node.isRequired,
-  ariaLabel: string,
-  position: func
-};
-
-// Need a separate component so that useRect works inside the portal
-const TooltipContent = forwardRef(function TooltipContent(
-  {
-    label,
-    ariaLabel,
-    position = positionDefault,
-    isVisible,
-    id,
-    triggerRect,
-    style,
-    ...rest
-  },
-  forwardRef
-) {
-  const useAriaLabel = ariaLabel != null;
-  const tooltipRef = useRef();
-  const tooltipRect = useRect(tooltipRef, isVisible);
-  return (
-    <Fragment>
-      <div
-        data-reach-tooltip
-        role={useAriaLabel ? undefined : "tooltip"}
-        id={useAriaLabel ? undefined : id}
-        children={label}
-        style={{
-          ...style,
-          ...getStyles(position, triggerRect, tooltipRect)
-        }}
-        ref={node => {
-          tooltipRef.current = node;
-          if (forwardRef) forwardRef(node);
-        }}
-        {...rest}
-      />
-      {useAriaLabel && (
-        <VisuallyHidden role="tooltip" id={id}>
-          {ariaLabel}
-        </VisuallyHidden>
-      )}
-    </Fragment>
-  );
-});
-
-////////////////////////////////////////////////////////////////////////////////
-// TODO: research longpress tooltips on Android, iOS, implement here.
-// - Probably want to position it by default above, since your thumb
-//   is below and would cover it
-// - I'm thinking after longpress, display the tooltip and cancel any
-//   click events. Then on touchend, hide the tooltip after a timer
-//   in case their hand is obstructing it, then can remove and read
-//   the tooltip
-
-// feels awkward when it's perfectly aligned w/ the trigger
-const OFFSET = 8;
-
-const getStyles = (position, triggerRect, tooltipRect) => {
-  const haventMeasuredTooltipYet = !tooltipRect;
-  if (haventMeasuredTooltipYet) {
-    return { visibility: "hidden" };
-  }
-  return position(triggerRect, tooltipRect);
-};
-
-const positionDefault = (triggerRect, tooltipRect) => {
-  const styles = {
-    left: `${triggerRect.left + window.scrollX}px`,
-    top: `${triggerRect.top + triggerRect.height + window.scrollY}px`
-  };
-
-  const collisions = {
-    top: triggerRect.top - tooltipRect.height < 0,
-    right: window.innerWidth < triggerRect.left + tooltipRect.width,
-    bottom:
-      window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
-    left: triggerRect.left - tooltipRect.width < 0
-  };
-
-  const directionRight = collisions.right && !collisions.left;
-  const directionUp = collisions.bottom && !collisions.top;
-
-  return {
-    ...styles,
-    left: directionRight
-      ? `${triggerRect.right +
-          OFFSET / 2 -
-          tooltipRect.width +
-          window.scrollX}px`
-      : `${triggerRect.left - OFFSET / 2 + window.scrollX}px`,
-    top: directionUp
-      ? `${triggerRect.top - OFFSET - tooltipRect.height + window.scrollY}px`
-      : `${triggerRect.top + OFFSET + triggerRect.height + window.scrollY}px`
-  };
-};
diff --git a/vendor/@reach/tooltip/styles.css b/vendor/@reach/tooltip/styles.css
deleted file mode 100644
index 9c5e395afa11..000000000000
--- a/vendor/@reach/tooltip/styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-[data-reach-tooltip] {
-  pointer-events: none;
-  position: absolute;
-  padding: 0.25em;
-  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
-  white-space: nowrap;
-  font-size: 85%;
-  background: #f0f0f0;
-  color: #444;
-  border: solid 1px #ccc;
-}
diff --git a/yarn.lock b/yarn.lock
index 4b65dd25f442..040e1782d569 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,22 +1018,21 @@
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
   integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
 
-"@reach/component-component@^0.1.3":
+"@reach/component-component@0.1.3", "@reach/component-component@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
   integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
 
-"@reach/menu-button@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.12.tgz#209b52ddf0b329e4c0f6712c4d7fec88c433c344"
-  integrity sha512-16D1K9+NAfGdH4bZ3cJ721BKfp0cVvkv1lMNFLcp125ZcLTSaGXRnpUmpD+F1BJFCgP6g2cP+4MQxfiHMJ9IXg==
+"@reach/menu-button@^0.1.17":
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.17.tgz#bc70df70f48dddce8db291f0e906d22b92e6da38"
+  integrity sha512-PuBuabBjyCapax7hQ5qSWKnQy+qpZkosRV7trnO9YjFIfszn1lp+WTI5AciK+rrlsqK7t4LqNTqffI2XBuy2FA==
   dependencies:
-    "@reach/component-component" "^0.1.3"
-    "@reach/portal" "^0.2.0"
-    "@reach/rect" "^0.2.1"
-    "@reach/router" "^1.1.0"
-    "@reach/utils" "^0.2.0"
-    "@reach/window-size" "^0.1.3"
+    "@reach/component-component" "0.1.3"
+    "@reach/portal" "^0.2.1"
+    "@reach/rect" "0.2.1"
+    "@reach/utils" "^0.2.2"
+    "@reach/window-size" "^0.1.4"
     warning "^4.0.2"
 
 "@reach/observe-rect@^1.0.3":
@@ -1041,14 +1040,14 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
   integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
 
-"@reach/portal@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.0.tgz#668a6d47ff749d81c2c6804c58c42323b31ac4fe"
-  integrity sha512-d+4m9LACj3uShSKsMDjKuR1Pw54lzYCh1h6kOvfkpdgLqOZEk/8RvjDCWLvQzvPJIgzCWVAA/Db55xDgOaOYQA==
+"@reach/portal@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.1.tgz#07720b999e0063a9e179c14dbdc60fd991cfc9fa"
+  integrity sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==
   dependencies:
     "@reach/component-component" "^0.1.3"
 
-"@reach/rect@^0.2.1":
+"@reach/rect@0.2.1", "@reach/rect@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
   integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
@@ -1056,41 +1055,32 @@
     "@reach/component-component" "^0.1.3"
     "@reach/observe-rect" "^1.0.3"
 
-"@reach/router@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
-  integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
-  dependencies:
-    create-react-context "^0.2.1"
-    invariant "^2.2.3"
-    prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
-    warning "^3.0.0"
-
-"@reach/tooltip@file:./vendor/@reach/tooltip":
-  version "0.1.2"
+"@reach/tooltip@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.0.tgz#705da2c5487d3f611f3d40482b387b6f42825b8e"
+  integrity sha512-RKJkGR+w3vS+flGjcVL82SK016E6rzjG8wC4ZtFu03VCAxJyhveG0uaB3juv7Rx+u8CEwv2gxfWgfMWgrJ2cRA==
   dependencies:
     "@reach/auto-id" "0.2.0"
-    "@reach/portal" "^0.2.0"
+    "@reach/portal" "^0.2.1"
     "@reach/rect" "^0.2.1"
-    "@reach/utils" "0.2.0"
-    "@reach/visually-hidden" "^0.1.3"
+    "@reach/utils" "^0.2.2"
+    "@reach/visually-hidden" "^0.1.4"
     prop-types "^15.7.2"
 
-"@reach/utils@0.2.0", "@reach/utils@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
-  integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
+"@reach/utils@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.2.tgz#c3a05ae9fd1f921988ae8a89b5a0d28d1a2b92df"
+  integrity sha512-jYeIi46AA5jh2gfdXD/nInUYfeLp3girRafiajP7AVHF6B4hpYAzUSx/ZH4xmPyf5alut5rml2DHxrv+X+Xu+A==
 
-"@reach/visually-hidden@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.3.tgz#96f6ac9a0b62723b2f3e7d384b6143d49b45105a"
-  integrity sha512-kOmRRmUnWDsdKg6FIkljWk0Oc5v+SFCD5iVoF4moRRIJN/UvwxS2j6CqtCMlur8pc6KRi+D0mkO91nUzwQTYTg==
+"@reach/visually-hidden@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
+  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
 
-"@reach/window-size@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
-  integrity sha512-XU/PdGZ9GoRHUkIqIEcARIKWvfEDYCR/b2/Yubo+acKXJQ2I/YkQJdpILdIhNqF93nGa4zIAHrRHXkXdW11Xyg==
+"@reach/window-size@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.4.tgz#3257b646548f61c2708a661a683620fbe0a706cb"
+  integrity sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==
   dependencies:
     "@reach/component-component" "^0.1.3"
 
@@ -3648,14 +3638,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-context@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
-  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
-  dependencies:
-    fbjs "^0.8.0"
-    gud "^1.0.0"
-
 cross-env@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
@@ -5261,19 +5243,6 @@ fbjs@0.5.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
-fbjs@^0.8.0:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -5922,11 +5891,6 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
 gulp-util@^3.0.4:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -6464,7 +6428,7 @@ invariant@^2.2.0:
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -6792,7 +6756,7 @@ is-retry-allowed@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
   integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
 
-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6867,14 +6831,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -8593,14 +8549,6 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -9597,13 +9545,6 @@ promise@^7.0.3:
   dependencies:
     asap "~2.0.3"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
 prompts@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.0.4.tgz#179f9d4db3128b9933aa35f93a800d8fce76a682"
@@ -9612,7 +9553,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9832,11 +9773,6 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-test-renderer@^0.0.0-6da04b5d8:
   version "0.0.0-6da04b5d8"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-6da04b5d8.tgz#01bed04c5a4cf22339f0ae3b23f89bb45e9a8f2a"
@@ -10652,7 +10588,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -11714,7 +11650,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
+ua-parser-js@^0.7.9:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
   integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
@@ -12005,13 +11941,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
-  dependencies:
-    loose-envify "^1.0.0"
-
 warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -12221,11 +12150,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
-whatwg-fetch@>=0.10.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
-
 whatwg-fetch@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"

From a54581c2ddca06d6e0eabf87c90e276c6e7a0987 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 May 2019 15:25:17 -0700
Subject: [PATCH 558/814] Fixed invalid DOM nesting warning

---
 src/devtools/views/Profiler/NoCommitData.css |  1 +
 src/devtools/views/Profiler/NoCommitData.js  | 16 ++++++++--------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/devtools/views/Profiler/NoCommitData.css b/src/devtools/views/Profiler/NoCommitData.css
index 15c7c1785e60..059e7c99380b 100644
--- a/src/devtools/views/Profiler/NoCommitData.css
+++ b/src/devtools/views/Profiler/NoCommitData.css
@@ -9,6 +9,7 @@
 
 .Header {
   font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
 }
 
 .FilterMessage {
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
index 2ad17f3e3b0c..3e0dab4a2dab 100644
--- a/src/devtools/views/Profiler/NoCommitData.js
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -12,25 +12,25 @@ export default function NoCommitData(_: {||}) {
   if (rootHasProfilingData) {
     return (
       <div className={styles.NoCommitData}>
-        <p className={styles.Header}>
+        <div className={styles.Header}>
           There is no data matching the current filter criteria.
-        </p>
-        <p className={styles.FilterMessage}>
+        </div>
+        <div className={styles.FilterMessage}>
           Try adjusting the commit filter <ToggleCommitFilterModalButton />
-        </p>
+        </div>
       </div>
     );
   } else {
     return (
       <div className={styles.NoCommitData}>
-        <p className={styles.Header}>
+        <div className={styles.Header}>
           There is no timing data to display for the currently selected commit.
-        </p>
-        <p>
+        </div>
+        <div>
           This can indicate that a render occurred too quickly for the timing
           API to measure. Try selecting another commit in the upper, right-hand
           corner.
-        </p>
+        </div>
       </div>
     );
   }

From 60511aadc065d49d0b83578c8983b4447de45abb Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Wed, 8 May 2019 10:11:10 +0300
Subject: [PATCH 559/814] Profiler: Improve labels for times that round to
 0.0ms

---
 src/devtools/views/Profiler/FlamegraphChartBuilder.js   | 6 +++---
 src/devtools/views/Profiler/RankedChartBuilder.js       | 5 ++---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js | 4 ++--
 src/devtools/views/Profiler/utils.js                    | 7 +++++++
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index dd6dc8f827d7..9c6ed80e06dd 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration } from './utils';
+import { calculateSelfDuration, fineTune } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -68,8 +68,8 @@ export function getChartData({
 
     let label = `${name}${maybeKey}`;
     if (didRender) {
-      label += ` (${selfDuration.toFixed(1)}ms of ${actualDuration.toFixed(
-        1
+      label += ` (${fineTune(selfDuration.toFixed(1))}ms of ${fineTune(
+        actualDuration.toFixed(1)
       )}ms)`;
     }
 
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 4274bac0c494..eff51dd0f982 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration } from './utils';
+import { calculateSelfDuration, fineTune } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -49,13 +49,12 @@ export function getChartData({
     if (node.parentID === 0) {
       return;
     }
-
     const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
     const name = node.displayName || 'Unknown';
     const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
-    const label = `${name}${maybeKey} (${selfDuration.toFixed(1)}ms)`;
+    const label = `${name}${maybeKey} (${fineTune(selfDuration.toFixed(1))}ms)`;
     chartNodes.push({
       id,
       label,
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 8739509575da..247ad8cc7850 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -2,7 +2,7 @@
 
 import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime } from './utils';
+import { formatDuration, formatTime, fineTune } from './utils';
 import { StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -50,7 +50,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         }
         onClick={() => selectCommitIndex(commitIndex)}
       >
-        {formatTime(time)}s for {formatDuration(duration)}ms
+        {fineTune(formatTime(time))}s for {fineTune(formatDuration(duration))}ms
       </button>
     );
   }
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 61d2725c76d4..c49d05ea9e91 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -72,3 +72,10 @@ export const scale = (
   maxValue - minValue === 0
     ? fallbackValue
     : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
+
+export const fineTune = (duration: number | string): string => {
+  if (Number(duration) === 0) {
+    return '<0.1';
+  }
+  return `${duration}`;
+};

From dbe68f7a6763f79d61b87ab2abe26aeb976fbc45 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 08:52:48 -0700
Subject: [PATCH 560/814] Updated lint ignore for new dev shell dist folder

---
 .eslintignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index f863d8f44a63..60fbacc57538 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,7 +4,7 @@ flow-typed
 shells/browser/chrome/build
 shells/browser/firefox/build
 shells/browser/shared/build
-shells/dev/build
+shells/dev/dist
 vendor
 
 package-lock.json

From 703706b40f4b2de3906b3f311f16d6b433e84e0f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 10:50:32 -0700
Subject: [PATCH 561/814] Add toggle-suspense button to all elements

This button is disabled if the renderer returns canToggleSuspense=false.
---
 src/devtools/views/ButtonIcon.js              |   9 ++
 src/devtools/views/Components/Components.css  |   1 +
 src/devtools/views/Components/Components.js   |   2 +
 .../views/Components/SelectedElement.css      |   4 +
 .../views/Components/SelectedElement.js       | 112 +++++++++++++++-
 ... => ToggleComponentFiltersModalButton.css} |   0
 .../ToggleComponentFiltersModalButton.js      |   4 +-
 src/devtools/views/DevTools.js                | 109 ++++++++--------
 .../ImportFailedModal.css => ModalDialog.css} |  11 +-
 src/devtools/views/ModalDialog.js             | 121 ++++++++++++++++++
 .../views/Profiler/ImportFailedModal.js       |  35 -----
 .../Profiler/ImportFailedModalContext.js      |  37 ------
 src/devtools/views/Profiler/Profiler.js       |  33 ++---
 .../Profiler/ProfilingImportExportButtons.css |   7 +
 .../Profiler/ProfilingImportExportButtons.js  |  19 ++-
 15 files changed, 335 insertions(+), 169 deletions(-)
 rename src/devtools/views/Components/{ToggleCommitFilterModalButton.css => ToggleComponentFiltersModalButton.css} (100%)
 rename src/devtools/views/{Profiler/ImportFailedModal.css => ModalDialog.css} (77%)
 create mode 100644 src/devtools/views/ModalDialog.js
 delete mode 100644 src/devtools/views/Profiler/ImportFailedModal.js
 delete mode 100644 src/devtools/views/Profiler/ImportFailedModalContext.js

diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index 6e67143f8941..b24b35ceeb83 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -25,6 +25,7 @@ export type IconType =
   | 'save'
   | 'search'
   | 'settings'
+  | 'suspend'
   | 'undo'
   | 'up'
   | 'view-dom'
@@ -101,6 +102,9 @@ export default function ButtonIcon({ className = '', type }: Props) {
     case 'settings':
       pathData = PATH_SETTINGS;
       break;
+    case 'suspend':
+      pathData = PATH_SUSPEND;
+      break;
     case 'undo':
       pathData = PATH_UNDO;
       break;
@@ -212,6 +216,11 @@ const PATH_SETTINGS = `
   .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
 `;
 
+const PATH_SUSPEND = `
+  M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97
+  0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
+`;
+
 const PATH_UNDO = `
   M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
   3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
diff --git a/src/devtools/views/Components/Components.css b/src/devtools/views/Components/Components.css
index 775b1faef115..0cecdd905616 100644
--- a/src/devtools/views/Components/Components.css
+++ b/src/devtools/views/Components/Components.css
@@ -1,4 +1,5 @@
 .Components {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index bce5941af052..dd4b77543196 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -5,6 +5,7 @@ import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import { InspectedElementContextController } from './InspectedElementContext';
 import portaledContent from '../portaledContent';
+import { ModalDialog } from '../ModalDialog';
 
 import styles from './Components.css';
 
@@ -22,6 +23,7 @@ function Components(_: {||}) {
           </Suspense>
         </InspectedElementContextController>
       </div>
+      <ModalDialog />
     </div>
   );
 }
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index c67d40a2ec2c..97c909d28029 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -83,3 +83,7 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.CannotSuspendWarningMessage {
+  font-size: var(--font-size-sans-large);
+}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 8740480a9863..f3902ac067f1 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -6,11 +6,13 @@ import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
+import { ModalDialogContext } from '../ModalDialog';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
-import styles from './SelectedElement.css';
+import Toggle from '../Toggle';
 import {
+  ComponentFilterElementType,
   ElementTypeClass,
   ElementTypeForwardRef,
   ElementTypeFunction,
@@ -18,15 +20,19 @@ import {
   ElementTypeSuspense,
 } from 'src/types';
 
+import styles from './SelectedElement.css';
+
 import type { Element, InspectedElement } from './types';
 
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
   const viewElementSource = useContext(ViewElementSourceContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
 
   const { read } = useContext(InspectedElementContext);
 
@@ -72,6 +78,63 @@ export default function SelectedElement(_: Props) {
     }
   }, [inspectedElementID, viewElementSource]);
 
+  const canViewSource =
+    inspectedElement &&
+    inspectedElement.canViewSource &&
+    viewElementSource !== null;
+
+  const isSuspended =
+    element !== null &&
+    element.type === ElementTypeSuspense &&
+    inspectedElement != null &&
+    inspectedElement.state != null;
+
+  const canToggleSuspense =
+    inspectedElement != null && inspectedElement.canToggleSuspense;
+
+  // TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.
+  const toggleSuspended = useCallback(() => {
+    let nearestSuspenseElement = null;
+    let currentElement = element;
+    while (currentElement !== null) {
+      if (currentElement.type === ElementTypeSuspense) {
+        nearestSuspenseElement = currentElement;
+        break;
+      } else if (currentElement.parentID > 0) {
+        currentElement = store.getElementByID(currentElement.parentID);
+      } else {
+        currentElement = null;
+      }
+    }
+
+    // If we didn't find a Suspense ancestor, we can't suspend.
+    // Instead we can show a warning to the user.
+    if (nearestSuspenseElement === null) {
+      modalDialogDispatch({
+        type: 'SHOW',
+        content: <CannotSuspendWarningMessage />,
+      });
+    } else {
+      const nearestSuspenseElementID = nearestSuspenseElement.id;
+
+      // If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.
+      // This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.
+      if (nearestSuspenseElement !== element) {
+        dispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: nearestSuspenseElementID,
+        });
+      }
+
+      // Toggle suspended
+      bridge.send('overrideSuspense', {
+        id: nearestSuspenseElementID,
+        rendererID: store.getRendererIDForElement(nearestSuspenseElementID),
+        forceFallback: !isSuspended,
+      });
+    }
+  }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
+
   if (element === null) {
     return (
       <div className={styles.SelectedElement}>
@@ -80,11 +143,6 @@ export default function SelectedElement(_: Props) {
     );
   }
 
-  const canViewSource =
-    inspectedElement &&
-    inspectedElement.canViewSource &&
-    viewElementSource !== null;
-
   return (
     <div className={styles.SelectedElement}>
       <div className={styles.TitleRow}>
@@ -94,6 +152,20 @@ export default function SelectedElement(_: Props) {
           </div>
         </div>
 
+        {canToggleSuspense && (
+          <Toggle
+            className={styles.IconButton}
+            isChecked={isSuspended}
+            onChange={toggleSuspended}
+            title={
+              isSuspended
+                ? 'Unsuspend the selected component'
+                : 'Suspend the selected component'
+            }
+          >
+            <ButtonIcon type="suspend" />
+          </Toggle>
+        )}
         <Button
           className={styles.IconButton}
           onClick={highlightElement}
@@ -265,3 +337,31 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
     </button>
   );
 }
+
+function CannotSuspendWarningMessage() {
+  const store = useContext(StoreContext);
+  const areSuspenseElementsHidden = !!store.componentFilters.find(
+    filter =>
+      filter.type === ComponentFilterElementType &&
+      filter.value === ElementTypeSuspense &&
+      filter.isEnabled
+  );
+
+  // Has the user filted out Suspense nodes from the tree?
+  // If so, the selected element might actually be in a Suspense tree after all.
+  if (areSuspenseElementsHidden) {
+    return (
+      <div className={styles.CannotSuspendWarningMessage}>
+        Suspended state cannot be toggled while Suspense components are hidden.
+        Disable the filter and try agan.
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.CannotSuspendWarningMessage}>
+        The selected element is not within a Suspense container. Suspending it
+        would cause an error.
+      </div>
+    );
+  }
+}
diff --git a/src/devtools/views/Components/ToggleCommitFilterModalButton.css b/src/devtools/views/Components/ToggleComponentFiltersModalButton.css
similarity index 100%
rename from src/devtools/views/Components/ToggleCommitFilterModalButton.css
rename to src/devtools/views/Components/ToggleComponentFiltersModalButton.css
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
index e3031b4e6029..189454d34909 100644
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+++ b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
@@ -8,11 +8,11 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import Store from 'src/devtools/store';
 
-import styles from './ToggleCommitFilterModalButton.css';
+import styles from './ToggleComponentFiltersModalButton.css';
 
 import type { ComponentFilter } from 'src/types';
 
-export default function ToggleCommitFilterModalButton() {
+export default function ToggleComponentFiltersModalButton() {
   const store = useContext(StoreContext);
 
   const { isModalShowing, setIsModalShowing } = useContext(
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 53ac73eaa46d..1efc67a70754 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -16,6 +16,7 @@ import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
+import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
@@ -116,62 +117,64 @@ export default function DevTools({
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <SettingsContextController
-          browserTheme={browserTheme}
-          componentsPortalContainer={componentsPortalContainer}
-          profilerPortalContainer={profilerPortalContainer}
-          settingsPortalContainer={settingsPortalContainer}
-        >
-          <ViewElementSourceContext.Provider value={viewElementSource}>
-            <TreeContextController>
-              <ProfilerContextController>
-                <div className={styles.DevTools}>
-                  {showTabBar && (
-                    <div className={styles.TabBar}>
-                      <ReactLogo />
-                      <span className={styles.DevToolsVersion}>
-                        {process.env.DEVTOOLS_VERSION}
-                      </span>
-                      <div className={styles.Spacer} />
-                      <TabBar
-                        currentTab={tab}
-                        id="DevTools"
-                        selectTab={setTab}
-                        size="large"
-                        tabs={
-                          supportsProfiling
-                            ? tabsWithProfiler
-                            : tabsWithoutProfiler
-                        }
+        <ModalDialogContextController>
+          <SettingsContextController
+            browserTheme={browserTheme}
+            componentsPortalContainer={componentsPortalContainer}
+            profilerPortalContainer={profilerPortalContainer}
+            settingsPortalContainer={settingsPortalContainer}
+          >
+            <ViewElementSourceContext.Provider value={viewElementSource}>
+              <TreeContextController>
+                <ProfilerContextController>
+                  <div className={styles.DevTools}>
+                    {showTabBar && (
+                      <div className={styles.TabBar}>
+                        <ReactLogo />
+                        <span className={styles.DevToolsVersion}>
+                          {process.env.DEVTOOLS_VERSION}
+                        </span>
+                        <div className={styles.Spacer} />
+                        <TabBar
+                          currentTab={tab}
+                          id="DevTools"
+                          selectTab={setTab}
+                          size="large"
+                          tabs={
+                            supportsProfiling
+                              ? tabsWithProfiler
+                              : tabsWithoutProfiler
+                          }
+                        />
+                      </div>
+                    )}
+                    <div
+                      className={styles.TabContent}
+                      hidden={tab !== 'components'}
+                    >
+                      <Components portalContainer={componentsPortalContainer} />
+                    </div>
+                    <div
+                      className={styles.TabContent}
+                      hidden={tab !== 'profiler'}
+                    >
+                      <Profiler
+                        portalContainer={profilerPortalContainer}
+                        supportsProfiling={supportsProfiling}
                       />
                     </div>
-                  )}
-                  <div
-                    className={styles.TabContent}
-                    hidden={tab !== 'components'}
-                  >
-                    <Components portalContainer={componentsPortalContainer} />
-                  </div>
-                  <div
-                    className={styles.TabContent}
-                    hidden={tab !== 'profiler'}
-                  >
-                    <Profiler
-                      portalContainer={profilerPortalContainer}
-                      supportsProfiling={supportsProfiling}
-                    />
-                  </div>
-                  <div
-                    className={styles.TabContent}
-                    hidden={tab !== 'settings'}
-                  >
-                    <Settings portalContainer={settingsPortalContainer} />
+                    <div
+                      className={styles.TabContent}
+                      hidden={tab !== 'settings'}
+                    >
+                      <Settings portalContainer={settingsPortalContainer} />
+                    </div>
                   </div>
-                </div>
-              </ProfilerContextController>
-            </TreeContextController>
-          </ViewElementSourceContext.Provider>
-        </SettingsContextController>
+                </ProfilerContextController>
+              </TreeContextController>
+            </ViewElementSourceContext.Provider>
+          </SettingsContextController>
+        </ModalDialogContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
diff --git a/src/devtools/views/Profiler/ImportFailedModal.css b/src/devtools/views/ModalDialog.css
similarity index 77%
rename from src/devtools/views/Profiler/ImportFailedModal.css
rename to src/devtools/views/ModalDialog.css
index ec0416caf1c9..f1971b6fabb6 100644
--- a/src/devtools/views/Profiler/ImportFailedModal.css
+++ b/src/devtools/views/ModalDialog.css
@@ -13,6 +13,7 @@
 .Dialog {
   position: relative;
   z-index: 3;
+  width: 25rem;
   min-width: 20rem;
   max-width: 100%;
   display: inline-block;
@@ -22,18 +23,12 @@
   border-radius: 0.25rem;
 }
 
-.Header {
+.Title {
   font-size: var(--font-size-sans-large);
   margin-bottom: 0.5rem;
 }
 
 .Buttons {
   text-align: right;
-}
-
-.ErrorMessage {
-  margin: 0.5rem 0;
-  color: var(--color-dim);
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-normal);
+  margin-top: 0.5rem;
 }
diff --git a/src/devtools/views/ModalDialog.js b/src/devtools/views/ModalDialog.js
new file mode 100644
index 000000000000..b9ca5cc97469
--- /dev/null
+++ b/src/devtools/views/ModalDialog.js
@@ -0,0 +1,121 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import Button from './Button';
+import { useModalDismissSignal } from './hooks';
+
+import styles from './ModalDialog.css';
+
+type DIALOG_ACTION_HIDE = {|
+  type: 'HIDE',
+|};
+type DIALOG_ACTION_SHOW = {|
+  type: 'SHOW',
+  content: React$Node,
+  title?: React$Node | null,
+|};
+
+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
+
+type Dispatch = (action: Action) => void;
+
+type State = {|
+  content: React$Node | null,
+  isVisible: boolean,
+  title: React$Node | null,
+|};
+
+type ModalDialogContextType = {|
+  ...State,
+  dispatch: Dispatch,
+|};
+
+const ModalDialogContext = createContext<ModalDialogContextType>(
+  ((null: any): ModalDialogContextType)
+);
+ModalDialogContext.displayName = 'ModalDialogContext';
+
+function dialogReducer(state, action) {
+  switch (action.type) {
+    case 'HIDE':
+      return {
+        content: null,
+        isVisible: false,
+        title: null,
+      };
+    case 'SHOW':
+      return {
+        content: action.content,
+        isVisible: true,
+        title: action.title || null,
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ModalDialogContextController({ children }: Props) {
+  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+    content: null,
+    isVisible: false,
+    title: null,
+  });
+
+  const value = useMemo<ModalDialogContextType>(
+    () => ({
+      content: state.content,
+      isVisible: state.isVisible,
+      title: state.title,
+      dispatch,
+    }),
+    [state, dispatch]
+  );
+
+  return (
+    <ModalDialogContext.Provider value={value}>
+      {children}
+    </ModalDialogContext.Provider>
+  );
+}
+
+function ModalDialog(_: {||}) {
+  const { isVisible } = useContext(ModalDialogContext);
+  return isVisible ? <ModalDialogImpl /> : null;
+}
+
+function ModalDialogImpl(_: {||}) {
+  const { content, dispatch, title } = useContext(ModalDialogContext);
+  const dismissModal = useCallback(() => dispatch({ type: 'HIDE' }), [
+    dispatch,
+  ]);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  useModalDismissSignal(modalRef, dismissModal);
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Dialog} ref={modalRef}>
+        {title !== null && <div className={styles.Title}>{title}</div>}
+        {content}
+        <div className={styles.Buttons}>
+          <Button autoFocus onClick={dismissModal}>
+            Okay
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { ModalDialog, ModalDialogContext, ModalDialogContextController };
diff --git a/src/devtools/views/Profiler/ImportFailedModal.js b/src/devtools/views/Profiler/ImportFailedModal.js
deleted file mode 100644
index 8f28220c502c..000000000000
--- a/src/devtools/views/Profiler/ImportFailedModal.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// @flow
-
-import React, { useCallback, useContext, useRef } from 'react';
-import { ImportFailedModalContext } from './ImportFailedModalContext';
-import Button from '../Button';
-import { useModalDismissSignal } from '../hooks';
-
-import styles from './ImportFailedModal.css';
-
-export default function ImportFailedModal(_: {||}) {
-  const { importError, setImportError } = useContext(ImportFailedModalContext);
-  const dismissModal = useCallback(() => setImportError(null), [
-    setImportError,
-  ]);
-  const modalRef = useRef<HTMLDivElement | null>(null);
-
-  useModalDismissSignal(modalRef, dismissModal);
-
-  return (
-    <div className={styles.Background}>
-      <div className={styles.Dialog} ref={modalRef}>
-        <div className={styles.Header}>Import failed</div>
-        <div>The profiling data you selected cannot be imported.</div>
-        {importError !== null && (
-          <div className={styles.ErrorMessage}>{importError.message}</div>
-        )}
-        <div className={styles.Buttons}>
-          <Button autoFocus onClick={dismissModal}>
-            Okay
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/devtools/views/Profiler/ImportFailedModalContext.js b/src/devtools/views/Profiler/ImportFailedModalContext.js
deleted file mode 100644
index a9a138e94212..000000000000
--- a/src/devtools/views/Profiler/ImportFailedModalContext.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @flow
-
-import React, { createContext, useMemo, useState } from 'react';
-
-type Context = {|
-  importError: Error | null,
-  isModalShowing: boolean,
-  setImportError: (error: Error | null) => void,
-|};
-
-const ImportFailedModalContext = createContext<Context>(((null: any): Context));
-ImportFailedModalContext.displayName = 'ImportFailedModalContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function ImportFailedModalContextController({ children }: Props) {
-  const [importError, setImportError] = useState<Error | null>(null);
-
-  const value = useMemo(
-    () => ({
-      importError,
-      isModalShowing: !!importError,
-      setImportError,
-    }),
-    [importError]
-  );
-
-  return (
-    <ImportFailedModalContext.Provider value={value}>
-      {children}
-    </ImportFailedModalContext.Provider>
-  );
-}
-
-export { ImportFailedModalContext, ImportFailedModalContextController };
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 2ac74a50f3ca..656076c6e6b2 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -5,17 +5,13 @@ import {
   CommitFilterModalContext,
   CommitFilterModalContextController,
 } from './CommitFilterModalContext';
-import {
-  ImportFailedModalContext,
-  ImportFailedModalContextController,
-} from './ImportFailedModalContext';
+import { ModalDialog } from '../ModalDialog';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
 import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import CommitFilterModal from './CommitFilterModal';
-import ImportFailedModal from './ImportFailedModal';
 import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
@@ -40,20 +36,16 @@ function Profiler({ supportsProfiling }: Props) {
 
   if (isProfiling || !rootHasProfilingData) {
     return (
-      <ImportFailedModalContextController>
-        <NonSuspendingProfiler
-          hasProfilingData={hasProfilingData}
-          isProfiling={isProfiling}
-          supportsProfiling={supportsProfiling}
-        />
-      </ImportFailedModalContextController>
+      <NonSuspendingProfiler
+        hasProfilingData={hasProfilingData}
+        isProfiling={isProfiling}
+        supportsProfiling={supportsProfiling}
+      />
     );
   } else {
     return (
       <CommitFilterModalContextController>
-        <ImportFailedModalContextController>
-          <SuspendingProfiler />
-        </ImportFailedModalContextController>
+        <SuspendingProfiler />
       </CommitFilterModalContextController>
     );
   }
@@ -83,10 +75,6 @@ function NonSuspendingProfiler({
     view = <NoProfilingDataForRoot />;
   }
 
-  const { isModalShowing: isImportFailedModalShowing } = useContext(
-    ImportFailedModalContext
-  );
-
   return (
     <div className={styles.Profiler}>
       <div className={styles.LeftColumn}>
@@ -107,7 +95,7 @@ function NonSuspendingProfiler({
         </div>
         <div className={styles.Content}>
           {view}
-          {isImportFailedModalShowing && <ImportFailedModal />}
+          <ModalDialog />
         </div>
       </div>
     </div>
@@ -133,9 +121,6 @@ function SuspendingProfiler() {
   const { isModalShowing: isFilterModalShowing } = useContext(
     CommitFilterModalContext
   );
-  const { isModalShowing: isImportFailedModalShowing } = useContext(
-    ImportFailedModalContext
-  );
 
   let view = null;
   switch (selectedTabID) {
@@ -195,7 +180,7 @@ function SuspendingProfiler() {
         <div className={styles.Content}>
           <Suspense fallback={<ContentFallback />}>{view}</Suspense>
           {isFilterModalShowing && <CommitFilterModal />}
-          {isImportFailedModalShowing && <ImportFailedModal />}
+          <ModalDialog />
         </div>
       </div>
       <div className={styles.RightColumn}>
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.css b/src/devtools/views/Profiler/ProfilingImportExportButtons.css
index edfe2b3a6c43..8d24f565052b 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.css
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.css
@@ -16,3 +16,10 @@
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
+
+.ErrorMessage {
+  margin: 0.5rem 0;
+  color: var(--color-dim);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index d5253ab6f665..52c66a022d15 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -2,7 +2,7 @@
 
 import React, { Fragment, useContext, useCallback, useRef } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { ImportFailedModalContext } from './ImportFailedModalContext';
+import { ModalDialogContext } from '../ModalDialog';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
@@ -21,7 +21,7 @@ export default function ProfilingImportExportButtons() {
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const { setImportError } = useContext(ImportFailedModalContext);
+  const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
 
   const downloadData = useCallback(() => {
     if (rendererID === null || rootID === null) {
@@ -62,12 +62,23 @@ export default function ProfilingImportExportButtons() {
 
           store.importedProfilingData = ((data: any): ImportedProfilingData);
         } catch (error) {
-          setImportError(error);
+          modalDialogDispatch({
+            type: 'SHOW',
+            title: 'Import failed',
+            content: (
+              <Fragment>
+                <div>The profiling data you selected cannot be imported.</div>
+                {error !== null && (
+                  <div className={styles.ErrorMessage}>{error.message}</div>
+                )}
+              </Fragment>
+            ),
+          });
         }
       });
       fileReader.readAsText(input.files[0]);
     }
-  }, [store, setImportError]);
+  }, [modalDialogDispatch, store]);
 
   return (
     <Fragment>

From 98260f8614a02df9735806b2d4140ab01a943da9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 12:53:22 -0700
Subject: [PATCH 562/814] Added installation instructions to README

---
 README.md | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4f4dc5a0ec10..daa230d5ee8f 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,23 @@
-This is an **experimental rewrite** of the React DevTools extension (see [github.com/facebook/react-devtools](https://github.com/facebook/react-devtools)). This project is **not supported** and has only been posted as a way of sharing ideas with others who may be interested.
+This repo is a work-in-progress rewrite of the [React DevTools extension](https://github.com/facebook/react-devtools). A demo of the beta extension can be found online at [react-devtools-experimental.now.sh](https://react-devtools-experimental.now.sh/).
+
+# Installation
+
+Installation instructions are available online as well:
+* [Chrome](https://react-devtools-experimental-chrome.now.sh/)
+* [Firefox](https://react-devtools-experimental-firefox.now.sh/).
+
+Or you can build and install from source:
+```sh
+git clone git@github.com:bvaughn/react-devtools-experimental.git
+
+cd react-devtools-experimental
 
-To get started...
-```
 yarn install
-yarn start
+
+yarn build:extension:chrome # builds at "shells/browser/chrome/build"
+yarn build:extension:firefox # builds at "shells/browser/firefox/build"
 ```
 
-A preview build of this rewrite is available at [react-devtools-experimental.now.sh](https://react-devtools-experimental.now.sh/).
\ No newline at end of file
+# Support
+
+As this extension is in a beta period, it is not officially supported. However if you find a bug, we'd appreciate you reporting it as a [GitHub issue](https://github.com/bvaughn/react-devtools-experimental/issues/new) with repro instructions.
\ No newline at end of file

From d3522f1f66bc55ba5f1e227aea1d6b9d953a4f45 Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Wed, 8 May 2019 23:18:43 +0300
Subject: [PATCH 563/814] Uses FormDuration and FormTime to format times that
 are 0 into something more readable

---
 src/devtools/views/Profiler/FlamegraphChartBuilder.js |  6 +++---
 src/devtools/views/Profiler/RankedChartBuilder.js     |  4 ++--
 .../views/Profiler/SidebarSelectedFiberInfo.js        |  4 ++--
 src/devtools/views/Profiler/utils.js                  | 11 ++---------
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 9c6ed80e06dd..8f314ba75404 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration, fineTune } from './utils';
+import { calculateSelfDuration, formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -68,8 +68,8 @@ export function getChartData({
 
     let label = `${name}${maybeKey}`;
     if (didRender) {
-      label += ` (${fineTune(selfDuration.toFixed(1))}ms of ${fineTune(
-        actualDuration.toFixed(1)
+      label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
+        actualDuration
       )}ms)`;
     }
 
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index eff51dd0f982..f11c97200ff1 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration, fineTune } from './utils';
+import { calculateSelfDuration, formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -54,7 +54,7 @@ export function getChartData({
 
     const name = node.displayName || 'Unknown';
     const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
-    const label = `${name}${maybeKey} (${fineTune(selfDuration.toFixed(1))}ms)`;
+    const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`;
     chartNodes.push({
       id,
       label,
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 247ad8cc7850..8739509575da 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -2,7 +2,7 @@
 
 import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime, fineTune } from './utils';
+import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -50,7 +50,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         }
         onClick={() => selectCommitIndex(commitIndex)}
       >
-        {fineTune(formatTime(time))}s for {fineTune(formatDuration(duration))}ms
+        {formatTime(time)}s for {formatDuration(duration)}ms
       </button>
     );
   }
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index c49d05ea9e91..a5279c20e202 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -57,11 +57,11 @@ export const getGradientColor = (value: number) => {
 };
 
 export const formatDuration = (duration: number) =>
-  Math.round(duration * 10) / 10;
+  Math.round(duration * 10) / 10 || '<0.1';
 export const formatPercentage = (percentage: number) =>
   Math.round(percentage * 100);
 export const formatTime = (timestamp: number) =>
-  Math.round(Math.round(timestamp) / 100) / 10;
+  Math.round(Math.round(timestamp) / 100) / 10 || '<0.1';
 
 export const scale = (
   minValue: number,
@@ -72,10 +72,3 @@ export const scale = (
   maxValue - minValue === 0
     ? fallbackValue
     : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
-
-export const fineTune = (duration: number | string): string => {
-  if (Number(duration) === 0) {
-    return '<0.1';
-  }
-  return `${duration}`;
-};

From 34a38dc4f0b76866b1403240f0c6812ab773b734 Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Wed, 8 May 2019 23:33:26 +0300
Subject: [PATCH 564/814] updates snapshots and removes extra formatting from
 formatTime

---
 .../__snapshots__/profilingCharts-test.js.snap   | 16 ++++++++--------
 src/devtools/views/Profiler/utils.js             |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 36e4c8cf9040..3e0539db75a6 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -61,7 +61,7 @@ Object {
         "actualDuration": 14,
         "didRender": true,
         "id": 2,
-        "label": "Parent (10.0ms of 14.0ms)",
+        "label": "Parent (10ms of 14ms)",
         "name": "Parent",
         "offset": 0,
         "selfDuration": 10,
@@ -73,7 +73,7 @@ Object {
         "actualDuration": 2,
         "didRender": true,
         "id": 4,
-        "label": "Memo(Child) key=\\"second\\" (2.0ms of 2.0ms)",
+        "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
         "name": "Memo(Child)",
         "offset": 12,
         "selfDuration": 2,
@@ -83,7 +83,7 @@ Object {
         "actualDuration": 2,
         "didRender": true,
         "id": 3,
-        "label": "Memo(Child) key=\\"first\\" (2.0ms of 2.0ms)",
+        "label": "Memo(Child) key=\\"first\\" (2ms of 2ms)",
         "name": "Memo(Child)",
         "offset": 10,
         "selfDuration": 2,
@@ -155,7 +155,7 @@ Object {
         "actualDuration": 10,
         "didRender": true,
         "id": 2,
-        "label": "Parent (10.0ms of 10.0ms)",
+        "label": "Parent (10ms of 10ms)",
         "name": "Parent",
         "offset": 0,
         "selfDuration": 10,
@@ -253,19 +253,19 @@ Object {
   "nodes": Array [
     Object {
       "id": 2,
-      "label": "Parent (10.0ms)",
+      "label": "Parent (10ms)",
       "name": "Parent",
       "value": 10,
     },
     Object {
       "id": 3,
-      "label": "Memo(Child) key=\\"first\\" (2.0ms)",
+      "label": "Memo(Child) key=\\"first\\" (2ms)",
       "name": "Memo(Child)",
       "value": 2,
     },
     Object {
       "id": 4,
-      "label": "Memo(Child) key=\\"second\\" (2.0ms)",
+      "label": "Memo(Child) key=\\"second\\" (2ms)",
       "name": "Memo(Child)",
       "value": 2,
     },
@@ -324,7 +324,7 @@ Object {
   "nodes": Array [
     Object {
       "id": 2,
-      "label": "Parent (10.0ms)",
+      "label": "Parent (10ms)",
       "name": "Parent",
       "value": 10,
     },
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index a5279c20e202..21f99e009e28 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -61,7 +61,7 @@ export const formatDuration = (duration: number) =>
 export const formatPercentage = (percentage: number) =>
   Math.round(percentage * 100);
 export const formatTime = (timestamp: number) =>
-  Math.round(Math.round(timestamp) / 100) / 10 || '<0.1';
+  Math.round(Math.round(timestamp) / 100) / 10;
 
 export const scale = (
   minValue: number,

From 4f1d347c046f3e7c76683469718614c9f74e5e70 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 14:22:06 -0700
Subject: [PATCH 565/814] Custom filters are applied by default after extension
 reload

---
 shells/browser/shared/src/main.js | 20 ++++++++++++++++++++
 shells/dev/src/devtools.js        | 13 +++++++------
 src/__tests__/setupTests.js       |  4 ++++
 src/backend/renderer.js           | 14 ++++++++++++--
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index f4158fbdddb5..d2da26ba2b76 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -10,6 +10,7 @@ import {
   getBrowserName,
   getBrowserTheme,
 } from './utils';
+import { getSavedComponentFilters } from 'src/utils';
 import DevTools from 'src/devtools/views/DevTools';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -17,6 +18,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
 
 let panelCreated = false;
 
+// The renderer interface can't read saved component filters directly,
+// because they are stored in localStorage within the context of the extension.
+// Instead it relies on the extension to pass filters through.
+function initializeSavedComponentFilters() {
+  const componentFilters = getSavedComponentFilters();
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+      componentFilters
+    )};`
+  );
+}
+
+initializeSavedComponentFilters();
+
 function createPanelIfReactLoaded() {
   if (panelCreated) {
     return;
@@ -273,6 +288,10 @@ function createPanelIfReactLoaded() {
 
       // Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        // Re-initialize saved filters on navigation,
+        // since global values stored on window get reset in this case.
+        initializeSavedComponentFilters();
+
         // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
         bridge.shutdown();
 
@@ -286,6 +305,7 @@ function createPanelIfReactLoaded() {
 
 // Load (or reload) the DevTools extension when the user navigates to a new page.
 function checkPageForReact() {
+  initializeSavedComponentFilters();
   createPanelIfReactLoaded();
 }
 
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index d3de0e5d5ea1..0f35d726bdb0 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -8,11 +8,17 @@ import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
 import Store from 'src/devtools/store';
 import DevTools from 'src/devtools/views/DevTools';
+import { getSavedComponentFilters } from 'src/utils';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
 const { contentDocument, contentWindow } = iframe;
 
+// The renderer interface can't read saved component filters directly,
+// because they are stored in localStorage within the context of the extension.
+// Instead it relies on the extension to pass filters through.
+contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
+
 installHook(contentWindow);
 
 const container = ((document.getElementById('devtools'): any): HTMLElement);
@@ -78,12 +84,7 @@ inject('dist/app.js', () => {
 
         // Initialize the backend only once the DevTools frontend Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
-        inject('dist/backend.js', () => {
-          if (__DEV__) {
-            // Clear noisy webpack "WDS: ..." output.
-            console.clear();
-          }
-        });
+        inject('dist/backend.js');
       });
     },
 
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 2aec331a95c3..68916e13d3be 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -11,6 +11,7 @@ env.beforeEach(() => {
   const Bridge = require('src/bridge').default;
   const Store = require('src/devtools/store').default;
   const { installHook } = require('src/hook');
+  const { getDefaultComponentFilters } = require('src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
@@ -25,6 +26,9 @@ env.beforeEach(() => {
     originalConsoleError.apply(console, args);
   };
 
+  // Avoid "Invalid component filters" warning.
+  global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
+
   installHook(global);
 
   const bridgeListeners = [];
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4c7e0c175241..23786c2bbd96 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -21,7 +21,7 @@ import {
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
 import {
   getDisplayName,
-  getSavedComponentFilters,
+  getDefaultComponentFilters,
   getUID,
   utfEncodeString,
 } from 'src/utils';
@@ -305,7 +305,17 @@ export function attach(
     });
   }
 
-  applyComponentFilters(getSavedComponentFilters());
+  // The renderer interface can't read saved component filters directly,
+  // because they are stored in localStorage within the context of the extension.
+  // Instead it relies on the extension to pass filters through.
+  if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
+    applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+  } else {
+    console.warn('⚛️ DevTools: Invalid component filters');
+
+    // Fallback to assuming the default filters in this case.
+    applyComponentFilters(getDefaultComponentFilters());
+  }
 
   // If necessary, we can revisit optimizing this operation.
   // For example, we could add a new recursive unmount tree operation.

From d42f86bb50e5b49edf05e8e51f043f6b7c3d46f8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 14:35:43 -0700
Subject: [PATCH 566/814] Updated Profiling chart tests to cover components
 with duration=0

---
 .../profilingCharts-test.js.snap              | 120 +++++++++++++-----
 src/__tests__/profilingCharts-test.js         |  27 ++--
 2 files changed, 104 insertions(+), 43 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 3e0539db75a6..3cfc8bdfc993 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -11,18 +11,19 @@ Object {
       "id": 1,
       "key": null,
       "parentID": 0,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     2 => Object {
       "children": Array [
         3,
         4,
+        5,
       ],
       "displayName": "Parent",
       "id": 2,
       "key": null,
       "parentID": 1,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     3 => Object {
       "children": Array [],
@@ -30,7 +31,7 @@ Object {
       "id": 3,
       "key": "first",
       "parentID": 2,
-      "treeBaseDuration": 2,
+      "treeBaseDuration": 3,
     },
     4 => Object {
       "children": Array [],
@@ -40,6 +41,14 @@ Object {
       "parentID": 2,
       "treeBaseDuration": 2,
     },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+    },
   },
   "rootID": 1,
 }
@@ -47,10 +56,11 @@ Object {
 
 exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
 Object {
-  "baseDuration": 14,
+  "baseDuration": 15,
   "depth": 2,
   "idToDepthMap": Map {
     2 => 1,
+    5 => 2,
     4 => 2,
     3 => 2,
   },
@@ -58,36 +68,46 @@ Object {
   "rows": Array [
     Array [
       Object {
-        "actualDuration": 14,
+        "actualDuration": 15,
         "didRender": true,
         "id": 2,
-        "label": "Parent (10ms of 14ms)",
+        "label": "Parent (10ms of 15ms)",
         "name": "Parent",
         "offset": 0,
         "selfDuration": 10,
-        "treeBaseDuration": 14,
+        "treeBaseDuration": 15,
       },
     ],
     Array [
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 5,
+        "label": "Memo(Child) key=\\"third\\"",
+        "name": "Memo(Child)",
+        "offset": 15,
+        "selfDuration": 0,
+        "treeBaseDuration": 0,
+      },
       Object {
         "actualDuration": 2,
         "didRender": true,
         "id": 4,
         "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
         "name": "Memo(Child)",
-        "offset": 12,
+        "offset": 13,
         "selfDuration": 2,
         "treeBaseDuration": 2,
       },
       Object {
-        "actualDuration": 2,
+        "actualDuration": 3,
         "didRender": true,
         "id": 3,
-        "label": "Memo(Child) key=\\"first\\" (2ms of 2ms)",
+        "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
         "name": "Memo(Child)",
         "offset": 10,
-        "selfDuration": 2,
-        "treeBaseDuration": 2,
+        "selfDuration": 3,
+        "treeBaseDuration": 3,
       },
     ],
   ],
@@ -105,18 +125,19 @@ Object {
       "id": 1,
       "key": null,
       "parentID": 0,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     2 => Object {
       "children": Array [
         3,
         4,
+        5,
       ],
       "displayName": "Parent",
       "id": 2,
       "key": null,
       "parentID": 1,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     3 => Object {
       "children": Array [],
@@ -124,7 +145,7 @@ Object {
       "id": 3,
       "key": "first",
       "parentID": 2,
-      "treeBaseDuration": 2,
+      "treeBaseDuration": 3,
     },
     4 => Object {
       "children": Array [],
@@ -134,6 +155,14 @@ Object {
       "parentID": 2,
       "treeBaseDuration": 2,
     },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+    },
   },
   "rootID": 1,
 }
@@ -141,10 +170,11 @@ Object {
 
 exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
 Object {
-  "baseDuration": 14,
+  "baseDuration": 15,
   "depth": 2,
   "idToDepthMap": Map {
     2 => 1,
+    5 => 2,
     4 => 2,
     3 => 2,
   },
@@ -159,17 +189,27 @@ Object {
         "name": "Parent",
         "offset": 0,
         "selfDuration": 10,
-        "treeBaseDuration": 14,
+        "treeBaseDuration": 15,
       },
     ],
     Array [
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 5,
+        "label": "Memo(Child) key=\\"third\\"",
+        "name": "Memo(Child)",
+        "offset": 15,
+        "selfDuration": 0,
+        "treeBaseDuration": 0,
+      },
       Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 4,
         "label": "Memo(Child) key=\\"second\\"",
         "name": "Memo(Child)",
-        "offset": 12,
+        "offset": 13,
         "selfDuration": 0,
         "treeBaseDuration": 2,
       },
@@ -181,7 +221,7 @@ Object {
         "name": "Memo(Child)",
         "offset": 10,
         "selfDuration": 0,
-        "treeBaseDuration": 2,
+        "treeBaseDuration": 3,
       },
     ],
   ],
@@ -190,15 +230,15 @@ Object {
 
 exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
 Object {
-  "lastInteractionTime": 24,
-  "maxCommitDuration": 14,
+  "lastInteractionTime": 25,
+  "maxCommitDuration": 15,
 }
 `;
 
 exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
 Object {
-  "lastInteractionTime": 24,
-  "maxCommitDuration": 14,
+  "lastInteractionTime": 25,
+  "maxCommitDuration": 15,
 }
 `;
 
@@ -213,18 +253,19 @@ Object {
       "id": 1,
       "key": null,
       "parentID": 0,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     2 => Object {
       "children": Array [
         3,
         4,
+        5,
       ],
       "displayName": "Parent",
       "id": 2,
       "key": null,
       "parentID": 1,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     3 => Object {
       "children": Array [],
@@ -232,7 +273,7 @@ Object {
       "id": 3,
       "key": "first",
       "parentID": 2,
-      "treeBaseDuration": 2,
+      "treeBaseDuration": 3,
     },
     4 => Object {
       "children": Array [],
@@ -242,6 +283,14 @@ Object {
       "parentID": 2,
       "treeBaseDuration": 2,
     },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+    },
   },
   "rootID": 1,
 }
@@ -259,9 +308,9 @@ Object {
     },
     Object {
       "id": 3,
-      "label": "Memo(Child) key=\\"first\\" (2ms)",
+      "label": "Memo(Child) key=\\"first\\" (3ms)",
       "name": "Memo(Child)",
-      "value": 2,
+      "value": 3,
     },
     Object {
       "id": 4,
@@ -284,18 +333,19 @@ Object {
       "id": 1,
       "key": null,
       "parentID": 0,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     2 => Object {
       "children": Array [
         3,
         4,
+        5,
       ],
       "displayName": "Parent",
       "id": 2,
       "key": null,
       "parentID": 1,
-      "treeBaseDuration": 14,
+      "treeBaseDuration": 15,
     },
     3 => Object {
       "children": Array [],
@@ -303,7 +353,7 @@ Object {
       "id": 3,
       "key": "first",
       "parentID": 2,
-      "treeBaseDuration": 2,
+      "treeBaseDuration": 3,
     },
     4 => Object {
       "children": Array [],
@@ -313,6 +363,14 @@ Object {
       "parentID": 2,
       "treeBaseDuration": 2,
     },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Memo(Child)",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+    },
   },
   "rootID": 1,
 }
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 3e2613b5af93..46901444ee75 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -32,15 +32,16 @@ describe('profiling charts', () => {
         Scheduler.advanceTime(10);
         return (
           <React.Fragment>
-            <Child key="first" />
-            <Child key="second" />
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
           </React.Fragment>
         );
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child() {
-        Scheduler.advanceTime(2);
+      const Child = React.memo(function Child({ duration }) {
+        Scheduler.advanceTime(duration);
         return null;
       });
 
@@ -125,15 +126,16 @@ describe('profiling charts', () => {
         Scheduler.advanceTime(10);
         return (
           <React.Fragment>
-            <Child key="first" />
-            <Child key="second" />
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
           </React.Fragment>
         );
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child() {
-        Scheduler.advanceTime(2);
+      const Child = React.memo(function Child({ duration }) {
+        Scheduler.advanceTime(duration);
         return null;
       });
 
@@ -214,15 +216,16 @@ describe('profiling charts', () => {
         Scheduler.advanceTime(10);
         return (
           <React.Fragment>
-            <Child key="first" />
-            <Child key="second" />
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
           </React.Fragment>
         );
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child() {
-        Scheduler.advanceTime(2);
+      const Child = React.memo(function Child({ duration }) {
+        Scheduler.advanceTime(duration);
         return null;
       });
 

From ee099124e241778d5d398b48c8eef99bc9c66361 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 15:41:57 -0700
Subject: [PATCH 567/814] Fixed a Profiler memoization bug and improved test
 coverage

---
 .../__snapshots__/profiling-test.js.snap      | 415 +++++++++++-------
 .../profilingCharts-test.js.snap              |  10 +-
 src/__tests__/profiling-test.js               |  64 ++-
 src/backend/renderer.js                       |  22 +-
 4 files changed, 318 insertions(+), 193 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index d508f633a559..fa3916d3525c 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -3,10 +3,11 @@
 exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 0 1`] = `
 Object {
   "actualDurations": Map {
-    1 => 14,
-    2 => 14,
-    3 => 2,
-    4 => 2,
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
   },
   "commitIndex": 0,
   "interactions": Array [],
@@ -17,11 +18,11 @@ Object {
 exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 1 1`] = `
 Object {
   "actualDurations": Map {
-    3 => 2,
-    4 => 2,
-    5 => 2,
-    2 => 16,
-    1 => 16,
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 13,
+    1 => 13,
   },
   "commitIndex": 1,
   "interactions": Array [],
@@ -32,9 +33,9 @@ Object {
 exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 2 1`] = `
 Object {
   "actualDurations": Map {
-    3 => 2,
-    2 => 12,
-    1 => 12,
+    3 => 0,
+    2 => 10,
+    1 => 10,
   },
   "commitIndex": 2,
   "interactions": Array [],
@@ -60,13 +61,15 @@ Object {
     Object {
       "actualDurations": Array [
         1,
-        14,
+        12,
         2,
-        14,
+        12,
         3,
-        2,
+        0,
         4,
-        2,
+        1,
+        5,
+        1,
       ],
       "commitIndex": 0,
       "interactions": Array [],
@@ -75,15 +78,15 @@ Object {
     Object {
       "actualDurations": Array [
         3,
-        2,
+        0,
         4,
-        2,
-        5,
+        1,
+        6,
         2,
         2,
-        16,
+        13,
         1,
-        16,
+        13,
       ],
       "commitIndex": 1,
       "interactions": Array [],
@@ -92,11 +95,11 @@ Object {
     Object {
       "actualDurations": Array [
         3,
+        0,
         2,
-        2,
-        12,
+        10,
         1,
-        12,
+        10,
       ],
       "commitIndex": 2,
       "interactions": Array [],
@@ -123,7 +126,7 @@ Object {
       Array [
         1,
         1,
-        17,
+        29,
         6,
         80,
         97,
@@ -141,6 +144,18 @@ Object {
         48,
         1,
         49,
+        11,
+        77,
+        101,
+        109,
+        111,
+        40,
+        67,
+        104,
+        105,
+        108,
+        100,
+        41,
         1,
         1,
         11,
@@ -148,7 +163,7 @@ Object {
         1,
         4,
         1,
-        14000,
+        12000,
         1,
         2,
         5,
@@ -158,7 +173,7 @@ Object {
         0,
         4,
         2,
-        14000,
+        12000,
         1,
         3,
         5,
@@ -168,7 +183,7 @@ Object {
         3,
         4,
         3,
-        2000,
+        0,
         1,
         4,
         5,
@@ -178,7 +193,17 @@ Object {
         4,
         4,
         4,
-        2000,
+        1000,
+        1,
+        5,
+        8,
+        2,
+        2,
+        5,
+        0,
+        4,
+        5,
+        1000,
       ],
       Array [
         1,
@@ -193,27 +218,28 @@ Object {
         1,
         50,
         1,
-        5,
+        6,
         5,
         2,
         2,
         1,
         2,
         4,
-        5,
+        6,
         2000,
         4,
         2,
-        16000,
+        14000,
         3,
         2,
-        3,
+        4,
         3,
         4,
+        6,
         5,
         4,
         1,
-        16000,
+        14000,
       ],
       Array [
         1,
@@ -221,14 +247,19 @@ Object {
         0,
         2,
         2,
-        5,
+        6,
         4,
         4,
         2,
-        12000,
+        11000,
+        3,
+        2,
+        2,
+        3,
+        5,
         4,
         1,
-        12000,
+        11000,
       ],
       Array [
         1,
@@ -237,12 +268,6 @@ Object {
         2,
         1,
         3,
-        4,
-        2,
-        10000,
-        4,
-        1,
-        10000,
       ],
     ],
   },
@@ -251,16 +276,16 @@ Object {
   },
   "profilingSummary": Object {
     "commitDurations": Array [
-      14,
-      16,
       12,
+      13,
+      10,
       10,
     ],
     "commitTimes": Array [
-      14,
-      30,
-      42,
-      52,
+      12,
+      25,
+      35,
+      45,
     ],
     "initialTreeBaseDurations": Array [],
     "interactionCount": 0,
@@ -274,11 +299,11 @@ exports[`profiling FiberCommits should be collected for each rendered fiber: Fib
 Object {
   "commitDurations": Array [
     0,
-    12,
+    11,
     1,
-    14,
+    11,
     2,
-    16,
+    13,
   ],
   "fiberID": 2,
   "rootID": 1,
@@ -289,11 +314,11 @@ exports[`profiling FiberCommits should be collected for each rendered fiber: Fib
 Object {
   "commitDurations": Array [
     0,
-    2,
+    0,
     1,
+    0,
     2,
-    2,
-    2,
+    0,
   ],
   "fiberID": 3,
   "rootID": 1,
@@ -303,10 +328,8 @@ Object {
 exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 4 1`] = `
 Object {
   "commitDurations": Array [
+    0,
     1,
-    2,
-    2,
-    2,
   ],
   "fiberID": 4,
   "rootID": 1,
@@ -316,25 +339,40 @@ Object {
 exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 5 1`] = `
 Object {
   "commitDurations": Array [
+    1,
+    1,
     2,
-    2,
+    1,
   ],
   "fiberID": 5,
   "rootID": 1,
 }
 `;
 
+exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 6 1`] = `
+Object {
+  "commitDurations": Array [
+    2,
+    2,
+  ],
+  "fiberID": 6,
+  "rootID": 1,
+}
+`;
+
 exports[`profiling FiberCommits should be collected for each rendered fiber: exported data 1`] = `
 Object {
   "commitDetails": Array [
     Object {
       "actualDurations": Array [
         1,
-        12,
+        11,
         2,
-        12,
+        11,
         3,
-        2,
+        0,
+        4,
+        1,
       ],
       "commitIndex": 0,
       "interactions": Array [],
@@ -343,13 +381,13 @@ Object {
     Object {
       "actualDurations": Array [
         3,
+        0,
+        5,
+        1,
         2,
-        4,
-        2,
-        2,
-        14,
+        11,
         1,
-        14,
+        11,
       ],
       "commitIndex": 1,
       "interactions": Array [],
@@ -358,15 +396,15 @@ Object {
     Object {
       "actualDurations": Array [
         3,
-        2,
-        4,
-        2,
+        0,
         5,
+        1,
+        6,
         2,
         2,
-        16,
+        13,
         1,
-        16,
+        13,
       ],
       "commitIndex": 2,
       "interactions": Array [],
@@ -382,7 +420,7 @@ Object {
       Array [
         1,
         1,
-        15,
+        27,
         6,
         80,
         97,
@@ -398,6 +436,18 @@ Object {
         100,
         1,
         48,
+        11,
+        77,
+        101,
+        109,
+        111,
+        40,
+        67,
+        104,
+        105,
+        108,
+        100,
+        41,
         1,
         1,
         11,
@@ -405,7 +455,7 @@ Object {
         1,
         4,
         1,
-        12000,
+        11000,
         1,
         2,
         5,
@@ -415,7 +465,7 @@ Object {
         0,
         4,
         2,
-        12000,
+        11000,
         1,
         3,
         5,
@@ -425,7 +475,17 @@ Object {
         3,
         4,
         3,
-        2000,
+        0,
+        1,
+        4,
+        8,
+        2,
+        2,
+        4,
+        0,
+        4,
+        4,
+        1000,
       ],
       Array [
         1,
@@ -440,26 +500,27 @@ Object {
         1,
         49,
         1,
-        4,
+        5,
         5,
         2,
         2,
         1,
         2,
         4,
-        4,
-        2000,
+        5,
+        1000,
         4,
         2,
-        14000,
+        12000,
         3,
         2,
-        2,
         3,
+        3,
+        5,
         4,
         4,
         1,
-        14000,
+        12000,
       ],
       Array [
         1,
@@ -474,27 +535,28 @@ Object {
         1,
         50,
         1,
-        5,
+        6,
         5,
         2,
         2,
         1,
         2,
         4,
-        5,
+        6,
         2000,
         4,
         2,
-        16000,
+        14000,
         3,
         2,
-        3,
-        3,
         4,
+        3,
         5,
+        6,
+        4,
         4,
         1,
-        16000,
+        14000,
       ],
     ],
   },
@@ -503,14 +565,14 @@ Object {
   },
   "profilingSummary": Object {
     "commitDurations": Array [
-      12,
-      14,
-      16,
+      11,
+      11,
+      13,
     ],
     "commitTimes": Array [
-      12,
-      26,
-      42,
+      11,
+      22,
+      35,
     ],
     "initialTreeBaseDurations": Array [],
     "interactionCount": 0,
@@ -538,7 +600,7 @@ Array [
     ],
     "id": 1,
     "name": "update: two children",
-    "timestamp": 12,
+    "timestamp": 11,
   },
 ]
 `;
@@ -549,11 +611,13 @@ Object {
     Object {
       "actualDurations": Array [
         1,
-        12,
+        11,
         2,
-        12,
+        11,
         3,
-        2,
+        0,
+        4,
+        1,
       ],
       "commitIndex": 0,
       "interactions": Array [
@@ -569,13 +633,13 @@ Object {
     Object {
       "actualDurations": Array [
         3,
+        0,
+        5,
+        1,
         2,
-        4,
-        2,
-        2,
-        14,
+        11,
         1,
-        14,
+        11,
       ],
       "commitIndex": 1,
       "interactions": Array [
@@ -583,7 +647,7 @@ Object {
           "__count": 0,
           "id": 1,
           "name": "update: two children",
-          "timestamp": 12,
+          "timestamp": 11,
         },
       ],
       "rootID": 1,
@@ -607,7 +671,7 @@ Object {
         ],
         "id": 1,
         "name": "update: two children",
-        "timestamp": 12,
+        "timestamp": 11,
       },
     ],
     "rootID": 1,
@@ -617,7 +681,7 @@ Object {
       Array [
         1,
         1,
-        15,
+        27,
         6,
         80,
         97,
@@ -633,6 +697,18 @@ Object {
         100,
         1,
         48,
+        11,
+        77,
+        101,
+        109,
+        111,
+        40,
+        67,
+        104,
+        105,
+        108,
+        100,
+        41,
         1,
         1,
         11,
@@ -640,7 +716,7 @@ Object {
         1,
         4,
         1,
-        12000,
+        11000,
         1,
         2,
         5,
@@ -650,7 +726,7 @@ Object {
         0,
         4,
         2,
-        12000,
+        11000,
         1,
         3,
         5,
@@ -660,7 +736,17 @@ Object {
         3,
         4,
         3,
-        2000,
+        0,
+        1,
+        4,
+        8,
+        2,
+        2,
+        4,
+        0,
+        4,
+        4,
+        1000,
       ],
       Array [
         1,
@@ -675,26 +761,27 @@ Object {
         1,
         49,
         1,
-        4,
+        5,
         5,
         2,
         2,
         1,
         2,
         4,
-        4,
-        2000,
+        5,
+        1000,
         4,
         2,
-        14000,
+        12000,
         3,
         2,
-        2,
         3,
+        3,
+        5,
         4,
         4,
         1,
-        14000,
+        12000,
       ],
     ],
   },
@@ -703,12 +790,12 @@ Object {
   },
   "profilingSummary": Object {
     "commitDurations": Array [
-      12,
-      14,
+      11,
+      11,
     ],
     "commitTimes": Array [
-      12,
-      26,
+      11,
+      22,
     ],
     "initialTreeBaseDurations": Array [],
     "interactionCount": 2,
@@ -721,20 +808,21 @@ Object {
 exports[`profiling ProfilingSummary should be collected for each commit: ProfilingSummary 1`] = `
 Object {
   "commitDurations": Array [
-    16,
-    12,
+    13,
+    10,
     10,
   ],
   "commitTimes": Array [
-    16,
-    28,
-    38,
+    13,
+    23,
+    33,
   ],
   "initialTreeBaseDurations": Map {
-    1 => 14,
-    2 => 14,
-    3 => 2,
-    4 => 2,
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
   },
   "interactionCount": 0,
   "rootID": 1,
@@ -747,15 +835,15 @@ Object {
     Object {
       "actualDurations": Array [
         3,
-        2,
+        0,
         4,
-        2,
-        5,
+        1,
+        6,
         2,
         2,
-        16,
+        13,
         1,
-        16,
+        13,
       ],
       "commitIndex": 0,
       "interactions": Array [],
@@ -764,11 +852,11 @@ Object {
     Object {
       "actualDurations": Array [
         3,
+        0,
         2,
-        2,
-        12,
+        10,
         1,
-        12,
+        10,
       ],
       "commitIndex": 1,
       "interactions": Array [],
@@ -805,27 +893,28 @@ Object {
         1,
         50,
         1,
-        5,
+        6,
         5,
         2,
         2,
         1,
         2,
         4,
-        5,
+        6,
         2000,
         4,
         2,
-        16000,
+        14000,
         3,
         2,
-        3,
+        4,
         3,
         4,
+        6,
         5,
         4,
         1,
-        16000,
+        14000,
       ],
       Array [
         1,
@@ -833,14 +922,19 @@ Object {
         0,
         2,
         2,
-        5,
+        6,
         4,
         4,
         2,
-        12000,
+        11000,
+        3,
+        2,
+        2,
+        3,
+        5,
         4,
         1,
-        12000,
+        11000,
       ],
       Array [
         1,
@@ -849,12 +943,6 @@ Object {
         2,
         1,
         3,
-        4,
-        2,
-        10000,
-        4,
-        1,
-        10000,
       ],
     ],
   },
@@ -872,6 +960,7 @@ Object {
         "children": Array [
           3,
           4,
+          5,
         ],
         "displayName": "Parent",
         "id": 2,
@@ -889,28 +978,36 @@ Object {
         "id": 4,
         "key": "1",
       },
+      5 => Object {
+        "children": Array [],
+        "displayName": "Memo(Child)",
+        "id": 5,
+        "key": null,
+      },
     },
   },
   "profilingSummary": Object {
     "commitDurations": Array [
-      16,
-      12,
+      13,
+      10,
       10,
     ],
     "commitTimes": Array [
-      16,
-      28,
-      38,
+      13,
+      23,
+      33,
     ],
     "initialTreeBaseDurations": Array [
       1,
-      14,
+      12,
       2,
-      14,
+      12,
       3,
-      2,
+      0,
       4,
-      2,
+      1,
+      5,
+      1,
     ],
     "interactionCount": 0,
     "rootID": 1,
diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 3cfc8bdfc993..feb708bac729 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -81,9 +81,9 @@ Object {
     Array [
       Object {
         "actualDuration": 0,
-        "didRender": false,
+        "didRender": true,
         "id": 5,
-        "label": "Memo(Child) key=\\"third\\"",
+        "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
         "name": "Memo(Child)",
         "offset": 15,
         "selfDuration": 0,
@@ -318,6 +318,12 @@ Object {
       "name": "Memo(Child)",
       "value": 2,
     },
+    Object {
+      "id": 5,
+      "label": "Memo(Child) key=\\"third\\" (<0.1ms)",
+      "name": "Memo(Child)",
+      "value": 0,
+    },
   ],
 }
 `;
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 37b7d40ccc96..8631c9c08a64 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -86,14 +86,21 @@ describe('profiling', () => {
     it('should be collected for each commit', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
-        return new Array(count)
+        const children = new Array(count)
           .fill(true)
-          .map((_, index) => <Child key={index} />);
+          .map((_, index) => <Child key={index} duration={index} />);
+        return (
+          <React.Fragment>
+            {children}
+            <MemoizedChild duration={1} />
+          </React.Fragment>
+        );
       };
-      const Child = () => {
-        Scheduler.advanceTime(2);
+      const Child = ({ duration }) => {
+        Scheduler.advanceTime(duration);
         return null;
       };
+      const MemoizedChild = React.memo(Child);
 
       const container = document.createElement('div');
 
@@ -158,14 +165,21 @@ describe('profiling', () => {
     it('should be collected for each commit', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
-        return new Array(count)
+        const children = new Array(count)
           .fill(true)
-          .map((_, index) => <Child key={index} />);
+          .map((_, index) => <Child key={index} duration={index} />);
+        return (
+          <React.Fragment>
+            {children}
+            <MemoizedChild duration={1} />
+          </React.Fragment>
+        );
       };
-      const Child = () => {
-        Scheduler.advanceTime(2);
+      const Child = ({ duration }) => {
+        Scheduler.advanceTime(duration);
         return null;
       };
+      const MemoizedChild = React.memo(Child);
 
       const container = document.createElement('div');
 
@@ -245,14 +259,21 @@ describe('profiling', () => {
     it('should be collected for each rendered fiber', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
-        return new Array(count)
+        const children = new Array(count)
           .fill(true)
-          .map((_, index) => <Child key={index} />);
+          .map((_, index) => <Child key={index} duration={index} />);
+        return (
+          <React.Fragment>
+            {children}
+            <MemoizedChild duration={1} />
+          </React.Fragment>
+        );
       };
-      const Child = () => {
-        Scheduler.advanceTime(2);
+      const Child = ({ duration }) => {
+        Scheduler.advanceTime(duration);
         return null;
       };
+      const MemoizedChild = React.memo(Child);
 
       const container = document.createElement('div');
 
@@ -339,14 +360,21 @@ describe('profiling', () => {
     it('should be collected for every traced interaction', async done => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
-        return new Array(count)
+        const children = new Array(count)
           .fill(true)
-          .map((_, index) => <Child key={index} />);
+          .map((_, index) => <Child key={index} duration={index} />);
+        return (
+          <React.Fragment>
+            {children}
+            <MemoizedChild duration={1} />
+          </React.Fragment>
+        );
       };
-      const Child = () => {
-        Scheduler.advanceTime(2);
+      const Child = ({ duration }) => {
+        Scheduler.advanceTime(duration);
         return null;
       };
+      const MemoizedChild = React.memo(Child);
 
       const container = document.createElement('div');
 
@@ -419,7 +447,9 @@ describe('profiling', () => {
 
   it('should remove profiling data when roots are unmounted', async () => {
     const Parent = ({ count }) =>
-      new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
     const Child = () => <div>Hi!</div>;
 
     const containerA = document.createElement('div');
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 23786c2bbd96..c05c1dee0505 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -645,18 +645,6 @@ export function attach(
     }
   }
 
-  function haveProfilerTimesChanged(
-    prevFiber: Fiber,
-    nextFiber: Fiber
-  ): boolean {
-    return (
-      prevFiber.actualDuration !== undefined && // Short-circuit check for non-profiling builds
-      (prevFiber.actualDuration !== nextFiber.actualDuration ||
-        prevFiber.actualStartTime !== nextFiber.actualStartTime ||
-        prevFiber.treeBaseDuration !== nextFiber.treeBaseDuration)
-    );
-  }
-
   let pendingOperations: Array<number> = [];
   let pendingRealUnmountedIDs: Array<number> = [];
   let pendingSimulatedUnmountedIDs: Array<number> = [];
@@ -843,8 +831,9 @@ export function attach(
       pushOperation(treeBaseDuration);
 
       const { actualDuration } = fiber;
-      if (actualDuration != null && actualDuration > 0) {
+      if (actualDuration != null) {
         // If profiling is active, store durations for elements that were rendered during the commit.
+        // We should do this for all fibers on mount, regardless of their actual durations.
         const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
         metadata.actualDurations.push(id, actualDuration);
         metadata.maxActualDuration = Math.max(
@@ -1024,9 +1013,12 @@ export function attach(
         pushOperation(treeBaseDuration);
       }
 
-      if (alternate ? haveProfilerTimesChanged(alternate, fiber) : true) {
-        if (actualDuration != null && actualDuration > 0) {
+      if (alternate ? hasDataChanged(alternate, fiber) : true) {
+        if (actualDuration != null) {
           // If profiling is active, store durations for elements that were rendered during the commit.
+          // Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.
+          // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
+          // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
           metadata.actualDurations.push(id, actualDuration);
           metadata.maxActualDuration = Math.max(

From 0722a5a02421b9348344bc365407016f4115c35d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 17:58:31 -0700
Subject: [PATCH 568/814] Tweaked REAMDE

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index daa230d5ee8f..c9082991f42e 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This repo is a work-in-progress rewrite of the [React DevTools extension](https:
 
 Installation instructions are available online as well:
 * [Chrome](https://react-devtools-experimental-chrome.now.sh/)
-* [Firefox](https://react-devtools-experimental-firefox.now.sh/).
+* [Firefox](https://react-devtools-experimental-firefox.now.sh/)
 
 Or you can build and install from source:
 ```sh

From 17516b76ae763ec7c4dfa09d826164d6bb2e41c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 8 May 2019 18:23:54 -0700
Subject: [PATCH 569/814] Dim owners that have been filtered from the tree in
 rendered-by list

---
 src/devtools/store.js                             | 4 ++++
 src/devtools/views/Components/SelectedElement.css | 5 +++++
 src/devtools/views/Components/SelectedElement.js  | 8 ++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index b4c2403fe0ab..61a141797e1c 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -377,6 +377,10 @@ export default class Store extends EventEmitter {
     this.emit('isProfiling');
   }
 
+  containsElement(id: number): boolean {
+    return this._idToElement.get(id) != null;
+  }
+
   getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
       console.warn(
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 97c909d28029..9ad029099d6b 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -87,3 +87,8 @@
 .CannotSuspendWarningMessage {
   font-size: var(--font-size-sans-large);
 }
+
+.NotInStore {
+  color: var(--color-dim);
+  cursor: default;
+}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index f3902ac067f1..90da16ee48d8 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -306,6 +306,7 @@ function InspectedElementView({
               key={owner.id}
               displayName={owner.displayName}
               id={owner.id}
+              isInStore={store.containsElement(owner.id)}
             />
           ))}
         </div>
@@ -314,7 +315,9 @@ function InspectedElementView({
   );
 }
 
-function OwnerView({ displayName, id }: { displayName: string, id: number }) {
+type OwnerViewProps = {| displayName: string, id: number, isInStore: boolean |};
+
+function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
 
   const handleClick = useCallback(
@@ -329,7 +332,8 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
   return (
     <button
       key={id}
-      className={styles.Owner}
+      className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+      disabled={!isInStore}
       onClick={handleClick}
       title={displayName}
     >

From 564a2233685d52fceccfd2f4a515a654ec6f9879 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 May 2019 11:47:22 -0700
Subject: [PATCH 570/814] Fetch owners list from renderer (using suspense)

Owners in the list may have been filtered out of the Store, but in the owners list view- it's important to still show them. The frontend cannot do this on its own, so this list needs to come from the renderer interface.
---
 src/backend/agent.js                          |  22 +-
 src/backend/renderer.js                       |  46 ++--
 src/backend/types.js                          |   6 +-
 src/devtools/views/Components/Components.js   |  29 +--
 src/devtools/views/Components/Element.js      |   4 +-
 .../views/Components/OwnersListContext.js     | 109 +++++++++
 src/devtools/views/Components/OwnersStack.css |   5 +
 src/devtools/views/Components/OwnersStack.js  | 212 +++++++++++++-----
 .../views/Components/SelectedElement.js       |   4 +-
 src/devtools/views/Components/Tree.css        |  11 +
 src/devtools/views/Components/Tree.js         |  20 +-
 src/devtools/views/Components/TreeContext.js  | 113 +++-------
 src/devtools/views/Components/types.js        |   5 +
 13 files changed, 404 insertions(+), 182 deletions(-)
 create mode 100644 src/devtools/views/Components/OwnersListContext.js

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 1a12eee29a95..0c8fd77f0932 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -16,6 +16,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
+import type { OwnersList } from 'src/devtools/views/Components/types';
 import type { Bridge, ComponentFilter } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -29,7 +30,7 @@ const debug = (methodName, ...args) => {
   }
 };
 
-type InspectSelectParams = {|
+type ElementAndRendererID = {|
   id: number,
   rendererID: number,
 |};
@@ -99,6 +100,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
+    bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('logElementToConsole', this.logElementToConsole);
     bridge.addListener('overrideContext', this.overrideContext);
@@ -303,7 +305,17 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  inspectElement = ({ id, rendererID }: InspectSelectParams) => {
+  getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      const owners = renderer.getOwnersList(id);
+      this._bridge.send('ownersList', ({ id, owners }: OwnersList));
+    }
+  };
+
+  inspectElement = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -312,7 +324,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  logElementToConsole = ({ id, rendererID }: InspectSelectParams) => {
+  logElementToConsole = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -340,7 +352,7 @@ export default class Agent extends EventEmitter {
     this._bridge.send('screenshotCaptured', { commitIndex, dataURL });
   };
 
-  selectElement = ({ id, rendererID }: InspectSelectParams) => {
+  selectElement = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -506,7 +518,7 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
+  viewElementSource = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c05c1dee0505..cc49385c8fc0 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -50,7 +50,10 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type {
+  InspectedElement,
+  Owner,
+} from 'src/devtools/views/Components/types';
 import type { ComponentFilter, ElementType } from 'src/types';
 
 function getInternalReactConstants(version) {
@@ -1685,6 +1688,30 @@ export function attach(
     }
   }
 
+  function getOwnersList(id: number): Array<Owner> | null {
+    let fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber == null) {
+      return null;
+    }
+
+    const { _debugOwner } = fiber;
+
+    let owners = null;
+    if (_debugOwner) {
+      owners = [];
+      let owner = _debugOwner;
+      while (owner !== null) {
+        owners.push({
+          displayName: getDisplayNameForFiber(owner) || 'Unknown',
+          id: getFiberID(getPrimaryFiber(owner)),
+        });
+        owner = owner._debugOwner || null;
+      }
+    }
+
+    return owners;
+  }
+
   function inspectElementRaw(id: number): InspectedElement | null {
     let fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
@@ -1692,7 +1719,6 @@ export function attach(
     }
 
     const {
-      _debugOwner,
       _debugSource,
       stateNode,
       memoizedProps,
@@ -1764,19 +1790,6 @@ export function attach(
       context = { value: context };
     }
 
-    let owners = null;
-    if (_debugOwner) {
-      owners = [];
-      let owner = _debugOwner;
-      while (owner !== null) {
-        owners.push({
-          displayName: getDisplayNameForFiber(owner) || 'Unknown',
-          id: getFiberID(getPrimaryFiber(owner)),
-        });
-        owner = owner._debugOwner || null;
-      }
-    }
-
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
 
@@ -1812,7 +1825,7 @@ export function attach(
       state: usesHooks ? null : memoizedState,
 
       // List of owners
-      owners,
+      owners: getOwnersList(id),
 
       // Location of component in source coude.
       source: _debugSource,
@@ -2385,6 +2398,7 @@ export function attach(
     getFiberCommits,
     getInteractions,
     findNativeByFiberID,
+    getOwnersList,
     getPathForElement,
     getProfilingDataForDownload,
     getProfilingSummary,
diff --git a/src/backend/types.js b/src/backend/types.js
index 7cd529528bf9..a9680cd78a2e 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,7 +1,10 @@
 // @flow
 
 import type { ComponentFilter, ElementType } from 'src/types';
-import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type {
+  InspectedElement,
+  Owner,
+} from 'src/devtools/views/Components/types';
 
 type BundleType =
   | 0 // PROD
@@ -175,6 +178,7 @@ export type RendererInterface = {
   ) => number | null,
   getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,
   getInteractions: (rootID: number) => InteractionsBackend,
+  getOwnersList: (id: number) => Array<Owner> | null,
   getProfilingDataForDownload: (rootID: number) => Object,
   getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index dd4b77543196..3ed317a101dd 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -4,6 +4,7 @@ import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import { InspectedElementContextController } from './InspectedElementContext';
+import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
 import { ModalDialog } from '../ModalDialog';
 
@@ -12,19 +13,21 @@ import styles from './Components.css';
 function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
-    <div className={styles.Components}>
-      <div className={styles.TreeWrapper}>
-        <Tree />
-      </div>
-      <div className={styles.SelectedElementWrapper}>
-        <InspectedElementContextController>
-          <Suspense fallback={<Loading />}>
-            <SelectedElement />
-          </Suspense>
-        </InspectedElementContextController>
-      </div>
-      <ModalDialog />
-    </div>
+    <OwnersListContextController>
+      <InspectedElementContextController>
+        <div className={styles.Components}>
+          <div className={styles.TreeWrapper}>
+            <Tree />
+          </div>
+          <div className={styles.SelectedElementWrapper}>
+            <Suspense fallback={<Loading />}>
+              <SelectedElement />
+            </Suspense>
+          </div>
+          <ModalDialog />
+        </div>
+      </InspectedElementContextController>
+    </OwnersListContextController>
   );
 }
 
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 322726784df6..79b015e85cda 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -29,7 +29,7 @@ type Props = {
 
 export default function ElementView({ data, index, style }: Props) {
   const store = useContext(StoreContext);
-  const { ownerFlatTree, ownerStack, selectedElementID } = useContext(
+  const { ownerFlatTree, ownerID, selectedElementID } = useContext(
     TreeStateContext
   );
   const dispatch = useContext(TreeDispatcherContext);
@@ -168,7 +168,7 @@ export default function ElementView({ data, index, style }: Props) {
       }}
     >
       <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
-      {ownerStack.length === 0 ? (
+      {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
       <span className={styles.Component}>
diff --git a/src/devtools/views/Components/OwnersListContext.js b/src/devtools/views/Components/OwnersListContext.js
new file mode 100644
index 000000000000..3720f3b2cc31
--- /dev/null
+++ b/src/devtools/views/Components/OwnersListContext.js
@@ -0,0 +1,109 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+} from 'react';
+import { createResource } from '../../cache';
+import { BridgeContext, StoreContext } from '../context';
+import { TreeStateContext } from './TreeContext';
+
+import type {
+  Element,
+  Owner,
+  OwnersList,
+} from 'src/devtools/views/Components/types';
+import type { Resource, Thenable } from '../../cache';
+
+type Context = (id: number) => Array<Owner> | null;
+
+const OwnersListContext = createContext<Context>(((null: any): Context));
+OwnersListContext.displayName = 'OwnersListContext';
+
+type ResolveFn = (ownersList: Array<Owner> | null) => void;
+type InProgressRequest = {|
+  promise: Thenable<Array<Owner>>,
+  resolveFn: ResolveFn,
+|};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<Element, Element, Array<Owner>> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(element, { promise, resolveFn });
+
+    return promise;
+  },
+  (element: Element) => element,
+  { useWeakMap: true }
+);
+
+type Props = {|
+  children: React$Node,
+|};
+
+function OwnersListContextController({ children }: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const { ownerID } = useContext(TreeStateContext);
+
+  const read = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store]
+  );
+
+  useEffect(() => {
+    const onOwnersList = (ownersList: OwnersList) => {
+      const id = ownersList.id;
+
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        const request = inProgressRequests.get(element);
+        if (request != null) {
+          inProgressRequests.delete(element);
+          request.resolveFn(ownersList.owners);
+        }
+      }
+    };
+
+    bridge.addListener('ownersList', onOwnersList);
+    return () => bridge.removeListener('ownersList', onOwnersList);
+  }, [bridge, store]);
+
+  // This effect requests an updated owners list any time the selected owner changes
+  useEffect(() => {
+    if (ownerID !== null) {
+      const rendererID = store.getRendererIDForElement(ownerID);
+
+      bridge.send('getOwnersList', { id: ownerID, rendererID });
+    }
+
+    return () => {};
+  }, [bridge, ownerID, store]);
+
+  return (
+    <OwnersListContext.Provider value={read}>
+      {children}
+    </OwnersListContext.Provider>
+  );
+}
+
+export { OwnersListContext, OwnersListContextController };
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 1aba50714a33..48c9db0fc430 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -91,3 +91,8 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
+
+.NotInStore,
+.NotInStore:hover {
+  color: var(--color-dimmest);
+}
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 9635045d3307..77ec8eed60e9 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useLayoutEffect,
+  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -12,22 +13,111 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
+import { OwnersListContext } from './OwnersListContext';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
+import { StoreContext } from '../context';
 
-import type { Element } from './types';
+import type { Owner } from './types';
 
 import styles from './OwnersStack.css';
 
+type SelectOwner = (owner: Owner | null) => void;
+
+type ACTION_UPDATE_OWNER_ID = {|
+  type: 'UPDATE_OWNER_ID',
+  ownerID: number | null,
+  owners: Array<Owner>,
+|};
+type ACTION_UPDATE_SELECTED_INDEX = {|
+  type: 'UPDATE_SELECTED_INDEX',
+  selectedIndex: number,
+|};
+
+type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;
+
+type State = {|
+  ownerID: number | null,
+  owners: Array<Owner>,
+  selectedIndex: number,
+|};
+
+function dialogReducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_OWNER_ID':
+      const selectedIndex = state.owners.findIndex(
+        owner => owner.id === action.ownerID
+      );
+      return {
+        ownerID: action.ownerID,
+        owners: action.owners,
+        selectedIndex,
+      };
+    case 'UPDATE_SELECTED_INDEX':
+      return {
+        ...state,
+        selectedIndex: action.selectedIndex,
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
 export default function OwnerStack() {
-  const { ownerStack, ownerStackIndex } = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
+  const read = useContext(OwnersListContext);
+  const { ownerID } = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+
+  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+    ownerID: null,
+    owners: [],
+    selectedIndex: -1,
+  });
+
+  // TODO (owners) Explain this and use reducer with ownerID too to avoid inf. loop
+  if (ownerID === null) {
+    dispatch({
+      type: 'UPDATE_OWNER_ID',
+      ownerID: null,
+      owners: [],
+    });
+  } else if (ownerID !== state.ownerID) {
+    const isInList = state.owners.findIndex(owner => owner.id === ownerID) >= 0;
+    dispatch({
+      type: 'UPDATE_OWNER_ID',
+      ownerID,
+      owners: isInList ? state.owners : read(ownerID) || [],
+    });
+  }
+
+  const { owners, selectedIndex } = state;
+
+  const selectOwner = useCallback<SelectOwner>(
+    (owner: Owner | null) => {
+      if (owner !== null) {
+        const index = owners.indexOf(owner);
+        dispatch({
+          type: 'UPDATE_SELECTED_INDEX',
+          selectedIndex: index >= 0 ? index : 0,
+        });
+        treeDispatch({ type: 'SELECT_OWNER', payload: owner.id });
+      } else {
+        dispatch({
+          type: 'UPDATE_SELECTED_INDEX',
+          selectedIndex: 0,
+        });
+        treeDispatch({ type: 'RESET_OWNER_STACK' });
+      }
+    },
+    [owners, treeDispatch]
+  );
 
   const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
   const elementsBarRef = useRef<HTMLDivElement | null>(null);
   const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
 
+  const selectedOwner = owners[selectedIndex];
+
   useLayoutEffect(() => {
     // If we're already overflowing, then we don't need to re-measure items.
     // That's because once the owners stack is open, it can only get larger (by driling in).
@@ -37,7 +127,7 @@ export default function OwnerStack() {
     }
 
     let elementsTotalWidth = 0;
-    for (let i = 0; i < ownerStack.length; i++) {
+    for (let i = 0; i < owners.length; i++) {
       const element = elementsBarRef.current.children[i];
       const computedStyle = getComputedStyle(element);
 
@@ -48,7 +138,7 @@ export default function OwnerStack() {
     }
 
     setElementsTotalWidth(elementsTotalWidth);
-  }, [elementsBarRef, isOverflowing, ownerStack.length]);
+  }, [elementsBarRef, isOverflowing, owners.length]);
 
   return (
     <div className={styles.OwnerStack}>
@@ -56,28 +146,38 @@ export default function OwnerStack() {
         {isOverflowing && (
           <Fragment>
             <ElementsDropdown
-              ownerStack={ownerStack}
-              ownerStackIndex={ownerStackIndex}
+              owners={owners}
+              selectedIndex={selectedIndex}
+              selectOwner={selectOwner}
             />
             <BackToOwnerButton
-              ownerStack={ownerStack}
-              ownerStackIndex={ownerStackIndex}
-            />
-            <ElementView
-              id={ownerStack[((ownerStackIndex: any): number)]}
-              index={ownerStackIndex}
+              owners={owners}
+              selectedIndex={selectedIndex}
+              selectOwner={selectOwner}
             />
+            {selectedOwner != null && (
+              <ElementView
+                owner={selectedOwner}
+                isSelected
+                selectOwner={selectOwner}
+              />
+            )}
           </Fragment>
         )}
         {!isOverflowing &&
-          ownerStack.map((id, index) => (
-            <ElementView key={id} id={id} index={index} />
+          owners.map((owner, index) => (
+            <ElementView
+              key={index}
+              owner={owner}
+              isSelected={index === selectedIndex}
+              selectOwner={selectOwner}
+            />
           ))}
       </div>
       <div className={styles.VRule} />
       <Button
         className={styles.IconButton}
-        onClick={() => dispatch({ type: 'RESET_OWNER_STACK' })}
+        onClick={() => selectOwner(null)}
         title="Back to tree view"
       >
         <ButtonIcon type="close" />
@@ -87,26 +187,28 @@ export default function OwnerStack() {
 }
 
 type ElementsDropdownProps = {
-  ownerStack: Array<number>,
-  ownerStackIndex: number | null,
+  owners: Array<Owner>,
+  selectedIndex: number,
+  selectOwner: SelectOwner,
 };
 function ElementsDropdown({
-  ownerStack,
-  ownerStackIndex,
+  owners,
+  selectedIndex,
+  selectOwner,
 }: ElementsDropdownProps) {
   const store = useContext(StoreContext);
-  const dispatch = useContext(TreeDispatcherContext);
 
   const menuItems = [];
-  for (let index = ownerStack.length - 1; index >= 0; index--) {
-    const id = ownerStack[index];
+  for (let index = owners.length - 1; index >= 0; index--) {
+    const owner = owners[index];
+    const isInStore = store.containsElement(owner.id);
     menuItems.push(
       <MenuItem
-        key={id}
-        className={styles.Component}
-        onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}
+        key={owner.id}
+        className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
+        onSelect={() => (isInStore ? selectOwner(owner) : null)}
       >
-        {((store.getElementByID(id): any): Element).displayName}
+        {owner.displayName}
       </MenuItem>
     );
   }
@@ -126,28 +228,26 @@ function ElementsDropdown({
 }
 
 type ElementViewProps = {
-  id: number,
-  index: number | null,
+  isSelected: boolean,
+  owner: Owner,
+  selectOwner: SelectOwner,
 };
-function ElementView({ id, index }: ElementViewProps) {
+function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
   const store = useContext(StoreContext);
-  const { ownerStackIndex } = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
-
-  const { displayName } = ((store.getElementByID(id): any): Element);
 
-  const isChecked = ownerStackIndex === index;
+  const { displayName } = owner;
+  const isInStore = store.containsElement(owner.id);
 
   const handleChange = useCallback(() => {
-    if (!isChecked) {
-      dispatch({ type: 'SELECT_OWNER', payload: id });
+    if (isInStore) {
+      selectOwner(owner);
     }
-  }, [dispatch, id, isChecked]);
+  }, [isInStore, selectOwner, owner]);
 
   return (
     <Toggle
-      className={styles.Component}
-      isChecked={isChecked}
+      className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
+      isChecked={isSelected}
       onChange={handleChange}
     >
       {displayName}
@@ -156,32 +256,32 @@ function ElementView({ id, index }: ElementViewProps) {
 }
 
 type BackToOwnerButtonProps = {|
-  ownerStack: Array<number>,
-  ownerStackIndex: number | null,
+  owners: Array<Owner>,
+  selectedIndex: number,
+  selectOwner: SelectOwner,
 |};
 function BackToOwnerButton({
-  ownerStack,
-  ownerStackIndex,
+  owners,
+  selectedIndex,
+  selectOwner,
 }: BackToOwnerButtonProps) {
   const store = useContext(StoreContext);
-  const dispatch = useContext(TreeDispatcherContext);
 
-  if (ownerStackIndex === null || ownerStackIndex === 0) {
+  if (selectedIndex <= 0) {
     return null;
   }
 
-  const ownerID = ownerStack[ownerStackIndex - 1];
-  const owner = store.getElementByID(ownerID);
+  const owner = owners[selectedIndex - 1];
+  if (owner == null) {
+    debugger;
+  }
+  const isInStore = store.containsElement(owner.id);
 
   return (
     <Button
-      onClick={() =>
-        dispatch({
-          type: 'SELECT_OWNER',
-          payload: ownerID,
-        })
-      }
-      title={`Up to ${(owner !== null && owner.displayName) || 'owner'}`}
+      className={isInStore ? undefined : styles.NotInStore}
+      onClick={() => (isInStore ? selectOwner(owner) : null)}
+      title={`Up to ${owner.displayName || 'owner'}`}
     >
       <ButtonIcon type="previous" />
     </Button>
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 90da16ee48d8..4ead00425ab4 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -227,7 +227,7 @@ function InspectedElementView({
     state,
   } = inspectedElement;
 
-  const { ownerStack } = useContext(TreeStateContext);
+  const { ownerID } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -298,7 +298,7 @@ function InspectedElementView({
         overrideValueFn={overrideContextFn}
       />
 
-      {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
+      {ownerID === null && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
           <div className={styles.OwnersHeader}>rendered by</div>
           {owners.map(owner => (
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 3ce44f0828c4..3efc1bf8632b 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -37,3 +37,14 @@
   margin: 0 0.5rem;
   background-color: var(--color-border);
 }
+
+.Loading {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-start;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 8c3c4031f7d6..4687c7993971 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  Suspense,
   useState,
   useCallback,
   useContext,
@@ -38,7 +39,7 @@ export default function Tree(props: Props) {
   const dispatch = useContext(TreeDispatcherContext);
   const {
     numElements,
-    ownerStack,
+    ownerID,
     searchIndex,
     searchResults,
     selectedElementID,
@@ -277,7 +278,9 @@ export default function Tree(props: Props) {
         <div className={styles.SearchInput}>
           <InspectHostNodesToggle />
           <div className={styles.VRule} />
-          {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
+          <Suspense fallback={<Loading />}>
+            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+          </Suspense>
           <div className={styles.VRule} />
           <ToggleComponentFiltersModalButton />
         </div>
@@ -317,7 +320,7 @@ export default function Tree(props: Props) {
 }
 
 function InnerElementType({ style, ...rest }) {
-  const { ownerStack } = useContext(TreeStateContext);
+  const { ownerID } = useContext(TreeStateContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -346,10 +349,9 @@ function InnerElementType({ style, ...rest }) {
 
   // We shouldn't retain this width across different conceptual trees though,
   // so when the user opens the "owners tree" view, we should discard the previous width.
-  const hasOwnerStack = ownerStack.length > 0;
-  const [prevHasOwnerStack, setPrevHasOwnerStack] = useState(hasOwnerStack);
-  if (hasOwnerStack !== prevHasOwnerStack) {
-    setPrevHasOwnerStack(hasOwnerStack);
+  const [prevOwnerID, setPrevOwnerID] = useState(ownerID);
+  if (ownerID !== prevOwnerID) {
+    setPrevOwnerID(ownerID);
     setMinWidth(null);
   }
 
@@ -371,3 +373,7 @@ function InnerElementType({ style, ...rest }) {
     />
   );
 }
+
+function Loading() {
+  return <div className={styles.Loading}>Loading...</div>;
+}
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 002f6b619ee4..b2c9b29ac430 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -50,9 +50,8 @@ type StateContext = {|
   searchText: string,
 
   // Owners
+  ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
-  ownerStack: Array<number>,
-  ownerStackIndex: number | null,
 
   // Inspection element panel
   inspectedElementID: number | null,
@@ -142,8 +141,7 @@ type State = {|
   searchText: string,
 
   // Owners
-  ownerStack: Array<number>,
-  ownerStackIndex: number | null,
+  ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
 
   // Inspection element panel
@@ -151,17 +149,12 @@ type State = {|
 |};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
-  let {
-    numElements,
-    ownerStack,
-    selectedElementIndex,
-    selectedElementID,
-  } = state;
+  let { numElements, ownerID, selectedElementIndex, selectedElementID } = state;
 
   let lookupIDForIndex = true;
 
   // Base tree should ignore selected element changes when the owner's tree is active.
-  if (ownerStack.length === 0) {
+  if (ownerID === null) {
     switch (action.type) {
       case 'HANDLE_STORE_MUTATION':
         numElements = store.numElements;
@@ -276,7 +269,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
 function reduceSearchState(store: Store, state: State, action: Action): State {
   let {
-    ownerStack,
+    ownerID,
     searchIndex,
     searchResults,
     searchText,
@@ -295,7 +288,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   let didRequestSearch = false;
 
   // Search isn't supported when the owner's tree is active.
-  if (ownerStack.length === 0) {
+  if (ownerID === null) {
     switch (action.type) {
       case 'GO_TO_NEXT_SEARCH_RESULT':
         if (numPrevSearchResults > 0) {
@@ -442,9 +435,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     numElements,
     selectedElementID,
     selectedElementIndex,
+    ownerID,
     ownerFlatTree,
-    ownerStack,
-    ownerStackIndex,
     searchIndex,
     searchResults,
     searchText,
@@ -454,25 +446,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 
   switch (action.type) {
     case 'HANDLE_STORE_MUTATION':
-      if (ownerStack.length > 0) {
-        let indexOfRemovedItem = -1;
-        for (let i = 0; i < ownerStack.length; i++) {
-          if (store.getElementByID(ownerStack[i]) === null) {
-            indexOfRemovedItem = i;
-            break;
-          }
-        }
-
-        if (indexOfRemovedItem >= 0) {
-          ownerStack = ownerStack.slice(0, indexOfRemovedItem);
-          if (ownerStack.length === 0) {
-            ownerFlatTree = null;
-            ownerStackIndex = null;
-          } else {
-            ownerStackIndex = ownerStack.length - 1;
-          }
-        }
-        if (selectedElementID !== null && ownerFlatTree !== null) {
+      if (ownerID !== null) {
+        ownerFlatTree = store.getOwnersListForElement(ownerID);
+        if (selectedElementID !== null) {
           // Mutation might have caused the index of this ID to shift.
           selectedElementIndex = ownerFlatTree.findIndex(
             element => element.id === selectedElementID
@@ -491,13 +467,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       }
       break;
     case 'RESET_OWNER_STACK':
-      ownerStack = [];
-      ownerStackIndex = null;
+      ownerID = null;
+      ownerFlatTree = null;
       selectedElementIndex =
         selectedElementID !== null
           ? store.getIndexOfElementID(selectedElementID)
           : null;
-      ownerFlatTree = null;
       break;
     case 'SELECT_ELEMENT_AT_INDEX':
       if (ownerFlatTree !== null) {
@@ -533,33 +508,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       // If the Store doesn't have any owners metadata, don't drill into an empty stack.
       // This is a confusing user experience.
       if (store.hasOwnerMetadata) {
-        const id = (action: ACTION_SELECT_OWNER).payload;
-        ownerStackIndex = ownerStack.indexOf(id);
+        ownerID = (action: ACTION_SELECT_OWNER).payload;
+        ownerFlatTree = store.getOwnersListForElement(ownerID);
 
         // Always force reset selection to be the top of the new owner tree.
         selectedElementIndex = 0;
         prevSelectedElementIndex = null;
-
-        // If this owner is already in the current stack, just select it.
-        // Otherwise, create a new stack.
-        if (ownerStackIndex < 0) {
-          // Add this new owner, and fill in the owners above it as well.
-          ownerStack = [];
-          let currentOwnerID = id;
-          while (currentOwnerID !== 0) {
-            ownerStack.unshift(currentOwnerID);
-            currentOwnerID = ((store.getElementByID(
-              currentOwnerID
-            ): any): Element).ownerID;
-          }
-          ownerStackIndex = ownerStack.length - 1;
-
-          if (searchText !== '') {
-            searchIndex = null;
-            searchResults = [];
-            searchText = '';
-          }
-        }
       }
       break;
     default:
@@ -569,17 +523,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 
   // Changes in the selected owner require re-calculating the owners tree.
   if (
-    ownerStackIndex !== state.ownerStackIndex ||
-    ownerStack !== state.ownerStack ||
+    ownerFlatTree !== state.ownerFlatTree ||
     action.type === 'HANDLE_STORE_MUTATION'
   ) {
-    if (ownerStackIndex === null) {
-      ownerFlatTree = null;
+    if (ownerFlatTree === null) {
       numElements = store.numElements;
     } else {
-      ownerFlatTree = store.getOwnersListForElement(
-        ownerStack[ownerStackIndex]
-      );
       numElements = ownerFlatTree.length;
     }
   }
@@ -588,9 +537,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   if (selectedElementIndex !== prevSelectedElementIndex) {
     if (selectedElementIndex === null) {
       selectedElementID = null;
-    } else if (ownerFlatTree !== null) {
-      selectedElementID =
-        ownerFlatTree[((selectedElementIndex: any): number)].id;
+    } else {
+      if (ownerFlatTree !== null) {
+        selectedElementID = ownerFlatTree[selectedElementIndex].id;
+      }
     }
   }
 
@@ -605,8 +555,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     searchResults,
     searchText,
 
-    ownerStack,
-    ownerStackIndex,
+    ownerID,
     ownerFlatTree,
   };
 }
@@ -619,14 +568,19 @@ function reduceSuspenseState(
   const { type } = action;
   switch (type) {
     case 'UPDATE_INSPECTED_ELEMENT_ID':
-      return {
-        ...state,
-        inspectedElementID: state.selectedElementID,
-      };
+      if (state.inspectedElementID !== state.selectedElementID) {
+        return {
+          ...state,
+          inspectedElementID: state.selectedElementID,
+        };
+      }
+      break;
     default:
-      // React can bailout of no-op updates.
-      return state;
+      break;
   }
+
+  // React can bailout of no-op updates.
+  return state;
 }
 
 type Props = {| children: React$Node |};
@@ -696,8 +650,7 @@ function TreeContextController({ children }: Props) {
     searchText: '',
 
     // Owners
-    ownerStack: [],
-    ownerStackIndex: null,
+    ownerID: null,
     ownerFlatTree: null,
 
     // Inspection element panel
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 0849ec019a13..0e33349a4791 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -35,6 +35,11 @@ export type Owner = {|
   id: number,
 |};
 
+export type OwnersList = {|
+  id: number,
+  owners: Array<Owner> | null,
+|};
+
 export type InspectedElement = {|
   id: number,
 

From b6c135c165de5023ce09abb28c35458b41927789 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 May 2019 14:21:22 -0700
Subject: [PATCH 571/814] Added Jest tests for OwnersListContext

---
 .../ownersListContext-test.js.snap            |  51 ++++++
 src/__tests__/ownersListContext-test.js       | 166 ++++++++++++++++++
 src/__tests__/storeComponentFilters-test.js   |  66 ++-----
 src/__tests__/utils.js                        |  52 ++++++
 src/devtools/views/Components/TreeContext.js  |  11 +-
 5 files changed, 295 insertions(+), 51 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/ownersListContext-test.js.snap
 create mode 100644 src/__tests__/ownersListContext-test.js

diff --git a/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
new file mode 100644
index 000000000000..b4f05affaa57
--- /dev/null
+++ b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`profiling should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+      <Child>
+      <Child>
+`;
+
+exports[`profiling should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
+Array [
+  Object {
+    "displayName": "Parent",
+    "id": 9,
+  },
+  Object {
+    "displayName": "Grandparent",
+    "id": 7,
+  },
+]
+`;
+
+exports[`profiling should fetch the owners list for the selected element: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`profiling should fetch the owners list for the selected element: owners for "Child" 1`] = `
+Array [
+  Object {
+    "displayName": "Parent",
+    "id": 3,
+  },
+  Object {
+    "displayName": "Grandparent",
+    "id": 2,
+  },
+]
+`;
+
+exports[`profiling should fetch the owners list for the selected element: owners for "Parent" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "id": 2,
+  },
+]
+`;
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
new file mode 100644
index 000000000000..ebcf7e553ca3
--- /dev/null
+++ b/src/__tests__/ownersListContext-test.js
@@ -0,0 +1,166 @@
+// @flow
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type { Element } from 'src/devtools/views/Components/types';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
+describe('profiling', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let OwnersListContext;
+  let OwnersListContextController;
+  let StoreContext;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('src/devtools/views/context').BridgeContext;
+    OwnersListContext = require('src/devtools/views/Components/OwnersListContext')
+      .OwnersListContext;
+    OwnersListContextController = require('src/devtools/views/Components/OwnersListContext')
+      .OwnersListContextController;
+    StoreContext = require('src/devtools/views/context').StoreContext;
+    TreeContextController = require('src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+  });
+
+  const Contexts = ({ children, defaultOwnerID = null }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController defaultOwnerID={defaultOwnerID}>
+          <OwnersListContextController>{children}</OwnersListContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('should fetch the owners list for the selected element', async done => {
+    const Grandparent = () => <Parent />;
+    const Parent = ({ count }) => {
+      return (
+        <React.Fragment>
+          <Child duration={1} />
+          <Child duration={2} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div'))
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const parent = ((store.getElementAtIndex(1): any): Element);
+    const firstChild = ((store.getElementAtIndex(2): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({ owner }) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actSuspense(
+      () =>
+        TestRenderer.create(
+          <Contexts defaultOwnerID={parent.id}>
+            <React.Suspense fallback={null}>
+              <Suspender owner={parent} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(didFinish).toBe(true);
+
+    didFinish = false;
+    await utils.actSuspense(
+      () =>
+        TestRenderer.create(
+          <Contexts defaultOwnerID={firstChild.id}>
+            <React.Suspense fallback={null}>
+              <Suspender owner={firstChild} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should fetch the owners list for the selected element that includes filtered components', async done => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = ({ count }) => {
+      return (
+        <React.Fragment>
+          <Child duration={1} />
+          <Child duration={2} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div'))
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const firstChild = ((store.getElementAtIndex(1): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({ owner }) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actSuspense(
+      () =>
+        TestRenderer.create(
+          <Contexts defaultOwnerID={firstChild.id}>
+            <React.Suspense fallback={null}>
+              <Suspender owner={firstChild} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+});
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 8f408f49f77f..3030646bf675 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -6,42 +6,7 @@ describe('Store component filters', () => {
   let TestUtils;
   let Types;
   let store;
-
-  const createElementTypeFilter = (elementType, isEnabled = true) => ({
-    type: Types.ComponentFilterElementType,
-    isEnabled,
-    value: elementType,
-  });
-
-  const createDisplayNameFilter = (source, isEnabled = true) => {
-    let isValid = true;
-    try {
-      new RegExp(source);
-    } catch (error) {
-      isValid = false;
-    }
-    return {
-      type: Types.ComponentFilterDisplayName,
-      isEnabled,
-      isValid,
-      value: source,
-    };
-  };
-
-  const createLocationFilter = (source, isEnabled = true) => {
-    let isValid = true;
-    try {
-      new RegExp(source);
-    } catch (error) {
-      isValid = false;
-    }
-    return {
-      type: Types.ComponentFilterLocation,
-      isEnabled,
-      isValid,
-      value: source,
-    };
-  };
+  let utils;
 
   const act = (callback: Function) => {
     TestUtils.act(() => {
@@ -59,6 +24,7 @@ describe('Store component filters', () => {
     ReactDOM = require('react-dom');
     TestUtils = require('react-dom/test-utils');
     Types = require('src/types');
+    utils = require('./utils');
   });
 
   it('should throw if filters are updated while profiling', () => {
@@ -89,7 +55,7 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createElementTypeFilter(Types.ElementTypeHostComponent),
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent),
         ])
     );
 
@@ -98,7 +64,7 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createElementTypeFilter(Types.ElementTypeClass),
+          utils.createElementTypeFilter(Types.ElementTypeClass),
         ])
     );
 
@@ -107,8 +73,8 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createElementTypeFilter(Types.ElementTypeClass),
-          createElementTypeFilter(Types.ElementTypeFunction),
+          utils.createElementTypeFilter(Types.ElementTypeClass),
+          utils.createElementTypeFilter(Types.ElementTypeFunction),
         ])
     );
 
@@ -117,8 +83,8 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createElementTypeFilter(Types.ElementTypeClass, false),
-          createElementTypeFilter(Types.ElementTypeFunction, false),
+          utils.createElementTypeFilter(Types.ElementTypeClass, false),
+          utils.createElementTypeFilter(Types.ElementTypeFunction, false),
         ])
     );
 
@@ -134,7 +100,7 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createElementTypeFilter(Types.ElementTypeRoot),
+          utils.createElementTypeFilter(Types.ElementTypeRoot),
         ])
     );
 
@@ -159,13 +125,17 @@ describe('Store component filters', () => {
     );
     expect(store).toMatchSnapshot('1: mount');
 
-    act(() => (store.componentFilters = [createDisplayNameFilter('Foo')]));
+    act(
+      () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')])
+    );
     expect(store).toMatchSnapshot('2: filter "Foo"');
 
-    act(() => (store.componentFilters = [createDisplayNameFilter('Ba')]));
+    act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));
     expect(store).toMatchSnapshot('3: filter "Ba"');
 
-    act(() => (store.componentFilters = [createDisplayNameFilter('B.z')]));
+    act(
+      () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')])
+    );
     expect(store).toMatchSnapshot('4: filter "B.z"');
   });
 
@@ -178,7 +148,7 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createLocationFilter(__filename.replace(__dirname, '')),
+          utils.createLocationFilter(__filename.replace(__dirname, '')),
         ])
     );
 
@@ -189,7 +159,7 @@ describe('Store component filters', () => {
     act(
       () =>
         (store.componentFilters = [
-          createLocationFilter('this:is:a:made:up:path'),
+          utils.createLocationFilter('this:is:a:made:up:path'),
         ])
     );
 
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 89c7ffd6b130..06d8ec885855 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -2,6 +2,8 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 
+import type { ElementType } from 'src/types';
+
 export function act(callback: Function): void {
   const TestUtils = require('react-dom/test-utils');
   TestUtils.act(() => {
@@ -54,6 +56,56 @@ export function beforeEachProfiling(): void {
   );
 }
 
+export function createElementTypeFilter(
+  elementType: ElementType,
+  isEnabled: boolean = true
+) {
+  const Types = require('src/types');
+  return {
+    type: Types.ComponentFilterElementType,
+    isEnabled,
+    value: elementType,
+  };
+}
+
+export function createDisplayNameFilter(
+  source: string,
+  isEnabled: boolean = true
+) {
+  const Types = require('src/types');
+  let isValid = true;
+  try {
+    new RegExp(source);
+  } catch (error) {
+    isValid = false;
+  }
+  return {
+    type: Types.ComponentFilterDisplayName,
+    isEnabled,
+    isValid,
+    value: source,
+  };
+}
+
+export function createLocationFilter(
+  source: string,
+  isEnabled: boolean = true
+) {
+  const Types = require('src/types');
+  let isValid = true;
+  try {
+    new RegExp(source);
+  } catch (error) {
+    isValid = false;
+  }
+  return {
+    type: Types.ComponentFilterLocation,
+    isEnabled,
+    isValid,
+    value: source,
+  };
+}
+
 export function getRendererID(): number {
   if (global.agent == null) {
     throw Error('Agent unavailable.');
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index b2c9b29ac430..6f65e7920d78 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -583,10 +583,15 @@ function reduceSuspenseState(
   return state;
 }
 
-type Props = {| children: React$Node |};
+type Props = {|
+  children: React$Node,
+
+  // Used for automated testing
+  defaultOwnerID?: ?number,
+|};
 
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
-function TreeContextController({ children }: Props) {
+function TreeContextController({ children, defaultOwnerID }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -650,7 +655,7 @@ function TreeContextController({ children }: Props) {
     searchText: '',
 
     // Owners
-    ownerID: null,
+    ownerID: defaultOwnerID == null ? null : defaultOwnerID,
     ownerFlatTree: null,
 
     // Inspection element panel

From 5daf9b626f12c291c3c46918ae0a01a8a94c7461 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 May 2019 14:31:48 -0700
Subject: [PATCH 572/814] Fixed test describe name

---
 .../__snapshots__/ownersListContext-test.js.snap       | 10 +++++-----
 src/__tests__/ownersListContext-test.js                |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index b4f05affaa57..74c908afe881 100644
--- a/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`profiling should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
 [root]
   ▾ <Grandparent>
       <Child>
       <Child>
 `;
 
-exports[`profiling should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
 Array [
   Object {
     "displayName": "Parent",
@@ -20,7 +20,7 @@ Array [
 ]
 `;
 
-exports[`profiling should fetch the owners list for the selected element: mount 1`] = `
+exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <Parent>
@@ -28,7 +28,7 @@ exports[`profiling should fetch the owners list for the selected element: mount
         <Child>
 `;
 
-exports[`profiling should fetch the owners list for the selected element: owners for "Child" 1`] = `
+exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
 Array [
   Object {
     "displayName": "Parent",
@@ -41,7 +41,7 @@ Array [
 ]
 `;
 
-exports[`profiling should fetch the owners list for the selected element: owners for "Parent" 1`] = `
+exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Parent" 1`] = `
 Array [
   Object {
     "displayName": "Grandparent",
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index ebcf7e553ca3..348f6932c44f 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -5,7 +5,7 @@ import type { Element } from 'src/devtools/views/Components/types';
 import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
-describe('profiling', () => {
+describe('OwnersListContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;

From 427f0f63c1eeba330dc80b6fb3ac2930bc17e7fd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 May 2019 15:52:50 -0700
Subject: [PATCH 573/814] Added TreeContext tests

---
 .../__snapshots__/treeContext-test.js.snap    | 713 ++++++++++++++++++
 src/__tests__/ownersListContext-test.js       |  16 +-
 src/__tests__/treeContext-test.js             | 428 +++++++++++
 src/devtools/views/Components/TreeContext.js  |   4 +-
 4 files changed, 1151 insertions(+), 10 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/treeContext-test.js.snap
 create mode 100644 src/__tests__/treeContext-test.js

diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap
new file mode 100644
index 000000000000..fd9c4dbf1f7b
--- /dev/null
+++ b/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -0,0 +1,713 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+    <Baz>
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    2,
+  ],
+  "searchText": "f",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 4: search for "q" 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "q",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+    <Baz>
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+  ],
+  "searchText": "ba",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Baz>
+    <Bar>
+    <Baz>
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 2,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 2,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `
+Object {
+  "inspectedElementID": 8,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 8,
+  "selectedElementIndex": 6,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `
+Object {
+  "inspectedElementID": 6,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 6,
+  "selectedElementIndex": 4,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 348f6932c44f..06464e663aec 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -53,15 +53,15 @@ describe('OwnersListContext', () => {
 
   it('should fetch the owners list for the selected element', async done => {
     const Grandparent = () => <Parent />;
-    const Parent = ({ count }) => {
+    const Parent = () => {
       return (
         <React.Fragment>
-          <Child duration={1} />
-          <Child duration={2} />
+          <Child />
+          <Child />
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => null;
+    const Child = () => null;
 
     utils.act(() =>
       ReactDOM.render(<Grandparent />, document.createElement('div'))
@@ -118,15 +118,15 @@ describe('OwnersListContext', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => <Parent />;
-    const Parent = ({ count }) => {
+    const Parent = () => {
       return (
         <React.Fragment>
-          <Child duration={1} />
-          <Child duration={2} />
+          <Child />
+          <Child />
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => null;
+    const Child = () => null;
 
     utils.act(() =>
       ReactDOM.render(<Grandparent />, document.createElement('div'))
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
new file mode 100644
index 000000000000..0c8f15d4b007
--- /dev/null
+++ b/src/__tests__/treeContext-test.js
@@ -0,0 +1,428 @@
+// @flow
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+import type {
+  DispatcherContext,
+  StateContext,
+} from 'src/devtools/views/Components/TreeContext';
+
+describe('TreeListContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let StoreContext;
+  let TreeContext;
+
+  let dispatch: DispatcherContext;
+  let state: StateContext;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('src/devtools/views/context').BridgeContext;
+    StoreContext = require('src/devtools/views/context').StoreContext;
+    TreeContext = require('src/devtools/views/Components/TreeContext');
+  });
+
+  afterEach(() => {
+    // Reset between tests
+    dispatch = ((null: any): DispatcherContext);
+    state = ((null: any): StateContext);
+  });
+
+  const Capture = () => {
+    dispatch = React.useContext(TreeContext.TreeDispatcherContext);
+    state = React.useContext(TreeContext.TreeStateContext);
+    return null;
+  };
+
+  const Contexts = () => {
+    return (
+      <BridgeContext.Provider value={bridge}>
+        <StoreContext.Provider value={store}>
+          <TreeContext.TreeContextController>
+            <Capture />
+          </TreeContext.TreeContextController>
+        </StoreContext.Provider>
+      </BridgeContext.Provider>
+    );
+  };
+
+  describe('tree state', () => {
+    it('should select the next and previous elements in the tree', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select first element');
+
+      while (
+        state.selectedElementIndex !== null &&
+        state.selectedElementIndex < store.numElements - 1
+      ) {
+        const index = ((state.selectedElementIndex: any): number);
+        utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+        utils.act(() => renderer.update(<Contexts />));
+        expect(state).toMatchSnapshot(`3: select element after (${index})`);
+      }
+
+      while (
+        state.selectedElementIndex !== null &&
+        state.selectedElementIndex > 0
+      ) {
+        const index = ((state.selectedElementIndex: any): number);
+        utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
+        utils.act(() => renderer.update(<Contexts />));
+        expect(state).toMatchSnapshot(`4: select element before (${index})`);
+      }
+
+      utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('5: select previous wraps around to last');
+
+      utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('6: select next wraps around to first');
+    });
+
+    it('should select child elements', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() =>
+        dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select first element');
+
+      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: select Parent');
+
+      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: select Child');
+
+      const previousState = state;
+
+      // There are no more children to select, so this should be a no-op
+      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toEqual(previousState);
+    });
+
+    it('should select parent elements and then collapse', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
+
+      utils.act(() =>
+        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select last child');
+
+      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: select Parent');
+
+      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: select Grandparent');
+
+      const previousState = state;
+
+      // There are no more ancestors to select, so this should be a no-op
+      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toEqual(previousState);
+    });
+  });
+
+  describe('search state', () => {
+    it('should find elements matching search text', () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          document.createElement('div')
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: search for "f"');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: search for "q"');
+    });
+
+    it('should select the next and previous items within the search results', () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Baz />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          document.createElement('div')
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: go to second result');
+
+      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: go to third result');
+
+      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('5: go to second result');
+
+      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('6: go to first result');
+
+      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('7: wrap to last result');
+
+      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('8: wrap to first result');
+    });
+
+    it('should add newly mounted elements to the search results set if they match the current text', async done => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      const container = document.createElement('div');
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+          container
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      await utils.actSuspense(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          container
+        )
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: mount Baz');
+
+      done();
+    });
+
+    it('should remove unmounted elements from the search results set', async done => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      const container = document.createElement('div');
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          container
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: go to second result');
+
+      await utils.actSuspense(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+          container
+        )
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: unmount Baz');
+
+      done();
+    });
+  });
+
+  describe('owners state', () => {
+    it('should support entering and existing the owners tree view', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: parent owners tree');
+
+      utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: final state');
+    });
+  });
+});
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 6f65e7920d78..1952497cbd4c 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -38,7 +38,7 @@ import Store from '../../store';
 
 import type { Element } from './types';
 
-type StateContext = {|
+export type StateContext = {|
   // Tree
   numElements: number,
   selectedElementID: number | null,
@@ -117,7 +117,7 @@ type Action =
   | ACTION_SET_SEARCH_TEXT
   | ACTION_UPDATE_INSPECTED_ELEMENT_ID;
 
-type DispatcherContext = (action: Action) => void;
+export type DispatcherContext = (action: Action) => void;
 
 const TreeStateContext = createContext<StateContext>(
   ((null: any): StateContext)

From 7160f6f584d3eb487230fe64b4a76e5086eb7cec Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 May 2019 18:11:17 -0700
Subject: [PATCH 574/814] Fixed owners stack direction and added current
 element to stack

---
 .../ownersListContext-test.js.snap            | 34 ++++++++++++--
 src/__tests__/ownersListContext-test.js       | 44 +++++++++++++++++++
 src/backend/renderer.js                       | 27 ++++++++++--
 src/devtools/views/Components/OwnersStack.js  | 12 ++---
 .../views/Components/SelectedElement.js       |  2 +-
 src/devtools/views/Components/types.js        |  2 +-
 6 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index 74c908afe881..0f1e213a058f 100644
--- a/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -9,13 +9,17 @@ exports[`OwnersListContext should fetch the owners list for the selected element
 
 exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
 Array [
+  Object {
+    "displayName": "Grandparent",
+    "id": 7,
+  },
   Object {
     "displayName": "Parent",
     "id": 9,
   },
   Object {
-    "displayName": "Grandparent",
-    "id": 7,
+    "displayName": "Child",
+    "id": 8,
   },
 ]
 `;
@@ -30,13 +34,17 @@ exports[`OwnersListContext should fetch the owners list for the selected element
 
 exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
 Array [
+  Object {
+    "displayName": "Grandparent",
+    "id": 2,
+  },
   Object {
     "displayName": "Parent",
     "id": 3,
   },
   Object {
-    "displayName": "Grandparent",
-    "id": 2,
+    "displayName": "Child",
+    "id": 4,
   },
 ]
 `;
@@ -47,5 +55,23 @@ Array [
     "displayName": "Grandparent",
     "id": 2,
   },
+  Object {
+    "displayName": "Parent",
+    "id": 3,
+  },
+]
+`;
+
+exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
+[root]
+    <Grandparent>
+`;
+
+exports[`OwnersListContext should include the current element even if there are no other owners: owners for "Grandparent" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "id": 5,
+  },
 ]
 `;
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 06464e663aec..bf92977ed591 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -163,4 +163,48 @@ describe('OwnersListContext', () => {
 
     done();
   });
+
+  it('should include the current element even if there are no other owners', async done => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = () => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div'))
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const grandparent = ((store.getElementAtIndex(0): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({ owner }) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actSuspense(
+      () =>
+        TestRenderer.create(
+          <Contexts defaultOwnerID={grandparent.id}>
+            <React.Suspense fallback={null}>
+              <Suspender owner={grandparent} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  // TODO (owners) Verify that if an Element in the list is unmounted the stack is updated.
 });
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index cc49385c8fc0..b76ce8a7d694 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1696,12 +1696,17 @@ export function attach(
 
     const { _debugOwner } = fiber;
 
-    let owners = null;
+    const owners = [
+      {
+        displayName: getDisplayNameForFiber(fiber) || 'Unknown',
+        id,
+      },
+    ];
+
     if (_debugOwner) {
-      owners = [];
       let owner = _debugOwner;
       while (owner !== null) {
-        owners.push({
+        owners.unshift({
           displayName: getDisplayNameForFiber(owner) || 'Unknown',
           id: getFiberID(getPrimaryFiber(owner)),
         });
@@ -1719,6 +1724,7 @@ export function attach(
     }
 
     const {
+      _debugOwner,
       _debugSource,
       stateNode,
       memoizedProps,
@@ -1790,6 +1796,19 @@ export function attach(
       context = { value: context };
     }
 
+    let owners = null;
+    if (_debugOwner) {
+      owners = [];
+      let owner = _debugOwner;
+      while (owner !== null) {
+        owners.push({
+          displayName: getDisplayNameForFiber(owner) || 'Unknown',
+          id: getFiberID(getPrimaryFiber(owner)),
+        });
+        owner = owner._debugOwner || null;
+      }
+    }
+
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
 
@@ -1825,7 +1844,7 @@ export function attach(
       state: usesHooks ? null : memoizedState,
 
       // List of owners
-      owners: getOwnersList(id),
+      owners,
 
       // Location of component in source coude.
       source: _debugSource,
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 77ec8eed60e9..3883a1448008 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -45,7 +45,7 @@ type State = {|
 function dialogReducer(state, action) {
   switch (action.type) {
     case 'UPDATE_OWNER_ID':
-      const selectedIndex = state.owners.findIndex(
+      const selectedIndex = action.owners.findIndex(
         owner => owner.id === action.ownerID
       );
       return {
@@ -71,10 +71,11 @@ export default function OwnerStack() {
   const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
     ownerID: null,
     owners: [],
-    selectedIndex: -1,
+    selectedIndex: 0,
   });
 
-  // TODO (owners) Explain this and use reducer with ownerID too to avoid inf. loop
+  // When an owner is selected, we either need to update the selected index, or we need to fetch a new list of owners.
+  // We use a reducer here so that we can avoid fetching a new list unless the owner ID has actually changed.
   if (ownerID === null) {
     dispatch({
       type: 'UPDATE_OWNER_ID',
@@ -82,11 +83,12 @@ export default function OwnerStack() {
       owners: [],
     });
   } else if (ownerID !== state.ownerID) {
-    const isInList = state.owners.findIndex(owner => owner.id === ownerID) >= 0;
+    const isInStore =
+      state.owners.findIndex(owner => owner.id === ownerID) >= 0;
     dispatch({
       type: 'UPDATE_OWNER_ID',
       ownerID,
-      owners: isInList ? state.owners : read(ownerID) || [],
+      owners: isInStore ? state.owners : read(ownerID) || [],
     });
   }
 
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 4ead00425ab4..b49ce87ad84e 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -304,7 +304,7 @@ function InspectedElementView({
           {owners.map(owner => (
             <OwnerView
               key={owner.id}
-              displayName={owner.displayName}
+              displayName={owner.displayName || 'Unknown'}
               id={owner.id}
               isInStore={store.containsElement(owner.id)}
             />
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 0e33349a4791..aaae8d378ac3 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -31,7 +31,7 @@ export type Element = {|
 |};
 
 export type Owner = {|
-  displayName: string,
+  displayName: string | null,
   id: number,
 |};
 

From ae3b98f5ade8ec6564780f2ef9bae70ff5fea756 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@fb.com>
Date: Fri, 10 May 2019 12:13:14 +0100
Subject: [PATCH 575/814] rewrite test act helpers based on react/#15591

This simplifies your test helpers to loop until all timers are flushed (including the ones that get queued after updates), and works in concurrent mode. I also renamed actSuspense to actAsync to be clearer.
---
 src/__tests__/profiling-test.js               | 16 ++---
 src/__tests__/profilingCharts-test.js         | 66 +++++++++----------
 .../profilingCommitTreeBuilder-test.js        | 22 +++----
 src/__tests__/utils.js                        | 22 ++-----
 4 files changed, 54 insertions(+), 72 deletions(-)

diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 8631c9c08a64..26d2e2e67856 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -129,7 +129,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -145,7 +145,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -218,7 +218,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -237,7 +237,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -311,7 +311,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -334,7 +334,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -413,7 +413,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -429,7 +429,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 46901444ee75..ed90c5c9dd28 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -97,18 +97,16 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
-              </React.Suspense>
-            ),
-          3
+        await utils.actAsync(() =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          )
         );
 
         expect(suspenseResolved).toBe(true);
@@ -189,18 +187,16 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
-              </React.Suspense>
-            ),
-          3
+        await utils.actAsync(() =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          )
         );
 
         expect(suspenseResolved).toBe(true);
@@ -272,18 +268,16 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
-              </React.Suspense>
-            ),
-          3
+        await utils.actAsync(() =>
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          )
         );
 
         expect(suspenseResolved).toBe(true);
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 1d037e778f53..f44073099dfc 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -67,18 +67,16 @@ describe('commit tree', () => {
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
       suspenseResolved = false;
 
-      await utils.actSuspense(
-        () =>
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                commitIndex={commitIndex}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          ),
-        3
+      await utils.actAsync(() =>
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={commitIndex}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        )
       );
 
       expect(suspenseResolved).toBe(true);
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 89c7ffd6b130..e9aeb3f05d59 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -9,32 +9,22 @@ export function act(callback: Function): void {
   });
 
   // Flush Bridge operations
-  jest.runAllTimers();
+  TestUtils.act(() => {
+    jest.runAllTimers();
+  });
 }
 
-export async function actSuspense(
-  callback: Function,
-  numTimesToFlush: number = 1
-): Promise<void> {
+export async function actAsync(cb: () => *) : Promise<void> {
   const TestUtils = require('react-dom/test-utils');
-  const Scheduler = require('scheduler');
 
   // $FlowFixMe Flow doens't know about "await act()" yet
   await TestUtils.act(async () => {
-    callback();
-
-    // Resolve pending suspense promises
-    jest.runAllTimers();
+    await cb();
   });
-
-  // Run cascading microtasks and flush scheduled React work.
-  // Components that suspend multiple times will need to do this once per suspend operation.
-  // HACK Ideally the mock scheduler would provide an API to ask if there was outstanding work.
-  while (--numTimesToFlush >= 0) {
+  while (jest.getTimerCount() > 0) {
     // $FlowFixMe Flow doens't know about "await act()" yet
     await TestUtils.act(async () => {
       jest.runAllTimers();
-      Scheduler.flushAll();
     });
   }
 }

From 6243d19b9ced68935abf8b58f3a9087afc03e797 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@fb.com>
Date: Fri, 10 May 2019 12:16:43 +0100
Subject: [PATCH 576/814] pretty, witty, fine

---
 src/__tests__/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index e9aeb3f05d59..268b69db5b86 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -14,7 +14,7 @@ export function act(callback: Function): void {
   });
 }
 
-export async function actAsync(cb: () => *) : Promise<void> {
+export async function actAsync(cb: () => *): Promise<void> {
   const TestUtils = require('react-dom/test-utils');
 
   // $FlowFixMe Flow doens't know about "await act()" yet

From 7aaef6f41fa0dc0b13554a2e0800a34187a4ddfc Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@fb.com>
Date: Fri, 10 May 2019 12:18:40 +0100
Subject: [PATCH 577/814] reverting the rename

---
 src/__tests__/profiling-test.js                  | 16 ++++++++--------
 src/__tests__/profilingCharts-test.js            |  6 +++---
 src/__tests__/profilingCommitTreeBuilder-test.js |  2 +-
 src/__tests__/utils.js                           |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 26d2e2e67856..8631c9c08a64 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -129,7 +129,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actAsync(() =>
+      await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -145,7 +145,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actAsync(() =>
+      await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -218,7 +218,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actAsync(() => {
+        await utils.actSuspense(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -237,7 +237,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actAsync(() => {
+        await utils.actSuspense(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -311,7 +311,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actAsync(() => {
+        await utils.actSuspense(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -334,7 +334,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actAsync(() => {
+        await utils.actSuspense(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -413,7 +413,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actAsync(() =>
+      await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -429,7 +429,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actAsync(() =>
+      await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index ed90c5c9dd28..abf77070dd87 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -97,7 +97,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actAsync(() =>
+        await utils.actSuspense(() =>
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -187,7 +187,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actAsync(() =>
+        await utils.actSuspense(() =>
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -268,7 +268,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actAsync(() =>
+        await utils.actSuspense(() =>
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index f44073099dfc..cdc7777fefeb 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -67,7 +67,7 @@ describe('commit tree', () => {
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
       suspenseResolved = false;
 
-      await utils.actAsync(() =>
+      await utils.actSuspense(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 268b69db5b86..62ae024d71e7 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -14,7 +14,7 @@ export function act(callback: Function): void {
   });
 }
 
-export async function actAsync(cb: () => *): Promise<void> {
+export async function actSuspense(cb: () => *): Promise<void> {
   const TestUtils = require('react-dom/test-utils');
 
   // $FlowFixMe Flow doens't know about "await act()" yet

From ac0022bf4a32f8c464e59f8b71dec12f141619b3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 May 2019 08:07:27 -0700
Subject: [PATCH 578/814] Added more tree context tests

---
 .../__snapshots__/treeContext-test.js.snap    | 310 ++++++++++++++++++
 src/__tests__/ownersListContext-test.js       |   2 -
 src/__tests__/treeContext-test.js             | 122 +++++++
 src/devtools/views/Components/TreeContext.js  |  18 +-
 4 files changed, 444 insertions(+), 8 deletions(-)

diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap
index fd9c4dbf1f7b..3a9149861bdd 100644
--- a/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ b/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -1,5 +1,251 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Child",
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 0,
+      "parentID": 2,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 1,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Parent",
+      "id": 2,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 0,
+      "parentID": 1,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 2,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 0,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "id": 4,
+      "isCollapsed": false,
+      "key": "0",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "id": 5,
+      "isCollapsed": false,
+      "key": "1",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "id": 4,
+      "isCollapsed": false,
+      "key": "0",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Parent",
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
 exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
 [root]
   ▾ <Grandparent>
@@ -430,6 +676,70 @@ Object {
 }
 `;
 
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 0,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
 exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
 [root]
   ▾ <Grandparent>
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index bf92977ed591..253e31fa3d15 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -205,6 +205,4 @@ describe('OwnersListContext', () => {
 
     done();
   });
-
-  // TODO (owners) Verify that if an Element in the list is unmounted the stack is updated.
 });
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index 0c8f15d4b007..a7d7ba5094ee 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -213,6 +213,56 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toEqual(previousState);
     });
+
+    it('should clear selection if the selected element is unmounted', async done => {
+      const Grandparent = props => props.children || null;
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() =>
+        ReactDOM.render(
+          <Grandparent>
+            <Parent>
+              <Child />
+              <Child />
+            </Parent>
+          </Grandparent>,
+          container
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() =>
+        dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 3 })
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select second child');
+
+      await utils.actSuspense(() =>
+        ReactDOM.render(
+          <Grandparent>
+            <Parent />
+          </Grandparent>,
+          container
+        )
+      );
+      expect(state).toMatchSnapshot(
+        '3: remove children (parent should now be selected)'
+      );
+
+      await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));
+      expect(state).toMatchSnapshot(
+        '4: unmount root (nothing should be selected)'
+      );
+
+      done();
+    });
   });
 
   describe('search state', () => {
@@ -424,5 +474,77 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: final state');
     });
+
+    it('should remove an element from the owners list if it is unmounted', async done => {
+      const Grandparent = ({ count }) => <Parent count={count} />;
+      const Parent = ({ count }) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: parent owners tree');
+
+      await utils.actSuspense(() =>
+        ReactDOM.render(<Grandparent count={1} />, container)
+      );
+      expect(state).toMatchSnapshot('3: remove second child');
+
+      await utils.actSuspense(() =>
+        ReactDOM.render(<Grandparent count={0} />, container)
+      );
+      expect(state).toMatchSnapshot('4: remove first child');
+
+      done();
+    });
+
+    it('should exit the owners list if the current owner is unmounted', async done => {
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() =>
+        ReactDOM.render(
+          <Parent>
+            <Child />
+          </Parent>,
+          container
+        )
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let childID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: child owners tree');
+
+      await utils.actSuspense(() => ReactDOM.render(<Parent />, container));
+      expect(state).toMatchSnapshot('3: remove child');
+
+      let parentID = ((store.getElementIDAtIndex(0): any): number);
+      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: parent owners tree');
+
+      await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));
+      expect(state).toMatchSnapshot('5: unmount root');
+
+      done();
+    });
   });
 });
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 1952497cbd4c..067f8fbaf404 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -447,12 +447,18 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   switch (action.type) {
     case 'HANDLE_STORE_MUTATION':
       if (ownerID !== null) {
-        ownerFlatTree = store.getOwnersListForElement(ownerID);
-        if (selectedElementID !== null) {
-          // Mutation might have caused the index of this ID to shift.
-          selectedElementIndex = ownerFlatTree.findIndex(
-            element => element.id === selectedElementID
-          );
+        if (!store.containsElement(ownerID)) {
+          ownerID = null;
+          ownerFlatTree = null;
+          selectedElementID = null;
+        } else {
+          ownerFlatTree = store.getOwnersListForElement(ownerID);
+          if (selectedElementID !== null) {
+            // Mutation might have caused the index of this ID to shift.
+            selectedElementIndex = ownerFlatTree.findIndex(
+              element => element.id === selectedElementID
+            );
+          }
         }
       } else {
         if (selectedElementID !== null) {

From 61ab40c15c7b1b342bb4907fa88a478052173822 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 May 2019 08:27:14 -0700
Subject: [PATCH 579/814] Test utils actSuspense -> actAsync

---
 src/__tests__/ownersListContext-test.js          |  8 ++++----
 src/__tests__/profiling-test.js                  | 16 ++++++++--------
 src/__tests__/profilingCharts-test.js            |  6 +++---
 src/__tests__/profilingCommitTreeBuilder-test.js |  2 +-
 src/__tests__/treeContext-test.js                | 16 ++++++++--------
 src/__tests__/utils.js                           |  2 +-
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 253e31fa3d15..428b9815cb09 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -84,7 +84,7 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actSuspense(
+    await utils.actAsync(
       () =>
         TestRenderer.create(
           <Contexts defaultOwnerID={parent.id}>
@@ -98,7 +98,7 @@ describe('OwnersListContext', () => {
     expect(didFinish).toBe(true);
 
     didFinish = false;
-    await utils.actSuspense(
+    await utils.actAsync(
       () =>
         TestRenderer.create(
           <Contexts defaultOwnerID={firstChild.id}>
@@ -148,7 +148,7 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actSuspense(
+    await utils.actAsync(
       () =>
         TestRenderer.create(
           <Contexts defaultOwnerID={firstChild.id}>
@@ -190,7 +190,7 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actSuspense(
+    await utils.actAsync(
       () =>
         TestRenderer.create(
           <Contexts defaultOwnerID={grandparent.id}>
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 8631c9c08a64..26d2e2e67856 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -129,7 +129,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -145,7 +145,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -218,7 +218,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -237,7 +237,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           TestRenderer.create(
             <React.Suspense fallback={null}>
               <Suspender
@@ -311,7 +311,7 @@ describe('profiling', () => {
       const rootID = store.roots[0];
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -334,7 +334,7 @@ describe('profiling', () => {
       exportImportHelper(rendererID, rootID);
 
       for (let index = 0; index < store.numElements; index++) {
-        await utils.actSuspense(() => {
+        await utils.actAsync(() => {
           const fiberID = store.getElementIDAtIndex(index);
           if (fiberID == null) {
             throw Error(`Unexpected null ID for element at index ${index}`);
@@ -413,7 +413,7 @@ describe('profiling', () => {
       const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
@@ -429,7 +429,7 @@ describe('profiling', () => {
 
       exportImportHelper(rendererID, rootID);
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         TestRenderer.create(
           <React.Suspense fallback={null}>
             <Suspender
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 46901444ee75..abdd3054e6a1 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -97,7 +97,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
+        await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
@@ -189,7 +189,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
+        await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
@@ -272,7 +272,7 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         suspenseResolved = false;
 
-        await utils.actSuspense(
+        await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 1d037e778f53..8356a0fd4ae5 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -67,7 +67,7 @@ describe('commit tree', () => {
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
       suspenseResolved = false;
 
-      await utils.actSuspense(
+      await utils.actAsync(
         () =>
           TestRenderer.create(
             <React.Suspense fallback={null}>
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index a7d7ba5094ee..f9e564dfec57 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -244,7 +244,7 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: select second child');
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         ReactDOM.render(
           <Grandparent>
             <Parent />
@@ -256,7 +256,7 @@ describe('TreeListContext', () => {
         '3: remove children (parent should now be selected)'
       );
 
-      await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));
+      await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
       expect(state).toMatchSnapshot(
         '4: unmount root (nothing should be selected)'
       );
@@ -380,7 +380,7 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         ReactDOM.render(
           <React.Fragment>
             <Foo />
@@ -428,7 +428,7 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: go to second result');
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         ReactDOM.render(
           <React.Fragment>
             <Foo />
@@ -495,12 +495,12 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: parent owners tree');
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={1} />, container)
       );
       expect(state).toMatchSnapshot('3: remove second child');
 
-      await utils.actSuspense(() =>
+      await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={0} />, container)
       );
       expect(state).toMatchSnapshot('4: remove first child');
@@ -533,7 +533,7 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: child owners tree');
 
-      await utils.actSuspense(() => ReactDOM.render(<Parent />, container));
+      await utils.actAsync(() => ReactDOM.render(<Parent />, container));
       expect(state).toMatchSnapshot('3: remove child');
 
       let parentID = ((store.getElementIDAtIndex(0): any): number);
@@ -541,7 +541,7 @@ describe('TreeListContext', () => {
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: parent owners tree');
 
-      await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));
+      await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
       expect(state).toMatchSnapshot('5: unmount root');
 
       done();
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 06d8ec885855..fcbf9236244e 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -14,7 +14,7 @@ export function act(callback: Function): void {
   jest.runAllTimers();
 }
 
-export async function actSuspense(
+export async function actAsync(
   callback: Function,
   numTimesToFlush: number = 1
 ): Promise<void> {

From b74f3f507a0243a124a041f3d5ebc246a98911f4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 May 2019 09:13:54 -0700
Subject: [PATCH 580/814] Added basic tests for InspectedElementContext

---
 package.json                                  |   1 +
 .../inspectedElementContext-test.js.snap      |  61 +++++++
 src/__tests__/inspectedElementContext-test.js | 162 ++++++++++++++++++
 src/__tests__/inspectedElementSerializer.js   |  27 +++
 src/__tests__/utils.js                        |   4 +-
 src/backend/agent.js                          |   1 -
 src/devtools/views/Components/TreeContext.js  |  15 +-
 7 files changed, 265 insertions(+), 6 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
 create mode 100644 src/__tests__/inspectedElementContext-test.js
 create mode 100644 src/__tests__/inspectedElementSerializer.js

diff --git a/package.json b/package.json
index 3958ceb4bdea..3834cacd63fd 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
       "<rootDir>/src/__tests__/setupTests"
     ],
     "snapshotSerializers": [
+      "<rootDir>/src/__tests__/inspectedElementSerializer",
       "<rootDir>/src/__tests__/storeSerializer"
     ],
     "testMatch": [
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
new file mode 100644
index 000000000000..282c86680582
--- /dev/null
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InspectedElementContext should inspect the currently selected element: 1: mount 1`] = `
+[root]
+    <Example>
+`;
+
+exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
+[root]
+    <Example>
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 2: initial render 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 2: updated state 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "foo": 2,
+    "bar": "def"
+  },
+  "state": null
+}
+`;
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
new file mode 100644
index 000000000000..bf8d7f8bf7c4
--- /dev/null
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -0,0 +1,162 @@
+// @flow
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type { Element } from 'src/devtools/views/Components/types';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
+describe('InspectedElementContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let InspectedElementContext;
+  let InspectedElementContextController;
+  let StoreContext;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('src/devtools/views/context').BridgeContext;
+    InspectedElementContext = require('src/devtools/views/Components/InspectedElementContext')
+      .InspectedElementContext;
+    InspectedElementContextController = require('src/devtools/views/Components/InspectedElementContext')
+      .InspectedElementContextController;
+    StoreContext = require('src/devtools/views/context').StoreContext;
+    TreeContextController = require('src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+  });
+
+  const Contexts = ({
+    children,
+    defaultSelectedElementID = null,
+    defaultSelectedElementIndex = null,
+  }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultSelectedElementID={defaultSelectedElementID}
+          defaultSelectedElementIndex={defaultSelectedElementIndex}
+        >
+          <InspectedElementContextController>
+            {children}
+          </InspectedElementContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('should inspect the currently selected element', async done => {
+    const Example = () => {
+      const [count] = React.useState(1);
+      return count;
+    };
+
+    const container = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const example = ((store.getElementAtIndex(0): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({ target }) {
+      const { read } = React.useContext(InspectedElementContext);
+      const inspectedElement = read(target.id);
+      expect(inspectedElement).toMatchSnapshot(
+        `2: Inspected element ${target.id}`
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should poll for updates for the currently selected element', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const example = ((store.getElementAtIndex(0): any): Element);
+
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const { read } = React.useContext(InspectedElementContext);
+      inspectedElement = read(target.id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      3
+    );
+    expect(inspectedElement).toMatchSnapshot('2: initial render');
+
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example foo={2} bar="def" />, container)
+    );
+
+    inspectedElement = null;
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      1
+    );
+    expect(inspectedElement).toMatchSnapshot('2: updated state');
+
+    done();
+  });
+});
diff --git a/src/__tests__/inspectedElementSerializer.js b/src/__tests__/inspectedElementSerializer.js
new file mode 100644
index 000000000000..2423683c2402
--- /dev/null
+++ b/src/__tests__/inspectedElementSerializer.js
@@ -0,0 +1,27 @@
+// test() is part of Jest's serializer API
+export function test(maybeInspectedElement) {
+  return (
+    maybeInspectedElement !== null &&
+    typeof maybeInspectedElement === 'object' &&
+    maybeInspectedElement.hasOwnProperty('canEditFunctionProps') &&
+    maybeInspectedElement.hasOwnProperty('canEditHooks') &&
+    maybeInspectedElement.hasOwnProperty('canToggleSuspense') &&
+    maybeInspectedElement.hasOwnProperty('canViewSource')
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(inspectedElement, serialize, indent) {
+  return JSON.stringify(
+    {
+      id: inspectedElement.id,
+      owners: inspectedElement.owners,
+      context: inspectedElement.context,
+      hooks: inspectedElement.hooks,
+      props: inspectedElement.props,
+      state: inspectedElement.state,
+    },
+    null,
+    2
+  );
+}
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index fcbf9236244e..cc7050575d83 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -26,7 +26,7 @@ export async function actAsync(
     callback();
 
     // Resolve pending suspense promises
-    jest.runAllTimers();
+    jest.runOnlyPendingTimers();
   });
 
   // Run cascading microtasks and flush scheduled React work.
@@ -35,7 +35,7 @@ export async function actAsync(
   while (--numTimesToFlush >= 0) {
     // $FlowFixMe Flow doens't know about "await act()" yet
     await TestUtils.act(async () => {
-      jest.runAllTimers();
+      jest.runOnlyPendingTimers();
       Scheduler.flushAll();
     });
   }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 0c8fd77f0932..d675db7c78c9 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -358,7 +358,6 @@ export default class Agent extends EventEmitter {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
       renderer.selectElement(id);
-      this._bridge.send('selectElement');
 
       // When user selects an element, stop trying to restore the selection,
       // and instead remember the current selection for the next reload.
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 067f8fbaf404..90c514b3e7e2 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -594,10 +594,17 @@ type Props = {|
 
   // Used for automated testing
   defaultOwnerID?: ?number,
+  defaultSelectedElementID?: ?number,
+  defaultSelectedElementIndex?: ?number,
 |};
 
 // TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
-function TreeContextController({ children, defaultOwnerID }: Props) {
+function TreeContextController({
+  children,
+  defaultOwnerID,
+  defaultSelectedElementID,
+  defaultSelectedElementIndex,
+}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -652,8 +659,10 @@ function TreeContextController({ children, defaultOwnerID }: Props) {
   const [state, dispatch] = useReducer(reducer, {
     // Tree
     numElements: store.numElements,
-    selectedElementIndex: null,
-    selectedElementID: null,
+    selectedElementID:
+      defaultSelectedElementID == null ? null : defaultSelectedElementID,
+    selectedElementIndex:
+      defaultSelectedElementIndex == null ? null : defaultSelectedElementIndex,
 
     // Search
     searchIndex: null,

From 285568825b76dbb5a0a7b06509a59f6945954d0a Mon Sep 17 00:00:00 2001
From: Frank Calise <fcalise@gmail.com>
Date: Sun, 12 May 2019 10:12:17 -0400
Subject: [PATCH 581/814] Fixed build chrome not working on Windows due to rm
 command not existing

---
 package-lock.json              | 15953 +++++++++++++++++++++++++++++++
 package.json                   |     1 +
 shells/browser/chrome/build.js |     3 +-
 3 files changed, 15956 insertions(+), 1 deletion(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000000..b763eba780cd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,15953 @@
+{
+  "version": "4.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+      "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+      "requires": {
+        "@babel/highlight": "^7.0.0"
+      }
+    },
+    "@babel/core": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.4.tgz",
+      "integrity": "sha512-lQgGX3FPRgbz2SKmhMtYgJvVzGZrmjaF4apZ2bLwofAKiSjxU0drPh4S/VasyYXwaTs+A1gvQ45BN8SQJzHsQQ==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/generator": "^7.4.4",
+        "@babel/helpers": "^7.4.4",
+        "@babel/parser": "^7.4.4",
+        "@babel/template": "^7.4.4",
+        "@babel/traverse": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "convert-source-map": "^1.1.0",
+        "debug": "^4.1.0",
+        "json5": "^2.1.0",
+        "lodash": "^4.17.11",
+        "resolve": "^1.3.2",
+        "semver": "^5.4.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/generator": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
+      "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
+      "requires": {
+        "@babel/types": "^7.4.4",
+        "jsesc": "^2.5.1",
+        "lodash": "^4.17.11",
+        "source-map": "^0.5.0",
+        "trim-right": "^1.0.1"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
+      "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz",
+      "integrity": "sha512-qNSR4jrmJ8M1VMM9tibvyRAHXQs2PmaksQF7c1CGJNipfe3D8p+wgNwgso/P2A2r2mdgBWAXljNWR0QRZAMW8w==",
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-builder-react-jsx": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.3.0.tgz",
+      "integrity": "sha512-MjA9KgwCuPEkQd9ncSXvSyJ5y+j2sICHyrI0M3L+6fnS4wMSNDc1ARXsbTfbb2cXHn17VisSnU/sHFTCxVxSMw==",
+      "requires": {
+        "@babel/types": "^7.3.0",
+        "esutils": "^2.0.0"
+      }
+    },
+    "@babel/helper-call-delegate": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz",
+      "integrity": "sha512-l79boDFJ8S1c5hvQvG+rc+wHw6IuH7YldmRKsYtpbawsxURu/paVy57FZMomGK22/JckepaikOkY0MoAmdyOlQ==",
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.4.4",
+        "@babel/traverse": "^7.4.4",
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz",
+      "integrity": "sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA==",
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-member-expression-to-functions": "^7.0.0",
+        "@babel/helper-optimise-call-expression": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.4.4",
+        "@babel/helper-split-export-declaration": "^7.4.4"
+      }
+    },
+    "@babel/helper-define-map": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz",
+      "integrity": "sha512-IX3Ln8gLhZpSuqHJSnTNBWGDE9kdkTEWl21A/K7PQ00tseBwbqCHTvNLHSBd9M0R5rER4h5Rsvj9vw0R5SieBg==",
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/types": "^7.4.4",
+        "lodash": "^4.17.11"
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz",
+      "integrity": "sha512-NRQpfHrJ1msCHtKjbzs9YcMmJZOg6mQMmGRB+hbamEdG5PNpaSm95275VD92DvJKuyl0s2sFiDmMZ+EnnvufqA==",
+      "requires": {
+        "@babel/traverse": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
+      "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.0.0",
+        "@babel/template": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz",
+      "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz",
+      "integrity": "sha512-VYk2/H/BnYbZDDg39hr3t2kKyifAm1W6zHRfhx8jGjIHpQEBv9dry7oQ2f3+J703TLu69nYdxsovl0XYfcnK4w==",
+      "requires": {
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0.tgz",
+      "integrity": "sha512-avo+lm/QmZlv27Zsi0xEor2fKcqWG56D5ae9dzklpIaY7cQMK5N8VSpaNVPPagiqmy7LrEjK1IWdGMOqPu5csg==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
+      "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz",
+      "integrity": "sha512-3Z1yp8TVQf+B4ynN7WoHPKS8EkdTbgAEy0nU0rs/1Kw4pDgmvYH3rz3aI11KgxKCba2cn7N+tqzV1mY2HMN96w==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/helper-simple-access": "^7.1.0",
+        "@babel/helper-split-export-declaration": "^7.4.4",
+        "@babel/template": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "lodash": "^4.17.11"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz",
+      "integrity": "sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz",
+      "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA=="
+    },
+    "@babel/helper-regex": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.4.4.tgz",
+      "integrity": "sha512-Y5nuB/kESmR3tKjU8Nkn1wMGEx1tjJX076HBMeL3XLQCu6vA/YRzuTW0bbb+qRnXvQGn+d6Rx953yffl8vEy7Q==",
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz",
+      "integrity": "sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-wrap-function": "^7.1.0",
+        "@babel/template": "^7.1.0",
+        "@babel/traverse": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.4.4.tgz",
+      "integrity": "sha512-04xGEnd+s01nY1l15EuMS1rfKktNF+1CkKmHoErDppjAAZL+IUBZpzT748x262HF7fibaQPhbvWUl5HeSt1EXg==",
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.0.0",
+        "@babel/helper-optimise-call-expression": "^7.0.0",
+        "@babel/traverse": "^7.4.4",
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz",
+      "integrity": "sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==",
+      "requires": {
+        "@babel/template": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
+      "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+      "requires": {
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz",
+      "integrity": "sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==",
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/template": "^7.1.0",
+        "@babel/traverse": "^7.1.0",
+        "@babel/types": "^7.2.0"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.4.4.tgz",
+      "integrity": "sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==",
+      "requires": {
+        "@babel/template": "^7.4.4",
+        "@babel/traverse": "^7.4.4",
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz",
+      "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==",
+      "requires": {
+        "chalk": "^2.0.0",
+        "esutils": "^2.0.2",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz",
+      "integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w=="
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz",
+      "integrity": "sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-remap-async-to-generator": "^7.1.0",
+        "@babel/plugin-syntax-async-generators": "^7.2.0"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.4.tgz",
+      "integrity": "sha512-WjKTI8g8d5w1Bc9zgwSz2nfrsNQsXcCf9J9cdCvrJV6RF56yztwm4TmJC0MgJ9tvwO9gUA/mcYe89bLdGfiXFg==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.4.4",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz",
+      "integrity": "sha512-MAFV1CA/YVmYwZG0fBQyXhmj0BHCB5egZHCKWIFVv/XCxAeVGIHfos3SwDck4LvCllENIAg7xMKOG5kH0dzyUg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-json-strings": "^7.2.0"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz",
+      "integrity": "sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.2.0"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz",
+      "integrity": "sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.2.0"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz",
+      "integrity": "sha512-j1NwnOqMG9mFUOH58JTFsA/+ZYzQLUZ/drqWUqxCYLGeu2JFZL8YrNC9hBxKmWtAuOCHPcRpgv7fhap09Fb4kA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-regex": "^7.4.4",
+        "regexpu-core": "^4.5.4"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz",
+      "integrity": "sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz",
+      "integrity": "sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz",
+      "integrity": "sha512-5UGYnMSLRE1dqqZwug+1LISpA403HzlSfsg6P9VXU6TBjcSHeNlw4DxDx7LgpF+iKZoOG/+uzqoRHTdcUpiZNg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz",
+      "integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz",
+      "integrity": "sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz",
+      "integrity": "sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz",
+      "integrity": "sha512-ER77Cax1+8/8jCB9fo4Ud161OZzWN5qawi4GusDuRLcDbDG+bIGYY20zb2dfAFdTRGzrfq2xZPvF0R64EHnimg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.4.tgz",
+      "integrity": "sha512-YiqW2Li8TXmzgbXw+STsSqPBPFnGviiaSp6CYOq55X8GQ2SGVLrXB6pNid8HkqkZAzOH6knbai3snhP7v0fNwA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-remap-async-to-generator": "^7.1.0"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz",
+      "integrity": "sha512-ntQPR6q1/NKuphly49+QiQiTN0O63uOwjdD6dhIjSWBI5xlrbUFh720TIpzBhpnrLfv2tNH/BXvLIab1+BAI0w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.4.4.tgz",
+      "integrity": "sha512-jkTUyWZcTrwxu5DD4rWz6rDB5Cjdmgz6z7M7RLXOJyCUkFBawssDGcGh8M/0FTSB87avyJI1HsTwUXp9nKA1PA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.4.tgz",
+      "integrity": "sha512-/e44eFLImEGIpL9qPxSRat13I5QNRgBLu2hOQJCF7VLy/otSM/sypV1+XaIw5+502RX/+6YaSAPmldk+nhHDPw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-define-map": "^7.4.4",
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-optimise-call-expression": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.4.4",
+        "@babel/helper-split-export-declaration": "^7.4.4",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz",
+      "integrity": "sha512-kP/drqTxY6Xt3NNpKiMomfgkNn4o7+vKxK2DDKcBG9sHj51vHqMBGy8wbDS/J4lMxnqs153/T3+DmCEAkC5cpA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.4.tgz",
+      "integrity": "sha512-/aOx+nW0w8eHiEHm+BTERB2oJn5D127iye/SUQl7NjHy0lf+j7h4MKMMSOwdazGq9OxgiNADncE+SRJkCxjZpQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.4.4.tgz",
+      "integrity": "sha512-P05YEhRc2h53lZDjRPk/OektxCVevFzZs2Gfjd545Wde3k+yFDbXORgl2e0xpbq8mLcKJ7Idss4fAg0zORN/zg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-regex": "^7.4.4",
+        "regexpu-core": "^4.5.4"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz",
+      "integrity": "sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz",
+      "integrity": "sha512-umh4hR6N7mu4Elq9GG8TOu9M0bakvlsREEC+ialrQN6ABS4oDQ69qJv1VtR3uxlKMCQMCvzk7vr17RHKcjx68A==",
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.1.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz",
+      "integrity": "sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-flow": "^7.2.0"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz",
+      "integrity": "sha512-9T/5Dlr14Z9TIEXLXkt8T1DU7F24cbhwhMNUziN3hB1AXoZcdzPcTiKGRn/6iOymDqtTKWnr/BtRKN9JwbKtdQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz",
+      "integrity": "sha512-iU9pv7U+2jC9ANQkKeNF6DrPy4GBa4NWQtl6dHB4Pb3izX2JOEvDTFarlNsBj/63ZEzNNIAMs3Qw4fNCcSOXJA==",
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz",
+      "integrity": "sha512-2ThDhm4lI4oV7fVQ6pNNK+sx+c/GM5/SaML0w/r4ZB7sAneD/piDJtwdKlNckXeyGK7wlwg2E2w33C/Hh+VFCg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz",
+      "integrity": "sha512-HiU3zKkSU6scTidmnFJ0bMX8hz5ixC93b4MHMiYebmk2lUVNGOboPsqQvx5LzooihijUoLR/v7Nc1rbBtnc7FA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz",
+      "integrity": "sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.1.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.4.tgz",
+      "integrity": "sha512-4sfBOJt58sEo9a2BQXnZq+Q3ZTSAUXyK3E30o36BOGnJ+tvJ6YSxF0PG6kERvbeISgProodWuI9UVG3/FMY6iw==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.4.4",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-simple-access": "^7.1.0"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.4.tgz",
+      "integrity": "sha512-MSiModfILQc3/oqnG7NrP1jHaSPryO6tA2kOMmAQApz5dayPxWiHqmq4sWH2xF5LcQK56LlbKByCd8Aah/OIkQ==",
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.4.4",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz",
+      "integrity": "sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.1.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.4.tgz",
+      "integrity": "sha512-Ki+Y9nXBlKfhD+LXaRS7v95TtTGYRAf9Y1rTDiE75zf8YQz4GDaWRXosMfJBXxnk88mGFjWdCRIeqDbon7spYA==",
+      "requires": {
+        "regexp-tree": "^0.1.0"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz",
+      "integrity": "sha512-r1z3T2DNGQwwe2vPGZMBNjioT2scgWzK9BCnDEh+46z8EEwXBq24uRzd65I7pjtugzPSj921aM15RpESgzsSuA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz",
+      "integrity": "sha512-VMyhPYZISFZAqAPVkiYb7dUe2AsVi2/wCT5+wZdsNO31FojQJa9ns40hzZ6U9f50Jlq4w6qwzdBB2uwqZ00ebg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.1.0"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz",
+      "integrity": "sha512-oMh5DUO1V63nZcu/ZVLQFqiihBGo4OpxJxR1otF50GMeCLiRx5nUdtokd+u9SuVJrvvuIh9OosRFPP4pIPnwmw==",
+      "requires": {
+        "@babel/helper-call-delegate": "^7.4.4",
+        "@babel/helper-get-function-arity": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz",
+      "integrity": "sha512-9q7Dbk4RhgcLp8ebduOpCbtjh7C0itoLYHXd9ueASKAG/is5PQtMR5VJGka9NKqGhYEGn5ITahd4h9QeBMylWQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz",
+      "integrity": "sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz",
+      "integrity": "sha512-a/+aRb7R06WcKvQLOu4/TpjKOdvVEKRLWFpKcNuHhiREPgGRB4TQJxq07+EZLS8LFVYpfq1a5lDUnuMdcCpBKg==",
+      "requires": {
+        "@babel/helper-builder-react-jsx": "^7.3.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-self": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz",
+      "integrity": "sha512-v6S5L/myicZEy+jr6ielB0OR8h+EH/1QFx/YJ7c7Ua+7lqsjj/vW6fD5FR9hB/6y7mGbfT4vAURn3xqBxsUcdg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-source": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz",
+      "integrity": "sha512-A32OkKTp4i5U6aE88GwwcuV4HAprUgHcTq0sSafLxjr6AW0QahrCRCjxogkbbcdtpbXkuTOlgpjophCxb6sh5g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.4.tgz",
+      "integrity": "sha512-Zz3w+pX1SI0KMIiqshFZkwnVGUhDZzpX2vtPzfJBKQQq8WsP/Xy9DNdELWivxcKOCX/Pywge4SiEaPaLtoDT4g==",
+      "requires": {
+        "regenerator-transform": "^0.13.4"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz",
+      "integrity": "sha512-fz43fqW8E1tAB3DKF19/vxbpib1fuyCwSPE418ge5ZxILnBhWyhtPgz8eh1RCGGJlwvksHkyxMxh0eenFi+kFw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz",
+      "integrity": "sha512-QP4eUM83ha9zmYtpbnyjTLAGKQritA5XW/iG9cjtuOI8s1RuL/3V6a3DeSHfKutJQ+ayUfeZJPcnCYEQzaPQqg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.2.2.tgz",
+      "integrity": "sha512-KWfky/58vubwtS0hLqEnrWJjsMGaOeSBn90Ezn5Jeg9Z8KKHmELbP1yGylMlm5N6TPKeY9A2+UaSYLdxahg01w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz",
+      "integrity": "sha512-KKYCoGaRAf+ckH8gEL3JHUaFVyNHKe3ASNsZ+AlktgHevvxGigoIttrEJb8iKN03Q7Eazlv1s6cx2B2cQ3Jabw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-regex": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz",
+      "integrity": "sha512-mQrEC4TWkhLN0z8ygIvEL9ZEToPhG5K7KDW3pzGqOfIGZ28Jb0POUkeWcoz8HnHvhFy6dwAT1j8OzqN8s804+g==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz",
+      "integrity": "sha512-2LNhETWYxiYysBtrBTqL8+La0jIoQQnIScUJc74OYvUGRmkskNY4EzLCnjHBzdmb38wqtTaixpo1NctEcvMDZw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz",
+      "integrity": "sha512-il+/XdNw01i93+M9J9u4T7/e/Ue/vWfNZE4IRUQjplu2Mqb/AFTDimkw2tdEdSH50wuQXZAbXSql0UphQke+vA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-regex": "^7.4.4",
+        "regexpu-core": "^4.5.4"
+      }
+    },
+    "@babel/polyfill": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.2.5.tgz",
+      "integrity": "sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==",
+      "requires": {
+        "core-js": "^2.5.7",
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.4.tgz",
+      "integrity": "sha512-FU1H+ACWqZZqfw1x2G1tgtSSYSfxJLkpaUQL37CenULFARDo+h4xJoVHzRoHbK+85ViLciuI7ME4WTIhFRBBlw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+        "@babel/plugin-proposal-json-strings": "^7.2.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.2.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-syntax-async-generators": "^7.2.0",
+        "@babel/plugin-syntax-json-strings": "^7.2.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.2.0",
+        "@babel/plugin-transform-arrow-functions": "^7.2.0",
+        "@babel/plugin-transform-async-to-generator": "^7.4.4",
+        "@babel/plugin-transform-block-scoped-functions": "^7.2.0",
+        "@babel/plugin-transform-block-scoping": "^7.4.4",
+        "@babel/plugin-transform-classes": "^7.4.4",
+        "@babel/plugin-transform-computed-properties": "^7.2.0",
+        "@babel/plugin-transform-destructuring": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/plugin-transform-duplicate-keys": "^7.2.0",
+        "@babel/plugin-transform-exponentiation-operator": "^7.2.0",
+        "@babel/plugin-transform-for-of": "^7.4.4",
+        "@babel/plugin-transform-function-name": "^7.4.4",
+        "@babel/plugin-transform-literals": "^7.2.0",
+        "@babel/plugin-transform-member-expression-literals": "^7.2.0",
+        "@babel/plugin-transform-modules-amd": "^7.2.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.4.4",
+        "@babel/plugin-transform-modules-systemjs": "^7.4.4",
+        "@babel/plugin-transform-modules-umd": "^7.2.0",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.4.4",
+        "@babel/plugin-transform-new-target": "^7.4.4",
+        "@babel/plugin-transform-object-super": "^7.2.0",
+        "@babel/plugin-transform-parameters": "^7.4.4",
+        "@babel/plugin-transform-property-literals": "^7.2.0",
+        "@babel/plugin-transform-regenerator": "^7.4.4",
+        "@babel/plugin-transform-reserved-words": "^7.2.0",
+        "@babel/plugin-transform-shorthand-properties": "^7.2.0",
+        "@babel/plugin-transform-spread": "^7.2.0",
+        "@babel/plugin-transform-sticky-regex": "^7.2.0",
+        "@babel/plugin-transform-template-literals": "^7.4.4",
+        "@babel/plugin-transform-typeof-symbol": "^7.2.0",
+        "@babel/plugin-transform-unicode-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "browserslist": "^4.5.2",
+        "core-js-compat": "^3.0.0",
+        "invariant": "^2.2.2",
+        "js-levenshtein": "^1.1.3",
+        "semver": "^5.5.0"
+      }
+    },
+    "@babel/preset-flow": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0.tgz",
+      "integrity": "sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-transform-flow-strip-types": "^7.0.0"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.0.0.tgz",
+      "integrity": "sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-transform-react-display-name": "^7.0.0",
+        "@babel/plugin-transform-react-jsx": "^7.0.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.0.0",
+        "@babel/plugin-transform-react-jsx-source": "^7.0.0"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz",
+      "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
+    "@babel/template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
+      "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.4.4",
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.4.tgz",
+      "integrity": "sha512-Gw6qqkw/e6AGzlyj9KnkabJX7VcubqPtkUQVAwkc0wUMldr3A/hezNB3Rc5eIvId95iSGkGIOe5hh1kMKf951A==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/generator": "^7.4.4",
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-split-export-declaration": "^7.4.4",
+        "@babel/parser": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "@babel/types": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
+      "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
+      "requires": {
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.11",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@cliqz-oss/firefox-client": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@cliqz-oss/firefox-client/-/firefox-client-0.3.1.tgz",
+      "integrity": "sha512-RO+Tops/wGnBzWoZYkCraqyh2JqOejqJq5/a4b54HhmjTNSKdUPwAOK17EGg/zPb0nWqkuB7QyZsI9bo+ev8Kw==",
+      "requires": {
+        "colors": "0.5.x",
+        "js-select": "~0.6.0"
+      }
+    },
+    "@cliqz-oss/node-firefox-connect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@cliqz-oss/node-firefox-connect/-/node-firefox-connect-1.2.1.tgz",
+      "integrity": "sha512-O/IyiB5pfztCdmxQZg0/xeq5w+YiP3gtJz8d4We2EpLPKzbDVjOrtfLKYgVfm6Ya6mbvDge1uLkSRwaoVCWKnA==",
+      "requires": {
+        "@cliqz-oss/firefox-client": "0.3.1",
+        "es6-promise": "^2.0.1"
+      }
+    },
+    "@cnakazawa/watch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.3.tgz",
+      "integrity": "sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==",
+      "requires": {
+        "exec-sh": "^0.3.2",
+        "minimist": "^1.2.0"
+      }
+    },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
+    "@jest/console": {
+      "version": "24.7.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
+      "integrity": "sha512-iNhtIy2M8bXlAOULWVTUxmnelTLFneTNEkHCgPmgd+zNwy9zVddJ6oS5rZ9iwoscNdT5mMwUd0C51v/fSlzItg==",
+      "requires": {
+        "@jest/source-map": "^24.3.0",
+        "chalk": "^2.0.1",
+        "slash": "^2.0.0"
+      }
+    },
+    "@jest/core": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-24.8.0.tgz",
+      "integrity": "sha512-R9rhAJwCBQzaRnrRgAdVfnglUuATXdwTRsYqs6NMdVcAl5euG8LtWDe+fVkN27YfKVBW61IojVsXKaOmSnqd/A==",
+      "requires": {
+        "@jest/console": "^24.7.1",
+        "@jest/reporters": "^24.8.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/transform": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "ansi-escapes": "^3.0.0",
+        "chalk": "^2.0.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.1.15",
+        "jest-changed-files": "^24.8.0",
+        "jest-config": "^24.8.0",
+        "jest-haste-map": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-regex-util": "^24.3.0",
+        "jest-resolve-dependencies": "^24.8.0",
+        "jest-runner": "^24.8.0",
+        "jest-runtime": "^24.8.0",
+        "jest-snapshot": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jest-validate": "^24.8.0",
+        "jest-watcher": "^24.8.0",
+        "micromatch": "^3.1.10",
+        "p-each-series": "^1.0.0",
+        "pirates": "^4.0.1",
+        "realpath-native": "^1.1.0",
+        "rimraf": "^2.5.4",
+        "strip-ansi": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "@jest/environment": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-24.8.0.tgz",
+      "integrity": "sha512-vlGt2HLg7qM+vtBrSkjDxk9K0YtRBi7HfRFaDxoRtyi+DyVChzhF20duvpdAnKVBV6W5tym8jm0U9EfXbDk1tw==",
+      "requires": {
+        "@jest/fake-timers": "^24.8.0",
+        "@jest/transform": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "jest-mock": "^24.8.0"
+      }
+    },
+    "@jest/fake-timers": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-24.8.0.tgz",
+      "integrity": "sha512-2M4d5MufVXwi6VzZhJ9f5S/wU4ud2ck0kxPof1Iz3zWx6Y+V2eJrES9jEktB6O3o/oEyk+il/uNu9PvASjWXQw==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-mock": "^24.8.0"
+      }
+    },
+    "@jest/reporters": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-24.8.0.tgz",
+      "integrity": "sha512-eZ9TyUYpyIIXfYCrw0UHUWUvE35vx5I92HGMgS93Pv7du+GHIzl+/vh8Qj9MCWFK/4TqyttVBPakWMOfZRIfxw==",
+      "requires": {
+        "@jest/environment": "^24.8.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/transform": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "chalk": "^2.0.1",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "istanbul-lib-coverage": "^2.0.2",
+        "istanbul-lib-instrument": "^3.0.1",
+        "istanbul-lib-report": "^2.0.4",
+        "istanbul-lib-source-maps": "^3.0.1",
+        "istanbul-reports": "^2.1.1",
+        "jest-haste-map": "^24.8.0",
+        "jest-resolve": "^24.8.0",
+        "jest-runtime": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jest-worker": "^24.6.0",
+        "node-notifier": "^5.2.1",
+        "slash": "^2.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^2.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@jest/source-map": {
+      "version": "24.3.0",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.3.0.tgz",
+      "integrity": "sha512-zALZt1t2ou8le/crCeeiRYzvdnTzaIlpOWaet45lNSqNJUnXbppUUFR4ZUAlzgDmKee4Q5P/tKXypI1RiHwgag==",
+      "requires": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.1.15",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@jest/test-result": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.8.0.tgz",
+      "integrity": "sha512-+YdLlxwizlfqkFDh7Mc7ONPQAhA4YylU1s529vVM1rsf67vGZH/2GGm5uO8QzPeVyaVMobCQ7FTxl38QrKRlng==",
+      "requires": {
+        "@jest/console": "^24.7.1",
+        "@jest/types": "^24.8.0",
+        "@types/istanbul-lib-coverage": "^2.0.0"
+      }
+    },
+    "@jest/test-sequencer": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-24.8.0.tgz",
+      "integrity": "sha512-OzL/2yHyPdCHXEzhoBuq37CE99nkme15eHkAzXRVqthreWZamEMA0WoetwstsQBCXABhczpK03JNbc4L01vvLg==",
+      "requires": {
+        "@jest/test-result": "^24.8.0",
+        "jest-haste-map": "^24.8.0",
+        "jest-runner": "^24.8.0",
+        "jest-runtime": "^24.8.0"
+      }
+    },
+    "@jest/transform": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-24.8.0.tgz",
+      "integrity": "sha512-xBMfFUP7TortCs0O+Xtez2W7Zu1PLH9bvJgtraN1CDST6LBM/eTOZ9SfwS/lvV8yOfcDpFmwf9bq5cYbXvqsvA==",
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^24.8.0",
+        "babel-plugin-istanbul": "^5.1.0",
+        "chalk": "^2.0.1",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.1.15",
+        "jest-haste-map": "^24.8.0",
+        "jest-regex-util": "^24.3.0",
+        "jest-util": "^24.8.0",
+        "micromatch": "^3.1.10",
+        "realpath-native": "^1.1.0",
+        "slash": "^2.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "2.4.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@jest/types": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.8.0.tgz",
+      "integrity": "sha512-g17UxVr2YfBtaMUxn9u/4+siG1ptg9IGYAYwvpwn61nBg779RXnjE/m7CxYcIzEt0AbHZZAHSEZNhkE2WxURVg==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^1.1.1",
+        "@types/yargs": "^12.0.9"
+      }
+    },
+    "@reach/auto-id": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.2.0.tgz",
+      "integrity": "sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg=="
+    },
+    "@reach/component-component": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@reach/component-component/-/component-component-0.1.3.tgz",
+      "integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg=="
+    },
+    "@reach/menu-button": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/@reach/menu-button/-/menu-button-0.1.17.tgz",
+      "integrity": "sha512-PuBuabBjyCapax7hQ5qSWKnQy+qpZkosRV7trnO9YjFIfszn1lp+WTI5AciK+rrlsqK7t4LqNTqffI2XBuy2FA==",
+      "requires": {
+        "@reach/component-component": "0.1.3",
+        "@reach/portal": "^0.2.1",
+        "@reach/rect": "0.2.1",
+        "@reach/utils": "^0.2.2",
+        "@reach/window-size": "^0.1.4",
+        "warning": "^4.0.2"
+      }
+    },
+    "@reach/observe-rect": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.0.3.tgz",
+      "integrity": "sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg="
+    },
+    "@reach/portal": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.2.1.tgz",
+      "integrity": "sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==",
+      "requires": {
+        "@reach/component-component": "^0.1.3"
+      }
+    },
+    "@reach/rect": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.2.1.tgz",
+      "integrity": "sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==",
+      "requires": {
+        "@reach/component-component": "^0.1.3",
+        "@reach/observe-rect": "^1.0.3"
+      }
+    },
+    "@reach/tooltip": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@reach/tooltip/-/tooltip-0.2.0.tgz",
+      "integrity": "sha512-RKJkGR+w3vS+flGjcVL82SK016E6rzjG8wC4ZtFu03VCAxJyhveG0uaB3juv7Rx+u8CEwv2gxfWgfMWgrJ2cRA==",
+      "requires": {
+        "@reach/auto-id": "0.2.0",
+        "@reach/portal": "^0.2.1",
+        "@reach/rect": "^0.2.1",
+        "@reach/utils": "^0.2.2",
+        "@reach/visually-hidden": "^0.1.4",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@reach/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-jYeIi46AA5jh2gfdXD/nInUYfeLp3girRafiajP7AVHF6B4hpYAzUSx/ZH4xmPyf5alut5rml2DHxrv+X+Xu+A=="
+    },
+    "@reach/visually-hidden": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz",
+      "integrity": "sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ=="
+    },
+    "@reach/window-size": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@reach/window-size/-/window-size-0.1.4.tgz",
+      "integrity": "sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==",
+      "requires": {
+        "@reach/component-component": "^0.1.3"
+      }
+    },
+    "@samverschueren/stream-to-observable": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
+      "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==",
+      "requires": {
+        "any-observable": "^0.3.0"
+      }
+    },
+    "@types/babel__core": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.1.tgz",
+      "integrity": "sha512-+hjBtgcFPYyCTo0A15+nxrCVJL7aC6Acg87TXd5OW3QhHswdrOLoles+ldL2Uk8q++7yIfl4tURtztccdeeyOw==",
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "@types/babel__generator": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.0.2.tgz",
+      "integrity": "sha512-NHcOfab3Zw4q5sEE2COkpfXjoE7o+PmqD9DQW4koUT3roNxwziUdXGnRndMat/LJNUtePwn1TlP4do3uoe3KZQ==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__template": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.2.tgz",
+      "integrity": "sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==",
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__traverse": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.6.tgz",
+      "integrity": "sha512-XYVgHF2sQ0YblLRMLNPB3CkFMewzFmlDsH/TneZFHUXDlABQgh88uOxuez7ZcXxayLFrqLwtDH1t+FmlFwNZxw==",
+      "requires": {
+        "@babel/types": "^7.3.0"
+      }
+    },
+    "@types/events": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
+      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
+    },
+    "@types/glob": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
+      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+      "requires": {
+        "@types/events": "*",
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
+      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg=="
+    },
+    "@types/istanbul-lib-report": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz",
+      "integrity": "sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
+      "integrity": "sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==",
+      "requires": {
+        "@types/istanbul-lib-coverage": "*",
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/minimatch": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
+    },
+    "@types/node": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.0.tgz",
+      "integrity": "sha512-Jrb/x3HT4PTJp6a4avhmJCDEVrPdqLfl3e8GGMbpkGGdwAV5UGlIs4vVEfsHHfylZVOKZWpOqmqFH8CbfOZ6kg=="
+    },
+    "@types/stack-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
+      "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
+    },
+    "@types/yargs": {
+      "version": "12.0.12",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-12.0.12.tgz",
+      "integrity": "sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw=="
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
+      "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==",
+      "requires": {
+        "@webassemblyjs/helper-module-context": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/wast-parser": "1.8.5"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz",
+      "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ=="
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz",
+      "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA=="
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz",
+      "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q=="
+    },
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz",
+      "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==",
+      "requires": {
+        "@webassemblyjs/wast-printer": "1.8.5"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz",
+      "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow=="
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz",
+      "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "mamacro": "^0.0.3"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz",
+      "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ=="
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz",
+      "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz",
+      "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==",
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz",
+      "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==",
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz",
+      "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw=="
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz",
+      "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/helper-wasm-section": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5",
+        "@webassemblyjs/wasm-opt": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5",
+        "@webassemblyjs/wast-printer": "1.8.5"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz",
+      "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/ieee754": "1.8.5",
+        "@webassemblyjs/leb128": "1.8.5",
+        "@webassemblyjs/utf8": "1.8.5"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz",
+      "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz",
+      "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-api-error": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/ieee754": "1.8.5",
+        "@webassemblyjs/leb128": "1.8.5",
+        "@webassemblyjs/utf8": "1.8.5"
+      }
+    },
+    "@webassemblyjs/wast-parser": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz",
+      "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/floating-point-hex-parser": "1.8.5",
+        "@webassemblyjs/helper-api-error": "1.8.5",
+        "@webassemblyjs/helper-code-frame": "1.8.5",
+        "@webassemblyjs/helper-fsm": "1.8.5",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz",
+      "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/wast-parser": "1.8.5",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "Base64": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
+      "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
+    },
+    "JSONSelect": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/JSONSelect/-/JSONSelect-0.2.1.tgz",
+      "integrity": "sha1-QVQYpSbTP+MddLTe+jyDbUhewgM="
+    },
+    "JSONStream": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
+      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+      "requires": {
+        "jsonparse": "^1.2.0",
+        "through": ">=2.2.7 <3"
+      }
+    },
+    "abab": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
+      "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w=="
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw=="
+    },
+    "acorn-dynamic-import": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
+    },
+    "acorn-globals": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.2.tgz",
+      "integrity": "sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ==",
+      "requires": {
+        "acorn": "^6.0.1",
+        "acorn-walk": "^6.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
+          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
+        }
+      }
+    },
+    "acorn-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
+      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "requires": {
+        "acorn": "^3.0.4"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+        }
+      }
+    },
+    "acorn-walk": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz",
+      "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw=="
+    },
+    "adbkit": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/adbkit/-/adbkit-2.11.0.tgz",
+      "integrity": "sha512-j2vUhEeZmCiqBP+p77CpPWQTcT20rOmSmRHFUTZUwUpxzeCd3fXop4NAGYztSY9/FNU4bT/qqvYQ4EZKuCXhfA==",
+      "requires": {
+        "adbkit-logcat": "^1.1.0",
+        "adbkit-monkey": "~1.0.1",
+        "bluebird": "~2.9.24",
+        "commander": "^2.3.0",
+        "debug": "~2.6.3",
+        "node-forge": "^0.7.1",
+        "split": "~0.3.3"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "2.9.34",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.34.tgz",
+          "integrity": "sha1-L3tOyAIWMoqf3evfacjUlC/v99g="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "split": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+          "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=",
+          "requires": {
+            "through": "2"
+          }
+        }
+      }
+    },
+    "adbkit-logcat": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz",
+      "integrity": "sha1-Adf5sM75CTowvLOwB+//MBUIli8="
+    },
+    "adbkit-monkey": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz",
+      "integrity": "sha1-8pG+cBou/FZ6Y/x6pq/N7TFDC+E=",
+      "requires": {
+        "async": "~0.2.9"
+      },
+      "dependencies": {
+        "async": {
+          "version": "0.2.10",
+          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
+          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E="
+        }
+      }
+    },
+    "add-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz",
+      "integrity": "sha1-anmQQ3ynNtXhKI25K9MmbV9csqo="
+    },
+    "addons-linter": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-1.6.1.tgz",
+      "integrity": "sha512-3+N8cskdXHpId0dhfsldgbYGXamtgfGywvU4oPVb1M7imG3pHFoK+VcAr/kPk1VeYGkSmBl2LxnwGHcw1ERvmA==",
+      "requires": {
+        "ajv": "6.9.1",
+        "ajv-merge-patch": "4.1.0",
+        "chalk": "2.4.2",
+        "cheerio": "1.0.0-rc.2",
+        "columnify": "1.5.4",
+        "common-tags": "1.8.0",
+        "crx-parser": "0.1.2",
+        "deepmerge": "3.1.0",
+        "dispensary": "0.30.0",
+        "es6-promisify": "6.0.1",
+        "eslint": "5.13.0",
+        "eslint-plugin-no-unsafe-innerhtml": "1.0.16",
+        "eslint-visitor-keys": "1.0.0",
+        "espree": "5.0.0",
+        "esprima": "3.1.3",
+        "first-chunk-stream": "2.0.0",
+        "fluent-syntax": "0.10.0",
+        "fsevents": "2.0.1",
+        "glob": "7.1.3",
+        "is-mergeable-object": "1.1.0",
+        "jed": "1.1.1",
+        "mdn-browser-compat-data": "0.0.66",
+        "os-locale": "3.1.0",
+        "pino": "5.11.1",
+        "po2json": "0.4.5",
+        "postcss": "7.0.14",
+        "probe-image-size": "4.0.0",
+        "regenerator-runtime": "0.13.1",
+        "relaxed-json": "1.0.1",
+        "semver": "5.6.0",
+        "source-map-support": "0.5.10",
+        "strip-bom-stream": "3.0.0",
+        "tosource": "1.0.0",
+        "upath": "1.1.0",
+        "whatwg-url": "7.0.0",
+        "xmldom": "0.1.27",
+        "yargs": "13.1.0",
+        "yauzl": "2.10.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
+          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
+        },
+        "acorn-jsx": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
+          "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
+        },
+        "ajv": {
+          "version": "6.9.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.9.1.tgz",
+          "integrity": "sha512-XDN92U311aINL77ieWHmqCcNlwjoP5cHXDxIxbf2MaPYuCXOHS7gHH8jktxeK5omgd52XbSTX6a4Piwd1pQmzA==",
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "chardet": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+          "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "es6-promisify": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.0.1.tgz",
+          "integrity": "sha512-J3ZkwbEnnO+fGAKrjVpeUAnZshAdfZvbhQpqfIH9kSAspReRC4nJnu8ewm55b4y9ElyeuhCTzJD0XiH8Tsbhlw=="
+        },
+        "eslint": {
+          "version": "5.13.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.13.0.tgz",
+          "integrity": "sha512-nqD5WQMisciZC5EHZowejLKQjWGuFS5c70fxqSKlnDME+oz9zmE8KTlX+lHSg+/5wsC/kf9Q9eMkC8qS3oM2fg==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "ajv": "^6.5.3",
+            "chalk": "^2.1.0",
+            "cross-spawn": "^6.0.5",
+            "debug": "^4.0.1",
+            "doctrine": "^2.1.0",
+            "eslint-scope": "^4.0.0",
+            "eslint-utils": "^1.3.1",
+            "eslint-visitor-keys": "^1.0.0",
+            "espree": "^5.0.0",
+            "esquery": "^1.0.1",
+            "esutils": "^2.0.2",
+            "file-entry-cache": "^2.0.0",
+            "functional-red-black-tree": "^1.0.1",
+            "glob": "^7.1.2",
+            "globals": "^11.7.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.0.0",
+            "imurmurhash": "^0.1.4",
+            "inquirer": "^6.1.0",
+            "js-yaml": "^3.12.0",
+            "json-stable-stringify-without-jsonify": "^1.0.1",
+            "levn": "^0.3.0",
+            "lodash": "^4.17.5",
+            "minimatch": "^3.0.4",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "optionator": "^0.8.2",
+            "path-is-inside": "^1.0.2",
+            "progress": "^2.0.0",
+            "regexpp": "^2.0.1",
+            "semver": "^5.5.1",
+            "strip-ansi": "^4.0.0",
+            "strip-json-comments": "^2.0.1",
+            "table": "^5.0.2",
+            "text-table": "^0.2.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "espree": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.0.tgz",
+          "integrity": "sha512-1MpUfwsdS9MMoN7ZXqAr9e9UKdVHDcvrJpyx7mm1WuQlx/ygErEQBzgi5Nh5qBHIoYweprhtMkTCb9GhcAIcsA==",
+          "requires": {
+            "acorn": "^6.0.2",
+            "acorn-jsx": "^5.0.0",
+            "eslint-visitor-keys": "^1.0.0"
+          }
+        },
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "external-editor": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
+          "integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
+          "requires": {
+            "chardet": "^0.7.0",
+            "iconv-lite": "^0.4.24",
+            "tmp": "^0.0.33"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        },
+        "fsevents": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.1.tgz",
+          "integrity": "sha512-p+CXqK/iLvDESUWdn3NA3JVO9HxdfI+iXx8xR3DqWgKZvQNiEVpAyUQo0lmwz8rqksb4xaGerG291xuwwhX2kA==",
+          "optional": true
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+        },
+        "import-fresh": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.0.0.tgz",
+          "integrity": "sha512-pOnA9tfM3Uwics+SaBLCNyZZZbK+4PTu0OPZtLlMIrv17EdBoC15S9Kn8ckJ9TZTyKb3ywNE5y1yeDxxGA7nTQ==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "inquirer": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.3.1.tgz",
+          "integrity": "sha512-MmL624rfkFt4TG9y/Jvmt8vdmOo836U7Y0Hxr2aFk3RelZEGX4Igk0KabWrcaaZaTv9uzglOqWh1Vly+FAWAXA==",
+          "requires": {
+            "ansi-escapes": "^3.2.0",
+            "chalk": "^2.4.2",
+            "cli-cursor": "^2.1.0",
+            "cli-width": "^2.0.0",
+            "external-editor": "^3.0.3",
+            "figures": "^2.0.0",
+            "lodash": "^4.17.11",
+            "mute-stream": "0.0.7",
+            "run-async": "^2.2.0",
+            "rxjs": "^6.4.0",
+            "string-width": "^2.1.0",
+            "strip-ansi": "^5.1.0",
+            "through": "^2.3.6"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
+        "postcss": {
+          "version": "7.0.14",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
+          "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz",
+          "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA=="
+        },
+        "regexpp": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
+          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        },
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
+        },
+        "slice-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+          "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "astral-regex": "^1.0.0",
+            "is-fullwidth-code-point": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.10",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.10.tgz",
+          "integrity": "sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+            }
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "table": {
+          "version": "5.3.3",
+          "resolved": "https://registry.npmjs.org/table/-/table-5.3.3.tgz",
+          "integrity": "sha512-3wUNCgdWX6PNpOe3amTTPWPuF6VGvgzjKCaO1snFj0z7Y3mUPWf5+zDtxUVGispJkDECPmR29wbzh6bVMOHbcw==",
+          "requires": {
+            "ajv": "^6.9.1",
+            "lodash": "^4.17.11",
+            "slice-ansi": "^2.1.0",
+            "string-width": "^3.0.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+              "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+              "requires": {
+                "emoji-regex": "^7.0.1",
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^5.1.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "whatwg-url": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
+          "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        },
+        "yargs": {
+          "version": "13.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.1.0.tgz",
+          "integrity": "sha512-1UhJbXfzHiPqkfXNHYhiz79qM/kZqjTE8yGlEjZa85Q+3+OwcV6NRkV7XOV1W2Eom2bzILeUn55pQYffjVOLAg==",
+          "requires": {
+            "cliui": "^4.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "os-locale": "^3.1.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.0.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+              "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+              "requires": {
+                "emoji-regex": "^7.0.1",
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^5.1.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.0.tgz",
+          "integrity": "sha512-Yq+32PrijHRri0vVKQEm+ys8mbqWjLiwQkMFNXEENutzLPP0bE4Lcd4iA3OQY5HF+GD3xXxf0MEHb8E4/SA3AA==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "adm-zip": {
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.13.tgz",
+      "integrity": "sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw=="
+    },
+    "ajv": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+      "requires": {
+        "co": "^4.6.0",
+        "fast-deep-equal": "^1.0.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.3.0"
+      }
+    },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
+    },
+    "ajv-keywords": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
+      "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I="
+    },
+    "ajv-merge-patch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz",
+      "integrity": "sha512-0mAYXMSauA8RZ7r+B4+EAOYcZEcO9OK5EiQCR7W7Cv4E44pJj56ZnkKLJ9/PAcOc0dT+LlV9fdDcq2TxVJfOYw==",
+      "requires": {
+        "fast-json-patch": "^2.0.6",
+        "json-merge-patch": "^0.2.3"
+      }
+    },
+    "ansi-align": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
+      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "requires": {
+        "string-width": "^2.0.0"
+      }
+    },
+    "ansi-colors": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA=="
+    },
+    "ansi-escapes": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
+    },
+    "ansi-gray": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
+      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
+    "ansi-html": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
+      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4="
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768="
+    },
+    "any-observable": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
+      "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog=="
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+    },
+    "anymatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+      "requires": {
+        "micromatch": "^3.1.4",
+        "normalize-path": "^2.1.1"
+      }
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "archiver": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-3.0.0.tgz",
+      "integrity": "sha512-5QeR6Xc5hSA9X1rbQfcuQ6VZuUXOaEdB65Dhmk9duuRJHYif/ZyJfuyJqsQrj34PFjU5emv5/MmfgA8un06onw==",
+      "requires": {
+        "archiver-utils": "^2.0.0",
+        "async": "^2.0.0",
+        "buffer-crc32": "^0.2.1",
+        "glob": "^7.0.0",
+        "readable-stream": "^2.0.0",
+        "tar-stream": "^1.5.0",
+        "zip-stream": "^2.0.1"
+      }
+    },
+    "archiver-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.0.0.tgz",
+      "integrity": "sha512-JRBgcVvDX4Mwu2RBF8bBaHcQCSxab7afsxAPYDQ5W+19quIPP5CfKE7Ql+UHs9wYvwsaNR8oDuhtf5iqrKmzww==",
+      "requires": {
+        "glob": "^7.0.0",
+        "graceful-fs": "^4.1.0",
+        "lazystream": "^1.0.0",
+        "lodash.assign": "^4.2.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.toarray": "^4.4.0",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        }
+      }
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "aria-query": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz",
+      "integrity": "sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=",
+      "requires": {
+        "ast-types-flow": "0.0.7",
+        "commander": "^2.11.0"
+      }
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+    },
+    "array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE="
+    },
+    "array-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
+    },
+    "array-filter": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
+      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
+    },
+    "array-from": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
+      "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU="
+    },
+    "array-ify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
+      "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4="
+    },
+    "array-includes": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz",
+      "integrity": "sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.7.0"
+      }
+    },
+    "array-map": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
+      "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI="
+    },
+    "array-reduce": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
+      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys="
+    },
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "requires": {
+        "array-uniq": "^1.0.1"
+      }
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "asn1.js": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
+      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
+    },
+    "astral-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg=="
+    },
+    "async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz",
+      "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==",
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
+    },
+    "async-limiter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
+      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
+    },
+    "axobject-query": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
+      "integrity": "sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=",
+      "requires": {
+        "ast-types-flow": "0.0.7"
+      }
+    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "babel-core": {
+      "version": "7.0.0-bridge.0",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
+    },
+    "babel-eslint": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-9.0.0.tgz",
+      "integrity": "sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "eslint-scope": "3.7.1",
+        "eslint-visitor-keys": "^1.0.0"
+      }
+    },
+    "babel-generator": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
+      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
+      "requires": {
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "detect-indent": "^4.0.0",
+        "jsesc": "^1.3.0",
+        "lodash": "^4.17.4",
+        "source-map": "^0.5.7",
+        "trim-right": "^1.0.1"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
+        }
+      }
+    },
+    "babel-helper-call-delegate": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
+      "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
+      "requires": {
+        "babel-helper-hoist-variables": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-define-map": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz",
+      "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-helper-function-name": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
+      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
+      "requires": {
+        "babel-helper-get-function-arity": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-get-function-arity": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
+      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-hoist-variables": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz",
+      "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-optimise-call-expression": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz",
+      "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-replace-supers": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz",
+      "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
+      "requires": {
+        "babel-helper-optimise-call-expression": "^6.24.1",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helpers": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
+      "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-jest": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.8.0.tgz",
+      "integrity": "sha512-+5/kaZt4I9efoXzPlZASyK/lN9qdRKmmUav9smVc0ruPQD7IsfucQ87gpOE8mn2jbDuS6M/YOW6n3v9ZoIfgnw==",
+      "requires": {
+        "@jest/transform": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "@types/babel__core": "^7.1.0",
+        "babel-plugin-istanbul": "^5.1.0",
+        "babel-preset-jest": "^24.6.0",
+        "chalk": "^2.4.2",
+        "slash": "^2.0.0"
+      }
+    },
+    "babel-loader": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
+      "integrity": "sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==",
+      "requires": {
+        "find-cache-dir": "^2.0.0",
+        "loader-utils": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
+    "babel-messages": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
+      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-check-es2015-constants": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
+      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-istanbul": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz",
+      "integrity": "sha512-dySz4VJMH+dpndj0wjJ8JPs/7i1TdSPb1nRrn56/92pKOF9VKC1FMFJmMXjzlGGusnCAqujP6PBCiKq0sVA+YQ==",
+      "requires": {
+        "find-up": "^3.0.0",
+        "istanbul-lib-instrument": "^3.3.0",
+        "test-exclude": "^5.2.3"
+      }
+    },
+    "babel-plugin-jest-hoist": {
+      "version": "24.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.6.0.tgz",
+      "integrity": "sha512-3pKNH6hMt9SbOv0F3WVmy5CWQ4uogS3k0GY5XLyQHJ9EGpAT9XWkFd2ZiXXtkwFHdAHa5j7w7kfxSP5lAIwu7w==",
+      "requires": {
+        "@types/babel__traverse": "^7.0.6"
+      }
+    },
+    "babel-plugin-syntax-class-properties": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
+    },
+    "babel-plugin-syntax-flow": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+      "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
+    },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
+    },
+    "babel-plugin-syntax-trailing-function-commas": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
+      "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM="
+    },
+    "babel-plugin-transform-class-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
+      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-plugin-syntax-class-properties": "^6.8.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-arrow-functions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
+      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-block-scoped-functions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
+      "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-block-scoping": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
+      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-plugin-transform-es2015-classes": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz",
+      "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
+      "requires": {
+        "babel-helper-define-map": "^6.24.1",
+        "babel-helper-function-name": "^6.24.1",
+        "babel-helper-optimise-call-expression": "^6.24.1",
+        "babel-helper-replace-supers": "^6.24.1",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-computed-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
+      "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-destructuring": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
+      "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-for-of": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
+      "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz",
+      "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-modules-commonjs": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
+      "integrity": "sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==",
+      "requires": {
+        "babel-plugin-transform-strict-mode": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-types": "^6.26.0"
+      }
+    },
+    "babel-plugin-transform-es2015-object-super": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
+      "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
+      "requires": {
+        "babel-helper-replace-supers": "^6.24.1",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-parameters": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
+      "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
+      "requires": {
+        "babel-helper-call-delegate": "^6.24.1",
+        "babel-helper-get-function-arity": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-shorthand-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
+      "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-spread": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz",
+      "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-template-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
+      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es3-member-expression-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz",
+      "integrity": "sha1-cz00RPPsxBvvjtGmpOCWV7iWnrs=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es3-property-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz",
+      "integrity": "sha1-sgeNWELiKr9A9z6M3pzTcRq9V1g=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-flow-strip-types": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz",
+      "integrity": "sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988=",
+      "requires": {
+        "babel-plugin-syntax-flow": "^6.18.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
+    "babel-plugin-transform-strict-mode": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
+      "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-polyfill": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.16.0.tgz",
+      "integrity": "sha1-LUUCHfh+JqN0ttTRqcZZZNF/JCI=",
+      "requires": {
+        "babel-runtime": "^6.9.1",
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.9.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+        },
+        "regenerator-runtime": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz",
+          "integrity": "sha1-0z65XQ0gAaS+OWWXB8UbDLcc4Ck="
+        }
+      }
+    },
+    "babel-preset-fbjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-1.0.0.tgz",
+      "integrity": "sha1-yXLlybMB1OyeeXH0rsPhSsAXqLA=",
+      "requires": {
+        "babel-plugin-check-es2015-constants": "^6.7.2",
+        "babel-plugin-syntax-flow": "^6.5.0",
+        "babel-plugin-syntax-object-rest-spread": "^6.5.0",
+        "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
+        "babel-plugin-transform-class-properties": "^6.6.0",
+        "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
+        "babel-plugin-transform-es2015-block-scoped-functions": "^6.6.5",
+        "babel-plugin-transform-es2015-block-scoping": "^6.7.1",
+        "babel-plugin-transform-es2015-classes": "^6.6.5",
+        "babel-plugin-transform-es2015-computed-properties": "^6.6.5",
+        "babel-plugin-transform-es2015-destructuring": "^6.6.5",
+        "babel-plugin-transform-es2015-for-of": "^6.6.0",
+        "babel-plugin-transform-es2015-literals": "^6.5.0",
+        "babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
+        "babel-plugin-transform-es2015-object-super": "^6.6.5",
+        "babel-plugin-transform-es2015-parameters": "^6.7.0",
+        "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
+        "babel-plugin-transform-es2015-spread": "^6.6.5",
+        "babel-plugin-transform-es2015-template-literals": "^6.6.5",
+        "babel-plugin-transform-es3-member-expression-literals": "^6.5.0",
+        "babel-plugin-transform-es3-property-literals": "^6.5.0",
+        "babel-plugin-transform-flow-strip-types": "^6.7.0",
+        "babel-plugin-transform-object-rest-spread": "^6.6.5",
+        "object-assign": "^4.0.1"
+      }
+    },
+    "babel-preset-jest": {
+      "version": "24.6.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz",
+      "integrity": "sha512-pdZqLEdmy1ZK5kyRUfvBb2IfTPb2BUvIJczlPspS8fWmBQslNNDBqVfh7BW5leOVJMDZKzjD8XEyABTk6gQ5yw==",
+      "requires": {
+        "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
+        "babel-plugin-jest-hoist": "^24.6.0"
+      }
+    },
+    "babel-register": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
+      "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
+      "requires": {
+        "babel-core": "^6.26.0",
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "home-or-tmp": "^2.0.0",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "source-map-support": "^0.4.15"
+      },
+      "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "core-js": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "slash": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+        }
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+        }
+      }
+    },
+    "babel-template": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
+      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-traverse": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
+      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "debug": "^2.6.8",
+        "globals": "^9.18.0",
+        "invariant": "^2.2.2",
+        "lodash": "^4.17.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "globals": {
+          "version": "9.18.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "babel-types": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.4",
+        "to-fast-properties": "^1.0.3"
+      },
+      "dependencies": {
+        "to-fast-properties": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+        }
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
+    "base64-js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "beeper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
+      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak="
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+    },
+    "binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
+    },
+    "bl": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "requires": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "bluebird": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
+      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
+    },
+    "bn.js": {
+      "version": "4.11.8",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
+      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
+    },
+    "body-parser": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
+      "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
+      "requires": {
+        "bytes": "3.0.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "~1.6.3",
+        "iconv-lite": "0.4.23",
+        "on-finished": "~2.3.0",
+        "qs": "6.5.2",
+        "raw-body": "2.3.3",
+        "type-is": "~1.6.16"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.23",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+          "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "bonjour": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
+      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
+      "requires": {
+        "array-flatten": "^2.1.0",
+        "deep-equal": "^1.0.1",
+        "dns-equal": "^1.0.0",
+        "dns-txt": "^2.0.2",
+        "multicast-dns": "^6.0.1",
+        "multicast-dns-service-types": "^1.1.0"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
+    "boxen": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
+      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "requires": {
+        "ansi-align": "^2.0.0",
+        "camelcase": "^4.0.0",
+        "chalk": "^2.0.1",
+        "cli-boxes": "^1.0.0",
+        "string-width": "^2.0.0",
+        "term-size": "^1.2.0",
+        "widest-line": "^2.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "requires": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+    },
+    "browser-process-hrtime": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
+      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw=="
+    },
+    "browser-resolve": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
+      "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
+      "requires": {
+        "resolve": "1.1.7"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs="
+        }
+      }
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "requires": {
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz",
+      "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=",
+      "requires": {
+        "bn.js": "^4.1.1",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.2",
+        "elliptic": "^6.0.0",
+        "inherits": "^2.0.1",
+        "parse-asn1": "^5.0.0"
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
+      "integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=",
+      "requires": {
+        "pako": "~0.2.0"
+      }
+    },
+    "browserslist": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.6.tgz",
+      "integrity": "sha512-o/hPOtbU9oX507lIqon+UvPYqpx3mHc8cV3QemSBTXwkG8gSQSK6UKvXcE/DcleU3+A59XTUHyCvZ5qGy8xVAg==",
+      "requires": {
+        "caniuse-lite": "^1.0.30000963",
+        "electron-to-chromium": "^1.3.127",
+        "node-releases": "^1.1.17"
+      }
+    },
+    "bser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz",
+      "integrity": "sha1-mseNPtXZFYBP2HrLFYvHlxR6Fxk=",
+      "requires": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+      "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4"
+      }
+    },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
+    },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "buffer-indexof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
+      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g=="
+    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+    },
+    "bunyan": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/bunyan/-/bunyan-1.8.12.tgz",
+      "integrity": "sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=",
+      "requires": {
+        "dtrace-provider": "~0.8",
+        "moment": "^2.10.6",
+        "mv": "~2",
+        "safe-json-stringify": "~1"
+      }
+    },
+    "byline": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/byline/-/byline-5.0.0.tgz",
+      "integrity": "sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE="
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+    },
+    "cacache": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
+      "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
+      "requires": {
+        "bluebird": "^3.5.3",
+        "chownr": "^1.1.1",
+        "figgy-pudding": "^3.5.1",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.1.15",
+        "lru-cache": "^5.1.1",
+        "mississippi": "^3.0.0",
+        "mkdirp": "^0.5.1",
+        "move-concurrently": "^1.0.1",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^2.6.2",
+        "ssri": "^6.0.1",
+        "unique-filename": "^1.1.1",
+        "y18n": "^4.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      }
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "requires": {
+        "callsites": "^2.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+        }
+      }
+    },
+    "caller-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
+      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
+      "requires": {
+        "callsites": "^0.2.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
+          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo="
+        }
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
+    "camelcase-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
+      "integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=",
+      "requires": {
+        "camelcase": "^4.1.0",
+        "map-obj": "^2.0.0",
+        "quick-lru": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        }
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30000967",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000967.tgz",
+      "integrity": "sha512-rUBIbap+VJfxTzrM4akJ00lkvVb5/n5v3EGXfWzSH5zT8aJmGzjA8HWhJ4U6kCpzxozUSnB+yvAYDRPY6mRpgQ=="
+    },
+    "capture-exit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
+      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
+      "requires": {
+        "rsvp": "^4.8.4"
+      }
+    },
+    "capture-stack-trace": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
+      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw=="
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chardet": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
+      "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
+    },
+    "cheerio": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
+      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
+    "child-process-promise": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/child-process-promise/-/child-process-promise-2.2.1.tgz",
+      "integrity": "sha1-RzChHvYQ+tRQuPIjx50x172tgHQ=",
+      "requires": {
+        "cross-spawn": "^4.0.2",
+        "node-version": "^1.0.0",
+        "promise-polyfill": "^6.0.1"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
+          "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
+      "requires": {
+        "anymatch": "^2.0.0",
+        "async-each": "^1.0.1",
+        "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
+        "glob-parent": "^3.1.0",
+        "inherits": "^2.0.3",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "normalize-path": "^3.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.2.1",
+        "upath": "^1.1.1"
+      },
+      "dependencies": {
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        },
+        "upath": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
+          "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q=="
+        }
+      }
+    },
+    "chownr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+      "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g=="
+    },
+    "chrome-launch": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chrome-launch/-/chrome-launch-1.1.4.tgz",
+      "integrity": "sha1-yJhb0CJjWlzIlwmbr9GYMYOKclI=",
+      "requires": {
+        "chrome-location": "^1.2.0",
+        "quick-tmp": "0.0.0",
+        "rimraf": "^2.2.8",
+        "shallow-copy": "0.0.1"
+      }
+    },
+    "chrome-location": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/chrome-location/-/chrome-location-1.2.1.tgz",
+      "integrity": "sha1-aRFRGk6sVQJ2Jcc7k3ylynq5SZU=",
+      "requires": {
+        "userhome": "^1.0.0",
+        "which": "^1.0.5"
+      }
+    },
+    "chrome-trace-event": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz",
+      "integrity": "sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "circular-json": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
+      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "classnames": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.1.tgz",
+      "integrity": "sha1-TRo9AtA31F4AsJbAvm9Ulty/KIo="
+    },
+    "cli-boxes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
+      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
+    },
+    "cli-cursor": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+      "requires": {
+        "restore-cursor": "^2.0.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
+      "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg=="
+    },
+    "cli-truncate": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
+      "integrity": "sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=",
+      "requires": {
+        "slice-ansi": "0.0.4",
+        "string-width": "^1.0.1"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "slice-ansi": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+          "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU="
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
+    "cli-width": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
+      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
+    },
+    "clipboard-js": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/clipboard-js/-/clipboard-js-0.3.6.tgz",
+      "integrity": "sha512-hyrmvbrYCeRBHdiR3KrEz0tmrUTXXEU8HLeGW0Y0icUSwYmAsmc+d6wfE4EDb/TxZmAVJG0eTfMlulCIT+ecfw=="
+    },
+    "cliui": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+      "requires": {
+        "string-width": "^2.1.1",
+        "strip-ansi": "^4.0.0",
+        "wrap-ansi": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+    },
+    "clone-stats": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
+      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE="
+    },
+    "cmd-shim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-2.0.2.tgz",
+      "integrity": "sha1-b8vamUg6j9FdfTChlspp1oii79s=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "~0.5.0"
+      }
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
+    },
+    "colors": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
+      "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q="
+    },
+    "columnify": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.4.tgz",
+      "integrity": "sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=",
+      "requires": {
+        "strip-ansi": "^3.0.0",
+        "wcwidth": "^1.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
+      "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "command-join": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/command-join/-/command-join-2.0.0.tgz",
+      "integrity": "sha1-Uui5hPSHLZUv8b3IuYOX0nxxRM8="
+    },
+    "commander": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
+    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "compare-func": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz",
+      "integrity": "sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=",
+      "requires": {
+        "array-ify": "^1.0.0",
+        "dot-prop": "^3.0.0"
+      }
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "compress-commons": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-1.2.2.tgz",
+      "integrity": "sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=",
+      "requires": {
+        "buffer-crc32": "^0.2.1",
+        "crc32-stream": "^2.0.0",
+        "normalize-path": "^2.0.0",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "compressible": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
+      "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==",
+      "requires": {
+        "mime-db": ">= 1.40.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "requires": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "configstore": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
+      "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==",
+      "requires": {
+        "dot-prop": "^4.1.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^1.0.0",
+        "unique-string": "^1.0.0",
+        "write-file-atomic": "^2.0.0",
+        "xdg-basedir": "^3.0.0"
+      },
+      "dependencies": {
+        "dot-prop": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
+          "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+          "requires": {
+            "is-obj": "^1.0.0"
+          }
+        },
+        "make-dir": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        }
+      }
+    },
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
+    },
+    "console-browserify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
+      "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=",
+      "requires": {
+        "date-now": "^0.1.4"
+      }
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
+    "constants-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz",
+      "integrity": "sha1-kld9tSe6bEzwpFaNhLwDH0QeIfI="
+    },
+    "contains-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
+      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo="
+    },
+    "content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "conventional-changelog": {
+      "version": "1.1.24",
+      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-1.1.24.tgz",
+      "integrity": "sha512-2WcSUst4Y3Z4hHvoMTWXMJr/DmgVdLiMOVY1Kak2LfFz+GIz2KDp5naqbFesYbfXPmaZ5p491dO0FWZIJoJw1Q==",
+      "requires": {
+        "conventional-changelog-angular": "^1.6.6",
+        "conventional-changelog-atom": "^0.2.8",
+        "conventional-changelog-codemirror": "^0.3.8",
+        "conventional-changelog-core": "^2.0.11",
+        "conventional-changelog-ember": "^0.3.12",
+        "conventional-changelog-eslint": "^1.0.9",
+        "conventional-changelog-express": "^0.3.6",
+        "conventional-changelog-jquery": "^0.1.0",
+        "conventional-changelog-jscs": "^0.1.0",
+        "conventional-changelog-jshint": "^0.3.8",
+        "conventional-changelog-preset-loader": "^1.1.8"
+      }
+    },
+    "conventional-changelog-angular": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz",
+      "integrity": "sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==",
+      "requires": {
+        "compare-func": "^1.3.1",
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-atom": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-atom/-/conventional-changelog-atom-0.2.8.tgz",
+      "integrity": "sha512-8pPZqhMbrnltNBizjoDCb/Sz85KyUXNDQxuAEYAU5V/eHn0okMBVjqc8aHWYpHrytyZWvMGbayOlDv7i8kEf6g==",
+      "requires": {
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-cli": {
+      "version": "1.3.22",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-cli/-/conventional-changelog-cli-1.3.22.tgz",
+      "integrity": "sha512-pnjdIJbxjkZ5VdAX/H1wndr1G10CY8MuZgnXuJhIHglOXfIrXygb7KZC836GW9uo1u8PjEIvIw/bKX0lOmOzZg==",
+      "requires": {
+        "add-stream": "^1.0.0",
+        "conventional-changelog": "^1.1.24",
+        "lodash": "^4.2.1",
+        "meow": "^4.0.0",
+        "tempfile": "^1.1.1"
+      }
+    },
+    "conventional-changelog-codemirror": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.8.tgz",
+      "integrity": "sha512-3HFZKtBXTaUCHvz7ai6nk2+psRIkldDoNzCsom0egDtVmPsvvHZkzjynhdQyULfacRSsBTaiQ0ol6nBOL4dDiQ==",
+      "requires": {
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-core": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-2.0.11.tgz",
+      "integrity": "sha512-HvTE6RlqeEZ/NFPtQeFLsIDOLrGP3bXYr7lFLMhCVsbduF1MXIe8OODkwMFyo1i9ku9NWBwVnVn0jDmIFXjDRg==",
+      "requires": {
+        "conventional-changelog-writer": "^3.0.9",
+        "conventional-commits-parser": "^2.1.7",
+        "dateformat": "^3.0.0",
+        "get-pkg-repo": "^1.0.0",
+        "git-raw-commits": "^1.3.6",
+        "git-remote-origin-url": "^2.0.0",
+        "git-semver-tags": "^1.3.6",
+        "lodash": "^4.2.1",
+        "normalize-package-data": "^2.3.5",
+        "q": "^1.5.1",
+        "read-pkg": "^1.1.0",
+        "read-pkg-up": "^1.0.1",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "dateformat": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
+          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        }
+      }
+    },
+    "conventional-changelog-ember": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-ember/-/conventional-changelog-ember-0.3.12.tgz",
+      "integrity": "sha512-mmJzA7uzbrOqeF89dMMi6z17O07ORTXlTMArnLG9ZTX4oLaKNolUlxFUFlFm9JUoVWajVpaHQWjxH1EOQ+ARoQ==",
+      "requires": {
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-eslint": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.9.tgz",
+      "integrity": "sha512-h87nfVh2fdk9fJIvz26wCBsbDC/KxqCc5wSlNMZbXcARtbgNbNDIF7Y7ctokFdnxkzVdaHsbINkh548T9eBA7Q==",
+      "requires": {
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-express": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-express/-/conventional-changelog-express-0.3.6.tgz",
+      "integrity": "sha512-3iWVtBJZ9RnRnZveNDzOD8QRn6g6vUif0qVTWWyi5nUIAbuN1FfPVyKdAlJJfp5Im+dE8Kiy/d2SpaX/0X678Q==",
+      "requires": {
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-jquery": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz",
+      "integrity": "sha1-Agg5cWLjhGmG5xJztsecW1+A9RA=",
+      "requires": {
+        "q": "^1.4.1"
+      }
+    },
+    "conventional-changelog-jscs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz",
+      "integrity": "sha1-BHnrRDzH1yxYvwvPDvHURKkvDlw=",
+      "requires": {
+        "q": "^1.4.1"
+      }
+    },
+    "conventional-changelog-jshint": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.8.tgz",
+      "integrity": "sha512-hn9QU4ZI/5V50wKPJNPGT4gEWgiBFpV6adieILW4MaUFynuDYOvQ71EMSj3EznJyKi/KzuXpc9dGmX8njZMjig==",
+      "requires": {
+        "compare-func": "^1.3.1",
+        "q": "^1.5.1"
+      }
+    },
+    "conventional-changelog-preset-loader": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.8.tgz",
+      "integrity": "sha512-MkksM4G4YdrMlT2MbTsV2F6LXu/hZR0Tc/yenRrDIKRwBl/SP7ER4ZDlglqJsCzLJi4UonBc52Bkm5hzrOVCcw=="
+    },
+    "conventional-changelog-writer": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-3.0.9.tgz",
+      "integrity": "sha512-n9KbsxlJxRQsUnK6wIBRnARacvNnN4C/nxnxCkH+B/R1JS2Fa+DiP1dU4I59mEDEjgnFaN2+9wr1P1s7GYB5/Q==",
+      "requires": {
+        "compare-func": "^1.3.1",
+        "conventional-commits-filter": "^1.1.6",
+        "dateformat": "^3.0.0",
+        "handlebars": "^4.0.2",
+        "json-stringify-safe": "^5.0.1",
+        "lodash": "^4.2.1",
+        "meow": "^4.0.0",
+        "semver": "^5.5.0",
+        "split": "^1.0.0",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "dateformat": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
+          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
+        }
+      }
+    },
+    "conventional-commits-filter": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-1.1.6.tgz",
+      "integrity": "sha512-KcDgtCRKJCQhyk6VLT7zR+ZOyCnerfemE/CsR3iQpzRRFbLEs0Y6rwk3mpDvtOh04X223z+1xyJ582Stfct/0Q==",
+      "requires": {
+        "is-subset": "^0.1.1",
+        "modify-values": "^1.0.0"
+      }
+    },
+    "conventional-commits-parser": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz",
+      "integrity": "sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==",
+      "requires": {
+        "JSONStream": "^1.0.4",
+        "is-text-path": "^1.0.0",
+        "lodash": "^4.2.1",
+        "meow": "^4.0.0",
+        "split2": "^2.0.0",
+        "through2": "^2.0.0",
+        "trim-off-newlines": "^1.0.0"
+      }
+    },
+    "conventional-recommended-bump": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-1.2.1.tgz",
+      "integrity": "sha512-oJjG6DkRgtnr/t/VrPdzmf4XZv8c4xKVJrVT4zrSHd92KEL+EYxSbYoKq8lQ7U5yLMw7130wrcQTLRjM/T+d4w==",
+      "requires": {
+        "concat-stream": "^1.4.10",
+        "conventional-commits-filter": "^1.1.1",
+        "conventional-commits-parser": "^2.1.1",
+        "git-raw-commits": "^1.3.0",
+        "git-semver-tags": "^1.3.0",
+        "meow": "^3.3.0",
+        "object-assign": "^4.0.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        },
+        "camelcase-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+          "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+          "requires": {
+            "camelcase": "^2.0.0",
+            "map-obj": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        },
+        "indent-string": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+          "requires": {
+            "repeating": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+        },
+        "meow": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+          "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+          "requires": {
+            "camelcase-keys": "^2.0.0",
+            "decamelize": "^1.1.2",
+            "loud-rejection": "^1.0.0",
+            "map-obj": "^1.0.1",
+            "minimist": "^1.1.3",
+            "normalize-package-data": "^2.3.4",
+            "object-assign": "^4.0.1",
+            "read-pkg-up": "^1.0.1",
+            "redent": "^1.0.0",
+            "trim-newlines": "^1.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "redent": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+          "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+          "requires": {
+            "indent-string": "^2.1.0",
+            "strip-indent": "^1.0.1"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "strip-indent": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+          "requires": {
+            "get-stdin": "^4.0.1"
+          }
+        },
+        "trim-newlines": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+          "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+        }
+      }
+    },
+    "convert-source-map": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
+      "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "cookie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "requires": {
+        "aproba": "^1.1.1",
+        "fs-write-stream-atomic": "^1.0.8",
+        "iferr": "^0.1.5",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.0"
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+    },
+    "core-js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.0.1.tgz",
+      "integrity": "sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew=="
+    },
+    "core-js-compat": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.0.1.tgz",
+      "integrity": "sha512-2pC3e+Ht/1/gD7Sim/sqzvRplMiRnFQVlPpDVaHtY9l7zZP7knamr3VRD6NyGfHd84MrDC0tAM9ulNxYMW0T3g==",
+      "requires": {
+        "browserslist": "^4.5.4",
+        "core-js": "3.0.1",
+        "core-js-pure": "3.0.1",
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
+          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
+        }
+      }
+    },
+    "core-js-pure": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.0.1.tgz",
+      "integrity": "sha512-mSxeQ6IghKW3MoyF4cz19GJ1cMm7761ON+WObSyLfTu/Jn3x7w4NwNFnrZxgl4MTSvYYepVLNuRtlB4loMwJ5g=="
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "cosmiconfig": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.0.tgz",
+      "integrity": "sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==",
+      "requires": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.0",
+        "parse-json": "^4.0.0"
+      }
+    },
+    "crc": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
+      "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
+      "requires": {
+        "buffer": "^5.1.0"
+      }
+    },
+    "crc32-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-2.0.0.tgz",
+      "integrity": "sha1-483TtN8xaN10494/u8t7KX/pCPQ=",
+      "requires": {
+        "crc": "^3.4.4",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
+      "integrity": "sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.0.0"
+      }
+    },
+    "create-error-class": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
+      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
+      "requires": {
+        "capture-stack-trace": "^1.0.0"
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      },
+      "dependencies": {
+        "ripemd160": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+          "requires": {
+            "hash-base": "^3.0.0",
+            "inherits": "^2.0.1"
+          }
+        },
+        "sha.js": {
+          "version": "2.4.11",
+          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+          "requires": {
+            "inherits": "^2.0.1",
+            "safe-buffer": "^5.0.1"
+          }
+        }
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      },
+      "dependencies": {
+        "ripemd160": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+          "requires": {
+            "hash-base": "^3.0.0",
+            "inherits": "^2.0.1"
+          }
+        },
+        "sha.js": {
+          "version": "2.4.11",
+          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+          "requires": {
+            "inherits": "^2.0.1",
+            "safe-buffer": "^5.0.1"
+          }
+        }
+      }
+    },
+    "cross-env": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
+      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
+      "requires": {
+        "cross-spawn": "^6.0.5",
+        "is-windows": "^1.0.0"
+      }
+    },
+    "cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "requires": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
+    "cross-spawn-async": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz",
+      "integrity": "sha1-hF/wwINKPe2dFg2sptOQkGuyiMw=",
+      "requires": {
+        "lru-cache": "^4.0.0",
+        "which": "^1.2.8"
+      }
+    },
+    "crx": {
+      "version": "git+https://github.com/oncletom/crx.git#ef150e8abf1b2e093ce746584680876927c0fc21",
+      "from": "git+https://github.com/oncletom/crx.git#ef150e8",
+      "requires": {
+        "archiver": "^3.0.0",
+        "commander": "^2.19.0",
+        "node-rsa": "^1.0.3",
+        "pbf": "^3.1.0"
+      }
+    },
+    "crx-parser": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/crx-parser/-/crx-parser-0.1.2.tgz",
+      "integrity": "sha1-fu7tnt3JXiLBiTguNGJARKiaWm0="
+    },
+    "crypto-browserify": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.2.8.tgz",
+      "integrity": "sha1-ubEdvm2WUd2IKgHmzEZ99xjs8Yk=",
+      "requires": {
+        "pbkdf2-compat": "2.0.1",
+        "ripemd160": "0.2.0",
+        "sha.js": "2.2.6"
+      }
+    },
+    "crypto-random-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
+      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
+    },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
+    "css-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
+      "integrity": "sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==",
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "css-selector-tokenizer": "^0.7.0",
+        "icss-utils": "^2.1.0",
+        "loader-utils": "^1.0.2",
+        "lodash": "^4.17.11",
+        "postcss": "^6.0.23",
+        "postcss-modules-extract-imports": "^1.2.0",
+        "postcss-modules-local-by-default": "^1.2.0",
+        "postcss-modules-scope": "^1.1.0",
+        "postcss-modules-values": "^1.3.0",
+        "postcss-value-parser": "^3.3.0",
+        "source-list-map": "^2.0.0"
+      }
+    },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "requires": {
+        "boolbase": "~1.0.0",
+        "css-what": "2.1",
+        "domutils": "1.5.1",
+        "nth-check": "~1.0.1"
+      }
+    },
+    "css-selector-tokenizer": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
+      "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
+      "requires": {
+        "cssesc": "^0.1.0",
+        "fastparse": "^1.1.1",
+        "regexpu-core": "^1.0.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+        },
+        "regexpu-core": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
+          "requires": {
+            "regenerate": "^1.2.1",
+            "regjsgen": "^0.2.0",
+            "regjsparser": "^0.1.4"
+          }
+        },
+        "regjsgen": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
+        },
+        "regjsparser": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+          "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+          "requires": {
+            "jsesc": "~0.5.0"
+          }
+        }
+      }
+    },
+    "css-what": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
+    },
+    "cssesc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
+    },
+    "cssom": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.6.tgz",
+      "integrity": "sha512-DtUeseGk9/GBW0hl0vVPpU22iHL6YB5BUX7ml1hB+GMpo0NX5G4voX3kdWiMSEguFtcW3Vh3djqNF4aIe6ne0A=="
+    },
+    "cssstyle": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.2.2.tgz",
+      "integrity": "sha512-43wY3kl1CVQSvL7wUY1qXkxVGkStjpkDmVjiIKX8R97uhajy8Bybay78uOtqvh7Q5GK75dNPfW0geWjE6qQQow==",
+      "requires": {
+        "cssom": "0.3.x"
+      }
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
+    "cyclist": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
+      "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA="
+    },
+    "d": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
+      "integrity": "sha1-2hhMU10Y2O57oqoim5FACfrhEwk=",
+      "requires": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "damerau-levenshtein": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz",
+      "integrity": "sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA=="
+    },
+    "dargs": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz",
+      "integrity": "sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=",
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "data-urls": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
+      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
+      "requires": {
+        "abab": "^2.0.0",
+        "whatwg-mimetype": "^2.2.0",
+        "whatwg-url": "^7.0.0"
+      },
+      "dependencies": {
+        "whatwg-url": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
+          "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
+    "date-now": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
+      "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
+    },
+    "dateformat": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz",
+      "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI="
+    },
+    "debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
+      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
+    },
+    "debug": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "requires": {
+        "ms": "^2.1.1"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
+    "decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+      "requires": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+        }
+      }
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw="
+    },
+    "deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
+    },
+    "deepcopy": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/deepcopy/-/deepcopy-0.6.3.tgz",
+      "integrity": "sha1-Y0eA8vhlardxr4+oQx7RzO5Vx7A="
+    },
+    "deepmerge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.1.0.tgz",
+      "integrity": "sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg=="
+    },
+    "default-gateway": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
+      "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==",
+      "requires": {
+        "execa": "^1.0.0",
+        "ip-regex": "^2.1.0"
+      }
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "del": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
+      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
+      "requires": {
+        "@types/glob": "^7.1.1",
+        "globby": "^6.1.0",
+        "is-path-cwd": "^2.0.0",
+        "is-path-in-cwd": "^2.0.0",
+        "p-map": "^2.0.0",
+        "pify": "^4.0.1",
+        "rimraf": "^2.6.3"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "des.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
+      "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc="
+    },
+    "detect-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
+      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
+    "detect-newline": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
+      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I="
+    },
+    "detect-node": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
+      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
+    },
+    "diff-sequences": {
+      "version": "24.3.0",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.3.0.tgz",
+      "integrity": "sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw=="
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "dispensary": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/dispensary/-/dispensary-0.30.0.tgz",
+      "integrity": "sha512-ZZipc2xaDky03RD3s1UJOM6zgygo2ncEzmjuqpPR6pT7jMo0cxH/FTzGarD3Pw2naAsBOXVGG10Fwxth9OrW0g==",
+      "requires": {
+        "array-from": "~2.1.1",
+        "async": "~2.6.0",
+        "natural-compare-lite": "~1.4.0",
+        "pino": "~5.11.0",
+        "request": "~2.88.0",
+        "sha.js": "~2.4.4",
+        "source-map-support": "~0.5.4",
+        "yargs": "~12.0.1"
+      },
+      "dependencies": {
+        "sha.js": {
+          "version": "2.4.11",
+          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+          "requires": {
+            "inherits": "^2.0.1",
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.12",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
+          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        }
+      }
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
+    },
+    "dns-packet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
+      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "requires": {
+        "ip": "^1.1.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "dns-txt": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
+      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
+      "requires": {
+        "buffer-indexof": "^1.0.0"
+      }
+    },
+    "doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "dom-serializer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+      "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+      "requires": {
+        "domelementtype": "^1.3.0",
+        "entities": "^1.1.1"
+      }
+    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "domexception": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
+      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
+      "requires": {
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "requires": {
+        "domelementtype": "1"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "dot-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz",
+      "integrity": "sha1-G3CK8JSknJoOfbyteQq6U52sEXc=",
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
+    },
+    "dtrace-provider": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.7.tgz",
+      "integrity": "sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ=",
+      "optional": true,
+      "requires": {
+        "nan": "^2.10.0"
+      }
+    },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E="
+    },
+    "duplexer2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
+      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
+      "requires": {
+        "readable-stream": "~1.1.9"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "electron-to-chromium": {
+      "version": "1.3.133",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.133.tgz",
+      "integrity": "sha512-lyoC8aoqbbDqsprb6aPdt9n3DpOZZzdz/T4IZKsR0/dkZIxnJVUjjcpOSwA66jPRIOyDAamCTAUqweU05kKNSg=="
+    },
+    "elegant-spinner": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4="
+    },
+    "elliptic": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
+      "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==",
+      "requires": {
+        "bn.js": "^4.4.0",
+        "brorand": "^1.0.1",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.0"
+      }
+    },
+    "emoji-regex": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
+      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ=="
+    },
+    "emojis-list": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
+    "end-of-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
+      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
+      "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.4.0",
+        "tapable": "^1.0.0"
+      }
+    },
+    "entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+    },
+    "errno": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
+      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "error-stack-parser": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.2.tgz",
+      "integrity": "sha512-E1fPutRDdIj/hohG0UpT5mayXNCxXP9d+snxFsPU9X0XgccOumKraa3juDMwTUyi7+Bu5+mCGagjg4IYeNbOdw==",
+      "requires": {
+        "stackframe": "^1.0.4"
+      }
+    },
+    "es-abstract": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz",
+      "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==",
+      "requires": {
+        "es-to-primitive": "^1.2.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "is-callable": "^1.1.4",
+        "is-regex": "^1.0.4",
+        "object-keys": "^1.0.12"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
+      "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "es5-ext": {
+      "version": "0.10.50",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.50.tgz",
+      "integrity": "sha512-KMzZTPBkeQV/JcSQhI5/z6d9VWJ3EnQ194USTUwIYZ2ZbpN8+SGXQKt1h68EX44+qt+Fzr8DO17vnxrw7c3agw==",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.1",
+        "next-tick": "^1.0.0"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        },
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
+    "es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        },
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
+    "es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-set": "~0.1.5",
+        "es6-symbol": "~3.1.1",
+        "event-emitter": "~0.3.5"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        },
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
+    "es6-promise": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.3.0.tgz",
+      "integrity": "sha1-lu258v2wGZWCKyY92KratnSBgbw="
+    },
+    "es6-promisify": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+      "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
+      "requires": {
+        "es6-promise": "^4.0.3"
+      },
+      "dependencies": {
+        "es6-promise": {
+          "version": "4.2.6",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz",
+          "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q=="
+        }
+      }
+    },
+    "es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "~0.3.5"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        },
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
+    "es6-symbol": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.0.2.tgz",
+      "integrity": "sha1-HpKIeMb15jVBYltLtN9K8H0VQhk=",
+      "requires": {
+        "d": "~0.1.1",
+        "es5-ext": "~0.10.10"
+      }
+    },
+    "es6-weak-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
+      "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.14",
+        "es6-iterator": "^2.0.1",
+        "es6-symbol": "^3.1.1"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        },
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "escodegen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.1.tgz",
+      "integrity": "sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==",
+      "requires": {
+        "esprima": "^3.1.3",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "escope": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
+      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
+      "requires": {
+        "es6-map": "^0.1.3",
+        "es6-weak-map": "^2.0.1",
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
+      "integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==",
+      "requires": {
+        "ajv": "^5.3.0",
+        "babel-code-frame": "^6.22.0",
+        "chalk": "^2.1.0",
+        "concat-stream": "^1.6.0",
+        "cross-spawn": "^5.1.0",
+        "debug": "^3.1.0",
+        "doctrine": "^2.1.0",
+        "eslint-scope": "^3.7.1",
+        "eslint-visitor-keys": "^1.0.0",
+        "espree": "^3.5.4",
+        "esquery": "^1.0.0",
+        "esutils": "^2.0.2",
+        "file-entry-cache": "^2.0.0",
+        "functional-red-black-tree": "^1.0.1",
+        "glob": "^7.1.2",
+        "globals": "^11.0.1",
+        "ignore": "^3.3.3",
+        "imurmurhash": "^0.1.4",
+        "inquirer": "^3.0.6",
+        "is-resolvable": "^1.0.0",
+        "js-yaml": "^3.9.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.3.0",
+        "lodash": "^4.17.4",
+        "minimatch": "^3.0.2",
+        "mkdirp": "^0.5.1",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.8.2",
+        "path-is-inside": "^1.0.2",
+        "pluralize": "^7.0.0",
+        "progress": "^2.0.0",
+        "regexpp": "^1.0.1",
+        "require-uncached": "^1.0.3",
+        "semver": "^5.3.0",
+        "strip-ansi": "^4.0.0",
+        "strip-json-comments": "~2.0.1",
+        "table": "4.0.2",
+        "text-table": "~0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-2.10.0.tgz",
+      "integrity": "sha512-Mhl90VLucfBuhmcWBgbUNtgBiK955iCDK1+aHAz7QfDQF6wuzWZ6JjihZ3ejJoGlJWIuko7xLqNm8BA5uenKhA==",
+      "requires": {
+        "get-stdin": "^5.0.1"
+      }
+    },
+    "eslint-config-react-app": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz",
+      "integrity": "sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ=="
+    },
+    "eslint-config-standard": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz",
+      "integrity": "sha512-oDdENzpViEe5fwuRCWla7AXQd++/oyIp8zP+iP9jiUPG6NBj3SHgdgtl/kTn00AjeN+1HNvavTKmYbMo+xMOlw=="
+    },
+    "eslint-config-standard-jsx": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-5.0.0.tgz",
+      "integrity": "sha512-rLToPAEqLMPBfWnYTu6xRhm2OWziS2n40QFqJ8jAM8NSVzeVKTa3nclhsU4DpPJQRY60F34Oo1wi/71PN/eITg=="
+    },
+    "eslint-config-standard-react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard-react/-/eslint-config-standard-react-6.0.0.tgz",
+      "integrity": "sha512-YWlqfvREbH1r6SaRTgFOq+VE3f8/ZQypkfnpDpSmZjztEjxnzznm4xeE2/mDQRx77Okhd/pKHXNZLMsSneJH8A==",
+      "requires": {
+        "eslint-config-standard-jsx": "^5.0.0"
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
+      "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
+      "requires": {
+        "debug": "^2.6.9",
+        "resolve": "^1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz",
+      "integrity": "sha512-14tltLm38Eu3zS+mt0KvILC3q8jyIAH518MlG+HO0p+yK885Lb1UHTY/UgR91eOyGdmxAPb+OLoW4znqIT6Ndw==",
+      "requires": {
+        "debug": "^2.6.8",
+        "pkg-dir": "^2.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+        },
+        "pkg-dir": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
+          "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
+          "requires": {
+            "find-up": "^2.1.0"
+          }
+        }
+      }
+    },
+    "eslint-plugin-flowtype": {
+      "version": "2.50.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz",
+      "integrity": "sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==",
+      "requires": {
+        "lodash": "^4.17.10"
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.17.2.tgz",
+      "integrity": "sha512-m+cSVxM7oLsIpmwNn2WXTJoReOF9f/CtLMo7qOVmKd1KntBy0hEcuNZ3erTmWjx+DxRO0Zcrm5KwAvI9wHcV5g==",
+      "requires": {
+        "array-includes": "^3.0.3",
+        "contains-path": "^0.1.0",
+        "debug": "^2.6.9",
+        "doctrine": "1.5.0",
+        "eslint-import-resolver-node": "^0.3.2",
+        "eslint-module-utils": "^2.4.0",
+        "has": "^1.0.3",
+        "lodash": "^4.17.11",
+        "minimatch": "^3.0.4",
+        "read-pkg-up": "^2.0.0",
+        "resolve": "^1.10.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+          "requires": {
+            "esutils": "^2.0.2",
+            "isarray": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "strip-bom": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
+          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "requires": {
+            "pify": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
+          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+          "requires": {
+            "load-json-file": "^2.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^2.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
+          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "requires": {
+            "find-up": "^2.0.0",
+            "read-pkg": "^2.0.0"
+          }
+        }
+      }
+    },
+    "eslint-plugin-jsx-a11y": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz",
+      "integrity": "sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==",
+      "requires": {
+        "aria-query": "^0.7.0",
+        "array-includes": "^3.0.3",
+        "ast-types-flow": "0.0.7",
+        "axobject-query": "^0.1.0",
+        "damerau-levenshtein": "^1.0.0",
+        "emoji-regex": "^6.1.0",
+        "jsx-ast-utils": "^1.4.0"
+      }
+    },
+    "eslint-plugin-no-unsafe-innerhtml": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz",
+      "integrity": "sha1-fQKHjI6b95FriINtWsEitC8VGTI=",
+      "requires": {
+        "eslint": "^3.7.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "4.11.8",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+          "requires": {
+            "co": "^4.6.0",
+            "json-stable-stringify": "^1.0.1"
+          }
+        },
+        "ajv-keywords": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
+          "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw="
+        },
+        "ansi-escapes": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+          "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cli-cursor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
+          "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
+          "requires": {
+            "restore-cursor": "^1.0.1"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "eslint": {
+          "version": "3.19.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-3.19.0.tgz",
+          "integrity": "sha1-yPxiAcf0DdCJQbh8CFdnOGpnmsw=",
+          "requires": {
+            "babel-code-frame": "^6.16.0",
+            "chalk": "^1.1.3",
+            "concat-stream": "^1.5.2",
+            "debug": "^2.1.1",
+            "doctrine": "^2.0.0",
+            "escope": "^3.6.0",
+            "espree": "^3.4.0",
+            "esquery": "^1.0.0",
+            "estraverse": "^4.2.0",
+            "esutils": "^2.0.2",
+            "file-entry-cache": "^2.0.0",
+            "glob": "^7.0.3",
+            "globals": "^9.14.0",
+            "ignore": "^3.2.0",
+            "imurmurhash": "^0.1.4",
+            "inquirer": "^0.12.0",
+            "is-my-json-valid": "^2.10.0",
+            "is-resolvable": "^1.0.0",
+            "js-yaml": "^3.5.1",
+            "json-stable-stringify": "^1.0.0",
+            "levn": "^0.3.0",
+            "lodash": "^4.0.0",
+            "mkdirp": "^0.5.0",
+            "natural-compare": "^1.4.0",
+            "optionator": "^0.8.2",
+            "path-is-inside": "^1.0.1",
+            "pluralize": "^1.2.1",
+            "progress": "^1.1.8",
+            "require-uncached": "^1.0.2",
+            "shelljs": "^0.7.5",
+            "strip-bom": "^3.0.0",
+            "strip-json-comments": "~2.0.1",
+            "table": "^3.7.8",
+            "text-table": "~0.2.0",
+            "user-home": "^2.0.0"
+          }
+        },
+        "figures": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+          "requires": {
+            "escape-string-regexp": "^1.0.5",
+            "object-assign": "^4.1.0"
+          }
+        },
+        "globals": {
+          "version": "9.18.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+        },
+        "inquirer": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
+          "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
+          "requires": {
+            "ansi-escapes": "^1.1.0",
+            "ansi-regex": "^2.0.0",
+            "chalk": "^1.0.0",
+            "cli-cursor": "^1.0.1",
+            "cli-width": "^2.0.0",
+            "figures": "^1.3.5",
+            "lodash": "^4.3.0",
+            "readline2": "^1.0.1",
+            "run-async": "^0.1.0",
+            "rx-lite": "^3.1.2",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.0",
+            "through": "^2.3.6"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "onetime": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
+        },
+        "pluralize": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-1.2.1.tgz",
+          "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU="
+        },
+        "progress": {
+          "version": "1.1.8",
+          "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
+          "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74="
+        },
+        "restore-cursor": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
+          "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
+          "requires": {
+            "exit-hook": "^1.0.0",
+            "onetime": "^1.0.0"
+          }
+        },
+        "run-async": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
+          "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=",
+          "requires": {
+            "once": "^1.3.0"
+          }
+        },
+        "rx-lite": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
+          "integrity": "sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI="
+        },
+        "slice-ansi": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+          "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU="
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        },
+        "table": {
+          "version": "3.8.3",
+          "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
+          "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=",
+          "requires": {
+            "ajv": "^4.7.0",
+            "ajv-keywords": "^1.0.0",
+            "chalk": "^1.1.1",
+            "lodash": "^4.0.0",
+            "slice-ansi": "0.0.4",
+            "string-width": "^2.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+            },
+            "is-fullwidth-code-point": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+            },
+            "string-width": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+              "requires": {
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^4.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        }
+      }
+    },
+    "eslint-plugin-node": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz",
+      "integrity": "sha512-Q/Cc2sW1OAISDS+Ji6lZS2KV4b7ueA/WydVWd1BECTQwVvfQy5JAi3glhINoKzoMnfnuRgNP+ZWKrGAbp3QDxw==",
+      "requires": {
+        "ignore": "^3.3.6",
+        "minimatch": "^3.0.4",
+        "resolve": "^1.3.3",
+        "semver": "^5.4.1"
+      }
+    },
+    "eslint-plugin-prettier": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz",
+      "integrity": "sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==",
+      "requires": {
+        "fast-diff": "^1.1.1",
+        "jest-docblock": "^21.0.0"
+      }
+    },
+    "eslint-plugin-promise": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz",
+      "integrity": "sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ=="
+    },
+    "eslint-plugin-react": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.13.0.tgz",
+      "integrity": "sha512-uA5LrHylu8lW/eAH3bEQe9YdzpPaFd9yAJTwTi/i/BKTD7j6aQMKVAdGM/ML72zD6womuSK7EiGtMKuK06lWjQ==",
+      "requires": {
+        "array-includes": "^3.0.3",
+        "doctrine": "^2.1.0",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^2.1.0",
+        "object.fromentries": "^2.0.0",
+        "prop-types": "^15.7.2",
+        "resolve": "^1.10.1"
+      },
+      "dependencies": {
+        "jsx-ast-utils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz",
+          "integrity": "sha512-yDGDG2DS4JcqhA6blsuYbtsT09xL8AoLuUR2Gb5exrw7UEM19sBcOTq+YBBhrNbl0PUC4R4LnFu+dHg2HKeVvA==",
+          "requires": {
+            "array-includes": "^3.0.3"
+          }
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz",
+      "integrity": "sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag=="
+    },
+    "eslint-plugin-standard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-3.1.0.tgz",
+      "integrity": "sha512-fVcdyuKRr0EZ4fjWl3c+gp1BANFJD1+RaWa2UPYfMZ6jCtp5RG00kSaXnK/dE5sYzt4kaWJ9qdxqUfc0d9kX0w=="
+    },
+    "eslint-scope": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
+      "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint-utils": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz",
+      "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q=="
+    },
+    "eslint-visitor-keys": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
+      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
+    },
+    "espree": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
+      "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
+      "requires": {
+        "acorn": "^5.5.0",
+        "acorn-jsx": "^3.0.0"
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "esquery": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
+      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
+      "requires": {
+        "estraverse": "^4.0.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
+      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
+      "requires": {
+        "estraverse": "^4.1.0"
+      }
+    },
+    "estraverse": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
+    },
+    "esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      },
+      "dependencies": {
+        "d": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+          "requires": {
+            "es5-ext": "^0.10.9"
+          }
+        }
+      }
+    },
+    "event-to-promise": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/event-to-promise/-/event-to-promise-0.8.0.tgz",
+      "integrity": "sha1-S4TxF3K28l93Uvx02XFTGsb1tiY="
+    },
+    "eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+    },
+    "events": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
+      "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA=="
+    },
+    "eventsource": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz",
+      "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==",
+      "requires": {
+        "original": "^1.0.0"
+      }
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "exec-sh": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.2.tgz",
+      "integrity": "sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg=="
+    },
+    "execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "requires": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      }
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
+    },
+    "exit-hook": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
+      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g="
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "requires": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
+    "expect": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-24.8.0.tgz",
+      "integrity": "sha512-/zYvP8iMDrzaaxHVa724eJBCKqSHmO0FA7EDkBiRHxg6OipmMn1fN+C8T9L9K8yr7UONkOifu6+LLH+z76CnaA==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "ansi-styles": "^3.2.0",
+        "jest-get-type": "^24.8.0",
+        "jest-matcher-utils": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-regex-util": "^24.3.0"
+      }
+    },
+    "express": {
+      "version": "4.16.4",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
+      "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
+      "requires": {
+        "accepts": "~1.3.5",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.18.3",
+        "content-disposition": "0.5.2",
+        "content-type": "~1.0.4",
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.1.1",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.4",
+        "qs": "6.5.2",
+        "range-parser": "~1.2.0",
+        "safe-buffer": "5.1.2",
+        "send": "0.16.2",
+        "serve-static": "1.13.2",
+        "setprototypeof": "1.1.0",
+        "statuses": "~1.4.0",
+        "type-is": "~1.6.16",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "requires": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "external-editor": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
+      "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
+      "requires": {
+        "chardet": "^0.4.0",
+        "iconv-lite": "^0.4.17",
+        "tmp": "^0.0.33"
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "requires": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
+    "fancy-log": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
+      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
+      "requires": {
+        "ansi-gray": "^0.1.1",
+        "color-support": "^1.1.3",
+        "parse-node-version": "^1.0.0",
+        "time-stamp": "^1.0.0"
+      }
+    },
+    "fast-deep-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+    },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
+    },
+    "fast-json-patch": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-2.1.0.tgz",
+      "integrity": "sha512-PipOsAKamRw7+CXtKiieehyjUeDVPJ5J7b2kdJYerEf6TSUQoD2ijpVyZ88KQm5YXziff4h762bz3+vzf56khg==",
+      "requires": {
+        "deep-equal": "^1.0.1"
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+    },
+    "fast-redact": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-1.5.0.tgz",
+      "integrity": "sha512-Afo61CgUjkzdvOKDHn08qnZ0kwck38AOGcMlvSGzvJbIab6soAP5rdoQayecGCDsD69AiF9vJBXyq31eoEO2tQ=="
+    },
+    "fast-safe-stringify": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.6.tgz",
+      "integrity": "sha512-q8BZ89jjc+mz08rSxROs8VsrBBcn1SIw1kq9NjolL509tkABRk9io01RAjSaEv1Xb2uFLt8VtRiZbGp5H8iDtg=="
+    },
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
+    },
+    "faye-websocket": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+      "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "fb-watchman": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
+      "integrity": "sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=",
+      "requires": {
+        "bser": "^2.0.0"
+      }
+    },
+    "fbjs": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.5.1.tgz",
+      "integrity": "sha1-2xf+YJd3oXoltsiwRTA62tMzkgM=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "promise": "^7.0.3",
+        "ua-parser-js": "^0.7.9",
+        "whatwg-fetch": "^0.9.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
+    "fbjs-scripts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz",
+      "integrity": "sha1-naZ87G1i/dyUsJlWP2xIp0mQCu8=",
+      "requires": {
+        "babel-core": "^6.7.2",
+        "babel-preset-fbjs": "^1.0.0",
+        "core-js": "^1.0.0",
+        "cross-spawn": "^2.1.5",
+        "gulp-util": "^3.0.4",
+        "object-assign": "^4.0.1",
+        "semver": "^5.1.0",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "cross-spawn": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-2.2.3.tgz",
+          "integrity": "sha1-+sViAt/T0N2GF3jy2iA79DS7ghw=",
+          "requires": {
+            "cross-spawn-async": "^2.2.2",
+            "spawn-sync": "^1.0.15"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "slash": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+        }
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "figgy-pudding": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
+      "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w=="
+    },
+    "figures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "file-entry-cache": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
+      "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
+      "requires": {
+        "flat-cache": "^1.2.1",
+        "object-assign": "^4.0.1"
+      }
+    },
+    "filename-reserved-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
+      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q="
+    },
+    "filenamify": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
+      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
+      "requires": {
+        "filename-reserved-regex": "^1.0.0",
+        "strip-outer": "^1.0.0",
+        "trim-repeated": "^1.0.0"
+      }
+    },
+    "filenamify-url": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
+      "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
+      "requires": {
+        "filenamify": "^1.0.0",
+        "humanize-url": "^1.0.0"
+      }
+    },
+    "fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.4.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      }
+    },
+    "find-parent-dir": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
+      "integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ="
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "findup-sync": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
+      "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+      "requires": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^3.1.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      }
+    },
+    "firefox-profile": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-1.2.0.tgz",
+      "integrity": "sha512-TTEFfPOkyaz4EWx/5ZDQC1mJAe3a+JgVcchpIfD4Tvx1UspwlTJRJxOYA35x/z2iJcxaF6aW2rdh6oj6qwgd2g==",
+      "requires": {
+        "adm-zip": "~0.4.x",
+        "archiver": "~2.1.0",
+        "async": "~2.5.0",
+        "fs-extra": "~4.0.2",
+        "ini": "~1.3.3",
+        "jetpack-id": "1.0.0",
+        "lazystream": "~1.0.0",
+        "lodash": "~4.17.2",
+        "minimist": "^1.1.1",
+        "uuid": "^3.0.0",
+        "xml2js": "~0.4.4"
+      },
+      "dependencies": {
+        "archiver": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/archiver/-/archiver-2.1.1.tgz",
+          "integrity": "sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=",
+          "requires": {
+            "archiver-utils": "^1.3.0",
+            "async": "^2.0.0",
+            "buffer-crc32": "^0.2.1",
+            "glob": "^7.0.0",
+            "lodash": "^4.8.0",
+            "readable-stream": "^2.0.0",
+            "tar-stream": "^1.5.0",
+            "zip-stream": "^1.2.0"
+          }
+        },
+        "archiver-utils": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-1.3.0.tgz",
+          "integrity": "sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=",
+          "requires": {
+            "glob": "^7.0.0",
+            "graceful-fs": "^4.1.0",
+            "lazystream": "^1.0.0",
+            "lodash": "^4.8.0",
+            "normalize-path": "^2.0.0",
+            "readable-stream": "^2.0.0"
+          }
+        },
+        "async": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz",
+          "integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==",
+          "requires": {
+            "lodash": "^4.14.0"
+          }
+        },
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "zip-stream": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-1.2.0.tgz",
+          "integrity": "sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=",
+          "requires": {
+            "archiver-utils": "^1.3.0",
+            "compress-commons": "^1.2.0",
+            "lodash": "^4.8.0",
+            "readable-stream": "^2.0.0"
+          }
+        }
+      }
+    },
+    "first-chunk-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz",
+      "integrity": "sha1-G97NuOCDwGZLkZRVgVd6Q6nzHXA=",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "first-match": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/first-match/-/first-match-0.0.1.tgz",
+      "integrity": "sha1-pg7GQnAPD0NyNOu37D84JHblQv0="
+    },
+    "flat-cache": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
+      "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
+      "requires": {
+        "circular-json": "^0.3.1",
+        "graceful-fs": "^4.1.2",
+        "rimraf": "~2.6.2",
+        "write": "^0.2.1"
+      }
+    },
+    "flatstr": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/flatstr/-/flatstr-1.0.11.tgz",
+      "integrity": "sha512-CrkRmL8HgArqohPW5udNdtVae+fj5tvJdHwoo91m5OvaLk1a4lqa0R4/aPUO2zbVEnIrk+i5uTVNbSxaR1dQkQ=="
+    },
+    "flow-bin": {
+      "version": "0.97.0",
+      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.97.0.tgz",
+      "integrity": "sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w=="
+    },
+    "fluent-syntax": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/fluent-syntax/-/fluent-syntax-0.10.0.tgz",
+      "integrity": "sha512-6qRhwQXDTgJjS9DW3IiXZWzUMUPqNPzqh+bZZyUOr6t8xYwkIe+5JONYZuvfvbOUk65paAno0kd8s8kUD2ptNA=="
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
+      "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
+      "requires": {
+        "debug": "^3.2.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
+    "fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^3.0.0",
+        "universalify": "^0.1.0"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
+          "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        }
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fsevents": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
+      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
+      "optional": true,
+      "requires": {
+        "nan": "^2.12.1",
+        "node-pre-gyp": "^0.12.0"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "delegates": "^1.0.0",
+            "readable-stream": "^2.0.6"
+          }
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "chownr": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true,
+          "optional": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true,
+          "optional": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "debug": {
+          "version": "4.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "deep-extend": {
+          "version": "0.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.3",
+          "bundled": true,
+          "optional": true
+        },
+        "fs-minipass": {
+          "version": "1.2.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "aproba": "^1.0.3",
+            "console-control-strings": "^1.0.0",
+            "has-unicode": "^2.0.0",
+            "object-assign": "^4.1.0",
+            "signal-exit": "^3.0.0",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wide-align": "^1.1.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.3",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
+        "ignore-walk": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "minimatch": "^3.0.4"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true,
+          "optional": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true,
+          "optional": true
+        },
+        "minipass": {
+          "version": "2.3.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.0"
+          }
+        },
+        "minizlib": {
+          "version": "1.2.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "needle": {
+          "version": "2.3.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "debug": "^4.1.0",
+            "iconv-lite": "^0.4.4",
+            "sax": "^1.2.4"
+          }
+        },
+        "node-pre-gyp": {
+          "version": "0.12.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "^1.0.2",
+            "mkdirp": "^0.5.1",
+            "needle": "^2.2.1",
+            "nopt": "^4.0.1",
+            "npm-packlist": "^1.1.6",
+            "npmlog": "^4.0.2",
+            "rc": "^1.2.7",
+            "rimraf": "^2.6.1",
+            "semver": "^5.3.0",
+            "tar": "^4"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1",
+            "osenv": "^0.1.4"
+          }
+        },
+        "npm-bundled": {
+          "version": "1.0.6",
+          "bundled": true,
+          "optional": true
+        },
+        "npm-packlist": {
+          "version": "1.4.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ignore-walk": "^3.0.1",
+            "npm-bundled": "^1.0.1"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "~1.1.2",
+            "console-control-strings": "~1.1.0",
+            "gauge": "~2.7.3",
+            "set-blocking": "~2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "^1.0.0",
+            "os-tmpdir": "^1.0.0"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "^0.6.0",
+            "ini": "~1.3.0",
+            "minimist": "^1.2.0",
+            "strip-json-comments": "~2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.3",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "bundled": true,
+          "optional": true
+        },
+        "safer-buffer": {
+          "version": "2.1.2",
+          "bundled": true,
+          "optional": true
+        },
+        "sax": {
+          "version": "1.2.4",
+          "bundled": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.7.0",
+          "bundled": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "4.4.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "chownr": "^1.1.1",
+            "fs-minipass": "^1.2.5",
+            "minipass": "^2.3.4",
+            "minizlib": "^1.1.1",
+            "mkdirp": "^0.5.0",
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.2"
+          }
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "wide-align": {
+          "version": "1.1.3",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "string-width": "^1.0.2 || 2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "yallist": {
+          "version": "3.0.3",
+          "bundled": true,
+          "optional": true
+        }
+      }
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
+    },
+    "fx-runner": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fx-runner/-/fx-runner-1.0.10.tgz",
+      "integrity": "sha512-tXj0lMnSey89Dx7R3Lq+HMUy3ODmOmj5lhRYBgMWNOqbh7Vx8vPUiWMbyJ3HIzGuLnNeXAPH0x/GdFZ7h6h0vQ==",
+      "requires": {
+        "commander": "2.9.0",
+        "lodash": "4.17.11",
+        "shell-quote": "1.6.1",
+        "spawn-sync": "1.0.15",
+        "when": "3.7.7",
+        "which": "1.2.4",
+        "winreg": "0.0.12"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+          "requires": {
+            "graceful-readlink": ">= 1.0.0"
+          }
+        },
+        "isexe": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/isexe/-/isexe-1.1.2.tgz",
+          "integrity": "sha1-NvPiLmB1CSD15yQaR2qMakInWtA="
+        },
+        "which": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.2.4.tgz",
+          "integrity": "sha1-FVf5YIBgTlsRs1meufRbUKnv1yI=",
+          "requires": {
+            "is-absolute": "^0.1.7",
+            "isexe": "^1.1.1"
+          }
+        }
+      }
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
+    "generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "requires": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "requires": {
+        "is-property": "^1.0.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
+      "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg=="
+    },
+    "get-pkg-repo": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
+      "integrity": "sha1-xztInAbYDMVTbCyFP54FIyBWly0=",
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "meow": "^3.3.0",
+        "normalize-package-data": "^2.3.0",
+        "parse-github-repo-url": "^1.3.0",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        },
+        "camelcase-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+          "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+          "requires": {
+            "camelcase": "^2.0.0",
+            "map-obj": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        },
+        "indent-string": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+          "requires": {
+            "repeating": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+        },
+        "meow": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+          "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+          "requires": {
+            "camelcase-keys": "^2.0.0",
+            "decamelize": "^1.1.2",
+            "loud-rejection": "^1.0.0",
+            "map-obj": "^1.0.1",
+            "minimist": "^1.1.3",
+            "normalize-package-data": "^2.3.4",
+            "object-assign": "^4.0.1",
+            "read-pkg-up": "^1.0.1",
+            "redent": "^1.0.0",
+            "trim-newlines": "^1.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "redent": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+          "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+          "requires": {
+            "indent-string": "^2.1.0",
+            "strip-indent": "^1.0.1"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "strip-indent": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+          "requires": {
+            "get-stdin": "^4.0.1"
+          }
+        },
+        "trim-newlines": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+          "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+        }
+      }
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+    },
+    "get-stdin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+      "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g="
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "gettext-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.1.0.tgz",
+      "integrity": "sha1-LFpmONiTk0ubVQN9CtgstwBLJnk=",
+      "requires": {
+        "encoding": "^0.1.11"
+      }
+    },
+    "gh-pages": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.2.0.tgz",
+      "integrity": "sha512-cGLYAvxtlQ1iTwAS4g7FreZPXoE/g62Fsxln2mmR19mgs4zZI+XJ+wVVUhBFCF/0+Nmvbq+abyTWue1m1BSnmg==",
+      "requires": {
+        "async": "2.6.1",
+        "commander": "2.15.1",
+        "filenamify-url": "^1.0.0",
+        "fs-extra": "^5.0.0",
+        "globby": "^6.1.0",
+        "graceful-fs": "4.1.11",
+        "rimraf": "^2.6.2"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
+          "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
+          "requires": {
+            "lodash": "^4.17.10"
+          }
+        },
+        "commander": {
+          "version": "2.15.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
+        },
+        "fs-extra": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
+          "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+        }
+      }
+    },
+    "git-raw-commits": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz",
+      "integrity": "sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==",
+      "requires": {
+        "dargs": "^4.0.1",
+        "lodash.template": "^4.0.2",
+        "meow": "^4.0.0",
+        "split2": "^2.0.0",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "lodash.template": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
+          "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
+          "requires": {
+            "lodash._reinterpolate": "~3.0.0",
+            "lodash.templatesettings": "^4.0.0"
+          }
+        },
+        "lodash.templatesettings": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
+          "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
+          "requires": {
+            "lodash._reinterpolate": "~3.0.0"
+          }
+        }
+      }
+    },
+    "git-remote-origin-url": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
+      "integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=",
+      "requires": {
+        "gitconfiglocal": "^1.0.0",
+        "pify": "^2.3.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "git-rev-sync": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-1.9.1.tgz",
+      "integrity": "sha1-oMLj3TkqvPa3aWLif8dfsyI0Sc4=",
+      "requires": {
+        "escape-string-regexp": "1.0.5",
+        "graceful-fs": "4.1.11",
+        "shelljs": "0.7.7"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+        },
+        "shelljs": {
+          "version": "0.7.7",
+          "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.7.tgz",
+          "integrity": "sha1-svXHfvlxSPS09uImguELuoZnz/E=",
+          "requires": {
+            "glob": "^7.0.0",
+            "interpret": "^1.0.0",
+            "rechoir": "^0.6.2"
+          }
+        }
+      }
+    },
+    "git-semver-tags": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-1.3.6.tgz",
+      "integrity": "sha512-2jHlJnln4D/ECk9FxGEBh3k44wgYdWjWDtMmJPaecjoRmxKo3Y1Lh8GMYuOPu04CHw86NTAODchYjC5pnpMQig==",
+      "requires": {
+        "meow": "^4.0.0",
+        "semver": "^5.5.0"
+      }
+    },
+    "gitconfiglocal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
+      "integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=",
+      "requires": {
+        "ini": "^1.3.2"
+      }
+    },
+    "glob": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+      "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "requires": {
+        "is-glob": "^3.1.0",
+        "path-dirname": "^1.0.0"
+      }
+    },
+    "global-dirs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
+      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "requires": {
+        "ini": "^1.3.4"
+      }
+    },
+    "global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "requires": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+    },
+    "globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+      "requires": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "glogg": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz",
+      "integrity": "sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==",
+      "requires": {
+        "sparkles": "^1.0.0"
+      }
+    },
+    "got": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "requires": {
+        "create-error-class": "^3.0.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^3.0.0",
+        "is-redirect": "^1.0.0",
+        "is-retry-allowed": "^1.0.0",
+        "is-stream": "^1.0.0",
+        "lowercase-keys": "^1.0.0",
+        "safe-buffer": "^5.0.1",
+        "timed-out": "^4.0.0",
+        "unzip-response": "^2.0.1",
+        "url-parse-lax": "^1.0.0"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        }
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.15",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
+      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
+    },
+    "growly": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
+    },
+    "gulp-util": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
+      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
+      "requires": {
+        "array-differ": "^1.0.0",
+        "array-uniq": "^1.0.2",
+        "beeper": "^1.0.0",
+        "chalk": "^1.0.0",
+        "dateformat": "^2.0.0",
+        "fancy-log": "^1.1.0",
+        "gulplog": "^1.0.0",
+        "has-gulplog": "^0.1.0",
+        "lodash._reescape": "^3.0.0",
+        "lodash._reevaluate": "^3.0.0",
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.template": "^3.0.0",
+        "minimist": "^1.1.0",
+        "multipipe": "^0.1.2",
+        "object-assign": "^3.0.0",
+        "replace-ext": "0.0.1",
+        "through2": "^2.0.0",
+        "vinyl": "^0.5.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "gulplog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
+      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
+      "requires": {
+        "glogg": "^1.0.0"
+      }
+    },
+    "handle-thing": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
+      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
+    },
+    "handlebars": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
+      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "requires": {
+        "neo-async": "^2.6.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
+    },
+    "har-validator": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "requires": {
+        "ajv": "^6.5.5",
+        "har-schema": "^2.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.10.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
+          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "has-color": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
+      "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8="
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "has-gulplog": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
+      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
+      "requires": {
+        "sparkles": "^1.0.0"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "hash-base": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
+      "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "home-or-tmp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
+      "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.1"
+      }
+    },
+    "homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
+      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w=="
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "html-encoding-sniffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
+      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
+      "requires": {
+        "whatwg-encoding": "^1.0.1"
+      }
+    },
+    "html-entities": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
+      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
+    },
+    "html2canvas": {
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.1.tgz",
+      "integrity": "sha512-ImguLJ3goQnY0P6z7n6VqBZ+ViS77Hv6J7iYXBxvdb3NWz3s8/mqr4/Lj0OlMUb3ID+qCQ1BPLIBuRMqhgqvYg==",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
+    "htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "requires": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
+          "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "http-browserify": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
+      "integrity": "sha1-M3la3nLfiKz7/TZ3PO/tp2RzWyA=",
+      "requires": {
+        "Base64": "~0.2.0",
+        "inherits": "~2.0.1"
+      }
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc="
+    },
+    "http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
+      "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w=="
+    },
+    "http-proxy": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
+      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
+      "requires": {
+        "eventemitter3": "^3.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+      "requires": {
+        "http-proxy": "^1.17.0",
+        "is-glob": "^4.0.0",
+        "lodash": "^4.17.11",
+        "micromatch": "^3.1.10"
+      },
+      "dependencies": {
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        }
+      }
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "https-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz",
+      "integrity": "sha1-s//f5zSyo9Sp79WOhlTJH86G6v0="
+    },
+    "humanize-url": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
+      "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
+      "requires": {
+        "normalize-url": "^1.0.0",
+        "strip-url-auth": "^1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+    },
+    "icss-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
+      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "ieee754": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+    },
+    "ignore": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
+    },
+    "immutable": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+      "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
+    },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "caller-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+          "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+          "requires": {
+            "caller-callsite": "^2.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        }
+      }
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+    },
+    "import-local": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+      "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
+      "requires": {
+        "pkg-dir": "^3.0.0",
+        "resolve-cwd": "^2.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+    },
+    "indent-string": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+      "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok="
+    },
+    "indexof": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
+      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+    },
+    "inquirer": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz",
+      "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==",
+      "requires": {
+        "ansi-escapes": "^3.0.0",
+        "chalk": "^2.0.0",
+        "cli-cursor": "^2.1.0",
+        "cli-width": "^2.0.0",
+        "external-editor": "^2.0.4",
+        "figures": "^2.0.0",
+        "lodash": "^4.3.0",
+        "mute-stream": "0.0.7",
+        "run-async": "^2.2.0",
+        "rx-lite": "^4.0.8",
+        "rx-lite-aggregates": "^4.0.8",
+        "string-width": "^2.1.0",
+        "strip-ansi": "^4.0.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "internal-ip": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
+      "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
+      "requires": {
+        "default-gateway": "^4.2.0",
+        "ipaddr.js": "^1.9.0"
+      }
+    },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw=="
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "invert-kv": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
+    },
+    "ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
+    },
+    "ip-regex": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
+      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
+    },
+    "ipaddr.js": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
+      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
+    },
+    "is-absolute": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.1.7.tgz",
+      "integrity": "sha1-hHSREZ/MtftDYhfMc39/qtUPYD8=",
+      "requires": {
+        "is-relative": "^0.1.0"
+      }
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
+    "is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "requires": {
+        "binary-extensions": "^1.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "is-callable": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
+      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+    },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+    },
+    "is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ=="
+    },
+    "is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "requires": {
+        "is-extglob": "^2.1.0"
+      }
+    },
+    "is-installed-globally": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
+      "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=",
+      "requires": {
+        "global-dirs": "^0.1.0",
+        "is-path-inside": "^1.0.0"
+      }
+    },
+    "is-mergeable-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.0.tgz",
+      "integrity": "sha512-JfyDDwUdtS4yHCgUpxOyKB9dnfZ0gecufxB0eytX6BmSXSE+8dbxDGt+V7CNRIRJ9sYFV/WQt2KJG6hNob2sBw=="
+    },
+    "is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ=="
+    },
+    "is-my-json-valid": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.0.tgz",
+      "integrity": "sha512-XTHBZSIIxNsIsZXg7XB5l8z/OBFosl1Wao4tXLpeC7eKU4Vm/kdop2azkPqULwnfGQjmeDIyey9g7afMMtdWAA==",
+      "requires": {
+        "generate-function": "^2.0.0",
+        "generate-object-property": "^1.1.0",
+        "is-my-ip-valid": "^1.0.0",
+        "jsonpointer": "^4.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "is-npm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
+      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ="
+    },
+    "is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
+    "is-observable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
+      "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
+      "requires": {
+        "symbol-observable": "^1.1.0"
+      }
+    },
+    "is-path-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.1.0.tgz",
+      "integrity": "sha512-Sc5j3/YnM8tDeyCsVeKlm/0p95075DyLmDEIkSgQ7mXkrOX+uTCtmQFm0CYzVyJwcCCmO3k8qfJt17SxQwB5Zw=="
+    },
+    "is-path-in-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
+      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
+      "requires": {
+        "is-path-inside": "^2.1.0"
+      },
+      "dependencies": {
+        "is-path-inside": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
+          "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
+          "requires": {
+            "path-is-inside": "^1.0.2"
+          }
+        }
+      }
+    },
+    "is-path-inside": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
+      "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
+      "requires": {
+        "path-is-inside": "^1.0.1"
+      }
+    },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
+    },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+    },
+    "is-redirect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
+      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ="
+    },
+    "is-regex": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
+      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+      "requires": {
+        "has": "^1.0.1"
+      }
+    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
+    },
+    "is-relative": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.1.3.tgz",
+      "integrity": "sha1-kF/uiuhvRbPsYUvDwVyGnfCHboI="
+    },
+    "is-resolvable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
+    },
+    "is-retry-allowed": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
+      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY="
+    },
+    "is-symbol": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
+      "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
+      "requires": {
+        "has-symbols": "^1.0.0"
+      }
+    },
+    "is-text-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
+      "integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=",
+      "requires": {
+        "text-extensions": "^1.0.0"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "istanbul-lib-coverage": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
+      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA=="
+    },
+    "istanbul-lib-instrument": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
+      "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==",
+      "requires": {
+        "@babel/generator": "^7.4.0",
+        "@babel/parser": "^7.4.3",
+        "@babel/template": "^7.4.0",
+        "@babel/traverse": "^7.4.3",
+        "@babel/types": "^7.4.0",
+        "istanbul-lib-coverage": "^2.0.5",
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
+          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
+        }
+      }
+    },
+    "istanbul-lib-report": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
+      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
+      "requires": {
+        "istanbul-lib-coverage": "^2.0.5",
+        "make-dir": "^2.1.0",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "istanbul-lib-source-maps": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
+      "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
+      "requires": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^2.0.5",
+        "make-dir": "^2.1.0",
+        "rimraf": "^2.6.3",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "istanbul-reports": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.4.tgz",
+      "integrity": "sha512-QCHGyZEK0bfi9GR215QSm+NJwFKEShbtc7tfbUdLAEzn3kKhLDDZqvljn8rPZM9v8CEOhzL1nlYoO4r1ryl67w==",
+      "requires": {
+        "handlebars": "^4.1.2"
+      }
+    },
+    "jed": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
+      "integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
+    },
+    "jest": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-24.8.0.tgz",
+      "integrity": "sha512-o0HM90RKFRNWmAWvlyV8i5jGZ97pFwkeVoGvPW1EtLTgJc2+jcuqcbbqcSZLE/3f2S5pt0y2ZBETuhpWNl1Reg==",
+      "requires": {
+        "import-local": "^2.0.0",
+        "jest-cli": "^24.8.0"
+      },
+      "dependencies": {
+        "jest-cli": {
+          "version": "24.8.0",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.8.0.tgz",
+          "integrity": "sha512-+p6J00jSMPQ116ZLlHJJvdf8wbjNbZdeSX9ptfHX06/MSNaXmKihQzx5vQcw0q2G6JsdVkUIdWbOWtSnaYs3yA==",
+          "requires": {
+            "@jest/core": "^24.8.0",
+            "@jest/test-result": "^24.8.0",
+            "@jest/types": "^24.8.0",
+            "chalk": "^2.0.1",
+            "exit": "^0.1.2",
+            "import-local": "^2.0.0",
+            "is-ci": "^2.0.0",
+            "jest-config": "^24.8.0",
+            "jest-util": "^24.8.0",
+            "jest-validate": "^24.8.0",
+            "prompts": "^2.0.1",
+            "realpath-native": "^1.1.0",
+            "yargs": "^12.0.2"
+          }
+        }
+      }
+    },
+    "jest-changed-files": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-24.8.0.tgz",
+      "integrity": "sha512-qgANC1Yrivsq+UrLXsvJefBKVoCsKB0Hv+mBb6NMjjZ90wwxCDmU3hsCXBya30cH+LnPYjwgcU65i6yJ5Nfuug==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "execa": "^1.0.0",
+        "throat": "^4.0.0"
+      }
+    },
+    "jest-config": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-24.8.0.tgz",
+      "integrity": "sha512-Czl3Nn2uEzVGsOeaewGWoDPD8GStxCpAe0zOYs2x2l0fZAgPbCr3uwUkgNKV3LwE13VXythM946cd5rdGkkBZw==",
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/test-sequencer": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "babel-jest": "^24.8.0",
+        "chalk": "^2.0.1",
+        "glob": "^7.1.1",
+        "jest-environment-jsdom": "^24.8.0",
+        "jest-environment-node": "^24.8.0",
+        "jest-get-type": "^24.8.0",
+        "jest-jasmine2": "^24.8.0",
+        "jest-regex-util": "^24.3.0",
+        "jest-resolve": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jest-validate": "^24.8.0",
+        "micromatch": "^3.1.10",
+        "pretty-format": "^24.8.0",
+        "realpath-native": "^1.1.0"
+      }
+    },
+    "jest-diff": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.8.0.tgz",
+      "integrity": "sha512-wxetCEl49zUpJ/bvUmIFjd/o52J+yWcoc5ZyPq4/W1LUKGEhRYDIbP1KcF6t+PvqNrGAFk4/JhtxDq/Nnzs66g==",
+      "requires": {
+        "chalk": "^2.0.1",
+        "diff-sequences": "^24.3.0",
+        "jest-get-type": "^24.8.0",
+        "pretty-format": "^24.8.0"
+      }
+    },
+    "jest-docblock": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz",
+      "integrity": "sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw=="
+    },
+    "jest-each": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.8.0.tgz",
+      "integrity": "sha512-NrwK9gaL5+XgrgoCsd9svsoWdVkK4gnvyhcpzd6m487tXHqIdYeykgq3MKI1u4I+5Zf0tofr70at9dWJDeb+BA==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "chalk": "^2.0.1",
+        "jest-get-type": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "pretty-format": "^24.8.0"
+      }
+    },
+    "jest-environment-jsdom": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-24.8.0.tgz",
+      "integrity": "sha512-qbvgLmR7PpwjoFjM/sbuqHJt/NCkviuq9vus9NBn/76hhSidO+Z6Bn9tU8friecegbJL8gzZQEMZBQlFWDCwAQ==",
+      "requires": {
+        "@jest/environment": "^24.8.0",
+        "@jest/fake-timers": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "jest-mock": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jsdom": "^11.5.1"
+      }
+    },
+    "jest-environment-node": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-24.8.0.tgz",
+      "integrity": "sha512-vIGUEScd1cdDgR6sqn2M08sJTRLQp6Dk/eIkCeO4PFHxZMOgy+uYLPMC4ix3PEfM5Au/x3uQ/5Tl0DpXXZsJ/Q==",
+      "requires": {
+        "@jest/environment": "^24.8.0",
+        "@jest/fake-timers": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "jest-mock": "^24.8.0",
+        "jest-util": "^24.8.0"
+      }
+    },
+    "jest-get-type": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.8.0.tgz",
+      "integrity": "sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ=="
+    },
+    "jest-haste-map": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.8.0.tgz",
+      "integrity": "sha512-ZBPRGHdPt1rHajWelXdqygIDpJx8u3xOoLyUBWRW28r3tagrgoepPrzAozW7kW9HrQfhvmiv1tncsxqHJO1onQ==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "anymatch": "^2.0.0",
+        "fb-watchman": "^2.0.0",
+        "fsevents": "^1.2.7",
+        "graceful-fs": "^4.1.15",
+        "invariant": "^2.2.4",
+        "jest-serializer": "^24.4.0",
+        "jest-util": "^24.8.0",
+        "jest-worker": "^24.6.0",
+        "micromatch": "^3.1.10",
+        "sane": "^4.0.3",
+        "walker": "^1.0.7"
+      }
+    },
+    "jest-jasmine2": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-24.8.0.tgz",
+      "integrity": "sha512-cEky88npEE5LKd5jPpTdDCLvKkdyklnaRycBXL6GNmpxe41F0WN44+i7lpQKa/hcbXaQ+rc9RMaM4dsebrYong==",
+      "requires": {
+        "@babel/traverse": "^7.1.0",
+        "@jest/environment": "^24.8.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "chalk": "^2.0.1",
+        "co": "^4.6.0",
+        "expect": "^24.8.0",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^24.8.0",
+        "jest-matcher-utils": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-runtime": "^24.8.0",
+        "jest-snapshot": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "pretty-format": "^24.8.0",
+        "throat": "^4.0.0"
+      }
+    },
+    "jest-leak-detector": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.8.0.tgz",
+      "integrity": "sha512-cG0yRSK8A831LN8lIHxI3AblB40uhv0z+SsQdW3GoMMVcK+sJwrIIyax5tu3eHHNJ8Fu6IMDpnLda2jhn2pD/g==",
+      "requires": {
+        "pretty-format": "^24.8.0"
+      }
+    },
+    "jest-matcher-utils": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.8.0.tgz",
+      "integrity": "sha512-lex1yASY51FvUuHgm0GOVj7DCYEouWSlIYmCW7APSqB9v8mXmKSn5+sWVF0MhuASG0bnYY106/49JU1FZNl5hw==",
+      "requires": {
+        "chalk": "^2.0.1",
+        "jest-diff": "^24.8.0",
+        "jest-get-type": "^24.8.0",
+        "pretty-format": "^24.8.0"
+      }
+    },
+    "jest-message-util": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.8.0.tgz",
+      "integrity": "sha512-p2k71rf/b6ns8btdB0uVdljWo9h0ovpnEe05ZKWceQGfXYr4KkzgKo3PBi8wdnd9OtNh46VpNIJynUn/3MKm1g==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "@types/stack-utils": "^1.0.1",
+        "chalk": "^2.0.1",
+        "micromatch": "^3.1.10",
+        "slash": "^2.0.0",
+        "stack-utils": "^1.0.1"
+      }
+    },
+    "jest-mock": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-24.8.0.tgz",
+      "integrity": "sha512-6kWugwjGjJw+ZkK4mDa0Df3sDlUTsV47MSrT0nGQ0RBWJbpODDQ8MHDVtGtUYBne3IwZUhtB7elxHspU79WH3A==",
+      "requires": {
+        "@jest/types": "^24.8.0"
+      }
+    },
+    "jest-pnp-resolver": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz",
+      "integrity": "sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ=="
+    },
+    "jest-regex-util": {
+      "version": "24.3.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.3.0.tgz",
+      "integrity": "sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg=="
+    },
+    "jest-resolve": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-24.8.0.tgz",
+      "integrity": "sha512-+hjSzi1PoRvnuOICoYd5V/KpIQmkAsfjFO71458hQ2Whi/yf1GDeBOFj8Gxw4LrApHsVJvn5fmjcPdmoUHaVKw==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "browser-resolve": "^1.11.3",
+        "chalk": "^2.0.1",
+        "jest-pnp-resolver": "^1.2.1",
+        "realpath-native": "^1.1.0"
+      }
+    },
+    "jest-resolve-dependencies": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-24.8.0.tgz",
+      "integrity": "sha512-hyK1qfIf/krV+fSNyhyJeq3elVMhK9Eijlwy+j5jqmZ9QsxwKBiP6qukQxaHtK8k6zql/KYWwCTQ+fDGTIJauw==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "jest-regex-util": "^24.3.0",
+        "jest-snapshot": "^24.8.0"
+      }
+    },
+    "jest-runner": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-24.8.0.tgz",
+      "integrity": "sha512-utFqC5BaA3JmznbissSs95X1ZF+d+4WuOWwpM9+Ak356YtMhHE/GXUondZdcyAAOTBEsRGAgH/0TwLzfI9h7ow==",
+      "requires": {
+        "@jest/console": "^24.7.1",
+        "@jest/environment": "^24.8.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "chalk": "^2.4.2",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.1.15",
+        "jest-config": "^24.8.0",
+        "jest-docblock": "^24.3.0",
+        "jest-haste-map": "^24.8.0",
+        "jest-jasmine2": "^24.8.0",
+        "jest-leak-detector": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-resolve": "^24.8.0",
+        "jest-runtime": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jest-worker": "^24.6.0",
+        "source-map-support": "^0.5.6",
+        "throat": "^4.0.0"
+      },
+      "dependencies": {
+        "jest-docblock": {
+          "version": "24.3.0",
+          "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-24.3.0.tgz",
+          "integrity": "sha512-nlANmF9Yq1dufhFlKG9rasfQlrY7wINJbo3q01tu56Jv5eBU5jirylhF2O5ZBnLxzOVBGRDz/9NAwNyBtG4Nyg==",
+          "requires": {
+            "detect-newline": "^2.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.12",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
+          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        }
+      }
+    },
+    "jest-runtime": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-24.8.0.tgz",
+      "integrity": "sha512-Mq0aIXhvO/3bX44ccT+czU1/57IgOMyy80oM0XR/nyD5zgBcesF84BPabZi39pJVA6UXw+fY2Q1N+4BiVUBWOA==",
+      "requires": {
+        "@jest/console": "^24.7.1",
+        "@jest/environment": "^24.8.0",
+        "@jest/source-map": "^24.3.0",
+        "@jest/transform": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "@types/yargs": "^12.0.2",
+        "chalk": "^2.0.1",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.1.15",
+        "jest-config": "^24.8.0",
+        "jest-haste-map": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-mock": "^24.8.0",
+        "jest-regex-util": "^24.3.0",
+        "jest-resolve": "^24.8.0",
+        "jest-snapshot": "^24.8.0",
+        "jest-util": "^24.8.0",
+        "jest-validate": "^24.8.0",
+        "realpath-native": "^1.1.0",
+        "slash": "^2.0.0",
+        "strip-bom": "^3.0.0",
+        "yargs": "^12.0.2"
+      }
+    },
+    "jest-serializer": {
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.4.0.tgz",
+      "integrity": "sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q=="
+    },
+    "jest-snapshot": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-24.8.0.tgz",
+      "integrity": "sha512-5ehtWoc8oU9/cAPe6fez6QofVJLBKyqkY2+TlKTOf0VllBB/mqUNdARdcjlZrs9F1Cv+/HKoCS/BknT0+tmfPg==",
+      "requires": {
+        "@babel/types": "^7.0.0",
+        "@jest/types": "^24.8.0",
+        "chalk": "^2.0.1",
+        "expect": "^24.8.0",
+        "jest-diff": "^24.8.0",
+        "jest-matcher-utils": "^24.8.0",
+        "jest-message-util": "^24.8.0",
+        "jest-resolve": "^24.8.0",
+        "mkdirp": "^0.5.1",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^24.8.0",
+        "semver": "^5.5.0"
+      }
+    },
+    "jest-util": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.8.0.tgz",
+      "integrity": "sha512-DYZeE+XyAnbNt0BG1OQqKy/4GVLPtzwGx5tsnDrFcax36rVE3lTA5fbvgmbVPUZf9w77AJ8otqR4VBbfFJkUZA==",
+      "requires": {
+        "@jest/console": "^24.7.1",
+        "@jest/fake-timers": "^24.8.0",
+        "@jest/source-map": "^24.3.0",
+        "@jest/test-result": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "callsites": "^3.0.0",
+        "chalk": "^2.0.1",
+        "graceful-fs": "^4.1.15",
+        "is-ci": "^2.0.0",
+        "mkdirp": "^0.5.1",
+        "slash": "^2.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "jest-validate": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-24.8.0.tgz",
+      "integrity": "sha512-+/N7VOEMW1Vzsrk3UWBDYTExTPwf68tavEPKDnJzrC6UlHtUDU/fuEdXqFoHzv9XnQ+zW6X3qMZhJ3YexfeLDA==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "camelcase": "^5.0.0",
+        "chalk": "^2.0.1",
+        "jest-get-type": "^24.8.0",
+        "leven": "^2.1.0",
+        "pretty-format": "^24.8.0"
+      }
+    },
+    "jest-watcher": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-24.8.0.tgz",
+      "integrity": "sha512-SBjwHt5NedQoVu54M5GEx7cl7IGEFFznvd/HNT8ier7cCAx/Qgu9ZMlaTQkvK22G1YOpcWBLQPFSImmxdn3DAw==",
+      "requires": {
+        "@jest/test-result": "^24.8.0",
+        "@jest/types": "^24.8.0",
+        "@types/yargs": "^12.0.9",
+        "ansi-escapes": "^3.0.0",
+        "chalk": "^2.0.1",
+        "jest-util": "^24.8.0",
+        "string-length": "^2.0.0"
+      }
+    },
+    "jest-worker": {
+      "version": "24.6.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz",
+      "integrity": "sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==",
+      "requires": {
+        "merge-stream": "^1.0.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "jetpack-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-1.0.0.tgz",
+      "integrity": "sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y="
+    },
+    "js-levenshtein": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
+      "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g=="
+    },
+    "js-select": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/js-select/-/js-select-0.6.0.tgz",
+      "integrity": "sha1-woTiKCTVknrsli3N8kcXSu+w0ZA=",
+      "requires": {
+        "JSONSelect": "0.2.1",
+        "traverse": "0.4.x"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "jsdom": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz",
+      "integrity": "sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==",
+      "requires": {
+        "abab": "^2.0.0",
+        "acorn": "^5.5.3",
+        "acorn-globals": "^4.1.0",
+        "array-equal": "^1.0.0",
+        "cssom": ">= 0.3.2 < 0.4.0",
+        "cssstyle": "^1.0.0",
+        "data-urls": "^1.0.0",
+        "domexception": "^1.0.1",
+        "escodegen": "^1.9.1",
+        "html-encoding-sniffer": "^1.0.2",
+        "left-pad": "^1.3.0",
+        "nwsapi": "^2.0.7",
+        "parse5": "4.0.0",
+        "pn": "^1.1.0",
+        "request": "^2.87.0",
+        "request-promise-native": "^1.0.5",
+        "sax": "^1.2.4",
+        "symbol-tree": "^3.2.2",
+        "tough-cookie": "^2.3.4",
+        "w3c-hr-time": "^1.0.1",
+        "webidl-conversions": "^4.0.2",
+        "whatwg-encoding": "^1.0.3",
+        "whatwg-mimetype": "^2.1.0",
+        "whatwg-url": "^6.4.1",
+        "ws": "^5.2.0",
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+    },
+    "json-merge-patch": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-merge-patch/-/json-merge-patch-0.2.3.tgz",
+      "integrity": "sha1-+ixrWvh9p3uuKWalidUuI+2B/kA=",
+      "requires": {
+        "deep-equal": "^1.0.0"
+      }
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
+    "json-schema-traverse": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "requires": {
+        "jsonify": "~0.0.0"
+      }
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
+    "json3": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
+      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE="
+    },
+    "json5": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
+      "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
+    },
+    "jsonparse": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+      "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA="
+    },
+    "jsonpointer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
+      "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
+    },
+    "jsonwebtoken": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.2.1.tgz",
+      "integrity": "sha512-l8rUBr0fqYYwPc8/ZGrue7GiW7vWdZtZqelxo4Sd5lMvuEeCK8/wS54sEo6tJhdZ6hqfutsj6COgC0d1XdbHGw==",
+      "requires": {
+        "jws": "^3.1.4",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "xtend": "^4.0.1"
+      }
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "jsx-ast-utils": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
+      "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE="
+    },
+    "jszip": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.6.1.tgz",
+      "integrity": "sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=",
+      "requires": {
+        "pako": "~1.0.2"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+          "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
+        }
+      }
+    },
+    "jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "requires": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "killable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg=="
+    },
+    "kind-of": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
+    "latest-version": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
+      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
+      "requires": {
+        "package-json": "^4.0.0"
+      }
+    },
+    "lazystream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
+      "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
+      "requires": {
+        "readable-stream": "^2.0.5"
+      }
+    },
+    "lcid": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+      "requires": {
+        "invert-kv": "^2.0.0"
+      }
+    },
+    "left-pad": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
+      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA=="
+    },
+    "lerna": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/lerna/-/lerna-2.11.0.tgz",
+      "integrity": "sha512-kgM6zwe2P2tR30MYvgiLLW+9buFCm6E7o8HnRlhTgm70WVBvXVhydqv+q/MF2HrVZkCawfVtCfetyQmtd4oHhQ==",
+      "requires": {
+        "async": "^1.5.0",
+        "chalk": "^2.1.0",
+        "cmd-shim": "^2.0.2",
+        "columnify": "^1.5.4",
+        "command-join": "^2.0.0",
+        "conventional-changelog-cli": "^1.3.13",
+        "conventional-recommended-bump": "^1.2.1",
+        "dedent": "^0.7.0",
+        "execa": "^0.8.0",
+        "find-up": "^2.1.0",
+        "fs-extra": "^4.0.1",
+        "get-port": "^3.2.0",
+        "glob": "^7.1.2",
+        "glob-parent": "^3.1.0",
+        "globby": "^6.1.0",
+        "graceful-fs": "^4.1.11",
+        "hosted-git-info": "^2.5.0",
+        "inquirer": "^3.2.2",
+        "is-ci": "^1.0.10",
+        "load-json-file": "^4.0.0",
+        "lodash": "^4.17.4",
+        "minimatch": "^3.0.4",
+        "npmlog": "^4.1.2",
+        "p-finally": "^1.0.0",
+        "package-json": "^4.0.1",
+        "path-exists": "^3.0.0",
+        "read-cmd-shim": "^1.0.1",
+        "read-pkg": "^3.0.0",
+        "rimraf": "^2.6.1",
+        "safe-buffer": "^5.1.1",
+        "semver": "^5.4.1",
+        "signal-exit": "^3.0.2",
+        "slash": "^1.0.0",
+        "strong-log-transformer": "^1.0.6",
+        "temp-write": "^3.3.0",
+        "write-file-atomic": "^2.3.0",
+        "write-json-file": "^2.2.0",
+        "write-pkg": "^3.1.0",
+        "yargs": "^8.0.2"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        },
+        "ci-info": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
+          "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+              "requires": {
+                "code-point-at": "^1.0.0",
+                "is-fullwidth-code-point": "^1.0.0",
+                "strip-ansi": "^3.0.0"
+              }
+            }
+          }
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        },
+        "invert-kv": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+        },
+        "is-ci": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+          "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
+          "requires": {
+            "ci-info": "^1.5.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "lcid": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+          "requires": {
+            "invert-kv": "^1.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "mem": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
+          "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
+          "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+          "requires": {
+            "execa": "^0.7.0",
+            "lcid": "^1.0.0",
+            "mem": "^1.1.0"
+          },
+          "dependencies": {
+            "execa": {
+              "version": "0.7.0",
+              "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+              "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+              "requires": {
+                "cross-spawn": "^5.0.1",
+                "get-stream": "^3.0.0",
+                "is-stream": "^1.1.0",
+                "npm-run-path": "^2.0.0",
+                "p-finally": "^1.0.0",
+                "signal-exit": "^3.0.0",
+                "strip-eof": "^1.0.0"
+              }
+            }
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
+          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "requires": {
+            "pify": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg-up": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
+          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "requires": {
+            "find-up": "^2.0.0",
+            "read-pkg": "^2.0.0"
+          },
+          "dependencies": {
+            "load-json-file": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+              "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+              "requires": {
+                "graceful-fs": "^4.1.2",
+                "parse-json": "^2.2.0",
+                "pify": "^2.0.0",
+                "strip-bom": "^3.0.0"
+              }
+            },
+            "read-pkg": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
+              "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+              "requires": {
+                "load-json-file": "^2.0.0",
+                "normalize-package-data": "^2.3.2",
+                "path-type": "^2.0.0"
+              }
+            }
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "slash": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+          "requires": {
+            "camelcase": "^4.1.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "read-pkg-up": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^7.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
+          "integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
+      }
+    },
+    "leven": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
+      "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA="
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "requires": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      }
+    },
+    "lint-staged": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-7.3.0.tgz",
+      "integrity": "sha512-AXk40M9DAiPi7f4tdJggwuKIViUplYtVj1os1MVEteW7qOkU50EOehayCfO9TsoGK24o/EsWb41yrEgfJDDjCw==",
+      "requires": {
+        "chalk": "^2.3.1",
+        "commander": "^2.14.1",
+        "cosmiconfig": "^5.0.2",
+        "debug": "^3.1.0",
+        "dedent": "^0.7.0",
+        "execa": "^0.9.0",
+        "find-parent-dir": "^0.3.0",
+        "is-glob": "^4.0.0",
+        "is-windows": "^1.0.2",
+        "jest-validate": "^23.5.0",
+        "listr": "^0.14.1",
+        "lodash": "^4.17.5",
+        "log-symbols": "^2.2.0",
+        "micromatch": "^3.1.8",
+        "npm-which": "^3.0.1",
+        "p-map": "^1.1.1",
+        "path-is-inside": "^1.0.2",
+        "pify": "^3.0.0",
+        "please-upgrade-node": "^3.0.2",
+        "staged-git-files": "1.1.1",
+        "string-argv": "^0.0.2",
+        "stringify-object": "^3.2.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "execa": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.9.0.tgz",
+          "integrity": "sha512-BbUMBiX4hqiHZUA5+JujIjNb6TyAlp2D5KLheMjMluwOuzcnylDL4AxZYLLn1n2AGB49eSWwyKvvEQoRpnAtmA==",
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "jest-get-type": {
+          "version": "22.4.3",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
+          "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w=="
+        },
+        "jest-validate": {
+          "version": "23.6.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.6.0.tgz",
+          "integrity": "sha512-OFKapYxe72yz7agrDAWi8v2WL8GIfVqcbKRCLbRG9PAxtzF9b1SEDdTpytNDN12z2fJynoBwpMpvj2R39plI2A==",
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.6.0"
+          }
+        },
+        "pretty-format": {
+          "version": "23.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz",
+          "integrity": "sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==",
+          "requires": {
+            "ansi-regex": "^3.0.0",
+            "ansi-styles": "^3.2.0"
+          }
+        }
+      }
+    },
+    "listr": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
+      "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
+      "requires": {
+        "@samverschueren/stream-to-observable": "^0.3.0",
+        "is-observable": "^1.1.0",
+        "is-promise": "^2.1.0",
+        "is-stream": "^1.1.0",
+        "listr-silent-renderer": "^1.1.1",
+        "listr-update-renderer": "^0.5.0",
+        "listr-verbose-renderer": "^0.5.0",
+        "p-map": "^2.0.0",
+        "rxjs": "^6.3.3"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="
+        }
+      }
+    },
+    "listr-silent-renderer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
+      "integrity": "sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4="
+    },
+    "listr-update-renderer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
+      "integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
+      "requires": {
+        "chalk": "^1.1.3",
+        "cli-truncate": "^0.2.1",
+        "elegant-spinner": "^1.0.1",
+        "figures": "^1.7.0",
+        "indent-string": "^3.0.0",
+        "log-symbols": "^1.0.2",
+        "log-update": "^2.3.0",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "figures": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+          "requires": {
+            "escape-string-regexp": "^1.0.5",
+            "object-assign": "^4.1.0"
+          }
+        },
+        "log-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+          "requires": {
+            "chalk": "^1.0.0"
+          }
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "listr-verbose-renderer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
+      "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+      "requires": {
+        "chalk": "^2.4.1",
+        "cli-cursor": "^2.1.0",
+        "date-fns": "^1.27.2",
+        "figures": "^2.0.0"
+      }
+    },
+    "load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
+    },
+    "loader-utils": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+      "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^2.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "local-storage-fallback": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/local-storage-fallback/-/local-storage-fallback-4.1.1.tgz",
+      "integrity": "sha512-Ka4rem1FOgvIaPMokxXTP8DgW8gjfAQSdJC8TGrplDug7vh3b0PZnY/9euG3O3cIGAvJLp33mMU6MJ13x6S+Pw==",
+      "requires": {
+        "cookie": "^0.3.1"
+      }
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY="
+    },
+    "lodash._basetostring": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
+      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U="
+    },
+    "lodash._basevalues": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
+      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc="
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
+    "lodash._isiterateecall": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw="
+    },
+    "lodash._reescape": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
+      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo="
+    },
+    "lodash._reevaluate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
+      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0="
+    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI="
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
+    },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
+    },
+    "lodash.escape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
+      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
+      "requires": {
+        "lodash._root": "^3.0.0"
+      }
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
+    },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
+    "lodash.restparam": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU="
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
+    },
+    "lodash.template": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
+      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash._basetostring": "^3.0.0",
+        "lodash._basevalues": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0",
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.escape": "^3.0.0",
+        "lodash.keys": "^3.0.0",
+        "lodash.restparam": "^3.0.0",
+        "lodash.templatesettings": "^3.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
+      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.escape": "^3.0.0"
+      }
+    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
+    },
+    "lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg="
+    },
+    "log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "requires": {
+        "chalk": "^2.0.1"
+      }
+    },
+    "log-update": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
+      "integrity": "sha1-iDKP19HOeTiykoN0bwsbwSayRwg=",
+      "requires": {
+        "ansi-escapes": "^3.0.0",
+        "cli-cursor": "^2.0.0",
+        "wrap-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+          "integrity": "sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=",
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0"
+          }
+        }
+      }
+    },
+    "loglevel": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
+      "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
+    "lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "requires": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
+    "makeerror": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
+      "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
+      "requires": {
+        "tmpl": "1.0.x"
+      }
+    },
+    "mamacro": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
+      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA=="
+    },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+    },
+    "map-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz",
+      "integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk="
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "mdn-browser-compat-data": {
+      "version": "0.0.66",
+      "resolved": "https://registry.npmjs.org/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.66.tgz",
+      "integrity": "sha512-Exx+o05KYCltHmY2thfCoufBaHeqbIzqZHQPDtmcC+nkeFG++ONzwddBtgDBAKeI0IFFKqGIbRT1QBRwmk9QKA==",
+      "requires": {
+        "extend": "3.0.2"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "mem": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
+      "requires": {
+        "map-age-cleaner": "^0.1.1",
+        "mimic-fn": "^2.0.0",
+        "p-is-promise": "^2.0.0"
+      },
+      "dependencies": {
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+        }
+      }
+    },
+    "memoize-one": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-3.1.1.tgz",
+      "integrity": "sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA=="
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "requires": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "meow": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
+      "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+      "requires": {
+        "camelcase-keys": "^4.0.0",
+        "decamelize-keys": "^1.0.0",
+        "loud-rejection": "^1.0.0",
+        "minimist": "^1.1.3",
+        "minimist-options": "^3.0.1",
+        "normalize-package-data": "^2.3.4",
+        "read-pkg-up": "^3.0.0",
+        "redent": "^2.0.0",
+        "trim-newlines": "^2.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+        },
+        "read-pkg-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
+          "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
+          "requires": {
+            "find-up": "^2.0.0",
+            "read-pkg": "^3.0.0"
+          }
+        }
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "merge-stream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
+      "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=",
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      }
+    },
+    "mime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
+    },
+    "mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
+    },
+    "mime-types": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "requires": {
+        "mime-db": "1.40.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+    },
+    "minimist-options": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
+      "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+      "requires": {
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0"
+      }
+    },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "requires": {
+        "concat-stream": "^1.5.0",
+        "duplexify": "^3.4.2",
+        "end-of-stream": "^1.1.0",
+        "flush-write-stream": "^1.0.0",
+        "from2": "^2.1.0",
+        "parallel-transform": "^1.1.0",
+        "pump": "^3.0.0",
+        "pumpify": "^1.3.3",
+        "stream-each": "^1.1.0",
+        "through2": "^2.0.0"
+      }
+    },
+    "mixin-deep": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        }
+      }
+    },
+    "modify-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
+      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw=="
+    },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "requires": {
+        "aproba": "^1.1.1",
+        "copy-concurrently": "^1.0.0",
+        "fs-write-stream-atomic": "^1.0.8",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.3"
+      }
+    },
+    "ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+    },
+    "multicast-dns": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
+      "requires": {
+        "dns-packet": "^1.3.1",
+        "thunky": "^1.0.2"
+      }
+    },
+    "multicast-dns-service-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
+      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
+    },
+    "multimatch": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
+      "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
+      "requires": {
+        "array-differ": "^1.0.0",
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "minimatch": "^3.0.0"
+      }
+    },
+    "multipipe": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
+      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
+      "requires": {
+        "duplexer2": "0.0.2"
+      }
+    },
+    "mute-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
+      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
+    },
+    "mv": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
+      "integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
+      "optional": true,
+      "requires": {
+        "mkdirp": "~0.5.1",
+        "ncp": "~2.0.0",
+        "rimraf": "~2.4.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "optional": true,
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
+          "integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
+          "optional": true,
+          "requires": {
+            "glob": "^6.0.1"
+          }
+        }
+      }
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "nan": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
+      "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
+      "optional": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      }
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
+    },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q="
+    },
+    "ncp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
+      "optional": true
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "neo-async": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
+      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
+    },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+    },
+    "node-forge": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
+      "integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw=="
+    },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs="
+    },
+    "node-libs-browser": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-0.5.3.tgz",
+      "integrity": "sha1-Ve+oiOyQes24z/xOelFxJ4DhO2o=",
+      "requires": {
+        "assert": "^1.1.1",
+        "browserify-zlib": "~0.1.4",
+        "buffer": "^3.0.3",
+        "console-browserify": "^1.1.0",
+        "constants-browserify": "0.0.1",
+        "crypto-browserify": "~3.2.6",
+        "domain-browser": "^1.1.1",
+        "events": "^1.0.0",
+        "http-browserify": "^1.3.2",
+        "https-browserify": "0.0.0",
+        "os-browserify": "~0.1.2",
+        "path-browserify": "0.0.0",
+        "process": "^0.11.0",
+        "punycode": "^1.2.4",
+        "querystring-es3": "~0.2.0",
+        "readable-stream": "^1.1.13",
+        "stream-browserify": "^1.0.0",
+        "string_decoder": "~0.10.25",
+        "timers-browserify": "^1.0.1",
+        "tty-browserify": "0.0.0",
+        "url": "~0.10.1",
+        "util": "~0.10.3",
+        "vm-browserify": "0.0.4"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+          "integrity": "sha1-EQHpVE9KdrG8OybUUsqW16NeeXg="
+        },
+        "buffer": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-3.6.0.tgz",
+          "integrity": "sha1-pyyTb3e5a/UvX357RnGAYoVR3vs=",
+          "requires": {
+            "base64-js": "0.0.8",
+            "ieee754": "^1.1.4",
+            "isarray": "^1.0.0"
+          }
+        },
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          },
+          "dependencies": {
+            "isarray": {
+              "version": "0.0.1",
+              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+              "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+            }
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
+    },
+    "node-notifier": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.0.tgz",
+      "integrity": "sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ==",
+      "requires": {
+        "growly": "^1.3.0",
+        "is-wsl": "^1.1.0",
+        "semver": "^5.5.0",
+        "shellwords": "^0.1.1",
+        "which": "^1.3.0"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.18.tgz",
+      "integrity": "sha512-/mnVgm6u/8OwlIsoyRXtTI0RfQcxZoAZbdwyXap0EeWwcOpDDymyCHM2/aR9XKmHXrvizHoPAOs0pcbiJ6RUaA==",
+      "requires": {
+        "semver": "^5.3.0"
+      }
+    },
+    "node-rsa": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/node-rsa/-/node-rsa-1.0.5.tgz",
+      "integrity": "sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==",
+      "requires": {
+        "asn1": "^0.2.4"
+      }
+    },
+    "node-version": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/node-version/-/node-version-1.2.0.tgz",
+      "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ=="
+    },
+    "nomnom": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
+      "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
+      "requires": {
+        "chalk": "~0.4.0",
+        "underscore": "~1.6.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
+          "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg="
+        },
+        "chalk": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
+          "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
+          "requires": {
+            "ansi-styles": "~1.0.0",
+            "has-color": "~0.1.0",
+            "strip-ansi": "~0.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
+          "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE="
+        }
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "requires": {
+        "remove-trailing-separator": "^1.0.1"
+      }
+    },
+    "normalize-url": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+      "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+      "requires": {
+        "object-assign": "^4.0.1",
+        "prepend-http": "^1.0.0",
+        "query-string": "^4.1.0",
+        "sort-keys": "^1.0.0"
+      }
+    },
+    "npm-path": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/npm-path/-/npm-path-2.0.4.tgz",
+      "integrity": "sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==",
+      "requires": {
+        "which": "^1.2.10"
+      }
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
+    "npm-which": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/npm-which/-/npm-which-3.0.1.tgz",
+      "integrity": "sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=",
+      "requires": {
+        "commander": "^2.9.0",
+        "npm-path": "^2.0.2",
+        "which": "^1.2.10"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
+    "nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+    },
+    "nwsapi": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.4.tgz",
+      "integrity": "sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw=="
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+    },
+    "object-assign": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
+      "integrity": "sha1-mVBEVsNZi1ytT8WcJuipuxB/4L0="
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.0.tgz",
+      "integrity": "sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.11.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.1"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
+      "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.1"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+      "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+      "requires": {
+        "mimic-fn": "^1.0.0"
+      }
+    },
+    "opener": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
+      "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA=="
+    },
+    "opn": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
+      "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+        },
+        "wordwrap": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+        }
+      }
+    },
+    "optionator": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "requires": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.4",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "wordwrap": "~1.0.0"
+      }
+    },
+    "original": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
+      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
+      "requires": {
+        "url-parse": "^1.4.3"
+      }
+    },
+    "os-browserify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz",
+      "integrity": "sha1-ScoCk+CxlZCl9d4Qx/JlphfY/lQ="
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
+    "os-locale": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+      "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+      "requires": {
+        "execa": "^1.0.0",
+        "lcid": "^2.0.0",
+        "mem": "^4.0.0"
+      }
+    },
+    "os-shim": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
+      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc="
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.0.3.tgz",
+      "integrity": "sha1-zWrY3bKQkVrZ4idlV2Al1BHynLY="
+    },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww="
+    },
+    "p-each-series": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz",
+      "integrity": "sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=",
+      "requires": {
+        "p-reduce": "^1.0.0"
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
+    },
+    "p-is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg=="
+    },
+    "p-limit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-map": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
+      "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA=="
+    },
+    "p-reduce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
+      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo="
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
+    "package-json": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
+      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
+      "requires": {
+        "got": "^6.7.1",
+        "registry-auth-token": "^3.0.1",
+        "registry-url": "^3.0.3",
+        "semver": "^5.1.0"
+      }
+    },
+    "pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
+    },
+    "parallel-transform": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz",
+      "integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=",
+      "requires": {
+        "cyclist": "~0.2.2",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.4.tgz",
+      "integrity": "sha512-Qs5duJcuvNExRfFZ99HDD3z4mAi3r9Wl/FOjEOijlxwCZs7E7mW2vjTpgQ4J8LpTF8x5v+1Vn5UQFejmWT11aw==",
+      "requires": {
+        "asn1.js": "^4.0.0",
+        "browserify-aes": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "parse-github-repo-url": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz",
+      "integrity": "sha1-nn2LslKmy2ukJZUGC3v23z28H1A="
+    },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
+    },
+    "parse5": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
+      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA=="
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+    },
+    "path-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo="
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
+    },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "requires": {
+        "pify": "^3.0.0"
+      }
+    },
+    "pbf": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.0.tgz",
+      "integrity": "sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
+    "pbkdf2": {
+      "version": "3.0.17",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
+      "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==",
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      },
+      "dependencies": {
+        "ripemd160": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+          "requires": {
+            "hash-base": "^3.0.0",
+            "inherits": "^2.0.1"
+          }
+        },
+        "sha.js": {
+          "version": "2.4.11",
+          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+          "requires": {
+            "inherits": "^2.0.1",
+            "safe-buffer": "^5.0.1"
+          }
+        }
+      }
+    },
+    "pbkdf2-compat": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz",
+      "integrity": "sha1-tuDI+plJTZTgURV1gCpZpcFC8og="
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
+    "pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "pino": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-5.11.1.tgz",
+      "integrity": "sha512-NIua0mGb9Adknq35ONvQmvh93LCUVUjp2+1q1EcvIkJmpJnSd3E5rHVKlKNjzMXFl/z3fI+QA0xXCjPEKNiLvQ==",
+      "requires": {
+        "fast-redact": "^1.4.2",
+        "fast-safe-stringify": "^2.0.6",
+        "flatstr": "^1.0.9",
+        "pino-std-serializers": "^2.3.0",
+        "quick-format-unescaped": "^3.0.0",
+        "sonic-boom": "^0.7.1"
+      }
+    },
+    "pino-std-serializers": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-2.4.1.tgz",
+      "integrity": "sha512-v/JglhO0aFcvkMV9VUxhgyuJo8K1si857Ww86Tx8H2cjC/kp0ndzzcF6Vbxr4RgKFYJdHfLVpEuD55znMZuxnw=="
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "requires": {
+        "find-up": "^3.0.0"
+      }
+    },
+    "please-upgrade-node": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz",
+      "integrity": "sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==",
+      "requires": {
+        "semver-compare": "^1.0.0"
+      }
+    },
+    "pluralize": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
+      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
+    },
+    "pn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
+    },
+    "po2json": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/po2json/-/po2json-0.4.5.tgz",
+      "integrity": "sha1-R7spUtoy1Yob4vJWpZjuvAt0URg=",
+      "requires": {
+        "gettext-parser": "1.1.0",
+        "nomnom": "1.8.1"
+      }
+    },
+    "portfinder": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
+      "integrity": "sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==",
+      "requires": {
+        "async": "^1.5.2",
+        "debug": "^2.2.0",
+        "mkdirp": "0.5.x"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+    },
+    "postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "requires": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
+      "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "requires": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "requires": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "requires": {
+        "icss-replace-symbols": "^1.1.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
+    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
+    },
+    "prettier": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.17.0.tgz",
+      "integrity": "sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw=="
+    },
+    "pretty-format": {
+      "version": "24.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.8.0.tgz",
+      "integrity": "sha512-P952T7dkrDEplsR+TuY7q3VXDae5Sr7zmQb12JU/NDQa/3CH7/QW0yvqLcGN6jL+zQFKaoJcPc+yJxMTGmosqw==",
+      "requires": {
+        "@jest/types": "^24.8.0",
+        "ansi-regex": "^4.0.0",
+        "ansi-styles": "^3.2.0",
+        "react-is": "^16.8.4"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+        }
+      }
+    },
+    "private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+    },
+    "probe-image-size": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-4.0.0.tgz",
+      "integrity": "sha512-nm7RvWUxps+2+jZKNLkd04mNapXNariS6G5WIEVzvAqjx7EUuKcY1Dp3e6oUK7GLwzJ+3gbSbPLFAASHFQrPcQ==",
+      "requires": {
+        "any-promise": "^1.3.0",
+        "deepmerge": "^2.0.1",
+        "inherits": "^2.0.3",
+        "next-tick": "^1.0.0",
+        "request": "^2.83.0",
+        "stream-parser": "~0.3.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        }
+      }
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+    },
+    "process-nextick-args": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+    },
+    "promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
+    "prompts": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.0.4.tgz",
+      "integrity": "sha512-HTzM3UWp/99A0gk51gAegwo1QRYA7xjcZufMNe33rCclFszUYAuHe1fIN/3ZmiHeGPkUsNaRyQm1hHOfM0PKxA==",
+      "requires": {
+        "kleur": "^3.0.2",
+        "sisteransi": "^1.0.0"
+      }
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+        }
+      }
+    },
+    "protocol-buffers-schema": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz",
+      "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
+    },
+    "proxy-addr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
+      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.0"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "psl": {
+      "version": "1.1.31",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
+      "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw=="
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+    },
+    "query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "requires": {
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
+    },
+    "querystringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
+      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
+    },
+    "quick-format-unescaped": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-3.0.2.tgz",
+      "integrity": "sha512-FXTaCkwvpIlkdKeGDNgcq07SXWS383noQUuZjvdE1QcTt+eLuqof6/BDiEPqB59FWLie/l91+HtlJSw7iCViSA=="
+    },
+    "quick-lru": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz",
+      "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g="
+    },
+    "quick-tmp": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/quick-tmp/-/quick-tmp-0.0.0.tgz",
+      "integrity": "sha1-QWXmYyDqBfnLzM874fj9X9sF998=",
+      "requires": {
+        "first-match": "0.0.1",
+        "osenv": "0.0.3"
+      }
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
+      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
+      "requires": {
+        "bytes": "3.0.0",
+        "http-errors": "1.6.3",
+        "iconv-lite": "0.4.23",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.23",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+          "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
+    "react": {
+      "version": "0.0.0-fec00a869",
+      "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-fec00a869.tgz",
+      "integrity": "sha512-FaS3ViFU4ag7cuhDHQgGK3DAdWaD8YFXzEbO/Qzz33Si7VEzRRdnyoegFwg7VkEKxR6CvCVP6revi9Tm3Gq+WQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "0.0.0-fec00a869"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
+    "react-color": {
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
+      "integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "react-dom": {
+      "version": "0.0.0-fec00a869",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-fec00a869.tgz",
+      "integrity": "sha512-atB5i2HgCvbvhtGXq9oaX/BCL2AFZjnccougU8S9eulRFNQbNrfGNwIcj04PRo3XU1ZsBw5syL/5l596UaolKA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "0.0.0-fec00a869"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
+    "react-is": {
+      "version": "0.0.0-fec00a869",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-0.0.0-fec00a869.tgz",
+      "integrity": "sha512-VYVE8DePYc/7xH7irSYv8rTXZhEvAl9AQHY4whTTgQTq9lDmtMNG5tuPcNlW+kGc3yr8dLmbmy4NaxN+Qnx9Ig=="
+    },
+    "react-test-renderer": {
+      "version": "0.0.0-fec00a869",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-0.0.0-fec00a869.tgz",
+      "integrity": "sha512-eNt1Hktzly+HbUuEETXdJzWX3udr7FjHXhu3mQx8Y4r4841qtpuaFf2fnp0cYfRYsUadLVrL9kG4itCuwjUZJQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "0.0.0-fec00a869",
+        "scheduler": "0.0.0-fec00a869"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
+    "react-virtualized-auto-sizer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
+      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
+    },
+    "react-window": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.1.tgz",
+      "integrity": "sha512-iNzekymggL9zAnil3QbmRG74RDMfIbO+plE/soP3M/zskicA1DwoLthC6/QA6xu9dr+A5UoawCTsEYcva2mfeA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
+    "read-cmd-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz",
+      "integrity": "sha1-LV0Vd4ajfAVdIgd8MsU/gynpHHs=",
+      "requires": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+      "requires": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      }
+    },
+    "read-pkg-up": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
+      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
+      "requires": {
+        "find-up": "^3.0.0",
+        "read-pkg": "^3.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "readline2": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
+      "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=",
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "mute-stream": "0.0.5"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "mute-stream": {
+          "version": "0.0.5",
+          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
+          "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA="
+        }
+      }
+    },
+    "realpath-native": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz",
+      "integrity": "sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==",
+      "requires": {
+        "util.promisify": "^1.0.0"
+      }
+    },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
+    "redent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz",
+      "integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=",
+      "requires": {
+        "indent-string": "^3.0.0",
+        "strip-indent": "^2.0.0"
+      }
+    },
+    "regenerate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz",
+      "integrity": "sha512-SbA/iNrBUf6Pv2zU8Ekv1Qbhv92yxL4hiDa2siuxs4KKn4oOoMDHXjAf7+Nz9qinUQ46B1LcWEi/PhJfPWpZWQ==",
+      "requires": {
+        "regenerate": "^1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
+    "regenerator-transform": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz",
+      "integrity": "sha512-T0QMBjK3J0MtxjPmdIMXm72Wvj2Abb0Bd4HADdfijwMdoIsyQZ6fWC7kDFhk2YinBBEMZDL7Y7wh0J1sGx3S4A==",
+      "requires": {
+        "private": "^0.1.6"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "regexp-tree": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.6.tgz",
+      "integrity": "sha512-LFrA98Dw/heXqDojz7qKFdygZmFoiVlvE1Zp7Cq2cvF+ZA+03Gmhy0k0PQlsC1jvHPiTUSs+pDHEuSWv6+6D7w=="
+    },
+    "regexpp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
+      "integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw=="
+    },
+    "regexpu-core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz",
+      "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==",
+      "requires": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.0.2",
+        "regjsgen": "^0.5.0",
+        "regjsparser": "^0.6.0",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.1.0"
+      }
+    },
+    "registry-auth-token": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+      "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
+      "requires": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "requires": {
+        "rc": "^1.0.1"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.0.tgz",
+      "integrity": "sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA=="
+    },
+    "regjsparser": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.0.tgz",
+      "integrity": "sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==",
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+        }
+      }
+    },
+    "relaxed-json": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/relaxed-json/-/relaxed-json-1.0.1.tgz",
+      "integrity": "sha1-fI1KovCVcEzQIOMugJm8rhA/C9Q=",
+      "requires": {
+        "chalk": "^1.0.0",
+        "commander": "^2.6.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
+    },
+    "repeat-element": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
+      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g=="
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "replace-ext": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
+      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ="
+    },
+    "request": {
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        },
+        "tough-cookie": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+          "requires": {
+            "psl": "^1.1.24",
+            "punycode": "^1.4.1"
+          }
+        }
+      }
+    },
+    "request-promise": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.4.tgz",
+      "integrity": "sha512-8wgMrvE546PzbR5WbYxUQogUnUDfM0S7QIFZMID+J73vdFARkFy+HElj4T+MWYhpXwlLp0EQ8Zoj8xUA0he4Vg==",
+      "requires": {
+        "bluebird": "^3.5.0",
+        "request-promise-core": "1.1.2",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
+    "request-promise-core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.2.tgz",
+      "integrity": "sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==",
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.7.tgz",
+      "integrity": "sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==",
+      "requires": {
+        "request-promise-core": "1.1.2",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
+    "require-uncached": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
+      "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
+      "requires": {
+        "caller-path": "^0.1.0",
+        "resolve-from": "^1.0.0"
+      }
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "resolve": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz",
+      "integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==",
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
+      "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        }
+      }
+    },
+    "resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "requires": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
+      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
+    },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+    },
+    "restore-cursor": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+      "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+      "requires": {
+        "onetime": "^2.0.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+    },
+    "rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-0.2.0.tgz",
+      "integrity": "sha1-K/GYveFnys+lHAqSjoS2i74XH84="
+    },
+    "rsvp": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.4.tgz",
+      "integrity": "sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA=="
+    },
+    "run-async": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
+      "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
+      "requires": {
+        "is-promise": "^2.1.0"
+      }
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "rx-lite": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
+      "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ="
+    },
+    "rx-lite-aggregates": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz",
+      "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=",
+      "requires": {
+        "rx-lite": "*"
+      }
+    },
+    "rxjs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
+      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safe-json-stringify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz",
+      "integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==",
+      "optional": true
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sane": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
+      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
+      "requires": {
+        "@cnakazawa/watch": "^1.0.3",
+        "anymatch": "^2.0.0",
+        "capture-exit": "^2.0.0",
+        "exec-sh": "^0.3.2",
+        "execa": "^1.0.0",
+        "fb-watchman": "^2.0.0",
+        "micromatch": "^3.1.4",
+        "minimist": "^1.1.1",
+        "walker": "~1.0.5"
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "scheduler": {
+      "version": "0.0.0-fec00a869",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-fec00a869.tgz",
+      "integrity": "sha512-0U25jnyBP6dRPYwaVW4WMYB0jJSYlrIHFmIuXv27X+KIHJr7vyE9gcFTqZ61NQTuxYLYepAHnUs4KgQEUDlI+g==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
+    "schema-utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+      "requires": {
+        "ajv": "^6.1.0",
+        "ajv-errors": "^1.0.0",
+        "ajv-keywords": "^3.1.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.10.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
+          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.0.tgz",
+          "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw=="
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
+    },
+    "selfsigned": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.4.tgz",
+      "integrity": "sha512-9AukTiDmHXGXWtWjembZ5NDmVvP2695EtpgbCsxCa68w3c88B+alqbmZ4O3hZ4VWGXeGWzEVdvqgAJD8DQPCDw==",
+      "requires": {
+        "node-forge": "0.7.5"
+      },
+      "dependencies": {
+        "node-forge": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
+          "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
+        }
+      }
+    },
+    "semver": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
+    },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
+    },
+    "semver-diff": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
+      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "requires": {
+        "semver": "^5.0.3"
+      }
+    },
+    "send": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.6.2",
+        "mime": "1.4.1",
+        "ms": "2.0.0",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.4.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.7.0.tgz",
+      "integrity": "sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA=="
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.2",
+        "send": "0.16.2"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "set-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
+      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
+    "setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "sha.js": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.2.6.tgz",
+      "integrity": "sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo="
+    },
+    "shallow-copy": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz",
+      "integrity": "sha1-QV9CcC1z2BAzApLMXuhurhoRoXA="
+    },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+    },
+    "shell-quote": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
+      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
+      "requires": {
+        "array-filter": "~0.0.0",
+        "array-map": "~0.0.0",
+        "array-reduce": "~0.0.0",
+        "jsonify": "~0.0.0"
+      }
+    },
+    "shelljs": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.8.tgz",
+      "integrity": "sha1-3svPh0sNHl+3LhSxZKloMEjprLM=",
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
+    "shellwords": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
+    },
+    "sign-addon": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/sign-addon/-/sign-addon-0.3.1.tgz",
+      "integrity": "sha512-feaoG7+8IXr9SymOEd8VTZCSlVZArWcBDZ33IIdfXlU5NWWzXdCxCjPDqAkLQplFa7RRZr1S4lSmgMPn80Ze1A==",
+      "requires": {
+        "babel-polyfill": "6.16.0",
+        "deepcopy": "0.6.3",
+        "es6-error": "4.0.0",
+        "es6-promisify": "5.0.0",
+        "jsonwebtoken": "8.2.1",
+        "mz": "2.5.0",
+        "request": "2.87.0",
+        "source-map-support": "0.4.6",
+        "stream-to-promise": "2.2.0",
+        "when": "3.7.7"
+      },
+      "dependencies": {
+        "es6-error": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.0.0.tgz",
+          "integrity": "sha1-8JTHBB9mJZm7EnINoFnWucf/D0A="
+        },
+        "har-validator": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
+          "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
+          "requires": {
+            "ajv": "^5.1.0",
+            "har-schema": "^2.0.0"
+          }
+        },
+        "mz": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/mz/-/mz-2.5.0.tgz",
+          "integrity": "sha1-KFkCXfA9RrV7sxcXSxlkd85kzsE=",
+          "requires": {
+            "any-promise": "^1.0.0",
+            "object-assign": "^4.0.1",
+            "thenify-all": "^1.0.0"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        },
+        "request": {
+          "version": "2.87.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
+          "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.6.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.5",
+            "extend": "~3.0.1",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.1",
+            "har-validator": "~5.0.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.17",
+            "oauth-sign": "~0.8.2",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.1",
+            "safe-buffer": "^5.1.1",
+            "tough-cookie": "~2.3.3",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.1.0"
+          }
+        },
+        "source-map-support": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.6.tgz",
+          "integrity": "sha1-MlUqpktFg5KoXqs7C17mFScWeus=",
+          "requires": {
+            "source-map": "^0.5.3"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.4",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+          "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
+          "requires": {
+            "punycode": "^1.4.1"
+          }
+        }
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
+    },
+    "sisteransi": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.0.tgz",
+      "integrity": "sha512-N+z4pHB4AmUv0SjveWRd6q1Nj5w62m5jodv+GD8lvmbY/83T/rpbJGZOnK5T149OldDj4Db07BSv9xY4K6NTPQ=="
+    },
+    "slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
+    },
+    "slice-ansi": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
+      "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
+      "requires": {
+        "is-fullwidth-code-point": "^2.0.0"
+      }
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "requires": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "sockjs": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
+      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+      "requires": {
+        "faye-websocket": "^0.10.0",
+        "uuid": "^3.0.1"
+      }
+    },
+    "sockjs-client": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.3.0.tgz",
+      "integrity": "sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==",
+      "requires": {
+        "debug": "^3.2.5",
+        "eventsource": "^1.0.7",
+        "faye-websocket": "~0.11.1",
+        "inherits": "^2.0.3",
+        "json3": "^3.3.2",
+        "url-parse": "^1.4.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "faye-websocket": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
+          "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
+          "requires": {
+            "websocket-driver": ">=0.5.1"
+          }
+        }
+      }
+    },
+    "sonic-boom": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-0.7.3.tgz",
+      "integrity": "sha512-A9EyoIeLD+g9vMLYQKjNCatJtAKdBQMW03+L8ZWWX/A6hq+srRCwdqHrBD1R8oSMLXov3oHN13dljtZf12q2Ow==",
+      "requires": {
+        "flatstr": "^1.0.9"
+      }
+    },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "requires": {
+        "is-plain-obj": "^1.0.0"
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    },
+    "source-map-resolve": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
+      "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
+      "requires": {
+        "atob": "^2.1.1",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
+      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+      "requires": {
+        "source-map": "^0.5.6"
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
+    },
+    "sparkles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
+      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw=="
+    },
+    "spawn-sync": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
+      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
+      "requires": {
+        "concat-stream": "^1.4.7",
+        "os-shim": "^0.1.2"
+      }
+    },
+    "spdx-correct": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
+      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
+      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA=="
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
+      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz",
+      "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA=="
+    },
+    "spdy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
+      "integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
+      "requires": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "requires": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
+          "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      }
+    },
+    "split2": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz",
+      "integrity": "sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==",
+      "requires": {
+        "through2": "^2.0.2"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "ssri": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+      "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+      "requires": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "stack-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
+      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
+    },
+    "stackframe": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.0.4.tgz",
+      "integrity": "sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw=="
+    },
+    "staged-git-files": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
+      "integrity": "sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A=="
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
+    },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+    },
+    "stream-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz",
+      "integrity": "sha1-v5tKv7QrJ011FHnkTg/yZWtvEZM=",
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^1.0.27-1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.3.6",
+        "to-arraybuffer": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "stream-parser": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
+      "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=",
+      "requires": {
+        "debug": "2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
+      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
+    },
+    "stream-to-array": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/stream-to-array/-/stream-to-array-2.3.0.tgz",
+      "integrity": "sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=",
+      "requires": {
+        "any-promise": "^1.1.0"
+      }
+    },
+    "stream-to-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/stream-to-promise/-/stream-to-promise-2.2.0.tgz",
+      "integrity": "sha1-se2y4cjLESidG1A8CNPyrvUeZQ8=",
+      "requires": {
+        "any-promise": "~1.3.0",
+        "end-of-stream": "~1.1.0",
+        "stream-to-array": "~2.3.0"
+      },
+      "dependencies": {
+        "end-of-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
+          "integrity": "sha1-6TUyWLqpEIll78QcsO+K3i88+wc=",
+          "requires": {
+            "once": "~1.3.0"
+          }
+        },
+        "once": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+          "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
+          "requires": {
+            "wrappy": "1"
+          }
+        }
+      }
+    },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+    },
+    "string-argv": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.0.2.tgz",
+      "integrity": "sha1-2sMECGkMIfPDYwo/86BYd73L1zY="
+    },
+    "string-length": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
+      "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
+      "requires": {
+        "astral-regex": "^1.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "requires": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+    },
+    "strip-bom-buf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz",
+      "integrity": "sha1-HLRar1dTD0yvhsf3UXnSyaUd1XI=",
+      "requires": {
+        "is-utf8": "^0.2.1"
+      }
+    },
+    "strip-bom-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-stream/-/strip-bom-stream-3.0.0.tgz",
+      "integrity": "sha1-lWvMXYRDD2klapDtgjdlzYWOFZw=",
+      "requires": {
+        "first-chunk-stream": "^2.0.0",
+        "strip-bom-buf": "^1.0.0"
+      }
+    },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
+    },
+    "strip-indent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
+      "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g="
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
+    "strip-url-auth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
+      "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164="
+    },
+    "strong-log-transformer": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-1.0.6.tgz",
+      "integrity": "sha1-9/uTdYpppXEUAYEnfuoMLrEwH6M=",
+      "requires": {
+        "byline": "^5.0.0",
+        "duplexer": "^0.1.1",
+        "minimist": "^0.1.0",
+        "moment": "^2.6.0",
+        "through": "^2.3.4"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
+          "integrity": "sha1-md9lelJXTCHJBXSX33QnkLK0wN4="
+        }
+      }
+    },
+    "style-loader": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
+    "symbol-tree": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
+      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
+    },
+    "table": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
+      "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==",
+      "requires": {
+        "ajv": "^5.2.3",
+        "ajv-keywords": "^2.1.0",
+        "chalk": "^2.1.0",
+        "lodash": "^4.17.4",
+        "slice-ansi": "1.0.0",
+        "string-width": "^2.1.1"
+      }
+    },
+    "tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
+    },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "requires": {
+        "bl": "^1.0.0",
+        "buffer-alloc": "^1.2.0",
+        "end-of-stream": "^1.0.0",
+        "fs-constants": "^1.0.0",
+        "readable-stream": "^2.3.0",
+        "to-buffer": "^1.1.1",
+        "xtend": "^4.0.0"
+      }
+    },
+    "temp-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0="
+    },
+    "temp-write": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/temp-write/-/temp-write-3.4.0.tgz",
+      "integrity": "sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "is-stream": "^1.1.0",
+        "make-dir": "^1.0.0",
+        "pify": "^3.0.0",
+        "temp-dir": "^1.0.0",
+        "uuid": "^3.0.1"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        }
+      }
+    },
+    "tempfile": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-1.1.1.tgz",
+      "integrity": "sha1-W8xOrsxKsscH2LwR2ZzMmiyyh/I=",
+      "requires": {
+        "os-tmpdir": "^1.0.0",
+        "uuid": "^2.0.1"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
+        }
+      }
+    },
+    "term-size": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
+      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
+      "requires": {
+        "execa": "^0.7.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        }
+      }
+    },
+    "terser": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
+      "integrity": "sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==",
+      "requires": {
+        "commander": "^2.19.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.10"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.12",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
+          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz",
+      "integrity": "sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==",
+      "requires": {
+        "cacache": "^11.0.2",
+        "find-cache-dir": "^2.0.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^1.4.0",
+        "source-map": "^0.6.1",
+        "terser": "^3.16.1",
+        "webpack-sources": "^1.1.0",
+        "worker-farm": "^1.5.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "test-exclude": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
+      "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
+      "requires": {
+        "glob": "^7.1.3",
+        "minimatch": "^3.0.4",
+        "read-pkg-up": "^4.0.0",
+        "require-main-filename": "^2.0.0"
+      }
+    },
+    "text-extensions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
+      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ=="
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
+    },
+    "thenify": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.0.tgz",
+      "integrity": "sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=",
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
+    "throat": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
+      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "thunky": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
+      "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow=="
+    },
+    "time-stamp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
+    },
+    "timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+    },
+    "timers-browserify": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.2.tgz",
+      "integrity": "sha1-ycWLV1voQHN1y14kYtrO50NZ9B0=",
+      "requires": {
+        "process": "~0.11.0"
+      }
+    },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
+    "tmpl": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
+      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+    },
+    "to-buffer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "requires": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      }
+    },
+    "tosource": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tosource/-/tosource-1.0.0.tgz",
+      "integrity": "sha1-QtiN0RZhi88A1hBt1URvNCeQL/E="
+    },
+    "tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "requires": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "traverse": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.4.6.tgz",
+      "integrity": "sha1-0EsigOTHkqWBVCnve4tgxkyczDQ="
+    },
+    "trim-newlines": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz",
+      "integrity": "sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA="
+    },
+    "trim-off-newlines": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz",
+      "integrity": "sha1-n5up2e+odkw4dpi8v+sshI8RrbM="
+    },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
+    "trim-right": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
+      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
+    },
+    "tslib": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "requires": {
+        "prelude-ls": "~1.1.2"
+      }
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
+    "uglify-js": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.12.tgz",
+      "integrity": "sha512-KeQesOpPiZNgVwJj8Ge3P4JYbQHUdZzpx6Fahy6eKAYRSV4zhVmLXoC+JtOeYxcHCHTve8RG1ZGdTvpeOUM26Q==",
+      "optional": true,
+      "requires": {
+        "commander": "~2.20.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "underscore": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+      "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^1.0.4",
+        "unicode-property-aliases-ecmascript": "^1.0.4"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g=="
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz",
+      "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
+    },
+    "union-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
+      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^0.4.3"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "set-value": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
+          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-extendable": "^0.1.1",
+            "is-plain-object": "^2.0.1",
+            "to-object-path": "^0.3.0"
+          }
+        }
+      }
+    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.1.tgz",
+      "integrity": "sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==",
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "unique-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
+      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
+      "requires": {
+        "crypto-random-string": "^1.0.0"
+      }
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+        }
+      }
+    },
+    "unzip-response": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
+      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
+    },
+    "upath": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
+      "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw=="
+    },
+    "update-notifier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.3.0.tgz",
+      "integrity": "sha1-TognpruRUUCrCTVZ1wFOPruDdFE=",
+      "requires": {
+        "boxen": "^1.2.1",
+        "chalk": "^2.0.1",
+        "configstore": "^3.0.0",
+        "import-lazy": "^2.1.0",
+        "is-installed-globally": "^0.1.0",
+        "is-npm": "^1.0.0",
+        "latest-version": "^3.0.0",
+        "semver-diff": "^2.0.0",
+        "xdg-basedir": "^3.0.0"
+      }
+    },
+    "uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+    },
+    "url": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
+      "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        }
+      }
+    },
+    "url-parse": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
+      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "url-parse-lax": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "requires": {
+        "prepend-http": "^1.0.1"
+      }
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
+    },
+    "user-home": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
+      "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=",
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    },
+    "userhome": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/userhome/-/userhome-1.0.0.tgz",
+      "integrity": "sha1-tkkf8S0hpecmcd+czIcX4cZojAs="
+    },
+    "util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "util.promisify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "object.getownpropertydescriptors": "^2.0.3"
+      }
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+    },
+    "v8-compile-cache": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
+      "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w=="
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "vinyl": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
+      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
+      "requires": {
+        "clone": "^1.0.0",
+        "clone-stats": "^0.0.1",
+        "replace-ext": "0.0.1"
+      }
+    },
+    "vm-browserify": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
+      "requires": {
+        "indexof": "0.0.1"
+      }
+    },
+    "w3c-hr-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
+      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
+      "requires": {
+        "browser-process-hrtime": "^0.1.2"
+      }
+    },
+    "walker": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
+      "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
+      "requires": {
+        "makeerror": "1.0.x"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "watchpack": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.5.0.tgz",
+      "integrity": "sha512-RSlipNQB1u48cq0wH/BNfCu1tD/cJ8ydFIkNYhp9o+3d+8unClkIovpW5qpFPgmL9OE48wfAnlZydXByWP82AA==",
+      "requires": {
+        "chokidar": "^2.0.2",
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0"
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "requires": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "web-ext": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-3.0.0.tgz",
+      "integrity": "sha512-pUT2YYSnECH/SqKXB0m92HWzAAOt97wJpkSHu7AddyxzclN3R9A2IHq+KUzaXEjiwWzVs/+yUOSpmuwCDouNNg==",
+      "requires": {
+        "@babel/polyfill": "7.2.5",
+        "@babel/runtime": "7.3.1",
+        "@cliqz-oss/firefox-client": "0.3.1",
+        "@cliqz-oss/node-firefox-connect": "1.2.1",
+        "adbkit": "2.11.0",
+        "addons-linter": "1.6.1",
+        "bunyan": "1.8.12",
+        "camelcase": "4.1.0",
+        "debounce": "1.1.0",
+        "decamelize": "2.0.0",
+        "es6-error": "4.1.1",
+        "es6-promisify": "5.0.0",
+        "event-to-promise": "0.8.0",
+        "firefox-profile": "1.2.0",
+        "fx-runner": "1.0.10",
+        "git-rev-sync": "1.9.1",
+        "mkdirp": "0.5.1",
+        "multimatch": "2.1.0",
+        "mz": "2.7.0",
+        "node-notifier": "5.2.1",
+        "opn": "5.3.0",
+        "parse-json": "4.0.0",
+        "require-uncached": "1.0.3",
+        "sign-addon": "0.3.1",
+        "source-map-support": "0.5.3",
+        "stream-to-promise": "2.2.0",
+        "strip-json-comments": "2.0.1",
+        "tmp": "0.0.33",
+        "update-notifier": "2.3.0",
+        "watchpack": "1.5.0",
+        "yargs": "6.6.0",
+        "zip-dir": "1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "lcid": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+          "requires": {
+            "invert-kv": "^1.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          },
+          "dependencies": {
+            "parse-json": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+              "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+              "requires": {
+                "error-ex": "^1.2.0"
+              }
+            }
+          }
+        },
+        "node-notifier": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.2.1.tgz",
+          "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==",
+          "requires": {
+            "growly": "^1.3.0",
+            "semver": "^5.4.1",
+            "shellwords": "^0.1.1",
+            "which": "^1.3.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
+          "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
+          "requires": {
+            "source-map": "^0.6.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "6.6.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
+          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^4.2.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+              "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+            },
+            "decamelize": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+              "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+            }
+          }
+        },
+        "yargs-parser": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
+          "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
+          "requires": {
+            "camelcase": "^3.0.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+              "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+            }
+          }
+        }
+      }
+    },
+    "webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
+    },
+    "webpack": {
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.31.0.tgz",
+      "integrity": "sha512-n6RVO3X0LbbipoE62akME9K/JI7qYrwwufs20VvgNNpqUoH4860KkaxJTbGq5bgkVZF9FqyyTG/0WPLH3PVNJA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-module-context": "1.8.5",
+        "@webassemblyjs/wasm-edit": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5",
+        "acorn": "^6.0.5",
+        "acorn-dynamic-import": "^4.0.0",
+        "ajv": "^6.1.0",
+        "ajv-keywords": "^3.1.0",
+        "chrome-trace-event": "^1.0.0",
+        "enhanced-resolve": "^4.1.0",
+        "eslint-scope": "^4.0.0",
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^2.3.0",
+        "loader-utils": "^1.1.0",
+        "memory-fs": "~0.4.1",
+        "micromatch": "^3.1.8",
+        "mkdirp": "~0.5.0",
+        "neo-async": "^2.5.0",
+        "node-libs-browser": "^2.0.0",
+        "schema-utils": "^1.0.0",
+        "tapable": "^1.1.0",
+        "terser-webpack-plugin": "^1.1.0",
+        "watchpack": "^1.5.0",
+        "webpack-sources": "^1.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
+          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
+        },
+        "ajv": {
+          "version": "6.10.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
+          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.0.tgz",
+          "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw=="
+        },
+        "browserify-zlib": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+          "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+          "requires": {
+            "pako": "~1.0.5"
+          }
+        },
+        "buffer": {
+          "version": "4.9.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+          "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4",
+            "isarray": "^1.0.0"
+          }
+        },
+        "constants-browserify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+          "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+        },
+        "crypto-browserify": {
+          "version": "3.12.0",
+          "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+          "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+          "requires": {
+            "browserify-cipher": "^1.0.0",
+            "browserify-sign": "^4.0.0",
+            "create-ecdh": "^4.0.0",
+            "create-hash": "^1.1.0",
+            "create-hmac": "^1.1.0",
+            "diffie-hellman": "^5.0.0",
+            "inherits": "^2.0.1",
+            "pbkdf2": "^3.0.3",
+            "public-encrypt": "^4.0.0",
+            "randombytes": "^2.0.0",
+            "randomfill": "^1.0.3"
+          }
+        },
+        "eslint-scope": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        },
+        "https-browserify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+          "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
+        "node-libs-browser": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.0.tgz",
+          "integrity": "sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==",
+          "requires": {
+            "assert": "^1.1.1",
+            "browserify-zlib": "^0.2.0",
+            "buffer": "^4.3.0",
+            "console-browserify": "^1.1.0",
+            "constants-browserify": "^1.0.0",
+            "crypto-browserify": "^3.11.0",
+            "domain-browser": "^1.1.1",
+            "events": "^3.0.0",
+            "https-browserify": "^1.0.0",
+            "os-browserify": "^0.3.0",
+            "path-browserify": "0.0.0",
+            "process": "^0.11.10",
+            "punycode": "^1.2.4",
+            "querystring-es3": "^0.2.0",
+            "readable-stream": "^2.3.3",
+            "stream-browserify": "^2.0.1",
+            "stream-http": "^2.7.2",
+            "string_decoder": "^1.0.0",
+            "timers-browserify": "^2.0.4",
+            "tty-browserify": "0.0.0",
+            "url": "^0.11.0",
+            "util": "^0.11.0",
+            "vm-browserify": "0.0.4"
+          }
+        },
+        "os-browserify": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+          "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+        },
+        "pako": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+          "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        },
+        "stream-browserify": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+          "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+          "requires": {
+            "inherits": "~2.0.1",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "timers-browserify": {
+          "version": "2.0.10",
+          "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz",
+          "integrity": "sha512-YvC1SV1XdOUaL6gx5CoGroT3Gu49pK9+TZ38ErPldOWW4j49GI1HKs9DV+KGq/w6y+LZ72W1c8cKz2vzY+qpzg==",
+          "requires": {
+            "setimmediate": "^1.0.4"
+          }
+        },
+        "url": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+          "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+          "requires": {
+            "punycode": "1.3.2",
+            "querystring": "0.2.0"
+          },
+          "dependencies": {
+            "punycode": {
+              "version": "1.3.2",
+              "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+              "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+            }
+          }
+        },
+        "util": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
+    "webpack-cli": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.2.tgz",
+      "integrity": "sha512-FLkobnaJJ+03j5eplxlI0TUxhGCOdfewspIGuvDVtpOlrAuKMFC57K42Ukxqs1tn8947/PM6tP95gQc0DCzRYA==",
+      "requires": {
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "enhanced-resolve": "^4.1.0",
+        "findup-sync": "^2.0.0",
+        "global-modules": "^1.0.0",
+        "import-local": "^2.0.0",
+        "interpret": "^1.1.0",
+        "loader-utils": "^1.1.0",
+        "supports-color": "^5.5.0",
+        "v8-compile-cache": "^2.0.2",
+        "yargs": "^12.0.5"
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.6.2.tgz",
+      "integrity": "sha512-A47I5SX60IkHrMmZUlB0ZKSWi29TZTcPz7cha1Z75yYOsgWh/1AcPmQEbC8ZIbU3A1ytSv1PMU0PyPz2Lmz2jg==",
+      "requires": {
+        "memory-fs": "^0.4.1",
+        "mime": "^2.3.1",
+        "range-parser": "^1.0.3",
+        "webpack-log": "^2.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.2.tgz",
+          "integrity": "sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg=="
+        }
+      }
+    },
+    "webpack-dev-server": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.3.1.tgz",
+      "integrity": "sha512-jY09LikOyGZrxVTXK0mgIq9y2IhCoJ05848dKZqX1gAGLU1YDqgpOT71+W53JH/wI4v6ky4hm+KvSyW14JEs5A==",
+      "requires": {
+        "ansi-html": "0.0.7",
+        "bonjour": "^3.5.0",
+        "chokidar": "^2.1.5",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^1.6.0",
+        "debug": "^4.1.1",
+        "del": "^4.1.0",
+        "express": "^4.16.4",
+        "html-entities": "^1.2.1",
+        "http-proxy-middleware": "^0.19.1",
+        "import-local": "^2.0.0",
+        "internal-ip": "^4.2.0",
+        "ip": "^1.1.5",
+        "killable": "^1.0.1",
+        "loglevel": "^1.6.1",
+        "opn": "^5.5.0",
+        "portfinder": "^1.0.20",
+        "schema-utils": "^1.0.0",
+        "selfsigned": "^1.10.4",
+        "semver": "^6.0.0",
+        "serve-index": "^1.9.1",
+        "sockjs": "0.3.19",
+        "sockjs-client": "1.3.0",
+        "spdy": "^4.0.0",
+        "strip-ansi": "^3.0.1",
+        "supports-color": "^6.1.0",
+        "url": "^0.11.0",
+        "webpack-dev-middleware": "^3.6.2",
+        "webpack-log": "^2.0.0",
+        "yargs": "12.0.5"
+      },
+      "dependencies": {
+        "opn": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
+          "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
+          "requires": {
+            "is-wsl": "^1.1.0"
+          }
+        },
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        },
+        "semver": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
+          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "url": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+          "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+          "requires": {
+            "punycode": "1.3.2",
+            "querystring": "0.2.0"
+          }
+        }
+      }
+    },
+    "webpack-log": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
+      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+      "requires": {
+        "ansi-colors": "^3.0.0",
+        "uuid": "^3.3.2"
+      }
+    },
+    "webpack-sources": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",
+      "integrity": "sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==",
+      "requires": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "websocket-driver": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
+      "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
+      "requires": {
+        "http-parser-js": ">=0.4.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-fetch": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
+      "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA="
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "whatwg-url": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
+      "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
+      "requires": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "when": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.7.7.tgz",
+      "integrity": "sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg="
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "widest-line": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "requires": {
+        "string-width": "^2.1.1"
+      }
+    },
+    "winreg": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz",
+      "integrity": "sha1-BxBVVLoanQiXklHRKUdb/64wBrc="
+    },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
+    "wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "requires": {
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "write": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
+      "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
+      "requires": {
+        "mkdirp": "^0.5.1"
+      }
+    },
+    "write-file-atomic": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.1.tgz",
+      "integrity": "sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "write-json-file": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-2.3.0.tgz",
+      "integrity": "sha1-K2TIozAE1UuGmMdtWFp3zrYdoy8=",
+      "requires": {
+        "detect-indent": "^5.0.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^1.0.0",
+        "pify": "^3.0.0",
+        "sort-keys": "^2.0.0",
+        "write-file-atomic": "^2.0.0"
+      },
+      "dependencies": {
+        "detect-indent": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
+          "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50="
+        },
+        "make-dir": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "sort-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
+          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
+    "write-pkg": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
+      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
+      "requires": {
+        "sort-keys": "^2.0.0",
+        "write-json-file": "^2.2.0"
+      },
+      "dependencies": {
+        "sort-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
+          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
+    "ws": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
+      "requires": {
+        "async-limiter": "~1.0.0"
+      }
+    },
+    "xdg-basedir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
+      "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
+    },
+    "xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "requires": {
+        "sax": "^1.2.4"
+      }
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "xml2js": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~9.0.1"
+      }
+    },
+    "xmlbuilder": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
+    },
+    "xmldom": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
+      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
+    },
+    "xregexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
+      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg=="
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+    },
+    "y18n": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "yargs": {
+      "version": "12.0.5",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+      "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+      "requires": {
+        "cliui": "^4.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^1.0.1",
+        "os-locale": "^3.0.0",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^1.0.1",
+        "set-blocking": "^2.0.0",
+        "string-width": "^2.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^3.2.1 || ^4.0.0",
+        "yargs-parser": "^11.1.1"
+      },
+      "dependencies": {
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+      "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "zip-dir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.2.tgz",
+      "integrity": "sha1-JT+QeurWKiGs2HIdi4gDKyQRwFE=",
+      "requires": {
+        "async": "^1.5.2",
+        "jszip": "^2.4.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        }
+      }
+    },
+    "zip-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.0.1.tgz",
+      "integrity": "sha512-c+eUhhkDpaK87G/py74wvWLtz2kzMPNCCkUApkun50ssE0oQliIQzWpTnwjB+MTKVIf2tGzIgHyqW/Y+W77ecQ==",
+      "requires": {
+        "archiver-utils": "^2.0.0",
+        "compress-commons": "^1.2.0",
+        "readable-stream": "^2.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 3834cacd63fd..9f3ba27b2e7c 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
+    "rimraf": "^2.6.3",
     "scheduler": "^0.0.0-6da04b5d8",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 0f5905e2debf..331dcc0c211f 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -6,6 +6,7 @@ const { join } = require('path');
 const rp = require('request-promise');
 const convert = require('xml-js');
 const build = require('../shared/build');
+const rimraf = require('rimraf');
 
 const main = async () => {
   const manifestVersion = await rp(
@@ -29,7 +30,7 @@ const main = async () => {
   execSync('crx pack ./unpacked -o ReactDevTools.crx -p ../../../../key.pem', {
     cwd,
   });
-  execSync('rm packed.zip', { cwd });
+  rimraf.sync(join(cwd, 'packed.zip'));
 
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));

From faea8ed6a97a1eb899d98e154f16a2322aa8df35 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 12 May 2019 07:43:07 -0700
Subject: [PATCH 582/814] Delete package-lock.json

---
 package-lock.json | 15953 --------------------------------------------
 1 file changed, 15953 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index b763eba780cd..000000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,15953 +0,0 @@
-{
-  "version": "4.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@babel/code-frame": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
-      "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
-      "requires": {
-        "@babel/highlight": "^7.0.0"
-      }
-    },
-    "@babel/core": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.4.tgz",
-      "integrity": "sha512-lQgGX3FPRgbz2SKmhMtYgJvVzGZrmjaF4apZ2bLwofAKiSjxU0drPh4S/VasyYXwaTs+A1gvQ45BN8SQJzHsQQ==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/generator": "^7.4.4",
-        "@babel/helpers": "^7.4.4",
-        "@babel/parser": "^7.4.4",
-        "@babel/template": "^7.4.4",
-        "@babel/traverse": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "convert-source-map": "^1.1.0",
-        "debug": "^4.1.0",
-        "json5": "^2.1.0",
-        "lodash": "^4.17.11",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
-        "source-map": "^0.5.0"
-      }
-    },
-    "@babel/generator": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
-      "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
-      "requires": {
-        "@babel/types": "^7.4.4",
-        "jsesc": "^2.5.1",
-        "lodash": "^4.17.11",
-        "source-map": "^0.5.0",
-        "trim-right": "^1.0.1"
-      }
-    },
-    "@babel/helper-annotate-as-pure": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
-      "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz",
-      "integrity": "sha512-qNSR4jrmJ8M1VMM9tibvyRAHXQs2PmaksQF7c1CGJNipfe3D8p+wgNwgso/P2A2r2mdgBWAXljNWR0QRZAMW8w==",
-      "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-builder-react-jsx": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.3.0.tgz",
-      "integrity": "sha512-MjA9KgwCuPEkQd9ncSXvSyJ5y+j2sICHyrI0M3L+6fnS4wMSNDc1ARXsbTfbb2cXHn17VisSnU/sHFTCxVxSMw==",
-      "requires": {
-        "@babel/types": "^7.3.0",
-        "esutils": "^2.0.0"
-      }
-    },
-    "@babel/helper-call-delegate": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz",
-      "integrity": "sha512-l79boDFJ8S1c5hvQvG+rc+wHw6IuH7YldmRKsYtpbawsxURu/paVy57FZMomGK22/JckepaikOkY0MoAmdyOlQ==",
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.4.4",
-        "@babel/traverse": "^7.4.4",
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz",
-      "integrity": "sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA==",
-      "requires": {
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-member-expression-to-functions": "^7.0.0",
-        "@babel/helper-optimise-call-expression": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-replace-supers": "^7.4.4",
-        "@babel/helper-split-export-declaration": "^7.4.4"
-      }
-    },
-    "@babel/helper-define-map": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz",
-      "integrity": "sha512-IX3Ln8gLhZpSuqHJSnTNBWGDE9kdkTEWl21A/K7PQ00tseBwbqCHTvNLHSBd9M0R5rER4h5Rsvj9vw0R5SieBg==",
-      "requires": {
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/types": "^7.4.4",
-        "lodash": "^4.17.11"
-      }
-    },
-    "@babel/helper-explode-assignable-expression": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz",
-      "integrity": "sha512-NRQpfHrJ1msCHtKjbzs9YcMmJZOg6mQMmGRB+hbamEdG5PNpaSm95275VD92DvJKuyl0s2sFiDmMZ+EnnvufqA==",
-      "requires": {
-        "@babel/traverse": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-function-name": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
-      "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.0.0",
-        "@babel/template": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz",
-      "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-hoist-variables": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz",
-      "integrity": "sha512-VYk2/H/BnYbZDDg39hr3t2kKyifAm1W6zHRfhx8jGjIHpQEBv9dry7oQ2f3+J703TLu69nYdxsovl0XYfcnK4w==",
-      "requires": {
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/helper-member-expression-to-functions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0.tgz",
-      "integrity": "sha512-avo+lm/QmZlv27Zsi0xEor2fKcqWG56D5ae9dzklpIaY7cQMK5N8VSpaNVPPagiqmy7LrEjK1IWdGMOqPu5csg==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-module-imports": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
-      "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-module-transforms": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz",
-      "integrity": "sha512-3Z1yp8TVQf+B4ynN7WoHPKS8EkdTbgAEy0nU0rs/1Kw4pDgmvYH3rz3aI11KgxKCba2cn7N+tqzV1mY2HMN96w==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/helper-simple-access": "^7.1.0",
-        "@babel/helper-split-export-declaration": "^7.4.4",
-        "@babel/template": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "lodash": "^4.17.11"
-      }
-    },
-    "@babel/helper-optimise-call-expression": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz",
-      "integrity": "sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-plugin-utils": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz",
-      "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA=="
-    },
-    "@babel/helper-regex": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.4.4.tgz",
-      "integrity": "sha512-Y5nuB/kESmR3tKjU8Nkn1wMGEx1tjJX076HBMeL3XLQCu6vA/YRzuTW0bbb+qRnXvQGn+d6Rx953yffl8vEy7Q==",
-      "requires": {
-        "lodash": "^4.17.11"
-      }
-    },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz",
-      "integrity": "sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-wrap-function": "^7.1.0",
-        "@babel/template": "^7.1.0",
-        "@babel/traverse": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-replace-supers": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.4.4.tgz",
-      "integrity": "sha512-04xGEnd+s01nY1l15EuMS1rfKktNF+1CkKmHoErDppjAAZL+IUBZpzT748x262HF7fibaQPhbvWUl5HeSt1EXg==",
-      "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.0.0",
-        "@babel/helper-optimise-call-expression": "^7.0.0",
-        "@babel/traverse": "^7.4.4",
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/helper-simple-access": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz",
-      "integrity": "sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==",
-      "requires": {
-        "@babel/template": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@babel/helper-split-export-declaration": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
-      "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
-      "requires": {
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/helper-wrap-function": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz",
-      "integrity": "sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==",
-      "requires": {
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/template": "^7.1.0",
-        "@babel/traverse": "^7.1.0",
-        "@babel/types": "^7.2.0"
-      }
-    },
-    "@babel/helpers": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.4.4.tgz",
-      "integrity": "sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==",
-      "requires": {
-        "@babel/template": "^7.4.4",
-        "@babel/traverse": "^7.4.4",
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz",
-      "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==",
-      "requires": {
-        "chalk": "^2.0.0",
-        "esutils": "^2.0.2",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "@babel/parser": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz",
-      "integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w=="
-    },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz",
-      "integrity": "sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-remap-async-to-generator": "^7.1.0",
-        "@babel/plugin-syntax-async-generators": "^7.2.0"
-      }
-    },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.4.tgz",
-      "integrity": "sha512-WjKTI8g8d5w1Bc9zgwSz2nfrsNQsXcCf9J9cdCvrJV6RF56yztwm4TmJC0MgJ9tvwO9gUA/mcYe89bLdGfiXFg==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.4.4",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz",
-      "integrity": "sha512-MAFV1CA/YVmYwZG0fBQyXhmj0BHCB5egZHCKWIFVv/XCxAeVGIHfos3SwDck4LvCllENIAg7xMKOG5kH0dzyUg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-json-strings": "^7.2.0"
-      }
-    },
-    "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz",
-      "integrity": "sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-object-rest-spread": "^7.2.0"
-      }
-    },
-    "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz",
-      "integrity": "sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.2.0"
-      }
-    },
-    "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz",
-      "integrity": "sha512-j1NwnOqMG9mFUOH58JTFsA/+ZYzQLUZ/drqWUqxCYLGeu2JFZL8YrNC9hBxKmWtAuOCHPcRpgv7fhap09Fb4kA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-regex": "^7.4.4",
-        "regexpu-core": "^4.5.4"
-      }
-    },
-    "@babel/plugin-syntax-async-generators": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz",
-      "integrity": "sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-syntax-flow": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz",
-      "integrity": "sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-syntax-json-strings": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz",
-      "integrity": "sha512-5UGYnMSLRE1dqqZwug+1LISpA403HzlSfsg6P9VXU6TBjcSHeNlw4DxDx7LgpF+iKZoOG/+uzqoRHTdcUpiZNg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-syntax-jsx": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz",
-      "integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz",
-      "integrity": "sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz",
-      "integrity": "sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz",
-      "integrity": "sha512-ER77Cax1+8/8jCB9fo4Ud161OZzWN5qawi4GusDuRLcDbDG+bIGYY20zb2dfAFdTRGzrfq2xZPvF0R64EHnimg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.4.tgz",
-      "integrity": "sha512-YiqW2Li8TXmzgbXw+STsSqPBPFnGviiaSp6CYOq55X8GQ2SGVLrXB6pNid8HkqkZAzOH6knbai3snhP7v0fNwA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-remap-async-to-generator": "^7.1.0"
-      }
-    },
-    "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz",
-      "integrity": "sha512-ntQPR6q1/NKuphly49+QiQiTN0O63uOwjdD6dhIjSWBI5xlrbUFh720TIpzBhpnrLfv2tNH/BXvLIab1+BAI0w==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.4.4.tgz",
-      "integrity": "sha512-jkTUyWZcTrwxu5DD4rWz6rDB5Cjdmgz6z7M7RLXOJyCUkFBawssDGcGh8M/0FTSB87avyJI1HsTwUXp9nKA1PA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "lodash": "^4.17.11"
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.4.tgz",
-      "integrity": "sha512-/e44eFLImEGIpL9qPxSRat13I5QNRgBLu2hOQJCF7VLy/otSM/sypV1+XaIw5+502RX/+6YaSAPmldk+nhHDPw==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-define-map": "^7.4.4",
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-optimise-call-expression": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-replace-supers": "^7.4.4",
-        "@babel/helper-split-export-declaration": "^7.4.4",
-        "globals": "^11.1.0"
-      }
-    },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz",
-      "integrity": "sha512-kP/drqTxY6Xt3NNpKiMomfgkNn4o7+vKxK2DDKcBG9sHj51vHqMBGy8wbDS/J4lMxnqs153/T3+DmCEAkC5cpA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.4.tgz",
-      "integrity": "sha512-/aOx+nW0w8eHiEHm+BTERB2oJn5D127iye/SUQl7NjHy0lf+j7h4MKMMSOwdazGq9OxgiNADncE+SRJkCxjZpQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-dotall-regex": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.4.4.tgz",
-      "integrity": "sha512-P05YEhRc2h53lZDjRPk/OektxCVevFzZs2Gfjd545Wde3k+yFDbXORgl2e0xpbq8mLcKJ7Idss4fAg0zORN/zg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-regex": "^7.4.4",
-        "regexpu-core": "^4.5.4"
-      }
-    },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz",
-      "integrity": "sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz",
-      "integrity": "sha512-umh4hR6N7mu4Elq9GG8TOu9M0bakvlsREEC+ialrQN6ABS4oDQ69qJv1VtR3uxlKMCQMCvzk7vr17RHKcjx68A==",
-      "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.1.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz",
-      "integrity": "sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-flow": "^7.2.0"
-      }
-    },
-    "@babel/plugin-transform-for-of": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz",
-      "integrity": "sha512-9T/5Dlr14Z9TIEXLXkt8T1DU7F24cbhwhMNUziN3hB1AXoZcdzPcTiKGRn/6iOymDqtTKWnr/BtRKN9JwbKtdQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-function-name": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz",
-      "integrity": "sha512-iU9pv7U+2jC9ANQkKeNF6DrPy4GBa4NWQtl6dHB4Pb3izX2JOEvDTFarlNsBj/63ZEzNNIAMs3Qw4fNCcSOXJA==",
-      "requires": {
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-literals": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz",
-      "integrity": "sha512-2ThDhm4lI4oV7fVQ6pNNK+sx+c/GM5/SaML0w/r4ZB7sAneD/piDJtwdKlNckXeyGK7wlwg2E2w33C/Hh+VFCg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz",
-      "integrity": "sha512-HiU3zKkSU6scTidmnFJ0bMX8hz5ixC93b4MHMiYebmk2lUVNGOboPsqQvx5LzooihijUoLR/v7Nc1rbBtnc7FA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-modules-amd": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz",
-      "integrity": "sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.1.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.4.tgz",
-      "integrity": "sha512-4sfBOJt58sEo9a2BQXnZq+Q3ZTSAUXyK3E30o36BOGnJ+tvJ6YSxF0PG6kERvbeISgProodWuI9UVG3/FMY6iw==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.4.4",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-simple-access": "^7.1.0"
-      }
-    },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.4.tgz",
-      "integrity": "sha512-MSiModfILQc3/oqnG7NrP1jHaSPryO6tA2kOMmAQApz5dayPxWiHqmq4sWH2xF5LcQK56LlbKByCd8Aah/OIkQ==",
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.4.4",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-modules-umd": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz",
-      "integrity": "sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.1.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.4.tgz",
-      "integrity": "sha512-Ki+Y9nXBlKfhD+LXaRS7v95TtTGYRAf9Y1rTDiE75zf8YQz4GDaWRXosMfJBXxnk88mGFjWdCRIeqDbon7spYA==",
-      "requires": {
-        "regexp-tree": "^0.1.0"
-      }
-    },
-    "@babel/plugin-transform-new-target": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz",
-      "integrity": "sha512-r1z3T2DNGQwwe2vPGZMBNjioT2scgWzK9BCnDEh+46z8EEwXBq24uRzd65I7pjtugzPSj921aM15RpESgzsSuA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-object-super": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz",
-      "integrity": "sha512-VMyhPYZISFZAqAPVkiYb7dUe2AsVi2/wCT5+wZdsNO31FojQJa9ns40hzZ6U9f50Jlq4w6qwzdBB2uwqZ00ebg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-replace-supers": "^7.1.0"
-      }
-    },
-    "@babel/plugin-transform-parameters": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz",
-      "integrity": "sha512-oMh5DUO1V63nZcu/ZVLQFqiihBGo4OpxJxR1otF50GMeCLiRx5nUdtokd+u9SuVJrvvuIh9OosRFPP4pIPnwmw==",
-      "requires": {
-        "@babel/helper-call-delegate": "^7.4.4",
-        "@babel/helper-get-function-arity": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-property-literals": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz",
-      "integrity": "sha512-9q7Dbk4RhgcLp8ebduOpCbtjh7C0itoLYHXd9ueASKAG/is5PQtMR5VJGka9NKqGhYEGn5ITahd4h9QeBMylWQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-react-display-name": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz",
-      "integrity": "sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-react-jsx": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz",
-      "integrity": "sha512-a/+aRb7R06WcKvQLOu4/TpjKOdvVEKRLWFpKcNuHhiREPgGRB4TQJxq07+EZLS8LFVYpfq1a5lDUnuMdcCpBKg==",
-      "requires": {
-        "@babel/helper-builder-react-jsx": "^7.3.0",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.2.0"
-      }
-    },
-    "@babel/plugin-transform-react-jsx-self": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz",
-      "integrity": "sha512-v6S5L/myicZEy+jr6ielB0OR8h+EH/1QFx/YJ7c7Ua+7lqsjj/vW6fD5FR9hB/6y7mGbfT4vAURn3xqBxsUcdg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.2.0"
-      }
-    },
-    "@babel/plugin-transform-react-jsx-source": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz",
-      "integrity": "sha512-A32OkKTp4i5U6aE88GwwcuV4HAprUgHcTq0sSafLxjr6AW0QahrCRCjxogkbbcdtpbXkuTOlgpjophCxb6sh5g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.2.0"
-      }
-    },
-    "@babel/plugin-transform-regenerator": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.4.tgz",
-      "integrity": "sha512-Zz3w+pX1SI0KMIiqshFZkwnVGUhDZzpX2vtPzfJBKQQq8WsP/Xy9DNdELWivxcKOCX/Pywge4SiEaPaLtoDT4g==",
-      "requires": {
-        "regenerator-transform": "^0.13.4"
-      }
-    },
-    "@babel/plugin-transform-reserved-words": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz",
-      "integrity": "sha512-fz43fqW8E1tAB3DKF19/vxbpib1fuyCwSPE418ge5ZxILnBhWyhtPgz8eh1RCGGJlwvksHkyxMxh0eenFi+kFw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz",
-      "integrity": "sha512-QP4eUM83ha9zmYtpbnyjTLAGKQritA5XW/iG9cjtuOI8s1RuL/3V6a3DeSHfKutJQ+ayUfeZJPcnCYEQzaPQqg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-spread": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.2.2.tgz",
-      "integrity": "sha512-KWfky/58vubwtS0hLqEnrWJjsMGaOeSBn90Ezn5Jeg9Z8KKHmELbP1yGylMlm5N6TPKeY9A2+UaSYLdxahg01w==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-sticky-regex": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz",
-      "integrity": "sha512-KKYCoGaRAf+ckH8gEL3JHUaFVyNHKe3ASNsZ+AlktgHevvxGigoIttrEJb8iKN03Q7Eazlv1s6cx2B2cQ3Jabw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-regex": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-template-literals": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz",
-      "integrity": "sha512-mQrEC4TWkhLN0z8ygIvEL9ZEToPhG5K7KDW3pzGqOfIGZ28Jb0POUkeWcoz8HnHvhFy6dwAT1j8OzqN8s804+g==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz",
-      "integrity": "sha512-2LNhETWYxiYysBtrBTqL8+La0jIoQQnIScUJc74OYvUGRmkskNY4EzLCnjHBzdmb38wqtTaixpo1NctEcvMDZw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz",
-      "integrity": "sha512-il+/XdNw01i93+M9J9u4T7/e/Ue/vWfNZE4IRUQjplu2Mqb/AFTDimkw2tdEdSH50wuQXZAbXSql0UphQke+vA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-regex": "^7.4.4",
-        "regexpu-core": "^4.5.4"
-      }
-    },
-    "@babel/polyfill": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.2.5.tgz",
-      "integrity": "sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==",
-      "requires": {
-        "core-js": "^2.5.7",
-        "regenerator-runtime": "^0.12.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-        },
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-        }
-      }
-    },
-    "@babel/preset-env": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.4.tgz",
-      "integrity": "sha512-FU1H+ACWqZZqfw1x2G1tgtSSYSfxJLkpaUQL37CenULFARDo+h4xJoVHzRoHbK+85ViLciuI7ME4WTIhFRBBlw==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
-        "@babel/plugin-proposal-json-strings": "^7.2.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.2.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-syntax-async-generators": "^7.2.0",
-        "@babel/plugin-syntax-json-strings": "^7.2.0",
-        "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.2.0",
-        "@babel/plugin-transform-arrow-functions": "^7.2.0",
-        "@babel/plugin-transform-async-to-generator": "^7.4.4",
-        "@babel/plugin-transform-block-scoped-functions": "^7.2.0",
-        "@babel/plugin-transform-block-scoping": "^7.4.4",
-        "@babel/plugin-transform-classes": "^7.4.4",
-        "@babel/plugin-transform-computed-properties": "^7.2.0",
-        "@babel/plugin-transform-destructuring": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
-        "@babel/plugin-transform-duplicate-keys": "^7.2.0",
-        "@babel/plugin-transform-exponentiation-operator": "^7.2.0",
-        "@babel/plugin-transform-for-of": "^7.4.4",
-        "@babel/plugin-transform-function-name": "^7.4.4",
-        "@babel/plugin-transform-literals": "^7.2.0",
-        "@babel/plugin-transform-member-expression-literals": "^7.2.0",
-        "@babel/plugin-transform-modules-amd": "^7.2.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.4.4",
-        "@babel/plugin-transform-modules-systemjs": "^7.4.4",
-        "@babel/plugin-transform-modules-umd": "^7.2.0",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.4.4",
-        "@babel/plugin-transform-new-target": "^7.4.4",
-        "@babel/plugin-transform-object-super": "^7.2.0",
-        "@babel/plugin-transform-parameters": "^7.4.4",
-        "@babel/plugin-transform-property-literals": "^7.2.0",
-        "@babel/plugin-transform-regenerator": "^7.4.4",
-        "@babel/plugin-transform-reserved-words": "^7.2.0",
-        "@babel/plugin-transform-shorthand-properties": "^7.2.0",
-        "@babel/plugin-transform-spread": "^7.2.0",
-        "@babel/plugin-transform-sticky-regex": "^7.2.0",
-        "@babel/plugin-transform-template-literals": "^7.4.4",
-        "@babel/plugin-transform-typeof-symbol": "^7.2.0",
-        "@babel/plugin-transform-unicode-regex": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "browserslist": "^4.5.2",
-        "core-js-compat": "^3.0.0",
-        "invariant": "^2.2.2",
-        "js-levenshtein": "^1.1.3",
-        "semver": "^5.5.0"
-      }
-    },
-    "@babel/preset-flow": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0.tgz",
-      "integrity": "sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-transform-flow-strip-types": "^7.0.0"
-      }
-    },
-    "@babel/preset-react": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.0.0.tgz",
-      "integrity": "sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-transform-react-display-name": "^7.0.0",
-        "@babel/plugin-transform-react-jsx": "^7.0.0",
-        "@babel/plugin-transform-react-jsx-self": "^7.0.0",
-        "@babel/plugin-transform-react-jsx-source": "^7.0.0"
-      }
-    },
-    "@babel/runtime": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz",
-      "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==",
-      "requires": {
-        "regenerator-runtime": "^0.13.2"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
-        }
-      }
-    },
-    "@babel/template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
-      "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.4.4",
-        "@babel/types": "^7.4.4"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.4.tgz",
-      "integrity": "sha512-Gw6qqkw/e6AGzlyj9KnkabJX7VcubqPtkUQVAwkc0wUMldr3A/hezNB3Rc5eIvId95iSGkGIOe5hh1kMKf951A==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/generator": "^7.4.4",
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-split-export-declaration": "^7.4.4",
-        "@babel/parser": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.11"
-      }
-    },
-    "@babel/types": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
-      "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
-      "requires": {
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.11",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "@cliqz-oss/firefox-client": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@cliqz-oss/firefox-client/-/firefox-client-0.3.1.tgz",
-      "integrity": "sha512-RO+Tops/wGnBzWoZYkCraqyh2JqOejqJq5/a4b54HhmjTNSKdUPwAOK17EGg/zPb0nWqkuB7QyZsI9bo+ev8Kw==",
-      "requires": {
-        "colors": "0.5.x",
-        "js-select": "~0.6.0"
-      }
-    },
-    "@cliqz-oss/node-firefox-connect": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@cliqz-oss/node-firefox-connect/-/node-firefox-connect-1.2.1.tgz",
-      "integrity": "sha512-O/IyiB5pfztCdmxQZg0/xeq5w+YiP3gtJz8d4We2EpLPKzbDVjOrtfLKYgVfm6Ya6mbvDge1uLkSRwaoVCWKnA==",
-      "requires": {
-        "@cliqz-oss/firefox-client": "0.3.1",
-        "es6-promise": "^2.0.1"
-      }
-    },
-    "@cnakazawa/watch": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.3.tgz",
-      "integrity": "sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==",
-      "requires": {
-        "exec-sh": "^0.3.2",
-        "minimist": "^1.2.0"
-      }
-    },
-    "@icons/material": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
-      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
-    },
-    "@jest/console": {
-      "version": "24.7.1",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
-      "integrity": "sha512-iNhtIy2M8bXlAOULWVTUxmnelTLFneTNEkHCgPmgd+zNwy9zVddJ6oS5rZ9iwoscNdT5mMwUd0C51v/fSlzItg==",
-      "requires": {
-        "@jest/source-map": "^24.3.0",
-        "chalk": "^2.0.1",
-        "slash": "^2.0.0"
-      }
-    },
-    "@jest/core": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-24.8.0.tgz",
-      "integrity": "sha512-R9rhAJwCBQzaRnrRgAdVfnglUuATXdwTRsYqs6NMdVcAl5euG8LtWDe+fVkN27YfKVBW61IojVsXKaOmSnqd/A==",
-      "requires": {
-        "@jest/console": "^24.7.1",
-        "@jest/reporters": "^24.8.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/transform": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.1.15",
-        "jest-changed-files": "^24.8.0",
-        "jest-config": "^24.8.0",
-        "jest-haste-map": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve-dependencies": "^24.8.0",
-        "jest-runner": "^24.8.0",
-        "jest-runtime": "^24.8.0",
-        "jest-snapshot": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jest-validate": "^24.8.0",
-        "jest-watcher": "^24.8.0",
-        "micromatch": "^3.1.10",
-        "p-each-series": "^1.0.0",
-        "pirates": "^4.0.1",
-        "realpath-native": "^1.1.0",
-        "rimraf": "^2.5.4",
-        "strip-ansi": "^5.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        }
-      }
-    },
-    "@jest/environment": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-24.8.0.tgz",
-      "integrity": "sha512-vlGt2HLg7qM+vtBrSkjDxk9K0YtRBi7HfRFaDxoRtyi+DyVChzhF20duvpdAnKVBV6W5tym8jm0U9EfXbDk1tw==",
-      "requires": {
-        "@jest/fake-timers": "^24.8.0",
-        "@jest/transform": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "jest-mock": "^24.8.0"
-      }
-    },
-    "@jest/fake-timers": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-24.8.0.tgz",
-      "integrity": "sha512-2M4d5MufVXwi6VzZhJ9f5S/wU4ud2ck0kxPof1Iz3zWx6Y+V2eJrES9jEktB6O3o/oEyk+il/uNu9PvASjWXQw==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-mock": "^24.8.0"
-      }
-    },
-    "@jest/reporters": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-24.8.0.tgz",
-      "integrity": "sha512-eZ9TyUYpyIIXfYCrw0UHUWUvE35vx5I92HGMgS93Pv7du+GHIzl+/vh8Qj9MCWFK/4TqyttVBPakWMOfZRIfxw==",
-      "requires": {
-        "@jest/environment": "^24.8.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/transform": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "istanbul-lib-coverage": "^2.0.2",
-        "istanbul-lib-instrument": "^3.0.1",
-        "istanbul-lib-report": "^2.0.4",
-        "istanbul-lib-source-maps": "^3.0.1",
-        "istanbul-reports": "^2.1.1",
-        "jest-haste-map": "^24.8.0",
-        "jest-resolve": "^24.8.0",
-        "jest-runtime": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jest-worker": "^24.6.0",
-        "node-notifier": "^5.2.1",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^2.0.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/source-map": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.3.0.tgz",
-      "integrity": "sha512-zALZt1t2ou8le/crCeeiRYzvdnTzaIlpOWaet45lNSqNJUnXbppUUFR4ZUAlzgDmKee4Q5P/tKXypI1RiHwgag==",
-      "requires": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.1.15",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/test-result": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.8.0.tgz",
-      "integrity": "sha512-+YdLlxwizlfqkFDh7Mc7ONPQAhA4YylU1s529vVM1rsf67vGZH/2GGm5uO8QzPeVyaVMobCQ7FTxl38QrKRlng==",
-      "requires": {
-        "@jest/console": "^24.7.1",
-        "@jest/types": "^24.8.0",
-        "@types/istanbul-lib-coverage": "^2.0.0"
-      }
-    },
-    "@jest/test-sequencer": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-24.8.0.tgz",
-      "integrity": "sha512-OzL/2yHyPdCHXEzhoBuq37CE99nkme15eHkAzXRVqthreWZamEMA0WoetwstsQBCXABhczpK03JNbc4L01vvLg==",
-      "requires": {
-        "@jest/test-result": "^24.8.0",
-        "jest-haste-map": "^24.8.0",
-        "jest-runner": "^24.8.0",
-        "jest-runtime": "^24.8.0"
-      }
-    },
-    "@jest/transform": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-24.8.0.tgz",
-      "integrity": "sha512-xBMfFUP7TortCs0O+Xtez2W7Zu1PLH9bvJgtraN1CDST6LBM/eTOZ9SfwS/lvV8yOfcDpFmwf9bq5cYbXvqsvA==",
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^24.8.0",
-        "babel-plugin-istanbul": "^5.1.0",
-        "chalk": "^2.0.1",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.1.15",
-        "jest-haste-map": "^24.8.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-util": "^24.8.0",
-        "micromatch": "^3.1.10",
-        "realpath-native": "^1.1.0",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "2.4.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/types": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.8.0.tgz",
-      "integrity": "sha512-g17UxVr2YfBtaMUxn9u/4+siG1ptg9IGYAYwvpwn61nBg779RXnjE/m7CxYcIzEt0AbHZZAHSEZNhkE2WxURVg==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^1.1.1",
-        "@types/yargs": "^12.0.9"
-      }
-    },
-    "@reach/auto-id": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.2.0.tgz",
-      "integrity": "sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg=="
-    },
-    "@reach/component-component": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@reach/component-component/-/component-component-0.1.3.tgz",
-      "integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg=="
-    },
-    "@reach/menu-button": {
-      "version": "0.1.17",
-      "resolved": "https://registry.npmjs.org/@reach/menu-button/-/menu-button-0.1.17.tgz",
-      "integrity": "sha512-PuBuabBjyCapax7hQ5qSWKnQy+qpZkosRV7trnO9YjFIfszn1lp+WTI5AciK+rrlsqK7t4LqNTqffI2XBuy2FA==",
-      "requires": {
-        "@reach/component-component": "0.1.3",
-        "@reach/portal": "^0.2.1",
-        "@reach/rect": "0.2.1",
-        "@reach/utils": "^0.2.2",
-        "@reach/window-size": "^0.1.4",
-        "warning": "^4.0.2"
-      }
-    },
-    "@reach/observe-rect": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.0.3.tgz",
-      "integrity": "sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg="
-    },
-    "@reach/portal": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.2.1.tgz",
-      "integrity": "sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==",
-      "requires": {
-        "@reach/component-component": "^0.1.3"
-      }
-    },
-    "@reach/rect": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.2.1.tgz",
-      "integrity": "sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==",
-      "requires": {
-        "@reach/component-component": "^0.1.3",
-        "@reach/observe-rect": "^1.0.3"
-      }
-    },
-    "@reach/tooltip": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@reach/tooltip/-/tooltip-0.2.0.tgz",
-      "integrity": "sha512-RKJkGR+w3vS+flGjcVL82SK016E6rzjG8wC4ZtFu03VCAxJyhveG0uaB3juv7Rx+u8CEwv2gxfWgfMWgrJ2cRA==",
-      "requires": {
-        "@reach/auto-id": "0.2.0",
-        "@reach/portal": "^0.2.1",
-        "@reach/rect": "^0.2.1",
-        "@reach/utils": "^0.2.2",
-        "@reach/visually-hidden": "^0.1.4",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@reach/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-jYeIi46AA5jh2gfdXD/nInUYfeLp3girRafiajP7AVHF6B4hpYAzUSx/ZH4xmPyf5alut5rml2DHxrv+X+Xu+A=="
-    },
-    "@reach/visually-hidden": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz",
-      "integrity": "sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ=="
-    },
-    "@reach/window-size": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@reach/window-size/-/window-size-0.1.4.tgz",
-      "integrity": "sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==",
-      "requires": {
-        "@reach/component-component": "^0.1.3"
-      }
-    },
-    "@samverschueren/stream-to-observable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
-      "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==",
-      "requires": {
-        "any-observable": "^0.3.0"
-      }
-    },
-    "@types/babel__core": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.1.tgz",
-      "integrity": "sha512-+hjBtgcFPYyCTo0A15+nxrCVJL7aC6Acg87TXd5OW3QhHswdrOLoles+ldL2Uk8q++7yIfl4tURtztccdeeyOw==",
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "@types/babel__generator": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.0.2.tgz",
-      "integrity": "sha512-NHcOfab3Zw4q5sEE2COkpfXjoE7o+PmqD9DQW4koUT3roNxwziUdXGnRndMat/LJNUtePwn1TlP4do3uoe3KZQ==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__template": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.2.tgz",
-      "integrity": "sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==",
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__traverse": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.6.tgz",
-      "integrity": "sha512-XYVgHF2sQ0YblLRMLNPB3CkFMewzFmlDsH/TneZFHUXDlABQgh88uOxuez7ZcXxayLFrqLwtDH1t+FmlFwNZxw==",
-      "requires": {
-        "@babel/types": "^7.3.0"
-      }
-    },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
-    },
-    "@types/glob": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
-      "requires": {
-        "@types/events": "*",
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg=="
-    },
-    "@types/istanbul-lib-report": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz",
-      "integrity": "sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "@types/istanbul-reports": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
-      "integrity": "sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "*",
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "@types/minimatch": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
-    },
-    "@types/node": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.0.tgz",
-      "integrity": "sha512-Jrb/x3HT4PTJp6a4avhmJCDEVrPdqLfl3e8GGMbpkGGdwAV5UGlIs4vVEfsHHfylZVOKZWpOqmqFH8CbfOZ6kg=="
-    },
-    "@types/stack-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
-      "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
-    },
-    "@types/yargs": {
-      "version": "12.0.12",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-12.0.12.tgz",
-      "integrity": "sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw=="
-    },
-    "@webassemblyjs/ast": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
-      "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==",
-      "requires": {
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5"
-      }
-    },
-    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz",
-      "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ=="
-    },
-    "@webassemblyjs/helper-api-error": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz",
-      "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA=="
-    },
-    "@webassemblyjs/helper-buffer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz",
-      "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q=="
-    },
-    "@webassemblyjs/helper-code-frame": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz",
-      "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==",
-      "requires": {
-        "@webassemblyjs/wast-printer": "1.8.5"
-      }
-    },
-    "@webassemblyjs/helper-fsm": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz",
-      "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow=="
-    },
-    "@webassemblyjs/helper-module-context": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz",
-      "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "mamacro": "^0.0.3"
-      }
-    },
-    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz",
-      "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ=="
-    },
-    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz",
-      "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5"
-      }
-    },
-    "@webassemblyjs/ieee754": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz",
-      "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==",
-      "requires": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "@webassemblyjs/leb128": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz",
-      "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==",
-      "requires": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/utf8": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz",
-      "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw=="
-    },
-    "@webassemblyjs/wasm-edit": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz",
-      "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/helper-wasm-section": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-opt": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
-        "@webassemblyjs/wast-printer": "1.8.5"
-      }
-    },
-    "@webassemblyjs/wasm-gen": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz",
-      "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
-      }
-    },
-    "@webassemblyjs/wasm-opt": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz",
-      "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5"
-      }
-    },
-    "@webassemblyjs/wasm-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz",
-      "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
-      }
-    },
-    "@webassemblyjs/wast-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz",
-      "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/floating-point-hex-parser": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-code-frame": "1.8.5",
-        "@webassemblyjs/helper-fsm": "1.8.5",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz",
-      "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
-    },
-    "@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-    },
-    "Base64": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
-      "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
-    },
-    "JSONSelect": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/JSONSelect/-/JSONSelect-0.2.1.tgz",
-      "integrity": "sha1-QVQYpSbTP+MddLTe+jyDbUhewgM="
-    },
-    "JSONStream": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
-      "requires": {
-        "jsonparse": "^1.2.0",
-        "through": ">=2.2.7 <3"
-      }
-    },
-    "abab": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
-      "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w=="
-    },
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
-      }
-    },
-    "acorn": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw=="
-    },
-    "acorn-dynamic-import": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
-    },
-    "acorn-globals": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.2.tgz",
-      "integrity": "sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ==",
-      "requires": {
-        "acorn": "^6.0.1",
-        "acorn-walk": "^6.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
-        }
-      }
-    },
-    "acorn-jsx": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
-      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
-      "requires": {
-        "acorn": "^3.0.4"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
-        }
-      }
-    },
-    "acorn-walk": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz",
-      "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw=="
-    },
-    "adbkit": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/adbkit/-/adbkit-2.11.0.tgz",
-      "integrity": "sha512-j2vUhEeZmCiqBP+p77CpPWQTcT20rOmSmRHFUTZUwUpxzeCd3fXop4NAGYztSY9/FNU4bT/qqvYQ4EZKuCXhfA==",
-      "requires": {
-        "adbkit-logcat": "^1.1.0",
-        "adbkit-monkey": "~1.0.1",
-        "bluebird": "~2.9.24",
-        "commander": "^2.3.0",
-        "debug": "~2.6.3",
-        "node-forge": "^0.7.1",
-        "split": "~0.3.3"
-      },
-      "dependencies": {
-        "bluebird": {
-          "version": "2.9.34",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.34.tgz",
-          "integrity": "sha1-L3tOyAIWMoqf3evfacjUlC/v99g="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "split": {
-          "version": "0.3.3",
-          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-          "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=",
-          "requires": {
-            "through": "2"
-          }
-        }
-      }
-    },
-    "adbkit-logcat": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz",
-      "integrity": "sha1-Adf5sM75CTowvLOwB+//MBUIli8="
-    },
-    "adbkit-monkey": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz",
-      "integrity": "sha1-8pG+cBou/FZ6Y/x6pq/N7TFDC+E=",
-      "requires": {
-        "async": "~0.2.9"
-      },
-      "dependencies": {
-        "async": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E="
-        }
-      }
-    },
-    "add-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz",
-      "integrity": "sha1-anmQQ3ynNtXhKI25K9MmbV9csqo="
-    },
-    "addons-linter": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-1.6.1.tgz",
-      "integrity": "sha512-3+N8cskdXHpId0dhfsldgbYGXamtgfGywvU4oPVb1M7imG3pHFoK+VcAr/kPk1VeYGkSmBl2LxnwGHcw1ERvmA==",
-      "requires": {
-        "ajv": "6.9.1",
-        "ajv-merge-patch": "4.1.0",
-        "chalk": "2.4.2",
-        "cheerio": "1.0.0-rc.2",
-        "columnify": "1.5.4",
-        "common-tags": "1.8.0",
-        "crx-parser": "0.1.2",
-        "deepmerge": "3.1.0",
-        "dispensary": "0.30.0",
-        "es6-promisify": "6.0.1",
-        "eslint": "5.13.0",
-        "eslint-plugin-no-unsafe-innerhtml": "1.0.16",
-        "eslint-visitor-keys": "1.0.0",
-        "espree": "5.0.0",
-        "esprima": "3.1.3",
-        "first-chunk-stream": "2.0.0",
-        "fluent-syntax": "0.10.0",
-        "fsevents": "2.0.1",
-        "glob": "7.1.3",
-        "is-mergeable-object": "1.1.0",
-        "jed": "1.1.1",
-        "mdn-browser-compat-data": "0.0.66",
-        "os-locale": "3.1.0",
-        "pino": "5.11.1",
-        "po2json": "0.4.5",
-        "postcss": "7.0.14",
-        "probe-image-size": "4.0.0",
-        "regenerator-runtime": "0.13.1",
-        "relaxed-json": "1.0.1",
-        "semver": "5.6.0",
-        "source-map-support": "0.5.10",
-        "strip-bom-stream": "3.0.0",
-        "tosource": "1.0.0",
-        "upath": "1.1.0",
-        "whatwg-url": "7.0.0",
-        "xmldom": "0.1.27",
-        "yargs": "13.1.0",
-        "yauzl": "2.10.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
-        },
-        "acorn-jsx": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
-          "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
-        },
-        "ajv": {
-          "version": "6.9.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.9.1.tgz",
-          "integrity": "sha512-XDN92U311aINL77ieWHmqCcNlwjoP5cHXDxIxbf2MaPYuCXOHS7gHH8jktxeK5omgd52XbSTX6a4Piwd1pQmzA==",
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-        },
-        "chardet": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-          "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
-        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
-        },
-        "es6-promisify": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.0.1.tgz",
-          "integrity": "sha512-J3ZkwbEnnO+fGAKrjVpeUAnZshAdfZvbhQpqfIH9kSAspReRC4nJnu8ewm55b4y9ElyeuhCTzJD0XiH8Tsbhlw=="
-        },
-        "eslint": {
-          "version": "5.13.0",
-          "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.13.0.tgz",
-          "integrity": "sha512-nqD5WQMisciZC5EHZowejLKQjWGuFS5c70fxqSKlnDME+oz9zmE8KTlX+lHSg+/5wsC/kf9Q9eMkC8qS3oM2fg==",
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "ajv": "^6.5.3",
-            "chalk": "^2.1.0",
-            "cross-spawn": "^6.0.5",
-            "debug": "^4.0.1",
-            "doctrine": "^2.1.0",
-            "eslint-scope": "^4.0.0",
-            "eslint-utils": "^1.3.1",
-            "eslint-visitor-keys": "^1.0.0",
-            "espree": "^5.0.0",
-            "esquery": "^1.0.1",
-            "esutils": "^2.0.2",
-            "file-entry-cache": "^2.0.0",
-            "functional-red-black-tree": "^1.0.1",
-            "glob": "^7.1.2",
-            "globals": "^11.7.0",
-            "ignore": "^4.0.6",
-            "import-fresh": "^3.0.0",
-            "imurmurhash": "^0.1.4",
-            "inquirer": "^6.1.0",
-            "js-yaml": "^3.12.0",
-            "json-stable-stringify-without-jsonify": "^1.0.1",
-            "levn": "^0.3.0",
-            "lodash": "^4.17.5",
-            "minimatch": "^3.0.4",
-            "mkdirp": "^0.5.1",
-            "natural-compare": "^1.4.0",
-            "optionator": "^0.8.2",
-            "path-is-inside": "^1.0.2",
-            "progress": "^2.0.0",
-            "regexpp": "^2.0.1",
-            "semver": "^5.5.1",
-            "strip-ansi": "^4.0.0",
-            "strip-json-comments": "^2.0.1",
-            "table": "^5.0.2",
-            "text-table": "^0.2.0"
-          }
-        },
-        "eslint-scope": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "espree": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.0.tgz",
-          "integrity": "sha512-1MpUfwsdS9MMoN7ZXqAr9e9UKdVHDcvrJpyx7mm1WuQlx/ygErEQBzgi5Nh5qBHIoYweprhtMkTCb9GhcAIcsA==",
-          "requires": {
-            "acorn": "^6.0.2",
-            "acorn-jsx": "^5.0.0",
-            "eslint-visitor-keys": "^1.0.0"
-          }
-        },
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
-        },
-        "external-editor": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
-          "integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
-          "requires": {
-            "chardet": "^0.7.0",
-            "iconv-lite": "^0.4.24",
-            "tmp": "^0.0.33"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-        },
-        "fsevents": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.1.tgz",
-          "integrity": "sha512-p+CXqK/iLvDESUWdn3NA3JVO9HxdfI+iXx8xR3DqWgKZvQNiEVpAyUQo0lmwz8rqksb4xaGerG291xuwwhX2kA==",
-          "optional": true
-        },
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-        },
-        "glob": {
-          "version": "7.1.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "ignore": {
-          "version": "4.0.6",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
-        },
-        "import-fresh": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.0.0.tgz",
-          "integrity": "sha512-pOnA9tfM3Uwics+SaBLCNyZZZbK+4PTu0OPZtLlMIrv17EdBoC15S9Kn8ckJ9TZTyKb3ywNE5y1yeDxxGA7nTQ==",
-          "requires": {
-            "parent-module": "^1.0.0",
-            "resolve-from": "^4.0.0"
-          }
-        },
-        "inquirer": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.3.1.tgz",
-          "integrity": "sha512-MmL624rfkFt4TG9y/Jvmt8vdmOo836U7Y0Hxr2aFk3RelZEGX4Igk0KabWrcaaZaTv9uzglOqWh1Vly+FAWAXA==",
-          "requires": {
-            "ansi-escapes": "^3.2.0",
-            "chalk": "^2.4.2",
-            "cli-cursor": "^2.1.0",
-            "cli-width": "^2.0.0",
-            "external-editor": "^3.0.3",
-            "figures": "^2.0.0",
-            "lodash": "^4.17.11",
-            "mute-stream": "0.0.7",
-            "run-async": "^2.2.0",
-            "rxjs": "^6.4.0",
-            "string-width": "^2.1.0",
-            "strip-ansi": "^5.1.0",
-            "through": "^2.3.6"
-          },
-          "dependencies": {
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-        },
-        "postcss": {
-          "version": "7.0.14",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
-          "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.13.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz",
-          "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA=="
-        },
-        "regexpp": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
-        },
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-        },
-        "semver": {
-          "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
-          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
-        },
-        "slice-ansi": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-          "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "astral-regex": "^1.0.0",
-            "is-fullwidth-code-point": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "source-map-support": {
-          "version": "0.5.10",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.10.tgz",
-          "integrity": "sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==",
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-            }
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "table": {
-          "version": "5.3.3",
-          "resolved": "https://registry.npmjs.org/table/-/table-5.3.3.tgz",
-          "integrity": "sha512-3wUNCgdWX6PNpOe3amTTPWPuF6VGvgzjKCaO1snFj0z7Y3mUPWf5+zDtxUVGispJkDECPmR29wbzh6bVMOHbcw==",
-          "requires": {
-            "ajv": "^6.9.1",
-            "lodash": "^4.17.11",
-            "slice-ansi": "^2.1.0",
-            "string-width": "^3.0.0"
-          },
-          "dependencies": {
-            "string-width": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-              "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-              "requires": {
-                "emoji-regex": "^7.0.1",
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^5.1.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "whatwg-url": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
-          "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^1.0.1",
-            "webidl-conversions": "^4.0.2"
-          }
-        },
-        "yargs": {
-          "version": "13.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.1.0.tgz",
-          "integrity": "sha512-1UhJbXfzHiPqkfXNHYhiz79qM/kZqjTE8yGlEjZa85Q+3+OwcV6NRkV7XOV1W2Eom2bzILeUn55pQYffjVOLAg==",
-          "requires": {
-            "cliui": "^4.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "os-locale": "^3.1.0",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.0.0"
-          },
-          "dependencies": {
-            "string-width": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-              "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-              "requires": {
-                "emoji-regex": "^7.0.1",
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^5.1.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.0.tgz",
-          "integrity": "sha512-Yq+32PrijHRri0vVKQEm+ys8mbqWjLiwQkMFNXEENutzLPP0bE4Lcd4iA3OQY5HF+GD3xXxf0MEHb8E4/SA3AA==",
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
-    "adm-zip": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.13.tgz",
-      "integrity": "sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw=="
-    },
-    "ajv": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-      "requires": {
-        "co": "^4.6.0",
-        "fast-deep-equal": "^1.0.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.3.0"
-      }
-    },
-    "ajv-errors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
-    },
-    "ajv-keywords": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
-      "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I="
-    },
-    "ajv-merge-patch": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz",
-      "integrity": "sha512-0mAYXMSauA8RZ7r+B4+EAOYcZEcO9OK5EiQCR7W7Cv4E44pJj56ZnkKLJ9/PAcOc0dT+LlV9fdDcq2TxVJfOYw==",
-      "requires": {
-        "fast-json-patch": "^2.0.6",
-        "json-merge-patch": "^0.2.3"
-      }
-    },
-    "ansi-align": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
-      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
-      "requires": {
-        "string-width": "^2.0.0"
-      }
-    },
-    "ansi-colors": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
-      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA=="
-    },
-    "ansi-escapes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
-    },
-    "ansi-gray": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
-      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
-      "requires": {
-        "ansi-wrap": "0.1.0"
-      }
-    },
-    "ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4="
-    },
-    "ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
-    },
-    "ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "requires": {
-        "color-convert": "^1.9.0"
-      }
-    },
-    "ansi-wrap": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
-      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768="
-    },
-    "any-observable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
-      "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog=="
-    },
-    "any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
-    },
-    "anymatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-      "requires": {
-        "micromatch": "^3.1.4",
-        "normalize-path": "^2.1.1"
-      }
-    },
-    "aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
-    },
-    "archiver": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/archiver/-/archiver-3.0.0.tgz",
-      "integrity": "sha512-5QeR6Xc5hSA9X1rbQfcuQ6VZuUXOaEdB65Dhmk9duuRJHYif/ZyJfuyJqsQrj34PFjU5emv5/MmfgA8un06onw==",
-      "requires": {
-        "archiver-utils": "^2.0.0",
-        "async": "^2.0.0",
-        "buffer-crc32": "^0.2.1",
-        "glob": "^7.0.0",
-        "readable-stream": "^2.0.0",
-        "tar-stream": "^1.5.0",
-        "zip-stream": "^2.0.1"
-      }
-    },
-    "archiver-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.0.0.tgz",
-      "integrity": "sha512-JRBgcVvDX4Mwu2RBF8bBaHcQCSxab7afsxAPYDQ5W+19quIPP5CfKE7Ql+UHs9wYvwsaNR8oDuhtf5iqrKmzww==",
-      "requires": {
-        "glob": "^7.0.0",
-        "graceful-fs": "^4.1.0",
-        "lazystream": "^1.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.toarray": "^4.4.0",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^2.0.0"
-      },
-      "dependencies": {
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-        }
-      }
-    },
-    "are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "requires": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
-      }
-    },
-    "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "aria-query": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz",
-      "integrity": "sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=",
-      "requires": {
-        "ast-types-flow": "0.0.7",
-        "commander": "^2.11.0"
-      }
-    },
-    "arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
-    },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
-    },
-    "arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
-    },
-    "array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE="
-    },
-    "array-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
-    },
-    "array-filter": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
-    },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
-    },
-    "array-flatten": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
-    },
-    "array-from": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
-      "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU="
-    },
-    "array-ify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-      "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4="
-    },
-    "array-includes": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz",
-      "integrity": "sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=",
-      "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.7.0"
-      }
-    },
-    "array-map": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
-      "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI="
-    },
-    "array-reduce": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys="
-    },
-    "array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
-      "requires": {
-        "array-uniq": "^1.0.1"
-      }
-    },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
-    },
-    "array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
-    },
-    "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
-    },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-    },
-    "asn1": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "requires": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "asn1.js": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
-      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
-      "requires": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "assert": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "util": "0.10.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "util": {
-          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
-          "requires": {
-            "inherits": "2.0.1"
-          }
-        }
-      }
-    },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
-    },
-    "assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
-    },
-    "ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
-    },
-    "astral-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg=="
-    },
-    "async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz",
-      "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==",
-      "requires": {
-        "lodash": "^4.17.11"
-      }
-    },
-    "async-each": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
-    },
-    "async-limiter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
-      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
-    },
-    "atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
-    },
-    "aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
-    },
-    "aws4": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
-    },
-    "axobject-query": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
-      "integrity": "sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=",
-      "requires": {
-        "ast-types-flow": "0.0.7"
-      }
-    },
-    "babel-code-frame": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
-      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "requires": {
-        "chalk": "^1.1.3",
-        "esutils": "^2.0.2",
-        "js-tokens": "^3.0.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "js-tokens": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
-    "babel-core": {
-      "version": "7.0.0-bridge.0",
-      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
-      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
-    },
-    "babel-eslint": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-9.0.0.tgz",
-      "integrity": "sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
-        "eslint-scope": "3.7.1",
-        "eslint-visitor-keys": "^1.0.0"
-      }
-    },
-    "babel-generator": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
-      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
-      "requires": {
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "detect-indent": "^4.0.0",
-        "jsesc": "^1.3.0",
-        "lodash": "^4.17.4",
-        "source-map": "^0.5.7",
-        "trim-right": "^1.0.1"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
-          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
-        }
-      }
-    },
-    "babel-helper-call-delegate": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
-      "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
-      "requires": {
-        "babel-helper-hoist-variables": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-define-map": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz",
-      "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
-      "requires": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "lodash": "^4.17.4"
-      }
-    },
-    "babel-helper-function-name": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "requires": {
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-get-function-arity": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-hoist-variables": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz",
-      "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-optimise-call-expression": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz",
-      "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-replace-supers": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz",
-      "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
-      "requires": {
-        "babel-helper-optimise-call-expression": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helpers": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
-      "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
-    "babel-jest": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.8.0.tgz",
-      "integrity": "sha512-+5/kaZt4I9efoXzPlZASyK/lN9qdRKmmUav9smVc0ruPQD7IsfucQ87gpOE8mn2jbDuS6M/YOW6n3v9ZoIfgnw==",
-      "requires": {
-        "@jest/transform": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "@types/babel__core": "^7.1.0",
-        "babel-plugin-istanbul": "^5.1.0",
-        "babel-preset-jest": "^24.6.0",
-        "chalk": "^2.4.2",
-        "slash": "^2.0.0"
-      }
-    },
-    "babel-loader": {
-      "version": "8.0.6",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
-      "integrity": "sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==",
-      "requires": {
-        "find-cache-dir": "^2.0.0",
-        "loader-utils": "^1.0.2",
-        "mkdirp": "^0.5.1",
-        "pify": "^4.0.1"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-        }
-      }
-    },
-    "babel-messages": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
-      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-check-es2015-constants": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
-      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-istanbul": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz",
-      "integrity": "sha512-dySz4VJMH+dpndj0wjJ8JPs/7i1TdSPb1nRrn56/92pKOF9VKC1FMFJmMXjzlGGusnCAqujP6PBCiKq0sVA+YQ==",
-      "requires": {
-        "find-up": "^3.0.0",
-        "istanbul-lib-instrument": "^3.3.0",
-        "test-exclude": "^5.2.3"
-      }
-    },
-    "babel-plugin-jest-hoist": {
-      "version": "24.6.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.6.0.tgz",
-      "integrity": "sha512-3pKNH6hMt9SbOv0F3WVmy5CWQ4uogS3k0GY5XLyQHJ9EGpAT9XWkFd2ZiXXtkwFHdAHa5j7w7kfxSP5lAIwu7w==",
-      "requires": {
-        "@types/babel__traverse": "^7.0.6"
-      }
-    },
-    "babel-plugin-syntax-class-properties": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
-    },
-    "babel-plugin-syntax-flow": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
-      "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
-    },
-    "babel-plugin-syntax-object-rest-spread": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
-      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
-    },
-    "babel-plugin-syntax-trailing-function-commas": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
-      "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM="
-    },
-    "babel-plugin-transform-class-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "requires": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-plugin-syntax-class-properties": "^6.8.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
-    "babel-plugin-transform-es2015-arrow-functions": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
-      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-block-scoped-functions": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
-      "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-block-scoping": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
-      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "lodash": "^4.17.4"
-      }
-    },
-    "babel-plugin-transform-es2015-classes": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz",
-      "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
-      "requires": {
-        "babel-helper-define-map": "^6.24.1",
-        "babel-helper-function-name": "^6.24.1",
-        "babel-helper-optimise-call-expression": "^6.24.1",
-        "babel-helper-replace-supers": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-plugin-transform-es2015-computed-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
-      "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
-    "babel-plugin-transform-es2015-destructuring": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
-      "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-for-of": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
-      "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-literals": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz",
-      "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-modules-commonjs": {
-      "version": "6.26.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
-      "integrity": "sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==",
-      "requires": {
-        "babel-plugin-transform-strict-mode": "^6.24.1",
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-types": "^6.26.0"
-      }
-    },
-    "babel-plugin-transform-es2015-object-super": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
-      "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
-      "requires": {
-        "babel-helper-replace-supers": "^6.24.1",
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-parameters": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
-      "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
-      "requires": {
-        "babel-helper-call-delegate": "^6.24.1",
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-plugin-transform-es2015-shorthand-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
-      "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-plugin-transform-es2015-spread": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz",
-      "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es2015-template-literals": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
-      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es3-member-expression-literals": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz",
-      "integrity": "sha1-cz00RPPsxBvvjtGmpOCWV7iWnrs=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-es3-property-literals": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz",
-      "integrity": "sha1-sgeNWELiKr9A9z6M3pzTcRq9V1g=",
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-flow-strip-types": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz",
-      "integrity": "sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988=",
-      "requires": {
-        "babel-plugin-syntax-flow": "^6.18.0",
-        "babel-runtime": "^6.22.0"
-      }
-    },
-    "babel-plugin-transform-object-rest-spread": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
-      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
-      "requires": {
-        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
-        "babel-runtime": "^6.26.0"
-      }
-    },
-    "babel-plugin-transform-strict-mode": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
-      "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-polyfill": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.16.0.tgz",
-      "integrity": "sha1-LUUCHfh+JqN0ttTRqcZZZNF/JCI=",
-      "requires": {
-        "babel-runtime": "^6.9.1",
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.9.5"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-        },
-        "regenerator-runtime": {
-          "version": "0.9.6",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz",
-          "integrity": "sha1-0z65XQ0gAaS+OWWXB8UbDLcc4Ck="
-        }
-      }
-    },
-    "babel-preset-fbjs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-1.0.0.tgz",
-      "integrity": "sha1-yXLlybMB1OyeeXH0rsPhSsAXqLA=",
-      "requires": {
-        "babel-plugin-check-es2015-constants": "^6.7.2",
-        "babel-plugin-syntax-flow": "^6.5.0",
-        "babel-plugin-syntax-object-rest-spread": "^6.5.0",
-        "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-        "babel-plugin-transform-class-properties": "^6.6.0",
-        "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
-        "babel-plugin-transform-es2015-block-scoped-functions": "^6.6.5",
-        "babel-plugin-transform-es2015-block-scoping": "^6.7.1",
-        "babel-plugin-transform-es2015-classes": "^6.6.5",
-        "babel-plugin-transform-es2015-computed-properties": "^6.6.5",
-        "babel-plugin-transform-es2015-destructuring": "^6.6.5",
-        "babel-plugin-transform-es2015-for-of": "^6.6.0",
-        "babel-plugin-transform-es2015-literals": "^6.5.0",
-        "babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
-        "babel-plugin-transform-es2015-object-super": "^6.6.5",
-        "babel-plugin-transform-es2015-parameters": "^6.7.0",
-        "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
-        "babel-plugin-transform-es2015-spread": "^6.6.5",
-        "babel-plugin-transform-es2015-template-literals": "^6.6.5",
-        "babel-plugin-transform-es3-member-expression-literals": "^6.5.0",
-        "babel-plugin-transform-es3-property-literals": "^6.5.0",
-        "babel-plugin-transform-flow-strip-types": "^6.7.0",
-        "babel-plugin-transform-object-rest-spread": "^6.6.5",
-        "object-assign": "^4.0.1"
-      }
-    },
-    "babel-preset-jest": {
-      "version": "24.6.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz",
-      "integrity": "sha512-pdZqLEdmy1ZK5kyRUfvBb2IfTPb2BUvIJczlPspS8fWmBQslNNDBqVfh7BW5leOVJMDZKzjD8XEyABTk6gQ5yw==",
-      "requires": {
-        "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-        "babel-plugin-jest-hoist": "^24.6.0"
-      }
-    },
-    "babel-register": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
-      "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
-      "requires": {
-        "babel-core": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "home-or-tmp": "^2.0.0",
-        "lodash": "^4.17.4",
-        "mkdirp": "^0.5.1",
-        "source-map-support": "^0.4.15"
-      },
-      "dependencies": {
-        "babel-core": {
-          "version": "6.26.3",
-          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "requires": {
-            "babel-code-frame": "^6.26.0",
-            "babel-generator": "^6.26.0",
-            "babel-helpers": "^6.24.1",
-            "babel-messages": "^6.23.0",
-            "babel-register": "^6.26.0",
-            "babel-runtime": "^6.26.0",
-            "babel-template": "^6.26.0",
-            "babel-traverse": "^6.26.0",
-            "babel-types": "^6.26.0",
-            "babylon": "^6.18.0",
-            "convert-source-map": "^1.5.1",
-            "debug": "^2.6.9",
-            "json5": "^0.5.1",
-            "lodash": "^4.17.4",
-            "minimatch": "^3.0.4",
-            "path-is-absolute": "^1.0.1",
-            "private": "^0.1.8",
-            "slash": "^1.0.0",
-            "source-map": "^0.5.7"
-          }
-        },
-        "core-js": {
-          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "slash": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
-        }
-      }
-    },
-    "babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "requires": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-        }
-      }
-    },
-    "babel-template": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
-      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "lodash": "^4.17.4"
-      }
-    },
-    "babel-traverse": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
-      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "debug": "^2.6.8",
-        "globals": "^9.18.0",
-        "invariant": "^2.2.2",
-        "lodash": "^4.17.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "globals": {
-          "version": "9.18.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "babel-types": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.4",
-        "to-fast-properties": "^1.0.3"
-      },
-      "dependencies": {
-        "to-fast-properties": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
-        }
-      }
-    },
-    "babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
-    },
-    "base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "requires": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "base64-arraybuffer": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
-      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
-    },
-    "base64-js": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
-      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
-    },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
-    },
-    "bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "requires": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
-    "beeper": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
-      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak="
-    },
-    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
-    },
-    "binary-extensions": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
-    },
-    "bl": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
-      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
-      "requires": {
-        "readable-stream": "^2.3.5",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "bluebird": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
-      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
-    },
-    "bn.js": {
-      "version": "4.11.8",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
-      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
-    },
-    "body-parser": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
-      "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
-      "requires": {
-        "bytes": "3.0.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "~1.6.3",
-        "iconv-lite": "0.4.23",
-        "on-finished": "~2.3.0",
-        "qs": "6.5.2",
-        "raw-body": "2.3.3",
-        "type-is": "~1.6.16"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "iconv-lite": {
-          "version": "0.4.23",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
-          "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "bonjour": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
-      "requires": {
-        "array-flatten": "^2.1.0",
-        "deep-equal": "^1.0.1",
-        "dns-equal": "^1.0.0",
-        "dns-txt": "^2.0.2",
-        "multicast-dns": "^6.0.1",
-        "multicast-dns-service-types": "^1.1.0"
-      }
-    },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
-    },
-    "boxen": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
-      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
-      "requires": {
-        "ansi-align": "^2.0.0",
-        "camelcase": "^4.0.0",
-        "chalk": "^2.0.1",
-        "cli-boxes": "^1.0.0",
-        "string-width": "^2.0.0",
-        "term-size": "^1.2.0",
-        "widest-line": "^2.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
-        }
-      }
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "requires": {
-        "arr-flatten": "^1.1.0",
-        "array-unique": "^0.3.2",
-        "extend-shallow": "^2.0.1",
-        "fill-range": "^4.0.0",
-        "isobject": "^3.0.1",
-        "repeat-element": "^1.1.2",
-        "snapdragon": "^0.8.1",
-        "snapdragon-node": "^2.0.1",
-        "split-string": "^3.0.2",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
-    },
-    "browser-process-hrtime": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
-      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw=="
-    },
-    "browser-resolve": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
-      "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
-      "requires": {
-        "resolve": "1.1.7"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.1.7",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs="
-        }
-      }
-    },
-    "browserify-aes": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
-      "requires": {
-        "buffer-xor": "^1.0.3",
-        "cipher-base": "^1.0.0",
-        "create-hash": "^1.1.0",
-        "evp_bytestokey": "^1.0.3",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "browserify-cipher": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
-      "requires": {
-        "browserify-aes": "^1.0.4",
-        "browserify-des": "^1.0.0",
-        "evp_bytestokey": "^1.0.0"
-      }
-    },
-    "browserify-des": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "des.js": "^1.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "browserify-rsa": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
-      "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
-      "requires": {
-        "bn.js": "^4.1.0",
-        "randombytes": "^2.0.1"
-      }
-    },
-    "browserify-sign": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz",
-      "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=",
-      "requires": {
-        "bn.js": "^4.1.1",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.2",
-        "elliptic": "^6.0.0",
-        "inherits": "^2.0.1",
-        "parse-asn1": "^5.0.0"
-      }
-    },
-    "browserify-zlib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-      "integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=",
-      "requires": {
-        "pako": "~0.2.0"
-      }
-    },
-    "browserslist": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.6.tgz",
-      "integrity": "sha512-o/hPOtbU9oX507lIqon+UvPYqpx3mHc8cV3QemSBTXwkG8gSQSK6UKvXcE/DcleU3+A59XTUHyCvZ5qGy8xVAg==",
-      "requires": {
-        "caniuse-lite": "^1.0.30000963",
-        "electron-to-chromium": "^1.3.127",
-        "node-releases": "^1.1.17"
-      }
-    },
-    "bser": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz",
-      "integrity": "sha1-mseNPtXZFYBP2HrLFYvHlxR6Fxk=",
-      "requires": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
-      "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
-      "requires": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4"
-      }
-    },
-    "buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "requires": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
-      }
-    },
-    "buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
-    },
-    "buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
-    },
-    "buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
-    },
-    "buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
-    },
-    "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
-    },
-    "buffer-indexof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g=="
-    },
-    "buffer-xor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
-    },
-    "builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
-    },
-    "bunyan": {
-      "version": "1.8.12",
-      "resolved": "https://registry.npmjs.org/bunyan/-/bunyan-1.8.12.tgz",
-      "integrity": "sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=",
-      "requires": {
-        "dtrace-provider": "~0.8",
-        "moment": "^2.10.6",
-        "mv": "~2",
-        "safe-json-stringify": "~1"
-      }
-    },
-    "byline": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/byline/-/byline-5.0.0.tgz",
-      "integrity": "sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE="
-    },
-    "bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
-    },
-    "cacache": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
-      "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
-      "requires": {
-        "bluebird": "^3.5.3",
-        "chownr": "^1.1.1",
-        "figgy-pudding": "^3.5.1",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.1.15",
-        "lru-cache": "^5.1.1",
-        "mississippi": "^3.0.0",
-        "mkdirp": "^0.5.1",
-        "move-concurrently": "^1.0.1",
-        "promise-inflight": "^1.0.1",
-        "rimraf": "^2.6.2",
-        "ssri": "^6.0.1",
-        "unique-filename": "^1.1.1",
-        "y18n": "^4.0.0"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
-        }
-      }
-    },
-    "cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "requires": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
-      }
-    },
-    "caller-callsite": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-      "requires": {
-        "callsites": "^2.0.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
-        }
-      }
-    },
-    "caller-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
-      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
-      "requires": {
-        "callsites": "^0.2.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo="
-        }
-      }
-    },
-    "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
-    },
-    "camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-    },
-    "camelcase-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
-      "integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=",
-      "requires": {
-        "camelcase": "^4.1.0",
-        "map-obj": "^2.0.0",
-        "quick-lru": "^1.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
-        }
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30000967",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000967.tgz",
-      "integrity": "sha512-rUBIbap+VJfxTzrM4akJ00lkvVb5/n5v3EGXfWzSH5zT8aJmGzjA8HWhJ4U6kCpzxozUSnB+yvAYDRPY6mRpgQ=="
-    },
-    "capture-exit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
-      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
-      "requires": {
-        "rsvp": "^4.8.4"
-      }
-    },
-    "capture-stack-trace": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
-      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw=="
-    },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
-    },
-    "chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "requires": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      }
-    },
-    "chardet": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
-      "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
-    },
-    "cheerio": {
-      "version": "1.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
-      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
-      "requires": {
-        "css-select": "~1.2.0",
-        "dom-serializer": "~0.1.0",
-        "entities": "~1.1.1",
-        "htmlparser2": "^3.9.1",
-        "lodash": "^4.15.0",
-        "parse5": "^3.0.1"
-      },
-      "dependencies": {
-        "parse5": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
-          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
-          "requires": {
-            "@types/node": "*"
-          }
-        }
-      }
-    },
-    "child-process-promise": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/child-process-promise/-/child-process-promise-2.2.1.tgz",
-      "integrity": "sha1-RzChHvYQ+tRQuPIjx50x172tgHQ=",
-      "requires": {
-        "cross-spawn": "^4.0.2",
-        "node-version": "^1.0.0",
-        "promise-polyfill": "^6.0.1"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-          "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "which": "^1.2.9"
-          }
-        }
-      }
-    },
-    "chokidar": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
-      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
-      "requires": {
-        "anymatch": "^2.0.0",
-        "async-each": "^1.0.1",
-        "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
-        "glob-parent": "^3.1.0",
-        "inherits": "^2.0.3",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "normalize-path": "^3.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.2.1",
-        "upath": "^1.1.1"
-      },
-      "dependencies": {
-        "is-glob": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-          "requires": {
-            "is-extglob": "^2.1.1"
-          }
-        },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-        },
-        "upath": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
-          "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q=="
-        }
-      }
-    },
-    "chownr": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
-      "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g=="
-    },
-    "chrome-launch": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chrome-launch/-/chrome-launch-1.1.4.tgz",
-      "integrity": "sha1-yJhb0CJjWlzIlwmbr9GYMYOKclI=",
-      "requires": {
-        "chrome-location": "^1.2.0",
-        "quick-tmp": "0.0.0",
-        "rimraf": "^2.2.8",
-        "shallow-copy": "0.0.1"
-      }
-    },
-    "chrome-location": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/chrome-location/-/chrome-location-1.2.1.tgz",
-      "integrity": "sha1-aRFRGk6sVQJ2Jcc7k3ylynq5SZU=",
-      "requires": {
-        "userhome": "^1.0.0",
-        "which": "^1.0.5"
-      }
-    },
-    "chrome-trace-event": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz",
-      "integrity": "sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
-    },
-    "cipher-base": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "circular-json": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
-      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
-    },
-    "class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "requires": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "classnames": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.1.tgz",
-      "integrity": "sha1-TRo9AtA31F4AsJbAvm9Ulty/KIo="
-    },
-    "cli-boxes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
-    },
-    "cli-cursor": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
-      "requires": {
-        "restore-cursor": "^2.0.0"
-      }
-    },
-    "cli-spinners": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
-      "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg=="
-    },
-    "cli-truncate": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
-      "integrity": "sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=",
-      "requires": {
-        "slice-ansi": "0.0.4",
-        "string-width": "^1.0.1"
-      },
-      "dependencies": {
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "slice-ansi": {
-          "version": "0.0.4",
-          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
-          "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU="
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        }
-      }
-    },
-    "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
-    },
-    "clipboard-js": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/clipboard-js/-/clipboard-js-0.3.6.tgz",
-      "integrity": "sha512-hyrmvbrYCeRBHdiR3KrEz0tmrUTXXEU8HLeGW0Y0icUSwYmAsmc+d6wfE4EDb/TxZmAVJG0eTfMlulCIT+ecfw=="
-    },
-    "cliui": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-      "requires": {
-        "string-width": "^2.1.1",
-        "strip-ansi": "^4.0.0",
-        "wrap-ansi": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "clone": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
-    },
-    "clone-stats": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE="
-    },
-    "cmd-shim": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-2.0.2.tgz",
-      "integrity": "sha1-b8vamUg6j9FdfTChlspp1oii79s=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "mkdirp": "~0.5.0"
-      }
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
-    },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
-    },
-    "collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-      "requires": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
-      }
-    },
-    "color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "requires": {
-        "color-name": "1.1.3"
-      }
-    },
-    "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-    },
-    "color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
-    },
-    "colors": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
-      "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q="
-    },
-    "columnify": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.4.tgz",
-      "integrity": "sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=",
-      "requires": {
-        "strip-ansi": "^3.0.0",
-        "wcwidth": "^1.0.0"
-      }
-    },
-    "combined-stream": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
-      "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==",
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
-    "command-join": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/command-join/-/command-join-2.0.0.tgz",
-      "integrity": "sha1-Uui5hPSHLZUv8b3IuYOX0nxxRM8="
-    },
-    "commander": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
-    },
-    "common-tags": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
-      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
-    },
-    "commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
-    },
-    "compare-func": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz",
-      "integrity": "sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=",
-      "requires": {
-        "array-ify": "^1.0.0",
-        "dot-prop": "^3.0.0"
-      }
-    },
-    "component-emitter": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
-    },
-    "compress-commons": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-1.2.2.tgz",
-      "integrity": "sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=",
-      "requires": {
-        "buffer-crc32": "^0.2.1",
-        "crc32-stream": "^2.0.0",
-        "normalize-path": "^2.0.0",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "compressible": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
-      "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==",
-      "requires": {
-        "mime-db": ">= 1.40.0 < 2"
-      }
-    },
-    "compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "requires": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-    },
-    "concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "configstore": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
-      "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==",
-      "requires": {
-        "dot-prop": "^4.1.0",
-        "graceful-fs": "^4.1.2",
-        "make-dir": "^1.0.0",
-        "unique-string": "^1.0.0",
-        "write-file-atomic": "^2.0.0",
-        "xdg-basedir": "^3.0.0"
-      },
-      "dependencies": {
-        "dot-prop": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-          "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
-          "requires": {
-            "is-obj": "^1.0.0"
-          }
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        }
-      }
-    },
-    "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
-    },
-    "console-browserify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-      "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=",
-      "requires": {
-        "date-now": "^0.1.4"
-      }
-    },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
-    },
-    "constants-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz",
-      "integrity": "sha1-kld9tSe6bEzwpFaNhLwDH0QeIfI="
-    },
-    "contains-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo="
-    },
-    "content-disposition": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "conventional-changelog": {
-      "version": "1.1.24",
-      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-1.1.24.tgz",
-      "integrity": "sha512-2WcSUst4Y3Z4hHvoMTWXMJr/DmgVdLiMOVY1Kak2LfFz+GIz2KDp5naqbFesYbfXPmaZ5p491dO0FWZIJoJw1Q==",
-      "requires": {
-        "conventional-changelog-angular": "^1.6.6",
-        "conventional-changelog-atom": "^0.2.8",
-        "conventional-changelog-codemirror": "^0.3.8",
-        "conventional-changelog-core": "^2.0.11",
-        "conventional-changelog-ember": "^0.3.12",
-        "conventional-changelog-eslint": "^1.0.9",
-        "conventional-changelog-express": "^0.3.6",
-        "conventional-changelog-jquery": "^0.1.0",
-        "conventional-changelog-jscs": "^0.1.0",
-        "conventional-changelog-jshint": "^0.3.8",
-        "conventional-changelog-preset-loader": "^1.1.8"
-      }
-    },
-    "conventional-changelog-angular": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz",
-      "integrity": "sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==",
-      "requires": {
-        "compare-func": "^1.3.1",
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-atom": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-atom/-/conventional-changelog-atom-0.2.8.tgz",
-      "integrity": "sha512-8pPZqhMbrnltNBizjoDCb/Sz85KyUXNDQxuAEYAU5V/eHn0okMBVjqc8aHWYpHrytyZWvMGbayOlDv7i8kEf6g==",
-      "requires": {
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-cli": {
-      "version": "1.3.22",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-cli/-/conventional-changelog-cli-1.3.22.tgz",
-      "integrity": "sha512-pnjdIJbxjkZ5VdAX/H1wndr1G10CY8MuZgnXuJhIHglOXfIrXygb7KZC836GW9uo1u8PjEIvIw/bKX0lOmOzZg==",
-      "requires": {
-        "add-stream": "^1.0.0",
-        "conventional-changelog": "^1.1.24",
-        "lodash": "^4.2.1",
-        "meow": "^4.0.0",
-        "tempfile": "^1.1.1"
-      }
-    },
-    "conventional-changelog-codemirror": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.8.tgz",
-      "integrity": "sha512-3HFZKtBXTaUCHvz7ai6nk2+psRIkldDoNzCsom0egDtVmPsvvHZkzjynhdQyULfacRSsBTaiQ0ol6nBOL4dDiQ==",
-      "requires": {
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-core": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-2.0.11.tgz",
-      "integrity": "sha512-HvTE6RlqeEZ/NFPtQeFLsIDOLrGP3bXYr7lFLMhCVsbduF1MXIe8OODkwMFyo1i9ku9NWBwVnVn0jDmIFXjDRg==",
-      "requires": {
-        "conventional-changelog-writer": "^3.0.9",
-        "conventional-commits-parser": "^2.1.7",
-        "dateformat": "^3.0.0",
-        "get-pkg-repo": "^1.0.0",
-        "git-raw-commits": "^1.3.6",
-        "git-remote-origin-url": "^2.0.0",
-        "git-semver-tags": "^1.3.6",
-        "lodash": "^4.2.1",
-        "normalize-package-data": "^2.3.5",
-        "q": "^1.5.1",
-        "read-pkg": "^1.1.0",
-        "read-pkg-up": "^1.0.1",
-        "through2": "^2.0.0"
-      },
-      "dependencies": {
-        "dateformat": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        }
-      }
-    },
-    "conventional-changelog-ember": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-ember/-/conventional-changelog-ember-0.3.12.tgz",
-      "integrity": "sha512-mmJzA7uzbrOqeF89dMMi6z17O07ORTXlTMArnLG9ZTX4oLaKNolUlxFUFlFm9JUoVWajVpaHQWjxH1EOQ+ARoQ==",
-      "requires": {
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-eslint": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.9.tgz",
-      "integrity": "sha512-h87nfVh2fdk9fJIvz26wCBsbDC/KxqCc5wSlNMZbXcARtbgNbNDIF7Y7ctokFdnxkzVdaHsbINkh548T9eBA7Q==",
-      "requires": {
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-express": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-express/-/conventional-changelog-express-0.3.6.tgz",
-      "integrity": "sha512-3iWVtBJZ9RnRnZveNDzOD8QRn6g6vUif0qVTWWyi5nUIAbuN1FfPVyKdAlJJfp5Im+dE8Kiy/d2SpaX/0X678Q==",
-      "requires": {
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-jquery": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz",
-      "integrity": "sha1-Agg5cWLjhGmG5xJztsecW1+A9RA=",
-      "requires": {
-        "q": "^1.4.1"
-      }
-    },
-    "conventional-changelog-jscs": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz",
-      "integrity": "sha1-BHnrRDzH1yxYvwvPDvHURKkvDlw=",
-      "requires": {
-        "q": "^1.4.1"
-      }
-    },
-    "conventional-changelog-jshint": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.8.tgz",
-      "integrity": "sha512-hn9QU4ZI/5V50wKPJNPGT4gEWgiBFpV6adieILW4MaUFynuDYOvQ71EMSj3EznJyKi/KzuXpc9dGmX8njZMjig==",
-      "requires": {
-        "compare-func": "^1.3.1",
-        "q": "^1.5.1"
-      }
-    },
-    "conventional-changelog-preset-loader": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.8.tgz",
-      "integrity": "sha512-MkksM4G4YdrMlT2MbTsV2F6LXu/hZR0Tc/yenRrDIKRwBl/SP7ER4ZDlglqJsCzLJi4UonBc52Bkm5hzrOVCcw=="
-    },
-    "conventional-changelog-writer": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-3.0.9.tgz",
-      "integrity": "sha512-n9KbsxlJxRQsUnK6wIBRnARacvNnN4C/nxnxCkH+B/R1JS2Fa+DiP1dU4I59mEDEjgnFaN2+9wr1P1s7GYB5/Q==",
-      "requires": {
-        "compare-func": "^1.3.1",
-        "conventional-commits-filter": "^1.1.6",
-        "dateformat": "^3.0.0",
-        "handlebars": "^4.0.2",
-        "json-stringify-safe": "^5.0.1",
-        "lodash": "^4.2.1",
-        "meow": "^4.0.0",
-        "semver": "^5.5.0",
-        "split": "^1.0.0",
-        "through2": "^2.0.0"
-      },
-      "dependencies": {
-        "dateformat": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
-        }
-      }
-    },
-    "conventional-commits-filter": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-1.1.6.tgz",
-      "integrity": "sha512-KcDgtCRKJCQhyk6VLT7zR+ZOyCnerfemE/CsR3iQpzRRFbLEs0Y6rwk3mpDvtOh04X223z+1xyJ582Stfct/0Q==",
-      "requires": {
-        "is-subset": "^0.1.1",
-        "modify-values": "^1.0.0"
-      }
-    },
-    "conventional-commits-parser": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz",
-      "integrity": "sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==",
-      "requires": {
-        "JSONStream": "^1.0.4",
-        "is-text-path": "^1.0.0",
-        "lodash": "^4.2.1",
-        "meow": "^4.0.0",
-        "split2": "^2.0.0",
-        "through2": "^2.0.0",
-        "trim-off-newlines": "^1.0.0"
-      }
-    },
-    "conventional-recommended-bump": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-1.2.1.tgz",
-      "integrity": "sha512-oJjG6DkRgtnr/t/VrPdzmf4XZv8c4xKVJrVT4zrSHd92KEL+EYxSbYoKq8lQ7U5yLMw7130wrcQTLRjM/T+d4w==",
-      "requires": {
-        "concat-stream": "^1.4.10",
-        "conventional-commits-filter": "^1.1.1",
-        "conventional-commits-parser": "^2.1.1",
-        "git-raw-commits": "^1.3.0",
-        "git-semver-tags": "^1.3.0",
-        "meow": "^3.3.0",
-        "object-assign": "^4.0.1"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
-        },
-        "camelcase-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-          "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-          "requires": {
-            "camelcase": "^2.0.0",
-            "map-obj": "^1.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "get-stdin": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
-        },
-        "indent-string": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-          "requires": {
-            "repeating": "^2.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "map-obj": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
-        },
-        "meow": {
-          "version": "3.7.0",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-          "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-          "requires": {
-            "camelcase-keys": "^2.0.0",
-            "decamelize": "^1.1.2",
-            "loud-rejection": "^1.0.0",
-            "map-obj": "^1.0.1",
-            "minimist": "^1.1.3",
-            "normalize-package-data": "^2.3.4",
-            "object-assign": "^4.0.1",
-            "read-pkg-up": "^1.0.1",
-            "redent": "^1.0.0",
-            "trim-newlines": "^1.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "redent": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-          "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-          "requires": {
-            "indent-string": "^2.1.0",
-            "strip-indent": "^1.0.1"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        },
-        "strip-indent": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-          "requires": {
-            "get-stdin": "^4.0.1"
-          }
-        },
-        "trim-newlines": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-          "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
-        }
-      }
-    },
-    "convert-source-map": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
-      "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "requires": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
-    "cookie": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-    },
-    "copy-concurrently": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
-      "requires": {
-        "aproba": "^1.1.1",
-        "fs-write-stream-atomic": "^1.0.8",
-        "iferr": "^0.1.5",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.0"
-      }
-    },
-    "copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
-    },
-    "core-js": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.0.1.tgz",
-      "integrity": "sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew=="
-    },
-    "core-js-compat": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.0.1.tgz",
-      "integrity": "sha512-2pC3e+Ht/1/gD7Sim/sqzvRplMiRnFQVlPpDVaHtY9l7zZP7knamr3VRD6NyGfHd84MrDC0tAM9ulNxYMW0T3g==",
-      "requires": {
-        "browserslist": "^4.5.4",
-        "core-js": "3.0.1",
-        "core-js-pure": "3.0.1",
-        "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
-          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
-        }
-      }
-    },
-    "core-js-pure": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.0.1.tgz",
-      "integrity": "sha512-mSxeQ6IghKW3MoyF4cz19GJ1cMm7761ON+WObSyLfTu/Jn3x7w4NwNFnrZxgl4MTSvYYepVLNuRtlB4loMwJ5g=="
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
-    },
-    "cosmiconfig": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.0.tgz",
-      "integrity": "sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==",
-      "requires": {
-        "import-fresh": "^2.0.0",
-        "is-directory": "^0.3.1",
-        "js-yaml": "^3.13.0",
-        "parse-json": "^4.0.0"
-      }
-    },
-    "crc": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
-      "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
-      "requires": {
-        "buffer": "^5.1.0"
-      }
-    },
-    "crc32-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-2.0.0.tgz",
-      "integrity": "sha1-483TtN8xaN10494/u8t7KX/pCPQ=",
-      "requires": {
-        "crc": "^3.4.4",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "create-ecdh": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
-      "integrity": "sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==",
-      "requires": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.0.0"
-      }
-    },
-    "create-error-class": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
-      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
-      "requires": {
-        "capture-stack-trace": "^1.0.0"
-      }
-    },
-    "create-hash": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "inherits": "^2.0.1",
-        "md5.js": "^1.3.4",
-        "ripemd160": "^2.0.1",
-        "sha.js": "^2.4.0"
-      },
-      "dependencies": {
-        "ripemd160": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
-          "requires": {
-            "hash-base": "^3.0.0",
-            "inherits": "^2.0.1"
-          }
-        },
-        "sha.js": {
-          "version": "2.4.11",
-          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-          "requires": {
-            "inherits": "^2.0.1",
-            "safe-buffer": "^5.0.1"
-          }
-        }
-      }
-    },
-    "create-hmac": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
-      "requires": {
-        "cipher-base": "^1.0.3",
-        "create-hash": "^1.1.0",
-        "inherits": "^2.0.1",
-        "ripemd160": "^2.0.0",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      },
-      "dependencies": {
-        "ripemd160": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
-          "requires": {
-            "hash-base": "^3.0.0",
-            "inherits": "^2.0.1"
-          }
-        },
-        "sha.js": {
-          "version": "2.4.11",
-          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-          "requires": {
-            "inherits": "^2.0.1",
-            "safe-buffer": "^5.0.1"
-          }
-        }
-      }
-    },
-    "cross-env": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
-      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
-      "requires": {
-        "cross-spawn": "^6.0.5",
-        "is-windows": "^1.0.0"
-      }
-    },
-    "cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "requires": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      }
-    },
-    "cross-spawn-async": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz",
-      "integrity": "sha1-hF/wwINKPe2dFg2sptOQkGuyiMw=",
-      "requires": {
-        "lru-cache": "^4.0.0",
-        "which": "^1.2.8"
-      }
-    },
-    "crx": {
-      "version": "git+https://github.com/oncletom/crx.git#ef150e8abf1b2e093ce746584680876927c0fc21",
-      "from": "git+https://github.com/oncletom/crx.git#ef150e8",
-      "requires": {
-        "archiver": "^3.0.0",
-        "commander": "^2.19.0",
-        "node-rsa": "^1.0.3",
-        "pbf": "^3.1.0"
-      }
-    },
-    "crx-parser": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/crx-parser/-/crx-parser-0.1.2.tgz",
-      "integrity": "sha1-fu7tnt3JXiLBiTguNGJARKiaWm0="
-    },
-    "crypto-browserify": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.2.8.tgz",
-      "integrity": "sha1-ubEdvm2WUd2IKgHmzEZ99xjs8Yk=",
-      "requires": {
-        "pbkdf2-compat": "2.0.1",
-        "ripemd160": "0.2.0",
-        "sha.js": "2.2.6"
-      }
-    },
-    "crypto-random-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
-      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
-    },
-    "css-line-break": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
-      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
-      "requires": {
-        "base64-arraybuffer": "^0.1.5"
-      }
-    },
-    "css-loader": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
-      "integrity": "sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==",
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "css-selector-tokenizer": "^0.7.0",
-        "icss-utils": "^2.1.0",
-        "loader-utils": "^1.0.2",
-        "lodash": "^4.17.11",
-        "postcss": "^6.0.23",
-        "postcss-modules-extract-imports": "^1.2.0",
-        "postcss-modules-local-by-default": "^1.2.0",
-        "postcss-modules-scope": "^1.1.0",
-        "postcss-modules-values": "^1.3.0",
-        "postcss-value-parser": "^3.3.0",
-        "source-list-map": "^2.0.0"
-      }
-    },
-    "css-select": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
-      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
-      "requires": {
-        "boolbase": "~1.0.0",
-        "css-what": "2.1",
-        "domutils": "1.5.1",
-        "nth-check": "~1.0.1"
-      }
-    },
-    "css-selector-tokenizer": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
-      "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
-      "requires": {
-        "cssesc": "^0.1.0",
-        "fastparse": "^1.1.1",
-        "regexpu-core": "^1.0.0"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
-        },
-        "regexpu-core": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
-          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
-          "requires": {
-            "regenerate": "^1.2.1",
-            "regjsgen": "^0.2.0",
-            "regjsparser": "^0.1.4"
-          }
-        },
-        "regjsgen": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
-        },
-        "regjsparser": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
-          "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
-          "requires": {
-            "jsesc": "~0.5.0"
-          }
-        }
-      }
-    },
-    "css-what": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
-    },
-    "cssesc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
-      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
-    },
-    "cssom": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.6.tgz",
-      "integrity": "sha512-DtUeseGk9/GBW0hl0vVPpU22iHL6YB5BUX7ml1hB+GMpo0NX5G4voX3kdWiMSEguFtcW3Vh3djqNF4aIe6ne0A=="
-    },
-    "cssstyle": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.2.2.tgz",
-      "integrity": "sha512-43wY3kl1CVQSvL7wUY1qXkxVGkStjpkDmVjiIKX8R97uhajy8Bybay78uOtqvh7Q5GK75dNPfW0geWjE6qQQow==",
-      "requires": {
-        "cssom": "0.3.x"
-      }
-    },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "requires": {
-        "array-find-index": "^1.0.1"
-      }
-    },
-    "cyclist": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
-      "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA="
-    },
-    "d": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
-      "integrity": "sha1-2hhMU10Y2O57oqoim5FACfrhEwk=",
-      "requires": {
-        "es5-ext": "~0.10.2"
-      }
-    },
-    "damerau-levenshtein": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz",
-      "integrity": "sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA=="
-    },
-    "dargs": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz",
-      "integrity": "sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
-    },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "data-urls": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
-      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
-      "requires": {
-        "abab": "^2.0.0",
-        "whatwg-mimetype": "^2.2.0",
-        "whatwg-url": "^7.0.0"
-      },
-      "dependencies": {
-        "whatwg-url": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
-          "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^1.0.1",
-            "webidl-conversions": "^4.0.2"
-          }
-        }
-      }
-    },
-    "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
-    },
-    "date-now": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
-      "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
-    },
-    "dateformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz",
-      "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI="
-    },
-    "debounce": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
-      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
-    },
-    "debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "requires": {
-        "ms": "^2.1.1"
-      }
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-    },
-    "decamelize-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
-      "requires": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
-      },
-      "dependencies": {
-        "map-obj": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
-        }
-      }
-    },
-    "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
-    },
-    "dedent": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw="
-    },
-    "deep-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
-    },
-    "deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
-    },
-    "deep-is": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
-    },
-    "deepcopy": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/deepcopy/-/deepcopy-0.6.3.tgz",
-      "integrity": "sha1-Y0eA8vhlardxr4+oQx7RzO5Vx7A="
-    },
-    "deepmerge": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.1.0.tgz",
-      "integrity": "sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg=="
-    },
-    "default-gateway": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
-      "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==",
-      "requires": {
-        "execa": "^1.0.0",
-        "ip-regex": "^2.1.0"
-      }
-    },
-    "defaults": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-      "requires": {
-        "clone": "^1.0.2"
-      }
-    },
-    "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "requires": {
-        "object-keys": "^1.0.12"
-      }
-    },
-    "define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "requires": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "dependencies": {
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
-      },
-      "dependencies": {
-        "p-map": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="
-        },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-        }
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
-    },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-    },
-    "des.js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
-      "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=",
-      "requires": {
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-    },
-    "detect-file": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc="
-    },
-    "detect-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
-      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
-      "requires": {
-        "repeating": "^2.0.0"
-      }
-    },
-    "detect-newline": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
-      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I="
-    },
-    "detect-node": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
-      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
-    },
-    "diff-sequences": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.3.0.tgz",
-      "integrity": "sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw=="
-    },
-    "diffie-hellman": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
-      "requires": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      }
-    },
-    "dispensary": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/dispensary/-/dispensary-0.30.0.tgz",
-      "integrity": "sha512-ZZipc2xaDky03RD3s1UJOM6zgygo2ncEzmjuqpPR6pT7jMo0cxH/FTzGarD3Pw2naAsBOXVGG10Fwxth9OrW0g==",
-      "requires": {
-        "array-from": "~2.1.1",
-        "async": "~2.6.0",
-        "natural-compare-lite": "~1.4.0",
-        "pino": "~5.11.0",
-        "request": "~2.88.0",
-        "sha.js": "~2.4.4",
-        "source-map-support": "~0.5.4",
-        "yargs": "~12.0.1"
-      },
-      "dependencies": {
-        "sha.js": {
-          "version": "2.4.11",
-          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-          "requires": {
-            "inherits": "^2.0.1",
-            "safe-buffer": "^5.0.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "source-map-support": {
-          "version": "0.5.12",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
-          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        }
-      }
-    },
-    "dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
-    },
-    "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
-      "requires": {
-        "ip": "^1.1.0",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "dns-txt": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
-      "requires": {
-        "buffer-indexof": "^1.0.0"
-      }
-    },
-    "doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "requires": {
-        "esutils": "^2.0.2"
-      }
-    },
-    "dom-serializer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
-      "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
-      "requires": {
-        "domelementtype": "^1.3.0",
-        "entities": "^1.1.1"
-      }
-    },
-    "domain-browser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
-    },
-    "domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
-    },
-    "domexception": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
-      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-      "requires": {
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "domhandler": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-      "requires": {
-        "domelementtype": "1"
-      }
-    },
-    "domutils": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-      "requires": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
-      }
-    },
-    "dot-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz",
-      "integrity": "sha1-G3CK8JSknJoOfbyteQq6U52sEXc=",
-      "requires": {
-        "is-obj": "^1.0.0"
-      }
-    },
-    "dtrace-provider": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.7.tgz",
-      "integrity": "sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ=",
-      "optional": true,
-      "requires": {
-        "nan": "^2.10.0"
-      }
-    },
-    "duplexer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E="
-    },
-    "duplexer2": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
-      "requires": {
-        "readable-stream": "~1.1.9"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "readable-stream": {
-          "version": "1.1.14",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        }
-      }
-    },
-    "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
-    },
-    "duplexify": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
-      "requires": {
-        "end-of-stream": "^1.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "requires": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-    },
-    "electron-to-chromium": {
-      "version": "1.3.133",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.133.tgz",
-      "integrity": "sha512-lyoC8aoqbbDqsprb6aPdt9n3DpOZZzdz/T4IZKsR0/dkZIxnJVUjjcpOSwA66jPRIOyDAamCTAUqweU05kKNSg=="
-    },
-    "elegant-spinner": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
-      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4="
-    },
-    "elliptic": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
-      "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==",
-      "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
-      }
-    },
-    "emoji-regex": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
-      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ=="
-    },
-    "emojis-list": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-    },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
-    "end-of-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
-    "enhanced-resolve": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
-      "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.4.0",
-        "tapable": "^1.0.0"
-      }
-    },
-    "entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
-    },
-    "errno": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
-      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
-      "requires": {
-        "prr": "~1.0.1"
-      }
-    },
-    "error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "requires": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "error-stack-parser": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.2.tgz",
-      "integrity": "sha512-E1fPutRDdIj/hohG0UpT5mayXNCxXP9d+snxFsPU9X0XgccOumKraa3juDMwTUyi7+Bu5+mCGagjg4IYeNbOdw==",
-      "requires": {
-        "stackframe": "^1.0.4"
-      }
-    },
-    "es-abstract": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz",
-      "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==",
-      "requires": {
-        "es-to-primitive": "^1.2.0",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "is-callable": "^1.1.4",
-        "is-regex": "^1.0.4",
-        "object-keys": "^1.0.12"
-      }
-    },
-    "es-to-primitive": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
-      "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
-      "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      }
-    },
-    "es5-ext": {
-      "version": "0.10.50",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.50.tgz",
-      "integrity": "sha512-KMzZTPBkeQV/JcSQhI5/z6d9VWJ3EnQ194USTUwIYZ2ZbpN8+SGXQKt1h68EX44+qt+Fzr8DO17vnxrw7c3agw==",
-      "requires": {
-        "es6-iterator": "~2.0.3",
-        "es6-symbol": "~3.1.1",
-        "next-tick": "^1.0.0"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "es6-error": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
-      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
-    },
-    "es6-iterator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.35",
-        "es6-symbol": "^3.1.1"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "es6-map": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
-      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14",
-        "es6-iterator": "~2.0.1",
-        "es6-set": "~0.1.5",
-        "es6-symbol": "~3.1.1",
-        "event-emitter": "~0.3.5"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "es6-promise": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.3.0.tgz",
-      "integrity": "sha1-lu258v2wGZWCKyY92KratnSBgbw="
-    },
-    "es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
-      "requires": {
-        "es6-promise": "^4.0.3"
-      },
-      "dependencies": {
-        "es6-promise": {
-          "version": "4.2.6",
-          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz",
-          "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q=="
-        }
-      }
-    },
-    "es6-set": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
-      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14",
-        "es6-iterator": "~2.0.1",
-        "es6-symbol": "3.1.1",
-        "event-emitter": "~0.3.5"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "es6-symbol": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.0.2.tgz",
-      "integrity": "sha1-HpKIeMb15jVBYltLtN9K8H0VQhk=",
-      "requires": {
-        "d": "~0.1.1",
-        "es5-ext": "~0.10.10"
-      }
-    },
-    "es6-weak-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
-      "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.14",
-        "es6-iterator": "^2.0.1",
-        "es6-symbol": "^3.1.1"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
-    },
-    "escodegen": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.1.tgz",
-      "integrity": "sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==",
-      "requires": {
-        "esprima": "^3.1.3",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        }
-      }
-    },
-    "escope": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
-      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
-      "requires": {
-        "es6-map": "^0.1.3",
-        "es6-weak-map": "^2.0.1",
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
-      }
-    },
-    "eslint": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
-      "integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==",
-      "requires": {
-        "ajv": "^5.3.0",
-        "babel-code-frame": "^6.22.0",
-        "chalk": "^2.1.0",
-        "concat-stream": "^1.6.0",
-        "cross-spawn": "^5.1.0",
-        "debug": "^3.1.0",
-        "doctrine": "^2.1.0",
-        "eslint-scope": "^3.7.1",
-        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^3.5.4",
-        "esquery": "^1.0.0",
-        "esutils": "^2.0.2",
-        "file-entry-cache": "^2.0.0",
-        "functional-red-black-tree": "^1.0.1",
-        "glob": "^7.1.2",
-        "globals": "^11.0.1",
-        "ignore": "^3.3.3",
-        "imurmurhash": "^0.1.4",
-        "inquirer": "^3.0.6",
-        "is-resolvable": "^1.0.0",
-        "js-yaml": "^3.9.1",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.2",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.2",
-        "path-is-inside": "^1.0.2",
-        "pluralize": "^7.0.0",
-        "progress": "^2.0.0",
-        "regexpp": "^1.0.1",
-        "require-uncached": "^1.0.3",
-        "semver": "^5.3.0",
-        "strip-ansi": "^4.0.0",
-        "strip-json-comments": "~2.0.1",
-        "table": "4.0.2",
-        "text-table": "~0.2.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "eslint-config-prettier": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-2.10.0.tgz",
-      "integrity": "sha512-Mhl90VLucfBuhmcWBgbUNtgBiK955iCDK1+aHAz7QfDQF6wuzWZ6JjihZ3ejJoGlJWIuko7xLqNm8BA5uenKhA==",
-      "requires": {
-        "get-stdin": "^5.0.1"
-      }
-    },
-    "eslint-config-react-app": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz",
-      "integrity": "sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ=="
-    },
-    "eslint-config-standard": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz",
-      "integrity": "sha512-oDdENzpViEe5fwuRCWla7AXQd++/oyIp8zP+iP9jiUPG6NBj3SHgdgtl/kTn00AjeN+1HNvavTKmYbMo+xMOlw=="
-    },
-    "eslint-config-standard-jsx": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-5.0.0.tgz",
-      "integrity": "sha512-rLToPAEqLMPBfWnYTu6xRhm2OWziS2n40QFqJ8jAM8NSVzeVKTa3nclhsU4DpPJQRY60F34Oo1wi/71PN/eITg=="
-    },
-    "eslint-config-standard-react": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard-react/-/eslint-config-standard-react-6.0.0.tgz",
-      "integrity": "sha512-YWlqfvREbH1r6SaRTgFOq+VE3f8/ZQypkfnpDpSmZjztEjxnzznm4xeE2/mDQRx77Okhd/pKHXNZLMsSneJH8A==",
-      "requires": {
-        "eslint-config-standard-jsx": "^5.0.0"
-      }
-    },
-    "eslint-import-resolver-node": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
-      "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
-      "requires": {
-        "debug": "^2.6.9",
-        "resolve": "^1.5.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "eslint-module-utils": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz",
-      "integrity": "sha512-14tltLm38Eu3zS+mt0KvILC3q8jyIAH518MlG+HO0p+yK885Lb1UHTY/UgR91eOyGdmxAPb+OLoW4znqIT6Ndw==",
-      "requires": {
-        "debug": "^2.6.8",
-        "pkg-dir": "^2.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
-        },
-        "pkg-dir": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-          "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-          "requires": {
-            "find-up": "^2.1.0"
-          }
-        }
-      }
-    },
-    "eslint-plugin-flowtype": {
-      "version": "2.50.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz",
-      "integrity": "sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==",
-      "requires": {
-        "lodash": "^4.17.10"
-      }
-    },
-    "eslint-plugin-import": {
-      "version": "2.17.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.17.2.tgz",
-      "integrity": "sha512-m+cSVxM7oLsIpmwNn2WXTJoReOF9f/CtLMo7qOVmKd1KntBy0hEcuNZ3erTmWjx+DxRO0Zcrm5KwAvI9wHcV5g==",
-      "requires": {
-        "array-includes": "^3.0.3",
-        "contains-path": "^0.1.0",
-        "debug": "^2.6.9",
-        "doctrine": "1.5.0",
-        "eslint-import-resolver-node": "^0.3.2",
-        "eslint-module-utils": "^2.4.0",
-        "has": "^1.0.3",
-        "lodash": "^4.17.11",
-        "minimatch": "^3.0.4",
-        "read-pkg-up": "^2.0.0",
-        "resolve": "^1.10.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "doctrine": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-          "requires": {
-            "esutils": "^2.0.2",
-            "isarray": "^1.0.0"
-          }
-        },
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
-          "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "strip-bom": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-type": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
-          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "requires": {
-            "pify": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
-          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-          "requires": {
-            "load-json-file": "^2.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^2.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
-          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-          "requires": {
-            "find-up": "^2.0.0",
-            "read-pkg": "^2.0.0"
-          }
-        }
-      }
-    },
-    "eslint-plugin-jsx-a11y": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz",
-      "integrity": "sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==",
-      "requires": {
-        "aria-query": "^0.7.0",
-        "array-includes": "^3.0.3",
-        "ast-types-flow": "0.0.7",
-        "axobject-query": "^0.1.0",
-        "damerau-levenshtein": "^1.0.0",
-        "emoji-regex": "^6.1.0",
-        "jsx-ast-utils": "^1.4.0"
-      }
-    },
-    "eslint-plugin-no-unsafe-innerhtml": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz",
-      "integrity": "sha1-fQKHjI6b95FriINtWsEitC8VGTI=",
-      "requires": {
-        "eslint": "^3.7.1"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "4.11.8",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
-          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-          "requires": {
-            "co": "^4.6.0",
-            "json-stable-stringify": "^1.0.1"
-          }
-        },
-        "ajv-keywords": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
-          "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw="
-        },
-        "ansi-escapes": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-          "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "cli-cursor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-          "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
-          "requires": {
-            "restore-cursor": "^1.0.1"
-          }
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "eslint": {
-          "version": "3.19.0",
-          "resolved": "https://registry.npmjs.org/eslint/-/eslint-3.19.0.tgz",
-          "integrity": "sha1-yPxiAcf0DdCJQbh8CFdnOGpnmsw=",
-          "requires": {
-            "babel-code-frame": "^6.16.0",
-            "chalk": "^1.1.3",
-            "concat-stream": "^1.5.2",
-            "debug": "^2.1.1",
-            "doctrine": "^2.0.0",
-            "escope": "^3.6.0",
-            "espree": "^3.4.0",
-            "esquery": "^1.0.0",
-            "estraverse": "^4.2.0",
-            "esutils": "^2.0.2",
-            "file-entry-cache": "^2.0.0",
-            "glob": "^7.0.3",
-            "globals": "^9.14.0",
-            "ignore": "^3.2.0",
-            "imurmurhash": "^0.1.4",
-            "inquirer": "^0.12.0",
-            "is-my-json-valid": "^2.10.0",
-            "is-resolvable": "^1.0.0",
-            "js-yaml": "^3.5.1",
-            "json-stable-stringify": "^1.0.0",
-            "levn": "^0.3.0",
-            "lodash": "^4.0.0",
-            "mkdirp": "^0.5.0",
-            "natural-compare": "^1.4.0",
-            "optionator": "^0.8.2",
-            "path-is-inside": "^1.0.1",
-            "pluralize": "^1.2.1",
-            "progress": "^1.1.8",
-            "require-uncached": "^1.0.2",
-            "shelljs": "^0.7.5",
-            "strip-bom": "^3.0.0",
-            "strip-json-comments": "~2.0.1",
-            "table": "^3.7.8",
-            "text-table": "~0.2.0",
-            "user-home": "^2.0.0"
-          }
-        },
-        "figures": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-          "requires": {
-            "escape-string-regexp": "^1.0.5",
-            "object-assign": "^4.1.0"
-          }
-        },
-        "globals": {
-          "version": "9.18.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
-        },
-        "inquirer": {
-          "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
-          "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
-          "requires": {
-            "ansi-escapes": "^1.1.0",
-            "ansi-regex": "^2.0.0",
-            "chalk": "^1.0.0",
-            "cli-cursor": "^1.0.1",
-            "cli-width": "^2.0.0",
-            "figures": "^1.3.5",
-            "lodash": "^4.3.0",
-            "readline2": "^1.0.1",
-            "run-async": "^0.1.0",
-            "rx-lite": "^3.1.2",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.0",
-            "through": "^2.3.6"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "onetime": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-          "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
-        },
-        "pluralize": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-1.2.1.tgz",
-          "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU="
-        },
-        "progress": {
-          "version": "1.1.8",
-          "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
-          "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74="
-        },
-        "restore-cursor": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-          "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
-          "requires": {
-            "exit-hook": "^1.0.0",
-            "onetime": "^1.0.0"
-          }
-        },
-        "run-async": {
-          "version": "0.1.0",
-          "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
-          "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=",
-          "requires": {
-            "once": "^1.3.0"
-          }
-        },
-        "rx-lite": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
-          "integrity": "sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI="
-        },
-        "slice-ansi": {
-          "version": "0.0.4",
-          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
-          "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU="
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        },
-        "table": {
-          "version": "3.8.3",
-          "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
-          "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=",
-          "requires": {
-            "ajv": "^4.7.0",
-            "ajv-keywords": "^1.0.0",
-            "chalk": "^1.1.1",
-            "lodash": "^4.0.0",
-            "slice-ansi": "0.0.4",
-            "string-width": "^2.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-            },
-            "is-fullwidth-code-point": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
-            },
-            "string-width": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-              "requires": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        }
-      }
-    },
-    "eslint-plugin-node": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz",
-      "integrity": "sha512-Q/Cc2sW1OAISDS+Ji6lZS2KV4b7ueA/WydVWd1BECTQwVvfQy5JAi3glhINoKzoMnfnuRgNP+ZWKrGAbp3QDxw==",
-      "requires": {
-        "ignore": "^3.3.6",
-        "minimatch": "^3.0.4",
-        "resolve": "^1.3.3",
-        "semver": "^5.4.1"
-      }
-    },
-    "eslint-plugin-prettier": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz",
-      "integrity": "sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==",
-      "requires": {
-        "fast-diff": "^1.1.1",
-        "jest-docblock": "^21.0.0"
-      }
-    },
-    "eslint-plugin-promise": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz",
-      "integrity": "sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ=="
-    },
-    "eslint-plugin-react": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.13.0.tgz",
-      "integrity": "sha512-uA5LrHylu8lW/eAH3bEQe9YdzpPaFd9yAJTwTi/i/BKTD7j6aQMKVAdGM/ML72zD6womuSK7EiGtMKuK06lWjQ==",
-      "requires": {
-        "array-includes": "^3.0.3",
-        "doctrine": "^2.1.0",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.1.0",
-        "object.fromentries": "^2.0.0",
-        "prop-types": "^15.7.2",
-        "resolve": "^1.10.1"
-      },
-      "dependencies": {
-        "jsx-ast-utils": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz",
-          "integrity": "sha512-yDGDG2DS4JcqhA6blsuYbtsT09xL8AoLuUR2Gb5exrw7UEM19sBcOTq+YBBhrNbl0PUC4R4LnFu+dHg2HKeVvA==",
-          "requires": {
-            "array-includes": "^3.0.3"
-          }
-        }
-      }
-    },
-    "eslint-plugin-react-hooks": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz",
-      "integrity": "sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag=="
-    },
-    "eslint-plugin-standard": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-3.1.0.tgz",
-      "integrity": "sha512-fVcdyuKRr0EZ4fjWl3c+gp1BANFJD1+RaWa2UPYfMZ6jCtp5RG00kSaXnK/dE5sYzt4kaWJ9qdxqUfc0d9kX0w=="
-    },
-    "eslint-scope": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
-      "requires": {
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
-      }
-    },
-    "eslint-utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz",
-      "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q=="
-    },
-    "eslint-visitor-keys": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
-      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
-    },
-    "espree": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
-      "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
-      "requires": {
-        "acorn": "^5.5.0",
-        "acorn-jsx": "^3.0.0"
-      }
-    },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-    },
-    "esquery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
-      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
-      "requires": {
-        "estraverse": "^4.0.0"
-      }
-    },
-    "esrecurse": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
-      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
-      "requires": {
-        "estraverse": "^4.1.0"
-      }
-    },
-    "estraverse": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
-    },
-    "esutils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-    },
-    "event-emitter": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-          "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-          "requires": {
-            "es5-ext": "^0.10.9"
-          }
-        }
-      }
-    },
-    "event-to-promise": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/event-to-promise/-/event-to-promise-0.8.0.tgz",
-      "integrity": "sha1-S4TxF3K28l93Uvx02XFTGsb1tiY="
-    },
-    "eventemitter3": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
-    },
-    "events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA=="
-    },
-    "eventsource": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz",
-      "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==",
-      "requires": {
-        "original": "^1.0.0"
-      }
-    },
-    "evp_bytestokey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
-      "requires": {
-        "md5.js": "^1.3.4",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "exec-sh": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.2.tgz",
-      "integrity": "sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg=="
-    },
-    "execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "requires": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      }
-    },
-    "exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
-    },
-    "exit-hook": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g="
-    },
-    "expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-      "requires": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "expand-tilde": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
-      "requires": {
-        "homedir-polyfill": "^1.0.1"
-      }
-    },
-    "expect": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-24.8.0.tgz",
-      "integrity": "sha512-/zYvP8iMDrzaaxHVa724eJBCKqSHmO0FA7EDkBiRHxg6OipmMn1fN+C8T9L9K8yr7UONkOifu6+LLH+z76CnaA==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "ansi-styles": "^3.2.0",
-        "jest-get-type": "^24.8.0",
-        "jest-matcher-utils": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-regex-util": "^24.3.0"
-      }
-    },
-    "express": {
-      "version": "4.16.4",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
-      "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
-      "requires": {
-        "accepts": "~1.3.5",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.18.3",
-        "content-disposition": "0.5.2",
-        "content-type": "~1.0.4",
-        "cookie": "0.3.1",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.1.1",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.2",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.4",
-        "qs": "6.5.2",
-        "range-parser": "~1.2.0",
-        "safe-buffer": "5.1.2",
-        "send": "0.16.2",
-        "serve-static": "1.13.2",
-        "setprototypeof": "1.1.0",
-        "statuses": "~1.4.0",
-        "type-is": "~1.6.16",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "array-flatten": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-    },
-    "extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "requires": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "external-editor": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
-      "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
-      "requires": {
-        "chardet": "^0.4.0",
-        "iconv-lite": "^0.4.17",
-        "tmp": "^0.0.33"
-      }
-    },
-    "extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "requires": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
-    },
-    "fancy-log": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
-      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
-      "requires": {
-        "ansi-gray": "^0.1.1",
-        "color-support": "^1.1.3",
-        "parse-node-version": "^1.0.0",
-        "time-stamp": "^1.0.0"
-      }
-    },
-    "fast-deep-equal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
-    },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
-    },
-    "fast-json-patch": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-2.1.0.tgz",
-      "integrity": "sha512-PipOsAKamRw7+CXtKiieehyjUeDVPJ5J7b2kdJYerEf6TSUQoD2ijpVyZ88KQm5YXziff4h762bz3+vzf56khg==",
-      "requires": {
-        "deep-equal": "^1.0.1"
-      }
-    },
-    "fast-json-stable-stringify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
-    },
-    "fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
-    },
-    "fast-redact": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-1.5.0.tgz",
-      "integrity": "sha512-Afo61CgUjkzdvOKDHn08qnZ0kwck38AOGcMlvSGzvJbIab6soAP5rdoQayecGCDsD69AiF9vJBXyq31eoEO2tQ=="
-    },
-    "fast-safe-stringify": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.6.tgz",
-      "integrity": "sha512-q8BZ89jjc+mz08rSxROs8VsrBBcn1SIw1kq9NjolL509tkABRk9io01RAjSaEv1Xb2uFLt8VtRiZbGp5H8iDtg=="
-    },
-    "fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
-    },
-    "faye-websocket": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-      "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
-    "fb-watchman": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
-      "integrity": "sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=",
-      "requires": {
-        "bser": "^2.0.0"
-      }
-    },
-    "fbjs": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.5.1.tgz",
-      "integrity": "sha1-2xf+YJd3oXoltsiwRTA62tMzkgM=",
-      "requires": {
-        "core-js": "^1.0.0",
-        "loose-envify": "^1.0.0",
-        "promise": "^7.0.3",
-        "ua-parser-js": "^0.7.9",
-        "whatwg-fetch": "^0.9.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        }
-      }
-    },
-    "fbjs-scripts": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz",
-      "integrity": "sha1-naZ87G1i/dyUsJlWP2xIp0mQCu8=",
-      "requires": {
-        "babel-core": "^6.7.2",
-        "babel-preset-fbjs": "^1.0.0",
-        "core-js": "^1.0.0",
-        "cross-spawn": "^2.1.5",
-        "gulp-util": "^3.0.4",
-        "object-assign": "^4.0.1",
-        "semver": "^5.1.0",
-        "through2": "^2.0.0"
-      },
-      "dependencies": {
-        "babel-core": {
-          "version": "6.26.3",
-          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "requires": {
-            "babel-code-frame": "^6.26.0",
-            "babel-generator": "^6.26.0",
-            "babel-helpers": "^6.24.1",
-            "babel-messages": "^6.23.0",
-            "babel-register": "^6.26.0",
-            "babel-runtime": "^6.26.0",
-            "babel-template": "^6.26.0",
-            "babel-traverse": "^6.26.0",
-            "babel-types": "^6.26.0",
-            "babylon": "^6.18.0",
-            "convert-source-map": "^1.5.1",
-            "debug": "^2.6.9",
-            "json5": "^0.5.1",
-            "lodash": "^4.17.4",
-            "minimatch": "^3.0.4",
-            "path-is-absolute": "^1.0.1",
-            "private": "^0.1.8",
-            "slash": "^1.0.0",
-            "source-map": "^0.5.7"
-          }
-        },
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        },
-        "cross-spawn": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-2.2.3.tgz",
-          "integrity": "sha1-+sViAt/T0N2GF3jy2iA79DS7ghw=",
-          "requires": {
-            "cross-spawn-async": "^2.2.2",
-            "spawn-sync": "^1.0.15"
-          }
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "slash": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
-        }
-      }
-    },
-    "fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "requires": {
-        "pend": "~1.2.0"
-      }
-    },
-    "figgy-pudding": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
-      "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w=="
-    },
-    "figures": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
-      "requires": {
-        "escape-string-regexp": "^1.0.5"
-      }
-    },
-    "file-entry-cache": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
-      "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
-      "requires": {
-        "flat-cache": "^1.2.1",
-        "object-assign": "^4.0.1"
-      }
-    },
-    "filename-reserved-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
-      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q="
-    },
-    "filenamify": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
-      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
-      "requires": {
-        "filename-reserved-regex": "^1.0.0",
-        "strip-outer": "^1.0.0",
-        "trim-repeated": "^1.0.0"
-      }
-    },
-    "filenamify-url": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
-      "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
-      "requires": {
-        "filenamify": "^1.0.0",
-        "humanize-url": "^1.0.0"
-      }
-    },
-    "fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "finalhandler": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
-      "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.2",
-        "statuses": "~1.4.0",
-        "unpipe": "~1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "find-cache-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^2.0.0",
-        "pkg-dir": "^3.0.0"
-      }
-    },
-    "find-parent-dir": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
-      "integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ="
-    },
-    "find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "requires": {
-        "locate-path": "^3.0.0"
-      }
-    },
-    "findup-sync": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
-      "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
-      "requires": {
-        "detect-file": "^1.0.0",
-        "is-glob": "^3.1.0",
-        "micromatch": "^3.0.4",
-        "resolve-dir": "^1.0.1"
-      }
-    },
-    "firefox-profile": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-1.2.0.tgz",
-      "integrity": "sha512-TTEFfPOkyaz4EWx/5ZDQC1mJAe3a+JgVcchpIfD4Tvx1UspwlTJRJxOYA35x/z2iJcxaF6aW2rdh6oj6qwgd2g==",
-      "requires": {
-        "adm-zip": "~0.4.x",
-        "archiver": "~2.1.0",
-        "async": "~2.5.0",
-        "fs-extra": "~4.0.2",
-        "ini": "~1.3.3",
-        "jetpack-id": "1.0.0",
-        "lazystream": "~1.0.0",
-        "lodash": "~4.17.2",
-        "minimist": "^1.1.1",
-        "uuid": "^3.0.0",
-        "xml2js": "~0.4.4"
-      },
-      "dependencies": {
-        "archiver": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-2.1.1.tgz",
-          "integrity": "sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=",
-          "requires": {
-            "archiver-utils": "^1.3.0",
-            "async": "^2.0.0",
-            "buffer-crc32": "^0.2.1",
-            "glob": "^7.0.0",
-            "lodash": "^4.8.0",
-            "readable-stream": "^2.0.0",
-            "tar-stream": "^1.5.0",
-            "zip-stream": "^1.2.0"
-          }
-        },
-        "archiver-utils": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-1.3.0.tgz",
-          "integrity": "sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=",
-          "requires": {
-            "glob": "^7.0.0",
-            "graceful-fs": "^4.1.0",
-            "lazystream": "^1.0.0",
-            "lodash": "^4.8.0",
-            "normalize-path": "^2.0.0",
-            "readable-stream": "^2.0.0"
-          }
-        },
-        "async": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz",
-          "integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==",
-          "requires": {
-            "lodash": "^4.14.0"
-          }
-        },
-        "fs-extra": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "zip-stream": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-1.2.0.tgz",
-          "integrity": "sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=",
-          "requires": {
-            "archiver-utils": "^1.3.0",
-            "compress-commons": "^1.2.0",
-            "lodash": "^4.8.0",
-            "readable-stream": "^2.0.0"
-          }
-        }
-      }
-    },
-    "first-chunk-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz",
-      "integrity": "sha1-G97NuOCDwGZLkZRVgVd6Q6nzHXA=",
-      "requires": {
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "first-match": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/first-match/-/first-match-0.0.1.tgz",
-      "integrity": "sha1-pg7GQnAPD0NyNOu37D84JHblQv0="
-    },
-    "flat-cache": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
-      "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
-      "requires": {
-        "circular-json": "^0.3.1",
-        "graceful-fs": "^4.1.2",
-        "rimraf": "~2.6.2",
-        "write": "^0.2.1"
-      }
-    },
-    "flatstr": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/flatstr/-/flatstr-1.0.11.tgz",
-      "integrity": "sha512-CrkRmL8HgArqohPW5udNdtVae+fj5tvJdHwoo91m5OvaLk1a4lqa0R4/aPUO2zbVEnIrk+i5uTVNbSxaR1dQkQ=="
-    },
-    "flow-bin": {
-      "version": "0.97.0",
-      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.97.0.tgz",
-      "integrity": "sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w=="
-    },
-    "fluent-syntax": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/fluent-syntax/-/fluent-syntax-0.10.0.tgz",
-      "integrity": "sha512-6qRhwQXDTgJjS9DW3IiXZWzUMUPqNPzqh+bZZyUOr6t8xYwkIe+5JONYZuvfvbOUk65paAno0kd8s8kUD2ptNA=="
-    },
-    "flush-write-stream": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.3.6"
-      }
-    },
-    "follow-redirects": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
-      "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
-      "requires": {
-        "debug": "^3.2.6"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
-    },
-    "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      }
-    },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
-    },
-    "fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-      "requires": {
-        "map-cache": "^0.2.2"
-      }
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-    },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
-    },
-    "fs-extra": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
-      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "jsonfile": "^3.0.0",
-        "universalify": "^0.1.0"
-      },
-      "dependencies": {
-        "jsonfile": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
-          "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
-      }
-    },
-    "fs-write-stream-atomic": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "iferr": "^0.1.5",
-        "imurmurhash": "^0.1.4",
-        "readable-stream": "1 || 2"
-      }
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
-    },
-    "fsevents": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
-      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
-      "optional": true,
-      "requires": {
-        "nan": "^2.12.1",
-        "node-pre-gyp": "^0.12.0"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "4.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "^3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "optional": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "optional": true
-        },
-        "minipass": {
-          "version": "2.3.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "minizlib": {
-          "version": "1.2.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.3.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "debug": "^4.1.0",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.12.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.1",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.6",
-          "bundled": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.4.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.7.0",
-          "bundled": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.4",
-            "minizlib": "^1.1.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "bundled": true,
-          "optional": true
-        }
-      }
-    },
-    "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
-    },
-    "fx-runner": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fx-runner/-/fx-runner-1.0.10.tgz",
-      "integrity": "sha512-tXj0lMnSey89Dx7R3Lq+HMUy3ODmOmj5lhRYBgMWNOqbh7Vx8vPUiWMbyJ3HIzGuLnNeXAPH0x/GdFZ7h6h0vQ==",
-      "requires": {
-        "commander": "2.9.0",
-        "lodash": "4.17.11",
-        "shell-quote": "1.6.1",
-        "spawn-sync": "1.0.15",
-        "when": "3.7.7",
-        "which": "1.2.4",
-        "winreg": "0.0.12"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
-          "requires": {
-            "graceful-readlink": ">= 1.0.0"
-          }
-        },
-        "isexe": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/isexe/-/isexe-1.1.2.tgz",
-          "integrity": "sha1-NvPiLmB1CSD15yQaR2qMakInWtA="
-        },
-        "which": {
-          "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.2.4.tgz",
-          "integrity": "sha1-FVf5YIBgTlsRs1meufRbUKnv1yI=",
-          "requires": {
-            "is-absolute": "^0.1.7",
-            "isexe": "^1.1.1"
-          }
-        }
-      }
-    },
-    "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "requires": {
-        "aproba": "^1.0.3",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
-        "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      },
-      "dependencies": {
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        }
-      }
-    },
-    "generate-function": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
-      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
-      "requires": {
-        "is-property": "^1.0.2"
-      }
-    },
-    "generate-object-property": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
-      "requires": {
-        "is-property": "^1.0.0"
-      }
-    },
-    "get-caller-file": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
-    },
-    "get-own-enumerable-property-symbols": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
-      "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg=="
-    },
-    "get-pkg-repo": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
-      "integrity": "sha1-xztInAbYDMVTbCyFP54FIyBWly0=",
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "meow": "^3.3.0",
-        "normalize-package-data": "^2.3.0",
-        "parse-github-repo-url": "^1.3.0",
-        "through2": "^2.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
-        },
-        "camelcase-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-          "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-          "requires": {
-            "camelcase": "^2.0.0",
-            "map-obj": "^1.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "get-stdin": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
-        },
-        "indent-string": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-          "requires": {
-            "repeating": "^2.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "map-obj": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
-        },
-        "meow": {
-          "version": "3.7.0",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-          "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-          "requires": {
-            "camelcase-keys": "^2.0.0",
-            "decamelize": "^1.1.2",
-            "loud-rejection": "^1.0.0",
-            "map-obj": "^1.0.1",
-            "minimist": "^1.1.3",
-            "normalize-package-data": "^2.3.4",
-            "object-assign": "^4.0.1",
-            "read-pkg-up": "^1.0.1",
-            "redent": "^1.0.0",
-            "trim-newlines": "^1.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "redent": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-          "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-          "requires": {
-            "indent-string": "^2.1.0",
-            "strip-indent": "^1.0.1"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        },
-        "strip-indent": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-          "requires": {
-            "get-stdin": "^4.0.1"
-          }
-        },
-        "trim-newlines": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-          "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
-        }
-      }
-    },
-    "get-port": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
-      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
-    },
-    "get-stdin": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
-      "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g="
-    },
-    "get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
-    "get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
-    },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "gettext-parser": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.1.0.tgz",
-      "integrity": "sha1-LFpmONiTk0ubVQN9CtgstwBLJnk=",
-      "requires": {
-        "encoding": "^0.1.11"
-      }
-    },
-    "gh-pages": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.2.0.tgz",
-      "integrity": "sha512-cGLYAvxtlQ1iTwAS4g7FreZPXoE/g62Fsxln2mmR19mgs4zZI+XJ+wVVUhBFCF/0+Nmvbq+abyTWue1m1BSnmg==",
-      "requires": {
-        "async": "2.6.1",
-        "commander": "2.15.1",
-        "filenamify-url": "^1.0.0",
-        "fs-extra": "^5.0.0",
-        "globby": "^6.1.0",
-        "graceful-fs": "4.1.11",
-        "rimraf": "^2.6.2"
-      },
-      "dependencies": {
-        "async": {
-          "version": "2.6.1",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
-          "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
-          "requires": {
-            "lodash": "^4.17.10"
-          }
-        },
-        "commander": {
-          "version": "2.15.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
-          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
-        },
-        "fs-extra": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
-          "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
-        }
-      }
-    },
-    "git-raw-commits": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz",
-      "integrity": "sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==",
-      "requires": {
-        "dargs": "^4.0.1",
-        "lodash.template": "^4.0.2",
-        "meow": "^4.0.0",
-        "split2": "^2.0.0",
-        "through2": "^2.0.0"
-      },
-      "dependencies": {
-        "lodash.template": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
-          "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
-          "requires": {
-            "lodash._reinterpolate": "~3.0.0",
-            "lodash.templatesettings": "^4.0.0"
-          }
-        },
-        "lodash.templatesettings": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
-          "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
-          "requires": {
-            "lodash._reinterpolate": "~3.0.0"
-          }
-        }
-      }
-    },
-    "git-remote-origin-url": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
-      "integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=",
-      "requires": {
-        "gitconfiglocal": "^1.0.0",
-        "pify": "^2.3.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        }
-      }
-    },
-    "git-rev-sync": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-1.9.1.tgz",
-      "integrity": "sha1-oMLj3TkqvPa3aWLif8dfsyI0Sc4=",
-      "requires": {
-        "escape-string-regexp": "1.0.5",
-        "graceful-fs": "4.1.11",
-        "shelljs": "0.7.7"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
-        },
-        "shelljs": {
-          "version": "0.7.7",
-          "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.7.tgz",
-          "integrity": "sha1-svXHfvlxSPS09uImguELuoZnz/E=",
-          "requires": {
-            "glob": "^7.0.0",
-            "interpret": "^1.0.0",
-            "rechoir": "^0.6.2"
-          }
-        }
-      }
-    },
-    "git-semver-tags": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-1.3.6.tgz",
-      "integrity": "sha512-2jHlJnln4D/ECk9FxGEBh3k44wgYdWjWDtMmJPaecjoRmxKo3Y1Lh8GMYuOPu04CHw86NTAODchYjC5pnpMQig==",
-      "requires": {
-        "meow": "^4.0.0",
-        "semver": "^5.5.0"
-      }
-    },
-    "gitconfiglocal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
-      "integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=",
-      "requires": {
-        "ini": "^1.3.2"
-      }
-    },
-    "glob": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
-      "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "glob-parent": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-      "requires": {
-        "is-glob": "^3.1.0",
-        "path-dirname": "^1.0.0"
-      }
-    },
-    "global-dirs": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
-      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
-      "requires": {
-        "ini": "^1.3.4"
-      }
-    },
-    "global-modules": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-      "requires": {
-        "global-prefix": "^1.0.1",
-        "is-windows": "^1.0.1",
-        "resolve-dir": "^1.0.0"
-      }
-    },
-    "global-prefix": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
-      "requires": {
-        "expand-tilde": "^2.0.2",
-        "homedir-polyfill": "^1.0.1",
-        "ini": "^1.3.4",
-        "is-windows": "^1.0.1",
-        "which": "^1.2.14"
-      }
-    },
-    "globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
-    },
-    "globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
-      "requires": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        }
-      }
-    },
-    "glogg": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz",
-      "integrity": "sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==",
-      "requires": {
-        "sparkles": "^1.0.0"
-      }
-    },
-    "got": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-      "requires": {
-        "create-error-class": "^3.0.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-redirect": "^1.0.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "lowercase-keys": "^1.0.0",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "unzip-response": "^2.0.1",
-        "url-parse-lax": "^1.0.0"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        }
-      }
-    },
-    "graceful-fs": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
-    },
-    "graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
-    },
-    "growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
-    },
-    "gulp-util": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
-      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
-      "requires": {
-        "array-differ": "^1.0.0",
-        "array-uniq": "^1.0.2",
-        "beeper": "^1.0.0",
-        "chalk": "^1.0.0",
-        "dateformat": "^2.0.0",
-        "fancy-log": "^1.1.0",
-        "gulplog": "^1.0.0",
-        "has-gulplog": "^0.1.0",
-        "lodash._reescape": "^3.0.0",
-        "lodash._reevaluate": "^3.0.0",
-        "lodash._reinterpolate": "^3.0.0",
-        "lodash.template": "^3.0.0",
-        "minimist": "^1.1.0",
-        "multipipe": "^0.1.2",
-        "object-assign": "^3.0.0",
-        "replace-ext": "0.0.1",
-        "through2": "^2.0.0",
-        "vinyl": "^0.5.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "object-assign": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
-    "gulplog": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
-      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
-      "requires": {
-        "glogg": "^1.0.0"
-      }
-    },
-    "handle-thing": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
-      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
-    },
-    "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
-      "requires": {
-        "neo-async": "^2.6.0",
-        "optimist": "^0.6.1",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
-    },
-    "har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "requires": {
-        "ajv": "^6.5.5",
-        "har-schema": "^2.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-        }
-      }
-    },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      }
-    },
-    "has-color": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
-      "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8="
-    },
-    "has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-    },
-    "has-gulplog": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
-      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
-      "requires": {
-        "sparkles": "^1.0.0"
-      }
-    },
-    "has-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
-    },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
-    },
-    "has-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-      "requires": {
-        "get-value": "^2.0.6",
-        "has-values": "^1.0.0",
-        "isobject": "^3.0.0"
-      }
-    },
-    "has-values": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-      "requires": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "hash-base": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-      "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=",
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "hash.js": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "minimalistic-assert": "^1.0.1"
-      }
-    },
-    "hmac-drbg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
-      "requires": {
-        "hash.js": "^1.0.3",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "home-or-tmp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
-      "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.1"
-      }
-    },
-    "homedir-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-      "requires": {
-        "parse-passwd": "^1.0.0"
-      }
-    },
-    "hosted-git-info": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
-      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w=="
-    },
-    "hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
-      "requires": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      }
-    },
-    "html-encoding-sniffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
-      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
-      "requires": {
-        "whatwg-encoding": "^1.0.1"
-      }
-    },
-    "html-entities": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
-      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
-    },
-    "html2canvas": {
-      "version": "1.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.1.tgz",
-      "integrity": "sha512-ImguLJ3goQnY0P6z7n6VqBZ+ViS77Hv6J7iYXBxvdb3NWz3s8/mqr4/Lj0OlMUb3ID+qCQ1BPLIBuRMqhgqvYg==",
-      "requires": {
-        "css-line-break": "1.0.1"
-      }
-    },
-    "htmlparser2": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "requires": {
-        "domelementtype": "^1.3.1",
-        "domhandler": "^2.3.0",
-        "domutils": "^1.5.1",
-        "entities": "^1.1.1",
-        "inherits": "^2.0.1",
-        "readable-stream": "^3.1.1"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
-          "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "http-browserify": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
-      "integrity": "sha1-M3la3nLfiKz7/TZ3PO/tp2RzWyA=",
-      "requires": {
-        "Base64": "~0.2.0",
-        "inherits": "~2.0.1"
-      }
-    },
-    "http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc="
-    },
-    "http-errors": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.0",
-        "statuses": ">= 1.4.0 < 2"
-      }
-    },
-    "http-parser-js": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
-      "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w=="
-    },
-    "http-proxy": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
-      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
-      "requires": {
-        "eventemitter3": "^3.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-proxy-middleware": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
-      "requires": {
-        "http-proxy": "^1.17.0",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.11",
-        "micromatch": "^3.1.10"
-      },
-      "dependencies": {
-        "is-glob": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-          "requires": {
-            "is-extglob": "^2.1.1"
-          }
-        }
-      }
-    },
-    "http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      }
-    },
-    "https-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz",
-      "integrity": "sha1-s//f5zSyo9Sp79WOhlTJH86G6v0="
-    },
-    "humanize-url": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
-      "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
-      "requires": {
-        "normalize-url": "^1.0.0",
-        "strip-url-auth": "^1.0.0"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "icss-replace-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
-    },
-    "icss-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
-      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
-      "requires": {
-        "postcss": "^6.0.1"
-      }
-    },
-    "ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-    },
-    "iferr": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
-    },
-    "ignore": {
-      "version": "3.3.10",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
-      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
-    },
-    "immutable": {
-      "version": "3.7.6",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-      "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
-    },
-    "import-fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-      "requires": {
-        "caller-path": "^2.0.0",
-        "resolve-from": "^3.0.0"
-      },
-      "dependencies": {
-        "caller-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-          "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-          "requires": {
-            "caller-callsite": "^2.0.0"
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
-        }
-      }
-    },
-    "import-lazy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
-    },
-    "import-local": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
-      "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
-      "requires": {
-        "pkg-dir": "^3.0.0",
-        "resolve-cwd": "^2.0.0"
-      }
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
-    },
-    "indent-string": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-      "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok="
-    },
-    "indexof": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
-    "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
-    },
-    "inquirer": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz",
-      "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==",
-      "requires": {
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.0",
-        "cli-cursor": "^2.1.0",
-        "cli-width": "^2.0.0",
-        "external-editor": "^2.0.4",
-        "figures": "^2.0.0",
-        "lodash": "^4.3.0",
-        "mute-stream": "0.0.7",
-        "run-async": "^2.2.0",
-        "rx-lite": "^4.0.8",
-        "rx-lite-aggregates": "^4.0.8",
-        "string-width": "^2.1.0",
-        "strip-ansi": "^4.0.0",
-        "through": "^2.3.6"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "internal-ip": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
-      "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
-      "requires": {
-        "default-gateway": "^4.2.0",
-        "ipaddr.js": "^1.9.0"
-      }
-    },
-    "interpret": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
-      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw=="
-    },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "invert-kv": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
-    },
-    "ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
-    },
-    "ip-regex": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
-    },
-    "ipaddr.js": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
-      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
-    },
-    "is-absolute": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.1.7.tgz",
-      "integrity": "sha1-hHSREZ/MtftDYhfMc39/qtUPYD8=",
-      "requires": {
-        "is-relative": "^0.1.0"
-      }
-    },
-    "is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
-    },
-    "is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "requires": {
-        "binary-extensions": "^1.0.0"
-      }
-    },
-    "is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
-    "is-callable": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
-    },
-    "is-ci": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "requires": {
-        "ci-info": "^2.0.0"
-      }
-    },
-    "is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-date-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
-    },
-    "is-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "requires": {
-        "is-accessor-descriptor": "^0.1.6",
-        "is-data-descriptor": "^0.1.4",
-        "kind-of": "^5.0.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-        }
-      }
-    },
-    "is-directory": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
-    },
-    "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
-    },
-    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
-    },
-    "is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
-    },
-    "is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ=="
-    },
-    "is-glob": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-      "requires": {
-        "is-extglob": "^2.1.0"
-      }
-    },
-    "is-installed-globally": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
-      "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=",
-      "requires": {
-        "global-dirs": "^0.1.0",
-        "is-path-inside": "^1.0.0"
-      }
-    },
-    "is-mergeable-object": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.0.tgz",
-      "integrity": "sha512-JfyDDwUdtS4yHCgUpxOyKB9dnfZ0gecufxB0eytX6BmSXSE+8dbxDGt+V7CNRIRJ9sYFV/WQt2KJG6hNob2sBw=="
-    },
-    "is-my-ip-valid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
-      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ=="
-    },
-    "is-my-json-valid": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.0.tgz",
-      "integrity": "sha512-XTHBZSIIxNsIsZXg7XB5l8z/OBFosl1Wao4tXLpeC7eKU4Vm/kdop2azkPqULwnfGQjmeDIyey9g7afMMtdWAA==",
-      "requires": {
-        "generate-function": "^2.0.0",
-        "generate-object-property": "^1.1.0",
-        "is-my-ip-valid": "^1.0.0",
-        "jsonpointer": "^4.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "is-npm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ="
-    },
-    "is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
-    },
-    "is-observable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
-      "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
-      "requires": {
-        "symbol-observable": "^1.1.0"
-      }
-    },
-    "is-path-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.1.0.tgz",
-      "integrity": "sha512-Sc5j3/YnM8tDeyCsVeKlm/0p95075DyLmDEIkSgQ7mXkrOX+uTCtmQFm0CYzVyJwcCCmO3k8qfJt17SxQwB5Zw=="
-    },
-    "is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "requires": {
-        "is-path-inside": "^2.1.0"
-      },
-      "dependencies": {
-        "is-path-inside": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-          "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-          "requires": {
-            "path-is-inside": "^1.0.2"
-          }
-        }
-      }
-    },
-    "is-path-inside": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
-      "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
-      "requires": {
-        "path-is-inside": "^1.0.1"
-      }
-    },
-    "is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
-    },
-    "is-property": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
-    },
-    "is-redirect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ="
-    },
-    "is-regex": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
-      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
-      "requires": {
-        "has": "^1.0.1"
-      }
-    },
-    "is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
-    },
-    "is-relative": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.1.3.tgz",
-      "integrity": "sha1-kF/uiuhvRbPsYUvDwVyGnfCHboI="
-    },
-    "is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
-    },
-    "is-retry-allowed": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
-      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
-    },
-    "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
-    },
-    "is-subset": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY="
-    },
-    "is-symbol": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
-      "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
-      "requires": {
-        "has-symbols": "^1.0.0"
-      }
-    },
-    "is-text-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-      "integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=",
-      "requires": {
-        "text-extensions": "^1.0.0"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
-    },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
-    },
-    "is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
-    },
-    "is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
-    },
-    "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
-    },
-    "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
-    },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
-    },
-    "istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA=="
-    },
-    "istanbul-lib-instrument": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
-      "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==",
-      "requires": {
-        "@babel/generator": "^7.4.0",
-        "@babel/parser": "^7.4.3",
-        "@babel/template": "^7.4.0",
-        "@babel/traverse": "^7.4.3",
-        "@babel/types": "^7.4.0",
-        "istanbul-lib-coverage": "^2.0.5",
-        "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
-          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
-        }
-      }
-    },
-    "istanbul-lib-report": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
-      "requires": {
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "supports-color": "^6.1.0"
-      },
-      "dependencies": {
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "istanbul-lib-source-maps": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
-      "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
-      "requires": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "rimraf": "^2.6.3",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "istanbul-reports": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.4.tgz",
-      "integrity": "sha512-QCHGyZEK0bfi9GR215QSm+NJwFKEShbtc7tfbUdLAEzn3kKhLDDZqvljn8rPZM9v8CEOhzL1nlYoO4r1ryl67w==",
-      "requires": {
-        "handlebars": "^4.1.2"
-      }
-    },
-    "jed": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
-      "integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
-    },
-    "jest": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-24.8.0.tgz",
-      "integrity": "sha512-o0HM90RKFRNWmAWvlyV8i5jGZ97pFwkeVoGvPW1EtLTgJc2+jcuqcbbqcSZLE/3f2S5pt0y2ZBETuhpWNl1Reg==",
-      "requires": {
-        "import-local": "^2.0.0",
-        "jest-cli": "^24.8.0"
-      },
-      "dependencies": {
-        "jest-cli": {
-          "version": "24.8.0",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.8.0.tgz",
-          "integrity": "sha512-+p6J00jSMPQ116ZLlHJJvdf8wbjNbZdeSX9ptfHX06/MSNaXmKihQzx5vQcw0q2G6JsdVkUIdWbOWtSnaYs3yA==",
-          "requires": {
-            "@jest/core": "^24.8.0",
-            "@jest/test-result": "^24.8.0",
-            "@jest/types": "^24.8.0",
-            "chalk": "^2.0.1",
-            "exit": "^0.1.2",
-            "import-local": "^2.0.0",
-            "is-ci": "^2.0.0",
-            "jest-config": "^24.8.0",
-            "jest-util": "^24.8.0",
-            "jest-validate": "^24.8.0",
-            "prompts": "^2.0.1",
-            "realpath-native": "^1.1.0",
-            "yargs": "^12.0.2"
-          }
-        }
-      }
-    },
-    "jest-changed-files": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-24.8.0.tgz",
-      "integrity": "sha512-qgANC1Yrivsq+UrLXsvJefBKVoCsKB0Hv+mBb6NMjjZ90wwxCDmU3hsCXBya30cH+LnPYjwgcU65i6yJ5Nfuug==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "execa": "^1.0.0",
-        "throat": "^4.0.0"
-      }
-    },
-    "jest-config": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-24.8.0.tgz",
-      "integrity": "sha512-Czl3Nn2uEzVGsOeaewGWoDPD8GStxCpAe0zOYs2x2l0fZAgPbCr3uwUkgNKV3LwE13VXythM946cd5rdGkkBZw==",
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "babel-jest": "^24.8.0",
-        "chalk": "^2.0.1",
-        "glob": "^7.1.1",
-        "jest-environment-jsdom": "^24.8.0",
-        "jest-environment-node": "^24.8.0",
-        "jest-get-type": "^24.8.0",
-        "jest-jasmine2": "^24.8.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jest-validate": "^24.8.0",
-        "micromatch": "^3.1.10",
-        "pretty-format": "^24.8.0",
-        "realpath-native": "^1.1.0"
-      }
-    },
-    "jest-diff": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.8.0.tgz",
-      "integrity": "sha512-wxetCEl49zUpJ/bvUmIFjd/o52J+yWcoc5ZyPq4/W1LUKGEhRYDIbP1KcF6t+PvqNrGAFk4/JhtxDq/Nnzs66g==",
-      "requires": {
-        "chalk": "^2.0.1",
-        "diff-sequences": "^24.3.0",
-        "jest-get-type": "^24.8.0",
-        "pretty-format": "^24.8.0"
-      }
-    },
-    "jest-docblock": {
-      "version": "21.2.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz",
-      "integrity": "sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw=="
-    },
-    "jest-each": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.8.0.tgz",
-      "integrity": "sha512-NrwK9gaL5+XgrgoCsd9svsoWdVkK4gnvyhcpzd6m487tXHqIdYeykgq3MKI1u4I+5Zf0tofr70at9dWJDeb+BA==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "chalk": "^2.0.1",
-        "jest-get-type": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "pretty-format": "^24.8.0"
-      }
-    },
-    "jest-environment-jsdom": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-24.8.0.tgz",
-      "integrity": "sha512-qbvgLmR7PpwjoFjM/sbuqHJt/NCkviuq9vus9NBn/76hhSidO+Z6Bn9tU8friecegbJL8gzZQEMZBQlFWDCwAQ==",
-      "requires": {
-        "@jest/environment": "^24.8.0",
-        "@jest/fake-timers": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "jest-mock": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jsdom": "^11.5.1"
-      }
-    },
-    "jest-environment-node": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-24.8.0.tgz",
-      "integrity": "sha512-vIGUEScd1cdDgR6sqn2M08sJTRLQp6Dk/eIkCeO4PFHxZMOgy+uYLPMC4ix3PEfM5Au/x3uQ/5Tl0DpXXZsJ/Q==",
-      "requires": {
-        "@jest/environment": "^24.8.0",
-        "@jest/fake-timers": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "jest-mock": "^24.8.0",
-        "jest-util": "^24.8.0"
-      }
-    },
-    "jest-get-type": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.8.0.tgz",
-      "integrity": "sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ=="
-    },
-    "jest-haste-map": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.8.0.tgz",
-      "integrity": "sha512-ZBPRGHdPt1rHajWelXdqygIDpJx8u3xOoLyUBWRW28r3tagrgoepPrzAozW7kW9HrQfhvmiv1tncsxqHJO1onQ==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "anymatch": "^2.0.0",
-        "fb-watchman": "^2.0.0",
-        "fsevents": "^1.2.7",
-        "graceful-fs": "^4.1.15",
-        "invariant": "^2.2.4",
-        "jest-serializer": "^24.4.0",
-        "jest-util": "^24.8.0",
-        "jest-worker": "^24.6.0",
-        "micromatch": "^3.1.10",
-        "sane": "^4.0.3",
-        "walker": "^1.0.7"
-      }
-    },
-    "jest-jasmine2": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-24.8.0.tgz",
-      "integrity": "sha512-cEky88npEE5LKd5jPpTdDCLvKkdyklnaRycBXL6GNmpxe41F0WN44+i7lpQKa/hcbXaQ+rc9RMaM4dsebrYong==",
-      "requires": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^24.8.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "chalk": "^2.0.1",
-        "co": "^4.6.0",
-        "expect": "^24.8.0",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^24.8.0",
-        "jest-matcher-utils": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-runtime": "^24.8.0",
-        "jest-snapshot": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "pretty-format": "^24.8.0",
-        "throat": "^4.0.0"
-      }
-    },
-    "jest-leak-detector": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.8.0.tgz",
-      "integrity": "sha512-cG0yRSK8A831LN8lIHxI3AblB40uhv0z+SsQdW3GoMMVcK+sJwrIIyax5tu3eHHNJ8Fu6IMDpnLda2jhn2pD/g==",
-      "requires": {
-        "pretty-format": "^24.8.0"
-      }
-    },
-    "jest-matcher-utils": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.8.0.tgz",
-      "integrity": "sha512-lex1yASY51FvUuHgm0GOVj7DCYEouWSlIYmCW7APSqB9v8mXmKSn5+sWVF0MhuASG0bnYY106/49JU1FZNl5hw==",
-      "requires": {
-        "chalk": "^2.0.1",
-        "jest-diff": "^24.8.0",
-        "jest-get-type": "^24.8.0",
-        "pretty-format": "^24.8.0"
-      }
-    },
-    "jest-message-util": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.8.0.tgz",
-      "integrity": "sha512-p2k71rf/b6ns8btdB0uVdljWo9h0ovpnEe05ZKWceQGfXYr4KkzgKo3PBi8wdnd9OtNh46VpNIJynUn/3MKm1g==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "@types/stack-utils": "^1.0.1",
-        "chalk": "^2.0.1",
-        "micromatch": "^3.1.10",
-        "slash": "^2.0.0",
-        "stack-utils": "^1.0.1"
-      }
-    },
-    "jest-mock": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-24.8.0.tgz",
-      "integrity": "sha512-6kWugwjGjJw+ZkK4mDa0Df3sDlUTsV47MSrT0nGQ0RBWJbpODDQ8MHDVtGtUYBne3IwZUhtB7elxHspU79WH3A==",
-      "requires": {
-        "@jest/types": "^24.8.0"
-      }
-    },
-    "jest-pnp-resolver": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz",
-      "integrity": "sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ=="
-    },
-    "jest-regex-util": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.3.0.tgz",
-      "integrity": "sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg=="
-    },
-    "jest-resolve": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-24.8.0.tgz",
-      "integrity": "sha512-+hjSzi1PoRvnuOICoYd5V/KpIQmkAsfjFO71458hQ2Whi/yf1GDeBOFj8Gxw4LrApHsVJvn5fmjcPdmoUHaVKw==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "browser-resolve": "^1.11.3",
-        "chalk": "^2.0.1",
-        "jest-pnp-resolver": "^1.2.1",
-        "realpath-native": "^1.1.0"
-      }
-    },
-    "jest-resolve-dependencies": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-24.8.0.tgz",
-      "integrity": "sha512-hyK1qfIf/krV+fSNyhyJeq3elVMhK9Eijlwy+j5jqmZ9QsxwKBiP6qukQxaHtK8k6zql/KYWwCTQ+fDGTIJauw==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-snapshot": "^24.8.0"
-      }
-    },
-    "jest-runner": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-24.8.0.tgz",
-      "integrity": "sha512-utFqC5BaA3JmznbissSs95X1ZF+d+4WuOWwpM9+Ak356YtMhHE/GXUondZdcyAAOTBEsRGAgH/0TwLzfI9h7ow==",
-      "requires": {
-        "@jest/console": "^24.7.1",
-        "@jest/environment": "^24.8.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "chalk": "^2.4.2",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.1.15",
-        "jest-config": "^24.8.0",
-        "jest-docblock": "^24.3.0",
-        "jest-haste-map": "^24.8.0",
-        "jest-jasmine2": "^24.8.0",
-        "jest-leak-detector": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-resolve": "^24.8.0",
-        "jest-runtime": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jest-worker": "^24.6.0",
-        "source-map-support": "^0.5.6",
-        "throat": "^4.0.0"
-      },
-      "dependencies": {
-        "jest-docblock": {
-          "version": "24.3.0",
-          "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-24.3.0.tgz",
-          "integrity": "sha512-nlANmF9Yq1dufhFlKG9rasfQlrY7wINJbo3q01tu56Jv5eBU5jirylhF2O5ZBnLxzOVBGRDz/9NAwNyBtG4Nyg==",
-          "requires": {
-            "detect-newline": "^2.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "source-map-support": {
-          "version": "0.5.12",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
-          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        }
-      }
-    },
-    "jest-runtime": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-24.8.0.tgz",
-      "integrity": "sha512-Mq0aIXhvO/3bX44ccT+czU1/57IgOMyy80oM0XR/nyD5zgBcesF84BPabZi39pJVA6UXw+fY2Q1N+4BiVUBWOA==",
-      "requires": {
-        "@jest/console": "^24.7.1",
-        "@jest/environment": "^24.8.0",
-        "@jest/source-map": "^24.3.0",
-        "@jest/transform": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "@types/yargs": "^12.0.2",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.1.15",
-        "jest-config": "^24.8.0",
-        "jest-haste-map": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-mock": "^24.8.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve": "^24.8.0",
-        "jest-snapshot": "^24.8.0",
-        "jest-util": "^24.8.0",
-        "jest-validate": "^24.8.0",
-        "realpath-native": "^1.1.0",
-        "slash": "^2.0.0",
-        "strip-bom": "^3.0.0",
-        "yargs": "^12.0.2"
-      }
-    },
-    "jest-serializer": {
-      "version": "24.4.0",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.4.0.tgz",
-      "integrity": "sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q=="
-    },
-    "jest-snapshot": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-24.8.0.tgz",
-      "integrity": "sha512-5ehtWoc8oU9/cAPe6fez6QofVJLBKyqkY2+TlKTOf0VllBB/mqUNdARdcjlZrs9F1Cv+/HKoCS/BknT0+tmfPg==",
-      "requires": {
-        "@babel/types": "^7.0.0",
-        "@jest/types": "^24.8.0",
-        "chalk": "^2.0.1",
-        "expect": "^24.8.0",
-        "jest-diff": "^24.8.0",
-        "jest-matcher-utils": "^24.8.0",
-        "jest-message-util": "^24.8.0",
-        "jest-resolve": "^24.8.0",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^24.8.0",
-        "semver": "^5.5.0"
-      }
-    },
-    "jest-util": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.8.0.tgz",
-      "integrity": "sha512-DYZeE+XyAnbNt0BG1OQqKy/4GVLPtzwGx5tsnDrFcax36rVE3lTA5fbvgmbVPUZf9w77AJ8otqR4VBbfFJkUZA==",
-      "requires": {
-        "@jest/console": "^24.7.1",
-        "@jest/fake-timers": "^24.8.0",
-        "@jest/source-map": "^24.3.0",
-        "@jest/test-result": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "callsites": "^3.0.0",
-        "chalk": "^2.0.1",
-        "graceful-fs": "^4.1.15",
-        "is-ci": "^2.0.0",
-        "mkdirp": "^0.5.1",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "jest-validate": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-24.8.0.tgz",
-      "integrity": "sha512-+/N7VOEMW1Vzsrk3UWBDYTExTPwf68tavEPKDnJzrC6UlHtUDU/fuEdXqFoHzv9XnQ+zW6X3qMZhJ3YexfeLDA==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "camelcase": "^5.0.0",
-        "chalk": "^2.0.1",
-        "jest-get-type": "^24.8.0",
-        "leven": "^2.1.0",
-        "pretty-format": "^24.8.0"
-      }
-    },
-    "jest-watcher": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-24.8.0.tgz",
-      "integrity": "sha512-SBjwHt5NedQoVu54M5GEx7cl7IGEFFznvd/HNT8ier7cCAx/Qgu9ZMlaTQkvK22G1YOpcWBLQPFSImmxdn3DAw==",
-      "requires": {
-        "@jest/test-result": "^24.8.0",
-        "@jest/types": "^24.8.0",
-        "@types/yargs": "^12.0.9",
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.1",
-        "jest-util": "^24.8.0",
-        "string-length": "^2.0.0"
-      }
-    },
-    "jest-worker": {
-      "version": "24.6.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz",
-      "integrity": "sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==",
-      "requires": {
-        "merge-stream": "^1.0.1",
-        "supports-color": "^6.1.0"
-      },
-      "dependencies": {
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "jetpack-id": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-1.0.0.tgz",
-      "integrity": "sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y="
-    },
-    "js-levenshtein": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
-      "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g=="
-    },
-    "js-select": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/js-select/-/js-select-0.6.0.tgz",
-      "integrity": "sha1-woTiKCTVknrsli3N8kcXSu+w0ZA=",
-      "requires": {
-        "JSONSelect": "0.2.1",
-        "traverse": "0.4.x"
-      }
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "js-yaml": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      }
-    },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
-    },
-    "jsdom": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz",
-      "integrity": "sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==",
-      "requires": {
-        "abab": "^2.0.0",
-        "acorn": "^5.5.3",
-        "acorn-globals": "^4.1.0",
-        "array-equal": "^1.0.0",
-        "cssom": ">= 0.3.2 < 0.4.0",
-        "cssstyle": "^1.0.0",
-        "data-urls": "^1.0.0",
-        "domexception": "^1.0.1",
-        "escodegen": "^1.9.1",
-        "html-encoding-sniffer": "^1.0.2",
-        "left-pad": "^1.3.0",
-        "nwsapi": "^2.0.7",
-        "parse5": "4.0.0",
-        "pn": "^1.1.0",
-        "request": "^2.87.0",
-        "request-promise-native": "^1.0.5",
-        "sax": "^1.2.4",
-        "symbol-tree": "^3.2.2",
-        "tough-cookie": "^2.3.4",
-        "w3c-hr-time": "^1.0.1",
-        "webidl-conversions": "^4.0.2",
-        "whatwg-encoding": "^1.0.3",
-        "whatwg-mimetype": "^2.1.0",
-        "whatwg-url": "^6.4.1",
-        "ws": "^5.2.0",
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
-    },
-    "json-merge-patch": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-merge-patch/-/json-merge-patch-0.2.3.tgz",
-      "integrity": "sha1-+ixrWvh9p3uuKWalidUuI+2B/kA=",
-      "requires": {
-        "deep-equal": "^1.0.0"
-      }
-    },
-    "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
-    },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
-    },
-    "json-schema-traverse": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
-    },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "requires": {
-        "jsonify": "~0.0.0"
-      }
-    },
-    "json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
-    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
-    },
-    "json3": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
-      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE="
-    },
-    "json5": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
-      "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
-      "requires": {
-        "minimist": "^1.2.0"
-      }
-    },
-    "jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "requires": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
-    },
-    "jsonparse": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA="
-    },
-    "jsonpointer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
-      "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
-    },
-    "jsonwebtoken": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.2.1.tgz",
-      "integrity": "sha512-l8rUBr0fqYYwPc8/ZGrue7GiW7vWdZtZqelxo4Sd5lMvuEeCK8/wS54sEo6tJhdZ6hqfutsj6COgC0d1XdbHGw==",
-      "requires": {
-        "jws": "^3.1.4",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "xtend": "^4.0.1"
-      }
-    },
-    "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      }
-    },
-    "jsx-ast-utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
-      "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE="
-    },
-    "jszip": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.6.1.tgz",
-      "integrity": "sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=",
-      "requires": {
-        "pako": "~1.0.2"
-      },
-      "dependencies": {
-        "pako": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-          "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
-        }
-      }
-    },
-    "jwa": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "requires": {
-        "buffer-equal-constant-time": "1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "requires": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg=="
-    },
-    "kind-of": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
-    },
-    "kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
-    },
-    "latest-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
-      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
-      "requires": {
-        "package-json": "^4.0.0"
-      }
-    },
-    "lazystream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
-      "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
-      "requires": {
-        "readable-stream": "^2.0.5"
-      }
-    },
-    "lcid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-      "requires": {
-        "invert-kv": "^2.0.0"
-      }
-    },
-    "left-pad": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
-      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA=="
-    },
-    "lerna": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/lerna/-/lerna-2.11.0.tgz",
-      "integrity": "sha512-kgM6zwe2P2tR30MYvgiLLW+9buFCm6E7o8HnRlhTgm70WVBvXVhydqv+q/MF2HrVZkCawfVtCfetyQmtd4oHhQ==",
-      "requires": {
-        "async": "^1.5.0",
-        "chalk": "^2.1.0",
-        "cmd-shim": "^2.0.2",
-        "columnify": "^1.5.4",
-        "command-join": "^2.0.0",
-        "conventional-changelog-cli": "^1.3.13",
-        "conventional-recommended-bump": "^1.2.1",
-        "dedent": "^0.7.0",
-        "execa": "^0.8.0",
-        "find-up": "^2.1.0",
-        "fs-extra": "^4.0.1",
-        "get-port": "^3.2.0",
-        "glob": "^7.1.2",
-        "glob-parent": "^3.1.0",
-        "globby": "^6.1.0",
-        "graceful-fs": "^4.1.11",
-        "hosted-git-info": "^2.5.0",
-        "inquirer": "^3.2.2",
-        "is-ci": "^1.0.10",
-        "load-json-file": "^4.0.0",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.4",
-        "npmlog": "^4.1.2",
-        "p-finally": "^1.0.0",
-        "package-json": "^4.0.1",
-        "path-exists": "^3.0.0",
-        "read-cmd-shim": "^1.0.1",
-        "read-pkg": "^3.0.0",
-        "rimraf": "^2.6.1",
-        "safe-buffer": "^5.1.1",
-        "semver": "^5.4.1",
-        "signal-exit": "^3.0.2",
-        "slash": "^1.0.0",
-        "strong-log-transformer": "^1.0.6",
-        "temp-write": "^3.3.0",
-        "write-file-atomic": "^2.3.0",
-        "write-json-file": "^2.2.0",
-        "write-pkg": "^3.1.0",
-        "yargs": "^8.0.2"
-      },
-      "dependencies": {
-        "async": {
-          "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
-        },
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
-        },
-        "ci-info": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
-          "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
-        },
-        "cliui": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-          "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wrap-ansi": "^2.0.0"
-          },
-          "dependencies": {
-            "string-width": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-              "requires": {
-                "code-point-at": "^1.0.0",
-                "is-fullwidth-code-point": "^1.0.0",
-                "strip-ansi": "^3.0.0"
-              }
-            }
-          }
-        },
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.8.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
-          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "fs-extra": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        },
-        "invert-kv": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
-        },
-        "is-ci": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
-          "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
-          "requires": {
-            "ci-info": "^1.5.0"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "lcid": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-          "requires": {
-            "invert-kv": "^1.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "mem": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
-          "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
-          "requires": {
-            "mimic-fn": "^1.0.0"
-          }
-        },
-        "os-locale": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
-          "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
-          "requires": {
-            "execa": "^0.7.0",
-            "lcid": "^1.0.0",
-            "mem": "^1.1.0"
-          },
-          "dependencies": {
-            "execa": {
-              "version": "0.7.0",
-              "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-              "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-              "requires": {
-                "cross-spawn": "^5.0.1",
-                "get-stream": "^3.0.0",
-                "is-stream": "^1.1.0",
-                "npm-run-path": "^2.0.0",
-                "p-finally": "^1.0.0",
-                "signal-exit": "^3.0.0",
-                "strip-eof": "^1.0.0"
-              }
-            }
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-type": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
-          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "requires": {
-            "pify": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg-up": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
-          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-          "requires": {
-            "find-up": "^2.0.0",
-            "read-pkg": "^2.0.0"
-          },
-          "dependencies": {
-            "load-json-file": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
-              "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-              "requires": {
-                "graceful-fs": "^4.1.2",
-                "parse-json": "^2.2.0",
-                "pify": "^2.0.0",
-                "strip-bom": "^3.0.0"
-              }
-            },
-            "read-pkg": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
-              "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-              "requires": {
-                "load-json-file": "^2.0.0",
-                "normalize-package-data": "^2.3.2",
-                "path-type": "^2.0.0"
-              }
-            }
-          }
-        },
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
-        },
-        "slash": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
-        },
-        "y18n": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
-        },
-        "yargs": {
-          "version": "8.0.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
-          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
-          "requires": {
-            "camelcase": "^4.1.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^2.0.0",
-            "read-pkg-up": "^2.0.0",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^7.0.0"
-          }
-        },
-        "yargs-parser": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
-          "integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
-          "requires": {
-            "camelcase": "^4.1.0"
-          }
-        }
-      }
-    },
-    "leven": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
-      "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA="
-    },
-    "levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "requires": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      }
-    },
-    "lint-staged": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-7.3.0.tgz",
-      "integrity": "sha512-AXk40M9DAiPi7f4tdJggwuKIViUplYtVj1os1MVEteW7qOkU50EOehayCfO9TsoGK24o/EsWb41yrEgfJDDjCw==",
-      "requires": {
-        "chalk": "^2.3.1",
-        "commander": "^2.14.1",
-        "cosmiconfig": "^5.0.2",
-        "debug": "^3.1.0",
-        "dedent": "^0.7.0",
-        "execa": "^0.9.0",
-        "find-parent-dir": "^0.3.0",
-        "is-glob": "^4.0.0",
-        "is-windows": "^1.0.2",
-        "jest-validate": "^23.5.0",
-        "listr": "^0.14.1",
-        "lodash": "^4.17.5",
-        "log-symbols": "^2.2.0",
-        "micromatch": "^3.1.8",
-        "npm-which": "^3.0.1",
-        "p-map": "^1.1.1",
-        "path-is-inside": "^1.0.2",
-        "pify": "^3.0.0",
-        "please-upgrade-node": "^3.0.2",
-        "staged-git-files": "1.1.1",
-        "string-argv": "^0.0.2",
-        "stringify-object": "^3.2.2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "execa": {
-          "version": "0.9.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.9.0.tgz",
-          "integrity": "sha512-BbUMBiX4hqiHZUA5+JujIjNb6TyAlp2D5KLheMjMluwOuzcnylDL4AxZYLLn1n2AGB49eSWwyKvvEQoRpnAtmA==",
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        },
-        "is-glob": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-          "requires": {
-            "is-extglob": "^2.1.1"
-          }
-        },
-        "jest-get-type": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
-          "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w=="
-        },
-        "jest-validate": {
-          "version": "23.6.0",
-          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.6.0.tgz",
-          "integrity": "sha512-OFKapYxe72yz7agrDAWi8v2WL8GIfVqcbKRCLbRG9PAxtzF9b1SEDdTpytNDN12z2fJynoBwpMpvj2R39plI2A==",
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-get-type": "^22.1.0",
-            "leven": "^2.1.0",
-            "pretty-format": "^23.6.0"
-          }
-        },
-        "pretty-format": {
-          "version": "23.6.0",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz",
-          "integrity": "sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==",
-          "requires": {
-            "ansi-regex": "^3.0.0",
-            "ansi-styles": "^3.2.0"
-          }
-        }
-      }
-    },
-    "listr": {
-      "version": "0.14.3",
-      "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
-      "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
-      "requires": {
-        "@samverschueren/stream-to-observable": "^0.3.0",
-        "is-observable": "^1.1.0",
-        "is-promise": "^2.1.0",
-        "is-stream": "^1.1.0",
-        "listr-silent-renderer": "^1.1.1",
-        "listr-update-renderer": "^0.5.0",
-        "listr-verbose-renderer": "^0.5.0",
-        "p-map": "^2.0.0",
-        "rxjs": "^6.3.3"
-      },
-      "dependencies": {
-        "p-map": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="
-        }
-      }
-    },
-    "listr-silent-renderer": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
-      "integrity": "sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4="
-    },
-    "listr-update-renderer": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
-      "integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
-      "requires": {
-        "chalk": "^1.1.3",
-        "cli-truncate": "^0.2.1",
-        "elegant-spinner": "^1.0.1",
-        "figures": "^1.7.0",
-        "indent-string": "^3.0.0",
-        "log-symbols": "^1.0.2",
-        "log-update": "^2.3.0",
-        "strip-ansi": "^3.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "figures": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-          "requires": {
-            "escape-string-regexp": "^1.0.5",
-            "object-assign": "^4.1.0"
-          }
-        },
-        "log-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
-          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
-          "requires": {
-            "chalk": "^1.0.0"
-          }
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
-    "listr-verbose-renderer": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
-      "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
-      "requires": {
-        "chalk": "^2.4.1",
-        "cli-cursor": "^2.1.0",
-        "date-fns": "^1.27.2",
-        "figures": "^2.0.0"
-      }
-    },
-    "load-json-file": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^4.0.0",
-        "pify": "^3.0.0",
-        "strip-bom": "^3.0.0"
-      }
-    },
-    "loader-runner": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
-    },
-    "loader-utils": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-      "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-      "requires": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^2.0.0",
-        "json5": "^1.0.1"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        }
-      }
-    },
-    "local-storage-fallback": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/local-storage-fallback/-/local-storage-fallback-4.1.1.tgz",
-      "integrity": "sha512-Ka4rem1FOgvIaPMokxXTP8DgW8gjfAQSdJC8TGrplDug7vh3b0PZnY/9euG3O3cIGAvJLp33mMU6MJ13x6S+Pw==",
-      "requires": {
-        "cookie": "^0.3.1"
-      }
-    },
-    "locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "requires": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      }
-    },
-    "lodash": {
-      "version": "4.17.11",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
-    },
-    "lodash._basecopy": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY="
-    },
-    "lodash._basetostring": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
-      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U="
-    },
-    "lodash._basevalues": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc="
-    },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
-    },
-    "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw="
-    },
-    "lodash._reescape": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo="
-    },
-    "lodash._reevaluate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0="
-    },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
-    },
-    "lodash._root": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
-      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI="
-    },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
-    },
-    "lodash.defaults": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
-    },
-    "lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
-    },
-    "lodash.escape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
-      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
-      "requires": {
-        "lodash._root": "^3.0.0"
-      }
-    },
-    "lodash.flatten": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
-      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
-    },
-    "lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
-    },
-    "lodash.isarguments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
-    },
-    "lodash.isarray": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
-    },
-    "lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
-    },
-    "lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
-    },
-    "lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-    },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
-    "lodash.keys": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-      "requires": {
-        "lodash._getnative": "^3.0.0",
-        "lodash.isarguments": "^3.0.0",
-        "lodash.isarray": "^3.0.0"
-      }
-    },
-    "lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
-    },
-    "lodash.restparam": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU="
-    },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
-    },
-    "lodash.template": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
-      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
-      "requires": {
-        "lodash._basecopy": "^3.0.0",
-        "lodash._basetostring": "^3.0.0",
-        "lodash._basevalues": "^3.0.0",
-        "lodash._isiterateecall": "^3.0.0",
-        "lodash._reinterpolate": "^3.0.0",
-        "lodash.escape": "^3.0.0",
-        "lodash.keys": "^3.0.0",
-        "lodash.restparam": "^3.0.0",
-        "lodash.templatesettings": "^3.0.0"
-      }
-    },
-    "lodash.templatesettings": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
-      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
-      "requires": {
-        "lodash._reinterpolate": "^3.0.0",
-        "lodash.escape": "^3.0.0"
-      }
-    },
-    "lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
-    },
-    "lodash.toarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
-      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
-    },
-    "lodash.union": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
-      "integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg="
-    },
-    "log-symbols": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
-      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
-      "requires": {
-        "chalk": "^2.0.1"
-      }
-    },
-    "log-update": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
-      "integrity": "sha1-iDKP19HOeTiykoN0bwsbwSayRwg=",
-      "requires": {
-        "ansi-escapes": "^3.0.0",
-        "cli-cursor": "^2.0.0",
-        "wrap-ansi": "^3.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
-          "integrity": "sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=",
-          "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0"
-          }
-        }
-      }
-    },
-    "loglevel": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
-      "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "requires": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      }
-    },
-    "lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
-    },
-    "lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "requires": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "requires": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-        }
-      }
-    },
-    "makeerror": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
-      "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
-      "requires": {
-        "tmpl": "1.0.x"
-      }
-    },
-    "mamacro": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
-      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA=="
-    },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
-    "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
-    },
-    "map-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz",
-      "integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk="
-    },
-    "map-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-      "requires": {
-        "object-visit": "^1.0.0"
-      }
-    },
-    "material-colors": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
-      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
-    },
-    "md5.js": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
-      "requires": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "mdn-browser-compat-data": {
-      "version": "0.0.66",
-      "resolved": "https://registry.npmjs.org/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.66.tgz",
-      "integrity": "sha512-Exx+o05KYCltHmY2thfCoufBaHeqbIzqZHQPDtmcC+nkeFG++ONzwddBtgDBAKeI0IFFKqGIbRT1QBRwmk9QKA==",
-      "requires": {
-        "extend": "3.0.2"
-      }
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
-    },
-    "mem": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "requires": {
-        "map-age-cleaner": "^0.1.1",
-        "mimic-fn": "^2.0.0",
-        "p-is-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "mimic-fn": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
-        }
-      }
-    },
-    "memoize-one": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-3.1.1.tgz",
-      "integrity": "sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA=="
-    },
-    "memory-fs": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
-      "requires": {
-        "errno": "^0.1.3",
-        "readable-stream": "^2.0.1"
-      }
-    },
-    "meow": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-      "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
-      "requires": {
-        "camelcase-keys": "^4.0.0",
-        "decamelize-keys": "^1.0.0",
-        "loud-rejection": "^1.0.0",
-        "minimist": "^1.1.3",
-        "minimist-options": "^3.0.1",
-        "normalize-package-data": "^2.3.4",
-        "read-pkg-up": "^3.0.0",
-        "redent": "^2.0.0",
-        "trim-newlines": "^2.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
-        },
-        "read-pkg-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
-          "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
-          "requires": {
-            "find-up": "^2.0.0",
-            "read-pkg": "^3.0.0"
-          }
-        }
-      }
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
-    },
-    "merge-stream": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
-      "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=",
-      "requires": {
-        "readable-stream": "^2.0.1"
-      }
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
-    },
-    "micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
-      }
-    },
-    "miller-rabin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-      "requires": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      }
-    },
-    "mime": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
-    },
-    "mime-db": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
-    },
-    "mime-types": {
-      "version": "2.1.24",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
-      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-      "requires": {
-        "mime-db": "1.40.0"
-      }
-    },
-    "mimic-fn": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
-    },
-    "minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-    },
-    "minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
-    },
-    "minimist-options": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-      "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
-      "requires": {
-        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0"
-      }
-    },
-    "mississippi": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-      "requires": {
-        "concat-stream": "^1.5.0",
-        "duplexify": "^3.4.2",
-        "end-of-stream": "^1.1.0",
-        "flush-write-stream": "^1.0.0",
-        "from2": "^2.1.0",
-        "parallel-transform": "^1.1.0",
-        "pump": "^3.0.0",
-        "pumpify": "^1.3.3",
-        "stream-each": "^1.1.0",
-        "through2": "^2.0.0"
-      }
-    },
-    "mixin-deep": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
-      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
-      "requires": {
-        "for-in": "^1.0.2",
-        "is-extendable": "^1.0.1"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-        }
-      }
-    },
-    "modify-values": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw=="
-    },
-    "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
-    },
-    "move-concurrently": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
-      "requires": {
-        "aproba": "^1.1.1",
-        "copy-concurrently": "^1.0.0",
-        "fs-write-stream-atomic": "^1.0.8",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.3"
-      }
-    },
-    "ms": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-    },
-    "multicast-dns": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
-      "requires": {
-        "dns-packet": "^1.3.1",
-        "thunky": "^1.0.2"
-      }
-    },
-    "multicast-dns-service-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
-    },
-    "multimatch": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
-      "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
-      "requires": {
-        "array-differ": "^1.0.0",
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "minimatch": "^3.0.0"
-      }
-    },
-    "multipipe": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
-      "requires": {
-        "duplexer2": "0.0.2"
-      }
-    },
-    "mute-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
-    },
-    "mv": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
-      "integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
-      "optional": true,
-      "requires": {
-        "mkdirp": "~0.5.1",
-        "ncp": "~2.0.0",
-        "rimraf": "~2.4.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "optional": true,
-          "requires": {
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "2 || 3",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "2.4.5",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
-          "integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
-          "optional": true,
-          "requires": {
-            "glob": "^6.0.1"
-          }
-        }
-      }
-    },
-    "mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "requires": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "nan": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
-      "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
-      "optional": true
-    },
-    "nanomatch": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "fragment-cache": "^0.2.1",
-        "is-windows": "^1.0.2",
-        "kind-of": "^6.0.2",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      }
-    },
-    "natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
-    },
-    "natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q="
-    },
-    "ncp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
-      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
-      "optional": true
-    },
-    "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
-    },
-    "neo-async": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
-      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
-    },
-    "next-tick": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
-      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
-    },
-    "nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
-    },
-    "node-forge": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
-      "integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw=="
-    },
-    "node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs="
-    },
-    "node-libs-browser": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-0.5.3.tgz",
-      "integrity": "sha1-Ve+oiOyQes24z/xOelFxJ4DhO2o=",
-      "requires": {
-        "assert": "^1.1.1",
-        "browserify-zlib": "~0.1.4",
-        "buffer": "^3.0.3",
-        "console-browserify": "^1.1.0",
-        "constants-browserify": "0.0.1",
-        "crypto-browserify": "~3.2.6",
-        "domain-browser": "^1.1.1",
-        "events": "^1.0.0",
-        "http-browserify": "^1.3.2",
-        "https-browserify": "0.0.0",
-        "os-browserify": "~0.1.2",
-        "path-browserify": "0.0.0",
-        "process": "^0.11.0",
-        "punycode": "^1.2.4",
-        "querystring-es3": "~0.2.0",
-        "readable-stream": "^1.1.13",
-        "stream-browserify": "^1.0.0",
-        "string_decoder": "~0.10.25",
-        "timers-browserify": "^1.0.1",
-        "tty-browserify": "0.0.0",
-        "url": "~0.10.1",
-        "util": "~0.10.3",
-        "vm-browserify": "0.0.4"
-      },
-      "dependencies": {
-        "base64-js": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
-          "integrity": "sha1-EQHpVE9KdrG8OybUUsqW16NeeXg="
-        },
-        "buffer": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-3.6.0.tgz",
-          "integrity": "sha1-pyyTb3e5a/UvX357RnGAYoVR3vs=",
-          "requires": {
-            "base64-js": "0.0.8",
-            "ieee754": "^1.1.4",
-            "isarray": "^1.0.0"
-          }
-        },
-        "events": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        },
-        "readable-stream": {
-          "version": "1.1.14",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          },
-          "dependencies": {
-            "isarray": {
-              "version": "0.0.1",
-              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-              "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-            }
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        }
-      }
-    },
-    "node-modules-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
-    },
-    "node-notifier": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.0.tgz",
-      "integrity": "sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ==",
-      "requires": {
-        "growly": "^1.3.0",
-        "is-wsl": "^1.1.0",
-        "semver": "^5.5.0",
-        "shellwords": "^0.1.1",
-        "which": "^1.3.0"
-      }
-    },
-    "node-releases": {
-      "version": "1.1.18",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.18.tgz",
-      "integrity": "sha512-/mnVgm6u/8OwlIsoyRXtTI0RfQcxZoAZbdwyXap0EeWwcOpDDymyCHM2/aR9XKmHXrvizHoPAOs0pcbiJ6RUaA==",
-      "requires": {
-        "semver": "^5.3.0"
-      }
-    },
-    "node-rsa": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/node-rsa/-/node-rsa-1.0.5.tgz",
-      "integrity": "sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==",
-      "requires": {
-        "asn1": "^0.2.4"
-      }
-    },
-    "node-version": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/node-version/-/node-version-1.2.0.tgz",
-      "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ=="
-    },
-    "nomnom": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
-      "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
-      "requires": {
-        "chalk": "~0.4.0",
-        "underscore": "~1.6.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
-          "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg="
-        },
-        "chalk": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
-          "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
-          "requires": {
-            "ansi-styles": "~1.0.0",
-            "has-color": "~0.1.0",
-            "strip-ansi": "~0.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
-          "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE="
-        }
-      }
-    },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "requires": {
-        "remove-trailing-separator": "^1.0.1"
-      }
-    },
-    "normalize-url": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
-      "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
-      "requires": {
-        "object-assign": "^4.0.1",
-        "prepend-http": "^1.0.0",
-        "query-string": "^4.1.0",
-        "sort-keys": "^1.0.0"
-      }
-    },
-    "npm-path": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/npm-path/-/npm-path-2.0.4.tgz",
-      "integrity": "sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==",
-      "requires": {
-        "which": "^1.2.10"
-      }
-    },
-    "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "requires": {
-        "path-key": "^2.0.0"
-      }
-    },
-    "npm-which": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/npm-which/-/npm-which-3.0.1.tgz",
-      "integrity": "sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=",
-      "requires": {
-        "commander": "^2.9.0",
-        "npm-path": "^2.0.2",
-        "which": "^1.2.10"
-      }
-    },
-    "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "requires": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
-      }
-    },
-    "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "requires": {
-        "boolbase": "~1.0.0"
-      }
-    },
-    "nullthrows": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
-      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
-    },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
-    },
-    "nwsapi": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.4.tgz",
-      "integrity": "sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw=="
-    },
-    "oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
-    },
-    "object-assign": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
-      "integrity": "sha1-mVBEVsNZi1ytT8WcJuipuxB/4L0="
-    },
-    "object-copy": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-      "requires": {
-        "copy-descriptor": "^0.1.0",
-        "define-property": "^0.2.5",
-        "kind-of": "^3.0.3"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-    },
-    "object-visit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-      "requires": {
-        "isobject": "^3.0.0"
-      }
-    },
-    "object.fromentries": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.0.tgz",
-      "integrity": "sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==",
-      "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.11.0",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.1"
-      }
-    },
-    "object.getownpropertydescriptors": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
-      "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
-      "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.5.1"
-      }
-    },
-    "object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "onetime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-      "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
-      "requires": {
-        "mimic-fn": "^1.0.0"
-      }
-    },
-    "opener": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
-      "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA=="
-    },
-    "opn": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
-      "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
-      "requires": {
-        "is-wsl": "^1.1.0"
-      }
-    },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
-        },
-        "wordwrap": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
-        }
-      }
-    },
-    "optionator": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
-      "requires": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.4",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "wordwrap": "~1.0.0"
-      }
-    },
-    "original": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
-      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
-      "requires": {
-        "url-parse": "^1.4.3"
-      }
-    },
-    "os-browserify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz",
-      "integrity": "sha1-ScoCk+CxlZCl9d4Qx/JlphfY/lQ="
-    },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
-    },
-    "os-locale": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-      "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-      "requires": {
-        "execa": "^1.0.0",
-        "lcid": "^2.0.0",
-        "mem": "^4.0.0"
-      }
-    },
-    "os-shim": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
-      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc="
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
-    },
-    "osenv": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.0.3.tgz",
-      "integrity": "sha1-zWrY3bKQkVrZ4idlV2Al1BHynLY="
-    },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww="
-    },
-    "p-each-series": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz",
-      "integrity": "sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=",
-      "requires": {
-        "p-reduce": "^1.0.0"
-      }
-    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
-    },
-    "p-is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg=="
-    },
-    "p-limit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
-      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "requires": {
-        "p-limit": "^2.0.0"
-      }
-    },
-    "p-map": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
-      "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA=="
-    },
-    "p-reduce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
-      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo="
-    },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-    },
-    "package-json": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
-      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
-      "requires": {
-        "got": "^6.7.1",
-        "registry-auth-token": "^3.0.1",
-        "registry-url": "^3.0.3",
-        "semver": "^5.1.0"
-      }
-    },
-    "pako": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
-      "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
-    },
-    "parallel-transform": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz",
-      "integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=",
-      "requires": {
-        "cyclist": "~0.2.2",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.1.5"
-      }
-    },
-    "parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "requires": {
-        "callsites": "^3.0.0"
-      }
-    },
-    "parse-asn1": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.4.tgz",
-      "integrity": "sha512-Qs5duJcuvNExRfFZ99HDD3z4mAi3r9Wl/FOjEOijlxwCZs7E7mW2vjTpgQ4J8LpTF8x5v+1Vn5UQFejmWT11aw==",
-      "requires": {
-        "asn1.js": "^4.0.0",
-        "browserify-aes": "^1.0.0",
-        "create-hash": "^1.1.0",
-        "evp_bytestokey": "^1.0.0",
-        "pbkdf2": "^3.0.3",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "parse-github-repo-url": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz",
-      "integrity": "sha1-nn2LslKmy2ukJZUGC3v23z28H1A="
-    },
-    "parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-      "requires": {
-        "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
-      }
-    },
-    "parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
-    },
-    "parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
-    },
-    "parse5": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
-      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA=="
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-    },
-    "pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
-    },
-    "path-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
-      "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo="
-    },
-    "path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
-    },
-    "path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
-    },
-    "path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
-    },
-    "path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
-    },
-    "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
-    },
-    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
-    },
-    "path-type": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-      "requires": {
-        "pify": "^3.0.0"
-      }
-    },
-    "pbf": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.0.tgz",
-      "integrity": "sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==",
-      "requires": {
-        "ieee754": "^1.1.12",
-        "resolve-protobuf-schema": "^2.1.0"
-      }
-    },
-    "pbkdf2": {
-      "version": "3.0.17",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
-      "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==",
-      "requires": {
-        "create-hash": "^1.1.2",
-        "create-hmac": "^1.1.4",
-        "ripemd160": "^2.0.1",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      },
-      "dependencies": {
-        "ripemd160": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-          "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
-          "requires": {
-            "hash-base": "^3.0.0",
-            "inherits": "^2.0.1"
-          }
-        },
-        "sha.js": {
-          "version": "2.4.11",
-          "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-          "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-          "requires": {
-            "inherits": "^2.0.1",
-            "safe-buffer": "^5.0.1"
-          }
-        }
-      }
-    },
-    "pbkdf2-compat": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz",
-      "integrity": "sha1-tuDI+plJTZTgURV1gCpZpcFC8og="
-    },
-    "pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
-    },
-    "performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
-    },
-    "pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "requires": {
-        "pinkie": "^2.0.0"
-      }
-    },
-    "pino": {
-      "version": "5.11.1",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-5.11.1.tgz",
-      "integrity": "sha512-NIua0mGb9Adknq35ONvQmvh93LCUVUjp2+1q1EcvIkJmpJnSd3E5rHVKlKNjzMXFl/z3fI+QA0xXCjPEKNiLvQ==",
-      "requires": {
-        "fast-redact": "^1.4.2",
-        "fast-safe-stringify": "^2.0.6",
-        "flatstr": "^1.0.9",
-        "pino-std-serializers": "^2.3.0",
-        "quick-format-unescaped": "^3.0.0",
-        "sonic-boom": "^0.7.1"
-      }
-    },
-    "pino-std-serializers": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-2.4.1.tgz",
-      "integrity": "sha512-v/JglhO0aFcvkMV9VUxhgyuJo8K1si857Ww86Tx8H2cjC/kp0ndzzcF6Vbxr4RgKFYJdHfLVpEuD55znMZuxnw=="
-    },
-    "pirates": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
-      "requires": {
-        "node-modules-regexp": "^1.0.0"
-      }
-    },
-    "pkg-dir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-      "requires": {
-        "find-up": "^3.0.0"
-      }
-    },
-    "please-upgrade-node": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz",
-      "integrity": "sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==",
-      "requires": {
-        "semver-compare": "^1.0.0"
-      }
-    },
-    "pluralize": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
-      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
-    },
-    "pn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
-      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
-    },
-    "po2json": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/po2json/-/po2json-0.4.5.tgz",
-      "integrity": "sha1-R7spUtoy1Yob4vJWpZjuvAt0URg=",
-      "requires": {
-        "gettext-parser": "1.1.0",
-        "nomnom": "1.8.1"
-      }
-    },
-    "portfinder": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
-      "integrity": "sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==",
-      "requires": {
-        "async": "^1.5.2",
-        "debug": "^2.2.0",
-        "mkdirp": "0.5.x"
-      },
-      "dependencies": {
-        "async": {
-          "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
-    },
-    "postcss": {
-      "version": "6.0.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-      "requires": {
-        "chalk": "^2.4.1",
-        "source-map": "^0.6.1",
-        "supports-color": "^5.4.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
-      "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
-      "requires": {
-        "postcss": "^6.0.1"
-      }
-    },
-    "postcss-modules-local-by-default": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
-      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
-      "requires": {
-        "css-selector-tokenizer": "^0.7.0",
-        "postcss": "^6.0.1"
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
-      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
-      "requires": {
-        "css-selector-tokenizer": "^0.7.0",
-        "postcss": "^6.0.1"
-      }
-    },
-    "postcss-modules-values": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
-      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
-      "requires": {
-        "icss-replace-symbols": "^1.1.0",
-        "postcss": "^6.0.1"
-      }
-    },
-    "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-    },
-    "prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
-    },
-    "prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
-    },
-    "prettier": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.17.0.tgz",
-      "integrity": "sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw=="
-    },
-    "pretty-format": {
-      "version": "24.8.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.8.0.tgz",
-      "integrity": "sha512-P952T7dkrDEplsR+TuY7q3VXDae5Sr7zmQb12JU/NDQa/3CH7/QW0yvqLcGN6jL+zQFKaoJcPc+yJxMTGmosqw==",
-      "requires": {
-        "@jest/types": "^24.8.0",
-        "ansi-regex": "^4.0.0",
-        "ansi-styles": "^3.2.0",
-        "react-is": "^16.8.4"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-        },
-        "react-is": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
-          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
-        }
-      }
-    },
-    "private": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
-    },
-    "probe-image-size": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-4.0.0.tgz",
-      "integrity": "sha512-nm7RvWUxps+2+jZKNLkd04mNapXNariS6G5WIEVzvAqjx7EUuKcY1Dp3e6oUK7GLwzJ+3gbSbPLFAASHFQrPcQ==",
-      "requires": {
-        "any-promise": "^1.3.0",
-        "deepmerge": "^2.0.1",
-        "inherits": "^2.0.3",
-        "next-tick": "^1.0.0",
-        "request": "^2.83.0",
-        "stream-parser": "~0.3.1"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
-        }
-      }
-    },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-    },
-    "process-nextick-args": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
-    },
-    "progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
-    },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
-    "promise-inflight": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
-    },
-    "promise-polyfill": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
-      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
-    },
-    "prompts": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.0.4.tgz",
-      "integrity": "sha512-HTzM3UWp/99A0gk51gAegwo1QRYA7xjcZufMNe33rCclFszUYAuHe1fIN/3ZmiHeGPkUsNaRyQm1hHOfM0PKxA==",
-      "requires": {
-        "kleur": "^3.0.2",
-        "sisteransi": "^1.0.0"
-      }
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "react-is": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
-          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
-        }
-      }
-    },
-    "protocol-buffers-schema": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz",
-      "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
-    },
-    "proxy-addr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
-      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
-      "requires": {
-        "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.0"
-      }
-    },
-    "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
-    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
-    },
-    "psl": {
-      "version": "1.1.31",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
-      "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw=="
-    },
-    "public-encrypt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
-      "requires": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "pumpify": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
-      "requires": {
-        "duplexify": "^3.6.0",
-        "inherits": "^2.0.3",
-        "pump": "^2.0.0"
-      },
-      "dependencies": {
-        "pump": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
-          "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
-          }
-        }
-      }
-    },
-    "punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-    },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
-    },
-    "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
-    },
-    "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        }
-      }
-    },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
-    },
-    "querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
-    },
-    "querystringify": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
-      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
-    },
-    "quick-format-unescaped": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-3.0.2.tgz",
-      "integrity": "sha512-FXTaCkwvpIlkdKeGDNgcq07SXWS383noQUuZjvdE1QcTt+eLuqof6/BDiEPqB59FWLie/l91+HtlJSw7iCViSA=="
-    },
-    "quick-lru": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz",
-      "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g="
-    },
-    "quick-tmp": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/quick-tmp/-/quick-tmp-0.0.0.tgz",
-      "integrity": "sha1-QWXmYyDqBfnLzM874fj9X9sF998=",
-      "requires": {
-        "first-match": "0.0.1",
-        "osenv": "0.0.3"
-      }
-    },
-    "randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "requires": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "randomfill": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
-      "requires": {
-        "randombytes": "^2.0.5",
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-    },
-    "raw-body": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
-      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
-      "requires": {
-        "bytes": "3.0.0",
-        "http-errors": "1.6.3",
-        "iconv-lite": "0.4.23",
-        "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "iconv-lite": {
-          "version": "0.4.23",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
-          "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        }
-      }
-    },
-    "rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "requires": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      }
-    },
-    "react": {
-      "version": "0.0.0-fec00a869",
-      "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-fec00a869.tgz",
-      "integrity": "sha512-FaS3ViFU4ag7cuhDHQgGK3DAdWaD8YFXzEbO/Qzz33Si7VEzRRdnyoegFwg7VkEKxR6CvCVP6revi9Tm3Gq+WQ==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "0.0.0-fec00a869"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        }
-      }
-    },
-    "react-color": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
-      "integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
-      "requires": {
-        "@icons/material": "^0.2.4",
-        "lodash": "^4.17.11",
-        "material-colors": "^1.2.1",
-        "prop-types": "^15.5.10",
-        "reactcss": "^1.2.0",
-        "tinycolor2": "^1.4.1"
-      }
-    },
-    "react-dom": {
-      "version": "0.0.0-fec00a869",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-fec00a869.tgz",
-      "integrity": "sha512-atB5i2HgCvbvhtGXq9oaX/BCL2AFZjnccougU8S9eulRFNQbNrfGNwIcj04PRo3XU1ZsBw5syL/5l596UaolKA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "0.0.0-fec00a869"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        }
-      }
-    },
-    "react-is": {
-      "version": "0.0.0-fec00a869",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-0.0.0-fec00a869.tgz",
-      "integrity": "sha512-VYVE8DePYc/7xH7irSYv8rTXZhEvAl9AQHY4whTTgQTq9lDmtMNG5tuPcNlW+kGc3yr8dLmbmy4NaxN+Qnx9Ig=="
-    },
-    "react-test-renderer": {
-      "version": "0.0.0-fec00a869",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-0.0.0-fec00a869.tgz",
-      "integrity": "sha512-eNt1Hktzly+HbUuEETXdJzWX3udr7FjHXhu3mQx8Y4r4841qtpuaFf2fnp0cYfRYsUadLVrL9kG4itCuwjUZJQ==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "0.0.0-fec00a869",
-        "scheduler": "0.0.0-fec00a869"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        }
-      }
-    },
-    "react-virtualized-auto-sizer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
-      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
-    },
-    "react-window": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.1.tgz",
-      "integrity": "sha512-iNzekymggL9zAnil3QbmRG74RDMfIbO+plE/soP3M/zskicA1DwoLthC6/QA6xu9dr+A5UoawCTsEYcva2mfeA==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      }
-    },
-    "reactcss": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
-      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
-      "requires": {
-        "lodash": "^4.0.1"
-      }
-    },
-    "read-cmd-shim": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz",
-      "integrity": "sha1-LV0Vd4ajfAVdIgd8MsU/gynpHHs=",
-      "requires": {
-        "graceful-fs": "^4.1.2"
-      }
-    },
-    "read-pkg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-      "requires": {
-        "load-json-file": "^4.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^3.0.0"
-      }
-    },
-    "read-pkg-up": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-      "requires": {
-        "find-up": "^3.0.0",
-        "read-pkg": "^3.0.0"
-      }
-    },
-    "readable-stream": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "readdirp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "requires": {
-        "graceful-fs": "^4.1.11",
-        "micromatch": "^3.1.10",
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "readline2": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
-      "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=",
-      "requires": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "mute-stream": "0.0.5"
-      },
-      "dependencies": {
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "mute-stream": {
-          "version": "0.0.5",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-          "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA="
-        }
-      }
-    },
-    "realpath-native": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz",
-      "integrity": "sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==",
-      "requires": {
-        "util.promisify": "^1.0.0"
-      }
-    },
-    "rechoir": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
-      "requires": {
-        "resolve": "^1.1.6"
-      }
-    },
-    "redent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz",
-      "integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=",
-      "requires": {
-        "indent-string": "^3.0.0",
-        "strip-indent": "^2.0.0"
-      }
-    },
-    "regenerate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
-    },
-    "regenerate-unicode-properties": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz",
-      "integrity": "sha512-SbA/iNrBUf6Pv2zU8Ekv1Qbhv92yxL4hiDa2siuxs4KKn4oOoMDHXjAf7+Nz9qinUQ46B1LcWEi/PhJfPWpZWQ==",
-      "requires": {
-        "regenerate": "^1.4.0"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-    },
-    "regenerator-transform": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz",
-      "integrity": "sha512-T0QMBjK3J0MtxjPmdIMXm72Wvj2Abb0Bd4HADdfijwMdoIsyQZ6fWC7kDFhk2YinBBEMZDL7Y7wh0J1sGx3S4A==",
-      "requires": {
-        "private": "^0.1.6"
-      }
-    },
-    "regex-not": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "requires": {
-        "extend-shallow": "^3.0.2",
-        "safe-regex": "^1.1.0"
-      }
-    },
-    "regexp-tree": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.6.tgz",
-      "integrity": "sha512-LFrA98Dw/heXqDojz7qKFdygZmFoiVlvE1Zp7Cq2cvF+ZA+03Gmhy0k0PQlsC1jvHPiTUSs+pDHEuSWv6+6D7w=="
-    },
-    "regexpp": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
-      "integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw=="
-    },
-    "regexpu-core": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz",
-      "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==",
-      "requires": {
-        "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.0.2",
-        "regjsgen": "^0.5.0",
-        "regjsparser": "^0.6.0",
-        "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.1.0"
-      }
-    },
-    "registry-auth-token": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
-      "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
-      "requires": {
-        "rc": "^1.1.6",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "registry-url": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
-      "requires": {
-        "rc": "^1.0.1"
-      }
-    },
-    "regjsgen": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.0.tgz",
-      "integrity": "sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA=="
-    },
-    "regjsparser": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.0.tgz",
-      "integrity": "sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==",
-      "requires": {
-        "jsesc": "~0.5.0"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
-        }
-      }
-    },
-    "relaxed-json": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/relaxed-json/-/relaxed-json-1.0.1.tgz",
-      "integrity": "sha1-fI1KovCVcEzQIOMugJm8rhA/C9Q=",
-      "requires": {
-        "chalk": "^1.0.0",
-        "commander": "^2.6.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
-    "remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
-    },
-    "repeat-element": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
-      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g=="
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
-    },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "requires": {
-        "is-finite": "^1.0.0"
-      }
-    },
-    "replace-ext": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ="
-    },
-    "request": {
-      "version": "2.88.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-      "requires": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        },
-        "tough-cookie": {
-          "version": "2.4.3",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
-          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
-          "requires": {
-            "psl": "^1.1.24",
-            "punycode": "^1.4.1"
-          }
-        }
-      }
-    },
-    "request-promise": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.4.tgz",
-      "integrity": "sha512-8wgMrvE546PzbR5WbYxUQogUnUDfM0S7QIFZMID+J73vdFARkFy+HElj4T+MWYhpXwlLp0EQ8Zoj8xUA0he4Vg==",
-      "requires": {
-        "bluebird": "^3.5.0",
-        "request-promise-core": "1.1.2",
-        "stealthy-require": "^1.1.1",
-        "tough-cookie": "^2.3.3"
-      }
-    },
-    "request-promise-core": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.2.tgz",
-      "integrity": "sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==",
-      "requires": {
-        "lodash": "^4.17.11"
-      }
-    },
-    "request-promise-native": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.7.tgz",
-      "integrity": "sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==",
-      "requires": {
-        "request-promise-core": "1.1.2",
-        "stealthy-require": "^1.1.1",
-        "tough-cookie": "^2.3.3"
-      }
-    },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
-    },
-    "require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-    },
-    "require-uncached": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
-      "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
-      "requires": {
-        "caller-path": "^0.1.0",
-        "resolve-from": "^1.0.0"
-      }
-    },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
-    },
-    "resolve": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz",
-      "integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==",
-      "requires": {
-        "path-parse": "^1.0.6"
-      }
-    },
-    "resolve-cwd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-      "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
-      "requires": {
-        "resolve-from": "^3.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
-        }
-      }
-    },
-    "resolve-dir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
-      "requires": {
-        "expand-tilde": "^2.0.0",
-        "global-modules": "^1.0.0"
-      }
-    },
-    "resolve-from": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
-      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
-    },
-    "resolve-protobuf-schema": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
-      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
-      "requires": {
-        "protocol-buffers-schema": "^3.3.1"
-      }
-    },
-    "resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
-    },
-    "restore-cursor": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-      "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
-      "requires": {
-        "onetime": "^2.0.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
-    },
-    "rimraf": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-      "requires": {
-        "glob": "^7.1.3"
-      }
-    },
-    "ripemd160": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-0.2.0.tgz",
-      "integrity": "sha1-K/GYveFnys+lHAqSjoS2i74XH84="
-    },
-    "rsvp": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.4.tgz",
-      "integrity": "sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA=="
-    },
-    "run-async": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
-      "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
-      "requires": {
-        "is-promise": "^2.1.0"
-      }
-    },
-    "run-queue": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
-      "requires": {
-        "aproba": "^1.1.1"
-      }
-    },
-    "rx-lite": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
-      "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ="
-    },
-    "rx-lite-aggregates": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz",
-      "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=",
-      "requires": {
-        "rx-lite": "*"
-      }
-    },
-    "rxjs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
-      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "safe-json-stringify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz",
-      "integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==",
-      "optional": true
-    },
-    "safe-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "requires": {
-        "ret": "~0.1.10"
-      }
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "sane": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
-      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
-      "requires": {
-        "@cnakazawa/watch": "^1.0.3",
-        "anymatch": "^2.0.0",
-        "capture-exit": "^2.0.0",
-        "exec-sh": "^0.3.2",
-        "execa": "^1.0.0",
-        "fb-watchman": "^2.0.0",
-        "micromatch": "^3.1.4",
-        "minimist": "^1.1.1",
-        "walker": "~1.0.5"
-      }
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "scheduler": {
-      "version": "0.0.0-fec00a869",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-fec00a869.tgz",
-      "integrity": "sha512-0U25jnyBP6dRPYwaVW4WMYB0jJSYlrIHFmIuXv27X+KIHJr7vyE9gcFTqZ61NQTuxYLYepAHnUs4KgQEUDlI+g==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        }
-      }
-    },
-    "schema-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-      "requires": {
-        "ajv": "^6.1.0",
-        "ajv-errors": "^1.0.0",
-        "ajv-keywords": "^3.1.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.0.tgz",
-          "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw=="
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-        }
-      }
-    },
-    "select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
-    },
-    "selfsigned": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.4.tgz",
-      "integrity": "sha512-9AukTiDmHXGXWtWjembZ5NDmVvP2695EtpgbCsxCa68w3c88B+alqbmZ4O3hZ4VWGXeGWzEVdvqgAJD8DQPCDw==",
-      "requires": {
-        "node-forge": "0.7.5"
-      },
-      "dependencies": {
-        "node-forge": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
-          "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
-        }
-      }
-    },
-    "semver": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
-    },
-    "semver-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
-    },
-    "semver-diff": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
-      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
-      "requires": {
-        "semver": "^5.0.3"
-      }
-    },
-    "send": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
-      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.6.2",
-        "mime": "1.4.1",
-        "ms": "2.0.0",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.0",
-        "statuses": "~1.4.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "serialize-javascript": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.7.0.tgz",
-      "integrity": "sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA=="
-    },
-    "serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
-      "requires": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
-      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.2",
-        "send": "0.16.2"
-      }
-    },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-    },
-    "set-value": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
-      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
-    },
-    "setprototypeof": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
-    },
-    "sha.js": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.2.6.tgz",
-      "integrity": "sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo="
-    },
-    "shallow-copy": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz",
-      "integrity": "sha1-QV9CcC1z2BAzApLMXuhurhoRoXA="
-    },
-    "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "requires": {
-        "shebang-regex": "^1.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
-    },
-    "shell-quote": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
-      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
-      "requires": {
-        "array-filter": "~0.0.0",
-        "array-map": "~0.0.0",
-        "array-reduce": "~0.0.0",
-        "jsonify": "~0.0.0"
-      }
-    },
-    "shelljs": {
-      "version": "0.7.8",
-      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.8.tgz",
-      "integrity": "sha1-3svPh0sNHl+3LhSxZKloMEjprLM=",
-      "requires": {
-        "glob": "^7.0.0",
-        "interpret": "^1.0.0",
-        "rechoir": "^0.6.2"
-      }
-    },
-    "shellwords": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
-    },
-    "sign-addon": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/sign-addon/-/sign-addon-0.3.1.tgz",
-      "integrity": "sha512-feaoG7+8IXr9SymOEd8VTZCSlVZArWcBDZ33IIdfXlU5NWWzXdCxCjPDqAkLQplFa7RRZr1S4lSmgMPn80Ze1A==",
-      "requires": {
-        "babel-polyfill": "6.16.0",
-        "deepcopy": "0.6.3",
-        "es6-error": "4.0.0",
-        "es6-promisify": "5.0.0",
-        "jsonwebtoken": "8.2.1",
-        "mz": "2.5.0",
-        "request": "2.87.0",
-        "source-map-support": "0.4.6",
-        "stream-to-promise": "2.2.0",
-        "when": "3.7.7"
-      },
-      "dependencies": {
-        "es6-error": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.0.0.tgz",
-          "integrity": "sha1-8JTHBB9mJZm7EnINoFnWucf/D0A="
-        },
-        "har-validator": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
-          "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
-          "requires": {
-            "ajv": "^5.1.0",
-            "har-schema": "^2.0.0"
-          }
-        },
-        "mz": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/mz/-/mz-2.5.0.tgz",
-          "integrity": "sha1-KFkCXfA9RrV7sxcXSxlkd85kzsE=",
-          "requires": {
-            "any-promise": "^1.0.0",
-            "object-assign": "^4.0.1",
-            "thenify-all": "^1.0.0"
-          }
-        },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        },
-        "request": {
-          "version": "2.87.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
-          "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.6.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.5",
-            "extend": "~3.0.1",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.1",
-            "har-validator": "~5.0.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.17",
-            "oauth-sign": "~0.8.2",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.1",
-            "safe-buffer": "^5.1.1",
-            "tough-cookie": "~2.3.3",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.1.0"
-          }
-        },
-        "source-map-support": {
-          "version": "0.4.6",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.6.tgz",
-          "integrity": "sha1-MlUqpktFg5KoXqs7C17mFScWeus=",
-          "requires": {
-            "source-map": "^0.5.3"
-          }
-        },
-        "tough-cookie": {
-          "version": "2.3.4",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
-          "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
-          "requires": {
-            "punycode": "^1.4.1"
-          }
-        }
-      }
-    },
-    "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
-    },
-    "sisteransi": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.0.tgz",
-      "integrity": "sha512-N+z4pHB4AmUv0SjveWRd6q1Nj5w62m5jodv+GD8lvmbY/83T/rpbJGZOnK5T149OldDj4Db07BSv9xY4K6NTPQ=="
-    },
-    "slash": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
-    },
-    "slice-ansi": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
-      "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
-      "requires": {
-        "is-fullwidth-code-point": "^2.0.0"
-      }
-    },
-    "snapdragon": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "requires": {
-        "base": "^0.11.1",
-        "debug": "^2.2.0",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "map-cache": "^0.2.2",
-        "source-map": "^0.5.6",
-        "source-map-resolve": "^0.5.0",
-        "use": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "snapdragon-node": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "requires": {
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.0",
-        "snapdragon-util": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "snapdragon-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "requires": {
-        "kind-of": "^3.2.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "sockjs": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
-      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
-      "requires": {
-        "faye-websocket": "^0.10.0",
-        "uuid": "^3.0.1"
-      }
-    },
-    "sockjs-client": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.3.0.tgz",
-      "integrity": "sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==",
-      "requires": {
-        "debug": "^3.2.5",
-        "eventsource": "^1.0.7",
-        "faye-websocket": "~0.11.1",
-        "inherits": "^2.0.3",
-        "json3": "^3.3.2",
-        "url-parse": "^1.4.3"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "faye-websocket": {
-          "version": "0.11.1",
-          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
-          "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
-          "requires": {
-            "websocket-driver": ">=0.5.1"
-          }
-        }
-      }
-    },
-    "sonic-boom": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-0.7.3.tgz",
-      "integrity": "sha512-A9EyoIeLD+g9vMLYQKjNCatJtAKdBQMW03+L8ZWWX/A6hq+srRCwdqHrBD1R8oSMLXov3oHN13dljtZf12q2Ow==",
-      "requires": {
-        "flatstr": "^1.0.9"
-      }
-    },
-    "sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-      "requires": {
-        "is-plain-obj": "^1.0.0"
-      }
-    },
-    "source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
-    },
-    "source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-    },
-    "source-map-resolve": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
-      "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-      "requires": {
-        "atob": "^2.1.1",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
-      }
-    },
-    "source-map-support": {
-      "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
-      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
-      "requires": {
-        "source-map": "^0.5.6"
-      }
-    },
-    "source-map-url": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
-    },
-    "sparkles": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
-      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw=="
-    },
-    "spawn-sync": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
-      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
-      "requires": {
-        "concat-stream": "^1.4.7",
-        "os-shim": "^0.1.2"
-      }
-    },
-    "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
-      "requires": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA=="
-    },
-    "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
-      "requires": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-license-ids": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz",
-      "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA=="
-    },
-    "spdy": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
-      "integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
-      "requires": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      }
-    },
-    "spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "requires": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
-          "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "split": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
-      "requires": {
-        "through": "2"
-      }
-    },
-    "split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "requires": {
-        "extend-shallow": "^3.0.0"
-      }
-    },
-    "split2": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz",
-      "integrity": "sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==",
-      "requires": {
-        "through2": "^2.0.2"
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-    },
-    "sshpk": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
-      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "requires": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      }
-    },
-    "ssri": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-      "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
-      "requires": {
-        "figgy-pudding": "^3.5.1"
-      }
-    },
-    "stack-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
-      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
-    },
-    "stackframe": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.0.4.tgz",
-      "integrity": "sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw=="
-    },
-    "staged-git-files": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
-      "integrity": "sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A=="
-    },
-    "static-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-      "requires": {
-        "define-property": "^0.2.5",
-        "object-copy": "^0.1.0"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "statuses": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
-    },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
-    },
-    "stream-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz",
-      "integrity": "sha1-v5tKv7QrJ011FHnkTg/yZWtvEZM=",
-      "requires": {
-        "inherits": "~2.0.1",
-        "readable-stream": "^1.0.27-1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "readable-stream": {
-          "version": "1.1.14",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        }
-      }
-    },
-    "stream-each": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "stream-http": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
-      "requires": {
-        "builtin-status-codes": "^3.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.3.6",
-        "to-arraybuffer": "^1.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "stream-parser": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
-      "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=",
-      "requires": {
-        "debug": "2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
-    "stream-shift": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
-      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
-    },
-    "stream-to-array": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/stream-to-array/-/stream-to-array-2.3.0.tgz",
-      "integrity": "sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=",
-      "requires": {
-        "any-promise": "^1.1.0"
-      }
-    },
-    "stream-to-promise": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/stream-to-promise/-/stream-to-promise-2.2.0.tgz",
-      "integrity": "sha1-se2y4cjLESidG1A8CNPyrvUeZQ8=",
-      "requires": {
-        "any-promise": "~1.3.0",
-        "end-of-stream": "~1.1.0",
-        "stream-to-array": "~2.3.0"
-      },
-      "dependencies": {
-        "end-of-stream": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-          "integrity": "sha1-6TUyWLqpEIll78QcsO+K3i88+wc=",
-          "requires": {
-            "once": "~1.3.0"
-          }
-        },
-        "once": {
-          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-          "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
-          "requires": {
-            "wrappy": "1"
-          }
-        }
-      }
-    },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-    },
-    "string-argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.0.2.tgz",
-      "integrity": "sha1-2sMECGkMIfPDYwo/86BYd73L1zY="
-    },
-    "string-length": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-      "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
-      "requires": {
-        "astral-regex": "^1.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "requires": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "requires": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      }
-    },
-    "strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      }
-    },
-    "strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
-    },
-    "strip-bom-buf": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz",
-      "integrity": "sha1-HLRar1dTD0yvhsf3UXnSyaUd1XI=",
-      "requires": {
-        "is-utf8": "^0.2.1"
-      }
-    },
-    "strip-bom-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-stream/-/strip-bom-stream-3.0.0.tgz",
-      "integrity": "sha1-lWvMXYRDD2klapDtgjdlzYWOFZw=",
-      "requires": {
-        "first-chunk-stream": "^2.0.0",
-        "strip-bom-buf": "^1.0.0"
-      }
-    },
-    "strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
-    },
-    "strip-indent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
-      "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g="
-    },
-    "strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
-    },
-    "strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      }
-    },
-    "strip-url-auth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
-      "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164="
-    },
-    "strong-log-transformer": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-1.0.6.tgz",
-      "integrity": "sha1-9/uTdYpppXEUAYEnfuoMLrEwH6M=",
-      "requires": {
-        "byline": "^5.0.0",
-        "duplexer": "^0.1.1",
-        "minimist": "^0.1.0",
-        "moment": "^2.6.0",
-        "through": "^2.3.4"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.1.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
-          "integrity": "sha1-md9lelJXTCHJBXSX33QnkLK0wN4="
-        }
-      }
-    },
-    "style-loader": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
-      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
-      "requires": {
-        "loader-utils": "^1.1.0",
-        "schema-utils": "^1.0.0"
-      }
-    },
-    "supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "requires": {
-        "has-flag": "^3.0.0"
-      }
-    },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
-    "symbol-tree": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
-      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
-    },
-    "table": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
-      "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==",
-      "requires": {
-        "ajv": "^5.2.3",
-        "ajv-keywords": "^2.1.0",
-        "chalk": "^2.1.0",
-        "lodash": "^4.17.4",
-        "slice-ansi": "1.0.0",
-        "string-width": "^2.1.1"
-      }
-    },
-    "tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
-    },
-    "tar-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
-      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
-      "requires": {
-        "bl": "^1.0.0",
-        "buffer-alloc": "^1.2.0",
-        "end-of-stream": "^1.0.0",
-        "fs-constants": "^1.0.0",
-        "readable-stream": "^2.3.0",
-        "to-buffer": "^1.1.1",
-        "xtend": "^4.0.0"
-      }
-    },
-    "temp-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0="
-    },
-    "temp-write": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/temp-write/-/temp-write-3.4.0.tgz",
-      "integrity": "sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "is-stream": "^1.1.0",
-        "make-dir": "^1.0.0",
-        "pify": "^3.0.0",
-        "temp-dir": "^1.0.0",
-        "uuid": "^3.0.1"
-      },
-      "dependencies": {
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        }
-      }
-    },
-    "tempfile": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-1.1.1.tgz",
-      "integrity": "sha1-W8xOrsxKsscH2LwR2ZzMmiyyh/I=",
-      "requires": {
-        "os-tmpdir": "^1.0.0",
-        "uuid": "^2.0.1"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
-          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
-        }
-      }
-    },
-    "term-size": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
-      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
-      "requires": {
-        "execa": "^0.7.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        }
-      }
-    },
-    "terser": {
-      "version": "3.17.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
-      "integrity": "sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==",
-      "requires": {
-        "commander": "^2.19.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.10"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "source-map-support": {
-          "version": "0.5.12",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
-          "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        }
-      }
-    },
-    "terser-webpack-plugin": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz",
-      "integrity": "sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==",
-      "requires": {
-        "cacache": "^11.0.2",
-        "find-cache-dir": "^2.0.0",
-        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^1.4.0",
-        "source-map": "^0.6.1",
-        "terser": "^3.16.1",
-        "webpack-sources": "^1.1.0",
-        "worker-farm": "^1.5.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "test-exclude": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
-      "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
-      "requires": {
-        "glob": "^7.1.3",
-        "minimatch": "^3.0.4",
-        "read-pkg-up": "^4.0.0",
-        "require-main-filename": "^2.0.0"
-      }
-    },
-    "text-extensions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ=="
-    },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
-    },
-    "thenify": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.0.tgz",
-      "integrity": "sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=",
-      "requires": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
-      "requires": {
-        "thenify": ">= 3.1.0 < 4"
-      }
-    },
-    "throat": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
-    },
-    "through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "requires": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
-    "thunky": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
-      "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow=="
-    },
-    "time-stamp": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
-    },
-    "timed-out": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
-    },
-    "timers-browserify": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.2.tgz",
-      "integrity": "sha1-ycWLV1voQHN1y14kYtrO50NZ9B0=",
-      "requires": {
-        "process": "~0.11.0"
-      }
-    },
-    "tinycolor2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
-      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
-    },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "requires": {
-        "os-tmpdir": "~1.0.2"
-      }
-    },
-    "tmpl": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
-    },
-    "to-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
-    },
-    "to-buffer": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
-      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="
-    },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-    },
-    "to-object-path": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "to-regex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "requires": {
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "regex-not": "^1.0.2",
-        "safe-regex": "^1.1.0"
-      }
-    },
-    "to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "requires": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
-      }
-    },
-    "tosource": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/tosource/-/tosource-1.0.0.tgz",
-      "integrity": "sha1-QtiN0RZhi88A1hBt1URvNCeQL/E="
-    },
-    "tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "requires": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      }
-    },
-    "tr46": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "traverse": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.4.6.tgz",
-      "integrity": "sha1-0EsigOTHkqWBVCnve4tgxkyczDQ="
-    },
-    "trim-newlines": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz",
-      "integrity": "sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA="
-    },
-    "trim-off-newlines": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz",
-      "integrity": "sha1-n5up2e+odkw4dpi8v+sshI8RrbM="
-    },
-    "trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      }
-    },
-    "trim-right": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
-    },
-    "tslib": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
-    },
-    "tty-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
-    },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
-    },
-    "type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "requires": {
-        "prelude-ls": "~1.1.2"
-      }
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
-    },
-    "ua-parser-js": {
-      "version": "0.7.19",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
-      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
-    },
-    "uglify-js": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.12.tgz",
-      "integrity": "sha512-KeQesOpPiZNgVwJj8Ge3P4JYbQHUdZzpx6Fahy6eKAYRSV4zhVmLXoC+JtOeYxcHCHTve8RG1ZGdTvpeOUM26Q==",
-      "optional": true,
-      "requires": {
-        "commander": "~2.20.0",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        }
-      }
-    },
-    "underscore": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-      "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
-    },
-    "unicode-canonical-property-names-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
-    },
-    "unicode-match-property-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
-      "requires": {
-        "unicode-canonical-property-names-ecmascript": "^1.0.4",
-        "unicode-property-aliases-ecmascript": "^1.0.4"
-      }
-    },
-    "unicode-match-property-value-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g=="
-    },
-    "unicode-property-aliases-ecmascript": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz",
-      "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
-    },
-    "union-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
-      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
-      "requires": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^0.4.3"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "set-value": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-extendable": "^0.1.1",
-            "is-plain-object": "^2.0.1",
-            "to-object-path": "^0.3.0"
-          }
-        }
-      }
-    },
-    "unique-filename": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
-      "requires": {
-        "unique-slug": "^2.0.0"
-      }
-    },
-    "unique-slug": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.1.tgz",
-      "integrity": "sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==",
-      "requires": {
-        "imurmurhash": "^0.1.4"
-      }
-    },
-    "unique-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
-      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
-      "requires": {
-        "crypto-random-string": "^1.0.0"
-      }
-    },
-    "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
-    },
-    "unset-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-      "requires": {
-        "has-value": "^0.3.1",
-        "isobject": "^3.0.0"
-      },
-      "dependencies": {
-        "has-value": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-          "requires": {
-            "get-value": "^2.0.3",
-            "has-values": "^0.1.4",
-            "isobject": "^2.0.0"
-          },
-          "dependencies": {
-            "isobject": {
-              "version": "2.1.0",
-              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-              "requires": {
-                "isarray": "1.0.0"
-              }
-            }
-          }
-        },
-        "has-values": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
-        }
-      }
-    },
-    "unzip-response": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
-      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
-    },
-    "upath": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
-      "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw=="
-    },
-    "update-notifier": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.3.0.tgz",
-      "integrity": "sha1-TognpruRUUCrCTVZ1wFOPruDdFE=",
-      "requires": {
-        "boxen": "^1.2.1",
-        "chalk": "^2.0.1",
-        "configstore": "^3.0.0",
-        "import-lazy": "^2.1.0",
-        "is-installed-globally": "^0.1.0",
-        "is-npm": "^1.0.0",
-        "latest-version": "^3.0.0",
-        "semver-diff": "^2.0.0",
-        "xdg-basedir": "^3.0.0"
-      }
-    },
-    "uri-js": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
-    },
-    "url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-        }
-      }
-    },
-    "url-parse": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
-      "requires": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "url-parse-lax": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
-      "requires": {
-        "prepend-http": "^1.0.1"
-      }
-    },
-    "use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
-    },
-    "user-home": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
-      "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=",
-      "requires": {
-        "os-homedir": "^1.0.0"
-      }
-    },
-    "userhome": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/userhome/-/userhome-1.0.0.tgz",
-      "integrity": "sha1-tkkf8S0hpecmcd+czIcX4cZojAs="
-    },
-    "util": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-      "requires": {
-        "inherits": "2.0.3"
-      }
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
-    },
-    "util.promisify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-      "requires": {
-        "define-properties": "^1.1.2",
-        "object.getownpropertydescriptors": "^2.0.3"
-      }
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
-    },
-    "uuid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-    },
-    "v8-compile-cache": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
-      "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w=="
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "requires": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
-    },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "vinyl": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
-      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
-      "requires": {
-        "clone": "^1.0.0",
-        "clone-stats": "^0.0.1",
-        "replace-ext": "0.0.1"
-      }
-    },
-    "vm-browserify": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
-      "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
-      "requires": {
-        "indexof": "0.0.1"
-      }
-    },
-    "w3c-hr-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
-      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
-      "requires": {
-        "browser-process-hrtime": "^0.1.2"
-      }
-    },
-    "walker": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
-      "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
-      "requires": {
-        "makeerror": "1.0.x"
-      }
-    },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "watchpack": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.5.0.tgz",
-      "integrity": "sha512-RSlipNQB1u48cq0wH/BNfCu1tD/cJ8ydFIkNYhp9o+3d+8unClkIovpW5qpFPgmL9OE48wfAnlZydXByWP82AA==",
-      "requires": {
-        "chokidar": "^2.0.2",
-        "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
-      }
-    },
-    "wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "requires": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "wcwidth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
-      "requires": {
-        "defaults": "^1.0.3"
-      }
-    },
-    "web-ext": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-3.0.0.tgz",
-      "integrity": "sha512-pUT2YYSnECH/SqKXB0m92HWzAAOt97wJpkSHu7AddyxzclN3R9A2IHq+KUzaXEjiwWzVs/+yUOSpmuwCDouNNg==",
-      "requires": {
-        "@babel/polyfill": "7.2.5",
-        "@babel/runtime": "7.3.1",
-        "@cliqz-oss/firefox-client": "0.3.1",
-        "@cliqz-oss/node-firefox-connect": "1.2.1",
-        "adbkit": "2.11.0",
-        "addons-linter": "1.6.1",
-        "bunyan": "1.8.12",
-        "camelcase": "4.1.0",
-        "debounce": "1.1.0",
-        "decamelize": "2.0.0",
-        "es6-error": "4.1.1",
-        "es6-promisify": "5.0.0",
-        "event-to-promise": "0.8.0",
-        "firefox-profile": "1.2.0",
-        "fx-runner": "1.0.10",
-        "git-rev-sync": "1.9.1",
-        "mkdirp": "0.5.1",
-        "multimatch": "2.1.0",
-        "mz": "2.7.0",
-        "node-notifier": "5.2.1",
-        "opn": "5.3.0",
-        "parse-json": "4.0.0",
-        "require-uncached": "1.0.3",
-        "sign-addon": "0.3.1",
-        "source-map-support": "0.5.3",
-        "stream-to-promise": "2.2.0",
-        "strip-json-comments": "2.0.1",
-        "tmp": "0.0.33",
-        "update-notifier": "2.3.0",
-        "watchpack": "1.5.0",
-        "yargs": "6.6.0",
-        "zip-dir": "1.0.2"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.3.1",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
-          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
-          "requires": {
-            "regenerator-runtime": "^0.12.0"
-          }
-        },
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
-        },
-        "cliui": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-          "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wrap-ansi": "^2.0.0"
-          }
-        },
-        "decamelize": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
-          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
-          "requires": {
-            "xregexp": "4.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "invert-kv": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "lcid": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-          "requires": {
-            "invert-kv": "^1.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          },
-          "dependencies": {
-            "parse-json": {
-              "version": "2.2.0",
-              "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-              "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-              "requires": {
-                "error-ex": "^1.2.0"
-              }
-            }
-          }
-        },
-        "node-notifier": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.2.1.tgz",
-          "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==",
-          "requires": {
-            "growly": "^1.3.0",
-            "semver": "^5.4.1",
-            "shellwords": "^0.1.1",
-            "which": "^1.3.0"
-          }
-        },
-        "os-locale": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-          "requires": {
-            "lcid": "^1.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-        },
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "source-map-support": {
-          "version": "0.5.3",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
-          "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
-          "requires": {
-            "source-map": "^0.6.0"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        },
-        "which-module": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
-        },
-        "y18n": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
-        },
-        "yargs": {
-          "version": "6.6.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
-          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
-          "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^4.2.0"
-          },
-          "dependencies": {
-            "camelcase": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-              "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
-            },
-            "decamelize": {
-              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-              "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-            }
-          }
-        },
-        "yargs-parser": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
-          "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
-          "requires": {
-            "camelcase": "^3.0.0"
-          },
-          "dependencies": {
-            "camelcase": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-              "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
-            }
-          }
-        }
-      }
-    },
-    "webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
-    },
-    "webpack": {
-      "version": "4.31.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.31.0.tgz",
-      "integrity": "sha512-n6RVO3X0LbbipoE62akME9K/JI7qYrwwufs20VvgNNpqUoH4860KkaxJTbGq5bgkVZF9FqyyTG/0WPLH3PVNJA==",
-      "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/wasm-edit": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
-        "acorn": "^6.0.5",
-        "acorn-dynamic-import": "^4.0.0",
-        "ajv": "^6.1.0",
-        "ajv-keywords": "^3.1.0",
-        "chrome-trace-event": "^1.0.0",
-        "enhanced-resolve": "^4.1.0",
-        "eslint-scope": "^4.0.0",
-        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^2.3.0",
-        "loader-utils": "^1.1.0",
-        "memory-fs": "~0.4.1",
-        "micromatch": "^3.1.8",
-        "mkdirp": "~0.5.0",
-        "neo-async": "^2.5.0",
-        "node-libs-browser": "^2.0.0",
-        "schema-utils": "^1.0.0",
-        "tapable": "^1.1.0",
-        "terser-webpack-plugin": "^1.1.0",
-        "watchpack": "^1.5.0",
-        "webpack-sources": "^1.3.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA=="
-        },
-        "ajv": {
-          "version": "6.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.0.tgz",
-          "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw=="
-        },
-        "browserify-zlib": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-          "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-          "requires": {
-            "pako": "~1.0.5"
-          }
-        },
-        "buffer": {
-          "version": "4.9.1",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
-          "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
-          "requires": {
-            "base64-js": "^1.0.2",
-            "ieee754": "^1.1.4",
-            "isarray": "^1.0.0"
-          }
-        },
-        "constants-browserify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-          "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
-        },
-        "crypto-browserify": {
-          "version": "3.12.0",
-          "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-          "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
-          "requires": {
-            "browserify-cipher": "^1.0.0",
-            "browserify-sign": "^4.0.0",
-            "create-ecdh": "^4.0.0",
-            "create-hash": "^1.1.0",
-            "create-hmac": "^1.1.0",
-            "diffie-hellman": "^5.0.0",
-            "inherits": "^2.0.1",
-            "pbkdf2": "^3.0.3",
-            "public-encrypt": "^4.0.0",
-            "randombytes": "^2.0.0",
-            "randomfill": "^1.0.3"
-          }
-        },
-        "eslint-scope": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-        },
-        "https-browserify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-          "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-        },
-        "node-libs-browser": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.0.tgz",
-          "integrity": "sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==",
-          "requires": {
-            "assert": "^1.1.1",
-            "browserify-zlib": "^0.2.0",
-            "buffer": "^4.3.0",
-            "console-browserify": "^1.1.0",
-            "constants-browserify": "^1.0.0",
-            "crypto-browserify": "^3.11.0",
-            "domain-browser": "^1.1.1",
-            "events": "^3.0.0",
-            "https-browserify": "^1.0.0",
-            "os-browserify": "^0.3.0",
-            "path-browserify": "0.0.0",
-            "process": "^0.11.10",
-            "punycode": "^1.2.4",
-            "querystring-es3": "^0.2.0",
-            "readable-stream": "^2.3.3",
-            "stream-browserify": "^2.0.1",
-            "stream-http": "^2.7.2",
-            "string_decoder": "^1.0.0",
-            "timers-browserify": "^2.0.4",
-            "tty-browserify": "0.0.0",
-            "url": "^0.11.0",
-            "util": "^0.11.0",
-            "vm-browserify": "0.0.4"
-          }
-        },
-        "os-browserify": {
-          "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-          "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
-        },
-        "pako": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-          "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        },
-        "stream-browserify": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-          "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
-          "requires": {
-            "inherits": "~2.0.1",
-            "readable-stream": "^2.0.2"
-          }
-        },
-        "timers-browserify": {
-          "version": "2.0.10",
-          "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz",
-          "integrity": "sha512-YvC1SV1XdOUaL6gx5CoGroT3Gu49pK9+TZ38ErPldOWW4j49GI1HKs9DV+KGq/w6y+LZ72W1c8cKz2vzY+qpzg==",
-          "requires": {
-            "setimmediate": "^1.0.4"
-          }
-        },
-        "url": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-          "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-          "requires": {
-            "punycode": "1.3.2",
-            "querystring": "0.2.0"
-          },
-          "dependencies": {
-            "punycode": {
-              "version": "1.3.2",
-              "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-              "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-            }
-          }
-        },
-        "util": {
-          "version": "0.11.1",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        }
-      }
-    },
-    "webpack-cli": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.2.tgz",
-      "integrity": "sha512-FLkobnaJJ+03j5eplxlI0TUxhGCOdfewspIGuvDVtpOlrAuKMFC57K42Ukxqs1tn8947/PM6tP95gQc0DCzRYA==",
-      "requires": {
-        "chalk": "^2.4.1",
-        "cross-spawn": "^6.0.5",
-        "enhanced-resolve": "^4.1.0",
-        "findup-sync": "^2.0.0",
-        "global-modules": "^1.0.0",
-        "import-local": "^2.0.0",
-        "interpret": "^1.1.0",
-        "loader-utils": "^1.1.0",
-        "supports-color": "^5.5.0",
-        "v8-compile-cache": "^2.0.2",
-        "yargs": "^12.0.5"
-      }
-    },
-    "webpack-dev-middleware": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.6.2.tgz",
-      "integrity": "sha512-A47I5SX60IkHrMmZUlB0ZKSWi29TZTcPz7cha1Z75yYOsgWh/1AcPmQEbC8ZIbU3A1ytSv1PMU0PyPz2Lmz2jg==",
-      "requires": {
-        "memory-fs": "^0.4.1",
-        "mime": "^2.3.1",
-        "range-parser": "^1.0.3",
-        "webpack-log": "^2.0.0"
-      },
-      "dependencies": {
-        "mime": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.2.tgz",
-          "integrity": "sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg=="
-        }
-      }
-    },
-    "webpack-dev-server": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.3.1.tgz",
-      "integrity": "sha512-jY09LikOyGZrxVTXK0mgIq9y2IhCoJ05848dKZqX1gAGLU1YDqgpOT71+W53JH/wI4v6ky4hm+KvSyW14JEs5A==",
-      "requires": {
-        "ansi-html": "0.0.7",
-        "bonjour": "^3.5.0",
-        "chokidar": "^2.1.5",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
-        "debug": "^4.1.1",
-        "del": "^4.1.0",
-        "express": "^4.16.4",
-        "html-entities": "^1.2.1",
-        "http-proxy-middleware": "^0.19.1",
-        "import-local": "^2.0.0",
-        "internal-ip": "^4.2.0",
-        "ip": "^1.1.5",
-        "killable": "^1.0.1",
-        "loglevel": "^1.6.1",
-        "opn": "^5.5.0",
-        "portfinder": "^1.0.20",
-        "schema-utils": "^1.0.0",
-        "selfsigned": "^1.10.4",
-        "semver": "^6.0.0",
-        "serve-index": "^1.9.1",
-        "sockjs": "0.3.19",
-        "sockjs-client": "1.3.0",
-        "spdy": "^4.0.0",
-        "strip-ansi": "^3.0.1",
-        "supports-color": "^6.1.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^3.6.2",
-        "webpack-log": "^2.0.0",
-        "yargs": "12.0.5"
-      },
-      "dependencies": {
-        "opn": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
-          "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
-          "requires": {
-            "is-wsl": "^1.1.0"
-          }
-        },
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-        },
-        "semver": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
-          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ=="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "url": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-          "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-          "requires": {
-            "punycode": "1.3.2",
-            "querystring": "0.2.0"
-          }
-        }
-      }
-    },
-    "webpack-log": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
-      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
-      "requires": {
-        "ansi-colors": "^3.0.0",
-        "uuid": "^3.3.2"
-      }
-    },
-    "webpack-sources": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",
-      "integrity": "sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==",
-      "requires": {
-        "source-list-map": "^2.0.0",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "websocket-driver": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
-      "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
-      "requires": {
-        "http-parser-js": ">=0.4.0",
-        "websocket-extensions": ">=0.1.1"
-      }
-    },
-    "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
-    },
-    "whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "requires": {
-        "iconv-lite": "0.4.24"
-      }
-    },
-    "whatwg-fetch": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
-      "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA="
-    },
-    "whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
-    },
-    "whatwg-url": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
-      "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
-      "requires": {
-        "lodash.sortby": "^4.7.0",
-        "tr46": "^1.0.1",
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "when": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/when/-/when-3.7.7.tgz",
-      "integrity": "sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg="
-    },
-    "which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "requires": {
-        "isexe": "^2.0.0"
-      }
-    },
-    "which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
-    },
-    "wide-align": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "requires": {
-        "string-width": "^1.0.2 || 2"
-      }
-    },
-    "widest-line": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
-      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
-      "requires": {
-        "string-width": "^2.1.1"
-      }
-    },
-    "winreg": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz",
-      "integrity": "sha1-BxBVVLoanQiXklHRKUdb/64wBrc="
-    },
-    "wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
-    },
-    "worker-farm": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
-      "requires": {
-        "errno": "~0.1.7"
-      }
-    },
-    "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1"
-      },
-      "dependencies": {
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        }
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
-    },
-    "write": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
-      "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
-      "requires": {
-        "mkdirp": "^0.5.1"
-      }
-    },
-    "write-file-atomic": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.1.tgz",
-      "integrity": "sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==",
-      "requires": {
-        "graceful-fs": "^4.1.11",
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "write-json-file": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-2.3.0.tgz",
-      "integrity": "sha1-K2TIozAE1UuGmMdtWFp3zrYdoy8=",
-      "requires": {
-        "detect-indent": "^5.0.0",
-        "graceful-fs": "^4.1.2",
-        "make-dir": "^1.0.0",
-        "pify": "^3.0.0",
-        "sort-keys": "^2.0.0",
-        "write-file-atomic": "^2.0.0"
-      },
-      "dependencies": {
-        "detect-indent": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
-          "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50="
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "sort-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "requires": {
-            "is-plain-obj": "^1.0.0"
-          }
-        }
-      }
-    },
-    "write-pkg": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
-      "requires": {
-        "sort-keys": "^2.0.0",
-        "write-json-file": "^2.2.0"
-      },
-      "dependencies": {
-        "sort-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "requires": {
-            "is-plain-obj": "^1.0.0"
-          }
-        }
-      }
-    },
-    "ws": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
-      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
-      "requires": {
-        "async-limiter": "~1.0.0"
-      }
-    },
-    "xdg-basedir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
-      "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
-    },
-    "xml-js": {
-      "version": "1.6.11",
-      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
-      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
-      "requires": {
-        "sax": "^1.2.4"
-      }
-    },
-    "xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
-    },
-    "xml2js": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
-      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
-      "requires": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~9.0.1"
-      }
-    },
-    "xmlbuilder": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
-    },
-    "xmldom": {
-      "version": "0.1.27",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
-      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
-    },
-    "xregexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
-      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg=="
-    },
-    "xtend": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
-    },
-    "y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
-    },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
-    },
-    "yargs": {
-      "version": "12.0.5",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-      "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
-      "requires": {
-        "cliui": "^4.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^3.0.0",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
-        "set-blocking": "^2.0.0",
-        "string-width": "^2.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^3.2.1 || ^4.0.0",
-        "yargs-parser": "^11.1.1"
-      },
-      "dependencies": {
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
-        }
-      }
-    },
-    "yargs-parser": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-      "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
-      "requires": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
-    },
-    "yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-      "requires": {
-        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
-      }
-    },
-    "zip-dir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.2.tgz",
-      "integrity": "sha1-JT+QeurWKiGs2HIdi4gDKyQRwFE=",
-      "requires": {
-        "async": "^1.5.2",
-        "jszip": "^2.4.0"
-      },
-      "dependencies": {
-        "async": {
-          "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
-        }
-      }
-    },
-    "zip-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.0.1.tgz",
-      "integrity": "sha512-c+eUhhkDpaK87G/py74wvWLtz2kzMPNCCkUApkun50ssE0oQliIQzWpTnwjB+MTKVIf2tGzIgHyqW/Y+W77ecQ==",
-      "requires": {
-        "archiver-utils": "^2.0.0",
-        "compress-commons": "^1.2.0",
-        "readable-stream": "^2.0.0"
-      }
-    }
-  }
-}

From ad94f9ef08e417b95b8677af3fdd3fdd2d1d4eb3 Mon Sep 17 00:00:00 2001
From: Sarhan Aissi <sarhanaissi@gmail.com>
Date: Mon, 13 May 2019 03:55:05 +0100
Subject: [PATCH 583/814] Replaced adm-zip with node-archiver

---
 package.json                   |  2 +-
 shells/browser/shared/build.js | 17 ++++++++++++-----
 yarn.lock                      |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9f3ba27b2e7c..03d44c39317d 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.0.0",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.0",
-    "adm-zip": "^0.4.7",
+    "archiver": "^3.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^24.7.1",
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index fb1037f7a84b..fcfc757ac0fe 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-const AdmZip = require('adm-zip');
+const archiver = require('archiver');
 const { execSync } = require('child_process');
-const { readFileSync, writeFileSync } = require('fs');
+const { readFileSync, writeFileSync, createWriteStream } = require('fs');
 const { copy, ensureDir, move, remove } = require('fs-extra');
 const { join } = require('path');
 const { getGitCommit } = require('../../utils');
@@ -70,9 +70,16 @@ const build = async (tempPath, manifestPath, manifestVersion) => {
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
-  const zip = new AdmZip();
-  zip.addLocalFolder(zipPath);
-  zip.writeZip(join(tempPath, 'packed.zip'));
+  const archive = archiver('zip', { zlib: { level: 9 } });
+  const zipStream = createWriteStream(join(tempPath, 'packed.zip'));
+  await new Promise((resolve, reject) => {
+    archive
+      .directory(zipPath, false)
+      .on('error', err => reject(err))
+      .pipe(zipStream);
+    archive.finalize();
+    zipStream.on('close', () => resolve());
+  });
 };
 
 const postProcess = async (tempPath, destinationPath) => {
diff --git a/yarn.lock b/yarn.lock
index 040e1782d569..8e3eccc5fb39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1474,7 +1474,7 @@ addons-linter@1.6.1:
   optionalDependencies:
     fsevents "2.0.1"
 
-adm-zip@^0.4.7, adm-zip@~0.4.x:
+adm-zip@~0.4.x:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.13.tgz#597e2f8cc3672151e1307d3e95cddbc75672314a"
   integrity sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==

From ec89ae88b69b5c111ae468ba90d2f8feed2eaabb Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Mon, 13 May 2019 18:57:24 +0200
Subject: [PATCH 584/814] Changes display of ForwardRef and Memo components

---
 src/backend/renderer.js                   |  4 ++--
 src/devtools/views/Components/Element.css | 10 ++++++++++
 src/devtools/views/Components/Element.js  | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b76ce8a7d694..cafe9b703bb5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -462,7 +462,7 @@ export function attach(
         const functionName = getDisplayName(resolvedType.render, '');
         return (
           resolvedType.displayName ||
-          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
+          (functionName !== '' ? functionName : 'ForwardRef')
         );
       case HostRoot:
         return null;
@@ -478,7 +478,7 @@ export function attach(
           return elementType.displayName;
         } else {
           const displayName = type.displayName || type.name;
-          return displayName ? `Memo(${displayName})` : 'Memo';
+          return displayName ? displayName : 'Memo';
         }
       default:
         const typeSymbol = getTypeSymbol(type);
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index da7a214de523..ed1176739e1e 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -73,3 +73,13 @@
   height: 1rem;
   color: var(--color-expand-collapse-toggle);
 }
+
+.Badge{
+  background: var(--color-component-name);
+  color: #000;
+  line-height: calc(var(--line-height-data) - 0.25rem);
+  padding: 0 0.55rem;
+  border-radius: 5px;
+  margin-left: 0.5rem;
+  font-size: calc(var(--font-size-monospace-normal) - 2px);
+}
\ No newline at end of file
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 79b015e85cda..0f3bb34a7a6b 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -9,7 +9,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ElementTypeClass, ElementTypeFunction } from 'src/types';
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+  ElementTypeMemo,
+  ElementTypeForwardRef,
+} from 'src/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
@@ -134,6 +139,7 @@ export default function ElementView({ data, index, style }: Props) {
 
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
+  const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
 
   let className = styles.Element;
   if (isSelected) {
@@ -182,6 +188,11 @@ export default function ElementView({ data, index, style }: Props) {
       </span>
       {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
       <span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
+      {showBadge && (
+        <span className={styles.Badge}>
+          {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
+        </span>
+      )}
     </div>
   );
 }

From 74706b0c86d0f33dec9bd9ccd61d6f19233ec399 Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Mon, 13 May 2019 19:00:11 +0200
Subject: [PATCH 585/814] updates snapshots

---
 .../__snapshots__/profiling-test.js.snap      | 50 +++-------------
 .../profilingCharts-test.js.snap              | 60 +++++++++----------
 .../profilingCommitTreeBuilder-test.js.snap   | 12 ++--
 3 files changed, 43 insertions(+), 79 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index fa3916d3525c..69a9d82f1cde 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -126,7 +126,7 @@ Object {
       Array [
         1,
         1,
-        29,
+        17,
         6,
         80,
         97,
@@ -144,18 +144,6 @@ Object {
         48,
         1,
         49,
-        11,
-        77,
-        101,
-        109,
-        111,
-        40,
-        67,
-        104,
-        105,
-        108,
-        100,
-        41,
         1,
         1,
         11,
@@ -199,7 +187,7 @@ Object {
         8,
         2,
         2,
-        5,
+        2,
         0,
         4,
         5,
@@ -420,7 +408,7 @@ Object {
       Array [
         1,
         1,
-        27,
+        15,
         6,
         80,
         97,
@@ -436,18 +424,6 @@ Object {
         100,
         1,
         48,
-        11,
-        77,
-        101,
-        109,
-        111,
-        40,
-        67,
-        104,
-        105,
-        108,
-        100,
-        41,
         1,
         1,
         11,
@@ -481,7 +457,7 @@ Object {
         8,
         2,
         2,
-        4,
+        2,
         0,
         4,
         4,
@@ -681,7 +657,7 @@ Object {
       Array [
         1,
         1,
-        27,
+        15,
         6,
         80,
         97,
@@ -697,18 +673,6 @@ Object {
         100,
         1,
         48,
-        11,
-        77,
-        101,
-        109,
-        111,
-        40,
-        67,
-        104,
-        105,
-        108,
-        100,
-        41,
         1,
         1,
         11,
@@ -742,7 +706,7 @@ Object {
         8,
         2,
         2,
-        4,
+        2,
         0,
         4,
         4,
@@ -980,7 +944,7 @@ Object {
       },
       5 => Object {
         "children": Array [],
-        "displayName": "Memo(Child)",
+        "displayName": "Child",
         "id": 5,
         "key": null,
       },
diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index feb708bac729..bf875768a5b1 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -27,7 +27,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "first",
       "parentID": 2,
@@ -35,7 +35,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "second",
       "parentID": 2,
@@ -43,7 +43,7 @@ Object {
     },
     5 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 5,
       "key": "third",
       "parentID": 2,
@@ -83,8 +83,8 @@ Object {
         "actualDuration": 0,
         "didRender": true,
         "id": 5,
-        "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
+        "name": "Child",
         "offset": 15,
         "selfDuration": 0,
         "treeBaseDuration": 0,
@@ -93,8 +93,8 @@ Object {
         "actualDuration": 2,
         "didRender": true,
         "id": 4,
-        "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"second\\" (2ms of 2ms)",
+        "name": "Child",
         "offset": 13,
         "selfDuration": 2,
         "treeBaseDuration": 2,
@@ -103,8 +103,8 @@ Object {
         "actualDuration": 3,
         "didRender": true,
         "id": 3,
-        "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"first\\" (3ms of 3ms)",
+        "name": "Child",
         "offset": 10,
         "selfDuration": 3,
         "treeBaseDuration": 3,
@@ -141,7 +141,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "first",
       "parentID": 2,
@@ -149,7 +149,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "second",
       "parentID": 2,
@@ -157,7 +157,7 @@ Object {
     },
     5 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 5,
       "key": "third",
       "parentID": 2,
@@ -197,8 +197,8 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 5,
-        "label": "Memo(Child) key=\\"third\\"",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"third\\"",
+        "name": "Child",
         "offset": 15,
         "selfDuration": 0,
         "treeBaseDuration": 0,
@@ -207,8 +207,8 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 4,
-        "label": "Memo(Child) key=\\"second\\"",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"second\\"",
+        "name": "Child",
         "offset": 13,
         "selfDuration": 0,
         "treeBaseDuration": 2,
@@ -217,8 +217,8 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 3,
-        "label": "Memo(Child) key=\\"first\\"",
-        "name": "Memo(Child)",
+        "label": "Child key=\\"first\\"",
+        "name": "Child",
         "offset": 10,
         "selfDuration": 0,
         "treeBaseDuration": 3,
@@ -269,7 +269,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "first",
       "parentID": 2,
@@ -277,7 +277,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "second",
       "parentID": 2,
@@ -285,7 +285,7 @@ Object {
     },
     5 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 5,
       "key": "third",
       "parentID": 2,
@@ -308,20 +308,20 @@ Object {
     },
     Object {
       "id": 3,
-      "label": "Memo(Child) key=\\"first\\" (3ms)",
-      "name": "Memo(Child)",
+      "label": "Child key=\\"first\\" (3ms)",
+      "name": "Child",
       "value": 3,
     },
     Object {
       "id": 4,
-      "label": "Memo(Child) key=\\"second\\" (2ms)",
-      "name": "Memo(Child)",
+      "label": "Child key=\\"second\\" (2ms)",
+      "name": "Child",
       "value": 2,
     },
     Object {
       "id": 5,
-      "label": "Memo(Child) key=\\"third\\" (<0.1ms)",
-      "name": "Memo(Child)",
+      "label": "Child key=\\"third\\" (<0.1ms)",
+      "name": "Child",
       "value": 0,
     },
   ],
@@ -355,7 +355,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "first",
       "parentID": 2,
@@ -363,7 +363,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "second",
       "parentID": 2,
@@ -371,7 +371,7 @@ Object {
     },
     5 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 5,
       "key": "third",
       "parentID": 2,
diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
index b483cd5efce5..29bfaddcdaa8 100644
--- a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -25,7 +25,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "0",
       "parentID": 2,
@@ -63,7 +63,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "0",
       "parentID": 2,
@@ -71,7 +71,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "1",
       "parentID": 2,
@@ -79,7 +79,7 @@ Object {
     },
     5 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 5,
       "key": "2",
       "parentID": 2,
@@ -116,7 +116,7 @@ Object {
     },
     3 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 3,
       "key": "0",
       "parentID": 2,
@@ -124,7 +124,7 @@ Object {
     },
     4 => Object {
       "children": Array [],
-      "displayName": "Memo(Child)",
+      "displayName": "Child",
       "id": 4,
       "key": "1",
       "parentID": 2,

From cf99c3ee6c63749c0f2453ec325622c03558a2f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 13 May 2019 10:13:29 -0700
Subject: [PATCH 586/814] Moved calculation of self duration to the
 backend/renderer

This enables self duration to be computed accurately despite component filters
---
 .../__snapshots__/profiling-test.js.snap      | 179 +++++++++++++++---
 src/__tests__/profiling-test.js               | 135 +++++++++++++
 src/backend/renderer.js                       |  74 ++++----
 src/backend/types.js                          |   3 +-
 src/devtools/ProfilingCache.js                |  19 +-
 .../views/Profiler/FlamegraphChartBuilder.js  |   6 +-
 .../views/Profiler/RankedChartBuilder.js      |   6 +-
 src/devtools/views/Profiler/types.js          |   1 +
 src/devtools/views/Profiler/utils.js          |  34 +---
 9 files changed, 342 insertions(+), 115 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index fa3916d3525c..fce6058d977b 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -12,6 +12,13 @@ Object {
   "commitIndex": 0,
   "interactions": Array [],
   "rootID": 1,
+  "selfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
 }
 `;
 
@@ -27,6 +34,13 @@ Object {
   "commitIndex": 1,
   "interactions": Array [],
   "rootID": 1,
+  "selfDurations": Map {
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 10,
+    1 => 0,
+  },
 }
 `;
 
@@ -40,6 +54,11 @@ Object {
   "commitIndex": 2,
   "interactions": Array [],
   "rootID": 1,
+  "selfDurations": Map {
+    3 => 0,
+    2 => 10,
+    1 => 0,
+  },
 }
 `;
 
@@ -52,6 +71,10 @@ Object {
   "commitIndex": 3,
   "interactions": Array [],
   "rootID": 1,
+  "selfDurations": Map {
+    2 => 10,
+    1 => 0,
+  },
 }
 `;
 
@@ -59,60 +82,75 @@ exports[`profiling CommitDetails should be collected for each commit: exported d
 Object {
   "commitDetails": Array [
     Object {
-      "actualDurations": Array [
+      "commitIndex": 0,
+      "durations": Array [
         1,
         12,
+        0,
         2,
         12,
+        10,
         3,
         0,
+        0,
         4,
         1,
+        1,
         5,
         1,
+        1,
       ],
-      "commitIndex": 0,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 1,
+      "durations": Array [
         3,
         0,
+        0,
         4,
         1,
+        1,
         6,
         2,
         2,
+        2,
         13,
+        10,
         1,
         13,
+        0,
       ],
-      "commitIndex": 1,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 2,
+      "durations": Array [
         3,
         0,
+        0,
         2,
         10,
+        10,
         1,
         10,
+        0,
       ],
-      "commitIndex": 2,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 3,
+      "durations": Array [
         2,
         10,
+        10,
         1,
         10,
+        0,
       ],
-      "commitIndex": 3,
       "interactions": Array [],
       "rootID": 1,
     },
@@ -295,15 +333,71 @@ Object {
 }
 `;
 
+exports[`profiling CommitDetails should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
+Object {
+  "actualDurations": Map {
+    1 => 16,
+    2 => 16,
+    3 => 1,
+    5 => 1,
+  },
+  "commitIndex": 0,
+  "interactions": Array [],
+  "rootID": 1,
+  "selfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 1,
+    5 => 1,
+  },
+}
+`;
+
+exports[`profiling CommitDetails should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
+Object {
+  "actualDurations": Map {
+    1 => 15,
+    2 => 15,
+    3 => 5,
+    4 => 2,
+  },
+  "commitIndex": 0,
+  "interactions": Array [],
+  "rootID": 1,
+  "selfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 3,
+    4 => 2,
+  },
+}
+`;
+
+exports[`profiling CommitDetails should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
+Object {
+  "actualDurations": Map {
+    5 => 3,
+    3 => 3,
+  },
+  "commitIndex": 1,
+  "interactions": Array [],
+  "rootID": 1,
+  "selfDurations": Map {
+    5 => 3,
+    3 => 0,
+  },
+}
+`;
+
 exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 2 1`] = `
 Object {
   "commitDurations": Array [
     0,
-    11,
+    10,
     1,
-    11,
+    10,
     2,
-    13,
+    10,
   ],
   "fiberID": 2,
   "rootID": 1,
@@ -364,49 +458,62 @@ exports[`profiling FiberCommits should be collected for each rendered fiber: exp
 Object {
   "commitDetails": Array [
     Object {
-      "actualDurations": Array [
+      "commitIndex": 0,
+      "durations": Array [
         1,
         11,
+        0,
         2,
         11,
+        10,
         3,
         0,
+        0,
         4,
         1,
+        1,
       ],
-      "commitIndex": 0,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 1,
+      "durations": Array [
         3,
         0,
+        0,
         5,
         1,
+        1,
         2,
         11,
+        10,
         1,
         11,
+        0,
       ],
-      "commitIndex": 1,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 2,
+      "durations": Array [
         3,
         0,
+        0,
         5,
         1,
+        1,
         6,
         2,
         2,
+        2,
         13,
+        10,
         1,
         13,
+        0,
       ],
-      "commitIndex": 2,
       "interactions": Array [],
       "rootID": 1,
     },
@@ -609,17 +716,21 @@ exports[`profiling Interactions should be collected for every traced interaction
 Object {
   "commitDetails": Array [
     Object {
-      "actualDurations": Array [
+      "commitIndex": 0,
+      "durations": Array [
         1,
         11,
+        0,
         2,
         11,
+        10,
         3,
         0,
+        0,
         4,
         1,
+        1,
       ],
-      "commitIndex": 0,
       "interactions": Array [
         Object {
           "__count": 1,
@@ -631,17 +742,21 @@ Object {
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 1,
+      "durations": Array [
         3,
         0,
+        0,
         5,
         1,
+        1,
         2,
         11,
+        10,
         1,
         11,
+        0,
       ],
-      "commitIndex": 1,
       "interactions": Array [
         Object {
           "__count": 0,
@@ -833,43 +948,53 @@ exports[`profiling ProfilingSummary should be collected for each commit: exporte
 Object {
   "commitDetails": Array [
     Object {
-      "actualDurations": Array [
+      "commitIndex": 0,
+      "durations": Array [
         3,
         0,
+        0,
         4,
         1,
+        1,
         6,
         2,
         2,
+        2,
         13,
+        10,
         1,
         13,
+        0,
       ],
-      "commitIndex": 0,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 1,
+      "durations": Array [
         3,
         0,
+        0,
         2,
         10,
+        10,
         1,
         10,
+        0,
       ],
-      "commitIndex": 1,
       "interactions": Array [],
       "rootID": 1,
     },
     Object {
-      "actualDurations": Array [
+      "commitIndex": 2,
+      "durations": Array [
         2,
         10,
+        10,
         1,
         10,
+        0,
       ],
-      "commitIndex": 2,
       "interactions": Array [],
       "rootID": 1,
     },
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index 26d2e2e67856..dd085a5fa497 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -253,6 +253,141 @@ describe('profiling', () => {
 
       done();
     });
+
+    it('should calculate a self duration based on actual children (not filtered children)', async done => {
+      store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+      const Grandparent = () => {
+        Scheduler.advanceTime(10);
+        return (
+          <React.Fragment>
+            <Parent key="one" />
+            <Parent key="two" />
+          </React.Fragment>
+        );
+      };
+      const Parent = () => {
+        Scheduler.advanceTime(2);
+        return <Child />;
+      };
+      const Child = () => {
+        Scheduler.advanceTime(1);
+        return null;
+      };
+
+      utils.act(() => store.startProfiling());
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+      utils.act(() => store.stopProfiling());
+
+      let commitDetails = null;
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        expect(commitDetails).toMatchSnapshot(
+          `CommitDetails with filtered self durations`
+        );
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      await utils.actAsync(() => {
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={0}
+              rendererID={rendererID}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        );
+      });
+
+      expect(commitDetails).not.toBeNull();
+
+      done();
+    });
+
+    it('should calculate self duration correctly for suspended views', async done => {
+      let data;
+      const getData = () => {
+        if (data) {
+          return data;
+        } else {
+          throw new Promise(resolve => {
+            data = 'abc';
+            resolve(data);
+          });
+        }
+      };
+
+      const Parent = () => {
+        Scheduler.advanceTime(10);
+        return (
+          <React.Suspense fallback={<Fallback />}>
+            <Async />
+          </React.Suspense>
+        );
+      };
+      const Fallback = () => {
+        Scheduler.advanceTime(2);
+        return 'Fallback...';
+      };
+      const Async = () => {
+        Scheduler.advanceTime(3);
+        const data = getData();
+        return data;
+      };
+
+      utils.act(() => store.startProfiling());
+      await utils.actAsync(() =>
+        ReactDOM.render(<Parent />, document.createElement('div'))
+      );
+      utils.act(() => store.stopProfiling());
+
+      const allCommitDetails = [];
+
+      function Suspender({ commitIndex, rendererID, rootID }) {
+        const commitDetails = store.profilingCache.CommitDetails.read({
+          commitIndex,
+          rendererID,
+          rootID,
+        });
+        allCommitDetails.push(commitDetails);
+        expect(commitDetails).toMatchSnapshot(
+          `CommitDetails with filtered self durations`
+        );
+        return null;
+      }
+
+      const rendererID = utils.getRendererID();
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        await utils.actAsync(() => {
+          TestRenderer.create(
+            <React.Suspense fallback={null}>
+              <Suspender
+                commitIndex={commitIndex}
+                rendererID={rendererID}
+                rootID={rootID}
+              />
+            </React.Suspense>
+          );
+        });
+      }
+
+      expect(allCommitDetails).toHaveLength(2);
+
+      done();
+    });
   });
 
   describe('FiberCommits', () => {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b76ce8a7d694..fdbdd694c243 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -787,13 +787,8 @@ export function attach(
     const isRoot = fiber.tag === HostRoot;
     const id = getFiberID(getPrimaryFiber(fiber));
 
-    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
-    if (isProfilingSupported) {
-      idToRootMap.set(id, currentRootID);
-      idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
-    }
-
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
     if (isRoot) {
       pushOperation(TREE_OPERATION_ADD);
@@ -824,26 +819,10 @@ export function attach(
       pushOperation(keyStringID);
     }
 
-    if (isProfiling) {
-      // Tree base duration updates are included in the operations typed array.
-      // So we have to convert them from milliseconds to microseconds so we can send them as ints.
-      const treeBaseDuration = Math.floor((fiber.treeBaseDuration || 0) * 1000);
+    if (isProfilingSupported) {
+      idToRootMap.set(id, currentRootID);
 
-      pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
-      pushOperation(id);
-      pushOperation(treeBaseDuration);
-
-      const { actualDuration } = fiber;
-      if (actualDuration != null) {
-        // If profiling is active, store durations for elements that were rendered during the commit.
-        // We should do this for all fibers on mount, regardless of their actual durations.
-        const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-        metadata.actualDurations.push(id, actualDuration);
-        metadata.maxActualDuration = Math.max(
-          metadata.maxActualDuration,
-          actualDuration
-        );
-      }
+      recordProfilingDurations(fiber);
     }
   }
 
@@ -993,7 +972,7 @@ export function attach(
     }
   }
 
-  function recordTreeDuration(fiber: Fiber) {
+  function recordProfilingDurations(fiber: Fiber) {
     const id = getFiberID(getPrimaryFiber(fiber));
     const { actualDuration, treeBaseDuration } = fiber;
 
@@ -1003,8 +982,8 @@ export function attach(
       const { alternate } = fiber;
 
       if (
-        treeBaseDuration !==
-        (alternate ? alternate.treeBaseDuration : undefined)
+        alternate == null ||
+        treeBaseDuration !== alternate.treeBaseDuration
       ) {
         // Tree base duration updates are included in the operations typed array.
         // So we have to convert them from milliseconds to microseconds so we can send them as ints.
@@ -1012,18 +991,31 @@ export function attach(
           (fiber.treeBaseDuration || 0) * 1000
         );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
-        pushOperation(getFiberID(getPrimaryFiber(fiber)));
+        pushOperation(id);
         pushOperation(treeBaseDuration);
       }
 
-      if (alternate ? hasDataChanged(alternate, fiber) : true) {
+      if (alternate == null || hasDataChanged(alternate, fiber)) {
         if (actualDuration != null) {
+          // The actual duration reported by React includes time spent working on children.
+          // This is useful information, but it's also useful to be able to exclude child durations.
+          // The frontend can't compute this, since the immediate children may have been filtered out.
+          // So we need to do this on the backend.
+          // Note that this calculated self duration is not the same thing as the base duration.
+          // The two are calculated differently (tree duration does not accumulate).
+          let selfDuration = actualDuration;
+          let child = fiber.child;
+          while (child !== null) {
+            selfDuration -= child.actualDuration || 0;
+            child = child.sibling;
+          }
+
           // If profiling is active, store durations for elements that were rendered during the commit.
           // Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.
           // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
           // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-          metadata.actualDurations.push(id, actualDuration);
+          metadata.durations.push(id, actualDuration, selfDuration);
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
             actualDuration
@@ -1205,7 +1197,7 @@ export function attach(
     if (shouldIncludeInTree) {
       const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');
       if (isProfilingSupported) {
-        recordTreeDuration(nextFiber);
+        recordProfilingDurations(nextFiber);
       }
     }
     if (shouldResetChildren) {
@@ -1267,7 +1259,7 @@ export function attach(
           // If profiling is active, store commit time and duration, and the current interactions.
           // The frontend may request this information after profiling has stopped.
           currentCommitProfilingMetadata = {
-            actualDurations: [],
+            durations: [],
             commitTime: performance.now() - profilingStartTime,
             interactions: Array.from(root.memoizedInteractions).map(
               (interaction: InteractionBackend) => ({
@@ -1309,7 +1301,7 @@ export function attach(
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
-        actualDurations: [],
+        durations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
           (interaction: InteractionBackend) => ({
@@ -1960,8 +1952,8 @@ export function attach(
   }
 
   type CommitProfilingData = {|
-    actualDurations: Array<number>,
     commitTime: number,
+    durations: Array<number>,
     interactions: Array<InteractionBackend>,
     maxActualDuration: number,
   |};
@@ -1987,8 +1979,8 @@ export function attach(
       if (commitProfilingData != null) {
         return {
           commitIndex,
+          durations: commitProfilingData.durations,
           interactions: commitProfilingData.interactions,
-          actualDurations: commitProfilingData.actualDurations,
           rootID,
         };
       }
@@ -2001,7 +1993,7 @@ export function attach(
     return {
       commitIndex,
       interactions: [],
-      actualDurations: [],
+      durations: [],
       rootID,
     };
   }
@@ -2015,10 +2007,10 @@ export function attach(
     );
     if (commitProfilingMetadata != null) {
       const commitDurations = [];
-      commitProfilingMetadata.forEach(({ actualDurations }, commitIndex) => {
-        for (let i = 0; i < actualDurations.length; i += 2) {
-          if (actualDurations[i] === fiberID) {
-            commitDurations.push(commitIndex, actualDurations[i + 1]);
+      commitProfilingMetadata.forEach(({ durations }, commitIndex) => {
+        for (let i = 0; i < durations.length; i += 3) {
+          if (durations[i] === fiberID) {
+            commitDurations.push(commitIndex, durations[i + 2]);
             break;
           }
         }
diff --git a/src/backend/types.js b/src/backend/types.js
index a9680cd78a2e..9ec9ec70a198 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -122,8 +122,9 @@ export type InteractionBackend = {|
 |};
 
 export type CommitDetailsBackend = {|
-  actualDurations: Array<number>,
   commitIndex: number,
+  // Tuple of id, actual duration, and (computed) self duration
+  durations: Array<number>,
   interactions: Array<InteractionBackend>,
   rootID: number,
 |};
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 9ef88565c8d7..ac679f570f23 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -127,6 +127,7 @@ export default class ProfilingCache {
           rootID,
           commitIndex,
           actualDurations: new Map(),
+          selfDurations: new Map(),
           interactions: [],
         });
       });
@@ -147,10 +148,10 @@ export default class ProfilingCache {
           const { commitDetails } = (importedProfilingData: any);
           if (commitDetails != null) {
             const commitDurations = [];
-            commitDetails.forEach(({ actualDurations }, commitIndex) => {
-              for (let i = 0; i < actualDurations.length; i += 2) {
-                if (actualDurations[i] === fiberID) {
-                  commitDurations.push(commitIndex, actualDurations[i + 1]);
+            commitDetails.forEach(({ durations }, commitIndex) => {
+              for (let i = 0; i < durations.length; i += 3) {
+                if (durations[i] === fiberID) {
+                  commitDurations.push(commitIndex, durations[i + 2]);
                   break;
                 }
               }
@@ -332,7 +333,7 @@ export default class ProfilingCache {
 
   onCommitDetails = ({
     commitIndex,
-    actualDurations,
+    durations,
     interactions,
     rootID,
   }: CommitDetailsBackend) => {
@@ -342,14 +343,18 @@ export default class ProfilingCache {
       this._pendingCommitDetailsMap.delete(key);
 
       const actualDurationsMap = new Map();
-      for (let i = 0; i < actualDurations.length; i += 2) {
-        actualDurationsMap.set(actualDurations[i], actualDurations[i + 1]);
+      const selfDurationsMap = new Map();
+      for (let i = 0; i < durations.length; i += 3) {
+        const id = durations[i];
+        actualDurationsMap.set(id, durations[i + 1]);
+        selfDurationsMap.set(id, durations[i + 2]);
       }
 
       resolve({
         rootID,
         commitIndex,
         actualDurations: actualDurationsMap,
+        selfDurations: selfDurationsMap,
         interactions,
       });
     }
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 8f314ba75404..7d5b552506f4 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration, formatDuration } from './utils';
+import { formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -34,7 +34,7 @@ export function getChartData({
   commitIndex: number,
   commitTree: CommitTreeFrontend,
 |}): ChartData {
-  const { actualDurations, rootID } = commitDetails;
+  const { actualDurations, rootID, selfDurations } = commitDetails;
   const { nodes } = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
@@ -60,7 +60,7 @@ export function getChartData({
     const { children, displayName, key, treeBaseDuration } = node;
 
     const actualDuration = actualDurations.get(id) || 0;
-    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    const selfDuration = selfDurations.get(id) || 0;
     const didRender = actualDurations.has(id);
 
     const name = displayName || 'Unknown';
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index f11c97200ff1..51f0919a2242 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { calculateSelfDuration, formatDuration } from './utils';
+import { formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
 
@@ -27,7 +27,7 @@ export function getChartData({
   commitIndex: number,
   commitTree: CommitTreeFrontend,
 |}): ChartData {
-  const { actualDurations, rootID } = commitDetails;
+  const { actualDurations, rootID, selfDurations } = commitDetails;
   const { nodes } = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
@@ -49,7 +49,7 @@ export function getChartData({
     if (node.parentID === 0) {
       return;
     }
-    const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
+    const selfDuration = selfDurations.get(id) || 0;
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
     const name = node.displayName || 'Unknown';
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 0da7a9922543..38b4742ac65d 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -31,6 +31,7 @@ export type CommitDetailsFrontend = {|
   rootID: number,
   commitIndex: number,
   actualDurations: Map<number, number>,
+  selfDurations: Map<number, number>,
   interactions: Array<InteractionFrontend>,
 |};
 
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 93443d971436..b1c6a27a30c3 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -2,11 +2,7 @@
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
 
-import type {
-  CommitDetailsFrontend,
-  CommitTreeFrontend,
-  ProfilingSnapshotNode,
-} from './types';
+import type { ProfilingSnapshotNode } from './types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -21,34 +17,6 @@ const commitGradient = [
   'var(--color-commit-gradient-9)',
 ];
 
-export const calculateSelfDuration = (
-  id: number,
-  commitTree: CommitTreeFrontend,
-  commitDetails: CommitDetailsFrontend
-): number => {
-  const { actualDurations } = commitDetails;
-  const { nodes } = commitTree;
-
-  if (!actualDurations.has(id)) {
-    return 0;
-  }
-
-  const node = nodes.get(id);
-  if (node == null) {
-    throw Error(`Could not find node with id "${id}" in commit tree`);
-  }
-
-  let selfDuration = actualDurations.get(id) || 0;
-
-  node.children.forEach(childID => {
-    if (actualDurations.has(childID)) {
-      selfDuration -= actualDurations.get(childID) || 0;
-    }
-  });
-
-  return selfDuration;
-};
-
 export const prepareProfilingExport = (
   profilingOperations: Map<number, Array<Uint32Array>>,
   profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,

From d9a0c426524381be9e134f0771f517f13a61de51 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 13 May 2019 14:04:53 -0700
Subject: [PATCH 587/814] Bumped Profiler export version (since self durations
 are now included)

---
 src/__tests__/__snapshots__/profiling-test.js.snap | 8 ++++----
 src/constants.js                                   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index fce6058d977b..0dde8d46c322 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -329,7 +329,7 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 2,
+  "version": 3,
 }
 `;
 
@@ -685,7 +685,7 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 2,
+  "version": 3,
 }
 `;
 
@@ -916,7 +916,7 @@ Object {
     "interactionCount": 2,
     "rootID": 1,
   },
-  "version": 2,
+  "version": 3,
 }
 `;
 
@@ -1137,6 +1137,6 @@ Object {
     "interactionCount": 0,
     "rootID": 1,
   },
-  "version": 2,
+  "version": 3,
 }
 `;
diff --git a/src/constants.js b/src/constants.js
index 0ba0cb8b6981..66341ac58477 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -16,4 +16,4 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
 
 export const __DEBUG__ = false;
 
-export const PROFILER_EXPORT_VERSION = 2;
+export const PROFILER_EXPORT_VERSION = 3;

From 6b4c75833835d4985908abdd95ab1f08f3ba8722 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 13 May 2019 14:51:56 -0700
Subject: [PATCH 588/814] CSS tweaks

---
 src/devtools/views/Components/Element.css     | 21 +++++++++++--------
 .../views/Settings/SettingsContext.js         | 10 +++++++++
 src/devtools/views/root.css                   |  4 ++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index ed1176739e1e..5833d462c8b0 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -28,6 +28,9 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
+  --color-component-badge-background: var(
+    --color-component-badge-background-inverted
+  );
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-background-hover);
   --color-attribute-value: var(--color-component-name-inverted);
@@ -74,12 +77,12 @@
   color: var(--color-expand-collapse-toggle);
 }
 
-.Badge{
-  background: var(--color-component-name);
-  color: #000;
-  line-height: calc(var(--line-height-data) - 0.25rem);
-  padding: 0 0.55rem;
-  border-radius: 5px;
-  margin-left: 0.5rem;
-  font-size: calc(var(--font-size-monospace-normal) - 2px);
-}
\ No newline at end of file
+.Badge {
+  background-color: var(--color-component-badge-background);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-left: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 0136c8bbc8c1..9d6c32dbb317 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -228,6 +228,16 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
   updateStyleHelper(theme, 'color-component-name', documentElements);
   updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-component-badge-background',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-component-badge-background-inverted',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 296d7dd1a3e9..16d1387a827b 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -33,6 +33,8 @@
   --light-color-commit-gradient-text: #000000;
   --light-color-component-name: #6a51b2;
   --light-color-component-name-inverted: #ffffff;
+  --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
+  --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
@@ -85,6 +87,8 @@
   --dark-color-commit-gradient-text: #000000;
   --dark-color-component-name: #61dafb;
   --dark-color-component-name-inverted: ##282828;
+  --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
+  --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;

From 1723c5d3169e166b6426177ab0a05b7ae605d6bb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 13 May 2019 15:26:14 -0700
Subject: [PATCH 589/814] Changed "Unknown" fallback displayName to
 "Anonymous". Added memo/forwardRef labels to Profiler charts.

---
 .../__snapshots__/profiling-test.js.snap      |  5 +++
 .../profilingCharts-test.js.snap              | 38 ++++++++++++++-----
 .../profilingCommitTreeBuilder-test.js.snap   | 14 +++++++
 src/backend/renderer.js                       | 14 +++----
 src/devtools/store.js                         |  1 +
 .../views/Components/SelectedElement.js       |  2 +-
 .../views/Profiler/CommitTreeBuilder.js       |  3 ++
 .../views/Profiler/FlamegraphChartBuilder.js  | 14 +++++--
 .../views/Profiler/RankedChartBuilder.js      | 21 ++++++++--
 src/devtools/views/Profiler/types.js          |  4 ++
 src/hydration.js                              |  2 +-
 src/utils.js                                  |  2 +-
 12 files changed, 93 insertions(+), 27 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index f7caf6f06bf4..2fa82104a1c8 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -1044,6 +1044,7 @@ Object {
         "displayName": null,
         "id": 1,
         "key": null,
+        "type": 11,
       },
       2 => Object {
         "children": Array [
@@ -1054,24 +1055,28 @@ Object {
         "displayName": "Parent",
         "id": 2,
         "key": null,
+        "type": 5,
       },
       3 => Object {
         "children": Array [],
         "displayName": "Child",
         "id": 3,
         "key": "0",
+        "type": 5,
       },
       4 => Object {
         "children": Array [],
         "displayName": "Child",
         "id": 4,
         "key": "1",
+        "type": 5,
       },
       5 => Object {
         "children": Array [],
         "displayName": "Child",
         "id": 5,
         "key": null,
+        "type": 8,
       },
     },
   },
diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index bf875768a5b1..9da03f593571 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -12,6 +12,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 15,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -24,6 +25,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 15,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -32,6 +34,7 @@ Object {
       "key": "first",
       "parentID": 2,
       "treeBaseDuration": 3,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -40,6 +43,7 @@ Object {
       "key": "second",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     5 => Object {
       "children": Array [],
@@ -48,6 +52,7 @@ Object {
       "key": "third",
       "parentID": 2,
       "treeBaseDuration": 0,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -83,7 +88,7 @@ Object {
         "actualDuration": 0,
         "didRender": true,
         "id": 5,
-        "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
+        "label": "Child (Memo) key=\\"third\\" (<0.1ms of <0.1ms)",
         "name": "Child",
         "offset": 15,
         "selfDuration": 0,
@@ -93,7 +98,7 @@ Object {
         "actualDuration": 2,
         "didRender": true,
         "id": 4,
-        "label": "Child key=\\"second\\" (2ms of 2ms)",
+        "label": "Child (Memo) key=\\"second\\" (2ms of 2ms)",
         "name": "Child",
         "offset": 13,
         "selfDuration": 2,
@@ -103,7 +108,7 @@ Object {
         "actualDuration": 3,
         "didRender": true,
         "id": 3,
-        "label": "Child key=\\"first\\" (3ms of 3ms)",
+        "label": "Child (Memo) key=\\"first\\" (3ms of 3ms)",
         "name": "Child",
         "offset": 10,
         "selfDuration": 3,
@@ -126,6 +131,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 15,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -138,6 +144,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 15,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -146,6 +153,7 @@ Object {
       "key": "first",
       "parentID": 2,
       "treeBaseDuration": 3,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -154,6 +162,7 @@ Object {
       "key": "second",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     5 => Object {
       "children": Array [],
@@ -162,6 +171,7 @@ Object {
       "key": "third",
       "parentID": 2,
       "treeBaseDuration": 0,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -197,7 +207,7 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 5,
-        "label": "Child key=\\"third\\"",
+        "label": "Child (Memo) key=\\"third\\"",
         "name": "Child",
         "offset": 15,
         "selfDuration": 0,
@@ -207,7 +217,7 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 4,
-        "label": "Child key=\\"second\\"",
+        "label": "Child (Memo) key=\\"second\\"",
         "name": "Child",
         "offset": 13,
         "selfDuration": 0,
@@ -217,7 +227,7 @@ Object {
         "actualDuration": 0,
         "didRender": false,
         "id": 3,
-        "label": "Child key=\\"first\\"",
+        "label": "Child (Memo) key=\\"first\\"",
         "name": "Child",
         "offset": 10,
         "selfDuration": 0,
@@ -254,6 +264,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 15,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -266,6 +277,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 15,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -274,6 +286,7 @@ Object {
       "key": "first",
       "parentID": 2,
       "treeBaseDuration": 3,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -282,6 +295,7 @@ Object {
       "key": "second",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     5 => Object {
       "children": Array [],
@@ -290,6 +304,7 @@ Object {
       "key": "third",
       "parentID": 2,
       "treeBaseDuration": 0,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -308,19 +323,19 @@ Object {
     },
     Object {
       "id": 3,
-      "label": "Child key=\\"first\\" (3ms)",
+      "label": "Child (Memo) key=\\"first\\" (3ms)",
       "name": "Child",
       "value": 3,
     },
     Object {
       "id": 4,
-      "label": "Child key=\\"second\\" (2ms)",
+      "label": "Child (Memo) key=\\"second\\" (2ms)",
       "name": "Child",
       "value": 2,
     },
     Object {
       "id": 5,
-      "label": "Child key=\\"third\\" (<0.1ms)",
+      "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
       "name": "Child",
       "value": 0,
     },
@@ -340,6 +355,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 15,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -352,6 +368,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 15,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -360,6 +377,7 @@ Object {
       "key": "first",
       "parentID": 2,
       "treeBaseDuration": 3,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -368,6 +386,7 @@ Object {
       "key": "second",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     5 => Object {
       "children": Array [],
@@ -376,6 +395,7 @@ Object {
       "key": "third",
       "parentID": 2,
       "treeBaseDuration": 0,
+      "type": 8,
     },
   },
   "rootID": 1,
diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
index 29bfaddcdaa8..6f8573b08e79 100644
--- a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -12,6 +12,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 12,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -22,6 +23,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 12,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -30,6 +32,7 @@ Object {
       "key": "0",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -48,6 +51,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 16,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -60,6 +64,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 16,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -68,6 +73,7 @@ Object {
       "key": "0",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -76,6 +82,7 @@ Object {
       "key": "1",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     5 => Object {
       "children": Array [],
@@ -84,6 +91,7 @@ Object {
       "key": "2",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -102,6 +110,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 14,
+      "type": 11,
     },
     2 => Object {
       "children": Array [
@@ -113,6 +122,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 14,
+      "type": 5,
     },
     3 => Object {
       "children": Array [],
@@ -121,6 +131,7 @@ Object {
       "key": "0",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
     4 => Object {
       "children": Array [],
@@ -129,6 +140,7 @@ Object {
       "key": "1",
       "parentID": 2,
       "treeBaseDuration": 2,
+      "type": 8,
     },
   },
   "rootID": 1,
@@ -147,6 +159,7 @@ Object {
       "key": null,
       "parentID": 0,
       "treeBaseDuration": 10,
+      "type": 11,
     },
     2 => Object {
       "children": Array [],
@@ -155,6 +168,7 @@ Object {
       "key": null,
       "parentID": 1,
       "treeBaseDuration": 10,
+      "type": 5,
     },
   },
   "rootID": 1,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 23ad2c59f816..4eeca128d4ac 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -459,10 +459,9 @@ export function attach(
             return 'EventTarget';
         }
       case ForwardRef:
-        const functionName = getDisplayName(resolvedType.render, '');
         return (
           resolvedType.displayName ||
-          (functionName !== '' ? functionName : 'ForwardRef')
+          getDisplayName(resolvedType.render, 'Anonymous')
         );
       case HostRoot:
         return null;
@@ -477,8 +476,7 @@ export function attach(
         if (elementType.displayName) {
           return elementType.displayName;
         } else {
-          const displayName = type.displayName || type.name;
-          return displayName ? displayName : 'Memo';
+          return getDisplayName(type, 'Anonymous');
         }
       default:
         const typeSymbol = getTypeSymbol(type);
@@ -1690,7 +1688,7 @@ export function attach(
 
     const owners = [
       {
-        displayName: getDisplayNameForFiber(fiber) || 'Unknown',
+        displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
         id,
       },
     ];
@@ -1699,7 +1697,7 @@ export function attach(
       let owner = _debugOwner;
       while (owner !== null) {
         owners.unshift({
-          displayName: getDisplayNameForFiber(owner) || 'Unknown',
+          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
           id: getFiberID(getPrimaryFiber(owner)),
         });
         owner = owner._debugOwner || null;
@@ -1794,7 +1792,7 @@ export function attach(
       let owner = _debugOwner;
       while (owner !== null) {
         owners.push({
-          displayName: getDisplayNameForFiber(owner) || 'Unknown',
+          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
           id: getFiberID(getPrimaryFiber(owner)),
         });
         owner = owner._debugOwner || null;
@@ -2306,7 +2304,7 @@ export function attach(
       }
       child = child.child;
     }
-    const name = preferredDisplayName || fallbackDisplayName || 'Unknown';
+    const name = preferredDisplayName || fallbackDisplayName || 'Anonymous';
     const counter = rootDisplayNameCounter.get(name) || 0;
     rootDisplayNameCounter.set(name, counter + 1);
     const pseudoKey = `${name}:${counter}`;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 61a141797e1c..8cf358b8da76 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -720,6 +720,7 @@ export default class Store extends EventEmitter {
         children: element.children.slice(0),
         displayName: element.displayName,
         key: element.key,
+        type: element.type,
       });
 
       element.children.forEach(childID =>
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index b49ce87ad84e..6f474113feb6 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -304,7 +304,7 @@ function InspectedElementView({
           {owners.map(owner => (
             <OwnerView
               key={owner.id}
-              displayName={owner.displayName || 'Unknown'}
+              displayName={owner.displayName || 'Anonymous'}
               id={owner.id}
               isInStore={store.containsElement(owner.id)}
             />
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index ed61f3a535f3..3d4ec90aed89 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -144,6 +144,7 @@ function recursivelyInitializeTree(
       key: node.key,
       parentID,
       treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
+      type: node.type,
     });
 
     node.children.forEach(childID =>
@@ -225,6 +226,7 @@ function updateTree(
             key: null,
             parentID: 0,
             treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
           };
 
           nodes.set(id, node);
@@ -259,6 +261,7 @@ function updateTree(
             key,
             parentID,
             treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
           };
 
           nodes.set(id, node);
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 7d5b552506f4..be52349fb35e 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
 import { formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -57,16 +58,23 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
-    const { children, displayName, key, treeBaseDuration } = node;
+    const { children, displayName, key, treeBaseDuration, type } = node;
 
     const actualDuration = actualDurations.get(id) || 0;
     const selfDuration = selfDurations.get(id) || 0;
     const didRender = actualDurations.has(id);
 
-    const name = displayName || 'Unknown';
+    const name = displayName || 'Anonymous';
     const maybeKey = key !== null ? ` key="${key}"` : '';
 
-    let label = `${name}${maybeKey}`;
+    let maybeBadge = '';
+    if (type === ElementTypeForwardRef) {
+      maybeBadge = ' (ForwardRef)';
+    } else if (type === ElementTypeMemo) {
+      maybeBadge = ' (Memo)';
+    }
+
+    let label = `${name}${maybeBadge}${maybeKey}`;
     if (didRender) {
       label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
         actualDuration
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 51f0919a2242..9b53af9dbb56 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
 import { formatDuration } from './utils';
 
 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -45,16 +46,28 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
+    const { displayName, key, parentID, type } = node;
+
     // Don't show the root node in this chart.
-    if (node.parentID === 0) {
+    if (parentID === 0) {
       return;
     }
     const selfDuration = selfDurations.get(id) || 0;
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
-    const name = node.displayName || 'Unknown';
-    const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
-    const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`;
+    const name = displayName || 'Anonymous';
+    const maybeKey = key !== null ? ` key="${key}"` : '';
+
+    let maybeBadge = '';
+    if (type === ElementTypeForwardRef) {
+      maybeBadge = ' (ForwardRef)';
+    } else if (type === ElementTypeMemo) {
+      maybeBadge = ' (Memo)';
+    }
+
+    const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
+      selfDuration
+    )}ms)`;
     chartNodes.push({
       id,
       label,
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 38b4742ac65d..0e50fa2d4f5a 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -1,5 +1,7 @@
 // @flow
 
+import type { ElementType } from 'src/types';
+
 export type CommitTreeNodeFrontend = {|
   id: number,
   children: Array<number>,
@@ -7,6 +9,7 @@ export type CommitTreeNodeFrontend = {|
   key: number | string | null,
   parentID: number,
   treeBaseDuration: number,
+  type: ElementType,
 |};
 
 export type CommitTreeFrontend = {|
@@ -61,6 +64,7 @@ export type ProfilingSnapshotNode = {|
   children: Array<number>,
   displayName: string | null,
   key: number | string | null,
+  type: ElementType,
 |};
 
 export type ImportedProfilingData = {|
diff --git a/src/hydration.js b/src/hydration.js
index 329994119f54..48a83af0c695 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -272,7 +272,7 @@ export function getDisplayNameForReactElement(
       if (typeof type === 'string') {
         return type;
       } else if (type != null) {
-        return getDisplayName(type, 'Unknown');
+        return getDisplayName(type, 'Anonymous');
       } else {
         return 'Element';
       }
diff --git a/src/utils.js b/src/utils.js
index 499a72bb1dbc..3880bada6a34 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -15,7 +15,7 @@ let encodedStringCache = new LRU({ max: 1000 });
 
 export function getDisplayName(
   type: Function,
-  fallbackName: string = 'Unknown'
+  fallbackName: string = 'Anonymous'
 ): string {
   const nameFromCache = cachedDisplayNames.get(type);
   if (nameFromCache != null) {

From 76e569992b259b9e636ee68dcc7719539f4b9bb8 Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Tue, 30 Apr 2019 03:16:52 -0700
Subject: [PATCH 590/814] Cleanup profile export/import data types, add
 export/import test

Strengthened the I/O-boundary type conversion logic.

Fixed type inconsistencies uncovered by removing `any` and
by making explicit type annotations and transformations.

In particular, these were likely malformed when restored from a file:
- `commitDetails`
- `interactions`
- `initialTreeBaseDurations`

The mismatches were Map vs interleaved Array.
---
 .eslintignore                                 |   3 +-
 .../__snapshots__/profiling-test.js.snap      | 402 ++++++++----------
 src/__tests__/profiling-test.js               |  52 +--
 src/__tests__/profilingCharts-test.js         |   2 +-
 src/__tests__/setupTests.js                   |  54 ++-
 src/__tests__/utils.js                        |  58 +++
 src/backend/agent.js                          |  42 +-
 src/backend/index.js                          |  24 +-
 src/backend/renderer.js                       |  61 +--
 src/backend/types.js                          |  14 +-
 src/devtools/ProfilingCache.js                | 185 ++++----
 src/devtools/store.js                         |   5 +-
 src/devtools/views/Profiler/Interactions.js   |   2 +-
 .../Profiler/ProfilingImportExportButtons.js  |  26 +-
 .../views/Profiler/SidebarInteractions.js     |   2 +-
 src/devtools/views/Profiler/types.js          |  44 +-
 src/devtools/views/Profiler/utils.js          | 148 ++++++-
 17 files changed, 657 insertions(+), 467 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 60fbacc57538..4b9cfb7dd79e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,7 @@ shells/browser/firefox/build
 shells/browser/shared/build
 shells/dev/dist
 vendor
+*.js.snap
 
 package-lock.json
-yarn.lock
\ No newline at end of file
+yarn.lock
diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index 2fa82104a1c8..c76f53d51edc 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -78,81 +78,74 @@ Object {
 }
 `;
 
-exports[`profiling CommitDetails should be collected for each commit: exported data 1`] = `
+exports[`profiling CommitDetails should be collected for each commit: imported data 1`] = `
 Object {
   "commitDetails": Array [
     Object {
+      "actualDurations": Map {
+        1 => 12,
+        2 => 12,
+        3 => 0,
+        4 => 1,
+        5 => 1,
+      },
       "commitIndex": 0,
-      "durations": Array [
-        1,
-        12,
-        0,
-        2,
-        12,
-        10,
-        3,
-        0,
-        0,
-        4,
-        1,
-        1,
-        5,
-        1,
-        1,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        1 => 0,
+        2 => 10,
+        3 => 0,
+        4 => 1,
+        5 => 1,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 13,
+        1 => 13,
+      },
       "commitIndex": 1,
-      "durations": Array [
-        3,
-        0,
-        0,
-        4,
-        1,
-        1,
-        6,
-        2,
-        2,
-        2,
-        13,
-        10,
-        1,
-        13,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 10,
+        1 => 0,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 10,
+      },
       "commitIndex": 2,
-      "durations": Array [
-        3,
-        0,
-        0,
-        2,
-        10,
-        10,
-        1,
-        10,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 0,
+      },
     },
     Object {
+      "actualDurations": Map {
+        2 => 10,
+        1 => 10,
+      },
       "commitIndex": 3,
-      "durations": Array [
-        2,
-        10,
-        10,
-        1,
-        10,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        2 => 10,
+        1 => 0,
+      },
     },
   ],
   "interactions": Object {
@@ -161,7 +154,7 @@ Object {
   },
   "profilingOperations": Map {
     1 => Array [
-      Array [
+      Uint32Array [
         1,
         1,
         17,
@@ -231,7 +224,7 @@ Object {
         5,
         1000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         8,
@@ -267,7 +260,7 @@ Object {
         1,
         14000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         0,
@@ -287,7 +280,7 @@ Object {
         1,
         11000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         0,
@@ -313,7 +306,7 @@ Object {
       35,
       45,
     ],
-    "initialTreeBaseDurations": Array [],
+    "initialTreeBaseDurations": Map {},
     "interactionCount": 0,
     "rootID": 1,
   },
@@ -442,68 +435,61 @@ Object {
 }
 `;
 
-exports[`profiling FiberCommits should be collected for each rendered fiber: exported data 1`] = `
+exports[`profiling FiberCommits should be collected for each rendered fiber: imported data 1`] = `
 Object {
   "commitDetails": Array [
     Object {
+      "actualDurations": Map {
+        1 => 11,
+        2 => 11,
+        3 => 0,
+        4 => 1,
+      },
       "commitIndex": 0,
-      "durations": Array [
-        1,
-        11,
-        0,
-        2,
-        11,
-        10,
-        3,
-        0,
-        0,
-        4,
-        1,
-        1,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        1 => 0,
+        2 => 10,
+        3 => 0,
+        4 => 1,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        5 => 1,
+        2 => 11,
+        1 => 11,
+      },
       "commitIndex": 1,
-      "durations": Array [
-        3,
-        0,
-        0,
-        5,
-        1,
-        1,
-        2,
-        11,
-        10,
-        1,
-        11,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        5 => 1,
+        2 => 10,
+        1 => 0,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        5 => 1,
+        6 => 2,
+        2 => 13,
+        1 => 13,
+      },
       "commitIndex": 2,
-      "durations": Array [
-        3,
-        0,
-        0,
-        5,
-        1,
-        1,
-        6,
-        2,
-        2,
-        2,
-        13,
-        10,
-        1,
-        13,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        5 => 1,
+        6 => 2,
+        2 => 10,
+        1 => 0,
+      },
     },
   ],
   "interactions": Object {
@@ -512,7 +498,7 @@ Object {
   },
   "profilingOperations": Map {
     1 => Array [
-      Array [
+      Uint32Array [
         1,
         1,
         15,
@@ -570,7 +556,7 @@ Object {
         4,
         1000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         8,
@@ -605,7 +591,7 @@ Object {
         1,
         12000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         8,
@@ -657,7 +643,7 @@ Object {
       22,
       35,
     ],
-    "initialTreeBaseDurations": Array [],
+    "initialTreeBaseDurations": Map {},
     "interactionCount": 0,
     "rootID": 1,
   },
@@ -666,47 +652,42 @@ Object {
 `;
 
 exports[`profiling Interactions should be collected for every traced interaction: Interactions 1`] = `
-Array [
-  Object {
-    "__count": 1,
-    "commits": Array [
-      0,
-    ],
-    "id": 0,
-    "name": "mount: one child",
-    "timestamp": 0,
-  },
-  Object {
-    "__count": 0,
-    "commits": Array [
-      1,
-    ],
-    "id": 1,
-    "name": "update: two children",
-    "timestamp": 11,
-  },
-]
+Object {
+  "interactions": Array [
+    Object {
+      "__count": 1,
+      "commits": Array [
+        0,
+      ],
+      "id": 0,
+      "name": "mount: one child",
+      "timestamp": 0,
+    },
+    Object {
+      "__count": 0,
+      "commits": Array [
+        1,
+      ],
+      "id": 1,
+      "name": "update: two children",
+      "timestamp": 11,
+    },
+  ],
+  "rootID": 1,
+}
 `;
 
-exports[`profiling Interactions should be collected for every traced interaction: exported data 1`] = `
+exports[`profiling Interactions should be collected for every traced interaction: imported data 1`] = `
 Object {
   "commitDetails": Array [
     Object {
+      "actualDurations": Map {
+        1 => 11,
+        2 => 11,
+        3 => 0,
+        4 => 1,
+      },
       "commitIndex": 0,
-      "durations": Array [
-        1,
-        11,
-        0,
-        2,
-        11,
-        10,
-        3,
-        0,
-        0,
-        4,
-        1,
-        1,
-      ],
       "interactions": Array [
         Object {
           "__count": 1,
@@ -716,23 +697,21 @@ Object {
         },
       ],
       "rootID": 1,
+      "selfDurations": Map {
+        1 => 0,
+        2 => 10,
+        3 => 0,
+        4 => 1,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        5 => 1,
+        2 => 11,
+        1 => 11,
+      },
       "commitIndex": 1,
-      "durations": Array [
-        3,
-        0,
-        0,
-        5,
-        1,
-        1,
-        2,
-        11,
-        10,
-        1,
-        11,
-        0,
-      ],
       "interactions": Array [
         Object {
           "__count": 0,
@@ -742,6 +721,12 @@ Object {
         },
       ],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        5 => 1,
+        2 => 10,
+        1 => 0,
+      },
     },
   ],
   "interactions": Object {
@@ -769,7 +754,7 @@ Object {
   },
   "profilingOperations": Map {
     1 => Array [
-      Array [
+      Uint32Array [
         1,
         1,
         15,
@@ -827,7 +812,7 @@ Object {
         4,
         1000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         8,
@@ -876,7 +861,7 @@ Object {
       11,
       22,
     ],
-    "initialTreeBaseDurations": Array [],
+    "initialTreeBaseDurations": Map {},
     "interactionCount": 2,
     "rootID": 1,
   },
@@ -908,59 +893,55 @@ Object {
 }
 `;
 
-exports[`profiling ProfilingSummary should be collected for each commit: exported data 1`] = `
+exports[`profiling ProfilingSummary should be collected for each commit: imported data 1`] = `
 Object {
   "commitDetails": Array [
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 13,
+        1 => 13,
+      },
       "commitIndex": 0,
-      "durations": Array [
-        3,
-        0,
-        0,
-        4,
-        1,
-        1,
-        6,
-        2,
-        2,
-        2,
-        13,
-        10,
-        1,
-        13,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 10,
+        1 => 0,
+      },
     },
     Object {
+      "actualDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 10,
+      },
       "commitIndex": 1,
-      "durations": Array [
-        3,
-        0,
-        0,
-        2,
-        10,
-        10,
-        1,
-        10,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 0,
+      },
     },
     Object {
+      "actualDurations": Map {
+        2 => 10,
+        1 => 10,
+      },
       "commitIndex": 2,
-      "durations": Array [
-        2,
-        10,
-        10,
-        1,
-        10,
-        0,
-      ],
       "interactions": Array [],
       "rootID": 1,
+      "selfDurations": Map {
+        2 => 10,
+        1 => 0,
+      },
     },
   ],
   "interactions": Object {
@@ -969,7 +950,7 @@ Object {
   },
   "profilingOperations": Map {
     1 => Array [
-      Array [
+      Uint32Array [
         1,
         1,
         8,
@@ -1005,7 +986,7 @@ Object {
         1,
         14000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         0,
@@ -1025,7 +1006,7 @@ Object {
         1,
         11000,
       ],
-      Array [
+      Uint32Array [
         1,
         1,
         0,
@@ -1091,18 +1072,13 @@ Object {
       23,
       33,
     ],
-    "initialTreeBaseDurations": Array [
-      1,
-      12,
-      2,
-      12,
-      3,
-      0,
-      4,
-      1,
-      5,
-      1,
-    ],
+    "initialTreeBaseDurations": Map {
+      1 => 12,
+      2 => 12,
+      3 => 0,
+      4 => 1,
+      5 => 1,
+    },
     "interactionCount": 0,
     "rootID": 1,
   },
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
index dd085a5fa497..d992e72a8884 100644
--- a/src/__tests__/profiling-test.js
+++ b/src/__tests__/profiling-test.js
@@ -14,46 +14,6 @@ describe('profiling', () => {
   let store: Store;
   let utils;
 
-  const exportImportHelper = (rendererID: number, rootID: number) => {
-    const {
-      prepareProfilingExport,
-      prepareProfilingImport,
-    } = require('src/devtools/views/Profiler/utils');
-
-    let exportedProfilingSummary;
-    bridge.addListener('exportFile', ({ contents }) => {
-      exportedProfilingSummary = contents;
-    });
-
-    utils.act(() => {
-      const exportProfilingSummary = prepareProfilingExport(
-        store.profilingOperations,
-        store.profilingSnapshots,
-        rootID,
-        rendererID
-      );
-      bridge.send('exportProfilingSummary', exportProfilingSummary);
-    });
-
-    expect(exportedProfilingSummary).toBeDefined();
-
-    const importedProfilingSummary = prepareProfilingImport(
-      ((exportedProfilingSummary: any): string)
-    );
-
-    // Sanity check that profiling snapshots are serialized correctly.
-    expect(store.profilingSnapshots.get(rootID)).toEqual(
-      importedProfilingSummary.profilingSnapshots.get(rootID)
-    );
-
-    // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
-    expect(importedProfilingSummary).toMatchSnapshot('exported data');
-
-    utils.act(() => {
-      store.importedProfilingData = importedProfilingSummary;
-    });
-  };
-
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -71,10 +31,10 @@ describe('profiling', () => {
 
   it('should throw if importing older/unsupported data', () => {
     const {
-      prepareProfilingImport,
+      prepareImportedProfilingData,
     } = require('src/devtools/views/Profiler/utils');
     expect(() =>
-      prepareProfilingImport(
+      prepareImportedProfilingData(
         JSON.stringify({
           version: 0,
         })
@@ -143,7 +103,7 @@ describe('profiling', () => {
 
       expect(profilingSummary).not.toBeNull();
 
-      exportImportHelper(rendererID, rootID);
+      utils.exportImportHelper(bridge, store, rendererID, rootID);
 
       await utils.actAsync(() =>
         TestRenderer.create(
@@ -234,7 +194,7 @@ describe('profiling', () => {
 
       expect(allCommitDetails).toHaveLength(4);
 
-      exportImportHelper(rendererID, rootID);
+      utils.exportImportHelper(bridge, store, rendererID, rootID);
 
       for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
         await utils.actAsync(() => {
@@ -466,7 +426,7 @@ describe('profiling', () => {
 
       expect(allFiberCommits).toHaveLength(store.numElements);
 
-      exportImportHelper(rendererID, rootID);
+      utils.exportImportHelper(bridge, store, rendererID, rootID);
 
       for (let index = 0; index < store.numElements; index++) {
         await utils.actAsync(() => {
@@ -562,7 +522,7 @@ describe('profiling', () => {
 
       expect(interactions).not.toBeNull();
 
-      exportImportHelper(rendererID, rootID);
+      utils.exportImportHelper(bridge, store, rendererID, rootID);
 
       await utils.actAsync(() =>
         TestRenderer.create(
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index abdd3054e6a1..62e2c40b3083 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -253,7 +253,7 @@ describe('profiling charts', () => {
           rendererID,
           rootID,
         });
-        const interactions = store.profilingCache.Interactions.read({
+        const { interactions } = store.profilingCache.Interactions.read({
           rendererID,
           rootID,
         });
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 68916e13d3be..c259d8d43428 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -31,31 +31,43 @@ env.beforeEach(() => {
 
   installHook(global);
 
-  const bridgeListeners = [];
-  const bridge = new Bridge({
-    listen(callback) {
-      bridgeListeners.push(callback);
-      return () => {
-        const index = bridgeListeners.indexOf(callback);
-        if (index >= 0) {
-          bridgeListeners.splice(index, 1);
-        }
-      };
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      bridgeListeners.forEach(callback => callback({ event, payload }));
-    },
-  });
+  function init() {
+    const bridgeListeners = [];
+    const bridge = new Bridge({
+      listen(callback) {
+        bridgeListeners.push(callback);
+        return () => {
+          const index = bridgeListeners.indexOf(callback);
+          if (index >= 0) {
+            bridgeListeners.splice(index, 1);
+          }
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        bridgeListeners.forEach(callback => callback({ event, payload }));
+      },
+    });
 
-  const agent = new Agent(bridge);
+    const agent = new Agent(bridge);
 
-  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
-  initBackend(hook, agent, global);
+    const destroyBackend = initBackend(hook, agent, global);
 
-  global.agent = agent;
-  global.bridge = bridge;
-  global.store = new Store(bridge);
+    const store = new Store(bridge);
+
+    global.agent = agent;
+    global.bridge = bridge;
+    global.store = store;
+
+    // Reinit may be used to reset the store and the bridge during a test.
+    global.reinit = () => {
+      destroyBackend();
+      init();
+    };
+  }
+
+  init();
 });
 env.afterEach(() => {
   delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index cc7050575d83..06b18d05984e 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -4,6 +4,9 @@ import typeof ReactTestRenderer from 'react-test-renderer';
 
 import type { ElementType } from 'src/types';
 
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
 export function act(callback: Function): void {
   const TestUtils = require('react-dom/test-utils');
   TestUtils.act(() => {
@@ -129,3 +132,58 @@ export function requireTestRenderer(): ReactTestRenderer {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
   }
 }
+
+export function exportImportHelper(
+  bridge: Bridge,
+  store: Store,
+  rendererID: number,
+  rootID: number
+): void {
+  const utils = require('./utils');
+  const {
+    prepareExportedProfilingSummary,
+    prepareImportedProfilingData,
+  } = require('src/devtools/views/Profiler/utils');
+
+  let exportedProfilingDataJsonString = '';
+  const onExportFile = ({ contents }) => {
+    if (typeof contents === 'string') {
+      exportedProfilingDataJsonString = (contents: string);
+    }
+  };
+  bridge.addListener('exportFile', onExportFile);
+
+  utils.act(() => {
+    const exportProfilingSummary = prepareExportedProfilingSummary(
+      store.profilingOperations,
+      store.profilingSnapshots,
+      rendererID,
+      rootID
+    );
+    bridge.send('exportProfilingSummary', exportProfilingSummary);
+  });
+
+  // Cleanup to be able to call this again on the same bridge without memory leaks.
+  bridge.removeListener('exportFile', onExportFile);
+
+  expect(typeof exportedProfilingDataJsonString).toBe('string');
+  expect(exportedProfilingDataJsonString).not.toBe('');
+
+  const importedProfilingData = prepareImportedProfilingData(
+    exportedProfilingDataJsonString
+  );
+  // Sanity check that profiling snapshots are serialized correctly.
+  expect(store.profilingSnapshots.get(rootID)).toEqual(
+    importedProfilingData.profilingSnapshots.get(rootID)
+  );
+  expect(store.profilingOperations.get(rootID)).toEqual(
+    importedProfilingData.profilingOperations.get(rootID)
+  );
+
+  // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
+  expect(importedProfilingData).toMatchSnapshot('imported data');
+
+  utils.act(() => {
+    store.importedProfilingData = importedProfilingData;
+  });
+}
diff --git a/src/backend/agent.js b/src/backend/agent.js
index d675db7c78c9..701d4dff79bc 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -10,6 +10,7 @@ import {
 } from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
+import type { ExportedProfilingSummaryFromFrontend } from 'src/devtools/views/Profiler/types';
 import type {
   PathFrame,
   PathMatch,
@@ -19,6 +20,8 @@ import type {
 import type { OwnersList } from 'src/devtools/views/Components/types';
 import type { Bridge, ComponentFilter } from '../types';
 
+import { prepareExportedProfilingData } from 'src/devtools/views/Profiler/utils';
+
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
     console.log(
@@ -151,34 +154,29 @@ export default class Agent extends EventEmitter {
     return null;
   }
 
-  exportProfilingSummary = ({
-    profilingOperations,
-    profilingSnapshots,
-    rendererID,
-    rootID,
-  }: {
-    profilingOperations: Array<any>,
-    profilingSnapshots: Array<any>,
-    rendererID: number,
-    rootID: number,
-  }) => {
+  exportProfilingSummary = (
+    exportedProfilingSummary: ExportedProfilingSummaryFromFrontend
+  ): void => {
+    const { rendererID, rootID } = exportedProfilingSummary;
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
-    } else {
-      const rendererData = renderer.getProfilingDataForDownload(rootID);
+      return;
+    }
+    try {
+      const exportedProfilingDataFromRenderer = renderer.getExportedProfilingData(
+        rootID
+      );
+      const exportedProfilingData = prepareExportedProfilingData(
+        exportedProfilingDataFromRenderer,
+        exportedProfilingSummary
+      );
       this._bridge.send('exportFile', {
-        contents: JSON.stringify(
-          {
-            ...rendererData,
-            profilingOperations,
-            profilingSnapshots,
-          },
-          null,
-          2
-        ),
+        contents: JSON.stringify(exportedProfilingData, null, 2),
         filename: 'profile-data.json',
       });
+    } catch (ex) {
+      console.warn(`Unable to export file: ${ex.stack}`);
     }
   };
 
diff --git a/src/backend/index.js b/src/backend/index.js
index 298d06a121e7..58045bc0a23d 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -9,7 +9,7 @@ export function initBackend(
   hook: DevToolsHook,
   agent: Agent,
   global: Object
-): void {
+): () => void {
   const subs = [
     hook.sub(
       'renderer-attached',
@@ -60,20 +60,30 @@ export function initBackend(
   });
 
   // Connect any new renderers that injected themselves.
-  hook.on(
-    'renderer',
-    ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {
-      attachRenderer(id, renderer);
-    }
+  subs.push(
+    hook.sub(
+      'renderer',
+      ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {
+        attachRenderer(id, renderer);
+      }
+    )
   );
 
   hook.emit('react-devtools', agent);
   hook.reactDevtoolsAgent = agent;
-  agent.addListener('shutdown', () => {
+  const onAgentShutdown = () => {
     subs.forEach(fn => fn());
     hook.rendererInterfaces.forEach(rendererInterface => {
       rendererInterface.cleanup();
     });
     hook.reactDevtoolsAgent = null;
+  };
+  agent.addListener('shutdown', onAgentShutdown);
+  subs.push(() => {
+    agent.removeListener('shutdown', onAgentShutdown);
   });
+
+  return () => {
+    subs.forEach(fn => fn());
+  };
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4eeca128d4ac..69aa874d41fa 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -39,6 +39,7 @@ import { inspectHooksOfFiber } from './ReactDebugHooks';
 import type {
   CommitDetailsBackend,
   DevToolsHook,
+  ExportedProfilingDataFromRenderer,
   Fiber,
   FiberCommitsBackend,
   InteractionBackend,
@@ -772,25 +773,25 @@ export function attach(
     if (existingID !== undefined) {
       return existingID;
     }
-    const id = pendingStringTable.size + 1;
-    pendingStringTable.set(str, id);
+    const stringID = pendingStringTable.size + 1;
+    pendingStringTable.set(str, stringID);
     // The string table total length needs to account
     // both for the string length, and for the array item
     // that contains the length itself. Hence + 1.
     pendingStringTableLength += str.length + 1;
-    return id;
+    return stringID;
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
     const isRoot = fiber.tag === HostRoot;
-    const id = getFiberID(getPrimaryFiber(fiber));
+    const fiberID = getFiberID(getPrimaryFiber(fiber));
 
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
     if (isRoot) {
       pushOperation(TREE_OPERATION_ADD);
-      pushOperation(id);
+      pushOperation(fiberID);
       pushOperation(ElementTypeRoot);
       pushOperation(isProfilingSupported ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
@@ -809,7 +810,7 @@ export function attach(
       let displayNameStringID = getStringID(displayName);
       let keyStringID = getStringID(key);
       pushOperation(TREE_OPERATION_ADD);
-      pushOperation(id);
+      pushOperation(fiberID);
       pushOperation(elementType);
       pushOperation(parentID);
       pushOperation(ownerID);
@@ -818,7 +819,7 @@ export function attach(
     }
 
     if (isProfilingSupported) {
-      idToRootMap.set(id, currentRootID);
+      idToRootMap.set(fiberID, currentRootID);
 
       recordProfilingDurations(fiber);
     }
@@ -971,10 +972,10 @@ export function attach(
   }
 
   function recordProfilingDurations(fiber: Fiber) {
-    const id = getFiberID(getPrimaryFiber(fiber));
+    const fiberID = getFiberID(getPrimaryFiber(fiber));
     const { actualDuration, treeBaseDuration } = fiber;
 
-    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
+    idToTreeBaseDurationMap.set(fiberID, fiber.treeBaseDuration || 0);
 
     if (isProfiling) {
       const { alternate } = fiber;
@@ -989,7 +990,7 @@ export function attach(
           (fiber.treeBaseDuration || 0) * 1000
         );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
-        pushOperation(id);
+        pushOperation(fiberID);
         pushOperation(treeBaseDuration);
       }
 
@@ -1013,7 +1014,7 @@ export function attach(
           // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
           // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-          metadata.durations.push(id, actualDuration, selfDuration);
+          metadata.durations.push(fiberID, actualDuration, selfDuration);
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
             actualDuration
@@ -1990,8 +1991,8 @@ export function attach(
 
     return {
       commitIndex,
-      interactions: [],
       durations: [],
+      interactions: [],
       rootID,
     };
   }
@@ -2072,20 +2073,28 @@ export function attach(
     };
   }
 
-  function getProfilingDataForDownload(rootID: number): Object {
-    const commitDetails = [];
+  function getCommitDetailsForEachCommit(
+    rootID: number
+  ): Array<CommitDetailsBackend> {
+    const commitDetailsForEachCommit = [];
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
     );
     if (commitProfilingMetadata != null) {
       for (let index = 0; index < commitProfilingMetadata.length; index++) {
-        commitDetails.push(getCommitDetails(rootID, index));
+        commitDetailsForEachCommit.push(getCommitDetails(rootID, index));
       }
     }
+    return commitDetailsForEachCommit;
+  }
+
+  function getExportedProfilingData(
+    rootID: number
+  ): ExportedProfilingDataFromRenderer {
     return {
       version: PROFILER_EXPORT_VERSION,
       profilingSummary: getProfilingSummary(rootID),
-      commitDetails,
+      commitDetails: getCommitDetailsForEachCommit(rootID),
       interactions: getInteractions(rootID),
     };
   }
@@ -2110,14 +2119,14 @@ export function attach(
 
     const initialTreeBaseDurations = [];
     if (initialTreeBaseDurationsMap != null) {
-      initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
+      initialTreeBaseDurationsMap.forEach((treeBaseDuration, fiberID) => {
         if (
           initialIDToRootMap != null &&
-          initialIDToRootMap.get(id) === rootID
+          initialIDToRootMap.get(fiberID) === rootID
         ) {
           // We don't need to convert milliseconds to microseconds in this case,
           // because the profiling summary is JSON serialized.
-          initialTreeBaseDurations.push(id, treeBaseDuration);
+          initialTreeBaseDurations.push(fiberID, treeBaseDuration);
         }
       });
     }
@@ -2166,11 +2175,11 @@ export function attach(
 
   let forceFallbackForSuspenseIDs = new Set();
   function shouldSuspendFiberAccordingToSet(fiber) {
-    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
-    return forceFallbackForSuspenseIDs.has(id);
+    const fiberID = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    return forceFallbackForSuspenseIDs.has(fiberID);
   }
 
-  function overrideSuspense(id, forceFallback) {
+  function overrideSuspense(fiberID, forceFallback) {
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'
@@ -2180,19 +2189,19 @@ export function attach(
       );
     }
     if (forceFallback) {
-      forceFallbackForSuspenseIDs.add(id);
+      forceFallbackForSuspenseIDs.add(fiberID);
       if (forceFallbackForSuspenseIDs.size === 1) {
         // First override is added. Switch React to slower path.
         setSuspenseHandler(shouldSuspendFiberAccordingToSet);
       }
     } else {
-      forceFallbackForSuspenseIDs.delete(id);
+      forceFallbackForSuspenseIDs.delete(fiberID);
       if (forceFallbackForSuspenseIDs.size === 0) {
         // Last override is gone. Switch React back to fast path.
         setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
       }
     }
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToFiberMap.get(fiberID);
     scheduleUpdate(fiber);
   }
 
@@ -2409,7 +2418,7 @@ export function attach(
     findNativeByFiberID,
     getOwnersList,
     getPathForElement,
-    getProfilingDataForDownload,
+    getExportedProfilingData,
     getProfilingSummary,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
diff --git a/src/backend/types.js b/src/backend/types.js
index 9ec9ec70a198..4e5f3a190e6e 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -123,7 +123,7 @@ export type InteractionBackend = {|
 
 export type CommitDetailsBackend = {|
   commitIndex: number,
-  // Tuple of id, actual duration, and (computed) self duration
+  // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
   durations: Array<number>,
   interactions: Array<InteractionBackend>,
   rootID: number,
@@ -148,11 +148,19 @@ export type InteractionsBackend = {|
 export type ProfilingSummaryBackend = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
+  // An interleaved array: fiberID at [i], initialTreeBaseDuration at [i + 1].
   initialTreeBaseDurations: Array<number>,
   interactionCount: number,
   rootID: number,
 |};
 
+export type ExportedProfilingDataFromRenderer = {|
+  version: 3,
+  profilingSummary: ProfilingSummaryBackend,
+  commitDetails: Array<CommitDetailsBackend>,
+  interactions: InteractionsBackend,
+|};
+
 export type PathFrame = {|
   key: string | null,
   index: number,
@@ -180,7 +188,9 @@ export type RendererInterface = {
   getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,
   getInteractions: (rootID: number) => InteractionsBackend,
   getOwnersList: (id: number) => Array<Owner> | null,
-  getProfilingDataForDownload: (rootID: number) => Object,
+  getExportedProfilingData: (
+    rootID: number
+  ) => ExportedProfilingDataFromRenderer,
   getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object) => void,
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index ac679f570f23..61420b1bf7fc 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -20,7 +20,6 @@ import {
 } from 'src/devtools/views/Profiler/RankedChartBuilder';
 
 import type { Resource } from './cache';
-import type { Bridge } from '../types';
 import type {
   CommitDetailsBackend,
   FiberCommitsBackend,
@@ -38,6 +37,7 @@ import type {
 import type { ChartData as FlamegraphChartData } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
 import type { ChartData as InteractionsChartData } from 'src/devtools/views/Profiler/InteractionsChartBuilder';
 import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/RankedChartBuilder';
+import type { Bridge } from 'src/types';
 
 type CommitDetailsParams = {|
   commitIndex: number,
@@ -97,23 +97,24 @@ export default class ProfilingCache {
   > = createResource(
     ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
       return new Promise(resolve => {
+        const pendingKey = `${rootID}-${commitIndex}`;
         const importedProfilingData = this._store.importedProfilingData;
         if (importedProfilingData !== null) {
-          const { commitDetails } = (importedProfilingData: any);
-          if (commitDetails != null && commitIndex < commitDetails.length) {
-            const response = commitDetails[commitIndex];
-            this._pendingCommitDetailsMap.set(
-              `${response.rootID}-${commitIndex}`,
-              resolve
-            );
-            this.onCommitDetails(response);
-            return;
+          const commitDetailsByCommitIndex =
+            importedProfilingData.commitDetails;
+          if (
+            commitDetailsByCommitIndex != null &&
+            commitIndex < commitDetailsByCommitIndex.length
+          ) {
+            const commitDetails = commitDetailsByCommitIndex[commitIndex];
+            if (commitDetails != null) {
+              this._pendingCommitDetailsMap.delete(pendingKey);
+              resolve(commitDetails);
+              return;
+            }
           }
         } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingCommitDetailsMap.set(
-            `${rootID}-${commitIndex}`,
-            resolve
-          );
+          this._pendingCommitDetailsMap.set(pendingKey, resolve);
           this._bridge.send('getCommitDetails', {
             commitIndex,
             rendererID,
@@ -123,6 +124,7 @@ export default class ProfilingCache {
         }
 
         // If no profiling data was recorded for this root, skip the round trip.
+        this._pendingCommitDetailsMap.delete(pendingKey);
         resolve({
           rootID,
           commitIndex,
@@ -143,29 +145,27 @@ export default class ProfilingCache {
   > = createResource(
     ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {
       return new Promise(resolve => {
+        const pendingKey = `${rootID}-${fiberID}`;
         const importedProfilingData = this._store.importedProfilingData;
         if (importedProfilingData !== null) {
-          const { commitDetails } = (importedProfilingData: any);
-          if (commitDetails != null) {
-            const commitDurations = [];
-            commitDetails.forEach(({ durations }, commitIndex) => {
-              for (let i = 0; i < durations.length; i += 3) {
-                if (durations[i] === fiberID) {
-                  commitDurations.push(commitIndex, durations[i + 2]);
-                  break;
-                }
-              }
-            });
-            this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);
-            this.onFiberCommits({
-              commitDurations,
-              fiberID,
-              rootID,
-            });
-            return;
-          }
+          const { commitDetails } = importedProfilingData;
+          const commitDurations = [];
+          commitDetails.forEach(({ selfDurations }, commitIndex) => {
+            const selfDuration = selfDurations.get(fiberID);
+            if (selfDuration != null) {
+              commitDurations.push(commitIndex, selfDuration);
+            }
+          });
+          const fiberCommitsFrontend: FiberCommitsFrontend = {
+            commitDurations,
+            fiberID,
+            rootID,
+          };
+          this._pendingFiberCommitsMap.delete(pendingKey);
+          resolve(fiberCommitsFrontend);
+          return;
         } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);
+          this._pendingFiberCommitsMap.set(pendingKey, resolve);
           this._bridge.send('getFiberCommits', {
             fiberID,
             rendererID,
@@ -175,11 +175,13 @@ export default class ProfilingCache {
         }
 
         // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
+        this._pendingFiberCommitsMap.delete(pendingKey);
+        const fiberCommitsFrontend: FiberCommitsFrontend = {
           commitDurations: [],
           fiberID,
           rootID,
-        });
+        };
+        resolve(fiberCommitsFrontend);
       });
     },
     ({ fiberID, rendererID, rootID }: FiberCommitsParams) =>
@@ -193,16 +195,18 @@ export default class ProfilingCache {
   > = createResource(
     ({ rendererID, rootID }: InteractionsParams) => {
       return new Promise(resolve => {
+        const pendingKey = rootID;
         const importedProfilingData = this._store.importedProfilingData;
         if (importedProfilingData !== null) {
-          const { interactions } = (importedProfilingData: any);
-          if (interactions != null) {
-            this._pendingInteractionsMap.set(interactions.rootID, resolve);
-            this.onInteractions(interactions);
+          const interactionsFrontend: InteractionsFrontend =
+            importedProfilingData.interactions;
+          if (interactionsFrontend != null) {
+            this._pendingInteractionsMap.delete(pendingKey);
+            resolve(interactionsFrontend);
             return;
           }
         } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingInteractionsMap.set(rootID, resolve);
+          this._pendingInteractionsMap.set(pendingKey, resolve);
           this._bridge.send('getInteractions', {
             rendererID,
             rootID,
@@ -211,7 +215,12 @@ export default class ProfilingCache {
         }
 
         // If no profiling data was recorded for this root, skip the round trip.
-        resolve([]);
+        this._pendingInteractionsMap.delete(pendingKey);
+        const interactionsFrontend: InteractionsFrontend = {
+          interactions: [],
+          rootID,
+        };
+        resolve(interactionsFrontend);
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -224,31 +233,32 @@ export default class ProfilingCache {
   > = createResource(
     ({ rendererID, rootID }: ProfilingSummaryParams) => {
       return new Promise(resolve => {
+        const pendingKey = rootID;
         const importedProfilingData = this._store.importedProfilingData;
         if (importedProfilingData !== null) {
-          const { profilingSummary } = (importedProfilingData: any);
-          if (profilingSummary != null) {
-            this._pendingProfileSummaryMap.set(
-              profilingSummary.rootID,
-              resolve
-            );
-            this.onProfileSummary(profilingSummary);
+          const profilingSummaryFrontend: ProfilingSummaryFrontend =
+            importedProfilingData.profilingSummary;
+          if (profilingSummaryFrontend != null) {
+            this._pendingProfileSummaryMap.delete(pendingKey);
+            resolve(profilingSummaryFrontend);
             return;
           }
         } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingProfileSummaryMap.set(rootID, resolve);
+          this._pendingProfileSummaryMap.set(pendingKey, resolve);
           this._bridge.send('getProfilingSummary', { rendererID, rootID });
           return;
         }
 
         // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
+        this._pendingProfileSummaryMap.delete(pendingKey);
+        const profilingSummaryFrontend: ProfilingSummaryFrontend = {
           rootID,
           commitDurations: [],
           commitTimes: [],
           initialTreeBaseDurations: new Map(),
           interactionCount: 0,
-        });
+        };
+        resolve(profilingSummaryFrontend);
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -289,7 +299,6 @@ export default class ProfilingCache {
   getInteractionsChartData = ({
     interactions,
     profilingSummary,
-    rootID,
   }: {|
     interactions: Array<InteractionWithCommitsFrontend>,
     profilingSummary: ProfilingSummaryFrontend,
@@ -328,6 +337,8 @@ export default class ProfilingCache {
     invalidateRankedChartData();
 
     this._pendingCommitDetailsMap.clear();
+    this._pendingFiberCommitsMap.clear();
+    this._pendingInteractionsMap.clear();
     this._pendingProfileSummaryMap.clear();
   }
 
@@ -342,21 +353,23 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingCommitDetailsMap.delete(key);
 
-      const actualDurationsMap = new Map();
-      const selfDurationsMap = new Map();
+      const actualDurationsMap = new Map<number, number>();
+      const selfDurationsMap = new Map<number, number>();
       for (let i = 0; i < durations.length; i += 3) {
-        const id = durations[i];
-        actualDurationsMap.set(id, durations[i + 1]);
-        selfDurationsMap.set(id, durations[i + 2]);
+        const fiberID = durations[i];
+        actualDurationsMap.set(fiberID, durations[i + 1]);
+        selfDurationsMap.set(fiberID, durations[i + 2]);
       }
 
-      resolve({
-        rootID,
-        commitIndex,
-        actualDurations: actualDurationsMap,
-        selfDurations: selfDurationsMap,
-        interactions,
-      });
+      resolve(
+        ({
+          actualDurations: actualDurationsMap,
+          commitIndex,
+          interactions,
+          rootID,
+          selfDurations: selfDurationsMap,
+        }: CommitDetailsFrontend)
+      );
     }
   };
 
@@ -370,11 +383,13 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingFiberCommitsMap.delete(key);
 
-      resolve({
-        commitDurations,
-        fiberID,
-        rootID,
-      });
+      resolve(
+        ({
+          commitDurations,
+          fiberID,
+          rootID,
+        }: FiberCommitsFrontend)
+      );
     }
   };
 
@@ -383,7 +398,12 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingInteractionsMap.delete(rootID);
 
-      resolve(interactions);
+      resolve(
+        ({
+          interactions,
+          rootID,
+        }: InteractionsFrontend)
+      );
     }
   };
 
@@ -400,19 +420,20 @@ export default class ProfilingCache {
 
       const initialTreeBaseDurationsMap = new Map();
       for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
-        initialTreeBaseDurationsMap.set(
-          initialTreeBaseDurations[i],
-          initialTreeBaseDurations[i + 1]
-        );
+        const fiberID = initialTreeBaseDurations[i];
+        const initialTreeBaseDuration = initialTreeBaseDurations[i + 1];
+        initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
       }
 
-      resolve({
-        rootID,
-        commitDurations,
-        commitTimes,
-        initialTreeBaseDurations: initialTreeBaseDurationsMap,
-        interactionCount,
-      });
+      resolve(
+        ({
+          commitDurations,
+          commitTimes,
+          initialTreeBaseDurations: initialTreeBaseDurationsMap,
+          interactionCount,
+          rootID,
+        }: ProfilingSummaryFrontend)
+      );
     }
   };
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 8cf358b8da76..1155b6fe185d 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -715,13 +715,14 @@ export default class Store extends EventEmitter {
   ) => {
     const element = this.getElementByID(elementID);
     if (element !== null) {
-      profilingSnapshots.set(elementID, {
+      const snapshotNode: ProfilingSnapshotNode = {
         id: elementID,
         children: element.children.slice(0),
         displayName: element.displayName,
         key: element.key,
         type: element.type,
-      });
+      };
+      profilingSnapshots.set(elementID, snapshotNode);
 
       element.children.forEach(childID =>
         this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index f2ebbefce335..c9c5d3f14fb8 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -51,7 +51,7 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   } = useContext(ProfilerContext);
   const { profilingCache } = useContext(StoreContext);
 
-  const interactions = profilingCache.Interactions.read({
+  const { interactions } = profilingCache.Interactions.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 52c66a022d15..caa01dffbc04 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -6,12 +6,13 @@ import { ModalDialogContext } from '../ModalDialog';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
-import { prepareProfilingExport, prepareProfilingImport } from './utils';
+import {
+  prepareExportedProfilingSummary,
+  prepareImportedProfilingData,
+} from './utils';
 
 import styles from './ProfilingImportExportButtons.css';
 
-import type { ImportedProfilingData } from './types';
-
 export default function ProfilingImportExportButtons() {
   const bridge = useContext(BridgeContext);
   const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(
@@ -28,15 +29,13 @@ export default function ProfilingImportExportButtons() {
       return;
     }
 
-    bridge.send(
-      'exportProfilingSummary',
-      prepareProfilingExport(
-        store.profilingOperations,
-        store.profilingSnapshots,
-        rootID,
-        rendererID
-      )
+    const exportedProfilingSummary = prepareExportedProfilingSummary(
+      store.profilingOperations,
+      store.profilingSnapshots,
+      rootID,
+      rendererID
     );
+    bridge.send('exportProfilingSummary', exportedProfilingSummary);
   }, [
     bridge,
     rendererID,
@@ -58,9 +57,7 @@ export default function ProfilingImportExportButtons() {
       fileReader.addEventListener('load', () => {
         try {
           const raw = ((fileReader.result: any): string);
-          const data = prepareProfilingImport(raw);
-
-          store.importedProfilingData = ((data: any): ImportedProfilingData);
+          store.importedProfilingData = prepareImportedProfilingData(raw);
         } catch (error) {
           modalDialogDispatch({
             type: 'SHOW',
@@ -76,6 +73,7 @@ export default function ProfilingImportExportButtons() {
           });
         }
       });
+      // TODO (profiling) Handle fileReader errors.
       fileReader.readAsText(input.files[0]);
     }
   }, [modalDialogDispatch, store]);
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 992a815c4906..574c29141d48 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -25,7 +25,7 @@ export default function SidebarInteractions(_: Props) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const interactions = profilingCache.Interactions.read({
+  const { interactions } = profilingCache.Interactions.read({
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 0e50fa2d4f5a..7457973c3060 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -1,6 +1,11 @@
 // @flow
 
 import type { ElementType } from 'src/types';
+import type {
+  CommitDetailsBackend,
+  InteractionsBackend,
+  ProfilingSummaryBackend,
+} from 'src/backend/types';
 
 export type CommitTreeNodeFrontend = {|
   id: number,
@@ -28,14 +33,17 @@ export type InteractionWithCommitsFrontend = {|
   commits: Array<number>,
 |};
 
-export type InteractionsFrontend = Array<InteractionWithCommitsFrontend>;
+export type InteractionsFrontend = {|
+  interactions: Array<InteractionWithCommitsFrontend>,
+  rootID: number,
+|};
 
 export type CommitDetailsFrontend = {|
-  rootID: number,
-  commitIndex: number,
   actualDurations: Map<number, number>,
-  selfDurations: Map<number, number>,
+  commitIndex: number,
   interactions: Array<InteractionFrontend>,
+  rootID: number,
+  selfDurations: Map<number, number>,
 |};
 
 export type FiberCommitsFrontend = {|
@@ -68,10 +76,34 @@ export type ProfilingSnapshotNode = {|
 |};
 
 export type ImportedProfilingData = {|
-  version: number,
+  version: 3,
   profilingOperations: Map<number, Array<Uint32Array>>,
   profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
-  commitDetails: CommitDetailsFrontend,
+  commitDetails: Array<CommitDetailsFrontend>,
   interactions: InteractionsFrontend,
   profilingSummary: ProfilingSummaryFrontend,
 |};
+
+export type SerializableProfilingDataOperationsByRootID = Array<
+  [number, Array<Array<number>>]
+>;
+export type SerializableProfilingDataSnapshotsByRootID = Array<
+  [number, Array<[number, ProfilingSnapshotNode]>]
+>;
+
+export type ExportedProfilingSummaryFromFrontend = {|
+  version: 3,
+  profilingOperationsByRootID: SerializableProfilingDataOperationsByRootID,
+  profilingSnapshotsByRootID: SerializableProfilingDataSnapshotsByRootID,
+  rendererID: number,
+  rootID: number,
+|};
+
+export type ExportedProfilingData = {|
+  version: 3,
+  profilingOperationsByRootID: SerializableProfilingDataOperationsByRootID,
+  profilingSnapshotsByRootID: SerializableProfilingDataSnapshotsByRootID,
+  commitDetails: Array<CommitDetailsBackend>,
+  interactions: InteractionsBackend,
+  profilingSummary: ProfilingSummaryBackend,
+|};
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index b1c6a27a30c3..9ec8b1829212 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -2,7 +2,14 @@
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
 
-import type { ProfilingSnapshotNode } from './types';
+import type {
+  ExportedProfilingSummaryFromFrontend,
+  ExportedProfilingData,
+  ImportedProfilingData,
+  ProfilingSnapshotNode,
+} from './types';
+
+import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -17,7 +24,7 @@ const commitGradient = [
   'var(--color-commit-gradient-9)',
 ];
 
-export const prepareProfilingExport = (
+export const prepareExportedProfilingSummary = (
   profilingOperations: Map<number, Array<Uint32Array>>,
   profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
   rendererID: number,
@@ -26,45 +33,142 @@ export const prepareProfilingExport = (
   const profilingOperationsForRoot = [];
   const operations = profilingOperations.get(rootID);
   if (operations != null) {
-    operations.forEach(operations => {
-      // Convert typed Array before JSON serialization, or it will be converted to an Object.
-      profilingOperationsForRoot.push(Array.from<number>(operations));
+    operations.forEach(operationsTypedArray => {
+      // Convert typed array to plain array before JSON serialization, or it will be converted to an Object.
+      const operationsPlainArray = Array.from(operationsTypedArray);
+      profilingOperationsForRoot.push(operationsPlainArray);
     });
   }
 
-  // Convert Map to Object or JSON.stringify will clobber the contents.
-  const profilingSnapshotsForRoot = {};
+  // Convert Map to Array of key-value pairs or JSON.stringify will clobber the contents.
+  const profilingSnapshotsForRoot = [];
   const profilingSnapshotsMap = profilingSnapshots.get(rootID);
   if (profilingSnapshotsMap != null) {
-    for (let [id, snapshot] of profilingSnapshotsMap.entries()) {
-      profilingSnapshotsForRoot[id] = snapshot;
+    for (const [elementID, snapshotNode] of profilingSnapshotsMap.entries()) {
+      profilingSnapshotsForRoot.push([elementID, snapshotNode]);
     }
   }
 
-  return {
-    profilingOperations: profilingOperationsForRoot,
-    profilingSnapshots: profilingSnapshotsForRoot,
+  const exportedProfilingSummary: ExportedProfilingSummaryFromFrontend = {
+    version: PROFILER_EXPORT_VERSION,
+    profilingOperationsByRootID: [[rootID, profilingOperationsForRoot]],
+    profilingSnapshotsByRootID: [[rootID, profilingSnapshotsForRoot]],
     rendererID,
     rootID,
   };
+  return exportedProfilingSummary;
 };
 
-export const prepareProfilingImport = (raw: string) => {
-  const parsed = JSON.parse(raw);
+export const prepareExportedProfilingData = (
+  exportedProfilingDataFromRenderer: ExportedProfilingDataFromRenderer,
+  exportedProfilingSummary: ExportedProfilingSummaryFromFrontend
+): ExportedProfilingData => {
+  if (exportedProfilingDataFromRenderer.version !== PROFILER_EXPORT_VERSION) {
+    throw new Error(
+      `Unsupported profiling data version ${
+        exportedProfilingDataFromRenderer.version
+      } from renderer with id "${exportedProfilingSummary.rendererID}"`
+    );
+  }
+  if (exportedProfilingSummary.version !== PROFILER_EXPORT_VERSION) {
+    throw new Error(
+      `Unsupported profiling summary version ${
+        exportedProfilingSummary.version
+      } from renderer with id "${exportedProfilingSummary.rendererID}"`
+    );
+  }
+  const exportedProfilingData: ExportedProfilingData = {
+    version: PROFILER_EXPORT_VERSION,
+    profilingSummary: exportedProfilingDataFromRenderer.profilingSummary,
+    commitDetails: exportedProfilingDataFromRenderer.commitDetails,
+    interactions: exportedProfilingDataFromRenderer.interactions,
+    profilingOperationsByRootID:
+      exportedProfilingSummary.profilingOperationsByRootID,
+    profilingSnapshotsByRootID:
+      exportedProfilingSummary.profilingSnapshotsByRootID,
+  };
+  return exportedProfilingData;
+};
+
+/**
+ * This function should mirror `prepareExportedProfilingData` and `prepareExportedProfilingSummary`.
+ */
+export const prepareImportedProfilingData = (
+  exportedProfilingDataJsonString: string
+) => {
+  const parsed = JSON.parse(exportedProfilingDataJsonString);
 
   if (parsed.version !== PROFILER_EXPORT_VERSION) {
     throw Error(`Unsupported profiler export version "${parsed.version}".`);
   }
 
-  const entries = [];
-  Object.values(parsed.profilingSnapshots).forEach(snapshot => {
-    entries.push([(snapshot: any).id, snapshot]);
-  });
+  // Some "exported" types in `parsed` are `...Backend`, see `prepareExportedProfilingData`,
+  // they come to `ExportedProfilingData` from `ExportedProfilingDataFromRenderer`.
+  // But the "imported" types in `ImportedProfilingData` are `...Frontend`,
+  // and some of them aren't exactly the same as `...Backend` (i.e. an interleaved array versus a map).
+  // The type annotations here help us to spot the incompatibilities and properly convert.
+
+  const exportedProfilingData: ExportedProfilingData = parsed;
 
-  const rootID = parsed.profilingSummary.rootID;
-  parsed.profilingOperations = new Map([[rootID, parsed.profilingOperations]]);
-  parsed.profilingSnapshots = new Map([[rootID, new Map(entries)]]);
-  return parsed;
+  const profilingSummaryExported = exportedProfilingData.profilingSummary;
+  const initialTreeBaseDurations =
+    profilingSummaryExported.initialTreeBaseDurations;
+  const initialTreeBaseDurationsMap = new Map();
+  for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
+    const fiberID = initialTreeBaseDurations[i];
+    const initialTreeBaseDuration = initialTreeBaseDurations[i + 1];
+    initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
+  }
+
+  const importedProfilingData: ImportedProfilingData = {
+    version: parsed.version,
+    profilingOperations: new Map(
+      exportedProfilingData.profilingOperationsByRootID.map(
+        ([rootID, profilingOperationsForRoot]) => [
+          rootID,
+          profilingOperationsForRoot.map(operations =>
+            Uint32Array.from(operations)
+          ),
+        ]
+      )
+    ),
+    profilingSnapshots: new Map(
+      exportedProfilingData.profilingSnapshotsByRootID.map(
+        ([rootID, profilingSnapshotsForRoot]) => [
+          rootID,
+          new Map(profilingSnapshotsForRoot),
+        ]
+      )
+    ),
+    commitDetails: exportedProfilingData.commitDetails.map(
+      commitDetailsBackendItem => {
+        const durations = commitDetailsBackendItem.durations;
+        const actualDurationsMap = new Map<number, number>();
+        const selfDurationsMap = new Map<number, number>();
+        for (let i = 0; i < durations.length; i += 3) {
+          const fiberID = durations[i];
+          actualDurationsMap.set(fiberID, durations[i + 1]);
+          selfDurationsMap.set(fiberID, durations[i + 2]);
+        }
+        return {
+          actualDurations: actualDurationsMap,
+          selfDurations: selfDurationsMap,
+          commitIndex: commitDetailsBackendItem.commitIndex,
+          interactions: commitDetailsBackendItem.interactions,
+          rootID: commitDetailsBackendItem.rootID,
+        };
+      }
+    ),
+    interactions: exportedProfilingData.interactions,
+    profilingSummary: {
+      rootID: profilingSummaryExported.rootID,
+      commitDurations: profilingSummaryExported.commitDurations,
+      commitTimes: profilingSummaryExported.commitTimes,
+      initialTreeBaseDurations: initialTreeBaseDurationsMap,
+      interactionCount: profilingSummaryExported.interactionCount,
+    },
+  };
+  return importedProfilingData;
 };
 
 export const getGradientColor = (value: number) => {

From 6fd2e72b5e06358ebe6ab719edbbde2a1845ce4a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 May 2019 11:01:41 -0700
Subject: [PATCH 591/814] Minor nits

---
 src/__tests__/setupTests.js    | 54 +++++++++------------
 src/__tests__/utils.js         |  6 +--
 src/backend/agent.js           |  4 +-
 src/backend/renderer.js        | 45 ++++++++---------
 src/devtools/ProfilingCache.js | 88 ++++++++++++++++------------------
 5 files changed, 87 insertions(+), 110 deletions(-)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index c259d8d43428..2cd71ae731a9 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -31,43 +31,33 @@ env.beforeEach(() => {
 
   installHook(global);
 
-  function init() {
-    const bridgeListeners = [];
-    const bridge = new Bridge({
-      listen(callback) {
-        bridgeListeners.push(callback);
-        return () => {
-          const index = bridgeListeners.indexOf(callback);
-          if (index >= 0) {
-            bridgeListeners.splice(index, 1);
-          }
-        };
-      },
-      send(event: string, payload: any, transferable?: Array<any>) {
-        bridgeListeners.forEach(callback => callback({ event, payload }));
-      },
-    });
+  const bridgeListeners = [];
+  const bridge = new Bridge({
+    listen(callback) {
+      bridgeListeners.push(callback);
+      return () => {
+        const index = bridgeListeners.indexOf(callback);
+        if (index >= 0) {
+          bridgeListeners.splice(index, 1);
+        }
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      bridgeListeners.forEach(callback => callback({ event, payload }));
+    },
+  });
 
-    const agent = new Agent(bridge);
+  const agent = new Agent(bridge);
 
-    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
-    const destroyBackend = initBackend(hook, agent, global);
+  initBackend(hook, agent, global);
 
-    const store = new Store(bridge);
+  const store = new Store(bridge);
 
-    global.agent = agent;
-    global.bridge = bridge;
-    global.store = store;
-
-    // Reinit may be used to reset the store and the bridge during a test.
-    global.reinit = () => {
-      destroyBackend();
-      init();
-    };
-  }
-
-  init();
+  global.agent = agent;
+  global.bridge = bridge;
+  global.store = store;
 });
 env.afterEach(() => {
   delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 06b18d05984e..20d7bb511c7c 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -139,7 +139,7 @@ export function exportImportHelper(
   rendererID: number,
   rootID: number
 ): void {
-  const utils = require('./utils');
+  const { act } = require('./utils');
   const {
     prepareExportedProfilingSummary,
     prepareImportedProfilingData,
@@ -153,7 +153,7 @@ export function exportImportHelper(
   };
   bridge.addListener('exportFile', onExportFile);
 
-  utils.act(() => {
+  act(() => {
     const exportProfilingSummary = prepareExportedProfilingSummary(
       store.profilingOperations,
       store.profilingSnapshots,
@@ -183,7 +183,7 @@ export function exportImportHelper(
   // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
   expect(importedProfilingData).toMatchSnapshot('imported data');
 
-  utils.act(() => {
+  act(() => {
     store.importedProfilingData = importedProfilingData;
   });
 }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 701d4dff79bc..097ad00827d2 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -175,8 +175,8 @@ export default class Agent extends EventEmitter {
         contents: JSON.stringify(exportedProfilingData, null, 2),
         filename: 'profile-data.json',
       });
-    } catch (ex) {
-      console.warn(`Unable to export file: ${ex.stack}`);
+    } catch (error) {
+      console.warn(`Unable to export file: ${error.stack}`);
     }
   };
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 69aa874d41fa..c45240e60d02 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -784,14 +784,14 @@ export function attach(
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
     const isRoot = fiber.tag === HostRoot;
-    const fiberID = getFiberID(getPrimaryFiber(fiber));
+    const id = getFiberID(getPrimaryFiber(fiber));
 
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
     if (isRoot) {
       pushOperation(TREE_OPERATION_ADD);
-      pushOperation(fiberID);
+      pushOperation(id);
       pushOperation(ElementTypeRoot);
       pushOperation(isProfilingSupported ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
@@ -810,7 +810,7 @@ export function attach(
       let displayNameStringID = getStringID(displayName);
       let keyStringID = getStringID(key);
       pushOperation(TREE_OPERATION_ADD);
-      pushOperation(fiberID);
+      pushOperation(id);
       pushOperation(elementType);
       pushOperation(parentID);
       pushOperation(ownerID);
@@ -819,7 +819,7 @@ export function attach(
     }
 
     if (isProfilingSupported) {
-      idToRootMap.set(fiberID, currentRootID);
+      idToRootMap.set(id, currentRootID);
 
       recordProfilingDurations(fiber);
     }
@@ -972,10 +972,10 @@ export function attach(
   }
 
   function recordProfilingDurations(fiber: Fiber) {
-    const fiberID = getFiberID(getPrimaryFiber(fiber));
+    const id = getFiberID(getPrimaryFiber(fiber));
     const { actualDuration, treeBaseDuration } = fiber;
 
-    idToTreeBaseDurationMap.set(fiberID, fiber.treeBaseDuration || 0);
+    idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
 
     if (isProfiling) {
       const { alternate } = fiber;
@@ -990,7 +990,7 @@ export function attach(
           (fiber.treeBaseDuration || 0) * 1000
         );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
-        pushOperation(fiberID);
+        pushOperation(id);
         pushOperation(treeBaseDuration);
       }
 
@@ -1014,7 +1014,7 @@ export function attach(
           // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
           // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
           const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
-          metadata.durations.push(fiberID, actualDuration, selfDuration);
+          metadata.durations.push(id, actualDuration, selfDuration);
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
             actualDuration
@@ -2073,9 +2073,9 @@ export function attach(
     };
   }
 
-  function getCommitDetailsForEachCommit(
+  function getExportedProfilingData(
     rootID: number
-  ): Array<CommitDetailsBackend> {
+  ): ExportedProfilingDataFromRenderer {
     const commitDetailsForEachCommit = [];
     const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
       rootID
@@ -2085,16 +2085,11 @@ export function attach(
         commitDetailsForEachCommit.push(getCommitDetails(rootID, index));
       }
     }
-    return commitDetailsForEachCommit;
-  }
 
-  function getExportedProfilingData(
-    rootID: number
-  ): ExportedProfilingDataFromRenderer {
     return {
       version: PROFILER_EXPORT_VERSION,
       profilingSummary: getProfilingSummary(rootID),
-      commitDetails: getCommitDetailsForEachCommit(rootID),
+      commitDetails: commitDetailsForEachCommit,
       interactions: getInteractions(rootID),
     };
   }
@@ -2119,14 +2114,14 @@ export function attach(
 
     const initialTreeBaseDurations = [];
     if (initialTreeBaseDurationsMap != null) {
-      initialTreeBaseDurationsMap.forEach((treeBaseDuration, fiberID) => {
+      initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
         if (
           initialIDToRootMap != null &&
-          initialIDToRootMap.get(fiberID) === rootID
+          initialIDToRootMap.get(id) === rootID
         ) {
           // We don't need to convert milliseconds to microseconds in this case,
           // because the profiling summary is JSON serialized.
-          initialTreeBaseDurations.push(fiberID, treeBaseDuration);
+          initialTreeBaseDurations.push(id, treeBaseDuration);
         }
       });
     }
@@ -2175,11 +2170,11 @@ export function attach(
 
   let forceFallbackForSuspenseIDs = new Set();
   function shouldSuspendFiberAccordingToSet(fiber) {
-    const fiberID = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
-    return forceFallbackForSuspenseIDs.has(fiberID);
+    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    return forceFallbackForSuspenseIDs.has(id);
   }
 
-  function overrideSuspense(fiberID, forceFallback) {
+  function overrideSuspense(id, forceFallback) {
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'
@@ -2189,19 +2184,19 @@ export function attach(
       );
     }
     if (forceFallback) {
-      forceFallbackForSuspenseIDs.add(fiberID);
+      forceFallbackForSuspenseIDs.add(id);
       if (forceFallbackForSuspenseIDs.size === 1) {
         // First override is added. Switch React to slower path.
         setSuspenseHandler(shouldSuspendFiberAccordingToSet);
       }
     } else {
-      forceFallbackForSuspenseIDs.delete(fiberID);
+      forceFallbackForSuspenseIDs.delete(id);
       if (forceFallbackForSuspenseIDs.size === 0) {
         // Last override is gone. Switch React back to fast path.
         setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
       }
     }
-    const fiber = idToFiberMap.get(fiberID);
+    const fiber = idToFiberMap.get(id);
     scheduleUpdate(fiber);
   }
 
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index 61420b1bf7fc..fe40d7e0b34c 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -123,8 +123,9 @@ export default class ProfilingCache {
           return;
         }
 
-        // If no profiling data was recorded for this root, skip the round trip.
         this._pendingCommitDetailsMap.delete(pendingKey);
+
+        // If no profiling data was recorded for this root, skip the round trip.
         resolve({
           rootID,
           commitIndex,
@@ -156,13 +157,12 @@ export default class ProfilingCache {
               commitDurations.push(commitIndex, selfDuration);
             }
           });
-          const fiberCommitsFrontend: FiberCommitsFrontend = {
+          this._pendingFiberCommitsMap.delete(pendingKey);
+          resolve({
             commitDurations,
             fiberID,
             rootID,
-          };
-          this._pendingFiberCommitsMap.delete(pendingKey);
-          resolve(fiberCommitsFrontend);
+          });
           return;
         } else if (this._store.profilingOperations.has(rootID)) {
           this._pendingFiberCommitsMap.set(pendingKey, resolve);
@@ -174,14 +174,14 @@ export default class ProfilingCache {
           return;
         }
 
-        // If no profiling data was recorded for this root, skip the round trip.
         this._pendingFiberCommitsMap.delete(pendingKey);
-        const fiberCommitsFrontend: FiberCommitsFrontend = {
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
           commitDurations: [],
           fiberID,
           rootID,
-        };
-        resolve(fiberCommitsFrontend);
+        });
       });
     },
     ({ fiberID, rendererID, rootID }: FiberCommitsParams) =>
@@ -214,13 +214,13 @@ export default class ProfilingCache {
           return;
         }
 
-        // If no profiling data was recorded for this root, skip the round trip.
         this._pendingInteractionsMap.delete(pendingKey);
-        const interactionsFrontend: InteractionsFrontend = {
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
           interactions: [],
           rootID,
-        };
-        resolve(interactionsFrontend);
+        });
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -249,16 +249,16 @@ export default class ProfilingCache {
           return;
         }
 
-        // If no profiling data was recorded for this root, skip the round trip.
         this._pendingProfileSummaryMap.delete(pendingKey);
-        const profilingSummaryFrontend: ProfilingSummaryFrontend = {
+
+        // If no profiling data was recorded for this root, skip the round trip.
+        resolve({
           rootID,
           commitDurations: [],
           commitTimes: [],
           initialTreeBaseDurations: new Map(),
           interactionCount: 0,
-        };
-        resolve(profilingSummaryFrontend);
+        });
       });
     },
     ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
@@ -361,15 +361,13 @@ export default class ProfilingCache {
         selfDurationsMap.set(fiberID, durations[i + 2]);
       }
 
-      resolve(
-        ({
-          actualDurations: actualDurationsMap,
-          commitIndex,
-          interactions,
-          rootID,
-          selfDurations: selfDurationsMap,
-        }: CommitDetailsFrontend)
-      );
+      resolve({
+        actualDurations: actualDurationsMap,
+        commitIndex,
+        interactions,
+        rootID,
+        selfDurations: selfDurationsMap,
+      });
     }
   };
 
@@ -383,13 +381,11 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingFiberCommitsMap.delete(key);
 
-      resolve(
-        ({
-          commitDurations,
-          fiberID,
-          rootID,
-        }: FiberCommitsFrontend)
-      );
+      resolve({
+        commitDurations,
+        fiberID,
+        rootID,
+      });
     }
   };
 
@@ -398,12 +394,10 @@ export default class ProfilingCache {
     if (resolve != null) {
       this._pendingInteractionsMap.delete(rootID);
 
-      resolve(
-        ({
-          interactions,
-          rootID,
-        }: InteractionsFrontend)
-      );
+      resolve({
+        interactions,
+        rootID,
+      });
     }
   };
 
@@ -425,15 +419,13 @@ export default class ProfilingCache {
         initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
       }
 
-      resolve(
-        ({
-          commitDurations,
-          commitTimes,
-          initialTreeBaseDurations: initialTreeBaseDurationsMap,
-          interactionCount,
-          rootID,
-        }: ProfilingSummaryFrontend)
-      );
+      resolve({
+        commitDurations,
+        commitTimes,
+        initialTreeBaseDurations: initialTreeBaseDurationsMap,
+        interactionCount,
+        rootID,
+      });
     }
   };
 }

From f10a6b379ca2de83bb46ee17a267d3e478776fc1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 May 2019 14:15:14 -0700
Subject: [PATCH 592/814] Improve scanning Profiler chart for deep renders

---
 .../profilingCharts-test.js.snap              |  7 ++++++
 src/devtools/views/Profiler/ChartNode.js      |  6 ++++-
 .../views/Profiler/CommitFlamegraph.css       |  5 ++++
 .../views/Profiler/CommitFlamegraph.js        | 23 +++++++++++++++++--
 .../Profiler/CommitFlamegraphListItem.js      | 10 ++++++--
 .../views/Profiler/FlamegraphChartBuilder.js  | 21 +++++++++++++++++
 .../views/Profiler/InteractionListItem.css    |  6 +++--
 .../views/Profiler/SnapshotCommitListItem.css |  3 ++-
 .../views/Settings/SettingsContext.js         | 21 ++++++++++++++++-
 src/devtools/views/root.css                   | 10 ++++++--
 10 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 9da03f593571..043ac17f80c8 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -70,6 +70,10 @@ Object {
     3 => 2,
   },
   "maxSelfDuration": 10,
+  "renderPathNodes": Set {
+    1,
+    3,
+  },
   "rows": Array [
     Array [
       Object {
@@ -189,6 +193,9 @@ Object {
     3 => 2,
   },
   "maxSelfDuration": 10,
+  "renderPathNodes": Set {
+    1,
+  },
   "rows": Array [
     Array [
       Object {
diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
index b739434e637d..121f46ecb281 100644
--- a/src/devtools/views/Profiler/ChartNode.js
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -13,6 +13,7 @@ type Props = {|
   onClick: (event: SyntheticMouseEvent<*>) => mixed,
   onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
   placeLabelAboveNode?: boolean,
+  textStyle?: Object,
   width: number,
   x: number,
   y: number,
@@ -27,6 +28,7 @@ export default function ChartNode({
   label,
   onClick,
   onDoubleClick,
+  textStyle,
   width,
   x,
   y,
@@ -57,7 +59,9 @@ export default function ChartNode({
           }}
           y={height < textHeight ? -textHeight : 0}
         >
-          <div className={styles.Div}>{label}</div>
+          <div className={styles.Div} style={textStyle}>
+            {label}
+          </div>
         </foreignObject>
       )}
     </g>
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.css b/src/devtools/views/Profiler/CommitFlamegraph.css
index bc441e485e1f..d9ab14ef3cbe 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.css
+++ b/src/devtools/views/Profiler/CommitFlamegraph.css
@@ -3,3 +3,8 @@
   height: 100%;
   padding: 0.5rem;
 }
+
+.PatternPath {
+  stroke: var(--color-commit-did-not-render-pattern);
+  stroke-width: 1;
+}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 881da0e77bc2..982722415283 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
@@ -152,7 +152,7 @@ function CommitFlamegraph({
   return (
     <FixedSizeList
       height={height}
-      innerElementType="svg"
+      innerElementType={InnerElementType}
       itemCount={chartData.depth}
       itemData={itemData}
       itemSize={barHeight}
@@ -162,3 +162,22 @@ function CommitFlamegraph({
     </FixedSizeList>
   );
 }
+
+const InnerElementType = forwardRef(({ children, ...rest }, ref) => (
+  <svg ref={ref} {...rest}>
+    <defs>
+      <pattern
+        id="didNotRenderPattern"
+        patternUnits="userSpaceOnUse"
+        width="4"
+        height="4"
+      >
+        <path
+          d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
+          className={styles.PatternPath}
+        />
+      </pattern>
+    </defs>
+    {children}
+  </svg>
+));
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index b5829d11e378..d5bc61454296 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -23,7 +23,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
     selectFiber,
     width,
   } = data;
-  const { maxSelfDuration, rows } = chartData;
+  const { renderPathNodes, maxSelfDuration, rows } = chartData;
 
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
@@ -76,9 +76,14 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
           return null;
         }
 
-        let color = 'var(--color-commit-did-not-render)';
+        let color = 'url(#didNotRenderPattern)';
+        let textColor = 'var(--color-commit-did-not-render-pattern-text)';
         if (didRender) {
           color = getGradientColor(selfDuration / maxSelfDuration);
+          textColor = 'var(--color-commit-gradient-text)';
+        } else if (renderPathNodes.has(id)) {
+          color = 'var(--color-commit-did-not-render-fill)';
+          textColor = 'var(--color-commit-did-not-render-fill-text)';
         }
 
         return (
@@ -89,6 +94,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
             key={id}
             label={label}
             onClick={event => handleClick(event, id, name)}
+            textStyle={{ color: textColor }}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}
             y={top}
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index be52349fb35e..994a08c77764 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -21,6 +21,7 @@ export type ChartData = {|
   depth: number,
   idToDepthMap: Map<number, number>,
   maxSelfDuration: number,
+  renderPathNodes: Set<number>,
   rows: Array<Array<ChartNode>>,
 |};
 
@@ -44,6 +45,7 @@ export function getChartData({
   }
 
   const idToDepthMap: Map<number, number> = new Map();
+  const renderPathNodes: Set<number> = new Set();
   const rows: Array<Array<ChartNode>> = [];
 
   let maxDepth = 0;
@@ -129,11 +131,30 @@ export function getChartData({
     walkTree(id, baseDuration, 1);
   }
 
+  actualDurations.forEach((duration, id) => {
+    const node = nodes.get(id);
+    if (node != null) {
+      let currentID = node.parentID;
+      while (currentID !== 0) {
+        if (renderPathNodes.has(currentID)) {
+          // We've already walked this path; we can skip it.
+          break;
+        } else {
+          renderPathNodes.add(currentID);
+        }
+
+        const node = nodes.get(currentID);
+        currentID = node != null ? node.parentID : 0;
+      }
+    }
+  });
+
   const chartData = {
     baseDuration,
     depth: maxDepth,
     idToDepthMap,
     maxSelfDuration,
+    renderPathNodes,
     rows,
   };
 
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
index 6d354ca0157e..62784d3333dc 100644
--- a/src/devtools/views/Profiler/InteractionListItem.css
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -28,7 +28,8 @@
 .InteractionLine {
   position: absolute;
   height: 3px;
-  background-color: var(--color-commit-did-not-render);
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
   border-radius: 0.125rem;
 }
 
@@ -36,6 +37,7 @@
   position: absolute;
   width: var(--interaction-commit-size);
   height: var(--interaction-commit-size);
-  background-color: var(--color-commit-did-not-render);
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
   cursor: pointer;
 }
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.css b/src/devtools/views/Profiler/SnapshotCommitListItem.css
index e017a26c142c..dc6592a93170 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.css
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -11,5 +11,6 @@
 .Inner {
   width: 100%;
   min-height: 5px;
-  background-color: var(--color-commit-did-not-render);
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 9d6c32dbb317..17194aaa0392 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -214,7 +214,26 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-button-disabled', documentElements);
   updateStyleHelper(theme, 'color-button-focus', documentElements);
   updateStyleHelper(theme, 'color-button-hover', documentElements);
-  updateStyleHelper(theme, 'color-commit-did-not-render', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-fill',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-fill-text',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-pattern',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-pattern-text',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
   updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
   updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 16d1387a827b..cc6c6281062d 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -19,7 +19,10 @@
   --light-color-button-focus: #23272f;
   --light-color-button-hover: #23272f;
   --light-color-border: #eeeeee;
-  --light-color-commit-did-not-render: #cfd1d5;
+  --light-color-commit-did-not-render-fill: #cfd1d5;
+  --light-color-commit-did-not-render-fill-text: #000000;
+  --light-color-commit-did-not-render-pattern: #cfd1d5;
+  --light-color-commit-did-not-render-pattern-text: #000000;
   --light-color-commit-gradient-0: #37afa9;
   --light-color-commit-gradient-1: #63b19e;
   --light-color-commit-gradient-2: #80b393;
@@ -73,7 +76,10 @@
   --dark-color-button-focus: #a2e9fc;
   --dark-color-button-hover: #ededed;
   --dark-color-border: #3d424a;
-  --dark-color-commit-did-not-render: #777d88;
+  --dark-color-commit-did-not-render-fill: #777d88;
+  --dark-color-commit-did-not-render-fill-text: #000000;
+  --dark-color-commit-did-not-render-pattern: #666c77;
+  --dark-color-commit-did-not-render-pattern-text: #ffffff;
   --dark-color-commit-gradient-0: #37afa9;
   --dark-color-commit-gradient-1: #63b19e;
   --dark-color-commit-gradient-2: #80b393;

From 1e025edb9a91fcd7facfb3c58fd9ba808515e50a Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Fri, 17 May 2019 09:35:10 -0300
Subject: [PATCH 593/814] Fix undefined chart node when switching commits in
 profiler

---
 src/devtools/views/Profiler/CommitFlamegraph.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 982722415283..091fd96b6187 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -123,9 +123,13 @@ function CommitFlamegraph({
   const selectedChartNode = useMemo(() => {
     let chartNode = null;
     if (selectedFiberID !== null) {
-      chartNode = ((chartData.rows[selectedChartNodeIndex].find(
+      const foundChartNode = chartData.rows[selectedChartNodeIndex].find(
         chartNode => chartNode.id === selectedFiberID
-      ): any): ChartNode);
+      );
+
+      if (foundChartNode !== undefined) {
+        chartNode = foundChartNode;
+      }
     }
     return chartNode;
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);

From 146fd2ad3db817cb24585cda6a26c71504567107 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 17 May 2019 07:54:07 -0700
Subject: [PATCH 594/814] Fixed snapshot diff

---
 src/__tests__/__snapshots__/profilingCharts-test.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 043ac17f80c8..fb8003ce2370 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -72,7 +72,7 @@ Object {
   "maxSelfDuration": 10,
   "renderPathNodes": Set {
     1,
-    3,
+    2,
   },
   "rows": Array [
     Array [

From 9a6a19456f0e07a9f308b079ad7245ca627a4f59 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 May 2019 15:36:14 -0700
Subject: [PATCH 595/814] Show commit priority levels in Profiler UI

---
 shells/dev/app/PriorityLevels/index.js        | 29 ++++++++++++++++
 shells/dev/app/index.js                       | 11 ++++--
 .../__snapshots__/profiling-test.js.snap      | 19 +++++++++++
 src/backend/renderer.js                       |  8 ++++-
 src/backend/types.js                          | 22 ++++++++++--
 src/devtools/ProfilingCache.js                |  5 ++-
 .../views/Profiler/SidebarCommitInfo.js       | 12 +++++--
 src/devtools/views/Profiler/types.js          |  2 ++
 src/devtools/views/Profiler/utils.js          | 34 +++++++++++++++++--
 src/hook.js                                   |  4 +--
 10 files changed, 134 insertions(+), 12 deletions(-)
 create mode 100644 shells/dev/app/PriorityLevels/index.js

diff --git a/shells/dev/app/PriorityLevels/index.js b/shells/dev/app/PriorityLevels/index.js
new file mode 100644
index 000000000000..dec47e1fc98b
--- /dev/null
+++ b/shells/dev/app/PriorityLevels/index.js
@@ -0,0 +1,29 @@
+// @flow
+
+import React, { Fragment, useCallback, useState } from 'react';
+import { unstable_next as next } from 'scheduler';
+
+export default function PriorityLevels() {
+  const [count, setCount] = useState(0);
+
+  const startSequence = useCallback(() => {
+    setCount(1);
+    next(() => setCount(2));
+  }, []);
+
+  return (
+    <Fragment>
+      <h1>Priority Levels</h1>
+      <button onClick={startSequence}>start sequence</button>
+      {count >= 1 && <Text>One</Text>}
+      {count >= 2 && <Text>Two</Text>}
+      {count >= 2 && (
+        <div hidden>
+          <Text>Three</Text>
+        </div>
+      )}
+    </Fragment>
+  );
+}
+
+const Text = ({ children }) => children;
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 3a76db783f50..5c87e51a8c2b 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -3,12 +3,17 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import { createElement } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import {
+  unmountComponentAtNode,
+  // $FlowFixMe Flow does not yet know about createRoot()
+  unstable_createRoot as createRoot,
+} from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
+import PriorityLevels from './PriorityLevels';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
@@ -24,7 +29,8 @@ function mountHelper(App) {
 
   containers.push(container);
 
-  render(createElement(App), container);
+  const root = createRoot(container);
+  root.render(createElement(App));
 }
 
 function mountTestApp() {
@@ -33,6 +39,7 @@ function mountTestApp() {
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(PriorityLevels);
   mountHelper(Toggle);
   mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);
diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index c76f53d51edc..524d7db2a9f9 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -11,6 +11,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -33,6 +34,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -53,6 +55,7 @@ Object {
   },
   "commitIndex": 2,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -70,6 +73,7 @@ Object {
   },
   "commitIndex": 3,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     2 => 10,
@@ -91,6 +95,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -110,6 +115,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -127,6 +133,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -141,6 +148,7 @@ Object {
       },
       "commitIndex": 3,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
@@ -324,6 +332,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -344,6 +353,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -362,6 +372,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
+  "priorityLevel": 99,
   "rootID": 1,
   "selfDurations": Map {
     5 => 3,
@@ -447,6 +458,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -464,6 +476,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -482,6 +495,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -696,6 +710,7 @@ Object {
           "timestamp": 0,
         },
       ],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -720,6 +735,7 @@ Object {
           "timestamp": 11,
         },
       ],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -906,6 +922,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -923,6 +940,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -937,6 +955,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": 99,
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index c45240e60d02..52386dab8806 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -48,6 +48,7 @@ import type {
   PathFrame,
   PathMatch,
   ProfilingSummaryBackend,
+  ReactPriorityLevel,
   ReactRenderer,
   RendererInterface,
 } from './types';
@@ -1267,6 +1268,7 @@ export function attach(
               })
             ),
             maxActualDuration: 0,
+            priorityLevel: null,
           };
         }
 
@@ -1284,7 +1286,7 @@ export function attach(
     recordUnmount(fiber, false);
   }
 
-  function handleCommitFiberRoot(root) {
+  function handleCommitFiberRoot(root, priorityLevel) {
     const current = root.current;
     const alternate = current.alternate;
 
@@ -1309,6 +1311,7 @@ export function attach(
           })
         ),
         maxActualDuration: 0,
+        priorityLevel: priorityLevel || null,
       };
     }
 
@@ -1955,6 +1958,7 @@ export function attach(
     durations: Array<number>,
     interactions: Array<InteractionBackend>,
     maxActualDuration: number,
+    priorityLevel: ReactPriorityLevel | null,
   |};
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
@@ -1980,6 +1984,7 @@ export function attach(
           commitIndex,
           durations: commitProfilingData.durations,
           interactions: commitProfilingData.interactions,
+          priorityLevel: commitProfilingData.priorityLevel,
           rootID,
         };
       }
@@ -1993,6 +1998,7 @@ export function attach(
       commitIndex,
       durations: [],
       interactions: [],
+      priorityLevel: null,
       rootID,
     };
   }
diff --git a/src/backend/types.js b/src/backend/types.js
index 4e5f3a190e6e..0af9f6358d94 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -32,6 +32,16 @@ export type HookType =
   | 'useImperativeHandle'
   | 'useDebugValue';
 
+// Priority level is copied from React and should be kept in sync:
+// https://github.com/facebook/react/blob/master/packages/react-reconciler/src/SchedulerWithReactIntegration.js
+export opaque type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
+export const ImmediatePriority: ReactPriorityLevel = 99;
+export const UserBlockingPriority: ReactPriorityLevel = 98;
+export const NormalPriority: ReactPriorityLevel = 97;
+export const LowPriority: ReactPriorityLevel = 96;
+export const IdlePriority: ReactPriorityLevel = 95;
+export const NoPriority: ReactPriorityLevel = 90;
+
 // The Fiber type is copied from React and should be kept in sync:
 // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiber.js
 // The properties we don't use in DevTools are omitted.
@@ -126,6 +136,7 @@ export type CommitDetailsBackend = {|
   // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
   durations: Array<number>,
   interactions: Array<InteractionBackend>,
+  priorityLevel: ReactPriorityLevel | null,
   rootID: number,
 |};
 
@@ -193,7 +204,10 @@ export type RendererInterface = {
   ) => ExportedProfilingDataFromRenderer,
   getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
-  handleCommitFiberRoot: (fiber: Object) => void,
+  handleCommitFiberRoot: (
+    fiber: Object,
+    commitPriority?: ReactPriorityLevel
+  ) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   logElementToConsole: (id: number) => void,
@@ -234,7 +248,11 @@ export type DevToolsHook = {
   // React uses these methods.
   checkDCE: (fn: Function) => void,
   onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,
-  onCommitFiberRoot: (rendererID: RendererID, fiber: Object) => void,
+  onCommitFiberRoot: (
+    rendererID: RendererID,
+    fiber: Object,
+    commitPriority?: ReactPriorityLevel
+  ) => void,
 };
 
 export type HooksNode = {
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index fe40d7e0b34c..c2f370f63563 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -130,8 +130,9 @@ export default class ProfilingCache {
           rootID,
           commitIndex,
           actualDurations: new Map(),
-          selfDurations: new Map(),
+          priorityLevel: null,
           interactions: [],
+          selfDurations: new Map(),
         });
       });
     },
@@ -346,6 +347,7 @@ export default class ProfilingCache {
     commitIndex,
     durations,
     interactions,
+    priorityLevel,
     rootID,
   }: CommitDetailsBackend) => {
     const key = `${rootID}-${commitIndex}`;
@@ -365,6 +367,7 @@ export default class ProfilingCache {
         actualDurations: actualDurationsMap,
         commitIndex,
         interactions,
+        priorityLevel,
         rootID,
         selfDurations: selfDurationsMap,
       });
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 635039b7276b..5e593fe401bf 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -2,7 +2,7 @@
 
 import React, { Fragment, useCallback, useContext, useState } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime } from './utils';
+import { formatDuration, formatPriorityLevel, formatTime } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './SidebarCommitInfo.css';
@@ -56,7 +56,7 @@ export default function SidebarCommitInfo(_: Props) {
     }
   );
 
-  const { interactions } = profilingCache.CommitDetails.read({
+  const { interactions, priorityLevel } = profilingCache.CommitDetails.read({
     commitIndex: selectedCommitIndex,
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
@@ -72,6 +72,14 @@ export default function SidebarCommitInfo(_: Props) {
       <div className={styles.Toolbar}>Commit information</div>
       <div className={styles.Content}>
         <ul className={styles.List}>
+          {priorityLevel !== null && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Priority</label>:{' '}
+              <span className={styles.Value}>
+                {formatPriorityLevel(priorityLevel)}
+              </span>
+            </li>
+          )}
           <li className={styles.ListItem}>
             <label className={styles.Label}>Committed at</label>:{' '}
             <span className={styles.Value}>
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 7457973c3060..d72f2028abf2 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -5,6 +5,7 @@ import type {
   CommitDetailsBackend,
   InteractionsBackend,
   ProfilingSummaryBackend,
+  ReactPriorityLevel,
 } from 'src/backend/types';
 
 export type CommitTreeNodeFrontend = {|
@@ -42,6 +43,7 @@ export type CommitDetailsFrontend = {|
   actualDurations: Map<number, number>,
   commitIndex: number,
   interactions: Array<InteractionFrontend>,
+  priorityLevel: ReactPriorityLevel | null,
   rootID: number,
   selfDurations: Map<number, number>,
 |};
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 9ec8b1829212..1b1a3558e0b7 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,6 +1,14 @@
 // @flow
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+  NoPriority,
+} from 'src/backend/types';
 
 import type {
   ExportedProfilingSummaryFromFrontend,
@@ -9,7 +17,10 @@ import type {
   ProfilingSnapshotNode,
 } from './types';
 
-import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
+import type {
+  ExportedProfilingDataFromRenderer,
+  ReactPriorityLevel,
+} from 'src/backend/types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -152,10 +163,11 @@ export const prepareImportedProfilingData = (
         }
         return {
           actualDurations: actualDurationsMap,
-          selfDurations: selfDurationsMap,
           commitIndex: commitDetailsBackendItem.commitIndex,
           interactions: commitDetailsBackendItem.interactions,
+          priorityLevel: commitDetailsBackendItem.priorityLevel,
           rootID: commitDetailsBackendItem.rootID,
+          selfDurations: selfDurationsMap,
         };
       }
     ),
@@ -184,6 +196,24 @@ export const getGradientColor = (value: number) => {
   return commitGradient[Math.round(index)];
 };
 
+export const formatPriorityLevel = (priorityLevel: ReactPriorityLevel) => {
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      return 'Immediate';
+    case UserBlockingPriority:
+      return 'User-Blocking';
+    case NormalPriority:
+      return 'Normal';
+    case LowPriority:
+      return 'Low';
+    case IdlePriority:
+      return 'Idle';
+    case NoPriority:
+    default:
+      return 'Unknown';
+  }
+};
+
 export const formatDuration = (duration: number) =>
   Math.round(duration * 10) / 10 || '<0.1';
 export const formatPercentage = (percentage: number) =>
diff --git a/src/hook.js b/src/hook.js
index 23f7280839ba..98c1794d359d 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -138,7 +138,7 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
-  function onCommitFiberRoot(rendererID, root) {
+  function onCommitFiberRoot(rendererID, root, priorityLevel) {
     const mountedRoots = hook.getFiberRoots(rendererID);
     const current = root.current;
     const isKnownRoot = mountedRoots.has(root);
@@ -153,7 +153,7 @@ export function installHook(target: any): DevToolsHook | null {
     }
     const rendererInterface = rendererInterfaces.get(rendererID);
     if (rendererInterface != null) {
-      rendererInterface.handleCommitFiberRoot(root);
+      rendererInterface.handleCommitFiberRoot(root, priorityLevel);
     }
   }
 

From 16a81feb7270989bfd39b7fb0c395d77421ebf2e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 16 May 2019 14:51:58 -0700
Subject: [PATCH 596/814] Moved priority level constants into rendeer interface

---
 .../__snapshots__/profiling-test.js.snap      | 38 ++++++-------
 src/backend/renderer.js                       | 55 +++++++++++++++++--
 src/backend/types.js                          | 19 +------
 .../views/Profiler/SidebarCommitInfo.js       |  6 +-
 src/devtools/views/Profiler/types.js          |  3 +-
 src/devtools/views/Profiler/utils.js          | 31 +----------
 6 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
index 524d7db2a9f9..314e152dc4d8 100644
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ b/src/__tests__/__snapshots__/profiling-test.js.snap
@@ -11,7 +11,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -34,7 +34,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -55,7 +55,7 @@ Object {
   },
   "commitIndex": 2,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -73,7 +73,7 @@ Object {
   },
   "commitIndex": 3,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     2 => 10,
@@ -95,7 +95,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -115,7 +115,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -133,7 +133,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -148,7 +148,7 @@ Object {
       },
       "commitIndex": 3,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
@@ -332,7 +332,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -353,7 +353,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -372,7 +372,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     5 => 3,
@@ -458,7 +458,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -476,7 +476,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -495,7 +495,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -710,7 +710,7 @@ Object {
           "timestamp": 0,
         },
       ],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -735,7 +735,7 @@ Object {
           "timestamp": 11,
         },
       ],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -922,7 +922,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -940,7 +940,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -955,7 +955,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 52386dab8806..b0532eefaea2 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -48,7 +48,6 @@ import type {
   PathFrame,
   PathMatch,
   ProfilingSummaryBackend,
-  ReactPriorityLevel,
   ReactRenderer,
   RendererInterface,
 } from './types';
@@ -92,12 +91,27 @@ function getInternalReactConstants(version) {
     Placement: 0b10,
   };
 
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  //
+  // Technically these priority levels are invalid for versions before 16.9,
+  // but 16.9 is the first version to report priority level to DevTools,
+  // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
+  const ReactPriorityLevels = {
+    ImmediatePriority: 99,
+    UserBlockingPriority: 98,
+    NormalPriority: 97,
+    LowPriority: 96,
+    IdlePriority: 95,
+    NoPriority: 90,
+  };
+
   let ReactTypeOfWork;
 
   // **********************************************************
   // The section below is copied from files in React repo.
   // Keep it in sync, and add version guards if it changes.
-  // **********************************************************
   if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
       ClassComponent: 1,
@@ -185,6 +199,7 @@ function getInternalReactConstants(version) {
   // **********************************************************
 
   return {
+    ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
     ReactTypeOfSideEffect,
@@ -198,6 +213,7 @@ export function attach(
   global: Object
 ): RendererInterface {
   const {
+    ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
     ReactTypeOfSideEffect,
@@ -222,6 +238,14 @@ export function attach(
     SimpleMemoComponent,
     SuspenseComponent,
   } = ReactTypeOfWork;
+  const {
+    ImmediatePriority,
+    UserBlockingPriority,
+    NormalPriority,
+    LowPriority,
+    IdlePriority,
+    NoPriority,
+  } = ReactPriorityLevels;
   const {
     CONCURRENT_MODE_NUMBER,
     CONCURRENT_MODE_SYMBOL_STRING,
@@ -1311,7 +1335,8 @@ export function attach(
           })
         ),
         maxActualDuration: 0,
-        priorityLevel: priorityLevel || null,
+        priorityLevel:
+          priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
       };
     }
 
@@ -1958,7 +1983,7 @@ export function attach(
     durations: Array<number>,
     interactions: Array<InteractionBackend>,
     maxActualDuration: number,
-    priorityLevel: ReactPriorityLevel | null,
+    priorityLevel: string | null,
   |};
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
@@ -2408,6 +2433,28 @@ export function attach(
     };
   }
 
+  const formatPriorityLevel = (priorityLevel: ?number) => {
+    if (priorityLevel == null) {
+      return 'Unknown';
+    }
+
+    switch (priorityLevel) {
+      case ImmediatePriority:
+        return 'Immediate';
+      case UserBlockingPriority:
+        return 'User-Blocking';
+      case NormalPriority:
+        return 'Normal';
+      case LowPriority:
+        return 'Low';
+      case IdlePriority:
+        return 'Idle';
+      case NoPriority:
+      default:
+        return 'Unknown';
+    }
+  };
+
   return {
     cleanup,
     flushInitialOperations,
diff --git a/src/backend/types.js b/src/backend/types.js
index 0af9f6358d94..431619db15f7 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -32,16 +32,6 @@ export type HookType =
   | 'useImperativeHandle'
   | 'useDebugValue';
 
-// Priority level is copied from React and should be kept in sync:
-// https://github.com/facebook/react/blob/master/packages/react-reconciler/src/SchedulerWithReactIntegration.js
-export opaque type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
-export const ImmediatePriority: ReactPriorityLevel = 99;
-export const UserBlockingPriority: ReactPriorityLevel = 98;
-export const NormalPriority: ReactPriorityLevel = 97;
-export const LowPriority: ReactPriorityLevel = 96;
-export const IdlePriority: ReactPriorityLevel = 95;
-export const NoPriority: ReactPriorityLevel = 90;
-
 // The Fiber type is copied from React and should be kept in sync:
 // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiber.js
 // The properties we don't use in DevTools are omitted.
@@ -136,7 +126,7 @@ export type CommitDetailsBackend = {|
   // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
   durations: Array<number>,
   interactions: Array<InteractionBackend>,
-  priorityLevel: ReactPriorityLevel | null,
+  priorityLevel: string | null,
   rootID: number,
 |};
 
@@ -204,10 +194,7 @@ export type RendererInterface = {
   ) => ExportedProfilingDataFromRenderer,
   getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
-  handleCommitFiberRoot: (
-    fiber: Object,
-    commitPriority?: ReactPriorityLevel
-  ) => void,
+  handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   logElementToConsole: (id: number) => void,
@@ -251,7 +238,7 @@ export type DevToolsHook = {
   onCommitFiberRoot: (
     rendererID: RendererID,
     fiber: Object,
-    commitPriority?: ReactPriorityLevel
+    commitPriority?: number
   ) => void,
 };
 
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 5e593fe401bf..ff4040302bd7 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -2,7 +2,7 @@
 
 import React, { Fragment, useCallback, useContext, useState } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatPriorityLevel, formatTime } from './utils';
+import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './SidebarCommitInfo.css';
@@ -75,9 +75,7 @@ export default function SidebarCommitInfo(_: Props) {
           {priorityLevel !== null && (
             <li className={styles.ListItem}>
               <label className={styles.Label}>Priority</label>:{' '}
-              <span className={styles.Value}>
-                {formatPriorityLevel(priorityLevel)}
-              </span>
+              <span className={styles.Value}>{priorityLevel}</span>
             </li>
           )}
           <li className={styles.ListItem}>
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index d72f2028abf2..99e0430465ea 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -5,7 +5,6 @@ import type {
   CommitDetailsBackend,
   InteractionsBackend,
   ProfilingSummaryBackend,
-  ReactPriorityLevel,
 } from 'src/backend/types';
 
 export type CommitTreeNodeFrontend = {|
@@ -43,7 +42,7 @@ export type CommitDetailsFrontend = {|
   actualDurations: Map<number, number>,
   commitIndex: number,
   interactions: Array<InteractionFrontend>,
-  priorityLevel: ReactPriorityLevel | null,
+  priorityLevel: string | null,
   rootID: number,
   selfDurations: Map<number, number>,
 |};
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 1b1a3558e0b7..95c4fdc17d6a 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -1,14 +1,6 @@
 // @flow
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
-import {
-  ImmediatePriority,
-  UserBlockingPriority,
-  NormalPriority,
-  LowPriority,
-  IdlePriority,
-  NoPriority,
-} from 'src/backend/types';
 
 import type {
   ExportedProfilingSummaryFromFrontend,
@@ -17,10 +9,7 @@ import type {
   ProfilingSnapshotNode,
 } from './types';
 
-import type {
-  ExportedProfilingDataFromRenderer,
-  ReactPriorityLevel,
-} from 'src/backend/types';
+import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -196,24 +185,6 @@ export const getGradientColor = (value: number) => {
   return commitGradient[Math.round(index)];
 };
 
-export const formatPriorityLevel = (priorityLevel: ReactPriorityLevel) => {
-  switch (priorityLevel) {
-    case ImmediatePriority:
-      return 'Immediate';
-    case UserBlockingPriority:
-      return 'User-Blocking';
-    case NormalPriority:
-      return 'Normal';
-    case LowPriority:
-      return 'Low';
-    case IdlePriority:
-      return 'Idle';
-    case NoPriority:
-    default:
-      return 'Unknown';
-  }
-};
-
 export const formatDuration = (duration: number) =>
   Math.round(duration * 10) / 10 || '<0.1';
 export const formatPercentage = (percentage: number) =>

From 53de5b69cc5bfdc3ce4a7993f3cb4082fb4a78ea Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 20 May 2019 09:42:37 -0700
Subject: [PATCH 597/814] Updated test snapshot

---
 .../inspectedElementContext-test.js.snap      | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 282c86680582..163603eb7d76 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -27,6 +27,28 @@ exports[`InspectedElementContext should inspect the currently selected element:
 }
 `;
 
+exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
 [root]
     <Example>

From d44038071922c2fbde0d654411af146c71596e67 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 20 May 2019 09:54:07 -0700
Subject: [PATCH 598/814] Upgraded to canary with priority level info

---
 package.json                           | 10 +++---
 shells/dev/app/ElementTypes/index.js   | 18 ++++------
 shells/dev/app/PriorityLevels/index.js | 45 ++++++++++++++++--------
 yarn.lock                              | 47 +++++++++++++-------------
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 03d44c39317d..5c81af9b7d52 100644
--- a/package.json
+++ b/package.json
@@ -132,16 +132,16 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^0.0.0-6da04b5d8",
+    "react": "^0.0.0-50b50c26f",
     "react-color": "^2.11.7",
-    "react-dom": "^0.0.0-6da04b5d8",
-    "react-is": "^0.0.0-6da04b5d8",
-    "react-test-renderer": "^0.0.0-6da04b5d8",
+    "react-dom": "^0.0.0-50b50c26f",
+    "react-is": "^0.0.0-50b50c26f",
+    "react-test-renderer": "^0.0.0-50b50c26f",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
-    "scheduler": "^0.0.0-6da04b5d8",
+    "scheduler": "^0.0.0-50b50c26f",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js
index fa027f59260d..6ef562596c56 100644
--- a/shells/dev/app/ElementTypes/index.js
+++ b/shells/dev/app/ElementTypes/index.js
@@ -6,8 +6,6 @@ import React, {
   lazy,
   memo,
   Component,
-  // $FlowFixMe Flow thinks ConcurrentMode is stable
-  unstable_ConcurrentMode as ConcurrentMode,
   Fragment,
   // $FlowFixMe Flow doesn't know about the Profiler import yet
   Profiler,
@@ -48,15 +46,13 @@ export default function ElementTypes() {
           <Context.Consumer>{value => null}</Context.Consumer>
         </Context.Provider>
         <StrictMode>
-          <ConcurrentMode>
-            <Suspense fallback={<div>Loading...</div>}>
-              <ClassComponent />
-              <FunctionComponent />
-              <MemoFunctionComponent />
-              <ForwardRefComponent />
-              <LazyComponent />
-            </Suspense>
-          </ConcurrentMode>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ClassComponent />
+            <FunctionComponent />
+            <MemoFunctionComponent />
+            <ForwardRefComponent />
+            <LazyComponent />
+          </Suspense>
         </StrictMode>
       </Fragment>
     </Profiler>
diff --git a/shells/dev/app/PriorityLevels/index.js b/shells/dev/app/PriorityLevels/index.js
index dec47e1fc98b..28884519809b 100644
--- a/shells/dev/app/PriorityLevels/index.js
+++ b/shells/dev/app/PriorityLevels/index.js
@@ -1,29 +1,46 @@
 // @flow
 
 import React, { Fragment, useCallback, useState } from 'react';
-import { unstable_next as next } from 'scheduler';
+import {
+  unstable_IdlePriority as IdlePriority,
+  unstable_LowPriority as LowPriority,
+  unstable_runWithPriority as runWithPriority,
+} from 'scheduler';
 
 export default function PriorityLevels() {
-  const [count, setCount] = useState(0);
+  const [defaultPriority, setDefaultPriority] = useState<boolean>(false);
+  const [idlePriority, setIdlePriority] = useState<boolean>(false);
+  const [normalPriority, setLowPriority] = useState<boolean>(false);
+
+  const resetSequence = useCallback(() => {
+    setDefaultPriority(false);
+    setLowPriority(false);
+    setIdlePriority(false);
+  }, []);
 
   const startSequence = useCallback(() => {
-    setCount(1);
-    next(() => setCount(2));
+    setDefaultPriority(true);
+    runWithPriority(LowPriority, () => setLowPriority(true));
+    runWithPriority(IdlePriority, () => setIdlePriority(true));
   }, []);
 
+  const labels = [];
+  if (defaultPriority) {
+    labels.push('(default priority)');
+  }
+  if (normalPriority) {
+    labels.push('Low Priority');
+  }
+  if (idlePriority) {
+    labels.push('Idle Priority');
+  }
+
   return (
     <Fragment>
       <h1>Priority Levels</h1>
-      <button onClick={startSequence}>start sequence</button>
-      {count >= 1 && <Text>One</Text>}
-      {count >= 2 && <Text>Two</Text>}
-      {count >= 2 && (
-        <div hidden>
-          <Text>Three</Text>
-        </div>
-      )}
+      <button onClick={resetSequence}>Reset</button>
+      <button onClick={startSequence}>Start sequence</button>
+      <span>{labels.join(', ')}</span>
     </Fragment>
   );
 }
-
-const Text = ({ children }) => children;
diff --git a/yarn.lock b/yarn.lock
index 8e3eccc5fb39..c21c8ae55403 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9748,20 +9748,20 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^0.0.0-6da04b5d8:
-  version "0.0.0-6da04b5d8"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-6da04b5d8.tgz#ee78e45a40771560c756b8fc7f1fa213f2179ebe"
-  integrity sha512-6oyfkucrweqCB5XyLsfEnPSWhvkFnttutkU9uUQovLAljuazgpAjvBy6MBGSewKptqch2OTNwopqvR3QUMD8AQ==
+react-dom@^0.0.0-50b50c26f:
+  version "0.0.0-50b50c26f"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-50b50c26f.tgz#3cd8da0f2276ed4b7a926e1807d2675b2eb40227"
+  integrity sha512-da9qleWDdBdAguEIDvvpFE0iuS8hfcCSGgZTYKRQMlSh5A94Ktr1otL4rgDTFH+bNsOwz3XrvEBYRA6WaE9xzQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-6da04b5d8"
+    scheduler "0.0.0-50b50c26f"
 
-react-is@0.0.0-6da04b5d8, react-is@^0.0.0-6da04b5d8:
-  version "0.0.0-6da04b5d8"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-6da04b5d8.tgz#ded1f02e9f1e2b8456812d0d45c341d70b7bf7db"
-  integrity sha512-+Df3meqx+XUir+3dCqiHNAHruwmOAgXVp3TYmlUvgtPNBu+LF0OdchTMZ/xMUok1gYVoe4l/xhfs9CTEPkWt3g==
+react-is@0.0.0-50b50c26f, react-is@^0.0.0-50b50c26f:
+  version "0.0.0-50b50c26f"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-50b50c26f.tgz#c4003ffffef9bd2b287979f9041a23d12a607bf2"
+  integrity sha512-9Y6ZvdOVmOxXs9mGuFy6eXHBww8RJCtJAh94b1hkbjhnW8Mb5ADScDoxJBVxcNuX9hvDkhENspC96ZQK1NIv3g==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9773,15 +9773,15 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-test-renderer@^0.0.0-6da04b5d8:
-  version "0.0.0-6da04b5d8"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-6da04b5d8.tgz#01bed04c5a4cf22339f0ae3b23f89bb45e9a8f2a"
-  integrity sha512-yDt5RPDXLZXTqlWS0jXMJ1IyS1e/UZXSr0L8bG0UCsna4T7A3HIYR2zChlydGXsxjGMZntKqEfm27hUhFgC06Q==
+react-test-renderer@^0.0.0-50b50c26f:
+  version "0.0.0-50b50c26f"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-50b50c26f.tgz#1a85cf9073ef5a932d03bee36fcfd9bf15aeae2c"
+  integrity sha512-gWc4L+mFIUCjvBpafR88n4/i/oaKHD6rzVyZY+XBou9MNtr2rRkjePOhBVsiYlCwkj+zZi6klV9b05TMzftosA==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    react-is "0.0.0-6da04b5d8"
-    scheduler "0.0.0-6da04b5d8"
+    react-is "0.0.0-50b50c26f"
+    scheduler "0.0.0-50b50c26f"
 
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
@@ -9796,15 +9796,14 @@ react-window@^1.8.0:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^0.0.0-6da04b5d8:
-  version "0.0.0-6da04b5d8"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-6da04b5d8.tgz#583d81f73b26771da41170a5042a5ab0bdcfe37a"
-  integrity sha512-8hXBHwDCKxSVFqj5Kb4OskZz7//2fx2IpUnYyukYV8qyAHlXr0qUl3GxwuryhdPzJHlzi776WjN0YEmEEANhYA==
+react@^0.0.0-50b50c26f:
+  version "0.0.0-50b50c26f"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-50b50c26f.tgz#b782b579ce1f5d8bd696c5e45c744714ebecb111"
+  integrity sha512-jUAzS4DeWTdUZ/3kqm2T6C9OIpiAf2qdwVamCts0qzwYVni1/gUTOWK1ui0J+eaRzKxrIEzVvmCMxFd35lP/pA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-6da04b5d8"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -10460,10 +10459,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-6da04b5d8, scheduler@^0.0.0-6da04b5d8:
-  version "0.0.0-6da04b5d8"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-6da04b5d8.tgz#5e0ec65c2b0a7f05ffdc5522fc3a6d95b693e5c9"
-  integrity sha512-upTrWBZvk4IjMsC/AcRpgCwjnSQl8i78+07KmcndqWOnWp7s4wauowWXhyswP9vucLtZaN5ussFdM3d7dXcTkw==
+scheduler@0.0.0-50b50c26f, scheduler@^0.0.0-50b50c26f:
+  version "0.0.0-50b50c26f"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-50b50c26f.tgz#09bedde1c64d7a042b557bee2dbf5faf5fd58a50"
+  integrity sha512-LBN3zrP8iBdILOoYxybFtkU7j+ldZTHORKyYyVLwXuIwGQ8/Xhs5VZjNQ5R2Xru2zv3GGVpJSbd47EpDuD2EHw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 7ce9f4859c79d7f4e60b7916fd1a1efb55aa2619 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 20 May 2019 10:45:16 -0700
Subject: [PATCH 599/814] Renamed Store importedProfilingData -> profilingData

---
 src/__tests__/utils.js                        | 10 ++---
 src/devtools/ProfilingCache.js                | 25 ++++++------
 src/devtools/store.js                         | 39 +++++++++----------
 .../views/Profiler/CommitTreeBuilder.js       | 12 +++---
 .../views/Profiler/ProfilerContext.js         | 19 +++++----
 .../Profiler/ProfilingImportExportButtons.js  |  2 +-
 src/devtools/views/Profiler/utils.js          |  4 +-
 7 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 20d7bb511c7c..dd5b4b4646de 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -169,21 +169,21 @@ export function exportImportHelper(
   expect(typeof exportedProfilingDataJsonString).toBe('string');
   expect(exportedProfilingDataJsonString).not.toBe('');
 
-  const importedProfilingData = prepareImportedProfilingData(
+  const profilingData = prepareImportedProfilingData(
     exportedProfilingDataJsonString
   );
   // Sanity check that profiling snapshots are serialized correctly.
   expect(store.profilingSnapshots.get(rootID)).toEqual(
-    importedProfilingData.profilingSnapshots.get(rootID)
+    profilingData.profilingSnapshots.get(rootID)
   );
   expect(store.profilingOperations.get(rootID)).toEqual(
-    importedProfilingData.profilingOperations.get(rootID)
+    profilingData.profilingOperations.get(rootID)
   );
 
   // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
-  expect(importedProfilingData).toMatchSnapshot('imported data');
+  expect(profilingData).toMatchSnapshot('imported data');
 
   act(() => {
-    store.importedProfilingData = importedProfilingData;
+    store.profilingData = profilingData;
   });
 }
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index c2f370f63563..a334edd4c85f 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -98,10 +98,9 @@ export default class ProfilingCache {
     ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
       return new Promise(resolve => {
         const pendingKey = `${rootID}-${commitIndex}`;
-        const importedProfilingData = this._store.importedProfilingData;
-        if (importedProfilingData !== null) {
-          const commitDetailsByCommitIndex =
-            importedProfilingData.commitDetails;
+        const profilingData = this._store.profilingData;
+        if (profilingData !== null) {
+          const commitDetailsByCommitIndex = profilingData.commitDetails;
           if (
             commitDetailsByCommitIndex != null &&
             commitIndex < commitDetailsByCommitIndex.length
@@ -148,9 +147,9 @@ export default class ProfilingCache {
     ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {
       return new Promise(resolve => {
         const pendingKey = `${rootID}-${fiberID}`;
-        const importedProfilingData = this._store.importedProfilingData;
-        if (importedProfilingData !== null) {
-          const { commitDetails } = importedProfilingData;
+        const profilingData = this._store.profilingData;
+        if (profilingData !== null) {
+          const { commitDetails } = profilingData;
           const commitDurations = [];
           commitDetails.forEach(({ selfDurations }, commitIndex) => {
             const selfDuration = selfDurations.get(fiberID);
@@ -197,10 +196,10 @@ export default class ProfilingCache {
     ({ rendererID, rootID }: InteractionsParams) => {
       return new Promise(resolve => {
         const pendingKey = rootID;
-        const importedProfilingData = this._store.importedProfilingData;
-        if (importedProfilingData !== null) {
+        const profilingData = this._store.profilingData;
+        if (profilingData !== null) {
           const interactionsFrontend: InteractionsFrontend =
-            importedProfilingData.interactions;
+            profilingData.interactions;
           if (interactionsFrontend != null) {
             this._pendingInteractionsMap.delete(pendingKey);
             resolve(interactionsFrontend);
@@ -235,10 +234,10 @@ export default class ProfilingCache {
     ({ rendererID, rootID }: ProfilingSummaryParams) => {
       return new Promise(resolve => {
         const pendingKey = rootID;
-        const importedProfilingData = this._store.importedProfilingData;
-        if (importedProfilingData !== null) {
+        const profilingData = this._store.profilingData;
+        if (profilingData !== null) {
           const profilingSummaryFrontend: ProfilingSummaryFrontend =
-            importedProfilingData.profilingSummary;
+            profilingData.profilingSummary;
           if (profilingSummaryFrontend != null) {
             this._pendingProfileSummaryMap.delete(pendingKey);
             resolve(profilingSummaryFrontend);
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1155b6fe185d..21ae3255d0a0 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -80,9 +80,6 @@ export default class Store extends EventEmitter {
   // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
-  // The user has imported a previously exported profiling session.
-  _importedProfilingData: ImportedProfilingData | null = null;
-
   // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
@@ -94,6 +91,9 @@ export default class Store extends EventEmitter {
   // Suspense cache for reading profiling data.
   _profilingCache: ProfilingCache;
 
+  // The user has imported a previously exported profiling session.
+  _profilingData: ImportedProfilingData | null = null;
+
   // Map of root (id) to a list of tree mutation that occur during profiling.
   // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
   // to reconstruct the state of each root for each commit.
@@ -298,24 +298,10 @@ export default class Store extends EventEmitter {
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
     return (
-      this._importedProfilingData !== null ||
-      this._profilingOperationsByRootID.size > 0
+      this._profilingData !== null || this._profilingOperationsByRootID.size > 0
     );
   }
 
-  get importedProfilingData(): ImportedProfilingData | null {
-    return this._importedProfilingData;
-  }
-  set importedProfilingData(value: ImportedProfilingData | null): void {
-    this._importedProfilingData = value;
-    this._profilingOperationsByRootID = new Map();
-    this._profilingScreenshotsByRootID = new Map();
-    this._profilingSnapshotsByRootID = new Map();
-    this._profilingCache.invalidate();
-
-    this.emit('importedProfilingData');
-  }
-
   get isProfiling(): boolean {
     return this._isProfiling;
   }
@@ -328,6 +314,19 @@ export default class Store extends EventEmitter {
     return this._profilingCache;
   }
 
+  get profilingData(): ImportedProfilingData | null {
+    return this._profilingData;
+  }
+  set profilingData(value: ImportedProfilingData | null): void {
+    this._profilingData = value;
+    this._profilingOperationsByRootID = new Map();
+    this._profilingScreenshotsByRootID = new Map();
+    this._profilingSnapshotsByRootID = new Map();
+    this._profilingCache.invalidate();
+
+    this.emit('profilingData');
+  }
+
   get profilingOperations(): Map<number, Array<Uint32Array>> {
     return this._profilingOperationsByRootID;
   }
@@ -365,7 +364,7 @@ export default class Store extends EventEmitter {
   }
 
   clearProfilingData(): void {
-    this._importedProfilingData = null;
+    this._profilingData = null;
     this._profilingOperationsByRootID = new Map();
     this._profilingScreenshotsByRootID = new Map();
     this._profilingSnapshotsByRootID = new Map();
@@ -1068,7 +1067,7 @@ export default class Store extends EventEmitter {
 
   onProfilingStatus = (isProfiling: boolean) => {
     if (isProfiling) {
-      this._importedProfilingData = null;
+      this._profilingData = null;
       this._profilingOperationsByRootID = new Map();
       this._profilingScreenshotsByRootID = new Map();
       this._profilingSnapshotsByRootID = new Map();
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 3d4ec90aed89..eff090f4bdf6 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -55,10 +55,10 @@ export function getCommitTree({
     return commitTrees[commitIndex];
   }
 
-  const { importedProfilingData } = store;
+  const { profilingData } = store;
   const profilingOperations =
-    importedProfilingData != null
-      ? importedProfilingData.profilingOperations
+    profilingData != null
+      ? profilingData.profilingOperations
       : store.profilingOperations;
 
   // Commits are generated sequentially and cached.
@@ -67,10 +67,10 @@ export function getCommitTree({
   if (commitIndex === 0) {
     const nodes = new Map();
 
-    const { importedProfilingData } = store;
+    const { profilingData } = store;
     const profilingSnapshots =
-      importedProfilingData != null
-        ? importedProfilingData.profilingSnapshots.get(rootID)
+      profilingData != null
+        ? profilingData.profilingSnapshots.get(rootID)
         : store.profilingSnapshots.get(rootID);
 
     if (profilingSnapshots == null) {
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c2fd4b5a5dfc..1658e52430d6 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -72,7 +72,7 @@ ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
   hasProfilingData: boolean,
-  importedProfilingData: ImportedProfilingData | null,
+  profilingData: ImportedProfilingData | null,
   isProfiling: boolean,
 |};
 
@@ -89,30 +89,29 @@ function ProfilerContextController({ children }: Props) {
     () => ({
       getCurrentValue: () => ({
         hasProfilingData: store.hasProfilingData,
-        importedProfilingData: store.importedProfilingData,
+        profilingData: store.profilingData,
         isProfiling: store.isProfiling,
       }),
       subscribe: (callback: Function) => {
-        store.addListener('importedProfilingData', callback);
+        store.addListener('profilingData', callback);
         store.addListener('isProfiling', callback);
         return () => {
-          store.removeListener('importedProfilingData', callback);
+          store.removeListener('profilingData', callback);
           store.removeListener('isProfiling', callback);
         };
       },
     }),
     [store]
   );
-  const {
-    isProfiling,
-    hasProfilingData,
-    importedProfilingData,
-  } = useSubscription<StoreProfilingState, Store>(subscription);
+  const { isProfiling, hasProfilingData, profilingData } = useSubscription<
+    StoreProfilingState,
+    Store
+  >(subscription);
 
   let rendererID = null;
   let rootID = null;
   let rootHasProfilingData = false;
-  if (importedProfilingData !== null) {
+  if (profilingData !== null) {
     rootHasProfilingData = true;
   } else if (selectedElementID !== null) {
     rendererID = store.getRendererIDForElement(selectedElementID);
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index caa01dffbc04..14bf451d297c 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -57,7 +57,7 @@ export default function ProfilingImportExportButtons() {
       fileReader.addEventListener('load', () => {
         try {
           const raw = ((fileReader.result: any): string);
-          store.importedProfilingData = prepareImportedProfilingData(raw);
+          store.profilingData = prepareImportedProfilingData(raw);
         } catch (error) {
           modalDialogDispatch({
             type: 'SHOW',
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index 95c4fdc17d6a..b9222cd58be7 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -120,7 +120,7 @@ export const prepareImportedProfilingData = (
     initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
   }
 
-  const importedProfilingData: ImportedProfilingData = {
+  const profilingData: ImportedProfilingData = {
     version: parsed.version,
     profilingOperations: new Map(
       exportedProfilingData.profilingOperationsByRootID.map(
@@ -169,7 +169,7 @@ export const prepareImportedProfilingData = (
       interactionCount: profilingSummaryExported.interactionCount,
     },
   };
-  return importedProfilingData;
+  return profilingData;
 };
 
 export const getGradientColor = (value: number) => {

From c6de014a9a70d3bff970a3a58df7ac6af28fa51b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 06:05:25 -0700
Subject: [PATCH 600/814] Massively overhauled profiling data architecture

---
 .../__snapshots__/profiling-test.js.snap      | 1106 ------------
 .../__snapshots__/profilingCache-test.js.snap | 1495 +++++++++++++++++
 .../profilingCharts-test.js.snap              |   28 +
 src/__tests__/profilerStore-test.js           |   57 +
 src/__tests__/profiling-test.js               |  574 -------
 src/__tests__/profilingCache-test.js          |  465 +++++
 src/__tests__/profilingCharts-test.js         |   90 +-
 .../profilingCommitTreeBuilder-test.js        |   23 +-
 src/__tests__/profilingUtils-test.js          |   20 +
 src/__tests__/utils.js                        |   60 +-
 src/backend/agent.js                          |  103 +-
 src/backend/renderer.js                       |  318 ++--
 src/backend/types.js                          |   72 +-
 src/constants.js                              |    2 +-
 src/devtools/ProfilerStore.js                 |  370 ++++
 src/devtools/ProfilingCache.js                |  421 +----
 src/devtools/store.js                         |  255 +--
 .../views/Profiler/CommitFlamegraph.js        |   43 +-
 src/devtools/views/Profiler/CommitRanked.js   |   43 +-
 .../views/Profiler/CommitTreeBuilder.js       |  110 +-
 .../views/Profiler/FlamegraphChartBuilder.js  |   23 +-
 .../views/Profiler/InteractionListItem.js     |   26 +-
 src/devtools/views/Profiler/Interactions.js   |   30 +-
 .../Profiler/InteractionsChartBuilder.js      |   37 +-
 .../views/Profiler/ProfilerContext.js         |    8 +-
 .../Profiler/ProfilingImportExportButtons.js  |   46 +-
 .../views/Profiler/RankedChartBuilder.js      |   19 +-
 .../views/Profiler/SidebarCommitInfo.js       |   77 +-
 .../views/Profiler/SidebarInteractions.js     |   85 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |   24 +-
 .../views/Profiler/SnapshotSelector.js        |   28 +-
 src/devtools/views/Profiler/types.js          |  150 +-
 src/devtools/views/Profiler/utils.js          |  311 ++--
 33 files changed, 3253 insertions(+), 3266 deletions(-)
 delete mode 100644 src/__tests__/__snapshots__/profiling-test.js.snap
 create mode 100644 src/__tests__/__snapshots__/profilingCache-test.js.snap
 create mode 100644 src/__tests__/profilerStore-test.js
 delete mode 100644 src/__tests__/profiling-test.js
 create mode 100644 src/__tests__/profilingCache-test.js
 create mode 100644 src/__tests__/profilingUtils-test.js
 create mode 100644 src/devtools/ProfilerStore.js

diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap
deleted file mode 100644
index 314e152dc4d8..000000000000
--- a/src/__tests__/__snapshots__/profiling-test.js.snap
+++ /dev/null
@@ -1,1106 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 0 1`] = `
-Object {
-  "actualDurations": Map {
-    1 => 12,
-    2 => 12,
-    3 => 0,
-    4 => 1,
-    5 => 1,
-  },
-  "commitIndex": 0,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    1 => 0,
-    2 => 10,
-    3 => 0,
-    4 => 1,
-    5 => 1,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 1 1`] = `
-Object {
-  "actualDurations": Map {
-    3 => 0,
-    4 => 1,
-    6 => 2,
-    2 => 13,
-    1 => 13,
-  },
-  "commitIndex": 1,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    3 => 0,
-    4 => 1,
-    6 => 2,
-    2 => 10,
-    1 => 0,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 2 1`] = `
-Object {
-  "actualDurations": Map {
-    3 => 0,
-    2 => 10,
-    1 => 10,
-  },
-  "commitIndex": 2,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    3 => 0,
-    2 => 10,
-    1 => 0,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should be collected for each commit: CommitDetails commitIndex: 3 1`] = `
-Object {
-  "actualDurations": Map {
-    2 => 10,
-    1 => 10,
-  },
-  "commitIndex": 3,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    2 => 10,
-    1 => 0,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should be collected for each commit: imported data 1`] = `
-Object {
-  "commitDetails": Array [
-    Object {
-      "actualDurations": Map {
-        1 => 12,
-        2 => 12,
-        3 => 0,
-        4 => 1,
-        5 => 1,
-      },
-      "commitIndex": 0,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        1 => 0,
-        2 => 10,
-        3 => 0,
-        4 => 1,
-        5 => 1,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        4 => 1,
-        6 => 2,
-        2 => 13,
-        1 => 13,
-      },
-      "commitIndex": 1,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        4 => 1,
-        6 => 2,
-        2 => 10,
-        1 => 0,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        2 => 10,
-        1 => 10,
-      },
-      "commitIndex": 2,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        2 => 10,
-        1 => 0,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        2 => 10,
-        1 => 10,
-      },
-      "commitIndex": 3,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        2 => 10,
-        1 => 0,
-      },
-    },
-  ],
-  "interactions": Object {
-    "interactions": Array [],
-    "rootID": 1,
-  },
-  "profilingOperations": Map {
-    1 => Array [
-      Uint32Array [
-        1,
-        1,
-        17,
-        6,
-        80,
-        97,
-        114,
-        101,
-        110,
-        116,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        48,
-        1,
-        49,
-        1,
-        1,
-        11,
-        1,
-        1,
-        4,
-        1,
-        12000,
-        1,
-        2,
-        5,
-        1,
-        0,
-        1,
-        0,
-        4,
-        2,
-        12000,
-        1,
-        3,
-        5,
-        2,
-        2,
-        2,
-        3,
-        4,
-        3,
-        0,
-        1,
-        4,
-        5,
-        2,
-        2,
-        2,
-        4,
-        4,
-        4,
-        1000,
-        1,
-        5,
-        8,
-        2,
-        2,
-        2,
-        0,
-        4,
-        5,
-        1000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        8,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        50,
-        1,
-        6,
-        5,
-        2,
-        2,
-        1,
-        2,
-        4,
-        6,
-        2000,
-        4,
-        2,
-        14000,
-        3,
-        2,
-        4,
-        3,
-        4,
-        6,
-        5,
-        4,
-        1,
-        14000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        0,
-        2,
-        2,
-        6,
-        4,
-        4,
-        2,
-        11000,
-        3,
-        2,
-        2,
-        3,
-        5,
-        4,
-        1,
-        11000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        0,
-        2,
-        1,
-        3,
-      ],
-    ],
-  },
-  "profilingSnapshots": Map {
-    1 => Map {},
-  },
-  "profilingSummary": Object {
-    "commitDurations": Array [
-      12,
-      13,
-      10,
-      10,
-    ],
-    "commitTimes": Array [
-      12,
-      25,
-      35,
-      45,
-    ],
-    "initialTreeBaseDurations": Map {},
-    "interactionCount": 0,
-    "rootID": 1,
-  },
-  "version": 3,
-}
-`;
-
-exports[`profiling CommitDetails should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
-Object {
-  "actualDurations": Map {
-    1 => 16,
-    2 => 16,
-    3 => 1,
-    5 => 1,
-  },
-  "commitIndex": 0,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    1 => 0,
-    2 => 10,
-    3 => 1,
-    5 => 1,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
-Object {
-  "actualDurations": Map {
-    1 => 15,
-    2 => 15,
-    3 => 5,
-    4 => 2,
-  },
-  "commitIndex": 0,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    1 => 0,
-    2 => 10,
-    3 => 3,
-    4 => 2,
-  },
-}
-`;
-
-exports[`profiling CommitDetails should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
-Object {
-  "actualDurations": Map {
-    5 => 3,
-    3 => 3,
-  },
-  "commitIndex": 1,
-  "interactions": Array [],
-  "priorityLevel": "Immediate",
-  "rootID": 1,
-  "selfDurations": Map {
-    5 => 3,
-    3 => 0,
-  },
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 2 1`] = `
-Object {
-  "commitDurations": Array [
-    0,
-    10,
-    1,
-    10,
-    2,
-    10,
-  ],
-  "fiberID": 2,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 3 1`] = `
-Object {
-  "commitDurations": Array [
-    0,
-    0,
-    1,
-    0,
-    2,
-    0,
-  ],
-  "fiberID": 3,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 4 1`] = `
-Object {
-  "commitDurations": Array [
-    0,
-    1,
-  ],
-  "fiberID": 4,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 5 1`] = `
-Object {
-  "commitDurations": Array [
-    1,
-    1,
-    2,
-    1,
-  ],
-  "fiberID": 5,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: FiberCommits: element 6 1`] = `
-Object {
-  "commitDurations": Array [
-    2,
-    2,
-  ],
-  "fiberID": 6,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling FiberCommits should be collected for each rendered fiber: imported data 1`] = `
-Object {
-  "commitDetails": Array [
-    Object {
-      "actualDurations": Map {
-        1 => 11,
-        2 => 11,
-        3 => 0,
-        4 => 1,
-      },
-      "commitIndex": 0,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        1 => 0,
-        2 => 10,
-        3 => 0,
-        4 => 1,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        5 => 1,
-        2 => 11,
-        1 => 11,
-      },
-      "commitIndex": 1,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        5 => 1,
-        2 => 10,
-        1 => 0,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        5 => 1,
-        6 => 2,
-        2 => 13,
-        1 => 13,
-      },
-      "commitIndex": 2,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        5 => 1,
-        6 => 2,
-        2 => 10,
-        1 => 0,
-      },
-    },
-  ],
-  "interactions": Object {
-    "interactions": Array [],
-    "rootID": 1,
-  },
-  "profilingOperations": Map {
-    1 => Array [
-      Uint32Array [
-        1,
-        1,
-        15,
-        6,
-        80,
-        97,
-        114,
-        101,
-        110,
-        116,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        48,
-        1,
-        1,
-        11,
-        1,
-        1,
-        4,
-        1,
-        11000,
-        1,
-        2,
-        5,
-        1,
-        0,
-        1,
-        0,
-        4,
-        2,
-        11000,
-        1,
-        3,
-        5,
-        2,
-        2,
-        2,
-        3,
-        4,
-        3,
-        0,
-        1,
-        4,
-        8,
-        2,
-        2,
-        2,
-        0,
-        4,
-        4,
-        1000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        8,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        49,
-        1,
-        5,
-        5,
-        2,
-        2,
-        1,
-        2,
-        4,
-        5,
-        1000,
-        4,
-        2,
-        12000,
-        3,
-        2,
-        3,
-        3,
-        5,
-        4,
-        4,
-        1,
-        12000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        8,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        50,
-        1,
-        6,
-        5,
-        2,
-        2,
-        1,
-        2,
-        4,
-        6,
-        2000,
-        4,
-        2,
-        14000,
-        3,
-        2,
-        4,
-        3,
-        5,
-        6,
-        4,
-        4,
-        1,
-        14000,
-      ],
-    ],
-  },
-  "profilingSnapshots": Map {
-    1 => Map {},
-  },
-  "profilingSummary": Object {
-    "commitDurations": Array [
-      11,
-      11,
-      13,
-    ],
-    "commitTimes": Array [
-      11,
-      22,
-      35,
-    ],
-    "initialTreeBaseDurations": Map {},
-    "interactionCount": 0,
-    "rootID": 1,
-  },
-  "version": 3,
-}
-`;
-
-exports[`profiling Interactions should be collected for every traced interaction: Interactions 1`] = `
-Object {
-  "interactions": Array [
-    Object {
-      "__count": 1,
-      "commits": Array [
-        0,
-      ],
-      "id": 0,
-      "name": "mount: one child",
-      "timestamp": 0,
-    },
-    Object {
-      "__count": 0,
-      "commits": Array [
-        1,
-      ],
-      "id": 1,
-      "name": "update: two children",
-      "timestamp": 11,
-    },
-  ],
-  "rootID": 1,
-}
-`;
-
-exports[`profiling Interactions should be collected for every traced interaction: imported data 1`] = `
-Object {
-  "commitDetails": Array [
-    Object {
-      "actualDurations": Map {
-        1 => 11,
-        2 => 11,
-        3 => 0,
-        4 => 1,
-      },
-      "commitIndex": 0,
-      "interactions": Array [
-        Object {
-          "__count": 1,
-          "id": 0,
-          "name": "mount: one child",
-          "timestamp": 0,
-        },
-      ],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        1 => 0,
-        2 => 10,
-        3 => 0,
-        4 => 1,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        5 => 1,
-        2 => 11,
-        1 => 11,
-      },
-      "commitIndex": 1,
-      "interactions": Array [
-        Object {
-          "__count": 0,
-          "id": 1,
-          "name": "update: two children",
-          "timestamp": 11,
-        },
-      ],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        5 => 1,
-        2 => 10,
-        1 => 0,
-      },
-    },
-  ],
-  "interactions": Object {
-    "interactions": Array [
-      Object {
-        "__count": 1,
-        "commits": Array [
-          0,
-        ],
-        "id": 0,
-        "name": "mount: one child",
-        "timestamp": 0,
-      },
-      Object {
-        "__count": 0,
-        "commits": Array [
-          1,
-        ],
-        "id": 1,
-        "name": "update: two children",
-        "timestamp": 11,
-      },
-    ],
-    "rootID": 1,
-  },
-  "profilingOperations": Map {
-    1 => Array [
-      Uint32Array [
-        1,
-        1,
-        15,
-        6,
-        80,
-        97,
-        114,
-        101,
-        110,
-        116,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        48,
-        1,
-        1,
-        11,
-        1,
-        1,
-        4,
-        1,
-        11000,
-        1,
-        2,
-        5,
-        1,
-        0,
-        1,
-        0,
-        4,
-        2,
-        11000,
-        1,
-        3,
-        5,
-        2,
-        2,
-        2,
-        3,
-        4,
-        3,
-        0,
-        1,
-        4,
-        8,
-        2,
-        2,
-        2,
-        0,
-        4,
-        4,
-        1000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        8,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        49,
-        1,
-        5,
-        5,
-        2,
-        2,
-        1,
-        2,
-        4,
-        5,
-        1000,
-        4,
-        2,
-        12000,
-        3,
-        2,
-        3,
-        3,
-        5,
-        4,
-        4,
-        1,
-        12000,
-      ],
-    ],
-  },
-  "profilingSnapshots": Map {
-    1 => Map {},
-  },
-  "profilingSummary": Object {
-    "commitDurations": Array [
-      11,
-      11,
-    ],
-    "commitTimes": Array [
-      11,
-      22,
-    ],
-    "initialTreeBaseDurations": Map {},
-    "interactionCount": 2,
-    "rootID": 1,
-  },
-  "version": 3,
-}
-`;
-
-exports[`profiling ProfilingSummary should be collected for each commit: ProfilingSummary 1`] = `
-Object {
-  "commitDurations": Array [
-    13,
-    10,
-    10,
-  ],
-  "commitTimes": Array [
-    13,
-    23,
-    33,
-  ],
-  "initialTreeBaseDurations": Map {
-    1 => 12,
-    2 => 12,
-    3 => 0,
-    4 => 1,
-    5 => 1,
-  },
-  "interactionCount": 0,
-  "rootID": 1,
-}
-`;
-
-exports[`profiling ProfilingSummary should be collected for each commit: imported data 1`] = `
-Object {
-  "commitDetails": Array [
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        4 => 1,
-        6 => 2,
-        2 => 13,
-        1 => 13,
-      },
-      "commitIndex": 0,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        4 => 1,
-        6 => 2,
-        2 => 10,
-        1 => 0,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        3 => 0,
-        2 => 10,
-        1 => 10,
-      },
-      "commitIndex": 1,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        3 => 0,
-        2 => 10,
-        1 => 0,
-      },
-    },
-    Object {
-      "actualDurations": Map {
-        2 => 10,
-        1 => 10,
-      },
-      "commitIndex": 2,
-      "interactions": Array [],
-      "priorityLevel": "Immediate",
-      "rootID": 1,
-      "selfDurations": Map {
-        2 => 10,
-        1 => 0,
-      },
-    },
-  ],
-  "interactions": Object {
-    "interactions": Array [],
-    "rootID": 1,
-  },
-  "profilingOperations": Map {
-    1 => Array [
-      Uint32Array [
-        1,
-        1,
-        8,
-        5,
-        67,
-        104,
-        105,
-        108,
-        100,
-        1,
-        50,
-        1,
-        6,
-        5,
-        2,
-        2,
-        1,
-        2,
-        4,
-        6,
-        2000,
-        4,
-        2,
-        14000,
-        3,
-        2,
-        4,
-        3,
-        4,
-        6,
-        5,
-        4,
-        1,
-        14000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        0,
-        2,
-        2,
-        6,
-        4,
-        4,
-        2,
-        11000,
-        3,
-        2,
-        2,
-        3,
-        5,
-        4,
-        1,
-        11000,
-      ],
-      Uint32Array [
-        1,
-        1,
-        0,
-        2,
-        1,
-        3,
-      ],
-    ],
-  },
-  "profilingSnapshots": Map {
-    1 => Map {
-      1 => Object {
-        "children": Array [
-          2,
-        ],
-        "displayName": null,
-        "id": 1,
-        "key": null,
-        "type": 11,
-      },
-      2 => Object {
-        "children": Array [
-          3,
-          4,
-          5,
-        ],
-        "displayName": "Parent",
-        "id": 2,
-        "key": null,
-        "type": 5,
-      },
-      3 => Object {
-        "children": Array [],
-        "displayName": "Child",
-        "id": 3,
-        "key": "0",
-        "type": 5,
-      },
-      4 => Object {
-        "children": Array [],
-        "displayName": "Child",
-        "id": 4,
-        "key": "1",
-        "type": 5,
-      },
-      5 => Object {
-        "children": Array [],
-        "displayName": "Child",
-        "id": 5,
-        "key": null,
-        "type": 8,
-      },
-    },
-  },
-  "profilingSummary": Object {
-    "commitDurations": Array [
-      13,
-      10,
-      10,
-    ],
-    "commitTimes": Array [
-      13,
-      23,
-      33,
-    ],
-    "initialTreeBaseDurations": Map {
-      1 => 12,
-      2 => 12,
-      3 => 0,
-      4 => 1,
-      5 => 1,
-    },
-    "interactionCount": 0,
-    "rootID": 1,
-  },
-  "version": 3,
-}
-`;
diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
new file mode 100644
index 000000000000..a6f2d1c4d603
--- /dev/null
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -0,0 +1,1495 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
+Object {
+  "duration": 16,
+  "fiberActualDurations": Map {
+    1 => 16,
+    2 => 16,
+    3 => 1,
+    5 => 1,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 1,
+    5 => 1,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 16,
+}
+`;
+
+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
+Object {
+  "duration": 15,
+  "fiberActualDurations": Map {
+    1 => 15,
+    2 => 15,
+    3 => 5,
+    4 => 2,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 3,
+    4 => 2,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 15,
+}
+`;
+
+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
+Object {
+  "duration": 3,
+  "fiberActualDurations": Map {
+    5 => 3,
+    3 => 3,
+  },
+  "fiberSelfDurations": Map {
+    5 => 3,
+    3 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 18,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "duration": 12,
+  "fiberActualDurations": Map {
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 12,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "duration": 13,
+  "fiberActualDurations": Map {
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 13,
+    1 => 13,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 25,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
+Object {
+  "duration": 10,
+  "fiberActualDurations": Map {
+    3 => 0,
+    2 => 10,
+    1 => 10,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 35,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "duration": 10,
+  "fiberActualDurations": Map {
+    2 => 10,
+    1 => 10,
+  },
+  "fiberSelfDurations": Map {
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 45,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: imported data 1`] = `
+"{
+  \\"version\\": 5,
+  \\"dataForRoots\\": [
+    {
+      \\"commitData\\": [
+        {
+          \\"duration\\": 12,
+          \\"fiberActualDurations\\": [
+            [
+              1,
+              12
+            ],
+            [
+              2,
+              12
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              5,
+              1
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              1,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              5,
+              1
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 12
+        },
+        {
+          \\"duration\\": 13,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              13
+            ],
+            [
+              1,
+              13
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 25
+        },
+        {
+          \\"duration\\": 10,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              10
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 35
+        },
+        {
+          \\"duration\\": 10,
+          \\"fiberActualDurations\\": [
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              10
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 45
+        }
+      ],
+      \\"displayName\\": \\"Parent\\",
+      \\"initialTreeBaseDurations\\": [],
+      \\"interactionCommits\\": [],
+      \\"interactions\\": [],
+      \\"operations\\": [
+        [
+          1,
+          1,
+          17,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          49,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          12000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          12000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          5,
+          2,
+          2,
+          2,
+          4,
+          4,
+          4,
+          1000,
+          1,
+          5,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          5,
+          1000
+        ],
+        [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          4,
+          6,
+          5,
+          4,
+          1,
+          14000
+        ],
+        [
+          1,
+          1,
+          0,
+          2,
+          2,
+          6,
+          4,
+          4,
+          2,
+          11000,
+          3,
+          2,
+          2,
+          3,
+          5,
+          4,
+          1,
+          11000
+        ],
+        [
+          1,
+          1,
+          0,
+          2,
+          1,
+          3
+        ]
+      ],
+      \\"rootID\\": 1,
+      \\"snapshots\\": []
+    }
+  ]
+}"
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 3 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
+Array [
+  0,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
+Array [
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
+Array [
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
+"{
+  \\"version\\": 5,
+  \\"dataForRoots\\": [
+    {
+      \\"commitData\\": [
+        {
+          \\"duration\\": 11,
+          \\"fiberActualDurations\\": [
+            [
+              1,
+              11
+            ],
+            [
+              2,
+              11
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              1,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 11
+        },
+        {
+          \\"duration\\": 11,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              2,
+              11
+            ],
+            [
+              1,
+              11
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 22
+        },
+        {
+          \\"duration\\": 13,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              13
+            ],
+            [
+              1,
+              13
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 35
+        }
+      ],
+      \\"displayName\\": \\"Parent\\",
+      \\"initialTreeBaseDurations\\": [],
+      \\"interactionCommits\\": [],
+      \\"interactions\\": [],
+      \\"operations\\": [
+        [
+          1,
+          1,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          11000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          11000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          4,
+          1000
+        ],
+        [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          49,
+          1,
+          5,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          5,
+          1000,
+          4,
+          2,
+          12000,
+          3,
+          2,
+          3,
+          3,
+          5,
+          4,
+          4,
+          1,
+          12000
+        ],
+        [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          5,
+          6,
+          4,
+          4,
+          1,
+          14000
+        ]
+      ],
+      \\"rootID\\": 1,
+      \\"snapshots\\": []
+    }
+  ]
+}"
+`;
+
+exports[`ProfilingCache should collect data for each root: ProfilingSummary 1`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "duration": 13,
+      "fiberActualDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 13,
+        1 => 13,
+      },
+      "fiberSelfDurations": Map {
+        3 => 0,
+        4 => 1,
+        6 => 2,
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "screenshot": null,
+      "timestamp": 13,
+    },
+    Object {
+      "duration": 10,
+      "fiberActualDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "screenshot": null,
+      "timestamp": 23,
+    },
+    Object {
+      "duration": 10,
+      "fiberActualDurations": Map {
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "screenshot": null,
+      "timestamp": 33,
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [
+    Uint32Array [
+      1,
+      1,
+      8,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      50,
+      1,
+      6,
+      5,
+      2,
+      2,
+      1,
+      2,
+      4,
+      6,
+      2000,
+      4,
+      2,
+      14000,
+      3,
+      2,
+      4,
+      3,
+      4,
+      6,
+      5,
+      4,
+      1,
+      14000,
+    ],
+    Uint32Array [
+      1,
+      1,
+      0,
+      2,
+      2,
+      6,
+      4,
+      4,
+      2,
+      11000,
+      3,
+      2,
+      2,
+      3,
+      5,
+      4,
+      1,
+      11000,
+    ],
+    Uint32Array [
+      1,
+      1,
+      0,
+      2,
+      1,
+      3,
+    ],
+  ],
+  "rootID": 1,
+  "snapshots": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "0",
+      "type": 5,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "1",
+      "type": 5,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
+exports[`ProfilingCache should collect data for each root: imported data 1`] = `
+"{
+  \\"version\\": 5,
+  \\"dataForRoots\\": [
+    {
+      \\"commitData\\": [
+        {
+          \\"duration\\": 13,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              13
+            ],
+            [
+              1,
+              13
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ],
+            [
+              6,
+              2
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 13
+        },
+        {
+          \\"duration\\": 10,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              10
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 23
+        },
+        {
+          \\"duration\\": 10,
+          \\"fiberActualDurations\\": [
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              10
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 33
+        }
+      ],
+      \\"displayName\\": \\"Parent\\",
+      \\"initialTreeBaseDurations\\": [
+        [
+          1,
+          12
+        ],
+        [
+          2,
+          12
+        ],
+        [
+          3,
+          0
+        ],
+        [
+          4,
+          1
+        ],
+        [
+          5,
+          1
+        ]
+      ],
+      \\"interactionCommits\\": [],
+      \\"interactions\\": [],
+      \\"operations\\": [
+        [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          4,
+          6,
+          5,
+          4,
+          1,
+          14000
+        ],
+        [
+          1,
+          1,
+          0,
+          2,
+          2,
+          6,
+          4,
+          4,
+          2,
+          11000,
+          3,
+          2,
+          2,
+          3,
+          5,
+          4,
+          1,
+          11000
+        ],
+        [
+          1,
+          1,
+          0,
+          2,
+          1,
+          3
+        ]
+      ],
+      \\"rootID\\": 1,
+      \\"snapshots\\": [
+        [
+          1,
+          {
+            \\"id\\": 1,
+            \\"children\\": [
+              2
+            ],
+            \\"displayName\\": null,
+            \\"key\\": null,
+            \\"type\\": 11
+          }
+        ],
+        [
+          2,
+          {
+            \\"id\\": 2,
+            \\"children\\": [
+              3,
+              4,
+              5
+            ],
+            \\"displayName\\": \\"Parent\\",
+            \\"key\\": null,
+            \\"type\\": 5
+          }
+        ],
+        [
+          3,
+          {
+            \\"id\\": 3,
+            \\"children\\": [],
+            \\"displayName\\": \\"Child\\",
+            \\"key\\": \\"0\\",
+            \\"type\\": 5
+          }
+        ],
+        [
+          4,
+          {
+            \\"id\\": 4,
+            \\"children\\": [],
+            \\"displayName\\": \\"Child\\",
+            \\"key\\": \\"1\\",
+            \\"type\\": 5
+          }
+        ],
+        [
+          5,
+          {
+            \\"id\\": 5,
+            \\"children\\": [],
+            \\"displayName\\": \\"Child\\",
+            \\"key\\": null,
+            \\"type\\": 8
+          }
+        ]
+      ]
+    }
+  ]
+}"
+`;
+
+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
+Array [
+  Object {
+    "__count": 1,
+    "id": 0,
+    "name": "mount: one child",
+    "timestamp": 0,
+  },
+  Object {
+    "__count": 0,
+    "id": 1,
+    "name": "update: two children",
+    "timestamp": 11,
+  },
+]
+`;
+
+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
+"{
+  \\"version\\": 5,
+  \\"dataForRoots\\": [
+    {
+      \\"commitData\\": [
+        {
+          \\"duration\\": 11,
+          \\"fiberActualDurations\\": [
+            [
+              1,
+              11
+            ],
+            [
+              2,
+              11
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              1,
+              0
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              3,
+              0
+            ],
+            [
+              4,
+              1
+            ]
+          ],
+          \\"interactionIDs\\": [
+            0
+          ],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 11
+        },
+        {
+          \\"duration\\": 11,
+          \\"fiberActualDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              2,
+              11
+            ],
+            [
+              1,
+              11
+            ]
+          ],
+          \\"fiberSelfDurations\\": [
+            [
+              3,
+              0
+            ],
+            [
+              5,
+              1
+            ],
+            [
+              2,
+              10
+            ],
+            [
+              1,
+              0
+            ]
+          ],
+          \\"interactionIDs\\": [
+            1
+          ],
+          \\"priorityLevel\\": \\"Immediate\\",
+          \\"screenshot\\": null,
+          \\"timestamp\\": 22
+        }
+      ],
+      \\"displayName\\": \\"Parent\\",
+      \\"initialTreeBaseDurations\\": [],
+      \\"interactionCommits\\": [
+        [
+          0,
+          [
+            0
+          ]
+        ],
+        [
+          1,
+          [
+            1
+          ]
+        ]
+      ],
+      \\"interactions\\": [
+        [
+          0,
+          {
+            \\"__count\\": 1,
+            \\"id\\": 0,
+            \\"name\\": \\"mount: one child\\",
+            \\"timestamp\\": 0
+          }
+        ],
+        [
+          1,
+          {
+            \\"__count\\": 0,
+            \\"id\\": 1,
+            \\"name\\": \\"update: two children\\",
+            \\"timestamp\\": 11
+          }
+        ]
+      ],
+      \\"operations\\": [
+        [
+          1,
+          1,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          11000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          11000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          4,
+          1000
+        ],
+        [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          49,
+          1,
+          5,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          5,
+          1000,
+          4,
+          2,
+          12000,
+          3,
+          2,
+          3,
+          3,
+          5,
+          4,
+          4,
+          1,
+          12000
+        ]
+      ],
+      \\"rootID\\": 1,
+      \\"snapshots\\": []
+    }
+  ]
+}"
+`;
diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index fb8003ce2370..8399be81c6dd 100644
--- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -247,6 +247,20 @@ Object {
 
 exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
 Object {
+  "interactions": Array [
+    Object {
+      "__count": 1,
+      "id": 0,
+      "name": "mount",
+      "timestamp": 0,
+    },
+    Object {
+      "__count": 0,
+      "id": 1,
+      "name": "update",
+      "timestamp": 15,
+    },
+  ],
   "lastInteractionTime": 25,
   "maxCommitDuration": 15,
 }
@@ -254,6 +268,20 @@ Object {
 
 exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
 Object {
+  "interactions": Array [
+    Object {
+      "__count": 1,
+      "id": 0,
+      "name": "mount",
+      "timestamp": 0,
+    },
+    Object {
+      "__count": 0,
+      "id": 1,
+      "name": "update",
+      "timestamp": 15,
+    },
+  ],
   "lastInteractionTime": 25,
   "maxCommitDuration": 15,
 }
diff --git a/src/__tests__/profilerStore-test.js b/src/__tests__/profilerStore-test.js
new file mode 100644
index 000000000000..d2f7eefef794
--- /dev/null
+++ b/src/__tests__/profilerStore-test.js
@@ -0,0 +1,57 @@
+// @flow
+
+import type Store from 'src/devtools/store';
+
+describe('ProfilerStore', () => {
+  let React;
+  let ReactDOM;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should not remove profiling data when roots are unmounted', async () => {
+    const Parent = ({ count }) =>
+      new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+    const Child = () => <div>Hi!</div>;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={3} />, containerA);
+      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+    });
+
+    utils.act(() => store.startProfiling());
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={4} />, containerA);
+      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    });
+
+    utils.act(() => store.stopProfiling());
+
+    const rootA = store.roots[0];
+    const rootB = store.roots[1];
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+
+    expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
+
+    expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
+  });
+});
diff --git a/src/__tests__/profiling-test.js b/src/__tests__/profiling-test.js
deleted file mode 100644
index d992e72a8884..000000000000
--- a/src/__tests__/profiling-test.js
+++ /dev/null
@@ -1,574 +0,0 @@
-// @flow
-
-import typeof ReactTestRenderer from 'react-test-renderer';
-import type Bridge from 'src/bridge';
-import type Store from 'src/devtools/store';
-
-describe('profiling', () => {
-  let React;
-  let ReactDOM;
-  let Scheduler;
-  let SchedulerTracing;
-  let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
-  let store: Store;
-  let utils;
-
-  beforeEach(() => {
-    utils = require('./utils');
-    utils.beforeEachProfiling();
-
-    bridge = global.bridge;
-    store = global.store;
-    store.collapseNodesByDefault = false;
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
-    TestRenderer = utils.requireTestRenderer();
-  });
-
-  it('should throw if importing older/unsupported data', () => {
-    const {
-      prepareImportedProfilingData,
-    } = require('src/devtools/views/Profiler/utils');
-    expect(() =>
-      prepareImportedProfilingData(
-        JSON.stringify({
-          version: 0,
-        })
-      )
-    ).toThrow('Unsupported profiler export version "0"');
-  });
-
-  describe('ProfilingSummary', () => {
-    it('should be collected for each commit', async done => {
-      const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
-        const children = new Array(count)
-          .fill(true)
-          .map((_, index) => <Child key={index} duration={index} />);
-        return (
-          <React.Fragment>
-            {children}
-            <MemoizedChild duration={1} />
-          </React.Fragment>
-        );
-      };
-      const Child = ({ duration }) => {
-        Scheduler.advanceTime(duration);
-        return null;
-      };
-      const MemoizedChild = React.memo(Child);
-
-      const container = document.createElement('div');
-
-      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-      utils.act(() => store.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={0} />, container));
-      utils.act(() => store.stopProfiling());
-
-      let profilingSummary = null;
-
-      function Suspender({ previousPofilingSummary, rendererID, rootID }) {
-        profilingSummary = store.profilingCache.ProfilingSummary.read({
-          rendererID,
-          rootID,
-        });
-        if (previousPofilingSummary != null) {
-          expect(profilingSummary).toEqual(previousPofilingSummary);
-        } else {
-          expect(profilingSummary).toMatchSnapshot('ProfilingSummary');
-        }
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      await utils.actAsync(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              previousPofilingSummary={null}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
-        )
-      );
-
-      expect(profilingSummary).not.toBeNull();
-
-      utils.exportImportHelper(bridge, store, rendererID, rootID);
-
-      await utils.actAsync(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              previousPofilingSummary={profilingSummary}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
-        )
-      );
-
-      done();
-    });
-  });
-
-  describe('CommitDetails', () => {
-    it('should be collected for each commit', async done => {
-      const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
-        const children = new Array(count)
-          .fill(true)
-          .map((_, index) => <Child key={index} duration={index} />);
-        return (
-          <React.Fragment>
-            {children}
-            <MemoizedChild duration={1} />
-          </React.Fragment>
-        );
-      };
-      const Child = ({ duration }) => {
-        Scheduler.advanceTime(duration);
-        return null;
-      };
-      const MemoizedChild = React.memo(Child);
-
-      const container = document.createElement('div');
-
-      utils.act(() => store.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={0} />, container));
-      utils.act(() => store.stopProfiling());
-
-      const allCommitDetails = [];
-
-      function Suspender({
-        commitIndex,
-        previousCommitDetails,
-        rendererID,
-        rootID,
-      }) {
-        const commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
-          rendererID,
-          rootID,
-        });
-        if (previousCommitDetails != null) {
-          expect(commitDetails).toEqual(previousCommitDetails);
-        } else {
-          allCommitDetails.push(commitDetails);
-          expect(commitDetails).toMatchSnapshot(
-            `CommitDetails commitIndex: ${commitIndex}`
-          );
-        }
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actAsync(() => {
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                commitIndex={commitIndex}
-                previousCommitDetails={null}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          );
-        });
-      }
-
-      expect(allCommitDetails).toHaveLength(4);
-
-      utils.exportImportHelper(bridge, store, rendererID, rootID);
-
-      for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-        await utils.actAsync(() => {
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                commitIndex={commitIndex}
-                previousCommitDetails={allCommitDetails[commitIndex]}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          );
-        });
-      }
-
-      done();
-    });
-
-    it('should calculate a self duration based on actual children (not filtered children)', async done => {
-      store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
-
-      const Grandparent = () => {
-        Scheduler.advanceTime(10);
-        return (
-          <React.Fragment>
-            <Parent key="one" />
-            <Parent key="two" />
-          </React.Fragment>
-        );
-      };
-      const Parent = () => {
-        Scheduler.advanceTime(2);
-        return <Child />;
-      };
-      const Child = () => {
-        Scheduler.advanceTime(1);
-        return null;
-      };
-
-      utils.act(() => store.startProfiling());
-      utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
-      );
-      utils.act(() => store.stopProfiling());
-
-      let commitDetails = null;
-
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
-          rendererID,
-          rootID,
-        });
-        expect(commitDetails).toMatchSnapshot(
-          `CommitDetails with filtered self durations`
-        );
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      await utils.actAsync(() => {
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={0}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
-        );
-      });
-
-      expect(commitDetails).not.toBeNull();
-
-      done();
-    });
-
-    it('should calculate self duration correctly for suspended views', async done => {
-      let data;
-      const getData = () => {
-        if (data) {
-          return data;
-        } else {
-          throw new Promise(resolve => {
-            data = 'abc';
-            resolve(data);
-          });
-        }
-      };
-
-      const Parent = () => {
-        Scheduler.advanceTime(10);
-        return (
-          <React.Suspense fallback={<Fallback />}>
-            <Async />
-          </React.Suspense>
-        );
-      };
-      const Fallback = () => {
-        Scheduler.advanceTime(2);
-        return 'Fallback...';
-      };
-      const Async = () => {
-        Scheduler.advanceTime(3);
-        const data = getData();
-        return data;
-      };
-
-      utils.act(() => store.startProfiling());
-      await utils.actAsync(() =>
-        ReactDOM.render(<Parent />, document.createElement('div'))
-      );
-      utils.act(() => store.stopProfiling());
-
-      const allCommitDetails = [];
-
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        const commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
-          rendererID,
-          rootID,
-        });
-        allCommitDetails.push(commitDetails);
-        expect(commitDetails).toMatchSnapshot(
-          `CommitDetails with filtered self durations`
-        );
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        await utils.actAsync(() => {
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                commitIndex={commitIndex}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          );
-        });
-      }
-
-      expect(allCommitDetails).toHaveLength(2);
-
-      done();
-    });
-  });
-
-  describe('FiberCommits', () => {
-    it('should be collected for each rendered fiber', async done => {
-      const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
-        const children = new Array(count)
-          .fill(true)
-          .map((_, index) => <Child key={index} duration={index} />);
-        return (
-          <React.Fragment>
-            {children}
-            <MemoizedChild duration={1} />
-          </React.Fragment>
-        );
-      };
-      const Child = ({ duration }) => {
-        Scheduler.advanceTime(duration);
-        return null;
-      };
-      const MemoizedChild = React.memo(Child);
-
-      const container = document.createElement('div');
-
-      utils.act(() => store.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-      utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-      utils.act(() => store.stopProfiling());
-
-      const allFiberCommits = [];
-
-      function Suspender({
-        fiberID,
-        previousFiberCommits,
-        rendererID,
-        rootID,
-      }) {
-        const fiberCommits = store.profilingCache.FiberCommits.read({
-          fiberID,
-          rendererID,
-          rootID,
-        });
-        if (previousFiberCommits != null) {
-          expect(fiberCommits).toEqual(previousFiberCommits);
-        } else {
-          allFiberCommits.push(fiberCommits);
-          expect(fiberCommits).toMatchSnapshot(
-            `FiberCommits: element ${fiberID}`
-          );
-        }
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      for (let index = 0; index < store.numElements; index++) {
-        await utils.actAsync(() => {
-          const fiberID = store.getElementIDAtIndex(index);
-          if (fiberID == null) {
-            throw Error(`Unexpected null ID for element at index ${index}`);
-          }
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                fiberID={fiberID}
-                previousFiberCommits={null}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          );
-        });
-      }
-
-      expect(allFiberCommits).toHaveLength(store.numElements);
-
-      utils.exportImportHelper(bridge, store, rendererID, rootID);
-
-      for (let index = 0; index < store.numElements; index++) {
-        await utils.actAsync(() => {
-          const fiberID = store.getElementIDAtIndex(index);
-          if (fiberID == null) {
-            throw Error(`Unexpected null ID for element at index ${index}`);
-          }
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender
-                fiberID={fiberID}
-                previousFiberCommits={allFiberCommits[index]}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
-            </React.Suspense>
-          );
-        });
-      }
-
-      done();
-    });
-  });
-
-  describe('Interactions', () => {
-    it('should be collected for every traced interaction', async done => {
-      const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
-        const children = new Array(count)
-          .fill(true)
-          .map((_, index) => <Child key={index} duration={index} />);
-        return (
-          <React.Fragment>
-            {children}
-            <MemoizedChild duration={1} />
-          </React.Fragment>
-        );
-      };
-      const Child = ({ duration }) => {
-        Scheduler.advanceTime(duration);
-        return null;
-      };
-      const MemoizedChild = React.memo(Child);
-
-      const container = document.createElement('div');
-
-      utils.act(() => store.startProfiling());
-      utils.act(() =>
-        SchedulerTracing.unstable_trace(
-          'mount: one child',
-          Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent count={1} />, container)
-        )
-      );
-      utils.act(() =>
-        SchedulerTracing.unstable_trace(
-          'update: two children',
-          Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent count={2} />, container)
-        )
-      );
-      utils.act(() => store.stopProfiling());
-
-      let interactions = null;
-
-      function Suspender({ previousInteractions, rendererID, rootID }) {
-        interactions = store.profilingCache.Interactions.read({
-          rendererID,
-          rootID,
-        });
-        if (previousInteractions != null) {
-          expect(interactions).toEqual(previousInteractions);
-        } else {
-          expect(interactions).toMatchSnapshot('Interactions');
-        }
-        return null;
-      }
-
-      const rendererID = utils.getRendererID();
-      const rootID = store.roots[0];
-
-      await utils.actAsync(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              previousInteractions={null}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
-        )
-      );
-
-      expect(interactions).not.toBeNull();
-
-      utils.exportImportHelper(bridge, store, rendererID, rootID);
-
-      await utils.actAsync(() =>
-        TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              previousInteractions={interactions}
-              rendererID={rendererID}
-              rootID={rootID}
-            />
-          </React.Suspense>
-        )
-      );
-
-      done();
-    });
-  });
-
-  it('should remove profiling data when roots are unmounted', async () => {
-    const Parent = ({ count }) =>
-      new Array(count)
-        .fill(true)
-        .map((_, index) => <Child key={index} duration={index} />);
-    const Child = () => <div>Hi!</div>;
-
-    const containerA = document.createElement('div');
-    const containerB = document.createElement('div');
-
-    utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={3} />, containerA);
-      ReactDOM.render(<Parent key="B" count={2} />, containerB);
-    });
-
-    utils.act(() => store.startProfiling());
-
-    utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={4} />, containerA);
-      ReactDOM.render(<Parent key="B" count={1} />, containerB);
-    });
-
-    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
-
-    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
-
-    utils.act(() => store.stopProfiling());
-
-    // Assert all maps are empty
-    store.assertExpectedRootMapSizes();
-  });
-});
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
new file mode 100644
index 000000000000..04e4a9fddaf1
--- /dev/null
+++ b/src/__tests__/profilingCache-test.js
@@ -0,0 +1,465 @@
+// @flow
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
+describe('ProfilingCache', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let SchedulerTracing;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  it('should collect data for each root', async done => {
+    const Parent = ({ count }) => {
+      Scheduler.advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => {
+      Scheduler.advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => store.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => store.stopProfiling());
+
+    let profilingDataForRoot = null;
+
+    // TODO (profarc) Add multi roots
+
+    function Suspender({ previousProfilingDataForRoot, rootID }) {
+      profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
+      if (previousProfilingDataForRoot != null) {
+        expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
+      } else {
+        expect(profilingDataForRoot).toMatchSnapshot('ProfilingSummary');
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <React.Suspense fallback={null}>
+          <Suspender previousProfilingDataForRoot={null} rootID={rootID} />
+        </React.Suspense>
+      )
+    );
+
+    expect(profilingDataForRoot).not.toBeNull();
+
+    utils.exportImportHelper(bridge, store, rootID);
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <React.Suspense fallback={null}>
+          <Suspender
+            previousProfilingDataForRoot={profilingDataForRoot}
+            rootID={rootID}
+          />
+        </React.Suspense>
+      )
+    );
+
+    done();
+  });
+
+  it('should collect data for each commit', async done => {
+    const Parent = ({ count }) => {
+      Scheduler.advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => {
+      Scheduler.advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => store.stopProfiling());
+
+    const allCommitData = [];
+
+    function Suspender({ commitIndex, previousCommitDetails, rootID }) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      if (previousCommitDetails != null) {
+        expect(commitData).toEqual(previousCommitDetails);
+      } else {
+        allCommitData.push(commitData);
+        expect(commitData).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      await utils.actAsync(() => {
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={commitIndex}
+              previousCommitDetails={null}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(4);
+
+    utils.exportImportHelper(bridge, store, rootID);
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      await utils.actAsync(() => {
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              commitIndex={commitIndex}
+              previousCommitDetails={allCommitData[commitIndex]}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        );
+      });
+    }
+
+    done();
+  });
+
+  it('should calculate a self duration based on actual children (not filtered children)', async done => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => {
+      Scheduler.advanceTime(10);
+      return (
+        <React.Fragment>
+          <Parent key="one" />
+          <Parent key="two" />
+        </React.Fragment>
+      );
+    };
+    const Parent = () => {
+      Scheduler.advanceTime(2);
+      return <Child />;
+    };
+    const Child = () => {
+      Scheduler.advanceTime(1);
+      return null;
+    };
+
+    utils.act(() => store.startProfiling());
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div'))
+    );
+    utils.act(() => store.stopProfiling());
+
+    let commitData = null;
+
+    function Suspender({ commitIndex, rootID }) {
+      commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      expect(commitData).toMatchSnapshot(
+        `CommitDetails with filtered self durations`
+      );
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <React.Suspense fallback={null}>
+          <Suspender commitIndex={0} rootID={rootID} />
+        </React.Suspense>
+      );
+    });
+
+    expect(commitData).not.toBeNull();
+
+    done();
+  });
+
+  it('should calculate self duration correctly for suspended views', async done => {
+    let data;
+    const getData = () => {
+      if (data) {
+        return data;
+      } else {
+        throw new Promise(resolve => {
+          data = 'abc';
+          resolve(data);
+        });
+      }
+    };
+
+    const Parent = () => {
+      Scheduler.advanceTime(10);
+      return (
+        <React.Suspense fallback={<Fallback />}>
+          <Async />
+        </React.Suspense>
+      );
+    };
+    const Fallback = () => {
+      Scheduler.advanceTime(2);
+      return 'Fallback...';
+    };
+    const Async = () => {
+      Scheduler.advanceTime(3);
+      const data = getData();
+      return data;
+    };
+
+    utils.act(() => store.startProfiling());
+    await utils.actAsync(() =>
+      ReactDOM.render(<Parent />, document.createElement('div'))
+    );
+    utils.act(() => store.stopProfiling());
+
+    const allCommitData = [];
+
+    function Suspender({ commitIndex, rootID }) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      allCommitData.push(commitData);
+      expect(commitData).toMatchSnapshot(
+        `CommitDetails with filtered self durations`
+      );
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+      await utils.actAsync(() => {
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender commitIndex={commitIndex} rootID={rootID} />
+          </React.Suspense>
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(2);
+
+    done();
+  });
+
+  it('should collect data for each rendered fiber', async done => {
+    const Parent = ({ count }) => {
+      Scheduler.advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => {
+      Scheduler.advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => store.stopProfiling());
+
+    const allFiberCommits = [];
+
+    function Suspender({ fiberID, previousFiberCommits, rootID }) {
+      const fiberCommits = store.profilingCache.getFiberCommits({
+        fiberID,
+        rootID,
+      });
+      if (previousFiberCommits != null) {
+        expect(fiberCommits).toEqual(previousFiberCommits);
+      } else {
+        allFiberCommits.push(fiberCommits);
+        expect(fiberCommits).toMatchSnapshot(
+          `FiberCommits: element ${fiberID}`
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let index = 0; index < store.numElements; index++) {
+      await utils.actAsync(() => {
+        const fiberID = store.getElementIDAtIndex(index);
+        if (fiberID == null) {
+          throw Error(`Unexpected null ID for element at index ${index}`);
+        }
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              fiberID={fiberID}
+              previousFiberCommits={null}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        );
+      });
+    }
+
+    expect(allFiberCommits).toHaveLength(store.numElements);
+
+    utils.exportImportHelper(bridge, store, rootID);
+
+    for (let index = 0; index < store.numElements; index++) {
+      await utils.actAsync(() => {
+        const fiberID = store.getElementIDAtIndex(index);
+        if (fiberID == null) {
+          throw Error(`Unexpected null ID for element at index ${index}`);
+        }
+        TestRenderer.create(
+          <React.Suspense fallback={null}>
+            <Suspender
+              fiberID={fiberID}
+              previousFiberCommits={allFiberCommits[index]}
+              rootID={rootID}
+            />
+          </React.Suspense>
+        );
+      });
+    }
+
+    done();
+  });
+
+  it('should report every traced interaction', async done => {
+    const Parent = ({ count }) => {
+      Scheduler.advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({ duration }) => {
+      Scheduler.advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.startProfiling());
+    utils.act(() =>
+      SchedulerTracing.unstable_trace(
+        'mount: one child',
+        Scheduler.unstable_now(),
+        () => ReactDOM.render(<Parent count={1} />, container)
+      )
+    );
+    utils.act(() =>
+      SchedulerTracing.unstable_trace(
+        'update: two children',
+        Scheduler.unstable_now(),
+        () => ReactDOM.render(<Parent count={2} />, container)
+      )
+    );
+    utils.act(() => store.stopProfiling());
+
+    let interactions = null;
+
+    function Suspender({ previousInteractions, rootID }) {
+      interactions = store.profilingCache.getInteractionsChartData({
+        rootID,
+      }).interactions;
+      if (previousInteractions != null) {
+        expect(interactions).toEqual(previousInteractions);
+      } else {
+        expect(interactions).toMatchSnapshot('Interactions');
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <React.Suspense fallback={null}>
+          <Suspender previousInteractions={null} rootID={rootID} />
+        </React.Suspense>
+      )
+    );
+
+    expect(interactions).not.toBeNull();
+
+    utils.exportImportHelper(bridge, store, rootID);
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <React.Suspense fallback={null}>
+          <Suspender previousInteractions={interactions} rootID={rootID} />
+        </React.Suspense>
+      )
+    );
+
+    done();
+  });
+});
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 62e2c40b3083..33d698600b88 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -62,59 +62,45 @@ describe('profiling charts', () => {
       );
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      let renderFinished = false;
 
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        const profilingSummary = store.profilingCache.ProfilingSummary.read({
-          rendererID,
-          rootID,
-        });
-        const commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
-          rendererID,
-          rootID,
-        });
-        suspenseResolved = true;
+      function Suspender({ commitIndex, rootID }) {
         const commitTree = store.profilingCache.getCommitTree({
           commitIndex,
-          profilingSummary,
+          rootID,
         });
         const chartData = store.profilingCache.getFlamegraphChartData({
-          commitDetails,
           commitIndex,
           commitTree,
+          rootID,
         });
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(
           `${commitIndex}: FlamegraphChartData`
         );
+        renderFinished = true;
         return null;
       }
 
-      const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        suspenseResolved = false;
+        renderFinished = false;
 
         await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
+                <Suspender commitIndex={commitIndex} rootID={rootID} />
               </React.Suspense>
             ),
           3
         );
 
-        expect(suspenseResolved).toBe(true);
+        expect(renderFinished).toBe(true);
       }
 
-      expect(suspenseResolved).toBe(true);
+      expect(renderFinished).toBe(true);
 
       done();
     });
@@ -156,54 +142,40 @@ describe('profiling charts', () => {
       );
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      let renderFinished = false;
 
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        const profilingSummary = store.profilingCache.ProfilingSummary.read({
-          rendererID,
-          rootID,
-        });
-        const commitDetails = store.profilingCache.CommitDetails.read({
-          commitIndex,
-          rendererID,
-          rootID,
-        });
-        suspenseResolved = true;
+      function Suspender({ commitIndex, rootID }) {
         const commitTree = store.profilingCache.getCommitTree({
           commitIndex,
-          profilingSummary,
+          rootID,
         });
         const chartData = store.profilingCache.getRankedChartData({
-          commitDetails,
           commitIndex,
           commitTree,
+          rootID,
         });
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
+        renderFinished = true;
         return null;
       }
 
-      const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        suspenseResolved = false;
+        renderFinished = false;
 
         await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
+                <Suspender commitIndex={commitIndex} rootID={rootID} />
               </React.Suspense>
             ),
           3
         );
 
-        expect(suspenseResolved).toBe(true);
+        expect(renderFinished).toBe(true);
       }
 
       done();
@@ -246,47 +218,33 @@ describe('profiling charts', () => {
       );
       utils.act(() => store.stopProfiling());
 
-      let suspenseResolved = false;
+      let renderFinished = false;
 
-      function Suspender({ commitIndex, rendererID, rootID }) {
-        const profilingSummary = store.profilingCache.ProfilingSummary.read({
-          rendererID,
-          rootID,
-        });
-        const { interactions } = store.profilingCache.Interactions.read({
-          rendererID,
-          rootID,
-        });
-        suspenseResolved = true;
+      function Suspender({ commitIndex, rootID }) {
         const chartData = store.profilingCache.getInteractionsChartData({
-          interactions,
-          profilingSummary,
+          rootID,
         });
         expect(chartData).toMatchSnapshot('Interactions');
+        renderFinished = true;
         return null;
       }
 
-      const rendererID = utils.getRendererID();
       const rootID = store.roots[0];
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        suspenseResolved = false;
+        renderFinished = false;
 
         await utils.actAsync(
           () =>
             TestRenderer.create(
               <React.Suspense fallback={null}>
-                <Suspender
-                  commitIndex={commitIndex}
-                  rendererID={rendererID}
-                  rootID={rootID}
-                />
+                <Suspender commitIndex={commitIndex} rootID={rootID} />
               </React.Suspense>
             ),
           3
         );
 
-        expect(suspenseResolved).toBe(true);
+        expect(renderFinished).toBe(true);
       }
 
       done();
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 8356a0fd4ae5..31d7acafcf3a 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -45,43 +45,34 @@ describe('commit tree', () => {
     utils.act(() => ReactDOM.render(<Parent count={0} />, container));
     utils.act(() => store.stopProfiling());
 
-    let suspenseResolved = false;
+    let renderFinished = false;
 
-    function Suspender({ commitIndex, rendererID, rootID }) {
-      const profilingSummary = store.profilingCache.ProfilingSummary.read({
-        rendererID,
-        rootID,
-      });
-      suspenseResolved = true;
+    function Suspender({ commitIndex, rootID }) {
       const commitTree = store.profilingCache.getCommitTree({
         commitIndex,
-        profilingSummary,
+        rootID,
       });
       expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+      renderFinished = true;
       return null;
     }
 
-    const rendererID = utils.getRendererID();
     const rootID = store.roots[0];
 
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      suspenseResolved = false;
+      renderFinished = false;
 
       await utils.actAsync(
         () =>
           TestRenderer.create(
             <React.Suspense fallback={null}>
-              <Suspender
-                commitIndex={commitIndex}
-                rendererID={rendererID}
-                rootID={rootID}
-              />
+              <Suspender commitIndex={commitIndex} rootID={rootID} />
             </React.Suspense>
           ),
         3
       );
 
-      expect(suspenseResolved).toBe(true);
+      expect(renderFinished).toBe(true);
     }
 
     done();
diff --git a/src/__tests__/profilingUtils-test.js b/src/__tests__/profilingUtils-test.js
new file mode 100644
index 000000000000..66029a256870
--- /dev/null
+++ b/src/__tests__/profilingUtils-test.js
@@ -0,0 +1,20 @@
+// @flow
+
+describe('profiling utils', () => {
+  let utils;
+
+  beforeEach(() => {
+    utils = require('src/devtools/views/Profiler/utils');
+  });
+
+  it('should throw if importing older/unsupported data', () => {
+    expect(() =>
+      utils.prepareProfilingDataFrontendFromExport(
+        ({
+          version: 0,
+          dataForRoots: [],
+        }: any)
+      )
+    ).toThrow('Unsupported profiler export version "0"');
+  });
+});
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index dd5b4b4646de..934e1a593b48 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -2,10 +2,10 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 
-import type { ElementType } from 'src/types';
-
 import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
+import type { ProfilingDataFrontend } from 'src/devtools/views/Profiler/types';
+import type { ElementType } from 'src/types';
 
 export function act(callback: Function): void {
   const TestUtils = require('react-dom/test-utils');
@@ -136,54 +136,44 @@ export function requireTestRenderer(): ReactTestRenderer {
 export function exportImportHelper(
   bridge: Bridge,
   store: Store,
-  rendererID: number,
   rootID: number
 ): void {
   const { act } = require('./utils');
   const {
-    prepareExportedProfilingSummary,
-    prepareImportedProfilingData,
+    prepareProfilingDataExport,
+    prepareProfilingDataFrontendFromExport,
   } = require('src/devtools/views/Profiler/utils');
 
-  let exportedProfilingDataJsonString = '';
-  const onExportFile = ({ contents }) => {
-    if (typeof contents === 'string') {
-      exportedProfilingDataJsonString = (contents: string);
-    }
-  };
-  bridge.addListener('exportFile', onExportFile);
-
-  act(() => {
-    const exportProfilingSummary = prepareExportedProfilingSummary(
-      store.profilingOperations,
-      store.profilingSnapshots,
-      rendererID,
-      rootID
-    );
-    bridge.send('exportProfilingSummary', exportProfilingSummary);
-  });
+  const { profilerStore } = store;
 
-  // Cleanup to be able to call this again on the same bridge without memory leaks.
-  bridge.removeListener('exportFile', onExportFile);
+  expect(profilerStore.profilingData).not.toBeNull();
 
-  expect(typeof exportedProfilingDataJsonString).toBe('string');
-  expect(exportedProfilingDataJsonString).not.toBe('');
+  const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);
 
-  const profilingData = prepareImportedProfilingData(
-    exportedProfilingDataJsonString
+  const profilingDataExport = prepareProfilingDataExport(
+    profilingDataFrontendInitial
   );
-  // Sanity check that profiling snapshots are serialized correctly.
-  expect(store.profilingSnapshots.get(rootID)).toEqual(
-    profilingData.profilingSnapshots.get(rootID)
+
+  // Simulate writing/reading to disk.
+  const serializedProfilingDataExport = JSON.stringify(
+    profilingDataExport,
+    null,
+    2
   );
-  expect(store.profilingOperations.get(rootID)).toEqual(
-    profilingData.profilingOperations.get(rootID)
+  const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);
+
+  const profilingDataFrontend = prepareProfilingDataFrontendFromExport(
+    (parsedProfilingDataExport: any)
   );
 
+  // Sanity check that profiling snapshots are serialized correctly.
+  expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);
+
   // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
-  expect(profilingData).toMatchSnapshot('imported data');
+  expect(serializedProfilingDataExport).toMatchSnapshot('imported data');
 
   act(() => {
-    store.profilingData = profilingData;
+    // Apply the new exported-then-reimported data so tests can re-run assertions.
+    profilerStore.profilingData = profilingDataFrontend;
   });
 }
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 097ad00827d2..08469d4d47bf 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -10,7 +10,6 @@ import {
 } from '../constants';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
-import type { ExportedProfilingSummaryFromFrontend } from 'src/devtools/views/Profiler/types';
 import type {
   PathFrame,
   PathMatch,
@@ -20,8 +19,6 @@ import type {
 import type { OwnersList } from 'src/devtools/views/Components/types';
 import type { Bridge, ComponentFilter } from '../types';
 
-import { prepareExportedProfilingData } from 'src/devtools/views/Profiler/utils';
-
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
     console.log(
@@ -96,12 +93,8 @@ export default class Agent extends EventEmitter {
       'clearHighlightedElementInDOM',
       this.clearHighlightedElementInDOM
     );
-    bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);
-    bridge.addListener('getCommitDetails', this.getCommitDetails);
-    bridge.addListener('getFiberCommits', this.getFiberCommits);
-    bridge.addListener('getInteractions', this.getInteractions);
+    bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
-    bridge.addListener('getProfilingSummary', this.getProfilingSummary);
     bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
@@ -154,109 +147,19 @@ export default class Agent extends EventEmitter {
     return null;
   }
 
-  exportProfilingSummary = (
-    exportedProfilingSummary: ExportedProfilingSummaryFromFrontend
-  ): void => {
-    const { rendererID, rootID } = exportedProfilingSummary;
+  getProfilingData = ({ rendererID }: {| rendererID: RendererID |}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
-      return;
-    }
-    try {
-      const exportedProfilingDataFromRenderer = renderer.getExportedProfilingData(
-        rootID
-      );
-      const exportedProfilingData = prepareExportedProfilingData(
-        exportedProfilingDataFromRenderer,
-        exportedProfilingSummary
-      );
-      this._bridge.send('exportFile', {
-        contents: JSON.stringify(exportedProfilingData, null, 2),
-        filename: 'profile-data.json',
-      });
-    } catch (error) {
-      console.warn(`Unable to export file: ${error.stack}`);
     }
-  };
 
-  getCommitDetails = ({
-    commitIndex,
-    rendererID,
-    rootID,
-  }: {
-    commitIndex: number,
-    rendererID: number,
-    rootID: number,
-  }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}"`);
-    } else {
-      this._bridge.send(
-        'commitDetails',
-        renderer.getCommitDetails(rootID, commitIndex)
-      );
-    }
-  };
-
-  getFiberCommits = ({
-    fiberID,
-    rendererID,
-    rootID,
-  }: {
-    fiberID: number,
-    rendererID: number,
-    rootID: number,
-  }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}"`);
-    } else {
-      this._bridge.send(
-        'fiberCommits',
-        renderer.getFiberCommits(rootID, fiberID)
-      );
-    }
-  };
-
-  getInteractions = ({
-    rendererID,
-    rootID,
-  }: {
-    rendererID: number,
-    rootID: number,
-  }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}"`);
-    } else {
-      this._bridge.send('interactions', renderer.getInteractions(rootID));
-    }
+    this._bridge.send('profilingData', renderer.getProfilingData());
   };
 
   getProfilingStatus = () => {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  getProfilingSummary = ({
-    rendererID,
-    rootID,
-  }: {
-    rendererID: number,
-    rootID: number,
-  }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}"`);
-    } else {
-      this._bridge.send(
-        'profilingSummary',
-        renderer.getProfilingSummary(rootID)
-      );
-    }
-  };
-
   clearHighlightedElementInDOM = () => {
     hideOverlay();
   };
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b0532eefaea2..f4e8a6ffe93a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -18,7 +18,6 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
 } from 'src/types';
-import { PROFILER_EXPORT_VERSION } from 'src/constants';
 import {
   getDisplayName,
   getDefaultComponentFilters,
@@ -37,17 +36,13 @@ import {
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
-  CommitDetailsBackend,
+  CommitDataBackend,
   DevToolsHook,
-  ExportedProfilingDataFromRenderer,
   Fiber,
-  FiberCommitsBackend,
-  InteractionBackend,
-  InteractionsBackend,
-  InteractionWithCommitsBackend,
   PathFrame,
   PathMatch,
-  ProfilingSummaryBackend,
+  ProfilingDataBackend,
+  ProfilingDataForRootBackend,
   ReactRenderer,
   RendererInterface,
 } from './types';
@@ -55,6 +50,7 @@ import type {
   InspectedElement,
   Owner,
 } from 'src/devtools/views/Components/types';
+import type { Interaction } from 'src/devtools/views/Profiler/types';
 import type { ComponentFilter, ElementType } from 'src/types';
 
 function getInternalReactConstants(version) {
@@ -820,6 +816,12 @@ export function attach(
       pushOperation(ElementTypeRoot);
       pushOperation(isProfilingSupported ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
+
+      if (isProfiling) {
+        if (displayNamesByRootID !== null) {
+          displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));
+        }
+      }
     } else {
       const { key } = fiber;
       const displayName = getDisplayNameForFiber(fiber);
@@ -1286,7 +1288,7 @@ export function attach(
             durations: [],
             commitTime: performance.now() - profilingStartTime,
             interactions: Array.from(root.memoizedInteractions).map(
-              (interaction: InteractionBackend) => ({
+              (interaction: Interaction) => ({
                 ...interaction,
                 timestamp: interaction.timestamp - profilingStartTime,
               })
@@ -1329,7 +1331,7 @@ export function attach(
         durations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: InteractionBackend) => ({
+          (interaction: Interaction) => ({
             ...interaction,
             timestamp: interaction.timestamp - profilingStartTime,
           })
@@ -1981,188 +1983,113 @@ export function attach(
   type CommitProfilingData = {|
     commitTime: number,
     durations: Array<number>,
-    interactions: Array<InteractionBackend>,
+    interactions: Array<Interaction>,
     maxActualDuration: number,
     priorityLevel: string | null,
   |};
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
+  type DisplayNamesByRootID = Map<number, string>;
 
   let currentCommitProfilingMetadata: CommitProfilingData | null = null;
+  let displayNamesByRootID: DisplayNamesByRootID | null = null;
   let initialTreeBaseDurationsMap: Map<number, number> | null = null;
   let initialIDToRootMap: Map<number, number> | null = null;
   let isProfiling: boolean = false;
   let profilingStartTime: number = 0;
   let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
 
-  function getCommitDetails(
-    rootID: number,
-    commitIndex: number
-  ): CommitDetailsBackend {
-    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-      rootID
-    );
-    if (commitProfilingMetadata != null) {
-      const commitProfilingData = commitProfilingMetadata[commitIndex];
-      if (commitProfilingData != null) {
-        return {
-          commitIndex,
-          durations: commitProfilingData.durations,
-          interactions: commitProfilingData.interactions,
-          priorityLevel: commitProfilingData.priorityLevel,
-          rootID,
-        };
-      }
+  function getProfilingData(): ProfilingDataBackend {
+    const dataForRoots: Array<ProfilingDataForRootBackend> = [];
+
+    if (rootToCommitProfilingMetadataMap === null) {
+      throw Error(
+        'getProfilingData() called before any profiling data was recorded'
+      );
     }
 
-    console.warn(
-      `getCommitDetails(): No profiling info recorded for root "${rootID}" and commit ${commitIndex}`
-    );
+    rootToCommitProfilingMetadataMap.forEach(
+      (commitProfilingMetadata, rootID) => {
+        const commitData: Array<CommitDataBackend> = [];
+        const initialTreeBaseDurations: Array<[number, number]> = [];
+        const allInteractions: Map<number, Interaction> = new Map();
+        const interactionCommits: Map<number, Array<number>> = new Map();
 
-    return {
-      commitIndex,
-      durations: [],
-      interactions: [],
-      priorityLevel: null,
-      rootID,
-    };
-  }
+        const displayName =
+          (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||
+          'Unknown';
 
-  function getFiberCommits(
-    rootID: number,
-    fiberID: number
-  ): FiberCommitsBackend {
-    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-      rootID
-    );
-    if (commitProfilingMetadata != null) {
-      const commitDurations = [];
-      commitProfilingMetadata.forEach(({ durations }, commitIndex) => {
-        for (let i = 0; i < durations.length; i += 3) {
-          if (durations[i] === fiberID) {
-            commitDurations.push(commitIndex, durations[i + 2]);
-            break;
-          }
+        if (initialTreeBaseDurationsMap != null) {
+          initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
+            if (
+              initialIDToRootMap != null &&
+              initialIDToRootMap.get(id) === rootID
+            ) {
+              // We don't need to convert milliseconds to microseconds in this case,
+              // because the profiling summary is JSON serialized.
+              initialTreeBaseDurations.push([id, treeBaseDuration]);
+            }
+          });
         }
-      });
-
-      return {
-        commitDurations,
-        fiberID,
-        rootID,
-      };
-    }
 
-    console.warn(
-      `getFiberCommits(): No profiling info recorded for root "${rootID}"`
-    );
+        commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
+          const {
+            durations,
+            interactions,
+            maxActualDuration,
+            priorityLevel,
+            commitTime,
+          } = commitProfilingData;
 
-    return {
-      commitDurations: [],
-      fiberID,
-      rootID,
-    };
-  }
+          const interactionIDs: Array<number> = [];
 
-  function getInteractions(rootID: number): InteractionsBackend {
-    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-      rootID
-    );
-    if (commitProfilingMetadata != null) {
-      const interactionsMap: Map<
-        number,
-        InteractionWithCommitsBackend
-      > = new Map();
-
-      commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
-        commitProfilingData.interactions.forEach(interaction => {
-          const interactionWithCommits = interactionsMap.get(interaction.id);
-          if (interactionWithCommits != null) {
-            interactionWithCommits.commits.push(commitIndex);
-          } else {
-            interactionsMap.set(interaction.id, {
-              ...interaction,
-              commits: [commitIndex],
-            });
-          }
-        });
-      });
+          interactions.forEach(interaction => {
+            if (!allInteractions.has(interaction.id)) {
+              allInteractions.set(interaction.id, interaction);
+            }
 
-      return {
-        interactions: Array.from(interactionsMap.values()),
-        rootID,
-      };
-    }
+            interactionIDs.push(interaction.id);
 
-    console.warn(
-      `getInteractions(): No interactions recorded for root "${rootID}"`
-    );
+            const commitIndices = interactionCommits.get(interaction.id);
+            if (commitIndices != null) {
+              commitIndices.push(commitIndex);
+            } else {
+              interactionCommits.set(interaction.id, [commitIndex]);
+            }
+          });
+
+          const fiberActualDurations: Array<[number, number]> = [];
+          const fiberSelfDurations: Array<[number, number]> = [];
+          for (let i = 0; i < durations.length; i += 3) {
+            const fiberID = durations[i];
+            fiberActualDurations.push([fiberID, durations[i + 1]]);
+            fiberSelfDurations.push([fiberID, durations[i + 2]]);
+          }
 
-    return {
-      interactions: [],
-      rootID,
-    };
-  }
+          commitData.push({
+            duration: maxActualDuration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            timestamp: commitTime,
+          });
+        });
 
-  function getExportedProfilingData(
-    rootID: number
-  ): ExportedProfilingDataFromRenderer {
-    const commitDetailsForEachCommit = [];
-    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-      rootID
-    );
-    if (commitProfilingMetadata != null) {
-      for (let index = 0; index < commitProfilingMetadata.length; index++) {
-        commitDetailsForEachCommit.push(getCommitDetails(rootID, index));
+        dataForRoots.push({
+          commitData,
+          displayName,
+          initialTreeBaseDurations,
+          interactionCommits: Array.from(interactionCommits.entries()),
+          interactions: Array.from(allInteractions.entries()),
+          rootID,
+        });
       }
-    }
-
-    return {
-      version: PROFILER_EXPORT_VERSION,
-      profilingSummary: getProfilingSummary(rootID),
-      commitDetails: commitDetailsForEachCommit,
-      interactions: getInteractions(rootID),
-    };
-  }
-
-  function getProfilingSummary(rootID: number): ProfilingSummaryBackend {
-    const interactions = new Set();
-    const commitDurations = [];
-    const commitTimes = [];
-
-    const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-      rootID
     );
-    if (commitProfilingMetadata != null) {
-      commitProfilingMetadata.forEach(metadata => {
-        commitDurations.push(metadata.maxActualDuration);
-        commitTimes.push(metadata.commitTime);
-        metadata.interactions.forEach(({ name, timestamp }) => {
-          interactions.add(`${timestamp}:${name}`);
-        });
-      });
-    }
-
-    const initialTreeBaseDurations = [];
-    if (initialTreeBaseDurationsMap != null) {
-      initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
-        if (
-          initialIDToRootMap != null &&
-          initialIDToRootMap.get(id) === rootID
-        ) {
-          // We don't need to convert milliseconds to microseconds in this case,
-          // because the profiling summary is JSON serialized.
-          initialTreeBaseDurations.push(id, treeBaseDuration);
-        }
-      });
-    }
 
     return {
-      commitDurations,
-      commitTimes,
-      initialTreeBaseDurations,
-      interactionCount: interactions.size,
-      rootID,
+      dataForRoots,
+      rendererID,
     };
   }
 
@@ -2175,9 +2102,18 @@ export function attach(
     // It's important we snapshot both the durations and the id-to-root map,
     // since either of these may change during the profiling session
     // (e.g. when a fiber is re-rendered or when a fiber gets removed).
+    displayNamesByRootID = new Map();
     initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);
     initialIDToRootMap = new Map(idToRootMap);
 
+    hook.getFiberRoots(rendererID).forEach(root => {
+      const rootID = getFiberID(getPrimaryFiber(root.current));
+      ((displayNamesByRootID: any): DisplayNamesByRootID).set(
+        rootID,
+        getDisplayNameForRoot(root.current)
+      );
+    });
+
     isProfiling = true;
     profilingStartTime = performance.now();
     rootToCommitProfilingMetadataMap = new Map();
@@ -2313,6 +2249,32 @@ export function attach(
   const rootDisplayNameCounter: Map<string, number> = new Map();
 
   function setRootPseudoKey(id: number, fiber: Fiber) {
+    const name = getDisplayNameForRoot(fiber);
+    const counter = rootDisplayNameCounter.get(name) || 0;
+    rootDisplayNameCounter.set(name, counter + 1);
+    const pseudoKey = `${name}:${counter}`;
+    rootPseudoKeys.set(id, pseudoKey);
+  }
+
+  function removeRootPseudoKey(id: number) {
+    const pseudoKey = rootPseudoKeys.get(id);
+    if (pseudoKey === undefined) {
+      throw new Error('Expected root pseudo key to be known.');
+    }
+    const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));
+    const counter = rootDisplayNameCounter.get(name);
+    if (counter === undefined) {
+      throw new Error('Expected counter to be known.');
+    }
+    if (counter > 1) {
+      rootDisplayNameCounter.set(name, counter - 1);
+    } else {
+      rootDisplayNameCounter.delete(name);
+    }
+    rootPseudoKeys.delete(id);
+  }
+
+  function getDisplayNameForRoot(fiber: Fiber): string {
     let preferredDisplayName = null;
     let fallbackDisplayName = null;
     let child = fiber.child;
@@ -2339,29 +2301,7 @@ export function attach(
       }
       child = child.child;
     }
-    const name = preferredDisplayName || fallbackDisplayName || 'Anonymous';
-    const counter = rootDisplayNameCounter.get(name) || 0;
-    rootDisplayNameCounter.set(name, counter + 1);
-    const pseudoKey = `${name}:${counter}`;
-    rootPseudoKeys.set(id, pseudoKey);
-  }
-
-  function removeRootPseudoKey(id: number) {
-    const pseudoKey = rootPseudoKeys.get(id);
-    if (pseudoKey === undefined) {
-      throw new Error('Expected root pseudo key to be known.');
-    }
-    const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));
-    const counter = rootDisplayNameCounter.get(name);
-    if (counter === undefined) {
-      throw new Error('Expected counter to be known.');
-    }
-    if (counter > 1) {
-      rootDisplayNameCounter.set(name, counter - 1);
-    } else {
-      rootDisplayNameCounter.delete(name);
-    }
-    rootPseudoKeys.delete(id);
+    return preferredDisplayName || fallbackDisplayName || 'Anonymous';
   }
 
   function getPathFrame(fiber: Fiber): PathFrame {
@@ -2459,15 +2399,11 @@ export function attach(
     cleanup,
     flushInitialOperations,
     getBestMatchForTrackedPath,
-    getCommitDetails,
     getFiberIDFromNative,
-    getFiberCommits,
-    getInteractions,
     findNativeByFiberID,
     getOwnersList,
     getPathForElement,
-    getExportedProfilingData,
-    getProfilingSummary,
+    getProfilingData,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     inspectElement,
diff --git a/src/backend/types.js b/src/backend/types.js
index 431619db15f7..a2a17dd5a133 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -5,6 +5,7 @@ import type {
   InspectedElement,
   Owner,
 } from 'src/devtools/views/Components/types';
+import type { Interaction } from 'src/devtools/views/Profiler/types';
 
 type BundleType =
   | 0 // PROD
@@ -115,51 +116,33 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
-export type InteractionBackend = {|
-  id: number,
-  name: string,
-  timestamp: number,
-|};
-
-export type CommitDetailsBackend = {|
-  commitIndex: number,
-  // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
-  durations: Array<number>,
-  interactions: Array<InteractionBackend>,
+export type CommitDataBackend = {|
+  duration: number,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  interactionIDs: Array<number>,
   priorityLevel: string | null,
-  rootID: number,
-|};
-
-export type FiberCommitsBackend = {|
-  commitDurations: Array<number>,
-  fiberID: number,
-  rootID: number,
-|};
-
-export type InteractionWithCommitsBackend = {|
-  ...InteractionBackend,
-  commits: Array<number>,
-|};
-
-export type InteractionsBackend = {|
-  interactions: Array<InteractionWithCommitsBackend>,
-  rootID: number,
+  timestamp: number,
 |};
 
-export type ProfilingSummaryBackend = {|
-  commitDurations: Array<number>,
-  commitTimes: Array<number>,
-  // An interleaved array: fiberID at [i], initialTreeBaseDuration at [i + 1].
-  initialTreeBaseDurations: Array<number>,
-  interactionCount: number,
+export type ProfilingDataForRootBackend = {|
+  commitData: Array<CommitDataBackend>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  // Tuple of Interaction ID and commit indices
+  interactionCommits: Array<[number, Array<number>]>,
+  interactions: Array<[number, Interaction]>,
   rootID: number,
 |};
 
-export type ExportedProfilingDataFromRenderer = {|
-  version: 3,
-  profilingSummary: ProfilingSummaryBackend,
-  commitDetails: Array<CommitDetailsBackend>,
-  interactions: InteractionsBackend,
+// Profiling data collected by the renderer interface.
+// This information will be passed to the frontend and combined with info it collects.
+export type ProfilingDataBackend = {|
+  dataForRoots: Array<ProfilingDataForRootBackend>,
+  rendererID: number,
 |};
 
 export type PathFrame = {|
@@ -178,21 +161,12 @@ export type RendererInterface = {
   findNativeByFiberID: (id: number) => ?Array<NativeType>,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
-  getCommitDetails: (
-    rootID: number,
-    commitIndex: number
-  ) => CommitDetailsBackend,
   getFiberIDFromNative: (
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,
-  getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,
-  getInteractions: (rootID: number) => InteractionsBackend,
+  getProfilingData(): ProfilingDataBackend,
   getOwnersList: (id: number) => Array<Owner> | null,
-  getExportedProfilingData: (
-    rootID: number
-  ) => ExportedProfilingDataFromRenderer,
-  getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/src/constants.js b/src/constants.js
index 66341ac58477..5d43b93b5cee 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -16,4 +16,4 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
 
 export const __DEBUG__ = false;
 
-export const PROFILER_EXPORT_VERSION = 3;
+export const PROFILER_EXPORT_VERSION = 5;
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
new file mode 100644
index 000000000000..41b547682aeb
--- /dev/null
+++ b/src/devtools/ProfilerStore.js
@@ -0,0 +1,370 @@
+// @flow
+
+import EventEmitter from 'events';
+import memoize from 'memoize-one';
+import throttle from 'lodash.throttle';
+import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
+import ProfilingCache from './ProfilingCache';
+import Store from './store';
+
+import type { ProfilingDataBackend } from 'src/backend/types';
+import type {
+  CommitDataFrontend,
+  ProfilingDataForRootFrontend,
+  ProfilingDataFrontend,
+  SnapshotNode,
+} from './views/Profiler/types';
+import type { Bridge } from '../types';
+
+const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
+
+export default class ProfilerStore extends EventEmitter {
+  _bridge: Bridge;
+
+  // Suspense cache for lazily calculating derived profiling data.
+  _cache: ProfilingCache;
+
+  // Temporary store of profiling data from the backend renderer(s).
+  // This data will be converted to the ProfilingDataFrontend format after being collected from all renderers.
+  _dataBackends: Array<ProfilingDataBackend> = [];
+
+  // Data from the most recently completed profiling session,
+  // or data that has been imported from a previously exported session.
+  // This object contains all necessary data to drive the Profiler UI interface,
+  // even though some of it is lazily parsed/derived via the ProfilingCache.
+  _dataFrontend: ProfilingDataFrontend | null = null;
+
+  // Snapshot of the state of the main Store (including all roots) when profiling started.
+  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
+  // to reconstruct the state of each root for each commit.
+  // It's okay to use a single root to store this information because node IDs are unique across all roots.
+  //
+  // This map is only updated while profiling is in progress;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _initialSnapshotsByRootID: Map<number, Map<number, SnapshotNode>> = new Map();
+
+  // Map of root (id) to a list of tree mutation that occur during profiling.
+  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
+  // to reconstruct the state of each root for each commit.
+  //
+  // This map is only updated while profiling is in progress;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _inProgressOperationsByRootID: Map<number, Array<Uint32Array>> = new Map();
+
+  // Map of root (id) to a Map of screenshots by commit ID.
+  // Stores screenshots for each commit (when profiling).
+  //
+  // This map is only updated while profiling is in progress;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _inProgressScreenshotsByRootID: Map<number, Map<number, string>> = new Map();
+
+  // The backend is currently profiling.
+  // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
+  _isProfiling: boolean = false;
+
+  // After profiling, data is requested from each attached renderer using this queue.
+  // So long as this queue is not empty, the store is retrieving and processing profiling data from the backend.
+  _rendererQueue: Set<number> = new Set();
+
+  _store: Store;
+
+  constructor(bridge: Bridge, store: Store, defaultIsProfiling: boolean) {
+    super();
+
+    this._bridge = bridge;
+    this._isProfiling = defaultIsProfiling;
+    this._store = store;
+
+    bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener('profilingData', this.onBridgeProfilingData);
+    bridge.addListener('profilingStatus', this.onProfilingStatus);
+    bridge.addListener('shutdown', this.onBridgeShutdown);
+
+    // It's possible that profiling has already started (e.g. "reload and start profiling")
+    // so the frontend needs to ask the backend for its status after mounting.
+    bridge.send('getProfilingStatus');
+
+    this._cache = new ProfilingCache(this);
+  }
+
+  getCommitData(rootID: number, commitIndex: number): CommitDataFrontend {
+    if (this._dataFrontend !== null) {
+      const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);
+      if (dataForRoot != null) {
+        const commitDatum = dataForRoot.commitData[commitIndex];
+        if (commitDatum != null) {
+          return commitDatum;
+        }
+      }
+    }
+
+    throw Error(
+      `Could not find commit data for root "${rootID}" and commit ${commitIndex}`
+    );
+  }
+
+  getDataForRoot(rootID: number): ProfilingDataForRootFrontend {
+    if (this._dataFrontend !== null) {
+      const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);
+      if (dataForRoot != null) {
+        return dataForRoot;
+      }
+    }
+
+    throw Error(`Could not find commit data for root "${rootID}"`);
+  }
+
+  get cache(): ProfilingCache {
+    return this._cache;
+  }
+
+  // Profiling data has been recorded for at least one root.
+  get hasProfilingData(): boolean {
+    return (
+      this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0
+    );
+  }
+
+  // TODO (profarc) Remove this getter
+  get initialSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
+    return this._initialSnapshotsByRootID;
+  }
+
+  // TODO (profarc) Remove this getter
+  get inProgressOperationsByRootID(): Map<number, Array<Uint32Array>> {
+    return this._inProgressOperationsByRootID;
+  }
+
+  // TODO (profarc) Remove this getter
+  get inProgressScreenshotsByRootID(): Map<number, Map<number, string>> {
+    return this._inProgressScreenshotsByRootID;
+  }
+
+  get isProcessingData(): boolean {
+    return this._rendererQueue.size > 0 || this._dataBackends.length > 0;
+  }
+
+  get isProfiling(): boolean {
+    return this._isProfiling;
+  }
+
+  get profilingData(): ProfilingDataFrontend | null {
+    return this._dataFrontend;
+  }
+  set profilingData(value: ProfilingDataFrontend | null): void {
+    this._dataBackends.splice(0);
+    this._dataFrontend = value;
+    this._initialSnapshotsByRootID.clear();
+    this._inProgressOperationsByRootID.clear();
+    this._inProgressScreenshotsByRootID.clear();
+    this._cache.invalidate();
+
+    // TODO (profarc) Remove subscriptions to Store for this
+    this._store.emit('profilingData');
+    this.emit('profilingData');
+  }
+
+  clear(): void {
+    this._dataBackends.splice(0);
+    this._dataFrontend = null;
+    this._initialSnapshotsByRootID.clear();
+    this._inProgressOperationsByRootID.clear();
+    this._inProgressScreenshotsByRootID.clear();
+
+    // Invalidate suspense cache if profiling data is being (re-)recorded.
+    // Note that we clear now because any existing data is "stale".
+    this._cache.invalidate();
+
+    // TODO (profarc) Remove subscriptions to Store for this
+    this._store.emit('isProfiling');
+    this.emit('isProfiling');
+  }
+
+  startProfiling(): void {
+    this._bridge.send('startProfiling');
+
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+  }
+
+  stopProfiling(): void {
+    this._bridge.send('stopProfiling');
+
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+  }
+
+  _captureScreenshot = throttle(
+    memoize((rootID: number, commitIndex: number) => {
+      this._bridge.send('captureScreenshot', { commitIndex, rootID });
+    }),
+    THROTTLE_CAPTURE_SCREENSHOT_DURATION
+  );
+
+  _takeProfilingSnapshotRecursive = (
+    elementID: number,
+    profilingSnapshots: Map<number, SnapshotNode>
+  ) => {
+    const element = this._store.getElementByID(elementID);
+    if (element !== null) {
+      const snapshotNode: SnapshotNode = {
+        id: elementID,
+        children: element.children.slice(0),
+        displayName: element.displayName,
+        key: element.key,
+        type: element.type,
+      };
+      profilingSnapshots.set(elementID, snapshotNode);
+
+      element.children.forEach(childID =>
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)
+      );
+    }
+  };
+
+  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));
+    }
+
+    // The first two values are always rendererID and rootID
+    const rootID = operations[1];
+
+    if (this._isProfiling) {
+      let profilingOperations = this._inProgressOperationsByRootID.get(rootID);
+      if (profilingOperations == null) {
+        profilingOperations = [operations];
+        this._inProgressOperationsByRootID.set(rootID, profilingOperations);
+      } else {
+        profilingOperations.push(operations);
+      }
+
+      if (!this._initialSnapshotsByRootID.has(rootID)) {
+        this._initialSnapshotsByRootID.set(rootID, new Map());
+      }
+
+      if (this._store.captureScreenshots) {
+        const commitIndex = profilingOperations.length - 1;
+        this._captureScreenshot(rootID, commitIndex);
+      }
+    }
+  };
+
+  onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {
+    if (this._isProfiling) {
+      // This should never happen, but if it does- ignore previous profiling data.
+      return;
+    }
+
+    const { rendererID } = dataBackend;
+
+    if (!this._rendererQueue.has(rendererID)) {
+      throw Error(
+        `Unexpected profiling data update from renderer "${rendererID}"`
+      );
+    }
+
+    this._dataBackends.push(dataBackend);
+    this._rendererQueue.delete(rendererID);
+
+    if (this._rendererQueue.size === 0) {
+      this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(
+        this._dataBackends,
+        this._inProgressOperationsByRootID,
+        this._inProgressScreenshotsByRootID,
+        this._initialSnapshotsByRootID
+      );
+
+      this._dataBackends.splice(0);
+
+      // TODO (profarc) Remove subscriptions to Store for this
+      this._store.emit('isProcessingData');
+      this.emit('isProcessingData');
+    }
+  };
+
+  onBridgeShutdown = () => {
+    this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
+    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
+  };
+
+  onProfilingStatus = (isProfiling: boolean) => {
+    if (isProfiling) {
+      this._dataBackends.splice(0);
+      this._dataFrontend = null;
+      this._initialSnapshotsByRootID.clear();
+      this._inProgressOperationsByRootID.clear();
+      this._inProgressScreenshotsByRootID.clear();
+      this._rendererQueue.clear();
+
+      // Record snapshot of tree at the time profiling is started.
+      // This info is required to handle cases of e.g. nodes being removed during profiling.
+      this._store.roots.forEach(rootID => {
+        const profilingSnapshots = new Map();
+        this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);
+        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
+      });
+    }
+
+    if (this._isProfiling !== isProfiling) {
+      this._isProfiling = isProfiling;
+
+      // Invalidate suspense cache if profiling data is being (re-)recorded.
+      // Note that we clear again, in case any views read from the cache while profiling.
+      // (That would have resolved a now-stale value without any profiling data.)
+      this._cache.invalidate();
+
+      // TODO (profarc) Remove subscriptions to Store for this
+      this._store.emit('isProfiling');
+      this.emit('isProfiling');
+
+      // If we've just finished a profiling session, we need to fetch data stored in each renderer interface
+      // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI.
+      // During this time, DevTools UI should probably not be interactive.
+      if (!isProfiling) {
+        this._dataBackends.splice(0);
+        this._rendererQueue.clear();
+
+        for (let rendererID of this._store.rootIDToRendererID.values()) {
+          if (!this._rendererQueue.has(rendererID)) {
+            this._rendererQueue.add(rendererID);
+
+            this._bridge.send('getProfilingData', { rendererID });
+          }
+        }
+
+        // TODO (profarc) Remove subscriptions to Store for this
+        this._store.emit('isProcessingData');
+        this.emit('isProcessingData');
+      }
+    }
+  };
+
+  onScreenshotCaptured = ({
+    commitIndex,
+    dataURL,
+    rootID,
+  }: {|
+    commitIndex: number,
+    dataURL: string,
+    rootID: number,
+  |}) => {
+    let screenshotsForRootByCommitIndex = this._inProgressScreenshotsByRootID.get(
+      rootID
+    );
+    if (!screenshotsForRootByCommitIndex) {
+      screenshotsForRootByCommitIndex = new Map();
+      this._inProgressScreenshotsByRootID.set(
+        rootID,
+        screenshotsForRootByCommitIndex
+      );
+    }
+    screenshotsForRootByCommitIndex.set(commitIndex, dataURL);
+  };
+}
diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js
index a334edd4c85f..d8f1819ddb63 100644
--- a/src/devtools/ProfilingCache.js
+++ b/src/devtools/ProfilingCache.js
@@ -1,7 +1,6 @@
 // @flow
 
-import { createResource } from './cache';
-import Store from './store';
+import ProfilerStore from './ProfilerStore';
 import {
   getCommitTree,
   invalidateCommitTrees,
@@ -19,415 +18,105 @@ import {
   invalidateChartData as invalidateRankedChartData,
 } from 'src/devtools/views/Profiler/RankedChartBuilder';
 
-import type { Resource } from './cache';
-import type {
-  CommitDetailsBackend,
-  FiberCommitsBackend,
-  InteractionsBackend,
-  ProfilingSummaryBackend,
-} from 'src/backend/types';
-import type {
-  CommitDetailsFrontend,
-  FiberCommitsFrontend,
-  InteractionsFrontend,
-  InteractionWithCommitsFrontend,
-  CommitTreeFrontend,
-  ProfilingSummaryFrontend,
-} from 'src/devtools/views/Profiler/types';
+import type { CommitTree } from 'src/devtools/views/Profiler/types';
 import type { ChartData as FlamegraphChartData } from 'src/devtools/views/Profiler/FlamegraphChartBuilder';
 import type { ChartData as InteractionsChartData } from 'src/devtools/views/Profiler/InteractionsChartBuilder';
 import type { ChartData as RankedChartData } from 'src/devtools/views/Profiler/RankedChartBuilder';
-import type { Bridge } from 'src/types';
-
-type CommitDetailsParams = {|
-  commitIndex: number,
-  rendererID: number,
-  rootID: number,
-|};
-
-type FiberCommitsParams = {|
-  fiberID: number,
-  rendererID: number,
-  rootID: number,
-|};
-
-type InteractionsParams = {|
-  rendererID: number,
-  rootID: number,
-|};
-
-type GetCommitTreeParams = {|
-  commitIndex: number,
-  profilingSummary: ProfilingSummaryFrontend,
-|};
-
-type ProfilingSummaryParams = {|
-  rendererID: number,
-  rootID: number,
-|};
 
 export default class ProfilingCache {
-  _bridge: Bridge;
-  _store: Store;
-
-  _pendingCommitDetailsMap: Map<
-    string,
-    (commitDetails: CommitDetailsFrontend) => void
-  > = new Map();
-
-  _pendingFiberCommitsMap: Map<
-    string,
-    (fiberCommits: FiberCommitsFrontend) => void
-  > = new Map();
-
-  _pendingInteractionsMap: Map<
-    number,
-    (interactions: InteractionsFrontend) => void
-  > = new Map();
-
-  _pendingProfileSummaryMap: Map<
-    number,
-    (profilingSummary: ProfilingSummaryFrontend) => void
-  > = new Map();
-
-  CommitDetails: Resource<
-    CommitDetailsParams,
-    string,
-    CommitDetailsFrontend
-  > = createResource(
-    ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {
-      return new Promise(resolve => {
-        const pendingKey = `${rootID}-${commitIndex}`;
-        const profilingData = this._store.profilingData;
-        if (profilingData !== null) {
-          const commitDetailsByCommitIndex = profilingData.commitDetails;
-          if (
-            commitDetailsByCommitIndex != null &&
-            commitIndex < commitDetailsByCommitIndex.length
-          ) {
-            const commitDetails = commitDetailsByCommitIndex[commitIndex];
-            if (commitDetails != null) {
-              this._pendingCommitDetailsMap.delete(pendingKey);
-              resolve(commitDetails);
-              return;
-            }
-          }
-        } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingCommitDetailsMap.set(pendingKey, resolve);
-          this._bridge.send('getCommitDetails', {
-            commitIndex,
-            rendererID,
-            rootID,
-          });
-          return;
-        }
-
-        this._pendingCommitDetailsMap.delete(pendingKey);
-
-        // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
-          rootID,
-          commitIndex,
-          actualDurations: new Map(),
-          priorityLevel: null,
-          interactions: [],
-          selfDurations: new Map(),
-        });
-      });
-    },
-    ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>
-      `${rootID}-${commitIndex}`
-  );
-
-  FiberCommits: Resource<
-    FiberCommitsParams,
-    string,
-    FiberCommitsFrontend
-  > = createResource(
-    ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {
-      return new Promise(resolve => {
-        const pendingKey = `${rootID}-${fiberID}`;
-        const profilingData = this._store.profilingData;
-        if (profilingData !== null) {
-          const { commitDetails } = profilingData;
-          const commitDurations = [];
-          commitDetails.forEach(({ selfDurations }, commitIndex) => {
-            const selfDuration = selfDurations.get(fiberID);
-            if (selfDuration != null) {
-              commitDurations.push(commitIndex, selfDuration);
-            }
-          });
-          this._pendingFiberCommitsMap.delete(pendingKey);
-          resolve({
-            commitDurations,
-            fiberID,
-            rootID,
-          });
-          return;
-        } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingFiberCommitsMap.set(pendingKey, resolve);
-          this._bridge.send('getFiberCommits', {
-            fiberID,
-            rendererID,
-            rootID,
-          });
-          return;
-        }
-
-        this._pendingFiberCommitsMap.delete(pendingKey);
-
-        // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
-          commitDurations: [],
-          fiberID,
-          rootID,
-        });
-      });
-    },
-    ({ fiberID, rendererID, rootID }: FiberCommitsParams) =>
-      `${rootID}-${fiberID}`
-  );
-
-  Interactions: Resource<
-    InteractionsParams,
-    number,
-    InteractionsFrontend
-  > = createResource(
-    ({ rendererID, rootID }: InteractionsParams) => {
-      return new Promise(resolve => {
-        const pendingKey = rootID;
-        const profilingData = this._store.profilingData;
-        if (profilingData !== null) {
-          const interactionsFrontend: InteractionsFrontend =
-            profilingData.interactions;
-          if (interactionsFrontend != null) {
-            this._pendingInteractionsMap.delete(pendingKey);
-            resolve(interactionsFrontend);
-            return;
-          }
-        } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingInteractionsMap.set(pendingKey, resolve);
-          this._bridge.send('getInteractions', {
-            rendererID,
-            rootID,
-          });
-          return;
-        }
-
-        this._pendingInteractionsMap.delete(pendingKey);
+  _fiberCommits: Map<number, Array<number>> = new Map();
+  _profilerStore: ProfilerStore;
 
-        // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
-          interactions: [],
-          rootID,
-        });
-      });
-    },
-    ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
-  );
-
-  ProfilingSummary: Resource<
-    ProfilingSummaryParams,
-    number,
-    ProfilingSummaryFrontend
-  > = createResource(
-    ({ rendererID, rootID }: ProfilingSummaryParams) => {
-      return new Promise(resolve => {
-        const pendingKey = rootID;
-        const profilingData = this._store.profilingData;
-        if (profilingData !== null) {
-          const profilingSummaryFrontend: ProfilingSummaryFrontend =
-            profilingData.profilingSummary;
-          if (profilingSummaryFrontend != null) {
-            this._pendingProfileSummaryMap.delete(pendingKey);
-            resolve(profilingSummaryFrontend);
-            return;
-          }
-        } else if (this._store.profilingOperations.has(rootID)) {
-          this._pendingProfileSummaryMap.set(pendingKey, resolve);
-          this._bridge.send('getProfilingSummary', { rendererID, rootID });
-          return;
-        }
-
-        this._pendingProfileSummaryMap.delete(pendingKey);
-
-        // If no profiling data was recorded for this root, skip the round trip.
-        resolve({
-          rootID,
-          commitDurations: [],
-          commitTimes: [],
-          initialTreeBaseDurations: new Map(),
-          interactionCount: 0,
-        });
-      });
-    },
-    ({ rendererID, rootID }: ProfilingSummaryParams) => rootID
-  );
-
-  constructor(bridge: Bridge, store: Store) {
-    this._bridge = bridge;
-    this._store = store;
-
-    bridge.addListener('commitDetails', this.onCommitDetails);
-    bridge.addListener('fiberCommits', this.onFiberCommits);
-    bridge.addListener('interactions', this.onInteractions);
-    bridge.addListener('profilingSummary', this.onProfileSummary);
+  constructor(profilerStore: ProfilerStore) {
+    this._profilerStore = profilerStore;
   }
 
-  getCommitTree = ({ commitIndex, profilingSummary }: GetCommitTreeParams) =>
+  getCommitTree = ({
+    commitIndex,
+    rootID,
+  }: {|
+    commitIndex: number,
+    rootID: number,
+  |}) =>
     getCommitTree({
       commitIndex,
-      profilingSummary,
-      store: this._store,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getFiberCommits = ({
+    fiberID,
+    rootID,
+  }: {|
+    fiberID: number,
+    rootID: number,
+  |}): Array<number> => {
+    const cachedFiberCommits = this._fiberCommits.get(fiberID);
+    if (cachedFiberCommits != null) {
+      return cachedFiberCommits;
+    }
+
+    const fiberCommits = [];
+    const dataForRoot = this._profilerStore.getDataForRoot(rootID);
+    dataForRoot.commitData.forEach((commitDatum, commitIndex) => {
+      if (commitDatum.fiberActualDurations.has(fiberID)) {
+        fiberCommits.push(commitIndex);
+      }
     });
 
+    this._fiberCommits.set(fiberID, fiberCommits);
+
+    return fiberCommits;
+  };
+
   getFlamegraphChartData = ({
-    commitDetails,
     commitIndex,
     commitTree,
+    rootID,
   }: {|
-    commitDetails: CommitDetailsFrontend,
     commitIndex: number,
-    commitTree: CommitTreeFrontend,
+    commitTree: CommitTree,
+    rootID: number,
   |}): FlamegraphChartData =>
     getFlamegraphChartData({
-      commitDetails,
       commitIndex,
       commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
     });
 
   getInteractionsChartData = ({
-    interactions,
-    profilingSummary,
+    rootID,
   }: {|
-    interactions: Array<InteractionWithCommitsFrontend>,
-    profilingSummary: ProfilingSummaryFrontend,
+    rootID: number,
   |}): InteractionsChartData =>
     getInteractionsChartData({
-      interactions,
-      profilingSummary,
+      profilerStore: this._profilerStore,
+      rootID,
     });
 
   getRankedChartData = ({
-    commitDetails,
     commitIndex,
     commitTree,
+    rootID,
   }: {|
-    commitDetails: CommitDetailsFrontend,
     commitIndex: number,
-    commitTree: CommitTreeFrontend,
+    commitTree: CommitTree,
+    rootID: number,
   |}): RankedChartData =>
     getRankedChartData({
-      commitDetails,
       commitIndex,
       commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
     });
 
   invalidate() {
-    // Invalidate Suspense caches.
-    this.CommitDetails.clear();
-    this.FiberCommits.clear();
-    this.Interactions.clear();
-    this.ProfilingSummary.clear();
+    this._fiberCommits.clear();
 
-    // Invalidate non-Suspense caches too.
     invalidateCommitTrees();
     invalidateFlamegraphChartData();
     invalidateInteractionsChartData();
     invalidateRankedChartData();
-
-    this._pendingCommitDetailsMap.clear();
-    this._pendingFiberCommitsMap.clear();
-    this._pendingInteractionsMap.clear();
-    this._pendingProfileSummaryMap.clear();
   }
-
-  onCommitDetails = ({
-    commitIndex,
-    durations,
-    interactions,
-    priorityLevel,
-    rootID,
-  }: CommitDetailsBackend) => {
-    const key = `${rootID}-${commitIndex}`;
-    const resolve = this._pendingCommitDetailsMap.get(key);
-    if (resolve != null) {
-      this._pendingCommitDetailsMap.delete(key);
-
-      const actualDurationsMap = new Map<number, number>();
-      const selfDurationsMap = new Map<number, number>();
-      for (let i = 0; i < durations.length; i += 3) {
-        const fiberID = durations[i];
-        actualDurationsMap.set(fiberID, durations[i + 1]);
-        selfDurationsMap.set(fiberID, durations[i + 2]);
-      }
-
-      resolve({
-        actualDurations: actualDurationsMap,
-        commitIndex,
-        interactions,
-        priorityLevel,
-        rootID,
-        selfDurations: selfDurationsMap,
-      });
-    }
-  };
-
-  onFiberCommits = ({
-    commitDurations,
-    fiberID,
-    rootID,
-  }: FiberCommitsBackend) => {
-    const key = `${rootID}-${fiberID}`;
-    const resolve = this._pendingFiberCommitsMap.get(key);
-    if (resolve != null) {
-      this._pendingFiberCommitsMap.delete(key);
-
-      resolve({
-        commitDurations,
-        fiberID,
-        rootID,
-      });
-    }
-  };
-
-  onInteractions = ({ interactions, rootID }: InteractionsBackend) => {
-    const resolve = this._pendingInteractionsMap.get(rootID);
-    if (resolve != null) {
-      this._pendingInteractionsMap.delete(rootID);
-
-      resolve({
-        interactions,
-        rootID,
-      });
-    }
-  };
-
-  onProfileSummary = ({
-    commitDurations,
-    commitTimes,
-    initialTreeBaseDurations,
-    interactionCount,
-    rootID,
-  }: ProfilingSummaryBackend) => {
-    const resolve = this._pendingProfileSummaryMap.get(rootID);
-    if (resolve != null) {
-      this._pendingProfileSummaryMap.delete(rootID);
-
-      const initialTreeBaseDurationsMap = new Map();
-      for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
-        const fiberID = initialTreeBaseDurations[i];
-        const initialTreeBaseDuration = initialTreeBaseDurations[i + 1];
-        initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
-      }
-
-      resolve({
-        commitDurations,
-        commitTimes,
-        initialTreeBaseDurations: initialTreeBaseDurationsMap,
-        interactionCount,
-        rootID,
-      });
-    }
-  };
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 21ae3255d0a0..1385c0743112 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -1,8 +1,6 @@
 // @flow
 
 import EventEmitter from 'events';
-import memoize from 'memoize-one';
-import throttle from 'lodash.throttle';
 import { inspect } from 'util';
 import {
   TREE_OPERATION_ADD,
@@ -19,11 +17,12 @@ import {
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 import { printStore } from 'src/__tests__/storeSerializer';
+import ProfilerStore from './ProfilerStore';
 
 import type { Element } from './views/Components/types';
 import type {
-  ImportedProfilingData,
-  ProfilingSnapshotNode,
+  ProfilingDataFrontend,
+  SnapshotNode,
 } from './views/Profiler/types';
 import type { Bridge, ComponentFilter, ElementType } from '../types';
 
@@ -43,8 +42,6 @@ const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
 const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
   'React::DevTools::collapseNodesByDefault';
 
-const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
-
 type Config = {|
   isProfiling?: boolean,
   supportsCaptureScreenshots?: boolean,
@@ -80,37 +77,11 @@ export default class Store extends EventEmitter {
   // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
-  // The backend is currently profiling.
-  // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
-  _isProfiling: boolean = false;
-
   // Map of element (id) to the set of elements (ids) it owns.
   // This map enables getOwnersListForElement() to avoid traversing the entire tree.
   _ownersMap: Map<number, Set<number>> = new Map();
 
-  // Suspense cache for reading profiling data.
-  _profilingCache: ProfilingCache;
-
-  // The user has imported a previously exported profiling session.
-  _profilingData: ImportedProfilingData | null = null;
-
-  // Map of root (id) to a list of tree mutation that occur during profiling.
-  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
-  // to reconstruct the state of each root for each commit.
-  _profilingOperationsByRootID: Map<number, Array<Uint32Array>> = new Map();
-
-  // Map of root (id) to a Map of screenshots by commit ID.
-  // Stores screenshots for each commit (when profiling).
-  _profilingScreenshotsByRootID: Map<number, Map<number, string>> = new Map();
-
-  // Snapshot of the state of the main Store (including all roots) when profiling started.
-  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
-  // to reconstruct the state of each root for each commit.
-  // It's okay to use a single root to store this information because node IDs are unique across all roots.
-  _profilingSnapshotsByRootID: Map<
-    number,
-    Map<number, ProfilingSnapshotNode>
-  > = new Map();
+  _profilerStore: ProfilerStore;
 
   // Incremented each time the store is mutated.
   // This enables a passive effect to detect a mutation between render and commit phase.
@@ -150,17 +121,16 @@ export default class Store extends EventEmitter {
 
     this._componentFilters = getSavedComponentFilters();
 
+    let isProfiling = false;
     if (config != null) {
+      isProfiling = config.isProfiling === true;
+
       const {
-        isProfiling,
         supportsCaptureScreenshots,
         supportsFileDownloads,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
-      if (isProfiling) {
-        this._isProfiling = true;
-      }
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
         this._captureScreenshots =
@@ -180,15 +150,9 @@ export default class Store extends EventEmitter {
 
     this._bridge = bridge;
     bridge.addListener('operations', this.onBridgeOperations);
-    bridge.addListener('profilingStatus', this.onProfilingStatus);
-    bridge.addListener('screenshotCaptured', this.onScreenshotCaptured);
     bridge.addListener('shutdown', this.onBridgeShutdown);
 
-    // It's possible that profiling has already started (e.g. "reload and start profiling")
-    // so the frontend needs to ask the backend for its status after mounting.
-    bridge.send('getProfilingStatus');
-
-    this._profilingCache = new ProfilingCache(bridge, this);
+    this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
 
   // This is only used in tests to avoid memory leaks.
@@ -197,23 +161,6 @@ export default class Store extends EventEmitter {
       // The only safe time to assert these maps are empty is when the store is empty.
       this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');
       this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');
-
-      // These maps will be empty unless profiling mode has been started.
-      // After this, their size should always match the number of roots,
-      // but unless we want to track additional metadata about profiling history,
-      // the only safe time to assert this is when the store is empty.
-      this.assertMapSizeMatchesRootCount(
-        this._profilingOperationsByRootID,
-        '_profilingOperationsByRootID'
-      );
-      this.assertMapSizeMatchesRootCount(
-        this._profilingScreenshotsByRootID,
-        '_profilingScreenshotsByRootID'
-      );
-      this.assertMapSizeMatchesRootCount(
-        this._profilingSnapshotsByRootID,
-        '_profilingSnapshotsByRootID'
-      );
     }
 
     // These maps should always be the same size as the number of roots
@@ -273,7 +220,7 @@ export default class Store extends EventEmitter {
     return this._componentFilters;
   }
   set componentFilters(value: Array<ComponentFilter>): void {
-    if (this._isProfiling) {
+    if (this._profilerStore.isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
       // If necessary, we could support this- but it doesn't seem like a necessary use case.
       throw Error('Cannot modify filter preferences while profiling');
@@ -295,54 +242,65 @@ export default class Store extends EventEmitter {
     return this._hasOwnerMetadata;
   }
 
-  // Profiling data has been recorded for at least one root.
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
   get hasProfilingData(): boolean {
-    return (
-      this._profilingData !== null || this._profilingOperationsByRootID.size > 0
-    );
+    return this._profilerStore.hasProfilingData;
   }
 
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
+  get isProcessingProfilingData(): boolean {
+    return this._profilerStore.isProcessingData;
+  }
+
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
   get isProfiling(): boolean {
-    return this._isProfiling;
+    return this._profilerStore.isProfiling;
   }
 
   get numElements(): number {
     return this._weightAcrossRoots;
   }
 
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
   get profilingCache(): ProfilingCache {
-    return this._profilingCache;
+    return this._profilerStore.cache;
   }
 
-  get profilingData(): ImportedProfilingData | null {
-    return this._profilingData;
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
+  get profilingData(): ProfilingDataFrontend | null {
+    return this._profilerStore.profilingData;
   }
-  set profilingData(value: ImportedProfilingData | null): void {
-    this._profilingData = value;
-    this._profilingOperationsByRootID = new Map();
-    this._profilingScreenshotsByRootID = new Map();
-    this._profilingSnapshotsByRootID = new Map();
-    this._profilingCache.invalidate();
-
-    this.emit('profilingData');
+  set profilingData(value: ProfilingDataFrontend | null): void {
+    this._profilerStore.profilingData = value;
+  }
+
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
+  get profilingOperationsByRootID(): Map<number, Array<Uint32Array>> {
+    return this._profilerStore.inProgressOperationsByRootID;
   }
 
-  get profilingOperations(): Map<number, Array<Uint32Array>> {
-    return this._profilingOperationsByRootID;
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
+  get profilingScreenshotsByRootID(): Map<number, Map<number, string>> {
+    return this._profilerStore.inProgressScreenshotsByRootID;
   }
 
-  get profilingScreenshots(): Map<number, Map<number, string>> {
-    return this._profilingScreenshotsByRootID;
+  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
+  get profilingSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
+    return this._profilerStore.initialSnapshotsByRootID;
   }
 
-  get profilingSnapshots(): Map<number, Map<number, ProfilingSnapshotNode>> {
-    return this._profilingSnapshotsByRootID;
+  get profilerStore(): ProfilerStore {
+    return this._profilerStore;
   }
 
   get revision(): number {
     return this._revision;
   }
 
+  get rootIDToRendererID(): Map<number, number> {
+    return this._rootIDToRendererID;
+  }
+
   get roots(): $ReadOnlyArray<number> {
     return this._roots;
   }
@@ -363,17 +321,9 @@ export default class Store extends EventEmitter {
     return this._supportsReloadAndProfile;
   }
 
+  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
   clearProfilingData(): void {
-    this._profilingData = null;
-    this._profilingOperationsByRootID = new Map();
-    this._profilingScreenshotsByRootID = new Map();
-    this._profilingSnapshotsByRootID = new Map();
-
-    // Invalidate suspense cache if profiling data is being (re-)recorded.
-    // Note that we clear now because any existing data is "stale".
-    this._profilingCache.invalidate();
-
-    this.emit('isProfiling');
+    this._profilerStore.clear();
   }
 
   containsElement(id: number): boolean {
@@ -601,22 +551,14 @@ export default class Store extends EventEmitter {
     return false;
   }
 
+  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
   startProfiling(): void {
-    this._bridge.send('startProfiling');
-
-    // Don't actually update the local profiling boolean yet!
-    // Wait for onProfilingStatus() to confirm the status has changed.
-    // This ensures the frontend and backend are in sync wrt which commits were profiled.
-    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+    this._profilerStore.startProfiling();
   }
 
+  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
   stopProfiling(): void {
-    this._bridge.send('stopProfiling');
-
-    // Don't actually update the local profiling boolean yet!
-    // Wait for onProfilingStatus() to confirm the status has changed.
-    // This ensures the frontend and backend are in sync wrt which commits were profiled.
-    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+    this._profilerStore.stopProfiling();
   }
 
   // TODO Maybe split this into two methods: expand() and collapse()
@@ -701,34 +643,6 @@ export default class Store extends EventEmitter {
     }
   }
 
-  _captureScreenshot = throttle(
-    memoize((rootID: number, commitIndex: number) => {
-      this._bridge.send('captureScreenshot', { commitIndex, rootID });
-    }),
-    THROTTLE_CAPTURE_SCREENSHOT_DURATION
-  );
-
-  _takeProfilingSnapshotRecursive = (
-    elementID: number,
-    profilingSnapshots: Map<number, ProfilingSnapshotNode>
-  ) => {
-    const element = this.getElementByID(elementID);
-    if (element !== null) {
-      const snapshotNode: ProfilingSnapshotNode = {
-        id: elementID,
-        children: element.children.slice(0),
-        displayName: element.displayName,
-        key: element.key,
-        type: element.type,
-      };
-      profilingSnapshots.set(elementID, snapshotNode);
-
-      element.children.forEach(childID =>
-        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)
-      );
-    }
-  };
-
   _adjustParentTreeWeight = (
     parentElement: Element | null,
     weightDelta: number
@@ -769,23 +683,8 @@ export default class Store extends EventEmitter {
 
     let haveRootsChanged = false;
 
+    // The first two values are always rendererID and rootID
     const rendererID = operations[0];
-    const rootID = operations[1];
-
-    if (this._isProfiling) {
-      let profilingOperations = this._profilingOperationsByRootID.get(rootID);
-      if (profilingOperations == null) {
-        profilingOperations = [operations];
-        this._profilingOperationsByRootID.set(rootID, profilingOperations);
-      } else {
-        profilingOperations.push(operations);
-      }
-
-      if (this._captureScreenshots) {
-        const commitIndex = profilingOperations.length - 1;
-        this._captureScreenshot(rootID, commitIndex);
-      }
-    }
 
     const addedElementIDs: Array<number> = [];
     // This is a mapping of removed ID -> parent ID:
@@ -857,10 +756,6 @@ export default class Store extends EventEmitter {
               weight: 0,
             });
 
-            if (this._isProfiling) {
-              this._profilingSnapshotsByRootID.set(id, new Map());
-            }
-
             haveRootsChanged = true;
           } else {
             parentID = ((operations[i]: any): number);
@@ -956,10 +851,6 @@ export default class Store extends EventEmitter {
               this._rootIDToRendererID.delete(id);
               this._rootIDToCapabilities.delete(id);
 
-              this._profilingOperationsByRootID.delete(id);
-              this._profilingScreenshotsByRootID.delete(id);
-              this._profilingSnapshotsByRootID.delete(id);
-
               haveRootsChanged = true;
             } else {
               if (__DEBUG__) {
@@ -1065,60 +956,12 @@ export default class Store extends EventEmitter {
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
-  onProfilingStatus = (isProfiling: boolean) => {
-    if (isProfiling) {
-      this._profilingData = null;
-      this._profilingOperationsByRootID = new Map();
-      this._profilingScreenshotsByRootID = new Map();
-      this._profilingSnapshotsByRootID = new Map();
-      this.roots.forEach(rootID => {
-        const profilingSnapshots = new Map();
-        this._profilingSnapshotsByRootID.set(rootID, profilingSnapshots);
-        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
-      });
-    }
-
-    if (this._isProfiling !== isProfiling) {
-      this._isProfiling = isProfiling;
-
-      // Invalidate suspense cache if profiling data is being (re-)recorded.
-      // Note that we clear again, in case any views read from the cache while profiling.
-      // (That would have resolved a now-stale value without any profiling data.)
-      this._profilingCache.invalidate();
-
-      this.emit('isProfiling');
-    }
-  };
-
-  onScreenshotCaptured = ({
-    commitIndex,
-    dataURL,
-    rootID,
-  }: {|
-    commitIndex: number,
-    dataURL: string,
-    rootID: number,
-  |}) => {
-    let profilingScreenshotsForRootByCommitIndex = this._profilingScreenshotsByRootID.get(
-      rootID
-    );
-    if (!profilingScreenshotsForRootByCommitIndex) {
-      profilingScreenshotsForRootByCommitIndex = new Map();
-      this._profilingScreenshotsByRootID.set(
-        rootID,
-        profilingScreenshotsForRootByCommitIndex
-      );
-    }
-    profilingScreenshotsForRootByCommitIndex.set(commitIndex, dataURL);
-  };
-
   onBridgeShutdown = () => {
     if (__DEBUG__) {
       debug('onBridgeShutdown', 'unsubscribing from Bridge');
     }
 
     this._bridge.removeListener('operations', this.onBridgeOperations);
-    this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 }
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 091fd96b6187..58c714b52314 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -13,7 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitFlamegraph.css';
 
 import type { ChartData, ChartNode } from './FlamegraphChartBuilder';
-import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
+import type { CommitTree } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -26,7 +26,7 @@ export type ItemData = {|
 
 export default function CommitFlamegraphAutoSizer(_: {||}) {
   const { profilingCache } = useContext(StoreContext);
-  const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(
+  const { rootID, selectedCommitIndex, selectFiber } = useContext(
     ProfilerContext
   );
 
@@ -38,39 +38,22 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
     [selectFiber]
   );
 
-  const profilingSummary = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
-  let commitDetails: CommitDetailsFrontend | null = null;
-  let commitTree: CommitTreeFrontend | null = null;
+  let commitTree: CommitTree | null = null;
   let chartData: ChartData | null = null;
   if (selectedCommitIndex !== null) {
-    commitDetails = profilingCache.CommitDetails.read({
-      commitIndex: selectedCommitIndex,
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    });
-
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
-      profilingSummary,
+      rootID: ((rootID: any): number),
     });
 
     chartData = profilingCache.getFlamegraphChartData({
-      commitDetails,
       commitIndex: selectedCommitIndex,
       commitTree,
+      rootID: ((rootID: any): number),
     });
   }
 
-  if (
-    commitDetails != null &&
-    commitTree != null &&
-    chartData != null &&
-    chartData.depth > 0
-  ) {
+  if (commitTree != null && chartData != null && chartData.depth > 0) {
     return (
       <div className={styles.Container} onClick={deselectCurrentFiber}>
         <AutoSizer>
@@ -79,8 +62,7 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
             // by the time this render prop function is called, the values of the `let` variables have not changed.
             <CommitFlamegraph
               chartData={((chartData: any): ChartData)}
-              commitDetails={((commitDetails: any): CommitDetailsFrontend)}
-              commitTree={((commitTree: any): CommitTreeFrontend)}
+              commitTree={((commitTree: any): CommitTree)}
               height={height}
               width={width}
             />
@@ -95,19 +77,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
 
 type Props = {|
   chartData: ChartData,
-  commitDetails: CommitDetailsFrontend,
-  commitTree: CommitTreeFrontend,
+  commitTree: CommitTree,
   height: number,
   width: number,
 |};
 
-function CommitFlamegraph({
-  chartData,
-  commitDetails,
-  commitTree,
-  height,
-  width,
-}: Props) {
+function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
   const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 63200f37bab6..466475c16b63 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -13,7 +13,7 @@ import { StoreContext } from '../context';
 import styles from './CommitRanked.css';
 
 import type { ChartData } from './RankedChartBuilder';
-import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
+import type { CommitTree } from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -26,7 +26,7 @@ export type ItemData = {|
 
 export default function CommitRankedAutoSizer(_: {||}) {
   const { profilingCache } = useContext(StoreContext);
-  const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(
+  const { rootID, selectedCommitIndex, selectFiber } = useContext(
     ProfilerContext
   );
 
@@ -38,47 +38,29 @@ export default function CommitRankedAutoSizer(_: {||}) {
     [selectFiber]
   );
 
-  const profilingSummary = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
-  let commitDetails: CommitDetailsFrontend | null = null;
-  let commitTree: CommitTreeFrontend | null = null;
+  let commitTree: CommitTree | null = null;
   let chartData: ChartData | null = null;
   if (selectedCommitIndex !== null) {
-    commitDetails = profilingCache.CommitDetails.read({
-      commitIndex: selectedCommitIndex,
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    });
-
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
-      profilingSummary,
+      rootID: ((rootID: any): number),
     });
 
     chartData = profilingCache.getRankedChartData({
-      commitDetails,
       commitIndex: selectedCommitIndex,
       commitTree,
+      rootID: ((rootID: any): number),
     });
   }
 
-  if (
-    commitDetails != null &&
-    commitTree != null &&
-    chartData != null &&
-    chartData.nodes.length > 0
-  ) {
+  if (commitTree != null && chartData != null && chartData.nodes.length > 0) {
     return (
       <div className={styles.Container} onClick={deselectCurrentFiber}>
         <AutoSizer>
           {({ height, width }) => (
             <CommitRanked
               chartData={((chartData: any): ChartData)}
-              commitDetails={((commitDetails: any): CommitDetailsFrontend)}
-              commitTree={((commitTree: any): CommitTreeFrontend)}
+              commitTree={((commitTree: any): CommitTree)}
               height={height}
               width={width}
             />
@@ -93,19 +75,12 @@ export default function CommitRankedAutoSizer(_: {||}) {
 
 type Props = {|
   chartData: ChartData,
-  commitDetails: CommitDetailsFrontend,
-  commitTree: CommitTreeFrontend,
+  commitTree: CommitTree,
   height: number,
   width: number,
 |};
 
-function CommitRanked({
-  chartData,
-  commitDetails,
-  commitTree,
-  height,
-  width,
-}: Props) {
+function CommitRanked({ chartData, commitTree, height, width }: Props) {
   const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index eff090f4bdf6..ea18a5381270 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -9,14 +9,13 @@ import {
 } from 'src/constants';
 import { utfDecodeString } from 'src/utils';
 import { ElementTypeRoot } from 'src/types';
-import Store from 'src/devtools/store';
+import ProfilerStore from 'src/devtools/ProfilerStore';
 
 import type { ElementType } from 'src/types';
 import type {
-  CommitTreeFrontend,
-  CommitTreeNodeFrontend,
-  ProfilingSnapshotNode,
-  ProfilingSummaryFrontend,
+  CommitTree,
+  CommitTreeNode,
+  ProfilingDataForRootFrontend,
 } from 'src/devtools/views/Profiler/types';
 
 const debug = (methodName, ...args) => {
@@ -30,36 +29,40 @@ const debug = (methodName, ...args) => {
   }
 };
 
-const rootToCommitTreeMap: Map<number, Array<CommitTreeFrontend>> = new Map();
+const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
 
 export function getCommitTree({
   commitIndex,
-  profilingSummary,
-  store,
+  profilerStore,
+  rootID,
 }: {|
   commitIndex: number,
-  profilingSummary: ProfilingSummaryFrontend,
-  store: Store,
-|}): CommitTreeFrontend {
-  const { rootID } = profilingSummary;
-
+  profilerStore: ProfilerStore,
+  rootID: number,
+|}): CommitTree {
   if (!rootToCommitTreeMap.has(rootID)) {
     rootToCommitTreeMap.set(rootID, []);
   }
 
   const commitTrees = ((rootToCommitTreeMap.get(
     rootID
-  ): any): Array<CommitTreeFrontend>);
+  ): any): Array<CommitTree>);
 
   if (commitIndex < commitTrees.length) {
     return commitTrees[commitIndex];
   }
 
-  const { profilingData } = store;
-  const profilingOperations =
-    profilingData != null
-      ? profilingData.profilingOperations
-      : store.profilingOperations;
+  const { profilingData } = profilerStore;
+  if (profilingData === null) {
+    throw Error(`No profiling data available`);
+  }
+
+  const dataForRoot = profilingData.dataForRoots.get(rootID);
+  if (dataForRoot == null) {
+    throw Error(`Could not find profiling data for root "${rootID}"`);
+  }
+
+  const { operations } = dataForRoot;
 
   // Commits are generated sequentially and cached.
   // If this is the very first commit, start with the cached snapshot and apply the first mutation.
@@ -67,32 +70,12 @@ export function getCommitTree({
   if (commitIndex === 0) {
     const nodes = new Map();
 
-    const { profilingData } = store;
-    const profilingSnapshots =
-      profilingData != null
-        ? profilingData.profilingSnapshots.get(rootID)
-        : store.profilingSnapshots.get(rootID);
-
-    if (profilingSnapshots == null) {
-      throw Error(`Could not find profiling snapshot for root "${rootID}"`);
-    }
-
     // Construct the initial tree.
-    recursivelyInitializeTree(
-      rootID,
-      0,
-      nodes,
-      profilingSummary.initialTreeBaseDurations,
-      profilingSnapshots
-    );
+    recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
 
     // Mutate the tree
-    const commitOperations = profilingOperations.get(rootID);
-    if (commitOperations != null && commitIndex < commitOperations.length) {
-      const commitTree = updateTree(
-        { nodes, rootID },
-        commitOperations[commitIndex]
-      );
+    if (operations != null && commitIndex < operations.length) {
+      const commitTree = updateTree({ nodes, rootID }, operations[commitIndex]);
 
       if (__DEBUG__) {
         __printTree(commitTree);
@@ -104,14 +87,14 @@ export function getCommitTree({
   } else {
     const previousCommitTree = getCommitTree({
       commitIndex: commitIndex - 1,
-      profilingSummary,
-      store,
+      profilerStore,
+      rootID,
     });
-    const commitOperations = profilingOperations.get(rootID);
-    if (commitOperations != null && commitIndex < commitOperations.length) {
+
+    if (operations != null && commitIndex < operations.length) {
       const commitTree = updateTree(
         previousCommitTree,
-        commitOperations[commitIndex]
+        operations[commitIndex]
       );
 
       if (__DEBUG__) {
@@ -131,11 +114,10 @@ export function getCommitTree({
 function recursivelyInitializeTree(
   id: number,
   parentID: number,
-  nodes: Map<number, CommitTreeNodeFrontend>,
-  initialTreeBaseDurations: Map<number, number>,
-  profilingSnapshots: Map<number, ProfilingSnapshotNode>
+  nodes: Map<number, CommitTreeNode>,
+  dataForRoot: ProfilingDataForRootFrontend
 ): void {
-  const node = profilingSnapshots.get(id);
+  const node = dataForRoot.snapshots.get(id);
   if (node != null) {
     nodes.set(id, {
       id,
@@ -143,35 +125,31 @@ function recursivelyInitializeTree(
       displayName: node.displayName,
       key: node.key,
       parentID,
-      treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
+      treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
+        id
+      ): any): number),
       type: node.type,
     });
 
     node.children.forEach(childID =>
-      recursivelyInitializeTree(
-        childID,
-        id,
-        nodes,
-        initialTreeBaseDurations,
-        profilingSnapshots
-      )
+      recursivelyInitializeTree(childID, id, nodes, dataForRoot)
     );
   }
 }
 
 function updateTree(
-  commitTree: CommitTreeFrontend,
+  commitTree: CommitTree,
   operations: Uint32Array
-): CommitTreeFrontend {
+): CommitTree {
   // Clone the original tree so edits don't affect it.
   const nodes = new Map(commitTree.nodes);
 
   // Clone nodes before mutating them so edits don't affect them.
-  const getClonedNode = (id: number): CommitTreeNodeFrontend => {
+  const getClonedNode = (id: number): CommitTreeNode => {
     const clonedNode = ((Object.assign(
       {},
       nodes.get(id)
-    ): any): CommitTreeNodeFrontend);
+    ): any): CommitTreeNode);
     nodes.set(id, clonedNode);
     return clonedNode;
   };
@@ -219,7 +197,7 @@ function updateTree(
             debug('Add', `new root fiber ${id}`);
           }
 
-          const node: CommitTreeNodeFrontend = {
+          const node: CommitTreeNode = {
             children: [],
             displayName: null,
             id,
@@ -254,7 +232,7 @@ function updateTree(
           const parentNode = getClonedNode(parentID);
           parentNode.children = parentNode.children.concat(id);
 
-          const node: CommitTreeNodeFrontend = {
+          const node: CommitTreeNode = {
             children: [],
             displayName,
             id,
@@ -355,7 +333,7 @@ export function invalidateCommitTrees(): void {
 }
 
 // DEBUG
-const __printTree = (commitTree: CommitTreeFrontend) => {
+const __printTree = (commitTree: CommitTree) => {
   if (__DEBUG__) {
     const { nodes, rootID } = commitTree;
     console.group('__printTree()');
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 994a08c77764..7287d09189b1 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -2,8 +2,9 @@
 
 import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
 import { formatDuration } from './utils';
+import ProfilerStore from 'src/devtools/ProfilerStore';
 
-import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
+import type { CommitTree } from './types';
 
 export type ChartNode = {|
   actualDuration: number,
@@ -28,15 +29,19 @@ export type ChartData = {|
 const cachedChartData: Map<string, ChartData> = new Map();
 
 export function getChartData({
-  commitDetails,
   commitIndex,
   commitTree,
+  profilerStore,
+  rootID,
 }: {|
-  commitDetails: CommitDetailsFrontend,
   commitIndex: number,
-  commitTree: CommitTreeFrontend,
+  commitTree: CommitTree,
+  profilerStore: ProfilerStore,
+  rootID: number,
 |}): ChartData {
-  const { actualDurations, rootID, selfDurations } = commitDetails;
+  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
+
+  const { fiberActualDurations, fiberSelfDurations } = commitDatum;
   const { nodes } = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
@@ -62,9 +67,9 @@ export function getChartData({
 
     const { children, displayName, key, treeBaseDuration, type } = node;
 
-    const actualDuration = actualDurations.get(id) || 0;
-    const selfDuration = selfDurations.get(id) || 0;
-    const didRender = actualDurations.has(id);
+    const actualDuration = fiberActualDurations.get(id) || 0;
+    const selfDuration = fiberSelfDurations.get(id) || 0;
+    const didRender = fiberActualDurations.has(id);
 
     const name = displayName || 'Anonymous';
     const maybeKey = key !== null ? ` key="${key}"` : '';
@@ -131,7 +136,7 @@ export function getChartData({
     walkTree(id, baseDuration, 1);
   }
 
-  actualDurations.forEach((duration, id) => {
+  fiberActualDurations.forEach((duration, id) => {
     const node = nodes.get(id);
     if (node != null) {
       let currentID = node.parentID;
diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/src/devtools/views/Profiler/InteractionListItem.js
index a4e3cd705451..4e6d8c746b40 100644
--- a/src/devtools/views/Profiler/InteractionListItem.js
+++ b/src/devtools/views/Profiler/InteractionListItem.js
@@ -17,9 +17,8 @@ type Props = {
 function InteractionListItem({ data: itemData, index, style }: Props) {
   const {
     chartData,
-    interactions,
+    dataForRoot,
     labelWidth,
-    profilingSummary,
     scaleX,
     selectedInteractionID,
     selectCommitIndex,
@@ -27,20 +26,22 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
     selectTab,
   } = itemData;
 
-  const { maxCommitDuration } = chartData;
-  const { commitDurations, commitTimes } = profilingSummary;
+  const { commitData, interactionCommits } = dataForRoot;
+  const { interactions, lastInteractionTime, maxCommitDuration } = chartData;
 
   const interaction = interactions[index];
+  if (interaction == null) {
+    throw Error(`Could not find interaction #${index}`);
+  }
 
   const handleClick = useCallback(() => {
     selectInteraction(interaction.id);
   }, [interaction, selectInteraction]);
 
+  const commits = interactionCommits.get(interaction.id) || [];
+
   const startTime = interaction.timestamp;
-  const stopTime =
-    interaction.commits.length > 0
-      ? commitTimes[interaction.commits[interaction.commits.length - 1]]
-      : interaction.timestamp;
+  const stopTime = lastInteractionTime;
 
   const viewCommit = (commitIndex: number) => {
     selectTab('flame-chart');
@@ -71,7 +72,7 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
           width: scaleX(stopTime - startTime, 0),
         }}
       />
-      {interaction.commits.map(commitIndex => (
+      {commits.map(commitIndex => (
         <div
           className={styles.CommitBox}
           key={commitIndex}
@@ -80,10 +81,13 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
             backgroundColor: getGradientColor(
               Math.min(
                 1,
-                Math.max(0, commitDurations[commitIndex] / maxCommitDuration)
+                Math.max(
+                  0,
+                  commitData[commitIndex].duration / maxCommitDuration
+                )
               ) || 0
             ),
-            left: labelWidth + scaleX(commitTimes[commitIndex], 0),
+            left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),
           }}
         />
       ))}
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index c9c5d3f14fb8..6c560f7ed94d 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -11,18 +11,14 @@ import { scale } from './utils';
 
 import styles from './Interactions.css';
 
+import type { ProfilingDataForRootFrontend } from './types';
 import type { ChartData } from './InteractionsChartBuilder';
 import type { TabID } from './ProfilerContext';
-import type {
-  InteractionWithCommitsFrontend,
-  ProfilingSummaryFrontend,
-} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
-  interactions: Array<InteractionWithCommitsFrontend>,
+  dataForRoot: ProfilingDataForRootFrontend,
   labelWidth: number,
-  profilingSummary: ProfilingSummaryFrontend,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedInteractionID: number | null,
   selectCommitIndex: (id: number | null) => void,
@@ -42,29 +38,21 @@ export default function InteractionsAutoSizer(_: {||}) {
 
 function Interactions({ height, width }: {| height: number, width: number |}) {
   const {
-    rendererID,
     rootID,
     selectedInteractionID,
     selectInteraction,
     selectCommitIndex,
     selectTab,
   } = useContext(ProfilerContext);
-  const { profilingCache } = useContext(StoreContext);
+  const { profilerStore } = useContext(StoreContext);
 
-  const { interactions } = profilingCache.Interactions.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
 
-  const profilingSummary = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
+  const chartData = profilerStore.cache.getInteractionsChartData({
     rootID: ((rootID: any): number),
   });
 
-  const chartData = profilingCache.getInteractionsChartData({
-    interactions,
-    profilingSummary,
-  });
+  const { interactions } = chartData;
 
   const handleKeyDown = useCallback(
     event => {
@@ -110,9 +98,8 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
 
     return {
       chartData,
-      interactions,
+      dataForRoot,
       labelWidth,
-      profilingSummary,
       scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
       selectedInteractionID,
       selectCommitIndex,
@@ -121,8 +108,7 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     };
   }, [
     chartData,
-    interactions,
-    profilingSummary,
+    dataForRoot,
     selectedInteractionID,
     selectCommitIndex,
     selectInteraction,
diff --git a/src/devtools/views/Profiler/InteractionsChartBuilder.js b/src/devtools/views/Profiler/InteractionsChartBuilder.js
index 08bf71be00ce..6171749ef0a6 100644
--- a/src/devtools/views/Profiler/InteractionsChartBuilder.js
+++ b/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -1,11 +1,11 @@
 // @flow
 
-import type {
-  InteractionWithCommitsFrontend,
-  ProfilingSummaryFrontend,
-} from './types';
+import ProfilerStore from 'src/devtools/ProfilerStore';
+
+import type { Interaction } from './types';
 
 export type ChartData = {|
+  interactions: Array<Interaction>,
   lastInteractionTime: number,
   maxCommitDuration: number,
 |};
@@ -13,30 +13,37 @@ export type ChartData = {|
 const cachedChartData: Map<number, ChartData> = new Map();
 
 export function getChartData({
-  interactions,
-  profilingSummary,
+  profilerStore,
+  rootID,
 }: {|
-  interactions: Array<InteractionWithCommitsFrontend>,
-  profilingSummary: ProfilingSummaryFrontend,
+  profilerStore: ProfilerStore,
+  rootID: number,
 |}): ChartData {
-  const { rootID } = profilingSummary;
-
   if (cachedChartData.has(rootID)) {
     return ((cachedChartData.get(rootID): any): ChartData);
   }
 
-  const { commitDurations, commitTimes } = profilingSummary;
+  const dataForRoot = profilerStore.getDataForRoot(rootID);
+  if (dataForRoot == null) {
+    throw Error(`Could not find profiling data for root "${rootID}"`);
+  }
+
+  const { commitData, interactions } = dataForRoot;
 
   const lastInteractionTime =
-    commitTimes.length > 0 ? commitTimes[commitTimes.length - 1] : 0;
+    commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;
 
   let maxCommitDuration = 0;
 
-  commitDurations.forEach(commitDuration => {
-    maxCommitDuration = Math.max(maxCommitDuration, commitDuration);
+  commitData.forEach(commitDatum => {
+    maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);
   });
 
-  const chartData = { lastInteractionTime, maxCommitDuration };
+  const chartData = {
+    interactions: Array.from(interactions.values()),
+    lastInteractionTime,
+    maxCommitDuration,
+  };
 
   cachedChartData.set(rootID, chartData);
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 1658e52430d6..c829516a14b0 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -16,7 +16,7 @@ import {
 import { StoreContext } from '../context';
 import Store from '../../store';
 
-import type { ImportedProfilingData } from './types';
+import type { ProfilingDataFrontend } from './types';
 
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
@@ -72,7 +72,7 @@ ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
   hasProfilingData: boolean,
-  profilingData: ImportedProfilingData | null,
+  profilingData: ProfilingDataFrontend | null,
   isProfiling: boolean,
 |};
 
@@ -117,11 +117,11 @@ function ProfilerContextController({ children }: Props) {
     rendererID = store.getRendererIDForElement(selectedElementID);
     rootID = store.getRootIDForElement(selectedElementID);
     rootHasProfilingData =
-      rootID === null ? false : store.profilingOperations.has(rootID);
+      rootID === null ? false : store.profilingOperationsByRootID.has(rootID);
   } else if (store.roots.length > 0) {
     // If no root is selected, assume the first root; many React apps are single root anyway.
     rootID = store.roots[0];
-    rootHasProfilingData = store.profilingOperations.has(rootID);
+    rootHasProfilingData = store.profilingOperationsByRootID.has(rootID);
     rendererID = store.getRendererIDForElement(rootID);
   }
 
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 14bf451d297c..c196e6d6b20d 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -5,20 +5,20 @@ import { ProfilerContext } from './ProfilerContext';
 import { ModalDialogContext } from '../ModalDialog';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { BridgeContext, StoreContext } from '../context';
+import { StoreContext } from '../context';
 import {
-  prepareExportedProfilingSummary,
-  prepareImportedProfilingData,
+  prepareProfilingDataExport,
+  prepareProfilingDataFrontendFromExport,
 } from './utils';
 
 import styles from './ProfilingImportExportButtons.css';
 
+import type { ProfilingDataExport } from './types';
+
 export default function ProfilingImportExportButtons() {
-  const bridge = useContext(BridgeContext);
-  const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(
-    ProfilerContext
-  );
+  const { isProfiling, rendererID, rootID } = useContext(ProfilerContext);
   const store = useContext(StoreContext);
+  const { profilerStore } = store;
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -29,20 +29,15 @@ export default function ProfilingImportExportButtons() {
       return;
     }
 
-    const exportedProfilingSummary = prepareExportedProfilingSummary(
-      store.profilingOperations,
-      store.profilingSnapshots,
-      rootID,
-      rendererID
-    );
-    bridge.send('exportProfilingSummary', exportedProfilingSummary);
-  }, [
-    bridge,
-    rendererID,
-    rootID,
-    store.profilingOperations,
-    store.profilingSnapshots,
-  ]);
+    if (profilerStore.profilingData !== null) {
+      const profilingDataExport = prepareProfilingDataExport(
+        profilerStore.profilingData
+      );
+
+      // TODO (profarc) Generate anchor "download" tag and click it
+      console.log('profilingDataExport:', profilingDataExport);
+    }
+  }, [rendererID, rootID, profilerStore.profilingData]);
 
   const uploadData = useCallback(() => {
     if (inputRef.current !== null) {
@@ -57,7 +52,12 @@ export default function ProfilingImportExportButtons() {
       fileReader.addEventListener('load', () => {
         try {
           const raw = ((fileReader.result: any): string);
-          store.profilingData = prepareImportedProfilingData(raw);
+          const profilingDataExport = ((JSON.parse(
+            raw
+          ): any): ProfilingDataExport);
+          store.profilingData = prepareProfilingDataFrontendFromExport(
+            profilingDataExport
+          );
         } catch (error) {
           modalDialogDispatch({
             type: 'SHOW',
@@ -97,7 +97,7 @@ export default function ProfilingImportExportButtons() {
       </Button>
       {store.supportsFileDownloads && (
         <Button
-          disabled={isProfiling || !rootHasProfilingData}
+          disabled={isProfiling || !profilerStore.hasProfilingData}
           onClick={downloadData}
           title="Save profile..."
         >
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js
index 9b53af9dbb56..67b38fccbf38 100644
--- a/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -2,8 +2,9 @@
 
 import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
 import { formatDuration } from './utils';
+import ProfilerStore from 'src/devtools/ProfilerStore';
 
-import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
+import type { CommitTree } from './types';
 
 export type ChartNode = {|
   id: number,
@@ -20,15 +21,19 @@ export type ChartData = {|
 const cachedChartData: Map<string, ChartData> = new Map();
 
 export function getChartData({
-  commitDetails,
   commitIndex,
   commitTree,
+  profilerStore,
+  rootID,
 }: {|
-  commitDetails: CommitDetailsFrontend,
   commitIndex: number,
-  commitTree: CommitTreeFrontend,
+  commitTree: CommitTree,
+  profilerStore: ProfilerStore,
+  rootID: number,
 |}): ChartData {
-  const { actualDurations, rootID, selfDurations } = commitDetails;
+  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
+
+  const { fiberActualDurations, fiberSelfDurations } = commitDatum;
   const { nodes } = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
@@ -39,7 +44,7 @@ export function getChartData({
   let maxSelfDuration = 0;
 
   const chartNodes: Array<ChartNode> = [];
-  actualDurations.forEach((actualDuration, id) => {
+  fiberActualDurations.forEach((actualDuration, id) => {
     const node = nodes.get(id);
 
     if (node == null) {
@@ -52,7 +57,7 @@ export function getChartData({
     if (parentID === 0) {
       return;
     }
-    const selfDuration = selfDurations.get(id) || 0;
+    const selfDuration = fiberSelfDurations.get(id) || 0;
     maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
 
     const name = displayName || 'Anonymous';
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index ff4040302bd7..f4b7ea9a240e 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -12,24 +12,12 @@ export type Props = {||};
 export default function SidebarCommitInfo(_: Props) {
   const {
     selectedCommitIndex,
-    rendererID,
     rootID,
     selectInteraction,
     selectTab,
   } = useContext(ProfilerContext);
 
-  const {
-    captureScreenshots,
-    profilingCache,
-    profilingScreenshots,
-  } = useContext(StoreContext);
-
-  const screenshotsByCommitIndex =
-    rootID !== null ? profilingScreenshots.get(rootID) : null;
-  const screenshot =
-    screenshotsByCommitIndex != null && selectedCommitIndex !== null
-      ? screenshotsByCommitIndex.get(selectedCommitIndex)
-      : null;
+  const { captureScreenshots, profilerStore } = useContext(StoreContext);
 
   const [
     isScreenshotModalVisible,
@@ -45,26 +33,22 @@ export default function SidebarCommitInfo(_: Props) {
     []
   );
 
-  if (selectedCommitIndex === null) {
+  if (rootID === null || selectedCommitIndex === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
-
-  const { interactions, priorityLevel } = profilingCache.CommitDetails.read({
-    commitIndex: selectedCommitIndex,
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
+  const { interactions } = profilerStore.getDataForRoot(rootID);
+  const {
+    duration,
+    interactionIDs,
+    priorityLevel,
+    screenshot,
+    timestamp,
+  } = profilerStore.getCommitData(rootID, selectedCommitIndex);
 
-  const viewInteraction = interaction => {
+  const viewInteraction = interactionID => {
     selectTab('interactions');
-    selectInteraction(interaction.id);
+    selectInteraction(interactionID);
   };
 
   return (
@@ -80,34 +64,33 @@ export default function SidebarCommitInfo(_: Props) {
           )}
           <li className={styles.ListItem}>
             <label className={styles.Label}>Committed at</label>:{' '}
-            <span className={styles.Value}>
-              {formatTime(commitTimes[((selectedCommitIndex: any): number)])}s
-            </span>
+            <span className={styles.Value}>{formatTime(timestamp)}s</span>
           </li>
           <li className={styles.ListItem}>
             <label className={styles.Label}>Render duration</label>:{' '}
-            <span className={styles.Value}>
-              {formatDuration(
-                commitDurations[((selectedCommitIndex: any): number)]
-              )}
-              ms
-            </span>
+            <span className={styles.Value}>{formatDuration(duration)}ms</span>
           </li>
           <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
             <div className={styles.InteractionList}>
-              {interactions.length === 0 ? (
+              {interactionIDs.length === 0 ? (
                 <div className={styles.NoInteractions}>None</div>
               ) : null}
-              {interactions.map((interaction, index) => (
-                <button
-                  key={index}
-                  className={styles.Interaction}
-                  onClick={() => viewInteraction(interaction)}
-                >
-                  {interaction.name}
-                </button>
-              ))}
+              {interactionIDs.map(interactionID => {
+                const interaction = interactions.get(interactionID);
+                if (interaction == null) {
+                  throw Error(`Invalid interaction "${interactionID}"`);
+                }
+                return (
+                  <button
+                    key={interactionID}
+                    className={styles.Interaction}
+                    onClick={() => viewInteraction(interactionID)}
+                  >
+                    {interaction.name}
+                  </button>
+                );
+              })}
             </div>
           </li>
           {captureScreenshots && (
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 574c29141d48..035dfec50787 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -13,48 +13,69 @@ export type Props = {||};
 export default function SidebarInteractions(_: Props) {
   const {
     selectedInteractionID,
-    rendererID,
     rootID,
     selectCommitIndex,
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilingCache } = useContext(StoreContext);
+  const { profilingCache, profilerStore } = useContext(StoreContext);
 
   if (selectedInteractionID === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const { interactions } = profilingCache.Interactions.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-  const interaction = interactions.find(
-    interaction => interaction.id === selectedInteractionID
+  const { interactionCommits, interactions } = profilerStore.getDataForRoot(
+    ((rootID: any): number)
   );
+  const interaction = interactions.get(selectedInteractionID);
   if (interaction == null) {
     throw Error(
       `Could not find interaction by selected interaction id "${selectedInteractionID}"`
     );
   }
 
-  const profilingSummary = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
   const { maxCommitDuration } = profilingCache.getInteractionsChartData({
-    interactions,
-    profilingSummary,
+    rootID: ((rootID: any): number),
   });
 
-  const { commitDurations, commitTimes } = profilingSummary;
-
   const viewCommit = (commitIndex: number) => {
     selectTab('flame-chart');
     selectCommitIndex(commitIndex);
   };
 
+  const listItems: Array<React$Node> = [];
+  const commitIndices = interactionCommits.get(selectedInteractionID);
+  if (commitIndices != null) {
+    commitIndices.forEach(commitIndex => {
+      const { duration, timestamp } = profilerStore.getCommitData(
+        ((rootID: any): number),
+        commitIndex
+      );
+
+      listItems.push(
+        <li
+          key={commitIndex}
+          className={styles.ListItem}
+          onClick={() => viewCommit(commitIndex)}
+        >
+          <div
+            className={styles.CommitBox}
+            style={{
+              backgroundColor: getGradientColor(
+                Math.min(1, Math.max(0, duration / maxCommitDuration)) || 0
+              ),
+            }}
+          />
+          <div>
+            timestamp: {formatTime(timestamp)}s
+            <br />
+            duration: {formatDuration(duration)}ms
+          </div>
+        </li>
+      );
+    });
+  }
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>
@@ -62,35 +83,7 @@ export default function SidebarInteractions(_: Props) {
       </div>
       <div className={styles.Content}>
         <div className={styles.Commits}>Commits:</div>
-        <ul className={styles.List}>
-          {interaction.commits.map(commitIndex => (
-            <li
-              key={commitIndex}
-              className={styles.ListItem}
-              onClick={() => viewCommit(commitIndex)}
-            >
-              <div
-                className={styles.CommitBox}
-                style={{
-                  backgroundColor: getGradientColor(
-                    Math.min(
-                      1,
-                      Math.max(
-                        0,
-                        commitDurations[commitIndex] / maxCommitDuration
-                      )
-                    ) || 0
-                  ),
-                }}
-              />
-              <div>
-                timestamp: {formatTime(commitTimes[commitIndex])}s
-                <br />
-                duration: {formatDuration(commitDurations[commitIndex])}ms
-              </div>
-            </li>
-          ))}
-        </ul>
+        <ul className={styles.List}>{listItems}</ul>
       </div>
     </Fragment>
   );
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 8739509575da..c99d0cdb0289 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -12,9 +12,8 @@ import styles from './SidebarSelectedFiberInfo.css';
 export type Props = {||};
 
 export default function SidebarSelectedFiberInfo(_: Props) {
-  const { profilingCache } = useContext(StoreContext);
+  const { profilingCache, profilerStore } = useContext(StoreContext);
   const {
-    rendererID,
     rootID,
     selectCommitIndex,
     selectedCommitIndex,
@@ -23,22 +22,19 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     selectFiber,
   } = useContext(ProfilerContext);
 
-  const { commitTimes } = profilingCache.ProfilingSummary.read({
-    rendererID: ((rendererID: any): number),
-    rootID: ((rootID: any): number),
-  });
-
-  const { commitDurations } = profilingCache.FiberCommits.read({
+  const commitIndices = profilingCache.getFiberCommits({
     fiberID: ((selectedFiberID: any): number),
-    rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
 
   const listItems = [];
-  for (let i = 0; i < commitDurations.length; i += 2) {
-    const commitIndex = commitDurations[i];
-    const duration = commitDurations[i + 1];
-    const time = commitTimes[commitIndex];
+  for (let i = 0; i < commitIndices.length; i += 2) {
+    const commitIndex = commitIndices[i];
+
+    const { duration, timestamp } = profilerStore.getCommitData(
+      ((rootID: any): number),
+      commitIndex
+    );
 
     listItems.push(
       <button
@@ -50,7 +46,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         }
         onClick={() => selectCommitIndex(commitIndex)}
       >
-        {formatTime(time)}s for {formatDuration(duration)}ms
+        {formatTime(timestamp)}s for {formatDuration(duration)}ms
       </button>
     );
   }
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index f609d2cdcf81..a41187d89d08 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -16,29 +16,33 @@ export default function SnapshotSelector(_: Props) {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
-    rendererID,
     rootID,
     selectedCommitIndex,
     selectCommitIndex,
   } = useContext(ProfilerContext);
 
-  const { profilingCache } = useContext(StoreContext);
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
+  const { profilerStore } = useContext(StoreContext);
+  const { commitData } = profilerStore.getDataForRoot(((rootID: any): number));
+
+  const commitDurations: Array<number> = [];
+  const commitTimes: Array<number> = [];
+  commitData.forEach(commitDatum => {
+    commitDurations.push(commitDatum.duration);
+    commitTimes.push(commitDatum.timestamp);
+  });
 
   const filteredCommitIndices = useMemo(
     () =>
-      commitDurations.reduce((reduced, commitDuration, index) => {
-        if (!isCommitFilterEnabled || commitDuration >= minCommitDuration) {
+      commitData.reduce((reduced, commitDatum, index) => {
+        if (
+          !isCommitFilterEnabled ||
+          commitDatum.duration >= minCommitDuration
+        ) {
           reduced.push(index);
         }
         return reduced;
       }, []),
-    [commitDurations, isCommitFilterEnabled, minCommitDuration]
+    [commitData, isCommitFilterEnabled, minCommitDuration]
   );
 
   const numFilteredCommits = filteredCommitIndices.length;
@@ -112,7 +116,7 @@ export default function SnapshotSelector(_: Props) {
     [viewNextCommit, viewPrevCommit]
   );
 
-  if (commitDurations.length === 0) {
+  if (commitData.length === 0) {
     return null;
   }
 
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 99e0430465ea..d6a5bb4b2fb0 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -1,13 +1,8 @@
 // @flow
 
 import type { ElementType } from 'src/types';
-import type {
-  CommitDetailsBackend,
-  InteractionsBackend,
-  ProfilingSummaryBackend,
-} from 'src/backend/types';
 
-export type CommitTreeNodeFrontend = {|
+export type CommitTreeNode = {|
   id: number,
   children: Array<number>,
   displayName: string | null,
@@ -17,94 +12,113 @@ export type CommitTreeNodeFrontend = {|
   type: ElementType,
 |};
 
-export type CommitTreeFrontend = {|
-  nodes: Map<number, CommitTreeNodeFrontend>,
+export type CommitTree = {|
+  nodes: Map<number, CommitTreeNode>,
   rootID: number,
 |};
 
-export type InteractionFrontend = {|
+export type Interaction = {|
   id: number,
   name: string,
   timestamp: number,
 |};
 
-export type InteractionWithCommitsFrontend = {|
-  ...InteractionFrontend,
-  commits: Array<number>,
+export type SnapshotNode = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+  type: ElementType,
 |};
 
-export type InteractionsFrontend = {|
-  interactions: Array<InteractionWithCommitsFrontend>,
-  rootID: number,
-|};
+export type CommitDataFrontend = {|
+  // How long was this commit?
+  duration: number,
+
+  // Map of Fiber (ID) to actual duration for this commit;
+  // Fibers that did not render will not have entries in this Map.
+  fiberActualDurations: Map<number, number>,
 
-export type CommitDetailsFrontend = {|
-  actualDurations: Map<number, number>,
-  commitIndex: number,
-  interactions: Array<InteractionFrontend>,
+  // Map of Fiber (ID) to "self duration" for this commit;
+  // Fibers that did not render will not have entries in this Map.
+  fiberSelfDurations: Map<number, number>,
+
+  // Which interactions (IDs) were associated with this commit.
+  interactionIDs: Array<number>,
+
+  // Priority level of the commit (if React provided this info)
   priorityLevel: string | null,
-  rootID: number,
-  selfDurations: Map<number, number>,
-|};
 
-export type FiberCommitsFrontend = {|
-  commitDurations: Array<number>,
-  fiberID: number,
-  rootID: number,
-|};
+  // Screenshot data for this commit (if available).
+  screenshot: string | null,
 
-export type ProfilingSummaryFrontend = {|
-  rootID: number,
+  // When did this commit occur (relative to the start of profiling)
+  timestamp: number,
+|};
 
-  // Commit durations
-  commitDurations: Array<number>,
+export type ProfilingDataForRootFrontend = {|
+  // Timing, duration, and other metadata about each commit.
+  commitData: Array<CommitDataFrontend>,
 
-  // Commit times (relative to when profiling started)
-  commitTimes: Array<number>,
+  // Display name of the nearest descendant component (ideally a function or class component).
+  // This value is used by the root selector UI.
+  displayName: string,
 
-  // Map of fiber id to (initial) tree base duration
+  // Map of fiber id to (initial) tree base duration when Profiling session was started.
+  // This info can be used along with commitOperations to reconstruct the tree for any commit.
   initialTreeBaseDurations: Map<number, number>,
 
-  interactionCount: number,
+  // All interactions recorded (for this root) during the current session.
+  interactionCommits: Map<number, Array<number>>,
+
+  // All interactions recorded (for this root) during the current session.
+  interactions: Map<number, Interaction>,
+
+  // List of tree mutation that occur during profiling.
+  // These mutations can be used along with initial snapshots to reconstruct the tree for any commit.
+  operations: Array<Uint32Array>,
+
+  // Identifies the root this profiler data corresponds to.
+  rootID: number,
+
+  // Map of fiber id to node when the Profiling session was started.
+  // This info can be used along with commitOperations to reconstruct the tree for any commit.
+  snapshots: Map<number, SnapshotNode>,
 |};
 
-export type ProfilingSnapshotNode = {|
-  id: number,
-  children: Array<number>,
-  displayName: string | null,
-  key: number | string | null,
-  type: ElementType,
+// Combination of profiling data collected by the renderer interface (backend) and Store (frontend).
+export type ProfilingDataFrontend = {|
+  // Profiling data per root.
+  dataForRoots: Map<number, ProfilingDataForRootFrontend>,
 |};
 
-export type ImportedProfilingData = {|
-  version: 3,
-  profilingOperations: Map<number, Array<Uint32Array>>,
-  profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
-  commitDetails: Array<CommitDetailsFrontend>,
-  interactions: InteractionsFrontend,
-  profilingSummary: ProfilingSummaryFrontend,
+export type CommitDataExport = {|
+  duration: number,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  interactionIDs: Array<number>,
+  priorityLevel: string | null,
+  screenshot: string | null,
+  timestamp: number,
 |};
 
-export type SerializableProfilingDataOperationsByRootID = Array<
-  [number, Array<Array<number>>]
->;
-export type SerializableProfilingDataSnapshotsByRootID = Array<
-  [number, Array<[number, ProfilingSnapshotNode]>]
->;
-
-export type ExportedProfilingSummaryFromFrontend = {|
-  version: 3,
-  profilingOperationsByRootID: SerializableProfilingDataOperationsByRootID,
-  profilingSnapshotsByRootID: SerializableProfilingDataSnapshotsByRootID,
-  rendererID: number,
+export type ProfilingDataForRootExport = {|
+  commitData: Array<CommitDataExport>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  // Tuple of Interaction ID and commit indices
+  interactionCommits: Array<[number, Array<number>]>,
+  interactions: Array<[number, Interaction]>,
+  operations: Array<Array<number>>,
   rootID: number,
+  snapshots: Array<[number, SnapshotNode]>,
 |};
 
-export type ExportedProfilingData = {|
-  version: 3,
-  profilingOperationsByRootID: SerializableProfilingDataOperationsByRootID,
-  profilingSnapshotsByRootID: SerializableProfilingDataSnapshotsByRootID,
-  commitDetails: Array<CommitDetailsBackend>,
-  interactions: InteractionsBackend,
-  profilingSummary: ProfilingSummaryBackend,
+// Serializable vefrsion of ProfilingDataFrontend data.
+export type ProfilingDataExport = {|
+  version: 5,
+  dataForRoots: Array<ProfilingDataForRootExport>,
 |};
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index b9222cd58be7..f192520f4f32 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -2,15 +2,15 @@
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
 
+import type { ProfilingDataBackend } from 'src/backend/types';
 import type {
-  ExportedProfilingSummaryFromFrontend,
-  ExportedProfilingData,
-  ImportedProfilingData,
-  ProfilingSnapshotNode,
+  ProfilingDataExport,
+  ProfilingDataForRootExport,
+  ProfilingDataForRootFrontend,
+  ProfilingDataFrontend,
+  SnapshotNode,
 } from './types';
 
-import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
-
 const commitGradient = [
   'var(--color-commit-gradient-0)',
   'var(--color-commit-gradient-1)',
@@ -24,153 +24,176 @@ const commitGradient = [
   'var(--color-commit-gradient-9)',
 ];
 
-export const prepareExportedProfilingSummary = (
-  profilingOperations: Map<number, Array<Uint32Array>>,
-  profilingSnapshots: Map<number, Map<number, ProfilingSnapshotNode>>,
-  rendererID: number,
-  rootID: number
-) => {
-  const profilingOperationsForRoot = [];
-  const operations = profilingOperations.get(rootID);
-  if (operations != null) {
-    operations.forEach(operationsTypedArray => {
-      // Convert typed array to plain array before JSON serialization, or it will be converted to an Object.
-      const operationsPlainArray = Array.from(operationsTypedArray);
-      profilingOperationsForRoot.push(operationsPlainArray);
-    });
-  }
-
-  // Convert Map to Array of key-value pairs or JSON.stringify will clobber the contents.
-  const profilingSnapshotsForRoot = [];
-  const profilingSnapshotsMap = profilingSnapshots.get(rootID);
-  if (profilingSnapshotsMap != null) {
-    for (const [elementID, snapshotNode] of profilingSnapshotsMap.entries()) {
-      profilingSnapshotsForRoot.push([elementID, snapshotNode]);
-    }
-  }
+// Combines info from the Store (frontend) and renderer interfaces (backend) into the format required by the Profiler UI.
+// This format can then be quickly exported (and re-imported).
+export function prepareProfilingDataFrontendFromBackendAndStore(
+  dataBackends: Array<ProfilingDataBackend>,
+  operationsByRootID: Map<number, Array<Uint32Array>>,
+  screenshotsByRootID: Map<number, Map<number, string>>,
+  snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
+): ProfilingDataFrontend {
+  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
+
+  dataBackends.forEach(dataBackend => {
+    dataBackend.dataForRoots.forEach(
+      ({
+        commitData,
+        displayName,
+        initialTreeBaseDurations,
+        interactionCommits,
+        interactions,
+        rootID,
+      }) => {
+        const screenshots = screenshotsByRootID.get(rootID) || null;
+
+        const operations = operationsByRootID.get(rootID);
+        if (operations == null) {
+          throw Error(`Could not find profiling operations for root ${rootID}`);
+        }
 
-  const exportedProfilingSummary: ExportedProfilingSummaryFromFrontend = {
-    version: PROFILER_EXPORT_VERSION,
-    profilingOperationsByRootID: [[rootID, profilingOperationsForRoot]],
-    profilingSnapshotsByRootID: [[rootID, profilingSnapshotsForRoot]],
-    rendererID,
-    rootID,
-  };
-  return exportedProfilingSummary;
-};
+        const snapshots = snapshotsByRootID.get(rootID);
+        if (snapshots == null) {
+          throw Error(`Could not find profiling snapshots for root ${rootID}`);
+        }
 
-export const prepareExportedProfilingData = (
-  exportedProfilingDataFromRenderer: ExportedProfilingDataFromRenderer,
-  exportedProfilingSummary: ExportedProfilingSummaryFromFrontend
-): ExportedProfilingData => {
-  if (exportedProfilingDataFromRenderer.version !== PROFILER_EXPORT_VERSION) {
-    throw new Error(
-      `Unsupported profiling data version ${
-        exportedProfilingDataFromRenderer.version
-      } from renderer with id "${exportedProfilingSummary.rendererID}"`
-    );
-  }
-  if (exportedProfilingSummary.version !== PROFILER_EXPORT_VERSION) {
-    throw new Error(
-      `Unsupported profiling summary version ${
-        exportedProfilingSummary.version
-      } from renderer with id "${exportedProfilingSummary.rendererID}"`
+        dataForRoots.set(rootID, {
+          commitData: commitData.map((commitDataBackend, commitIndex) => ({
+            duration: commitDataBackend.duration,
+            fiberActualDurations: new Map(
+              commitDataBackend.fiberActualDurations
+            ),
+            fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
+            interactionIDs: commitDataBackend.interactionIDs,
+            priorityLevel: commitDataBackend.priorityLevel,
+            screenshot:
+              (screenshots !== null && screenshots.get(commitIndex)) || null,
+            timestamp: commitDataBackend.timestamp,
+          })),
+          displayName,
+          initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+          interactionCommits: new Map(interactionCommits),
+          interactions: new Map(interactions),
+          operations,
+          rootID,
+          snapshots,
+        });
+      }
     );
-  }
-  const exportedProfilingData: ExportedProfilingData = {
-    version: PROFILER_EXPORT_VERSION,
-    profilingSummary: exportedProfilingDataFromRenderer.profilingSummary,
-    commitDetails: exportedProfilingDataFromRenderer.commitDetails,
-    interactions: exportedProfilingDataFromRenderer.interactions,
-    profilingOperationsByRootID:
-      exportedProfilingSummary.profilingOperationsByRootID,
-    profilingSnapshotsByRootID:
-      exportedProfilingSummary.profilingSnapshotsByRootID,
-  };
-  return exportedProfilingData;
-};
+  });
 
-/**
- * This function should mirror `prepareExportedProfilingData` and `prepareExportedProfilingSummary`.
- */
-export const prepareImportedProfilingData = (
-  exportedProfilingDataJsonString: string
-) => {
-  const parsed = JSON.parse(exportedProfilingDataJsonString);
+  return { dataForRoots };
+}
 
-  if (parsed.version !== PROFILER_EXPORT_VERSION) {
-    throw Error(`Unsupported profiler export version "${parsed.version}".`);
-  }
+// Converts a Profiling data export into the format required by the Store.
+export function prepareProfilingDataFrontendFromExport(
+  profilingDataExport: ProfilingDataExport
+): ProfilingDataFrontend {
+  const { version } = profilingDataExport;
 
-  // Some "exported" types in `parsed` are `...Backend`, see `prepareExportedProfilingData`,
-  // they come to `ExportedProfilingData` from `ExportedProfilingDataFromRenderer`.
-  // But the "imported" types in `ImportedProfilingData` are `...Frontend`,
-  // and some of them aren't exactly the same as `...Backend` (i.e. an interleaved array versus a map).
-  // The type annotations here help us to spot the incompatibilities and properly convert.
-
-  const exportedProfilingData: ExportedProfilingData = parsed;
-
-  const profilingSummaryExported = exportedProfilingData.profilingSummary;
-  const initialTreeBaseDurations =
-    profilingSummaryExported.initialTreeBaseDurations;
-  const initialTreeBaseDurationsMap = new Map();
-  for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {
-    const fiberID = initialTreeBaseDurations[i];
-    const initialTreeBaseDuration = initialTreeBaseDurations[i + 1];
-    initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);
+  if (version !== PROFILER_EXPORT_VERSION) {
+    throw Error(`Unsupported profiler export version "${version}"`);
   }
 
-  const profilingData: ImportedProfilingData = {
-    version: parsed.version,
-    profilingOperations: new Map(
-      exportedProfilingData.profilingOperationsByRootID.map(
-        ([rootID, profilingOperationsForRoot]) => [
-          rootID,
-          profilingOperationsForRoot.map(operations =>
-            Uint32Array.from(operations)
-          ),
-        ]
-      )
-    ),
-    profilingSnapshots: new Map(
-      exportedProfilingData.profilingSnapshotsByRootID.map(
-        ([rootID, profilingSnapshotsForRoot]) => [
-          rootID,
-          new Map(profilingSnapshotsForRoot),
-        ]
-      )
-    ),
-    commitDetails: exportedProfilingData.commitDetails.map(
-      commitDetailsBackendItem => {
-        const durations = commitDetailsBackendItem.durations;
-        const actualDurationsMap = new Map<number, number>();
-        const selfDurationsMap = new Map<number, number>();
-        for (let i = 0; i < durations.length; i += 3) {
-          const fiberID = durations[i];
-          actualDurationsMap.set(fiberID, durations[i + 1]);
-          selfDurationsMap.set(fiberID, durations[i + 2]);
-        }
-        return {
-          actualDurations: actualDurationsMap,
-          commitIndex: commitDetailsBackendItem.commitIndex,
-          interactions: commitDetailsBackendItem.interactions,
-          priorityLevel: commitDetailsBackendItem.priorityLevel,
-          rootID: commitDetailsBackendItem.rootID,
-          selfDurations: selfDurationsMap,
-        };
-      }
-    ),
-    interactions: exportedProfilingData.interactions,
-    profilingSummary: {
-      rootID: profilingSummaryExported.rootID,
-      commitDurations: profilingSummaryExported.commitDurations,
-      commitTimes: profilingSummaryExported.commitTimes,
-      initialTreeBaseDurations: initialTreeBaseDurationsMap,
-      interactionCount: profilingSummaryExported.interactionCount,
-    },
+  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
+  profilingDataExport.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      interactionCommits,
+      interactions,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.set(rootID, {
+        commitData: commitData.map(
+          ({
+            duration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            screenshot,
+            timestamp,
+          }) => ({
+            duration,
+            fiberActualDurations: new Map(fiberActualDurations),
+            fiberSelfDurations: new Map(fiberSelfDurations),
+            interactionIDs,
+            priorityLevel,
+            screenshot,
+            timestamp,
+          })
+        ),
+        displayName,
+        initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+        interactionCommits: new Map(interactionCommits),
+        interactions: new Map(interactions),
+        operations: operations.map(array => Uint32Array.from(array)), // Convert Array back to Uint32Array
+        rootID,
+        snapshots: new Map(snapshots),
+      });
+    }
+  );
+
+  return { dataForRoots };
+}
+
+// Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.
+export function prepareProfilingDataExport(
+  profilingDataFrontend: ProfilingDataFrontend
+): ProfilingDataExport {
+  const dataForRoots: Array<ProfilingDataForRootExport> = [];
+  profilingDataFrontend.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      interactionCommits,
+      interactions,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.push({
+        commitData: commitData.map(
+          ({
+            duration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            screenshot,
+            timestamp,
+          }) => ({
+            duration,
+            fiberActualDurations: Array.from(fiberActualDurations.entries()),
+            fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
+            interactionIDs,
+            priorityLevel,
+            screenshot,
+            timestamp,
+          })
+        ),
+        displayName,
+        initialTreeBaseDurations: Array.from(
+          initialTreeBaseDurations.entries()
+        ),
+        interactionCommits: Array.from(interactionCommits.entries()),
+        interactions: Array.from(interactions.entries()),
+        operations: operations.map(array => Array.from(array)), // Convert Uint32Array to Array for serialization
+        rootID,
+        snapshots: Array.from(snapshots.entries()),
+      });
+    }
+  );
+
+  return {
+    version: PROFILER_EXPORT_VERSION,
+    dataForRoots,
   };
-  return profilingData;
-};
+}
 
 export const getGradientColor = (value: number) => {
   const maxIndex = commitGradient.length - 1;

From 36d51f4eb69b89a22746aacc1550edde5f385410 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 06:40:04 -0700
Subject: [PATCH 601/814] Added root selector UI to Profiler

---
 .../views/Profiler/CommitFilterModal.js       |  10 +
 src/devtools/views/Profiler/NoCommitData.js   |  36 +--
 src/devtools/views/Profiler/Profiler.js       | 209 ++++++------------
 .../views/Profiler/ProfilerContext.js         |  91 ++++----
 .../Profiler/ProfilingImportExportButtons.js  |   6 +-
 src/devtools/views/Profiler/RootSelector.css  |   3 +
 src/devtools/views/Profiler/RootSelector.js   |  46 ++++
 7 files changed, 188 insertions(+), 213 deletions(-)
 create mode 100644 src/devtools/views/Profiler/RootSelector.css
 create mode 100644 src/devtools/views/Profiler/RootSelector.js

diff --git a/src/devtools/views/Profiler/CommitFilterModal.js b/src/devtools/views/Profiler/CommitFilterModal.js
index c47c254e0a3c..8b359479af6a 100644
--- a/src/devtools/views/Profiler/CommitFilterModal.js
+++ b/src/devtools/views/Profiler/CommitFilterModal.js
@@ -8,6 +8,16 @@ import { useModalDismissSignal } from '../hooks';
 import styles from './CommitFilterModal.css';
 
 export default function FilterModal(_: {||}) {
+  const { isModalShowing } = useContext(CommitFilterModalContext);
+
+  if (!isModalShowing) {
+    return null;
+  }
+
+  return <FilterModalImpl />;
+}
+
+function FilterModalImpl(_: {||}) {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
index 3e0dab4a2dab..f16cd9aa9659 100644
--- a/src/devtools/views/Profiler/NoCommitData.js
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -1,37 +1,19 @@
 // @flow
 
-import React, { useContext } from 'react';
-import { ProfilerContext } from './ProfilerContext';
+import React from 'react';
 import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
 
 import styles from './NoCommitData.css';
 
 export default function NoCommitData(_: {||}) {
-  const { rootHasProfilingData } = useContext(ProfilerContext);
-
-  if (rootHasProfilingData) {
-    return (
-      <div className={styles.NoCommitData}>
-        <div className={styles.Header}>
-          There is no data matching the current filter criteria.
-        </div>
-        <div className={styles.FilterMessage}>
-          Try adjusting the commit filter <ToggleCommitFilterModalButton />
-        </div>
+  return (
+    <div className={styles.NoCommitData}>
+      <div className={styles.Header}>
+        There is no data matching the current filter criteria.
       </div>
-    );
-  } else {
-    return (
-      <div className={styles.NoCommitData}>
-        <div className={styles.Header}>
-          There is no timing data to display for the currently selected commit.
-        </div>
-        <div>
-          This can indicate that a render occurred too quickly for the timing
-          API to measure. Try selecting another commit in the upper, right-hand
-          corner.
-        </div>
+      <div className={styles.FilterMessage}>
+        Try adjusting the commit filter <ToggleCommitFilterModalButton />
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 656076c6e6b2..cd39b39f2fa4 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,10 +1,7 @@
 // @flow
 
-import React, { Suspense, useContext } from 'react';
-import {
-  CommitFilterModalContext,
-  CommitFilterModalContextController,
-} from './CommitFilterModalContext';
+import React, { useContext } from 'react';
+import { CommitFilterModalContextController } from './CommitFilterModalContext';
 import { ModalDialog } from '../ModalDialog';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
@@ -13,6 +10,7 @@ import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import CommitFilterModal from './CommitFilterModal';
 import Interactions from './Interactions';
+import RootSelector from './RootSelector';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
@@ -30,111 +28,38 @@ export type Props = {|
 |};
 
 function Profiler({ supportsProfiling }: Props) {
-  const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
-    ProfilerContext
-  );
-
-  if (isProfiling || !rootHasProfilingData) {
-    return (
-      <NonSuspendingProfiler
-        hasProfilingData={hasProfilingData}
-        isProfiling={isProfiling}
-        supportsProfiling={supportsProfiling}
-      />
-    );
-  } else {
-    return (
-      <CommitFilterModalContextController>
-        <SuspendingProfiler />
-      </CommitFilterModalContextController>
-    );
-  }
-}
+  const {
+    hasProfilingData,
+    isProcessingData,
+    isProfiling,
+    selectedFiberID,
+    selectedTabID,
+    selectTab,
+  } = useContext(ProfilerContext);
 
-// This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).
-// Nothing in this view's subtree suspends.
-// By not suspending while profiling is in progress, we avoid potential cache invalidation trickiness.
-// NOTE that the structure of this UI should mirror SuspendingProfiler.
-function NonSuspendingProfiler({
-  hasProfilingData,
-  isProfiling,
-  supportsProfiling,
-}: {|
-  hasProfilingData: boolean,
-  isProfiling: boolean,
-  supportsProfiling: boolean,
-|}) {
   let view = null;
   if (!supportsProfiling) {
     view = <ProfilingNotSupported />;
   } else if (isProfiling) {
-    view = <RecortdingInProgress />;
+    view = <RecordingInProgress />;
+  } else if (isProcessingData) {
+    view = <ProcessingData />;
   } else if (!hasProfilingData) {
     view = <NoProfilingData />;
   } else {
-    view = <NoProfilingDataForRoot />;
-  }
-
-  return (
-    <div className={styles.Profiler}>
-      <div className={styles.LeftColumn}>
-        <div className={styles.Toolbar}>
-          <RecordToggle disabled={!supportsProfiling} />
-          <ReloadAndProfileButton />
-          <ClearProfilingDataButton />
-          <ProfilingImportExportButtons />
-          <div className={styles.VRule} />
-          <TabBar
-            currentTab={null}
-            disabled
-            id="Profiler"
-            selectTab={() => {}}
-            size="small"
-            tabs={tabs}
-          />
-        </div>
-        <div className={styles.Content}>
-          {view}
-          <ModalDialog />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ContentFallback() {
-  return <div className={styles.ContentFallback}>Loading...</div>;
-}
-
-function SnapshotSelectorFallback() {
-  return <div className={styles.SnapshotSelectorFallback}>Loading...</div>;
-}
-
-// This view is rendered when there is profiler data (even though there may not be any for the currently selected root).
-// This view's subtree uses suspense to request profiler data from the backend.
-// NOTE that the structure of this UI should mirror NonSuspendingProfiler.
-function SuspendingProfiler() {
-  const { selectedFiberID, selectedTabID, selectTab } = useContext(
-    ProfilerContext
-  );
-
-  const { isModalShowing: isFilterModalShowing } = useContext(
-    CommitFilterModalContext
-  );
-
-  let view = null;
-  switch (selectedTabID) {
-    case 'flame-chart':
-      view = <CommitFlamegraph />;
-      break;
-    case 'ranked-chart':
-      view = <CommitRanked />;
-      break;
-    case 'interactions':
-      view = <Interactions />;
-      break;
-    default:
-      break;
+    switch (selectedTabID) {
+      case 'flame-chart':
+        view = <CommitFlamegraph />;
+        break;
+      case 'ranked-chart':
+        view = <CommitRanked />;
+        break;
+      case 'interactions':
+        view = <Interactions />;
+        break;
+      default:
+        break;
+    }
   }
 
   let sidebar = null;
@@ -155,38 +80,37 @@ function SuspendingProfiler() {
   }
 
   return (
-    <div className={styles.Profiler}>
-      <div className={styles.LeftColumn}>
-        <div className={styles.Toolbar}>
-          <RecordToggle />
-          <ReloadAndProfileButton />
-          <ClearProfilingDataButton />
-          <ProfilingImportExportButtons />
-          <div className={styles.VRule} />
-          <TabBar
-            currentTab={selectedTabID}
-            id="Profiler"
-            selectTab={selectTab}
-            size="small"
-            tabs={tabs}
-          />
-          <div className={styles.Spacer} />
-          <ToggleCommitFilterModalButton />
-          <div className={styles.VRule} />
-          <Suspense fallback={<SnapshotSelectorFallback />}>
-            <SnapshotSelector />
-          </Suspense>
-        </div>
-        <div className={styles.Content}>
-          <Suspense fallback={<ContentFallback />}>{view}</Suspense>
-          {isFilterModalShowing && <CommitFilterModal />}
-          <ModalDialog />
+    <CommitFilterModalContextController>
+      <div className={styles.Profiler}>
+        <div className={styles.LeftColumn}>
+          <div className={styles.Toolbar}>
+            <RecordToggle />
+            <ReloadAndProfileButton />
+            <ClearProfilingDataButton />
+            <ProfilingImportExportButtons />
+            <div className={styles.VRule} />
+            <TabBar
+              currentTab={selectedTabID}
+              id="Profiler"
+              selectTab={selectTab}
+              size="small"
+              tabs={tabs}
+            />
+            <RootSelector />
+            <div className={styles.Spacer} />
+            <ToggleCommitFilterModalButton />
+            <div className={styles.VRule} />
+            {hasProfilingData && <SnapshotSelector />}
+          </div>
+          <div className={styles.Content}>
+            {view}
+            <CommitFilterModal />
+            <ModalDialog />
+          </div>
         </div>
+        <div className={styles.RightColumn}>{sidebar}</div>
       </div>
-      <div className={styles.RightColumn}>
-        <Suspense fallback={<ContentFallback />}>{sidebar}</Suspense>
-      </div>
-    </div>
+    </CommitFilterModalContextController>
   );
 }
 
@@ -220,18 +144,6 @@ const NoProfilingData = () => (
   </div>
 );
 
-const NoProfilingDataForRoot = () => (
-  <div className={styles.Column}>
-    <div className={styles.Header}>
-      No profiling data has been recorded for the selected root.
-    </div>
-    <div className={styles.Row}>
-      Select a different root in the elements panel, or click the record button{' '}
-      <RecordToggle /> to start recording.
-    </div>
-  </div>
-);
-
 const ProfilingNotSupported = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>Profiling not supported.</div>
@@ -256,7 +168,14 @@ const ProfilingNotSupported = () => (
   </div>
 );
 
-const RecortdingInProgress = () => (
+const ProcessingData = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Processing data...</div>
+    <div className={styles.Row}>This should only take a minute.</div>
+  </div>
+);
+
+const RecordingInProgress = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>Profiling is in progress...</div>
     <div className={styles.Row}>
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c829516a14b0..58ba6e1c52f6 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -31,16 +31,17 @@ type Context = {|
   // or from the backend itself (after a reload-and-profile action).
   // It is synced between the backend and frontend via a Store subscription.
   hasProfilingData: boolean,
+  isProcessingData: boolean,
   isProfiling: boolean,
   startProfiling(value: boolean): void,
   stopProfiling(value: boolean): void,
 
-  // Which renderer and root should profiling data be shown for?
-  // Often this will correspond to the selected renderer and root in the Elements panel.
-  // If nothing is selected though, this will default to the first root.
-  rendererID: number | null,
+  // Which root should profiling data be shown for?
+  // This value should be initialized to either:
+  // 1. The selected root in the Components tree (if it has any profiling data) or
+  // 2. The first root in the list with profiling data.
   rootID: number | null,
-  rootHasProfilingData: boolean,
+  setRootID: (id: number) => void,
 
   // Controls whether commits are filtered by duration.
   // This value is controlled by a filter toggle UI in the Profiler toolbar.
@@ -72,8 +73,9 @@ ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
   hasProfilingData: boolean,
-  profilingData: ProfilingDataFrontend | null,
+  isProcessingData: boolean,
   isProfiling: boolean,
+  profilingData: ProfilingDataFrontend | null,
 |};
 
 type Props = {|
@@ -85,44 +87,57 @@ function ProfilerContextController({ children }: Props) {
   const { selectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
 
+  const { profilerStore } = store;
+
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => ({
-        hasProfilingData: store.hasProfilingData,
-        profilingData: store.profilingData,
-        isProfiling: store.isProfiling,
+        hasProfilingData: profilerStore.hasProfilingData,
+        isProcessingData: profilerStore.isProcessingData,
+        isProfiling: profilerStore.isProfiling,
+        profilingData: profilerStore.profilingData,
       }),
       subscribe: (callback: Function) => {
-        store.addListener('profilingData', callback);
-        store.addListener('isProfiling', callback);
+        profilerStore.addListener('profilingData', callback);
+        profilerStore.addListener('isProcessingData', callback);
+        profilerStore.addListener('isProfiling', callback);
         return () => {
-          store.removeListener('profilingData', callback);
-          store.removeListener('isProfiling', callback);
+          profilerStore.removeListener('profilingData', callback);
+          profilerStore.removeListener('isProcessingData', callback);
+          profilerStore.removeListener('isProfiling', callback);
         };
       },
     }),
-    [store]
+    [profilerStore]
   );
-  const { isProfiling, hasProfilingData, profilingData } = useSubscription<
-    StoreProfilingState,
-    Store
-  >(subscription);
-
-  let rendererID = null;
-  let rootID = null;
-  let rootHasProfilingData = false;
-  if (profilingData !== null) {
-    rootHasProfilingData = true;
-  } else if (selectedElementID !== null) {
-    rendererID = store.getRendererIDForElement(selectedElementID);
-    rootID = store.getRootIDForElement(selectedElementID);
-    rootHasProfilingData =
-      rootID === null ? false : store.profilingOperationsByRootID.has(rootID);
-  } else if (store.roots.length > 0) {
-    // If no root is selected, assume the first root; many React apps are single root anyway.
-    rootID = store.roots[0];
-    rootHasProfilingData = store.profilingOperationsByRootID.has(rootID);
-    rendererID = store.getRendererIDForElement(rootID);
+  const {
+    hasProfilingData,
+    isProcessingData,
+    isProfiling,
+    profilingData,
+  } = useSubscription<StoreProfilingState, Store>(subscription);
+
+  const [rootID, setRootID] = useState<number | null>(null);
+
+  const dataForRoots =
+    profilingData !== null ? profilingData.dataForRoots : null;
+  if (dataForRoots != null) {
+    const firstRootID = dataForRoots.keys().next().value || null;
+
+    if (rootID === null || !dataForRoots.has(rootID)) {
+      let selectedElementRootID = null;
+      if (selectedElementID !== null) {
+        selectedElementRootID = store.getRootIDForElement(selectedElementID);
+      }
+      if (
+        selectedElementRootID !== null &&
+        dataForRoots.has(selectedElementRootID)
+      ) {
+        setRootID(selectedElementRootID);
+      } else {
+        setRootID(firstRootID);
+      }
+    }
   }
 
   const startProfiling = useCallback(() => store.startProfiling(), [store]);
@@ -186,13 +201,13 @@ function ProfilerContextController({ children }: Props) {
       selectTab,
 
       hasProfilingData,
+      isProcessingData,
       isProfiling,
       startProfiling,
       stopProfiling,
 
-      rendererID,
       rootID,
-      rootHasProfilingData,
+      setRootID,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,
@@ -214,13 +229,13 @@ function ProfilerContextController({ children }: Props) {
       selectTab,
 
       hasProfilingData,
+      isProcessingData,
       isProfiling,
       startProfiling,
       stopProfiling,
 
-      rendererID,
       rootID,
-      rootHasProfilingData,
+      setRootID,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index c196e6d6b20d..c29b1798171f 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -16,7 +16,7 @@ import styles from './ProfilingImportExportButtons.css';
 import type { ProfilingDataExport } from './types';
 
 export default function ProfilingImportExportButtons() {
-  const { isProfiling, rendererID, rootID } = useContext(ProfilerContext);
+  const { isProfiling, rootID } = useContext(ProfilerContext);
   const store = useContext(StoreContext);
   const { profilerStore } = store;
 
@@ -25,7 +25,7 @@ export default function ProfilingImportExportButtons() {
   const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
 
   const downloadData = useCallback(() => {
-    if (rendererID === null || rootID === null) {
+    if (rootID === null) {
       return;
     }
 
@@ -37,7 +37,7 @@ export default function ProfilingImportExportButtons() {
       // TODO (profarc) Generate anchor "download" tag and click it
       console.log('profilingDataExport:', profilingDataExport);
     }
-  }, [rendererID, rootID, profilerStore.profilingData]);
+  }, [rootID, profilerStore.profilingData]);
 
   const uploadData = useCallback(() => {
     if (inputRef.current !== null) {
diff --git a/src/devtools/views/Profiler/RootSelector.css b/src/devtools/views/Profiler/RootSelector.css
new file mode 100644
index 000000000000..ff1a970d46ce
--- /dev/null
+++ b/src/devtools/views/Profiler/RootSelector.css
@@ -0,0 +1,3 @@
+.Spacer {
+  flex: 1;
+}
diff --git a/src/devtools/views/Profiler/RootSelector.js b/src/devtools/views/Profiler/RootSelector.js
new file mode 100644
index 000000000000..0608e64febcd
--- /dev/null
+++ b/src/devtools/views/Profiler/RootSelector.js
@@ -0,0 +1,46 @@
+// @flow
+
+import React, { Fragment, useCallback, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { StoreContext } from '../context';
+
+import styles from './RootSelector.css';
+
+export default function RootSelector(_: {||}) {
+  const store = useContext(StoreContext);
+  const { rootID, setRootID } = useContext(ProfilerContext);
+
+  const { profilingData } = store.profilerStore;
+
+  const options = [];
+  if (profilingData !== null) {
+    profilingData.dataForRoots.forEach((dataForRoot, rootID) => {
+      options.push(
+        <option key={rootID} value={rootID}>
+          {dataForRoot.displayName}
+        </option>
+      );
+    });
+  }
+
+  const handleChange = useCallback(
+    ({ currentTarget }) => {
+      setRootID(parseInt(currentTarget.value, 10));
+    },
+    [setRootID]
+  );
+
+  if (profilingData === null || profilingData.dataForRoots.size <= 1) {
+    // Don't take up visual space if there's only one root.
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Spacer} />
+      <select value={rootID} onChange={handleChange}>
+        {options}
+      </select>
+    </Fragment>
+  );
+}

From 95bd6c8f6390ac3826ec472f41732a461e226cf6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 06:46:42 -0700
Subject: [PATCH 602/814] Added export to web shell and removed 'downloads' API
 permission

---
 shells/browser/chrome/manifest.json           |  1 -
 shells/browser/firefox/manifest.json          |  1 -
 shells/browser/shared/src/background.js       | 11 ---------
 shells/browser/shared/src/main.js             |  8 -------
 src/devtools/store.js                         | 10 --------
 .../Profiler/ProfilingImportExportButtons.js  | 23 ++++++++++---------
 src/devtools/views/utils.js                   | 16 +++++++++++++
 7 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index d6ee523d482f..00dcf2b35e73 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -44,7 +44,6 @@
   "permissions": [
     "<all_urls>",
     "background",
-    "downloads",
     "tabs",
     "file:///*",
     "http://*/*",
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 3ef00fba01e4..f95a827a5bbb 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -46,7 +46,6 @@
 
   "permissions": [
     "<all_urls>",
-    "downloads",
     "activeTab",
     "tabs",
     "file:///*",
diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index 64e0bfead84b..1090ef76d8eb 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -110,17 +110,6 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       setIconAndPopup(reactBuildType, sender.tab.id);
     }
 
-    if (request.exportFile) {
-      let { contents, filename } = request;
-      if (!Array.isArray(contents)) {
-        contents = [contents];
-      }
-
-      const blob = new Blob(contents, { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      chrome.downloads.download({ filename, saveAs: true, url });
-    }
-
     if (request.captureScreenshot) {
       const { commitIndex, rootID } = request;
       try {
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index d2da26ba2b76..6561cd9664e4 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -85,13 +85,6 @@ function createPanelIfReactLoaded() {
           localStorage.setItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
-        bridge.addListener('exportFile', ({ contents, filename }) => {
-          chrome.runtime.sendMessage({
-            exportFile: true,
-            contents,
-            filename,
-          });
-        });
         bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
           chrome.runtime.sendMessage(
             {
@@ -124,7 +117,6 @@ function createPanelIfReactLoaded() {
         store = new Store(bridge, {
           isProfiling,
           supportsCaptureScreenshots: true,
-          supportsFileDownloads: browserName === 'Chrome',
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 1385c0743112..be368ee79414 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -45,7 +45,6 @@ const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
 type Config = {|
   isProfiling?: boolean,
   supportsCaptureScreenshots?: boolean,
-  supportsFileDownloads?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
 |};
@@ -99,7 +98,6 @@ export default class Store extends EventEmitter {
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
   _supportsCaptureScreenshots: boolean = false;
-  _supportsFileDownloads: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 
@@ -127,7 +125,6 @@ export default class Store extends EventEmitter {
 
       const {
         supportsCaptureScreenshots,
-        supportsFileDownloads,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
@@ -137,9 +134,6 @@ export default class Store extends EventEmitter {
           localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) ===
           'true';
       }
-      if (supportsFileDownloads) {
-        this._supportsFileDownloads = true;
-      }
       if (supportsProfiling) {
         this._supportsProfiling = true;
       }
@@ -309,10 +303,6 @@ export default class Store extends EventEmitter {
     return this._supportsCaptureScreenshots;
   }
 
-  get supportsFileDownloads(): boolean {
-    return this._supportsFileDownloads;
-  }
-
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index c29b1798171f..11e850256b99 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -10,6 +10,7 @@ import {
   prepareProfilingDataExport,
   prepareProfilingDataFrontendFromExport,
 } from './utils';
+import { downloadFile } from '../utils';
 
 import styles from './ProfilingImportExportButtons.css';
 
@@ -34,8 +35,10 @@ export default function ProfilingImportExportButtons() {
         profilerStore.profilingData
       );
 
-      // TODO (profarc) Generate anchor "download" tag and click it
-      console.log('profilingDataExport:', profilingDataExport);
+      downloadFile(
+        'profile-data.json',
+        JSON.stringify(profilingDataExport, null, 2)
+      );
     }
   }, [rootID, profilerStore.profilingData]);
 
@@ -95,15 +98,13 @@ export default function ProfilingImportExportButtons() {
       >
         <ButtonIcon type="import" />
       </Button>
-      {store.supportsFileDownloads && (
-        <Button
-          disabled={isProfiling || !profilerStore.hasProfilingData}
-          onClick={downloadData}
-          title="Save profile..."
-        >
-          <ButtonIcon type="export" />
-        </Button>
-      )}
+      <Button
+        disabled={isProfiling || !profilerStore.hasProfilingData}
+        onClick={downloadData}
+        title="Save profile..."
+      >
+        <ButtonIcon type="export" />
+      </Button>
     </Fragment>
   );
 }
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 2db6fb82a72c..86857bc24dc3 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -146,3 +146,19 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
     return '';
   }
 }
+
+export function downloadFile(filename: string, text: string): void {
+  const element = document.createElement('a');
+  element.setAttribute(
+    'href',
+    'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
+  );
+  element.setAttribute('download', filename);
+
+  element.style.display = 'none';
+  ((document.body: any): HTMLBodyElement).appendChild(element);
+
+  element.click();
+
+  ((document.body: any): HTMLBodyElement).removeChild(element);
+}

From 2d4bb01c01121ff55faa82f7ec30536f595bb807 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 07:28:26 -0700
Subject: [PATCH 603/814] Moved profiling data to ProfilerContext to fix
 re-import bug

---
 src/devtools/views/Profiler/ProfilerContext.js        |  3 +++
 .../views/Profiler/ProfilingImportExportButtons.js    | 11 ++++-------
 src/devtools/views/Profiler/RootSelector.js           |  6 +-----
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 58ba6e1c52f6..c0d4433090c1 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -33,6 +33,7 @@ type Context = {|
   hasProfilingData: boolean,
   isProcessingData: boolean,
   isProfiling: boolean,
+  profilingData: ProfilingDataFrontend | null,
   startProfiling(value: boolean): void,
   stopProfiling(value: boolean): void,
 
@@ -203,6 +204,7 @@ function ProfilerContextController({ children }: Props) {
       hasProfilingData,
       isProcessingData,
       isProfiling,
+      profilingData,
       startProfiling,
       stopProfiling,
 
@@ -231,6 +233,7 @@ function ProfilerContextController({ children }: Props) {
       hasProfilingData,
       isProcessingData,
       isProfiling,
+      profilingData,
       startProfiling,
       stopProfiling,
 
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 11e850256b99..f7807e02dbda 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -17,7 +17,7 @@ import styles from './ProfilingImportExportButtons.css';
 import type { ProfilingDataExport } from './types';
 
 export default function ProfilingImportExportButtons() {
-  const { isProfiling, rootID } = useContext(ProfilerContext);
+  const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);
   const store = useContext(StoreContext);
   const { profilerStore } = store;
 
@@ -30,17 +30,14 @@ export default function ProfilingImportExportButtons() {
       return;
     }
 
-    if (profilerStore.profilingData !== null) {
-      const profilingDataExport = prepareProfilingDataExport(
-        profilerStore.profilingData
-      );
-
+    if (profilingData !== null) {
+      const profilingDataExport = prepareProfilingDataExport(profilingData);
       downloadFile(
         'profile-data.json',
         JSON.stringify(profilingDataExport, null, 2)
       );
     }
-  }, [rootID, profilerStore.profilingData]);
+  }, [rootID, profilingData]);
 
   const uploadData = useCallback(() => {
     if (inputRef.current !== null) {
diff --git a/src/devtools/views/Profiler/RootSelector.js b/src/devtools/views/Profiler/RootSelector.js
index 0608e64febcd..b4e89af82470 100644
--- a/src/devtools/views/Profiler/RootSelector.js
+++ b/src/devtools/views/Profiler/RootSelector.js
@@ -2,15 +2,11 @@
 
 import React, { Fragment, useCallback, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { StoreContext } from '../context';
 
 import styles from './RootSelector.css';
 
 export default function RootSelector(_: {||}) {
-  const store = useContext(StoreContext);
-  const { rootID, setRootID } = useContext(ProfilerContext);
-
-  const { profilingData } = store.profilerStore;
+  const { profilingData, rootID, setRootID } = useContext(ProfilerContext);
 
   const options = [];
   if (profilingData !== null) {

From 99b6a44beb5b10a517c4af93e2e5b5ea07ed86e9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 07:40:41 -0700
Subject: [PATCH 604/814] Updated event subscriptions and getters to use new
 ProfilerStore

---
 src/__tests__/profilerStore-test.js           |  4 +-
 src/__tests__/profilingCache-test.js          | 34 +++++-----
 src/__tests__/profilingCharts-test.js         | 48 +++++++-------
 .../profilingCommitTreeBuilder-test.js        |  6 +-
 src/__tests__/storeComponentFilters-test.js   |  6 +-
 src/devtools/ProfilerStore.js                 | 33 ++--------
 src/devtools/store.js                         | 63 -------------------
 .../views/Components/ComponentFiltersModal.js |  9 +--
 .../ToggleComponentFiltersModalButton.js      |  9 +--
 .../Profiler/ClearProfilingDataButton.js      |  7 ++-
 .../views/Profiler/CommitFlamegraph.js        |  3 +-
 src/devtools/views/Profiler/CommitRanked.js   |  3 +-
 src/devtools/views/Profiler/Interactions.js   |  3 +-
 .../views/Profiler/ProfilerContext.js         |  9 ++-
 .../Profiler/ProfilingImportExportButtons.js  |  4 +-
 .../views/Profiler/SidebarInteractions.js     |  3 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |  3 +-
 17 files changed, 91 insertions(+), 156 deletions(-)

diff --git a/src/__tests__/profilerStore-test.js b/src/__tests__/profilerStore-test.js
index d2f7eefef794..08f64b344b15 100644
--- a/src/__tests__/profilerStore-test.js
+++ b/src/__tests__/profilerStore-test.js
@@ -34,14 +34,14 @@ describe('ProfilerStore', () => {
       ReactDOM.render(<Parent key="B" count={2} />, containerB);
     });
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
 
     utils.act(() => {
       ReactDOM.render(<Parent key="A" count={4} />, containerA);
       ReactDOM.render(<Parent key="B" count={1} />, containerB);
     });
 
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     const rootA = store.roots[0];
     const rootB = store.roots[1];
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index 04e4a9fddaf1..8ea903dee176 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -51,11 +51,11 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => ReactDOM.render(<Parent count={3} />, container));
     utils.act(() => ReactDOM.render(<Parent count={1} />, container));
     utils.act(() => ReactDOM.render(<Parent count={0} />, container));
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     let profilingDataForRoot = null;
 
@@ -120,12 +120,12 @@ describe('ProfilingCache', () => {
 
     const container = document.createElement('div');
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => ReactDOM.render(<Parent count={2} />, container));
     utils.act(() => ReactDOM.render(<Parent count={3} />, container));
     utils.act(() => ReactDOM.render(<Parent count={1} />, container));
     utils.act(() => ReactDOM.render(<Parent count={0} />, container));
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
 
@@ -200,11 +200,11 @@ describe('ProfilingCache', () => {
       return null;
     };
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
       ReactDOM.render(<Grandparent />, document.createElement('div'))
     );
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     let commitData = null;
 
@@ -262,11 +262,11 @@ describe('ProfilingCache', () => {
       return data;
     };
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
       ReactDOM.render(<Parent />, document.createElement('div'))
     );
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
 
@@ -317,16 +317,16 @@ describe('ProfilingCache', () => {
 
     const container = document.createElement('div');
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => ReactDOM.render(<Parent count={1} />, container));
     utils.act(() => ReactDOM.render(<Parent count={2} />, container));
     utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     const allFiberCommits = [];
 
     function Suspender({ fiberID, previousFiberCommits, rootID }) {
-      const fiberCommits = store.profilingCache.getFiberCommits({
+      const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
         fiberID,
         rootID,
       });
@@ -407,7 +407,7 @@ describe('ProfilingCache', () => {
 
     const container = document.createElement('div');
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
       SchedulerTracing.unstable_trace(
         'mount: one child',
@@ -422,14 +422,16 @@ describe('ProfilingCache', () => {
         () => ReactDOM.render(<Parent count={2} />, container)
       )
     );
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     let interactions = null;
 
     function Suspender({ previousInteractions, rootID }) {
-      interactions = store.profilingCache.getInteractionsChartData({
-        rootID,
-      }).interactions;
+      interactions = store.profilerStore.profilingCache.getInteractionsChartData(
+        {
+          rootID,
+        }
+      ).interactions;
       if (previousInteractions != null) {
         expect(interactions).toEqual(previousInteractions);
       } else {
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 33d698600b88..cebbdc0d5457 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -47,7 +47,7 @@ describe('profiling charts', () => {
 
       const container = document.createElement('div');
 
-      utils.act(() => store.startProfiling());
+      utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
           ReactDOM.render(<Parent />, container)
@@ -60,20 +60,22 @@ describe('profiling charts', () => {
           () => ReactDOM.render(<Parent />, container)
         )
       );
-      utils.act(() => store.stopProfiling());
+      utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
       function Suspender({ commitIndex, rootID }) {
-        const commitTree = store.profilingCache.getCommitTree({
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
         });
-        const chartData = store.profilingCache.getFlamegraphChartData({
-          commitIndex,
-          commitTree,
-          rootID,
-        });
+        const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
+          {
+            commitIndex,
+            commitTree,
+            rootID,
+          }
+        );
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(
           `${commitIndex}: FlamegraphChartData`
@@ -127,7 +129,7 @@ describe('profiling charts', () => {
 
       const container = document.createElement('div');
 
-      utils.act(() => store.startProfiling());
+      utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
           ReactDOM.render(<Parent />, container)
@@ -140,20 +142,22 @@ describe('profiling charts', () => {
           () => ReactDOM.render(<Parent />, container)
         )
       );
-      utils.act(() => store.stopProfiling());
+      utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
       function Suspender({ commitIndex, rootID }) {
-        const commitTree = store.profilingCache.getCommitTree({
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
         });
-        const chartData = store.profilingCache.getRankedChartData({
-          commitIndex,
-          commitTree,
-          rootID,
-        });
+        const chartData = store.profilerStore.profilingCache.getRankedChartData(
+          {
+            commitIndex,
+            commitTree,
+            rootID,
+          }
+        );
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
         renderFinished = true;
@@ -203,7 +207,7 @@ describe('profiling charts', () => {
 
       const container = document.createElement('div');
 
-      utils.act(() => store.startProfiling());
+      utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
           ReactDOM.render(<Parent />, container)
@@ -216,14 +220,16 @@ describe('profiling charts', () => {
           () => ReactDOM.render(<Parent />, container)
         )
       );
-      utils.act(() => store.stopProfiling());
+      utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
       function Suspender({ commitIndex, rootID }) {
-        const chartData = store.profilingCache.getInteractionsChartData({
-          rootID,
-        });
+        const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
+          {
+            rootID,
+          }
+        );
         expect(chartData).toMatchSnapshot('Interactions');
         renderFinished = true;
         return null;
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 31d7acafcf3a..17cf9b9e7b94 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -38,17 +38,17 @@ describe('commit tree', () => {
 
     const container = document.createElement('div');
 
-    utils.act(() => store.startProfiling());
+    utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => ReactDOM.render(<Parent count={1} />, container));
     utils.act(() => ReactDOM.render(<Parent count={3} />, container));
     utils.act(() => ReactDOM.render(<Parent count={2} />, container));
     utils.act(() => ReactDOM.render(<Parent count={0} />, container));
-    utils.act(() => store.stopProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
 
     let renderFinished = false;
 
     function Suspender({ commitIndex, rootID }) {
-      const commitTree = store.profilingCache.getCommitTree({
+      const commitTree = store.profilerStore.profilingCache.getCommitTree({
         commitIndex,
         rootID,
       });
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 3030646bf675..dff169e92400 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -1,11 +1,13 @@
 // @flow
 
+import type Store from 'src/devtools/store';
+
 describe('Store component filters', () => {
   let React;
   let ReactDOM;
   let TestUtils;
   let Types;
-  let store;
+  let store: Store;
   let utils;
 
   const act = (callback: Function) => {
@@ -28,7 +30,7 @@ describe('Store component filters', () => {
   });
 
   it('should throw if filters are updated while profiling', () => {
-    act(() => store.startProfiling());
+    act(() => store.profilerStore.startProfiling());
     expect(() => (store.componentFilters = [])).toThrow(
       'Cannot modify filter preferences while profiling'
     );
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index 41b547682aeb..9f255fd963df 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -114,10 +114,6 @@ export default class ProfilerStore extends EventEmitter {
     throw Error(`Could not find commit data for root "${rootID}"`);
   }
 
-  get cache(): ProfilingCache {
-    return this._cache;
-  }
-
   // Profiling data has been recorded for at least one root.
   get hasProfilingData(): boolean {
     return (
@@ -125,21 +121,6 @@ export default class ProfilerStore extends EventEmitter {
     );
   }
 
-  // TODO (profarc) Remove this getter
-  get initialSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
-    return this._initialSnapshotsByRootID;
-  }
-
-  // TODO (profarc) Remove this getter
-  get inProgressOperationsByRootID(): Map<number, Array<Uint32Array>> {
-    return this._inProgressOperationsByRootID;
-  }
-
-  // TODO (profarc) Remove this getter
-  get inProgressScreenshotsByRootID(): Map<number, Map<number, string>> {
-    return this._inProgressScreenshotsByRootID;
-  }
-
   get isProcessingData(): boolean {
     return this._rendererQueue.size > 0 || this._dataBackends.length > 0;
   }
@@ -148,6 +129,10 @@ export default class ProfilerStore extends EventEmitter {
     return this._isProfiling;
   }
 
+  get profilingCache(): ProfilingCache {
+    return this._cache;
+  }
+
   get profilingData(): ProfilingDataFrontend | null {
     return this._dataFrontend;
   }
@@ -159,8 +144,6 @@ export default class ProfilerStore extends EventEmitter {
     this._inProgressScreenshotsByRootID.clear();
     this._cache.invalidate();
 
-    // TODO (profarc) Remove subscriptions to Store for this
-    this._store.emit('profilingData');
     this.emit('profilingData');
   }
 
@@ -175,8 +158,6 @@ export default class ProfilerStore extends EventEmitter {
     // Note that we clear now because any existing data is "stale".
     this._cache.invalidate();
 
-    // TODO (profarc) Remove subscriptions to Store for this
-    this._store.emit('isProfiling');
     this.emit('isProfiling');
   }
 
@@ -282,8 +263,6 @@ export default class ProfilerStore extends EventEmitter {
 
       this._dataBackends.splice(0);
 
-      // TODO (profarc) Remove subscriptions to Store for this
-      this._store.emit('isProcessingData');
       this.emit('isProcessingData');
     }
   };
@@ -320,8 +299,6 @@ export default class ProfilerStore extends EventEmitter {
       // (That would have resolved a now-stale value without any profiling data.)
       this._cache.invalidate();
 
-      // TODO (profarc) Remove subscriptions to Store for this
-      this._store.emit('isProfiling');
       this.emit('isProfiling');
 
       // If we've just finished a profiling session, we need to fetch data stored in each renderer interface
@@ -339,8 +316,6 @@ export default class ProfilerStore extends EventEmitter {
           }
         }
 
-        // TODO (profarc) Remove subscriptions to Store for this
-        this._store.emit('isProcessingData');
         this.emit('isProcessingData');
       }
     }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index be368ee79414..41b4534cc0b6 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -15,15 +15,10 @@ import {
   utfDecodeString,
 } from '../utils';
 import { __DEBUG__ } from '../constants';
-import ProfilingCache from './ProfilingCache';
 import { printStore } from 'src/__tests__/storeSerializer';
 import ProfilerStore from './ProfilerStore';
 
 import type { Element } from './views/Components/types';
-import type {
-  ProfilingDataFrontend,
-  SnapshotNode,
-} from './views/Profiler/types';
 import type { Bridge, ComponentFilter, ElementType } from '../types';
 
 const debug = (methodName, ...args) => {
@@ -236,53 +231,10 @@ export default class Store extends EventEmitter {
     return this._hasOwnerMetadata;
   }
 
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get hasProfilingData(): boolean {
-    return this._profilerStore.hasProfilingData;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get isProcessingProfilingData(): boolean {
-    return this._profilerStore.isProcessingData;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get isProfiling(): boolean {
-    return this._profilerStore.isProfiling;
-  }
-
   get numElements(): number {
     return this._weightAcrossRoots;
   }
 
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get profilingCache(): ProfilingCache {
-    return this._profilerStore.cache;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get profilingData(): ProfilingDataFrontend | null {
-    return this._profilerStore.profilingData;
-  }
-  set profilingData(value: ProfilingDataFrontend | null): void {
-    this._profilerStore.profilingData = value;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get profilingOperationsByRootID(): Map<number, Array<Uint32Array>> {
-    return this._profilerStore.inProgressOperationsByRootID;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get profilingScreenshotsByRootID(): Map<number, Map<number, string>> {
-    return this._profilerStore.inProgressScreenshotsByRootID;
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this value.
-  get profilingSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
-    return this._profilerStore.initialSnapshotsByRootID;
-  }
-
   get profilerStore(): ProfilerStore {
     return this._profilerStore;
   }
@@ -311,11 +263,6 @@ export default class Store extends EventEmitter {
     return this._supportsReloadAndProfile;
   }
 
-  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
-  clearProfilingData(): void {
-    this._profilerStore.clear();
-  }
-
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
@@ -541,16 +488,6 @@ export default class Store extends EventEmitter {
     return false;
   }
 
-  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
-  startProfiling(): void {
-    this._profilerStore.startProfiling();
-  }
-
-  // TODO (profarc) Update views to use ProfilerStore directly to access this method.
-  stopProfiling(): void {
-    this._profilerStore.stopProfiling();
-  }
-
   // TODO Maybe split this into two methods: expand() and collapse()
   toggleIsCollapsed(id: number, isCollapsed: boolean): void {
     let didMutate = false;
diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
index 45e00b7ff43a..7797dcbf2428 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -41,6 +41,7 @@ import type {
 
 export default function ComponentFiltersModalWrapper(_: {||}) {
   const store = useContext(StoreContext);
+  const { profilerStore } = store;
 
   const { isModalShowing, setIsModalShowing } = useContext(
     ComponentFiltersModalContext
@@ -50,13 +51,13 @@ export default function ComponentFiltersModalWrapper(_: {||}) {
   // If necessary, we could support this- but it doesn't seem like a necessary use case.
   const isProfilingSubscription = useMemo(
     () => ({
-      getCurrentValue: () => store.isProfiling,
+      getCurrentValue: () => profilerStore.isProfiling,
       subscribe: (callback: Function) => {
-        store.addListener('isProfiling', callback);
-        return () => store.removeListener('isProfiling', callback);
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
       },
     }),
-    [store]
+    [profilerStore]
   );
   const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
   if (isProfiling && isModalShowing) {
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
index 189454d34909..e1d237f33ac4 100644
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+++ b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
@@ -14,6 +14,7 @@ import type { ComponentFilter } from 'src/types';
 
 export default function ToggleComponentFiltersModalButton() {
   const store = useContext(StoreContext);
+  const { profilerStore } = store;
 
   const { isModalShowing, setIsModalShowing } = useContext(
     ComponentFiltersModalContext
@@ -23,13 +24,13 @@ export default function ToggleComponentFiltersModalButton() {
   // If necessary, we could support this- but it doesn't seem like a necessary use case.
   const isProfilingSubscription = useMemo(
     () => ({
-      getCurrentValue: () => store.isProfiling,
+      getCurrentValue: () => profilerStore.isProfiling,
       subscribe: (callback: Function) => {
-        store.addListener('isProfiling', callback);
-        return () => store.removeListener('isProfiling', callback);
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
       },
     }),
-    [store]
+    [profilerStore]
   );
   const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
 
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/src/devtools/views/Profiler/ClearProfilingDataButton.js
index a8be6b0f6ccf..c99f370fce40 100644
--- a/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -8,13 +8,14 @@ import { StoreContext } from '../context';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const { isProfiling } = useContext(ProfilerContext);
+  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+  const { profilerStore } = store;
 
-  const clear = useCallback(() => store.clearProfilingData(), [store]);
+  const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
 
   return (
     <Button
-      disabled={isProfiling || !store.hasProfilingData}
+      disabled={isProfiling || !hasProfilingData}
       onClick={clear}
       title="Clear profiling data"
     >
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index 58c714b52314..e9f8718d16d9 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -25,10 +25,11 @@ export type ItemData = {|
 |};
 
 export default function CommitFlamegraphAutoSizer(_: {||}) {
-  const { profilingCache } = useContext(StoreContext);
+  const { profilerStore } = useContext(StoreContext);
   const { rootID, selectedCommitIndex, selectFiber } = useContext(
     ProfilerContext
   );
+  const { profilingCache } = profilerStore;
 
   const deselectCurrentFiber = useCallback(
     event => {
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 466475c16b63..55e039ae90fc 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -25,10 +25,11 @@ export type ItemData = {|
 |};
 
 export default function CommitRankedAutoSizer(_: {||}) {
-  const { profilingCache } = useContext(StoreContext);
+  const { profilerStore } = useContext(StoreContext);
   const { rootID, selectedCommitIndex, selectFiber } = useContext(
     ProfilerContext
   );
+  const { profilingCache } = profilerStore;
 
   const deselectCurrentFiber = useCallback(
     event => {
diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js
index 6c560f7ed94d..1ec5597603fd 100644
--- a/src/devtools/views/Profiler/Interactions.js
+++ b/src/devtools/views/Profiler/Interactions.js
@@ -45,10 +45,11 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     selectTab,
   } = useContext(ProfilerContext);
   const { profilerStore } = useContext(StoreContext);
+  const { profilingCache } = profilerStore;
 
   const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
 
-  const chartData = profilerStore.cache.getInteractionsChartData({
+  const chartData = profilingCache.getInteractionsChartData({
     rootID: ((rootID: any): number),
   });
 
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c0d4433090c1..ac4b3b17e6b3 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -141,8 +141,13 @@ function ProfilerContextController({ children }: Props) {
     }
   }
 
-  const startProfiling = useCallback(() => store.startProfiling(), [store]);
-  const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
+  const startProfiling = useCallback(
+    () => store.profilerStore.startProfiling(),
+    [store]
+  );
+  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
+    store,
+  ]);
 
   const [
     isCommitFilterEnabled,
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index f7807e02dbda..fc429a9f65d9 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -55,7 +55,7 @@ export default function ProfilingImportExportButtons() {
           const profilingDataExport = ((JSON.parse(
             raw
           ): any): ProfilingDataExport);
-          store.profilingData = prepareProfilingDataFrontendFromExport(
+          profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
             profilingDataExport
           );
         } catch (error) {
@@ -76,7 +76,7 @@ export default function ProfilingImportExportButtons() {
       // TODO (profiling) Handle fileReader errors.
       fileReader.readAsText(input.files[0]);
     }
-  }, [modalDialogDispatch, store]);
+  }, [modalDialogDispatch, profilerStore]);
 
   return (
     <Fragment>
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index 035dfec50787..c23a2106fc38 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -18,7 +18,8 @@ export default function SidebarInteractions(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilingCache, profilerStore } = useContext(StoreContext);
+  const { profilerStore } = useContext(StoreContext);
+  const { profilingCache } = profilerStore;
 
   if (selectedInteractionID === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index c99d0cdb0289..c83b0bc00e29 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -12,7 +12,7 @@ import styles from './SidebarSelectedFiberInfo.css';
 export type Props = {||};
 
 export default function SidebarSelectedFiberInfo(_: Props) {
-  const { profilingCache, profilerStore } = useContext(StoreContext);
+  const { profilerStore } = useContext(StoreContext);
   const {
     rootID,
     selectCommitIndex,
@@ -21,6 +21,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     selectedFiberName,
     selectFiber,
   } = useContext(ProfilerContext);
+  const { profilingCache } = profilerStore;
 
   const commitIndices = profilingCache.getFiberCommits({
     fiberID: ((selectedFiberID: any): number),

From d09299bf85198305e088ecd353f8b3b21c3d710a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 08:05:34 -0700
Subject: [PATCH 605/814] Cleaned up some tests

---
 .../__snapshots__/profilingCache-test.js.snap | 1366 +++++++++++------
 src/__tests__/profilingCache-test.js          |  192 ++-
 src/__tests__/profilingCharts-test.js         |   60 +-
 .../profilingCommitTreeBuilder-test.js        |   20 +-
 src/__tests__/utils.js                        |    8 +-
 5 files changed, 990 insertions(+), 656 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index a6f2d1c4d603..077ad260fbc8 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -149,182 +149,181 @@ Object {
 `;
 
 exports[`ProfilingCache should collect data for each commit: imported data 1`] = `
-"{
-  \\"version\\": 5,
-  \\"dataForRoots\\": [
-    {
-      \\"commitData\\": [
-        {
-          \\"duration\\": 12,
-          \\"fiberActualDurations\\": [
-            [
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 12,
+          "fiberActualDurations": Array [
+            Array [
               1,
-              12
+              12,
             ],
-            [
+            Array [
               2,
-              12
+              12,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
+            Array [
               5,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               1,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
+            Array [
               5,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 12
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 12,
         },
-        {
-          \\"duration\\": 13,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
+            Array [
               6,
-              2
+              2,
             ],
-            [
+            Array [
               2,
-              13
+              13,
             ],
-            [
+            Array [
               1,
-              13
-            ]
+              13,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
+            Array [
               6,
-              2
+              2,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 25
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 25,
         },
-        {
-          \\"duration\\": 10,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              10
-            ]
+              10,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 35
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 35,
         },
-        {
-          \\"duration\\": 10,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              10
-            ]
+              10,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 45
-        }
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 45,
+        },
       ],
-      \\"displayName\\": \\"Parent\\",
-      \\"initialTreeBaseDurations\\": [],
-      \\"interactionCommits\\": [],
-      \\"interactions\\": [],
-      \\"operations\\": [
-        [
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
           1,
           1,
           17,
@@ -392,9 +391,9 @@ exports[`ProfilingCache should collect data for each commit: imported data 1`] =
           0,
           4,
           5,
-          1000
+          1000,
         ],
-        [
+        Array [
           1,
           1,
           8,
@@ -428,9 +427,9 @@ exports[`ProfilingCache should collect data for each commit: imported data 1`] =
           5,
           4,
           1,
-          14000
+          14000,
         ],
-        [
+        Array [
           1,
           1,
           0,
@@ -448,22 +447,23 @@ exports[`ProfilingCache should collect data for each commit: imported data 1`] =
           5,
           4,
           1,
-          11000
+          11000,
         ],
-        [
+        Array [
           1,
           1,
           0,
           2,
           1,
-          3
-        ]
+          3,
+        ],
       ],
-      \\"rootID\\": 1,
-      \\"snapshots\\": []
-    }
-  ]
-}"
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 5,
+}
 `;
 
 exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
@@ -502,155 +502,154 @@ Array [
 `;
 
 exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
-"{
-  \\"version\\": 5,
-  \\"dataForRoots\\": [
-    {
-      \\"commitData\\": [
-        {
-          \\"duration\\": 11,
-          \\"fiberActualDurations\\": [
-            [
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
               1,
-              11
+              11,
             ],
-            [
+            Array [
               2,
-              11
+              11,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               1,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 11
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 11,
         },
-        {
-          \\"duration\\": 11,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               2,
-              11
+              11,
             ],
-            [
+            Array [
               1,
-              11
-            ]
+              11,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 22
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 22,
         },
-        {
-          \\"duration\\": 13,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               6,
-              2
+              2,
             ],
-            [
+            Array [
               2,
-              13
+              13,
             ],
-            [
+            Array [
               1,
-              13
-            ]
+              13,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               6,
-              2
+              2,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 35
-        }
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 35,
+        },
       ],
-      \\"displayName\\": \\"Parent\\",
-      \\"initialTreeBaseDurations\\": [],
-      \\"interactionCommits\\": [],
-      \\"interactions\\": [],
-      \\"operations\\": [
-        [
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
           1,
           1,
           15,
@@ -706,9 +705,9 @@ exports[`ProfilingCache should collect data for each rendered fiber: imported da
           0,
           4,
           4,
-          1000
+          1000,
         ],
-        [
+        Array [
           1,
           1,
           8,
@@ -741,9 +740,9 @@ exports[`ProfilingCache should collect data for each rendered fiber: imported da
           4,
           4,
           1,
-          12000
+          12000,
         ],
-        [
+        Array [
           1,
           1,
           8,
@@ -777,17 +776,18 @@ exports[`ProfilingCache should collect data for each rendered fiber: imported da
           4,
           4,
           1,
-          14000
-        ]
+          14000,
+        ],
       ],
-      \\"rootID\\": 1,
-      \\"snapshots\\": []
-    }
-  ]
-}"
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 5,
+}
 `;
 
-exports[`ProfilingCache should collect data for each root: ProfilingSummary 1`] = `
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
 Object {
   "commitData": Array [
     Object {
@@ -795,14 +795,14 @@ Object {
       "fiberActualDurations": Map {
         3 => 0,
         4 => 1,
-        6 => 2,
+        10 => 2,
         2 => 13,
         1 => 13,
       },
       "fiberSelfDurations": Map {
         3 => 0,
         4 => 1,
-        6 => 2,
+        10 => 2,
         2 => 10,
         1 => 0,
       },
@@ -826,7 +826,7 @@ Object {
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
       "screenshot": null,
-      "timestamp": 23,
+      "timestamp": 34,
     },
     Object {
       "duration": 10,
@@ -841,7 +841,7 @@ Object {
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
       "screenshot": null,
-      "timestamp": 33,
+      "timestamp": 44,
     },
   ],
   "displayName": "Parent",
@@ -868,14 +868,14 @@ Object {
       1,
       50,
       1,
-      6,
+      10,
       5,
       2,
       2,
       1,
       2,
       4,
-      6,
+      10,
       2000,
       4,
       2,
@@ -885,7 +885,7 @@ Object {
       4,
       3,
       4,
-      6,
+      10,
       5,
       4,
       1,
@@ -897,7 +897,7 @@ Object {
       0,
       2,
       2,
-      6,
+      10,
       4,
       4,
       2,
@@ -967,153 +967,318 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should collect data for each root: imported data 1`] = `
-"{
-  \\"version\\": 5,
-  \\"dataForRoots\\": [
-    {
-      \\"commitData\\": [
-        {
-          \\"duration\\": 13,
-          \\"fiberActualDurations\\": [
-            [
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "duration": 11,
+      "fiberActualDurations": Map {
+        11 => 11,
+        12 => 11,
+        13 => 0,
+        14 => 1,
+      },
+      "fiberSelfDurations": Map {
+        11 => 0,
+        12 => 10,
+        13 => 0,
+        14 => 1,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "screenshot": null,
+      "timestamp": 24,
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {},
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [
+    Uint32Array [
+      1,
+      11,
+      15,
+      6,
+      80,
+      97,
+      114,
+      101,
+      110,
+      116,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      48,
+      1,
+      11,
+      11,
+      1,
+      1,
+      4,
+      11,
+      11000,
+      1,
+      12,
+      5,
+      11,
+      0,
+      1,
+      0,
+      4,
+      12,
+      11000,
+      1,
+      13,
+      5,
+      12,
+      12,
+      2,
+      3,
+      4,
+      13,
+      0,
+      1,
+      14,
+      8,
+      12,
+      12,
+      2,
+      0,
+      4,
+      14,
+      1000,
+    ],
+  ],
+  "rootID": 11,
+  "snapshots": Map {},
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "duration": 0,
+      "fiberActualDurations": Map {},
+      "fiberSelfDurations": Map {},
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "screenshot": null,
+      "timestamp": 34,
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    6 => 11,
+    7 => 11,
+    8 => 0,
+    9 => 1,
+  },
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [
+    Uint32Array [
+      1,
+      6,
+      0,
+      2,
+      4,
+      9,
+      8,
+      7,
+      6,
+    ],
+  ],
+  "rootID": 6,
+  "snapshots": Map {
+    6 => Object {
+      "children": Array [
+        7,
+      ],
+      "displayName": null,
+      "id": 6,
+      "key": null,
+      "type": 11,
+    },
+    7 => Object {
+      "children": Array [
+        8,
+        9,
+      ],
+      "displayName": "Parent",
+      "id": 7,
+      "key": null,
+      "type": 5,
+    },
+    8 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 8,
+      "key": "0",
+      "type": 5,
+    },
+    9 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 9,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
-              6,
-              2
+            Array [
+              10,
+              2,
             ],
-            [
+            Array [
               2,
-              13
+              13,
             ],
-            [
+            Array [
               1,
-              13
-            ]
+              13,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
+              1,
             ],
-            [
-              6,
-              2
+            Array [
+              10,
+              2,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 13
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 13,
         },
-        {
-          \\"duration\\": 10,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              10
-            ]
+              10,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 23
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 34,
         },
-        {
-          \\"duration\\": 10,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              10
-            ]
+              10,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 33
-        }
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 44,
+        },
       ],
-      \\"displayName\\": \\"Parent\\",
-      \\"initialTreeBaseDurations\\": [
-        [
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
           1,
-          12
+          12,
         ],
-        [
+        Array [
           2,
-          12
+          12,
         ],
-        [
+        Array [
           3,
-          0
+          0,
         ],
-        [
+        Array [
           4,
-          1
+          1,
         ],
-        [
+        Array [
           5,
-          1
-        ]
+          1,
+        ],
       ],
-      \\"interactionCommits\\": [],
-      \\"interactions\\": [],
-      \\"operations\\": [
-        [
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
           1,
           1,
           8,
@@ -1126,14 +1291,14 @@ exports[`ProfilingCache should collect data for each root: imported data 1`] = `
           1,
           50,
           1,
-          6,
+          10,
           5,
           2,
           2,
           1,
           2,
           4,
-          6,
+          10,
           2000,
           4,
           2,
@@ -1143,19 +1308,19 @@ exports[`ProfilingCache should collect data for each root: imported data 1`] = `
           4,
           3,
           4,
-          6,
+          10,
           5,
           4,
           1,
-          14000
+          14000,
         ],
-        [
+        Array [
           1,
           1,
           0,
           2,
           2,
-          6,
+          10,
           4,
           4,
           2,
@@ -1167,79 +1332,288 @@ exports[`ProfilingCache should collect data for each root: imported data 1`] = `
           5,
           4,
           1,
-          11000
+          11000,
         ],
-        [
+        Array [
           1,
           1,
           0,
           2,
           1,
-          3
-        ]
+          3,
+        ],
       ],
-      \\"rootID\\": 1,
-      \\"snapshots\\": [
-        [
-          1,
-          {
-            \\"id\\": 1,
-            \\"children\\": [
-              2
-            ],
-            \\"displayName\\": null,
-            \\"key\\": null,
-            \\"type\\": 11
-          }
+      "rootID": 1,
+      "snapshots": Array [
+        Array [
+          1,
+          Object {
+            "children": Array [
+              2,
+            ],
+            "displayName": null,
+            "id": 1,
+            "key": null,
+            "type": 11,
+          },
         ],
-        [
+        Array [
           2,
-          {
-            \\"id\\": 2,
-            \\"children\\": [
+          Object {
+            "children": Array [
               3,
               4,
-              5
+              5,
             ],
-            \\"displayName\\": \\"Parent\\",
-            \\"key\\": null,
-            \\"type\\": 5
-          }
+            "displayName": "Parent",
+            "id": 2,
+            "key": null,
+            "type": 5,
+          },
         ],
-        [
+        Array [
           3,
-          {
-            \\"id\\": 3,
-            \\"children\\": [],
-            \\"displayName\\": \\"Child\\",
-            \\"key\\": \\"0\\",
-            \\"type\\": 5
-          }
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 3,
+            "key": "0",
+            "type": 5,
+          },
         ],
-        [
+        Array [
           4,
-          {
-            \\"id\\": 4,
-            \\"children\\": [],
-            \\"displayName\\": \\"Child\\",
-            \\"key\\": \\"1\\",
-            \\"type\\": 5
-          }
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 4,
+            "key": "1",
+            "type": 5,
+          },
         ],
-        [
+        Array [
           5,
-          {
-            \\"id\\": 5,
-            \\"children\\": [],
-            \\"displayName\\": \\"Child\\",
-            \\"key\\": null,
-            \\"type\\": 8
-          }
-        ]
-      ]
-    }
-  ]
-}"
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 5,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              11,
+              11,
+            ],
+            Array [
+              12,
+              11,
+            ],
+            Array [
+              13,
+              0,
+            ],
+            Array [
+              14,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              11,
+              0,
+            ],
+            Array [
+              12,
+              10,
+            ],
+            Array [
+              13,
+              0,
+            ],
+            Array [
+              14,
+              1,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 24,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          11,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          11,
+          11,
+          1,
+          1,
+          4,
+          11,
+          11000,
+          1,
+          12,
+          5,
+          11,
+          0,
+          1,
+          0,
+          4,
+          12,
+          11000,
+          1,
+          13,
+          5,
+          12,
+          12,
+          2,
+          3,
+          4,
+          13,
+          0,
+          1,
+          14,
+          8,
+          12,
+          12,
+          2,
+          0,
+          4,
+          14,
+          1000,
+        ],
+      ],
+      "rootID": 11,
+      "snapshots": Array [],
+    },
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 0,
+          "fiberActualDurations": Array [],
+          "fiberSelfDurations": Array [],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 34,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
+          6,
+          11,
+        ],
+        Array [
+          7,
+          11,
+        ],
+        Array [
+          8,
+          0,
+        ],
+        Array [
+          9,
+          1,
+        ],
+      ],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          6,
+          0,
+          2,
+          4,
+          9,
+          8,
+          7,
+          6,
+        ],
+      ],
+      "rootID": 6,
+      "snapshots": Array [
+        Array [
+          6,
+          Object {
+            "children": Array [
+              7,
+            ],
+            "displayName": null,
+            "id": 6,
+            "key": null,
+            "type": 11,
+          },
+        ],
+        Array [
+          7,
+          Object {
+            "children": Array [
+              8,
+              9,
+            ],
+            "displayName": "Parent",
+            "id": 7,
+            "key": null,
+            "type": 5,
+          },
+        ],
+        Array [
+          8,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 8,
+            "key": "0",
+            "type": 5,
+          },
+        ],
+        Array [
+          9,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 9,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
+  ],
+  "version": 5,
+}
 `;
 
 exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
@@ -1260,140 +1634,139 @@ Array [
 `;
 
 exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
-"{
-  \\"version\\": 5,
-  \\"dataForRoots\\": [
-    {
-      \\"commitData\\": [
-        {
-          \\"duration\\": 11,
-          \\"fiberActualDurations\\": [
-            [
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
               1,
-              11
+              11,
             ],
-            [
+            Array [
               2,
-              11
+              11,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               1,
-              0
+              0,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               4,
-              1
-            ]
+              1,
+            ],
           ],
-          \\"interactionIDs\\": [
-            0
+          "interactionIDs": Array [
+            0,
           ],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 11
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 11,
         },
-        {
-          \\"duration\\": 11,
-          \\"fiberActualDurations\\": [
-            [
+        Object {
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               2,
-              11
+              11,
             ],
-            [
+            Array [
               1,
-              11
-            ]
+              11,
+            ],
           ],
-          \\"fiberSelfDurations\\": [
-            [
+          "fiberSelfDurations": Array [
+            Array [
               3,
-              0
+              0,
             ],
-            [
+            Array [
               5,
-              1
+              1,
             ],
-            [
+            Array [
               2,
-              10
+              10,
             ],
-            [
+            Array [
               1,
-              0
-            ]
+              0,
+            ],
           ],
-          \\"interactionIDs\\": [
-            1
+          "interactionIDs": Array [
+            1,
           ],
-          \\"priorityLevel\\": \\"Immediate\\",
-          \\"screenshot\\": null,
-          \\"timestamp\\": 22
-        }
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 22,
+        },
       ],
-      \\"displayName\\": \\"Parent\\",
-      \\"initialTreeBaseDurations\\": [],
-      \\"interactionCommits\\": [
-        [
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [
+        Array [
           0,
-          [
-            0
-          ]
+          Array [
+            0,
+          ],
         ],
-        [
+        Array [
           1,
-          [
-            1
-          ]
-        ]
+          Array [
+            1,
+          ],
+        ],
       ],
-      \\"interactions\\": [
-        [
+      "interactions": Array [
+        Array [
           0,
-          {
-            \\"__count\\": 1,
-            \\"id\\": 0,
-            \\"name\\": \\"mount: one child\\",
-            \\"timestamp\\": 0
-          }
+          Object {
+            "__count": 1,
+            "id": 0,
+            "name": "mount: one child",
+            "timestamp": 0,
+          },
+        ],
+        Array [
+          1,
+          Object {
+            "__count": 0,
+            "id": 1,
+            "name": "update: two children",
+            "timestamp": 11,
+          },
         ],
-        [
-          1,
-          {
-            \\"__count\\": 0,
-            \\"id\\": 1,
-            \\"name\\": \\"update: two children\\",
-            \\"timestamp\\": 11
-          }
-        ]
       ],
-      \\"operations\\": [
-        [
+      "operations": Array [
+        Array [
           1,
           1,
           15,
@@ -1449,9 +1822,9 @@ exports[`ProfilingCache should report every traced interaction: imported data 1`
           0,
           4,
           4,
-          1000
+          1000,
         ],
-        [
+        Array [
           1,
           1,
           8,
@@ -1484,12 +1857,13 @@ exports[`ProfilingCache should report every traced interaction: imported data 1`
           4,
           4,
           1,
-          12000
-        ]
+          12000,
+        ],
       ],
-      \\"rootID\\": 1,
-      \\"snapshots\\": []
-    }
-  ]
-}"
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 5,
+}
 `;
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index 8ea903dee176..c93d347ea8d5 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -29,7 +29,7 @@ describe('ProfilingCache', () => {
     TestRenderer = utils.requireTestRenderer();
   });
 
-  it('should collect data for each root', async done => {
+  it('should collect data for each root (including ones added or mounted after profiling started)', () => {
     const Parent = ({ count }) => {
       Scheduler.advanceTime(10);
       const children = new Array(count)
@@ -48,58 +48,72 @@ describe('ProfilingCache', () => {
     };
     const MemoizedChild = React.memo(Child);
 
-    const container = document.createElement('div');
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
 
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
     utils.act(() => store.profilerStore.stopProfiling());
 
-    let profilingDataForRoot = null;
-
-    // TODO (profarc) Add multi roots
+    let allProfilingDataForRoots = [];
 
-    function Suspender({ previousProfilingDataForRoot, rootID }) {
-      profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
+    function Validator({ previousProfilingDataForRoot, rootID }) {
+      const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
       if (previousProfilingDataForRoot != null) {
         expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
       } else {
-        expect(profilingDataForRoot).toMatchSnapshot('ProfilingSummary');
+        expect(profilingDataForRoot).toMatchSnapshot(
+          `Data for root ${profilingDataForRoot.displayName}`
+        );
       }
+      allProfilingDataForRoots.push(profilingDataForRoot);
       return null;
     }
 
-    const rootID = store.roots[0];
+    const dataForRoots =
+      store.profilerStore.profilingData !== null
+        ? store.profilerStore.profilingData.dataForRoots
+        : null;
 
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <React.Suspense fallback={null}>
-          <Suspender previousProfilingDataForRoot={null} rootID={rootID} />
-        </React.Suspense>
-      )
-    );
+    expect(dataForRoots).not.toBeNull();
 
-    expect(profilingDataForRoot).not.toBeNull();
+    if (dataForRoots !== null) {
+      dataForRoots.forEach(dataForRoot => {
+        utils.act(() =>
+          TestRenderer.create(
+            <Validator
+              previousProfilingDataForRoot={null}
+              rootID={dataForRoot.rootID}
+            />
+          )
+        );
+      });
+    }
 
-    utils.exportImportHelper(bridge, store, rootID);
+    expect(allProfilingDataForRoots).toHaveLength(3);
 
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <React.Suspense fallback={null}>
-          <Suspender
+    utils.exportImportHelper(bridge, store);
+
+    allProfilingDataForRoots.forEach(profilingDataForRoot => {
+      utils.act(() =>
+        TestRenderer.create(
+          <Validator
             previousProfilingDataForRoot={profilingDataForRoot}
-            rootID={rootID}
+            rootID={profilingDataForRoot.rootID}
           />
-        </React.Suspense>
-      )
-    );
-
-    done();
+        )
+      );
+    });
   });
 
-  it('should collect data for each commit', async done => {
+  it('should collect data for each commit', () => {
     const Parent = ({ count }) => {
       Scheduler.advanceTime(10);
       const children = new Array(count)
@@ -129,7 +143,7 @@ describe('ProfilingCache', () => {
 
     const allCommitData = [];
 
-    function Suspender({ commitIndex, previousCommitDetails, rootID }) {
+    function Validator({ commitIndex, previousCommitDetails, rootID }) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       if (previousCommitDetails != null) {
         expect(commitData).toEqual(previousCommitDetails);
@@ -145,41 +159,35 @@ describe('ProfilingCache', () => {
     const rootID = store.roots[0];
 
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      await utils.actAsync(() => {
+      utils.act(() => {
         TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={commitIndex}
-              previousCommitDetails={null}
-              rootID={rootID}
-            />
-          </React.Suspense>
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={null}
+            rootID={rootID}
+          />
         );
       });
     }
 
     expect(allCommitData).toHaveLength(4);
 
-    utils.exportImportHelper(bridge, store, rootID);
+    utils.exportImportHelper(bridge, store);
 
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      await utils.actAsync(() => {
+      utils.act(() => {
         TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              commitIndex={commitIndex}
-              previousCommitDetails={allCommitData[commitIndex]}
-              rootID={rootID}
-            />
-          </React.Suspense>
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={allCommitData[commitIndex]}
+            rootID={rootID}
+          />
         );
       });
     }
-
-    done();
   });
 
-  it('should calculate a self duration based on actual children (not filtered children)', async done => {
+  it('should calculate a self duration based on actual children (not filtered children)', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => {
@@ -208,7 +216,7 @@ describe('ProfilingCache', () => {
 
     let commitData = null;
 
-    function Suspender({ commitIndex, rootID }) {
+    function Validator({ commitIndex, rootID }) {
       commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       expect(commitData).toMatchSnapshot(
         `CommitDetails with filtered self durations`
@@ -218,17 +226,11 @@ describe('ProfilingCache', () => {
 
     const rootID = store.roots[0];
 
-    await utils.actAsync(() => {
-      TestRenderer.create(
-        <React.Suspense fallback={null}>
-          <Suspender commitIndex={0} rootID={rootID} />
-        </React.Suspense>
-      );
+    utils.act(() => {
+      TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
     });
 
     expect(commitData).not.toBeNull();
-
-    done();
   });
 
   it('should calculate self duration correctly for suspended views', async done => {
@@ -270,7 +272,7 @@ describe('ProfilingCache', () => {
 
     const allCommitData = [];
 
-    function Suspender({ commitIndex, rootID }) {
+    function Validator({ commitIndex, rootID }) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       allCommitData.push(commitData);
       expect(commitData).toMatchSnapshot(
@@ -282,11 +284,9 @@ describe('ProfilingCache', () => {
     const rootID = store.roots[0];
 
     for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-      await utils.actAsync(() => {
+      utils.act(() => {
         TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender commitIndex={commitIndex} rootID={rootID} />
-          </React.Suspense>
+          <Validator commitIndex={commitIndex} rootID={rootID} />
         );
       });
     }
@@ -296,7 +296,7 @@ describe('ProfilingCache', () => {
     done();
   });
 
-  it('should collect data for each rendered fiber', async done => {
+  it('should collect data for each rendered fiber', () => {
     const Parent = ({ count }) => {
       Scheduler.advanceTime(10);
       const children = new Array(count)
@@ -325,7 +325,7 @@ describe('ProfilingCache', () => {
 
     const allFiberCommits = [];
 
-    function Suspender({ fiberID, previousFiberCommits, rootID }) {
+    function Validator({ fiberID, previousFiberCommits, rootID }) {
       const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
         fiberID,
         rootID,
@@ -344,49 +344,43 @@ describe('ProfilingCache', () => {
     const rootID = store.roots[0];
 
     for (let index = 0; index < store.numElements; index++) {
-      await utils.actAsync(() => {
+      utils.act(() => {
         const fiberID = store.getElementIDAtIndex(index);
         if (fiberID == null) {
           throw Error(`Unexpected null ID for element at index ${index}`);
         }
         TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              fiberID={fiberID}
-              previousFiberCommits={null}
-              rootID={rootID}
-            />
-          </React.Suspense>
+          <Validator
+            fiberID={fiberID}
+            previousFiberCommits={null}
+            rootID={rootID}
+          />
         );
       });
     }
 
     expect(allFiberCommits).toHaveLength(store.numElements);
 
-    utils.exportImportHelper(bridge, store, rootID);
+    utils.exportImportHelper(bridge, store);
 
     for (let index = 0; index < store.numElements; index++) {
-      await utils.actAsync(() => {
+      utils.act(() => {
         const fiberID = store.getElementIDAtIndex(index);
         if (fiberID == null) {
           throw Error(`Unexpected null ID for element at index ${index}`);
         }
         TestRenderer.create(
-          <React.Suspense fallback={null}>
-            <Suspender
-              fiberID={fiberID}
-              previousFiberCommits={allFiberCommits[index]}
-              rootID={rootID}
-            />
-          </React.Suspense>
+          <Validator
+            fiberID={fiberID}
+            previousFiberCommits={allFiberCommits[index]}
+            rootID={rootID}
+          />
         );
       });
     }
-
-    done();
   });
 
-  it('should report every traced interaction', async done => {
+  it('should report every traced interaction', () => {
     const Parent = ({ count }) => {
       Scheduler.advanceTime(10);
       const children = new Array(count)
@@ -426,7 +420,7 @@ describe('ProfilingCache', () => {
 
     let interactions = null;
 
-    function Suspender({ previousInteractions, rootID }) {
+    function Validator({ previousInteractions, rootID }) {
       interactions = store.profilerStore.profilingCache.getInteractionsChartData(
         {
           rootID,
@@ -442,26 +436,20 @@ describe('ProfilingCache', () => {
 
     const rootID = store.roots[0];
 
-    await utils.actAsync(() =>
+    utils.act(() =>
       TestRenderer.create(
-        <React.Suspense fallback={null}>
-          <Suspender previousInteractions={null} rootID={rootID} />
-        </React.Suspense>
+        <Validator previousInteractions={null} rootID={rootID} />
       )
     );
 
     expect(interactions).not.toBeNull();
 
-    utils.exportImportHelper(bridge, store, rootID);
+    utils.exportImportHelper(bridge, store);
 
-    await utils.actAsync(() =>
+    utils.act(() =>
       TestRenderer.create(
-        <React.Suspense fallback={null}>
-          <Suspender previousInteractions={interactions} rootID={rootID} />
-        </React.Suspense>
+        <Validator previousInteractions={interactions} rootID={rootID} />
       )
     );
-
-    done();
   });
 });
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index cebbdc0d5457..d83f8b5a0fb3 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -27,7 +27,7 @@ describe('profiling charts', () => {
   });
 
   describe('flamegraph chart', () => {
-    it('should contain valid data', async done => {
+    it('should contain valid data', () => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
         return (
@@ -64,7 +64,7 @@ describe('profiling charts', () => {
 
       let renderFinished = false;
 
-      function Suspender({ commitIndex, rootID }) {
+      function Validator({ commitIndex, rootID }) {
         const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
@@ -89,27 +89,21 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
 
-        await utils.actAsync(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender commitIndex={commitIndex} rootID={rootID} />
-              </React.Suspense>
-            ),
-          3
-        );
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />
+          );
+        });
 
         expect(renderFinished).toBe(true);
       }
 
       expect(renderFinished).toBe(true);
-
-      done();
     });
   });
 
   describe('ranked chart', () => {
-    it('should contain valid data', async done => {
+    it('should contain valid data', () => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
         return (
@@ -146,7 +140,7 @@ describe('profiling charts', () => {
 
       let renderFinished = false;
 
-      function Suspender({ commitIndex, rootID }) {
+      function Validator({ commitIndex, rootID }) {
         const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
@@ -169,25 +163,19 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
 
-        await utils.actAsync(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender commitIndex={commitIndex} rootID={rootID} />
-              </React.Suspense>
-            ),
-          3
-        );
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />
+          );
+        });
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
   });
 
   describe('interactions', () => {
-    it('should contain valid data', async done => {
+    it('should contain valid data', () => {
       const Parent = ({ count }) => {
         Scheduler.advanceTime(10);
         return (
@@ -224,7 +212,7 @@ describe('profiling charts', () => {
 
       let renderFinished = false;
 
-      function Suspender({ commitIndex, rootID }) {
+      function Validator({ commitIndex, rootID }) {
         const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
           {
             rootID,
@@ -240,20 +228,14 @@ describe('profiling charts', () => {
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
 
-        await utils.actAsync(
-          () =>
-            TestRenderer.create(
-              <React.Suspense fallback={null}>
-                <Suspender commitIndex={commitIndex} rootID={rootID} />
-              </React.Suspense>
-            ),
-          3
-        );
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />
+          );
+        });
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
   });
 });
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 17cf9b9e7b94..e6c98c1d5efc 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -24,7 +24,7 @@ describe('commit tree', () => {
     TestRenderer = utils.requireTestRenderer();
   });
 
-  it('should be able to rebuild the store tree for each commit', async done => {
+  it('should be able to rebuild the store tree for each commit', () => {
     const Parent = ({ count }) => {
       Scheduler.advanceTime(10);
       return new Array(count)
@@ -47,7 +47,7 @@ describe('commit tree', () => {
 
     let renderFinished = false;
 
-    function Suspender({ commitIndex, rootID }) {
+    function Validator({ commitIndex, rootID }) {
       const commitTree = store.profilerStore.profilingCache.getCommitTree({
         commitIndex,
         rootID,
@@ -62,19 +62,13 @@ describe('commit tree', () => {
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
       renderFinished = false;
 
-      await utils.actAsync(
-        () =>
-          TestRenderer.create(
-            <React.Suspense fallback={null}>
-              <Suspender commitIndex={commitIndex} rootID={rootID} />
-            </React.Suspense>
-          ),
-        3
-      );
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator commitIndex={commitIndex} rootID={rootID} />
+        );
+      });
 
       expect(renderFinished).toBe(true);
     }
-
-    done();
   });
 });
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 934e1a593b48..d30b9a7d3cad 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -133,11 +133,7 @@ export function requireTestRenderer(): ReactTestRenderer {
   }
 }
 
-export function exportImportHelper(
-  bridge: Bridge,
-  store: Store,
-  rootID: number
-): void {
+export function exportImportHelper(bridge: Bridge, store: Store): void {
   const { act } = require('./utils');
   const {
     prepareProfilingDataExport,
@@ -170,7 +166,7 @@ export function exportImportHelper(
   expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);
 
   // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
-  expect(serializedProfilingDataExport).toMatchSnapshot('imported data');
+  expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
 
   act(() => {
     // Apply the new exported-then-reimported data so tests can re-run assertions.

From a03c3b5d14952619f8202bef76ed68c3db4d54db Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 08:22:33 -0700
Subject: [PATCH 606/814] Bumped Profiler exported data version

---
 src/__tests__/__snapshots__/profilingCache-test.js.snap | 8 ++++----
 src/constants.js                                        | 2 +-
 src/devtools/views/Profiler/types.js                    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 077ad260fbc8..f9901da82a0b 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -462,7 +462,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 5,
+  "version": 4,
 }
 `;
 
@@ -783,7 +783,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 5,
+  "version": 4,
 }
 `;
 
@@ -1612,7 +1612,7 @@ Object {
       ],
     },
   ],
-  "version": 5,
+  "version": 4,
 }
 `;
 
@@ -1864,6 +1864,6 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 5,
+  "version": 4,
 }
 `;
diff --git a/src/constants.js b/src/constants.js
index 5d43b93b5cee..3097a0749e68 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -16,4 +16,4 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
 
 export const __DEBUG__ = false;
 
-export const PROFILER_EXPORT_VERSION = 5;
+export const PROFILER_EXPORT_VERSION = 4;
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index d6a5bb4b2fb0..9af30779bec5 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -119,6 +119,6 @@ export type ProfilingDataForRootExport = {|
 
 // Serializable vefrsion of ProfilingDataFrontend data.
 export type ProfilingDataExport = {|
-  version: 5,
+  version: 4,
   dataForRoots: Array<ProfilingDataForRootExport>,
 |};

From ec44eb1e4c25ff1de863fb7cf36f4b269ca45d93 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 08:32:10 -0700
Subject: [PATCH 607/814] Tweaked did-not-render text color to be slightly
 dimmer

---
 src/devtools/views/root.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index cc6c6281062d..9969752f8769 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -22,7 +22,7 @@
   --light-color-commit-did-not-render-fill: #cfd1d5;
   --light-color-commit-did-not-render-fill-text: #000000;
   --light-color-commit-did-not-render-pattern: #cfd1d5;
-  --light-color-commit-did-not-render-pattern-text: #000000;
+  --light-color-commit-did-not-render-pattern-text: #333333;
   --light-color-commit-gradient-0: #37afa9;
   --light-color-commit-gradient-1: #63b19e;
   --light-color-commit-gradient-2: #80b393;

From d1344768b205de590531c5e8cbec991d304958d0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 08:41:57 -0700
Subject: [PATCH 608/814] Changed export code to (hopefully) support larger
 exports

---
 src/devtools/views/utils.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 86857bc24dc3..8cebefa31936 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -147,14 +147,22 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
   }
 }
 
+// Keeping this in memory seems to be enough to enable the browser to download larger profiles.
+// Without this, we would see a "Download failed: network error" failure.
+let downloadUrl = null;
+
 export function downloadFile(filename: string, text: string): void {
+  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+
+  if (downloadUrl !== null) {
+    URL.revokeObjectURL(downloadUrl);
+  }
+
+  downloadUrl = URL.createObjectURL(blob);
+
   const element = document.createElement('a');
-  element.setAttribute(
-    'href',
-    'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
-  );
+  element.setAttribute('href', downloadUrl);
   element.setAttribute('download', filename);
-
   element.style.display = 'none';
   ((document.body: any): HTMLBodyElement).appendChild(element);
 

From fbd82385d2398bfa306fc790aa7645be56bce906 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 09:04:55 -0700
Subject: [PATCH 609/814] Fixed a state cleanup issue if Profiler data is
 cleared

---
 src/devtools/ProfilerStore.js           |  3 ++-
 src/devtools/views/Profiler/Profiler.js | 30 +++++++++++++------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index 9f255fd963df..c6d714cb056b 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -153,12 +153,13 @@ export default class ProfilerStore extends EventEmitter {
     this._initialSnapshotsByRootID.clear();
     this._inProgressOperationsByRootID.clear();
     this._inProgressScreenshotsByRootID.clear();
+    this._rendererQueue.clear();
 
     // Invalidate suspense cache if profiling data is being (re-)recorded.
     // Note that we clear now because any existing data is "stale".
     this._cache.invalidate();
 
-    this.emit('isProfiling');
+    this.emit('profilingData');
   }
 
   startProfiling(): void {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index cd39b39f2fa4..643aa362efa7 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -63,20 +63,22 @@ function Profiler({ supportsProfiling }: Props) {
   }
 
   let sidebar = null;
-  switch (selectedTabID) {
-    case 'interactions':
-      sidebar = <SidebarInteractions />;
-      break;
-    case 'flame-chart':
-    case 'ranked-chart':
-      if (selectedFiberID !== null) {
-        sidebar = <SidebarSelectedFiberInfo />;
-      } else {
-        sidebar = <SidebarCommitInfo />;
-      }
-      break;
-    default:
-      break;
+  if (!isProfiling && !isProcessingData && hasProfilingData) {
+    switch (selectedTabID) {
+      case 'interactions':
+        sidebar = <SidebarInteractions />;
+        break;
+      case 'flame-chart':
+      case 'ranked-chart':
+        if (selectedFiberID !== null) {
+          sidebar = <SidebarSelectedFiberInfo />;
+        } else {
+          sidebar = <SidebarCommitInfo />;
+        }
+        break;
+      default:
+        break;
+    }
   }
 
   return (

From 962865e5bf8974d1651305ed406bfd146bc76f3e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 09:57:10 -0700
Subject: [PATCH 610/814] Add datetime to the profiling export filename

---
 .../Profiler/ProfilingImportExportButtons.js      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index fc429a9f65d9..eebe91d97e46 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -32,8 +32,21 @@ export default function ProfilingImportExportButtons() {
 
     if (profilingData !== null) {
       const profilingDataExport = prepareProfilingDataExport(profilingData);
+      const date = new Date();
+      const dateString = date
+        .toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
+        .replace(/\//g, '-');
+      const timeString = date
+        .toLocaleTimeString(undefined, {
+          hour12: false,
+        })
+        .replace(/:/g, '-');
       downloadFile(
-        'profile-data.json',
+        `profiling-data.${dateString}.${timeString}.json`,
         JSON.stringify(profilingDataExport, null, 2)
       );
     }

From b556f7444df042fb64555f12d8c1e893a9f4c3dc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 10:19:26 -0700
Subject: [PATCH 611/814] Profiler properly handles unmounted roots

---
 shells/dev/app/index.js                       |  9 ++-
 src/devtools/ProfilerStore.js                 | 28 +++++++-
 src/devtools/store.js                         |  1 -
 .../views/Profiler/CommitTreeBuilder.js       |  5 +-
 .../views/Profiler/FlamegraphChartBuilder.js  | 68 ++++++++++---------
 5 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 5c87e51a8c2b..1a2336982c47 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -4,7 +4,6 @@
 
 import { createElement } from 'react';
 import {
-  unmountComponentAtNode,
   // $FlowFixMe Flow does not yet know about createRoot()
   unstable_createRoot as createRoot,
 } from 'react-dom';
@@ -20,17 +19,17 @@ import SuspenseTree from './SuspenseTree';
 
 import './styles.css';
 
-const containers = [];
+const roots = [];
 
 function mountHelper(App) {
   const container = document.createElement('div');
 
   ((document.body: any): HTMLBodyElement).appendChild(container);
 
-  containers.push(container);
-
   const root = createRoot(container);
   root.render(createElement(App));
+
+  roots.push(root);
 }
 
 function mountTestApp() {
@@ -46,7 +45,7 @@ function mountTestApp() {
 }
 
 function unmountTestApp() {
-  containers.forEach(container => unmountComponentAtNode(container));
+  roots.forEach(root => root.unmount());
 }
 
 mountTestApp();
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index c6d714cb056b..0cf5b731f140 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -34,12 +34,19 @@ export default class ProfilerStore extends EventEmitter {
   // even though some of it is lazily parsed/derived via the ProfilingCache.
   _dataFrontend: ProfilingDataFrontend | null = null;
 
+  // Snapshot of all attached renderer IDs.
+  // Once profiling is finished, this snapshot will be used to query renderers for profiling data.
+  //
+  // This map is initialized when profiling starts and updated when a new root is added while profiling;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _initialRendererIDs: Set<number> = new Set();
+
   // Snapshot of the state of the main Store (including all roots) when profiling started.
   // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
   // to reconstruct the state of each root for each commit.
   // It's okay to use a single root to store this information because node IDs are unique across all roots.
   //
-  // This map is only updated while profiling is in progress;
+  // This map is initialized when profiling starts and updated when a new root is added while profiling;
   // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
   _initialSnapshotsByRootID: Map<number, Map<number, SnapshotNode>> = new Map();
 
@@ -139,6 +146,7 @@ export default class ProfilerStore extends EventEmitter {
   set profilingData(value: ProfilingDataFrontend | null): void {
     this._dataBackends.splice(0);
     this._dataFrontend = value;
+    this._initialRendererIDs.clear();
     this._initialSnapshotsByRootID.clear();
     this._inProgressOperationsByRootID.clear();
     this._inProgressScreenshotsByRootID.clear();
@@ -150,6 +158,7 @@ export default class ProfilerStore extends EventEmitter {
   clear(): void {
     this._dataBackends.splice(0);
     this._dataFrontend = null;
+    this._initialRendererIDs.clear();
     this._initialSnapshotsByRootID.clear();
     this._inProgressOperationsByRootID.clear();
     this._inProgressScreenshotsByRootID.clear();
@@ -215,6 +224,7 @@ export default class ProfilerStore extends EventEmitter {
     }
 
     // The first two values are always rendererID and rootID
+    const rendererID = operations[0];
     const rootID = operations[1];
 
     if (this._isProfiling) {
@@ -226,6 +236,10 @@ export default class ProfilerStore extends EventEmitter {
         profilingOperations.push(operations);
       }
 
+      if (!this._initialRendererIDs.has(rendererID)) {
+        this._initialRendererIDs.add(rendererID);
+      }
+
       if (!this._initialSnapshotsByRootID.has(rootID)) {
         this._initialSnapshotsByRootID.set(rootID, new Map());
       }
@@ -278,11 +292,19 @@ export default class ProfilerStore extends EventEmitter {
     if (isProfiling) {
       this._dataBackends.splice(0);
       this._dataFrontend = null;
+      this._initialRendererIDs.clear();
       this._initialSnapshotsByRootID.clear();
       this._inProgressOperationsByRootID.clear();
       this._inProgressScreenshotsByRootID.clear();
       this._rendererQueue.clear();
 
+      // Record all renderer IDs initially too (in case of unmount)
+      for (let rendererID of this._store.rootIDToRendererID.values()) {
+        if (!this._initialRendererIDs.has(rendererID)) {
+          this._initialRendererIDs.add(rendererID);
+        }
+      }
+
       // Record snapshot of tree at the time profiling is started.
       // This info is required to handle cases of e.g. nodes being removed during profiling.
       this._store.roots.forEach(rootID => {
@@ -309,13 +331,13 @@ export default class ProfilerStore extends EventEmitter {
         this._dataBackends.splice(0);
         this._rendererQueue.clear();
 
-        for (let rendererID of this._store.rootIDToRendererID.values()) {
+        this._initialRendererIDs.forEach(rendererID => {
           if (!this._rendererQueue.has(rendererID)) {
             this._rendererQueue.add(rendererID);
 
             this._bridge.send('getProfilingData', { rendererID });
           }
-        }
+        });
 
         this.emit('isProcessingData');
       }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 41b4534cc0b6..86654bfe6835 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -860,7 +860,6 @@ export default class Store extends EventEmitter {
 
     if (haveRootsChanged) {
       this._hasOwnerMetadata = false;
-      this._supportsProfiling = false;
       this._rootIDToCapabilities.forEach(
         ({ hasOwnerMetadata, supportsProfiling }) => {
           if (hasOwnerMetadata) {
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index ea18a5381270..35ad483aeeb5 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -267,10 +267,11 @@ function updateTree(
 
           nodes.delete(id);
 
-          const parentNode = getClonedNode(parentID);
-          if (parentNode == null) {
+          if (!nodes.has(parentID)) {
             // No-op
           } else {
+            const parentNode = getClonedNode(parentID);
+
             if (__DEBUG__) {
               debug('Remove', `fiber ${id} from parent ${parentID}`);
             }
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 7287d09189b1..9530febfc7a5 100644
--- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -117,42 +117,48 @@ export function getChartData({
     return chartNode;
   };
 
-  // Skip over the root; we don't want to show it in the flamegraph.
-  const root = nodes.get(rootID);
-  if (root == null) {
-    throw Error(`Could not find root node with id "${rootID}" in commit tree`);
-  }
-
-  // Don't assume a single root.
-  // Component filters or Fragments might lead to multiple "roots" in a flame graph.
   let baseDuration = 0;
-  for (let i = root.children.length - 1; i >= 0; i--) {
-    const id = root.children[i];
-    const node = nodes.get(id);
-    if (node == null) {
-      throw Error(`Could not find node with id "${id}" in commit tree`);
-    }
-    baseDuration += node.treeBaseDuration;
-    walkTree(id, baseDuration, 1);
-  }
 
-  fiberActualDurations.forEach((duration, id) => {
-    const node = nodes.get(id);
-    if (node != null) {
-      let currentID = node.parentID;
-      while (currentID !== 0) {
-        if (renderPathNodes.has(currentID)) {
-          // We've already walked this path; we can skip it.
-          break;
-        } else {
-          renderPathNodes.add(currentID);
-        }
+  // Special case to handle unmounted roots.
+  if (nodes.size > 0) {
+    // Skip over the root; we don't want to show it in the flamegraph.
+    const root = nodes.get(rootID);
+    if (root == null) {
+      throw Error(
+        `Could not find root node with id "${rootID}" in commit tree`
+      );
+    }
 
-        const node = nodes.get(currentID);
-        currentID = node != null ? node.parentID : 0;
+    // Don't assume a single root.
+    // Component filters or Fragments might lead to multiple "roots" in a flame graph.
+    for (let i = root.children.length - 1; i >= 0; i--) {
+      const id = root.children[i];
+      const node = nodes.get(id);
+      if (node == null) {
+        throw Error(`Could not find node with id "${id}" in commit tree`);
       }
+      baseDuration += node.treeBaseDuration;
+      walkTree(id, baseDuration, 1);
     }
-  });
+
+    fiberActualDurations.forEach((duration, id) => {
+      const node = nodes.get(id);
+      if (node != null) {
+        let currentID = node.parentID;
+        while (currentID !== 0) {
+          if (renderPathNodes.has(currentID)) {
+            // We've already walked this path; we can skip it.
+            break;
+          } else {
+            renderPathNodes.add(currentID);
+          }
+
+          const node = nodes.get(currentID);
+          currentID = node != null ? node.parentID : 0;
+        }
+      }
+    });
+  }
 
   const chartData = {
     baseDuration,

From eaaeb439b4d80e72892b897d900568f8cf77ca9c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 10:52:15 -0700
Subject: [PATCH 612/814] Fixed a missing remove-event-listener in
 ProfilerStore

---
 src/devtools/ProfilerStore.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index 0cf5b731f140..c59c073be4da 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -284,6 +284,7 @@ export default class ProfilerStore extends EventEmitter {
 
   onBridgeShutdown = () => {
     this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('profilingData', this.onBridgeProfilingData);
     this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };

From d98161874cfc599211f70045185e7f2536c93405 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 22 May 2019 22:41:17 +0100
Subject: [PATCH 613/814] [Flare] Ensure DOM inspection is Flare compatible

---
 src/backend/agent.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 08469d4d47bf..8f65f831ed69 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -375,7 +375,9 @@ export default class Agent extends EventEmitter {
     window.addEventListener('click', this._onClick, true);
     window.addEventListener('mousedown', this._onMouseDown, true);
     window.addEventListener('mouseup', this._onMouseUp, true);
-    window.addEventListener('mouseover', this._onMouseOver, true);
+    window.addEventListener('pointerover', this._onPointerOver, true);
+    window.addEventListener('pointerdown', this._onPointerDown, true);
+    window.addEventListener('pointerup', this._onPointerUp, true);
   };
 
   startProfiling = () => {
@@ -395,7 +397,9 @@ export default class Agent extends EventEmitter {
     window.removeEventListener('click', this._onClick, true);
     window.removeEventListener('mousedown', this._onMouseDown, true);
     window.removeEventListener('mouseup', this._onMouseUp, true);
-    window.removeEventListener('mouseover', this._onMouseOver, true);
+    window.removeEventListener('pointerover', this._onPointerOver, true);
+    window.removeEventListener('pointerdown', this._onPointerDown, true);
+    window.removeEventListener('pointerup', this._onPointerUp, true);
   };
 
   stopProfiling = () => {
@@ -492,6 +496,11 @@ export default class Agent extends EventEmitter {
   _onMouseDown = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
+  };
+
+  _onPointerDown = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
 
     this._selectFiberForNode(((event.target: any): HTMLElement));
   };
@@ -504,7 +513,12 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
   };
 
-  _onMouseOver = (event: MouseEvent) => {
+  _onPointerUp = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  _onPointerOver = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
 

From 98623dfdb007933ff4c38052f2827a74fc9b5a4a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 16:40:40 -0700
Subject: [PATCH 614/814] Tweak

---
 src/backend/agent.js | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 8f65f831ed69..9461c69ed6be 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -373,10 +373,11 @@ export default class Agent extends EventEmitter {
 
   startInspectingDOM = () => {
     window.addEventListener('click', this._onClick, true);
-    window.addEventListener('mousedown', this._onMouseDown, true);
-    window.addEventListener('mouseup', this._onMouseUp, true);
-    window.addEventListener('pointerover', this._onPointerOver, true);
+    window.addEventListener('mousedown', this._onMouseEvent, true);
+    window.addEventListener('mouseover', this._onMouseEvent, true);
+    window.addEventListener('mouseup', this._onMouseEvent, true);
     window.addEventListener('pointerdown', this._onPointerDown, true);
+    window.addEventListener('pointerover', this._onPointerOver, true);
     window.addEventListener('pointerup', this._onPointerUp, true);
   };
 
@@ -395,10 +396,11 @@ export default class Agent extends EventEmitter {
     hideOverlay();
 
     window.removeEventListener('click', this._onClick, true);
-    window.removeEventListener('mousedown', this._onMouseDown, true);
-    window.removeEventListener('mouseup', this._onMouseUp, true);
-    window.removeEventListener('pointerover', this._onPointerOver, true);
+    window.removeEventListener('mousedown', this._onMouseEvent, true);
+    window.removeEventListener('mouseover', this._onMouseEvent, true);
+    window.removeEventListener('mouseup', this._onMouseEvent, true);
     window.removeEventListener('pointerdown', this._onPointerDown, true);
+    window.removeEventListener('pointerover', this._onPointerOver, true);
     window.removeEventListener('pointerup', this._onPointerUp, true);
   };
 
@@ -490,10 +492,11 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     this.stopInspectingDOM();
+
     this._bridge.send('stopInspectingDOM', true);
   };
 
-  _onMouseDown = (event: MouseEvent) => {
+  _onMouseEvent = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
   };
@@ -505,19 +508,6 @@ export default class Agent extends EventEmitter {
     this._selectFiberForNode(((event.target: any): HTMLElement));
   };
 
-  // While we don't do anything here, this makes choosing
-  // the inspected element less invasive and less likely
-  // to dismiss e.g. a context menu.
-  _onMouseUp = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  _onPointerUp = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
   _onPointerOver = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -531,6 +521,11 @@ export default class Agent extends EventEmitter {
     this._selectFiberForNode(target);
   };
 
+  _onPointerUp = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
   _selectFiberForNode = throttle(
     memoize((node: HTMLElement) => {
       const id = this.getIDForNode(node);

From f14a2fd05cfb2d7fc140f1f59e1fd580c25b6a27 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 18:44:43 -0700
Subject: [PATCH 615/814] Use @reach tooltips for TabBar, cleanup
 supports-profiling subscription

---
 src/devtools/store.js          |  3 +-
 src/devtools/views/DevTools.js | 44 +++++++-----------
 src/devtools/views/TabBar.js   | 83 ++++++++++++++++++++--------------
 3 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/devtools/store.js b/src/devtools/store.js
index 86654bfe6835..5058aad35e65 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -865,8 +865,9 @@ export default class Store extends EventEmitter {
           if (hasOwnerMetadata) {
             this._hasOwnerMetadata = true;
           }
-          if (supportsProfiling) {
+          if (!this._supportsProfiling && supportsProfiling) {
             this._supportsProfiling = true;
+            this.emit('supportsProfiling');
           }
         }
       );
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 1efc67a70754..766ddd82ed00 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -5,7 +5,7 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -18,6 +18,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
+import { useSubscription } from './hooks';
 
 import styles from './DevTools.css';
 
@@ -71,8 +72,7 @@ const settingsTab = {
   title: 'React Settings',
 };
 
-const tabsWithProfiler = [componentsTab, profilerTab, settingsTab];
-const tabsWithoutProfiler = [componentsTab, settingsTab];
+const tabs = [componentsTab, profilerTab, settingsTab];
 
 export default function DevTools({
   bridge,
@@ -92,27 +92,19 @@ export default function DevTools({
     setTab(overrideTab);
   }
 
-  const [supportsProfiling, setSupportsProfiling] = useState(
-    store.supportsProfiling
+  const supportsProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.supportsProfiling,
+      subscribe: (callback: Function) => {
+        store.addListener('supportsProfiling', callback);
+        return () => store.removeListener('supportsProfiling', callback);
+      },
+    }),
+    [store]
+  );
+  const supportsProfiling = useSubscription<boolean, Store>(
+    supportsProfilingSubscription
   );
-
-  // Show/hide the "Profiler" button depending on if profiling is supported.
-  useEffect(() => {
-    if (supportsProfiling !== store.supportsProfiling) {
-      setSupportsProfiling(store.supportsProfiling);
-    }
-
-    const handleRoots = () => {
-      if (supportsProfiling !== store.supportsProfiling) {
-        setSupportsProfiling(store.supportsProfiling);
-      }
-    };
-
-    store.addListener('roots', handleRoots);
-    return () => {
-      store.removeListener('roots', handleRoots);
-    };
-  }, [store, supportsProfiling]);
 
   return (
     <BridgeContext.Provider value={bridge}>
@@ -140,11 +132,7 @@ export default function DevTools({
                           id="DevTools"
                           selectTab={setTab}
                           size="large"
-                          tabs={
-                            supportsProfiling
-                              ? tabsWithProfiler
-                              : tabsWithoutProfiler
-                          }
+                          tabs={tabs}
                         />
                       </div>
                     )}
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index 87031f7e2c34..f75d464abba9 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -2,9 +2,11 @@
 
 import classNames from 'classnames';
 import React, { Fragment, useCallback } from 'react';
+import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
+import tooltipStyles from './Tooltip.css';
 
 import type { IconType } from './Icon';
 
@@ -59,42 +61,53 @@ export default function TabBar({
 
   return (
     <Fragment>
-      {tabs.map(({ icon, id, label, title }) => (
-        <label
-          className={classNames(
-            tabClassName,
-            disabled ? styles.TabDisabled : styles.Tab,
-            !disabled && currentTab === id ? styles.TabCurrent : null
-          )}
-          key={id}
-          onKeyDown={handleKeyDown}
-          onMouseDown={() => selectTab(id)}
-          title={title || label}
-        >
-          <input
-            type="radio"
-            className={styles.Input}
-            checked={currentTab === id}
-            disabled={disabled}
-            name={groupName}
-            value={id}
-            onChange={onChange}
-          />
-          <Icon
-            className={`${disabled ? styles.IconDisabled : ''} ${
-              size === 'large' ? styles.IconSizeLarge : styles.IconSizeSmall
-            }`}
-            type={icon}
-          />
-          <span
-            className={
-              size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
-            }
+      {tabs.map(({ icon, id, label, title }) => {
+        let button = (
+          <label
+            className={classNames(
+              tabClassName,
+              disabled ? styles.TabDisabled : styles.Tab,
+              !disabled && currentTab === id ? styles.TabCurrent : null
+            )}
+            key={id}
+            onKeyDown={handleKeyDown}
+            onMouseDown={() => selectTab(id)}
           >
-            {label}
-          </span>
-        </label>
-      ))}
+            <input
+              type="radio"
+              className={styles.Input}
+              checked={currentTab === id}
+              disabled={disabled}
+              name={groupName}
+              value={id}
+              onChange={onChange}
+            />
+            <Icon
+              className={`${disabled ? styles.IconDisabled : ''} ${
+                size === 'large' ? styles.IconSizeLarge : styles.IconSizeSmall
+              }`}
+              type={icon}
+            />
+            <span
+              className={
+                size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
+              }
+            >
+              {label}
+            </span>
+          </label>
+        );
+
+        if (title) {
+          button = (
+            <Tooltip className={tooltipStyles.Tooltip} label={title}>
+              {button}
+            </Tooltip>
+          );
+        }
+
+        return button;
+      })}
     </Fragment>
   );
 }

From 351d5f662a77b27f4ca2a79982aed8da109c9696 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 20:00:06 -0700
Subject: [PATCH 616/814] Add Tab id to Tooltip

---
 src/devtools/views/TabBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index f75d464abba9..53733b7ff861 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -100,7 +100,7 @@ export default function TabBar({
 
         if (title) {
           button = (
-            <Tooltip className={tooltipStyles.Tooltip} label={title}>
+            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
               {button}
             </Tooltip>
           );

From 57194543777d966a01e0dfbaee54c68ee2a44c56 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 May 2019 20:00:21 -0700
Subject: [PATCH 617/814] Persist profiling data after navigation

---
 shells/browser/chrome/manifest.json           |  1 +
 shells/browser/firefox/manifest.json          |  1 +
 shells/browser/shared/src/main.js             | 24 ++++--
 .../profilerContext-test.js.snap              |  6 ++
 src/__tests__/profilerContext-test.js         | 78 +++++++++++++++++++
 src/bridge.js                                 | 11 ++-
 src/devtools/views/Profiler/Profiler.js       | 18 ++---
 .../views/Profiler/ProfilerContext.js         | 37 +++++----
 8 files changed, 143 insertions(+), 33 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/profilerContext-test.js.snap
 create mode 100644 src/__tests__/profilerContext-test.js

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 00dcf2b35e73..f7bc742cd945 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -45,6 +45,7 @@
     "<all_urls>",
     "background",
     "tabs",
+    "webNavigation",
     "file:///*",
     "http://*/*",
     "https://*/*"
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index f95a827a5bbb..02f24a0fef86 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -48,6 +48,7 @@
     "<all_urls>",
     "activeTab",
     "tabs",
+    "webNavigation",
     "file:///*",
     "http://*/*",
     "https://*/*"
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 6561cd9664e4..bf194d3c5e8f 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -51,6 +51,8 @@ function createPanelIfReactLoaded() {
       let bridge = null;
       let store = null;
 
+      let profilingData = null;
+
       let componentsPortalContainer = null;
       let profilerPortalContainer = null;
       let settingsPortalContainer = null;
@@ -120,6 +122,7 @@ function createPanelIfReactLoaded() {
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
+        store.profilerStore.profilingData = profilingData;
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
@@ -278,18 +281,29 @@ function createPanelIfReactLoaded() {
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-      // Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
+      // Shutdown bridge before a new page is loaded.
+      chrome.webNavigation.onBeforeNavigate.addListener(
+        function onBeforeNavigate(details) {
+          // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
+          bridge.shutdown();
+
+          profilingData = store.profilerStore.profilingData;
+        }
+      );
+
+      // Re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         // Re-initialize saved filters on navigation,
         // since global values stored on window get reset in this case.
         initializeSavedComponentFilters();
 
-        // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
-        bridge.shutdown();
-
         // It's easiest to recreate the DevTools panel (to clean up potential stale state).
         // We can revisit this in the future as a small optimization.
-        flushSync(() => root.unmount(initBridgeAndStore));
+        flushSync(() => {
+          root.unmount(() => {
+            initBridgeAndStore();
+          });
+        });
       });
     }
   );
diff --git a/src/__tests__/__snapshots__/profilerContext-test.js.snap b/src/__tests__/__snapshots__/profilerContext-test.js.snap
new file mode 100644
index 000000000000..c56fd9dee4b4
--- /dev/null
+++ b/src/__tests__/__snapshots__/profilerContext-test.js.snap
@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfilerContext should gracefully handle an empty profiling session: 1: mount 1`] = `
+[root]
+    <Example>
+`;
diff --git a/src/__tests__/profilerContext-test.js b/src/__tests__/profilerContext-test.js
new file mode 100644
index 000000000000..cbfe1043e359
--- /dev/null
+++ b/src/__tests__/profilerContext-test.js
@@ -0,0 +1,78 @@
+// @flow
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type { Element } from 'src/devtools/views/Components/types';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
+describe('ProfilerContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: Bridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let ProfilerContext;
+  let ProfilerContextController;
+  let StoreContext;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('src/devtools/views/context').BridgeContext;
+    ProfilerContext = require('src/devtools/views/Profiler/ProfilerContext')
+      .ProfilerContext;
+    ProfilerContextController = require('src/devtools/views/Profiler/ProfilerContext')
+      .ProfilerContextController;
+    StoreContext = require('src/devtools/views/context').StoreContext;
+    TreeContextController = require('src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+  });
+
+  const Contexts = ({
+    children = null,
+    defaultSelectedElementID = null,
+    defaultSelectedElementIndex = null,
+  }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultSelectedElementID={defaultSelectedElementID}
+          defaultSelectedElementIndex={defaultSelectedElementIndex}
+        >
+          <ProfilerContextController>{children}</ProfilerContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('should gracefully handle an empty profiling session', () => {
+    const Example = () => {
+      const [count] = React.useState(1);
+      return count;
+    };
+
+    const container = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    utils.act(() => {
+      TestRenderer.create(<Contexts />);
+    });
+  });
+});
diff --git a/src/bridge.js b/src/bridge.js
index a839db53231c..62a3cae2c300 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -57,9 +57,6 @@ export default class Bridge extends EventEmitter {
       return;
     }
 
-    // Mark this bridge as destroyed, i.e. disable its public API.
-    this._isShutdown = true;
-
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
     this.addListener = function() {};
     this.emit = function() {};
@@ -86,9 +83,17 @@ export default class Bridge extends EventEmitter {
     // Make sure once again that there is no dangling timer.
     clearTimeout(this._timeoutID);
     this._timeoutID = null;
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._isShutdown = true;
   }
 
   _flush = () => {
+    if (this._isShutdown) {
+      console.warn(`Cannot flush a Bridge that has been shutdown.`);
+      return;
+    }
+
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 643aa362efa7..9589c736e8ee 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -38,15 +38,7 @@ function Profiler({ supportsProfiling }: Props) {
   } = useContext(ProfilerContext);
 
   let view = null;
-  if (!supportsProfiling) {
-    view = <ProfilingNotSupported />;
-  } else if (isProfiling) {
-    view = <RecordingInProgress />;
-  } else if (isProcessingData) {
-    view = <ProcessingData />;
-  } else if (!hasProfilingData) {
-    view = <NoProfilingData />;
-  } else {
+  if (hasProfilingData) {
     switch (selectedTabID) {
       case 'flame-chart':
         view = <CommitFlamegraph />;
@@ -60,6 +52,14 @@ function Profiler({ supportsProfiling }: Props) {
       default:
         break;
     }
+  } else if (isProfiling) {
+    view = <RecordingInProgress />;
+  } else if (isProcessingData) {
+    view = <ProcessingData />;
+  } else if (supportsProfiling) {
+    view = <NoProfilingData />;
+  } else {
+    view = <ProfilingNotSupported />;
   }
 
   let sidebar = null;
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index ac4b3b17e6b3..c843e0902786 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -118,25 +118,30 @@ function ProfilerContextController({ children }: Props) {
     profilingData,
   } = useSubscription<StoreProfilingState, Store>(subscription);
 
+  const [prevProfilingData, setPrevProfilingData] = useState();
   const [rootID, setRootID] = useState<number | null>(null);
 
-  const dataForRoots =
-    profilingData !== null ? profilingData.dataForRoots : null;
-  if (dataForRoots != null) {
-    const firstRootID = dataForRoots.keys().next().value || null;
+  if (prevProfilingData !== profilingData) {
+    setPrevProfilingData(profilingData);
 
-    if (rootID === null || !dataForRoots.has(rootID)) {
-      let selectedElementRootID = null;
-      if (selectedElementID !== null) {
-        selectedElementRootID = store.getRootIDForElement(selectedElementID);
-      }
-      if (
-        selectedElementRootID !== null &&
-        dataForRoots.has(selectedElementRootID)
-      ) {
-        setRootID(selectedElementRootID);
-      } else {
-        setRootID(firstRootID);
+    const dataForRoots =
+      profilingData !== null ? profilingData.dataForRoots : null;
+    if (dataForRoots != null) {
+      const firstRootID = dataForRoots.keys().next().value || null;
+
+      if (rootID === null || !dataForRoots.has(rootID)) {
+        let selectedElementRootID = null;
+        if (selectedElementID !== null) {
+          selectedElementRootID = store.getRootIDForElement(selectedElementID);
+        }
+        if (
+          selectedElementRootID !== null &&
+          dataForRoots.has(selectedElementRootID)
+        ) {
+          setRootID(selectedElementRootID);
+        } else {
+          setRootID(firstRootID);
+        }
       }
     }
   }

From 44fbf3cd1dcf19959e68853f4e7386a1769fbf00 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 08:36:34 -0700
Subject: [PATCH 618/814] Added ProfilerContext tests

---
 .eslintrc                                     |   3 +-
 .../profilerContext-test.js.snap              |  39 ++-
 src/__tests__/profilerContext-test.js         | 262 +++++++++++++++++-
 src/devtools/ProfilerStore.js                 |   2 +-
 .../Profiler/ClearProfilingDataButton.js      |   4 +-
 src/devtools/views/Profiler/Profiler.js       |   8 +-
 .../views/Profiler/ProfilerContext.js         |  22 +-
 .../Profiler/ProfilingImportExportButtons.js  |   2 +-
 8 files changed, 308 insertions(+), 34 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5065c9aae871..5ee640698239 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,6 +12,7 @@
   },
   "globals": {
     "__DEV__": "readonly",
-    "jasmine": "readonly"
+    "jasmine": "readonly",
+    "spyOn": "readonly"
   }
 }
diff --git a/src/__tests__/__snapshots__/profilerContext-test.js.snap b/src/__tests__/__snapshots__/profilerContext-test.js.snap
index c56fd9dee4b4..927f3180b421 100644
--- a/src/__tests__/__snapshots__/profilerContext-test.js.snap
+++ b/src/__tests__/__snapshots__/profilerContext-test.js.snap
@@ -1,6 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProfilerContext should gracefully handle an empty profiling session: 1: mount 1`] = `
+exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `
 [root]
-    <Example>
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `
+[root]
+  ▾ <GrandParent>
+    ▾ <Parent>
+        <Child>
+`;
+
+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `
+[root]
+  ▾ <GrandParent>
+      <Parent>
 `;
diff --git a/src/__tests__/profilerContext-test.js b/src/__tests__/profilerContext-test.js
index cbfe1043e359..a6b0a62ff962 100644
--- a/src/__tests__/profilerContext-test.js
+++ b/src/__tests__/profilerContext-test.js
@@ -1,8 +1,9 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { Element } from 'src/devtools/views/Components/types';
 import type Bridge from 'src/bridge';
+import type { Context } from 'src/devtools/views/Profiler/ProfilerContext';
+import type { DispatcherContext } from 'src/devtools/views/Components/TreeContext';
 import type Store from 'src/devtools/store';
 
 describe('ProfilerContext', () => {
@@ -18,6 +19,8 @@ describe('ProfilerContext', () => {
   let ProfilerContextController;
   let StoreContext;
   let TreeContextController;
+  let TreeDispatcherContext;
+  let TreeStateContext;
 
   beforeEach(() => {
     utils = require('./utils');
@@ -39,13 +42,17 @@ describe('ProfilerContext', () => {
     StoreContext = require('src/devtools/views/context').StoreContext;
     TreeContextController = require('src/devtools/views/Components/TreeContext')
       .TreeContextController;
+    TreeDispatcherContext = require('src/devtools/views/Components/TreeContext')
+      .TreeDispatcherContext;
+    TreeStateContext = require('src/devtools/views/Components/TreeContext')
+      .TreeStateContext;
   });
 
   const Contexts = ({
     children = null,
     defaultSelectedElementID = null,
     defaultSelectedElementIndex = null,
-  }) => (
+  }: any) => (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
         <TreeContextController
@@ -58,21 +65,248 @@ describe('ProfilerContext', () => {
     </BridgeContext.Provider>
   );
 
-  it('should gracefully handle an empty profiling session', () => {
-    const Example = () => {
-      const [count] = React.useState(1);
-      return count;
-    };
+  it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {
+    const Example = () => null;
 
-    const container = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
-    expect(store).toMatchSnapshot('1: mount');
+    utils.act(() =>
+      ReactDOM.render(<Example />, document.createElement('div'))
+    );
+
+    let context: Context = ((null: any): Context);
 
-    utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => store.profilerStore.stopProfiling());
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
 
-    utils.act(() => {
-      TestRenderer.create(<Contexts />);
+    // Profile but don't record any updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>
+      );
     });
+    expect(context).not.toBeNull();
+    expect(context.didRecordCommits).toBe(false);
+    expect(context.isProcessingData).toBe(false);
+    expect(context.isProfiling).toBe(true);
+    expect(context.profilingData).toBe(null);
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    expect(context).not.toBeNull();
+    expect(context.didRecordCommits).toBe(false);
+    expect(context.isProcessingData).toBe(false);
+    expect(context.isProfiling).toBe(false);
+    expect(context.profilingData).not.toBe(null);
+
+    done();
+  });
+
+  it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerOne));
+    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates to both roots.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={store.getElementIDAtIndex(3)}
+          defaultSelectedElementIndex={3}
+        >
+          <ContextReader />
+        </Contexts>
+      )
+    );
+
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number))
+    );
+
+    done();
+  });
+
+  it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerOne));
+    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates to only the first root.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={store.getElementIDAtIndex(3)}
+          defaultSelectedElementIndex={3}
+        >
+          <ContextReader />
+        </Contexts>
+      )
+    );
+
+    // Verify the default profiling root is the first one.
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number))
+    );
+
+    done();
+  });
+
+  it('should maintain root selection between profiling sessions so long as there is data for that root', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerA));
+    utils.act(() => ReactDOM.render(<Parent />, containerB));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    let dispatch: DispatcherContext = ((null: any): DispatcherContext);
+    let selectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      dispatch = React.useContext(TreeDispatcherContext);
+      selectedElementID = React.useContext(TreeStateContext).selectedElementID;
+      return null;
+    }
+
+    const id = ((store.getElementIDAtIndex(3): any): number);
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>
+      )
+    );
+
+    expect(selectedElementID).toBe(id);
+
+    // Profile and record more updates to both roots
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    const otherID = ((store.getElementIDAtIndex(0): any): number);
+
+    // Change the selected element within a the Components tab.
+    utils.act(() => dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 }));
+
+    // Verify that the initial Profiler root selection is maintained.
+    expect(selectedElementID).toBe(otherID);
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(store.getRootIDForElement(id));
+
+    done();
+  });
+
+  it('should sync selected element in the Components tab too, provided the element is a match', async done => {
+    const GrandParent = ({ includeChild }) => (
+      <Parent includeChild={includeChild} />
+    );
+    const Parent = ({ includeChild }) => (includeChild ? <Child /> : null);
+    const Child = () => null;
+
+    const container = document.createElement('div');
+    utils.act(() =>
+      ReactDOM.render(<GrandParent includeChild={true} />, container)
+    );
+    expect(store).toMatchSnapshot('mounted');
+
+    const parentID = ((store.getElementIDAtIndex(1): any): number);
+    const childID = ((store.getElementIDAtIndex(2): any): number);
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() =>
+      ReactDOM.render(<GrandParent includeChild={true} />, container)
+    );
+    await utils.actAsync(() =>
+      ReactDOM.render(<GrandParent includeChild={false} />, container)
+    );
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    expect(store).toMatchSnapshot('updated');
+
+    let context: Context = ((null: any): Context);
+    let selectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      selectedElementID = React.useContext(TreeStateContext).selectedElementID;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>
+      )
+    );
+    expect(selectedElementID).toBeNull();
+
+    // Select an element in the Profiler tab and verify that the selection is synced to the Components tab.
+    await utils.actAsync(() => context.selectFiber(parentID, 'Parent'));
+    expect(selectedElementID).toBe(parentID);
+
+    // We expect a "no element found" warning.
+    // Let's hide it from the test console though.
+    spyOn(console, 'warn');
+
+    // Select an unmounted element and verify no Components tab selection doesn't change.
+    await utils.actAsync(() => context.selectFiber(childID, 'Child'));
+    expect(selectedElementID).toBe(parentID);
+
+    expect(console.warn).toHaveBeenCalledWith(
+      `No element found with id "${childID}"`
+    );
+
+    done();
   });
 });
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index c59c073be4da..30e193460026 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -122,7 +122,7 @@ export default class ProfilerStore extends EventEmitter {
   }
 
   // Profiling data has been recorded for at least one root.
-  get hasProfilingData(): boolean {
+  get didRecordCommits(): boolean {
     return (
       this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0
     );
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/src/devtools/views/Profiler/ClearProfilingDataButton.js
index c99f370fce40..d3223eb8defc 100644
--- a/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -8,14 +8,14 @@ import { StoreContext } from '../context';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
+  const { didRecordCommits, isProfiling } = useContext(ProfilerContext);
   const { profilerStore } = store;
 
   const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
 
   return (
     <Button
-      disabled={isProfiling || !hasProfilingData}
+      disabled={isProfiling || !didRecordCommits}
       onClick={clear}
       title="Clear profiling data"
     >
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 9589c736e8ee..e1bbc3b101d8 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -29,7 +29,7 @@ export type Props = {|
 
 function Profiler({ supportsProfiling }: Props) {
   const {
-    hasProfilingData,
+    didRecordCommits,
     isProcessingData,
     isProfiling,
     selectedFiberID,
@@ -38,7 +38,7 @@ function Profiler({ supportsProfiling }: Props) {
   } = useContext(ProfilerContext);
 
   let view = null;
-  if (hasProfilingData) {
+  if (didRecordCommits) {
     switch (selectedTabID) {
       case 'flame-chart':
         view = <CommitFlamegraph />;
@@ -63,7 +63,7 @@ function Profiler({ supportsProfiling }: Props) {
   }
 
   let sidebar = null;
-  if (!isProfiling && !isProcessingData && hasProfilingData) {
+  if (!isProfiling && !isProcessingData && didRecordCommits) {
     switch (selectedTabID) {
       case 'interactions':
         sidebar = <SidebarInteractions />;
@@ -102,7 +102,7 @@ function Profiler({ supportsProfiling }: Props) {
             <div className={styles.Spacer} />
             <ToggleCommitFilterModalButton />
             <div className={styles.VRule} />
-            {hasProfilingData && <SnapshotSelector />}
+            {didRecordCommits && <SnapshotSelector />}
           </div>
           <div className={styles.Content}>
             {view}
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index c843e0902786..da5090b1b21e 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -20,7 +20,7 @@ import type { ProfilingDataFrontend } from './types';
 
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
-type Context = {|
+export type Context = {|
   // Which tab is selexted in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
@@ -30,7 +30,7 @@ type Context = {|
   // This value may be modified by the record button in the Profiler toolbar,
   // or from the backend itself (after a reload-and-profile action).
   // It is synced between the backend and frontend via a Store subscription.
-  hasProfilingData: boolean,
+  didRecordCommits: boolean,
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
@@ -73,7 +73,7 @@ const ProfilerContext = createContext<Context>(((null: any): Context));
 ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
-  hasProfilingData: boolean,
+  didRecordCommits: boolean,
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
@@ -93,7 +93,7 @@ function ProfilerContextController({ children }: Props) {
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => ({
-        hasProfilingData: profilerStore.hasProfilingData,
+        didRecordCommits: profilerStore.didRecordCommits,
         isProcessingData: profilerStore.isProcessingData,
         isProfiling: profilerStore.isProfiling,
         profilingData: profilerStore.profilingData,
@@ -112,7 +112,7 @@ function ProfilerContextController({ children }: Props) {
     [profilerStore]
   );
   const {
-    hasProfilingData,
+    didRecordCommits,
     isProcessingData,
     isProfiling,
     profilingData,
@@ -177,10 +177,14 @@ function ProfilerContextController({ children }: Props) {
     (id: number | null, name: string | null) => {
       selectFiberID(id);
       selectFiberName(name);
+
+      // Sync selection to the Components tab for convenience.
       if (id !== null) {
-        // If this element is still in the store, then select it in the Components tab as well.
         const element = store.getElementByID(id);
-        if (element !== null) {
+
+        // Keep in mind that profiling data may be from a previous session.
+        // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
+        if (element !== null && element.displayName === name) {
           dispatch({
             type: 'SELECT_ELEMENT_BY_ID',
             payload: id,
@@ -211,7 +215,7 @@ function ProfilerContextController({ children }: Props) {
       selectedTabID,
       selectTab,
 
-      hasProfilingData,
+      didRecordCommits,
       isProcessingData,
       isProfiling,
       profilingData,
@@ -240,7 +244,7 @@ function ProfilerContextController({ children }: Props) {
       selectedTabID,
       selectTab,
 
-      hasProfilingData,
+      didRecordCommits,
       isProcessingData,
       isProfiling,
       profilingData,
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index eebe91d97e46..50a31fe89777 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -109,7 +109,7 @@ export default function ProfilingImportExportButtons() {
         <ButtonIcon type="import" />
       </Button>
       <Button
-        disabled={isProfiling || !profilerStore.hasProfilingData}
+        disabled={isProfiling || !profilerStore.didRecordCommits}
         onClick={downloadData}
         title="Save profile..."
       >

From 541dd6c4b6a51e853aa0e09843aed64dda313c3f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 08:48:51 -0700
Subject: [PATCH 619/814] Moved profiling-supported subscription into
 ProfilerContext

---
 src/devtools/views/DevTools.js                | 22 ++-----------------
 src/devtools/views/Profiler/Profiler.js       |  9 +++-----
 .../views/Profiler/ProfilerContext.js         | 12 +++++++++-
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 766ddd82ed00..c02eef4fe167 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -5,7 +5,7 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -18,7 +18,6 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
-import { useSubscription } from './hooks';
 
 import styles from './DevTools.css';
 
@@ -92,20 +91,6 @@ export default function DevTools({
     setTab(overrideTab);
   }
 
-  const supportsProfilingSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.supportsProfiling,
-      subscribe: (callback: Function) => {
-        store.addListener('supportsProfiling', callback);
-        return () => store.removeListener('supportsProfiling', callback);
-      },
-    }),
-    [store]
-  );
-  const supportsProfiling = useSubscription<boolean, Store>(
-    supportsProfilingSubscription
-  );
-
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -146,10 +131,7 @@ export default function DevTools({
                       className={styles.TabContent}
                       hidden={tab !== 'profiler'}
                     >
-                      <Profiler
-                        portalContainer={profilerPortalContainer}
-                        supportsProfiling={supportsProfiling}
-                      />
+                      <Profiler portalContainer={profilerPortalContainer} />
                     </div>
                     <div
                       className={styles.TabContent}
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index e1bbc3b101d8..5d4f8e579ec4 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -23,11 +23,7 @@ import portaledContent from '../portaledContent';
 
 import styles from './Profiler.css';
 
-export type Props = {|
-  supportsProfiling: boolean,
-|};
-
-function Profiler({ supportsProfiling }: Props) {
+function Profiler(_: {||}) {
   const {
     didRecordCommits,
     isProcessingData,
@@ -35,6 +31,7 @@ function Profiler({ supportsProfiling }: Props) {
     selectedFiberID,
     selectedTabID,
     selectTab,
+    supportsProfiling,
   } = useContext(ProfilerContext);
 
   let view = null;
@@ -86,7 +83,7 @@ function Profiler({ supportsProfiling }: Props) {
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
-            <RecordToggle />
+            <RecordToggle disabled={!supportsProfiling} />
             <ReloadAndProfileButton />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index da5090b1b21e..99650c07f296 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -21,6 +21,9 @@ import type { ProfilingDataFrontend } from './types';
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
 export type Context = {|
+  // Does the Store support profiling?
+  supportsProfiling: boolean,
+
   // Which tab is selexted in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
@@ -77,6 +80,7 @@ type StoreProfilingState = {|
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
+  supportsProfiling: boolean,
 |};
 
 type Props = {|
@@ -97,25 +101,29 @@ function ProfilerContextController({ children }: Props) {
         isProcessingData: profilerStore.isProcessingData,
         isProfiling: profilerStore.isProfiling,
         profilingData: profilerStore.profilingData,
+        supportsProfiling: store.supportsProfiling,
       }),
       subscribe: (callback: Function) => {
         profilerStore.addListener('profilingData', callback);
         profilerStore.addListener('isProcessingData', callback);
         profilerStore.addListener('isProfiling', callback);
+        store.addListener('supportsProfiling', callback);
         return () => {
           profilerStore.removeListener('profilingData', callback);
           profilerStore.removeListener('isProcessingData', callback);
           profilerStore.removeListener('isProfiling', callback);
+          store.removeListener('supportsProfiling', callback);
         };
       },
     }),
-    [profilerStore]
+    [profilerStore, store]
   );
   const {
     didRecordCommits,
     isProcessingData,
     isProfiling,
     profilingData,
+    supportsProfiling,
   } = useSubscription<StoreProfilingState, Store>(subscription);
 
   const [prevProfilingData, setPrevProfilingData] = useState();
@@ -221,6 +229,7 @@ function ProfilerContextController({ children }: Props) {
       profilingData,
       startProfiling,
       stopProfiling,
+      supportsProfiling,
 
       rootID,
       setRootID,
@@ -250,6 +259,7 @@ function ProfilerContextController({ children }: Props) {
       profilingData,
       startProfiling,
       stopProfiling,
+      supportsProfiling,
 
       rootID,
       setRootID,

From 74d8207e06afb484bc2714cf2c43f1480f150577 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 08:52:27 -0700
Subject: [PATCH 620/814] Improved visual style of Profiling-disabled button

---
 src/devtools/views/Profiler/RecordToggle.css | 13 +++++++++++++
 src/devtools/views/Profiler/RecordToggle.js  | 11 ++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Profiler/RecordToggle.css b/src/devtools/views/Profiler/RecordToggle.css
index 7dc0c6e36536..467bca27e3d1 100644
--- a/src/devtools/views/Profiler/RecordToggle.css
+++ b/src/devtools/views/Profiler/RecordToggle.css
@@ -23,3 +23,16 @@
 .InactiveRecordToggle:active {
   color: var(--color-record-hover);
 }
+
+.DisabledRecordToggle {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:hover {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:focus {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:active {
+  color: var(--color-button-disabled);
+}
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
index 94074002ca1d..a3d494c71666 100644
--- a/src/devtools/views/Profiler/RecordToggle.js
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -16,11 +16,16 @@ export default function RecordToggle({ disabled }: Props) {
     ProfilerContext
   );
 
+  let className = styles.InactiveRecordToggle;
+  if (disabled) {
+    className = styles.DisabledRecordToggle;
+  } else if (isProfiling) {
+    className = styles.ActiveRecordToggle;
+  }
+
   return (
     <Button
-      className={
-        isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
-      }
+      className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
       title={isProfiling ? 'Stop profiling' : 'Start profiling'}

From e4aa3c5b3375154037674f56624e6619bb889274 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 09:09:35 -0700
Subject: [PATCH 621/814] Update profiling-supported status each time roots
 change (and added tests)

---
 src/__tests__/profilerContext-test.js         | 35 +++++++++++++++++++
 src/__tests__/store-test.js                   | 19 ++++++++++
 src/devtools/store.js                         | 10 ++++--
 .../views/Profiler/ProfilerContext.js         |  9 ++---
 4 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/__tests__/profilerContext-test.js b/src/__tests__/profilerContext-test.js
index a6b0a62ff962..3d3a68f5919a 100644
--- a/src/__tests__/profilerContext-test.js
+++ b/src/__tests__/profilerContext-test.js
@@ -65,6 +65,41 @@ describe('ProfilerContext', () => {
     </BridgeContext.Provider>
   );
 
+  it('updates updates profiling support based on the attached roots', async done => {
+    const Component = () => null;
+
+    let context: Context = ((null: any): Context);
+
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>
+      );
+    });
+
+    expect(context.supportsProfiling).toBe(false);
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    await utils.actAsync(() => ReactDOM.render(<Component />, containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => ReactDOM.render(<Component />, containerB));
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(context.supportsProfiling).toBe(false);
+
+    done();
+  });
+
   it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {
     const Example = () => null;
 
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 38c5b33eab8e..7c273a7c3158 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -778,4 +778,23 @@ describe('Store', () => {
       }
     });
   });
+
+  it('detects and updates profiling support based on the attached roots', () => {
+    const Component = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    expect(store.supportsProfiling).toBe(false);
+
+    act(() => ReactDOM.render(<Component />, containerA));
+    expect(store.supportsProfiling).toBe(true);
+
+    act(() => ReactDOM.render(<Component />, containerB));
+    act(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(store.supportsProfiling).toBe(true);
+
+    act(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(store.supportsProfiling).toBe(false);
+  });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5058aad35e65..c3a8ccabb9ea 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -859,20 +859,26 @@ export default class Store extends EventEmitter {
     this._revision++;
 
     if (haveRootsChanged) {
+      const prevSupportsProfiling = this._supportsProfiling;
+
       this._hasOwnerMetadata = false;
+      this._supportsProfiling = false;
       this._rootIDToCapabilities.forEach(
         ({ hasOwnerMetadata, supportsProfiling }) => {
           if (hasOwnerMetadata) {
             this._hasOwnerMetadata = true;
           }
-          if (!this._supportsProfiling && supportsProfiling) {
+          if (supportsProfiling) {
             this._supportsProfiling = true;
-            this.emit('supportsProfiling');
           }
         }
       );
 
       this.emit('roots');
+
+      if (this._supportsProfiling !== prevSupportsProfiling) {
+        this.emit('supportsProfiling');
+      }
     }
 
     if (__DEBUG__) {
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 99650c07f296..9c5f1ed2b678 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -21,16 +21,12 @@ import type { ProfilingDataFrontend } from './types';
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
 export type Context = {|
-  // Does the Store support profiling?
-  supportsProfiling: boolean,
-
   // Which tab is selexted in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
 
-  // Have we recorded any profiling data?
-  // Are we currently profiling?
-  // This value may be modified by the record button in the Profiler toolbar,
+  // Store subscription based values.
+  // The isProfiling value may be modified by the record button in the Profiler toolbar,
   // or from the backend itself (after a reload-and-profile action).
   // It is synced between the backend and frontend via a Store subscription.
   didRecordCommits: boolean,
@@ -39,6 +35,7 @@ export type Context = {|
   profilingData: ProfilingDataFrontend | null,
   startProfiling(value: boolean): void,
   stopProfiling(value: boolean): void,
+  supportsProfiling: boolean,
 
   // Which root should profiling data be shown for?
   // This value should be initialized to either:

From 779fd167ffb004c337b5ba3d7923c2f18a96109a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 14 May 2019 21:37:53 +0100
Subject: [PATCH 622/814] Adds inspectable event components + props

[Flare] Adds inspectable event components + props
---
 src/__tests__/inspectedElementSerializer.js   |  1 +
 src/backend/renderer.js                       | 23 +++++
 src/devtools/views/Components/EventsTree.css  | 27 ++++++
 src/devtools/views/Components/EventsTree.js   | 88 +++++++++++++++++++
 .../Components/InspectedElementContext.js     |  1 +
 .../views/Components/SelectedElement.js       |  3 +
 src/devtools/views/Components/types.js        |  1 +
 7 files changed, 144 insertions(+)
 create mode 100644 src/devtools/views/Components/EventsTree.css
 create mode 100644 src/devtools/views/Components/EventsTree.js

diff --git a/src/__tests__/inspectedElementSerializer.js b/src/__tests__/inspectedElementSerializer.js
index 2423683c2402..13e105cf0d62 100644
--- a/src/__tests__/inspectedElementSerializer.js
+++ b/src/__tests__/inspectedElementSerializer.js
@@ -17,6 +17,7 @@ export function print(inspectedElement, serialize, indent) {
       id: inspectedElement.id,
       owners: inspectedElement.owners,
       context: inspectedElement.context,
+      events: inspectedElement.events,
       hooks: inspectedElement.hooks,
       props: inspectedElement.props,
       state: inspectedElement.state,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index f4e8a6ffe93a..6d23df5032c1 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -478,6 +478,10 @@ export function attach(
           case EVENT_TARGET_TOUCH_HIT_STRING:
             return 'TouchHitTarget';
           default:
+            const displayName = elementType.displayName;
+            if (displayName !== undefined) {
+              return displayName;
+            }
             return 'EventTarget';
         }
       case ForwardRef:
@@ -1833,6 +1837,23 @@ export function attach(
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
 
+    let events = null;
+    let node = fiber;
+    while (node !== null) {
+      if (node.tag === EventComponent) {
+        if (events === null) {
+          events = [];
+        }
+        const eventComponentInstance = node.stateNode;
+        const currentFiber = eventComponentInstance.currentFiber;
+        events.push({
+          props: eventComponentInstance.props,
+          displayName: currentFiber.type.displayName,
+        });
+      }
+      node = node.return;
+    }
+
     return {
       id,
 
@@ -1858,6 +1879,7 @@ export function attach(
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
       context,
+      events,
       hooks: usesHooks
         ? inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
         : null,
@@ -1879,6 +1901,7 @@ export function attach(
     }
     // TODO Review sanitization approach for the below inspectable values.
     result.context = cleanForBridge(result.context);
+    result.events = cleanForBridge(result.events);
     result.hooks = cleanForBridge(result.hooks);
     result.props = cleanForBridge(result.props);
     result.state = cleanForBridge(result.state);
diff --git a/src/devtools/views/Components/EventsTree.css b/src/devtools/views/Components/EventsTree.css
new file mode 100644
index 000000000000..e89246aa1bc9
--- /dev/null
+++ b/src/devtools/views/Components/EventsTree.css
@@ -0,0 +1,27 @@
+.EventsTree {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+.EventsTree:first-of-type {
+  border-top: none;
+}
+
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  flex: 1 1;
+  font-family: var(--font-family-sans);
+}
+
+.NameValueRow {
+  display: flex;
+}
+
+.Empty {
+  color: var(--color-dimmer);
+  font-style: italic;
+  padding-left: 0.75rem;
+}
\ No newline at end of file
diff --git a/src/devtools/views/Components/EventsTree.js b/src/devtools/views/Components/EventsTree.js
new file mode 100644
index 000000000000..3c8635e627a7
--- /dev/null
+++ b/src/devtools/views/Components/EventsTree.js
@@ -0,0 +1,88 @@
+import { copy } from 'clipboard-js';
+import React, { useCallback, useState } from 'react';
+import styles from './EventsTree.css';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
+import { serializeDataForCopy } from '../utils';
+
+type Props = {|
+  events: Object,
+|};
+
+function EventsTreeView({ events }: Props) {
+  const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [
+    events,
+  ]);
+
+  return (
+    <div className={styles.EventsTree}>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>events</div>
+        {
+          <Button onClick={handleCopy} title="Copy to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        }
+      </div>
+      <InnerEventsTreeView events={events} />
+    </div>
+  );
+}
+
+function InnerEventsTreeView({ events }: Props) {
+  return events.map((event, index) => (
+    <EventComponentView
+      key={index}
+      displayName={event.displayName}
+      props={event.props}
+    />
+  ));
+}
+
+type EventComponentViewProps = {|
+  displayName: string,
+  props: null | Object,
+|};
+
+function EventComponentView({ displayName, props }: EventComponentViewProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  let eventComponentProps = null;
+  // eslint-disable-next-line no-unused-vars
+  let children;
+
+  if (props !== null) {
+    // We don't want children, so extract it out
+    ({ children, ...eventComponentProps } = props);
+  }
+
+  return (
+    <div>
+      <div className={styles.NameValueRow}>
+        <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+        <span onClick={() => {}} className={styles.Name}>
+          {displayName}
+        </span>
+      </div>
+      <div className={styles.Children} hidden={!isOpen}>
+        {eventComponentProps === null && (
+          <div className={styles.Empty}>None</div>
+        )}
+        {eventComponentProps !== null &&
+          Object.keys((eventComponentProps: any)).map(name => (
+            <KeyValue
+              key={name}
+              depth={1}
+              name={name}
+              path={[name]}
+              value={(eventComponentProps: any)[name]}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+// $FlowFixMe
+export default React.memo(EventsTreeView);
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 0a87518f0523..e69b9b9a4289 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -90,6 +90,7 @@ function InspectedElementContextController({ children }: Props) {
         inspectedElement = (({
           ...inspectedElement,
           context: hydrateHelper(inspectedElement.context),
+          events: hydrateHelper(inspectedElement.events),
           hooks: hydrateHelper(inspectedElement.hooks),
           props: hydrateHelper(inspectedElement.props),
           state: hydrateHelper(inspectedElement.state),
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 6f474113feb6..aa831c11adad 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -6,6 +6,7 @@ import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
+import EventsTree from './EventsTree';
 import { ModalDialogContext } from '../ModalDialog';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
@@ -221,6 +222,7 @@ function InspectedElementView({
     canEditHooks,
     canToggleSuspense,
     context,
+    events,
     hooks,
     owners,
     props,
@@ -297,6 +299,7 @@ function InspectedElementView({
         data={context}
         overrideValueFn={overrideContextFn}
       />
+      {events !== null && events.length > 0 && <EventsTree events={events} />}
 
       {ownerID === null && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index aaae8d378ac3..5613e9c2054a 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -59,6 +59,7 @@ export type InspectedElement = {|
 
   // Inspectable properties.
   context: Object | null,
+  events: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,

From 8eb7eddd1f9d2db762e50a9461df7d2c144304f9 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 22 May 2019 15:21:07 +0100
Subject: [PATCH 623/814] Run prettier

---
 src/devtools/views/Components/EventsTree.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/EventsTree.css b/src/devtools/views/Components/EventsTree.css
index e89246aa1bc9..7506ba430d2f 100644
--- a/src/devtools/views/Components/EventsTree.css
+++ b/src/devtools/views/Components/EventsTree.css
@@ -24,4 +24,4 @@
   color: var(--color-dimmer);
   font-style: italic;
   padding-left: 0.75rem;
-}
\ No newline at end of file
+}

From 70084e881ba5563289c335594a18ee7388e40a0d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 22 May 2019 15:30:55 +0100
Subject: [PATCH 624/814] Update snapshot tests

---
 .../inspectedElementContext-test.js.snap      | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 163603eb7d76..c82dac62bf6e 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -10,6 +10,30 @@ exports[`InspectedElementContext should inspect the currently selected element:
   "id": 2,
   "owners": null,
   "context": null,
+  "events": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -59,6 +83,7 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
+  "events": null,
   "hooks": null,
   "props": {
     "foo": 1,
@@ -73,6 +98,7 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
+  "events": null,
   "hooks": null,
   "props": {
     "foo": 2,

From 9a67ba2f98f1ac1eb649aecdc2e41331c52abfe4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 23 May 2019 01:11:10 +0100
Subject: [PATCH 625/814] Remove snapshot

---
 .../inspectedElementContext-test.js.snap      | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index c82dac62bf6e..7834f6842e12 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -51,28 +51,6 @@ exports[`InspectedElementContext should inspect the currently selected element:
 }
 `;
 
-exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": 1,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "foo": 1,
-    "bar": "abc"
-  },
-  "state": null
-}
-`;
-
 exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
 [root]
     <Example>

From f47b40fe6cae3194877fbf5ab84118f32763f21b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 09:30:31 -0700
Subject: [PATCH 626/814] Tweaked event display name logic

---
 src/backend/renderer.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 6d23df5032c1..b670e6c76577 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -471,18 +471,14 @@ export function attach(
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
       case EventComponent:
-        return null;
+        return type.displayName || 'EventComponent';
       case EventTarget:
         switch (getTypeSymbol(elementType.type)) {
           case EVENT_TARGET_TOUCH_HIT_NUMBER:
           case EVENT_TARGET_TOUCH_HIT_STRING:
             return 'TouchHitTarget';
           default:
-            const displayName = elementType.displayName;
-            if (displayName !== undefined) {
-              return displayName;
-            }
-            return 'EventTarget';
+            return elementType.displayName || 'EventTarget';
         }
       case ForwardRef:
         return (
@@ -1848,7 +1844,7 @@ export function attach(
         const currentFiber = eventComponentInstance.currentFiber;
         events.push({
           props: eventComponentInstance.props,
-          displayName: currentFiber.type.displayName,
+          displayName: getDisplayNameForFiber(currentFiber),
         });
       }
       node = node.return;

From 34f6fa4fab502497b6ffd5d04cf0547bb9569fc2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 11:22:02 -0700
Subject: [PATCH 627/814] Added a sanity test for Bridge shutdown

---
 src/__tests__/bridge-test.js | 42 ++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/__tests__/bridge-test.js

diff --git a/src/__tests__/bridge-test.js b/src/__tests__/bridge-test.js
new file mode 100644
index 000000000000..1a9b4b949a5c
--- /dev/null
+++ b/src/__tests__/bridge-test.js
@@ -0,0 +1,42 @@
+// @flow
+
+describe('Bridge', () => {
+  let Bridge;
+
+  beforeEach(() => {
+    Bridge = require('src/bridge').default;
+  });
+
+  it('should shutdown properly', () => {
+    const wall = {
+      listen: jest.fn(() => () => {}),
+      send: jest.fn(),
+    };
+    const bridge = new Bridge(wall);
+
+    // Check that we're wired up correctly.
+    bridge.send('init');
+    jest.runAllTimers();
+    expect(wall.send).toHaveBeenCalledWith('init', undefined, undefined);
+
+    // Should flush pending messages and then shut down.
+    wall.send.mockClear();
+    bridge.send('update', '1');
+    bridge.send('update', '2');
+    bridge.shutdown();
+    jest.runAllTimers();
+    expect(wall.send).toHaveBeenCalledWith('update', '1', undefined);
+    expect(wall.send).toHaveBeenCalledWith('update', '2', undefined);
+    expect(wall.send).toHaveBeenCalledWith('shutdown', undefined, undefined);
+
+    // Verify that the Bridge doesn't send messages after shutdown.
+    spyOn(console, 'warn');
+    wall.send.mockClear();
+    bridge.send('should not send');
+    jest.runAllTimers();
+    expect(wall.send).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalledWith(
+      'Cannot send message "should not send" through a Bridge that has been shutdown.'
+    );
+  });
+});

From 6e8c2015fcbe53eb25715a51893f9d178c1c81a3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 11:46:28 -0700
Subject: [PATCH 628/814] Tweaked Bridge shutdown sequence slightly

---
 src/bridge.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/bridge.js b/src/bridge.js
index 62a3cae2c300..1619e518528b 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -57,6 +57,12 @@ export default class Bridge extends EventEmitter {
       return;
     }
 
+    // Queue the shutdown outgoing message for subscribers.
+    this.send('shutdown');
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._isShutdown = true;
+
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
     this.addListener = function() {};
     this.emit = function() {};
@@ -71,9 +77,6 @@ export default class Bridge extends EventEmitter {
       wallUnlisten();
     }
 
-    // Queue the shutdown outgoing message for subscribers.
-    this.send('shutdown');
-
     // Synchronously flush all queued outgoing messages.
     // At this step the subscribers' code may run in this call stack.
     do {
@@ -83,17 +86,9 @@ export default class Bridge extends EventEmitter {
     // Make sure once again that there is no dangling timer.
     clearTimeout(this._timeoutID);
     this._timeoutID = null;
-
-    // Mark this bridge as destroyed, i.e. disable its public API.
-    this._isShutdown = true;
   }
 
   _flush = () => {
-    if (this._isShutdown) {
-      console.warn(`Cannot flush a Bridge that has been shutdown.`);
-      return;
-    }
-
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.

From 395c02567cfe0e70ab85f4fc134a4d8643123f6e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 11:55:32 -0700
Subject: [PATCH 629/814] Handle HTTPS Git clone URLs

---
 shells/utils.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/shells/utils.js b/shells/utils.js
index 6f55ca815897..515f5c242b6a 100644
--- a/shells/utils.js
+++ b/shells/utils.js
@@ -9,13 +9,19 @@ function getGitCommit() {
 }
 
 function getGitHubURL() {
-  // TODO potentially replac this with an fb.me URL (if it can forward the query params)
-  return execSync('git remote get-url origin')
+  // TODO potentially replace this with an fb.me URL (assuming it can forward the query params)
+  const url = execSync('git remote get-url origin')
     .toString()
-    .trim()
-    .replace(':', '/')
-    .replace('git@', 'https://')
-    .replace('.git', '');
+    .trim();
+
+  if (url.startsWith('https://')) {
+    return url.replace('.git', '');
+  } else {
+    return url
+      .replace(':', '/')
+      .replace('git@', 'https://')
+      .replace('.git', '');
+  }
 }
 
 function getVersionString() {

From 408fbee23b24c247df4b3bae2abf1fe0283fc0ab Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 23 May 2019 14:49:47 -0700
Subject: [PATCH 630/814] Fix potential RTE caused by setting (saved) profiling
 data while profiling is in progress

---
 src/__tests__/profilerStore-test.js | 17 +++++++++++++++++
 src/devtools/ProfilerStore.js       |  7 +++++++
 2 files changed, 24 insertions(+)

diff --git a/src/__tests__/profilerStore-test.js b/src/__tests__/profilerStore-test.js
index 08f64b344b15..f6ffcfe78369 100644
--- a/src/__tests__/profilerStore-test.js
+++ b/src/__tests__/profilerStore-test.js
@@ -54,4 +54,21 @@ describe('ProfilerStore', () => {
 
     expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
   });
+
+  it('should not allow new/saved profiling data to be set while profiling is in progress', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+    const fauxProfilingData = {
+      dataForRoots: new Map(),
+    };
+    spyOn(console, 'warn');
+    store.profilerStore.profilingData = fauxProfilingData;
+    expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      'Profiling data cannot be updated while profiling is in progress.'
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    store.profilerStore.profilingData = fauxProfilingData;
+    expect(store.profilerStore.profilingData).toBe(fauxProfilingData);
+  });
 });
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index 30e193460026..f4901287ea15 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -144,6 +144,13 @@ export default class ProfilerStore extends EventEmitter {
     return this._dataFrontend;
   }
   set profilingData(value: ProfilingDataFrontend | null): void {
+    if (this._isProfiling) {
+      console.warn(
+        'Profiling data cannot be updated while profiling is in progress.'
+      );
+      return;
+    }
+
     this._dataBackends.splice(0);
     this._dataFrontend = value;
     this._initialRendererIDs.clear();

From 07db37f0305e06f6d87caf1adff44bbbb5e4156a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 07:37:46 -0700
Subject: [PATCH 631/814] Cache inspected element data until it is updated

---
 .../inspectedElementContext-test.js.snap      | 52 +++++++++++
 src/__tests__/inspectedElementContext-test.js | 90 +++++++++++++++++++
 src/backend/renderer.js                       | 54 +++++++++--
 3 files changed, 187 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 7834f6842e12..cf7a61c3c835 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -51,6 +51,58 @@ exports[`InspectedElementContext should inspect the currently selected element:
 }
 `;
 
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: mount 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Anonymous>
+`;
+
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: initial render 1`] = `
+{
+  "id": 3,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 0,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 3: updated state 1`] = `
+{
+  "id": 3,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 0,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 2,
+    "bar": "def"
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
 [root]
     <Example>
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index bf8d7f8bf7c4..2ae0b0743c8e 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -159,4 +159,94 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {
+    let targetRenderCount = 0;
+
+    const Wrapper = ({ children }) => children;
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      React.useState(0);
+      return null;
+    });
+
+    const container = document.createElement('div');
+    utils.act(() =>
+      ReactDOM.render(
+        <Wrapper>
+          <Target foo={1} bar="abc" />
+        </Wrapper>,
+        container
+      )
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    const id = ((store.getElementIDAtIndex(1): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const { read } = React.useContext(InspectedElementContext);
+      inspectedElement = read(target);
+      return null;
+    }
+
+    targetRenderCount = 0;
+
+    let renderer;
+    await utils.actAsync(
+      () =>
+        (renderer = TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        )),
+      3
+    );
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement).toMatchSnapshot('2: initial render');
+
+    const initialInspectedElement = inspectedElement;
+
+    targetRenderCount = 0;
+    inspectedElement = null;
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      1
+    );
+    expect(targetRenderCount).toBe(0);
+    expect(inspectedElement).toEqual(initialInspectedElement);
+
+    targetRenderCount = 0;
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Wrapper>
+          <Target foo={2} bar="def" />
+        </Wrapper>,
+        container
+      )
+    );
+
+    // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
+    expect(targetRenderCount).toBe(2);
+    expect(inspectedElement).toMatchSnapshot('3: updated state');
+
+    done();
+  });
 });
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b670e6c76577..67692034beaf 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1102,6 +1102,19 @@ export function attach(
     if (__DEBUG__) {
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
+
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElementID ===
+        getFiberID(getPrimaryFiber(nextFiber)) &&
+      hasDataChanged(prevFiber, nextFiber)
+    ) {
+      // If this Fiber has updated, clear cached inspected data.
+      // If it is inspected again, it may need to be re-run to obtain updated hooks values.
+      mostRecentlyInspectedElement = null;
+      mostRecentlyInspectedElementID = null;
+    }
+
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
     const isSuspense = nextFiber.tag === SuspenseComponent;
     let shouldResetChildren = false;
@@ -1890,18 +1903,41 @@ export function attach(
     };
   }
 
+  let mostRecentlyInspectedElementID: number | null = null;
+  let mostRecentlyInspectedElement: InspectedElement | null = null;
+
   function inspectElement(id: number): InspectedElement | null {
-    let result = inspectElementRaw(id);
-    if (result === null) {
+    // If this element has not been updated since it was last inspected, reuse the last value.
+    // This avoids re-invoking a function component with hooks.
+    // TODO We could send a special signal (e.g. true) to avoid serialization too.
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElementID === id
+    ) {
+      return mostRecentlyInspectedElement;
+    }
+
+    mostRecentlyInspectedElementID = id;
+    mostRecentlyInspectedElement = inspectElementRaw(id);
+    if (mostRecentlyInspectedElement === null) {
       return null;
     }
-    // TODO Review sanitization approach for the below inspectable values.
-    result.context = cleanForBridge(result.context);
-    result.events = cleanForBridge(result.events);
-    result.hooks = cleanForBridge(result.hooks);
-    result.props = cleanForBridge(result.props);
-    result.state = cleanForBridge(result.state);
-    return result;
+    mostRecentlyInspectedElement.context = cleanForBridge(
+      mostRecentlyInspectedElement.context
+    );
+    mostRecentlyInspectedElement.events = cleanForBridge(
+      mostRecentlyInspectedElement.events
+    );
+    mostRecentlyInspectedElement.hooks = cleanForBridge(
+      mostRecentlyInspectedElement.hooks
+    );
+    mostRecentlyInspectedElement.props = cleanForBridge(
+      mostRecentlyInspectedElement.props
+    );
+    mostRecentlyInspectedElement.state = cleanForBridge(
+      mostRecentlyInspectedElement.state
+    );
+    return mostRecentlyInspectedElement;
   }
 
   function logElementToConsole(id) {

From f580d0ece7a973fccd67483f94df917156229c5c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 09:07:15 -0700
Subject: [PATCH 632/814] Don't (re)serialize inspected elements either unless
 they have re-rendered since last inspected.

---
 .../inspectedElementContext-test.js.snap      | 23 --------------
 src/backend/renderer.js                       | 14 ++++-----
 src/backend/types.js                          |  2 +-
 .../Components/InspectedElementContext.js     | 30 ++++++++++++++-----
 4 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index cf7a61c3c835..6f353a16ee62 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -28,29 +28,6 @@ exports[`InspectedElementContext should inspect the currently selected element:
 }
 `;
 
-exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "events": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": 1,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "foo": 1,
-    "bar": "abc"
-  },
-  "state": null
-}
-`;
-
 exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: mount 1`] = `
 [root]
   ▾ <Wrapper>
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 67692034beaf..64a6ed40188f 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1906,15 +1906,11 @@ export function attach(
   let mostRecentlyInspectedElementID: number | null = null;
   let mostRecentlyInspectedElement: InspectedElement | null = null;
 
-  function inspectElement(id: number): InspectedElement | null {
-    // If this element has not been updated since it was last inspected, reuse the last value.
-    // This avoids re-invoking a function component with hooks.
-    // TODO We could send a special signal (e.g. true) to avoid serialization too.
-    if (
-      mostRecentlyInspectedElement !== null &&
-      mostRecentlyInspectedElementID === id
-    ) {
-      return mostRecentlyInspectedElement;
+  function inspectElement(id: number): InspectedElement | number | null {
+    // If this element has not been updated since it was last inspected, we don't need to re-run it.
+    // Instead we can just return the ID to indicate that it has not changed.
+    if (mostRecentlyInspectedElementID === id) {
+      return id;
     }
 
     mostRecentlyInspectedElementID = id;
diff --git a/src/backend/types.js b/src/backend/types.js
index a2a17dd5a133..86ad549130c4 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -170,7 +170,7 @@ export type RendererInterface = {
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
-  inspectElement: (id: number) => InspectedElement | null,
+  inspectElement: (id: number) => InspectedElement | number | null,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index e69b9b9a4289..75b49f489828 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -83,8 +83,16 @@ function InspectedElementContextController({ children }: Props) {
 
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
-    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
-      if (inspectedElement !== null) {
+    const onInspectedElement = (
+      inspectedElement: InspectedElement | number | null
+    ) => {
+      // A null value means that the element no longer exists in the backend.
+      // If it's the same element that's currently selected, that selection will be removed once the Store updates.
+      // If it's not- then we can just ignore it anyway.
+      // Either way there is nothing we need to do in this case.
+      // A numeric value indicates that the element hasn't changed since we last requested its data,
+      // in which case we don't need to invalidate the cache and re-render anything in the DevTools.
+      if (inspectedElement !== null && typeof inspectedElement === 'object') {
         const id = inspectedElement.id;
 
         inspectedElement = (({
@@ -141,13 +149,19 @@ function InspectedElementContextController({ children }: Props) {
     // Update the $r variable.
     bridge.send('selectElement', { id: selectedElementID, rendererID });
 
-    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
-      if (
-        inspectedElement !== null &&
-        inspectedElement.id === selectedElementID
-      ) {
+    const onInspectedElement = (
+      inspectedElement: InspectedElement | number | null
+    ) => {
+      if (inspectedElement !== null) {
         // If this is the element we requested, wait a little bit and then ask for an update.
-        timeoutID = setTimeout(sendRequest, 1000);
+        if (inspectedElement === selectedElementID) {
+          timeoutID = setTimeout(sendRequest, 1000);
+        } else if (
+          typeof inspectedElement === 'object' &&
+          inspectedElement.id === selectedElementID
+        ) {
+          timeoutID = setTimeout(sendRequest, 1000);
+        }
       }
     };
 

From efc2f82da2ca197f848ce36c5908a5b030fa0dfa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 09:17:20 -0700
Subject: [PATCH 633/814] Reorganize inspected element state vars slightly

---
 src/backend/renderer.js | 41 ++++++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 64a6ed40188f..1b8919f83017 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1104,15 +1104,14 @@ export function attach(
     }
 
     if (
-      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElementID !== null &&
       mostRecentlyInspectedElementID ===
         getFiberID(getPrimaryFiber(nextFiber)) &&
       hasDataChanged(prevFiber, nextFiber)
     ) {
       // If this Fiber has updated, clear cached inspected data.
       // If it is inspected again, it may need to be re-run to obtain updated hooks values.
-      mostRecentlyInspectedElement = null;
-      mostRecentlyInspectedElementID = null;
+      hasElementUpdatedSinceLastInspected = true;
     }
 
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
@@ -1904,36 +1903,32 @@ export function attach(
   }
 
   let mostRecentlyInspectedElementID: number | null = null;
-  let mostRecentlyInspectedElement: InspectedElement | null = null;
+  let hasElementUpdatedSinceLastInspected: boolean = false;
 
   function inspectElement(id: number): InspectedElement | number | null {
     // If this element has not been updated since it was last inspected, we don't need to re-run it.
     // Instead we can just return the ID to indicate that it has not changed.
-    if (mostRecentlyInspectedElementID === id) {
+    if (
+      mostRecentlyInspectedElementID === id &&
+      !hasElementUpdatedSinceLastInspected
+    ) {
       return id;
     }
 
     mostRecentlyInspectedElementID = id;
-    mostRecentlyInspectedElement = inspectElementRaw(id);
-    if (mostRecentlyInspectedElement === null) {
+    hasElementUpdatedSinceLastInspected = false;
+
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement === null) {
       return null;
     }
-    mostRecentlyInspectedElement.context = cleanForBridge(
-      mostRecentlyInspectedElement.context
-    );
-    mostRecentlyInspectedElement.events = cleanForBridge(
-      mostRecentlyInspectedElement.events
-    );
-    mostRecentlyInspectedElement.hooks = cleanForBridge(
-      mostRecentlyInspectedElement.hooks
-    );
-    mostRecentlyInspectedElement.props = cleanForBridge(
-      mostRecentlyInspectedElement.props
-    );
-    mostRecentlyInspectedElement.state = cleanForBridge(
-      mostRecentlyInspectedElement.state
-    );
-    return mostRecentlyInspectedElement;
+    inspectedElement.context = cleanForBridge(inspectedElement.context);
+    inspectedElement.events = cleanForBridge(inspectedElement.events);
+    inspectedElement.hooks = cleanForBridge(inspectedElement.hooks);
+    inspectedElement.props = cleanForBridge(inspectedElement.props);
+    inspectedElement.state = cleanForBridge(inspectedElement.state);
+
+    return inspectedElement;
   }
 
   function logElementToConsole(id) {

From e76cee394d3de29e05d0cb84c25f51755a6f78b0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 14:31:05 -0700
Subject: [PATCH 634/814] Added section about inspecting element to OVERVIEW

---
 OVERVIEW.md | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index a2d8a67fa9a8..71129ca01f98 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -14,9 +14,9 @@ The old DevTools also rendered the entire application tree in the form of a larg
 
 Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
 
-The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a string table. The rest of the array depends on the operations being made to the tree.
+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a [string table](#string-table). The rest of the array depends on the operations being made to the tree.
 
-No updates are required for many commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate "_inspectElement_" message.
+No updates are required for most commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate ["_inspectElement_" message](#inspecting-an-element).
 
 #### String table
 
@@ -211,6 +211,32 @@ while (index !== currentWeight) {
 }
 ```
 
+## Inspecting an element
+
+When an element is mounted in the tree, DevTools sends a minimal amount of information about it across the bridge. This information includes its display name, type, and key- but does _not_ include things like props or state. (These values are often expensive to serialize and change frequently, which would add a significant amount of load to the bridge.)
+
+Instead DevTools lazily requests additional information about an element only when it is selected in the "Components" tab. At that point, the frontend requests this information by sending a special "_inspectElement_" message containing the id of the element being inspected. The backend then responds with an "_inspectedElement_" message containing the additional details.
+
+### Polling strategy
+
+Elements can update frequently, especially in response to things like scrolling events. Since props and state can be large, we avoid sending this information across the bridge every time the selected element is updated. Instead, the frontend polls the backend for updates about once a second. The backend tracks when the element was last "inspected" and sends a special no-op response if it has not re-rendered since then.
+
+### Inspecting hooks
+
+Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with "use".)
+
+So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https://github.com/bvaughn/react-devtools-experimental/blob/master/src/backend/ReactDebugHooks.js).)
+
+> **Note**: DevTools obtains hooks info by re-rendering a component. Breakpoints and console logs will be invoked during this additional (shallow) render.
+
+### Performance implications
+
+To mitigate the performance impact of re-rendering a component, DevTools does the following:
+* Only function components that use _at least one hook_ are rendered. (Props and state can be analyzed without rendering.)
+* Rendering is always shallow.
+* Rendering is throttled to occur, at most, once per second.
+* Rendering is skipped if the component has not updated since the last time its properties were inspected.
+
 ## Profiler
 
 The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:

From c8411019f18e9bb16d2e8fbdac29ab1039b9131a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 14:43:56 -0700
Subject: [PATCH 635/814] Updated profiler overview

---
 OVERVIEW.md | 159 +++-------------------------------------------------
 1 file changed, 7 insertions(+), 152 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 71129ca01f98..eba370d98b3e 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -243,7 +243,7 @@ The Profiler UI is a powerful tool for identifying and fixing performance proble
 * Minimizing bridge traffic.
 * Making expensive computations lazy.
 
-Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. (The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message.)
+The majority of profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. (The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message.)
 
 When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
 
@@ -252,161 +252,16 @@ When profiling begins, the backend records the base durations of each fiber curr
 * Which elements were rendered during that commit.
 * Which interactions (if any) were part of the commit.
 
-This information is kept on the backend until requested by the frontend (as described below).
+This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).
 
 <sup>1</sup> In the future, the backend may also store additional metadata (e.g. which props/states changed between rendered for a given component).
 
-### Profiling summary
+### Combining profiling data
 
-The profiling tab shows information for the currently-selected React root. When profiling completes (or when a new root is selected) the frontend first checks to see if there is any profiling data for the selected root. (Has it cached any "_operations_"?)
+Once profiling is finished, the frontend requests profiling data from the backend one renderer at a time by sending a "_getProfilingData_" message. The backend responds with a "_profilingData_" message that contains per-root commit timing and duration information. The frontend then combines this information with its own snapshots to form a complete picture of the profiling session. Using this data, charts and graphs are lazily computed (and incrementally cached) on demand, based on which commits and views are selected in the Profiler UI.
 
-If so, then it sends a "_getProfilingSummary_" message with an id that identifies the root. The backend then returns a "_profilingSummary_" message with the following information:
+### Importing/exporting data
 
-* root id (to match request and response)
-* number of interactions that were traced for this root
-* the commits (each consisting of a timestamp and duration) that were profiled for the root
-* tree base durations as of when profiling started
+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users.
 
-This is the minimal information required to render the main ["commit selector"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits). 
-
-Here is an example profile summary:
-```js
-{
-  rootID: 1,
-  interactionCount: 2,
-
-  // Commit durations
-  commitDurations: [
-    10,  // first commit took 10ms
-    13,  // second commit took 13ms
-    5,   // third commit took 5ms
-  ]
-
-  // Commit times (relative to when profiling started)
-  commitTimes: [
-    210, // first commit started 210ms after profiling began
-    284, // second commit started 284ms after profiling began
-    303, // third commit started 303ms after profiling began
-  ],
-
-  // Tuples of fiber id and initial tree base duration
-  initialTreeBaseDurations: [
-    1,  // fiber id
-    11, // tree base duration when profiling started
-
-    2,  // fiber id
-    12, // tree base duration when profiling started
-
-    3,  // fiber id
-    8,  // tree base duration when profiling started
-  ]
-]
-```
-
-Additional information (e.g. which components were part of a specific commit, which interactions were logged) are lazily requested by the frontend as a user interacts with the Profiler UI.
-
-### Commit details
-
-When a commit is selected in the profiling view, the frontend needs to reconstruct the tree at that point in time using the snapshot and the "_operations_" it has cached.
-
-In addition to this, it also needs to ask the backend for some additional information needed to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in. The backend sends a response to fill in missing details about the commit:
-
-* root id and commit index (to match request and response)
-* which elements were rendered during the commit <sup>1</sup> and how long did they take
-* which interactions were part of the commit
-
-Here is an example commit in which two elements were rendered and one interaction was traced:
-
-```js
-{
-  rootID: 1,
-  commitIndex: 0,
-  interactions: [
-    {
-      id: 8,
-      timestamp: 4,
-      name: "Foo"
-    },
-    {
-      id: 11,
-      timestamp: 4,
-      name: "Bar"
-    }
-  ],
-  nodes: [
-    {
-      id: 1,
-      baseDuration: 15,
-      actualDuration: 15
-    },
-    {
-      id: 2,
-      baseDuration: 11,
-      actualDuration: 11
-    }
-  }
-}
-```
-
-<sup>1</sup> Elements in the tree that are not explicitly included in the above response were not rendered during the current commit.
-
-### Component commits
-
-When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. The frontend sends a "_profileComponentDetails_" message specifying which root and component (id) it is interested in. The backend sends a response that includes:
-
-* root and component ids (to match request and response)
-* which commits was the component rendered in and how long did each take
-
-Here is an example of a component that committed twice during a profiling session:
-
-```js
-{
-  rootID: 1,
-  id: 2,
-
-  // Tuples of commit index and render duration (ms)
-  commits: [
-    0,  // index of first
-    11  // duration (ms)
-
-    2,  // index of second commit
-    7   // duration (ms)
-  ]
-}
-```
-
-### Interactions
-
-The [Interactions chart](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#interactions) shows a time series for every interaction that was traced in the recent profiler session. The frontend sends a "_profileInteractions_" message specifying which root it would like interaction data for. The backend sends the following response:
-
-* root id (to match request and response)
-* interaction metadata
-
-Here is an example of a profiling session consisting of two interactions:
-
-```js
-{
-  rootID: 1,
-  interactions: [
-    {
-      id: 8,
-      name: "Foo",
-      timestamp: 4,
-      commits: [
-        0, // index of first commit
-        2  // index of second commit
-      ]
-    },
-    {
-      id: 11,
-      name: "Bar",
-      timestamp: 4,
-      commits: [
-        0  // index of first commit
-      ]
-    }
-  ]
-}
-```
-
-The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the "_profilingSummary_" message.
+At the moment, screenshots are not included in the exported data (to keep the export filesize small) but this could be changed in the future.
\ No newline at end of file

From bda8a0aa9850bd9925f0bf8dbe3179d9f04f0fa6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 May 2019 16:00:12 -0700
Subject: [PATCH 636/814] Decreased contrast of disabled button icons to look
 more obviously disabled

---
 src/devtools/views/root.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 9969752f8769..5dba64cc2045 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -72,7 +72,7 @@
   --dark-color-button-background-focus: #3d424a;
   --dark-color-button: #afb3b9;
   --dark-color-button-active: #61dafb;
-  --dark-color-button-disabled: #777d88;
+  --dark-color-button-disabled: #4f5766;
   --dark-color-button-focus: #a2e9fc;
   --dark-color-button-hover: #ededed;
   --dark-color-border: #3d424a;

From 4422337562574cb87012d3dc68ea66cab638dda6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 26 May 2019 08:37:05 -0700
Subject: [PATCH 637/814] Added another (disabled) test; refactored getChildren
 slightly

---
 src/__tests__/legacy/storeLegacy-v15-test.js | 53 +++++++++++++++++---
 src/backend/legacy/getChildren.js            | 48 ++++++++++--------
 2 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/src/__tests__/legacy/storeLegacy-v15-test.js
index 1b8d38753d79..baa882e538fa 100644
--- a/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -176,6 +176,45 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('6: expand Grandparent');
     });
 
+    // TODO Re-enable this test once the renderer supports it.
+    xit('should support adding and removing children', () => {
+      const Root = ({ children }) => <div>{children}</div>;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+            <Component key="b" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('2: add child');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="b" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('3: remove child');
+    });
+
     // TODO Re-enable this test once the renderer supports it.
     xit('should support reordering of children', () => {
       const Root = ({ children }) => <div>{children}</div>;
@@ -194,13 +233,13 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchSnapshot('2: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('4: collapse root');
+      expect(store).toMatchSnapshot('3: collapse root');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('5: expand root');
+      expect(store).toMatchSnapshot('4: expand root');
     });
   });
 
@@ -422,19 +461,19 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchSnapshot('2: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('4: expand root');
+      expect(store).toMatchSnapshot('3: expand root');
 
       act(() => {
         store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
         store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
       });
-      expect(store).toMatchSnapshot('5: expand leaves');
+      expect(store).toMatchSnapshot('4: expand leaves');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('6: collapse root');
+      expect(store).toMatchSnapshot('5: collapse root');
     });
   });
 });
diff --git a/src/backend/legacy/getChildren.js b/src/backend/legacy/getChildren.js
index 1ed8b52e083e..0ce3a3960360 100644
--- a/src/backend/legacy/getChildren.js
+++ b/src/backend/legacy/getChildren.js
@@ -1,22 +1,30 @@
 // @flow
 
+import traverseAllChildrenImpl from './traverseAllChildrenImpl';
+
+// TODO (legacy) Respect component filters
+
 export default function getChildren(internalInstance: Object): Array<any> {
+  let children = [];
+
   // If the parent is a native node without rendered children, but with
   // multiple string children, then the `element` that gets passed in here is
   // a plain value -- a string or number.
-  if (internalInstance._renderedComponent) {
-    return [internalInstance._renderedComponent];
+  if (typeof internalInstance !== 'object') {
+    // No children
+  } else if (
+    internalInstance._currentElement === null ||
+    internalInstance._currentElement === false
+  ) {
+    // No children
+  } else if (internalInstance._renderedComponent) {
+    children = [internalInstance._renderedComponent];
   } else if (internalInstance._renderedChildren) {
-    return childrenToArray(internalInstance._renderedChildren);
+    children = renderedChildrenToArray(internalInstance._renderedChildren);
   } else if (
     internalInstance._currentElement &&
     internalInstance._currentElement.props
   ) {
-    // DevTools doesn't need to display primative child types,
-    // So we can filter them out early.
-    /*
-    const children = [];
-
     // This is a native node without rendered children -- meaning the children
     // prop is the unfiltered list of children.
     // This may include 'null' or even other invalid values, so we need to
@@ -34,30 +42,26 @@ export default function getChildren(internalInstance: Object): Array<any> {
           children.push(child);
         }
       }
-      // traverseContext
     );
-
-    return children;
-    */
   }
 
-  if (internalInstance._instance) {
-    var inst = internalInstance._instance;
+  const instance = internalInstance._instance;
+  if (instance) {
     // TODO: React ART currently falls in this bucket, but this doesn't
     // actually make sense and we should clean this up after stabilizing our
     // API for backends
-    if (inst._renderedChildren) {
-      return childrenToArray(inst._renderedChildren);
+    if (instance._renderedChildren) {
+      children = renderedChildrenToArray(instance._renderedChildren);
     }
   }
 
-  return [];
+  return children;
 }
 
-function childrenToArray(children) {
-  const array = [];
-  for (var name in children) {
-    array.push(children[name]);
+function renderedChildrenToArray(renderedChildren): Array<any> {
+  const childrenArray = [];
+  for (let name in renderedChildren) {
+    childrenArray.push(renderedChildren[name]);
   }
-  return array;
+  return childrenArray;
 }

From af47c39dbbf195442e9b654e8de0ebadf4102316 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 26 May 2019 10:33:19 -0700
Subject: [PATCH 638/814] Added  and view-source support for Memo components

---
 src/backend/agent.js    |  6 ++--
 src/backend/renderer.js | 73 ++++++++++++++++++++++++++---------------
 src/backend/types.js    |  4 +--
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 9461c69ed6be..4b8873d47579 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -141,7 +141,7 @@ export default class Agent extends EventEmitter {
         const renderer = ((this._rendererInterfaces[
           (rendererID: any)
         ]: any): RendererInterface);
-        return renderer.getFiberIDFromNative(node, true);
+        return renderer.getFiberIDForNative(node, true);
       } catch (e) {}
     }
     return null;
@@ -186,7 +186,9 @@ export default class Agent extends EventEmitter {
 
     let nodes: ?Array<HTMLElement> = null;
     if (renderer !== null) {
-      nodes = ((renderer.findNativeByFiberID(id): any): ?Array<HTMLElement>);
+      nodes = ((renderer.findNativeNodesForFiberID(
+        id
+      ): any): ?Array<HTMLElement>);
     }
 
     if (nodes != null && nodes[0] != null) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1b8919f83017..70e5ecd7ce26 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -708,7 +708,7 @@ export function attach(
       pendingSimulatedUnmountedIDs.length +
       (pendingUnmountedRootID === null ? 0 : 1);
 
-    const ops = new Uint32Array(
+    const operations = new Uint32Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
       // How big is the string table?
@@ -726,44 +726,44 @@ export function attach(
     // This enables roots to be mapped to renderers,
     // Which in turn enables fiber props, states, and hooks to be inspected.
     let i = 0;
-    ops[i++] = rendererID;
-    ops[i++] = currentRootID; // Use this ID in case the root was unmounted!
+    operations[i++] = rendererID;
+    operations[i++] = currentRootID; // Use this ID in case the root was unmounted!
 
     // Now fill in the string table.
     // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
-    ops[i++] = pendingStringTableLength;
+    operations[i++] = pendingStringTableLength;
     pendingStringTable.forEach((value, key) => {
-      ops[i++] = key.length;
-      ops.set(utfEncodeString(key), i);
+      operations[i++] = key.length;
+      operations.set(utfEncodeString(key), i);
       i += key.length;
     });
 
     if (numUnmountIDs > 0) {
       // All unmounts except roots are batched in a single message.
-      ops[i++] = TREE_OPERATION_REMOVE;
+      operations[i++] = TREE_OPERATION_REMOVE;
       // The first number is how many unmounted IDs we're gonna send.
-      ops[i++] = numUnmountIDs;
+      operations[i++] = numUnmountIDs;
       // Fill in the real unmounts in the reverse order.
       // They were inserted parents-first by React, but we want children-first.
       // So we traverse our array backwards.
       for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
-        ops[i++] = pendingRealUnmountedIDs[j];
+        operations[i++] = pendingRealUnmountedIDs[j];
       }
       // Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
       // (We want children to go before parents.)
       // They go *after* the real unmounts because we know for sure they won't be
       // children of already pushed "real" IDs. If they were, we wouldn't be able
       // to discover them during the traversal, as they would have been deleted.
-      ops.set(pendingSimulatedUnmountedIDs, i);
+      operations.set(pendingSimulatedUnmountedIDs, i);
       i += pendingSimulatedUnmountedIDs.length;
       // The root ID should always be unmounted last.
       if (pendingUnmountedRootID !== null) {
-        ops[i] = pendingUnmountedRootID;
+        operations[i] = pendingUnmountedRootID;
         i++;
       }
     }
     // Fill in the rest of the operations.
-    ops.set(pendingOperations, i);
+    operations.set(pendingOperations, i);
 
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
@@ -772,10 +772,10 @@ export function attach(
       // Until the frontend has been connected, store the tree operations.
       // This will let us avoid walking the tree later when the frontend connects,
       // and it enables the Profiler's reload-and-profile functionality to work as well.
-      pendingOperationsQueue.push(ops);
+      pendingOperationsQueue.push(operations);
     } else {
       // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', ops);
+      hook.emit('operations', operations);
     }
 
     pendingOperations.length = 0;
@@ -1279,8 +1279,8 @@ export function attach(
     ) {
       // We may have already queued up some operations before the frontend connected
       // If so, let the frontend know about them.
-      localPendingOperationsQueue.forEach(ops => {
-        hook.emit('operations', ops);
+      localPendingOperationsQueue.forEach(operations => {
+        hook.emit('operations', operations);
       });
     } else {
       // Before the traversals, remember to start tracking
@@ -1435,7 +1435,7 @@ export function attach(
     return fibers;
   }
 
-  function findNativeByFiberID(id: number) {
+  function findNativeNodesForFiberID(id: number) {
     try {
       let fiber = findCurrentFiberUsingSlowPathById(id);
       if (fiber === null) {
@@ -1460,7 +1460,7 @@ export function attach(
     }
   }
 
-  function getFiberIDFromNative(
+  function getFiberIDForNative(
     hostInstance,
     findNearestUnfilteredAncestor = false
   ) {
@@ -1672,7 +1672,7 @@ export function attach(
       return;
     }
 
-    const { memoizedProps, stateNode, tag, type } = fiber;
+    const { elementType, memoizedProps, stateNode, tag, type } = fiber;
 
     switch (tag) {
       case ClassComponent:
@@ -1692,6 +1692,16 @@ export function attach(
           type: type.render,
         };
         break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$r = {
+          props: memoizedProps,
+          type:
+            elementType != null && elementType.type != null
+              ? elementType.type
+              : type,
+        };
+        break;
       default:
         global.$r = null;
         break;
@@ -1705,15 +1715,24 @@ export function attach(
       return;
     }
 
-    switch (fiber.tag) {
+    const { elementType, tag, type } = fiber;
+
+    switch (tag) {
       case ClassComponent:
       case IncompleteClassComponent:
       case IndeterminateComponent:
       case FunctionComponent:
-        global.$type = fiber.type;
+        global.$type = type;
         break;
       case ForwardRef:
-        global.$type = fiber.type.render;
+        global.$type = type.render;
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$type =
+          elementType != null && elementType.type != null
+            ? elementType.type
+            : type;
         break;
       default:
         global.$type = null;
@@ -1781,7 +1800,9 @@ export function attach(
       tag === FunctionComponent ||
       tag === IncompleteClassComponent ||
       tag === IndeterminateComponent ||
-      tag === ForwardRef
+      tag === MemoComponent ||
+      tag === ForwardRef ||
+      tag === SimpleMemoComponent
     ) {
       canViewSource = true;
       if (stateNode && stateNode.context != null) {
@@ -1955,7 +1976,7 @@ export function attach(
     if (result.hooks !== null) {
       console.log('Hooks:', result.hooks);
     }
-    const nativeNodes = findNativeByFiberID(id);
+    const nativeNodes = findNativeNodesForFiberID(id);
     if (nativeNodes !== null) {
       console.log('Nodes:', nativeNodes);
     }
@@ -2445,8 +2466,8 @@ export function attach(
     cleanup,
     flushInitialOperations,
     getBestMatchForTrackedPath,
-    getFiberIDFromNative,
-    findNativeByFiberID,
+    getFiberIDForNative,
+    findNativeNodesForFiberID,
     getOwnersList,
     getPathForElement,
     getProfilingData,
diff --git a/src/backend/types.js b/src/backend/types.js
index 86ad549130c4..8972fbd4e24e 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -158,10 +158,10 @@ export type PathMatch = {|
 
 export type RendererInterface = {
   cleanup: () => void,
-  findNativeByFiberID: (id: number) => ?Array<NativeType>,
+  findNativeNodesForFiberID: (id: number) => ?Array<NativeType>,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
-  getFiberIDFromNative: (
+  getFiberIDForNative: (
     component: NativeType,
     findNearestUnfilteredAncestor?: boolean
   ) => number | null,

From 92c2d8366b77e94125010a626c1a56e4b4f94864 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 28 May 2019 08:52:21 -0700
Subject: [PATCH 639/814] Updated Chrome installation

1. Removed auto-updates XML (since the feature doens't work for self hosted extensions)
2. Replaced CRX with packed ZIP (since people are having trouble with the CRX, and auto-udpates doesn't work anyway)
---
 package.json                              |  4 +-
 shells/browser/chrome/build.js            | 28 +-----------
 shells/browser/chrome/manifest.json       |  2 -
 shells/browser/chrome/now.json            |  2 +-
 shells/browser/chrome/updates.xml         |  6 ---
 shells/browser/firefox/now.json           |  2 +-
 shells/browser/shared/build.js            | 19 ++++-----
 shells/browser/shared/deploy.chrome.html  |  9 ++--
 shells/browser/shared/deploy.firefox.html |  4 +-
 shells/browser/shared/deploy.js           | 13 ------
 yarn.lock                                 | 52 +----------------------
 11 files changed, 21 insertions(+), 120 deletions(-)
 delete mode 100644 shells/browser/chrome/updates.xml

diff --git a/package.json b/package.json
index 5c81af9b7d52..8dcd8bd6feab 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,6 @@
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
     "cross-env": "^5.2.0",
-    "crx": "git+https://github.com/oncletom/crx#ef150e8",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
@@ -147,7 +146,6 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.3.1",
-    "xml-js": "^1.6.11"
+    "webpack-dev-server": "^3.3.1"
   }
 }
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 331dcc0c211f..57b2dbb1f9b1 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -1,36 +1,10 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
-const { execSync } = require('child_process');
-const { join } = require('path');
-const rp = require('request-promise');
-const convert = require('xml-js');
 const build = require('../shared/build');
-const rimraf = require('rimraf');
 
 const main = async () => {
-  const manifestVersion = await rp(
-    'https://react-devtools-experimental-chrome.now.sh/updates.xml'
-  )
-    .then(xmlString => {
-      const parsedXML = convert.xml2js(xmlString);
-      const version =
-        parsedXML.elements[0].elements[0].elements[0].attributes.version;
-      const match = /(\d)\.(\d)\.(\d)\.*(\d)*/.exec(version);
-      if (match !== null) {
-        const prerelease = parseInt(match[4], 10) || 0;
-        return `${match[1]}.${match[2]}.${match[3]}.${prerelease + 1}`;
-      }
-    })
-    .catch(error => null);
-
-  await build('chrome', manifestVersion);
-
-  const cwd = join(__dirname, 'build');
-  execSync('crx pack ./unpacked -o ReactDevTools.crx -p ../../../../key.pem', {
-    cwd,
-  });
-  rimraf.sync(join(cwd, 'packed.zip'));
+  await build('chrome');
 
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index f7bc742cd945..c24fe09e86a9 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -4,8 +4,6 @@
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "4.0.0",
 
-  "update_url": "https://react-devtools-experimental-chrome.now.sh/updates.xml",
-
   "minimum_chrome_version": "49",
 
   "icons": {
diff --git a/shells/browser/chrome/now.json b/shells/browser/chrome/now.json
index fa36a08c687b..e541ec866d00 100644
--- a/shells/browser/chrome/now.json
+++ b/shells/browser/chrome/now.json
@@ -1,5 +1,5 @@
 {
   "name": "react-devtools-experimental-chrome",
   "alias": ["react-devtools-experimental-chrome"],
-  "files": ["index.html", "updates.xml", "ReactDevTools.crx"]
+  "files": ["index.html", "ReactDevTools.zip"]
 }
diff --git a/shells/browser/chrome/updates.xml b/shells/browser/chrome/updates.xml
deleted file mode 100644
index 460aa134034f..000000000000
--- a/shells/browser/chrome/updates.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version='1.0' encoding='UTF-8'?>
-<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
-  <app appid='akkpaehpnolchhkkfbedcdcikfdnjobk'>
-    <updatecheck codebase='https://react-devtools-experimental-chrome.now.sh/ReactDevTools.crx' version='4.0.0' />
-  </app>
-</gupdate>
\ No newline at end of file
diff --git a/shells/browser/firefox/now.json b/shells/browser/firefox/now.json
index 324d62388e1a..5e61bb442f56 100644
--- a/shells/browser/firefox/now.json
+++ b/shells/browser/firefox/now.json
@@ -1,5 +1,5 @@
 {
   "name": "react-devtools-experimental-firefox",
   "alias": ["react-devtools-experimental-firefox"],
-  "files": ["index.html", "packed.zip"]
+  "files": ["index.html", "ReactDevTools.zip"]
 }
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index fcfc757ac0fe..8cc9de1c3a0c 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -17,7 +17,7 @@ const preProcess = async (destinationPath, tempPath) => {
   await ensureDir(tempPath); // Create temp dir for this new build
 };
 
-const build = async (tempPath, manifestPath, manifestVersion) => {
+const build = async (tempPath, manifestPath) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
 
@@ -62,16 +62,13 @@ const build = async (tempPath, manifestPath, manifestVersion) => {
   const commit = getGitCommit();
 
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
-  manifest.description += `\n\nCreated from revision ${commit}`;
-  if (manifestVersion) {
-    manifest.version = manifestVersion;
-    manifest.version_name = `${manifestVersion} ${commit}`;
-  }
+  manifest.description += `\n\nCreated from revision ${commit} (${new Date().toLocaleDateString()})`;
+  manifest.version_name = `${commit} (${new Date().toLocaleDateString()})`;
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
   const archive = archiver('zip', { zlib: { level: 9 } });
-  const zipStream = createWriteStream(join(tempPath, 'packed.zip'));
+  const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));
   await new Promise((resolve, reject) => {
     archive
       .directory(zipPath, false)
@@ -84,8 +81,8 @@ const build = async (tempPath, manifestPath, manifestVersion) => {
 
 const postProcess = async (tempPath, destinationPath) => {
   const unpackedSourcePath = join(tempPath, 'zip');
-  const packedSourcePath = join(tempPath, 'packed.zip');
-  const packedDestPath = join(destinationPath, 'packed.zip');
+  const packedSourcePath = join(tempPath, 'ReactDevTools.zip');
+  const packedDestPath = join(destinationPath, 'ReactDevTools.zip');
   const unpackedDestPath = join(destinationPath, 'unpacked');
 
   await move(unpackedSourcePath, unpackedDestPath); // Copy built files to destination
@@ -93,7 +90,7 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
-const main = async (buildId, manifestVersion) => {
+const main = async buildId => {
   const root = join(__dirname, '..', buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
@@ -101,7 +98,7 @@ const main = async (buildId, manifestVersion) => {
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await preProcess(destinationPath, tempPath);
-    await build(tempPath, manifestPath, manifestVersion);
+    await build(tempPath, manifestPath);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
     await postProcess(tempPath, destinationPath);
diff --git a/shells/browser/shared/deploy.chrome.html b/shells/browser/shared/deploy.chrome.html
index ccef0c2724fd..eb70be0024e9 100644
--- a/shells/browser/shared/deploy.chrome.html
+++ b/shells/browser/shared/deploy.chrome.html
@@ -1,7 +1,8 @@
 <ol>
-  <li><a href="ReactDevTools.crx">download extension</a></li>
-  <li>Navigate to <a href="chrome://extensions/">chrome://extensions/</a></li>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
+  <li>Double-click to extract</li>
+  <li>Navigate to <code>chrome://extensions/</code></li>
   <li>Enable "Developer mode"</li>
-  <li>Drag <code>ReactDevTools.crx</code> into Chrome</li>
-  <li>Choose "Add Extension" when prompted</li>
+  <li>Click "LOAD UNPACKED"</li>
+  <li>Select extracted extension folder (<code>ReactDevTools</code>)</li>
 </ol>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.firefox.html b/shells/browser/shared/deploy.firefox.html
index 57051bf58605..d2879a17c493 100644
--- a/shells/browser/shared/deploy.firefox.html
+++ b/shells/browser/shared/deploy.firefox.html
@@ -1,7 +1,7 @@
 <ol>
-  <li><a href="packed.zip">download extension</a></li>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
   <li>Extract/unzip</li>
   <li>Visit <code>about:debugging</code></li>
   <li>Click "Load Temporary Add-on"</li>
-  <li>Select the <code>manifest.json</code></li>
+  <li>Select the <code>manifest.json</code> file inside of the extracted extension folder (<code>ReactDevTools</code>)</li>
 </ol>
\ No newline at end of file
diff --git a/shells/browser/shared/deploy.js b/shells/browser/shared/deploy.js
index 349c6c810651..6cc33e1cbf4e 100644
--- a/shells/browser/shared/deploy.js
+++ b/shells/browser/shared/deploy.js
@@ -3,7 +3,6 @@
 const { exec, execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 const { join } = require('path');
-const convert = require('xml-js');
 
 const main = async buildId => {
   const root = join(__dirname, '..', buildId);
@@ -22,18 +21,6 @@ const main = async buildId => {
     cwd: root,
   });
 
-  if (buildId === 'chrome') {
-    const file = readFileSync(join(buildPath, 'unpacked', 'manifest.json'));
-    const json = JSON.parse(file);
-    const { version } = json;
-
-    const xmlString = readFileSync(join(root, 'updates.xml'), 'utf8');
-    const parsedXML = convert.xml2js(xmlString);
-    parsedXML.elements[0].elements[0].elements[0].attributes.version = version;
-
-    writeFileSync(join(buildPath, 'updates.xml'), convert.js2xml(parsedXML));
-  }
-
   const file = readFileSync(join(root, 'now.json'));
   const json = JSON.parse(file);
   const alias = json.alias[0];
diff --git a/yarn.lock b/yarn.lock
index c21c8ae55403..71262041f713 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1834,7 +1834,7 @@ asn1.js@^4.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-asn1@^0.2.4, asn1@~0.2.3:
+asn1@~0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
   integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
@@ -3202,7 +3202,7 @@ commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@^2.19.0, commander@^2.3.0, commander@^2.6.0:
+commander@^2.3.0, commander@^2.6.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -3691,15 +3691,6 @@ crx-parser@0.1.2:
   resolved "https://registry.yarnpkg.com/crx-parser/-/crx-parser-0.1.2.tgz#7eeeed9eddc95e22c189382e34624044a89a5a6d"
   integrity sha1-fu7tnt3JXiLBiTguNGJARKiaWm0=
 
-"crx@git+https://github.com/oncletom/crx#ef150e8":
-  version "4.0.1"
-  resolved "git+https://github.com/oncletom/crx#ef150e8abf1b2e093ce746584680876927c0fc21"
-  dependencies:
-    archiver "^3.0.0"
-    commander "^2.19.0"
-    node-rsa "^1.0.3"
-    pbf "^3.1.0"
-
 cryptiles@3.x.x:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
@@ -6242,11 +6233,6 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
-ieee754@^1.1.12:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
 ieee754@^1.1.4:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
@@ -8669,13 +8655,6 @@ node-releases@^1.1.8:
   dependencies:
     semver "^5.3.0"
 
-node-rsa@^1.0.3:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
-  integrity sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==
-  dependencies:
-    asn1 "^0.2.4"
-
 node-version@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.0.0.tgz#1b9b9584a9a7f7a6123f215cd14a652bf21ab19e"
@@ -9254,14 +9233,6 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
-pbf@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.0.tgz#e76f9f5114e395c25077ad6fe463b3507d6877fc"
-  integrity sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==
-  dependencies:
-    ieee754 "^1.1.12"
-    resolve-protobuf-schema "^2.1.0"
-
 pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
@@ -9562,11 +9533,6 @@ prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-protocol-buffers-schema@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
-  integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
-
 proxy-addr@~2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -10283,13 +10249,6 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-protobuf-schema@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
-  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
-  dependencies:
-    protocol-buffers-schema "^3.3.1"
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -12325,13 +12284,6 @@ xdg-basedir@^3.0.0:
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
-xml-js@^1.6.11:
-  version "1.6.11"
-  resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
-  integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
-  dependencies:
-    sax "^1.2.4"
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"

From 9e87e654f5bd223ef2c5fc920bd778ca2eb31521 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Tue, 28 May 2019 20:21:55 +0100
Subject: [PATCH 640/814] pass tests and flow

---
 src/__tests__/inspectedElementContext-test.js | 45 ++++++++++++-------
 src/__tests__/ownersListContext-test.js       | 12 ++---
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 2ae0b0743c8e..5ea1de4f162f 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -8,6 +8,7 @@ import type Store from 'src/devtools/store';
 describe('InspectedElementContext', () => {
   let React;
   let ReactDOM;
+  let act;
   let TestRenderer: ReactTestRenderer;
   let bridge: Bridge;
   let store: Store;
@@ -19,6 +20,20 @@ describe('InspectedElementContext', () => {
   let StoreContext;
   let TreeContextController;
 
+  // a version of actAsync that *doesn't* recursively flush timers 
+  async function actAsync(cb: () => *): Promise<void> {
+
+    // $FlowFixMe Flow doesn't know about "await act()" yet
+    await act(async () => {
+      await cb();
+    });
+    // $FlowFixMe Flow doesn't know about "await act()" yet
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+  }
+
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -29,6 +44,7 @@ describe('InspectedElementContext', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    act = require('react-dom/test-utils').act
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('src/devtools/views/context').BridgeContext;
@@ -84,7 +100,7 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await utils.actAsync(
+    await actAsync(
       () =>
         TestRenderer.create(
           <Contexts
@@ -95,8 +111,7 @@ describe('InspectedElementContext', () => {
               <Suspender target={example} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(didFinish).toBe(true);
 
@@ -120,7 +135,7 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await utils.actAsync(
+    await actAsync(
       () =>
         TestRenderer.create(
           <Contexts
@@ -131,17 +146,16 @@ describe('InspectedElementContext', () => {
               <Suspender target={example} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(inspectedElement).toMatchSnapshot('2: initial render');
 
-    await utils.actAsync(() =>
+    await actAsync(() =>
       ReactDOM.render(<Example foo={2} bar="def" />, container)
     );
 
     inspectedElement = null;
-    await utils.actAsync(
+    await actAsync(
       () =>
         TestRenderer.create(
           <Contexts
@@ -152,8 +166,7 @@ describe('InspectedElementContext', () => {
               <Suspender target={example} />
             </React.Suspense>
           </Contexts>
-        ),
-      1
+        )
     );
     expect(inspectedElement).toMatchSnapshot('2: updated state');
 
@@ -194,7 +207,7 @@ describe('InspectedElementContext', () => {
     targetRenderCount = 0;
 
     let renderer;
-    await utils.actAsync(
+    await actAsync(
       () =>
         (renderer = TestRenderer.create(
           <Contexts
@@ -205,8 +218,7 @@ describe('InspectedElementContext', () => {
               <Suspender target={id} />
             </React.Suspense>
           </Contexts>
-        )),
-      3
+        ))
     );
     expect(targetRenderCount).toBe(1);
     expect(inspectedElement).toMatchSnapshot('2: initial render');
@@ -215,7 +227,7 @@ describe('InspectedElementContext', () => {
 
     targetRenderCount = 0;
     inspectedElement = null;
-    await utils.actAsync(
+    await actAsync(
       () =>
         renderer.update(
           <Contexts
@@ -226,15 +238,14 @@ describe('InspectedElementContext', () => {
               <Suspender target={id} />
             </React.Suspense>
           </Contexts>
-        ),
-      1
+        )
     );
     expect(targetRenderCount).toBe(0);
     expect(inspectedElement).toEqual(initialInspectedElement);
 
     targetRenderCount = 0;
 
-    await utils.actAsync(() =>
+    await actAsync(() =>
       ReactDOM.render(
         <Wrapper>
           <Target foo={2} bar="def" />
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 428b9815cb09..01a7fd542191 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -92,8 +92,7 @@ describe('OwnersListContext', () => {
               <Suspender owner={parent} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(didFinish).toBe(true);
 
@@ -106,8 +105,7 @@ describe('OwnersListContext', () => {
               <Suspender owner={firstChild} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(didFinish).toBe(true);
 
@@ -156,8 +154,7 @@ describe('OwnersListContext', () => {
               <Suspender owner={firstChild} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(didFinish).toBe(true);
 
@@ -198,8 +195,7 @@ describe('OwnersListContext', () => {
               <Suspender owner={grandparent} />
             </React.Suspense>
           </Contexts>
-        ),
-      3
+        )
     );
     expect(didFinish).toBe(true);
 

From 388b03dd1244199a00601171256662057c3f5997 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Tue, 28 May 2019 20:24:35 +0100
Subject: [PATCH 641/814] prettier

---
 src/__tests__/inspectedElementContext-test.js | 95 +++++++++----------
 src/__tests__/ownersListContext-test.js       | 68 +++++++------
 src/__tests__/utils.js                        |  4 +-
 3 files changed, 77 insertions(+), 90 deletions(-)

diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 5ea1de4f162f..7467a73c3b8e 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -20,9 +20,8 @@ describe('InspectedElementContext', () => {
   let StoreContext;
   let TreeContextController;
 
-  // a version of actAsync that *doesn't* recursively flush timers 
+  // a version of actAsync that *doesn't* recursively flush timers
   async function actAsync(cb: () => *): Promise<void> {
-
     // $FlowFixMe Flow doesn't know about "await act()" yet
     await act(async () => {
       await cb();
@@ -33,7 +32,6 @@ describe('InspectedElementContext', () => {
     });
   }
 
-
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -44,7 +42,7 @@ describe('InspectedElementContext', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').act
+    act = require('react-dom/test-utils').act;
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('src/devtools/views/context').BridgeContext;
@@ -100,18 +98,17 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={example.id}
-            defaultSelectedElementIndex={0}
-          >
-            <React.Suspense fallback={null}>
-              <Suspender target={example} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={example.id}
+          defaultSelectedElementIndex={0}
+        >
+          <React.Suspense fallback={null}>
+            <Suspender target={example} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(didFinish).toBe(true);
 
@@ -135,18 +132,17 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={example.id}
-            defaultSelectedElementIndex={0}
-          >
-            <React.Suspense fallback={null}>
-              <Suspender target={example} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={example.id}
+          defaultSelectedElementIndex={0}
+        >
+          <React.Suspense fallback={null}>
+            <Suspender target={example} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(inspectedElement).toMatchSnapshot('2: initial render');
 
@@ -155,18 +151,17 @@ describe('InspectedElementContext', () => {
     );
 
     inspectedElement = null;
-    await actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={example.id}
-            defaultSelectedElementIndex={0}
-          >
-            <React.Suspense fallback={null}>
-              <Suspender target={example} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={example.id}
+          defaultSelectedElementIndex={0}
+        >
+          <React.Suspense fallback={null}>
+            <Suspender target={example} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(inspectedElement).toMatchSnapshot('2: updated state');
 
@@ -227,18 +222,14 @@ describe('InspectedElementContext', () => {
 
     targetRenderCount = 0;
     inspectedElement = null;
-    await actAsync(
-      () =>
-        renderer.update(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}
-          >
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await actAsync(() =>
+      renderer.update(
+        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={1}>
+          <React.Suspense fallback={null}>
+            <Suspender target={id} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(targetRenderCount).toBe(0);
     expect(inspectedElement).toEqual(initialInspectedElement);
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 01a7fd542191..7dde191cf997 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -84,28 +84,26 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts defaultOwnerID={parent.id}>
-            <React.Suspense fallback={null}>
-              <Suspender owner={parent} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={parent.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={parent} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(didFinish).toBe(true);
 
     didFinish = false;
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts defaultOwnerID={firstChild.id}>
-            <React.Suspense fallback={null}>
-              <Suspender owner={firstChild} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={firstChild.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={firstChild} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(didFinish).toBe(true);
 
@@ -146,15 +144,14 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts defaultOwnerID={firstChild.id}>
-            <React.Suspense fallback={null}>
-              <Suspender owner={firstChild} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={firstChild.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={firstChild} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(didFinish).toBe(true);
 
@@ -187,15 +184,14 @@ describe('OwnersListContext', () => {
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts defaultOwnerID={grandparent.id}>
-            <React.Suspense fallback={null}>
-              <Suspender owner={grandparent} />
-            </React.Suspense>
-          </Contexts>
-        )
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={grandparent.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={grandparent} />
+          </React.Suspense>
+        </Contexts>
+      )
     );
     expect(didFinish).toBe(true);
 
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index a24d1184d83a..e62d16ed5710 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -16,7 +16,7 @@ export function act(callback: Function): void {
   // Flush Bridge operations
   TestUtils.act(() => {
     jest.runAllTimers();
-  })
+  });
 }
 
 export async function actAsync(cb: () => *): Promise<void> {
@@ -162,4 +162,4 @@ export function exportImportHelper(bridge: Bridge, store: Store): void {
     // Apply the new exported-then-reimported data so tests can re-run assertions.
     profilerStore.profilingData = profilingDataFrontend;
   });
-}
\ No newline at end of file
+}

From 5429f651b478a0e9860af83ab962984af21b4b19 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 28 May 2019 13:57:05 -0700
Subject: [PATCH 642/814] Tweaks

---
 src/__tests__/inspectedElementContext-test.js | 130 +++++++++---------
 src/__tests__/profilingCharts-test.js         |   3 +
 src/__tests__/utils.js                        |  19 ++-
 3 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 7467a73c3b8e..939a4b3b0cd4 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -8,7 +8,6 @@ import type Store from 'src/devtools/store';
 describe('InspectedElementContext', () => {
   let React;
   let ReactDOM;
-  let act;
   let TestRenderer: ReactTestRenderer;
   let bridge: Bridge;
   let store: Store;
@@ -20,18 +19,6 @@ describe('InspectedElementContext', () => {
   let StoreContext;
   let TreeContextController;
 
-  // a version of actAsync that *doesn't* recursively flush timers
-  async function actAsync(cb: () => *): Promise<void> {
-    // $FlowFixMe Flow doesn't know about "await act()" yet
-    await act(async () => {
-      await cb();
-    });
-    // $FlowFixMe Flow doesn't know about "await act()" yet
-    await act(async () => {
-      jest.runOnlyPendingTimers();
-    });
-  }
-
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -42,7 +29,6 @@ describe('InspectedElementContext', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').act;
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('src/devtools/views/context').BridgeContext;
@@ -81,7 +67,9 @@ describe('InspectedElementContext', () => {
     };
 
     const container = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example foo={1} bar="abc" />, container)
+    );
     expect(store).toMatchSnapshot('1: mount');
 
     const example = ((store.getElementAtIndex(0): any): Element);
@@ -98,17 +86,19 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await actAsync(() =>
-      TestRenderer.create(
-        <Contexts
-          defaultSelectedElementID={example.id}
-          defaultSelectedElementIndex={0}
-        >
-          <React.Suspense fallback={null}>
-            <Suspender target={example} />
-          </React.Suspense>
-        </Contexts>
-      )
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
     );
     expect(didFinish).toBe(true);
 
@@ -119,7 +109,10 @@ describe('InspectedElementContext', () => {
     const Example = () => null;
 
     const container = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Example foo={1} bar="abc" />, container));
+    await utils.actAsync(
+      () => ReactDOM.render(<Example foo={1} bar="abc" />, container),
+      false
+    );
     expect(store).toMatchSnapshot('1: mount');
 
     const example = ((store.getElementAtIndex(0): any): Element);
@@ -132,8 +125,10 @@ describe('InspectedElementContext', () => {
       return null;
     }
 
-    await actAsync(() =>
-      TestRenderer.create(
+    let renderer;
+
+    await utils.actAsync(() => {
+      renderer = TestRenderer.create(
         <Contexts
           defaultSelectedElementID={example.id}
           defaultSelectedElementIndex={0}
@@ -142,26 +137,29 @@ describe('InspectedElementContext', () => {
             <Suspender target={example} />
           </React.Suspense>
         </Contexts>
-      )
-    );
+      );
+    }, false);
     expect(inspectedElement).toMatchSnapshot('2: initial render');
 
-    await actAsync(() =>
-      ReactDOM.render(<Example foo={2} bar="def" />, container)
+    await utils.actAsync(
+      () => ReactDOM.render(<Example foo={2} bar="def" />, container),
+      false
     );
 
     inspectedElement = null;
-    await actAsync(() =>
-      TestRenderer.create(
-        <Contexts
-          defaultSelectedElementID={example.id}
-          defaultSelectedElementIndex={0}
-        >
-          <React.Suspense fallback={null}>
-            <Suspender target={example} />
-          </React.Suspense>
-        </Contexts>
-      )
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
     );
     expect(inspectedElement).toMatchSnapshot('2: updated state');
 
@@ -179,7 +177,7 @@ describe('InspectedElementContext', () => {
     });
 
     const container = document.createElement('div');
-    utils.act(() =>
+    await utils.actAsync(() =>
       ReactDOM.render(
         <Wrapper>
           <Target foo={1} bar="abc" />
@@ -202,7 +200,7 @@ describe('InspectedElementContext', () => {
     targetRenderCount = 0;
 
     let renderer;
-    await actAsync(
+    await utils.actAsync(
       () =>
         (renderer = TestRenderer.create(
           <Contexts
@@ -213,7 +211,8 @@ describe('InspectedElementContext', () => {
               <Suspender target={id} />
             </React.Suspense>
           </Contexts>
-        ))
+        )),
+      false
     );
     expect(targetRenderCount).toBe(1);
     expect(inspectedElement).toMatchSnapshot('2: initial render');
@@ -222,27 +221,34 @@ describe('InspectedElementContext', () => {
 
     targetRenderCount = 0;
     inspectedElement = null;
-    await actAsync(() =>
-      renderer.update(
-        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={1}>
-          <React.Suspense fallback={null}>
-            <Suspender target={id} />
-          </React.Suspense>
-        </Contexts>
-      )
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
     );
     expect(targetRenderCount).toBe(0);
     expect(inspectedElement).toEqual(initialInspectedElement);
 
     targetRenderCount = 0;
 
-    await actAsync(() =>
-      ReactDOM.render(
-        <Wrapper>
-          <Target foo={2} bar="def" />
-        </Wrapper>,
-        container
-      )
+    await utils.actAsync(
+      () =>
+        ReactDOM.render(
+          <Wrapper>
+            <Target foo={2} bar="def" />
+          </Wrapper>,
+          container
+        ),
+      false
     );
 
     // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 8e9248bb97a4..d83f8b5a0fb3 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -88,6 +88,7 @@ describe('profiling charts', () => {
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
+
         utils.act(() => {
           TestRenderer.create(
             <Validator commitIndex={commitIndex} rootID={rootID} />
@@ -161,6 +162,7 @@ describe('profiling charts', () => {
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
+
         utils.act(() => {
           TestRenderer.create(
             <Validator commitIndex={commitIndex} rootID={rootID} />
@@ -225,6 +227,7 @@ describe('profiling charts', () => {
 
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
         renderFinished = false;
+
         utils.act(() => {
           TestRenderer.create(
             <Validator commitIndex={commitIndex} rootID={rootID} />
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index e62d16ed5710..061a307e7fe3 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -19,17 +19,28 @@ export function act(callback: Function): void {
   });
 }
 
-export async function actAsync(cb: () => *): Promise<void> {
+export async function actAsync(
+  cb: () => *,
+  recursivelyFlush: boolean = true
+): Promise<void> {
   const TestUtils = require('react-dom/test-utils');
 
   // $FlowFixMe Flow doens't know about "await act()" yet
   await TestUtils.act(async () => {
     await cb();
   });
-  while (jest.getTimerCount() > 0) {
-    // $FlowFixMe Flow doens't know about "await act()" yet
+
+  if (recursivelyFlush) {
+    while (jest.getTimerCount() > 0) {
+      // $FlowFixMe Flow doens't know about "await act()" yet
+      await TestUtils.act(async () => {
+        jest.runAllTimers();
+      });
+    }
+  } else {
+    // $FlowFixMe Flow doesn't know about "await act()" yet
     await TestUtils.act(async () => {
-      jest.runAllTimers();
+      jest.runOnlyPendingTimers();
     });
   }
 }

From d5be489d5bd03d179f6df504da53c3397cf67f5a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 29 May 2019 14:23:10 -0700
Subject: [PATCH 643/814] Backed out Bridge shutdown refactor as it seems to
 have introduced bugs

---
 src/bridge.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/bridge.js b/src/bridge.js
index 1619e518528b..62a3cae2c300 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -57,12 +57,6 @@ export default class Bridge extends EventEmitter {
       return;
     }
 
-    // Queue the shutdown outgoing message for subscribers.
-    this.send('shutdown');
-
-    // Mark this bridge as destroyed, i.e. disable its public API.
-    this._isShutdown = true;
-
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
     this.addListener = function() {};
     this.emit = function() {};
@@ -77,6 +71,9 @@ export default class Bridge extends EventEmitter {
       wallUnlisten();
     }
 
+    // Queue the shutdown outgoing message for subscribers.
+    this.send('shutdown');
+
     // Synchronously flush all queued outgoing messages.
     // At this step the subscribers' code may run in this call stack.
     do {
@@ -86,9 +83,17 @@ export default class Bridge extends EventEmitter {
     // Make sure once again that there is no dangling timer.
     clearTimeout(this._timeoutID);
     this._timeoutID = null;
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._isShutdown = true;
   }
 
   _flush = () => {
+    if (this._isShutdown) {
+      console.warn(`Cannot flush a Bridge that has been shutdown.`);
+      return;
+    }
+
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.

From ec421355bd1680f3509bda00c5fe9d04dbffc06d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 May 2019 08:22:06 -0700
Subject: [PATCH 644/814] Added selected and hovered guidelines to Components
 tree

---
 src/devtools/views/Components/Components.js   |  27 ++--
 src/devtools/views/Components/Element.js      |   5 +-
 src/devtools/views/Components/Guidelines.css  |  18 +++
 src/devtools/views/Components/Guidelines.js   | 126 ++++++++++++++++++
 .../views/Components/HoveredElementContext.js |  34 +++++
 src/devtools/views/Components/Tree.js         | 102 ++++++++------
 .../views/Components/TreeFocusedContext.js    |   7 +
 .../views/Settings/SettingsContext.js         |   1 +
 src/devtools/views/root.css                   |   2 +
 9 files changed, 265 insertions(+), 57 deletions(-)
 create mode 100644 src/devtools/views/Components/Guidelines.css
 create mode 100644 src/devtools/views/Components/Guidelines.js
 create mode 100644 src/devtools/views/Components/HoveredElementContext.js
 create mode 100644 src/devtools/views/Components/TreeFocusedContext.js

diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 3ed317a101dd..395087a21db1 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -3,6 +3,7 @@
 import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
+import { HoveredElementContextController } from './HoveredElementContext';
 import { InspectedElementContextController } from './InspectedElementContext';
 import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
@@ -14,19 +15,21 @@ function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <OwnersListContextController>
-      <InspectedElementContextController>
-        <div className={styles.Components}>
-          <div className={styles.TreeWrapper}>
-            <Tree />
+      <HoveredElementContextController>
+        <InspectedElementContextController>
+          <div className={styles.Components}>
+            <div className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.SelectedElementWrapper}>
+              <Suspense fallback={<Loading />}>
+                <SelectedElement />
+              </Suspense>
+            </div>
+            <ModalDialog />
           </div>
-          <div className={styles.SelectedElementWrapper}>
-            <Suspense fallback={<Loading />}>
-              <SelectedElement />
-            </Suspense>
-          </div>
-          <ModalDialog />
-        </div>
-      </InspectedElementContextController>
+        </InspectedElementContextController>
+      </HoveredElementContextController>
     </OwnersListContextController>
   );
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 0f3bb34a7a6b..020de1d5c840 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -19,6 +19,7 @@ import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
+import { HoveredElementSetIDContext } from './HoveredElementContext';
 import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
@@ -38,6 +39,7 @@ export default function ElementView({ data, index, style }: Props) {
     TreeStateContext
   );
   const dispatch = useContext(TreeDispatcherContext);
+  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   const element =
     ownerFlatTree !== null
@@ -119,9 +121,10 @@ export default function ElementView({ data, index, style }: Props) {
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
     if (id !== null) {
+      setHoveredElementID(id);
       onElementMouseEnter(id);
     }
-  }, [onElementMouseEnter, id]);
+  }, [id, onElementMouseEnter, setHoveredElementID]);
 
   const handleMouseLeave = useCallback(() => {
     setIsHovered(false);
diff --git a/src/devtools/views/Components/Guidelines.css b/src/devtools/views/Components/Guidelines.css
new file mode 100644
index 000000000000..7ea56a3f5013
--- /dev/null
+++ b/src/devtools/views/Components/Guidelines.css
@@ -0,0 +1,18 @@
+.GuidelineHovered,
+.GuidelineSelectedActive,
+.GuidelineSelectedInactive {
+  width: 1px;
+  z-index: 2;
+}
+
+.GuidelineHovered {
+  background-color: var(--color-guideline-hovered);
+}
+
+.GuidelineSelectedActive {
+  background-color: var(--color-background-selected);
+}
+
+.GuidelineSelectedInactive {
+  background-color: var(--color-background-inactive);
+}
diff --git a/src/devtools/views/Components/Guidelines.js b/src/devtools/views/Components/Guidelines.js
new file mode 100644
index 000000000000..f8397fd654dd
--- /dev/null
+++ b/src/devtools/views/Components/Guidelines.js
@@ -0,0 +1,126 @@
+// @flow
+
+import React, { Fragment, useContext, useMemo } from 'react';
+import { HoveredElementIDContext } from './HoveredElementContext';
+import { TreeStateContext } from './TreeContext';
+import TreeFocusedContext from './TreeFocusedContext';
+import { SettingsContext } from '../Settings/SettingsContext';
+import { StoreContext } from '../context';
+import { useSubscription } from '../hooks';
+import Store from '../../store';
+
+import styles from './Guidelines.css';
+
+export default function Guidelines(_: {||}) {
+  const hoveredElementID = useContext(HoveredElementIDContext);
+  const { selectedElementID } = useContext(TreeStateContext);
+  const treeFocused = useContext(TreeFocusedContext);
+
+  return (
+    <Fragment>
+      {hoveredElementID !== selectedElementID && (
+        <Guideline
+          className={styles.GuidelineHovered}
+          elementID={hoveredElementID}
+        />
+      )}
+      <Guideline
+        className={
+          treeFocused
+            ? styles.GuidelineSelectedActive
+            : styles.GuidelineSelectedInactive
+        }
+        elementID={selectedElementID}
+      />
+    </Fragment>
+  );
+}
+
+type Data = {|
+  depth: number,
+  startIndex: number,
+  stopIndex: number,
+|};
+
+type Props = {|
+  className: string,
+  elementID: number | null,
+|};
+
+function Guideline({ className, elementID }: Props) {
+  const store = useContext(StoreContext);
+  const { lineHeight } = useContext(SettingsContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => {
+        if (elementID === null) {
+          return null;
+        }
+
+        const element = store.getElementByID(elementID);
+        if (
+          element === null ||
+          element.isCollapsed ||
+          element.children.length === 0
+        ) {
+          return null;
+        }
+
+        const startIndex = store.getIndexOfElementID(element.children[0]);
+        if (startIndex === null) {
+          return null;
+        }
+
+        let stopIndex = null;
+        let current = element;
+        while (current !== null) {
+          if (current.isCollapsed || current.children.length === 0) {
+            // We've found the last/deepest descendant.
+            stopIndex = store.getIndexOfElementID(current.id);
+            current = null;
+          } else {
+            const lastChildID = current.children[current.children.length - 1];
+            current = store.getElementByID(lastChildID);
+          }
+        }
+
+        if (stopIndex === null) {
+          return null;
+        }
+
+        return {
+          depth: element.depth,
+          startIndex,
+          stopIndex,
+        };
+      },
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => {
+          store.removeListener('mutated', callback);
+        };
+      },
+    }),
+    [elementID, store]
+  );
+  const data = useSubscription<Data | null, Store>(subscription);
+
+  if (data === null) {
+    return null;
+  }
+
+  const { depth, startIndex, stopIndex } = data;
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: 'absolute',
+        top: `${startIndex * lineHeight}px`,
+        left: `${depth * 0.75 + 0.75}rem`,
+        height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,
+      }}
+    />
+  );
+}
diff --git a/src/devtools/views/Components/HoveredElementContext.js b/src/devtools/views/Components/HoveredElementContext.js
new file mode 100644
index 000000000000..161fd1f6202c
--- /dev/null
+++ b/src/devtools/views/Components/HoveredElementContext.js
@@ -0,0 +1,34 @@
+// @flow
+
+import React, { createContext, useState } from 'react';
+
+type ID = number | null;
+type SetID = (id: ID) => void;
+
+const HoveredElementIDContext = createContext<ID>(null);
+HoveredElementIDContext.displayName = 'HoveredElementIDContext';
+
+const HoveredElementSetIDContext = createContext<SetID>(((null: any): SetID));
+HoveredElementSetIDContext.displayName = 'HoveredElementSetIDContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function HoveredElementContextController({ children }: Props) {
+  const [hoveredElementID, setHoveredElementID] = useState<ID>(null);
+
+  return (
+    <HoveredElementIDContext.Provider value={hoveredElementID}>
+      <HoveredElementSetIDContext.Provider value={setHoveredElementID}>
+        {children}
+      </HoveredElementSetIDContext.Provider>
+    </HoveredElementIDContext.Provider>
+  );
+}
+
+export {
+  HoveredElementIDContext,
+  HoveredElementSetIDContext,
+  HoveredElementContextController,
+};
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 4687c7993971..0a6ac0fa4b98 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -22,6 +22,9 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
+import { HoveredElementSetIDContext } from './HoveredElementContext';
+import Guidelines from './Guidelines';
+import TreeFocusedContext from './TreeFocusedContext';
 
 import styles from './Tree.css';
 
@@ -273,54 +276,57 @@ export default function Tree(props: Props) {
   );
 
   return (
-    <ComponentFiltersModalContextController>
-      <div className={styles.Tree} ref={treeRef}>
-        <div className={styles.SearchInput}>
-          <InspectHostNodesToggle />
-          <div className={styles.VRule} />
-          <Suspense fallback={<Loading />}>
-            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
-          </Suspense>
-          <div className={styles.VRule} />
-          <ToggleComponentFiltersModalButton />
+    <TreeFocusedContext.Provider value={treeFocused}>
+      <ComponentFiltersModalContextController>
+        <div className={styles.Tree} ref={treeRef}>
+          <div className={styles.SearchInput}>
+            <InspectHostNodesToggle />
+            <div className={styles.VRule} />
+            <Suspense fallback={<Loading />}>
+              {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+            </Suspense>
+            <div className={styles.VRule} />
+            <ToggleComponentFiltersModalButton />
+          </div>
+          <div
+            className={styles.AutoSizerWrapper}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            onKeyPress={handleKeyPress}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            ref={focusTargetRef}
+            tabIndex={0}
+          >
+            <AutoSizer>
+              {({ height, width }) => (
+                // $FlowFixMe https://github.com/facebook/flow/issues/7341
+                <FixedSizeList
+                  className={styles.List}
+                  height={height}
+                  innerElementType={InnerElementType}
+                  itemCount={numElements}
+                  itemData={itemData}
+                  itemSize={lineHeight}
+                  overscanCount={3}
+                  ref={listRef}
+                  width={width}
+                >
+                  {ElementView}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
+          </div>
+          <ComponentFiltersModal />
         </div>
-        <div
-          className={styles.AutoSizerWrapper}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          onKeyPress={handleKeyPress}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
-          ref={focusTargetRef}
-          tabIndex={0}
-        >
-          <AutoSizer>
-            {({ height, width }) => (
-              // $FlowFixMe https://github.com/facebook/flow/issues/7341
-              <FixedSizeList
-                className={styles.List}
-                height={height}
-                innerElementType={InnerElementType}
-                itemCount={numElements}
-                itemData={itemData}
-                itemSize={lineHeight}
-                overscanCount={3}
-                ref={listRef}
-                width={width}
-              >
-                {ElementView}
-              </FixedSizeList>
-            )}
-          </AutoSizer>
-        </div>
-        <ComponentFiltersModal />
-      </div>
-    </ComponentFiltersModalContextController>
+      </ComponentFiltersModalContextController>
+    </TreeFocusedContext.Provider>
   );
 }
 
-function InnerElementType({ style, ...rest }) {
+function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
+  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -355,6 +361,10 @@ function InnerElementType({ style, ...rest }) {
     setMinWidth(null);
   }
 
+  const handleMouseLeave = useCallback(() => {
+    setHoveredElementID(null);
+  }, [setHoveredElementID]);
+
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
@@ -362,6 +372,7 @@ function InnerElementType({ style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
+      onMouseLeave={handleMouseLeave}
       style={{
         ...style,
         display: 'inline-block',
@@ -370,7 +381,10 @@ function InnerElementType({ style, ...rest }) {
       }}
       ref={divRef}
       {...rest}
-    />
+    >
+      <Guidelines />
+      {children}
+    </div>
   );
 }
 
diff --git a/src/devtools/views/Components/TreeFocusedContext.js b/src/devtools/views/Components/TreeFocusedContext.js
new file mode 100644
index 000000000000..7851db131633
--- /dev/null
+++ b/src/devtools/views/Components/TreeFocusedContext.js
@@ -0,0 +1,7 @@
+// @flow
+
+import { createContext } from 'react';
+
+const TreeFocusedContext = createContext<boolean>(false);
+
+export default TreeFocusedContext;
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 17194aaa0392..fa2be0f5beb9 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -261,6 +261,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
+  updateStyleHelper(theme, 'color-guideline-hovered', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 5dba64cc2045..f0ec9588a06e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -42,6 +42,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
+  --light-color-guideline-hovered: rgba(0, 0, 0, 0.1);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -99,6 +100,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
+  --dark-color-guideline-hovered: rgba(255, 255, 255, 0.1);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From 8f8ac358c6d8f16dac75f19f61b7935c1cfc1e02 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 May 2019 08:43:45 -0700
Subject: [PATCH 645/814] Turn off pointer events for guidelines

---
 src/devtools/views/Components/Guidelines.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/Components/Guidelines.css b/src/devtools/views/Components/Guidelines.css
index 7ea56a3f5013..f558a665518a 100644
--- a/src/devtools/views/Components/Guidelines.css
+++ b/src/devtools/views/Components/Guidelines.css
@@ -3,6 +3,7 @@
 .GuidelineSelectedInactive {
   width: 1px;
   z-index: 2;
+  pointer-events: none;
 }
 
 .GuidelineHovered {

From a957031fe799938afc3e498e8644be5b3a22bc99 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 May 2019 09:27:28 -0700
Subject: [PATCH 646/814] Fixed bad Bridge disconnections

---
 shells/browser/shared/src/main.js |  9 ++++++++-
 src/bridge.js                     | 17 ++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index bf194d3c5e8f..66f24a4d40e6 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -62,9 +62,11 @@ function createPanelIfReactLoaded() {
       let render = null;
       let root = null;
 
+      const tabId = chrome.devtools.inspectedWindow.tabId;
+
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          name: '' + chrome.devtools.inspectedWindow.tabId,
+          name: '' + tabId,
         });
         // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
         // so it makes no sense to handle it here.
@@ -284,6 +286,11 @@ function createPanelIfReactLoaded() {
       // Shutdown bridge before a new page is loaded.
       chrome.webNavigation.onBeforeNavigate.addListener(
         function onBeforeNavigate(details) {
+          // Ignore navigation events from other tabs (or from within frames).
+          if (details.tabId !== tabId || details.frameId !== 0) {
+            return;
+          }
+
           // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
           bridge.shutdown();
 
diff --git a/src/bridge.js b/src/bridge.js
index 62a3cae2c300..1619e518528b 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -57,6 +57,12 @@ export default class Bridge extends EventEmitter {
       return;
     }
 
+    // Queue the shutdown outgoing message for subscribers.
+    this.send('shutdown');
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._isShutdown = true;
+
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
     this.addListener = function() {};
     this.emit = function() {};
@@ -71,9 +77,6 @@ export default class Bridge extends EventEmitter {
       wallUnlisten();
     }
 
-    // Queue the shutdown outgoing message for subscribers.
-    this.send('shutdown');
-
     // Synchronously flush all queued outgoing messages.
     // At this step the subscribers' code may run in this call stack.
     do {
@@ -83,17 +86,9 @@ export default class Bridge extends EventEmitter {
     // Make sure once again that there is no dangling timer.
     clearTimeout(this._timeoutID);
     this._timeoutID = null;
-
-    // Mark this bridge as destroyed, i.e. disable its public API.
-    this._isShutdown = true;
   }
 
   _flush = () => {
-    if (this._isShutdown) {
-      console.warn(`Cannot flush a Bridge that has been shutdown.`);
-      return;
-    }
-
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.

From a2a468743f99bdd08bd236ec9c7ec24b9756c6ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 May 2019 14:17:12 -0700
Subject: [PATCH 647/814] Remove hover guideline in favor of showing guidelines
 for every nesting level

---
 src/devtools/views/Components/Components.js   | 27 +++++++--------
 src/devtools/views/Components/Element.js      | 18 +++++++---
 src/devtools/views/Components/Guidelines.css  | 13 +++----
 src/devtools/views/Components/Guidelines.js   | 12 +------
 .../views/Components/HoveredElementContext.js | 34 -------------------
 src/devtools/views/Components/Tree.js         |  7 ----
 .../views/Settings/SettingsContext.js         |  2 +-
 src/devtools/views/root.css                   |  4 +--
 8 files changed, 33 insertions(+), 84 deletions(-)
 delete mode 100644 src/devtools/views/Components/HoveredElementContext.js

diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 395087a21db1..3ed317a101dd 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -3,7 +3,6 @@
 import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
-import { HoveredElementContextController } from './HoveredElementContext';
 import { InspectedElementContextController } from './InspectedElementContext';
 import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
@@ -15,21 +14,19 @@ function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <OwnersListContextController>
-      <HoveredElementContextController>
-        <InspectedElementContextController>
-          <div className={styles.Components}>
-            <div className={styles.TreeWrapper}>
-              <Tree />
-            </div>
-            <div className={styles.SelectedElementWrapper}>
-              <Suspense fallback={<Loading />}>
-                <SelectedElement />
-              </Suspense>
-            </div>
-            <ModalDialog />
+      <InspectedElementContextController>
+        <div className={styles.Components}>
+          <div className={styles.TreeWrapper}>
+            <Tree />
           </div>
-        </InspectedElementContextController>
-      </HoveredElementContextController>
+          <div className={styles.SelectedElementWrapper}>
+            <Suspense fallback={<Loading />}>
+              <SelectedElement />
+            </Suspense>
+          </div>
+          <ModalDialog />
+        </div>
+      </InspectedElementContextController>
     </OwnersListContextController>
   );
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 020de1d5c840..f0c0efa4dd86 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -19,7 +19,6 @@ import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { HoveredElementSetIDContext } from './HoveredElementContext';
 import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
@@ -39,7 +38,6 @@ export default function ElementView({ data, index, style }: Props) {
     TreeStateContext
   );
   const dispatch = useContext(TreeDispatcherContext);
-  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   const element =
     ownerFlatTree !== null
@@ -121,10 +119,9 @@ export default function ElementView({ data, index, style }: Props) {
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
     if (id !== null) {
-      setHoveredElementID(id);
       onElementMouseEnter(id);
     }
-  }, [id, onElementMouseEnter, setHoveredElementID]);
+  }, [id, onElementMouseEnter]);
 
   const handleMouseLeave = useCallback(() => {
     setIsHovered(false);
@@ -164,7 +161,7 @@ export default function ElementView({ data, index, style }: Props) {
         ...style, // "style" comes from react-window
 
         // Left padding presents the appearance of a nested tree structure.
-        paddingLeft: `${depth * 0.75 + 0.25}rem`,
+        paddingLeft: '0.25rem',
 
         // These style overrides enable the background color to fill the full visible width,
         // when combined with the CSS tweaks in Tree.
@@ -176,6 +173,17 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <div
+        style={{
+          width: `${depth * 0.75}rem`,
+          height: '100%',
+          backgroundSize: '0.75rem 1rem',
+          backgroundColor: 'transparent',
+          backgroundImage:
+            'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
+          backgroundRepeat: 'repeat',
+        }}
+      />
       <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
diff --git a/src/devtools/views/Components/Guidelines.css b/src/devtools/views/Components/Guidelines.css
index f558a665518a..1ab29e1d16ae 100644
--- a/src/devtools/views/Components/Guidelines.css
+++ b/src/devtools/views/Components/Guidelines.css
@@ -1,19 +1,14 @@
-.GuidelineHovered,
-.GuidelineSelectedActive,
-.GuidelineSelectedInactive {
+.GuidelineActive,
+.GuidelineInactive {
   width: 1px;
   z-index: 2;
   pointer-events: none;
 }
 
-.GuidelineHovered {
-  background-color: var(--color-guideline-hovered);
-}
-
-.GuidelineSelectedActive {
+.GuidelineActive {
   background-color: var(--color-background-selected);
 }
 
-.GuidelineSelectedInactive {
+.GuidelineInactive {
   background-color: var(--color-background-inactive);
 }
diff --git a/src/devtools/views/Components/Guidelines.js b/src/devtools/views/Components/Guidelines.js
index f8397fd654dd..30332ea9bf61 100644
--- a/src/devtools/views/Components/Guidelines.js
+++ b/src/devtools/views/Components/Guidelines.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React, { Fragment, useContext, useMemo } from 'react';
-import { HoveredElementIDContext } from './HoveredElementContext';
 import { TreeStateContext } from './TreeContext';
 import TreeFocusedContext from './TreeFocusedContext';
 import { SettingsContext } from '../Settings/SettingsContext';
@@ -12,23 +11,14 @@ import Store from '../../store';
 import styles from './Guidelines.css';
 
 export default function Guidelines(_: {||}) {
-  const hoveredElementID = useContext(HoveredElementIDContext);
   const { selectedElementID } = useContext(TreeStateContext);
   const treeFocused = useContext(TreeFocusedContext);
 
   return (
     <Fragment>
-      {hoveredElementID !== selectedElementID && (
-        <Guideline
-          className={styles.GuidelineHovered}
-          elementID={hoveredElementID}
-        />
-      )}
       <Guideline
         className={
-          treeFocused
-            ? styles.GuidelineSelectedActive
-            : styles.GuidelineSelectedInactive
+          treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
         }
         elementID={selectedElementID}
       />
diff --git a/src/devtools/views/Components/HoveredElementContext.js b/src/devtools/views/Components/HoveredElementContext.js
deleted file mode 100644
index 161fd1f6202c..000000000000
--- a/src/devtools/views/Components/HoveredElementContext.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// @flow
-
-import React, { createContext, useState } from 'react';
-
-type ID = number | null;
-type SetID = (id: ID) => void;
-
-const HoveredElementIDContext = createContext<ID>(null);
-HoveredElementIDContext.displayName = 'HoveredElementIDContext';
-
-const HoveredElementSetIDContext = createContext<SetID>(((null: any): SetID));
-HoveredElementSetIDContext.displayName = 'HoveredElementSetIDContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function HoveredElementContextController({ children }: Props) {
-  const [hoveredElementID, setHoveredElementID] = useState<ID>(null);
-
-  return (
-    <HoveredElementIDContext.Provider value={hoveredElementID}>
-      <HoveredElementSetIDContext.Provider value={setHoveredElementID}>
-        {children}
-      </HoveredElementSetIDContext.Provider>
-    </HoveredElementIDContext.Provider>
-  );
-}
-
-export {
-  HoveredElementIDContext,
-  HoveredElementSetIDContext,
-  HoveredElementContextController,
-};
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 0a6ac0fa4b98..d7d34047541d 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -22,7 +22,6 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
-import { HoveredElementSetIDContext } from './HoveredElementContext';
 import Guidelines from './Guidelines';
 import TreeFocusedContext from './TreeFocusedContext';
 
@@ -326,7 +325,6 @@ export default function Tree(props: Props) {
 
 function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
-  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -361,10 +359,6 @@ function InnerElementType({ children, style, ...rest }) {
     setMinWidth(null);
   }
 
-  const handleMouseLeave = useCallback(() => {
-    setHoveredElementID(null);
-  }, [setHoveredElementID]);
-
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
@@ -372,7 +366,6 @@ function InnerElementType({ children, style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      onMouseLeave={handleMouseLeave}
       style={{
         ...style,
         display: 'inline-block',
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index fa2be0f5beb9..4f7913155432 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -261,7 +261,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline-hovered', documentElements);
+  updateStyleHelper(theme, 'color-guideline', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f0ec9588a06e..f09eda35f89e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -42,7 +42,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline-hovered: rgba(0, 0, 0, 0.1);
+  --light-color-guideline: rgba(0, 0, 0, 0.15);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -100,7 +100,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline-hovered: rgba(255, 255, 255, 0.1);
+  --dark-color-guideline: rgba(255, 255, 255, 0.15);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From c0f686eed9bf18d3015160229145e829f31a66cc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 May 2019 14:30:17 -0700
Subject: [PATCH 648/814] Show indent lines preference

---
 src/devtools/views/Components/Element.js      |  8 +++---
 src/devtools/views/Components/Tree.js         |  5 +++-
 src/devtools/views/Settings/Settings.js       | 26 ++++++++++++++++---
 .../views/Settings/SettingsContext.js         | 11 ++++++++
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index f0c0efa4dd86..681b65a18425 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -48,9 +48,10 @@ export default function ElementView({ data, index, style }: Props) {
 
   const {
     lastScrolledIDRef,
-    treeFocused,
     isNavigatingWithKeyboard,
     onElementMouseEnter,
+    showIndentLines,
+    treeFocused,
   } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
@@ -179,8 +180,9 @@ export default function ElementView({ data, index, style }: Props) {
           height: '100%',
           backgroundSize: '0.75rem 1rem',
           backgroundColor: 'transparent',
-          backgroundImage:
-            'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
+          backgroundImage: showIndentLines
+            ? 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)'
+            : '',
           backgroundRepeat: 'repeat',
         }}
       />
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index d7d34047541d..74972f7cd4a3 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -32,6 +32,7 @@ export type ItemData = {|
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
+  showIndentLines: boolean,
   treeFocused: boolean,
 |};
 
@@ -59,7 +60,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight } = useContext(SettingsContext);
+  const { lineHeight, showIndentLines } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -263,6 +264,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     }),
     [
@@ -270,6 +272,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     ]
   );
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 645ee254223c..30b83803cce9 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -11,9 +11,14 @@ import styles from './Settings.css';
 
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
-  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
-    SettingsContext
-  );
+  const {
+    displayDensity,
+    setDisplayDensity,
+    showIndentLines,
+    setShowIndentLines,
+    theme,
+    setTheme,
+  } = useContext(SettingsContext);
 
   const captureScreenshotsSubscription = useMemo(
     () => ({
@@ -57,6 +62,13 @@ function Settings(_: {||}) {
     [setTheme]
   );
 
+  const updateShowIndentLines = useCallback(
+    ({ currentTarget }) => {
+      setShowIndentLines(currentTarget.checked);
+    },
+    [setShowIndentLines]
+  );
+
   const updateCaptureScreenshotsWhileProfiling = useCallback(
     ({ currentTarget }) => {
       store.captureScreenshots = currentTarget.checked;
@@ -143,6 +155,14 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={showIndentLines}
+            onChange={updateShowIndentLines}
+          />{' '}
+          Show indent lines
+        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4f7913155432..ac371cbec722 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -16,6 +16,9 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
+  showIndentLines: boolean,
+  setShowIndentLines: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -44,6 +47,10 @@ function SettingsContextController({
     'React::DevTools::displayDensity',
     'compact'
   );
+  const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
+    'React::DevTools::showIndentLines',
+    true
+  );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
     'auto'
@@ -126,6 +133,8 @@ function SettingsContextController({
       setDisplayDensity,
       theme,
       setTheme,
+      showIndentLines,
+      setShowIndentLines,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -135,7 +144,9 @@ function SettingsContextController({
       comfortableLineHeight,
       compactLineHeight,
       displayDensity,
+      showIndentLines,
       setDisplayDensity,
+      setShowIndentLines,
       setTheme,
       theme,
     ]

From 9f44251ebf60af8331aaff5ced5629675e04e4bd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 31 May 2019 14:27:22 +0100
Subject: [PATCH 649/814] Remove unnecessary code for host text as we skip it
 anyway

---
 src/backend/legacy/getChildren.js             |  26 +---
 src/backend/legacy/renderer.js                |   3 +
 src/backend/legacy/traverseAllChildrenImpl.js | 146 ------------------
 3 files changed, 5 insertions(+), 170 deletions(-)
 delete mode 100644 src/backend/legacy/traverseAllChildrenImpl.js

diff --git a/src/backend/legacy/getChildren.js b/src/backend/legacy/getChildren.js
index 0ce3a3960360..0f10b5f282a0 100644
--- a/src/backend/legacy/getChildren.js
+++ b/src/backend/legacy/getChildren.js
@@ -1,7 +1,5 @@
 // @flow
 
-import traverseAllChildrenImpl from './traverseAllChildrenImpl';
-
 // TODO (legacy) Respect component filters
 
 export default function getChildren(internalInstance: Object): Array<any> {
@@ -21,29 +19,9 @@ export default function getChildren(internalInstance: Object): Array<any> {
     children = [internalInstance._renderedComponent];
   } else if (internalInstance._renderedChildren) {
     children = renderedChildrenToArray(internalInstance._renderedChildren);
-  } else if (
-    internalInstance._currentElement &&
-    internalInstance._currentElement.props
-  ) {
-    // This is a native node without rendered children -- meaning the children
-    // prop is the unfiltered list of children.
-    // This may include 'null' or even other invalid values, so we need to
-    // filter it the same way that ReactDOM does.
-    // Instead of pulling in the whole React library, we just copied over the
-    // 'traverseAllChildrenImpl' method.
-    // https://github.com/facebook/react/blob/240b84ed8e1db715d759afaae85033718a0b24e1/src/isomorphic/children/ReactChildren.js#L112-L158
-    const unfilteredChildren = internalInstance._currentElement.props.children;
-    traverseAllChildrenImpl(
-      unfilteredChildren,
-      '', // nameSoFar
-      (_traverseContext, child) => {
-        const childType = typeof child;
-        if (childType === 'string' || childType === 'number') {
-          children.push(child);
-        }
-      }
-    );
   }
+  // Note: we skip the case where children are just strings or numbers
+  // because the new DevTools skips over host text nodes anyway.
 
   const instance = internalInstance._instance;
   if (instance) {
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index d8318a9304eb..1f7edf7d3623 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -52,6 +52,9 @@ export function attach(
   const rootIDs: Set<number> = new Set();
 
   function getID(internalInstance: InternalInstance): number {
+    if (typeof internalInstance !== 'object') {
+      throw new Error('Invalid internal instance: ' + internalInstance);
+    }
     if (!internalInstanceToIDMap.has(internalInstance)) {
       const id = getUID();
       internalInstanceToIDMap.set(internalInstance, id);
diff --git a/src/backend/legacy/traverseAllChildrenImpl.js b/src/backend/legacy/traverseAllChildrenImpl.js
deleted file mode 100644
index a7e1cd399cba..000000000000
--- a/src/backend/legacy/traverseAllChildrenImpl.js
+++ /dev/null
@@ -1,146 +0,0 @@
-// @flow
-
-const SEPARATOR = '.';
-const SUBSEPARATOR = ':';
-
-const FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
-// The Symbol used to tag the ReactElement type. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
-const REACT_ELEMENT_TYPE =
-  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
-  0xeac7;
-
-/**
- * Escape and wrap key so it is safe to use as a reactid
- *
- * @param {string} key to be escaped.
- * @return {string} the escaped key.
- */
-function escape(key: string): string {
-  const escapeRegex = /[=:]/g;
-  const escaperLookup = {
-    '=': '=0',
-    ':': '=2',
-  };
-  const escapedString = ('' + key).replace(escapeRegex, function(match) {
-    return escaperLookup[match];
-  });
-
-  return '$' + escapedString;
-}
-
-/**
- * Generate a key string that identifies a component within a set.
- *
- * @param {*} component A component that could contain a manual key.
- * @param {number} index Index that is used if a manual key is not provided.
- * @return {string}
- */
-function getComponentKey(component, index) {
-  // Do some typechecking here since we call this blindly. We want to ensure
-  // that we don't block potential future ES APIs.
-  if (
-    typeof component === 'object' &&
-    component !== null &&
-    component.key != null
-  ) {
-    // Explicit key
-    return escape(component.key);
-  }
-  // Implicit key determined by the index in the set
-  return index.toString(36);
-}
-
-/**
- * We do a copied the 'traverseAllChildrenImpl' method from
- * `React.Children` so that we don't pull in the whole React library.
- * @param {?*} children Children tree container.
- * @param {!string} nameSoFar Name of the key path so far.
- * @param {!function} callback Callback to invoke with each child found.
- * @param {?*} traverseContext Used to pass information throughout the traversal
- * process.
- * @return {!number} The number of children in this subtree.
- */
-export default function traverseAllChildrenImpl(
-  children: any,
-  nameSoFar: string,
-  callback: Function,
-  traverseContext: any
-): number {
-  const type = typeof children;
-
-  if (type === 'undefined' || type === 'boolean') {
-    // All of the above are perceived as null.
-    children = null;
-  }
-
-  if (
-    children === null ||
-    type === 'string' ||
-    type === 'number' ||
-    // The following is inlined from ReactElement. This means we can optimize
-    // some checks. React Fiber also inlines this logic for similar purposes.
-    (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE)
-  ) {
-    callback(
-      traverseContext,
-      children,
-      // If it's the only child, treat the name as if it was wrapped in an array
-      // so that it's consistent if the number of children grows.
-      nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar
-    );
-    return 1;
-  }
-
-  let child;
-  let nextName;
-  let subtreeCount = 0; // Count of children found in the current subtree.
-  let nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
-
-  if (Array.isArray(children)) {
-    for (let i = 0; i < children.length; i++) {
-      child = children[i];
-      nextName = nextNamePrefix + getComponentKey(child, i);
-      subtreeCount += traverseAllChildrenImpl(
-        child,
-        nextName,
-        callback,
-        traverseContext
-      );
-    }
-  } else {
-    let iteratorFn =
-      (ITERATOR_SYMBOL && children[ITERATOR_SYMBOL]) ||
-      children[FAUX_ITERATOR_SYMBOL];
-    if (typeof iteratorFn === 'function') {
-      let iterator = iteratorFn.call(children);
-      let step;
-      let ii = 0;
-      while (!(step = iterator.next()).done) {
-        child = step.value;
-        nextName = nextNamePrefix + getComponentKey(child, ii++);
-        subtreeCount += traverseAllChildrenImpl(
-          child,
-          nextName,
-          callback,
-          traverseContext
-        );
-      }
-    } else if (type === 'object') {
-      let addendum =
-        ' If you meant to render a collection of children, use an array ' +
-        'instead.';
-      let childrenString = '' + children;
-      throw Error(
-        `The React Devtools cannot render an object as a child. (found: ${
-          childrenString === '[object Object]'
-            ? 'object with keys {' + Object.keys(children).join(', ') + '}'
-            : childrenString
-        }). ${addendum}`
-      );
-    }
-  }
-
-  return subtreeCount;
-}

From 6fd83acb1dd29c0a5102204b48369e5ec7879cde Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 31 May 2019 15:38:58 +0100
Subject: [PATCH 650/814] Default to showing host nodes for legacy renderer

---
 .../storeLegacy-v15-test.js.snap              | 256 +++++++++++-------
 src/__tests__/legacy/storeLegacy-v15-test.js  |  26 +-
 src/backend/legacy/getData.js                 |   9 +-
 src/backend/legacy/getElementType.js          |   8 +-
 src/backend/legacy/renderer.js                |   5 -
 5 files changed, 192 insertions(+), 112 deletions(-)

diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
index 00e8eff3abfa..37747be9c63c 100644
--- a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -3,46 +3,68 @@
 exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-    ▾ <Parent>
-        <Child>
+    ▾ <div>
+      ▾ <div>
+        ▾ <Parent>
+          ▾ <div>
+            ▾ <Child>
+                <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child>
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
+    ▾ <div>
+      ▸ <Parent>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▸ <Parent>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
@@ -53,43 +75,66 @@ exports[`Store (legacy) collapseNodesByDefault:false should support collapsing p
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▸ <Parent>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
 [root]
   ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
 [root]
   ▾ <Parent key="B">
-      <Child key="0">
-      <Child key="1">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
 [root]
   ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
+      ▾ <Child key="3">
+          <div>
 [root]
   ▾ <Parent key="B">
-      <Child key="0">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
 [root]
   ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
+      ▾ <Child key="3">
+          <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
@@ -97,49 +142,66 @@ exports[`Store (legacy) collapseNodesByDefault:false should support mount and up
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-        <Child key="3">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-        <Child key="3">
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+          ▾ <Child key="2">
+              <div>
+          ▾ <Child key="3">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+          ▾ <Child key="2">
+              <div>
+          ▾ <Child key="3">
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
 
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▸ <Grandparent>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
+    ▸ <div>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-    ▸ <Parent>
+    ▾ <div>
+      ▸ <div>
+      ▸ <Parent>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
@@ -153,7 +215,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
     ▾ <Nested>
       ▾ <Nested>
         ▾ <Nested>
-            <Nested>
+          ▾ <Nested>
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
@@ -167,7 +230,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
     ▾ <Nested>
       ▾ <Nested>
         ▾ <Nested>
-            <Nested>
+          ▾ <Nested>
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
@@ -182,7 +246,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
     ▾ <Nested>
       ▾ <Nested>
         ▾ <Nested>
-            <Nested>
+          ▾ <Nested>
+              <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
@@ -193,47 +258,54 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding par
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
+    ▸ <div>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
+    ▾ <div>
+      ▾ <Parent>
+        ▸ <div>
+      ▸ <Parent>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
+    ▾ <div>
+      ▾ <Parent>
+        ▸ <div>
+      ▾ <Parent>
+        ▸ <div>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
 [root]
   ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
+    ▾ <div>
+      ▸ <Parent>
+      ▾ <Parent>
+        ▸ <div>
 `;
 
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
 [root]
   ▸ <Grandparent>
 `;
@@ -261,19 +333,17 @@ exports[`Store (legacy) collapseNodesByDefault:true should support mount and upd
 
 exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
 [root]
-  ▸ <Parent>
-  ▸ <Parent>
+  ▸ <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
 [root]
-  ▸ <Parent>
-  ▸ <Parent>
+  ▸ <div>
 `;
 
 exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
 
 exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
-    <Component>
+  ▸ <Component>
 `;
diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/src/__tests__/legacy/storeLegacy-v15-test.js
index baa882e538fa..bc891b3b7501 100644
--- a/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -157,8 +157,8 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       const grandparentID = store.getElementIDAtIndex(0);
-      const parentOneID = store.getElementIDAtIndex(1);
-      const parentTwoID = store.getElementIDAtIndex(4);
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(8);
 
       act(() => store.toggleIsCollapsed(parentOneID, true));
       expect(store).toMatchSnapshot('2: collapse first Parent');
@@ -318,7 +318,7 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('4: unmount A');
     });
 
-    it('should filter DOM nodes from the store tree', () => {
+    it('should not filter DOM nodes from the store tree', () => {
       const Grandparent = () => (
         <div>
           <div>
@@ -346,7 +346,7 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('2: expand Grandparent');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
-      expect(store).toMatchSnapshot('3: expand Parent');
+      expect(store).toMatchSnapshot('3: expand div');
     });
 
     it('should support expanding parts of the tree', () => {
@@ -378,23 +378,27 @@ describe('Store (legacy)', () => {
       act(() => store.toggleIsCollapsed(grandparentID, false));
       expect(store).toMatchSnapshot('2: expand Grandparent');
 
-      const parentOneID = store.getElementIDAtIndex(1);
-      const parentTwoID = store.getElementIDAtIndex(2);
+      const parentDivID = store.getElementIDAtIndex(1);
+      act(() => store.toggleIsCollapsed(parentDivID, false));
+      expect(store).toMatchSnapshot('3: expand parent div');
+
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(3);
 
       act(() => store.toggleIsCollapsed(parentOneID, false));
-      expect(store).toMatchSnapshot('3: expand first Parent');
+      expect(store).toMatchSnapshot('4: expand first Parent');
 
       act(() => store.toggleIsCollapsed(parentTwoID, false));
-      expect(store).toMatchSnapshot('4: expand second Parent');
+      expect(store).toMatchSnapshot('5: expand second Parent');
 
       act(() => store.toggleIsCollapsed(parentOneID, true));
-      expect(store).toMatchSnapshot('5: collapse first Parent');
+      expect(store).toMatchSnapshot('6: collapse first Parent');
 
       act(() => store.toggleIsCollapsed(parentTwoID, true));
-      expect(store).toMatchSnapshot('6: collapse second Parent');
+      expect(store).toMatchSnapshot('7: collapse second Parent');
 
       act(() => store.toggleIsCollapsed(grandparentID, true));
-      expect(store).toMatchSnapshot('7: collapse Grandparent');
+      expect(store).toMatchSnapshot('8: collapse Grandparent');
     });
 
     it('should support expanding deep parts of the tree', () => {
diff --git a/src/backend/legacy/getData.js b/src/backend/legacy/getData.js
index 0695078517a5..ffc1d775a8d7 100644
--- a/src/backend/legacy/getData.js
+++ b/src/backend/legacy/getData.js
@@ -1,6 +1,10 @@
 // @flow
 
-import { ElementTypeClass, ElementTypeOtherOrUnknown } from 'src/types';
+import {
+  ElementTypeClass,
+  ElementTypeHostComponent,
+  ElementTypeOtherOrUnknown,
+} from 'src/types';
 import { getDisplayName } from 'src/utils';
 
 import type { InternalInstance } from './renderer';
@@ -19,7 +23,8 @@ export default function getData(internalInstance: InternalInstance): FiberData {
 
     const elementType = internalInstance._currentElement.type;
     if (typeof elementType === 'string') {
-      // ...
+      type = ElementTypeHostComponent;
+      displayName = elementType;
     } else if (typeof elementType === 'function') {
       // TODO Can we differentiate between function and class component types?
       //      Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14
diff --git a/src/backend/legacy/getElementType.js b/src/backend/legacy/getElementType.js
index 94ba33701191..10b8c9f68e4e 100644
--- a/src/backend/legacy/getElementType.js
+++ b/src/backend/legacy/getElementType.js
@@ -1,5 +1,9 @@
 // @flow
-import { ElementTypeClass, ElementTypeOtherOrUnknown } from 'src/types';
+import {
+  ElementTypeClass,
+  ElementTypeHostComponent,
+  ElementTypeOtherOrUnknown,
+} from 'src/types';
 
 import type { InternalInstance } from './renderer';
 import type { ElementType } from 'src/types';
@@ -12,6 +16,8 @@ export default function getElementType(
     const elementType = internalInstance._currentElement.type;
     if (typeof elementType === 'function') {
       return ElementTypeClass;
+    } else if (typeof elementType === 'string') {
+      return ElementTypeHostComponent;
     }
   }
 
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 1f7edf7d3623..2eb20d759f15 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -67,10 +67,6 @@ export function attach(
     return getChildren(internalInstance).map(getID);
   }
 
-  //function getParentID(internalInstance: InternalInstance): number {
-  //  return getID(internalInstance._hostParent);
-  //}
-
   function findNearestAncestorInTree(
     internalInstance: InternalInstance
   ): number | null {
@@ -313,7 +309,6 @@ export function attach(
   ) {
     const internalInstance = idToInternalInstanceMap.get(id);
 
-    // TODO (legacy) Support component filtering
     const shouldIncludeInTree =
       parentID === 0 ||
       getElementType(internalInstance) !== ElementTypeOtherOrUnknown;

From c3be0859100f065c3b94b3cf43d764cc8a79e05a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 31 May 2019 17:40:49 +0100
Subject: [PATCH 651/814] Remove crawling for updates

It doesn't seem necessary to crawl because mounts only happen in the context of updates.

This fixes updates to not be treated as new mounts.
---
 src/backend/legacy/renderer.js | 163 +++++++++++++++++----------------
 src/backend/legacy/utils.js    |   4 +-
 2 files changed, 85 insertions(+), 82 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 2eb20d759f15..0d9491e5da10 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -149,15 +149,17 @@ export function attach(
       renderer.Mount,
       '_renderNewRootComponent',
       internalInstance => {
-        const id = getID(internalInstance);
+        // TODO: we might need to reset currentParentID before this runs.
 
+        const id = getID(internalInstance);
         rootIDs.add(id);
 
         if (__DEBUG__) {
           console.log('renderer.Mount._renderNewRootComponent()', id);
         }
 
-        recordPendingMount(internalInstance);
+        // TODO: maybe we need to record this mount.
+        // Needs testing.
 
         // If we're mounting a root, we've just finished a batch of work,
         // so it's safe to synchronously flush.
@@ -171,15 +173,17 @@ export function attach(
       renderer.Mount,
       'renderComponent',
       internalInstance => {
-        const id = getID(internalInstance);
+        // TODO: we might need to reset currentParentID before this runs.
 
+        const id = getID(internalInstance);
         rootIDs.add(id);
 
         if (__DEBUG__) {
           console.log('renderer.Mount.renderComponent()', id);
         }
 
-        recordPendingMount(internalInstance);
+        // TODO: maybe we need to record this mount.
+        // Needs testing.
 
         // If we're mounting a root, we've just finished a batch of work,
         // so it's safe to synchronously flush.
@@ -188,24 +192,50 @@ export function attach(
     );
   }
 
+  // This is shared mutable state that lets us keep track of where we are.
+  let currentParentID = 0;
+
   if (renderer.Reconciler) {
     oldReconcilerMethods = decorateMany(renderer.Reconciler, {
-      mountComponent(internalInstance, rootID, transaction, context) {
+      mountComponent(fn, args) {
+        const [internalInstance] = args;
+
         recordPendingMount(internalInstance);
+
+        let prevParentID = currentParentID;
+        currentParentID = getID(internalInstance);
+        const result = fn.apply(this, args);
+        currentParentID = prevParentID;
+
+        return result;
       },
-      performUpdateIfNecessary(
-        internalInstance,
-        nextChild,
-        transaction,
-        context
-      ) {
-        // TODO Check for change in order of children
+      performUpdateIfNecessary(fn, args) {
+        const [internalInstance] = args;
+
+        let prevParentID = currentParentID;
+        currentParentID = getID(internalInstance);
+        const result = fn.apply(this, args);
+        currentParentID = prevParentID;
+
+        return result;
       },
-      receiveComponent(internalInstance, nextChild, transaction, context) {
-        // TODO Check for change in order of children
+      receiveComponent(fn, args) {
+        const [internalInstance] = args;
+
+        let prevParentID = currentParentID;
+        currentParentID = getID(internalInstance);
+        const result = fn.apply(this, args);
+        currentParentID = prevParentID;
+
+        return result;
       },
-      unmountComponent(internalInstance) {
+      unmountComponent(fn, args) {
+        const [internalInstance] = args;
+
+        const result = fn.apply(this, args);
+
         recordPendingUnmount(internalInstance);
+        return result;
       },
     });
   }
@@ -229,7 +259,6 @@ export function attach(
     oldRenderComponent = null;
   }
 
-  const mountedIDs: Set<number> = new Set();
   const pendingMountIDs: Set<number> = new Set();
   const pendingUnmountIDs: Set<number> = new Set();
   const pendingOperations: Array<number> = [];
@@ -295,57 +324,29 @@ export function attach(
 
       rootIDs.add(id);
 
-      crawlAndRecordMounts(id, 0, true);
+      crawlAndRecordInitialMounts(id, 0);
 
       // It's safe to synchronously flush for the root we just crawled.
       flushPendingEvents(id);
     }
   }
 
-  function crawlAndRecordMounts(
-    id: number,
-    parentID: number,
-    isInitialMount: boolean
-  ) {
+  // TODO: this isn't covered by tests.
+  // Might be broken.
+  function crawlAndRecordInitialMounts(id: number, parentID: number) {
     const internalInstance = idToInternalInstanceMap.get(id);
 
-    const shouldIncludeInTree =
-      parentID === 0 ||
-      getElementType(internalInstance) !== ElementTypeOtherOrUnknown;
-
     // Not all nodes are mounted in the frontend DevTools tree,
     // but it's important to track parent info even for the unmounted ones.
     idToParentIDMap.set(id, parentID);
 
     if (__DEBUG__) {
-      console.group(
-        'crawlAndRecordMounts() id:',
-        id,
-        'shouldIncludeInTree?',
-        shouldIncludeInTree
-      );
-    }
-
-    if (shouldIncludeInTree) {
-      const didMount = isInitialMount || pendingMountIDs.has(id);
-      const didUnmount = pendingUnmountIDs.has(id);
-
-      // If this node was both mounted and unmounted in the same batch,
-      // just skip it and don't send any update.
-      if (didMount && didUnmount) {
-        pendingUnmountIDs.delete(id);
-        return;
-      } else if (didMount) {
-        recordMount(id, parentID);
-      }
+      console.group('crawlAndRecordInitialMounts() id:', id);
     }
 
+    recordMount(id, parentID);
     getChildIDs(internalInstance).forEach(childID =>
-      crawlAndRecordMounts(
-        childID,
-        shouldIncludeInTree ? id : parentID,
-        isInitialMount
-      )
+      crawlAndRecordInitialMounts(childID, id)
     );
 
     if (__DEBUG__) {
@@ -354,38 +355,42 @@ export function attach(
   }
 
   function flushPendingEvents(rootID: number): void {
-    // Crawl tree and record mounts/updates.
-    crawlAndRecordMounts(rootID, 0, false);
-
     // Record pending deletions.
     const unmountIDs = [];
     pendingUnmountIDs.forEach(id => {
-      if (mountedIDs.has(id)) {
-        const internalInstance = idToInternalInstanceMap.get(id);
-        const isRoot = rootIDs.has(id);
-
-        if (__DEBUG__) {
-          console.log(
-            '%crecordUnmount()',
-            'color: red; font-weight: bold;',
-            id,
-            getData(internalInstance).displayName
-          );
-        }
-
-        if (isRoot) {
-          pendingUnmountedRootID = id;
+      const internalInstance = idToInternalInstanceMap.get(id);
+      const isRoot = rootIDs.has(id);
+
+      if (__DEBUG__) {
+        console.log(
+          '%crecordUnmount()',
+          'color: red; font-weight: bold;',
+          id,
+          getData(internalInstance).displayName
+        );
+      }
 
-          rootIDs.delete(id);
-        } else {
-          unmountIDs.push(id);
-        }
+      // TODO: handle the case where it was never mounted.
+      if (isRoot) {
+        pendingUnmountedRootID = id;
+        rootIDs.delete(id);
+      } else {
+        unmountIDs.push(id);
+      }
 
-        idToInternalInstanceMap.delete(id);
-        internalInstanceToIDMap.delete(internalInstance);
+      idToInternalInstanceMap.delete(id);
+      internalInstanceToIDMap.delete(internalInstance);
+    });
 
-        mountedIDs.delete(id);
+    pendingMountIDs.forEach(id => {
+      if (pendingUnmountIDs.has(id)) {
+        return;
       }
+      const parentID = idToParentIDMap.get(id);
+      if (parentID === undefined) {
+        return;
+      }
+      recordMount(id, parentID);
     });
 
     const numUnmountIDs =
@@ -632,7 +637,9 @@ export function attach(
   }
 
   function recordPendingMount(internalInstance: InternalInstance) {
-    pendingMountIDs.add(getID(internalInstance));
+    const id = getID(internalInstance);
+    pendingMountIDs.add(id);
+    idToParentIDMap.set(id, currentParentID);
 
     if (__DEBUG__) {
       console.log(
@@ -680,8 +687,6 @@ export function attach(
       );
     }
 
-    mountedIDs.add(id);
-
     if (isRoot) {
       // TODO Is this right? For all versions?
       const hasOwnerMetadata =
diff --git a/src/backend/legacy/utils.js b/src/backend/legacy/utils.js
index 49a67888a246..bee9bbae063e 100644
--- a/src/backend/legacy/utils.js
+++ b/src/backend/legacy/utils.js
@@ -19,9 +19,7 @@ export function decorateResult(
 export function decorate(object: Object, attr: string, fn: Function): Function {
   const old = object[attr];
   object[attr] = function(instance: InternalInstance) {
-    const res = old.apply(this, arguments);
-    fn.apply(this, arguments);
-    return res;
+    return fn.call(this, old, arguments);
   };
   return old;
 }

From 2794b92164058f38683cad49f04ff801e04ff34b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 31 May 2019 18:00:56 +0100
Subject: [PATCH 652/814] Add some support for reordering

---
 .../storeLegacy-v15-test.js.snap              | 79 +++++++++++++++++
 src/__tests__/legacy/storeLegacy-v15-test.js  | 13 ++-
 src/backend/legacy/renderer.js                | 85 ++++++++++++++++++-
 3 files changed, 166 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
index 37747be9c63c..05e853c2ee1c 100644
--- a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -15,6 +15,32 @@ exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes fro
               <div>
 `;
 
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="a">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="a">
+          <div>
+      ▾ <Component key="b">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="b">
+          <div>
+`;
+
 exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
@@ -185,6 +211,59 @@ exports[`Store (legacy) collapseNodesByDefault:false should support mount and up
 
 exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+`;
+
 exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▸ <Grandparent>
diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/src/__tests__/legacy/storeLegacy-v15-test.js
index bc891b3b7501..96c8251d77d5 100644
--- a/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -176,10 +176,9 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('6: expand Grandparent');
     });
 
-    // TODO Re-enable this test once the renderer supports it.
-    xit('should support adding and removing children', () => {
+    it('should support adding and removing children', () => {
       const Root = ({ children }) => <div>{children}</div>;
-      const Component = () => null;
+      const Component = () => <div />;
 
       const container = document.createElement('div');
 
@@ -215,10 +214,9 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('3: remove child');
     });
 
-    // TODO Re-enable this test once the renderer supports it.
-    xit('should support reordering of children', () => {
+    it('should support reordering of children', () => {
       const Root = ({ children }) => <div>{children}</div>;
-      const Component = () => null;
+      const Component = () => <div />;
 
       const Foo = () => <div>{[<Component key="0" />]}</div>;
       const Bar = () => (
@@ -447,10 +445,9 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('6: expand middle node');
     });
 
-    // TODO Re-enable this test once the renderer supports it.
     xit('should support reordering of children', () => {
       const Root = ({ children }) => <div>{children}</div>;
-      const Component = () => null;
+      const Component = () => <div />;
 
       const Foo = () => <div>{[<Component key="0" />]}</div>;
       const Bar = () => (
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 0d9491e5da10..2e6d65190c76 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -12,6 +12,7 @@ import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
 } from '../../constants';
 import getChildren from './getChildren';
 import getData from './getData';
@@ -49,6 +50,10 @@ export function attach(
   const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
   const idToParentIDMap: Map<number, number> = new Map();
   const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();
+  const internalInstanceToLastKnownChildrenMap: WeakMap<
+    InternalInstance,
+    Array<number>
+  > = new WeakMap();
   const rootIDs: Set<number> = new Set();
 
   function getID(internalInstance: InternalInstance): number {
@@ -217,6 +222,7 @@ export function attach(
         const result = fn.apply(this, args);
         currentParentID = prevParentID;
 
+        recordPendingReorder(internalInstance);
         return result;
       },
       receiveComponent(fn, args) {
@@ -227,6 +233,7 @@ export function attach(
         const result = fn.apply(this, args);
         currentParentID = prevParentID;
 
+        recordPendingReorder(internalInstance);
         return result;
       },
       unmountComponent(fn, args) {
@@ -261,6 +268,7 @@ export function attach(
 
   const pendingMountIDs: Set<number> = new Set();
   const pendingUnmountIDs: Set<number> = new Set();
+  const pendingReorderIDs: Set<number> = new Set();
   const pendingOperations: Array<number> = [];
   const pendingStringTable: Map<string, number> = new Map();
   let pendingStringTableLength: number = 0;
@@ -303,7 +311,11 @@ export function attach(
         // It should be possible to improve this though, by maintaining a map of id-to-parent,
         // and crawling upward to the first non-filtered node.
         // TODO Revisit this and think about it more...
-        if (pendingMountIDs.size > 0 || pendingUnmountIDs.size > 0) {
+        if (
+          pendingMountIDs.size > 0 ||
+          pendingUnmountIDs.size > 0 ||
+          pendingReorderIDs.size > 0
+        ) {
           rootIDs.forEach(flushPendingEvents);
         }
       }, 0);
@@ -396,6 +408,7 @@ export function attach(
     const numUnmountIDs =
       unmountIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
 
+    const reorderOperations = computePendingReorderOperations();
     const operations = new Uint32Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
@@ -406,8 +419,12 @@ export function attach(
         // All unmounts are batched in a single message.
         // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
         (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
-        // Mount/update/reorder operations
-        pendingOperations.length
+        // Mount operations
+        pendingOperations.length +
+        // Reorder operation come last because
+        // bridge expects them to not change children length.
+        // So both mounts and unmounts need to have happened by now.
+        reorderOperations.length
     );
 
     // Identify which renderer this update is coming from.
@@ -444,6 +461,9 @@ export function attach(
 
     // Fill in the rest of the operations.
     operations.set(pendingOperations, i);
+    i += pendingOperations.length;
+
+    operations.set(reorderOperations, i);
 
     if (__DEBUG__) {
       printOperationsArray(operations);
@@ -454,12 +474,60 @@ export function attach(
 
     pendingOperations.length = 0;
     pendingMountIDs.clear();
+    pendingReorderIDs.clear();
     pendingUnmountIDs.clear();
     pendingUnmountedRootID = null;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
   }
 
+  function computePendingReorderOperations(): Array<number> {
+    const ops = [];
+    pendingReorderIDs.forEach(id => {
+      const internalInstance = idToInternalInstanceMap.get(id);
+      if (internalInstance === undefined) {
+        return;
+      }
+      const prevChildIDs = internalInstanceToLastKnownChildrenMap.get(
+        internalInstance
+      );
+      const nextChildIDs = getChildIDs(internalInstance);
+      internalInstanceToLastKnownChildrenMap.set(
+        internalInstance,
+        nextChildIDs
+      );
+
+      let shouldResetChildren = false;
+      if (prevChildIDs === undefined) {
+        // We haven't computed children before.
+        // So we'll have to do it now.
+        // Next time they'll be cached for comparison
+        // TODO: this might not make sense. Revisit.
+        shouldResetChildren = true;
+      } else if (nextChildIDs.length > 1) {
+        if (prevChildIDs.length !== nextChildIDs.length) {
+          shouldResetChildren = true;
+        } else {
+          for (let i = 0; i < prevChildIDs.length; i++) {
+            if (prevChildIDs[i] !== nextChildIDs[i]) {
+              shouldResetChildren = true;
+              break;
+            }
+          }
+        }
+      }
+      if (shouldResetChildren) {
+        ops.push(TREE_OPERATION_REORDER_CHILDREN);
+        ops.push(getID(internalInstance));
+        ops.push(nextChildIDs.length);
+        for (let i = 0; i < nextChildIDs.length; i++) {
+          ops.push(nextChildIDs[i]);
+        }
+      }
+    });
+    return ops;
+  }
+
   function getStringID(str: string | null): number {
     if (str === null) {
       return 0;
@@ -652,6 +720,17 @@ export function attach(
     queueFlushPendingEvents();
   }
 
+  function recordPendingReorder(internalInstance: InternalInstance) {
+    const id = getID(internalInstance);
+    pendingReorderIDs.add(id);
+
+    if (__DEBUG__) {
+      console.log('%crecordPendingReorder()', 'color: green', id);
+    }
+
+    queueFlushPendingEvents();
+  }
+
   function recordPendingUnmount(internalInstance: InternalInstance) {
     const id = getID(internalInstance);
 

From 5a269e7ced1011885e3622c2bde8d30fcd8ad3ab Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 31 May 2019 11:24:34 -0700
Subject: [PATCH 653/814] Initial POC for compressing horizontal offset for
 wide/deep trees

---
 src/devtools/views/Components/Element.css     |  25 ++--
 src/devtools/views/Components/Element.js      | 113 +++---------------
 .../{Guidelines.css => Guideline.css}         |   0
 .../{Guidelines.js => Guideline.js}           |  43 ++-----
 .../views/Components/SelectedElement.css      |   6 +-
 src/devtools/views/Components/Tree.css        |   8 ++
 src/devtools/views/Components/Tree.js         |  54 ++++++---
 src/devtools/views/Settings/Settings.js       |  26 +---
 .../views/Settings/SettingsContext.js         |  11 --
 src/devtools/views/utils.js                   |  13 ++
 10 files changed, 102 insertions(+), 197 deletions(-)
 rename src/devtools/views/Components/{Guidelines.css => Guideline.css} (100%)
 rename src/devtools/views/Components/{Guidelines.js => Guideline.js} (76%)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 5833d462c8b0..dfa0b27d9d9c 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -9,6 +9,7 @@
   align-items: center;
   cursor: default;
   user-select: none;
+  color: var(--color-component-name);
 }
 .HoveredElement {
   background-color: var(--color-background-hover);
@@ -17,6 +18,10 @@
   background-color: var(--color-background-inactive);
 }
 
+.Bracket {
+  color: var(--color-jsx-arrow-brackets);
+}
+
 .ScrollAnchor {
   height: 100%;
   width: 0;
@@ -37,24 +42,6 @@
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 
-.DollarR {
-  color: var(--color-jsx-arrow-brackets);
-}
-
-.Component {
-  color: var(--color-component-name);
-}
-.Component:before {
-  white-space: nowrap;
-  content: '<';
-  color: var(--color-jsx-arrow-brackets);
-}
-.Component:after {
-  white-space: nowrap;
-  content: '>';
-  color: var(--color-jsx-arrow-brackets);
-}
-
 .AttributeName {
   color: var(--color-attribute-name);
 }
@@ -74,10 +61,12 @@
   display: inline-flex;
   width: 1rem;
   height: 1rem;
+  flex: 0 0 1rem;
   color: var(--color-expand-collapse-toggle);
 }
 
 .Badge {
+  color: var(--color-text);
   background-color: var(--color-component-badge-background);
   padding: 0.125rem 0.25rem;
   line-height: normal;
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 681b65a18425..d7a03e9667e6 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -4,20 +4,13 @@ import React, {
   Fragment,
   useCallback,
   useContext,
-  useLayoutEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
-import {
-  ElementTypeClass,
-  ElementTypeFunction,
-  ElementTypeMemo,
-  ElementTypeForwardRef,
-} from 'src/types';
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
-import { createRegExp } from '../utils';
+import { createRegExp, truncateText } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 
@@ -46,13 +39,7 @@ export default function ElementView({ data, index, style }: Props) {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const {
-    lastScrolledIDRef,
-    isNavigatingWithKeyboard,
-    onElementMouseEnter,
-    showIndentLines,
-    treeFocused,
-  } = data;
+  const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
@@ -62,49 +49,6 @@ export default function ElementView({ data, index, style }: Props) {
     }
   }, [dispatch, id]);
 
-  const scrollAnchorStartRef = useRef<HTMLSpanElement | null>(null);
-  const scrollAnchorEndRef = useRef<HTMLSpanElement | null>(null);
-
-  // The tree above has its own autoscrolling, but it only works for rows.
-  // However, even when the row gets into the viewport, the component name
-  // might be too far left or right on the screen. Adjust it in this case.
-  useLayoutEffect(() => {
-    if (isSelected) {
-      // Don't select the same item twice.
-      // A row may appear and disappear just by scrolling:
-      // https://github.com/bvaughn/react-devtools-experimental/issues/67
-      // It doesn't necessarily indicate a user action.
-      // TODO: we might want to revamp the autoscroll logic
-      // to only happen explicitly for user-initiated events.
-      if (lastScrolledIDRef.current === id) {
-        return;
-      }
-      lastScrolledIDRef.current = id;
-
-      // We want to bring the whole <Component> name into view,
-      // including the expansion toggle and the "=== $r" hint.
-      // However, even calling scrollIntoView() on a wrapper parent node (e.g. <span>)
-      // wouldn't guarantee that it will be *fully* brought into view.
-      // As a workaround, we'll have two anchor spans, and scroll each into view.
-      if (scrollAnchorEndRef.current !== null) {
-        scrollAnchorEndRef.current.scrollIntoView({
-          behavior: 'auto',
-          block: 'nearest',
-          inline: 'nearest',
-        });
-      }
-      if (scrollAnchorStartRef.current !== null) {
-        // We scroll the start anchor last because it's
-        // more important for it to be in the view.
-        scrollAnchorStartRef.current.scrollIntoView({
-          behavior: 'auto',
-          block: 'nearest',
-          inline: 'nearest',
-        });
-      }
-    }
-  }, [id, isSelected, lastScrolledIDRef]);
-
   const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
@@ -138,8 +82,6 @@ export default function ElementView({ data, index, style }: Props) {
 
   const { depth, displayName, key, type } = ((element: any): Element);
 
-  const showDollarR =
-    isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
   const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
 
   let className = styles.Element;
@@ -162,45 +104,26 @@ export default function ElementView({ data, index, style }: Props) {
         ...style, // "style" comes from react-window
 
         // Left padding presents the appearance of a nested tree structure.
-        paddingLeft: '0.25rem',
-
-        // These style overrides enable the background color to fill the full visible width,
-        // when combined with the CSS tweaks in Tree.
-        // A lot of options were considered; this seemed the one that requires the least code.
-        // See https://github.com/bvaughn/react-devtools-experimental/issues/9
-        width: undefined,
-        minWidth: '100%',
-        position: 'relative',
-        marginBottom: `-${style.height}px`,
+        // We must use padding rather than margin/left because of the selected background color.
+        paddingLeft: `calc(${depth} * var(--indentation-size))`,
       }}
     >
-      <div
-        style={{
-          width: `${depth * 0.75}rem`,
-          height: '100%',
-          backgroundSize: '0.75rem 1rem',
-          backgroundColor: 'transparent',
-          backgroundImage: showIndentLines
-            ? 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)'
-            : '',
-          backgroundRepeat: 'repeat',
-        }}
-      />
-      <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
-      <span className={styles.Component}>
-        <DisplayName displayName={displayName} id={((id: any): number)} />
-        {key && (
-          <Fragment>
-            &nbsp;<span className={styles.AttributeName}>key</span>=
-            <span className={styles.AttributeValue}>"{key}"</span>
-          </Fragment>
-        )}
-      </span>
-      {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
-      <span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
+
+      <span className={styles.Bracket}>&lt;</span>
+      <DisplayName displayName={displayName} id={((id: any): number)} />
+      {key && (
+        <Fragment>
+          &nbsp;<span className={styles.AttributeName}>key</span>=
+          <span className={styles.AttributeValue} title={key}>
+            "{truncateText(`${key}`, 10)}"
+          </span>
+        </Fragment>
+      )}
+      <span className={styles.Bracket}>&gt;</span>
+
       {showBadge && (
         <span className={styles.Badge}>
           {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
diff --git a/src/devtools/views/Components/Guidelines.css b/src/devtools/views/Components/Guideline.css
similarity index 100%
rename from src/devtools/views/Components/Guidelines.css
rename to src/devtools/views/Components/Guideline.css
diff --git a/src/devtools/views/Components/Guidelines.js b/src/devtools/views/Components/Guideline.js
similarity index 76%
rename from src/devtools/views/Components/Guidelines.js
rename to src/devtools/views/Components/Guideline.js
index 30332ea9bf61..3ba9760da098 100644
--- a/src/devtools/views/Components/Guidelines.js
+++ b/src/devtools/views/Components/Guideline.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { TreeStateContext } from './TreeContext';
 import TreeFocusedContext from './TreeFocusedContext';
 import { SettingsContext } from '../Settings/SettingsContext';
@@ -8,23 +8,7 @@ import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
 
-import styles from './Guidelines.css';
-
-export default function Guidelines(_: {||}) {
-  const { selectedElementID } = useContext(TreeStateContext);
-  const treeFocused = useContext(TreeFocusedContext);
-
-  return (
-    <Fragment>
-      <Guideline
-        className={
-          treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
-        }
-        elementID={selectedElementID}
-      />
-    </Fragment>
-  );
-}
+import styles from './Guideline.css';
 
 type Data = {|
   depth: number,
@@ -32,23 +16,20 @@ type Data = {|
   stopIndex: number,
 |};
 
-type Props = {|
-  className: string,
-  elementID: number | null,
-|};
-
-function Guideline({ className, elementID }: Props) {
-  const store = useContext(StoreContext);
+export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
+  const store = useContext(StoreContext);
+  const { selectedElementID } = useContext(TreeStateContext);
+  const treeFocused = useContext(TreeFocusedContext);
 
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => {
-        if (elementID === null) {
+        if (selectedElementID === null) {
           return null;
         }
 
-        const element = store.getElementByID(elementID);
+        const element = store.getElementByID(selectedElementID);
         if (
           element === null ||
           element.isCollapsed ||
@@ -92,7 +73,7 @@ function Guideline({ className, elementID }: Props) {
         };
       },
     }),
-    [elementID, store]
+    [selectedElementID, store]
   );
   const data = useSubscription<Data | null, Store>(subscription);
 
@@ -104,11 +85,13 @@ function Guideline({ className, elementID }: Props) {
 
   return (
     <div
-      className={className}
+      className={
+        treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
+      }
       style={{
         position: 'absolute',
         top: `${startIndex * lineHeight}px`,
-        left: `${depth * 0.75 + 0.75}rem`,
+        left: `calc(${depth} * var(--indentation-size) + 0.5rem)`,
         height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,
       }}
     />
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 9ad029099d6b..d9ae086b4b4a 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -33,11 +33,13 @@
 
 .Component,
 .Owner {
-  overflow: hidden;
-  text-overflow: ellipsis;
   color: var(--color-component-name);
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 .Component:before,
 .Owner:before {
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 3efc1bf8632b..e3ddfeb37dfc 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -7,6 +7,14 @@
   border-top: 1px solid var(--color-border);
 }
 
+.List {
+  overflow-x: hidden !important;
+}
+
+.InnerElementType {
+  overflow-x: hidden;
+}
+
 .SearchInput {
   flex: 0 0 42px;
   display: flex;
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 74972f7cd4a3..3e5b75f99ef6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -22,7 +22,7 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
-import Guidelines from './Guidelines';
+import Guideline from './Guideline';
 import TreeFocusedContext from './TreeFocusedContext';
 
 import styles from './Tree.css';
@@ -32,7 +32,6 @@ export type ItemData = {|
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
-  showIndentLines: boolean,
   treeFocused: boolean,
 |};
 
@@ -60,7 +59,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight, showIndentLines } = useContext(SettingsContext);
+  const { lineHeight } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -264,7 +263,6 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
-      showIndentLines,
       treeFocused,
     }),
     [
@@ -272,7 +270,6 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
-      showIndentLines,
       treeFocused,
     ]
   );
@@ -310,7 +307,6 @@ export default function Tree(props: Props) {
                   itemCount={numElements}
                   itemData={itemData}
                   itemSize={lineHeight}
-                  overscanCount={3}
                   ref={listRef}
                   width={width}
                 >
@@ -326,6 +322,31 @@ export default function Tree(props: Props) {
   );
 }
 
+function updateIndentationSizeVar(innerDiv: HTMLDivElement): void {
+  const list = ((innerDiv.parentElement: any): HTMLDivElement);
+
+  let indentationSize =
+    parseFloat(getComputedStyle(list).getPropertyValue('--indentation-size')) ||
+    12;
+
+  let maxChildWidth = 0;
+  for (let child of innerDiv.children) {
+    const { lastElementChild } = child;
+    // Skip over e.g. the guideline element
+    if (lastElementChild != null) {
+      const bounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
+      maxChildWidth = Math.max(maxChildWidth, bounds.x + bounds.width);
+    }
+  }
+
+  indentationSize = Math.min(
+    12,
+    (list.clientWidth / maxChildWidth) * indentationSize
+  );
+
+  list.style.setProperty('--indentation-size', `${indentationSize}px`);
+}
+
 function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
 
@@ -335,13 +356,12 @@ function InnerElementType({ children, style, ...rest }) {
   // and ensure that once we've grown to a new max size, we don't shrink below it.
   // This improves the user experience when scrolling between wide and narrow rows.
   const divRef = useRef<HTMLDivElement | null>(null);
-  const [minWidth, setMinWidth] = useState(null);
+
   // TODO This is a valid warning, but we're ignoring it for the time being.
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
-      const measuredWidth = divRef.current.offsetWidth;
-      setMinWidth(w => Math.max(w || 0, measuredWidth));
+      updateIndentationSizeVar(divRef.current);
     }
   });
 
@@ -349,7 +369,11 @@ function InnerElementType({ children, style, ...rest }) {
   // This will cause a render with 100% min-width, a measurement
   // in an effect, and a second render where we know the width.
   useEffect(() => {
-    const invalidateMinWidth = () => setMinWidth(null);
+    const invalidateMinWidth = () => {
+      if (divRef.current !== null) {
+        updateIndentationSizeVar(divRef.current);
+      }
+    };
     window.addEventListener('resize', invalidateMinWidth);
     return () => window.removeEventListener('resize', invalidateMinWidth);
   }, []);
@@ -359,7 +383,6 @@ function InnerElementType({ children, style, ...rest }) {
   const [prevOwnerID, setPrevOwnerID] = useState(ownerID);
   if (ownerID !== prevOwnerID) {
     setPrevOwnerID(ownerID);
-    setMinWidth(null);
   }
 
   // This style override enables the background color to fill the full visible width,
@@ -369,16 +392,11 @@ function InnerElementType({ children, style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      style={{
-        ...style,
-        display: 'inline-block',
-        minWidth: minWidth || '100%',
-        width: undefined,
-      }}
+      style={style}
       ref={divRef}
       {...rest}
     >
-      <Guidelines />
+      <Guideline />
       {children}
     </div>
   );
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 30b83803cce9..645ee254223c 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -11,14 +11,9 @@ import styles from './Settings.css';
 
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
-  const {
-    displayDensity,
-    setDisplayDensity,
-    showIndentLines,
-    setShowIndentLines,
-    theme,
-    setTheme,
-  } = useContext(SettingsContext);
+  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
+    SettingsContext
+  );
 
   const captureScreenshotsSubscription = useMemo(
     () => ({
@@ -62,13 +57,6 @@ function Settings(_: {||}) {
     [setTheme]
   );
 
-  const updateShowIndentLines = useCallback(
-    ({ currentTarget }) => {
-      setShowIndentLines(currentTarget.checked);
-    },
-    [setShowIndentLines]
-  );
-
   const updateCaptureScreenshotsWhileProfiling = useCallback(
     ({ currentTarget }) => {
       store.captureScreenshots = currentTarget.checked;
@@ -155,14 +143,6 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
-        <label className={styles.CheckboxOption}>
-          <input
-            type="checkbox"
-            checked={showIndentLines}
-            onChange={updateShowIndentLines}
-          />{' '}
-          Show indent lines
-        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index ac371cbec722..4f7913155432 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -16,9 +16,6 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
-  showIndentLines: boolean,
-  setShowIndentLines: (value: boolean) => void,
-
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -47,10 +44,6 @@ function SettingsContextController({
     'React::DevTools::displayDensity',
     'compact'
   );
-  const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
-    'React::DevTools::showIndentLines',
-    true
-  );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
     'auto'
@@ -133,8 +126,6 @@ function SettingsContextController({
       setDisplayDensity,
       theme,
       setTheme,
-      showIndentLines,
-      setShowIndentLines,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -144,9 +135,7 @@ function SettingsContextController({
       comfortableLineHeight,
       compactLineHeight,
       displayDensity,
-      showIndentLines,
       setDisplayDensity,
-      setShowIndentLines,
       setTheme,
       theme,
     ]
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 8cebefa31936..c04f8bddd1c5 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -170,3 +170,16 @@ export function downloadFile(filename: string, text: string): void {
 
   ((document.body: any): HTMLBodyElement).removeChild(element);
 }
+
+export function truncateText(text: string, maxLength: number): string {
+  const { length } = text;
+  if (length > maxLength) {
+    return (
+      text.substr(0, Math.floor(maxLength / 2)) +
+      '…' +
+      text.substr(length - Math.ceil(maxLength / 2) + 1)
+    );
+  } else {
+    return text;
+  }
+}

From 33432b037f2e539b3e7c479e594960e6fd60eaa3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 31 May 2019 13:34:55 -0700
Subject: [PATCH 654/814] Re-added indent lines

---
 src/devtools/views/Components/Element.js      | 31 ++++++++++++++-----
 src/devtools/views/Components/Tree.js         |  5 ++-
 src/devtools/views/Settings/Settings.js       | 26 ++++++++++++++--
 .../views/Settings/SettingsContext.js         | 11 +++++++
 4 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index d7a03e9667e6..845522b1c12d 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -39,7 +39,12 @@ export default function ElementView({ data, index, style }: Props) {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
+  const {
+    isNavigatingWithKeyboard,
+    onElementMouseEnter,
+    showIndentLines,
+    treeFocused,
+  } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
@@ -100,14 +105,24 @@ export default function ElementView({ data, index, style }: Props) {
       onMouseLeave={handleMouseLeave}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
-      style={{
-        ...style, // "style" comes from react-window
-
-        // Left padding presents the appearance of a nested tree structure.
-        // We must use padding rather than margin/left because of the selected background color.
-        paddingLeft: `calc(${depth} * var(--indentation-size))`,
-      }}
+      style={style}
     >
+      {depth > 0 && (
+        <div
+          style={{
+            flex: `0 0 calc(${depth} * var(--indentation-size) - 0.5rem)`,
+            marginLeft: '0.5rem', // Offset to align with collapse toggle
+            height: '100%',
+            backgroundSize: 'var(--indentation-size) 1rem',
+            backgroundColor: 'transparent',
+            backgroundRepeat: 'repeat',
+            backgroundImage: showIndentLines
+              ? 'linear-gradient(to right, var(--color-guideline) 0, transparent 1px'
+              : '',
+          }}
+        />
+      )}
+
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 3e5b75f99ef6..57644a7adbbc 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -32,6 +32,7 @@ export type ItemData = {|
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
+  showIndentLines: boolean,
   treeFocused: boolean,
 |};
 
@@ -59,7 +60,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight } = useContext(SettingsContext);
+  const { lineHeight, showIndentLines } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -263,6 +264,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     }),
     [
@@ -270,6 +272,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     ]
   );
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 645ee254223c..30b83803cce9 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -11,9 +11,14 @@ import styles from './Settings.css';
 
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
-  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
-    SettingsContext
-  );
+  const {
+    displayDensity,
+    setDisplayDensity,
+    showIndentLines,
+    setShowIndentLines,
+    theme,
+    setTheme,
+  } = useContext(SettingsContext);
 
   const captureScreenshotsSubscription = useMemo(
     () => ({
@@ -57,6 +62,13 @@ function Settings(_: {||}) {
     [setTheme]
   );
 
+  const updateShowIndentLines = useCallback(
+    ({ currentTarget }) => {
+      setShowIndentLines(currentTarget.checked);
+    },
+    [setShowIndentLines]
+  );
+
   const updateCaptureScreenshotsWhileProfiling = useCallback(
     ({ currentTarget }) => {
       store.captureScreenshots = currentTarget.checked;
@@ -143,6 +155,14 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={showIndentLines}
+            onChange={updateShowIndentLines}
+          />{' '}
+          Show indent lines
+        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4f7913155432..ac371cbec722 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -16,6 +16,9 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
+  showIndentLines: boolean,
+  setShowIndentLines: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -44,6 +47,10 @@ function SettingsContextController({
     'React::DevTools::displayDensity',
     'compact'
   );
+  const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
+    'React::DevTools::showIndentLines',
+    true
+  );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
     'auto'
@@ -126,6 +133,8 @@ function SettingsContextController({
       setDisplayDensity,
       theme,
       setTheme,
+      showIndentLines,
+      setShowIndentLines,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -135,7 +144,9 @@ function SettingsContextController({
       comfortableLineHeight,
       compactLineHeight,
       displayDensity,
+      showIndentLines,
       setDisplayDensity,
+      setShowIndentLines,
       setTheme,
       theme,
     ]

From 19d95a1368076a5065449b6207d9b2351c1e9c44 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 31 May 2019 14:41:20 -0700
Subject: [PATCH 655/814] Revert "Re-added indent lines"

This reverts commit 33432b037f2e539b3e7c479e594960e6fd60eaa3.
---
 src/devtools/views/Components/Element.js      | 31 +++++--------------
 src/devtools/views/Components/Tree.js         |  5 +--
 src/devtools/views/Settings/Settings.js       | 26 ++--------------
 .../views/Settings/SettingsContext.js         | 11 -------
 4 files changed, 12 insertions(+), 61 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 845522b1c12d..d7a03e9667e6 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -39,12 +39,7 @@ export default function ElementView({ data, index, style }: Props) {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const {
-    isNavigatingWithKeyboard,
-    onElementMouseEnter,
-    showIndentLines,
-    treeFocused,
-  } = data;
+  const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
@@ -105,24 +100,14 @@ export default function ElementView({ data, index, style }: Props) {
       onMouseLeave={handleMouseLeave}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
-      style={style}
-    >
-      {depth > 0 && (
-        <div
-          style={{
-            flex: `0 0 calc(${depth} * var(--indentation-size) - 0.5rem)`,
-            marginLeft: '0.5rem', // Offset to align with collapse toggle
-            height: '100%',
-            backgroundSize: 'var(--indentation-size) 1rem',
-            backgroundColor: 'transparent',
-            backgroundRepeat: 'repeat',
-            backgroundImage: showIndentLines
-              ? 'linear-gradient(to right, var(--color-guideline) 0, transparent 1px'
-              : '',
-          }}
-        />
-      )}
+      style={{
+        ...style, // "style" comes from react-window
 
+        // Left padding presents the appearance of a nested tree structure.
+        // We must use padding rather than margin/left because of the selected background color.
+        paddingLeft: `calc(${depth} * var(--indentation-size))`,
+      }}
+    >
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 57644a7adbbc..3e5b75f99ef6 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -32,7 +32,6 @@ export type ItemData = {|
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
-  showIndentLines: boolean,
   treeFocused: boolean,
 |};
 
@@ -60,7 +59,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight, showIndentLines } = useContext(SettingsContext);
+  const { lineHeight } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -264,7 +263,6 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
-      showIndentLines,
       treeFocused,
     }),
     [
@@ -272,7 +270,6 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
-      showIndentLines,
       treeFocused,
     ]
   );
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 30b83803cce9..645ee254223c 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -11,14 +11,9 @@ import styles from './Settings.css';
 
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
-  const {
-    displayDensity,
-    setDisplayDensity,
-    showIndentLines,
-    setShowIndentLines,
-    theme,
-    setTheme,
-  } = useContext(SettingsContext);
+  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
+    SettingsContext
+  );
 
   const captureScreenshotsSubscription = useMemo(
     () => ({
@@ -62,13 +57,6 @@ function Settings(_: {||}) {
     [setTheme]
   );
 
-  const updateShowIndentLines = useCallback(
-    ({ currentTarget }) => {
-      setShowIndentLines(currentTarget.checked);
-    },
-    [setShowIndentLines]
-  );
-
   const updateCaptureScreenshotsWhileProfiling = useCallback(
     ({ currentTarget }) => {
       store.captureScreenshots = currentTarget.checked;
@@ -155,14 +143,6 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
-        <label className={styles.CheckboxOption}>
-          <input
-            type="checkbox"
-            checked={showIndentLines}
-            onChange={updateShowIndentLines}
-          />{' '}
-          Show indent lines
-        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index ac371cbec722..4f7913155432 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -16,9 +16,6 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
-  showIndentLines: boolean,
-  setShowIndentLines: (value: boolean) => void,
-
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -47,10 +44,6 @@ function SettingsContextController({
     'React::DevTools::displayDensity',
     'compact'
   );
-  const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
-    'React::DevTools::showIndentLines',
-    true
-  );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
     'auto'
@@ -133,8 +126,6 @@ function SettingsContextController({
       setDisplayDensity,
       theme,
       setTheme,
-      showIndentLines,
-      setShowIndentLines,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -144,9 +135,7 @@ function SettingsContextController({
       comfortableLineHeight,
       compactLineHeight,
       displayDensity,
-      showIndentLines,
       setDisplayDensity,
-      setShowIndentLines,
       setTheme,
       theme,
     ]

From aa87b125e778709b880c43471466339b8b2feeeb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 08:24:24 -0700
Subject: [PATCH 656/814] Lots of tweaks Remove selected guideline in favor of
 background color for selected subtree. Add badges in grid format to selected
 elements prop panel. Show badges beside owners list.

---
 .../dev/app/DeeplyNestedComponents/index.js   |  3 +-
 src/backend/agent.js                          |  2 +-
 src/backend/renderer.js                       | 10 ++-
 src/backend/types.js                          | 48 +++++++++++-
 src/devtools/store.js                         | 10 ++-
 src/devtools/views/Components/Badge.css       | 11 +++
 src/devtools/views/Components/Badge.js        | 16 ++++
 src/devtools/views/Components/Element.css     | 11 ---
 src/devtools/views/Components/Element.js      | 34 +++++---
 src/devtools/views/Components/Guideline.css   | 18 ++---
 src/devtools/views/Components/Guideline.js    | 16 ++--
 src/devtools/views/Components/HocBadges.css   |  9 +++
 src/devtools/views/Components/HocBadges.js    | 37 +++++++++
 .../Components/InspectedElementContext.js     | 24 ++++++
 .../views/Components/OwnersListContext.js     | 19 ++++-
 .../views/Components/SelectedElement.css      |  7 +-
 .../views/Components/SelectedElement.js       | 46 +++++++++--
 src/devtools/views/Components/Tree.js         | 77 +++++++++++++++----
 src/devtools/views/Components/types.js        |  6 ++
 src/devtools/views/root.css                   |  4 +-
 src/utils.js                                  | 38 ++++++++-
 21 files changed, 364 insertions(+), 82 deletions(-)
 create mode 100644 src/devtools/views/Components/Badge.css
 create mode 100644 src/devtools/views/Components/Badge.js
 create mode 100644 src/devtools/views/Components/HocBadges.css
 create mode 100644 src/devtools/views/Components/HocBadges.js

diff --git a/shells/dev/app/DeeplyNestedComponents/index.js b/shells/dev/app/DeeplyNestedComponents/index.js
index 61deec375489..ad4468d2eb1d 100644
--- a/shells/dev/app/DeeplyNestedComponents/index.js
+++ b/shells/dev/app/DeeplyNestedComponents/index.js
@@ -6,7 +6,8 @@ function wrapWithHoc(Component, index) {
   function HOC() {
     return <Component />;
   }
-  HOC.displayName = `HOC-${index}`;
+  HOC.displayName = `withHoc${index}(${Component.displayName ||
+    Component.name})`;
   return HOC;
 }
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 4b8873d47579..5a7aa5740fbc 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -11,12 +11,12 @@ import {
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
 import type {
+  OwnersList,
   PathFrame,
   PathMatch,
   RendererID,
   RendererInterface,
 } from './types';
-import type { OwnersList } from 'src/devtools/views/Components/types';
 import type { Bridge, ComponentFilter } from '../types';
 
 const debug = (methodName, ...args) => {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 70e5ecd7ce26..150fc58c29d3 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -39,6 +39,8 @@ import type {
   CommitDataBackend,
   DevToolsHook,
   Fiber,
+  InspectedElement,
+  Owner,
   PathFrame,
   PathMatch,
   ProfilingDataBackend,
@@ -46,10 +48,6 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type {
-  InspectedElement,
-  Owner,
-} from 'src/devtools/views/Components/types';
 import type { Interaction } from 'src/devtools/views/Profiler/types';
 import type { ComponentFilter, ElementType } from 'src/types';
 
@@ -1752,6 +1750,7 @@ export function attach(
       {
         displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
         id,
+        type: getElementTypeForFiber(fiber),
       },
     ];
 
@@ -1761,6 +1760,7 @@ export function attach(
         owners.unshift({
           displayName: getDisplayNameForFiber(owner) || 'Anonymous',
           id: getFiberID(getPrimaryFiber(owner)),
+          type: getElementTypeForFiber(owner),
         });
         owner = owner._debugOwner || null;
       }
@@ -1858,6 +1858,7 @@ export function attach(
         owners.push({
           displayName: getDisplayNameForFiber(owner) || 'Anonymous',
           id: getFiberID(getPrimaryFiber(owner)),
+          type: getElementTypeForFiber(owner),
         });
         owner = owner._debugOwner || null;
       }
@@ -1904,6 +1905,7 @@ export function attach(
       canViewSource,
 
       displayName: getDisplayNameForFiber(fiber),
+      type: getElementTypeForFiber(fiber),
 
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
diff --git a/src/backend/types.js b/src/backend/types.js
index 8972fbd4e24e..c9f8db65226b 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -1,10 +1,6 @@
 // @flow
 
 import type { ComponentFilter, ElementType } from 'src/types';
-import type {
-  InspectedElement,
-  Owner,
-} from 'src/devtools/views/Components/types';
 import type { Interaction } from 'src/devtools/views/Profiler/types';
 
 type BundleType =
@@ -156,6 +152,50 @@ export type PathMatch = {|
   isFullMatch: boolean,
 |};
 
+export type Owner = {|
+  displayName: string | null,
+  id: number,
+  type: ElementType,
+|};
+
+export type OwnersList = {|
+  id: number,
+  owners: Array<Owner> | null,
+|};
+
+export type InspectedElement = {|
+  id: number,
+
+  displayName: string | null,
+
+  // Does the current renderer support editable hooks?
+  canEditHooks: boolean,
+
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
+
+  // Is this Suspense, and can its value be overriden now?
+  canToggleSuspense: boolean,
+
+  // Can view component source location.
+  canViewSource: boolean,
+
+  // Inspectable properties.
+  context: Object | null,
+  events: Object | null,
+  hooks: Object | null,
+  props: Object | null,
+  state: Object | null,
+
+  // List of owners
+  owners: Array<Owner> | null,
+
+  // Location of component in source coude.
+  source: Object | null,
+
+  type: ElementType,
+|};
+
 export type RendererInterface = {
   cleanup: () => void,
   findNativeNodesForFiberID: (id: number) => ?Array<NativeType>,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index c3a8ccabb9ea..b1176baeed02 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -12,6 +12,7 @@ import { ElementTypeRoot } from '../types';
 import {
   getSavedComponentFilters,
   saveComponentFilters,
+  separateDisplayNameAndHOCs,
   utfDecodeString,
 } from '../utils';
 import { __DEBUG__ } from '../constants';
@@ -674,6 +675,7 @@ export default class Store extends EventEmitter {
               children: [],
               depth: -1,
               displayName: null,
+              hocDisplayNames: null,
               id,
               isCollapsed: false, // Never collapse roots; it would hide the entire tree.
               key: null,
@@ -717,10 +719,16 @@ export default class Store extends EventEmitter {
             ): any): Element);
             parentElement.children.push(id);
 
+            const [
+              displayNameWithoutHOCs,
+              hocDisplayNames,
+            ] = separateDisplayNameAndHOCs(displayName, type);
+
             const element: Element = {
               children: [],
               depth: parentElement.depth + 1,
-              displayName,
+              displayName: displayNameWithoutHOCs,
+              hocDisplayNames,
               id,
               isCollapsed: this._collapseNodesByDefault,
               key,
diff --git a/src/devtools/views/Components/Badge.css b/src/devtools/views/Components/Badge.css
new file mode 100644
index 000000000000..370409aeb9af
--- /dev/null
+++ b/src/devtools/views/Components/Badge.css
@@ -0,0 +1,11 @@
+.Badge {
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
diff --git a/src/devtools/views/Components/Badge.js b/src/devtools/views/Components/Badge.js
new file mode 100644
index 000000000000..da95ac49e21e
--- /dev/null
+++ b/src/devtools/views/Components/Badge.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react';
+import styles from './Badge.css';
+
+type Props = {|
+  children: string | null,
+|};
+
+export default function Badge({ children }: Props) {
+  if (children === null) {
+    return null;
+  }
+
+  return <div className={styles.Badge}>{children}</div>;
+}
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index dfa0b27d9d9c..0b56359684b8 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -64,14 +64,3 @@
   flex: 0 0 1rem;
   color: var(--color-expand-collapse-toggle);
 }
-
-.Badge {
-  color: var(--color-text);
-  background-color: var(--color-component-badge-background);
-  padding: 0.125rem 0.25rem;
-  line-height: normal;
-  border-radius: 0.125rem;
-  margin-left: 0.25rem;
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-small);
-}
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index d7a03e9667e6..cb07812388f3 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import Store from 'src/devtools/store';
+import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp, truncateText } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
@@ -80,9 +81,23 @@ export default function ElementView({ data, index, style }: Props) {
     return null;
   }
 
-  const { depth, displayName, key, type } = ((element: any): Element);
-
-  const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
+  const {
+    depth,
+    displayName,
+    hocDisplayNames,
+    key,
+    type,
+  } = ((element: any): Element);
+
+  // TODO Maybe factor this into a shared util method?
+  let badge = null;
+  if (hocDisplayNames !== null) {
+    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
+  } else if (type === ElementTypeMemo) {
+    badge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    badge = 'ForwardRef';
+  }
 
   let className = styles.Element;
   if (isSelected) {
@@ -105,8 +120,12 @@ export default function ElementView({ data, index, style }: Props) {
 
         // Left padding presents the appearance of a nested tree structure.
         // We must use padding rather than margin/left because of the selected background color.
-        paddingLeft: `calc(${depth} * var(--indentation-size))`,
+        paddingLeft: `calc(${depth} * var(--indentation-size) + 0.25rem)`,
+
+        // TODO Animate horizontal axis compression so it's smoother.
+        // transition: 'padding-left 250ms',
       }}
+      data-depth={depth}
     >
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
@@ -123,12 +142,7 @@ export default function ElementView({ data, index, style }: Props) {
         </Fragment>
       )}
       <span className={styles.Bracket}>&gt;</span>
-
-      {showBadge && (
-        <span className={styles.Badge}>
-          {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
-        </span>
-      )}
+      <Badge>{badge}</Badge>
     </div>
   );
 }
diff --git a/src/devtools/views/Components/Guideline.css b/src/devtools/views/Components/Guideline.css
index 1ab29e1d16ae..e3adaed7265e 100644
--- a/src/devtools/views/Components/Guideline.css
+++ b/src/devtools/views/Components/Guideline.css
@@ -1,14 +1,8 @@
-.GuidelineActive,
-.GuidelineInactive {
-  width: 1px;
-  z-index: 2;
+.Guideline {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 0;
   pointer-events: none;
-}
-
-.GuidelineActive {
-  background-color: var(--color-background-selected);
-}
-
-.GuidelineInactive {
-  background-color: var(--color-background-inactive);
+  background-color: var(--color-guideline);
 }
diff --git a/src/devtools/views/Components/Guideline.js b/src/devtools/views/Components/Guideline.js
index 3ba9760da098..f2a69292ebb1 100644
--- a/src/devtools/views/Components/Guideline.js
+++ b/src/devtools/views/Components/Guideline.js
@@ -2,7 +2,6 @@
 
 import React, { useContext, useMemo } from 'react';
 import { TreeStateContext } from './TreeContext';
-import TreeFocusedContext from './TreeFocusedContext';
 import { SettingsContext } from '../Settings/SettingsContext';
 import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
@@ -11,7 +10,6 @@ import Store from '../../store';
 import styles from './Guideline.css';
 
 type Data = {|
-  depth: number,
   startIndex: number,
   stopIndex: number,
 |};
@@ -20,7 +18,6 @@ export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const { selectedElementID } = useContext(TreeStateContext);
-  const treeFocused = useContext(TreeFocusedContext);
 
   const subscription = useMemo(
     () => ({
@@ -61,7 +58,6 @@ export default function Guideline(_: {||}) {
         }
 
         return {
-          depth: element.depth,
           startIndex,
           stopIndex,
         };
@@ -81,18 +77,16 @@ export default function Guideline(_: {||}) {
     return null;
   }
 
-  const { depth, startIndex, stopIndex } = data;
+  const { startIndex, stopIndex } = data;
 
   return (
     <div
-      className={
-        treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
-      }
+      className={styles.Guideline}
       style={{
         position: 'absolute',
-        top: `${startIndex * lineHeight}px`,
-        left: `calc(${depth} * var(--indentation-size) + 0.5rem)`,
-        height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,
+        top: `${startIndex * lineHeight - lineHeight / 2}px`,
+        height: `${(stopIndex + 1 - startIndex) * lineHeight +
+          lineHeight / 2}px`,
       }}
     />
   );
diff --git a/src/devtools/views/Components/HocBadges.css b/src/devtools/views/Components/HocBadges.css
new file mode 100644
index 000000000000..04c5f92dc4c0
--- /dev/null
+++ b/src/devtools/views/Components/HocBadges.css
@@ -0,0 +1,9 @@
+.HocBadges {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
+  --color-component-badge-background: var(
+    --color-component-badge-background-inverted
+  );
+  user-select: none;
+}
diff --git a/src/devtools/views/Components/HocBadges.js b/src/devtools/views/Components/HocBadges.js
new file mode 100644
index 000000000000..c9e7daff98cf
--- /dev/null
+++ b/src/devtools/views/Components/HocBadges.js
@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react';
+import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
+import Badge from './Badge';
+import styles from './HocBadges.css';
+
+import type { Element } from './types';
+
+type Props = {|
+  element: Element,
+|};
+
+export default function HocBadges({ element }: Props) {
+  const { hocDisplayNames, type } = ((element: any): Element);
+
+  let typeBadge = null;
+  if (type === ElementTypeMemo) {
+    typeBadge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    typeBadge = 'ForwardRef';
+  }
+
+  if (hocDisplayNames === null && typeBadge === null) {
+    return null;
+  }
+
+  return (
+    <div className={styles.HocBadges}>
+      <Badge>{typeBadge}</Badge>
+      {hocDisplayNames !== null &&
+        hocDisplayNames.map(hocDisplayName => (
+          <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
+        ))}
+    </div>
+  );
+}
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 75b49f489828..c27d97eb8bab 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -12,6 +12,7 @@ import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
 import { hydrate } from 'src/hydration';
 import { TreeStateContext } from './TreeContext';
+import { separateDisplayNameAndHOCs } from 'src/utils';
 
 import type {
   DehydratedData,
@@ -95,8 +96,31 @@ function InspectedElementContextController({ children }: Props) {
       if (inspectedElement !== null && typeof inspectedElement === 'object') {
         const id = inspectedElement.id;
 
+        const { displayName, type } = inspectedElement;
+
+        const [
+          displayNameWithoutHOCs,
+          hocDisplayNames,
+        ] = separateDisplayNameAndHOCs(displayName, type);
+
         inspectedElement = (({
           ...inspectedElement,
+          displayName: displayNameWithoutHOCs,
+          owners:
+            inspectedElement.owners === null
+              ? null
+              : inspectedElement.owners.map(owner => {
+                  const [
+                    displayName,
+                    hocDisplayNames,
+                  ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
+                  return {
+                    ...owner,
+                    displayName,
+                    hocDisplayNames,
+                  };
+                }),
+          hocDisplayNames,
           context: hydrateHelper(inspectedElement.context),
           events: hydrateHelper(inspectedElement.events),
           hooks: hydrateHelper(inspectedElement.hooks),
diff --git a/src/devtools/views/Components/OwnersListContext.js b/src/devtools/views/Components/OwnersListContext.js
index 3720f3b2cc31..f83b1a6d391d 100644
--- a/src/devtools/views/Components/OwnersListContext.js
+++ b/src/devtools/views/Components/OwnersListContext.js
@@ -9,6 +9,7 @@ import React, {
 import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
 import { TreeStateContext } from './TreeContext';
+import { separateDisplayNameAndHOCs } from 'src/utils';
 
 import type {
   Element,
@@ -79,7 +80,23 @@ function OwnersListContextController({ children }: Props) {
         const request = inProgressRequests.get(element);
         if (request != null) {
           inProgressRequests.delete(element);
-          request.resolveFn(ownersList.owners);
+
+          request.resolveFn(
+            ownersList.owners === null
+              ? null
+              : ownersList.owners.map(owner => {
+                  const [
+                    displayNameWithoutHOCs,
+                    hocDisplayNames,
+                  ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
+
+                  return {
+                    ...owner,
+                    displayName: displayNameWithoutHOCs,
+                    hocDisplayNames,
+                  };
+                })
+          );
         }
       }
     };
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index d9ae086b4b4a..176fac717acc 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -69,7 +69,6 @@
 .Owner {
   border-radius: 0.25rem;
   padding: 0.125rem 0.25rem;
-  margin-left: 0.5rem;
   cursor: pointer;
   background: none;
   border: none;
@@ -94,3 +93,9 @@
   color: var(--color-dim);
   cursor: default;
 }
+
+.OwnerButton {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5rem;
+}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index aa831c11adad..a819ecbb0207 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -8,10 +8,12 @@ import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import EventsTree from './EventsTree';
 import { ModalDialogContext } from '../ModalDialog';
+import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import Toggle from '../Toggle';
+import Badge from './Badge';
 import {
   ComponentFilterElementType,
   ElementTypeClass,
@@ -24,6 +26,7 @@ import {
 import styles from './SelectedElement.css';
 
 import type { Element, InspectedElement } from './types';
+import type { ElementType } from 'src/types';
 
 export type Props = {||};
 
@@ -272,6 +275,7 @@ function InspectedElementView({
 
   return (
     <div className={styles.InspectedElement}>
+      <HocBadges element={element} />
       <InspectedElementTree
         label="props"
         data={props}
@@ -308,8 +312,10 @@ function InspectedElementView({
             <OwnerView
               key={owner.id}
               displayName={owner.displayName || 'Anonymous'}
+              hocDisplayNames={owner.hocDisplayNames}
               id={owner.id}
               isInStore={store.containsElement(owner.id)}
+              type={owner.type}
             />
           ))}
         </div>
@@ -318,9 +324,21 @@ function InspectedElementView({
   );
 }
 
-type OwnerViewProps = {| displayName: string, id: number, isInStore: boolean |};
+type OwnerViewProps = {|
+  displayName: string,
+  hocDisplayNames: Array<string> | null,
+  id: number,
+  isInStore: boolean,
+  type: ElementType,
+|};
 
-function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {
+function OwnerView({
+  displayName,
+  hocDisplayNames,
+  id,
+  isInStore,
+  type,
+}: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
 
   const handleClick = useCallback(
@@ -332,16 +350,30 @@ function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {
     [dispatch, id]
   );
 
+  let badge = null;
+  if (hocDisplayNames !== null) {
+    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
+  } else if (type === ElementTypeMemo) {
+    badge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    badge = 'ForwardRef';
+  }
+
   return (
-    <button
+    <Button
       key={id}
-      className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+      className={styles.OwnerButton}
       disabled={!isInStore}
       onClick={handleClick}
-      title={displayName}
     >
-      {displayName}
-    </button>
+      <span
+        className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+        title={displayName}
+      >
+        {displayName}
+      </span>
+      <Badge>{badge}</Badge>
+    </Button>
   );
 }
 
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 3e5b75f99ef6..022be6353d35 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -322,34 +322,73 @@ export default function Tree(props: Props) {
   );
 }
 
-function updateIndentationSizeVar(innerDiv: HTMLDivElement): void {
-  const list = ((innerDiv.parentElement: any): HTMLDivElement);
+/* TODO Debounce so newly added rows animate with pre-existing ones
+let debounceTimeoutID: TimeoutID | null = null;
+function debounce(callback: () => void, delay: number) {
+  if (debounceTimeoutID !== null) {
+    clearTimeout(debounceTimeoutID);
+  }
+  debounceTimeoutID = setTimeout(callback, delay);
+}
+*/
 
-  let indentationSize =
-    parseFloat(getComputedStyle(list).getPropertyValue('--indentation-size')) ||
-    12;
+function updateIndentationSizeVar(
+  innerDiv: HTMLDivElement,
+  indentationSizeRef: {| current: number |},
+  cachedChildWidths: WeakMap<HTMLElement, number>
+): void {
+  const list = ((innerDiv.parentElement: any): HTMLDivElement);
 
   let maxChildWidth = 0;
   for (let child of innerDiv.children) {
-    const { lastElementChild } = child;
-    // Skip over e.g. the guideline element
-    if (lastElementChild != null) {
-      const bounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
-      maxChildWidth = Math.max(maxChildWidth, bounds.x + bounds.width);
+    const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
+
+    const cachedChildWidth = cachedChildWidths.get(child);
+    if (cachedChildWidth != null) {
+      maxChildWidth = Math.max(
+        maxChildWidth,
+        indentationSizeRef.current * depth + cachedChildWidth
+      );
+    } else {
+      const { firstElementChild, lastElementChild } = child;
+
+      // Skip over e.g. the guideline element
+      if (firstElementChild != null && lastElementChild != null) {
+        const firstBounds = ((firstElementChild.getBoundingClientRect(): any): DOMRect);
+        const lastBounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
+        const childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
+
+        cachedChildWidths.set(child, childWidth);
+
+        maxChildWidth = Math.max(
+          maxChildWidth,
+          indentationSizeRef.current * depth + childWidth
+        );
+      }
     }
   }
 
-  indentationSize = Math.min(
+  const indentationSize = Math.min(
     12,
-    (list.clientWidth / maxChildWidth) * indentationSize
+    (list.clientWidth / maxChildWidth) * indentationSizeRef.current
   );
 
+  // TODO Debounce so newly added rows animate with pre-existing ones
+  // debounce(() => {
   list.style.setProperty('--indentation-size', `${indentationSize}px`);
+  indentationSizeRef.current = indentationSize;
+  // }, 50);
 }
 
 function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
 
+  const indentationSizeRef = useRef<number>(12);
+  const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(
+    () => new WeakMap(),
+    []
+  );
+
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
   // What we can do instead, is passively measure the width of the current rows,
@@ -361,7 +400,11 @@ function InnerElementType({ children, style, ...rest }) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
-      updateIndentationSizeVar(divRef.current);
+      updateIndentationSizeVar(
+        divRef.current,
+        indentationSizeRef,
+        cachedChildWidths
+      );
     }
   });
 
@@ -371,12 +414,16 @@ function InnerElementType({ children, style, ...rest }) {
   useEffect(() => {
     const invalidateMinWidth = () => {
       if (divRef.current !== null) {
-        updateIndentationSizeVar(divRef.current);
+        updateIndentationSizeVar(
+          divRef.current,
+          indentationSizeRef,
+          cachedChildWidths
+        );
       }
     };
     window.addEventListener('resize', invalidateMinWidth);
     return () => window.removeEventListener('resize', invalidateMinWidth);
-  }, []);
+  }, [cachedChildWidths]);
 
   // We shouldn't retain this width across different conceptual trees though,
   // so when the user opens the "owners tree" view, we should discard the previous width.
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 5613e9c2054a..31c5c6c793c2 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -14,6 +14,8 @@ export type Element = {|
   displayName: string | null,
   key: number | string | null,
 
+  hocDisplayNames: null | Array<string>,
+
   // Should the elements children be visible in the tree?
   isCollapsed: boolean,
 
@@ -33,6 +35,8 @@ export type Element = {|
 export type Owner = {|
   displayName: string | null,
   id: number,
+  hocDisplayNames: Array<string> | null,
+  type: ElementType,
 |};
 
 export type OwnersList = {|
@@ -69,6 +73,8 @@ export type InspectedElement = {|
 
   // Location of component in source coude.
   source: Object | null,
+
+  type: ElementType,
 |};
 
 // TODO: Add profiling type
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f09eda35f89e..4d2729523390 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -42,7 +42,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline: rgba(0, 0, 0, 0.15);
+  --light-color-guideline: rgba(0, 0, 0, 0.05);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -100,7 +100,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline: rgba(255, 255, 255, 0.15);
+  --dark-color-guideline: rgba(255, 255, 255, 0.05);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
diff --git a/src/utils.js b/src/utils.js
index 3880bada6a34..d763963ecb85 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -3,8 +3,14 @@
 import LRU from 'lru-cache';
 import { LOCAL_STORAGE_FILTER_PREFERENCES_KEY } from './constants';
 import { ComponentFilterElementType, ElementTypeHostComponent } from './types';
+import {
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+} from 'src/types';
 
-import type { ComponentFilter } from './types';
+import type { ComponentFilter, ElementType } from './types';
 
 const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -109,3 +115,33 @@ export function saveComponentFilters(
     JSON.stringify(componentFilters)
   );
 }
+
+export function separateDisplayNameAndHOCs(
+  displayName: string | null,
+  type: ElementType
+): [string | null, Array<string> | null] {
+  if (displayName === null) {
+    return [null, null];
+  }
+
+  let hocDisplayNames = null;
+
+  switch (type) {
+    case ElementTypeClass:
+    case ElementTypeForwardRef:
+    case ElementTypeFunction:
+    case ElementTypeMemo:
+      if (displayName.indexOf('(') >= 0) {
+        const matches = displayName.match(/[^()]+/g);
+        if (matches !== null) {
+          displayName = matches.pop();
+          hocDisplayNames = matches;
+        }
+      }
+      break;
+    default:
+      break;
+  }
+
+  return [displayName, hocDisplayNames];
+}

From 2845a7883b7dcab926178b578c4ecc06e0e1d3fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 08:44:55 -0700
Subject: [PATCH 657/814] Whoops I broke CI (updating snapshots)

---
 .../ownersListContext-test.js.snap             | 18 ++++++++++++++++++
 .../__snapshots__/treeContext-test.js.snap     | 11 +++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index 0f1e213a058f..0699eb5b18dc 100644
--- a/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -11,15 +11,21 @@ exports[`OwnersListContext should fetch the owners list for the selected element
 Array [
   Object {
     "displayName": "Grandparent",
+    "hocDisplayNames": null,
     "id": 7,
+    "type": 5,
   },
   Object {
     "displayName": "Parent",
+    "hocDisplayNames": null,
     "id": 9,
+    "type": 5,
   },
   Object {
     "displayName": "Child",
+    "hocDisplayNames": null,
     "id": 8,
+    "type": 5,
   },
 ]
 `;
@@ -36,15 +42,21 @@ exports[`OwnersListContext should fetch the owners list for the selected element
 Array [
   Object {
     "displayName": "Grandparent",
+    "hocDisplayNames": null,
     "id": 2,
+    "type": 5,
   },
   Object {
     "displayName": "Parent",
+    "hocDisplayNames": null,
     "id": 3,
+    "type": 5,
   },
   Object {
     "displayName": "Child",
+    "hocDisplayNames": null,
     "id": 4,
+    "type": 5,
   },
 ]
 `;
@@ -53,11 +65,15 @@ exports[`OwnersListContext should fetch the owners list for the selected element
 Array [
   Object {
     "displayName": "Grandparent",
+    "hocDisplayNames": null,
     "id": 2,
+    "type": 5,
   },
   Object {
     "displayName": "Parent",
+    "hocDisplayNames": null,
     "id": 3,
+    "type": 5,
   },
 ]
 `;
@@ -71,7 +87,9 @@ exports[`OwnersListContext should include the current element even if there are
 Array [
   Object {
     "displayName": "Grandparent",
+    "hocDisplayNames": null,
     "id": 5,
+    "type": 5,
   },
 ]
 `;
diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap
index 3a9149861bdd..d50b0a71722c 100644
--- a/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ b/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -29,6 +29,7 @@ Object {
       "children": Array [],
       "depth": 0,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 3,
       "isCollapsed": false,
       "key": null,
@@ -70,6 +71,7 @@ Object {
       "children": Array [],
       "depth": 0,
       "displayName": "Parent",
+      "hocDisplayNames": null,
       "id": 2,
       "isCollapsed": false,
       "key": null,
@@ -136,6 +138,7 @@ Object {
       ],
       "depth": 0,
       "displayName": "Parent",
+      "hocDisplayNames": null,
       "id": 3,
       "isCollapsed": false,
       "key": null,
@@ -148,6 +151,7 @@ Object {
       "children": Array [],
       "depth": 1,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 4,
       "isCollapsed": false,
       "key": "0",
@@ -160,6 +164,7 @@ Object {
       "children": Array [],
       "depth": 1,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 5,
       "isCollapsed": false,
       "key": "1",
@@ -189,6 +194,7 @@ Object {
       ],
       "depth": 0,
       "displayName": "Parent",
+      "hocDisplayNames": null,
       "id": 3,
       "isCollapsed": false,
       "key": null,
@@ -201,6 +207,7 @@ Object {
       "children": Array [],
       "depth": 1,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 4,
       "isCollapsed": false,
       "key": "0",
@@ -228,6 +235,7 @@ Object {
       "children": Array [],
       "depth": 0,
       "displayName": "Parent",
+      "hocDisplayNames": null,
       "id": 3,
       "isCollapsed": false,
       "key": null,
@@ -280,6 +288,7 @@ Object {
       ],
       "depth": 0,
       "displayName": "Parent",
+      "hocDisplayNames": null,
       "id": 3,
       "isCollapsed": false,
       "key": null,
@@ -292,6 +301,7 @@ Object {
       "children": Array [],
       "depth": 1,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 4,
       "isCollapsed": false,
       "key": null,
@@ -304,6 +314,7 @@ Object {
       "children": Array [],
       "depth": 1,
       "displayName": "Child",
+      "hocDisplayNames": null,
       "id": 5,
       "isCollapsed": false,
       "key": null,

From ab7ae785114c9bb9b950883318977d0cf638bc0f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 09:19:32 -0700
Subject: [PATCH 658/814] Tweaked a few styles

---
 src/devtools/views/Components/Badge.js            | 5 +++--
 src/devtools/views/Components/Element.css         | 8 ++++++++
 src/devtools/views/Components/Element.js          | 7 ++++---
 src/devtools/views/Components/SelectedElement.css | 1 +
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Components/Badge.js b/src/devtools/views/Components/Badge.js
index da95ac49e21e..42ec2d180da5 100644
--- a/src/devtools/views/Components/Badge.js
+++ b/src/devtools/views/Components/Badge.js
@@ -5,12 +5,13 @@ import styles from './Badge.css';
 
 type Props = {|
   children: string | null,
+  className?: string,
 |};
 
-export default function Badge({ children }: Props) {
+export default function Badge({ children, className }: Props) {
   if (children === null) {
     return null;
   }
 
-  return <div className={styles.Badge}>{children}</div>;
+  return <div className={`${styles.Badge} ${className || ''}`}>{children}</div>;
 }
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 0b56359684b8..7cd551218837 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -64,3 +64,11 @@
   flex: 0 0 1rem;
   color: var(--color-expand-collapse-toggle);
 }
+
+.Padding {
+  width: 0.25rem;
+}
+
+.Badge {
+  margin-left: 0.25rem;
+}
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index cb07812388f3..ad176e36953a 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -120,17 +120,17 @@ export default function ElementView({ data, index, style }: Props) {
 
         // Left padding presents the appearance of a nested tree structure.
         // We must use padding rather than margin/left because of the selected background color.
-        paddingLeft: `calc(${depth} * var(--indentation-size) + 0.25rem)`,
+        paddingLeft: `calc(${depth} * var(--indentation-size))`,
 
         // TODO Animate horizontal axis compression so it's smoother.
         // transition: 'padding-left 250ms',
       }}
       data-depth={depth}
     >
+      <span className={styles.Padding} />
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
-
       <span className={styles.Bracket}>&lt;</span>
       <DisplayName displayName={displayName} id={((id: any): number)} />
       {key && (
@@ -142,7 +142,8 @@ export default function ElementView({ data, index, style }: Props) {
         </Fragment>
       )}
       <span className={styles.Bracket}>&gt;</span>
-      <Badge>{badge}</Badge>
+      <Badge className={styles.Badge}>{badge}</Badge>
+      <span className={styles.Padding} />
     </div>
   );
 }
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index 176fac717acc..eb0169e4da07 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -98,4 +98,5 @@
   display: flex;
   align-items: center;
   margin-left: 0.5rem;
+  padding: 0;
 }

From de9fb0a8a2a04d77405eda3e780fe83d21bb8304 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 09:34:39 -0700
Subject: [PATCH 659/814] Tweaked guideline background color style

---
 src/devtools/views/Components/Element.css      |  1 +
 src/devtools/views/Components/Guideline.css    | 12 ++++++++++--
 src/devtools/views/Components/Guideline.js     |  4 +++-
 src/devtools/views/Components/HocBadges.css    |  2 +-
 src/devtools/views/Settings/SettingsContext.js |  3 ++-
 src/devtools/views/root.css                    | 10 ++++++----
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 7cd551218837..05a446bb19cf 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -33,6 +33,7 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
diff --git a/src/devtools/views/Components/Guideline.css b/src/devtools/views/Components/Guideline.css
index e3adaed7265e..3e53e6f3ba9d 100644
--- a/src/devtools/views/Components/Guideline.css
+++ b/src/devtools/views/Components/Guideline.css
@@ -1,8 +1,16 @@
-.Guideline {
+.Active,
+.Inactive {
   position: absolute;
   left: 0;
   width: 100%;
   z-index: 0;
   pointer-events: none;
-  background-color: var(--color-guideline);
+}
+
+.Active {
+  background-color: var(--color-guideline-active);
+}
+
+.Inactive {
+  background-color: var(--color-guideline-inactive);
 }
diff --git a/src/devtools/views/Components/Guideline.js b/src/devtools/views/Components/Guideline.js
index f2a69292ebb1..f9e9d7407fec 100644
--- a/src/devtools/views/Components/Guideline.js
+++ b/src/devtools/views/Components/Guideline.js
@@ -3,6 +3,7 @@
 import React, { useContext, useMemo } from 'react';
 import { TreeStateContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
+import TreeFocusedContext from './TreeFocusedContext';
 import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
@@ -17,6 +18,7 @@ type Data = {|
 export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
+  const treeFocused = useContext(TreeFocusedContext);
   const { selectedElementID } = useContext(TreeStateContext);
 
   const subscription = useMemo(
@@ -81,7 +83,7 @@ export default function Guideline(_: {||}) {
 
   return (
     <div
-      className={styles.Guideline}
+      className={treeFocused ? styles.Active : styles.Inactive}
       style={{
         position: 'absolute',
         top: `${startIndex * lineHeight - lineHeight / 2}px`,
diff --git a/src/devtools/views/Components/HocBadges.css b/src/devtools/views/Components/HocBadges.css
index 04c5f92dc4c0..fb1944d8ef12 100644
--- a/src/devtools/views/Components/HocBadges.css
+++ b/src/devtools/views/Components/HocBadges.css
@@ -1,7 +1,7 @@
 .HocBadges {
   padding: 0.125rem 0.25rem;
   background-color: var(--color-background-selected);
-  color: var(--color-text-selected);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4f7913155432..734b7752a2db 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -261,7 +261,8 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline', documentElements);
+  updateStyleHelper(theme, 'color-guideline-active', documentElements);
+  updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 4d2729523390..70aefe072e5f 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -8,7 +8,7 @@
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
-  --light-color-background-hover: #ebf1fb;
+  --light-color-background-hover: rgba(0, 136, 250, 0.1);
   --light-color-background-inactive: #e5e5e5;
   --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
@@ -42,7 +42,8 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline: rgba(0, 0, 0, 0.05);
+  --light-color-guideline-active: rgba(0, 136, 250, 0.1);
+  --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -66,7 +67,7 @@
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
-  --dark-color-background-hover: #3d424a;
+  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
   --dark-color-background-inactive: #3d424a;
   --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
@@ -100,7 +101,8 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline: rgba(255, 255, 255, 0.05);
+  --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
+  --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From b5f89988597cf3613edeb424307a84d9334234ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 11:16:18 -0700
Subject: [PATCH 660/814] Added debounce and animation for resize

---
 src/devtools/views/Components/Element.css |  1 +
 src/devtools/views/Components/Element.js  |  4 +-
 src/devtools/views/Components/Tree.css    |  3 ++
 src/devtools/views/Components/Tree.js     | 46 +++++++----------------
 4 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 05a446bb19cf..b41c5a0718ae 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -68,6 +68,7 @@
 
 .Padding {
   width: 0.25rem;
+  min-width: 0.25rem; /* Keep padding from shrinking when it's near the right */
 }
 
 .Badge {
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index ad176e36953a..d0c3fe8184db 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -122,8 +122,8 @@ export default function ElementView({ data, index, style }: Props) {
         // We must use padding rather than margin/left because of the selected background color.
         paddingLeft: `calc(${depth} * var(--indentation-size))`,
 
-        // TODO Animate horizontal axis compression so it's smoother.
-        // transition: 'padding-left 250ms',
+        // Animate horizontal axis compression so it's smoother.
+        transition: 'padding-left 150ms',
       }}
       data-depth={depth}
     >
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index e3ddfeb37dfc..fb12b4fae085 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -5,6 +5,9 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--color-border);
+
+  /* Default size will be adjusted by Tree after scrolling */
+  --indentation-size: 12px;
 }
 
 .List {
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 022be6353d35..b06538e04e07 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -322,7 +322,6 @@ export default function Tree(props: Props) {
   );
 }
 
-/* TODO Debounce so newly added rows animate with pre-existing ones
 let debounceTimeoutID: TimeoutID | null = null;
 function debounce(callback: () => void, delay: number) {
   if (debounceTimeoutID !== null) {
@@ -330,7 +329,6 @@ function debounce(callback: () => void, delay: number) {
   }
   debounceTimeoutID = setTimeout(callback, delay);
 }
-*/
 
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
@@ -343,12 +341,11 @@ function updateIndentationSizeVar(
   for (let child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
 
+    let childWidth: number = 0;
+
     const cachedChildWidth = cachedChildWidths.get(child);
     if (cachedChildWidth != null) {
-      maxChildWidth = Math.max(
-        maxChildWidth,
-        indentationSizeRef.current * depth + cachedChildWidth
-      );
+      childWidth = cachedChildWidth;
     } else {
       const { firstElementChild, lastElementChild } = child;
 
@@ -356,16 +353,15 @@ function updateIndentationSizeVar(
       if (firstElementChild != null && lastElementChild != null) {
         const firstBounds = ((firstElementChild.getBoundingClientRect(): any): DOMRect);
         const lastBounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
-        const childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
 
+        childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
         cachedChildWidths.set(child, childWidth);
-
-        maxChildWidth = Math.max(
-          maxChildWidth,
-          indentationSizeRef.current * depth + childWidth
-        );
       }
     }
+
+    const childWidthIncludingIndentation =
+      indentationSizeRef.current * depth + childWidth;
+    maxChildWidth = Math.max(maxChildWidth, childWidthIncludingIndentation);
   }
 
   const indentationSize = Math.min(
@@ -373,11 +369,12 @@ function updateIndentationSizeVar(
     (list.clientWidth / maxChildWidth) * indentationSizeRef.current
   );
 
-  // TODO Debounce so newly added rows animate with pre-existing ones
-  // debounce(() => {
-  list.style.setProperty('--indentation-size', `${indentationSize}px`);
   indentationSizeRef.current = indentationSize;
-  // }, 50);
+
+  // Debounce so newly added rows animate with pre-existing ones
+  debounce(() => {
+    list.style.setProperty('--indentation-size', `${indentationSize}px`);
+  }, 50);
 }
 
 function InnerElementType({ children, style, ...rest }) {
@@ -408,23 +405,6 @@ function InnerElementType({ children, style, ...rest }) {
     }
   });
 
-  // When the window is resized, forget the specific min width.
-  // This will cause a render with 100% min-width, a measurement
-  // in an effect, and a second render where we know the width.
-  useEffect(() => {
-    const invalidateMinWidth = () => {
-      if (divRef.current !== null) {
-        updateIndentationSizeVar(
-          divRef.current,
-          indentationSizeRef,
-          cachedChildWidths
-        );
-      }
-    };
-    window.addEventListener('resize', invalidateMinWidth);
-    return () => window.removeEventListener('resize', invalidateMinWidth);
-  }, [cachedChildWidths]);
-
   // We shouldn't retain this width across different conceptual trees though,
   // so when the user opens the "owners tree" view, we should discard the previous width.
   const [prevOwnerID, setPrevOwnerID] = useState(ownerID);

From 96dc003a708a0d4a7b7959fb0e07ef87067a257d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 17:48:01 -0700
Subject: [PATCH 661/814] Removed debounce+animation from indentation
 adjustment

---
 src/devtools/views/Components/Element.js |  3 ---
 src/devtools/views/Components/Tree.js    | 13 +------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index d0c3fe8184db..d0afe8d45c04 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -121,9 +121,6 @@ export default function ElementView({ data, index, style }: Props) {
         // Left padding presents the appearance of a nested tree structure.
         // We must use padding rather than margin/left because of the selected background color.
         paddingLeft: `calc(${depth} * var(--indentation-size))`,
-
-        // Animate horizontal axis compression so it's smoother.
-        transition: 'padding-left 150ms',
       }}
       data-depth={depth}
     >
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index b06538e04e07..730570c7146f 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -322,14 +322,6 @@ export default function Tree(props: Props) {
   );
 }
 
-let debounceTimeoutID: TimeoutID | null = null;
-function debounce(callback: () => void, delay: number) {
-  if (debounceTimeoutID !== null) {
-    clearTimeout(debounceTimeoutID);
-  }
-  debounceTimeoutID = setTimeout(callback, delay);
-}
-
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   indentationSizeRef: {| current: number |},
@@ -371,10 +363,7 @@ function updateIndentationSizeVar(
 
   indentationSizeRef.current = indentationSize;
 
-  // Debounce so newly added rows animate with pre-existing ones
-  debounce(() => {
-    list.style.setProperty('--indentation-size', `${indentationSize}px`);
-  }, 50);
+  list.style.setProperty('--indentation-size', `${indentationSize}px`);
 }
 
 function InnerElementType({ children, style, ...rest }) {

From c1989448f46cb41b92c78ae4fb92e08a2e4157ca Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 17:49:51 -0700
Subject: [PATCH 662/814] Disable guide/group highlight in owners tree  mode

---
 src/devtools/views/Components/Guideline.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/Guideline.js b/src/devtools/views/Components/Guideline.js
index f9e9d7407fec..9fbba7c2bb00 100644
--- a/src/devtools/views/Components/Guideline.js
+++ b/src/devtools/views/Components/Guideline.js
@@ -19,7 +19,7 @@ export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
-  const { selectedElementID } = useContext(TreeStateContext);
+  const { ownerID, selectedElementID } = useContext(TreeStateContext);
 
   const subscription = useMemo(
     () => ({
@@ -75,6 +75,10 @@ export default function Guideline(_: {||}) {
   );
   const data = useSubscription<Data | null, Store>(subscription);
 
+  if (ownerID !== null) {
+    return null;
+  }
+
   if (data === null) {
     return null;
   }

From 6a69a6e9918dfdcc63b41312ebe9982789953bae Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 18:05:59 -0700
Subject: [PATCH 663/814] Added HOC badge to owners stack breadcrumbs

---
 src/devtools/views/Components/Element.css      |  4 ++--
 src/devtools/views/Components/OwnersStack.css  |  6 ++++++
 src/devtools/views/Components/OwnersStack.js   | 16 +++++++++++++++-
 src/devtools/views/Settings/SettingsContext.js |  2 ++
 src/devtools/views/root.css                    |  4 ++++
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index b41c5a0718ae..1c6bc2376f41 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -38,8 +38,8 @@
     --color-component-badge-background-inverted
   );
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
-  --color-attribute-name: var(--color-background-hover);
-  --color-attribute-value: var(--color-component-name-inverted);
+  --color-attribute-name: var(--color-attribute-name-inverted);
+  --color-attribute-value: var(--color-attribute-value-inverted);
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 48c9db0fc430..8e6fc95c9fe9 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -13,6 +13,8 @@
   font-size: var(--font-size-monospace-normal);
   user-select: none;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
 
 .Component[data-reach-menu-item][data-selected],
@@ -96,3 +98,7 @@
 .NotInStore:hover {
   color: var(--color-dimmest);
 }
+
+.Badge {
+  margin-left: 0.25rem;
+}
\ No newline at end of file
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 3883a1448008..f47c93c2cb53 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -13,10 +13,12 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
+import Badge from './Badge';
 import { OwnersListContext } from './OwnersListContext';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { useIsOverflowing } from '../hooks';
 import { StoreContext } from '../context';
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 
 import type { Owner } from './types';
 
@@ -237,7 +239,7 @@ type ElementViewProps = {
 function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
   const store = useContext(StoreContext);
 
-  const { displayName } = owner;
+  const { displayName, hocDisplayNames, type } = owner;
   const isInStore = store.containsElement(owner.id);
 
   const handleChange = useCallback(() => {
@@ -246,6 +248,16 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
     }
   }, [isInStore, selectOwner, owner]);
 
+  // TODO Maybe factor this into a shared util method?
+  let badge = null;
+  if (hocDisplayNames !== null) {
+    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
+  } else if (type === ElementTypeMemo) {
+    badge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    badge = 'ForwardRef';
+  }
+
   return (
     <Toggle
       className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
@@ -253,6 +265,8 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
       onChange={handleChange}
     >
       {displayName}
+
+      <Badge className={styles.Badge}>{badge}</Badge>
     </Toggle>
   );
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 734b7752a2db..e4af21652287 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -200,7 +200,9 @@ function updateThemeVariables(
   documentElements: DocumentElements
 ): void {
   updateStyleHelper(theme, 'color-attribute-name', documentElements);
+  updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
   updateStyleHelper(theme, 'color-attribute-value', documentElements);
+  updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
   updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-background-hover', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 70aefe072e5f..f6a187185b4e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -5,7 +5,9 @@
 
   /* Light theme */
   --light-color-attribute-name: #ef6632;
+  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
   --light-color-attribute-value: #1a1aa6;
+  --light-color-attribute-value-inverted: #ffffff;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-background-hover: rgba(0, 136, 250, 0.1);
@@ -64,7 +66,9 @@
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-name-inverted: #282828;
   --dark-color-attribute-value: #cedae0;
+  --dark-color-attribute-value-inverted: #ffffff;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-background-hover: rgba(255, 255, 255, 0.1);

From 3f0606f3d945a1952e1cbf97ff5b5879c51aee16 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 18:48:24 -0700
Subject: [PATCH 664/814] Refactored badges to share code and show +count

---
 src/devtools/views/Components/Badge.css       |  6 +++
 src/devtools/views/Components/Badge.js        | 40 ++++++++++++++++---
 src/devtools/views/Components/Element.css     |  1 +
 src/devtools/views/Components/Element.js      | 17 +++-----
 src/devtools/views/Components/HocBadges.css   | 12 ++++++
 src/devtools/views/Components/HocBadges.js    |  6 ++-
 src/devtools/views/Components/OwnersStack.css |  2 +-
 src/devtools/views/Components/OwnersStack.js  | 17 +++-----
 .../views/Components/SelectedElement.js       | 11 +----
 .../views/Settings/SettingsContext.js         |  6 +++
 src/devtools/views/root.css                   |  6 ++-
 11 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/src/devtools/views/Components/Badge.css b/src/devtools/views/Components/Badge.css
index 370409aeb9af..22f749cc5b1a 100644
--- a/src/devtools/views/Components/Badge.css
+++ b/src/devtools/views/Components/Badge.css
@@ -9,3 +9,9 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
 }
+
+.ExtraLabel {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  color: var(--color-component-badge-count);
+}
diff --git a/src/devtools/views/Components/Badge.js b/src/devtools/views/Components/Badge.js
index 42ec2d180da5..0956f71c039d 100644
--- a/src/devtools/views/Components/Badge.js
+++ b/src/devtools/views/Components/Badge.js
@@ -1,17 +1,47 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment } from 'react';
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import styles from './Badge.css';
 
+import type { ElementType } from 'src/types';
+
 type Props = {|
-  children: string | null,
   className?: string,
+  hocDisplayNames: Array<string> | null,
+  type: ElementType,
 |};
 
-export default function Badge({ children, className }: Props) {
-  if (children === null) {
+export default function Badge({ className, hocDisplayNames, type }: Props) {
+  let hocDisplayName = null;
+  let totalBadgeCount = 0;
+  let typeLabel = null;
+
+  if (hocDisplayNames !== null) {
+    hocDisplayName = hocDisplayNames[0];
+    totalBadgeCount += hocDisplayNames.length;
+  }
+
+  if (type === ElementTypeMemo) {
+    typeLabel = 'Memo';
+    totalBadgeCount++;
+  } else if (type === ElementTypeForwardRef) {
+    typeLabel = 'ForwardRef';
+    totalBadgeCount++;
+  }
+
+  if (hocDisplayNames === null && typeLabel === null) {
     return null;
   }
 
-  return <div className={`${styles.Badge} ${className || ''}`}>{children}</div>;
+  return (
+    <Fragment>
+      <div className={`${styles.Badge} ${className || ''}`}>
+        {hocDisplayName || typeLabel}
+      </div>
+      {totalBadgeCount > 1 && (
+        <div className={styles.ExtraLabel}>+{totalBadgeCount}</div>
+      )}
+    </Fragment>
+  );
 }
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 1c6bc2376f41..dd4512be9a0d 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -37,6 +37,7 @@
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
+  --color-component-badge-count: var(--color-component-badge-count-inverted);
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index d0afe8d45c04..c07392fb6ebd 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -7,7 +7,6 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import Store from 'src/devtools/store';
 import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
@@ -89,16 +88,6 @@ export default function ElementView({ data, index, style }: Props) {
     type,
   } = ((element: any): Element);
 
-  // TODO Maybe factor this into a shared util method?
-  let badge = null;
-  if (hocDisplayNames !== null) {
-    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
-  } else if (type === ElementTypeMemo) {
-    badge = 'Memo';
-  } else if (type === ElementTypeForwardRef) {
-    badge = 'ForwardRef';
-  }
-
   let className = styles.Element;
   if (isSelected) {
     className = treeFocused
@@ -139,7 +128,11 @@ export default function ElementView({ data, index, style }: Props) {
         </Fragment>
       )}
       <span className={styles.Bracket}>&gt;</span>
-      <Badge className={styles.Badge}>{badge}</Badge>
+      <Badge
+        className={styles.Badge}
+        hocDisplayNames={hocDisplayNames}
+        type={type}
+      />
       <span className={styles.Padding} />
     </div>
   );
diff --git a/src/devtools/views/Components/HocBadges.css b/src/devtools/views/Components/HocBadges.css
index fb1944d8ef12..fd44b6227c64 100644
--- a/src/devtools/views/Components/HocBadges.css
+++ b/src/devtools/views/Components/HocBadges.css
@@ -7,3 +7,15 @@
   );
   user-select: none;
 }
+
+.Badge {
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
diff --git a/src/devtools/views/Components/HocBadges.js b/src/devtools/views/Components/HocBadges.js
index c9e7daff98cf..5e21f8e27c7c 100644
--- a/src/devtools/views/Components/HocBadges.js
+++ b/src/devtools/views/Components/HocBadges.js
@@ -27,10 +27,12 @@ export default function HocBadges({ element }: Props) {
 
   return (
     <div className={styles.HocBadges}>
-      <Badge>{typeBadge}</Badge>
+      {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
       {hocDisplayNames !== null &&
         hocDisplayNames.map(hocDisplayName => (
-          <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
+          <div key={hocDisplayName} className={styles.Badge}>
+            {hocDisplayName}
+          </div>
         ))}
     </div>
   );
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 8e6fc95c9fe9..5fed9e61d4e3 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -101,4 +101,4 @@
 
 .Badge {
   margin-left: 0.25rem;
-}
\ No newline at end of file
+}
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index f47c93c2cb53..90195bb955c6 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -18,7 +18,6 @@ import { OwnersListContext } from './OwnersListContext';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { useIsOverflowing } from '../hooks';
 import { StoreContext } from '../context';
-import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 
 import type { Owner } from './types';
 
@@ -248,16 +247,6 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
     }
   }, [isInStore, selectOwner, owner]);
 
-  // TODO Maybe factor this into a shared util method?
-  let badge = null;
-  if (hocDisplayNames !== null) {
-    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
-  } else if (type === ElementTypeMemo) {
-    badge = 'Memo';
-  } else if (type === ElementTypeForwardRef) {
-    badge = 'ForwardRef';
-  }
-
   return (
     <Toggle
       className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
@@ -266,7 +255,11 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
     >
       {displayName}
 
-      <Badge className={styles.Badge}>{badge}</Badge>
+      <Badge
+        className={styles.Badge}
+        hocDisplayNames={hocDisplayNames}
+        type={type}
+      />
     </Toggle>
   );
 }
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index a819ecbb0207..e4250fbe0392 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -350,15 +350,6 @@ function OwnerView({
     [dispatch, id]
   );
 
-  let badge = null;
-  if (hocDisplayNames !== null) {
-    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
-  } else if (type === ElementTypeMemo) {
-    badge = 'Memo';
-  } else if (type === ElementTypeForwardRef) {
-    badge = 'ForwardRef';
-  }
-
   return (
     <Button
       key={id}
@@ -372,7 +363,7 @@ function OwnerView({
       >
         {displayName}
       </span>
-      <Badge>{badge}</Badge>
+      <Badge hocDisplayNames={hocDisplayNames} type={type} />
     </Button>
   );
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index e4af21652287..99f552d67f9f 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -259,6 +259,12 @@ function updateThemeVariables(
     'color-component-badge-background-inverted',
     documentElements
   );
+  updateStyleHelper(theme, 'color-component-badge-count', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-component-badge-count-inverted',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index f6a187185b4e..cd9c3ce9ebab 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -40,6 +40,8 @@
   --light-color-component-name-inverted: #ffffff;
   --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
   --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
+  --light-color-component-badge-count: #777d88;
+  --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
@@ -98,9 +100,11 @@
   --dark-color-commit-gradient-9: #febc38;
   --dark-color-commit-gradient-text: #000000;
   --dark-color-component-name: #61dafb;
-  --dark-color-component-name-inverted: ##282828;
+  --dark-color-component-name-inverted: #282828;
   --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
   --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
+  --dark-color-component-badge-count: #8f949d;
+  --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;

From 17b04c321c5b494ab2418197c5001603453c6aa3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 10:02:22 -0700
Subject: [PATCH 665/814] Cleaned up how we measure children and adjust
 indentation size

---
 src/devtools/views/Components/Badge.js     |  2 +-
 src/devtools/views/Components/Element.css  | 22 +++----
 src/devtools/views/Components/Element.js   | 58 +++++++++--------
 src/devtools/views/Components/HocBadges.js |  1 -
 src/devtools/views/Components/Tree.js      | 76 +++++++++++++++-------
 5 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/src/devtools/views/Components/Badge.js b/src/devtools/views/Components/Badge.js
index 0956f71c039d..76ac7bf6246e 100644
--- a/src/devtools/views/Components/Badge.js
+++ b/src/devtools/views/Components/Badge.js
@@ -40,7 +40,7 @@ export default function Badge({ className, hocDisplayNames, type }: Props) {
         {hocDisplayName || typeLabel}
       </div>
       {totalBadgeCount > 1 && (
-        <div className={styles.ExtraLabel}>+{totalBadgeCount}</div>
+        <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
       )}
     </Fragment>
   );
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index dd4512be9a0d..6e95cccd32d6 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -3,12 +3,6 @@
 .SelectedElement,
 .HoveredElement {
   border-radius: 0.25em;
-  white-space: nowrap;
-  line-height: var(--line-height-data);
-  display: flex;
-  align-items: center;
-  cursor: default;
-  user-select: none;
   color: var(--color-component-name);
 }
 .HoveredElement {
@@ -18,6 +12,17 @@
   background-color: var(--color-background-inactive);
 }
 
+.Wrapper {
+  padding: 0 0.25rem;
+  white-space: nowrap;
+  height: var(--line-height-data);
+  line-height: var(--line-height-data);
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+}
+
 .Bracket {
   color: var(--color-jsx-arrow-brackets);
 }
@@ -67,11 +72,6 @@
   color: var(--color-expand-collapse-toggle);
 }
 
-.Padding {
-  width: 0.25rem;
-  min-width: 0.25rem; /* Keep padding from shrinking when it's near the right */
-}
-
 .Badge {
   margin-left: 0.25rem;
 }
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index c07392fb6ebd..ca3a64ceddbb 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -104,36 +104,38 @@ export default function ElementView({ data, index, style }: Props) {
       onMouseLeave={handleMouseLeave}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
-      style={{
-        ...style, // "style" comes from react-window
-
-        // Left padding presents the appearance of a nested tree structure.
-        // We must use padding rather than margin/left because of the selected background color.
-        paddingLeft: `calc(${depth} * var(--indentation-size))`,
-      }}
+      style={style}
       data-depth={depth}
     >
-      <span className={styles.Padding} />
-      {ownerID === null ? (
-        <ExpandCollapseToggle element={element} store={store} />
-      ) : null}
-      <span className={styles.Bracket}>&lt;</span>
-      <DisplayName displayName={displayName} id={((id: any): number)} />
-      {key && (
-        <Fragment>
-          &nbsp;<span className={styles.AttributeName}>key</span>=
-          <span className={styles.AttributeValue} title={key}>
-            "{truncateText(`${key}`, 10)}"
-          </span>
-        </Fragment>
-      )}
-      <span className={styles.Bracket}>&gt;</span>
-      <Badge
-        className={styles.Badge}
-        hocDisplayNames={hocDisplayNames}
-        type={type}
-      />
-      <span className={styles.Padding} />
+      {/* This wrapper is used by Tree for measurement purposes. */}
+      <div
+        className={styles.Wrapper}
+        style={{
+          // Left offset presents the appearance of a nested tree structure.
+          // We must use padding rather than margin/left because of the selected background color.
+          transform: `translateX(calc(${depth} * var(--indentation-size)))`,
+        }}
+      >
+        {ownerID === null ? (
+          <ExpandCollapseToggle element={element} store={store} />
+        ) : null}
+        <span className={styles.Bracket}>&lt;</span>
+        <DisplayName displayName={displayName} id={((id: any): number)} />
+        {key && (
+          <Fragment>
+            &nbsp;<span className={styles.AttributeName}>key</span>=
+            <span className={styles.AttributeValue} title={key}>
+              "{truncateText(`${key}`, 10)}"
+            </span>
+          </Fragment>
+        )}
+        <span className={styles.Bracket}>&gt;</span>
+        <Badge
+          className={styles.Badge}
+          hocDisplayNames={hocDisplayNames}
+          type={type}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/devtools/views/Components/HocBadges.js b/src/devtools/views/Components/HocBadges.js
index 5e21f8e27c7c..6cd329e8266a 100644
--- a/src/devtools/views/Components/HocBadges.js
+++ b/src/devtools/views/Components/HocBadges.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
-import Badge from './Badge';
 import styles from './HocBadges.css';
 
 import type { Element } from './types';
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 730570c7146f..a13d13e740da 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -322,14 +322,55 @@ export default function Tree(props: Props) {
   );
 }
 
+// Indentation size can be adjusted but child width is fixed.
+// We need to adjust indentations so the widest child can fit without overflowing.
+// Sometimes the widest child is also the deepest in the tree:
+//   ┏━━━━━━━━━━━━┓
+//   ┃ <Foo>                ┃
+//   ┃ ••••<Foobar>         ┃
+//   ┃ ••••••••<Baz>        ┃
+//   ┗━━━━━━━━━━━━┛
+//
+// But this is not always the case.
+// Even with the above example, a change in indentation may change the overall widest child:
+//   ┏━━━━━━━━━━━━┓
+//   ┃ <Foo>                ┃
+//   ┃ ••<Foobar>           ┃
+//   ┃ ••••<Baz>            ┃
+//   ┗━━━━━━━━━━━━┛
+//
+// In extreme cases this difference can be important:
+//   ┏━━━━━━━━━━━━┓
+//   ┃ <ReallyLongName>     ┃
+//   ┃ ••<Foo>              ┃
+//   ┃ ••••<Bar>            ┃
+//   ┃ ••••••<Baz>          ┃
+//   ┃ ••••••••<Qux>        ┃
+//   ┗━━━━━━━━━━━━┛
+//
+// In the above example, the current indentation is fine,
+// but if we naively assumed that the widest element is also the deepest element,
+// we would end up compressing the indentation unnecessarily:
+//   ┏━━━━━━━━━━━━┓
+//   ┃ <ReallyLongName>     ┃
+//   ┃ •<Foo>               ┃
+//   ┃ ••<Bar>              ┃
+//   ┃ •••<Baz>             ┃
+//   ┃ ••••<Qux>            ┃
+//   ┗━━━━━━━━━━━━┛
+//
+// The way we deal with this is to compute the max indentation size that can fit each child,
+// given the child's fixed width and depth within the tree.
+// Then we take the smallest of these indentation sizes...
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
-  indentationSizeRef: {| current: number |},
   cachedChildWidths: WeakMap<HTMLElement, number>
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
+  const listWidth = list.clientWidth;
+
+  let maxIndentationSize: number = 12;
 
-  let maxChildWidth = 0;
   for (let child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
 
@@ -339,37 +380,26 @@ function updateIndentationSizeVar(
     if (cachedChildWidth != null) {
       childWidth = cachedChildWidth;
     } else {
-      const { firstElementChild, lastElementChild } = child;
+      const { firstElementChild } = child;
 
       // Skip over e.g. the guideline element
-      if (firstElementChild != null && lastElementChild != null) {
-        const firstBounds = ((firstElementChild.getBoundingClientRect(): any): DOMRect);
-        const lastBounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
-
-        childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
+      if (firstElementChild != null) {
+        childWidth = firstElementChild.clientWidth;
         cachedChildWidths.set(child, childWidth);
       }
     }
 
-    const childWidthIncludingIndentation =
-      indentationSizeRef.current * depth + childWidth;
-    maxChildWidth = Math.max(maxChildWidth, childWidthIncludingIndentation);
-  }
-
-  const indentationSize = Math.min(
-    12,
-    (list.clientWidth / maxChildWidth) * indentationSizeRef.current
-  );
+    const remainingWidth = Math.max(0, listWidth - childWidth);
 
-  indentationSizeRef.current = indentationSize;
+    maxIndentationSize = Math.min(maxIndentationSize, remainingWidth / depth);
+  }
 
-  list.style.setProperty('--indentation-size', `${indentationSize}px`);
+  list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);
 }
 
 function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
 
-  const indentationSizeRef = useRef<number>(12);
   const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(
     () => new WeakMap(),
     []
@@ -386,11 +416,7 @@ function InnerElementType({ children, style, ...rest }) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
-      updateIndentationSizeVar(
-        divRef.current,
-        indentationSizeRef,
-        cachedChildWidths
-      );
+      updateIndentationSizeVar(divRef.current, cachedChildWidths);
     }
   });
 

From dc945f6b81fa075efd13e4945586f27f88772058 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 10:06:05 -0700
Subject: [PATCH 666/814] Fixed a typo in string truncation util

---
 src/devtools/views/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index c04f8bddd1c5..882a1a0ee22e 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -177,7 +177,7 @@ export function truncateText(text: string, maxLength: number): string {
     return (
       text.substr(0, Math.floor(maxLength / 2)) +
       '…' +
-      text.substr(length - Math.ceil(maxLength / 2) + 1)
+      text.substr(length - Math.ceil(maxLength / 2) - 1)
     );
   } else {
     return text;

From 27d4f0b24d0429ae7569cbc837e1bd3d1d895750 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 10:40:10 -0700
Subject: [PATCH 667/814] Fixed box drawing chars comment

---
 src/devtools/views/Components/Tree.js | 48 +++++++++++++--------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index a13d13e740da..01fa9be26011 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -325,39 +325,39 @@ export default function Tree(props: Props) {
 // Indentation size can be adjusted but child width is fixed.
 // We need to adjust indentations so the widest child can fit without overflowing.
 // Sometimes the widest child is also the deepest in the tree:
-//   ┏━━━━━━━━━━━━┓
-//   ┃ <Foo>                ┃
-//   ┃ ••••<Foobar>         ┃
-//   ┃ ••••••••<Baz>        ┃
-//   ┗━━━━━━━━━━━━┛
+//   ┏----------------------┓
+//   ┆ <Foo>                ┆
+//   ┆ ••••<Foobar>         ┆
+//   ┆ ••••••••<Baz>        ┆
+//   ┗----------------------┛
 //
 // But this is not always the case.
 // Even with the above example, a change in indentation may change the overall widest child:
-//   ┏━━━━━━━━━━━━┓
-//   ┃ <Foo>                ┃
-//   ┃ ••<Foobar>           ┃
-//   ┃ ••••<Baz>            ┃
-//   ┗━━━━━━━━━━━━┛
+//   ┏----------------------┓
+//   ┆ <Foo>                ┆
+//   ┆ ••<Foobar>           ┆
+//   ┆ ••••<Baz>            ┆
+//   ┗----------------------┛
 //
 // In extreme cases this difference can be important:
-//   ┏━━━━━━━━━━━━┓
-//   ┃ <ReallyLongName>     ┃
-//   ┃ ••<Foo>              ┃
-//   ┃ ••••<Bar>            ┃
-//   ┃ ••••••<Baz>          ┃
-//   ┃ ••••••••<Qux>        ┃
-//   ┗━━━━━━━━━━━━┛
+//   ┏----------------------┓
+//   ┆ <ReallyLongName>     ┆
+//   ┆ ••<Foo>              ┆
+//   ┆ ••••<Bar>            ┆
+//   ┆ ••••••<Baz>          ┆
+//   ┆ ••••••••<Qux>        ┆
+//   ┗----------------------┛
 //
 // In the above example, the current indentation is fine,
 // but if we naively assumed that the widest element is also the deepest element,
 // we would end up compressing the indentation unnecessarily:
-//   ┏━━━━━━━━━━━━┓
-//   ┃ <ReallyLongName>     ┃
-//   ┃ •<Foo>               ┃
-//   ┃ ••<Bar>              ┃
-//   ┃ •••<Baz>             ┃
-//   ┃ ••••<Qux>            ┃
-//   ┗━━━━━━━━━━━━┛
+//   ┏----------------------┓
+//   ┆ <ReallyLongName>     ┆
+//   ┆ •<Foo>               ┆
+//   ┆ ••<Bar>              ┆
+//   ┆ •••<Baz>             ┆
+//   ┆ ••••<Qux>            ┆
+//   ┗----------------------┛
 //
 // The way we deal with this is to compute the max indentation size that can fit each child,
 // given the child's fixed width and depth within the tree.

From 6b6e571c6808e1ed420f0eafca6083429c1dd9a4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 10:50:07 -0700
Subject: [PATCH 668/814] Added HOC badge to owners list dropdown

---
 src/devtools/views/Components/OwnersStack.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index 90195bb955c6..befae507de14 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -212,6 +212,12 @@ function ElementsDropdown({
         onSelect={() => (isInStore ? selectOwner(owner) : null)}
       >
         {owner.displayName}
+
+        <Badge
+          className={styles.Badge}
+          hocDisplayNames={owner.hocDisplayNames}
+          type={owner.type}
+        />
       </MenuItem>
     );
   }

From dc08e80037cfc05e08b1e4ad82210531afb6a227 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 20:10:30 -0700
Subject: [PATCH 669/814] Cache list rows by Element ID rather than index

This is important since we are caching element sizes by DOM (in a WeakMap). Toggling (as well as insertion/deletion) might otherwise break this in some cases.
---
 src/devtools/views/Components/Tree.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 01fa9be26011..d7fdd810f4eb 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -274,6 +274,11 @@ export default function Tree(props: Props) {
     ]
   );
 
+  const itemKey = useCallback(
+    (index: number) => store.getElementIDAtIndex(index),
+    [store]
+  );
+
   return (
     <TreeFocusedContext.Provider value={treeFocused}>
       <ComponentFiltersModalContextController>
@@ -306,6 +311,7 @@ export default function Tree(props: Props) {
                   innerElementType={InnerElementType}
                   itemCount={numElements}
                   itemData={itemData}
+                  itemKey={itemKey}
                   itemSize={lineHeight}
                   ref={listRef}
                   width={width}

From 8261a3f453b48b012c17653362d0d6c57363ff6a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 20:25:57 -0700
Subject: [PATCH 670/814] Removed Tree padding

---
 src/devtools/views/Components/Element.css | 1 -
 src/devtools/views/Components/Tree.css    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 6e95cccd32d6..bd5a42c7be8a 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -2,7 +2,6 @@
 .InactiveSelectedElement,
 .SelectedElement,
 .HoveredElement {
-  border-radius: 0.25em;
   color: var(--color-component-name);
 }
 .HoveredElement {
diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index fb12b4fae085..58ebe3277b80 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -30,7 +30,6 @@
   width: 100%;
   overflow: auto;
   flex: 1 0 auto;
-  padding: 0.25rem;
 }
 .AutoSizerWrapper:focus {
   outline: none;

From f713265a00ac3ad30dc578dde185ec3fcddc995b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 2 Jun 2019 21:01:24 -0700
Subject: [PATCH 671/814] Cap indentation increase at a max

---
 src/devtools/views/Components/Tree.js | 35 ++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index d7fdd810f4eb..f486a24ef274 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -35,6 +35,13 @@ export type ItemData = {|
   treeFocused: boolean,
 |};
 
+// Never indent more than this number of pixels (even if we have the room).
+const DEFAULT_INDENTATION_SIZE = 12;
+
+// Never increase indentation by more than this number of pixels in a single adjustment.
+// This is to prevent things from "jumping" when a wide item is scrolled out of view.
+const MAX_INDENTATION_SIZE_INCREASE = 0.25;
+
 type Props = {||};
 
 export default function Tree(props: Props) {
@@ -370,12 +377,13 @@ export default function Tree(props: Props) {
 // Then we take the smallest of these indentation sizes...
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
-  cachedChildWidths: WeakMap<HTMLElement, number>
+  cachedChildWidths: WeakMap<HTMLElement, number>,
+  indentationSizeRef: {| current: number |}
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
 
-  let maxIndentationSize: number = 12;
+  let maxIndentationSize: number = DEFAULT_INDENTATION_SIZE;
 
   for (let child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
@@ -400,7 +408,21 @@ function updateIndentationSizeVar(
     maxIndentationSize = Math.min(maxIndentationSize, remainingWidth / depth);
   }
 
-  list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);
+  // It's very important to shrink indentation so that nothing gets clipped.
+  // But it is less important to increase indentation when something wide is scrolled out of view.
+  // In fact, increasing too much leads to visual "jumping" which can be unpleasant.
+  // To avoid this, we only increase by a maximum of some threshold (MAX_INDENTATION_SIZE_INCREASE).
+  const newIndentationSize =
+    indentationSizeRef.current > maxIndentationSize
+      ? maxIndentationSize
+      : Math.min(
+          maxIndentationSize,
+          indentationSizeRef.current + MAX_INDENTATION_SIZE_INCREASE
+        );
+
+  list.style.setProperty('--indentation-size', `${newIndentationSize}px`);
+
+  indentationSizeRef.current = newIndentationSize;
 }
 
 function InnerElementType({ children, style, ...rest }) {
@@ -410,6 +432,7 @@ function InnerElementType({ children, style, ...rest }) {
     () => new WeakMap(),
     []
   );
+  const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -422,7 +445,11 @@ function InnerElementType({ children, style, ...rest }) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
-      updateIndentationSizeVar(divRef.current, cachedChildWidths);
+      updateIndentationSizeVar(
+        divRef.current,
+        cachedChildWidths,
+        indentationSizeRef
+      );
     }
   });
 

From 78cf211286107ba178d163655ea53a0d2274c761 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 08:01:48 -0700
Subject: [PATCH 672/814] Only shrink indentation. Don't increase it again.
 This avoids 'jumping'.

---
 src/devtools/views/Components/Tree.js | 62 +++++++++++++--------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index f486a24ef274..53f9e6dfbdca 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -27,6 +27,9 @@ import TreeFocusedContext from './TreeFocusedContext';
 
 import styles from './Tree.css';
 
+// Never indent more than this number of pixels (even if we have the room).
+const DEFAULT_INDENTATION_SIZE = 12;
+
 export type ItemData = {|
   numElements: number,
   isNavigatingWithKeyboard: boolean,
@@ -35,13 +38,6 @@ export type ItemData = {|
   treeFocused: boolean,
 |};
 
-// Never indent more than this number of pixels (even if we have the room).
-const DEFAULT_INDENTATION_SIZE = 12;
-
-// Never increase indentation by more than this number of pixels in a single adjustment.
-// This is to prevent things from "jumping" when a wide item is scrolled out of view.
-const MAX_INDENTATION_SIZE_INCREASE = 0.25;
-
 type Props = {||};
 
 export default function Tree(props: Props) {
@@ -378,12 +374,19 @@ export default function Tree(props: Props) {
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   cachedChildWidths: WeakMap<HTMLElement, number>,
-  indentationSizeRef: {| current: number |}
+  indentationSizeRef: {| current: number |},
+  prevListWidthRef: {| current: number |}
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
 
-  let maxIndentationSize: number = DEFAULT_INDENTATION_SIZE;
+  // Reset the max indentation size if the width of the tree has increased.
+  if (listWidth > prevListWidthRef.current) {
+    indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
+  }
+  prevListWidthRef.current = listWidth;
+
+  let maxIndentationSize: number = indentationSizeRef.current;
 
   for (let child of innerDiv.children) {
     const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
@@ -408,21 +411,9 @@ function updateIndentationSizeVar(
     maxIndentationSize = Math.min(maxIndentationSize, remainingWidth / depth);
   }
 
-  // It's very important to shrink indentation so that nothing gets clipped.
-  // But it is less important to increase indentation when something wide is scrolled out of view.
-  // In fact, increasing too much leads to visual "jumping" which can be unpleasant.
-  // To avoid this, we only increase by a maximum of some threshold (MAX_INDENTATION_SIZE_INCREASE).
-  const newIndentationSize =
-    indentationSizeRef.current > maxIndentationSize
-      ? maxIndentationSize
-      : Math.min(
-          maxIndentationSize,
-          indentationSizeRef.current + MAX_INDENTATION_SIZE_INCREASE
-        );
-
-  list.style.setProperty('--indentation-size', `${newIndentationSize}px`);
-
-  indentationSizeRef.current = newIndentationSize;
+  indentationSizeRef.current = maxIndentationSize;
+
+  list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);
 }
 
 function InnerElementType({ children, style, ...rest }) {
@@ -432,23 +423,30 @@ function InnerElementType({ children, style, ...rest }) {
     () => new WeakMap(),
     []
   );
-  const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);
 
-  // The list may need to scroll horizontally due to deeply nested elements.
-  // We don't know the maximum scroll width up front, because we're windowing.
-  // What we can do instead, is passively measure the width of the current rows,
-  // and ensure that once we've grown to a new max size, we don't shrink below it.
-  // This improves the user experience when scrolling between wide and narrow rows.
+  // This ref tracks the current indentation size.
+  // We decrease indentation to fit wider/deeper trees.
+  // We indentionally do not increase it again afterward, to avoid the perception of content "jumping"
+  // e.g. clicking to toggle/collapse a row might otherwise jump horizontally beneath your cursor,
+  // e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.
+  //
+  // The one exception for this is when the width of the tree increases.
+  // The user may have resized the window specifically to make more room for DevTools.
+  // In either case, this should reset our max indentation size logic.
+  const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);
+  const prevListWidthRef = useRef<number>(0);
   const divRef = useRef<HTMLDivElement | null>(null);
 
-  // TODO This is a valid warning, but we're ignoring it for the time being.
+  // When we render new content, measure to see if we need to shrink indentation to fit it.
+  // TODO The lint warning is valid, but we are intentionally ignoring it for now.
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
       updateIndentationSizeVar(
         divRef.current,
         cachedChildWidths,
-        indentationSizeRef
+        indentationSizeRef,
+        prevListWidthRef
       );
     }
   });

From a173f4eb85a81b86f1457d901be6fc198e36b728 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 08:51:50 -0700
Subject: [PATCH 673/814] Add HOC component filter

---
 src/backend/renderer.js                       |  4 +++
 .../views/Components/ComponentFiltersModal.js | 30 +++++++++++++++----
 src/types.js                                  | 10 ++++++-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 150fc58c29d3..93422455e4a1 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -4,6 +4,7 @@ import { gte } from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
+  ComponentFilterHOC,
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
@@ -319,6 +320,9 @@ export function attach(
             hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));
           }
           break;
+        case ComponentFilterHOC:
+          hideElementsWithDisplayNames.add(new RegExp('\\('));
+          break;
         default:
           console.warn(
             `Invalid component filter type "${componentFilter.type}"`
diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
index 7797dcbf2428..53af031da5e6 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ b/src/devtools/views/Components/ComponentFiltersModal.js
@@ -15,8 +15,9 @@ import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
 import Store from 'src/devtools/store';
 import {
-  ComponentFilterElementType,
   ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
@@ -32,6 +33,7 @@ import {
 import styles from './ComponentFiltersModal.css';
 
 import type {
+  BooleanComponentFilter,
   ComponentFilter,
   ComponentFilterType,
   ElementType,
@@ -170,15 +172,18 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                     <option value={ComponentFilterLocation}>location</option>
                     <option value={ComponentFilterDisplayName}>name</option>
                     <option value={ComponentFilterElementType}>type</option>
+                    <option value={ComponentFilterHOC}>hoc</option>
                   </select>
                 </td>
                 <td className={styles.TableCell}>
-                  {componentFilter.type === ComponentFilterElementType
-                    ? 'equals'
-                    : 'matches'}
+                  {componentFilter.type === ComponentFilterElementType &&
+                    'equals'}
+                  {(componentFilter.type === ComponentFilterLocation ||
+                    componentFilter.type === ComponentFilterDisplayName) &&
+                    'matches'}
                 </td>
                 <td className={styles.TableCell}>
-                  {componentFilter.type === ComponentFilterElementType ? (
+                  {componentFilter.type === ComponentFilterElementType && (
                     <select
                       className={styles.Select}
                       value={componentFilter.value}
@@ -205,7 +210,9 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
                       <option value={ElementTypeProfiler}>profiler</option>
                       <option value={ElementTypeSuspense}>suspense</option>
                     </select>
-                  ) : (
+                  )}
+                  {(componentFilter.type === ComponentFilterLocation ||
+                    componentFilter.type === ComponentFilterDisplayName) && (
                     <input
                       className={styles.Input}
                       type="text"
@@ -311,6 +318,12 @@ function useComponentFilters() {
               isValid: true,
               value: '',
             };
+          } else if (type === ComponentFilterHOC) {
+            cloned[index] = {
+              type: ComponentFilterHOC,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+            };
           }
         }
         return cloned;
@@ -406,6 +419,11 @@ function useComponentFilters() {
               ...((cloned[index]: any): RegExpComponentFilter),
               isEnabled,
             };
+          } else if (componentFilter.type === ComponentFilterHOC) {
+            cloned[index] = {
+              ...((cloned[index]: any): BooleanComponentFilter),
+              isEnabled,
+            };
           }
         }
         return cloned;
diff --git a/src/types.js b/src/types.js
index 7f89612cc73b..ca1329af9db8 100644
--- a/src/types.js
+++ b/src/types.js
@@ -41,8 +41,9 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export const ComponentFilterElementType = 1;
 export const ComponentFilterDisplayName = 2;
 export const ComponentFilterLocation = 3;
+export const ComponentFilterHOC = 4;
 
-export type ComponentFilterType = 1 | 2 | 3;
+export type ComponentFilterType = 1 | 2 | 3 | 4;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.
@@ -61,6 +62,13 @@ export type RegExpComponentFilter = {|
   value: string,
 |};
 
+export type BooleanComponentFilter = {|
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 4,
+|};
+
 export type ComponentFilter =
+  | BooleanComponentFilter
   | ElementTypeComponentFilter
   | RegExpComponentFilter;

From 6ac558df2df79c750ca2f0af464281ee2712fa84 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 09:32:28 -0700
Subject: [PATCH 674/814] Reset max indentation when entering/exiting the owner
 tree

---
 src/devtools/views/Components/Tree.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 53f9e6dfbdca..fba412465d31 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -430,13 +430,23 @@ function InnerElementType({ children, style, ...rest }) {
   // e.g. clicking to toggle/collapse a row might otherwise jump horizontally beneath your cursor,
   // e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.
   //
-  // The one exception for this is when the width of the tree increases.
+  // There are two exceptions for this:
+  // 1. The first is when the width of the tree increases.
   // The user may have resized the window specifically to make more room for DevTools.
   // In either case, this should reset our max indentation size logic.
+  // 2. The second is when the user enters or exits an owner tree.
   const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);
   const prevListWidthRef = useRef<number>(0);
+  const prevOwnerIDRef = useRef<number | null>(ownerID);
   const divRef = useRef<HTMLDivElement | null>(null);
 
+  // We shouldn't retain this width across different conceptual trees though,
+  // so when the user opens the "owners tree" view, we should discard the previous width.
+  if (ownerID !== prevOwnerIDRef.current) {
+    prevOwnerIDRef.current = ownerID;
+    indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
+  }
+
   // When we render new content, measure to see if we need to shrink indentation to fit it.
   // TODO The lint warning is valid, but we are intentionally ignoring it for now.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -451,13 +461,6 @@ function InnerElementType({ children, style, ...rest }) {
     }
   });
 
-  // We shouldn't retain this width across different conceptual trees though,
-  // so when the user opens the "owners tree" view, we should discard the previous width.
-  const [prevOwnerID, setPrevOwnerID] = useState(ownerID);
-  if (ownerID !== prevOwnerID) {
-    setPrevOwnerID(ownerID);
-  }
-
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.

From fbc6e5d68a7ff394ac4315ce2c24148164ab0fee Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 09:33:48 -0700
Subject: [PATCH 675/814] Removed outdated comment and Eslint rule ignore

---
 src/devtools/views/Components/Tree.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index fba412465d31..266026ac58a5 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -448,8 +448,6 @@ function InnerElementType({ children, style, ...rest }) {
   }
 
   // When we render new content, measure to see if we need to shrink indentation to fit it.
-  // TODO The lint warning is valid, but we are intentionally ignoring it for now.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (divRef.current !== null) {
       updateIndentationSizeVar(

From 06b004b5d49ef97e5ffd213c39e3651195722d19 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 09:39:31 -0700
Subject: [PATCH 676/814] Renamed <Guideline> to <SelectedTreeHighlight>

---
 .../{Guideline.css => SelectedTreeHighlight.css}     |  4 ++--
 .../{Guideline.js => SelectedTreeHighlight.js}       |  4 ++--
 src/devtools/views/Components/Tree.js                |  6 +++---
 src/devtools/views/Settings/SettingsContext.js       | 12 ++++++++++--
 src/devtools/views/root.css                          |  8 ++++----
 5 files changed, 21 insertions(+), 13 deletions(-)
 rename src/devtools/views/Components/{Guideline.css => SelectedTreeHighlight.css} (50%)
 rename src/devtools/views/Components/{Guideline.js => SelectedTreeHighlight.js} (95%)

diff --git a/src/devtools/views/Components/Guideline.css b/src/devtools/views/Components/SelectedTreeHighlight.css
similarity index 50%
rename from src/devtools/views/Components/Guideline.css
rename to src/devtools/views/Components/SelectedTreeHighlight.css
index 3e53e6f3ba9d..19b64a8ef470 100644
--- a/src/devtools/views/Components/Guideline.css
+++ b/src/devtools/views/Components/SelectedTreeHighlight.css
@@ -8,9 +8,9 @@
 }
 
 .Active {
-  background-color: var(--color-guideline-active);
+  background-color: var(--color-selected-tree-highlight-active);
 }
 
 .Inactive {
-  background-color: var(--color-guideline-inactive);
+  background-color: var(--color-selected-tree-highlight-inactive);
 }
diff --git a/src/devtools/views/Components/Guideline.js b/src/devtools/views/Components/SelectedTreeHighlight.js
similarity index 95%
rename from src/devtools/views/Components/Guideline.js
rename to src/devtools/views/Components/SelectedTreeHighlight.js
index 9fbba7c2bb00..4bcdaee72cda 100644
--- a/src/devtools/views/Components/Guideline.js
+++ b/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -8,14 +8,14 @@ import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
 
-import styles from './Guideline.css';
+import styles from './SelectedTreeHighlight.css';
 
 type Data = {|
   startIndex: number,
   stopIndex: number,
 |};
 
-export default function Guideline(_: {||}) {
+export default function SelectedTreeHighlight(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 266026ac58a5..ee92f4589b35 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -22,7 +22,7 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
-import Guideline from './Guideline';
+import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
 
 import styles from './Tree.css';
@@ -466,11 +466,11 @@ function InnerElementType({ children, style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      style={style}
       ref={divRef}
+      style={style}
       {...rest}
     >
-      <Guideline />
+      <SelectedTreeHighlight />
       {children}
     </div>
   );
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 99f552d67f9f..6913a6260a42 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -269,8 +269,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline-active', documentElements);
-  updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
@@ -283,6 +281,16 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-active',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-inactive',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
   updateStyleHelper(theme, 'color-text-selected', documentElements);
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index cd9c3ce9ebab..9a33a39694d2 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -46,8 +46,6 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline-active: rgba(0, 136, 250, 0.1);
-  --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -56,6 +54,8 @@
   --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
+  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
+  --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-selected: #ffffff;
@@ -109,8 +109,6 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
-  --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -119,6 +117,8 @@
   --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
+  --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
+  --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
   --dark-color-text-selected: #ffffff;

From edfc1bb2b31a1e8e85f61127448bad09581dfe7e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 10:46:37 -0700
Subject: [PATCH 677/814] Simplified background highlight style now that corner
 radius has been removed from selected highlight

---
 src/devtools/views/Components/SelectedTreeHighlight.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/SelectedTreeHighlight.js b/src/devtools/views/Components/SelectedTreeHighlight.js
index 4bcdaee72cda..63ffee1faaac 100644
--- a/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -90,9 +90,8 @@ export default function SelectedTreeHighlight(_: {||}) {
       className={treeFocused ? styles.Active : styles.Inactive}
       style={{
         position: 'absolute',
-        top: `${startIndex * lineHeight - lineHeight / 2}px`,
-        height: `${(stopIndex + 1 - startIndex) * lineHeight +
-          lineHeight / 2}px`,
+        top: `${startIndex * lineHeight}px`,
+        height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,
       }}
     />
   );

From ef139a181176d533291d90d2a48d959c1af3597d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 12:47:26 -0700
Subject: [PATCH 678/814] Batched tweaks and bug fixes:

1. Bugfix: Hide tree grouping/background coloring when inside of collapsed subtree.
2. Bugfix: Don't measure and udpate indentation when Components tab is hidden.
3. Tweak: Lower background color for selected subtree in light theme to increase contrast for text.
4. Tweak: Remove FB-specific displayName check/hack since we will address that by modifying the internal require JS transform.
---
 .../views/Components/SelectedTreeHighlight.js   |  5 ++++-
 src/devtools/views/Components/Tree.js           |  5 +++++
 src/devtools/views/root.css                     |  2 +-
 src/utils.js                                    | 17 -----------------
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/devtools/views/Components/SelectedTreeHighlight.js b/src/devtools/views/Components/SelectedTreeHighlight.js
index 63ffee1faaac..9260784384c5 100644
--- a/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -24,7 +24,10 @@ export default function SelectedTreeHighlight(_: {||}) {
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => {
-        if (selectedElementID === null) {
+        if (
+          selectedElementID === null ||
+          store.isInsideCollapsedSubTree(selectedElementID)
+        ) {
           return null;
         }
 
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index ee92f4589b35..d562107a98ec 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -380,6 +380,11 @@ function updateIndentationSizeVar(
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
 
+  // Skip measurements when the Components panel is hidden.
+  if (listWidth === 0) {
+    return;
+  }
+
   // Reset the max indentation size if the width of the tree has increased.
   if (listWidth > prevListWidthRef.current) {
     indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 9a33a39694d2..0f25b7d3219d 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -38,7 +38,7 @@
   --light-color-commit-gradient-text: #000000;
   --light-color-component-name: #6a51b2;
   --light-color-component-name-inverted: #ffffff;
-  --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
+  --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
   --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
   --light-color-component-badge-count: #777d88;
   --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
diff --git a/src/utils.js b/src/utils.js
index d763963ecb85..6e87a97d4f1a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -12,7 +12,6 @@ import {
 
 import type { ComponentFilter, ElementType } from './types';
 
-const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
 // On large trees, encoding takes significant time.
@@ -41,22 +40,6 @@ export function getDisplayName(
     displayName = type.name || fallbackName;
   }
 
-  // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
-  // We need displayName with module name for error reports but it clutters the DevTools.
-  const match = displayName.match(FB_MODULE_RE);
-  if (match) {
-    const componentName = match[1];
-    const moduleName = match[2];
-    if (componentName && moduleName) {
-      if (
-        moduleName === componentName ||
-        moduleName.startsWith(componentName + '.')
-      ) {
-        displayName = componentName;
-      }
-    }
-  }
-
   cachedDisplayNames.set(type, displayName);
   return displayName;
 }

From 95a99867f732174f4027410bbae615f3e3d7a2ab Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 Jun 2019 12:51:04 -0700
Subject: [PATCH 679/814] Decreased contrast of HOC badges in selected props
 panel

---
 src/devtools/views/Components/HocBadges.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/devtools/views/Components/HocBadges.css b/src/devtools/views/Components/HocBadges.css
index fd44b6227c64..4b37be032550 100644
--- a/src/devtools/views/Components/HocBadges.css
+++ b/src/devtools/views/Components/HocBadges.css
@@ -1,10 +1,5 @@
 .HocBadges {
   padding: 0.125rem 0.25rem;
-  background-color: var(--color-background-selected);
-  --color-text: var(--color-text-selected);
-  --color-component-badge-background: var(
-    --color-component-badge-background-inverted
-  );
   user-select: none;
 }
 

From 5963998fbec54872c35ceae45b6ebbaae57254fd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 Jun 2019 07:24:14 -0700
Subject: [PATCH 680/814] Display density preference updates :root fontSize

As a result, paddings and sizes (e.g. tab bar heights) will also be impacted now by this preference. More importantly, Profile charts will also use the line height preference, so the 'comfortable' setting will hopefully make profiling data easier to read.
---
 src/devtools/views/Profiler/ChartNode.js      |  3 +--
 .../views/Profiler/CommitFlamegraph.js        |  5 ++--
 .../Profiler/CommitFlamegraphListItem.js      |  8 +++---
 src/devtools/views/Profiler/CommitRanked.js   |  5 ++--
 .../views/Profiler/CommitRankedListItem.js    |  9 ++++---
 src/devtools/views/Profiler/constants.js      |  3 ---
 .../views/Settings/SettingsContext.js         | 26 ++++++++++++-------
 src/devtools/views/root.css                   |  2 ++
 8 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
index 121f46ecb281..a85f7702a315 100644
--- a/src/devtools/views/Profiler/ChartNode.js
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { textHeight } from './constants';
 
 import styles from './ChartNode.css';
 
@@ -57,7 +56,7 @@ export default function ChartNode({
             opacity: isDimmed ? 0.75 : 1,
             display: width < minWidthToDisplay ? 'none' : 'block',
           }}
-          y={height < textHeight ? -textHeight : 0}
+          y={0}
         >
           <div className={styles.Div} style={textStyle}>
             {label}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index e9f8718d16d9..676a2f1334c7 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitFlamegraph.css';
 
@@ -84,6 +84,7 @@ type Props = {|
 |};
 
 function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
@@ -135,7 +136,7 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
       innerElementType={InnerElementType}
       itemCount={chartData.depth}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitFlamegraphListItem}
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index d5bc61454296..00566d272be1 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -1,10 +1,11 @@
 // @flow
 
-import React, { Fragment, memo, useCallback } from 'react';
+import React, { Fragment, memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, barWidthThreshold } from './constants';
+import { barWidthThreshold } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitFlamegraph';
 
@@ -25,6 +26,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
   } = data;
   const { renderPathNodes, maxSelfDuration, rows } = chartData;
 
+  const { lineHeight } = useContext(SettingsContext);
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
@@ -89,7 +91,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
         return (
           <ChartNode
             color={color}
-            height={barHeight}
+            height={lineHeight}
             isDimmed={index < selectedChartNodeIndex}
             key={id}
             label={label}
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 55e039ae90fc..379dab481d0f 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitRanked.css';
 
@@ -82,6 +82,7 @@ type Props = {|
 |};
 
 function CommitRanked({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
@@ -107,7 +108,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
       innerElementType="svg"
       itemCount={chartData.nodes.length}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitRankedListItem}
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
index 996a20746971..5a25b3c49ddc 100644
--- a/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -1,10 +1,11 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, minBarWidth } from './constants';
+import { minBarWidth } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitRanked';
 
@@ -19,6 +20,8 @@ function CommitRankedListItem({ data, index, style }: Props) {
 
   const node = chartData.nodes[index];
 
+  const { lineHeight } = useContext(SettingsContext);
+
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
@@ -36,7 +39,7 @@ function CommitRankedListItem({ data, index, style }: Props) {
   return (
     <ChartNode
       color={getGradientColor(node.value / chartData.maxValue)}
-      height={barHeight}
+      height={lineHeight}
       isDimmed={index < selectedFiberIndex}
       key={node.id}
       label={node.label}
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index d050882f2abb..664dfe354b34 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,10 +1,7 @@
 // @flow
 
-export const barHeight = 20;
 export const barWidthThreshold = 2;
 export const interactionCommitSize = 10;
 export const interactionLabelWidth = 200;
 export const maxBarWidth = 30;
-export const minBarHeight = 5;
 export const minBarWidth = 5;
-export const textHeight = 18;
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 6913a6260a42..1870ac82aaac 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -5,7 +5,7 @@ import { useLocalStorage } from '../hooks';
 
 import type { BrowserTheme } from '../DevTools';
 
-export type DisplayDensity = 'compact' | 'comfortable';
+export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
 
 type Context = {|
@@ -78,27 +78,24 @@ function SettingsContextController({
     settingsPortalContainer,
   ]);
 
+  const computedStyle = getComputedStyle((document.body: any));
   const comfortableLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--comfortable-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--comfortable-line-height-data'),
     10
   );
   const compactLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--compact-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--compact-line-height-data'),
     10
   );
 
   useLayoutEffect(() => {
     switch (displayDensity) {
-      case 'compact':
-        updateDisplayDensity('compact', documentElements);
-        break;
       case 'comfortable':
         updateDisplayDensity('comfortable', documentElements);
         break;
+      case 'compact':
+        updateDisplayDensity('compact', documentElements);
+        break;
       default:
         throw Error(`Unsupported displayDensity value "${displayDensity}"`);
     }
@@ -193,6 +190,15 @@ function updateDisplayDensity(
   updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
   updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
   updateStyleHelper(displayDensity, 'line-height-data', documentElements);
+
+  // Sizes and paddings/margins are all rem-based,
+  // so update the root font-size as well when the display preference changes.
+  const computedStyle = getComputedStyle((document.body: any));
+  const fontSize = computedStyle.getPropertyValue(
+    `--${displayDensity}-root-font-size`
+  );
+  const root = document.querySelector(':root');
+  ((root: any): HTMLElement).style.fontSize = fontSize;
 }
 
 function updateThemeVariables(
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 0f25b7d3219d..e9690a01bcb3 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -142,6 +142,7 @@
   --compact-font-size-sans-normal: 12px;
   --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
+  --compact-root-font-size: 16px;
 
   /* Comfortable density */
   --comfortable-font-size-monospace-small: 10px;
@@ -151,6 +152,7 @@
   --comfortable-font-size-sans-normal: 14px;
   --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;
+  --comfortable-root-font-size: 20px;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,

From 2245206c4ce7b5c47ba67e677ca7e9127b8c2926 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 Jun 2019 08:56:10 -0700
Subject: [PATCH 681/814] Add source location to debug logging info

---
 src/backend/renderer.js                | 5 ++++-
 src/backend/types.js                   | 2 +-
 src/devtools/views/Components/types.js | 7 ++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 93422455e4a1..ad099cf6df47 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1925,7 +1925,7 @@ export function attach(
       owners,
 
       // Location of component in source coude.
-      source: _debugSource,
+      source: _debugSource || null,
     };
   }
 
@@ -1986,6 +1986,9 @@ export function attach(
     if (nativeNodes !== null) {
       console.log('Nodes:', nativeNodes);
     }
+    if (result.source !== null) {
+      console.log('Location:', result.source);
+    }
     if (window.chrome || /firefox/i.test(navigator.userAgent)) {
       console.log(
         'Right-click any value to save it as a global variable for further inspection.'
diff --git a/src/backend/types.js b/src/backend/types.js
index c9f8db65226b..bce7238efd64 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -191,7 +191,7 @@ export type InspectedElement = {|
   owners: Array<Owner> | null,
 
   // Location of component in source coude.
-  source: Object | null,
+  source: Source | null,
 
   type: ElementType,
 |};
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 31c5c6c793c2..106b184ac5b8 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -44,6 +44,11 @@ export type OwnersList = {|
   owners: Array<Owner> | null,
 |};
 
+export type Source = {|
+  fileName: string,
+  lineNumber: number,
+|};
+
 export type InspectedElement = {|
   id: number,
 
@@ -72,7 +77,7 @@ export type InspectedElement = {|
   owners: Array<Owner> | null,
 
   // Location of component in source coude.
-  source: Object | null,
+  source: Source | null,
 
   type: ElementType,
 |};

From e158768b16d0946e8c33bd36db91794361e05be0 Mon Sep 17 00:00:00 2001
From: Sarhan Aissi <sarhanaissi@gmail.com>
Date: Tue, 4 Jun 2019 22:34:20 +0100
Subject: [PATCH 682/814] fix: remove version_name from Firefox WebExtension
 manifest

---
 shells/browser/shared/build.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 8cc9de1c3a0c..52744b484a14 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -63,7 +63,9 @@ const build = async (tempPath, manifestPath) => {
 
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
   manifest.description += `\n\nCreated from revision ${commit} (${new Date().toLocaleDateString()})`;
-  manifest.version_name = `${commit} (${new Date().toLocaleDateString()})`;
+  if (tempPath.includes('chrome')) {
+    manifest.version_name = `${commit} (${new Date().toLocaleDateString()})`;
+  }
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension

From 1afc83e7cde6315853cfcca3f80d8025acc0a155 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 Jun 2019 14:56:36 -0700
Subject: [PATCH 683/814] Tweaked manifest "version_name" logic

---
 shells/browser/chrome/manifest.json | 1 +
 shells/browser/shared/build.js      | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index c24fe09e86a9..3a1dfb1db4bd 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -3,6 +3,7 @@
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "4.0.0",
+  "version_name": "4.0.0",
 
   "minimum_chrome_version": "49",
 
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 52744b484a14..6d2ec5371f3b 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -60,12 +60,15 @@ const build = async (tempPath, manifestPath) => {
   );
 
   const commit = getGitCommit();
+  const versionDateString = `${commit} (${new Date().toLocaleDateString()})`;
 
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
-  manifest.description += `\n\nCreated from revision ${commit} (${new Date().toLocaleDateString()})`;
-  if (tempPath.includes('chrome')) {
-    manifest.version_name = `${commit} (${new Date().toLocaleDateString()})`;
+  if (manifest.version_name) {
+    manifest.version_name = versionDateString;
+  } else {
+    manifest.description += `\n\nCreated from revision ${versionDateString}`;
   }
+
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension

From 7ef5970b2f5f65d09329fd71fbe7df9fde478d67 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 Jun 2019 17:03:13 -0700
Subject: [PATCH 684/814] Removed __source info from production builds

---
 babel.config.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 12a0e78baf99..3ecbb2d4cced 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -25,12 +25,15 @@ module.exports = api => {
     targets.chrome = minChromeVersion.toString();
     targets.firefox = minFirefoxVersion.toString();
   }
+  const plugins = [
+    ['@babel/plugin-transform-flow-strip-types'],
+    ['@babel/plugin-proposal-class-properties', { loose: false }],
+  ];
+  if (process.env.NODE_ENV === 'development') {
+    plugins.push(['@babel/plugin-transform-react-jsx-source']);
+  }
   return {
-    plugins: [
-      ['@babel/plugin-transform-flow-strip-types'],
-      ['@babel/plugin-proposal-class-properties', { loose: false }],
-      ['@babel/plugin-transform-react-jsx-source'],
-    ],
+    plugins,
     presets: [
       ['@babel/preset-env', { targets }],
       '@babel/preset-react',

From 6ff733873c662086f919baced2bb80fcffc1b343 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 5 Jun 2019 14:27:57 -0700
Subject: [PATCH 685/814] Vendored react-window

---
 package.json                                  |    1 -
 shells/browser/shared/webpack.backend.js      |    1 +
 shells/browser/shared/webpack.config.js       |    1 +
 shells/dev/webpack.config.js                  |    1 +
 vendor/react-window/CHANGELOG.md              |   96 +
 vendor/react-window/LICENSE.md                |   21 +
 vendor/react-window/README.md                 |   88 +
 vendor/react-window/dist/index.cjs.js         | 1894 +++++++++++++++++
 vendor/react-window/dist/index.cjs.js.flow    |    3 +
 vendor/react-window/dist/index.esm.js         | 1883 ++++++++++++++++
 vendor/react-window/dist/index.esm.js.flow    |    3 +
 vendor/react-window/package.json              |  108 +
 vendor/react-window/src/FixedSizeGrid.js      |  210 ++
 vendor/react-window/src/FixedSizeList.js      |  117 +
 vendor/react-window/src/VariableSizeGrid.js   |  503 +++++
 vendor/react-window/src/VariableSizeList.js   |  316 +++
 vendor/react-window/src/areEqual.js           |   18 +
 .../react-window/src/createGridComponent.js   |  834 ++++++++
 .../react-window/src/createListComponent.js   |  670 ++++++
 vendor/react-window/src/domHelpers.js         |   22 +
 vendor/react-window/src/index.js              |    9 +
 vendor/react-window/src/shallowDiffers.js     |   17 +
 .../react-window/src/shouldComponentUpdate.js |   16 +
 vendor/react-window/src/timer.js              |   37 +
 yarn.lock                                     |   15 +-
 25 files changed, 6869 insertions(+), 15 deletions(-)
 create mode 100644 vendor/react-window/CHANGELOG.md
 create mode 100644 vendor/react-window/LICENSE.md
 create mode 100644 vendor/react-window/README.md
 create mode 100644 vendor/react-window/dist/index.cjs.js
 create mode 100644 vendor/react-window/dist/index.cjs.js.flow
 create mode 100644 vendor/react-window/dist/index.esm.js
 create mode 100644 vendor/react-window/dist/index.esm.js.flow
 create mode 100644 vendor/react-window/package.json
 create mode 100644 vendor/react-window/src/FixedSizeGrid.js
 create mode 100644 vendor/react-window/src/FixedSizeList.js
 create mode 100644 vendor/react-window/src/VariableSizeGrid.js
 create mode 100644 vendor/react-window/src/VariableSizeList.js
 create mode 100644 vendor/react-window/src/areEqual.js
 create mode 100644 vendor/react-window/src/createGridComponent.js
 create mode 100644 vendor/react-window/src/createListComponent.js
 create mode 100644 vendor/react-window/src/domHelpers.js
 create mode 100644 vendor/react-window/src/index.js
 create mode 100644 vendor/react-window/src/shallowDiffers.js
 create mode 100644 vendor/react-window/src/shouldComponentUpdate.js
 create mode 100644 vendor/react-window/src/timer.js

diff --git a/package.json b/package.json
index 8dcd8bd6feab..b19d5a8368c9 100644
--- a/package.json
+++ b/package.json
@@ -137,7 +137,6 @@
     "react-is": "^0.0.0-50b50c26f",
     "react-test-renderer": "^0.0.0-50b50c26f",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
     "scheduler": "^0.0.0-50b50c26f",
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index a091b269acdb..c5283522d2d8 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -26,6 +26,7 @@ module.exports = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../../src'),
+      'react-window': resolve(__dirname, '../../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index dd2acc1f3c91..061ca43b43c6 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -31,6 +31,7 @@ module.exports = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../../src'),
+      'react-window': resolve(__dirname, '../../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 6738e1311746..f1106a689a16 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -30,6 +30,7 @@ const config = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../src'),
+      'react-window': resolve(__dirname, '../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/vendor/react-window/CHANGELOG.md b/vendor/react-window/CHANGELOG.md
new file mode 100644
index 000000000000..7030d4ee8e91
--- /dev/null
+++ b/vendor/react-window/CHANGELOG.md
@@ -0,0 +1,96 @@
+Changelog
+------------
+
+### 1.8.0
+* 🎉 Added new "smart" align option for grid and list scroll-to-item methods ([gaearon](https://github.com/gaearon) - [#209](https://github.com/bvaughn/react-window/pull/209))
+
+### 1.7.2
+* 🐛 Add guards to avoid invalid scroll offsets when `scrollTo()` is called with a negative offset or when `scrollToItem` is called with invalid indices (negative or too large).
+
+### 1.7.1
+* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https://github.com/Betree) - [#185](https://github.com/bvaughn/react-window/pull/185))
+
+### 1.7.0
+* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https://github.com/jgoz) - [#174](https://github.com/bvaughn/react-window/pull/174))
+* DEV mode checks for `WeakSet` support before using it to avoid requiring a polyfill for IE11 - ([jgoz](https://github.com/jgoz) - [#167](https://github.com/bvaughn/react-window/pull/167))
+
+### 1.6.2
+* 🐛 Bugfix for RTL  when scrolling back towards the beginning (right) of the list.
+
+### 1.6.1
+* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.
+
+### 1.6.0
+* 🎉 RTL support added for lists and grids. Special thanks to [davidgarsan](https://github.com/davidgarsan) for his support. - [#156](https://github.com/bvaughn/react-window/pull/156)
+* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https://github.com/bvaughn/react-window/issues/153)
+
+### 1.5.2
+* 🐛 Edge case bug fix for `VariableSizeList` and `VariableSizeGrid` when the number of items decreases while a scroll is in progress. - ([iamsolankiamit](https://github.com/iamsolankiamit) - [#138](https://github.com/bvaughn/react-window/pull/138))
+
+### 1.5.1
+* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.
+
+### 1.5.0
+* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https://github.com/bvaughn/react-window/issues/114)
+
+### 1.4.0
+* 🎉 List and Grid components now "overscan" (pre-render) in both directions when scrolling is not active. When scrolling is in progress, cells are only pre-rendered in the direction being scrolled. This change has been made in an effort to reduce visible flicker when scrolling starts without adding additional overhead during scroll (which is the most performance sensitive time).
+* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.
+* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https://github.com/bvaughn/react-window/issues/106)
+* 🎉 Renamed List and Grid `innerTagName` and `outerTagName` props to `innerElementType` and `outerElementType` to formalize support for attaching arbitrary props (e.g. test ids) to List and Grid inner and outer DOM elements. Legacy `innerTagName` and `outerTagName` props will continue to work, but with a deprecation warning in DEV mode.
+* 🐛 List re-renders items if `direction` prop changes. - [#104](https://github.com/bvaughn/react-window/issues/104)
+
+### 1.3.1
+* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https://github.com/bvaughn/react-window/issues/90))
+
+### 1.3.0
+* (Skipped)
+
+### 1.2.4
+* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow
+
+### 1.2.3
+* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.
+
+### 1.2.2
+* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https://github.com/nicholas-l) - [#77](https://github.com/bvaughn/react-window/pull/77))
+
+### 1.2.1
+* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https://github.com/TrySound) - [#66](https://github.com/bvaughn/react-window/pull/66))
+* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.
+
+### 1.2.0
+* 🎉 Flow types added to NPM package. ([TrySound](https://github.com/TrySound) - [#40](https://github.com/bvaughn/react-window/pull/40))
+* 🎉 Relaxed grid `scrollTo` method to make `scrollLeft` and `scrollTop` params _optional_ (so you can only update one axis if desired). - [#63](https://github.com/bvaughn/react-window/pull/63))
+* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https://github.com/bvaughn/react-window/pull/58))
+* Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. ([TrySound](https://github.com/TrySound) - [#48](https://github.com/bvaughn/react-window/pull/48))
+* Remove `overflow:hidden` from inner container ([souporserious](https://github.com/souporserious) - [#56](https://github.com/bvaughn/react-window/pull/56))
+
+### 1.1.2
+* 🐛 Fixed edge case `scrollToItem` bug that caused lists/grids with very few items to have negative scroll offsets.
+
+### 1.1.1
+* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.
+
+### 1.1.0
+* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https://github.com/Andarist) - [#26](https://github.com/bvaughn/react-window/pull/26))
+* 🎉 Add optional `shouldForceUpdate` param reset-index methods to specify `forceUpdate` behavior. ([nihgwu](https://github.com/nihgwu) - [#32](https://github.com/bvaughn/react-window/pull/32))
+
+### 1.0.3
+* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.
+
+### 1.0.2
+
+* 🎉 Enable Babel `annotate-pure-calls` option so that classes compiled by "transform-es2015-classes" are annotated with `#__PURE__`. This enables [UglifyJS to remove them if they are not referenced](https://github.com/mishoo/UglifyJS2/pull/1448), improving dead code elimination in application code. ([Andarist](https://github.com/Andarist) - [#20](https://github.com/bvaughn/react-window/pull/20))
+* 🎉 Update "rollup-plugin-peer-deps-external" and use new `includeDependencies` flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. ([Andarist](https://github.com/Andarist) - [#19](https://github.com/bvaughn/react-window/pull/19))
+* 🎉 Enable [Babel "loose" mode](https://babeljs.io/docs/en/babel-preset-env#loose) to reduce package size (-8%). ([Andarist](https://github.com/Andarist) - [#18](https://github.com/bvaughn/react-window/pull/18))
+
+### 1.0.1
+Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.
+
+# 1.0.0
+Initial release of library. Includes the following components:
+* `FixedSizeGrid`
+* `FixedSizeList`
+* `VariableSizeGrid`
+* `VariableSizeList`
diff --git a/vendor/react-window/LICENSE.md b/vendor/react-window/LICENSE.md
new file mode 100644
index 000000000000..0569d0a7b8b2
--- /dev/null
+++ b/vendor/react-window/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/vendor/react-window/README.md b/vendor/react-window/README.md
new file mode 100644
index 000000000000..8603c9c5bcc5
--- /dev/null
+++ b/vendor/react-window/README.md
@@ -0,0 +1,88 @@
+# react-window
+
+> React components for efficiently rendering large lists and tabular data
+
+[![NPM registry](https://img.shields.io/npm/v/react-window.svg?style=for-the-badge)](https://yarnpkg.com/en/package/react-window) [![Travis](https://img.shields.io/badge/ci-travis-green.svg?style=for-the-badge)](https://travis-ci.org/bvaughn/react-window) [![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](LICENSE.md)
+
+## Install
+
+```bash
+# Yarn
+yarn add react-window
+
+# NPM
+npm install --save react-window
+```
+
+## Usage
+
+Learn more at [react-window.now.sh](https://react-window.now.sh/):
+
+## Related libraries
+
+* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
+* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
+
+## Frequently asked questions
+
+### How is `react-window` different from `react-virtualized`?
+I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
+
+`react-window` is a complete rewrite of `react-virtualized`. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package **smaller**<sup>1</sup> and **faster**. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
+
+If `react-window` provides the functionality your project needs, I would strongly recommend using it instead of `react-virtualized`. However if you need features that only `react-virtualized` provides, you have two options:
+
+1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)
+2. Create a component that decorates one of the `react-window` primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂
+
+<sup>1 - Adding a `react-virtualized` list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a `react-window` list to a CRA project increases the (gzipped) build size by &lt;2 KB.</sup>
+
+### Can a list or a grid fill 100% the width or height of a page?
+
+Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
+
+<img width="336" alt="screen shot 2019-03-07 at 7 29 08 pm" src="https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
+
+### Why is my list blank when I scroll?
+
+If your list looks something like this...
+
+<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152">
+
+...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
+
+<img width="257" alt="screen shot 2019-03-07 at 7 21 48 pm" src="https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png">
+
+### Can I lazy load data for my list?
+
+Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
+
+<img width="368" alt="screen shot 2019-03-07 at 7 32 32 pm" src="https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
+
+### Can I attach custom properties or event handlers?
+
+Yes, using the `outerElementType` prop.
+
+<img width="412" alt="Screen Shot 2019-03-12 at 8 58 09 AM" src="https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
+
+### Can I add gutter or padding between items?
+
+Yes, although it requires a bit of inline styling.
+
+<img width="416" alt="Screen Shot 2019-03-26 at 6 33 56 PM" src="https://user-images.githubusercontent.com/29597/55043972-c14ad700-4ff5-11e9-9caa-2e9f4d85f96c.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
+
+### Does this library support "sticky" items?
+
+Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
+
+## License
+
+MIT © [bvaughn](https://github.com/bvaughn)
diff --git a/vendor/react-window/dist/index.cjs.js b/vendor/react-window/dist/index.cjs.js
new file mode 100644
index 000000000000..08582cdb6fc5
--- /dev/null
+++ b/vendor/react-window/dist/index.cjs.js
@@ -0,0 +1,1894 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
+var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
+var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
+var memoizeOne = _interopDefault(require('memoize-one'));
+var react = require('react');
+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+var now = hasNativePerformanceNow ? function () {
+  return performance.now();
+} : function () {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+
+var size = -1; // This utility copied from "dom-helpers" package.
+
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (size === -1 || recalculate) {
+    var div = document.createElement('div');
+    var style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return size;
+}
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+var defaultItemKey = function defaultItemKey(_ref) {
+  var columnIndex = _ref.columnIndex,
+      data = _ref.data,
+      rowIndex = _ref.rowIndex;
+  return rowIndex + ":" + columnIndex;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsOverscanCount = null;
+var devWarningsTagName = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createGridComponent(_ref2) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref2.getColumnOffset,
+      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref2.getColumnWidth,
+      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
+      getRowHeight = _ref2.getRowHeight,
+      getRowOffset = _ref2.getRowOffset,
+      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref2.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref2.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(Grid, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function Grid(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
+        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
+        scrollUpdateWasRequested: false,
+        verticalScrollDirection: 'forward'
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanColumnStartIndex: overscanColumnStartIndex,
+          overscanColumnStopIndex: overscanColumnStopIndex,
+          overscanRowStartIndex: overscanRowStartIndex,
+          overscanRowStopIndex: overscanRowStopIndex,
+          visibleColumnStartIndex: visibleColumnStartIndex,
+          visibleColumnStopIndex: visibleColumnStopIndex,
+          visibleRowStartIndex: visibleRowStartIndex,
+          visibleRowStopIndex: visibleRowStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (rowIndex, columnIndex) {
+        var _this$props = _this.props,
+            columnWidth = _this$props.columnWidth,
+            direction = _this$props.direction,
+            rowHeight = _this$props.rowHeight;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+
+        var key = rowIndex + ":" + columnIndex;
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(key)) {
+          style = itemStyleCache[key];
+        } else {
+          var _style;
+
+          itemStyleCache[key] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+
+          var calculatedScrollLeft = scrollLeft;
+
+          if (direction === 'rtl') {
+            if (scrollLeft <= 0) {
+              calculatedScrollLeft = -scrollLeft;
+            } else {
+              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+            }
+          }
+
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: calculatedScrollLeft,
+            scrollTop: scrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1);
+        });
+      };
+
+      return _this;
+    }
+
+    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = Grid.prototype;
+
+    _proto.scrollTo = function scrollTo(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+          scrollTop = _ref3.scrollTop;
+
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(function (prevState) {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(_ref4) {
+      var _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
+      var _this$props2 = this.props,
+          columnCount = _this$props2.columnCount,
+          height = _this$props2.height,
+          rowCount = _this$props2.rowCount,
+          width = _this$props2.width;
+      var _this$state = this.state,
+          scrollLeft = _this$state.scrollLeft,
+          scrollTop = _this$state.scrollTop;
+      var scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+
+      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      this.scrollTo({
+        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
+        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
+      });
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props,
+          initialScrollLeft = _this$props3.initialScrollLeft,
+          initialScrollTop = _this$props3.initialScrollTop;
+
+      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
+        this._outerRef.scrollLeft = initialScrollLeft;
+      }
+
+      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
+        this._outerRef.scrollTop = initialScrollTop;
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$state2 = this.state,
+          scrollLeft = _this$state2.scrollLeft,
+          scrollTop = _this$state2.scrollTop,
+          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        this._outerRef.scrollLeft = scrollLeft;
+        this._outerRef.scrollTop = scrollTop;
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          columnCount = _this$props4.columnCount,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          rowCount = _this$props4.rowCount,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling;
+
+      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
+          columnStartIndex = _this$_getHorizontalR[0],
+          columnStopIndex = _this$_getHorizontalR[1];
+
+      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
+          rowStartIndex = _this$_getVerticalRan[0],
+          rowStopIndex = _this$_getVerticalRan[1];
+
+      var items = [];
+
+      if (columnCount > 0 && rowCount) {
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            items.push(react.createElement(children, {
+              columnIndex: _columnIndex,
+              data: itemData,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              key: itemKey({
+                columnIndex: _columnIndex,
+                data: itemData,
+                rowIndex: _rowIndex
+              }),
+              rowIndex: _rowIndex,
+              style: this._getItemStyle(_rowIndex, _columnIndex)
+            }));
+          }
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      return react.createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: this._onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, react.createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: estimatedTotalHeight,
+          pointerEvents: isScrolling ? 'none' : '',
+          width: estimatedTotalWidth
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      var _this$props5 = this.props,
+          columnCount = _this$props5.columnCount,
+          onItemsRendered = _this$props5.onItemsRendered,
+          onScroll = _this$props5.onScroll,
+          rowCount = _this$props5.rowCount;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
+              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
+              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
+              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
+              _visibleColumnStopIndex = _this$_getHorizontalR2[3];
+
+          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
+              _overscanRowStartIndex = _this$_getVerticalRan2[0],
+              _overscanRowStopIndex = _this$_getVerticalRan2[1],
+              _visibleRowStartIndex = _this$_getVerticalRan2[2],
+              _visibleRowStopIndex = _this$_getVerticalRan2[3];
+
+          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        var _this$state3 = this.state,
+            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
+            _scrollLeft = _this$state3.scrollLeft,
+            _scrollTop = _this$state3.scrollTop,
+            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
+            _verticalScrollDirection = _this$state3.verticalScrollDirection;
+
+        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
+      var _this$props6 = this.props,
+          columnCount = _this$props6.columnCount,
+          overscanColumnsCount = _this$props6.overscanColumnsCount,
+          overscanCount = _this$props6.overscanCount,
+          rowCount = _this$props6.rowCount;
+      var _this$state4 = this.state,
+          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
+          isScrolling = _this$state4.isScrolling,
+          scrollLeft = _this$state4.scrollLeft;
+      var overscanCountResolved = overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
+      var _this$props7 = this.props,
+          columnCount = _this$props7.columnCount,
+          overscanCount = _this$props7.overscanCount,
+          overscanRowsCount = _this$props7.overscanRowsCount,
+          rowCount = _this$props7.rowCount;
+      var _this$state5 = this.state,
+          isScrolling = _this$state5.isScrolling,
+          verticalScrollDirection = _this$state5.verticalScrollDirection,
+          scrollTop = _this$state5.scrollTop;
+      var overscanCountResolved = overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return Grid;
+  }(react.PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
+  var children = _ref5.children,
+      direction = _ref5.direction,
+      height = _ref5.height,
+      innerTagName = _ref5.innerTagName,
+      outerTagName = _ref5.outerTagName,
+      overscanCount = _ref5.overscanCount,
+      width = _ref5.width;
+  var instance = _ref6.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnsCount and overscanRowsCount props instead.');
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
+  var rowCount = _ref.rowCount;
+  var rowMetadataMap = _ref2.rowMetadataMap,
+      estimatedRowHeight = _ref2.estimatedRowHeight,
+      lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
+  var columnCount = _ref3.columnCount;
+  var columnMetadataMap = _ref4.columnMetadataMap,
+      estimatedColumnWidth = _ref4.estimatedColumnWidth,
+      lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
+  var itemMetadataMap, itemSize, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = props.columnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = props.rowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
+  var itemMetadataMap, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
+  var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+  var size = itemType === 'column' ? props.width : props.height;
+  var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+
+  var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
+  var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+  var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+
+    case 'end':
+      return minOffset;
+
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+
+  }
+};
+
+var VariableSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getItemMetadata('column', props, index, instanceProps).offset;
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
+    return findNearestItem('column', props, instanceProps, scrollLeft);
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+    var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = scrollLeft + width;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+  getEstimatedTotalHeight: getEstimatedTotalHeight,
+  getEstimatedTotalWidth: getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getItemMetadata('row', props, index, instanceProps).offset;
+  },
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
+    return findNearestItem('row', props, instanceProps, scrollTop);
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+    var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = scrollTop + height;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        columnIndex: columnIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        rowIndex: rowIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterIndices = function (_ref6) {
+      var columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex,
+          _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
+          shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
+
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
+      }
+
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
+      } // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref7) {
+    var columnWidth = _ref7.columnWidth,
+        rowHeight = _ref7.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
+var defaultItemKey$1 = function defaultItemKey(index, data) {
+  return index;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName$1 =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createListComponent(_ref) {
+  var _class, _temp;
+
+  var getItemOffset = _ref.getItemOffset,
+      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
+      getItemSize = _ref.getItemSize,
+      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
+      getStartIndexForOffset = _ref.getStartIndexForOffset,
+      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(List, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function List(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        scrollDirection: 'forward',
+        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex: overscanStartIndex,
+          overscanStopIndex: overscanStopIndex,
+          visibleStartIndex: visibleStartIndex,
+          visibleStopIndex: visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection: scrollDirection,
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (index) {
+        var _this$props = _this.props,
+            direction = _this$props.direction,
+            itemSize = _this$props.itemSize,
+            layout = _this$props.layout;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(index)) {
+          style = itemStyleCache[index];
+        } else {
+          var _style;
+
+          var _offset = getItemOffset(_this.props, index, _this._instanceProps);
+
+          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
+
+          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+          itemStyleCache[index] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScrollHorizontal = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+
+          var scrollOffset = scrollLeft;
+
+          if (direction === 'rtl') {
+            if (scrollLeft <= 0) {
+              scrollOffset = -scrollOffset;
+            } else {
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+            }
+          }
+
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+            scrollOffset: scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._onScrollVertical = function (event) {
+        var scrollTop = event.currentTarget.scrollTop;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+            scrollOffset: scrollTop,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+
+      return _this;
+    }
+
+    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = List.prototype;
+
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function (prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(index, align) {
+      if (align === void 0) {
+        align = 'auto';
+      }
+
+      var itemCount = this.props.itemCount;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props2 = this.props,
+          direction = _this$props2.direction,
+          initialScrollOffset = _this$props2.initialScrollOffset,
+          layout = _this$props2.layout;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          this._outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          this._outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props3 = this.props,
+          direction = _this$props3.direction,
+          layout = _this$props3.layout;
+      var _this$state = this.state,
+          scrollOffset = _this$state.scrollOffset,
+          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          this._outerRef.scrollLeft = scrollOffset;
+        } else {
+          this._outerRef.scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemCount = _this$props4.itemCount,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
+          layout = _this$props4.layout,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
+
+      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+
+      var _this$_getRangeToRend = this._getRangeToRender(),
+          startIndex = _this$_getRangeToRend[0],
+          stopIndex = _this$_getRangeToRend[1];
+
+      var items = [];
+
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(react.createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : undefined,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
+      return react.createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, react.createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? '100%' : estimatedTotalSize,
+          pointerEvents: isScrolling ? 'none' : '',
+          width: isHorizontal ? estimatedTotalSize : '100%'
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        var itemCount = this.props.itemCount;
+
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(),
+              _overscanStartIndex = _this$_getRangeToRend2[0],
+              _overscanStopIndex = _this$_getRangeToRend2[1],
+              _visibleStartIndex = _this$_getRangeToRend2[2],
+              _visibleStopIndex = _this$_getRangeToRend2[3];
+
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        var _this$state2 = this.state,
+            _scrollDirection = _this$state2.scrollDirection,
+            _scrollOffset = _this$state2.scrollOffset,
+            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props5 = this.props,
+          itemCount = _this$props5.itemCount,
+          overscanCount = _this$props5.overscanCount;
+      var _this$state3 = this.state,
+          isScrolling = _this$state3.isScrolling,
+          scrollDirection = _this$state3.scrollDirection,
+          scrollOffset = _this$state3.scrollOffset;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return List;
+  }(react.PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    layout: 'vertical',
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _temp;
+} // NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
+  var children = _ref2.children,
+      direction = _ref2.direction,
+      height = _ref2.height,
+      layout = _ref2.layout,
+      innerTagName = _ref2.innerTagName,
+      outerTagName = _ref2.outerTagName,
+      width = _ref2.width;
+  var instance = _ref3.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    } // TODO Deprecate direction "horizontal"
+
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+
+        break;
+
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
+
+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
+  var _ref = props,
+      itemSize = _ref.itemSize;
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
+  var itemCount = props.itemCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
+  var itemCount = _ref2.itemCount;
+  var itemMetadataMap = _ref3.itemMetadataMap,
+      estimatedItemSize = _ref3.estimatedItemSize,
+      lastMeasuredIndex = _ref3.lastMeasuredIndex;
+  var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+var VariableSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(props, index, instanceProps) {
+    return getItemMetadata$1(props, index, instanceProps).offset;
+  },
+  getItemSize: function getItemSize(props, index, instanceProps) {
+    return instanceProps.itemMetadataMap[index].size;
+  },
+  getEstimatedTotalSize: getEstimatedTotalSize,
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+
+    var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+    var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestItem$1(props, instanceProps, offset);
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        itemCount = props.itemCount,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
+    var maxOffset = scrollOffset + size;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref4 = props,
+        estimatedItemSize = _ref4.estimatedItemSize;
+    var instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
+      lastMeasuredIndex: -1
+    };
+
+    instance.resetAfterIndex = function (index, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref5) {
+    var itemSize = _ref5.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(_ref, index) {
+    var columnWidth = _ref.columnWidth;
+    return index * columnWidth;
+  },
+  getColumnWidth: function getColumnWidth(_ref2, index) {
+    var columnWidth = _ref2.columnWidth;
+    return columnWidth;
+  },
+  getRowOffset: function getRowOffset(_ref3, index) {
+    var rowHeight = _ref3.rowHeight;
+    return index * rowHeight;
+  },
+  getRowHeight: function getRowHeight(_ref4, index) {
+    var rowHeight = _ref4.rowHeight;
+    return rowHeight;
+  },
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
+    var rowCount = _ref5.rowCount,
+        rowHeight = _ref5.rowHeight;
+    return rowHeight * rowCount;
+  },
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
+    var columnCount = _ref6.columnCount,
+        columnWidth = _ref6.columnWidth;
+    return columnWidth * columnCount;
+  },
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
+    var columnCount = _ref7.columnCount,
+        columnWidth = _ref7.columnWidth,
+        width = _ref7.width;
+    var maxOffset = Math.max(0, Math.min(columnCount * columnWidth - width, columnIndex * columnWidth));
+    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
+    var rowHeight = _ref8.rowHeight,
+        height = _ref8.height,
+        rowCount = _ref8.rowCount;
+    var maxOffset = Math.max(0, Math.min(rowCount * rowHeight - height, rowIndex * rowHeight));
+    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
+    var columnWidth = _ref9.columnWidth,
+        columnCount = _ref9.columnCount;
+    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
+    var columnWidth = _ref10.columnWidth,
+        columnCount = _ref10.columnCount,
+        width = _ref10.width;
+    var left = startIndex * columnWidth;
+    return Math.max(0, Math.min(columnCount - 1, startIndex + Math.floor((width + (scrollLeft - left)) / columnWidth)));
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
+    var rowHeight = _ref11.rowHeight,
+        rowCount = _ref11.rowCount;
+    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
+    var rowHeight = _ref12.rowHeight,
+        rowCount = _ref12.rowCount,
+        height = _ref12.height;
+    var left = startIndex * rowHeight;
+    return Math.max(0, Math.min(rowCount - 1, startIndex + Math.floor((height + (scrollTop - left)) / rowHeight)));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref13) {
+    var columnWidth = _ref13.columnWidth,
+        rowHeight = _ref13.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(_ref, index) {
+    var itemSize = _ref.itemSize,
+        size = _ref.size;
+    return index * itemSize;
+  },
+  getItemSize: function getItemSize(_ref2, index) {
+    var itemSize = _ref2.itemSize,
+        size = _ref2.size;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
+    var itemCount = _ref3.itemCount,
+        itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
+    var direction = _ref4.direction,
+        height = _ref4.height,
+        itemCount = _ref4.itemCount,
+        itemSize = _ref4.itemSize,
+        layout = _ref4.layout,
+        width = _ref4.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var maxOffset = Math.max(0, Math.min(itemCount * itemSize - size, index * itemSize));
+    var minOffset = Math.max(0, index * itemSize - size + itemSize);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
+    var itemCount = _ref5.itemCount,
+        itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction,
+        height = _ref6.height,
+        itemCount = _ref6.itemCount,
+        itemSize = _ref6.itemSize,
+        layout = _ref6.layout,
+        width = _ref6.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var offset = startIndex * itemSize;
+    var size = isHorizontal ? width : height;
+    return Math.max(0, Math.min(itemCount - 1, startIndex + Math.floor((size + (scrollOffset - offset)) / itemSize)));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref7) {
+    var itemSize = _ref7.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+function shallowDiffers(prev, next) {
+  for (var attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+
+  for (var _attribute in next) {
+    if (prev[_attribute] !== next[_attribute]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+
+function areEqual(prevProps, nextProps) {
+  var prevStyle = prevProps.style,
+      prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
+
+  var nextStyle = nextProps.style,
+      nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
+
+  return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+
+function shouldComponentUpdate(nextProps, nextState) {
+  return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
+}
+
+exports.VariableSizeGrid = VariableSizeGrid;
+exports.VariableSizeList = VariableSizeList;
+exports.FixedSizeGrid = FixedSizeGrid;
+exports.FixedSizeList = FixedSizeList;
+exports.areEqual = areEqual;
+exports.shouldComponentUpdate = shouldComponentUpdate;
diff --git a/vendor/react-window/dist/index.cjs.js.flow b/vendor/react-window/dist/index.cjs.js.flow
new file mode 100644
index 000000000000..6a6528bbe538
--- /dev/null
+++ b/vendor/react-window/dist/index.cjs.js.flow
@@ -0,0 +1,3 @@
+// @flow
+
+export * from '../src';
diff --git a/vendor/react-window/dist/index.esm.js b/vendor/react-window/dist/index.esm.js
new file mode 100644
index 000000000000..c1c2fab71ac7
--- /dev/null
+++ b/vendor/react-window/dist/index.esm.js
@@ -0,0 +1,1883 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
+import memoizeOne from 'memoize-one';
+import { createElement, PureComponent } from 'react';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+var now = hasNativePerformanceNow ? function () {
+  return performance.now();
+} : function () {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+
+var size = -1; // This utility copied from "dom-helpers" package.
+
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (size === -1 || recalculate) {
+    var div = document.createElement('div');
+    var style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return size;
+}
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+var defaultItemKey = function defaultItemKey(_ref) {
+  var columnIndex = _ref.columnIndex,
+      data = _ref.data,
+      rowIndex = _ref.rowIndex;
+  return rowIndex + ":" + columnIndex;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsOverscanCount = null;
+var devWarningsTagName = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createGridComponent(_ref2) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref2.getColumnOffset,
+      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref2.getColumnWidth,
+      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
+      getRowHeight = _ref2.getRowHeight,
+      getRowOffset = _ref2.getRowOffset,
+      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref2.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref2.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(Grid, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function Grid(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
+        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
+        scrollUpdateWasRequested: false,
+        verticalScrollDirection: 'forward'
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanColumnStartIndex: overscanColumnStartIndex,
+          overscanColumnStopIndex: overscanColumnStopIndex,
+          overscanRowStartIndex: overscanRowStartIndex,
+          overscanRowStopIndex: overscanRowStopIndex,
+          visibleColumnStartIndex: visibleColumnStartIndex,
+          visibleColumnStopIndex: visibleColumnStopIndex,
+          visibleRowStartIndex: visibleRowStartIndex,
+          visibleRowStopIndex: visibleRowStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (rowIndex, columnIndex) {
+        var _this$props = _this.props,
+            columnWidth = _this$props.columnWidth,
+            direction = _this$props.direction,
+            rowHeight = _this$props.rowHeight;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+
+        var key = rowIndex + ":" + columnIndex;
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(key)) {
+          style = itemStyleCache[key];
+        } else {
+          var _style;
+
+          itemStyleCache[key] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+
+          var calculatedScrollLeft = scrollLeft;
+
+          if (direction === 'rtl') {
+            if (scrollLeft <= 0) {
+              calculatedScrollLeft = -scrollLeft;
+            } else {
+              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+            }
+          }
+
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: calculatedScrollLeft,
+            scrollTop: scrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1);
+        });
+      };
+
+      return _this;
+    }
+
+    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = Grid.prototype;
+
+    _proto.scrollTo = function scrollTo(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+          scrollTop = _ref3.scrollTop;
+
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(function (prevState) {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(_ref4) {
+      var _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
+      var _this$props2 = this.props,
+          columnCount = _this$props2.columnCount,
+          height = _this$props2.height,
+          rowCount = _this$props2.rowCount,
+          width = _this$props2.width;
+      var _this$state = this.state,
+          scrollLeft = _this$state.scrollLeft,
+          scrollTop = _this$state.scrollTop;
+      var scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+
+      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      this.scrollTo({
+        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
+        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
+      });
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props,
+          initialScrollLeft = _this$props3.initialScrollLeft,
+          initialScrollTop = _this$props3.initialScrollTop;
+
+      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
+        this._outerRef.scrollLeft = initialScrollLeft;
+      }
+
+      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
+        this._outerRef.scrollTop = initialScrollTop;
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$state2 = this.state,
+          scrollLeft = _this$state2.scrollLeft,
+          scrollTop = _this$state2.scrollTop,
+          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        this._outerRef.scrollLeft = scrollLeft;
+        this._outerRef.scrollTop = scrollTop;
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          columnCount = _this$props4.columnCount,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          rowCount = _this$props4.rowCount,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling;
+
+      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
+          columnStartIndex = _this$_getHorizontalR[0],
+          columnStopIndex = _this$_getHorizontalR[1];
+
+      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
+          rowStartIndex = _this$_getVerticalRan[0],
+          rowStopIndex = _this$_getVerticalRan[1];
+
+      var items = [];
+
+      if (columnCount > 0 && rowCount) {
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            items.push(createElement(children, {
+              columnIndex: _columnIndex,
+              data: itemData,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              key: itemKey({
+                columnIndex: _columnIndex,
+                data: itemData,
+                rowIndex: _rowIndex
+              }),
+              rowIndex: _rowIndex,
+              style: this._getItemStyle(_rowIndex, _columnIndex)
+            }));
+          }
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: this._onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: estimatedTotalHeight,
+          pointerEvents: isScrolling ? 'none' : '',
+          width: estimatedTotalWidth
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      var _this$props5 = this.props,
+          columnCount = _this$props5.columnCount,
+          onItemsRendered = _this$props5.onItemsRendered,
+          onScroll = _this$props5.onScroll,
+          rowCount = _this$props5.rowCount;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
+              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
+              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
+              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
+              _visibleColumnStopIndex = _this$_getHorizontalR2[3];
+
+          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
+              _overscanRowStartIndex = _this$_getVerticalRan2[0],
+              _overscanRowStopIndex = _this$_getVerticalRan2[1],
+              _visibleRowStartIndex = _this$_getVerticalRan2[2],
+              _visibleRowStopIndex = _this$_getVerticalRan2[3];
+
+          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        var _this$state3 = this.state,
+            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
+            _scrollLeft = _this$state3.scrollLeft,
+            _scrollTop = _this$state3.scrollTop,
+            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
+            _verticalScrollDirection = _this$state3.verticalScrollDirection;
+
+        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
+      var _this$props6 = this.props,
+          columnCount = _this$props6.columnCount,
+          overscanColumnsCount = _this$props6.overscanColumnsCount,
+          overscanCount = _this$props6.overscanCount,
+          rowCount = _this$props6.rowCount;
+      var _this$state4 = this.state,
+          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
+          isScrolling = _this$state4.isScrolling,
+          scrollLeft = _this$state4.scrollLeft;
+      var overscanCountResolved = overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
+      var _this$props7 = this.props,
+          columnCount = _this$props7.columnCount,
+          overscanCount = _this$props7.overscanCount,
+          overscanRowsCount = _this$props7.overscanRowsCount,
+          rowCount = _this$props7.rowCount;
+      var _this$state5 = this.state,
+          isScrolling = _this$state5.isScrolling,
+          verticalScrollDirection = _this$state5.verticalScrollDirection,
+          scrollTop = _this$state5.scrollTop;
+      var overscanCountResolved = overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return Grid;
+  }(PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
+  var children = _ref5.children,
+      direction = _ref5.direction,
+      height = _ref5.height,
+      innerTagName = _ref5.innerTagName,
+      outerTagName = _ref5.outerTagName,
+      overscanCount = _ref5.overscanCount,
+      width = _ref5.width;
+  var instance = _ref6.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnsCount and overscanRowsCount props instead.');
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
+  var rowCount = _ref.rowCount;
+  var rowMetadataMap = _ref2.rowMetadataMap,
+      estimatedRowHeight = _ref2.estimatedRowHeight,
+      lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
+  var columnCount = _ref3.columnCount;
+  var columnMetadataMap = _ref4.columnMetadataMap,
+      estimatedColumnWidth = _ref4.estimatedColumnWidth,
+      lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
+  var itemMetadataMap, itemSize, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = props.columnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = props.rowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
+  var itemMetadataMap, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
+  var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+  var size = itemType === 'column' ? props.width : props.height;
+  var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+
+  var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
+  var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+  var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+
+    case 'end':
+      return minOffset;
+
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+
+  }
+};
+
+var VariableSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getItemMetadata('column', props, index, instanceProps).offset;
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
+    return findNearestItem('column', props, instanceProps, scrollLeft);
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+    var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = scrollLeft + width;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+  getEstimatedTotalHeight: getEstimatedTotalHeight,
+  getEstimatedTotalWidth: getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getItemMetadata('row', props, index, instanceProps).offset;
+  },
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
+    return findNearestItem('row', props, instanceProps, scrollTop);
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+    var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = scrollTop + height;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        columnIndex: columnIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        rowIndex: rowIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterIndices = function (_ref6) {
+      var columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex,
+          _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
+          shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
+
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
+      }
+
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
+      } // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref7) {
+    var columnWidth = _ref7.columnWidth,
+        rowHeight = _ref7.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
+var defaultItemKey$1 = function defaultItemKey(index, data) {
+  return index;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName$1 =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createListComponent(_ref) {
+  var _class, _temp;
+
+  var getItemOffset = _ref.getItemOffset,
+      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
+      getItemSize = _ref.getItemSize,
+      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
+      getStartIndexForOffset = _ref.getStartIndexForOffset,
+      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(List, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function List(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        scrollDirection: 'forward',
+        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex: overscanStartIndex,
+          overscanStopIndex: overscanStopIndex,
+          visibleStartIndex: visibleStartIndex,
+          visibleStopIndex: visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection: scrollDirection,
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (index) {
+        var _this$props = _this.props,
+            direction = _this$props.direction,
+            itemSize = _this$props.itemSize,
+            layout = _this$props.layout;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(index)) {
+          style = itemStyleCache[index];
+        } else {
+          var _style;
+
+          var _offset = getItemOffset(_this.props, index, _this._instanceProps);
+
+          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
+
+          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+          itemStyleCache[index] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScrollHorizontal = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+
+          var scrollOffset = scrollLeft;
+
+          if (direction === 'rtl') {
+            if (scrollLeft <= 0) {
+              scrollOffset = -scrollOffset;
+            } else {
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+            }
+          }
+
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+            scrollOffset: scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._onScrollVertical = function (event) {
+        var scrollTop = event.currentTarget.scrollTop;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+            scrollOffset: scrollTop,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+
+      return _this;
+    }
+
+    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = List.prototype;
+
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function (prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(index, align) {
+      if (align === void 0) {
+        align = 'auto';
+      }
+
+      var itemCount = this.props.itemCount;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props2 = this.props,
+          direction = _this$props2.direction,
+          initialScrollOffset = _this$props2.initialScrollOffset,
+          layout = _this$props2.layout;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          this._outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          this._outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props3 = this.props,
+          direction = _this$props3.direction,
+          layout = _this$props3.layout;
+      var _this$state = this.state,
+          scrollOffset = _this$state.scrollOffset,
+          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          this._outerRef.scrollLeft = scrollOffset;
+        } else {
+          this._outerRef.scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemCount = _this$props4.itemCount,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
+          layout = _this$props4.layout,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
+
+      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+
+      var _this$_getRangeToRend = this._getRangeToRender(),
+          startIndex = _this$_getRangeToRend[0],
+          stopIndex = _this$_getRangeToRend[1];
+
+      var items = [];
+
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : undefined,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? '100%' : estimatedTotalSize,
+          pointerEvents: isScrolling ? 'none' : '',
+          width: isHorizontal ? estimatedTotalSize : '100%'
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        var itemCount = this.props.itemCount;
+
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(),
+              _overscanStartIndex = _this$_getRangeToRend2[0],
+              _overscanStopIndex = _this$_getRangeToRend2[1],
+              _visibleStartIndex = _this$_getRangeToRend2[2],
+              _visibleStopIndex = _this$_getRangeToRend2[3];
+
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        var _this$state2 = this.state,
+            _scrollDirection = _this$state2.scrollDirection,
+            _scrollOffset = _this$state2.scrollOffset,
+            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props5 = this.props,
+          itemCount = _this$props5.itemCount,
+          overscanCount = _this$props5.overscanCount;
+      var _this$state3 = this.state,
+          isScrolling = _this$state3.isScrolling,
+          scrollDirection = _this$state3.scrollDirection,
+          scrollOffset = _this$state3.scrollOffset;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return List;
+  }(PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    layout: 'vertical',
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _temp;
+} // NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
+  var children = _ref2.children,
+      direction = _ref2.direction,
+      height = _ref2.height,
+      layout = _ref2.layout,
+      innerTagName = _ref2.innerTagName,
+      outerTagName = _ref2.outerTagName,
+      width = _ref2.width;
+  var instance = _ref3.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    } // TODO Deprecate direction "horizontal"
+
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+
+        break;
+
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
+
+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
+  var _ref = props,
+      itemSize = _ref.itemSize;
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
+  var itemCount = props.itemCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
+  var itemCount = _ref2.itemCount;
+  var itemMetadataMap = _ref3.itemMetadataMap,
+      estimatedItemSize = _ref3.estimatedItemSize,
+      lastMeasuredIndex = _ref3.lastMeasuredIndex;
+  var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+var VariableSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(props, index, instanceProps) {
+    return getItemMetadata$1(props, index, instanceProps).offset;
+  },
+  getItemSize: function getItemSize(props, index, instanceProps) {
+    return instanceProps.itemMetadataMap[index].size;
+  },
+  getEstimatedTotalSize: getEstimatedTotalSize,
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+
+    var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+    var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestItem$1(props, instanceProps, offset);
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        itemCount = props.itemCount,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
+    var maxOffset = scrollOffset + size;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref4 = props,
+        estimatedItemSize = _ref4.estimatedItemSize;
+    var instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
+      lastMeasuredIndex: -1
+    };
+
+    instance.resetAfterIndex = function (index, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref5) {
+    var itemSize = _ref5.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(_ref, index) {
+    var columnWidth = _ref.columnWidth;
+    return index * columnWidth;
+  },
+  getColumnWidth: function getColumnWidth(_ref2, index) {
+    var columnWidth = _ref2.columnWidth;
+    return columnWidth;
+  },
+  getRowOffset: function getRowOffset(_ref3, index) {
+    var rowHeight = _ref3.rowHeight;
+    return index * rowHeight;
+  },
+  getRowHeight: function getRowHeight(_ref4, index) {
+    var rowHeight = _ref4.rowHeight;
+    return rowHeight;
+  },
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
+    var rowCount = _ref5.rowCount,
+        rowHeight = _ref5.rowHeight;
+    return rowHeight * rowCount;
+  },
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
+    var columnCount = _ref6.columnCount,
+        columnWidth = _ref6.columnWidth;
+    return columnWidth * columnCount;
+  },
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
+    var columnCount = _ref7.columnCount,
+        columnWidth = _ref7.columnWidth,
+        width = _ref7.width;
+    var maxOffset = Math.max(0, Math.min(columnCount * columnWidth - width, columnIndex * columnWidth));
+    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
+    var rowHeight = _ref8.rowHeight,
+        height = _ref8.height,
+        rowCount = _ref8.rowCount;
+    var maxOffset = Math.max(0, Math.min(rowCount * rowHeight - height, rowIndex * rowHeight));
+    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
+    var columnWidth = _ref9.columnWidth,
+        columnCount = _ref9.columnCount;
+    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
+    var columnWidth = _ref10.columnWidth,
+        columnCount = _ref10.columnCount,
+        width = _ref10.width;
+    var left = startIndex * columnWidth;
+    return Math.max(0, Math.min(columnCount - 1, startIndex + Math.floor((width + (scrollLeft - left)) / columnWidth)));
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
+    var rowHeight = _ref11.rowHeight,
+        rowCount = _ref11.rowCount;
+    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
+    var rowHeight = _ref12.rowHeight,
+        rowCount = _ref12.rowCount,
+        height = _ref12.height;
+    var left = startIndex * rowHeight;
+    return Math.max(0, Math.min(rowCount - 1, startIndex + Math.floor((height + (scrollTop - left)) / rowHeight)));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref13) {
+    var columnWidth = _ref13.columnWidth,
+        rowHeight = _ref13.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(_ref, index) {
+    var itemSize = _ref.itemSize,
+        size = _ref.size;
+    return index * itemSize;
+  },
+  getItemSize: function getItemSize(_ref2, index) {
+    var itemSize = _ref2.itemSize,
+        size = _ref2.size;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
+    var itemCount = _ref3.itemCount,
+        itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
+    var direction = _ref4.direction,
+        height = _ref4.height,
+        itemCount = _ref4.itemCount,
+        itemSize = _ref4.itemSize,
+        layout = _ref4.layout,
+        width = _ref4.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var maxOffset = Math.max(0, Math.min(itemCount * itemSize - size, index * itemSize));
+    var minOffset = Math.max(0, index * itemSize - size + itemSize);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
+    var itemCount = _ref5.itemCount,
+        itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction,
+        height = _ref6.height,
+        itemCount = _ref6.itemCount,
+        itemSize = _ref6.itemSize,
+        layout = _ref6.layout,
+        width = _ref6.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var offset = startIndex * itemSize;
+    var size = isHorizontal ? width : height;
+    return Math.max(0, Math.min(itemCount - 1, startIndex + Math.floor((size + (scrollOffset - offset)) / itemSize)));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref7) {
+    var itemSize = _ref7.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+function shallowDiffers(prev, next) {
+  for (var attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+
+  for (var _attribute in next) {
+    if (prev[_attribute] !== next[_attribute]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+
+function areEqual(prevProps, nextProps) {
+  var prevStyle = prevProps.style,
+      prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
+
+  var nextStyle = nextProps.style,
+      nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
+
+  return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+
+function shouldComponentUpdate(nextProps, nextState) {
+  return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
+}
+
+export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
diff --git a/vendor/react-window/dist/index.esm.js.flow b/vendor/react-window/dist/index.esm.js.flow
new file mode 100644
index 000000000000..6a6528bbe538
--- /dev/null
+++ b/vendor/react-window/dist/index.esm.js.flow
@@ -0,0 +1,3 @@
+// @flow
+
+export * from '../src';
diff --git a/vendor/react-window/package.json b/vendor/react-window/package.json
new file mode 100644
index 000000000000..adaea80fdb37
--- /dev/null
+++ b/vendor/react-window/package.json
@@ -0,0 +1,108 @@
+{
+  "name": "react-window",
+  "version": "1.8.0",
+  "description":
+    "React components for efficiently rendering large, scrollable lists and tabular data",
+  "author":
+    "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
+  "contributors": [
+    "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)"
+  ],
+  "license": "MIT",
+  "homepage": "http://react-window.now.sh/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bvaughn/react-window.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bvaughn/react-window/issues"
+  },
+  "engines": {
+    "node": ">8.0.0"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "virtual",
+    "window",
+    "windowed",
+    "list",
+    "scrolling",
+    "infinite",
+    "virtualized",
+    "table",
+    "grid",
+    "spreadsheet"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "files": ["dist", "src/*.js"],
+  "scripts": {
+    "flow": "flow check --max-warnings=0 src && flow check website",
+    "precommit": "lint-staged",
+    "prettier": "prettier --write '**/*.{js,json,css}'",
+    "linc": "lint-staged",
+    "lint": "eslint '**/*.js'",
+    "test": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "build:flow":
+      "cp flow-template dist/index.cjs.js.flow && cp flow-template dist/index.esm.js.flow",
+    "build:source": "rollup -c",
+    "build": "del dist && mkdir dist && yarn build:flow && yarn build:source",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build",
+    "website:build": "cd website && yarn build",
+    "website:deploy": "cd website && yarn deploy",
+    "website:run": "cd website && yarn start"
+  },
+  "lint-staged": {
+    "{website,src}/**/*.{js,json,css}": ["prettier --write", "git add"],
+    "**/*.js": "eslint --max-warnings 0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "memoize-one": ">=3.1.1 <6"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-plugin-annotate-pure-calls": "^0.3.0",
+    "cross-env": "^5.1.4",
+    "del-cli": "^1.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-config-standard-react": "^6.0.0",
+    "eslint-plugin-flowtype": "^2.47.1",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^5",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "flow-bin": "^0.80.0",
+    "gh-pages": "^1.1.0",
+    "lint-staged": "^7.0.5",
+    "prettier": "^1.12.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-is": "^16.8.4",
+    "react-scripts": "^1.1.1",
+    "react-test-renderer": "^16.7.0",
+    "rollup": "^1.4.1",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-node-resolve": "^4.0.1"
+  }
+}
diff --git a/vendor/react-window/src/FixedSizeGrid.js b/vendor/react-window/src/FixedSizeGrid.js
new file mode 100644
index 000000000000..452536a9df4b
--- /dev/null
+++ b/vendor/react-window/src/FixedSizeGrid.js
@@ -0,0 +1,210 @@
+// @flow
+
+import createGridComponent from './createGridComponent';
+
+import type { Props, ScrollToAlign } from './createGridComponent';
+
+const FixedSizeGrid = createGridComponent({
+  getColumnOffset: ({ columnWidth }: Props<any>, index: number): number =>
+    index * ((columnWidth: any): number),
+
+  getColumnWidth: ({ columnWidth }: Props<any>, index: number): number =>
+    ((columnWidth: any): number),
+
+  getRowOffset: ({ rowHeight }: Props<any>, index: number): number =>
+    index * ((rowHeight: any): number),
+
+  getRowHeight: ({ rowHeight }: Props<any>, index: number): number =>
+    ((rowHeight: any): number),
+
+  getEstimatedTotalHeight: ({ rowCount, rowHeight }: Props<any>) =>
+    ((rowHeight: any): number) * rowCount,
+
+  getEstimatedTotalWidth: ({ columnCount, columnWidth }: Props<any>) =>
+    ((columnWidth: any): number) * columnCount,
+
+  getOffsetForColumnAndAlignment: (
+    { columnCount, columnWidth, width }: Props<any>,
+    columnIndex: number,
+    align: ScrollToAlign,
+    scrollLeft: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
+  ): number => {
+    const maxOffset = Math.max(
+      0,
+      Math.min(
+        columnCount * ((columnWidth: any): number) - width,
+        columnIndex * ((columnWidth: any): number)
+      )
+    );
+    const minOffset = Math.max(
+      0,
+      columnIndex * ((columnWidth: any): number) -
+        width +
+        scrollbarSize +
+        ((columnWidth: any): number)
+    );
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getOffsetForRowAndAlignment: (
+    { rowHeight, height, rowCount }: Props<any>,
+    rowIndex: number,
+    align: ScrollToAlign,
+    scrollTop: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
+  ): number => {
+    const maxOffset = Math.max(
+      0,
+      Math.min(
+        rowCount * ((rowHeight: any): number) - height,
+        rowIndex * ((rowHeight: any): number)
+      )
+    );
+    const minOffset = Math.max(
+      0,
+      rowIndex * ((rowHeight: any): number) -
+        height +
+        scrollbarSize +
+        ((rowHeight: any): number)
+    );
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getColumnStartIndexForOffset: (
+    { columnWidth, columnCount }: Props<any>,
+    scrollLeft: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(
+        columnCount - 1,
+        Math.floor(scrollLeft / ((columnWidth: any): number))
+      )
+    ),
+
+  getColumnStopIndexForStartIndex: (
+    { columnWidth, columnCount, width }: Props<any>,
+    startIndex: number,
+    scrollLeft: number
+  ): number => {
+    const left = startIndex * ((columnWidth: any): number);
+    return Math.max(
+      0,
+      Math.min(
+        columnCount - 1,
+        startIndex +
+          Math.floor(
+            (width + (scrollLeft - left)) / ((columnWidth: any): number)
+          )
+      )
+    );
+  },
+
+  getRowStartIndexForOffset: (
+    { rowHeight, rowCount }: Props<any>,
+    scrollTop: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(rowCount - 1, Math.floor(scrollTop / ((rowHeight: any): number)))
+    ),
+
+  getRowStopIndexForStartIndex: (
+    { rowHeight, rowCount, height }: Props<any>,
+    startIndex: number,
+    scrollTop: number
+  ): number => {
+    const left = startIndex * ((rowHeight: any): number);
+    return Math.max(
+      0,
+      Math.min(
+        rowCount - 1,
+        startIndex +
+          Math.floor((height + (scrollTop - left)) / ((rowHeight: any): number))
+      )
+    );
+  },
+
+  initInstanceProps(props: Props<any>): any {
+    // Noop
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: true,
+
+  validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error(
+          'An invalid "columnWidth" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${
+              columnWidth === null ? 'null' : typeof columnWidth
+            }" was specified.`
+        );
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error(
+          'An invalid "rowHeight" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default FixedSizeGrid;
diff --git a/vendor/react-window/src/FixedSizeList.js b/vendor/react-window/src/FixedSizeList.js
new file mode 100644
index 000000000000..991f9004305b
--- /dev/null
+++ b/vendor/react-window/src/FixedSizeList.js
@@ -0,0 +1,117 @@
+// @flow
+
+import createListComponent from './createListComponent';
+
+import type { Props, ScrollToAlign } from './createListComponent';
+
+const FixedSizeList = createListComponent({
+  getItemOffset: ({ itemSize, size }: Props<any>, index: number): number =>
+    index * ((itemSize: any): number),
+
+  getItemSize: ({ itemSize, size }: Props<any>, index: number): number =>
+    ((itemSize: any): number),
+
+  getEstimatedTotalSize: ({ itemCount, itemSize }: Props<any>) =>
+    ((itemSize: any): number) * itemCount,
+
+  getOffsetForIndexAndAlignment: (
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number
+  ): number => {
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const maxOffset = Math.max(
+      0,
+      Math.min(
+        itemCount * ((itemSize: any): number) - size,
+        index * ((itemSize: any): number)
+      )
+    );
+    const minOffset = Math.max(
+      0,
+      index * ((itemSize: any): number) - size + ((itemSize: any): number)
+    );
+
+    if (align === 'smart') {
+      if (
+        scrollOffset >= minOffset - size &&
+        scrollOffset <= maxOffset + size
+      ) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getStartIndexForOffset: (
+    { itemCount, itemSize }: Props<any>,
+    offset: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
+    ),
+
+  getStopIndexForStartIndex: (
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
+    startIndex: number,
+    scrollOffset: number
+  ): number => {
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const offset = startIndex * ((itemSize: any): number);
+    const size = (((isHorizontal ? width : height): any): number);
+    return Math.max(
+      0,
+      Math.min(
+        itemCount - 1,
+        startIndex +
+          Math.floor(
+            (size + (scrollOffset - offset)) / ((itemSize: any): number)
+          )
+      )
+    );
+  },
+
+  initInstanceProps(props: Props<any>): any {
+    // Noop
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: true,
+
+  validateProps: ({ itemSize }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error(
+          'An invalid "itemSize" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default FixedSizeList;
diff --git a/vendor/react-window/src/VariableSizeGrid.js b/vendor/react-window/src/VariableSizeGrid.js
new file mode 100644
index 000000000000..a1273e198e0d
--- /dev/null
+++ b/vendor/react-window/src/VariableSizeGrid.js
@@ -0,0 +1,503 @@
+// @flow
+
+import createGridComponent from './createGridComponent';
+
+import type { Props, ScrollToAlign } from './createGridComponent';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+type VariableSizeProps = {|
+  estimatedColumnWidth: number,
+  estimatedRowHeight: number,
+  ...Props<any>,
+|};
+
+type itemSizeGetter = (index: number) => number;
+type ItemType = 'column' | 'row';
+
+type ItemMetadata = {|
+  offset: number,
+  size: number,
+|};
+type ItemMetadataMap = { [index: number]: ItemMetadata };
+type InstanceProps = {|
+  columnMetadataMap: ItemMetadataMap,
+  estimatedColumnWidth: number,
+  estimatedRowHeight: number,
+  lastMeasuredColumnIndex: number,
+  lastMeasuredRowIndex: number,
+  rowMetadataMap: ItemMetadataMap,
+|};
+
+const getEstimatedTotalHeight = (
+  { rowCount }: Props<any>,
+  { rowMetadataMap, estimatedRowHeight, lastMeasuredRowIndex }: InstanceProps
+) => {
+  let totalSizeOfMeasuredRows = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    const itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getEstimatedTotalWidth = (
+  { columnCount }: Props<any>,
+  {
+    columnMetadataMap,
+    estimatedColumnWidth,
+    lastMeasuredColumnIndex,
+  }: InstanceProps
+) => {
+  let totalSizeOfMeasuredRows = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    const itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getItemMetadata = (
+  itemType: ItemType,
+  props: Props<any>,
+  index: number,
+  instanceProps: InstanceProps
+): ItemMetadata => {
+  let itemMetadataMap, itemSize, lastMeasuredIndex;
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = ((props.columnWidth: any): itemSizeGetter);
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = ((props.rowHeight: any): itemSizeGetter);
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    let offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+      let size = itemSize(i);
+
+      itemMetadataMap[i] = {
+        offset,
+        size,
+      };
+
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+const findNearestItem = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  offset: number
+) => {
+  let itemMetadataMap, lastMeasuredIndex;
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  const lastMeasuredItemOffset =
+    lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(
+      itemType,
+      props,
+      instanceProps,
+      lastMeasuredIndex,
+      0,
+      offset
+    );
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(
+      itemType,
+      props,
+      instanceProps,
+      Math.max(0, lastMeasuredIndex),
+      offset
+    );
+  }
+};
+
+const findNearestItemBinarySearch = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  high: number,
+  low: number,
+  offset: number
+): number => {
+  while (low <= high) {
+    const middle = low + Math.floor((high - low) / 2);
+    const currentOffset = getItemMetadata(
+      itemType,
+      props,
+      middle,
+      instanceProps
+    ).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+const findNearestItemExponentialSearch = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  index: number,
+  offset: number
+): number => {
+  const itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  let interval = 1;
+
+  while (
+    index < itemCount &&
+    getItemMetadata(itemType, props, index, instanceProps).offset < offset
+  ) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(
+    itemType,
+    props,
+    instanceProps,
+    Math.min(index, itemCount - 1),
+    Math.floor(index / 2),
+    offset
+  );
+};
+
+const getOffsetForIndexAndAlignment = (
+  itemType: ItemType,
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: InstanceProps,
+  scrollbarSize: number
+): number => {
+  const size = itemType === 'column' ? props.width : props.height;
+  const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
+
+  // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+  const estimatedTotalSize =
+    itemType === 'column'
+      ? getEstimatedTotalWidth(props, instanceProps)
+      : getEstimatedTotalHeight(props, instanceProps);
+
+  const maxOffset = Math.max(
+    0,
+    Math.min(estimatedTotalSize - size, itemMetadata.offset)
+  );
+  const minOffset = Math.max(
+    0,
+    itemMetadata.offset - size + scrollbarSize + itemMetadata.size
+  );
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+    case 'end':
+      return minOffset;
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+  }
+};
+
+const VariableSizeGrid = createGridComponent({
+  getColumnOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata('column', props, index, instanceProps).offset,
+
+  getColumnStartIndexForOffset: (
+    props: Props<any>,
+    scrollLeft: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem('column', props, instanceProps, scrollLeft),
+
+  getColumnStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollLeft: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { columnCount, width } = props;
+
+    const itemMetadata = getItemMetadata(
+      'column',
+      props,
+      startIndex,
+      instanceProps
+    );
+    const maxOffset = scrollLeft + width;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  getColumnWidth: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.columnMetadataMap[index].size,
+
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+
+  getOffsetForColumnAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
+  ): number =>
+    getOffsetForIndexAndAlignment(
+      'column',
+      props,
+      index,
+      align,
+      scrollOffset,
+      instanceProps,
+      scrollbarSize
+    ),
+
+  getOffsetForRowAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
+  ): number =>
+    getOffsetForIndexAndAlignment(
+      'row',
+      props,
+      index,
+      align,
+      scrollOffset,
+      instanceProps,
+      scrollbarSize
+    ),
+
+  getRowOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata('row', props, index, instanceProps).offset,
+
+  getRowHeight: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.rowMetadataMap[index].size,
+
+  getRowStartIndexForOffset: (
+    props: Props<any>,
+    scrollTop: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem('row', props, instanceProps, scrollTop),
+
+  getRowStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollTop: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { rowCount, height } = props;
+
+    const itemMetadata = getItemMetadata(
+      'row',
+      props,
+      startIndex,
+      instanceProps
+    );
+    const maxOffset = scrollTop + height;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps(props: Props<any>, instance: any): InstanceProps {
+    const {
+      estimatedColumnWidth,
+      estimatedRowHeight,
+    } = ((props: any): VariableSizeProps);
+
+    const instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {},
+    };
+
+    instance.resetAfterColumnIndex = (
+      columnIndex: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instance.resetAfterIndices({ columnIndex, shouldForceUpdate });
+    };
+
+    instance.resetAfterRowIndex = (
+      rowIndex: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instance.resetAfterIndices({ rowIndex, shouldForceUpdate });
+    };
+
+    instance.resetAfterIndices = ({
+      columnIndex,
+      rowIndex,
+      shouldForceUpdate = true,
+    }: {
+      columnIndex?: number,
+      rowIndex?: number,
+      shouldForceUpdate: boolean,
+    }) => {
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(
+          instanceProps.lastMeasuredColumnIndex,
+          columnIndex - 1
+        );
+      }
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(
+          instanceProps.lastMeasuredRowIndex,
+          rowIndex - 1
+        );
+      }
+
+      // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: false,
+
+  validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error(
+          'An invalid "columnWidth" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${
+              columnWidth === null ? 'null' : typeof columnWidth
+            }" was specified.`
+        );
+      } else if (typeof rowHeight !== 'function') {
+        throw Error(
+          'An invalid "rowHeight" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default VariableSizeGrid;
diff --git a/vendor/react-window/src/VariableSizeList.js b/vendor/react-window/src/VariableSizeList.js
new file mode 100644
index 000000000000..cebadc663eb2
--- /dev/null
+++ b/vendor/react-window/src/VariableSizeList.js
@@ -0,0 +1,316 @@
+// @flow
+
+import createListComponent from './createListComponent';
+
+import type { Props, ScrollToAlign } from './createListComponent';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+type VariableSizeProps = {|
+  estimatedItemSize: number,
+  ...Props<any>,
+|};
+
+type itemSizeGetter = (index: number) => number;
+
+type ItemMetadata = {|
+  offset: number,
+  size: number,
+|};
+type InstanceProps = {|
+  itemMetadataMap: { [index: number]: ItemMetadata },
+  estimatedItemSize: number,
+  lastMeasuredIndex: number,
+|};
+
+const getItemMetadata = (
+  props: Props<any>,
+  index: number,
+  instanceProps: InstanceProps
+): ItemMetadata => {
+  const { itemSize } = ((props: any): VariableSizeProps);
+  const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
+
+  if (index > lastMeasuredIndex) {
+    let offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+      let size = ((itemSize: any): itemSizeGetter)(i);
+
+      itemMetadataMap[i] = {
+        offset,
+        size,
+      };
+
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+const findNearestItem = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  offset: number
+) => {
+  const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
+
+  const lastMeasuredItemOffset =
+    lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(
+      props,
+      instanceProps,
+      lastMeasuredIndex,
+      0,
+      offset
+    );
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(
+      props,
+      instanceProps,
+      Math.max(0, lastMeasuredIndex),
+      offset
+    );
+  }
+};
+
+const findNearestItemBinarySearch = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  high: number,
+  low: number,
+  offset: number
+): number => {
+  while (low <= high) {
+    const middle = low + Math.floor((high - low) / 2);
+    const currentOffset = getItemMetadata(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+const findNearestItemExponentialSearch = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  index: number,
+  offset: number
+): number => {
+  const { itemCount } = props;
+  let interval = 1;
+
+  while (
+    index < itemCount &&
+    getItemMetadata(props, index, instanceProps).offset < offset
+  ) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(
+    props,
+    instanceProps,
+    Math.min(index, itemCount - 1),
+    Math.floor(index / 2),
+    offset
+  );
+};
+
+const getEstimatedTotalSize = (
+  { itemCount }: Props<any>,
+  { itemMetadataMap, estimatedItemSize, lastMeasuredIndex }: InstanceProps
+) => {
+  let totalSizeOfMeasuredItems = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+const VariableSizeList = createListComponent({
+  getItemOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata(props, index, instanceProps).offset,
+
+  getItemSize: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.itemMetadataMap[index].size,
+
+  getEstimatedTotalSize,
+
+  getOffsetForIndexAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { direction, height, layout, width } = props;
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const itemMetadata = getItemMetadata(props, index, instanceProps);
+
+    // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+    const estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+
+    const maxOffset = Math.max(
+      0,
+      Math.min(estimatedTotalSize - size, itemMetadata.offset)
+    );
+    const minOffset = Math.max(
+      0,
+      itemMetadata.offset - size + itemMetadata.size
+    );
+
+    if (align === 'smart') {
+      if (
+        scrollOffset >= minOffset - size &&
+        scrollOffset <= maxOffset + size
+      ) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getStartIndexForOffset: (
+    props: Props<any>,
+    offset: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem(props, instanceProps, offset),
+
+  getStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollOffset: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { direction, height, itemCount, layout, width } = props;
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
+    const maxOffset = scrollOffset + size;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps(props: Props<any>, instance: any): InstanceProps {
+    const { estimatedItemSize } = ((props: any): VariableSizeProps);
+
+    const instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredIndex: -1,
+    };
+
+    instance.resetAfterIndex = (
+      index: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instanceProps.lastMeasuredIndex = Math.min(
+        instanceProps.lastMeasuredIndex,
+        index - 1
+      );
+
+      // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: false,
+
+  validateProps: ({ itemSize }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error(
+          'An invalid "itemSize" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default VariableSizeList;
diff --git a/vendor/react-window/src/areEqual.js b/vendor/react-window/src/areEqual.js
new file mode 100644
index 000000000000..072951ef6775
--- /dev/null
+++ b/vendor/react-window/src/areEqual.js
@@ -0,0 +1,18 @@
+// @flow
+
+import shallowDiffers from './shallowDiffers';
+
+// Custom comparison function for React.memo().
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+export default function areEqual(
+  prevProps: Object,
+  nextProps: Object
+): boolean {
+  const { style: prevStyle, ...prevRest } = prevProps;
+  const { style: nextStyle, ...nextRest } = nextProps;
+
+  return (
+    !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest)
+  );
+}
diff --git a/vendor/react-window/src/createGridComponent.js b/vendor/react-window/src/createGridComponent.js
new file mode 100644
index 000000000000..c72af855c7b2
--- /dev/null
+++ b/vendor/react-window/src/createGridComponent.js
@@ -0,0 +1,834 @@
+// @flow
+
+import memoizeOne from 'memoize-one';
+import { createElement, PureComponent } from 'react';
+import { cancelTimeout, requestTimeout } from './timer';
+import { getScrollbarSize } from './domHelpers';
+
+import type { TimeoutID } from './timer';
+
+type Direction = 'ltr' | 'rtl';
+export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
+
+type itemSize = number | ((index: number) => number);
+
+type RenderComponentProps<T> = {|
+  columnIndex: number,
+  data: T,
+  isScrolling?: boolean,
+  rowIndex: number,
+  style: Object,
+|};
+export type RenderComponent<T> = React$ComponentType<
+  $Shape<RenderComponentProps<T>>
+>;
+
+type ScrollDirection = 'forward' | 'backward';
+
+type OnItemsRenderedCallback = ({
+  overscanColumnStartIndex: number,
+  overscanColumnStopIndex: number,
+  overscanRowStartIndex: number,
+  overscanRowStopIndex: number,
+  visibleColumnStartIndex: number,
+  visibleColumnStopIndex: number,
+  visibleRowStartIndex: number,
+  visibleRowStopIndex: number,
+}) => void;
+type OnScrollCallback = ({
+  horizontalScrollDirection: ScrollDirection,
+  scrollLeft: number,
+  scrollTop: number,
+  scrollUpdateWasRequested: boolean,
+  verticalScrollDirection: ScrollDirection,
+}) => void;
+
+type ScrollEvent = SyntheticEvent<HTMLDivElement>;
+type ItemStyleCache = { [key: string]: Object };
+
+export type Props<T> = {|
+  children: RenderComponent<T>,
+  className?: string,
+  columnCount: number,
+  columnWidth: itemSize,
+  direction: Direction,
+  height: number,
+  initialScrollLeft?: number,
+  initialScrollTop?: number,
+  innerRef?: any,
+  innerElementType?: React$ElementType,
+  innerTagName?: string, // deprecated
+  itemData: T,
+  itemKey?: (params: {|
+    columnIndex: number,
+    data: T,
+    rowIndex: number,
+  |}) => any,
+  onItemsRendered?: OnItemsRenderedCallback,
+  onScroll?: OnScrollCallback,
+  outerRef?: any,
+  outerElementType?: React$ElementType,
+  outerTagName?: string, // deprecated
+  overscanColumnsCount?: number,
+  overscanCount?: number, // deprecated
+  overscanRowsCount?: number,
+  rowCount: number,
+  rowHeight: itemSize,
+  style?: Object,
+  useIsScrolling: boolean,
+  width: number,
+|};
+
+type State = {|
+  instance: any,
+  isScrolling: boolean,
+  horizontalScrollDirection: ScrollDirection,
+  scrollLeft: number,
+  scrollTop: number,
+  scrollUpdateWasRequested: boolean,
+  verticalScrollDirection: ScrollDirection,
+|};
+
+type getItemOffset = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type getItemSize = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type getEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
+type GetOffsetForItemAndAlignment = (
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: any,
+  scrollbarSize: number
+) => number;
+type GetStartIndexForOffset = (
+  props: Props<any>,
+  offset: number,
+  instanceProps: any
+) => number;
+type GetStopIndexForStartIndex = (
+  props: Props<any>,
+  startIndex: number,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type InitInstanceProps = (props: Props<any>, instance: any) => any;
+type ValidateProps = (props: Props<any>) => void;
+
+const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+const defaultItemKey = ({ columnIndex, data, rowIndex }) =>
+  `${rowIndex}:${columnIndex}`;
+
+// In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+let devWarningsOverscanCount = null;
+let devWarningsTagName = null;
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
+}
+
+export default function createGridComponent({
+  getColumnOffset,
+  getColumnStartIndexForOffset,
+  getColumnStopIndexForStartIndex,
+  getColumnWidth,
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment,
+  getOffsetForRowAndAlignment,
+  getRowHeight,
+  getRowOffset,
+  getRowStartIndexForOffset,
+  getRowStopIndexForStartIndex,
+  initInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange,
+  validateProps,
+}: {|
+  getColumnOffset: getItemOffset,
+  getColumnStartIndexForOffset: GetStartIndexForOffset,
+  getColumnStopIndexForStartIndex: GetStopIndexForStartIndex,
+  getColumnWidth: getItemSize,
+  getEstimatedTotalHeight: getEstimatedTotalSize,
+  getEstimatedTotalWidth: getEstimatedTotalSize,
+  getOffsetForColumnAndAlignment: GetOffsetForItemAndAlignment,
+  getOffsetForRowAndAlignment: GetOffsetForItemAndAlignment,
+  getRowOffset: getItemOffset,
+  getRowHeight: getItemSize,
+  getRowStartIndexForOffset: GetStartIndexForOffset,
+  getRowStopIndexForStartIndex: GetStopIndexForStartIndex,
+  initInstanceProps: InitInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange: boolean,
+  validateProps: ValidateProps,
+|}) {
+  return class Grid<T> extends PureComponent<Props<T>, State> {
+    _instanceProps: any = initInstanceProps(this.props, this);
+    _resetIsScrollingTimeoutId: TimeoutID | null = null;
+    _outerRef: ?HTMLDivElement;
+
+    static defaultProps = {
+      direction: 'ltr',
+      itemData: undefined,
+      useIsScrolling: false,
+    };
+
+    state: State = {
+      instance: this,
+      isScrolling: false,
+      horizontalScrollDirection: 'forward',
+      scrollLeft:
+        typeof this.props.initialScrollLeft === 'number'
+          ? this.props.initialScrollLeft
+          : 0,
+      scrollTop:
+        typeof this.props.initialScrollTop === 'number'
+          ? this.props.initialScrollTop
+          : 0,
+      scrollUpdateWasRequested: false,
+      verticalScrollDirection: 'forward',
+    };
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props: Props<T>) {
+      super(props);
+    }
+
+    static getDerivedStateFromProps(
+      nextProps: Props<T>,
+      prevState: State
+    ): $Shape<State> | null {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    }
+
+    scrollTo({
+      scrollLeft,
+      scrollTop,
+    }: {
+      scrollLeft: number,
+      scrollTop: number,
+    }): void {
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(prevState => {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (
+          prevState.scrollLeft === scrollLeft &&
+          prevState.scrollTop === scrollTop
+        ) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection:
+            prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection:
+            prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+        };
+      }, this._resetIsScrollingDebounced);
+    }
+
+    scrollToItem({
+      align = 'auto',
+      columnIndex,
+      rowIndex,
+    }: {
+      align: ScrollToAlign,
+      columnIndex?: number,
+      rowIndex?: number,
+    }): void {
+      const { columnCount, height, rowCount, width } = this.props;
+      const { scrollLeft, scrollTop } = this.state;
+      const scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      const estimatedTotalHeight = getEstimatedTotalHeight(
+        this.props,
+        this._instanceProps
+      );
+      const estimatedTotalWidth = getEstimatedTotalWidth(
+        this.props,
+        this._instanceProps
+      );
+
+      // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+      const horizontalScrollbarSize =
+        estimatedTotalWidth > width ? scrollbarSize : 0;
+      const verticalScrollbarSize =
+        estimatedTotalHeight > height ? scrollbarSize : 0;
+
+      this.scrollTo({
+        scrollLeft:
+          columnIndex !== undefined
+            ? getOffsetForColumnAndAlignment(
+                this.props,
+                columnIndex,
+                align,
+                scrollLeft,
+                this._instanceProps,
+                verticalScrollbarSize
+              )
+            : scrollLeft,
+        scrollTop:
+          rowIndex !== undefined
+            ? getOffsetForRowAndAlignment(
+                this.props,
+                rowIndex,
+                align,
+                scrollTop,
+                this._instanceProps,
+                horizontalScrollbarSize
+              )
+            : scrollTop,
+      });
+    }
+
+    componentDidMount() {
+      const { initialScrollLeft, initialScrollTop } = this.props;
+      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
+        ((this._outerRef: any): HTMLDivElement).scrollLeft = initialScrollLeft;
+      }
+      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
+        ((this._outerRef: any): HTMLDivElement).scrollTop = initialScrollTop;
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentDidUpdate() {
+      const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        ((this._outerRef: any): HTMLDivElement).scrollLeft = scrollLeft;
+        ((this._outerRef: any): HTMLDivElement).scrollTop = scrollTop;
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    }
+
+    render() {
+      const {
+        children,
+        className,
+        columnCount,
+        direction,
+        height,
+        innerRef,
+        innerElementType,
+        innerTagName,
+        itemData,
+        itemKey = defaultItemKey,
+        outerElementType,
+        outerTagName,
+        rowCount,
+        style,
+        useIsScrolling,
+        width,
+      } = this.props;
+      const { isScrolling } = this.state;
+
+      const [
+        columnStartIndex,
+        columnStopIndex,
+      ] = this._getHorizontalRangeToRender();
+      const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
+
+      const items = [];
+      if (columnCount > 0 && rowCount) {
+        for (
+          let rowIndex = rowStartIndex;
+          rowIndex <= rowStopIndex;
+          rowIndex++
+        ) {
+          for (
+            let columnIndex = columnStartIndex;
+            columnIndex <= columnStopIndex;
+            columnIndex++
+          ) {
+            items.push(
+              createElement(children, {
+                columnIndex,
+                data: itemData,
+                isScrolling: useIsScrolling ? isScrolling : undefined,
+                key: itemKey({ columnIndex, data: itemData, rowIndex }),
+                rowIndex,
+                style: this._getItemStyle(rowIndex, columnIndex),
+              })
+            );
+          }
+        }
+      }
+
+      // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+      const estimatedTotalHeight = getEstimatedTotalHeight(
+        this.props,
+        this._instanceProps
+      );
+      const estimatedTotalWidth = getEstimatedTotalWidth(
+        this.props,
+        this._instanceProps
+      );
+
+      return createElement(
+        outerElementType || outerTagName || 'div',
+        {
+          className,
+          onScroll: this._onScroll,
+          ref: this._outerRefSetter,
+          style: {
+            position: 'relative',
+            height,
+            width,
+            overflow: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            willChange: 'transform',
+            direction,
+            ...style,
+          },
+        },
+        createElement(innerElementType || innerTagName || 'div', {
+          children: items,
+          ref: innerRef,
+          style: {
+            height: estimatedTotalHeight,
+            pointerEvents: isScrolling ? 'none' : '',
+            width: estimatedTotalWidth,
+          },
+        })
+      );
+    }
+
+    _callOnItemsRendered: (
+      overscanColumnStartIndex: number,
+      overscanColumnStopIndex: number,
+      overscanRowStartIndex: number,
+      overscanRowStopIndex: number,
+      visibleColumnStartIndex: number,
+      visibleColumnStopIndex: number,
+      visibleRowStartIndex: number,
+      visibleRowStopIndex: number
+    ) => void;
+    _callOnItemsRendered = memoizeOne(
+      (
+        overscanColumnStartIndex: number,
+        overscanColumnStopIndex: number,
+        overscanRowStartIndex: number,
+        overscanRowStopIndex: number,
+        visibleColumnStartIndex: number,
+        visibleColumnStopIndex: number,
+        visibleRowStartIndex: number,
+        visibleRowStopIndex: number
+      ) =>
+        ((this.props.onItemsRendered: any): OnItemsRenderedCallback)({
+          overscanColumnStartIndex,
+          overscanColumnStopIndex,
+          overscanRowStartIndex,
+          overscanRowStopIndex,
+          visibleColumnStartIndex,
+          visibleColumnStopIndex,
+          visibleRowStartIndex,
+          visibleRowStopIndex,
+        })
+    );
+
+    _callOnScroll: (
+      scrollLeft: number,
+      scrollTop: number,
+      horizontalScrollDirection: ScrollDirection,
+      verticalScrollDirection: ScrollDirection,
+      scrollUpdateWasRequested: boolean
+    ) => void;
+    _callOnScroll = memoizeOne(
+      (
+        scrollLeft: number,
+        scrollTop: number,
+        horizontalScrollDirection: ScrollDirection,
+        verticalScrollDirection: ScrollDirection,
+        scrollUpdateWasRequested: boolean
+      ) =>
+        ((this.props.onScroll: any): OnScrollCallback)({
+          horizontalScrollDirection,
+          scrollLeft,
+          scrollTop,
+          verticalScrollDirection,
+          scrollUpdateWasRequested,
+        })
+    );
+
+    _callPropsCallbacks() {
+      const { columnCount, onItemsRendered, onScroll, rowCount } = this.props;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          const [
+            overscanColumnStartIndex,
+            overscanColumnStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+          ] = this._getHorizontalRangeToRender();
+          const [
+            overscanRowStartIndex,
+            overscanRowStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex,
+          ] = this._getVerticalRangeToRender();
+          this._callOnItemsRendered(
+            overscanColumnStartIndex,
+            overscanColumnStopIndex,
+            overscanRowStartIndex,
+            overscanRowStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex
+          );
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        const {
+          horizontalScrollDirection,
+          scrollLeft,
+          scrollTop,
+          scrollUpdateWasRequested,
+          verticalScrollDirection,
+        } = this.state;
+        this._callOnScroll(
+          scrollLeft,
+          scrollTop,
+          horizontalScrollDirection,
+          verticalScrollDirection,
+          scrollUpdateWasRequested
+        );
+      }
+    }
+
+    // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    _getItemStyle: (rowIndex: number, columnIndex: number) => Object;
+    _getItemStyle = (rowIndex: number, columnIndex: number): Object => {
+      const { columnWidth, direction, rowHeight } = this.props;
+
+      const itemStyleCache = this._getItemStyleCache(
+        shouldResetStyleCacheOnItemSizeChange && columnWidth,
+        shouldResetStyleCacheOnItemSizeChange && direction,
+        shouldResetStyleCacheOnItemSizeChange && rowHeight
+      );
+
+      const key = `${rowIndex}:${columnIndex}`;
+
+      let style;
+      if (itemStyleCache.hasOwnProperty(key)) {
+        style = itemStyleCache[key];
+      } else {
+        itemStyleCache[key] = style = {
+          position: 'absolute',
+          [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
+            this.props,
+            columnIndex,
+            this._instanceProps
+          ),
+          top: getRowOffset(this.props, rowIndex, this._instanceProps),
+          height: getRowHeight(this.props, rowIndex, this._instanceProps),
+          width: getColumnWidth(this.props, columnIndex, this._instanceProps),
+        };
+      }
+
+      return style;
+    };
+
+    _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache;
+    _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({}));
+
+    _getHorizontalRangeToRender(): [number, number, number, number] {
+      const {
+        columnCount,
+        overscanColumnsCount,
+        overscanCount,
+        rowCount,
+      } = this.props;
+      const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
+
+      const overscanCountResolved: number =
+        overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getColumnStartIndexForOffset(
+        this.props,
+        scrollLeft,
+        this._instanceProps
+      );
+      const stopIndex = getColumnStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollLeft,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || horizontalScrollDirection === 'backward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+      const overscanForward =
+        !isScrolling || horizontalScrollDirection === 'forward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _getVerticalRangeToRender(): [number, number, number, number] {
+      const {
+        columnCount,
+        overscanCount,
+        overscanRowsCount,
+        rowCount,
+      } = this.props;
+      const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
+
+      const overscanCountResolved: number =
+        overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getRowStartIndexForOffset(
+        this.props,
+        scrollTop,
+        this._instanceProps
+      );
+      const stopIndex = getRowStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollTop,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || verticalScrollDirection === 'backward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+      const overscanForward =
+        !isScrolling || verticalScrollDirection === 'forward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _onScroll = (event: ScrollEvent): void => {
+      const {
+        clientWidth,
+        scrollLeft,
+        scrollTop,
+        scrollWidth,
+      } = event.currentTarget;
+      this.setState(prevState => {
+        if (
+          prevState.scrollLeft === scrollLeft &&
+          prevState.scrollTop === scrollTop
+        ) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        const { direction } = this.props;
+
+        // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+        // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+        let calculatedScrollLeft = scrollLeft;
+        if (direction === 'rtl') {
+          if (scrollLeft <= 0) {
+            calculatedScrollLeft = -scrollLeft;
+          } else {
+            calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+          }
+        }
+
+        return {
+          isScrolling: true,
+          horizontalScrollDirection:
+            prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: calculatedScrollLeft,
+          scrollTop,
+          verticalScrollDirection:
+            prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _outerRefSetter = (ref: any): void => {
+      const { outerRef } = this.props;
+
+      this._outerRef = ((ref: any): HTMLDivElement);
+
+      if (typeof outerRef === 'function') {
+        outerRef(ref);
+      } else if (
+        outerRef != null &&
+        typeof outerRef === 'object' &&
+        outerRef.hasOwnProperty('current')
+      ) {
+        outerRef.current = ref;
+      }
+    };
+
+    _resetIsScrollingDebounced = () => {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+
+      this._resetIsScrollingTimeoutId = requestTimeout(
+        this._resetIsScrolling,
+        IS_SCROLLING_DEBOUNCE_INTERVAL
+      );
+    };
+
+    _resetIsScrolling = () => {
+      this._resetIsScrollingTimeoutId = null;
+
+      this.setState({ isScrolling: false }, () => {
+        // Clear style cache after state update has been committed.
+        // This way we don't break pure sCU for items that don't use isScrolling param.
+        this._getItemStyleCache(-1);
+      });
+    };
+  };
+}
+
+const validateSharedProps = (
+  {
+    children,
+    direction,
+    height,
+    innerTagName,
+    outerTagName,
+    overscanCount,
+    width,
+  }: Props<any>,
+  { instance }: State
+): void => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn(
+          'The overscanCount prop has been deprecated. ' +
+            'Please use the overscanColumnsCount and overscanRowsCount props instead.'
+        );
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn(
+          'The innerTagName and outerTagName props have been deprecated. ' +
+            'Please use the innerElementType and outerElementType props instead.'
+        );
+      }
+    }
+
+    if (children == null) {
+      throw Error(
+        'An invalid "children" prop has been specified. ' +
+          'Value should be a React component. ' +
+          `"${children === null ? 'null' : typeof children}" was specified.`
+      );
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "direction" prop has been specified. ' +
+            'Value should be either "ltr" or "rtl". ' +
+            `"${direction}" was specified.`
+        );
+    }
+
+    if (typeof width !== 'number') {
+      throw Error(
+        'An invalid "width" prop has been specified. ' +
+          'Grids must specify a number for width. ' +
+          `"${width === null ? 'null' : typeof width}" was specified.`
+      );
+    }
+
+    if (typeof height !== 'number') {
+      throw Error(
+        'An invalid "height" prop has been specified. ' +
+          'Grids must specify a number for height. ' +
+          `"${height === null ? 'null' : typeof height}" was specified.`
+      );
+    }
+  }
+};
diff --git a/vendor/react-window/src/createListComponent.js b/vendor/react-window/src/createListComponent.js
new file mode 100644
index 000000000000..86696a0b803e
--- /dev/null
+++ b/vendor/react-window/src/createListComponent.js
@@ -0,0 +1,670 @@
+// @flow
+
+import memoizeOne from 'memoize-one';
+import { createElement, PureComponent } from 'react';
+import { cancelTimeout, requestTimeout } from './timer';
+
+import type { TimeoutID } from './timer';
+
+export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
+
+type itemSize = number | ((index: number) => number);
+// TODO Deprecate directions "horizontal" and "vertical"
+type Direction = 'ltr' | 'rtl' | 'horizontal' | 'vertical';
+type Layout = 'horizontal' | 'vertical';
+
+type RenderComponentProps<T> = {|
+  data: T,
+  index: number,
+  isScrolling?: boolean,
+  style: Object,
+|};
+type RenderComponent<T> = React$ComponentType<$Shape<RenderComponentProps<T>>>;
+
+type ScrollDirection = 'forward' | 'backward';
+
+type onItemsRenderedCallback = ({
+  overscanStartIndex: number,
+  overscanStopIndex: number,
+  visibleStartIndex: number,
+  visibleStopIndex: number,
+}) => void;
+type onScrollCallback = ({
+  scrollDirection: ScrollDirection,
+  scrollOffset: number,
+  scrollUpdateWasRequested: boolean,
+}) => void;
+
+type ScrollEvent = SyntheticEvent<HTMLDivElement>;
+type ItemStyleCache = { [index: number]: Object };
+
+export type Props<T> = {|
+  children: RenderComponent<T>,
+  className?: string,
+  direction: Direction,
+  height: number | string,
+  initialScrollOffset?: number,
+  innerRef?: any,
+  innerElementType?: React$ElementType,
+  innerTagName?: string, // deprecated
+  itemCount: number,
+  itemData: T,
+  itemKey?: (index: number, data: T) => any,
+  itemSize: itemSize,
+  layout: Layout,
+  onItemsRendered?: onItemsRenderedCallback,
+  onScroll?: onScrollCallback,
+  outerRef?: any,
+  outerElementType?: React$ElementType,
+  outerTagName?: string, // deprecated
+  overscanCount: number,
+  style?: Object,
+  useIsScrolling: boolean,
+  width: number | string,
+|};
+
+type State = {|
+  instance: any,
+  isScrolling: boolean,
+  scrollDirection: ScrollDirection,
+  scrollOffset: number,
+  scrollUpdateWasRequested: boolean,
+|};
+
+type GetItemOffset = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type GetItemSize = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type GetEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
+type GetOffsetForIndexAndAlignment = (
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type GetStartIndexForOffset = (
+  props: Props<any>,
+  offset: number,
+  instanceProps: any
+) => number;
+type GetStopIndexForStartIndex = (
+  props: Props<any>,
+  startIndex: number,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type InitInstanceProps = (props: Props<any>, instance: any) => any;
+type ValidateProps = (props: Props<any>) => void;
+
+const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+const defaultItemKey = (index: number, data: any) => index;
+
+// In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+let devWarningsDirection = null;
+let devWarningsTagName = null;
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
+}
+
+export default function createListComponent({
+  getItemOffset,
+  getEstimatedTotalSize,
+  getItemSize,
+  getOffsetForIndexAndAlignment,
+  getStartIndexForOffset,
+  getStopIndexForStartIndex,
+  initInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange,
+  validateProps,
+}: {|
+  getItemOffset: GetItemOffset,
+  getEstimatedTotalSize: GetEstimatedTotalSize,
+  getItemSize: GetItemSize,
+  getOffsetForIndexAndAlignment: GetOffsetForIndexAndAlignment,
+  getStartIndexForOffset: GetStartIndexForOffset,
+  getStopIndexForStartIndex: GetStopIndexForStartIndex,
+  initInstanceProps: InitInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange: boolean,
+  validateProps: ValidateProps,
+|}) {
+  return class List<T> extends PureComponent<Props<T>, State> {
+    _instanceProps: any = initInstanceProps(this.props, this);
+    _outerRef: ?HTMLDivElement;
+    _resetIsScrollingTimeoutId: TimeoutID | null = null;
+
+    static defaultProps = {
+      direction: 'ltr',
+      itemData: undefined,
+      layout: 'vertical',
+      overscanCount: 2,
+      useIsScrolling: false,
+    };
+
+    state: State = {
+      instance: this,
+      isScrolling: false,
+      scrollDirection: 'forward',
+      scrollOffset:
+        typeof this.props.initialScrollOffset === 'number'
+          ? this.props.initialScrollOffset
+          : 0,
+      scrollUpdateWasRequested: false,
+    };
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props: Props<T>) {
+      super(props);
+    }
+
+    static getDerivedStateFromProps(
+      nextProps: Props<T>,
+      prevState: State
+    ): $Shape<State> | null {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    }
+
+    scrollTo(scrollOffset: number): void {
+      scrollOffset = Math.max(0, scrollOffset);
+
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection:
+            prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true,
+        };
+      }, this._resetIsScrollingDebounced);
+    }
+
+    scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
+      const { itemCount } = this.props;
+      const { scrollOffset } = this.state;
+
+      index = Math.max(0, Math.min(index, itemCount - 1));
+
+      this.scrollTo(
+        getOffsetForIndexAndAlignment(
+          this.props,
+          index,
+          align,
+          scrollOffset,
+          this._instanceProps
+        )
+      );
+    }
+
+    componentDidMount() {
+      const { direction, initialScrollOffset, layout } = this.props;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          ((this
+            ._outerRef: any): HTMLDivElement).scrollLeft = initialScrollOffset;
+        } else {
+          ((this
+            ._outerRef: any): HTMLDivElement).scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentDidUpdate() {
+      const { direction, layout } = this.props;
+      const { scrollOffset, scrollUpdateWasRequested } = this.state;
+
+      if (scrollUpdateWasRequested && this._outerRef !== null) {
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          ((this._outerRef: any): HTMLDivElement).scrollLeft = scrollOffset;
+        } else {
+          ((this._outerRef: any): HTMLDivElement).scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    }
+
+    render() {
+      const {
+        children,
+        className,
+        direction,
+        height,
+        innerRef,
+        innerElementType,
+        innerTagName,
+        itemCount,
+        itemData,
+        itemKey = defaultItemKey,
+        layout,
+        outerElementType,
+        outerTagName,
+        style,
+        useIsScrolling,
+        width,
+      } = this.props;
+      const { isScrolling } = this.state;
+
+      // TODO Deprecate direction "horizontal"
+      const isHorizontal =
+        direction === 'horizontal' || layout === 'horizontal';
+
+      const onScroll = isHorizontal
+        ? this._onScrollHorizontal
+        : this._onScrollVertical;
+
+      const [startIndex, stopIndex] = this._getRangeToRender();
+
+      const items = [];
+      if (itemCount > 0) {
+        for (let index = startIndex; index <= stopIndex; index++) {
+          items.push(
+            createElement(children, {
+              data: itemData,
+              key: itemKey(index, itemData),
+              index,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              style: this._getItemStyle(index),
+            })
+          );
+        }
+      }
+
+      // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+      const estimatedTotalSize = getEstimatedTotalSize(
+        this.props,
+        this._instanceProps
+      );
+
+      return createElement(
+        outerElementType || outerTagName || 'div',
+        {
+          className,
+          onScroll,
+          ref: this._outerRefSetter,
+          style: {
+            position: 'relative',
+            height,
+            width,
+            overflow: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            willChange: 'transform',
+            direction,
+            ...style,
+          },
+        },
+        createElement(innerElementType || innerTagName || 'div', {
+          children: items,
+          ref: innerRef,
+          style: {
+            height: isHorizontal ? '100%' : estimatedTotalSize,
+            pointerEvents: isScrolling ? 'none' : '',
+            width: isHorizontal ? estimatedTotalSize : '100%',
+          },
+        })
+      );
+    }
+
+    _callOnItemsRendered: (
+      overscanStartIndex: number,
+      overscanStopIndex: number,
+      visibleStartIndex: number,
+      visibleStopIndex: number
+    ) => void;
+    _callOnItemsRendered = memoizeOne(
+      (
+        overscanStartIndex: number,
+        overscanStopIndex: number,
+        visibleStartIndex: number,
+        visibleStopIndex: number
+      ) =>
+        ((this.props.onItemsRendered: any): onItemsRenderedCallback)({
+          overscanStartIndex,
+          overscanStopIndex,
+          visibleStartIndex,
+          visibleStopIndex,
+        })
+    );
+
+    _callOnScroll: (
+      scrollDirection: ScrollDirection,
+      scrollOffset: number,
+      scrollUpdateWasRequested: boolean
+    ) => void;
+    _callOnScroll = memoizeOne(
+      (
+        scrollDirection: ScrollDirection,
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+      ) =>
+        ((this.props.onScroll: any): onScrollCallback)({
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested,
+        })
+    );
+
+    _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        const { itemCount } = this.props;
+        if (itemCount > 0) {
+          const [
+            overscanStartIndex,
+            overscanStopIndex,
+            visibleStartIndex,
+            visibleStopIndex,
+          ] = this._getRangeToRender();
+          this._callOnItemsRendered(
+            overscanStartIndex,
+            overscanStopIndex,
+            visibleStartIndex,
+            visibleStopIndex
+          );
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        const {
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested,
+        } = this.state;
+        this._callOnScroll(
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested
+        );
+      }
+    }
+
+    // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    _getItemStyle: (index: number) => Object;
+    _getItemStyle = (index: number): Object => {
+      const { direction, itemSize, layout } = this.props;
+
+      const itemStyleCache = this._getItemStyleCache(
+        shouldResetStyleCacheOnItemSizeChange && itemSize,
+        shouldResetStyleCacheOnItemSizeChange && layout,
+        shouldResetStyleCacheOnItemSizeChange && direction
+      );
+
+      let style;
+      if (itemStyleCache.hasOwnProperty(index)) {
+        style = itemStyleCache[index];
+      } else {
+        const offset = getItemOffset(this.props, index, this._instanceProps);
+        const size = getItemSize(this.props, index, this._instanceProps);
+
+        // TODO Deprecate direction "horizontal"
+        const isHorizontal =
+          direction === 'horizontal' || layout === 'horizontal';
+
+        itemStyleCache[index] = style = {
+          position: 'absolute',
+          [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
+          top: !isHorizontal ? offset : 0,
+          height: !isHorizontal ? size : '100%',
+          width: isHorizontal ? size : '100%',
+        };
+      }
+
+      return style;
+    };
+
+    _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache;
+    _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({}));
+
+    _getRangeToRender(): [number, number, number, number] {
+      const { itemCount, overscanCount } = this.props;
+      const { isScrolling, scrollDirection, scrollOffset } = this.state;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getStartIndexForOffset(
+        this.props,
+        scrollOffset,
+        this._instanceProps
+      );
+      const stopIndex = getStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollOffset,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || scrollDirection === 'backward'
+          ? Math.max(1, overscanCount)
+          : 1;
+      const overscanForward =
+        !isScrolling || scrollDirection === 'forward'
+          ? Math.max(1, overscanCount)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _onScrollHorizontal = (event: ScrollEvent): void => {
+      const { clientWidth, scrollLeft, scrollWidth } = event.currentTarget;
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollLeft) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        const { direction } = this.props;
+
+        // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
+        // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+        let scrollOffset = scrollLeft;
+        if (direction === 'rtl') {
+          if (scrollLeft <= 0) {
+            scrollOffset = -scrollOffset;
+          } else {
+            scrollOffset = scrollWidth - clientWidth - scrollLeft;
+          }
+        }
+
+        return {
+          isScrolling: true,
+          scrollDirection:
+            prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+          scrollOffset,
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _onScrollVertical = (event: ScrollEvent): void => {
+      const { scrollTop } = event.currentTarget;
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollTop) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        return {
+          isScrolling: true,
+          scrollDirection:
+            prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+          scrollOffset: scrollTop,
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _outerRefSetter = (ref: any): void => {
+      const { outerRef } = this.props;
+
+      this._outerRef = ((ref: any): HTMLDivElement);
+
+      if (typeof outerRef === 'function') {
+        outerRef(ref);
+      } else if (
+        outerRef != null &&
+        typeof outerRef === 'object' &&
+        outerRef.hasOwnProperty('current')
+      ) {
+        outerRef.current = ref;
+      }
+    };
+
+    _resetIsScrollingDebounced = () => {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+
+      this._resetIsScrollingTimeoutId = requestTimeout(
+        this._resetIsScrolling,
+        IS_SCROLLING_DEBOUNCE_INTERVAL
+      );
+    };
+
+    _resetIsScrolling = () => {
+      this._resetIsScrollingTimeoutId = null;
+
+      this.setState({ isScrolling: false }, () => {
+        // Clear style cache after state update has been committed.
+        // This way we don't break pure sCU for items that don't use isScrolling param.
+        this._getItemStyleCache(-1, null);
+      });
+    };
+  };
+}
+
+// NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+const validateSharedProps = (
+  {
+    children,
+    direction,
+    height,
+    layout,
+    innerTagName,
+    outerTagName,
+    width,
+  }: Props<any>,
+  { instance }: State
+): void => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn(
+          'The innerTagName and outerTagName props have been deprecated. ' +
+            'Please use the innerElementType and outerElementType props instead.'
+        );
+      }
+    }
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn(
+            'The direction prop should be either "ltr" (default) or "rtl". ' +
+              'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'
+          );
+        }
+        break;
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "direction" prop has been specified. ' +
+            'Value should be either "ltr" or "rtl". ' +
+            `"${direction}" was specified.`
+        );
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "layout" prop has been specified. ' +
+            'Value should be either "horizontal" or "vertical". ' +
+            `"${layout}" was specified.`
+        );
+    }
+
+    if (children == null) {
+      throw Error(
+        'An invalid "children" prop has been specified. ' +
+          'Value should be a React component. ' +
+          `"${children === null ? 'null' : typeof children}" was specified.`
+      );
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error(
+        'An invalid "width" prop has been specified. ' +
+          'Horizontal lists must specify a number for width. ' +
+          `"${width === null ? 'null' : typeof width}" was specified.`
+      );
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error(
+        'An invalid "height" prop has been specified. ' +
+          'Vertical lists must specify a number for height. ' +
+          `"${height === null ? 'null' : typeof height}" was specified.`
+      );
+    }
+  }
+};
diff --git a/vendor/react-window/src/domHelpers.js b/vendor/react-window/src/domHelpers.js
new file mode 100644
index 000000000000..830aba68d79a
--- /dev/null
+++ b/vendor/react-window/src/domHelpers.js
@@ -0,0 +1,22 @@
+// @flow
+
+let size: number = -1;
+
+// This utility copied from "dom-helpers" package.
+export function getScrollbarSize(recalculate?: boolean = false): number {
+  if (size === -1 || recalculate) {
+    const div = document.createElement('div');
+    const style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+
+    ((document.body: any): HTMLBodyElement).appendChild(div);
+
+    size = div.offsetWidth - div.clientWidth;
+
+    ((document.body: any): HTMLBodyElement).removeChild(div);
+  }
+
+  return size;
+}
diff --git a/vendor/react-window/src/index.js b/vendor/react-window/src/index.js
new file mode 100644
index 000000000000..dff39bf11968
--- /dev/null
+++ b/vendor/react-window/src/index.js
@@ -0,0 +1,9 @@
+// @flow
+
+export { default as VariableSizeGrid } from './VariableSizeGrid';
+export { default as VariableSizeList } from './VariableSizeList';
+export { default as FixedSizeGrid } from './FixedSizeGrid';
+export { default as FixedSizeList } from './FixedSizeList';
+
+export { default as areEqual } from './areEqual';
+export { default as shouldComponentUpdate } from './shouldComponentUpdate';
diff --git a/vendor/react-window/src/shallowDiffers.js b/vendor/react-window/src/shallowDiffers.js
new file mode 100644
index 000000000000..c2395f6378f2
--- /dev/null
+++ b/vendor/react-window/src/shallowDiffers.js
@@ -0,0 +1,17 @@
+// @flow
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+export default function shallowDiffers(prev: Object, next: Object): boolean {
+  for (let attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+  for (let attribute in next) {
+    if (prev[attribute] !== next[attribute]) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/vendor/react-window/src/shouldComponentUpdate.js b/vendor/react-window/src/shouldComponentUpdate.js
new file mode 100644
index 000000000000..6b891bd4d2e5
--- /dev/null
+++ b/vendor/react-window/src/shouldComponentUpdate.js
@@ -0,0 +1,16 @@
+// @flow
+
+import areEqual from './areEqual';
+import shallowDiffers from './shallowDiffers';
+
+// Custom shouldComponentUpdate for class components.
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+export default function shouldComponentUpdate(
+  nextProps: Object,
+  nextState: Object
+): boolean {
+  return (
+    !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)
+  );
+}
diff --git a/vendor/react-window/src/timer.js b/vendor/react-window/src/timer.js
new file mode 100644
index 000000000000..aea75e5fd7c2
--- /dev/null
+++ b/vendor/react-window/src/timer.js
@@ -0,0 +1,37 @@
+// @flow
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+
+const hasNativePerformanceNow =
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+const now = hasNativePerformanceNow
+  ? () => performance.now()
+  : () => Date.now();
+
+export type TimeoutID = {|
+  id: AnimationFrameID,
+|};
+
+export function cancelTimeout(timeoutID: TimeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+
+export function requestTimeout(callback: Function, delay: number): TimeoutID {
+  const start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  const timeoutID: TimeoutID = {
+    id: requestAnimationFrame(tick),
+  };
+
+  return timeoutID;
+}
diff --git a/yarn.lock b/yarn.lock
index 71262041f713..2304d556a7c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -758,7 +758,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@7.3.1", "@babel/runtime@^7.0.0":
+"@babel/runtime@7.3.1":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
   integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
@@ -8119,11 +8119,6 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^2.0.0"
 
-"memoize-one@>=3.1.1 <6":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
-  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
-
 memoize-one@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -9754,14 +9749,6 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.0.tgz#08196d1e0749fe60d0b29bb94ae682d37666e620"
-  integrity sha512-impIDEhm3+9/Y8ctiFaUI07a8Y/1jG0U4ONRUmYe7IsU+UQ2B0Ayyfbr+3R3nwAJpVGHx5pfI5SoDBt1o07YFw==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    memoize-one ">=3.1.1 <6"
-
 react@^0.0.0-50b50c26f:
   version "0.0.0-50b50c26f"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-50b50c26f.tgz#b782b579ce1f5d8bd696c5e45c744714ebecb111"

From 9d90189ee3129f3a6169fb510ca33bcf69fd200c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 5 Jun 2019 14:30:43 -0700
Subject: [PATCH 686/814] react-window sync flushes scroll updates

---
 vendor/react-window/dist/index.esm.js | 138 ++++++++++++++------------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/vendor/react-window/dist/index.esm.js b/vendor/react-window/dist/index.esm.js
index c1c2fab71ac7..19b1884d12ca 100644
--- a/vendor/react-window/dist/index.esm.js
+++ b/vendor/react-window/dist/index.esm.js
@@ -3,6 +3,7 @@ import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
+import { flushSync } from 'react-dom';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 
 // Animation frame based implementation of setTimeout.
@@ -182,37 +183,40 @@ function createGridComponent(_ref2) {
             scrollTop = _event$currentTarget.scrollTop,
             scrollWidth = _event$currentTarget.scrollWidth;
 
-        _this.setState(function (prevState) {
-          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
-            // Scroll position may have been updated by cDM/cDU,
-            // In which case we don't need to trigger another render,
-            // And we don't want to update state.isScrolling.
-            return null;
-          }
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            }
 
-          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+            var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+            // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
 
-          var calculatedScrollLeft = scrollLeft;
+            var calculatedScrollLeft = scrollLeft;
 
-          if (direction === 'rtl') {
-            if (scrollLeft <= 0) {
-              calculatedScrollLeft = -scrollLeft;
-            } else {
-              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+            if (direction === 'rtl') {
+              if (scrollLeft <= 0) {
+                calculatedScrollLeft = -scrollLeft;
+              } else {
+                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+              }
             }
-          }
 
-          return {
-            isScrolling: true,
-            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-            scrollLeft: calculatedScrollLeft,
-            scrollTop: scrollTop,
-            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
+            return {
+              isScrolling: true,
+              horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+              scrollLeft: calculatedScrollLeft,
+              scrollTop: scrollTop,
+              verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
       };
 
       _this._outerRefSetter = function (ref) {
@@ -1023,55 +1027,61 @@ function createListComponent(_ref) {
             scrollLeft = _event$currentTarget.scrollLeft,
             scrollWidth = _event$currentTarget.scrollWidth;
 
-        _this.setState(function (prevState) {
-          if (prevState.scrollOffset === scrollLeft) {
-            // Scroll position may have been updated by cDM/cDU,
-            // In which case we don't need to trigger another render,
-            // And we don't want to update state.isScrolling.
-            return null;
-          }
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollOffset === scrollLeft) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            }
 
-          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
-          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+            var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
+            // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
 
-          var scrollOffset = scrollLeft;
+            var scrollOffset = scrollLeft;
 
-          if (direction === 'rtl') {
-            if (scrollLeft <= 0) {
-              scrollOffset = -scrollOffset;
-            } else {
-              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+            if (direction === 'rtl') {
+              if (scrollLeft <= 0) {
+                scrollOffset = -scrollOffset;
+              } else {
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              }
             }
-          }
 
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
-            scrollOffset: scrollOffset,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
+            return {
+              isScrolling: true,
+              scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+              scrollOffset: scrollOffset,
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
       };
 
       _this._onScrollVertical = function (event) {
         var scrollTop = event.currentTarget.scrollTop;
 
-        _this.setState(function (prevState) {
-          if (prevState.scrollOffset === scrollTop) {
-            // Scroll position may have been updated by cDM/cDU,
-            // In which case we don't need to trigger another render,
-            // And we don't want to update state.isScrolling.
-            return null;
-          }
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollOffset === scrollTop) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            }
 
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
-            scrollOffset: scrollTop,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
+            return {
+              isScrolling: true,
+              scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+              scrollOffset: scrollTop,
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
       };
 
       _this._outerRefSetter = function (ref) {

From dc9b0810f9f6a2969fb2bb31dd51e3def97456db Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 5 Jun 2019 14:33:24 -0700
Subject: [PATCH 687/814] Changed react-window alias

---
 package.json                             |  1 +
 shells/browser/shared/webpack.backend.js |  1 -
 shells/browser/shared/webpack.config.js  |  1 -
 shells/dev/webpack.config.js             |  1 -
 yarn.lock                                | 23 +++++++++++++++++++++++
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index b19d5a8368c9..9e9dbc833233 100644
--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
     "react-is": "^0.0.0-50b50c26f",
     "react-test-renderer": "^0.0.0-50b50c26f",
     "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "./vendor/react-window",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
     "scheduler": "^0.0.0-50b50c26f",
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index c5283522d2d8..a091b269acdb 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -26,7 +26,6 @@ module.exports = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../../src'),
-      'react-window': resolve(__dirname, '../../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 061ca43b43c6..dd2acc1f3c91 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -31,7 +31,6 @@ module.exports = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../../src'),
-      'react-window': resolve(__dirname, '../../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index f1106a689a16..6738e1311746 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -30,7 +30,6 @@ const config = {
   resolve: {
     alias: {
       src: resolve(__dirname, '../../src'),
-      'react-window': resolve(__dirname, '../../vendor/react-window'),
     },
   },
   plugins: [
diff --git a/yarn.lock b/yarn.lock
index 2304d556a7c5..b5c7b8d6d375 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -765,6 +765,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.0.0":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
+  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.0.0", "@babel/template@^7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
@@ -8119,6 +8126,11 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^2.0.0"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
+  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
+
 memoize-one@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -9749,6 +9761,12 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
+react-window@./vendor/react-window:
+  version "1.8.0"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^0.0.0-50b50c26f:
   version "0.0.0-50b50c26f"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-50b50c26f.tgz#b782b579ce1f5d8bd696c5e45c744714ebecb111"
@@ -9941,6 +9959,11 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+
 regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"

From d1a88ffc5cead233728f5c7d80b197d58d2b0984 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 5 Jun 2019 14:36:01 -0700
Subject: [PATCH 688/814] Re-add plugin-transform-react-jsx-source plugin for
 tests

---
 babel.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/babel.config.js b/babel.config.js
index 3ecbb2d4cced..1d705076ff9f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -29,7 +29,7 @@ module.exports = api => {
     ['@babel/plugin-transform-flow-strip-types'],
     ['@babel/plugin-proposal-class-properties', { loose: false }],
   ];
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV !== 'production') {
     plugins.push(['@babel/plugin-transform-react-jsx-source']);
   }
   return {

From a987206a3698effcc064c59bd7ff518ba5d870f6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 6 Jun 2019 10:39:07 -0700
Subject: [PATCH 689/814] Fixed an overflow bug. Added mode-specific CSS style
 for Firefox.

---
 src/devtools/views/Components/Tree.css         |  2 +-
 src/devtools/views/Settings/SettingsContext.js | 15 +++++++++++++--
 src/devtools/views/root.css                    |  4 ++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/Tree.css b/src/devtools/views/Components/Tree.css
index 58ebe3277b80..64a5983ee06d 100644
--- a/src/devtools/views/Components/Tree.css
+++ b/src/devtools/views/Components/Tree.css
@@ -28,7 +28,7 @@
 
 .AutoSizerWrapper {
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
   flex: 1 0 auto;
 }
 .AutoSizerWrapper:focus {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 1870ac82aaac..d18ffe0dbffa 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -197,8 +197,8 @@ function updateDisplayDensity(
   const fontSize = computedStyle.getPropertyValue(
     `--${displayDensity}-root-font-size`
   );
-  const root = document.querySelector(':root');
-  ((root: any): HTMLElement).style.fontSize = fontSize;
+  const root = ((document.querySelector(':root'): any): HTMLElement);
+  root.style.fontSize = fontSize;
 }
 
 function updateThemeVariables(
@@ -285,6 +285,8 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
+  updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
+  updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(
@@ -309,6 +311,15 @@ function updateThemeVariables(
 
   // Font smoothing varies based on the theme.
   updateStyleHelper(theme, 'font-smoothing', documentElements);
+
+  // Update scrollbar color to match theme.
+  // this CSS property is currently only supported in Firefox,
+  // but it makes a significant UI improvement in dark mode.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  documentElements.forEach(documentElement => {
+    // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
+    documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
+  });
 }
 
 export { SettingsContext, SettingsContextController };
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index e9690a01bcb3..262900906b6a 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -52,6 +52,8 @@
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
+  --light-color-scroll-thumb: #c2c2c2;
+  --light-color-scroll-track: #fafafa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
@@ -115,6 +117,8 @@
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;
+  --dark-color-scroll-thumb: #afb3b9;
+  --dark-color-scroll-track: #313640;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);

From 89e36e3976b062584f83c22d43f043cf464c3403 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 10:51:01 -0700
Subject: [PATCH 690/814] Wrap all calls to localStorage/sessionStorage to
 avoid potential runtime errors

---
 shells/browser/shared/src/injectGlobalHook.js |  3 +-
 shells/browser/shared/src/main.js             | 11 +++--
 src/backend/agent.js                          | 42 ++++++++++---------
 src/backend/renderer.js                       |  4 +-
 src/devtools/store.js                         | 10 ++---
 src/devtools/views/hooks.js                   |  5 ++-
 src/storage.js                                | 41 ++++++++++++++++++
 src/utils.js                                  |  5 ++-
 8 files changed, 88 insertions(+), 33 deletions(-)
 create mode 100644 src/storage.js

diff --git a/shells/browser/shared/src/injectGlobalHook.js b/shells/browser/shared/src/injectGlobalHook.js
index 7a1147a040d9..d870393602b8 100644
--- a/shells/browser/shared/src/injectGlobalHook.js
+++ b/shells/browser/shared/src/injectGlobalHook.js
@@ -3,6 +3,7 @@
 import nullthrows from 'nullthrows';
 import { installHook } from 'src/hook';
 import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src/constants';
+import { localStorageGetItem } from 'src/storage';
 
 function injectCode(code) {
   const script = document.createElement('script');
@@ -63,7 +64,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
 // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
-if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
   const rendererURL = chrome.runtime.getURL('build/renderer.js');
   let rendererCode;
 
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 66f24a4d40e6..c9fb4c1df282 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -11,6 +11,11 @@ import {
   getBrowserTheme,
 } from './utils';
 import { getSavedComponentFilters } from 'src/utils';
+import {
+  localStorageGetItem,
+  localStorageRemoveItem,
+  localStorageSetItem,
+} from 'src/storage';
 import DevTools from 'src/devtools/views/DevTools';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -86,7 +91,7 @@ function createPanelIfReactLoaded() {
           },
         });
         bridge.addListener('reloadAppForProfiling', () => {
-          localStorage.setItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
         bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
@@ -109,11 +114,11 @@ function createPanelIfReactLoaded() {
         let isProfiling = false;
         let supportsProfiling = false;
         if (
-          localStorage.getItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
         ) {
           supportsProfiling = true;
           isProfiling = true;
-          localStorage.removeItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
 
         const browserName = getBrowserName();
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5a7aa5740fbc..aa2c14716d75 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -8,6 +8,14 @@ import {
   SESSION_STORAGE_LAST_SELECTION_KEY,
   __DEBUG__,
 } from '../constants';
+import {
+  localStorageGetItem,
+  localStorageRemoveItem,
+  localStorageSetItem,
+  sessionStorageGetItem,
+  sessionStorageRemoveItem,
+  sessionStorageSetItem,
+} from 'src/storage';
 import { hideOverlay, showOverlay } from './views/Highlighter';
 
 import type {
@@ -71,19 +79,17 @@ export default class Agent extends EventEmitter {
   constructor(bridge: Bridge) {
     super();
 
-    if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+    if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
       this._isProfiling = true;
 
-      localStorage.removeItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
+      localStorageRemoveItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
 
-    if (typeof sessionStorage !== 'undefined') {
-      const persistedSelectionString = sessionStorage.getItem(
-        SESSION_STORAGE_LAST_SELECTION_KEY
-      );
-      if (persistedSelectionString != null) {
-        this._persistedSelection = JSON.parse(persistedSelectionString);
-      }
+    const persistedSelectionString = sessionStorageGetItem(
+      SESSION_STORAGE_LAST_SELECTION_KEY
+    );
+    if (persistedSelectionString != null) {
+      this._persistedSelection = JSON.parse(persistedSelectionString);
     }
 
     this._bridge = bridge;
@@ -237,7 +243,7 @@ export default class Agent extends EventEmitter {
   };
 
   reloadAndProfile = () => {
-    localStorage.setItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+    localStorageSetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
 
     // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
     // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
@@ -547,15 +553,13 @@ export default class Agent extends EventEmitter {
     // This is why we need the defensive checks here.
     const renderer = this._rendererInterfaces[rendererID];
     const path = renderer != null ? renderer.getPathForElement(id) : null;
-    if (typeof sessionStorage !== 'undefined') {
-      if (path !== null) {
-        sessionStorage.setItem(
-          SESSION_STORAGE_LAST_SELECTION_KEY,
-          JSON.stringify(({ rendererID, path }: PersistedSelection))
-        );
-      } else {
-        sessionStorage.removeItem(SESSION_STORAGE_LAST_SELECTION_KEY);
-      }
+    if (path !== null) {
+      sessionStorageSetItem(
+        SESSION_STORAGE_LAST_SELECTION_KEY,
+        JSON.stringify(({ rendererID, path }: PersistedSelection))
+      );
+    } else {
+      sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
     }
   }, 1000);
 }
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index ad099cf6df47..935cb511c94f 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -25,6 +25,7 @@ import {
   getUID,
   utfEncodeString,
 } from 'src/utils';
+import { localStorageGetItem } from 'src/storage';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
@@ -2200,7 +2201,8 @@ export function attach(
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
-  if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+  // TODO This doens't seem right
+  if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
     startProfiling();
   }
 
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b1176baeed02..6ad59c848a14 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -15,6 +15,7 @@ import {
   separateDisplayNameAndHOCs,
   utfDecodeString,
 } from '../utils';
+import { localStorageGetItem, localStorageSetItem } from '../storage';
 import { __DEBUG__ } from '../constants';
 import { printStore } from 'src/__tests__/storeSerializer';
 import ProfilerStore from './ProfilerStore';
@@ -110,7 +111,7 @@ export default class Store extends EventEmitter {
 
     // Default this setting to true unless otherwise specified.
     this._collapseNodesByDefault =
-      localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
+      localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
       'false';
 
     this._componentFilters = getSavedComponentFilters();
@@ -127,8 +128,7 @@ export default class Store extends EventEmitter {
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
         this._captureScreenshots =
-          localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) ===
-          'true';
+          localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
       }
       if (supportsProfiling) {
         this._supportsProfiling = true;
@@ -184,7 +184,7 @@ export default class Store extends EventEmitter {
   set captureScreenshots(value: boolean): void {
     this._captureScreenshots = value;
 
-    localStorage.setItem(
+    localStorageSetItem(
       LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY,
       value ? 'true' : 'false'
     );
@@ -198,7 +198,7 @@ export default class Store extends EventEmitter {
   set collapseNodesByDefault(value: boolean): void {
     this._collapseNodesByDefault = value;
 
-    localStorage.setItem(
+    localStorageSetItem(
       LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,
       value ? 'true' : 'false'
     );
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index d742ff9fdd0b..ae963047a41e 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -2,6 +2,7 @@
 
 import throttle from 'lodash.throttle';
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { localStorageGetItem, localStorageSetItem } from 'src/storage';
 
 export function useIsOverflowing(
   containerRef: { current: HTMLDivElement | null },
@@ -42,7 +43,7 @@ export function useLocalStorage<T>(
 ): [T, (value: T | (() => T)) => void] {
   const getValueFromLocalStorage = useCallback(() => {
     try {
-      const item = window.localStorage.getItem(key);
+      const item = localStorageGetItem(key);
       if (item != null) {
         return JSON.parse(item);
       }
@@ -64,7 +65,7 @@ export function useLocalStorage<T>(
         const valueToStore =
           value instanceof Function ? (value: any)(storedValue) : value;
         setStoredValue(valueToStore);
-        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        localStorageSetItem(key, JSON.stringify(valueToStore));
       } catch (error) {
         console.log(error);
       }
diff --git a/src/storage.js b/src/storage.js
new file mode 100644
index 000000000000..888009c76e43
--- /dev/null
+++ b/src/storage.js
@@ -0,0 +1,41 @@
+// @flow
+
+export function localStorageGetItem(key: string): any {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    return null;
+  }
+}
+
+export function localStorageRemoveItem(key: string): void {
+  try {
+    localStorage.removeItem(key);
+  } catch (error) {}
+}
+
+export function localStorageSetItem(key: string, value: any): void {
+  try {
+    return localStorage.setItem(key, value);
+  } catch (error) {}
+}
+
+export function sessionStorageGetItem(key: string): any {
+  try {
+    return sessionStorage.getItem(key);
+  } catch (error) {
+    return null;
+  }
+}
+
+export function sessionStorageRemoveItem(key: string): void {
+  try {
+    sessionStorage.removeItem(key);
+  } catch (error) {}
+}
+
+export function sessionStorageSetItem(key: string, value: any): void {
+  try {
+    return sessionStorage.setItem(key, value);
+  } catch (error) {}
+}
diff --git a/src/utils.js b/src/utils.js
index 6e87a97d4f1a..7c7a711f0bcc 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -9,6 +9,7 @@ import {
   ElementTypeFunction,
   ElementTypeMemo,
 } from 'src/types';
+import { localStorageGetItem, localStorageSetItem } from './storage';
 
 import type { ComponentFilter, ElementType } from './types';
 
@@ -82,7 +83,7 @@ export function getDefaultComponentFilters(): Array<ComponentFilter> {
 
 export function getSavedComponentFilters(): Array<ComponentFilter> {
   try {
-    const raw = localStorage.getItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+    const raw = localStorageGetItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
     if (raw != null) {
       return JSON.parse(raw);
     }
@@ -93,7 +94,7 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
 export function saveComponentFilters(
   componentFilters: Array<ComponentFilter>
 ): void {
-  localStorage.setItem(
+  localStorageSetItem(
     LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
     JSON.stringify(componentFilters)
   );

From 3e3c83aecde5112c064dfb314c589518b8aae081 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 12:40:59 -0700
Subject: [PATCH 691/814] Updated reload-and-profile temp key to use
 sessioStorage instead of localStorage

---
 shells/browser/shared/src/injectGlobalHook.js |  6 +++---
 src/backend/agent.js                          | 13 ++++++-------
 src/backend/renderer.js                       | 11 ++++++-----
 src/constants.js                              |  9 +++++----
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/shells/browser/shared/src/injectGlobalHook.js b/shells/browser/shared/src/injectGlobalHook.js
index d870393602b8..2bdc7c8a7f5b 100644
--- a/shells/browser/shared/src/injectGlobalHook.js
+++ b/shells/browser/shared/src/injectGlobalHook.js
@@ -2,8 +2,8 @@
 
 import nullthrows from 'nullthrows';
 import { installHook } from 'src/hook';
-import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src/constants';
-import { localStorageGetItem } from 'src/storage';
+import { SESSION_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src/constants';
+import { sessionStorageGetItem } from 'src/storage';
 
 function injectCode(code) {
   const script = document.createElement('script');
@@ -64,7 +64,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
 // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
-if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
   const rendererURL = chrome.runtime.getURL('build/renderer.js');
   let rendererCode;
 
diff --git a/src/backend/agent.js b/src/backend/agent.js
index aa2c14716d75..105cb9a3124e 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -4,14 +4,11 @@ import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import {
-  LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY,
   SESSION_STORAGE_LAST_SELECTION_KEY,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   __DEBUG__,
 } from '../constants';
 import {
-  localStorageGetItem,
-  localStorageRemoveItem,
-  localStorageSetItem,
   sessionStorageGetItem,
   sessionStorageRemoveItem,
   sessionStorageSetItem,
@@ -79,10 +76,12 @@ export default class Agent extends EventEmitter {
   constructor(bridge: Bridge) {
     super();
 
-    if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+    if (
+      sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+    ) {
       this._isProfiling = true;
 
-      localStorageRemoveItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY);
+      sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
 
     const persistedSelectionString = sessionStorageGetItem(
@@ -243,7 +242,7 @@ export default class Agent extends EventEmitter {
   };
 
   reloadAndProfile = () => {
-    localStorageSetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+    sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
 
     // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
     // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 935cb511c94f..df28dd45fbb5 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -25,11 +25,11 @@ import {
   getUID,
   utfEncodeString,
 } from 'src/utils';
-import { localStorageGetItem } from 'src/storage';
+import { sessionStorageGetItem } from 'src/storage';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
-  LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
@@ -339,7 +339,7 @@ export function attach(
   if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
     applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
   } else {
-    console.warn('⚛️ DevTools: Invalid component filters');
+    console.warn('⚛️ DevTools: Could not locate saved component filters');
 
     // Fallback to assuming the default filters in this case.
     applyComponentFilters(getDefaultComponentFilters());
@@ -2201,8 +2201,9 @@ export function attach(
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
-  // TODO This doens't seem right
-  if (localStorageGetItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+  if (
+    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+  ) {
     startProfiling();
   }
 
diff --git a/src/constants.js b/src/constants.js
index 3097a0749e68..b06ebcfa2284 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,5 +1,8 @@
 // @flow
 
+// Flip this flag to true to enable verbose console debug logging.
+export const __DEBUG__ = false;
+
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
@@ -8,12 +11,10 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
 
-export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =
-  'React::DevTools::reloadAndProfile';
-
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
 
-export const __DEBUG__ = false;
+export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
+  'React::DevTools::reloadAndProfile';
 
 export const PROFILER_EXPORT_VERSION = 4;

From 78721bde4cd5a277b168df4673d38cf78d40a5f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 13:08:49 -0700
Subject: [PATCH 692/814] Backend notifies the frontend of Storage API support.
 Frontend disables e.g. reload-and-profile based on this.

---
 src/backend/agent.js                          |  9 ++++++++
 src/devtools/store.js                         | 23 ++++++++++++++++++-
 .../views/Profiler/ReloadAndProfileButton.js  | 20 ++++++++++++++--
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 105cb9a3124e..4c1bf1b4c927 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -127,6 +127,15 @@ export default class Agent extends EventEmitter {
     if (this._isProfiling) {
       bridge.send('profilingStatus', true);
     }
+
+    // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
+    // If not, features like reload-and-profile will not work correctly and must be disabled.
+    let isBackendStorageAPISupported = false;
+    try {
+      localStorage.getItem('test');
+      isBackendStorageAPISupported = true;
+    } catch (error) {}
+    bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
   }
 
   captureScreenshot = ({
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 6ad59c848a14..6ad34d7e7b15 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -73,6 +73,10 @@ export default class Store extends EventEmitter {
   // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
+  // Can the backend use the Storage API (e.g. localStorage)?
+  // If not, features like reload-and-profile will not work correctly and must be disabled.
+  _isBackendStorageAPISupported: boolean = false;
+
   // Map of element (id) to the set of elements (ids) it owns.
   // This map enables getOwnersListForElement() to avoid traversing the entire tree.
   _ownersMap: Map<number, Set<number>> = new Map();
@@ -141,6 +145,10 @@ export default class Store extends EventEmitter {
     this._bridge = bridge;
     bridge.addListener('operations', this.onBridgeOperations);
     bridge.addListener('shutdown', this.onBridgeShutdown);
+    bridge.addListener(
+      'isBackendStorageAPISupported',
+      this.onBridgeStorageSupported
+    );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
@@ -261,7 +269,10 @@ export default class Store extends EventEmitter {
   }
 
   get supportsReloadAndProfile(): boolean {
-    return this._supportsReloadAndProfile;
+    // Does the DevTools shell support reloading and eagerly injecting the renderer interface?
+    // And if so, can the backend use the localStorage API?
+    // Both of these are required for the reload-and-profile feature to work.
+    return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
 
   containsElement(id: number): boolean {
@@ -904,5 +915,15 @@ export default class Store extends EventEmitter {
 
     this._bridge.removeListener('operations', this.onBridgeOperations);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
+    this._bridge.removeListener(
+      'isBackendStorageAPISupported',
+      this.onBridgeStorageSupported
+    );
+  };
+
+  onBridgeStorageSupported = (isBackendStorageAPISupported: boolean) => {
+    this._isBackendStorageAPISupported = isBackendStorageAPISupported;
+
+    this.emit('supportsReloadAndProfile');
   };
 }
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index ac33e1feec42..110a1b61a48e 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -1,19 +1,35 @@
 // @flow
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
+import { useSubscription } from '../hooks';
+import Store from 'src/devtools/store';
 
 export default function ReloadAndProfileButton() {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const supportsReloadAndProfileSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.supportsReloadAndProfile,
+      subscribe: (callback: Function) => {
+        store.addListener('supportsReloadAndProfile', callback);
+        return () => store.removeListener('supportsReloadAndProfile', callback);
+      },
+    }),
+    [store]
+  );
+  const supportsReloadAndProfile = useSubscription<boolean, Store>(
+    supportsReloadAndProfileSubscription
+  );
+
   const reloadAndProfile = useCallback(() => bridge.send('reloadAndProfile'), [
     bridge,
   ]);
 
-  if (!store.supportsReloadAndProfile) {
+  if (!supportsReloadAndProfile) {
     return null;
   }
 

From c2c3e8e6e5245518f70b94b26d07c69c098f6c9c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <dependabot[bot]@users.noreply.github.com>
Date: Fri, 7 Jun 2019 20:12:54 +0000
Subject: [PATCH 693/814] Bump js-yaml from 3.12.1 to 3.13.1

Bumps [js-yaml](https://github.com/nodeca/js-yaml) from 3.12.1 to 3.13.1.
- [Release notes](https://github.com/nodeca/js-yaml/releases)
- [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nodeca/js-yaml/compare/3.12.1...3.13.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b5c7b8d6d375..0f838a637f9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,8 +1722,9 @@ are-we-there-yet@~1.1.2:
     readable-stream "^2.0.6"
 
 argparse@^1.0.7:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
@@ -4867,8 +4868,9 @@ esprima@3.1.3, esprima@^3.1.3:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
 esprima@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.0.0:
   version "1.0.0"
@@ -7303,7 +7305,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.12.0, js-yaml@^3.5.1:
+js-yaml@^3.12.0, js-yaml@^3.5.1, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -7311,14 +7313,6 @@ js-yaml@^3.12.0, js-yaml@^3.5.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.9.0, js-yaml@^3.9.1:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
-  integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -10922,6 +10916,7 @@ split@~0.3.3:
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
   version "1.15.2"

From 21bb66a8c7d96a5af7176a766fc59ddcb30ba676 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 14:06:08 -0700
Subject: [PATCH 694/814] Added HOC filter test

---
 .../storeComponentFilters-test.js.snap        | 20 +++++++++++
 src/__tests__/storeComponentFilters-test.js   | 19 +++++++++++
 src/__tests__/utils.js                        | 33 ++++++++++++-------
 3 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
index 86dbf043da8c..9ef1940eb86f 100644
--- a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Store component filters should filter HOCs: 1: mount 1`] = `
+[root]
+  ▾ <Component>
+    ▾ <Component>
+        <div>
+`;
+
+exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `
+[root]
+  ▾ <Component>
+    ▾ <Component>
+        <div>
+`;
+
 exports[`Store component filters should filter by display name: 1: mount 1`] = `
 [root]
   ▾ <Foo>
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index dff169e92400..393763341610 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -167,4 +167,23 @@ describe('Store component filters', () => {
 
     expect(store).toMatchSnapshot('3: hide components in a made up fake path');
   });
+
+  it('should filter HOCs', () => {
+    const Component = () => <div>Hi</div>;
+    const WrappedComponent = () => <Component />;
+    WrappedComponent.displayName = 'withWrapper(Component)';
+
+    act(() =>
+      ReactDOM.render(<WrappedComponent />, document.createElement('div'))
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
+
+    expect(store).toMatchSnapshot('2: hide all HOCs');
+
+    act(() => (store.componentFilters = [utils.createHOCFilter(false)]));
+
+    expect(store).toMatchSnapshot('3: disable HOC filter');
+  });
 });
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 061a307e7fe3..57fb2de3d39e 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -60,18 +60,6 @@ export function beforeEachProfiling(): void {
   );
 }
 
-export function createElementTypeFilter(
-  elementType: ElementType,
-  isEnabled: boolean = true
-) {
-  const Types = require('src/types');
-  return {
-    type: Types.ComponentFilterElementType,
-    isEnabled,
-    value: elementType,
-  };
-}
-
 export function createDisplayNameFilter(
   source: string,
   isEnabled: boolean = true
@@ -91,6 +79,27 @@ export function createDisplayNameFilter(
   };
 }
 
+export function createHOCFilter(isEnabled: boolean = true) {
+  const Types = require('src/types');
+  return {
+    type: Types.ComponentFilterHOC,
+    isEnabled,
+    isValid: true,
+  };
+}
+
+export function createElementTypeFilter(
+  elementType: ElementType,
+  isEnabled: boolean = true
+) {
+  const Types = require('src/types');
+  return {
+    type: Types.ComponentFilterElementType,
+    isEnabled,
+    value: elementType,
+  };
+}
+
 export function createLocationFilter(
   source: string,
   isEnabled: boolean = true

From 88e59277e7362640bf68799893053f55894e472c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 14:10:49 -0700
Subject: [PATCH 695/814] Added HOC badges to Jest Store serialization

---
 .../storeComponentFilters-test.js.snap             | 14 ++++++++------
 src/__tests__/storeComponentFilters-test.js        | 10 +++++-----
 src/__tests__/storeSerializer.js                   |  7 ++++++-
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
index 9ef1940eb86f..884b6cbcec85 100644
--- a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ b/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -2,9 +2,10 @@
 
 exports[`Store component filters should filter HOCs: 1: mount 1`] = `
 [root]
-  ▾ <Component>
-    ▾ <Component>
-        <div>
+  ▾ <Component> [Bar][Foo]
+    ▾ <Component> [Foo]
+      ▾ <Component>
+          <div>
 `;
 
 exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
@@ -15,9 +16,10 @@ exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
 
 exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `
 [root]
-  ▾ <Component>
-    ▾ <Component>
-        <div>
+  ▾ <Component> [Bar][Foo]
+    ▾ <Component> [Foo]
+      ▾ <Component>
+          <div>
 `;
 
 exports[`Store component filters should filter by display name: 1: mount 1`] = `
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 393763341610..6627912b8dc4 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -170,12 +170,12 @@ describe('Store component filters', () => {
 
   it('should filter HOCs', () => {
     const Component = () => <div>Hi</div>;
-    const WrappedComponent = () => <Component />;
-    WrappedComponent.displayName = 'withWrapper(Component)';
+    const Foo = () => <Component />;
+    Foo.displayName = 'Foo(Component)';
+    const Bar = () => <Foo />;
+    Bar.displayName = 'Bar(Foo(Component))';
 
-    act(() =>
-      ReactDOM.render(<WrappedComponent />, document.createElement('div'))
-    );
+    act(() => ReactDOM.render(<Bar />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
diff --git a/src/__tests__/storeSerializer.js b/src/__tests__/storeSerializer.js
index 6e6400aaf5e3..fd2d4e36f8ab 100644
--- a/src/__tests__/storeSerializer.js
+++ b/src/__tests__/storeSerializer.js
@@ -22,13 +22,18 @@ export function printElement(element, includeWeight = false) {
     key = ` key="${element.key}"`;
   }
 
+  let hocs = '';
+  if (element.hocDisplayNames !== null) {
+    hocs = ` [${element.hocDisplayNames.join('][')}]`;
+  }
+
   let suffix = '';
   if (includeWeight) {
     suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
   }
 
   return `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
-    'null'}${key}>${suffix}`;
+    'null'}${key}>${hocs}${suffix}`;
 }
 
 export function printOwnersList(elements, includeWeight = false) {

From bd5c2e4621c093cc8995dd51c9855d5b5dcc562f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 Jun 2019 15:38:26 -0700
Subject: [PATCH 696/814] Initial change tracking implemented * User profiling
 setting * Background collects changed props/state (not added/removed or hooks
 yet) * Tests updated

---
 .../__snapshots__/profilingCache-test.js.snap | 283 ++++++++++++++++++
 src/__tests__/profilerContext-test.js         |   1 +
 src/__tests__/profilerStore-test.js           |   1 +
 src/__tests__/profilingCache-test.js          |   1 +
 src/__tests__/profilingCharts-test.js         |   1 +
 .../profilingCommitTreeBuilder-test.js        |   1 +
 src/__tests__/storeComponentFilters-test.js   |   1 +
 src/backend/agent.js                          |  21 +-
 src/backend/renderer.js                       | 118 +++++++-
 src/backend/types.js                          |  11 +-
 src/constants.js                              |   3 +
 src/devtools/ProfilerStore.js                 |   2 +-
 src/devtools/store.js                         |  22 ++
 .../views/Profiler/ReloadAndProfileButton.js  |  32 +-
 .../Profiler/SidebarSelectedFiberInfo.css     |  19 ++
 .../Profiler/SidebarSelectedFiberInfo.js      |  78 +++++
 src/devtools/views/Profiler/types.js          |  11 +
 src/devtools/views/Profiler/utils.js          |  12 +
 src/devtools/views/Settings/Settings.js       |  72 +++--
 19 files changed, 649 insertions(+), 41 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index f9901da82a0b..6d1e6ade298c 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
 Object {
+  "changeDescriptions": Map {},
   "duration": 16,
   "fiberActualDurations": Map {
     1 => 16,
@@ -24,6 +25,7 @@ Object {
 
 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
 Object {
+  "changeDescriptions": Map {},
   "duration": 15,
   "fiberActualDurations": Map {
     1 => 15,
@@ -46,6 +48,7 @@ Object {
 
 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
 Object {
+  "changeDescriptions": Map {},
   "duration": 3,
   "fiberActualDurations": Map {
     5 => 3,
@@ -64,6 +67,7 @@ Object {
 
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
 Object {
+  "changeDescriptions": Map {},
   "duration": 12,
   "fiberActualDurations": Map {
     1 => 12,
@@ -88,6 +92,25 @@ Object {
 
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
 Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "didHooksChange": false,
+      "props": Array [],
+      "state": Array [],
+    },
+    4 => Object {
+      "didHooksChange": false,
+      "props": Array [],
+      "state": Array [],
+    },
+    2 => Object {
+      "didHooksChange": false,
+      "props": Array [
+        "count",
+      ],
+      "state": Array [],
+    },
+  },
   "duration": 13,
   "fiberActualDurations": Map {
     3 => 0,
@@ -112,6 +135,20 @@ Object {
 
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
 Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "didHooksChange": false,
+      "props": Array [],
+      "state": Array [],
+    },
+    2 => Object {
+      "didHooksChange": false,
+      "props": Array [
+        "count",
+      ],
+      "state": Array [],
+    },
+  },
   "duration": 10,
   "fiberActualDurations": Map {
     3 => 0,
@@ -132,6 +169,15 @@ Object {
 
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `
 Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "didHooksChange": false,
+      "props": Array [
+        "count",
+      ],
+      "state": Array [],
+    },
+  },
   "duration": 10,
   "fiberActualDurations": Map {
     2 => 10,
@@ -154,6 +200,7 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [],
           "duration": 12,
           "fiberActualDurations": Array [
             Array [
@@ -205,6 +252,34 @@ Object {
           "timestamp": 12,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 13,
           "fiberActualDurations": Array [
             Array [
@@ -256,6 +331,26 @@ Object {
           "timestamp": 25,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 10,
           "fiberActualDurations": Array [
             Array [
@@ -291,6 +386,18 @@ Object {
           "timestamp": 35,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 10,
           "fiberActualDurations": Array [
             Array [
@@ -507,6 +614,7 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -550,6 +658,26 @@ Object {
           "timestamp": 11,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -593,6 +721,34 @@ Object {
           "timestamp": 22,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 13,
           "fiberActualDurations": Array [
             Array [
@@ -791,6 +947,25 @@ exports[`ProfilingCache should collect data for each root (including ones added
 Object {
   "commitData": Array [
     Object {
+      "changeDescriptions": Map {
+        3 => Object {
+          "didHooksChange": false,
+          "props": Array [],
+          "state": Array [],
+        },
+        4 => Object {
+          "didHooksChange": false,
+          "props": Array [],
+          "state": Array [],
+        },
+        2 => Object {
+          "didHooksChange": false,
+          "props": Array [
+            "count",
+          ],
+          "state": Array [],
+        },
+      },
       "duration": 13,
       "fiberActualDurations": Map {
         3 => 0,
@@ -812,6 +987,20 @@ Object {
       "timestamp": 13,
     },
     Object {
+      "changeDescriptions": Map {
+        3 => Object {
+          "didHooksChange": false,
+          "props": Array [],
+          "state": Array [],
+        },
+        2 => Object {
+          "didHooksChange": false,
+          "props": Array [
+            "count",
+          ],
+          "state": Array [],
+        },
+      },
       "duration": 10,
       "fiberActualDurations": Map {
         3 => 0,
@@ -829,6 +1018,15 @@ Object {
       "timestamp": 34,
     },
     Object {
+      "changeDescriptions": Map {
+        2 => Object {
+          "didHooksChange": false,
+          "props": Array [
+            "count",
+          ],
+          "state": Array [],
+        },
+      },
       "duration": 10,
       "fiberActualDurations": Map {
         2 => 10,
@@ -971,6 +1169,7 @@ exports[`ProfilingCache should collect data for each root (including ones added
 Object {
   "commitData": Array [
     Object {
+      "changeDescriptions": Map {},
       "duration": 11,
       "fiberActualDurations": Map {
         11 => 11,
@@ -1063,6 +1262,7 @@ exports[`ProfilingCache should collect data for each root (including ones added
 Object {
   "commitData": Array [
     Object {
+      "changeDescriptions": Map {},
       "duration": 0,
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
@@ -1139,6 +1339,34 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 13,
           "fiberActualDurations": Array [
             Array [
@@ -1190,6 +1418,26 @@ Object {
           "timestamp": 13,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 10,
           "fiberActualDurations": Array [
             Array [
@@ -1225,6 +1473,18 @@ Object {
           "timestamp": 34,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 10,
           "fiberActualDurations": Array [
             Array [
@@ -1406,6 +1666,7 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -1519,6 +1780,7 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [],
           "duration": 0,
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
@@ -1639,6 +1901,7 @@ Object {
     Object {
       "commitData": Array [
         Object {
+          "changeDescriptions": Array [],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -1684,6 +1947,26 @@ Object {
           "timestamp": 11,
         },
         Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [],
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "didHooksChange": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
diff --git a/src/__tests__/profilerContext-test.js b/src/__tests__/profilerContext-test.js
index 3d3a68f5919a..6857ddb4070c 100644
--- a/src/__tests__/profilerContext-test.js
+++ b/src/__tests__/profilerContext-test.js
@@ -29,6 +29,7 @@ describe('ProfilerContext', () => {
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/__tests__/profilerStore-test.js b/src/__tests__/profilerStore-test.js
index f6ffcfe78369..0f4074f165b6 100644
--- a/src/__tests__/profilerStore-test.js
+++ b/src/__tests__/profilerStore-test.js
@@ -14,6 +14,7 @@ describe('ProfilerStore', () => {
 
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index c93d347ea8d5..83c1c056d1c9 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -21,6 +21,7 @@ describe('ProfilingCache', () => {
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index d83f8b5a0fb3..9cb6d25d6fd0 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -18,6 +18,7 @@ describe('profiling charts', () => {
 
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index e6c98c1d5efc..68d42961ea36 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -17,6 +17,7 @@ describe('commit tree', () => {
 
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 6627912b8dc4..16b028abcb73 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -21,6 +21,7 @@ describe('Store component filters', () => {
     store = global.store;
     store.collapseNodesByDefault = false;
     store.componentFilters = [];
+    store.recordChangeDescriptions = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 4c1bf1b4c927..12ba9a8a14f1 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -6,6 +6,7 @@ import throttle from 'lodash.throttle';
 import {
   SESSION_STORAGE_LAST_SELECTION_KEY,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   __DEBUG__,
 } from '../constants';
 import {
@@ -69,6 +70,7 @@ type PersistedSelection = {|
 export default class Agent extends EventEmitter {
   _bridge: Bridge;
   _isProfiling: boolean = false;
+  _recordChangeDescriptions: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
@@ -79,8 +81,13 @@ export default class Agent extends EventEmitter {
     if (
       sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
     ) {
+      this._recordChangeDescriptions =
+        sessionStorageGetItem(
+          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY
+        ) === 'true';
       this._isProfiling = true;
 
+      sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);
       sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);
     }
 
@@ -250,8 +257,12 @@ export default class Agent extends EventEmitter {
     }
   };
 
-  reloadAndProfile = () => {
+  reloadAndProfile = (recordChangeDescriptions: boolean) => {
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+    sessionStorageSetItem(
+      SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+      recordChangeDescriptions ? 'true' : 'false'
+    );
 
     // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
     // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
@@ -358,7 +369,7 @@ export default class Agent extends EventEmitter {
     this._rendererInterfaces[rendererID] = rendererInterface;
 
     if (this._isProfiling) {
-      rendererInterface.startProfiling();
+      rendererInterface.startProfiling(this._recordChangeDescriptions);
     }
 
     // When the renderer is attached, we need to tell it whether
@@ -397,13 +408,14 @@ export default class Agent extends EventEmitter {
     window.addEventListener('pointerup', this._onPointerUp, true);
   };
 
-  startProfiling = () => {
+  startProfiling = (recordChangeDescriptions: boolean) => {
+    this._recordChangeDescriptions = recordChangeDescriptions;
     this._isProfiling = true;
     for (let rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-      renderer.startProfiling();
+      renderer.startProfiling(recordChangeDescriptions);
     }
     this._bridge.send('profilingStatus', this._isProfiling);
   };
@@ -422,6 +434,7 @@ export default class Agent extends EventEmitter {
 
   stopProfiling = () => {
     this._isProfiling = false;
+    this._recordChangeDescriptions = false;
     for (let rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index df28dd45fbb5..6f2bea1d207d 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -30,6 +30,7 @@ import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
   __DEBUG__,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
@@ -38,6 +39,7 @@ import {
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 
 import type {
+  ChangeDescription,
   CommitDataBackend,
   DevToolsHook,
   Fiber,
@@ -350,7 +352,7 @@ export function attach(
   // The unmount operations are already significantly smaller than mount opreations though.
   // This is something to keep in mind for later.
   function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
-    if (this._isProfiling) {
+    if (isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
       // If necessary, we could support this- but it doesn't seem like a necessary use case.
       throw Error('Cannot modify filter preferences while profiling');
@@ -646,8 +648,87 @@ export function attach(
     return ((fiberToIDMap.get(primaryFiber): any): number);
   }
 
+  function getChangeDescription(
+    prevFiber: Fiber,
+    nextFiber: Fiber
+  ): ChangeDescription | null {
+    switch (getElementTypeForFiber(nextFiber)) {
+      case ElementTypeClass:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
+      case ElementTypeForwardRef:
+        return {
+          didHooksChange: didHooksChange(
+            prevFiber.memoizedState,
+            nextFiber.memoizedState
+          ),
+          props: getChangedKeys(
+            prevFiber.memoizedProps,
+            nextFiber.memoizedProps
+          ),
+          state: getChangedKeys(
+            prevFiber.memoizedState,
+            nextFiber.memoizedState
+          ),
+        };
+      default:
+        return null;
+    }
+  }
+
+  function didHooksChange(prev: any, next: any): boolean {
+    if (next == null) {
+      return false;
+    }
+
+    // We can't report anything meaningful for hooks changes.
+    if (
+      next.hasOwnProperty('baseState') &&
+      next.hasOwnProperty('memoizedState') &&
+      next.hasOwnProperty('next') &&
+      next.hasOwnProperty('queue')
+    ) {
+      while (next !== null) {
+        if (next.memoizedState !== prev.memoizedState) {
+          return true;
+        } else {
+          next = next.next;
+          prev = prev.next;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  function getChangedKeys(prev: any, next: any): Array<string> {
+    const keys = [];
+
+    if (next == null) {
+      return keys;
+    }
+
+    // We can't report anything meaningful for hooks changes.
+    if (
+      next.hasOwnProperty('baseState') &&
+      next.hasOwnProperty('memoizedState') &&
+      next.hasOwnProperty('next') &&
+      next.hasOwnProperty('queue')
+    ) {
+      return keys;
+    }
+
+    // TODO (change descriptions) This does not account for props that were added or removed.
+    for (let key in prev) {
+      if (prev[key] !== next[key]) {
+        keys.push(key);
+      }
+    }
+    return keys;
+  }
+
   // eslint-disable-next-line no-unused-vars
-  function hasDataChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
+  function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {
     switch (nextFiber.tag) {
       case ClassComponent:
       case FunctionComponent:
@@ -1024,7 +1105,7 @@ export function attach(
         pushOperation(treeBaseDuration);
       }
 
-      if (alternate == null || hasDataChanged(alternate, fiber)) {
+      if (alternate == null || didFiberRender(alternate, fiber)) {
         if (actualDuration != null) {
           // The actual duration reported by React includes time spent working on children.
           // This is useful information, but it's also useful to be able to exclude child durations.
@@ -1049,6 +1130,16 @@ export function attach(
             metadata.maxActualDuration,
             actualDuration
           );
+
+          if (recordChangeDescriptions && metadata.changeDescriptions) {
+            const changeDescription =
+              alternate === null
+                ? null
+                : getChangeDescription(alternate, fiber);
+            if (changeDescription !== null) {
+              metadata.changeDescriptions.set(id, changeDescription);
+            }
+          }
         }
       }
     }
@@ -1110,7 +1201,7 @@ export function attach(
       mostRecentlyInspectedElementID !== null &&
       mostRecentlyInspectedElementID ===
         getFiberID(getPrimaryFiber(nextFiber)) &&
-      hasDataChanged(prevFiber, nextFiber)
+      didFiberRender(prevFiber, nextFiber)
     ) {
       // If this Fiber has updated, clear cached inspected data.
       // If it is inspected again, it may need to be re-run to obtain updated hooks values.
@@ -1300,6 +1391,7 @@ export function attach(
           // If profiling is active, store commit time and duration, and the current interactions.
           // The frontend may request this information after profiling has stopped.
           currentCommitProfilingMetadata = {
+            changeDescriptions: recordChangeDescriptions ? new Map() : null,
             durations: [],
             commitTime: performance.now() - profilingStartTime,
             interactions: Array.from(root.memoizedInteractions).map(
@@ -1343,6 +1435,7 @@ export function attach(
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
+        changeDescriptions: recordChangeDescriptions ? new Map() : null,
         durations: [],
         commitTime: performance.now() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
@@ -2058,6 +2151,7 @@ export function attach(
   }
 
   type CommitProfilingData = {|
+    changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
     interactions: Array<Interaction>,
@@ -2074,6 +2168,7 @@ export function attach(
   let initialIDToRootMap: Map<number, number> | null = null;
   let isProfiling: boolean = false;
   let profilingStartTime: number = 0;
+  let recordChangeDescriptions: boolean = false;
   let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
 
   function getProfilingData(): ProfilingDataBackend {
@@ -2111,6 +2206,7 @@ export function attach(
 
         commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
           const {
+            changeDescriptions,
             durations,
             interactions,
             maxActualDuration,
@@ -2144,6 +2240,10 @@ export function attach(
           }
 
           commitData.push({
+            changeDescriptions:
+              changeDescriptions !== null
+                ? Array.from(changeDescriptions.entries())
+                : null,
             duration: maxActualDuration,
             fiberActualDurations,
             fiberSelfDurations,
@@ -2170,11 +2270,13 @@ export function attach(
     };
   }
 
-  function startProfiling() {
+  function startProfiling(shouldRecordChangeDescriptions: boolean) {
     if (isProfiling) {
       return;
     }
 
+    recordChangeDescriptions = shouldRecordChangeDescriptions;
+
     // Capture initial values as of the time profiling starts.
     // It's important we snapshot both the durations and the id-to-root map,
     // since either of these may change during the profiling session
@@ -2198,13 +2300,17 @@ export function attach(
 
   function stopProfiling() {
     isProfiling = false;
+    recordChangeDescriptions = false;
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
   if (
     sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
   ) {
-    startProfiling();
+    startProfiling(
+      sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
+        'true'
+    );
   }
 
   // React will switch between these implementations depending on whether
diff --git a/src/backend/types.js b/src/backend/types.js
index bce7238efd64..220f1358ecd4 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -112,7 +112,16 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
+// TODO (change descriptions) Is it important to handle context?
+export type ChangeDescription = {|
+  didHooksChange: boolean,
+  props: Array<string>,
+  state: Array<string>,
+|};
+
 export type CommitDataBackend = {|
+  // Tuple of fiber ID and change description
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
   // Tuple of fiber ID and actual duration
   fiberActualDurations: Array<[number, number]>,
@@ -226,7 +235,7 @@ export type RendererInterface = {
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
   setTrackedPath: (path: Array<PathFrame> | null) => void,
-  startProfiling: () => void,
+  startProfiling: (recordChangeDescriptions: boolean) => void,
   stopProfiling: () => void,
   updateComponentFilters: (somponentFilters: Array<ComponentFilter>) => void,
 };
diff --git a/src/constants.js b/src/constants.js
index b06ebcfa2284..9267c53e4b5e 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -14,6 +14,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
 
+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
+  'React::DevTools::recordChangeDescriptions';
+
 export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
 
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index f4901287ea15..b15726c5420e 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -179,7 +179,7 @@ export default class ProfilerStore extends EventEmitter {
   }
 
   startProfiling(): void {
-    this._bridge.send('startProfiling');
+    this._bridge.send('startProfiling', this._store.recordChangeDescriptions);
 
     // Don't actually update the local profiling boolean yet!
     // Wait for onProfilingStatus() to confirm the status has changed.
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 6ad34d7e7b15..d4501273a83c 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -38,6 +38,8 @@ const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
   'React::DevTools::captureScreenshots';
 const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
   'React::DevTools::collapseNodesByDefault';
+const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
+  'React::DevTools::recordChangeDescriptions';
 
 type Config = {|
   isProfiling?: boolean,
@@ -83,6 +85,8 @@ export default class Store extends EventEmitter {
 
   _profilerStore: ProfilerStore;
 
+  _recordChangeDescriptions: boolean = false;
+
   // Incremented each time the store is mutated.
   // This enables a passive effect to detect a mutation between render and commit phase.
   _revision: number = 0;
@@ -118,6 +122,10 @@ export default class Store extends EventEmitter {
       localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
       'false';
 
+    this._recordChangeDescriptions =
+      localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
+      'true';
+
     this._componentFilters = getSavedComponentFilters();
 
     let isProfiling = false;
@@ -248,6 +256,20 @@ export default class Store extends EventEmitter {
     return this._profilerStore;
   }
 
+  get recordChangeDescriptions(): boolean {
+    return this._recordChangeDescriptions;
+  }
+  set recordChangeDescriptions(value: boolean): void {
+    this._recordChangeDescriptions = value;
+
+    localStorageSetItem(
+      LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+      value ? 'true' : 'false'
+    );
+
+    this.emit('recordChangeDescriptions');
+  }
+
   get revision(): number {
     return this._revision;
   }
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 110a1b61a48e..933d453ab04f 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -7,27 +7,41 @@ import { BridgeContext, StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from 'src/devtools/store';
 
+type SubscriptionData = {|
+  recordChangeDescriptions: boolean,
+  supportsReloadAndProfile: boolean,
+|};
+
 export default function ReloadAndProfileButton() {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const supportsReloadAndProfileSubscription = useMemo(
+  const subscription = useMemo(
     () => ({
-      getCurrentValue: () => store.supportsReloadAndProfile,
+      getCurrentValue: () => ({
+        recordChangeDescriptions: store.recordChangeDescriptions,
+        supportsReloadAndProfile: store.supportsReloadAndProfile,
+      }),
       subscribe: (callback: Function) => {
+        store.addListener('recordChangeDescriptions', callback);
         store.addListener('supportsReloadAndProfile', callback);
-        return () => store.removeListener('supportsReloadAndProfile', callback);
+        return () => {
+          store.removeListener('recordChangeDescriptions', callback);
+          store.removeListener('supportsReloadAndProfile', callback);
+        };
       },
     }),
     [store]
   );
-  const supportsReloadAndProfile = useSubscription<boolean, Store>(
-    supportsReloadAndProfileSubscription
-  );
+  const {
+    recordChangeDescriptions,
+    supportsReloadAndProfile,
+  } = useSubscription<SubscriptionData, Store>(subscription);
 
-  const reloadAndProfile = useCallback(() => bridge.send('reloadAndProfile'), [
-    bridge,
-  ]);
+  const reloadAndProfile = useCallback(
+    () => bridge.send('reloadAndProfile', recordChangeDescriptions),
+    [bridge, recordChangeDescriptions]
+  );
 
   if (!supportsReloadAndProfile) {
     return null;
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 30097488c746..d19f2b17435f 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -56,3 +56,22 @@
 .CurrentCommit:focus {
   outline: none;
 }
+
+.WhatChangedItem {
+  margin-top: 0.25rem;
+}
+
+.WhatChangedKey {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  line-height: 1;
+}
+.WhatChangedKey:first-of-type::before {
+  content: ' (';
+}
+.WhatChangedKey::after {
+  content: ', ';
+}
+.WhatChangedKey:last-of-type::after {
+  content: ')';
+}
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index c83b0bc00e29..2b3c1b793a1f 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment, useContext } from 'react';
+import ProfilerStore from 'src/devtools/ProfilerStore';
 import { ProfilerContext } from './ProfilerContext';
 import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
@@ -67,9 +68,86 @@ export default function SidebarSelectedFiberInfo(_: Props) {
           <ButtonIcon type="close" />
         </Button>
       </div>
+      <WhatChanged
+        commitIndex={((selectedCommitIndex: any): number)}
+        fiberID={((selectedFiberID: any): number)}
+        profilerStore={profilerStore}
+        rootID={((rootID: any): number)}
+      />
       <div className={styles.Content}>
         <label className={styles.Label}>Rendered at</label>: {listItems}
       </div>
     </Fragment>
   );
 }
+
+type WhatChangedProps = {|
+  commitIndex: number,
+  fiberID: number,
+  profilerStore: ProfilerStore,
+  rootID: number,
+|};
+
+function WhatChanged({
+  commitIndex,
+  fiberID,
+  profilerStore,
+  rootID,
+}: WhatChangedProps) {
+  const { changeDescriptions } = profilerStore.getCommitData(
+    ((rootID: any): number),
+    commitIndex
+  );
+  if (changeDescriptions === null) {
+    return null;
+  }
+
+  const changeDescription = changeDescriptions.get(fiberID);
+  if (changeDescription == null) {
+    return null;
+  }
+
+  const changes = [];
+  if (changeDescription.didHooksChange) {
+    changes.push(
+      <div key="hooks" className={styles.WhatChangedItem}>
+        • Hooks
+      </div>
+    );
+  }
+  if (changeDescription.props.length !== 0) {
+    changes.push(
+      <div key="props" className={styles.WhatChangedItem}>
+        • Props
+        {changeDescription.props.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  if (changeDescription.state.length !== 0) {
+    changes.push(
+      <div key="state" className={styles.WhatChangedItem}>
+        • State
+        {changeDescription.state.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  if (changes.length === 0) {
+    changes.push(<div className={styles.WhatChangedItem}>Nothing</div>);
+  }
+
+  return (
+    <div className={styles.Content}>
+      <label className={styles.Label}>What changed?</label>
+      {changes}
+    </div>
+  );
+}
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 9af30779bec5..667ab54ce3bc 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -31,7 +31,17 @@ export type SnapshotNode = {|
   type: ElementType,
 |};
 
+// TODO (change descriptions) Is it important to handle context?
+export type ChangeDescription = {|
+  didHooksChange: boolean,
+  props: Array<string>,
+  state: Array<string>,
+|};
+
 export type CommitDataFrontend = {|
+  // Map of Fiber (ID) to a description of what changed in this commit.
+  changeDescriptions: Map<number, ChangeDescription> | null,
+
   // How long was this commit?
   duration: number,
 
@@ -93,6 +103,7 @@ export type ProfilingDataFrontend = {|
 |};
 
 export type CommitDataExport = {|
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
   // Tuple of fiber ID and actual duration
   fiberActualDurations: Array<[number, number]>,
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index f192520f4f32..bd4d1e9f3195 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -58,6 +58,10 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
 
         dataForRoots.set(rootID, {
           commitData: commitData.map((commitDataBackend, commitIndex) => ({
+            changeDescriptions:
+              commitDataBackend.changeDescriptions != null
+                ? new Map(commitDataBackend.changeDescriptions)
+                : null,
             duration: commitDataBackend.duration,
             fiberActualDurations: new Map(
               commitDataBackend.fiberActualDurations
@@ -109,6 +113,7 @@ export function prepareProfilingDataFrontendFromExport(
       dataForRoots.set(rootID, {
         commitData: commitData.map(
           ({
+            changeDescriptions,
             duration,
             fiberActualDurations,
             fiberSelfDurations,
@@ -117,6 +122,8 @@ export function prepareProfilingDataFrontendFromExport(
             screenshot,
             timestamp,
           }) => ({
+            changeDescriptions:
+              changeDescriptions != null ? new Map(changeDescriptions) : null,
             duration,
             fiberActualDurations: new Map(fiberActualDurations),
             fiberSelfDurations: new Map(fiberSelfDurations),
@@ -159,6 +166,7 @@ export function prepareProfilingDataExport(
       dataForRoots.push({
         commitData: commitData.map(
           ({
+            changeDescriptions,
             duration,
             fiberActualDurations,
             fiberSelfDurations,
@@ -167,6 +175,10 @@ export function prepareProfilingDataExport(
             screenshot,
             timestamp,
           }) => ({
+            changeDescriptions:
+              changeDescriptions != null
+                ? Array.from(changeDescriptions.entries())
+                : null,
             duration,
             fiberActualDurations: Array.from(fiberActualDurations.entries()),
             fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index 645ee254223c..b53dee04e239 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { Fragment, useCallback, useContext, useMemo } from 'react';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
@@ -43,6 +43,20 @@ function Settings(_: {||}) {
     collapseNodesByDefaultSubscription
   );
 
+  const recordChangeDescriptionsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.recordChangeDescriptions,
+      subscribe: (callback: Function) => {
+        store.addListener('recordChangeDescriptions', callback);
+        return () => store.removeListener('recordChangeDescriptions', callback);
+      },
+    }),
+    [store]
+  );
+  const recordChangeDescriptions = useSubscription<boolean, Store>(
+    recordChangeDescriptionsSubscription
+  );
+
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
       setDisplayDensity(currentTarget.value);
@@ -69,6 +83,12 @@ function Settings(_: {||}) {
     },
     [store]
   );
+  const updateRecordChangeDescriptions = useCallback(
+    ({ currentTarget }) => {
+      store.recordChangeDescriptions = currentTarget.checked;
+    },
+    [store]
+  );
 
   return (
     <div className={styles.Settings}>
@@ -145,25 +165,37 @@ function Settings(_: {||}) {
         </label>
       </div>
 
-      {store.supportsCaptureScreenshots && (
-        <div className={styles.Section}>
-          <div className={styles.Header}>Profiler</div>
-          <label className={styles.CheckboxOption}>
-            <input
-              type="checkbox"
-              checked={captureScreenshots}
-              onChange={updateCaptureScreenshotsWhileProfiling}
-            />{' '}
-            Capture screenshots while profiling
-          </label>
-          {captureScreenshots && (
-            <div className={styles.ScreenshotThrottling}>
-              Screenshots will be throttled in order to reduce the negative
-              impact on performance.
-            </div>
-          )}
-        </div>
-      )}
+      <div className={styles.Section}>
+        <div className={styles.Header}>Profiler</div>
+
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={recordChangeDescriptions}
+            onChange={updateRecordChangeDescriptions}
+          />{' '}
+          Record which props/state/hooks changed while profiling
+        </label>
+
+        {store.supportsCaptureScreenshots && (
+          <Fragment>
+            <label className={styles.CheckboxOption}>
+              <input
+                type="checkbox"
+                checked={captureScreenshots}
+                onChange={updateCaptureScreenshotsWhileProfiling}
+              />{' '}
+              Capture screenshots while profiling
+            </label>
+            {captureScreenshots && (
+              <div className={styles.ScreenshotThrottling}>
+                Screenshots will be throttled in order to reduce the negative
+                impact on performance.
+              </div>
+            )}
+          </Fragment>
+        )}
+      </div>
     </div>
   );
 }

From 9243bc194c240d3f06ccd5e4333f3488f2628e2f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 7 Jun 2019 17:21:30 -0700
Subject: [PATCH 697/814] Rewrite to make it sturdier

---
 .../storeLegacy-v15-test.js.snap              |  72 +-
 src/__tests__/legacy/storeLegacy-v15-test.js  |  63 +-
 src/backend/legacy/getChildren.js             |  45 --
 src/backend/legacy/getElementType.js          |  25 -
 src/backend/legacy/renderer.js                | 708 +++++++-----------
 src/backend/legacy/utils.js                   |  14 -
 6 files changed, 396 insertions(+), 531 deletions(-)
 delete mode 100644 src/backend/legacy/getChildren.js
 delete mode 100644 src/backend/legacy/getElementType.js

diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
index 05e853c2ee1c..d43112d058b5 100644
--- a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `
 [root]
   ▾ <Grandparent>
     ▾ <div>
@@ -13,8 +13,27 @@ exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes fro
         ▾ <div>
           ▾ <Child>
               <div>
+        <Nothing>
 `;
 
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <div>
+        ▾ <Parent>
+          ▾ <div>
+            ▾ <Child>
+                <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child>
+              <div>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
+
 exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
 [root]
   ▾ <Root>
@@ -281,8 +300,20 @@ exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes
     ▾ <div>
       ▸ <div>
       ▸ <Parent>
+        <Nothing>
 `;
 
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <div>
+      ▸ <Parent>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
+
 exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
 [root]
   ▸ <Wrapper>
@@ -422,6 +453,45 @@ exports[`Store (legacy) collapseNodesByDefault:true should support mount and upd
 
 exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▸ <Bar key="bar">
+      ▸ <Foo key="foo">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▸ <div>
+      ▾ <Foo key="foo">
+        ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
 exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
   ▸ <Component>
diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/src/__tests__/legacy/storeLegacy-v15-test.js
index 96c8251d77d5..fc5d373e5bbd 100644
--- a/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -107,29 +107,40 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('4: unmount A');
     });
 
-    it('should filter DOM nodes from the store tree', () => {
-      const Grandparent = () => (
+    it('should not filter DOM nodes from the store tree', () => {
+      const Grandparent = ({ flip }) => (
         <div>
           <div>
-            <Parent />
+            <Parent flip={flip} />
           </div>
-          <Parent />
+          <Parent flip={flip} />
+          <Nothing />
         </div>
       );
-      const Parent = () => (
+      const Parent = ({ flip }) => (
         <div>
+          {flip ? 'foo' : null}
           <Child />
+          {flip && [null, 'hello', 42]}
+          {flip ? 'bar' : 'baz'}
         </div>
       );
       const Child = () => <div>Hi!</div>;
+      const Nothing = () => null;
 
+      const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div')
-        )
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container)
       );
       expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container)
+      );
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('5: unmount');
     });
 
     it('should support collapsing parts of the tree', () => {
@@ -317,26 +328,29 @@ describe('Store (legacy)', () => {
     });
 
     it('should not filter DOM nodes from the store tree', () => {
-      const Grandparent = () => (
+      const Grandparent = ({ flip }) => (
         <div>
           <div>
-            <Parent />
+            <Parent flip={flip} />
           </div>
-          <Parent />
+          <Parent flip={flip} />
+          <Nothing />
         </div>
       );
-      const Parent = () => (
+      const Parent = ({ flip }) => (
         <div>
+          {flip ? 'foo' : null}
           <Child />
+          {flip && [null, 'hello', 42]}
+          {flip ? 'bar' : 'baz'}
         </div>
       );
       const Child = () => <div>Hi!</div>;
+      const Nothing = () => null;
 
+      const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div')
-        )
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container)
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -345,6 +359,14 @@ describe('Store (legacy)', () => {
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
       expect(store).toMatchSnapshot('3: expand div');
+
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container)
+      );
+      expect(store).toMatchSnapshot('4: final update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('5: unmount');
     });
 
     it('should support expanding parts of the tree', () => {
@@ -445,7 +467,7 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('6: expand middle node');
     });
 
-    xit('should support reordering of children', () => {
+    it('should support reordering of children', () => {
       const Root = ({ children }) => <div>{children}</div>;
       const Component = () => <div />;
 
@@ -467,9 +489,12 @@ describe('Store (legacy)', () => {
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       expect(store).toMatchSnapshot('3: expand root');
 
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('4: expand div');
+
       act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
         store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
-        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
       });
       expect(store).toMatchSnapshot('4: expand leaves');
 
diff --git a/src/backend/legacy/getChildren.js b/src/backend/legacy/getChildren.js
deleted file mode 100644
index 0f10b5f282a0..000000000000
--- a/src/backend/legacy/getChildren.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// @flow
-
-// TODO (legacy) Respect component filters
-
-export default function getChildren(internalInstance: Object): Array<any> {
-  let children = [];
-
-  // If the parent is a native node without rendered children, but with
-  // multiple string children, then the `element` that gets passed in here is
-  // a plain value -- a string or number.
-  if (typeof internalInstance !== 'object') {
-    // No children
-  } else if (
-    internalInstance._currentElement === null ||
-    internalInstance._currentElement === false
-  ) {
-    // No children
-  } else if (internalInstance._renderedComponent) {
-    children = [internalInstance._renderedComponent];
-  } else if (internalInstance._renderedChildren) {
-    children = renderedChildrenToArray(internalInstance._renderedChildren);
-  }
-  // Note: we skip the case where children are just strings or numbers
-  // because the new DevTools skips over host text nodes anyway.
-
-  const instance = internalInstance._instance;
-  if (instance) {
-    // TODO: React ART currently falls in this bucket, but this doesn't
-    // actually make sense and we should clean this up after stabilizing our
-    // API for backends
-    if (instance._renderedChildren) {
-      children = renderedChildrenToArray(instance._renderedChildren);
-    }
-  }
-
-  return children;
-}
-
-function renderedChildrenToArray(renderedChildren): Array<any> {
-  const childrenArray = [];
-  for (let name in renderedChildren) {
-    childrenArray.push(renderedChildren[name]);
-  }
-  return childrenArray;
-}
diff --git a/src/backend/legacy/getElementType.js b/src/backend/legacy/getElementType.js
deleted file mode 100644
index 10b8c9f68e4e..000000000000
--- a/src/backend/legacy/getElementType.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// @flow
-import {
-  ElementTypeClass,
-  ElementTypeHostComponent,
-  ElementTypeOtherOrUnknown,
-} from 'src/types';
-
-import type { InternalInstance } from './renderer';
-import type { ElementType } from 'src/types';
-
-export default function getElementType(
-  internalInstance: InternalInstance
-): ElementType {
-  // != used deliberately here to catch undefined and null
-  if (internalInstance._currentElement != null) {
-    const elementType = internalInstance._currentElement.type;
-    if (typeof elementType === 'function') {
-      return ElementTypeClass;
-    } else if (typeof elementType === 'string') {
-      return ElementTypeHostComponent;
-    }
-  }
-
-  return ElementTypeOtherOrUnknown;
-}
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 2e6d65190c76..f22f617ed984 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -4,6 +4,7 @@ import {
   ElementTypeClass,
   ElementTypeFunction,
   ElementTypeRoot,
+  ElementTypeHostComponent,
   ElementTypeOtherOrUnknown,
 } from 'src/types';
 import { getUID, utfEncodeString, printOperationsArray } from '../../utils';
@@ -14,15 +15,8 @@ import {
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
 } from '../../constants';
-import getChildren from './getChildren';
 import getData from './getData';
-import getElementType from './getElementType';
-import {
-  decorateResult,
-  decorateMany,
-  forceUpdate,
-  restoreMany,
-} from './utils';
+import { decorateMany, forceUpdate, restoreMany } from './utils';
 
 import type {
   DevToolsHook,
@@ -32,7 +26,7 @@ import type {
   PathMatch,
   RendererInterface,
 } from '../types';
-import type { ComponentFilter } from 'src/types';
+import type { ComponentFilter, ElementType } from 'src/types';
 import type {
   InspectedElement,
   Owner,
@@ -41,6 +35,51 @@ import type {
 export type InternalInstance = Object;
 type LegacyRenderer = Object;
 
+function getElementType(internalInstance: InternalInstance): ElementType {
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'function') {
+      return ElementTypeClass;
+    } else if (typeof elementType === 'string') {
+      return ElementTypeHostComponent;
+    }
+  }
+  return ElementTypeOtherOrUnknown;
+}
+
+function getChildren(internalInstance: Object): Array<any> {
+  let children = [];
+
+  // If the parent is a native node without rendered children, but with
+  // multiple string children, then the `element` that gets passed in here is
+  // a plain value -- a string or number.
+  if (typeof internalInstance !== 'object') {
+    // No children
+  } else if (
+    internalInstance._currentElement === null ||
+    internalInstance._currentElement === false
+  ) {
+    // No children
+  } else if (internalInstance._renderedComponent) {
+    const child = internalInstance._renderedComponent;
+    if (getElementType(child) !== ElementTypeOtherOrUnknown) {
+      children.push(child);
+    }
+  } else if (internalInstance._renderedChildren) {
+    const renderedChildren = internalInstance._renderedChildren;
+    for (let name in renderedChildren) {
+      const child = renderedChildren[name];
+      if (getElementType(child) !== ElementTypeOtherOrUnknown) {
+        children.push(child);
+      }
+    }
+  }
+  // Note: we skip the case where children are just strings or numbers
+  // because the new DevTools skips over host text nodes anyway.
+  return children;
+}
+
 export function attach(
   hook: DevToolsHook,
   rendererID: number,
@@ -48,201 +87,186 @@ export function attach(
   global: Object
 ): RendererInterface {
   const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
-  const idToParentIDMap: Map<number, number> = new Map();
   const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();
-  const internalInstanceToLastKnownChildrenMap: WeakMap<
-    InternalInstance,
-    Array<number>
-  > = new WeakMap();
-  const rootIDs: Set<number> = new Set();
-
-  function getID(internalInstance: InternalInstance): number {
-    if (typeof internalInstance !== 'object') {
-      throw new Error('Invalid internal instance: ' + internalInstance);
-    }
-    if (!internalInstanceToIDMap.has(internalInstance)) {
-      const id = getUID();
-      internalInstanceToIDMap.set(internalInstance, id);
-      idToInternalInstanceMap.set(id, internalInstance);
-    }
-    return ((internalInstanceToIDMap.get(internalInstance): any): number);
-  }
-
-  function getChildIDs(internalInstance: InternalInstance): Array<number> {
-    return getChildren(internalInstance).map(getID);
-  }
-
-  function findNearestAncestorInTree(
-    internalInstance: InternalInstance
-  ): number | null {
-    let current = internalInstance;
-    while (current != null) {
-      const id = getID(current);
-      if (
-        rootIDs.has(id) ||
-        getElementType(current) !== ElementTypeOtherOrUnknown
-      ) {
-        return id;
-      }
-      const parentID = idToParentIDMap.get(id);
-      current = parentID != null ? idToInternalInstanceMap.get(parentID) : null;
-    }
-    return null;
-  }
 
   let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
   let findNativeNodeForInternalID: (id: number) => ?NativeType;
 
-  // React Native
-  if (renderer.Mount.findNodeHandle && renderer.Mount.nativeTagToRootNodeID) {
-    getInternalIDForNative = (nativeTag, findNearestUnfilteredAncestor) => {
-      const internalInstance = renderer.Mount.nativeTagToRootNodeID(nativeTag);
-      return findNearestAncestorInTree(internalInstance);
-    };
-    findNativeNodeForInternalID = (id: number) => {
-      const internalInstance = idToInternalInstanceMap.get(id);
-      return renderer.Mount.findNodeHandle(internalInstance);
-    };
-
-    // React DOM 15+
-  } else if (renderer.ComponentTree) {
+  if (renderer.ComponentTree) {
     getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
       const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(
         node
       );
-      return findNearestAncestorInTree(internalInstance);
+      return internalInstanceToIDMap.get(internalInstance) || null;
     };
     findNativeNodeForInternalID = (id: number) => {
       const internalInstance = idToInternalInstanceMap.get(id);
       return renderer.ComponentTree.getNodeFromInstance(internalInstance);
     };
-
-    // React DOM
   } else if (renderer.Mount.getID && renderer.Mount.getNode) {
     getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
-      let id = renderer.Mount.getID(node);
-      while (node && node.parentNode && !id) {
-        node = node.parentNode;
-        id = renderer.Mount.getID(node);
-      }
-      return id;
+      // Not implemented.
+      return null;
     };
-
     findNativeNodeForInternalID = (id: number) => {
-      try {
-        const internalInstance = idToInternalInstanceMap.get(id);
-        if (internalInstance != null) {
-          return renderer.Mount.getNode(internalInstance._rootNodeID);
-        }
-      } catch (e) {}
-
+      // Not implemented.
       return null;
     };
-  } else {
-    console.warn(
-      'Unknown React version (does not have getID), probably an unshimmed React Native'
-    );
   }
 
-  let oldReconcilerMethods = null;
-  let oldRenderComponent = null;
-  let oldRenderRoot = null;
-
-  // React DOM
-  if (renderer.Mount._renderNewRootComponent) {
-    oldRenderRoot = decorateResult(
-      renderer.Mount,
-      '_renderNewRootComponent',
-      internalInstance => {
-        // TODO: we might need to reset currentParentID before this runs.
-
-        const id = getID(internalInstance);
-        rootIDs.add(id);
-
-        if (__DEBUG__) {
-          console.log('renderer.Mount._renderNewRootComponent()', id);
-        }
-
-        // TODO: maybe we need to record this mount.
-        // Needs testing.
-
-        // If we're mounting a root, we've just finished a batch of work,
-        // so it's safe to synchronously flush.
-        flushPendingEvents(id);
-      }
-    );
-
-    // React Native
-  } else if (renderer.Mount.renderComponent) {
-    oldRenderComponent = decorateResult(
-      renderer.Mount,
-      'renderComponent',
-      internalInstance => {
-        // TODO: we might need to reset currentParentID before this runs.
-
-        const id = getID(internalInstance);
-        rootIDs.add(id);
-
-        if (__DEBUG__) {
-          console.log('renderer.Mount.renderComponent()', id);
-        }
-
-        // TODO: maybe we need to record this mount.
-        // Needs testing.
+  function getID(internalInstance: InternalInstance): number {
+    if (typeof internalInstance !== 'object') {
+      throw new Error('Invalid internal instance: ' + internalInstance);
+    }
+    if (!internalInstanceToIDMap.has(internalInstance)) {
+      const id = getUID();
+      internalInstanceToIDMap.set(internalInstance, id);
+      idToInternalInstanceMap.set(id, internalInstance);
+    }
+    return ((internalInstanceToIDMap.get(internalInstance): any): number);
+  }
 
-        // If we're mounting a root, we've just finished a batch of work,
-        // so it's safe to synchronously flush.
-        flushPendingEvents(id);
+  function areEqualArrays(a, b) {
+    if (a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
       }
-    );
+    }
+    return true;
   }
 
   // This is shared mutable state that lets us keep track of where we are.
-  let currentParentID = 0;
+  let parentIDStack = [];
 
+  let oldReconcilerMethods = null;
   if (renderer.Reconciler) {
     oldReconcilerMethods = decorateMany(renderer.Reconciler, {
       mountComponent(fn, args) {
         const [internalInstance] = args;
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
 
-        recordPendingMount(internalInstance);
-
-        let prevParentID = currentParentID;
-        currentParentID = getID(internalInstance);
-        const result = fn.apply(this, args);
-        currentParentID = prevParentID;
+        const id = getID(internalInstance);
 
-        return result;
+        // Push the operation.
+        const parentID =
+          parentIDStack.length > 0
+            ? parentIDStack[parentIDStack.length - 1]
+            : 0;
+        recordMount(internalInstance, id, parentID);
+        parentIDStack.push(id);
+
+        try {
+          const result = fn.apply(this, args);
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            flushPendingEvents(id);
+          }
+        }
       },
       performUpdateIfNecessary(fn, args) {
         const [internalInstance] = args;
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
 
-        let prevParentID = currentParentID;
-        currentParentID = getID(internalInstance);
-        const result = fn.apply(this, args);
-        currentParentID = prevParentID;
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
 
-        recordPendingReorder(internalInstance);
-        return result;
+        const prevChildren = getChildren(internalInstance);
+        try {
+          const result = fn.apply(this, args);
+
+          const nextChildren = getChildren(internalInstance);
+          if (!areEqualArrays(prevChildren, nextChildren)) {
+            // Push the operation
+            recordReorder(internalInstance, id, nextChildren);
+          }
+
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            // TODO: this is probably wrong!
+            const rootID =
+              internalInstance._topLevelWrapper === null
+                ? id
+                : getID(internalInstance._topLevelWrapper);
+            flushPendingEvents(rootID);
+          }
+        }
       },
       receiveComponent(fn, args) {
         const [internalInstance] = args;
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
 
-        let prevParentID = currentParentID;
-        currentParentID = getID(internalInstance);
-        const result = fn.apply(this, args);
-        currentParentID = prevParentID;
+        const prevChildren = getChildren(internalInstance);
+        try {
+          const result = fn.apply(this, args);
 
-        recordPendingReorder(internalInstance);
-        return result;
+          const nextChildren = getChildren(internalInstance);
+          if (!areEqualArrays(prevChildren, nextChildren)) {
+            // Push the operation
+            recordReorder(internalInstance, id, nextChildren);
+          }
+
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            // TODO: this is probably wrong!
+            const rootID =
+              internalInstance._topLevelWrapper === null
+                ? id
+                : getID(internalInstance._topLevelWrapper);
+            flushPendingEvents(rootID);
+          }
+        }
       },
       unmountComponent(fn, args) {
         const [internalInstance] = args;
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
 
-        const result = fn.apply(this, args);
-
-        recordPendingUnmount(internalInstance);
-        return result;
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+        try {
+          const result = fn.apply(this, args);
+          parentIDStack.pop();
+
+          // Push the operation.
+          recordUnmount(internalInstance, id);
+
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            flushPendingEvents(id);
+          }
+        }
       },
     });
   }
@@ -255,110 +279,87 @@ export function attach(
         restoreMany(renderer.Reconciler, oldReconcilerMethods);
       }
     }
-    if (oldRenderRoot !== null) {
-      renderer.Mount._renderNewRootComponent = oldRenderRoot;
-    }
-    if (oldRenderComponent !== null) {
-      renderer.Mount.renderComponent = oldRenderComponent;
-    }
     oldReconcilerMethods = null;
-    oldRenderRoot = null;
-    oldRenderComponent = null;
   }
 
-  const pendingMountIDs: Set<number> = new Set();
-  const pendingUnmountIDs: Set<number> = new Set();
-  const pendingReorderIDs: Set<number> = new Set();
-  const pendingOperations: Array<number> = [];
-  const pendingStringTable: Map<string, number> = new Map();
-  let pendingStringTableLength: number = 0;
-  let pendingUnmountedRootID: number | null = null;
-
-  function pushOperation(op: number): void {
-    if (__DEV__) {
-      if (!Number.isInteger(op)) {
-        console.error(
-          'pushOperation() was called but the value is not an integer.',
-          op
-        );
-      }
-    }
-    pendingOperations.push(op);
-  }
+  function recordMount(
+    internalInstance: InternalInstance,
+    id: number,
+    parentID: number
+  ) {
+    const isRoot = parentID === 0;
 
-  // TODO Rethink the below queueing mechanism.
-  // Every mount is some parent's update (except for the root mount which we can explicitly handle)
-  // So maybe we only need to call queueFlushPendingEvents() for updates,
-  // and maybe we can rely on an id-to-root Map for this case, to limit the scope of what  we crawl.
-
-  // Older React renderers did not have the concept of a commit.
-  // The data structure was just ad-hoc mutated in place.
-  // So except for the case of the root mounting the first time,
-  // there is no event we can observe to signal that a render is finished.
-  // However since older renderers were always synchronous,
-  // we can use setTimeout to batch operations together.
-  // In the case of a cascading update, we might batch multiple "commits"-
-  // but that should be okay, since the batching is not strictly necessary.
-  let flushPendingEventsTimeoutID: TimeoutID | null = null;
-  function queueFlushPendingEvents() {
-    if (flushPendingEventsTimeoutID === null) {
-      flushPendingEventsTimeoutID = setTimeout(() => {
-        flushPendingEventsTimeoutID = null;
-
-        // If there are pending operations, walk the tree and find them.
-        // Ideally we wouldjust pluck the pending operations out of the sets directly,
-        // but without doing a full traversal, it would be hard for us to determine the filtered parent.
-        // It should be possible to improve this though, by maintaining a map of id-to-parent,
-        // and crawling upward to the first non-filtered node.
-        // TODO Revisit this and think about it more...
-        if (
-          pendingMountIDs.size > 0 ||
-          pendingUnmountIDs.size > 0 ||
-          pendingReorderIDs.size > 0
-        ) {
-          rootIDs.forEach(flushPendingEvents);
-        }
-      }, 0);
+    if (__DEBUG__) {
+      console.log(
+        '%crecordMount()',
+        'color: green; font-weight: bold;',
+        id,
+        getData(internalInstance).displayName
+      );
     }
-  }
 
-  function flushInitialOperations() {
-    // Older versions of React do not support profiling mode, so there's nothing to flush.
-    // Crawl roots though and register any nodes that mounted before we were injected.
-
-    const roots =
-      renderer.Mount._instancesByReactRootID ||
-      renderer.Mount._instancesByContainerID;
+    if (isRoot) {
+      // TODO Is this right? For all versions?
+      const hasOwnerMetadata =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null;
 
-    for (let key in roots) {
-      const internalInstance = roots[key];
-      const id = getID(internalInstance);
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(ElementTypeRoot);
+      pushOperation(0); // isProfilingSupported?
+      pushOperation(hasOwnerMetadata ? 1 : 0);
+    } else {
+      const { displayName, key, type } = getData(internalInstance);
 
-      rootIDs.add(id);
+      const ownerID =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null
+          ? getID(internalInstance._currentElement._owner)
+          : 0;
 
-      crawlAndRecordInitialMounts(id, 0);
+      let displayNameStringID = getStringID(displayName);
+      let keyStringID = getStringID(key);
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(type);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
+    }
+  }
 
-      // It's safe to synchronously flush for the root we just crawled.
-      flushPendingEvents(id);
+  function recordReorder(
+    internalInstance: InternalInstance,
+    id: number,
+    nextChildren: Array<InternalInstance>
+  ) {
+    pushOperation(TREE_OPERATION_REORDER_CHILDREN);
+    pushOperation(id);
+    const nextChildIDs = nextChildren.map(getID);
+    pushOperation(nextChildIDs.length);
+    for (let i = 0; i < nextChildIDs.length; i++) {
+      pushOperation(nextChildIDs[i]);
     }
   }
 
-  // TODO: this isn't covered by tests.
-  // Might be broken.
+  function recordUnmount(internalInstance: InternalInstance, id: number) {
+    pendingUnmountedIDs.push(id);
+    internalInstanceToIDMap.delete(internalInstance);
+    idToInternalInstanceMap.delete(id);
+  }
+
   function crawlAndRecordInitialMounts(id: number, parentID: number) {
     const internalInstance = idToInternalInstanceMap.get(id);
 
-    // Not all nodes are mounted in the frontend DevTools tree,
-    // but it's important to track parent info even for the unmounted ones.
-    idToParentIDMap.set(id, parentID);
-
     if (__DEBUG__) {
       console.group('crawlAndRecordInitialMounts() id:', id);
     }
 
-    recordMount(id, parentID);
-    getChildIDs(internalInstance).forEach(childID =>
-      crawlAndRecordInitialMounts(childID, id)
+    recordMount(internalInstance, id, parentID);
+    getChildren(internalInstance).forEach(child =>
+      crawlAndRecordInitialMounts(getID(child), id)
     );
 
     if (__DEBUG__) {
@@ -366,49 +367,39 @@ export function attach(
     }
   }
 
-  function flushPendingEvents(rootID: number): void {
-    // Record pending deletions.
-    const unmountIDs = [];
-    pendingUnmountIDs.forEach(id => {
-      const internalInstance = idToInternalInstanceMap.get(id);
-      const isRoot = rootIDs.has(id);
-
-      if (__DEBUG__) {
-        console.log(
-          '%crecordUnmount()',
-          'color: red; font-weight: bold;',
-          id,
-          getData(internalInstance).displayName
-        );
-      }
+  function flushInitialOperations() {
+    // Crawl roots though and register any nodes that mounted before we were injected.
 
-      // TODO: handle the case where it was never mounted.
-      if (isRoot) {
-        pendingUnmountedRootID = id;
-        rootIDs.delete(id);
-      } else {
-        unmountIDs.push(id);
-      }
+    const roots =
+      renderer.Mount._instancesByReactRootID ||
+      renderer.Mount._instancesByContainerID;
 
-      idToInternalInstanceMap.delete(id);
-      internalInstanceToIDMap.delete(internalInstance);
-    });
+    for (let key in roots) {
+      const internalInstance = roots[key];
+      const id = getID(internalInstance);
+      crawlAndRecordInitialMounts(id, 0);
+      flushPendingEvents(id);
+    }
+  }
 
-    pendingMountIDs.forEach(id => {
-      if (pendingUnmountIDs.has(id)) {
-        return;
-      }
-      const parentID = idToParentIDMap.get(id);
-      if (parentID === undefined) {
-        return;
-      }
-      recordMount(id, parentID);
-    });
+  let pendingOperations: Array<number> = [];
+  let pendingStringTable: Map<string, number> = new Map();
+  let pendingUnmountedIDs: Array<number> = [];
+  let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: number | null = null;
+
+  function flushPendingEvents(rootID: number) {
+    if (
+      pendingOperations.length === 0 &&
+      pendingUnmountedIDs.length === 0 &&
+      pendingUnmountedRootID === null
+    ) {
+      return;
+    }
 
     const numUnmountIDs =
-      unmountIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
+      pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
 
-    const reorderOperations = computePendingReorderOperations();
     const operations = new Uint32Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
@@ -420,11 +411,7 @@ export function attach(
         // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
         (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
         // Mount operations
-        pendingOperations.length +
-        // Reorder operation come last because
-        // bridge expects them to not change children length.
-        // So both mounts and unmounts need to have happened by now.
-        reorderOperations.length
+        pendingOperations.length
     );
 
     // Identify which renderer this update is coming from.
@@ -449,8 +436,8 @@ export function attach(
       // The first number is how many unmounted IDs we're gonna send.
       operations[i++] = numUnmountIDs;
       // Fill in the unmounts
-      for (let j = 0; j < unmountIDs.length; j++) {
-        operations[i++] = unmountIDs[j];
+      for (let j = 0; j < pendingUnmountedIDs.length; j++) {
+        operations[i++] = pendingUnmountedIDs[j];
       }
       // The root ID should always be unmounted last.
       if (pendingUnmountedRootID !== null) {
@@ -463,8 +450,6 @@ export function attach(
     operations.set(pendingOperations, i);
     i += pendingOperations.length;
 
-    operations.set(reorderOperations, i);
-
     if (__DEBUG__) {
       printOperationsArray(operations);
     }
@@ -473,59 +458,22 @@ export function attach(
     hook.emit('operations', operations);
 
     pendingOperations.length = 0;
-    pendingMountIDs.clear();
-    pendingReorderIDs.clear();
-    pendingUnmountIDs.clear();
+    pendingUnmountedIDs = [];
     pendingUnmountedRootID = null;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
   }
 
-  function computePendingReorderOperations(): Array<number> {
-    const ops = [];
-    pendingReorderIDs.forEach(id => {
-      const internalInstance = idToInternalInstanceMap.get(id);
-      if (internalInstance === undefined) {
-        return;
-      }
-      const prevChildIDs = internalInstanceToLastKnownChildrenMap.get(
-        internalInstance
-      );
-      const nextChildIDs = getChildIDs(internalInstance);
-      internalInstanceToLastKnownChildrenMap.set(
-        internalInstance,
-        nextChildIDs
-      );
-
-      let shouldResetChildren = false;
-      if (prevChildIDs === undefined) {
-        // We haven't computed children before.
-        // So we'll have to do it now.
-        // Next time they'll be cached for comparison
-        // TODO: this might not make sense. Revisit.
-        shouldResetChildren = true;
-      } else if (nextChildIDs.length > 1) {
-        if (prevChildIDs.length !== nextChildIDs.length) {
-          shouldResetChildren = true;
-        } else {
-          for (let i = 0; i < prevChildIDs.length; i++) {
-            if (prevChildIDs[i] !== nextChildIDs[i]) {
-              shouldResetChildren = true;
-              break;
-            }
-          }
-        }
-      }
-      if (shouldResetChildren) {
-        ops.push(TREE_OPERATION_REORDER_CHILDREN);
-        ops.push(getID(internalInstance));
-        ops.push(nextChildIDs.length);
-        for (let i = 0; i < nextChildIDs.length; i++) {
-          ops.push(nextChildIDs[i]);
-        }
+  function pushOperation(op: number): void {
+    if (__DEV__) {
+      if (!Number.isInteger(op)) {
+        console.error(
+          'pushOperation() was called but the value is not an integer.',
+          op
+        );
       }
-    });
-    return ops;
+    }
+    pendingOperations.push(op);
   }
 
   function getStringID(str: string | null): number {
@@ -704,100 +652,6 @@ export function attach(
     }
   }
 
-  function recordPendingMount(internalInstance: InternalInstance) {
-    const id = getID(internalInstance);
-    pendingMountIDs.add(id);
-    idToParentIDMap.set(id, currentParentID);
-
-    if (__DEBUG__) {
-      console.log(
-        '%crecordPendingMount()',
-        'color: green',
-        getID(internalInstance)
-      );
-    }
-
-    queueFlushPendingEvents();
-  }
-
-  function recordPendingReorder(internalInstance: InternalInstance) {
-    const id = getID(internalInstance);
-    pendingReorderIDs.add(id);
-
-    if (__DEBUG__) {
-      console.log('%crecordPendingReorder()', 'color: green', id);
-    }
-
-    queueFlushPendingEvents();
-  }
-
-  function recordPendingUnmount(internalInstance: InternalInstance) {
-    const id = getID(internalInstance);
-
-    pendingUnmountIDs.add(id);
-
-    // Not all nodes are mounted (or unmounted) in the frontend DevTools tree,
-    // so it's important to remove entries from this map on pending unmount.
-    idToParentIDMap.delete(id);
-
-    if (__DEBUG__) {
-      console.log(
-        '%crecordPendingUnmount()',
-        'color: red',
-        getID(internalInstance)
-      );
-    }
-
-    queueFlushPendingEvents();
-  }
-
-  function recordMount(id: number, parentID: number) {
-    const internalInstance = ((idToInternalInstanceMap.get(
-      id
-    ): any): InternalInstance);
-    const isRoot = rootIDs.has(id);
-
-    if (__DEBUG__) {
-      console.log(
-        '%crecordMount()',
-        'color: green; font-weight: bold;',
-        id,
-        getData(internalInstance).displayName
-      );
-    }
-
-    if (isRoot) {
-      // TODO Is this right? For all versions?
-      const hasOwnerMetadata =
-        internalInstance._currentElement != null &&
-        internalInstance._currentElement._owner != null;
-
-      pushOperation(TREE_OPERATION_ADD);
-      pushOperation(id);
-      pushOperation(ElementTypeRoot);
-      pushOperation(0); // isProfilingSupported?
-      pushOperation(hasOwnerMetadata ? 1 : 0);
-    } else {
-      const { displayName, key, type } = getData(internalInstance);
-
-      const ownerID =
-        internalInstance._currentElement != null &&
-        internalInstance._currentElement._owner != null
-          ? getID(internalInstance._currentElement._owner)
-          : 0;
-
-      let displayNameStringID = getStringID(displayName);
-      let keyStringID = getStringID(key);
-      pushOperation(TREE_OPERATION_ADD);
-      pushOperation(id);
-      pushOperation(type);
-      pushOperation(parentID);
-      pushOperation(ownerID);
-      pushOperation(displayNameStringID);
-      pushOperation(keyStringID);
-    }
-  }
-
   function setInProps(id: number, path: Array<string | number>, value: any) {
     const internalInstance = idToInternalInstanceMap.get(id);
     if (internalInstance != null) {
diff --git a/src/backend/legacy/utils.js b/src/backend/legacy/utils.js
index bee9bbae063e..9fbe3079355e 100644
--- a/src/backend/legacy/utils.js
+++ b/src/backend/legacy/utils.js
@@ -2,20 +2,6 @@
 
 import type { InternalInstance } from './renderer';
 
-export function decorateResult(
-  object: Object,
-  attr: string,
-  fn: Function
-): Function {
-  const old = object[attr];
-  object[attr] = function(instance: InternalInstance) {
-    const res = old.apply(this, arguments);
-    fn(res);
-    return res;
-  };
-  return old;
-}
-
 export function decorate(object: Object, attr: string, fn: Function): Function {
   const old = object[attr];
   object[attr] = function(instance: InternalInstance) {

From 65ac53bba41031c313e38ca55509b5e436f668dc Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 7 Jun 2019 18:33:03 -0700
Subject: [PATCH 698/814] Fixes

---
 src/backend/legacy/renderer.js | 78 +++++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index f22f617ed984..7969335cd808 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -27,10 +27,7 @@ import type {
   RendererInterface,
 } from '../types';
 import type { ComponentFilter, ElementType } from 'src/types';
-import type {
-  InspectedElement,
-  Owner,
-} from 'src/devtools/views/Components/types';
+import type { Owner, InspectedElement } from '../types';
 
 export type InternalInstance = Object;
 type LegacyRenderer = Object;
@@ -87,7 +84,14 @@ export function attach(
   global: Object
 ): RendererInterface {
   const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
-  const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();
+  const internalInstanceToIDMap: WeakMap<
+    InternalInstance,
+    number
+  > = new WeakMap();
+  const internalInstanceToRootIDMap: WeakMap<
+    InternalInstance,
+    number
+  > = new WeakMap();
 
   let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
   let findNativeNodeForInternalID: (id: number) => ?NativeType;
@@ -143,9 +147,15 @@ export function attach(
 
   let oldReconcilerMethods = null;
   if (renderer.Reconciler) {
+    // React 15
     oldReconcilerMethods = decorateMany(renderer.Reconciler, {
       mountComponent(fn, args) {
-        const [internalInstance] = args;
+        const [
+          internalInstance,
+          transaction,
+          hostParent,
+          hostContainerInfo,
+        ] = args;
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }
@@ -160,6 +170,12 @@ export function attach(
         recordMount(internalInstance, id, parentID);
         parentIDStack.push(id);
 
+        // Remember the root.
+        internalInstanceToRootIDMap.set(
+          internalInstance,
+          getID(hostContainerInfo._topLevelWrapper)
+        );
+
         try {
           const result = fn.apply(this, args);
           parentIDStack.pop();
@@ -169,7 +185,11 @@ export function attach(
           throw err;
         } finally {
           if (parentIDStack.length === 0) {
-            flushPendingEvents(id);
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
           }
         }
       },
@@ -199,11 +219,10 @@ export function attach(
           throw err;
         } finally {
           if (parentIDStack.length === 0) {
-            // TODO: this is probably wrong!
-            const rootID =
-              internalInstance._topLevelWrapper === null
-                ? id
-                : getID(internalInstance._topLevelWrapper);
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
             flushPendingEvents(rootID);
           }
         }
@@ -234,11 +253,10 @@ export function attach(
           throw err;
         } finally {
           if (parentIDStack.length === 0) {
-            // TODO: this is probably wrong!
-            const rootID =
-              internalInstance._topLevelWrapper === null
-                ? id
-                : getID(internalInstance._topLevelWrapper);
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
             flushPendingEvents(rootID);
           }
         }
@@ -264,7 +282,11 @@ export function attach(
           throw err;
         } finally {
           if (parentIDStack.length === 0) {
-            flushPendingEvents(id);
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
           }
         }
       },
@@ -346,7 +368,6 @@ export function attach(
 
   function recordUnmount(internalInstance: InternalInstance, id: number) {
     pendingUnmountedIDs.push(id);
-    internalInstanceToIDMap.delete(internalInstance);
     idToInternalInstanceMap.delete(id);
   }
 
@@ -525,9 +546,11 @@ export function attach(
         if (owner) {
           owners = [];
           while (owner != null) {
+            const ownerData = getData(owner);
             owners.push({
-              displayName: getData(owner).displayName || 'Unknown',
+              displayName: ownerData.displayName || 'Unknown',
               id: getID(owner),
+              type: ownerData.type,
             });
             owner = owner.owner;
           }
@@ -555,6 +578,8 @@ export function attach(
 
       displayName: data.displayName,
 
+      type: data.type,
+
       // New events system did not exist in legacy versions
       events: null,
 
@@ -717,23 +742,26 @@ export function attach(
   };
 
   function getBestMatchForTrackedPath(): PathMatch | null {
-    return null; // TODO (legacy)
+    // Not implemented.
+    return null;
   }
 
   function getPathForElement(id: number): Array<PathFrame> | null {
-    return null; // TODO (legacy)
+    // Not implemented.
+    return null;
   }
 
   function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
-    // TODO (legacy)
+    // Not implemented.
   }
 
   function setTrackedPath(path: Array<PathFrame> | null) {
-    // TODO (legacy)
+    // Not implemented.
   }
 
   function getOwnersList(id: number): Array<Owner> | null {
-    return null; // TODO (legacy)
+    // Not implemented.
+    return null;
   }
 
   return {

From 90fa0adc0a2d41188f9ddd6db7663a072cad9670 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 7 Jun 2019 18:37:24 -0700
Subject: [PATCH 699/814] Fix lint

---
 src/backend/legacy/renderer.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 7969335cd808..5ea0a9fb95c9 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -150,12 +150,7 @@ export function attach(
     // React 15
     oldReconcilerMethods = decorateMany(renderer.Reconciler, {
       mountComponent(fn, args) {
-        const [
-          internalInstance,
-          transaction,
-          hostParent,
-          hostContainerInfo,
-        ] = args;
+        const [internalInstance, , , hostContainerInfo] = args;
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }

From fdc5ca4ba6227d35df89c404542be4ea3f6504d2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 7 Jun 2019 18:42:12 -0700
Subject: [PATCH 700/814] Remove dead code

---
 src/backend/legacy/getData.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/backend/legacy/getData.js b/src/backend/legacy/getData.js
index ffc1d775a8d7..d2fce307d3c0 100644
--- a/src/backend/legacy/getData.js
+++ b/src/backend/legacy/getData.js
@@ -26,17 +26,9 @@ export default function getData(internalInstance: InternalInstance): FiberData {
       type = ElementTypeHostComponent;
       displayName = elementType;
     } else if (typeof elementType === 'function') {
-      // TODO Can we differentiate between function and class component types?
-      //      Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14
-      //      getPublicInstance() returns null for function components
+      // TODO: detect function components.
       type = ElementTypeClass;
       displayName = getDisplayName(elementType);
-    } else if (typeof internalInstance._stringText === 'string') {
-      // ...
-    } else {
-      // TODO What kind of case does this cover?
-      console.log('what is this type?');
-      displayName = getDisplayName(elementType);
     }
   }
 

From 2d484013465a543b5ab83292e75f549f2a3085de Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 09:10:54 -0700
Subject: [PATCH 701/814] Added context support to change description

---
 .../__snapshots__/profilingCache-test.js.snap | 575 +++++++++++++++++-
 src/__tests__/profilingCache-test.js          | 106 ++++
 src/backend/renderer.js                       | 111 +++-
 src/backend/types.js                          |   7 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |  35 +-
 src/devtools/views/Profiler/types.js          |   7 +-
 src/devtools/views/Settings/Settings.js       |   2 +-
 7 files changed, 787 insertions(+), 56 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 6d1e6ade298c..6251b6e3bbb0 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -94,21 +94,24 @@ exports[`ProfilingCache should collect data for each commit: CommitDetails commi
 Object {
   "changeDescriptions": Map {
     3 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [],
-      "state": Array [],
+      "state": null,
     },
     4 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [],
-      "state": Array [],
+      "state": null,
     },
     2 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [
         "count",
       ],
-      "state": Array [],
+      "state": null,
     },
   },
   "duration": 13,
@@ -137,16 +140,18 @@ exports[`ProfilingCache should collect data for each commit: CommitDetails commi
 Object {
   "changeDescriptions": Map {
     3 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [],
-      "state": Array [],
+      "state": null,
     },
     2 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [
         "count",
       ],
-      "state": Array [],
+      "state": null,
     },
   },
   "duration": 10,
@@ -171,11 +176,12 @@ exports[`ProfilingCache should collect data for each commit: CommitDetails commi
 Object {
   "changeDescriptions": Map {
     2 => Object {
+      "context": null,
       "didHooksChange": false,
       "props": Array [
         "count",
       ],
-      "state": Array [],
+      "state": null,
     },
   },
   "duration": 10,
@@ -256,27 +262,30 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               4,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -335,19 +344,21 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -390,11 +401,12 @@ Object {
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -662,19 +674,21 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -725,27 +739,30 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               5,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -949,21 +966,24 @@ Object {
     Object {
       "changeDescriptions": Map {
         3 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [],
-          "state": Array [],
+          "state": null,
         },
         4 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [],
-          "state": Array [],
+          "state": null,
         },
         2 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [
             "count",
           ],
-          "state": Array [],
+          "state": null,
         },
       },
       "duration": 13,
@@ -989,16 +1009,18 @@ Object {
     Object {
       "changeDescriptions": Map {
         3 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [],
-          "state": Array [],
+          "state": null,
         },
         2 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [
             "count",
           ],
-          "state": Array [],
+          "state": null,
         },
       },
       "duration": 10,
@@ -1020,11 +1042,12 @@ Object {
     Object {
       "changeDescriptions": Map {
         2 => Object {
+          "context": null,
           "didHooksChange": false,
           "props": Array [
             "count",
           ],
-          "state": Array [],
+          "state": null,
         },
       },
       "duration": 10,
@@ -1343,27 +1366,30 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               4,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -1422,19 +1448,21 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -1477,11 +1505,12 @@ Object {
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
@@ -1878,6 +1907,488 @@ Object {
 }
 `;
 
+exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "changeDescriptions": Map {},
+  "duration": 0,
+  "fiberActualDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    4 => Object {
+      "context": true,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [
+        "count",
+      ],
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": Array [
+        "count",
+      ],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record when props/state/hooks change: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": true,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [
+                  "count",
+                ],
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [
+                  "count",
+                ],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+      ],
+      "displayName": "LegacyContextProvider",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          110,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          16,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          46,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          21,
+          77,
+          111,
+          100,
+          101,
+          114,
+          110,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          26,
+          70,
+          117,
+          110,
+          99,
+          116,
+          105,
+          111,
+          110,
+          67,
+          111,
+          109,
+          112,
+          111,
+          110,
+          101,
+          110,
+          116,
+          87,
+          105,
+          116,
+          104,
+          72,
+          111,
+          111,
+          107,
+          115,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          1,
+          1,
+          11,
+          1,
+          1,
+          1,
+          2,
+          1,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          0,
+          1,
+          3,
+          2,
+          2,
+          2,
+          2,
+          0,
+          4,
+          3,
+          0,
+          1,
+          4,
+          1,
+          3,
+          2,
+          3,
+          0,
+          4,
+          4,
+          0,
+          1,
+          5,
+          5,
+          4,
+          4,
+          4,
+          0,
+          4,
+          5,
+          0,
+          1,
+          6,
+          1,
+          3,
+          2,
+          5,
+          0,
+          4,
+          6,
+          0,
+          1,
+          7,
+          5,
+          6,
+          6,
+          4,
+          0,
+          4,
+          7,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
 exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
 Array [
   Object {
@@ -1951,19 +2462,21 @@ Object {
             Array [
               3,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [],
-                "state": Array [],
+                "state": null,
               },
             ],
             Array [
               2,
               Object {
+                "context": null,
                 "didHooksChange": false,
                 "props": Array [
                   "count",
                 ],
-                "state": Array [],
+                "state": null,
               },
             ],
           ],
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index 83c1c056d1c9..0b76937138c6 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -5,6 +5,7 @@ import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('ProfilingCache', () => {
+  let PropTypes;
   let React;
   let ReactDOM;
   let Scheduler;
@@ -23,6 +24,7 @@ describe('ProfilingCache', () => {
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
 
+    PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
@@ -188,6 +190,110 @@ describe('ProfilingCache', () => {
     }
   });
 
+  it('should record when props/state/hooks change', () => {
+    let instance = null;
+
+    const ModernContext = React.createContext(0);
+
+    class LegacyContextProvider extends React.Component<
+      any,
+      {| count: number |}
+    > {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      state = { count: 0 };
+      getChildContext() {
+        return this.state;
+      }
+      render() {
+        instance = this;
+        return (
+          <ModernContext.Provider value={this.state.count}>
+            <React.Fragment>
+              <ModernContextConsumer />
+              <LegacyContextConsumer />
+            </React.Fragment>
+          </ModernContext.Provider>
+        );
+      }
+    }
+
+    const FunctionComponentWithHooks = ({ count }) => {
+      React.useMemo(() => count, [count]);
+      return null;
+    };
+
+    class ModernContextConsumer extends React.Component<any> {
+      static contextType = ModernContext;
+      render() {
+        return <FunctionComponentWithHooks count={this.context} />;
+      }
+    }
+
+    class LegacyContextConsumer extends React.Component<any> {
+      static contextTypes = {
+        count: PropTypes.number,
+      };
+      render() {
+        return <FunctionComponentWithHooks count={this.context.count} />;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    expect(instance).not.toBeNull();
+    utils.act(() => (instance: any).setState({ count: 1 }));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allCommitData = [];
+
+    function Validator({ commitIndex, previousCommitDetails, rootID }) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      if (previousCommitDetails != null) {
+        expect(commitData).toEqual(previousCommitDetails);
+      } else {
+        allCommitData.push(commitData);
+        expect(commitData).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={null}
+            rootID={rootID}
+          />
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(2);
+
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={allCommitData[commitIndex]}
+            rootID={rootID}
+          />
+        );
+      });
+    }
+  });
+
   it('should calculate a self duration based on actual children (not filtered children)', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 6f2bea1d207d..90accb8feb77 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -662,6 +662,7 @@ export function attach(
             prevFiber.memoizedState,
             nextFiber.memoizedState
           ),
+          context: getContextChangedKeys(nextFiber),
           props: getChangedKeys(
             prevFiber.memoizedProps,
             nextFiber.memoizedProps
@@ -676,6 +677,88 @@ export function attach(
     }
   }
 
+  function updateContextsForFiber(fiber: Fiber) {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        if (idToContextsMap !== null) {
+          const id = getFiberID(getPrimaryFiber(fiber));
+          const contexts = getContextsForFiber(fiber);
+          if (contexts !== null) {
+            idToContextsMap.set(id, contexts);
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  const NO_CONTEXT = {};
+
+  function getContextsForFiber(fiber: Fiber): [Object, any] | null {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        const instance = fiber.stateNode;
+        let legacyContext = NO_CONTEXT;
+        let modernContext = NO_CONTEXT;
+        if (instance != null) {
+          if (
+            instance.constructor &&
+            instance.constructor.contextType != null
+          ) {
+            modernContext = instance.context;
+          } else {
+            legacyContext = instance.context;
+            if (legacyContext && Object.keys(legacyContext).length === 0) {
+              legacyContext = NO_CONTEXT;
+            }
+          }
+        }
+        return [legacyContext, modernContext];
+      default:
+        return null;
+    }
+  }
+
+  function crawlToInitializeContextsMap(fiber: Fiber) {
+    updateContextsForFiber(fiber);
+    let current = fiber.child;
+    while (current !== null) {
+      crawlToInitializeContextsMap(current);
+      current = current.sibling;
+    }
+  }
+
+  function getContextChangedKeys(fiber: Fiber): null | boolean | Array<string> {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        if (idToContextsMap !== null) {
+          const id = getFiberID(getPrimaryFiber(fiber));
+          const prevContexts = idToContextsMap.has(id)
+            ? idToContextsMap.get(id)
+            : null;
+          const nextContexts = getContextsForFiber(fiber);
+
+          if (prevContexts == null || nextContexts == null) {
+            return null;
+          }
+
+          const [prevLegacyContext, prevModernContext] = prevContexts;
+          const [nextLegacyContext, nextModernContext] = nextContexts;
+
+          if (nextLegacyContext !== NO_CONTEXT) {
+            return getChangedKeys(prevLegacyContext, nextLegacyContext);
+          } else if (nextModernContext !== NO_CONTEXT) {
+            return prevModernContext !== nextModernContext;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+    return null;
+  }
+
   function didHooksChange(prev: any, next: any): boolean {
     if (next == null) {
       return false;
@@ -701,11 +784,9 @@ export function attach(
     return false;
   }
 
-  function getChangedKeys(prev: any, next: any): Array<string> {
-    const keys = [];
-
-    if (next == null) {
-      return keys;
+  function getChangedKeys(prev: any, next: any): null | Array<string> {
+    if (prev == null || next == null) {
+      return null;
     }
 
     // We can't report anything meaningful for hooks changes.
@@ -715,16 +796,18 @@ export function attach(
       next.hasOwnProperty('next') &&
       next.hasOwnProperty('queue')
     ) {
-      return keys;
+      return null;
     }
 
-    // TODO (change descriptions) This does not account for props that were added or removed.
-    for (let key in prev) {
+    const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+    const changedKeys = [];
+    for (let key of keys) {
       if (prev[key] !== next[key]) {
-        keys.push(key);
+        changedKeys.push(key);
       }
     }
-    return keys;
+
+    return changedKeys;
   }
 
   // eslint-disable-next-line no-unused-vars
@@ -1139,6 +1222,8 @@ export function attach(
             if (changeDescription !== null) {
               metadata.changeDescriptions.set(id, changeDescription);
             }
+
+            updateContextsForFiber(fiber);
           }
         }
       }
@@ -2164,6 +2249,7 @@ export function attach(
 
   let currentCommitProfilingMetadata: CommitProfilingData | null = null;
   let displayNamesByRootID: DisplayNamesByRootID | null = null;
+  let idToContextsMap: Map<number, any> | null = null;
   let initialTreeBaseDurationsMap: Map<number, number> | null = null;
   let initialIDToRootMap: Map<number, number> | null = null;
   let isProfiling: boolean = false;
@@ -2284,6 +2370,7 @@ export function attach(
     displayNamesByRootID = new Map();
     initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);
     initialIDToRootMap = new Map(idToRootMap);
+    idToContextsMap = new Map();
 
     hook.getFiberRoots(rendererID).forEach(root => {
       const rootID = getFiberID(getPrimaryFiber(root.current));
@@ -2291,6 +2378,10 @@ export function attach(
         rootID,
         getDisplayNameForRoot(root.current)
       );
+
+      if (shouldRecordChangeDescriptions) {
+        crawlToInitializeContextsMap(root.current);
+      }
     });
 
     isProfiling = true;
diff --git a/src/backend/types.js b/src/backend/types.js
index 220f1358ecd4..5b55945742ec 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -112,11 +112,12 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
-// TODO (change descriptions) Is it important to handle context?
+// TODO (change descriptions) Should we report changed hooks keys?
 export type ChangeDescription = {|
+  context: Array<string> | boolean | null,
   didHooksChange: boolean,
-  props: Array<string>,
-  state: Array<string>,
+  props: Array<string> | null,
+  state: Array<string> | null,
 |};
 
 export type CommitDataBackend = {|
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 2b3c1b793a1f..bfaab32e3f4c 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -104,21 +104,33 @@ function WhatChanged({
 
   const changeDescription = changeDescriptions.get(fiberID);
   if (changeDescription == null) {
-    return null;
+    // This indicates that the component mounted during this commit
+    return (
+      <div className={styles.Content}>
+        <label className={styles.Label}>Why did this render?</label>
+        <div className={styles.WhatChangedItem}>
+          This is the first time the component rendered.
+        </div>
+      </div>
+    );
   }
 
   const changes = [];
+
   if (changeDescription.didHooksChange) {
     changes.push(
       <div key="hooks" className={styles.WhatChangedItem}>
-        • Hooks
+        • Hooks changed
       </div>
     );
   }
-  if (changeDescription.props.length !== 0) {
+  if (
+    changeDescription.props !== null &&
+    changeDescription.props.length !== 0
+  ) {
     changes.push(
       <div key="props" className={styles.WhatChangedItem}>
-        • Props
+        • Props changed:
         {changeDescription.props.map(key => (
           <span key={key} className={styles.WhatChangedKey}>
             {key}
@@ -127,10 +139,13 @@ function WhatChanged({
       </div>
     );
   }
-  if (changeDescription.state.length !== 0) {
+  if (
+    changeDescription.state !== null &&
+    changeDescription.state.length !== 0
+  ) {
     changes.push(
       <div key="state" className={styles.WhatChangedItem}>
-        • State
+        • State changed:
         {changeDescription.state.map(key => (
           <span key={key} className={styles.WhatChangedKey}>
             {key}
@@ -141,12 +156,16 @@ function WhatChanged({
   }
 
   if (changes.length === 0) {
-    changes.push(<div className={styles.WhatChangedItem}>Nothing</div>);
+    changes.push(
+      <div key="nothing" className={styles.WhatChangedItem}>
+        The parent component rendered.
+      </div>
+    );
   }
 
   return (
     <div className={styles.Content}>
-      <label className={styles.Label}>What changed?</label>
+      <label className={styles.Label}>Why did this render?</label>
       {changes}
     </div>
   );
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 667ab54ce3bc..514ff815cfdd 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -31,11 +31,12 @@ export type SnapshotNode = {|
   type: ElementType,
 |};
 
-// TODO (change descriptions) Is it important to handle context?
+// TODO (change descriptions) Should we report changed hooks keys?
 export type ChangeDescription = {|
+  context: Array<string> | boolean | null,
   didHooksChange: boolean,
-  props: Array<string>,
-  state: Array<string>,
+  props: Array<string> | null,
+  state: Array<string> | null,
 |};
 
 export type CommitDataFrontend = {|
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
index b53dee04e239..3e29c19d3bfa 100644
--- a/src/devtools/views/Settings/Settings.js
+++ b/src/devtools/views/Settings/Settings.js
@@ -174,7 +174,7 @@ function Settings(_: {||}) {
             checked={recordChangeDescriptions}
             onChange={updateRecordChangeDescriptions}
           />{' '}
-          Record which props/state/hooks changed while profiling
+          Record why each component rendered while profiling.
         </label>
 
         {store.supportsCaptureScreenshots && (

From a2f469d7428c1fa3b5632ab221017a8e7e6cac5e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 09:22:30 -0700
Subject: [PATCH 702/814] Fixed an increment bug in sidebar for fiber-commits

---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index bfaab32e3f4c..33c29de268f8 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -30,7 +30,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
   });
 
   const listItems = [];
-  for (let i = 0; i < commitIndices.length; i += 2) {
+  for (let i = 0; i < commitIndices.length; i++) {
     const commitIndex = commitIndices[i];
 
     const { duration, timestamp } = profilerStore.getCommitData(

From 6ab522326d971de99e6e6a751661608402e92b08 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 11:41:39 -0700
Subject: [PATCH 703/814] Added a test for added/removed props

---
 .../__snapshots__/profilingCache-test.js.snap | 1033 +++++++++++++++++
 src/__tests__/profilingCache-test.js          |   15 +-
 2 files changed, 1044 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 6251b6e3bbb0..484bfcd9dedd 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -1907,6 +1907,1039 @@ Object {
 }
 `;
 
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "changeDescriptions": Map {},
+  "duration": 0,
+  "fiberActualDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    4 => Object {
+      "context": true,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [
+        "count",
+      ],
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": Array [
+        "count",
+      ],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 2 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [
+        "foo",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [
+        "foo",
+        "bar",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 4 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "props": Array [
+        "bar",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "screenshot": null,
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": true,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [
+                  "count",
+                ],
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": Array [
+                  "count",
+                ],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [
+                  "foo",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [
+                  "foo",
+                  "bar",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "props": Array [
+                  "bar",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "screenshot": null,
+          "timestamp": 0,
+        },
+      ],
+      "displayName": "LegacyContextProvider",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          110,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          16,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          46,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          21,
+          77,
+          111,
+          100,
+          101,
+          114,
+          110,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          26,
+          70,
+          117,
+          110,
+          99,
+          116,
+          105,
+          111,
+          110,
+          67,
+          111,
+          109,
+          112,
+          111,
+          110,
+          101,
+          110,
+          116,
+          87,
+          105,
+          116,
+          104,
+          72,
+          111,
+          111,
+          107,
+          115,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          1,
+          1,
+          11,
+          1,
+          1,
+          1,
+          2,
+          1,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          0,
+          1,
+          3,
+          2,
+          2,
+          2,
+          2,
+          0,
+          4,
+          3,
+          0,
+          1,
+          4,
+          1,
+          3,
+          2,
+          3,
+          0,
+          4,
+          4,
+          0,
+          1,
+          5,
+          5,
+          4,
+          4,
+          4,
+          0,
+          4,
+          5,
+          0,
+          1,
+          6,
+          1,
+          3,
+          2,
+          5,
+          0,
+          4,
+          6,
+          0,
+          1,
+          7,
+          5,
+          6,
+          6,
+          4,
+          0,
+          4,
+          7,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
 exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 0 1`] = `
 Object {
   "changeDescriptions": Map {},
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index 0b76937138c6..4e1688a778f7 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -190,7 +190,7 @@ describe('ProfilingCache', () => {
     }
   });
 
-  it('should record when props/state/hooks change', () => {
+  it('should record changed props/state/context/hooks', () => {
     let instance = null;
 
     const ModernContext = React.createContext(0);
@@ -246,6 +246,13 @@ describe('ProfilingCache', () => {
     utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
     expect(instance).not.toBeNull();
     utils.act(() => (instance: any).setState({ count: 1 }));
+    utils.act(() =>
+      ReactDOM.render(<LegacyContextProvider foo={123} />, container)
+    );
+    utils.act(() =>
+      ReactDOM.render(<LegacyContextProvider bar="abc" />, container)
+    );
+    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -265,7 +272,7 @@ describe('ProfilingCache', () => {
 
     const rootID = store.roots[0];
 
-    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
           <Validator
@@ -277,11 +284,11 @@ describe('ProfilingCache', () => {
       });
     }
 
-    expect(allCommitData).toHaveLength(2);
+    expect(allCommitData).toHaveLength(5);
 
     utils.exportImportHelper(bridge, store);
 
-    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
           <Validator

From 5672d686dc7649e1a3f32f8cdc87f97e3876f564 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 16:45:38 -0700
Subject: [PATCH 704/814] Fixed some minor CSS issues

---
 src/devtools/views/Profiler/Profiler.css                 | 1 +
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.css | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 5ab888906d08..ffd259ff02ed 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -21,6 +21,7 @@
   flex-direction: column;
   flex: 1 1 100px;
   max-width: 300px;
+  overflow-x: hidden;
   border-left: 1px solid var(--color-border);
   border-top: 1px solid var(--color-border);
 }
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index d19f2b17435f..f881fd373307 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -16,6 +16,9 @@
 .Component {
   flex: 1;
   color: var(--color-component-name);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 .Component:before {
   white-space: nowrap;

From 7a72ee5ac04ddbac0d3bab738df5978ec7274da5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 17:01:38 -0700
Subject: [PATCH 705/814] Added context changes to sidebar; fixed a
 initial-mount detection bug

---
 .../__snapshots__/profilingCache-test.js.snap | 1016 ++++++++---------
 src/backend/renderer.js                       |   54 +-
 src/backend/types.js                          |    1 +
 .../Profiler/SidebarSelectedFiberInfo.js      |   30 +-
 src/devtools/views/Profiler/types.js          |    1 +
 5 files changed, 556 insertions(+), 546 deletions(-)

diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 484bfcd9dedd..85291acdac04 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -2,7 +2,29 @@
 
 exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
 Object {
-  "changeDescriptions": Map {},
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
   "duration": 16,
   "fiberActualDurations": Map {
     1 => 16,
@@ -25,7 +47,22 @@ Object {
 
 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
 Object {
-  "changeDescriptions": Map {},
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
   "duration": 15,
   "fiberActualDurations": Map {
     1 => 15,
@@ -48,7 +85,15 @@ Object {
 
 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
 Object {
-  "changeDescriptions": Map {},
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
   "duration": 3,
   "fiberActualDurations": Map {
     5 => 3,
@@ -67,7 +112,36 @@ Object {
 
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
 Object {
-  "changeDescriptions": Map {},
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
   "duration": 12,
   "fiberActualDurations": Map {
     1 => 12,
@@ -96,18 +170,28 @@ Object {
     3 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     4 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
+    6 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "count",
       ],
@@ -142,12 +226,14 @@ Object {
     3 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "count",
       ],
@@ -178,6 +264,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "count",
       ],
@@ -206,7 +293,48 @@ Object {
     Object {
       "commitData": Array [
         Object {
-          "changeDescriptions": Array [],
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
           "duration": 12,
           "fiberActualDurations": Array [
             Array [
@@ -264,6 +392,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -273,15 +402,27 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
             ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
             Array [
               2,
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -346,6 +487,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -355,6 +497,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -403,6 +546,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -626,7 +770,38 @@ Object {
     Object {
       "commitData": Array [
         Object {
-          "changeDescriptions": Array [],
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -676,15 +851,27 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
             ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
             Array [
               2,
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -741,6 +928,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -750,15 +938,27 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
             ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
             Array [
               2,
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -968,18 +1168,28 @@ Object {
         3 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [],
           "state": null,
         },
         4 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [],
           "state": null,
         },
+        10 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [
             "count",
           ],
@@ -1011,12 +1221,14 @@ Object {
         3 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [],
           "state": null,
         },
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [
             "count",
           ],
@@ -1044,6 +1256,7 @@ Object {
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "isFirstMount": false,
           "props": Array [
             "count",
           ],
@@ -1192,7 +1405,29 @@ exports[`ProfilingCache should collect data for each root (including ones added
 Object {
   "commitData": Array [
     Object {
-      "changeDescriptions": Map {},
+      "changeDescriptions": Map {
+        12 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        13 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        14 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      },
       "duration": 11,
       "fiberActualDurations": Map {
         11 => 11,
@@ -1368,6 +1603,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -1377,15 +1613,27 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
             ],
+            Array [
+              10,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
             Array [
               2,
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -1450,6 +1698,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -1459,6 +1708,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -1507,6 +1757,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -1695,7 +1946,38 @@ Object {
     Object {
       "commitData": Array [
         Object {
-          "changeDescriptions": Array [],
+          "changeDescriptions": Array [
+            Array [
+              12,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              13,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              14,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
           "duration": 11,
           "fiberActualDurations": Array [
             Array [
@@ -1909,7 +2191,43 @@ Object {
 
 exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = `
 Object {
-  "changeDescriptions": Map {},
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    6 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
   "duration": 0,
   "fiberActualDurations": Map {
     1 => 0,
@@ -1942,6 +2260,7 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": true,
+      "isFirstMount": false,
       "props": Array [
         "count",
       ],
@@ -1950,12 +2269,14 @@ Object {
     4 => Object {
       "context": true,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     7 => Object {
       "context": null,
       "didHooksChange": true,
+      "isFirstMount": false,
       "props": Array [
         "count",
       ],
@@ -1966,12 +2287,14 @@ Object {
         "count",
       ],
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": Array [
         "count",
@@ -2008,30 +2331,35 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "foo",
       ],
@@ -2070,30 +2398,35 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "foo",
         "bar",
@@ -2133,30 +2466,35 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "isFirstMount": false,
       "props": Array [
         "bar",
       ],
@@ -2195,29 +2533,80 @@ Object {
     Object {
       "commitData": Array [
         Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              0,
-            ],
+          "changeDescriptions": Array [
             Array [
               2,
-              0,
-            ],
-            Array [
-              3,
-              0,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
             ],
             Array [
               4,
-              0,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
             ],
             Array [
               5,
-              0,
-            ],
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
             Array [
               6,
               0,
@@ -2269,6 +2658,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": true,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -2280,6 +2670,7 @@ Object {
               Object {
                 "context": true,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2289,6 +2680,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": true,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
@@ -2302,6 +2694,7 @@ Object {
                   "count",
                 ],
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2311,6 +2704,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": Array [
                   "count",
@@ -2383,6 +2777,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2392,6 +2787,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2401,6 +2797,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2410,6 +2807,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2419,6 +2817,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "foo",
                 ],
@@ -2499,6 +2898,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2508,6 +2908,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2517,6 +2918,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2526,6 +2928,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2535,6 +2938,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "foo",
                   "bar",
@@ -2616,6 +3020,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2625,6 +3030,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2634,6 +3040,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2643,6 +3050,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
@@ -2652,6 +3060,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "bar",
                 ],
@@ -2940,137 +3349,78 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 0 1`] = `
-Object {
-  "changeDescriptions": Map {},
-  "duration": 0,
-  "fiberActualDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-    5 => 0,
-    6 => 0,
-    7 => 0,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-    5 => 0,
-    6 => 0,
-    7 => 0,
-  },
-  "interactionIDs": Array [],
-  "priorityLevel": "Immediate",
-  "screenshot": null,
-  "timestamp": 0,
-}
-`;
-
-exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 1 1`] = `
-Object {
-  "changeDescriptions": Map {
-    5 => Object {
-      "context": null,
-      "didHooksChange": true,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-    4 => Object {
-      "context": true,
-      "didHooksChange": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": true,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-    6 => Object {
-      "context": Array [
-        "count",
-      ],
-      "didHooksChange": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "props": Array [],
-      "state": Array [
-        "count",
-      ],
-    },
-  },
-  "duration": 0,
-  "fiberActualDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
+Array [
+  Object {
+    "__count": 1,
+    "id": 0,
+    "name": "mount: one child",
+    "timestamp": 0,
   },
-  "fiberSelfDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
+  Object {
+    "__count": 0,
+    "id": 1,
+    "name": "update: two children",
+    "timestamp": 11,
   },
-  "interactionIDs": Array [],
-  "priorityLevel": "Immediate",
-  "screenshot": null,
-  "timestamp": 0,
-}
+]
 `;
 
-exports[`ProfilingCache should record when props/state/hooks change: imported data 1`] = `
+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
 Object {
   "dataForRoots": Array [
     Object {
       "commitData": Array [
         Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              0,
-            ],
+          "changeDescriptions": Array [
             Array [
               2,
-              0,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
             ],
             Array [
               3,
-              0,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
             ],
             Array [
               4,
-              0,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              11,
             ],
             Array [
-              5,
-              0,
+              2,
+              11,
             ],
             Array [
-              6,
+              3,
               0,
             ],
             Array [
-              7,
-              0,
+              4,
+              1,
             ],
           ],
           "fiberSelfDurations": Array [
@@ -3080,7 +3430,7 @@ Object {
             ],
             Array [
               2,
-              0,
+              10,
             ],
             Array [
               3,
@@ -3088,416 +3438,35 @@ Object {
             ],
             Array [
               4,
-              0,
-            ],
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              7,
-              0,
+              1,
             ],
           ],
-          "interactionIDs": Array [],
+          "interactionIDs": Array [
+            0,
+          ],
           "priorityLevel": "Immediate",
           "screenshot": null,
-          "timestamp": 0,
+          "timestamp": 11,
         },
         Object {
           "changeDescriptions": Array [
             Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": true,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": true,
-                "didHooksChange": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
+              3,
               Object {
                 "context": null,
-                "didHooksChange": true,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": Array [
-                  "count",
-                ],
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [],
                 "state": null,
               },
             ],
             Array [
-              2,
+              5,
               Object {
                 "context": null,
                 "didHooksChange": false,
-                "props": Array [],
-                "state": Array [
-                  "count",
-                ],
-              },
-            ],
-          ],
-          "duration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-          ],
-          "interactionIDs": Array [],
-          "priorityLevel": "Immediate",
-          "screenshot": null,
-          "timestamp": 0,
-        },
-      ],
-      "displayName": "LegacyContextProvider",
-      "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          110,
-          21,
-          76,
-          101,
-          103,
-          97,
-          99,
-          121,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          80,
-          114,
-          111,
-          118,
-          105,
-          100,
-          101,
-          114,
-          16,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          46,
-          80,
-          114,
-          111,
-          118,
-          105,
-          100,
-          101,
-          114,
-          21,
-          77,
-          111,
-          100,
-          101,
-          114,
-          110,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          67,
-          111,
-          110,
-          115,
-          117,
-          109,
-          101,
-          114,
-          26,
-          70,
-          117,
-          110,
-          99,
-          116,
-          105,
-          111,
-          110,
-          67,
-          111,
-          109,
-          112,
-          111,
-          110,
-          101,
-          110,
-          116,
-          87,
-          105,
-          116,
-          104,
-          72,
-          111,
-          111,
-          107,
-          115,
-          21,
-          76,
-          101,
-          103,
-          97,
-          99,
-          121,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          67,
-          111,
-          110,
-          115,
-          117,
-          109,
-          101,
-          114,
-          1,
-          1,
-          11,
-          1,
-          1,
-          1,
-          2,
-          1,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          0,
-          1,
-          3,
-          2,
-          2,
-          2,
-          2,
-          0,
-          4,
-          3,
-          0,
-          1,
-          4,
-          1,
-          3,
-          2,
-          3,
-          0,
-          4,
-          4,
-          0,
-          1,
-          5,
-          5,
-          4,
-          4,
-          4,
-          0,
-          4,
-          5,
-          0,
-          1,
-          6,
-          1,
-          3,
-          2,
-          5,
-          0,
-          4,
-          6,
-          0,
-          1,
-          7,
-          5,
-          6,
-          6,
-          4,
-          0,
-          4,
-          7,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "version": 4,
-}
-`;
-
-exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
-Array [
-  Object {
-    "__count": 1,
-    "id": 0,
-    "name": "mount: one child",
-    "timestamp": 0,
-  },
-  Object {
-    "__count": 0,
-    "id": 1,
-    "name": "update: two children",
-    "timestamp": 11,
-  },
-]
-`;
-
-exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [],
-          "duration": 11,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              11,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              1,
-            ],
-          ],
-          "interactionIDs": Array [
-            0,
-          ],
-          "priorityLevel": "Immediate",
-          "screenshot": null,
-          "timestamp": 11,
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "props": Array [],
+                "isFirstMount": true,
+                "props": null,
                 "state": null,
               },
             ],
@@ -3506,6 +3475,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "isFirstMount": false,
                 "props": Array [
                   "count",
                 ],
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 90accb8feb77..18f22ff39bbd 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -649,7 +649,7 @@ export function attach(
   }
 
   function getChangeDescription(
-    prevFiber: Fiber,
+    prevFiber: Fiber | null,
     nextFiber: Fiber
   ): ChangeDescription | null {
     switch (getElementTypeForFiber(nextFiber)) {
@@ -657,21 +657,32 @@ export function attach(
       case ElementTypeFunction:
       case ElementTypeMemo:
       case ElementTypeForwardRef:
-        return {
-          didHooksChange: didHooksChange(
-            prevFiber.memoizedState,
-            nextFiber.memoizedState
-          ),
-          context: getContextChangedKeys(nextFiber),
-          props: getChangedKeys(
-            prevFiber.memoizedProps,
-            nextFiber.memoizedProps
-          ),
-          state: getChangedKeys(
-            prevFiber.memoizedState,
-            nextFiber.memoizedState
-          ),
-        };
+        if (prevFiber === null) {
+          return {
+            context: null,
+            didHooksChange: false,
+            isFirstMount: true,
+            props: null,
+            state: null,
+          };
+        } else {
+          return {
+            context: getContextChangedKeys(nextFiber),
+            didHooksChange: didHooksChange(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState
+            ),
+            isFirstMount: false,
+            props: getChangedKeys(
+              prevFiber.memoizedProps,
+              nextFiber.memoizedProps
+            ),
+            state: getChangedKeys(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState
+            ),
+          };
+        }
       default:
         return null;
     }
@@ -1214,13 +1225,12 @@ export function attach(
             actualDuration
           );
 
-          if (recordChangeDescriptions && metadata.changeDescriptions) {
-            const changeDescription =
-              alternate === null
-                ? null
-                : getChangeDescription(alternate, fiber);
+          if (recordChangeDescriptions) {
+            const changeDescription = getChangeDescription(alternate, fiber);
             if (changeDescription !== null) {
-              metadata.changeDescriptions.set(id, changeDescription);
+              if (metadata.changeDescriptions !== null) {
+                metadata.changeDescriptions.set(id, changeDescription);
+              }
             }
 
             updateContextsForFiber(fiber);
diff --git a/src/backend/types.js b/src/backend/types.js
index 5b55945742ec..587e0cdd2c03 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -116,6 +116,7 @@ export type ReactRenderer = {
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
+  isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
 |};
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 33c29de268f8..0fba2d766dad 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -104,7 +104,10 @@ function WhatChanged({
 
   const changeDescription = changeDescriptions.get(fiberID);
   if (changeDescription == null) {
-    // This indicates that the component mounted during this commit
+    return null;
+  }
+
+  if (changeDescription.isFirstMount) {
     return (
       <div className={styles.Content}>
         <label className={styles.Label}>Why did this render?</label>
@@ -117,6 +120,29 @@ function WhatChanged({
 
   const changes = [];
 
+  if (changeDescription.context === true) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed
+      </div>
+    );
+  } else if (
+    typeof changeDescription.context === 'object' &&
+    changeDescription.context !== null &&
+    changeDescription.context.length !== 0
+  ) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed:
+        {changeDescription.context.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
   if (changeDescription.didHooksChange) {
     changes.push(
       <div key="hooks" className={styles.WhatChangedItem}>
@@ -124,6 +150,7 @@ function WhatChanged({
       </div>
     );
   }
+
   if (
     changeDescription.props !== null &&
     changeDescription.props.length !== 0
@@ -139,6 +166,7 @@ function WhatChanged({
       </div>
     );
   }
+
   if (
     changeDescription.state !== null &&
     changeDescription.state.length !== 0
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index 514ff815cfdd..a736a2ee9d14 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -35,6 +35,7 @@ export type SnapshotNode = {|
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
+  isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
 |};

From 4f92af17ea53778e68e220bf50849dda311af6cb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 17:17:56 -0700
Subject: [PATCH 706/814] Only show "rendered at" if selected Fiber committed
 at least once

---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 0fba2d766dad..26a7959ef362 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -75,7 +75,11 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         rootID={((rootID: any): number)}
       />
       <div className={styles.Content}>
-        <label className={styles.Label}>Rendered at</label>: {listItems}
+        {listItems.length > 0 && (
+          <Fragment>
+            <label className={styles.Label}>Rendered at</label>: {listItems}
+          </Fragment>
+        )}
       </div>
     </Fragment>
   );

From 9047f371e27a3711abf197bb4f24acbae6313c3e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 17:18:05 -0700
Subject: [PATCH 707/814] Fix minor toolbar border misalignment

---
 src/devtools/views/Profiler/Profiler.css                 | 2 +-
 src/devtools/views/Profiler/SidebarCommitInfo.css        | 2 +-
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.css | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index ffd259ff02ed..22d26a1cf6ad 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -14,6 +14,7 @@
   display: flex;
   flex-direction: column;
   flex: 2 1 200px;
+  border-top: 1px solid var(--color-border);
 }
 
 .RightColumn {
@@ -61,7 +62,6 @@
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
 }
 
 .VRule {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 0bbe66743201..6a835e64a269 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -4,12 +4,12 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .Content {
   padding: 0.5rem;
   user-select: none;
-  border-top: 1px solid var(--color-border);
   overflow: auto;
 }
 
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index f881fd373307..a89175b622e9 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -4,12 +4,12 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .Content {
   padding: 0.5rem;
   user-select: none;
-  border-top: 1px solid var(--color-border);
   overflow-y: auto;
 }
 

From 341d1574cbe11eae8c7bf4451428695a26124590 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 17:30:11 -0700
Subject: [PATCH 708/814] Tweaked a few inline comments

---
 src/backend/renderer.js              | 7 +++++++
 src/backend/types.js                 | 1 -
 src/devtools/views/Profiler/types.js | 1 -
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 18f22ff39bbd..79ed649c895b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -704,6 +704,7 @@ export function attach(
     }
   }
 
+  // Differentiates between a null context value and no context.
   const NO_CONTEXT = {};
 
   function getContextsForFiber(fiber: Fiber): [Object, any] | null {
@@ -731,6 +732,9 @@ export function attach(
     }
   }
 
+  // Record all contexts at the time profiling is started.
+  // Fibers only store the current context value,
+  // so we need to track them separatenly in order to determine changed keys.
   function crawlToInitializeContextsMap(fiber: Fiber) {
     updateContextsForFiber(fiber);
     let current = fiber.child;
@@ -2390,6 +2394,9 @@ export function attach(
       );
 
       if (shouldRecordChangeDescriptions) {
+        // Record all contexts at the time profiling is started.
+        // Fibers only store the current context value,
+        // so we need to track them separatenly in order to determine changed keys.
         crawlToInitializeContextsMap(root.current);
       }
     });
diff --git a/src/backend/types.js b/src/backend/types.js
index 587e0cdd2c03..fe7b5dcfca80 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -112,7 +112,6 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 };
 
-// TODO (change descriptions) Should we report changed hooks keys?
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index a736a2ee9d14..c99a79fed8b9 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -31,7 +31,6 @@ export type SnapshotNode = {|
   type: ElementType,
 |};
 
-// TODO (change descriptions) Should we report changed hooks keys?
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,

From 3904d634bb0b4d9c43b58a97878f266dea29ea02 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 Jun 2019 17:36:17 -0700
Subject: [PATCH 709/814] Added an explicit 'did not render' label

---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 26a7959ef362..839b95d2fde3 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -80,6 +80,9 @@ export default function SidebarSelectedFiberInfo(_: Props) {
             <label className={styles.Label}>Rendered at</label>: {listItems}
           </Fragment>
         )}
+        {listItems.length === 0 && (
+          <div>Did not render during this profiling session.</div>
+        )}
       </div>
     </Fragment>
   );

From ea03ddd583baad7790f36959fb4abe308e85ac24 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 9 Jun 2019 15:50:17 -0700
Subject: [PATCH 710/814] Added Flow type coverage for all EventEmitter
 subclasses

---
 flow.js                                       | 16 ++--
 src/backend/agent.js                          |  9 ++-
 src/backend/types.js                          |  4 +-
 src/bridge.js                                 | 77 ++++++++++++++++++-
 src/devtools/ProfilerStore.js                 |  8 +-
 src/devtools/index.js                         |  2 +-
 src/devtools/store.js                         | 14 +++-
 .../Components/InspectedElementContext.js     | 69 ++++++++---------
 .../views/Components/OwnersListContext.js     |  7 +-
 src/devtools/views/Components/types.js        |  2 -
 src/devtools/views/DevTools.js                |  3 +-
 src/devtools/views/context.js                 |  3 +-
 src/types.js                                  |  6 --
 13 files changed, 151 insertions(+), 69 deletions(-)

diff --git a/flow.js b/flow.js
index fbbc999554e8..740d69f34b4a 100644
--- a/flow.js
+++ b/flow.js
@@ -1,11 +1,17 @@
 // @flow
 
 declare module 'events' {
-  declare class EventEmitter {
-    addListener: (type: string, fn: Function) => void;
-    emit: (type: string, data: any) => void;
-    removeListener: (type: string, fn: Function) => void;
-    removeAllListeners: (type?: string) => void;
+  declare class EventEmitter<Events: Object> {
+    addListener<Event: $Keys<Events>>(
+      event: Event,
+      listener: (...$ElementType<Events, Event>) => any
+    ): void;
+    emit: <Event: $Keys<Events>>(
+      event: Event,
+      ...$ElementType<Events, Event>
+    ) => void;
+    removeListener(event: $Keys<Events>, listener: Function): void;
+    removeAllListeners(event?: $Keys<Events>): void;
   }
 
   declare export default typeof EventEmitter;
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 12ba9a8a14f1..d8dcc1586261 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -3,6 +3,7 @@
 import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
+import Bridge from 'src/bridge';
 import {
   SESSION_STORAGE_LAST_SELECTION_KEY,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
@@ -23,7 +24,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type { Bridge, ComponentFilter } from '../types';
+import type { ComponentFilter } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -67,7 +68,9 @@ type PersistedSelection = {|
   path: Array<PathFrame>,
 |};
 
-export default class Agent extends EventEmitter {
+export default class Agent extends EventEmitter<{|
+  shutdown: [],
+|}> {
   _bridge: Bridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
@@ -273,9 +276,11 @@ export default class Agent extends EventEmitter {
   screenshotCaptured = ({
     commitIndex,
     dataURL,
+    rootID,
   }: {|
     commitIndex: number,
     dataURL: string,
+    rootID: number,
   |}) => {
     this._bridge.send('screenshotCaptured', { commitIndex, dataURL });
   };
diff --git a/src/backend/types.js b/src/backend/types.js
index fe7b5dcfca80..d2fd74139eb5 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -13,10 +13,10 @@ export type ExpirationTime = number;
 export type RefObject = {|
   current: any,
 |};
-export type Source = {
+export type Source = {|
   fileName: string,
   lineNumber: number,
-};
+|};
 export type HookType =
   | 'useState'
   | 'useReducer'
diff --git a/src/bridge.js b/src/bridge.js
index 1619e518528b..c6c3f1b22351 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -2,16 +2,85 @@
 
 import EventEmitter from 'events';
 
-import type { Wall } from './types';
+import type { ComponentFilter, Wall } from './types';
+import type {
+  InspectedElement,
+  OwnersList,
+  ProfilingDataBackend,
+  RendererID,
+} from 'src/backend/types';
 
 const BATCH_DURATION = 100;
 
+type ElementAndRendererID = {| id: number, rendererID: RendererID |};
+
 type Message = {|
   event: string,
   payload: any,
 |};
 
-export default class Bridge extends EventEmitter {
+type HighlightElementInDOM = {|
+  ...ElementAndRendererID,
+  displayName: string,
+  hideAfterTimeout: boolean,
+  openNativeElementsPanel: boolean,
+  scrollIntoView: boolean,
+|};
+
+type OverrideValue = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+  value: any,
+|};
+
+type OverrideHookState = {|
+  ...OverrideValue,
+  hookID: number,
+|};
+
+type OverrideSuspense = {|
+  ...ElementAndRendererID,
+  forceFallback: boolean,
+|};
+
+export default class Bridge extends EventEmitter<{|
+  captureScreenshot: [{| commitIndex: number, rootID: number |}],
+  clearHighlightedElementInDOM: [],
+  getOwnersList: [ElementAndRendererID],
+  getProfilingData: [{| rendererID: RendererID |}],
+  getProfilingStatus: [],
+  highlightElementInDOM: [HighlightElementInDOM],
+  init: [],
+  inspectElement: [ElementAndRendererID],
+  inspectedElement: [InspectedElement | number | null],
+  isBackendStorageAPISupported: [boolean],
+  logElementToConsole: [ElementAndRendererID],
+  operations: [Uint32Array],
+  ownersList: [OwnersList],
+  overrideContext: [OverrideValue],
+  overrideHookState: [OverrideHookState],
+  overrideProps: [OverrideValue],
+  overrideState: [OverrideValue],
+  overrideSuspense: [OverrideSuspense],
+  profilingData: [ProfilingDataBackend],
+  profilingStatus: [boolean],
+  reloadAndProfile: [boolean],
+  reloadAppForProfiling: [],
+  screenshotCaptured: [
+    {| commitIndex: number, dataURL: string, rootID: number |},
+  ],
+  selectElement: [ElementAndRendererID],
+  selectFiber: [number],
+  shutdown: [],
+  startInspectingDOM: [],
+  startProfiling: [boolean],
+  stopInspectingDOM: [boolean],
+  stopProfiling: [],
+  syncSelectionFromNativeElementsPanel: [],
+  syncSelectionToNativeElementsPanel: [],
+  updateComponentFilters: [Array<ComponentFilter>],
+  viewElementSource: [ElementAndRendererID],
+|}> {
   _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
@@ -25,7 +94,7 @@ export default class Bridge extends EventEmitter {
 
     this._wallUnlisten =
       wall.listen((message: Message) => {
-        this.emit(message.event, message.payload);
+        (this: any).emit(message.event, message.payload);
       }) || null;
   }
 
@@ -64,7 +133,9 @@ export default class Bridge extends EventEmitter {
     this._isShutdown = true;
 
     // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
+    // $FlowFixMe This property is not writable.
     this.addListener = function() {};
+    // $FlowFixMe This property is not writable.
     this.emit = function() {};
     // NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.
 
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index b15726c5420e..1f20fa2a051c 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -3,6 +3,7 @@
 import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
+import Bridge from 'src/bridge';
 import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
 import ProfilingCache from './ProfilingCache';
 import Store from './store';
@@ -14,11 +15,14 @@ import type {
   ProfilingDataFrontend,
   SnapshotNode,
 } from './views/Profiler/types';
-import type { Bridge } from '../types';
 
 const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
 
-export default class ProfilerStore extends EventEmitter {
+export default class ProfilerStore extends EventEmitter<{|
+  isProcessingData: [],
+  isProfiling: [],
+  profilingData: [],
+|}> {
   _bridge: Bridge;
 
   // Suspense cache for lazily calculating derived profiling data.
diff --git a/src/devtools/index.js b/src/devtools/index.js
index e6561983149b..b41b51a1102d 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { Bridge } from '../types';
+import Bridge from 'src/bridge';
 
 type Shell = {|
   connect: (callback: Function) => void,
diff --git a/src/devtools/store.js b/src/devtools/store.js
index d4501273a83c..5e2e14d98395 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -2,6 +2,7 @@
 
 import EventEmitter from 'events';
 import { inspect } from 'util';
+import Bridge from 'src/bridge';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
@@ -21,7 +22,7 @@ import { printStore } from 'src/__tests__/storeSerializer';
 import ProfilerStore from './ProfilerStore';
 
 import type { Element } from './views/Components/types';
-import type { Bridge, ComponentFilter, ElementType } from '../types';
+import type { ComponentFilter, ElementType } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -57,7 +58,16 @@ export type Capabilities = {|
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
-export default class Store extends EventEmitter {
+export default class Store extends EventEmitter<{|
+  captureScreenshots: [],
+  collapseNodesByDefault: [],
+  componentFilters: [],
+  mutated: [[Array<number>, Map<number, number>]],
+  recordChangeDescriptions: [],
+  roots: [],
+  supportsProfiling: [],
+  supportsReloadAndProfile: [],
+|}> {
   _bridge: Bridge;
 
   _captureScreenshots: boolean = false;
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index c27d97eb8bab..119cb47d9e0a 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -14,28 +14,33 @@ import { hydrate } from 'src/hydration';
 import { TreeStateContext } from './TreeContext';
 import { separateDisplayNameAndHOCs } from 'src/utils';
 
+import type { InspectedElement as InspectedElementBackend } from 'src/backend/types';
 import type {
   DehydratedData,
   Element,
-  InspectedElement,
+  InspectedElement as InspectedElementFrontend,
 } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
 
 type Context = {|
-  read(id: number): InspectedElement | null,
+  read(id: number): InspectedElementFrontend | null,
 |};
 
 const InspectedElementContext = createContext<Context>(((null: any): Context));
 InspectedElementContext.displayName = 'InspectedElementContext';
 
-type ResolveFn = (inspectedElement: InspectedElement) => void;
+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
 type InProgressRequest = {|
-  promise: Thenable<InspectedElement>,
+  promise: Thenable<InspectedElementFrontend>,
   resolveFn: ResolveFn,
 |};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
-const resource: Resource<Element, Element, InspectedElement> = createResource(
+const resource: Resource<
+  Element,
+  Element,
+  InspectedElementFrontend
+> = createResource(
   (element: Element) => {
     let request = inProgressRequests.get(element);
     if (request != null) {
@@ -85,7 +90,7 @@ function InspectedElementContextController({ children }: Props) {
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onInspectedElement = (
-      inspectedElement: InspectedElement | number | null
+      data: InspectedElementBackend | number | null
     ) => {
       // A null value means that the element no longer exists in the backend.
       // If it's the same element that's currently selected, that selection will be removed once the Store updates.
@@ -93,23 +98,21 @@ function InspectedElementContextController({ children }: Props) {
       // Either way there is nothing we need to do in this case.
       // A numeric value indicates that the element hasn't changed since we last requested its data,
       // in which case we don't need to invalidate the cache and re-render anything in the DevTools.
-      if (inspectedElement !== null && typeof inspectedElement === 'object') {
-        const id = inspectedElement.id;
-
-        const { displayName, type } = inspectedElement;
-
-        const [
-          displayNameWithoutHOCs,
-          hocDisplayNames,
-        ] = separateDisplayNameAndHOCs(displayName, type);
-
-        inspectedElement = (({
-          ...inspectedElement,
-          displayName: displayNameWithoutHOCs,
+      if (data !== null && typeof data === 'object') {
+        const id = data.id;
+
+        const inspectedElement: InspectedElementFrontend = {
+          canEditFunctionProps: data.canEditFunctionProps,
+          canEditHooks: data.canEditHooks,
+          canToggleSuspense: data.canToggleSuspense,
+          canViewSource: data.canViewSource,
+          id: data.id,
+          source: data.source,
+          type: data.type,
           owners:
-            inspectedElement.owners === null
+            data.owners === null
               ? null
-              : inspectedElement.owners.map(owner => {
+              : data.owners.map(owner => {
                   const [
                     displayName,
                     hocDisplayNames,
@@ -120,13 +123,12 @@ function InspectedElementContextController({ children }: Props) {
                     hocDisplayNames,
                   };
                 }),
-          hocDisplayNames,
-          context: hydrateHelper(inspectedElement.context),
-          events: hydrateHelper(inspectedElement.events),
-          hooks: hydrateHelper(inspectedElement.hooks),
-          props: hydrateHelper(inspectedElement.props),
-          state: hydrateHelper(inspectedElement.state),
-        }: any): InspectedElement);
+          context: hydrateHelper(data.context),
+          events: hydrateHelper(data.events),
+          hooks: hydrateHelper(data.hooks),
+          props: hydrateHelper(data.props),
+          state: hydrateHelper(data.state),
+        };
 
         const element = store.getElementByID(id);
         if (element !== null) {
@@ -174,16 +176,13 @@ function InspectedElementContextController({ children }: Props) {
     bridge.send('selectElement', { id: selectedElementID, rendererID });
 
     const onInspectedElement = (
-      inspectedElement: InspectedElement | number | null
+      data: InspectedElementBackend | number | null
     ) => {
-      if (inspectedElement !== null) {
+      if (data !== null) {
         // If this is the element we requested, wait a little bit and then ask for an update.
-        if (inspectedElement === selectedElementID) {
+        if (data === selectedElementID) {
           timeoutID = setTimeout(sendRequest, 1000);
-        } else if (
-          typeof inspectedElement === 'object' &&
-          inspectedElement.id === selectedElementID
-        ) {
+        } else if (typeof data === 'object' && data.id === selectedElementID) {
           timeoutID = setTimeout(sendRequest, 1000);
         }
       }
diff --git a/src/devtools/views/Components/OwnersListContext.js b/src/devtools/views/Components/OwnersListContext.js
index f83b1a6d391d..aa7e2dab0503 100644
--- a/src/devtools/views/Components/OwnersListContext.js
+++ b/src/devtools/views/Components/OwnersListContext.js
@@ -11,11 +11,8 @@ import { BridgeContext, StoreContext } from '../context';
 import { TreeStateContext } from './TreeContext';
 import { separateDisplayNameAndHOCs } from 'src/utils';
 
-import type {
-  Element,
-  Owner,
-  OwnersList,
-} from 'src/devtools/views/Components/types';
+import type { OwnersList } from 'src/backend/types';
+import type { Element, Owner } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
 
 type Context = (id: number) => Array<Owner> | null;
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 106b184ac5b8..a1c2a2b80cdb 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -52,8 +52,6 @@ export type Source = {|
 export type InspectedElement = {|
   id: number,
 
-  displayName: string | null,
-
   // Does the current renderer support editable hooks?
   canEditHooks: boolean,
 
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index c02eef4fe167..606ffb706a79 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -6,6 +6,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import React, { useState } from 'react';
+import Bridge from 'src/bridge';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -23,8 +24,6 @@ import styles from './DevTools.css';
 
 import './root.css';
 
-import type { Bridge } from '../../types';
-
 export type BrowserName = 'Chrome' | 'Firefox';
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler' | 'settings';
diff --git a/src/devtools/views/context.js b/src/devtools/views/context.js
index 5e25f1940ed3..e5ede9ef48a0 100644
--- a/src/devtools/views/context.js
+++ b/src/devtools/views/context.js
@@ -1,8 +1,7 @@
 // @flow
 
 import { createContext } from 'react';
-
-import type { Bridge } from '../../types';
+import Bridge from 'src/bridge';
 
 import Store from '../store';
 
diff --git a/src/types.js b/src/types.js
index ca1329af9db8..446e63ddc709 100644
--- a/src/types.js
+++ b/src/types.js
@@ -1,11 +1,5 @@
 // @flow
 
-export type Bridge = {
-  addListener(type: string, callback: Function): void,
-  removeListener(type: string, callback: Function): void,
-  send(event: string, payload: any, transferable?: Array<any>): void,
-};
-
 export type Wall = {|
   // `listen` returns the "unlisten" function.
   listen: (fn: Function) => Function,

From 8f532350175dbdac8a53fbdb92b90ac62529d4c3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 9 Jun 2019 16:16:06 -0700
Subject: [PATCH 711/814] Fixed regression fixtures

---
 fixtures/regression/14.9.html   |  7 ++--
 fixtures/regression/15.0.html   |  7 ++--
 fixtures/regression/15.1.html   |  7 ++--
 fixtures/regression/15.2.html   |  7 ++--
 fixtures/regression/15.3.html   |  7 ++--
 fixtures/regression/15.4.html   |  7 ++--
 fixtures/regression/15.5.html   |  7 ++--
 fixtures/regression/15.6.html   |  7 ++--
 fixtures/regression/16.0.html   |  7 ++--
 fixtures/regression/16.1.html   |  7 ++--
 fixtures/regression/16.2.html   |  7 ++--
 fixtures/regression/16.3.html   |  7 ++--
 fixtures/regression/16.4.html   |  7 ++--
 fixtures/regression/16.5.html   |  7 ++--
 fixtures/regression/16.6.html   |  7 ++--
 fixtures/regression/16.7.html   |  7 ++--
 fixtures/regression/canary.html |  7 ++--
 fixtures/regression/next.html   |  7 ++--
 fixtures/regression/server.js   | 16 ++++++++
 fixtures/regression/shared.js   |  2 +-
 package.json                    |  1 +
 yarn.lock                       | 66 +++++++++++++++++++++++++++++++--
 22 files changed, 135 insertions(+), 76 deletions(-)
 create mode 100755 fixtures/regression/server.js

diff --git a/fixtures/regression/14.9.html b/fixtures/regression/14.9.html
index e92a3083011a..efa28f49cd85 100644
--- a/fixtures/regression/14.9.html
+++ b/fixtures/regression/14.9.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/14.9.html">http://localhost:9000/fixtures/regression/14.9.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/14.9.html">http://localhost:3000/fixtures/regression/14.9.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.0.html b/fixtures/regression/15.0.html
index b3f05333c273..464ea1f5481c 100644
--- a/fixtures/regression/15.0.html
+++ b/fixtures/regression/15.0.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.0.html">http://localhost:9000/fixtures/regression/15.0.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.0.html">http://localhost:3000/fixtures/regression/15.0.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.1.html b/fixtures/regression/15.1.html
index 8712b56a9e6f..7e02e81bf93a 100644
--- a/fixtures/regression/15.1.html
+++ b/fixtures/regression/15.1.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.1.html">http://localhost:9000/fixtures/regression/15.1.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.1.html">http://localhost:3000/fixtures/regression/15.1.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.2.html b/fixtures/regression/15.2.html
index acde32fe2140..ff1e6b87469e 100644
--- a/fixtures/regression/15.2.html
+++ b/fixtures/regression/15.2.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.2.html">http://localhost:9000/fixtures/regression/15.2.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.2.html">http://localhost:3000/fixtures/regression/15.2.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.3.html b/fixtures/regression/15.3.html
index ced3559ea6c4..8d1795962ed6 100644
--- a/fixtures/regression/15.3.html
+++ b/fixtures/regression/15.3.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.3.html">http://localhost:9000/fixtures/regression/15.3.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.3.html">http://localhost:3000/fixtures/regression/15.3.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.4.html b/fixtures/regression/15.4.html
index 0f23cdea7db1..ee1bfc0723b4 100644
--- a/fixtures/regression/15.4.html
+++ b/fixtures/regression/15.4.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.4.html">http://localhost:9000/fixtures/regression/15.4.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.4.html">http://localhost:3000/fixtures/regression/15.4.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.5.html b/fixtures/regression/15.5.html
index 361512d9bd26..4097bdf70870 100644
--- a/fixtures/regression/15.5.html
+++ b/fixtures/regression/15.5.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.5.html">http://localhost:9000/fixtures/regression/15.5.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.5.html">http://localhost:3000/fixtures/regression/15.5.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/15.6.html b/fixtures/regression/15.6.html
index 97ff99ccf505..ab10ba8716db 100644
--- a/fixtures/regression/15.6.html
+++ b/fixtures/regression/15.6.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/15.6.html">http://localhost:9000/fixtures/regression/15.6.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/15.6.html">http://localhost:3000/fixtures/regression/15.6.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.0.html b/fixtures/regression/16.0.html
index ea5cf812c99d..7c55d75114b1 100644
--- a/fixtures/regression/16.0.html
+++ b/fixtures/regression/16.0.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.0.html">http://localhost:9000/fixtures/regression/16.0.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.0.html">http://localhost:3000/fixtures/regression/16.0.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.1.html b/fixtures/regression/16.1.html
index 494cc979004d..d93addf46ecf 100644
--- a/fixtures/regression/16.1.html
+++ b/fixtures/regression/16.1.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.1.html">http://localhost:9000/fixtures/regression/16.1.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.1.html">http://localhost:3000/fixtures/regression/16.1.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.2.html b/fixtures/regression/16.2.html
index b1c3186720e5..10d8e150ed34 100644
--- a/fixtures/regression/16.2.html
+++ b/fixtures/regression/16.2.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.2.html">http://localhost:9000/fixtures/regression/16.2.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.2.html">http://localhost:3000/fixtures/regression/16.2.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.3.html b/fixtures/regression/16.3.html
index 76799903d80f..2e42e2813a9e 100644
--- a/fixtures/regression/16.3.html
+++ b/fixtures/regression/16.3.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.3.html">http://localhost:9000/fixtures/regression/16.3.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.3.html">http://localhost:3000/fixtures/regression/16.3.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.4.html b/fixtures/regression/16.4.html
index ca6c30dec121..f59f4e9e6f00 100644
--- a/fixtures/regression/16.4.html
+++ b/fixtures/regression/16.4.html
@@ -21,11 +21,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.4.html">http://localhost:9000/fixtures/regression/16.4.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.4.html">http://localhost:3000/fixtures/regression/16.4.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.5.html b/fixtures/regression/16.5.html
index 48e14a457c1a..455e06f2192b 100644
--- a/fixtures/regression/16.5.html
+++ b/fixtures/regression/16.5.html
@@ -23,11 +23,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.5.html">http://localhost:9000/fixtures/regression/16.5.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.5.html">http://localhost:3000/fixtures/regression/16.5.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.6.html b/fixtures/regression/16.6.html
index ca32dc5b9cd9..1f61c47f85a7 100644
--- a/fixtures/regression/16.6.html
+++ b/fixtures/regression/16.6.html
@@ -24,11 +24,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.6.html">http://localhost:9000/fixtures/regression/16.6.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.6.html">http://localhost:3000/fixtures/regression/16.6.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/16.7.html b/fixtures/regression/16.7.html
index 2b7ec759fa24..d839d7e030b6 100644
--- a/fixtures/regression/16.7.html
+++ b/fixtures/regression/16.7.html
@@ -24,11 +24,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/16.7.html">http://localhost:9000/fixtures/regression/16.7.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/16.7.html">http://localhost:3000/fixtures/regression/16.7.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/canary.html b/fixtures/regression/canary.html
index cd25e6162aa8..ab59d7029e6d 100644
--- a/fixtures/regression/canary.html
+++ b/fixtures/regression/canary.html
@@ -24,11 +24,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/canary.html">http://localhost:9000/fixtures/regression/canary.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/canary.html">http://localhost:3000/fixtures/regression/canary.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/next.html b/fixtures/regression/next.html
index c457f03accad..77bb9bbed29d 100644
--- a/fixtures/regression/next.html
+++ b/fixtures/regression/next.html
@@ -24,11 +24,10 @@
     <div id="root">
       If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
       <br/><br/>
-      Use a web server like <code>serve</code> instead:
+      Use the <code>server</code> script instead:
       <br/><br/>
-      <code>npm install -g pushstate-server</code><br/>
-      <code>pushstate-server .</code><br/>
-      <code>open <a href="http://localhost:9000/fixtures/regression/next.html">http://localhost:9000/fixtures/regression/next.html</a></code>
+      <code>node ./fixtures/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/fixtures/regression/next.html">http://localhost:3000/fixtures/regression/next.html</a></code>
     </div>
 
     <script src="shared.js" type="text/babel"></script>
diff --git a/fixtures/regression/server.js b/fixtures/regression/server.js
new file mode 100755
index 000000000000..ec544ab00653
--- /dev/null
+++ b/fixtures/regression/server.js
@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+const finalhandler = require('finalhandler');
+const http = require('http');
+const serveStatic = require('serve-static');
+
+// Serve regression folder
+const serve = serveStatic(__dirname, { index: 'index.html' });
+
+// Create server
+const server = http.createServer(function onRequest(req, res) {
+  serve(req, res, finalhandler(req, res));
+});
+
+// Listen
+server.listen(3000);
diff --git a/fixtures/regression/shared.js b/fixtures/regression/shared.js
index 362e02e9113c..2afd063b6bda 100644
--- a/fixtures/regression/shared.js
+++ b/fixtures/regression/shared.js
@@ -153,7 +153,7 @@ switch (major) {
             );
           }
         }
-        const onRender = (...args) => console.log('onRender()', ...args);
+        const onRender = (...args) => {};
         const Profiler = React.unstable_Profiler || React.Profiler;
         apps.push(
           <Feature
diff --git a/package.json b/package.json
index 986cfab521bf..f9bb136be5c4 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
     "rimraf": "^2.6.3",
     "scheduler": "^0.0.0-50b50c26f",
     "semver": "^5.5.1",
+    "serve-static": "^1.14.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
diff --git a/yarn.lock b/yarn.lock
index f0437a8b6b89..8b7b83046662 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6184,6 +6184,17 @@ http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
+http-errors@~1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-parser-js@>=0.4.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.0.tgz#d65edbede84349d0dc30320815a15d39cc3cbbd8"
@@ -8292,6 +8303,11 @@ mime@1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mime@^2.3.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.2.tgz#ce5229a5e99ffc313abac806b482c10e7ba6ac78"
@@ -8425,7 +8441,7 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@^2.1.1:
+ms@2.1.1, ms@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
@@ -9193,7 +9209,7 @@ parse5@^3.0.1:
   dependencies:
     "@types/node" "*"
 
-parseurl@~1.3.2:
+parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
@@ -9728,6 +9744,11 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
   integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
 
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
 raw-body@2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
@@ -10563,6 +10584,25 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
 serialize-javascript@^1.4.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
@@ -10591,6 +10631,16 @@ serve-static@1.13.2:
     parseurl "~1.3.2"
     send "0.16.2"
 
+serve-static@^1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -10626,6 +10676,11 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
   integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
 sha.js@2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
@@ -11028,7 +11083,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.4.0 < 2":
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
@@ -11578,6 +11633,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
 tosource@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/tosource/-/tosource-1.0.0.tgz#42d88dd116618bcf00d6106dd5446f3427902ff1"

From e66fcaf17d48adbda479251c86ede7cf1e253fdf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 9 Jun 2019 16:22:23 -0700
Subject: [PATCH 712/814] Nit

---
 .gitignore                    | 3 +--
 fixtures/regression/server.js | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8d57dd31ee6e..e2524be341a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,4 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
-.watchmanconfig
-key.pem
\ No newline at end of file
+.watchmanconfig
\ No newline at end of file
diff --git a/fixtures/regression/server.js b/fixtures/regression/server.js
index ec544ab00653..f7e03f075dcc 100755
--- a/fixtures/regression/server.js
+++ b/fixtures/regression/server.js
@@ -4,7 +4,7 @@ const finalhandler = require('finalhandler');
 const http = require('http');
 const serveStatic = require('serve-static');
 
-// Serve regression folder
+// Serve fixtures folder
 const serve = serveStatic(__dirname, { index: 'index.html' });
 
 // Create server

From 402a68d816504c76cac71078e4f10c6d987fcf79 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 10 Jun 2019 11:14:27 -0700
Subject: [PATCH 713/814] Fixed minor border bug in Profiling tab toolbar

---
 src/devtools/views/Profiler/Profiler.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 5d4f8e579ec4..96f7f0559701 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { CommitFilterModalContextController } from './CommitFilterModalContext';
 import { ModalDialog } from '../ModalDialog';
 import { ProfilerContext } from './ProfilerContext';
@@ -98,8 +98,12 @@ function Profiler(_: {||}) {
             <RootSelector />
             <div className={styles.Spacer} />
             <ToggleCommitFilterModalButton />
-            <div className={styles.VRule} />
-            {didRecordCommits && <SnapshotSelector />}
+            {didRecordCommits && (
+              <Fragment>
+                <div className={styles.VRule} />
+                <SnapshotSelector />
+              </Fragment>
+            )}
           </div>
           <div className={styles.Content}>
             {view}

From 19ed98d0c25fc4aeb3d96656c3f171497d623e29 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 10 Jun 2019 14:57:26 -0700
Subject: [PATCH 714/814] Removed Settings panel in favor of new shared
 Settings modal

---
 shells/browser/shared/src/main.js             |  17 -
 .../views/Components/ComponentFiltersModal.js | 445 ------------------
 .../ComponentFiltersModalContext.js           |  37 --
 src/devtools/views/Components/Components.js   |  33 +-
 .../ToggleComponentFiltersModalButton.css     |   8 -
 .../ToggleComponentFiltersModalButton.js      |  80 ----
 src/devtools/views/Components/Tree.js         |  85 ++--
 src/devtools/views/DevTools.js                |  15 +-
 .../views/Profiler/CommitFilterModal.css      |  31 --
 .../views/Profiler/CommitFilterModal.js       |  89 ----
 .../Profiler/CommitFilterModalContext.js      |  35 --
 src/devtools/views/Profiler/NoCommitData.js   |   3 +-
 src/devtools/views/Profiler/Profiler.css      |   3 +-
 src/devtools/views/Profiler/Profiler.js       |  14 +-
 .../Profiler/ToggleCommitFilterModalButton.js |  20 -
 .../views/Settings/ComponentsSettings.js      | 417 ++++++++++++++++
 .../views/Settings/GeneralSettings.js         |  50 ++
 .../views/Settings/ProfilerSettings.js        | 144 ++++++
 src/devtools/views/Settings/Settings.css      |  86 ----
 src/devtools/views/Settings/Settings.js       | 203 --------
 src/devtools/views/Settings/SettingsModal.css |  43 ++
 src/devtools/views/Settings/SettingsModal.js  | 134 ++++++
 .../views/Settings/SettingsModalContext.js    |  35 ++
 .../Settings/SettingsModalContextToggle.js    |  43 ++
 .../SettingsShared.css}                       |  81 ++--
 src/devtools/views/TabBar.css                 |   5 +-
 src/utils.js                                  |  16 +
 27 files changed, 1004 insertions(+), 1168 deletions(-)
 delete mode 100644 src/devtools/views/Components/ComponentFiltersModal.js
 delete mode 100644 src/devtools/views/Components/ComponentFiltersModalContext.js
 delete mode 100644 src/devtools/views/Components/ToggleComponentFiltersModalButton.css
 delete mode 100644 src/devtools/views/Components/ToggleComponentFiltersModalButton.js
 delete mode 100644 src/devtools/views/Profiler/CommitFilterModal.css
 delete mode 100644 src/devtools/views/Profiler/CommitFilterModal.js
 delete mode 100644 src/devtools/views/Profiler/CommitFilterModalContext.js
 delete mode 100644 src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
 create mode 100644 src/devtools/views/Settings/ComponentsSettings.js
 create mode 100644 src/devtools/views/Settings/GeneralSettings.js
 create mode 100644 src/devtools/views/Settings/ProfilerSettings.js
 delete mode 100644 src/devtools/views/Settings/Settings.css
 delete mode 100644 src/devtools/views/Settings/Settings.js
 create mode 100644 src/devtools/views/Settings/SettingsModal.css
 create mode 100644 src/devtools/views/Settings/SettingsModal.js
 create mode 100644 src/devtools/views/Settings/SettingsModalContext.js
 create mode 100644 src/devtools/views/Settings/SettingsModalContextToggle.js
 rename src/devtools/views/{Components/ComponentFiltersModal.css => Settings/SettingsShared.css} (65%)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index c9fb4c1df282..320e20678f78 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -269,23 +269,6 @@ function createPanelIfReactLoaded() {
         });
       });
 
-      chrome.devtools.panels.create('⚛ Settings', '', 'panel.html', panel => {
-        panel.onShown.addListener(panel => {
-          if (currentPanel === panel) {
-            return;
-          }
-
-          currentPanel = panel;
-          settingsPortalContainer = panel.container;
-
-          if (settingsPortalContainer != null) {
-            ensureInitialHTMLIsCleared(settingsPortalContainer);
-            render('settings');
-            panel.injectStyles(cloneStyleTags);
-          }
-        });
-      });
-
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
       // Shutdown bridge before a new page is loaded.
diff --git a/src/devtools/views/Components/ComponentFiltersModal.js b/src/devtools/views/Components/ComponentFiltersModal.js
deleted file mode 100644
index 53af031da5e6..000000000000
--- a/src/devtools/views/Components/ComponentFiltersModal.js
+++ /dev/null
@@ -1,445 +0,0 @@
-// @flow
-
-import React, {
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useModalDismissSignal, useSubscription } from '../hooks';
-import { ComponentFiltersModalContext } from './ComponentFiltersModalContext';
-import { StoreContext } from '../context';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import Toggle from '../Toggle';
-import Store from 'src/devtools/store';
-import {
-  ComponentFilterDisplayName,
-  ComponentFilterElementType,
-  ComponentFilterHOC,
-  ComponentFilterLocation,
-  ElementTypeClass,
-  ElementTypeContext,
-  ElementTypeEventTarget,
-  ElementTypeFunction,
-  ElementTypeForwardRef,
-  ElementTypeHostComponent,
-  ElementTypeMemo,
-  ElementTypeOtherOrUnknown,
-  ElementTypeProfiler,
-  ElementTypeSuspense,
-} from 'src/types';
-import styles from './ComponentFiltersModal.css';
-
-import type {
-  BooleanComponentFilter,
-  ComponentFilter,
-  ComponentFilterType,
-  ElementType,
-  ElementTypeComponentFilter,
-  RegExpComponentFilter,
-} from 'src/types';
-
-export default function ComponentFiltersModalWrapper(_: {||}) {
-  const store = useContext(StoreContext);
-  const { profilerStore } = store;
-
-  const { isModalShowing, setIsModalShowing } = useContext(
-    ComponentFiltersModalContext
-  );
-
-  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
-  // If necessary, we could support this- but it doesn't seem like a necessary use case.
-  const isProfilingSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => profilerStore.isProfiling,
-      subscribe: (callback: Function) => {
-        profilerStore.addListener('isProfiling', callback);
-        return () => profilerStore.removeListener('isProfiling', callback);
-      },
-    }),
-    [profilerStore]
-  );
-  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
-  if (isProfiling && isModalShowing) {
-    setIsModalShowing(false);
-  }
-
-  return isModalShowing ? (
-    <ComponentFiltersModal
-      store={store}
-      setIsModalShowing={setIsModalShowing}
-    />
-  ) : null;
-}
-
-type Props = {|
-  store: Store,
-  setIsModalShowing: (value: boolean) => void,
-|};
-
-function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
-  const dismissModal = useCallback(() => setIsModalShowing(false), [
-    setIsModalShowing,
-  ]);
-
-  const modalRef = useRef<HTMLDivElement | null>(null);
-
-  useModalDismissSignal(modalRef, dismissModal);
-
-  const {
-    addFilter,
-    changeFilterType,
-    updateFilterValueElementType,
-    updateFilterValueRegExp,
-    componentFilters,
-    removeFilter,
-    saveFilters,
-    toggleFilterIsEnabled,
-  } = useComponentFilters();
-
-  const saveAndClose = useCallback(() => {
-    saveFilters();
-    dismissModal();
-  }, [dismissModal, saveFilters]);
-
-  return (
-    <div className={styles.Background}>
-      <div className={styles.Modal} ref={modalRef}>
-        <div className={styles.LeftRight}>
-          <div className={styles.Left}>Hide components where...</div>
-          <div className={styles.Right}>
-            <Button onClick={addFilter}>
-              <ButtonIcon className={styles.ButtonIcon} type="add" />
-              Add filter
-            </Button>
-          </div>
-        </div>
-        <table className={styles.Table}>
-          <tbody>
-            {componentFilters.length === 0 && (
-              <tr className={styles.TableRow}>
-                <td className={styles.NoFiltersCell}>
-                  No filters have been added.
-                </td>
-              </tr>
-            )}
-            {componentFilters.map((componentFilter, index) => (
-              <tr className={styles.TableRow} key={index}>
-                <td className={styles.TableCell}>
-                  <Toggle
-                    className={
-                      componentFilter.isValid !== false
-                        ? ''
-                        : styles.InvalidRegExp
-                    }
-                    isChecked={componentFilter.isEnabled}
-                    onChange={isEnabled =>
-                      toggleFilterIsEnabled(componentFilter, isEnabled)
-                    }
-                    title={
-                      componentFilter.isValid === false
-                        ? 'Filter invalid'
-                        : componentFilter.isEnabled
-                        ? 'Filter enabled'
-                        : 'Filter disabled'
-                    }
-                  >
-                    <ToggleIcon
-                      isEnabled={componentFilter.isEnabled}
-                      isValid={
-                        componentFilter.isValid == null ||
-                        componentFilter.isValid === true
-                      }
-                    />
-                  </Toggle>
-                </td>
-                <td className={styles.TableCell}>
-                  <select
-                    className={styles.Select}
-                    value={componentFilter.type}
-                    onChange={({ currentTarget }) =>
-                      changeFilterType(
-                        componentFilter,
-                        ((parseInt(
-                          currentTarget.value,
-                          10
-                        ): any): ComponentFilterType)
-                      )
-                    }
-                  >
-                    <option value={ComponentFilterLocation}>location</option>
-                    <option value={ComponentFilterDisplayName}>name</option>
-                    <option value={ComponentFilterElementType}>type</option>
-                    <option value={ComponentFilterHOC}>hoc</option>
-                  </select>
-                </td>
-                <td className={styles.TableCell}>
-                  {componentFilter.type === ComponentFilterElementType &&
-                    'equals'}
-                  {(componentFilter.type === ComponentFilterLocation ||
-                    componentFilter.type === ComponentFilterDisplayName) &&
-                    'matches'}
-                </td>
-                <td className={styles.TableCell}>
-                  {componentFilter.type === ComponentFilterElementType && (
-                    <select
-                      className={styles.Select}
-                      value={componentFilter.value}
-                      onChange={({ currentTarget }) =>
-                        updateFilterValueElementType(
-                          componentFilter,
-                          ((parseInt(
-                            currentTarget.value,
-                            10
-                          ): any): ElementType)
-                        )
-                      }
-                    >
-                      <option value={ElementTypeClass}>class</option>
-                      <option value={ElementTypeContext}>context</option>
-                      <option value={ElementTypeEventTarget}>event</option>
-                      <option value={ElementTypeFunction}>function</option>
-                      <option value={ElementTypeForwardRef}>forward ref</option>
-                      <option value={ElementTypeHostComponent}>
-                        host (e.g. &lt;div&gt;)
-                      </option>
-                      <option value={ElementTypeMemo}>memo</option>
-                      <option value={ElementTypeOtherOrUnknown}>other</option>
-                      <option value={ElementTypeProfiler}>profiler</option>
-                      <option value={ElementTypeSuspense}>suspense</option>
-                    </select>
-                  )}
-                  {(componentFilter.type === ComponentFilterLocation ||
-                    componentFilter.type === ComponentFilterDisplayName) && (
-                    <input
-                      className={styles.Input}
-                      type="text"
-                      placeholder="Regular expression"
-                      onChange={({ currentTarget }) =>
-                        updateFilterValueRegExp(
-                          componentFilter,
-                          currentTarget.value
-                        )
-                      }
-                      value={componentFilter.value}
-                    />
-                  )}
-                </td>
-                <td className={styles.TableCell}>
-                  <Button
-                    onClick={() => removeFilter(index)}
-                    title="Delete filter"
-                  >
-                    <ButtonIcon type="delete" />
-                  </Button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <div className={styles.LeftRight}>
-          <div className={styles.Right}>
-            <Button className={styles.CancelButton} onClick={dismissModal}>
-              Cancel
-            </Button>
-            <Button onClick={saveAndClose}>Save Changes</Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-type ToggleIconProps = {|
-  isEnabled: boolean,
-  isValid: boolean,
-|};
-function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {
-  let className;
-  if (isValid) {
-    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
-  } else {
-    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
-  }
-  return (
-    <div className={className}>
-      <div
-        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
-      />
-    </div>
-  );
-}
-
-function useComponentFilters() {
-  const store = useContext(StoreContext);
-
-  const [componentFilters, setComponentFilters] = useState<
-    Array<ComponentFilter>
-  >(() => [...store.componentFilters]);
-
-  const addFilter = useCallback(() => {
-    setComponentFilters(componentFilters => {
-      return [
-        ...componentFilters,
-        {
-          type: ComponentFilterElementType,
-          value: ElementTypeHostComponent,
-          isEnabled: true,
-        },
-      ];
-    });
-  }, []);
-
-  const changeFilterType = useCallback(
-    (componentFilter: ComponentFilter, type: ComponentFilterType) => {
-      setComponentFilters(componentFilters => {
-        const cloned: Array<ComponentFilter> = [...componentFilters];
-        const index = componentFilters.indexOf(componentFilter);
-        if (index >= 0) {
-          if (type === ComponentFilterElementType) {
-            cloned[index] = {
-              type: ComponentFilterElementType,
-              isEnabled: componentFilter.isEnabled,
-              value: ElementTypeHostComponent,
-            };
-          } else if (type === ComponentFilterDisplayName) {
-            cloned[index] = {
-              type: ComponentFilterDisplayName,
-              isEnabled: componentFilter.isEnabled,
-              isValid: true,
-              value: '',
-            };
-          } else if (type === ComponentFilterLocation) {
-            cloned[index] = {
-              type: ComponentFilterLocation,
-              isEnabled: componentFilter.isEnabled,
-              isValid: true,
-              value: '',
-            };
-          } else if (type === ComponentFilterHOC) {
-            cloned[index] = {
-              type: ComponentFilterHOC,
-              isEnabled: componentFilter.isEnabled,
-              isValid: true,
-            };
-          }
-        }
-        return cloned;
-      });
-    },
-    []
-  );
-
-  const updateFilterValueElementType = useCallback(
-    (componentFilter: ComponentFilter, value: ElementType) => {
-      if (componentFilter.type !== ComponentFilterElementType) {
-        throw Error('Invalid value for element type filter');
-      }
-
-      setComponentFilters(componentFilters => {
-        const cloned: Array<ComponentFilter> = [...componentFilters];
-        if (componentFilter.type === ComponentFilterElementType) {
-          const index = componentFilters.indexOf(componentFilter);
-          if (index >= 0) {
-            cloned[index] = {
-              ...componentFilter,
-              value,
-            };
-          }
-        }
-        return cloned;
-      });
-    },
-    []
-  );
-
-  const updateFilterValueRegExp = useCallback(
-    (componentFilter: ComponentFilter, value: string) => {
-      if (componentFilter.type === ComponentFilterElementType) {
-        throw Error('Invalid value for element type filter');
-      }
-
-      setComponentFilters(componentFilters => {
-        const cloned: Array<ComponentFilter> = [...componentFilters];
-        if (
-          componentFilter.type === ComponentFilterDisplayName ||
-          componentFilter.type === ComponentFilterLocation
-        ) {
-          const index = componentFilters.indexOf(componentFilter);
-          if (index >= 0) {
-            let isValid = true;
-            try {
-              new RegExp(value);
-            } catch (error) {
-              isValid = false;
-            }
-            cloned[index] = {
-              ...componentFilter,
-              isValid,
-              value,
-            };
-          }
-        }
-        return cloned;
-      });
-    },
-    []
-  );
-
-  const removeFilter = useCallback((index: number) => {
-    setComponentFilters(componentFilters => {
-      const cloned: Array<ComponentFilter> = [...componentFilters];
-      cloned.splice(index, 1);
-      return cloned;
-    });
-  }, []);
-
-  const saveFilters = useCallback(() => {
-    store.componentFilters = [...componentFilters];
-  }, [componentFilters, store]);
-
-  const toggleFilterIsEnabled = useCallback(
-    (componentFilter: ComponentFilter, isEnabled: boolean) => {
-      setComponentFilters(componentFilters => {
-        const cloned: Array<ComponentFilter> = [...componentFilters];
-        const index = componentFilters.indexOf(componentFilter);
-        if (index >= 0) {
-          if (componentFilter.type === ComponentFilterElementType) {
-            cloned[index] = {
-              ...((cloned[index]: any): ElementTypeComponentFilter),
-              isEnabled,
-            };
-          } else if (
-            componentFilter.type === ComponentFilterDisplayName ||
-            componentFilter.type === ComponentFilterLocation
-          ) {
-            cloned[index] = {
-              ...((cloned[index]: any): RegExpComponentFilter),
-              isEnabled,
-            };
-          } else if (componentFilter.type === ComponentFilterHOC) {
-            cloned[index] = {
-              ...((cloned[index]: any): BooleanComponentFilter),
-              isEnabled,
-            };
-          }
-        }
-        return cloned;
-      });
-    },
-    []
-  );
-
-  return {
-    addFilter,
-    changeFilterType,
-    componentFilters,
-    removeFilter,
-    saveFilters,
-    toggleFilterIsEnabled,
-    updateFilterValueElementType,
-    updateFilterValueRegExp,
-  };
-}
diff --git a/src/devtools/views/Components/ComponentFiltersModalContext.js b/src/devtools/views/Components/ComponentFiltersModalContext.js
deleted file mode 100644
index 6d2c46452a3d..000000000000
--- a/src/devtools/views/Components/ComponentFiltersModalContext.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @flow
-
-import React, { createContext, useMemo, useState } from 'react';
-
-type Context = {|
-  isModalShowing: boolean,
-  setIsModalShowing: (value: boolean) => void,
-|};
-
-const ComponentFiltersModalContext = createContext<Context>(
-  ((null: any): Context)
-);
-ComponentFiltersModalContext.displayName = 'ComponentFiltersModalContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function ComponentFiltersModalContextController({ children }: Props) {
-  const [isModalShowing, setIsModalShowing] = useState(false);
-
-  const value = useMemo(
-    () => ({
-      isModalShowing,
-      setIsModalShowing,
-    }),
-    [isModalShowing]
-  );
-
-  return (
-    <ComponentFiltersModalContext.Provider value={value}>
-      {children}
-    </ComponentFiltersModalContext.Provider>
-  );
-}
-
-export { ComponentFiltersModalContext, ComponentFiltersModalContextController };
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 3ed317a101dd..2e22471929ed 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -7,27 +7,32 @@ import { InspectedElementContextController } from './InspectedElementContext';
 import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
 import { ModalDialog } from '../ModalDialog';
+import SettingsModal from 'src/devtools/views/Settings/SettingsModal';
+import { SettingsModalContextController } from 'src/devtools/views/Settings/SettingsModalContext';
 
 import styles from './Components.css';
 
 function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
-    <OwnersListContextController>
-      <InspectedElementContextController>
-        <div className={styles.Components}>
-          <div className={styles.TreeWrapper}>
-            <Tree />
+    <SettingsModalContextController>
+      <OwnersListContextController>
+        <InspectedElementContextController>
+          <div className={styles.Components}>
+            <div className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.SelectedElementWrapper}>
+              <Suspense fallback={<Loading />}>
+                <SelectedElement />
+              </Suspense>
+            </div>
+            <ModalDialog />
+            <SettingsModal defaultTabID="components" />
           </div>
-          <div className={styles.SelectedElementWrapper}>
-            <Suspense fallback={<Loading />}>
-              <SelectedElement />
-            </Suspense>
-          </div>
-          <ModalDialog />
-        </div>
-      </InspectedElementContextController>
-    </OwnersListContextController>
+        </InspectedElementContextController>
+      </OwnersListContextController>
+    </SettingsModalContextController>
   );
 }
 
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.css b/src/devtools/views/Components/ToggleComponentFiltersModalButton.css
deleted file mode 100644
index b53991b1e08f..000000000000
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.Wrapper {
-  display: flex;
-}
-
-.Label {
-  font-size: var(--font-size-sans-small);
-  font-family: var(--font-family-sans);
-}
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
deleted file mode 100644
index e1d237f33ac4..000000000000
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+++ /dev/null
@@ -1,80 +0,0 @@
-// @flow
-
-import React, { useContext, useMemo } from 'react';
-import { useSubscription } from '../hooks';
-import { ComponentFiltersModalContext } from './ComponentFiltersModalContext';
-import { StoreContext } from '../context';
-import Toggle from '../Toggle';
-import ButtonIcon from '../ButtonIcon';
-import Store from 'src/devtools/store';
-
-import styles from './ToggleComponentFiltersModalButton.css';
-
-import type { ComponentFilter } from 'src/types';
-
-export default function ToggleComponentFiltersModalButton() {
-  const store = useContext(StoreContext);
-  const { profilerStore } = store;
-
-  const { isModalShowing, setIsModalShowing } = useContext(
-    ComponentFiltersModalContext
-  );
-
-  // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
-  // If necessary, we could support this- but it doesn't seem like a necessary use case.
-  const isProfilingSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => profilerStore.isProfiling,
-      subscribe: (callback: Function) => {
-        profilerStore.addListener('isProfiling', callback);
-        return () => profilerStore.removeListener('isProfiling', callback);
-      },
-    }),
-    [profilerStore]
-  );
-  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
-
-  const componentFiltersSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.componentFilters,
-      subscribe: (callback: Function) => {
-        store.addListener('componentFilters', callback);
-        return () => store.removeListener('componentFilters', callback);
-      },
-    }),
-    [store]
-  );
-  const componentFilters = useSubscription<Array<ComponentFilter>, Store>(
-    componentFiltersSubscription
-  );
-
-  const enabledCount = useMemo(
-    () =>
-      componentFilters.reduce(
-        (count, componentFilter) =>
-          componentFilter.isEnabled ? count + 1 : count,
-        0
-      ),
-    [componentFilters]
-  );
-
-  return (
-    <Toggle
-      isChecked={isModalShowing}
-      isDisabled={isProfiling}
-      onChange={setIsModalShowing}
-      title={
-        enabledCount > 0
-          ? `Filter preferences (${enabledCount} enabled)`
-          : 'Filter preferences'
-      }
-    >
-      <div className={styles.Wrapper}>
-        <ButtonIcon type="filter" />
-        {enabledCount > 0 && (
-          <span className={styles.Label}>{enabledCount}</span>
-        )}
-      </div>
-    </Toggle>
-  );
-}
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index d562107a98ec..9663f79a74ee 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -19,9 +19,7 @@ import ElementView from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
-import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
-import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
-import ComponentFiltersModal from './ComponentFiltersModal';
+import SettingsModalContextToggle from 'src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
 
@@ -284,49 +282,46 @@ export default function Tree(props: Props) {
 
   return (
     <TreeFocusedContext.Provider value={treeFocused}>
-      <ComponentFiltersModalContextController>
-        <div className={styles.Tree} ref={treeRef}>
-          <div className={styles.SearchInput}>
-            <InspectHostNodesToggle />
-            <div className={styles.VRule} />
-            <Suspense fallback={<Loading />}>
-              {ownerID !== null ? <OwnersStack /> : <SearchInput />}
-            </Suspense>
-            <div className={styles.VRule} />
-            <ToggleComponentFiltersModalButton />
-          </div>
-          <div
-            className={styles.AutoSizerWrapper}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            onKeyPress={handleKeyPress}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-            ref={focusTargetRef}
-            tabIndex={0}
-          >
-            <AutoSizer>
-              {({ height, width }) => (
-                // $FlowFixMe https://github.com/facebook/flow/issues/7341
-                <FixedSizeList
-                  className={styles.List}
-                  height={height}
-                  innerElementType={InnerElementType}
-                  itemCount={numElements}
-                  itemData={itemData}
-                  itemKey={itemKey}
-                  itemSize={lineHeight}
-                  ref={listRef}
-                  width={width}
-                >
-                  {ElementView}
-                </FixedSizeList>
-              )}
-            </AutoSizer>
-          </div>
-          <ComponentFiltersModal />
+      <div className={styles.Tree} ref={treeRef}>
+        <div className={styles.SearchInput}>
+          <InspectHostNodesToggle />
+          <div className={styles.VRule} />
+          <Suspense fallback={<Loading />}>
+            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+          </Suspense>
+          <div className={styles.VRule} />
+          <SettingsModalContextToggle />
         </div>
-      </ComponentFiltersModalContextController>
+        <div
+          className={styles.AutoSizerWrapper}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onKeyPress={handleKeyPress}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          ref={focusTargetRef}
+          tabIndex={0}
+        >
+          <AutoSizer>
+            {({ height, width }) => (
+              // $FlowFixMe https://github.com/facebook/flow/issues/7341
+              <FixedSizeList
+                className={styles.List}
+                height={height}
+                innerElementType={InnerElementType}
+                itemCount={numElements}
+                itemData={itemData}
+                itemKey={itemKey}
+                itemSize={lineHeight}
+                ref={listRef}
+                width={width}
+              >
+                {ElementView}
+              </FixedSizeList>
+            )}
+          </AutoSizer>
+        </div>
+      </div>
     </TreeFocusedContext.Provider>
   );
 }
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 606ffb706a79..2700c66e9c37 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -11,7 +11,6 @@ import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
-import Settings from './Settings/Settings';
 import TabBar from './TabBar';
 import { SettingsContextController } from './Settings/SettingsContext';
 import { TreeContextController } from './Components/TreeContext';
@@ -63,14 +62,8 @@ const profilerTab = {
   label: 'Profiler',
   title: 'React Profiler',
 };
-const settingsTab = {
-  id: ('settings': TabID),
-  icon: 'settings',
-  label: 'Settings',
-  title: 'React Settings',
-};
 
-const tabs = [componentsTab, profilerTab, settingsTab];
+const tabs = [componentsTab, profilerTab];
 
 export default function DevTools({
   bridge,
@@ -132,12 +125,6 @@ export default function DevTools({
                     >
                       <Profiler portalContainer={profilerPortalContainer} />
                     </div>
-                    <div
-                      className={styles.TabContent}
-                      hidden={tab !== 'settings'}
-                    >
-                      <Settings portalContainer={settingsPortalContainer} />
-                    </div>
                   </div>
                 </ProfilerContextController>
               </TreeContextController>
diff --git a/src/devtools/views/Profiler/CommitFilterModal.css b/src/devtools/views/Profiler/CommitFilterModal.css
deleted file mode 100644
index 4403bb4064f9..000000000000
--- a/src/devtools/views/Profiler/CommitFilterModal.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.Background {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-modal-background);
-}
-
-.Modal {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: inline-block;
-  background-color: var(--color-background);
-  padding: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.25rem;
-}
-
-.Input {
-  width: 40px;
-  background: none;
-  border: 1px solid transparent;
-  color: var(--color-attribute-editable-value);
-  border-radius: 0.125rem;
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-normal);
-}
-.Input:focus {
-  background-color: var(--color-button-background-focus);
-  outline: none;
-}
diff --git a/src/devtools/views/Profiler/CommitFilterModal.js b/src/devtools/views/Profiler/CommitFilterModal.js
deleted file mode 100644
index 8b359479af6a..000000000000
--- a/src/devtools/views/Profiler/CommitFilterModal.js
+++ /dev/null
@@ -1,89 +0,0 @@
-// @flow
-
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { CommitFilterModalContext } from './CommitFilterModalContext';
-import { ProfilerContext } from './ProfilerContext';
-import { useModalDismissSignal } from '../hooks';
-
-import styles from './CommitFilterModal.css';
-
-export default function FilterModal(_: {||}) {
-  const { isModalShowing } = useContext(CommitFilterModalContext);
-
-  if (!isModalShowing) {
-    return null;
-  }
-
-  return <FilterModalImpl />;
-}
-
-function FilterModalImpl(_: {||}) {
-  const {
-    isCommitFilterEnabled,
-    minCommitDuration,
-    setIsCommitFilterEnabled,
-    setMinCommitDuration,
-  } = useContext(ProfilerContext);
-
-  const { setIsModalShowing } = useContext(CommitFilterModalContext);
-  const dismissModal = useCallback(() => setIsModalShowing(false), [
-    setIsModalShowing,
-  ]);
-
-  const handleNumberChange = useCallback(
-    (event: SyntheticEvent<HTMLInputElement>) => {
-      const newValue = parseFloat(event.currentTarget.value);
-      setMinCommitDuration(
-        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
-      );
-    },
-    [setMinCommitDuration]
-  );
-
-  const handleEnabledChange = useCallback(
-    (event: SyntheticEvent<HTMLInputElement>) => {
-      const checked = event.currentTarget.checked;
-      setIsCommitFilterEnabled(checked);
-      if (checked) {
-        if (inputRef.current !== null) {
-          inputRef.current.focus();
-        }
-      }
-    },
-    [setIsCommitFilterEnabled]
-  );
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const modalRef = useRef<HTMLDivElement | null>(null);
-
-  useModalDismissSignal(modalRef, dismissModal);
-
-  useEffect(() => {
-    if (inputRef.current !== null) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  return (
-    <div className={styles.Background}>
-      <div className={styles.Modal} ref={modalRef}>
-        <label>
-          <input
-            checked={isCommitFilterEnabled}
-            onChange={handleEnabledChange}
-            type="checkbox"
-          />{' '}
-          Hide commits below
-        </label>{' '}
-        <input
-          className={styles.Input}
-          onChange={handleNumberChange}
-          ref={inputRef}
-          type="number"
-          value={minCommitDuration}
-        />{' '}
-        (ms)
-      </div>
-    </div>
-  );
-}
diff --git a/src/devtools/views/Profiler/CommitFilterModalContext.js b/src/devtools/views/Profiler/CommitFilterModalContext.js
deleted file mode 100644
index 37412b8fe72b..000000000000
--- a/src/devtools/views/Profiler/CommitFilterModalContext.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// @flow
-
-import React, { createContext, useMemo, useState } from 'react';
-
-type Context = {|
-  isModalShowing: boolean,
-  setIsModalShowing: (value: boolean) => void,
-|};
-
-const CommitFilterModalContext = createContext<Context>(((null: any): Context));
-CommitFilterModalContext.displayName = 'CommitFilterModalContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function CommitFilterModalContextController({ children }: Props) {
-  const [isModalShowing, setIsModalShowing] = useState(false);
-
-  const value = useMemo(
-    () => ({
-      isModalShowing,
-      setIsModalShowing,
-    }),
-    [isModalShowing]
-  );
-
-  return (
-    <CommitFilterModalContext.Provider value={value}>
-      {children}
-    </CommitFilterModalContext.Provider>
-  );
-}
-
-export { CommitFilterModalContext, CommitFilterModalContextController };
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/src/devtools/views/Profiler/NoCommitData.js
index f16cd9aa9659..32b2860fbcc6 100644
--- a/src/devtools/views/Profiler/NoCommitData.js
+++ b/src/devtools/views/Profiler/NoCommitData.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
 
 import styles from './NoCommitData.css';
 
@@ -12,7 +11,7 @@ export default function NoCommitData(_: {||}) {
         There is no data matching the current filter criteria.
       </div>
       <div className={styles.FilterMessage}>
-        Try adjusting the commit filter <ToggleCommitFilterModalButton />
+        Try adjusting the commit filter in Profiler settings.
       </div>
     </div>
   );
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 22d26a1cf6ad..f17546eba938 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -1,6 +1,7 @@
 .Profiler {
   width: 100%;
   height: 100%;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -57,7 +58,7 @@
 
 .Toolbar {
   height: 2.25rem;
-  padding: 0 0.5rem;
+  padding: 0 0.25rem;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 96f7f0559701..06e74b2f6f0c 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -1,14 +1,12 @@
 // @flow
 
 import React, { Fragment, useContext } from 'react';
-import { CommitFilterModalContextController } from './CommitFilterModalContext';
 import { ModalDialog } from '../ModalDialog';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
 import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
-import CommitFilterModal from './CommitFilterModal';
 import Interactions from './Interactions';
 import RootSelector from './RootSelector';
 import RecordToggle from './RecordToggle';
@@ -18,7 +16,9 @@ import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
 import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
-import ToggleCommitFilterModalButton from './ToggleCommitFilterModalButton';
+import SettingsModal from 'src/devtools/views/Settings/SettingsModal';
+import SettingsModalContextToggle from 'src/devtools/views/Settings/SettingsModalContextToggle';
+import { SettingsModalContextController } from 'src/devtools/views/Settings/SettingsModalContext';
 import portaledContent from '../portaledContent';
 
 import styles from './Profiler.css';
@@ -79,7 +79,7 @@ function Profiler(_: {||}) {
   }
 
   return (
-    <CommitFilterModalContextController>
+    <SettingsModalContextController>
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
@@ -97,7 +97,7 @@ function Profiler(_: {||}) {
             />
             <RootSelector />
             <div className={styles.Spacer} />
-            <ToggleCommitFilterModalButton />
+            <SettingsModalContextToggle />
             {didRecordCommits && (
               <Fragment>
                 <div className={styles.VRule} />
@@ -107,13 +107,13 @@ function Profiler(_: {||}) {
           </div>
           <div className={styles.Content}>
             {view}
-            <CommitFilterModal />
             <ModalDialog />
           </div>
         </div>
         <div className={styles.RightColumn}>{sidebar}</div>
+        <SettingsModal defaultTabID="profiler" />
       </div>
-    </CommitFilterModalContextController>
+    </SettingsModalContextController>
   );
 }
 
diff --git a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js b/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
deleted file mode 100644
index acc40d2a643a..000000000000
--- a/src/devtools/views/Profiler/ToggleCommitFilterModalButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// @flow
-
-import React, { useCallback, useContext } from 'react';
-import { CommitFilterModalContext } from './CommitFilterModalContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-
-export default function ToggleCommitFilterModalButton() {
-  const { setIsModalShowing } = useContext(CommitFilterModalContext);
-
-  const showFilterModal = useCallback(() => setIsModalShowing(true), [
-    setIsModalShowing,
-  ]);
-
-  return (
-    <Button onClick={showFilterModal} title="Filter commits by duration">
-      <ButtonIcon type="filter" />
-    </Button>
-  );
-}
diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js
new file mode 100644
index 000000000000..85d2c4eccb3d
--- /dev/null
+++ b/src/devtools/views/Settings/ComponentsSettings.js
@@ -0,0 +1,417 @@
+// @flow
+
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useSubscription } from '../hooks';
+import { StoreContext } from '../context';
+import Store from 'src/devtools/store';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import { shallowDiffers } from 'src/utils';
+import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
+  ComponentFilterLocation,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeEventTarget,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeSuspense,
+} from 'src/types';
+
+import styles from './SettingsShared.css';
+
+import type {
+  BooleanComponentFilter,
+  ComponentFilter,
+  ComponentFilterType,
+  ElementType,
+  ElementTypeComponentFilter,
+  RegExpComponentFilter,
+} from 'src/types';
+
+export default function ComponentsSettings(_: {||}) {
+  const store = useContext(StoreContext);
+
+  const collapseNodesByDefaultSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.collapseNodesByDefault,
+      subscribe: (callback: Function) => {
+        store.addListener('collapseNodesByDefault', callback);
+        return () => store.removeListener('collapseNodesByDefault', callback);
+      },
+    }),
+    [store]
+  );
+  const collapseNodesByDefault = useSubscription<boolean, Store>(
+    collapseNodesByDefaultSubscription
+  );
+
+  const updateCollapseNodesByDefault = useCallback(
+    ({ currentTarget }) => {
+      store.collapseNodesByDefault = currentTarget.checked;
+    },
+    [store]
+  );
+
+  const [componentFilters, setComponentFilters] = useState<
+    Array<ComponentFilter>
+  >(() => [...store.componentFilters]);
+
+  const addFilter = useCallback(() => {
+    setComponentFilters(componentFilters => {
+      return [
+        ...componentFilters,
+        {
+          type: ComponentFilterElementType,
+          value: ElementTypeHostComponent,
+          isEnabled: true,
+        },
+      ];
+    });
+  }, []);
+
+  const changeFilterType = useCallback(
+    (componentFilter: ComponentFilter, type: ComponentFilterType) => {
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          if (type === ComponentFilterElementType) {
+            cloned[index] = {
+              type: ComponentFilterElementType,
+              isEnabled: componentFilter.isEnabled,
+              value: ElementTypeHostComponent,
+            };
+          } else if (type === ComponentFilterDisplayName) {
+            cloned[index] = {
+              type: ComponentFilterDisplayName,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            };
+          } else if (type === ComponentFilterLocation) {
+            cloned[index] = {
+              type: ComponentFilterLocation,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            };
+          } else if (type === ComponentFilterHOC) {
+            cloned[index] = {
+              type: ComponentFilterHOC,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const updateFilterValueElementType = useCallback(
+    (componentFilter: ComponentFilter, value: ElementType) => {
+      if (componentFilter.type !== ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        if (componentFilter.type === ComponentFilterElementType) {
+          const index = componentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            cloned[index] = {
+              ...componentFilter,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const updateFilterValueRegExp = useCallback(
+    (componentFilter: ComponentFilter, value: string) => {
+      if (componentFilter.type === ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        if (
+          componentFilter.type === ComponentFilterDisplayName ||
+          componentFilter.type === ComponentFilterLocation
+        ) {
+          const index = componentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            let isValid = true;
+            try {
+              new RegExp(value);
+            } catch (error) {
+              isValid = false;
+            }
+            cloned[index] = {
+              ...componentFilter,
+              isValid,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  const removeFilter = useCallback((index: number) => {
+    setComponentFilters(componentFilters => {
+      const cloned: Array<ComponentFilter> = [...componentFilters];
+      cloned.splice(index, 1);
+      return cloned;
+    });
+  }, []);
+
+  const toggleFilterIsEnabled = useCallback(
+    (componentFilter: ComponentFilter, isEnabled: boolean) => {
+      setComponentFilters(componentFilters => {
+        const cloned: Array<ComponentFilter> = [...componentFilters];
+        const index = componentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          if (componentFilter.type === ComponentFilterElementType) {
+            cloned[index] = {
+              ...((cloned[index]: any): ElementTypeComponentFilter),
+              isEnabled,
+            };
+          } else if (
+            componentFilter.type === ComponentFilterDisplayName ||
+            componentFilter.type === ComponentFilterLocation
+          ) {
+            cloned[index] = {
+              ...((cloned[index]: any): RegExpComponentFilter),
+              isEnabled,
+            };
+          } else if (componentFilter.type === ComponentFilterHOC) {
+            cloned[index] = {
+              ...((cloned[index]: any): BooleanComponentFilter),
+              isEnabled,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    []
+  );
+
+  // Filter updates are expensive to apply (since they impact the entire tree).
+  // Only apply them on unmount, and only if they've actually changed.
+  const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);
+  useEffect(() => {
+    console.log('update componentFilters ref:', componentFilters);
+    componentFiltersRef.current = componentFilters;
+    return () => {};
+  }, [componentFilters]);
+  useEffect(
+    () => () => {
+      const prevComponentFilters = store.componentFilters;
+      const nextComponentFilters = componentFiltersRef.current;
+
+      let haveFiltersChanged =
+        prevComponentFilters.length !== nextComponentFilters.length;
+      if (!haveFiltersChanged) {
+        for (let i = 0; i < nextComponentFilters.length; i++) {
+          if (
+            shallowDiffers(prevComponentFilters[i], nextComponentFilters[i])
+          ) {
+            haveFiltersChanged = true;
+            break;
+          }
+        }
+      }
+
+      console.log('haveFiltersChanged?', haveFiltersChanged);
+      if (haveFiltersChanged) {
+        store.componentFilters = [...nextComponentFilters];
+      }
+    },
+    [store]
+  );
+
+  return (
+    <div className={styles.Settings}>
+      <label className={styles.Setting}>
+        <input
+          type="checkbox"
+          checked={collapseNodesByDefault}
+          onChange={updateCollapseNodesByDefault}
+        />{' '}
+        Collapse newly added components by default
+      </label>
+
+      <div className={styles.Header}>Hide components where...</div>
+
+      <table className={styles.Table}>
+        <tbody>
+          {componentFilters.length === 0 && (
+            <tr className={styles.TableRow}>
+              <td className={styles.NoFiltersCell}>
+                No filters have been added.
+              </td>
+            </tr>
+          )}
+          {componentFilters.map((componentFilter, index) => (
+            <tr className={styles.TableRow} key={index}>
+              <td className={styles.TableCell}>
+                <Toggle
+                  className={
+                    componentFilter.isValid !== false
+                      ? ''
+                      : styles.InvalidRegExp
+                  }
+                  isChecked={componentFilter.isEnabled}
+                  onChange={isEnabled =>
+                    toggleFilterIsEnabled(componentFilter, isEnabled)
+                  }
+                  title={
+                    componentFilter.isValid === false
+                      ? 'Filter invalid'
+                      : componentFilter.isEnabled
+                      ? 'Filter enabled'
+                      : 'Filter disabled'
+                  }
+                >
+                  <ToggleIcon
+                    isEnabled={componentFilter.isEnabled}
+                    isValid={
+                      componentFilter.isValid == null ||
+                      componentFilter.isValid === true
+                    }
+                  />
+                </Toggle>
+              </td>
+              <td className={styles.TableCell}>
+                <select
+                  className={styles.Select}
+                  value={componentFilter.type}
+                  onChange={({ currentTarget }) =>
+                    changeFilterType(
+                      componentFilter,
+                      ((parseInt(
+                        currentTarget.value,
+                        10
+                      ): any): ComponentFilterType)
+                    )
+                  }
+                >
+                  <option value={ComponentFilterLocation}>location</option>
+                  <option value={ComponentFilterDisplayName}>name</option>
+                  <option value={ComponentFilterElementType}>type</option>
+                  <option value={ComponentFilterHOC}>hoc</option>
+                </select>
+              </td>
+              <td className={styles.TableCell}>
+                {componentFilter.type === ComponentFilterElementType &&
+                  'equals'}
+                {(componentFilter.type === ComponentFilterLocation ||
+                  componentFilter.type === ComponentFilterDisplayName) &&
+                  'matches'}
+              </td>
+              <td className={styles.TableCell}>
+                {componentFilter.type === ComponentFilterElementType && (
+                  <select
+                    className={styles.Select}
+                    value={componentFilter.value}
+                    onChange={({ currentTarget }) =>
+                      updateFilterValueElementType(
+                        componentFilter,
+                        ((parseInt(currentTarget.value, 10): any): ElementType)
+                      )
+                    }
+                  >
+                    <option value={ElementTypeClass}>class</option>
+                    <option value={ElementTypeContext}>context</option>
+                    <option value={ElementTypeEventTarget}>event</option>
+                    <option value={ElementTypeFunction}>function</option>
+                    <option value={ElementTypeForwardRef}>forward ref</option>
+                    <option value={ElementTypeHostComponent}>
+                      host (e.g. &lt;div&gt;)
+                    </option>
+                    <option value={ElementTypeMemo}>memo</option>
+                    <option value={ElementTypeOtherOrUnknown}>other</option>
+                    <option value={ElementTypeProfiler}>profiler</option>
+                    <option value={ElementTypeSuspense}>suspense</option>
+                  </select>
+                )}
+                {(componentFilter.type === ComponentFilterLocation ||
+                  componentFilter.type === ComponentFilterDisplayName) && (
+                  <input
+                    className={styles.Input}
+                    type="text"
+                    placeholder="Regular expression"
+                    onChange={({ currentTarget }) =>
+                      updateFilterValueRegExp(
+                        componentFilter,
+                        currentTarget.value
+                      )
+                    }
+                    value={componentFilter.value}
+                  />
+                )}
+              </td>
+              <td className={styles.TableCell}>
+                <Button
+                  onClick={() => removeFilter(index)}
+                  title="Delete filter"
+                >
+                  <ButtonIcon type="delete" />
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <Button onClick={addFilter}>
+        <ButtonIcon className={styles.ButtonIcon} type="add" />
+        Add filter
+      </Button>
+    </div>
+  );
+}
+
+type ToggleIconProps = {|
+  isEnabled: boolean,
+  isValid: boolean,
+|};
+function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {
+  let className;
+  if (isValid) {
+    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
+  } else {
+    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
+  }
+  return (
+    <div className={className}>
+      <div
+        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
+      />
+    </div>
+  );
+}
diff --git a/src/devtools/views/Settings/GeneralSettings.js b/src/devtools/views/Settings/GeneralSettings.js
new file mode 100644
index 000000000000..899eaafefaea
--- /dev/null
+++ b/src/devtools/views/Settings/GeneralSettings.js
@@ -0,0 +1,50 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import { SettingsContext } from './SettingsContext';
+
+import styles from './SettingsShared.css';
+
+export default function GeneralSettings(_: {||}) {
+  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
+    SettingsContext
+  );
+
+  const updateDisplayDensity = useCallback(
+    ({ currentTarget }) => {
+      setDisplayDensity(currentTarget.value);
+    },
+    [setDisplayDensity]
+  );
+  const updateTheme = useCallback(
+    ({ currentTarget }) => {
+      setTheme(currentTarget.value);
+    },
+    [setTheme]
+  );
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Setting}>
+        <div className={styles.RadioLabel}>Theme</div>
+        <select className={styles.Select} value={theme} onChange={updateTheme}>
+          <option value="auto">Auto</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
+
+      <div className={styles.Setting}>
+        <div className={styles.RadioLabel}>Display density</div>
+        <select
+          className={styles.Select}
+          value={displayDensity}
+          onChange={updateDisplayDensity}
+        >
+          <option value="compact">Compact</option>
+          <option value="comfortable">Comfortable</option>
+        </select>
+      </div>
+    </div>
+  );
+}
diff --git a/src/devtools/views/Settings/ProfilerSettings.js b/src/devtools/views/Settings/ProfilerSettings.js
new file mode 100644
index 000000000000..a52597d2eb29
--- /dev/null
+++ b/src/devtools/views/Settings/ProfilerSettings.js
@@ -0,0 +1,144 @@
+// @flow
+
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+import { useSubscription } from '../hooks';
+import { StoreContext } from '../context';
+import { ProfilerContext } from 'src/devtools/views/Profiler/ProfilerContext';
+import Store from 'src/devtools/store';
+
+import styles from './SettingsShared.css';
+
+export default function ProfilerSettings(_: {||}) {
+  const {
+    isCommitFilterEnabled,
+    minCommitDuration,
+    setIsCommitFilterEnabled,
+    setMinCommitDuration,
+  } = useContext(ProfilerContext);
+  const store = useContext(StoreContext);
+
+  const captureScreenshotsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.captureScreenshots,
+      subscribe: (callback: Function) => {
+        store.addListener('captureScreenshots', callback);
+        return () => store.removeListener('captureScreenshots', callback);
+      },
+    }),
+    [store]
+  );
+  const captureScreenshots = useSubscription<boolean, Store>(
+    captureScreenshotsSubscription
+  );
+
+  const recordChangeDescriptionsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.recordChangeDescriptions,
+      subscribe: (callback: Function) => {
+        store.addListener('recordChangeDescriptions', callback);
+        return () => store.removeListener('recordChangeDescriptions', callback);
+      },
+    }),
+    [store]
+  );
+  const recordChangeDescriptions = useSubscription<boolean, Store>(
+    recordChangeDescriptionsSubscription
+  );
+
+  const updateCaptureScreenshotsWhileProfiling = useCallback(
+    ({ currentTarget }) => {
+      store.captureScreenshots = currentTarget.checked;
+    },
+    [store]
+  );
+  const updateRecordChangeDescriptions = useCallback(
+    ({ currentTarget }) => {
+      store.recordChangeDescriptions = currentTarget.checked;
+    },
+    [store]
+  );
+  const updateMinCommitDuration = useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const newValue = parseFloat(event.currentTarget.value);
+      setMinCommitDuration(
+        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
+      );
+    },
+    [setMinCommitDuration]
+  );
+  const updateIsCommitFilterEnabled = useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const checked = event.currentTarget.checked;
+      setIsCommitFilterEnabled(checked);
+      if (checked) {
+        if (minCommitDurationInputRef.current !== null) {
+          minCommitDurationInputRef.current.focus();
+        }
+      }
+    },
+    [setIsCommitFilterEnabled]
+  );
+
+  const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={recordChangeDescriptions}
+            onChange={updateRecordChangeDescriptions}
+          />{' '}
+          Record why each component rendered while profiling.
+        </label>
+      </div>
+
+      <div className={styles.Setting}>
+        <label>
+          <input
+            checked={isCommitFilterEnabled}
+            onChange={updateIsCommitFilterEnabled}
+            type="checkbox"
+          />{' '}
+          Hide commits below
+        </label>{' '}
+        <input
+          className={styles.Input}
+          onChange={updateMinCommitDuration}
+          ref={minCommitDurationInputRef}
+          type="number"
+          value={minCommitDuration}
+        />{' '}
+        (ms)
+      </div>
+
+      {store.supportsCaptureScreenshots && (
+        <Fragment>
+          <div className={styles.Setting}>
+            <label>
+              <input
+                type="checkbox"
+                checked={captureScreenshots}
+                onChange={updateCaptureScreenshotsWhileProfiling}
+              />{' '}
+              Capture screenshots while profiling
+            </label>
+          </div>
+          {captureScreenshots && (
+            <div className={styles.ScreenshotThrottling}>
+              Screenshots will be throttled in order to reduce the negative
+              impact on performance.
+            </div>
+          )}
+        </Fragment>
+      )}
+    </div>
+  );
+}
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
deleted file mode 100644
index 8f3d567346cc..000000000000
--- a/src/devtools/views/Settings/Settings.css
+++ /dev/null
@@ -1,86 +0,0 @@
-.Settings {
-  width: 100%;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  border-top: 1px solid var(--color-border);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-normal);
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-.Section {
-  width: 100%;
-  padding: 0.5rem 0;
-  border-top: 1px solid var(--color-border);
-}
-.Section:first-of-type {
-  padding-top: 0;
-  border-top: none;
-}
-
-.Header {
-  margin-bottom: 0.5rem;
-  font-size: var(--font-size-sans-large);
-}
-
-.OptionGroup {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-  margin: 0 1rem 0.5rem 0;
-}
-.OptionGroup:last-of-type {
-  margin-right: 0;
-}
-
-.OptionLabel {
-  margin-right: 0.5rem;
-  font-size: var(--font-size-sans-normal);
-}
-
-.RadioOption {
-  cursor: pointer;
-  padding: 0.5rem;
-  border: 1px solid var(--color-border);
-  border-right: none;
-}
-
-.RadioOption:hover {
-  background-color: var(--color-background-hover);
-}
-
-.RadioOption:first-of-type {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
-.RadioOption:last-of-type {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  border-right: 1px solid var(--color-border);
-}
-
-.CheckboxOption {
-  display: block;
-  padding: 0 0 0.5rem;
-}
-
-.ScreenshotThrottling {
-  display: inline-block;
-  background-color: var(--color-background-hover);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.HRule {
-  height: 1px;
-  background-color: var(--color-border);
-  width: 100%;
-  border: none;
-  margin: 0.5rem 0;
-}
diff --git a/src/devtools/views/Settings/Settings.js b/src/devtools/views/Settings/Settings.js
deleted file mode 100644
index 3e29c19d3bfa..000000000000
--- a/src/devtools/views/Settings/Settings.js
+++ /dev/null
@@ -1,203 +0,0 @@
-// @flow
-
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
-import { useSubscription } from '../hooks';
-import { StoreContext } from '../context';
-import { SettingsContext } from './SettingsContext';
-import Store from 'src/devtools/store';
-import portaledContent from '../portaledContent';
-
-import styles from './Settings.css';
-
-function Settings(_: {||}) {
-  const store = useContext(StoreContext);
-  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
-    SettingsContext
-  );
-
-  const captureScreenshotsSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.captureScreenshots,
-      subscribe: (callback: Function) => {
-        store.addListener('captureScreenshots', callback);
-        return () => store.removeListener('captureScreenshots', callback);
-      },
-    }),
-    [store]
-  );
-  const captureScreenshots = useSubscription<boolean, Store>(
-    captureScreenshotsSubscription
-  );
-
-  const collapseNodesByDefaultSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.collapseNodesByDefault,
-      subscribe: (callback: Function) => {
-        store.addListener('collapseNodesByDefault', callback);
-        return () => store.removeListener('collapseNodesByDefault', callback);
-      },
-    }),
-    [store]
-  );
-  const collapseNodesByDefault = useSubscription<boolean, Store>(
-    collapseNodesByDefaultSubscription
-  );
-
-  const recordChangeDescriptionsSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.recordChangeDescriptions,
-      subscribe: (callback: Function) => {
-        store.addListener('recordChangeDescriptions', callback);
-        return () => store.removeListener('recordChangeDescriptions', callback);
-      },
-    }),
-    [store]
-  );
-  const recordChangeDescriptions = useSubscription<boolean, Store>(
-    recordChangeDescriptionsSubscription
-  );
-
-  const updateDisplayDensity = useCallback(
-    ({ currentTarget }) => {
-      setDisplayDensity(currentTarget.value);
-    },
-    [setDisplayDensity]
-  );
-
-  const updateTheme = useCallback(
-    ({ currentTarget }) => {
-      setTheme(currentTarget.value);
-    },
-    [setTheme]
-  );
-
-  const updateCaptureScreenshotsWhileProfiling = useCallback(
-    ({ currentTarget }) => {
-      store.captureScreenshots = currentTarget.checked;
-    },
-    [store]
-  );
-  const updateCollapseNodesByDefault = useCallback(
-    ({ currentTarget }) => {
-      store.collapseNodesByDefault = currentTarget.checked;
-    },
-    [store]
-  );
-  const updateRecordChangeDescriptions = useCallback(
-    ({ currentTarget }) => {
-      store.recordChangeDescriptions = currentTarget.checked;
-    },
-    [store]
-  );
-
-  return (
-    <div className={styles.Settings}>
-      <div className={styles.Section}>
-        <div className={styles.Header}>Display preferences</div>
-        <div className={styles.OptionGroup}>
-          <div className={styles.OptionLabel}>Theme</div>
-          <label className={styles.RadioOption}>
-            <input
-              type="radio"
-              name="Settings-theme"
-              checked={theme === 'auto'}
-              value="auto"
-              onChange={updateTheme}
-            />{' '}
-            Auto
-          </label>
-          <label className={styles.RadioOption}>
-            <input
-              type="radio"
-              name="Settings-theme"
-              checked={theme === 'light'}
-              value="light"
-              onChange={updateTheme}
-            />{' '}
-            Light
-          </label>
-          <label className={styles.RadioOption}>
-            <input
-              type="radio"
-              name="Settings-theme"
-              checked={theme === 'dark'}
-              value="dark"
-              onChange={updateTheme}
-            />{' '}
-            Dark
-          </label>
-        </div>
-        <div className={styles.OptionGroup}>
-          <div className={styles.OptionLabel}>Display density</div>
-          <label className={styles.RadioOption}>
-            <input
-              type="radio"
-              name="Settings-displayDensity"
-              checked={displayDensity === 'compact'}
-              value="compact"
-              onChange={updateDisplayDensity}
-            />{' '}
-            Compact
-          </label>
-          <label className={styles.RadioOption}>
-            <input
-              type="radio"
-              name="Settings-displayDensity"
-              checked={displayDensity === 'comfortable'}
-              value="comfortable"
-              onChange={updateDisplayDensity}
-            />{' '}
-            Comfortable
-          </label>
-        </div>
-      </div>
-
-      <div className={styles.Section}>
-        <div className={styles.Header}>Components tree</div>
-
-        <label className={styles.CheckboxOption}>
-          <input
-            type="checkbox"
-            checked={collapseNodesByDefault}
-            onChange={updateCollapseNodesByDefault}
-          />{' '}
-          Collapse newly added components by default
-        </label>
-      </div>
-
-      <div className={styles.Section}>
-        <div className={styles.Header}>Profiler</div>
-
-        <label className={styles.CheckboxOption}>
-          <input
-            type="checkbox"
-            checked={recordChangeDescriptions}
-            onChange={updateRecordChangeDescriptions}
-          />{' '}
-          Record why each component rendered while profiling.
-        </label>
-
-        {store.supportsCaptureScreenshots && (
-          <Fragment>
-            <label className={styles.CheckboxOption}>
-              <input
-                type="checkbox"
-                checked={captureScreenshots}
-                onChange={updateCaptureScreenshotsWhileProfiling}
-              />{' '}
-              Capture screenshots while profiling
-            </label>
-            {captureScreenshots && (
-              <div className={styles.ScreenshotThrottling}>
-                Screenshots will be throttled in order to reduce the negative
-                impact on performance.
-              </div>
-            )}
-          </Fragment>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default portaledContent(Settings);
diff --git a/src/devtools/views/Settings/SettingsModal.css b/src/devtools/views/Settings/SettingsModal.css
new file mode 100644
index 000000000000..07346d56e37c
--- /dev/null
+++ b/src/devtools/views/Settings/SettingsModal.css
@@ -0,0 +1,43 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  background-color: var(--color-modal-background);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  font-size: var(--font-size-sans-normal);
+  padding: 1rem;
+}
+
+.Modal {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  max-height: 100%;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  overflow: auto;
+  width: 400px;
+  max-width: 100%;
+}
+
+.Spacer {
+  flex: 1;
+}
+
+.Tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--color-border);
+  padding-right: 0.25rem;
+  flex: 0 0 auto;
+}
+
+.Content {
+  padding: 0.5rem;
+  flex: 0 1 auto;
+  overflow: auto;
+}
diff --git a/src/devtools/views/Settings/SettingsModal.js b/src/devtools/views/Settings/SettingsModal.js
new file mode 100644
index 000000000000..4dd6bafa4ffb
--- /dev/null
+++ b/src/devtools/views/Settings/SettingsModal.js
@@ -0,0 +1,134 @@
+// @flow
+
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { SettingsModalContext } from './SettingsModalContext';
+import Store from 'src/devtools/store';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import TabBar from '../TabBar';
+import { StoreContext } from '../context';
+import { useModalDismissSignal, useSubscription } from '../hooks';
+import ComponentsSettings from './ComponentsSettings';
+import GeneralSettings from './GeneralSettings';
+import ProfilerSettings from './ProfilerSettings';
+
+import styles from './SettingsModal.css';
+
+type TabID = 'general' | 'components' | 'profiler';
+
+type Props = {|
+  defaultTabID: TabID,
+|};
+
+export default function SettingsModal({ defaultTabID = 'general' }: Props) {
+  const { isModalShowing, setIsModalShowing } = useContext(
+    SettingsModalContext
+  );
+  const store = useContext(StoreContext);
+  const { profilerStore } = store;
+
+  // Updating preferences while profiling is in progress could break things (e.g. filtering)
+  // Explicitly disallow it for now.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => profilerStore.isProfiling,
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
+      },
+    }),
+    [profilerStore]
+  );
+  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
+  if (isProfiling && isModalShowing) {
+    setIsModalShowing(false);
+  }
+
+  if (!isModalShowing) {
+    return null;
+  }
+
+  return <SettingsModalImpl defaultTabID={defaultTabID} />;
+}
+
+function SettingsModalImpl({ defaultTabID }: Props) {
+  const { setIsModalShowing } = useContext(SettingsModalContext);
+  const dismissModal = useCallback(() => setIsModalShowing(false), [
+    setIsModalShowing,
+  ]);
+
+  const [selectedTabID, selectTab] = useState<TabID>(defaultTabID);
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  useModalDismissSignal(modalRef, dismissModal);
+
+  useEffect(() => {
+    if (modalRef.current !== null) {
+      modalRef.current.focus();
+    }
+  }, [modalRef]);
+
+  let view = null;
+  switch (selectedTabID) {
+    case 'general':
+      view = <GeneralSettings />;
+      break;
+    case 'profiler':
+      view = <ProfilerSettings />;
+      break;
+    case 'components':
+      view = <ComponentsSettings />;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Modal} ref={modalRef}>
+        <div className={styles.Tabs}>
+          <TabBar
+            currentTab={selectedTabID}
+            id="Settings"
+            selectTab={selectTab}
+            size="small"
+            tabs={tabs}
+          />
+          <div className={styles.Spacer} />
+          <Button onClick={dismissModal} title="Close settings dialog">
+            <ButtonIcon type="close" />
+          </Button>
+        </div>
+        <div className={styles.Content}>{view}</div>
+      </div>
+    </div>
+  );
+}
+
+const tabs = [
+  {
+    id: 'general',
+    icon: 'settings',
+    label: 'General',
+    title: 'General preferences',
+  },
+  {
+    id: 'components',
+    icon: 'components',
+    label: 'Components',
+    title: 'Components preferences',
+  },
+  {
+    id: 'profiler',
+    icon: 'profiler',
+    label: 'Profiler',
+    title: 'Profiler preferences',
+  },
+];
diff --git a/src/devtools/views/Settings/SettingsModalContext.js b/src/devtools/views/Settings/SettingsModalContext.js
new file mode 100644
index 000000000000..1b214f37f639
--- /dev/null
+++ b/src/devtools/views/Settings/SettingsModalContext.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { createContext, useMemo, useState } from 'react';
+
+export type DisplayDensity = 'comfortable' | 'compact';
+export type Theme = 'auto' | 'light' | 'dark';
+
+type Context = {
+  isModalShowing: boolean,
+  setIsModalShowing: (value: boolean) => void,
+};
+
+const SettingsModalContext = createContext<Context>(((null: any): Context));
+SettingsModalContext.displayName = 'SettingsModalContext';
+
+function SettingsModalContextController({
+  children,
+}: {|
+  children: React$Node,
+|}) {
+  const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
+
+  const value = useMemo(() => ({ isModalShowing, setIsModalShowing }), [
+    isModalShowing,
+    setIsModalShowing,
+  ]);
+
+  return (
+    <SettingsModalContext.Provider value={value}>
+      {children}
+    </SettingsModalContext.Provider>
+  );
+}
+
+export { SettingsModalContext, SettingsModalContextController };
diff --git a/src/devtools/views/Settings/SettingsModalContextToggle.js b/src/devtools/views/Settings/SettingsModalContextToggle.js
new file mode 100644
index 000000000000..5124cdb168af
--- /dev/null
+++ b/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -0,0 +1,43 @@
+// @flow
+
+import React, { useCallback, useContext, useMemo } from 'react';
+import { SettingsModalContext } from './SettingsModalContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import { StoreContext } from '../context';
+import { useSubscription } from '../hooks';
+import Store from 'src/devtools/store';
+
+export default function SettingsModalContextToggle() {
+  const { setIsModalShowing } = useContext(SettingsModalContext);
+  const store = useContext(StoreContext);
+  const { profilerStore } = store;
+
+  const showFilterModal = useCallback(() => setIsModalShowing(true), [
+    setIsModalShowing,
+  ]);
+
+  // Updating preferences while profiling is in progress could break things (e.g. filtering)
+  // Explicitly disallow it for now.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => profilerStore.isProfiling,
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
+      },
+    }),
+    [profilerStore]
+  );
+  const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
+
+  return (
+    <Button
+      disabled={isProfiling}
+      onClick={showFilterModal}
+      title="View settings"
+    >
+      <ButtonIcon type="settings" />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Components/ComponentFiltersModal.css b/src/devtools/views/Settings/SettingsShared.css
similarity index 65%
rename from src/devtools/views/Components/ComponentFiltersModal.css
rename to src/devtools/views/Settings/SettingsShared.css
index 43107c0c92f6..f816d4346b69 100644
--- a/src/devtools/views/Components/ComponentFiltersModal.css
+++ b/src/devtools/views/Settings/SettingsShared.css
@@ -1,37 +1,61 @@
-.Background {
-  position: absolute;
-  width: 100%;
-  height: 100%;
+.Settings {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
-  justify-content: center;
-  padding: 1rem;
-  background-color: var(--color-modal-background);
-  overflow: auto;
+  justify-content: flex-start;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
 }
 
-.Modal {
-  position: relative;
-  z-index: 3;
-  min-width: 20rem;
-  max-width: 100%;
+.Setting {
+  margin-bottom: 0.5rem;
+}
+.Setting:last-of-type {
+  margin-bottom: 0;
+}
+
+.OptionGroup {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+  margin: 0 1rem 0.5rem 0;
+}
+.OptionGroup:last-of-type {
+  margin-right: 0;
+}
+
+.RadioLabel {
+  display: inline;
+  margin-right: 0.5rem;
+}
+
+.Select {
+}
+
+.CheckboxOption {
+  display: block;
+  padding: 0 0 0.5rem;
+}
+
+.ScreenshotThrottling {
   display: inline-block;
-  background-color: var(--color-background);
-  padding: 0.5rem;
-  border: 1px solid var(--color-border);
+  background-color: var(--color-background-hover);
+  padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
 
-.LeftRight {
-  display: flex;
-}
-.Left {
+.HRule {
+  height: 1px;
+  background-color: var(--color-border);
+  width: 100%;
+  border: none;
+  margin: 0.5rem 0;
 }
-.Right {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-top: 0.5rem;
 }
 
 .ButtonIcon {
@@ -62,19 +86,12 @@
   padding-right: 0;
 }
 
-.Select {
-}
-
 .Input {
   border: 1px solid var(--color-border);
   border-radius: 0.125rem;
   padding: 0.125rem;
 }
 
-.CancelButton {
-  margin-right: 0.25rem;
-}
-
 .InvalidRegExp,
 .InvalidRegExp:active,
 .InvalidRegExp:focus,
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index c1105c78d2e9..1218421eec8e 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -7,7 +7,6 @@
   cursor: pointer;
   border-top: 3px solid transparent;
   border-bottom: 3px solid transparent;
-  cursor: pointer;
   user-select: none;
   color: var(--color-text);
 }
@@ -30,9 +29,11 @@
 }
 
 .TabSizeLarge {
+  font-size: var(--font-size-sans-large);
   padding: 0.5rem 1rem;
 }
 .TabSizeSmall {
+  font-size: var(--font-size-sans-normal);
   padding: 0.25rem 0.5rem;
 }
 
@@ -76,7 +77,7 @@
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 525px) {
   .IconSizeLarge {
     margin-right: 0;
   }
diff --git a/src/utils.js b/src/utils.js
index 85d8556cb78c..96e3c86fae06 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -229,3 +229,19 @@ export function separateDisplayNameAndHOCs(
 
   return [displayName, hocDisplayNames];
 }
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+export function shallowDiffers(prev: Object, next: Object): boolean {
+  for (let attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+  for (let attribute in next) {
+    if (prev[attribute] !== next[attribute]) {
+      return true;
+    }
+  }
+  return false;
+}

From e2e598c8245169c8875dcfdc70cde2bfdb5e4074 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 10 Jun 2019 15:03:05 -0700
Subject: [PATCH 715/814] Remember last preferences tab via local storage

---
 src/devtools/views/Components/Components.js  |  2 +-
 src/devtools/views/Profiler/Profiler.js      |  2 +-
 src/devtools/views/Settings/SettingsModal.js | 25 ++++++++++----------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 2e22471929ed..997d051678c4 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -28,7 +28,7 @@ function Components(_: {||}) {
               </Suspense>
             </div>
             <ModalDialog />
-            <SettingsModal defaultTabID="components" />
+            <SettingsModal />
           </div>
         </InspectedElementContextController>
       </OwnersListContextController>
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 06e74b2f6f0c..efa729d2582d 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -111,7 +111,7 @@ function Profiler(_: {||}) {
           </div>
         </div>
         <div className={styles.RightColumn}>{sidebar}</div>
-        <SettingsModal defaultTabID="profiler" />
+        <SettingsModal />
       </div>
     </SettingsModalContextController>
   );
diff --git a/src/devtools/views/Settings/SettingsModal.js b/src/devtools/views/Settings/SettingsModal.js
index 4dd6bafa4ffb..d6618a6fed47 100644
--- a/src/devtools/views/Settings/SettingsModal.js
+++ b/src/devtools/views/Settings/SettingsModal.js
@@ -6,7 +6,6 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 import { SettingsModalContext } from './SettingsModalContext';
 import Store from 'src/devtools/store';
@@ -14,7 +13,11 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
 import { StoreContext } from '../context';
-import { useModalDismissSignal, useSubscription } from '../hooks';
+import {
+  useLocalStorage,
+  useModalDismissSignal,
+  useSubscription,
+} from '../hooks';
 import ComponentsSettings from './ComponentsSettings';
 import GeneralSettings from './GeneralSettings';
 import ProfilerSettings from './ProfilerSettings';
@@ -23,11 +26,7 @@ import styles from './SettingsModal.css';
 
 type TabID = 'general' | 'components' | 'profiler';
 
-type Props = {|
-  defaultTabID: TabID,
-|};
-
-export default function SettingsModal({ defaultTabID = 'general' }: Props) {
+export default function SettingsModal(_: {||}) {
   const { isModalShowing, setIsModalShowing } = useContext(
     SettingsModalContext
   );
@@ -55,16 +54,19 @@ export default function SettingsModal({ defaultTabID = 'general' }: Props) {
     return null;
   }
 
-  return <SettingsModalImpl defaultTabID={defaultTabID} />;
+  return <SettingsModalImpl />;
 }
 
-function SettingsModalImpl({ defaultTabID }: Props) {
+function SettingsModalImpl(_: {||}) {
   const { setIsModalShowing } = useContext(SettingsModalContext);
   const dismissModal = useCallback(() => setIsModalShowing(false), [
     setIsModalShowing,
   ]);
 
-  const [selectedTabID, selectTab] = useState<TabID>(defaultTabID);
+  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
+    'React::DevTools::selectedSettingsTabID',
+    'general'
+  );
 
   const modalRef = useRef<HTMLDivElement | null>(null);
   useModalDismissSignal(modalRef, dismissModal);
@@ -117,18 +119,15 @@ const tabs = [
     id: 'general',
     icon: 'settings',
     label: 'General',
-    title: 'General preferences',
   },
   {
     id: 'components',
     icon: 'components',
     label: 'Components',
-    title: 'Components preferences',
   },
   {
     id: 'profiler',
     icon: 'profiler',
     label: 'Profiler',
-    title: 'Profiler preferences',
   },
 ];

From 91e3f6cd4df1a167fb6e06b8e0632940386000bc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 10 Jun 2019 15:05:12 -0700
Subject: [PATCH 716/814] Removed console.log

---
 src/devtools/views/Settings/ComponentsSettings.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js
index 85d2c4eccb3d..78f55e18aa65 100644
--- a/src/devtools/views/Settings/ComponentsSettings.js
+++ b/src/devtools/views/Settings/ComponentsSettings.js
@@ -224,7 +224,6 @@ export default function ComponentsSettings(_: {||}) {
   // Only apply them on unmount, and only if they've actually changed.
   const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);
   useEffect(() => {
-    console.log('update componentFilters ref:', componentFilters);
     componentFiltersRef.current = componentFilters;
     return () => {};
   }, [componentFilters]);
@@ -246,7 +245,6 @@ export default function ComponentsSettings(_: {||}) {
         }
       }
 
-      console.log('haveFiltersChanged?', haveFiltersChanged);
       if (haveFiltersChanged) {
         store.componentFilters = [...nextComponentFilters];
       }

From dd748ef574b1d7c3993d87e91e7a9122bcb042bf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 10 Jun 2019 15:36:29 -0700
Subject: [PATCH 717/814] Moved logic to only send updated filters across
 Bridge to the Store (and added tests)

---
 src/__tests__/setupTests.js                   |  8 +++--
 src/__tests__/storeComponentFilters-test.js   | 33 +++++++++++++++++++
 src/devtools/store.js                         | 29 ++++++++++++++--
 .../views/Settings/ComponentsSettings.js      | 25 +++-----------
 4 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 2cd71ae731a9..18127c4d47ad 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -11,7 +11,10 @@ env.beforeEach(() => {
   const Bridge = require('src/bridge').default;
   const Store = require('src/devtools/store').default;
   const { installHook } = require('src/hook');
-  const { getDefaultComponentFilters } = require('src/utils');
+  const {
+    getDefaultComponentFilters,
+    saveComponentFilters,
+  } = require('src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
@@ -26,7 +29,8 @@ env.beforeEach(() => {
     originalConsoleError.apply(console, args);
   };
 
-  // Avoid "Invalid component filters" warning.
+  // Initialize filters to a known good state.
+  saveComponentFilters(getDefaultComponentFilters());
   global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
 
   installHook(global);
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 16b028abcb73..3b7cfa53010d 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -1,5 +1,6 @@
 // @flow
 
+import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('Store component filters', () => {
@@ -7,6 +8,7 @@ describe('Store component filters', () => {
   let ReactDOM;
   let TestUtils;
   let Types;
+  let bridge: Bridge;
   let store: Store;
   let utils;
 
@@ -18,6 +20,7 @@ describe('Store component filters', () => {
   };
 
   beforeEach(() => {
+    bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
     store.componentFilters = [];
@@ -187,4 +190,34 @@ describe('Store component filters', () => {
 
     expect(store).toMatchSnapshot('3: disable HOC filter');
   });
+
+  it('should not send a bridge update if the set of enabled filters has not changed', () => {
+    act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
+
+    bridge.addListener('updateComponentFilters', componentFilters => {
+      throw Error('Unexpected component update');
+    });
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(false),
+          utils.createHOCFilter(true),
+        ])
+    );
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createLocationFilter('abc', false),
+        ])
+    );
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),
+        ])
+    );
+  });
 });
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5e2e14d98395..76ef1544e8ff 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -14,6 +14,7 @@ import {
   getSavedComponentFilters,
   saveComponentFilters,
   separateDisplayNameAndHOCs,
+  shallowDiffers,
   utfDecodeString,
 } from '../utils';
 import { localStorageGetItem, localStorageSetItem } from '../storage';
@@ -242,14 +243,38 @@ export default class Store extends EventEmitter<{|
       throw Error('Cannot modify filter preferences while profiling');
     }
 
+    // Filter updates are expensive to apply (since they impact the entire tree).
+    // Let's determine if they've changed and avoid doing this work if they haven't.
+    const prevEnabledComponentFilters = this._componentFilters.filter(
+      filter => filter.isEnabled
+    );
+    const nextEnabledComponentFilters = value.filter(
+      filter => filter.isEnabled
+    );
+    let haveEnabledFiltersChanged =
+      prevEnabledComponentFilters.length !== nextEnabledComponentFilters.length;
+    if (!haveEnabledFiltersChanged) {
+      for (let i = 0; i < nextEnabledComponentFilters.length; i++) {
+        const prevFilter = prevEnabledComponentFilters[i];
+        const nextFilter = nextEnabledComponentFilters[i];
+        if (shallowDiffers(prevFilter, nextFilter)) {
+          haveEnabledFiltersChanged = true;
+          break;
+        }
+      }
+    }
+
     this._componentFilters = value;
 
     // Update persisted filter preferences stored in localStorage.
     saveComponentFilters(value);
 
     // Notify the renderer that filter prefernces have changed.
-    // This is an expensive opreation; it unmounts and remounts the entire tree.
-    this._bridge.send('updateComponentFilters', value);
+    // This is an expensive opreation; it unmounts and remounts the entire tree,
+    // so only do it if the set of enabled component filters has changed.
+    if (haveEnabledFiltersChanged) {
+      this._bridge.send('updateComponentFilters', value);
+    }
 
     this.emit('componentFilters');
   }
diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js
index 78f55e18aa65..575a5226bb18 100644
--- a/src/devtools/views/Settings/ComponentsSettings.js
+++ b/src/devtools/views/Settings/ComponentsSettings.js
@@ -14,7 +14,6 @@ import Store from 'src/devtools/store';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
-import { shallowDiffers } from 'src/utils';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
@@ -221,7 +220,9 @@ export default function ComponentsSettings(_: {||}) {
   );
 
   // Filter updates are expensive to apply (since they impact the entire tree).
-  // Only apply them on unmount, and only if they've actually changed.
+  // Only apply them on unmount.
+  // The Store will avoid doing any expensive work unless they've changed.
+  // We just want to batch the work in the event that they do change.
   const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);
   useEffect(() => {
     componentFiltersRef.current = componentFilters;
@@ -229,25 +230,7 @@ export default function ComponentsSettings(_: {||}) {
   }, [componentFilters]);
   useEffect(
     () => () => {
-      const prevComponentFilters = store.componentFilters;
-      const nextComponentFilters = componentFiltersRef.current;
-
-      let haveFiltersChanged =
-        prevComponentFilters.length !== nextComponentFilters.length;
-      if (!haveFiltersChanged) {
-        for (let i = 0; i < nextComponentFilters.length; i++) {
-          if (
-            shallowDiffers(prevComponentFilters[i], nextComponentFilters[i])
-          ) {
-            haveFiltersChanged = true;
-            break;
-          }
-        }
-      }
-
-      if (haveFiltersChanged) {
-        store.componentFilters = [...nextComponentFilters];
-      }
+      store.componentFilters = [...componentFiltersRef.current];
     },
     [store]
   );

From 3bca6b28cd25a1eba03fb4f2fdf986f307cced13 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 10 Jun 2019 20:10:24 -0600
Subject: [PATCH 718/814] Make children selection lighter

---
 src/devtools/views/root.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 262900906b6a..30e70443ecf1 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -56,7 +56,7 @@
   --light-color-scroll-track: #fafafa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
-  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
+  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;

From b5850fe3044b20f00b9d5482b56989a2ad259955 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Wed, 12 Jun 2019 16:15:58 +0100
Subject: [PATCH 719/814] Ignore SSR mounts

---
 src/backend/legacy/renderer.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 5ea0a9fb95c9..d3e5b906c195 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -150,13 +150,17 @@ export function attach(
     // React 15
     oldReconcilerMethods = decorateMany(renderer.Reconciler, {
       mountComponent(fn, args) {
-        const [internalInstance, , , hostContainerInfo] = args;
+        const internalInstance = args[0];
+        const hostContainerInfo = args[3];
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }
+        if (hostContainerInfo._topLevelWrapper === undefined) {
+          // SSR
+          return fn.apply(this, args);
+        }
 
         const id = getID(internalInstance);
-
         // Push the operation.
         const parentID =
           parentIDStack.length > 0
@@ -189,7 +193,7 @@ export function attach(
         }
       },
       performUpdateIfNecessary(fn, args) {
-        const [internalInstance] = args;
+        const internalInstance = args[0];
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }
@@ -223,7 +227,7 @@ export function attach(
         }
       },
       receiveComponent(fn, args) {
-        const [internalInstance] = args;
+        const internalInstance = args[0];
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }
@@ -257,7 +261,7 @@ export function attach(
         }
       },
       unmountComponent(fn, args) {
-        const [internalInstance] = args;
+        const internalInstance = args[0];
         if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
           return fn.apply(this, args);
         }

From f352fe2625bc91e65f563def0b351dd5d915c11c Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Wed, 12 Jun 2019 16:38:35 +0100
Subject: [PATCH 720/814] Maintain rootID for lazily crawled trees

---
 src/backend/legacy/renderer.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index d3e5b906c195..517d903e332e 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -370,16 +370,21 @@ export function attach(
     idToInternalInstanceMap.delete(id);
   }
 
-  function crawlAndRecordInitialMounts(id: number, parentID: number) {
+  function crawlAndRecordInitialMounts(
+    id: number,
+    parentID: number,
+    rootID: number
+  ) {
     const internalInstance = idToInternalInstanceMap.get(id);
 
     if (__DEBUG__) {
       console.group('crawlAndRecordInitialMounts() id:', id);
     }
 
+    internalInstanceToRootIDMap.set(internalInstance, rootID);
     recordMount(internalInstance, id, parentID);
     getChildren(internalInstance).forEach(child =>
-      crawlAndRecordInitialMounts(getID(child), id)
+      crawlAndRecordInitialMounts(getID(child), id, rootID)
     );
 
     if (__DEBUG__) {
@@ -397,7 +402,7 @@ export function attach(
     for (let key in roots) {
       const internalInstance = roots[key];
       const id = getID(internalInstance);
-      crawlAndRecordInitialMounts(id, 0);
+      crawlAndRecordInitialMounts(id, 0, id);
       flushPendingEvents(id);
     }
   }

From 3137553f6d843e1902029985c16ca3002831a85e Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Wed, 12 Jun 2019 16:50:15 +0100
Subject: [PATCH 721/814] State and context are on the public instance

---
 src/backend/legacy/renderer.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 517d903e332e..2ab7f56552b7 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -560,8 +560,12 @@ export function attach(
           }
         }
       }
-      context = internalInstance.context || null;
-      state = internalInstance.state || null;
+
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        context = publicInstance.context || null;
+        state = publicInstance.state || null;
+      }
     }
 
     return {
@@ -696,16 +700,22 @@ export function attach(
   function setInState(id: number, path: Array<string | number>, value: any) {
     const internalInstance = idToInternalInstanceMap.get(id);
     if (internalInstance != null) {
-      setIn(internalInstance.state, path, value);
-      internalInstance.forceUpdate();
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        setIn(publicInstance.state, path, value);
+        forceUpdate(publicInstance);
+      }
     }
   }
 
   function setInContext(id: number, path: Array<string | number>, value: any) {
     const internalInstance = idToInternalInstanceMap.get(id);
     if (internalInstance != null) {
-      setIn(internalInstance.context, path, value);
-      forceUpdate(internalInstance);
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        setIn(publicInstance.context, path, value);
+        forceUpdate(publicInstance);
+      }
     }
   }
 

From fdf753021e4fa14561b2b3363ae19fd89e67fe51 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Wed, 12 Jun 2019 17:23:29 +0100
Subject: [PATCH 722/814] Distinguish functions and classes

---
 src/backend/legacy/getData.js  | 40 -------------------------
 src/backend/legacy/renderer.js | 55 ++++++++++++++++++++++++++--------
 2 files changed, 43 insertions(+), 52 deletions(-)
 delete mode 100644 src/backend/legacy/getData.js

diff --git a/src/backend/legacy/getData.js b/src/backend/legacy/getData.js
deleted file mode 100644
index d2fce307d3c0..000000000000
--- a/src/backend/legacy/getData.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @flow
-
-import {
-  ElementTypeClass,
-  ElementTypeHostComponent,
-  ElementTypeOtherOrUnknown,
-} from 'src/types';
-import { getDisplayName } from 'src/utils';
-
-import type { InternalInstance } from './renderer';
-import type { FiberData } from '../types';
-
-export default function getData(internalInstance: InternalInstance): FiberData {
-  let displayName = null;
-  let key = null;
-  let type = ElementTypeOtherOrUnknown;
-
-  // != used deliberately here to catch undefined and null
-  if (internalInstance._currentElement != null) {
-    if (internalInstance._currentElement.key) {
-      key = String(internalInstance._currentElement.key);
-    }
-
-    const elementType = internalInstance._currentElement.type;
-    if (typeof elementType === 'string') {
-      type = ElementTypeHostComponent;
-      displayName = elementType;
-    } else if (typeof elementType === 'function') {
-      // TODO: detect function components.
-      type = ElementTypeClass;
-      displayName = getDisplayName(elementType);
-    }
-  }
-
-  return {
-    displayName,
-    key,
-    type,
-  };
-}
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 2ab7f56552b7..9acb9fe3588b 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -9,13 +9,13 @@ import {
 } from 'src/types';
 import { getUID, utfEncodeString, printOperationsArray } from '../../utils';
 import { cleanForBridge, copyWithSet } from '../utils';
+import { getDisplayName } from 'src/utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
 } from '../../constants';
-import getData from './getData';
 import { decorateMany, forceUpdate, restoreMany } from './utils';
 
 import type {
@@ -32,12 +32,41 @@ import type { Owner, InspectedElement } from '../types';
 export type InternalInstance = Object;
 type LegacyRenderer = Object;
 
+function getData(internalInstance: InternalInstance) {
+  let displayName = null;
+  let key = null;
+
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    if (internalInstance._currentElement.key) {
+      key = String(internalInstance._currentElement.key);
+    }
+
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'string') {
+      displayName = elementType;
+    } else if (typeof elementType === 'function') {
+      displayName = getDisplayName(elementType);
+    }
+  }
+
+  return {
+    displayName,
+    key,
+  };
+}
+
 function getElementType(internalInstance: InternalInstance): ElementType {
   // != used deliberately here to catch undefined and null
   if (internalInstance._currentElement != null) {
     const elementType = internalInstance._currentElement.type;
     if (typeof elementType === 'function') {
-      return ElementTypeClass;
+      const publicInstance = internalInstance.getPublicInstance();
+      if (publicInstance !== null) {
+        return ElementTypeClass;
+      } else {
+        return ElementTypeFunction;
+      }
     } else if (typeof elementType === 'string') {
       return ElementTypeHostComponent;
     }
@@ -331,7 +360,8 @@ export function attach(
       pushOperation(0); // isProfilingSupported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
-      const { displayName, key, type } = getData(internalInstance);
+      const type = getElementType(internalInstance);
+      const { displayName, key } = getData(internalInstance);
 
       const ownerID =
         internalInstance._currentElement != null &&
@@ -532,7 +562,8 @@ export function attach(
 
   function inspectElementRaw(id: number): InspectedElement | null {
     const internalInstance = idToInternalInstanceMap.get(id);
-    const data = getData(internalInstance);
+    const displayName = getData(internalInstance).displayName;
+    const type = getElementType(internalInstance);
 
     let context = null;
     let owners = null;
@@ -550,11 +581,10 @@ export function attach(
         if (owner) {
           owners = [];
           while (owner != null) {
-            const ownerData = getData(owner);
             owners.push({
-              displayName: ownerData.displayName || 'Unknown',
+              displayName: getData(owner).displayName || 'Unknown',
               id: getID(owner),
-              type: ownerData.type,
+              type: getElementType(owner),
             });
             owner = owner.owner;
           }
@@ -581,12 +611,11 @@ export function attach(
       canToggleSuspense: false,
 
       // Can view component source location.
-      canViewSource:
-        data.type === ElementTypeClass || data.type === ElementTypeFunction,
+      canViewSource: type === ElementTypeClass || type === ElementTypeFunction,
 
-      displayName: data.displayName,
+      displayName: displayName,
 
-      type: data.type,
+      type: type,
 
       // New events system did not exist in legacy versions
       events: null,
@@ -627,7 +656,7 @@ export function attach(
       console.log('State:', result.state);
     }
     if (result.context !== null) {
-      console.log('State:', result.context);
+      console.log('Context:', result.context);
     }
     const nativeNode = findNativeNodeForInternalID(id);
     if (nativeNode !== null) {
@@ -668,6 +697,8 @@ export function attach(
 
     switch (getElementType(internalInstance)) {
       case ElementTypeClass:
+        global.$r = internalInstance._instance;
+        break;
       case ElementTypeFunction:
         const element = internalInstance._currentElement;
         if (element == null) {

From 4bfabbc32b545da69d6a7c80dca21ac9248494b2 Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Wed, 12 Jun 2019 17:56:25 +0100
Subject: [PATCH 723/814] Fix owner tree for legacy backend

---
 src/backend/legacy/renderer.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 9acb9fe3588b..272dbcc35ed3 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -586,7 +586,9 @@ export function attach(
               id: getID(owner),
               type: getElementType(owner),
             });
-            owner = owner.owner;
+            if (owner._currentElement) {
+              owner = owner._currentElement._owner;
+            }
           }
         }
       }

From f6ec82553de20e39576e5a46a70205c4ad4b0df6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 12 Jun 2019 15:13:51 -0700
Subject: [PATCH 724/814] Support toggling Suspense from within owners list

---
 .../__snapshots__/treeContext-test.js.snap    | 153 ++++++++++++++++++
 src/__tests__/treeContext-test.js             |  47 ++++++
 src/devtools/views/Components/TreeContext.js  |  20 ++-
 3 files changed, 216 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap
index d50b0a71722c..dd268147d963 100644
--- a/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ b/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -1,5 +1,158 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `
+[root]
+  ▾ <Parent>
+    ▾ <Suspense>
+      ▾ <Child>
+        ▾ <Suspense>
+            <Grandchild>
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 5,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 3,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [
+        6,
+      ],
+      "depth": 1,
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 4,
+      "type": 12,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 2,
+      "displayName": "Grandchild",
+      "hocDisplayNames": null,
+      "id": 6,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 5,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 4,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 3,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [
+        6,
+      ],
+      "depth": 1,
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 4,
+      "type": 12,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 2,
+      "displayName": "Grandchild",
+      "hocDisplayNames": null,
+      "id": 6,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 5,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 4,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 5,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 1,
+}
+`;
+
 exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `
 [root]
   ▾ <Parent>
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index f9e564dfec57..560c92e0d6f2 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -546,5 +546,52 @@ describe('TreeListContext', () => {
 
       done();
     });
+
+    // This tests ensures support for toggling Suspense boundaries outside of the active owners list.
+    it('should exit the owners list if an element outside the list is selected', () => {
+      const Grandchild = () => null;
+      const Child = () => (
+        <React.Suspense fallback="Loading">
+          <Grandchild />
+        </React.Suspense>
+      );
+      const Parent = () => (
+        <React.Suspense fallback="Loading">
+          <Child />
+        </React.Suspense>
+      );
+
+      const container = document.createElement('div');
+      utils.act(() => ReactDOM.render(<Parent />, container));
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
+      const childID = ((store.getElementIDAtIndex(2): any): number);
+      const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);
+      const grandchildID = ((store.getElementIDAtIndex(4): any): number);
+
+      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: child owners tree');
+
+      // Toggling a Suspense boundary inside of the flat list should update selected index
+      utils.act(() =>
+        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID })
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: child owners tree');
+
+      // Toggling a Suspense boundary outside of the flat list should exit owners list and update index
+      utils.act(() =>
+        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID })
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: main tree');
+    });
   });
 });
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 90c514b3e7e2..7b8f54805a7d 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -488,10 +488,22 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
     case 'SELECT_ELEMENT_BY_ID':
       if (ownerFlatTree !== null) {
         const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
-        selectedElementIndex =
-          payload === null
-            ? null
-            : ownerFlatTree.findIndex(element => element.id === payload);
+        if (payload === null) {
+          selectedElementIndex = null;
+        } else {
+          selectedElementIndex = ownerFlatTree.findIndex(
+            element => element.id === payload
+          );
+
+          // If the selected element is outside of the current owners list,
+          // exit the list and select the element in the main tree.
+          // This supports features like toggling Suspense.
+          if (selectedElementIndex !== null && selectedElementIndex < 0) {
+            ownerID = null;
+            ownerFlatTree = null;
+            selectedElementIndex = store.getIndexOfElementID(payload);
+          }
+        }
       }
       break;
     case 'SELECT_NEXT_ELEMENT_IN_TREE':

From cb10c3d6da2df078c2aa8bcc023cf44b9866671c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 12 Jun 2019 15:17:29 -0700
Subject: [PATCH 725/814] Lintfix

---
 src/__tests__/treeContext-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index 560c92e0d6f2..09940efe95dd 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -573,7 +573,6 @@ describe('TreeListContext', () => {
       const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
       const childID = ((store.getElementIDAtIndex(2): any): number);
       const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);
-      const grandchildID = ((store.getElementIDAtIndex(4): any): number);
 
       utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));
       utils.act(() => renderer.update(<Contexts />));

From 96f7646a1a0acf0555632ce00e57522b54b1c91e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 12 Jun 2019 15:43:15 -0700
Subject: [PATCH 726/814] Updated hydration logic to handle custom objects

---
 .../app/InspectableElements/CustomObject.js   | 18 ++++++
 .../InspectableElements.js                    |  2 +
 .../inspectedElementContext-test.js.snap      | 22 +++++++
 src/__tests__/inspectedElementContext-test.js | 59 +++++++++++++++++++
 src/hydration.js                              |  7 +--
 5 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 shells/dev/app/InspectableElements/CustomObject.js

diff --git a/shells/dev/app/InspectableElements/CustomObject.js b/shells/dev/app/InspectableElements/CustomObject.js
new file mode 100644
index 000000000000..f7cb376bf23c
--- /dev/null
+++ b/shells/dev/app/InspectableElements/CustomObject.js
@@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react';
+
+class Custom {
+  _number = 42;
+  get number() {
+    return this._number;
+  }
+}
+
+export default function CustomObject() {
+  return <ChildComponent customObject={new Custom()} />;
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index d22fc29f52d9..b148501ce11f 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -3,6 +3,7 @@
 import React, { Fragment } from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
+import CustomObject from './CustomObject';
 import NestedProps from './NestedProps';
 
 // TODO Add Immutable JS example
@@ -14,6 +15,7 @@ export default function InspectableElements() {
       <NestedProps />
       <Contexts />
       <CustomHooks />
+      <CustomObject />
     </Fragment>
   );
 }
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 6f353a16ee62..2587fed2b4b4 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -114,3 +114,25 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "state": null
 }
 `;
+
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: mount 1`] = `
+[root]
+    <Example>
+`;
+
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 2: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "data": {
+      "_number": 42,
+      "number": 42
+    }
+  },
+  "state": null
+}
+`;
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 939a4b3b0cd4..1a66f1dcd126 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -257,4 +257,63 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should support custom objects with enumerable properties and getters', async done => {
+    class CustomData {
+      _number = 42;
+      get number() {
+        return this._number;
+      }
+      set number(value) {
+        this._number = value;
+      }
+    }
+
+    const descriptor = ((Object.getOwnPropertyDescriptor(
+      CustomData.prototype,
+      'number'
+    ): any): PropertyDescriptor<number>);
+    descriptor.enumerable = true;
+    Object.defineProperty(CustomData.prototype, 'number', descriptor);
+
+    const Example = ({ data }) => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example data={new CustomData()} />, container)
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    const example = ((store.getElementAtIndex(0): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({ target }) {
+      const { read } = React.useContext(InspectedElementContext);
+      const inspectedElement = read(target.id);
+      expect(inspectedElement).toMatchSnapshot(
+        `2: Inspected element ${target.id}`
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={example.id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={example} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
 });
diff --git a/src/hydration.js b/src/hydration.js
index 48a83af0c695..e32e4936292e 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -194,12 +194,7 @@ export function dehydrate(
         },
       };
     case 'object':
-      if (
-        level > LEVEL_THRESHOLD ||
-        (data.constructor &&
-          typeof data.constructor === 'function' &&
-          data.constructor.name !== 'Object')
-      ) {
+      if (level > LEVEL_THRESHOLD) {
         return createDehydrated(type, data, cleaned, path);
       } else {
         const res = {};

From 9eb6d3465d2c3e0afc47153890063ef5d939e75e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 12 Jun 2019 18:56:39 -0700
Subject: [PATCH 727/814] Updated React version check to account for older
 (<15) versions

---
 src/backend/types.js |  3 ++
 src/hook.js          | 82 ++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/src/backend/types.js b/src/backend/types.js
index af2cdd29239e..b039d08e082e 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -116,6 +116,9 @@ export type ReactRenderer = {
 
   // Only injected by React v16.8+ in order to support hooks inspection.
   currentDispatcherRef?: {| current: null | Dispatcher |},
+
+  // <= 15
+  Mount?: any,
 };
 
 export type ChangeDescription = {|
diff --git a/src/hook.js b/src/hook.js
index 98c1794d359d..168aa3591a43 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -17,6 +17,7 @@ export function installHook(target: any): DevToolsHook | null {
   function detectReactBuildType(renderer) {
     try {
       if (typeof renderer.version === 'string') {
+        // React DOM Fiber (16+)
         if (renderer.bundleType > 0) {
           // This is not a production build.
           // We are currently only using 0 (PROD) and 1 (DEV)
@@ -27,15 +28,92 @@ export function installHook(target: any): DevToolsHook | null {
         // React 16 uses flat bundles. If we report the bundle as production
         // version, it means we also minified and envified it ourselves.
         return 'production';
-
         // Note: There is still a risk that the CommonJS entry point has not
         // been envified or uglified. In this case the user would have *both*
         // development and production bundle, but only the prod one would run.
         // This would be really bad. We have a separate check for this because
         // it happens *outside* of the renderer injection. See `checkDCE` below.
       }
-    } catch (err) {}
 
+      const toString = Function.prototype.toString;
+      if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
+        // React DOM Stack
+        const renderRootCode = toString.call(
+          renderer.Mount._renderNewRootComponent
+        );
+        // Filter out bad results (if that is even possible):
+        if (renderRootCode.indexOf('function') !== 0) {
+          // Hope for the best if we're not sure.
+          return 'production';
+        }
+        // Check for React DOM Stack < 15.1.0 in development.
+        // If it contains "storedMeasure" call, it's wrapped in ReactPerf (DEV only).
+        // This would be true even if it's minified, as method name still matches.
+        if (renderRootCode.indexOf('storedMeasure') !== -1) {
+          return 'development';
+        }
+        // For other versions (and configurations) it's not so easy.
+        // Let's quickly exclude proper production builds.
+        // If it contains a warning message, it's either a DEV build,
+        // or an PROD build without proper dead code elimination.
+        if (renderRootCode.indexOf('should be a pure function') !== -1) {
+          // Now how do we tell a DEV build from a bad PROD build?
+          // If we see NODE_ENV, we're going to assume this is a dev build
+          // because most likely it is referring to an empty shim.
+          if (renderRootCode.indexOf('NODE_ENV') !== -1) {
+            return 'development';
+          }
+          // If we see "development", we're dealing with an envified DEV build
+          // (such as the official React DEV UMD).
+          if (renderRootCode.indexOf('development') !== -1) {
+            return 'development';
+          }
+          // I've seen process.env.NODE_ENV !== 'production' being smartly
+          // replaced by `true` in DEV by Webpack. I don't know how that
+          // works but we can safely guard against it because `true` was
+          // never used in the function source since it was written.
+          if (renderRootCode.indexOf('true') !== -1) {
+            return 'development';
+          }
+          // By now either it is a production build that has not been minified,
+          // or (worse) this is a minified development build using non-standard
+          // environment (e.g. "staging"). We're going to look at whether
+          // the function argument name is mangled:
+          if (
+            // 0.13 to 15
+            renderRootCode.indexOf('nextElement') !== -1 ||
+            // 0.12
+            renderRootCode.indexOf('nextComponent') !== -1
+          ) {
+            // We can't be certain whether this is a development build or not,
+            // but it is definitely unminified.
+            return 'unminified';
+          } else {
+            // This is likely a minified development build.
+            return 'development';
+          }
+        }
+        // By now we know that it's envified and dead code elimination worked,
+        // but what if it's still not minified? (Is this even possible?)
+        // Let's check matches for the first argument name.
+        if (
+          // 0.13 to 15
+          renderRootCode.indexOf('nextElement') !== -1 ||
+          // 0.12
+          renderRootCode.indexOf('nextComponent') !== -1
+        ) {
+          return 'unminified';
+        }
+        // Seems like we're using the production version.
+        // However, the branch above is Stack-only so this is 15 or earlier.
+        return 'outdated';
+      }
+    } catch (err) {
+      // Weird environments may exist.
+      // This code needs a higher fault tolerance
+      // because it runs even with closed DevTools.
+      // TODO: should we catch errors in all injected code, and not just this part?
+    }
     return 'production';
   }
 

From 5e8678a0a9378dd3583b78e52b8d1117625c66b8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 13 Jun 2019 09:09:31 -0700
Subject: [PATCH 728/814] Don't send HTMLElements through the bridge when
 inspecting componetns

---
 src/devtools/views/utils.js | 17 +++++++++++------
 src/hydration.js            | 11 +++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 882a1a0ee22e..96b808ad7826 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -70,23 +70,28 @@ export function createRegExp(string: string): RegExp {
 }
 
 export function getMetaValueLabel(data: Object): string | null {
-  switch (data[meta.type]) {
+  const name = data[meta.name];
+  const type = data[meta.type];
+
+  switch (type) {
+    case 'html_element':
+      return name ? `<${name.toLowerCase()} />` : '';
     case 'react_element':
-      return `<${data[meta.name]} />`;
+      return `<${name} />`;
     case 'function':
-      return `${data[meta.name] || 'fn'}()`;
+      return `${name || 'fn'}()`;
     case 'object':
       return 'Object';
     case 'date':
     case 'symbol':
-      return data[meta.name];
+      return name;
     case 'iterator':
-      return `${data[meta.name]}(…)`;
+      return `${name}(…)`;
     case 'array_buffer':
     case 'data_view':
     case 'array':
     case 'typed_array':
-      return `${data[meta.name]}[${data[meta.meta].length}]`;
+      return `${name}[${data[meta.meta].length}]`;
     default:
       return null;
   }
diff --git a/src/hydration.js b/src/hydration.js
index e32e4936292e..fe1834ca94fa 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -50,6 +50,10 @@ function getPropType(data: Object): string | null {
     return 'react_element';
   }
 
+  if (data instanceof HTMLElement) {
+    return 'html_element';
+  }
+
   const type = typeof data;
   if (type === 'object') {
     if (Array.isArray(data)) {
@@ -132,6 +136,13 @@ export function dehydrate(
   const type = getPropType(data);
 
   switch (type) {
+    case 'html_element':
+      cleaned.push(path);
+      return {
+        name: data.tagName,
+        type: 'html_element',
+      };
+
     case 'function':
       cleaned.push(path);
       return {

From a15f77670845ee667c09a0a8b74339c565eb6af2 Mon Sep 17 00:00:00 2001
From: Justin Grant <justin@justingrant.net>
Date: Sat, 15 Jun 2019 09:24:37 -0700
Subject: [PATCH 729/814] fix: ensure when-rendered content is never hidden

---
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.css | 7 +++++++
 src/devtools/views/Profiler/SidebarSelectedFiberInfo.js  | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index a89175b622e9..00d85a54935a 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -10,6 +10,13 @@
 .Content {
   padding: 0.5rem;
   user-select: none;
+}
+
+.ContentShort {
+  overflow-y: visible;
+}
+
+.ContentMaybeLong {
   overflow-y: auto;
 }
 
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 839b95d2fde3..627851faeece 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -74,7 +74,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         profilerStore={profilerStore}
         rootID={((rootID: any): number)}
       />
-      <div className={styles.Content}>
+      <div className={`${styles.Content} ${styles.ContentMaybeLong}`}>
         {listItems.length > 0 && (
           <Fragment>
             <label className={styles.Label}>Rendered at</label>: {listItems}
@@ -116,7 +116,7 @@ function WhatChanged({
 
   if (changeDescription.isFirstMount) {
     return (
-      <div className={styles.Content}>
+      <div className={`${styles.Content} ${styles.ContentShort}`}>
         <label className={styles.Label}>Why did this render?</label>
         <div className={styles.WhatChangedItem}>
           This is the first time the component rendered.
@@ -199,7 +199,7 @@ function WhatChanged({
   }
 
   return (
-    <div className={styles.Content}>
+    <div className={`${styles.Content} ${styles.ContentShort}`}>
       <label className={styles.Label}>Why did this render?</label>
       {changes}
     </div>

From a6d3f30f95f7d5d3a5c637f878b2b2cdb3fbe65b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 16 Jun 2019 17:32:37 -0700
Subject: [PATCH 730/814] Initial support for hydration added to both renderer
 interfaces.

---
 .../dev/app/InspectableElements/Hydration.js  |  54 +++
 .../InspectableElements.js                    |   2 +
 .../inspectedElementContext-test.js.snap      | 279 ++++++++++--
 src/__tests__/inspectedElementContext-test.js | 420 ++++++++++++++++--
 .../__snapshots__/inspectElement-test.js.snap | 167 +++++++
 src/__tests__/legacy/inspectElement-test.js   | 233 ++++++++++
 src/backend/agent.js                          |  10 +-
 src/backend/legacy/renderer.js                |  61 ++-
 src/backend/renderer.js                       | 136 ++++--
 src/backend/types.js                          |  39 +-
 src/backend/utils.js                          |  26 +-
 src/bridge.js                                 |  11 +-
 src/devtools/views/Components/HooksTree.js    |   2 +-
 .../Components/InspectedElementContext.js     | 217 +++++----
 src/devtools/views/Components/KeyValue.css    |   4 +-
 src/devtools/views/Components/KeyValue.js     |   4 +
 src/devtools/views/Components/types.js        |   2 +-
 src/hydration.js                              | 109 +++--
 src/utils.js                                  |  27 ++
 19 files changed, 1564 insertions(+), 239 deletions(-)
 create mode 100644 shells/dev/app/InspectableElements/Hydration.js
 create mode 100644 src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
 create mode 100644 src/__tests__/legacy/inspectElement-test.js

diff --git a/shells/dev/app/InspectableElements/Hydration.js b/shells/dev/app/InspectableElements/Hydration.js
new file mode 100644
index 000000000000..04cdc50164ca
--- /dev/null
+++ b/shells/dev/app/InspectableElements/Hydration.js
@@ -0,0 +1,54 @@
+// @flow
+
+import React from 'react';
+
+const div = document.createElement('div');
+const exmapleFunction = () => {};
+const typedArray = new Uint8Array(3);
+typedArray[0] = 1;
+typedArray[1] = 2;
+typedArray[2] = 3;
+
+const arrayOfArrays = [
+  [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],
+  [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],
+  [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],
+];
+
+const objectOfObjects = {
+  foo: {
+    a: 1,
+    b: 2,
+    c: 3,
+  },
+  bar: {
+    e: 4,
+    f: 5,
+    g: 6,
+  },
+  baz: {
+    h: 7,
+    i: 8,
+    j: 9,
+  },
+};
+
+export default function Hydration() {
+  return (
+    <ChildComponent
+      html_element={div}
+      fn={exmapleFunction}
+      symbol={Symbol('symbol')}
+      react_element={<span />}
+      array_buffer={typedArray.buffer}
+      typed_array={typedArray}
+      date={new Date()}
+      array={arrayOfArrays}
+      object={objectOfObjects}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index b148501ce11f..6eadd15bc6cb 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';
+import Hydration from './Hydration';
 import NestedProps from './NestedProps';
 
 // TODO Add Immutable JS example
@@ -16,6 +17,7 @@ export default function InspectableElements() {
       <Contexts />
       <CustomHooks />
       <CustomObject />
+      <Hydration />
     </Fragment>
   );
 }
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 2587fed2b4b4..450ca5fe67b9 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -1,11 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InspectedElementContext should inspect the currently selected element: 1: mount 1`] = `
-[root]
-    <Example>
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {},
+      "c": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 1,
+        "b": {
+          "value": 1
+        }
+      },
+      "c": {}
+    }
+  },
+  "state": null
+}
 `;
 
-exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 1`] = `
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 1,
+        "b": {
+          "value": 1
+        }
+      },
+      "c": {
+        "value": 1,
+        "d": {
+          "value": 1,
+          "e": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 2,
+        "b": {
+          "value": 2
+        }
+      },
+      "c": {
+        "value": 2,
+        "d": {
+          "value": 2,
+          "e": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
 {
   "id": 2,
   "owners": null,
@@ -17,24 +107,104 @@ exports[`InspectedElementContext should inspect the currently selected element:
       "isStateEditable": true,
       "name": "State",
       "value": 1,
-      "subHooks": []
+      "subHooks": {}
     }
   ],
   "props": {
-    "foo": 1,
-    "bar": "abc"
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {}
+            }
+          ]
+        }
+      }
+    }
   },
   "state": null
 }
 `;
 
-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: mount 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Anonymous>
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
 `;
 
-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: initial render 1`] = `
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `
 {
   "id": 3,
   "owners": null,
@@ -46,18 +216,18 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
       "isStateEditable": true,
       "name": "State",
       "value": 0,
-      "subHooks": []
+      "subHooks": {}
     }
   ],
   "props": {
-    "foo": 1,
-    "bar": "abc"
+    "a": 1,
+    "b": "abc"
   },
   "state": null
 }
 `;
 
-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 3: updated state 1`] = `
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `
 {
   "id": 3,
   "owners": null,
@@ -69,23 +239,34 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
       "isStateEditable": true,
       "name": "State",
       "value": 0,
-      "subHooks": []
+      "subHooks": {}
     }
   ],
   "props": {
-    "foo": 2,
-    "bar": "def"
+    "a": 2,
+    "b": "def"
   },
   "state": null
 }
 `;
 
-exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
-[root]
-    <Example>
+exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {}
+    }
+  },
+  "state": null
+}
 `;
 
-exports[`InspectedElementContext should poll for updates for the currently selected element: 2: initial render 1`] = `
+exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `
 {
   "id": 2,
   "owners": null,
@@ -93,8 +274,29 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "events": null,
   "hooks": null,
   "props": {
-    "foo": 1,
-    "bar": "abc"
+    "nestedObject": {
+      "a": {
+        "value": 2,
+        "b": {
+          "value": 2
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "a": 1,
+    "b": "abc"
   },
   "state": null
 }
@@ -108,19 +310,34 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "events": null,
   "hooks": null,
   "props": {
-    "foo": 2,
-    "bar": "def"
+    "a": 2,
+    "b": "def"
   },
   "state": null
 }
 `;
 
-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: mount 1`] = `
-[root]
-    <Example>
+exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "html_element": {},
+    "fn": {},
+    "symbol": {},
+    "react_element": {},
+    "array_buffer": {},
+    "typed_array": {},
+    "date": {}
+  },
+  "state": null
+}
 `;
 
-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 2: Inspected element 2 1`] = `
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `
 {
   "id": 2,
   "owners": null,
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 1a66f1dcd126..64ddb50fb509 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { Element } from 'src/devtools/views/Components/types';
+import type { GetPath } from 'src/devtools/views/Components/InspectedElementContext';
 import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
@@ -11,24 +11,29 @@ describe('InspectedElementContext', () => {
   let TestRenderer: ReactTestRenderer;
   let bridge: Bridge;
   let store: Store;
+  let meta;
   let utils;
 
   let BridgeContext;
   let InspectedElementContext;
   let InspectedElementContextController;
   let StoreContext;
+  let TestUtils;
   let TreeContextController;
 
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    meta = require('src/hydration').meta;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
 
     React = require('react');
     ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('src/devtools/views/context').BridgeContext;
@@ -68,20 +73,17 @@ describe('InspectedElementContext', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example foo={1} bar="abc" />, container)
+      ReactDOM.render(<Example a={1} b="abc" />, container)
     );
-    expect(store).toMatchSnapshot('1: mount');
 
-    const example = ((store.getElementAtIndex(0): any): Element);
+    const id = ((store.getElementIDAtIndex(0): any): number);
 
     let didFinish = false;
 
     function Suspender({ target }) {
       const { read } = React.useContext(InspectedElementContext);
-      const inspectedElement = read(target.id);
-      expect(inspectedElement).toMatchSnapshot(
-        `2: Inspected element ${target.id}`
-      );
+      const inspectedElement = read(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
       return null;
     }
@@ -90,11 +92,11 @@ describe('InspectedElementContext', () => {
       () =>
         TestRenderer.create(
           <Contexts
-            defaultSelectedElementID={example.id}
+            defaultSelectedElementID={id}
             defaultSelectedElementIndex={0}
           >
             <React.Suspense fallback={null}>
-              <Suspender target={example} />
+              <Suspender target={id} />
             </React.Suspense>
           </Contexts>
         ),
@@ -110,18 +112,17 @@ describe('InspectedElementContext', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(
-      () => ReactDOM.render(<Example foo={1} bar="abc" />, container),
+      () => ReactDOM.render(<Example a={1} b="abc" />, container),
       false
     );
-    expect(store).toMatchSnapshot('1: mount');
 
-    const example = ((store.getElementAtIndex(0): any): Element);
+    const id = ((store.getElementIDAtIndex(0): any): number);
 
     let inspectedElement = null;
 
     function Suspender({ target }) {
       const { read } = React.useContext(InspectedElementContext);
-      inspectedElement = read(target.id);
+      inspectedElement = read(id);
       return null;
     }
 
@@ -129,20 +130,17 @@ describe('InspectedElementContext', () => {
 
     await utils.actAsync(() => {
       renderer = TestRenderer.create(
-        <Contexts
-          defaultSelectedElementID={example.id}
-          defaultSelectedElementIndex={0}
-        >
+        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={0}>
           <React.Suspense fallback={null}>
-            <Suspender target={example} />
+            <Suspender target={id} />
           </React.Suspense>
         </Contexts>
       );
     }, false);
-    expect(inspectedElement).toMatchSnapshot('2: initial render');
+    expect(inspectedElement).toMatchSnapshot('1: initial render');
 
     await utils.actAsync(
-      () => ReactDOM.render(<Example foo={2} bar="def" />, container),
+      () => ReactDOM.render(<Example a={2} b="def" />, container),
       false
     );
 
@@ -151,11 +149,11 @@ describe('InspectedElementContext', () => {
       () =>
         renderer.update(
           <Contexts
-            defaultSelectedElementID={example.id}
+            defaultSelectedElementID={id}
             defaultSelectedElementIndex={0}
           >
             <React.Suspense fallback={null}>
-              <Suspender target={example} />
+              <Suspender target={id} />
             </React.Suspense>
           </Contexts>
         ),
@@ -180,12 +178,11 @@ describe('InspectedElementContext', () => {
     await utils.actAsync(() =>
       ReactDOM.render(
         <Wrapper>
-          <Target foo={1} bar="abc" />
+          <Target a={1} b="abc" />
         </Wrapper>,
         container
       )
     );
-    expect(store).toMatchSnapshot('1: mount');
 
     const id = ((store.getElementIDAtIndex(1): any): number);
 
@@ -215,7 +212,7 @@ describe('InspectedElementContext', () => {
       false
     );
     expect(targetRenderCount).toBe(1);
-    expect(inspectedElement).toMatchSnapshot('2: initial render');
+    expect(inspectedElement).toMatchSnapshot('1: initial render');
 
     const initialInspectedElement = inspectedElement;
 
@@ -244,7 +241,7 @@ describe('InspectedElementContext', () => {
       () =>
         ReactDOM.render(
           <Wrapper>
-            <Target foo={2} bar="def" />
+            <Target a={2} b="def" />
           </Wrapper>,
           container
         ),
@@ -253,7 +250,86 @@ describe('InspectedElementContext', () => {
 
     // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
     expect(targetRenderCount).toBe(2);
-    expect(inspectedElement).toMatchSnapshot('3: updated state');
+    expect(inspectedElement).toMatchSnapshot('2: updated state');
+
+    done();
+  });
+
+  it('should support complex data types', async done => {
+    const Example = () => null;
+
+    const div = document.createElement('div');
+    const exmapleFunction = () => {};
+    const typedArray = new Uint8Array(3);
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          html_element={div}
+          fn={exmapleFunction}
+          symbol={Symbol('symbol')}
+          react_element={<span />}
+          array_buffer={typedArray.buffer}
+          typed_array={typedArray}
+          date={new Date()}
+        />,
+        container
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const { read } = React.useContext(InspectedElementContext);
+      inspectedElement = read(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+
+    const {
+      html_element,
+      fn,
+      symbol,
+      react_element,
+      array_buffer,
+      typed_array,
+      date,
+    } = (inspectedElement: any).props;
+    expect(html_element[meta.name]).toBe('DIV');
+    expect(html_element[meta.type]).toBe('html_element');
+    expect(fn[meta.name]).toBe('exmapleFunction');
+    expect(fn[meta.type]).toBe('function');
+    expect(symbol[meta.name]).toBe('Symbol(symbol)');
+    expect(symbol[meta.type]).toBe('symbol');
+    expect(react_element[meta.name]).toBe('span');
+    expect(react_element[meta.type]).toBe('react_element');
+    expect(array_buffer[meta.meta].length).toBe(3);
+    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
+    expect(array_buffer[meta.type]).toBe('array_buffer');
+    expect(typed_array[meta.meta].length).toBe(3);
+    expect(typed_array[meta.name]).toBe('Uint8Array');
+    expect(typed_array[meta.type]).toBe('typed_array');
+    expect(date[meta.type]).toBe('date');
 
     done();
   });
@@ -276,24 +352,21 @@ describe('InspectedElementContext', () => {
     descriptor.enumerable = true;
     Object.defineProperty(CustomData.prototype, 'number', descriptor);
 
-    const Example = ({ data }) => null;
+    const Example = () => null;
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
       ReactDOM.render(<Example data={new CustomData()} />, container)
     );
-    expect(store).toMatchSnapshot('1: mount');
 
-    const example = ((store.getElementAtIndex(0): any): Element);
+    const id = ((store.getElementIDAtIndex(0): any): number);
 
     let didFinish = false;
 
     function Suspender({ target }) {
       const { read } = React.useContext(InspectedElementContext);
-      const inspectedElement = read(target.id);
-      expect(inspectedElement).toMatchSnapshot(
-        `2: Inspected element ${target.id}`
-      );
+      const inspectedElement = read(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
       return null;
     }
@@ -302,11 +375,11 @@ describe('InspectedElementContext', () => {
       () =>
         TestRenderer.create(
           <Contexts
-            defaultSelectedElementID={example.id}
+            defaultSelectedElementID={id}
             defaultSelectedElementIndex={0}
           >
             <React.Suspense fallback={null}>
-              <Suspender target={example} />
+              <Suspender target={id} />
             </React.Suspense>
           </Contexts>
         ),
@@ -316,4 +389,277 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should not dehydrate nested values until explicitly requested', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        />,
+        container
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getPath: GetPath = ((null: any): GetPath);
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const context = React.useContext(InspectedElementContext);
+      getPath = context.getPath;
+      inspectedElement = context.read(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+    expect(getPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'a']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '3: Inspect props.nestedObject.a.b.c'
+    );
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '4: Inspect props.nestedObject.a.b.c.0.d'
+    );
+
+    done();
+  });
+
+  it('should include updates for nested values that were previously hydrated', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+            c: {
+              value: 1,
+              d: {
+                value: 1,
+                e: {
+                  value: 1,
+                },
+              },
+            },
+          }}
+        />,
+        container
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getPath: GetPath = ((null: any): GetPath);
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const context = React.useContext(InspectedElementContext);
+      getPath = context.getPath;
+      inspectedElement = context.read(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+    expect(getPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'a']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'c']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');
+
+    TestUtils.act(() => {
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 2,
+              b: {
+                value: 2,
+              },
+            },
+            c: {
+              value: 2,
+              d: {
+                value: 2,
+                e: {
+                  value: 2,
+                },
+              },
+            },
+          }}
+        />,
+        container
+      );
+    });
+
+    TestUtils.act(() => {
+      inspectedElement = null;
+      jest.runOnlyPendingTimers();
+      expect(inspectedElement).not.toBeNull();
+      expect(inspectedElement).toMatchSnapshot('4: update inspected element');
+    });
+
+    done();
+  });
+
+  it('should not tear if hydration is requested after an update', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+          }}
+        />,
+        container
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getPath: GetPath = ((null: any): GetPath);
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const context = React.useContext(InspectedElementContext);
+      getPath = context.getPath;
+      inspectedElement = context.read(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+    expect(getPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    TestUtils.act(() => {
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 2,
+              b: {
+                value: 2,
+              },
+            },
+          }}
+        />,
+        container
+      );
+    });
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['props', 'nestedObject', 'a']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    done();
+  });
 });
diff --git a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
new file mode 100644
index 000000000000..db3aec6f2988
--- /dev/null
+++ b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {}
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": {}
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {}
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "html_element": {},
+    "fn": {},
+    "symbol": {},
+    "react_element": {},
+    "array_buffer": {},
+    "typed_array": {},
+    "date": {}
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "data": {
+      "_number": 42,
+      "number": 42
+    }
+  },
+  "state": null
+},
+}
+`;
diff --git a/src/__tests__/legacy/inspectElement-test.js b/src/__tests__/legacy/inspectElement-test.js
new file mode 100644
index 000000000000..7e8eb91bc92f
--- /dev/null
+++ b/src/__tests__/legacy/inspectElement-test.js
@@ -0,0 +1,233 @@
+// @flow
+
+import type { InspectedElementPayload } from 'src/backend/types';
+import type { DehydratedData } from 'src/devtools/views/Components/types';
+import type Bridge from 'src/bridge';
+import type Store from 'src/devtools/store';
+
+describe('InspectedElementContext', () => {
+  let React;
+  let ReactDOM;
+  let hydrate;
+  let meta;
+  let bridge: Bridge;
+  let store: Store;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  function dehydrateHelper(
+    dehydratedData: DehydratedData | null
+  ): Object | null {
+    if (dehydratedData !== null) {
+      return hydrate(dehydratedData.data, dehydratedData.cleaned);
+    } else {
+      return null;
+    }
+  }
+
+  async function read(
+    id: number,
+    path?: Array<string | number>
+  ): Promise<Object> {
+    return new Promise((resolve, reject) => {
+      const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+      const onInspectedElement = (payload: InspectedElementPayload) => {
+        bridge.removeListener('inspectedElement', onInspectedElement);
+
+        if (payload.type === 'full-data' && payload.value !== null) {
+          payload.value.context = dehydrateHelper(payload.value.context);
+          payload.value.props = dehydrateHelper(payload.value.props);
+          payload.value.state = dehydrateHelper(payload.value.state);
+        }
+
+        resolve(payload);
+      };
+
+      bridge.addListener('inspectedElement', onInspectedElement);
+      bridge.send('inspectElement', { id, path, rendererID });
+
+      jest.runOnlyPendingTimers();
+    });
+  }
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+
+    hydrate = require('src/hydration').hydrate;
+    meta = require('src/hydration').meta;
+
+    // Redirect all React/ReactDOM requires to the v15 UMD.
+    // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
+    jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
+    jest.mock('react-dom', () =>
+      jest.requireActual('react-dom-15/dist/react-dom.js')
+    );
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should inspect the currently selected element', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div'))
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    done();
+  });
+
+  it('should support complex data types', async done => {
+    const Example = () => null;
+
+    const div = document.createElement('div');
+    const exmapleFunction = () => {};
+    const typedArray = new Uint8Array(3);
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          html_element={div}
+          fn={exmapleFunction}
+          symbol={Symbol('symbol')}
+          react_element={<span />}
+          array_buffer={typedArray.buffer}
+          typed_array={typedArray}
+          date={new Date()}
+        />,
+        document.createElement('div')
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const {
+      html_element,
+      fn,
+      symbol,
+      react_element,
+      array_buffer,
+      typed_array,
+      date,
+    } = inspectedElement.value.props;
+    expect(html_element[meta.name]).toBe('DIV');
+    expect(html_element[meta.type]).toBe('html_element');
+    expect(fn[meta.name]).toBe('exmapleFunction');
+    expect(fn[meta.type]).toBe('function');
+    expect(symbol[meta.name]).toBe('Symbol(symbol)');
+    expect(symbol[meta.type]).toBe('symbol');
+    expect(react_element[meta.name]).toBe('span');
+    expect(react_element[meta.type]).toBe('react_element');
+    expect(array_buffer[meta.meta].length).toBe(3);
+    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
+    expect(array_buffer[meta.type]).toBe('array_buffer');
+    expect(typed_array[meta.meta].length).toBe(3);
+    expect(typed_array[meta.name]).toBe('Uint8Array');
+    expect(typed_array[meta.type]).toBe('typed_array');
+    expect(date[meta.type]).toBe('date');
+
+    done();
+  });
+
+  it('should support custom objects with enumerable properties and getters', async done => {
+    class CustomData {
+      _number = 42;
+      get number() {
+        return this._number;
+      }
+      set number(value) {
+        this._number = value;
+      }
+    }
+
+    const descriptor = ((Object.getOwnPropertyDescriptor(
+      CustomData.prototype,
+      'number'
+    ): any): PropertyDescriptor<number>);
+    descriptor.enumerable = true;
+    Object.defineProperty(CustomData.prototype, 'number', descriptor);
+
+    const Example = ({ data }) => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example data={new CustomData()} />,
+        document.createElement('div')
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    done();
+  });
+
+  it('should not dehydrate nested values until explicitly requested', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        />,
+        document.createElement('div')
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = await read(id);
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a']);
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+    expect(inspectedElement).toMatchSnapshot(
+      '3: Inspect props.nestedObject.a.b.c'
+    );
+
+    inspectedElement = await read(id, [
+      'props',
+      'nestedObject',
+      'a',
+      'b',
+      'c',
+      0,
+      'd',
+    ]);
+    expect(inspectedElement).toMatchSnapshot(
+      '4: Inspect props.nestedObject.a.b.c.0.d'
+    );
+
+    done();
+  });
+});
diff --git a/src/backend/agent.js b/src/backend/agent.js
index d8dcc1586261..75ca51b2016c 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -42,6 +42,12 @@ type ElementAndRendererID = {|
   rendererID: number,
 |};
 
+type InspectElementParams = {|
+  id: number,
+  path?: Array<string | number>,
+  rendererID: number,
+|};
+
 type OverrideHookParams = {|
   id: number,
   hookID: number,
@@ -242,12 +248,12 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  inspectElement = ({ id, rendererID }: ElementAndRendererID) => {
+  inspectElement = ({ id, path, rendererID }: InspectElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      this._bridge.send('inspectedElement', renderer.inspectElement(id));
+      this._bridge.send('inspectedElement', renderer.inspectElement(id, path));
     }
   };
 
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 272dbcc35ed3..cc0cf4b1aaa1 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -21,6 +21,7 @@ import { decorateMany, forceUpdate, restoreMany } from './utils';
 import type {
   DevToolsHook,
   GetFiberIDForNative,
+  InspectedElementPayload,
   NativeType,
   PathFrame,
   PathMatch,
@@ -548,16 +549,58 @@ export function attach(
     return stringID;
   }
 
-  function inspectElement(id: number): InspectedElement | null {
-    let result = inspectElementRaw(id);
-    if (result === null) {
-      return null;
+  let currentlyInspectedElementID: number | null = null;
+  let currentlyInspectedPaths: Object = {};
+
+  function mergeInspectedPaths(path: Array<string | number>) {
+    let current = currentlyInspectedPaths;
+    path.forEach(key => {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key];
+    });
+  }
+
+  function inspectElement(
+    id: number,
+    path?: Array<string | number>
+  ): InspectedElementPayload {
+    if (currentlyInspectedElementID !== id) {
+      currentlyInspectedElementID = id;
+      currentlyInspectedPaths = {};
+    }
+
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement === null) {
+      return {
+        id,
+        type: 'not-found',
+      };
+    }
+
+    if (path != null) {
+      mergeInspectedPaths(path);
     }
-    // TODO Review sanitization approach for the below inspectable values.
-    result.context = cleanForBridge(result.context);
-    result.props = cleanForBridge(result.props);
-    result.state = cleanForBridge(result.state);
-    return result;
+
+    inspectedElement.context = cleanForBridge(
+      inspectedElement.context,
+      currentlyInspectedPaths['context']
+    );
+    inspectedElement.props = cleanForBridge(
+      inspectedElement.props,
+      currentlyInspectedPaths['props']
+    );
+    inspectedElement.state = cleanForBridge(
+      inspectedElement.state,
+      currentlyInspectedPaths['state']
+    );
+
+    return {
+      id,
+      type: 'full-data',
+      value: inspectedElement,
+    };
   }
 
   function inspectElementRaw(id: number): InspectedElement | null {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 79ed649c895b..75c76d7ae266 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -22,11 +22,13 @@ import {
 import {
   getDisplayName,
   getDefaultComponentFilters,
+  getInObject,
   getUID,
+  setInObject,
   utfEncodeString,
 } from 'src/utils';
 import { sessionStorageGetItem } from 'src/storage';
-import { cleanForBridge, copyWithSet, setInObject } from './utils';
+import { cleanForBridge, copyWithSet } from './utils';
 import {
   __DEBUG__,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
@@ -44,6 +46,7 @@ import type {
   DevToolsHook,
   Fiber,
   InspectedElement,
+  InspectedElementPayload,
   Owner,
   PathFrame,
   PathMatch,
@@ -1297,8 +1300,8 @@ export function attach(
     }
 
     if (
-      mostRecentlyInspectedElementID !== null &&
-      mostRecentlyInspectedElementID ===
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id ===
         getFiberID(getPrimaryFiber(nextFiber)) &&
       didFiberRender(prevFiber, nextFiber)
     ) {
@@ -2122,37 +2125,118 @@ export function attach(
     };
   }
 
-  let mostRecentlyInspectedElementID: number | null = null;
+  let mostRecentlyInspectedElement: InspectedElement | null = null;
   let hasElementUpdatedSinceLastInspected: boolean = false;
+  let currentlyInspectedPaths: Object = {};
 
-  function inspectElement(id: number): InspectedElement | number | null {
-    // If this element has not been updated since it was last inspected, we don't need to re-run it.
-    // Instead we can just return the ID to indicate that it has not changed.
-    if (
-      mostRecentlyInspectedElementID === id &&
+  function isMostRecentlyInspectedElementCurrent(id: number): boolean {
+    return (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id === id &&
       !hasElementUpdatedSinceLastInspected
-    ) {
-      return id;
-    }
+    );
+  }
 
-    mostRecentlyInspectedElementID = id;
-    hasElementUpdatedSinceLastInspected = false;
+  function mergeInspectedPaths(path: Array<string | number>) {
+    let current = currentlyInspectedPaths;
+    path.forEach(key => {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key];
+    });
+  }
 
-    const inspectedElement = inspectElementRaw(id);
-    if (inspectedElement === null) {
-      return null;
-    }
-    inspectedElement.context = cleanForBridge(inspectedElement.context);
-    inspectedElement.events = cleanForBridge(inspectedElement.events);
-    inspectedElement.hooks = cleanForBridge(inspectedElement.hooks);
-    inspectedElement.props = cleanForBridge(inspectedElement.props);
-    inspectedElement.state = cleanForBridge(inspectedElement.state);
+  function inspectElement(
+    id: number,
+    path?: Array<string | number>
+  ): InspectedElementPayload {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      if (path != null) {
+        mergeInspectedPaths(path);
+
+        // If this element has not been updated since it was last inspected,
+        // we can just return the subset of data in the newly-inspected path.
+        return {
+          id,
+          type: 'hydrated-path',
+          path,
+          value: cleanForBridge(
+            getInObject(
+              ((mostRecentlyInspectedElement: any): InspectedElement),
+              path
+            ),
+            mergeInspectedPaths,
+            path
+          ),
+        };
+      } else {
+        // If this element has not been updated since it was last inspected, we don't need to re-run it.
+        // Instead we can just return the ID to indicate that it has not changed.
+        return {
+          id,
+          type: 'no-change',
+        };
+      }
+    } else {
+      hasElementUpdatedSinceLastInspected = false;
+
+      if (
+        mostRecentlyInspectedElement === null ||
+        mostRecentlyInspectedElement.id !== id
+      ) {
+        currentlyInspectedPaths = {};
+      }
+
+      mostRecentlyInspectedElement = inspectElementRaw(id);
+      if (mostRecentlyInspectedElement === null) {
+        return {
+          id,
+          type: 'not-found',
+        };
+      }
 
-    return inspectedElement;
+      if (path != null) {
+        mergeInspectedPaths(path);
+      }
+
+      const cleanedInspectedElement = { ...mostRecentlyInspectedElement };
+
+      cleanedInspectedElement.context = cleanForBridge(
+        cleanedInspectedElement.context,
+        currentlyInspectedPaths.context
+      );
+      cleanedInspectedElement.events = cleanForBridge(
+        cleanedInspectedElement.events,
+        currentlyInspectedPaths.events
+      );
+      cleanedInspectedElement.hooks = cleanForBridge(
+        cleanedInspectedElement.hooks,
+        currentlyInspectedPaths.hooks
+      );
+      cleanedInspectedElement.props = cleanForBridge(
+        cleanedInspectedElement.props,
+        currentlyInspectedPaths.props
+      );
+      cleanedInspectedElement.state = cleanForBridge(
+        cleanedInspectedElement.state,
+        currentlyInspectedPaths.state
+      );
+
+      return {
+        id,
+        type: 'full-data',
+        value: cleanedInspectedElement,
+      };
+    }
   }
 
   function logElementToConsole(id) {
-    const result = inspectElementRaw(id);
+    const result = isMostRecentlyInspectedElementCurrent(id)
+      ? mostRecentlyInspectedElement
+      : inspectElementRaw(id);
     if (result === null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -2690,10 +2774,10 @@ export function attach(
 
   return {
     cleanup,
+    findNativeNodesForFiberID,
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getFiberIDForNative,
-    findNativeNodesForFiberID,
     getOwnersList,
     getPathForElement,
     getProfilingData,
diff --git a/src/backend/types.js b/src/backend/types.js
index b039d08e082e..b9e3a8521e29 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -215,6 +215,40 @@ export type InspectedElement = {|
   type: ElementType,
 |};
 
+export const InspectElementFullDataType = 'full-data';
+export const InspectElementNoChangeType = 'no-change';
+export const InspectElementNotFoundType = 'not-found';
+export const InspectElementHydratedPathType = 'hydrated-path';
+
+type InspectElementFullData = {|
+  id: number,
+  type: 'full-data',
+  value: InspectedElement,
+|};
+
+type InspectElementHydratedPath = {|
+  id: number,
+  type: 'hydrated-path',
+  path: Array<string | number>,
+  value: any,
+|};
+
+type InspectElementNoChange = {|
+  id: number,
+  type: 'no-change',
+|};
+
+type InspectElementNotFound = {|
+  id: number,
+  type: 'not-found',
+|};
+
+export type InspectedElementPayload =
+  | InspectElementFullData
+  | InspectElementHydratedPath
+  | InspectElementNoChange
+  | InspectElementNotFound;
+
 export type RendererInterface = {
   cleanup: () => void,
   findNativeNodesForFiberID: FindNativeNodesForFiberID,
@@ -226,7 +260,10 @@ export type RendererInterface = {
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
-  inspectElement: (id: number) => InspectedElement | number | null,
+  inspectElement: (
+    id: number,
+    path?: Array<string | number>
+  ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 7b6499ac23fb..18dc58c1f9e1 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -4,12 +4,16 @@ import { dehydrate } from '../hydration';
 
 import type { DehydratedData } from 'src/devtools/views/Components/types';
 
-export function cleanForBridge(data: Object | null): DehydratedData | null {
+export function cleanForBridge(
+  data: Object | null,
+  inspectedPaths?: Object = {},
+  path?: Array<string | number> = []
+): DehydratedData | null {
   if (data !== null) {
     const cleaned = [];
 
     return {
-      data: dehydrate(data, cleaned),
+      data: dehydrate(data, cleaned, path, inspectedPaths),
       cleaned,
     };
   } else {
@@ -32,21 +36,3 @@ export function copyWithSet(
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
 }
-
-export function setInObject(
-  object: Object,
-  path: Array<string | number>,
-  value: any
-) {
-  const last = path.pop();
-  if (object != null) {
-    const parent: Object = path.reduce(
-      // $FlowFixMe
-      (reduced, attribute) => reduced[attribute],
-      object
-    );
-    if (parent) {
-      parent[last] = value;
-    }
-  }
-}
diff --git a/src/bridge.js b/src/bridge.js
index c6c3f1b22351..1d08474e3983 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -4,7 +4,7 @@ import EventEmitter from 'events';
 
 import type { ComponentFilter, Wall } from './types';
 import type {
-  InspectedElement,
+  InspectedElementPayload,
   OwnersList,
   ProfilingDataBackend,
   RendererID,
@@ -43,6 +43,11 @@ type OverrideSuspense = {|
   forceFallback: boolean,
 |};
 
+type InspectElementParams = {|
+  ...ElementAndRendererID,
+  path?: Array<string | number>,
+|};
+
 export default class Bridge extends EventEmitter<{|
   captureScreenshot: [{| commitIndex: number, rootID: number |}],
   clearHighlightedElementInDOM: [],
@@ -51,8 +56,8 @@ export default class Bridge extends EventEmitter<{|
   getProfilingStatus: [],
   highlightElementInDOM: [HighlightElementInDOM],
   init: [],
-  inspectElement: [ElementAndRendererID],
-  inspectedElement: [InspectedElement | number | null],
+  inspectElement: [InspectElementParams],
+  inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   logElementToConsole: [ElementAndRendererID],
   operations: [Uint32Array],
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index eb42fbf9a08c..f8261adc2118 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -86,7 +86,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
 
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
-    // TODO: show UI to load its data.
+    // TODO (hydration) show UI to load its data.
     return (
       <div className={styles.Hook}>
         <div className={styles.NameValueRow}>
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 119cb47d9e0a..7e6021a686a4 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -8,13 +8,17 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { createResource } from '../../cache';
 import { BridgeContext, StoreContext } from '../context';
-import { hydrate } from 'src/hydration';
+import { hydrate, fillInPath } from 'src/hydration';
 import { TreeStateContext } from './TreeContext';
 import { separateDisplayNameAndHOCs } from 'src/utils';
 
-import type { InspectedElement as InspectedElementBackend } from 'src/backend/types';
+import type {
+  InspectedElement as InspectedElementBackend,
+  InspectedElementPayload,
+} from 'src/backend/types';
 import type {
   DehydratedData,
   Element,
@@ -22,8 +26,12 @@ import type {
 } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
 
+export type GetPath = (id: number, path: Array<string | number>) => void;
+export type Read = (id: number) => InspectedElementFrontend | null;
+
 type Context = {|
-  read(id: number): InspectedElementFrontend | null,
+  getPath: GetPath,
+  read: Read,
 |};
 
 const InspectedElementContext = createContext<Context>(((null: any): Context));
@@ -68,7 +76,15 @@ function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const read = useCallback(
+  const getPath = useCallback<GetPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      bridge.send('inspectElement', { id, path, rendererID });
+    },
+    [bridge, store]
+  );
+
+  const read = useCallback<Read>(
     (id: number) => {
       const element = store.getElementByID(id);
       if (element !== null) {
@@ -85,72 +101,117 @@ function InspectedElementContextController({ children }: Props) {
   // would itself be blocked by the same render that suspends (waiting for the data).
   const { selectedElementID } = useContext(TreeStateContext);
 
-  const [count, setCount] = useState<number>(0);
+  const [
+    currentlyInspectedElement,
+    setCurrentlyInspectedElement,
+  ] = useState<InspectedElementFrontend | null>(null);
 
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
-    const onInspectedElement = (
-      data: InspectedElementBackend | number | null
-    ) => {
-      // A null value means that the element no longer exists in the backend.
-      // If it's the same element that's currently selected, that selection will be removed once the Store updates.
-      // If it's not- then we can just ignore it anyway.
-      // Either way there is nothing we need to do in this case.
-      // A numeric value indicates that the element hasn't changed since we last requested its data,
-      // in which case we don't need to invalidate the cache and re-render anything in the DevTools.
-      if (data !== null && typeof data === 'object') {
-        const id = data.id;
-
-        const inspectedElement: InspectedElementFrontend = {
-          canEditFunctionProps: data.canEditFunctionProps,
-          canEditHooks: data.canEditHooks,
-          canToggleSuspense: data.canToggleSuspense,
-          canViewSource: data.canViewSource,
-          id: data.id,
-          source: data.source,
-          type: data.type,
-          owners:
-            data.owners === null
-              ? null
-              : data.owners.map(owner => {
-                  const [
-                    displayName,
-                    hocDisplayNames,
-                  ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
-                  return {
-                    ...owner,
-                    displayName,
-                    hocDisplayNames,
-                  };
-                }),
-          context: hydrateHelper(data.context),
-          events: hydrateHelper(data.events),
-          hooks: hydrateHelper(data.hooks),
-          props: hydrateHelper(data.props),
-          state: hydrateHelper(data.state),
-        };
-
-        const element = store.getElementByID(id);
-        if (element !== null) {
-          const request = inProgressRequests.get(element);
-          if (request != null) {
-            inProgressRequests.delete(element);
-            request.resolveFn(inspectedElement);
-          } else {
-            resource.write(element, inspectedElement);
-
-            // Schedule update with React if the curently-selected element has been invalidated.
-            if (id === selectedElementID) {
-              setCount(count => count + 1);
+    const onInspectedElement = (data: InspectedElementPayload) => {
+      const { id } = data;
+
+      let element;
+
+      switch (data.type) {
+        case 'no-change':
+        case 'not-found':
+          // No-op
+          break;
+        case 'hydrated-path':
+          // Merge new data into previous object and invalidate cache
+          element = store.getElementByID(id);
+          if (element !== null) {
+            if (currentlyInspectedElement != null) {
+              const value = hydrateHelper(data.value, data.path);
+              const inspectedElement = { ...currentlyInspectedElement };
+
+              fillInPath(inspectedElement, data.path, value);
+
+              resource.write(element, inspectedElement);
+
+              // Schedule update with React if the curently-selected element has been invalidated.
+              if (id === selectedElementID) {
+                setCurrentlyInspectedElement(inspectedElement);
+              }
+            }
+          }
+          break;
+        case 'full-data':
+          const {
+            canEditFunctionProps,
+            canEditHooks,
+            canToggleSuspense,
+            canViewSource,
+            source,
+            type,
+            owners,
+            context,
+            events,
+            hooks,
+            props,
+            state,
+          } = ((data.value: any): InspectedElementBackend);
+
+          const inspectedElement: InspectedElementFrontend = {
+            canEditFunctionProps,
+            canEditHooks,
+            canToggleSuspense,
+            canViewSource,
+            id,
+            source,
+            type,
+            owners:
+              owners === null
+                ? null
+                : owners.map(owner => {
+                    const [
+                      displayName,
+                      hocDisplayNames,
+                    ] = separateDisplayNameAndHOCs(
+                      owner.displayName,
+                      owner.type
+                    );
+                    return {
+                      ...owner,
+                      displayName,
+                      hocDisplayNames,
+                    };
+                  }),
+            context: hydrateHelper(context),
+            events: hydrateHelper(events),
+            hooks: hydrateHelper(hooks),
+            props: hydrateHelper(props),
+            state: hydrateHelper(state),
+          };
+
+          element = store.getElementByID(id);
+          if (element !== null) {
+            const request = inProgressRequests.get(element);
+            if (request != null) {
+              inProgressRequests.delete(element);
+              batchedUpdates(() => {
+                request.resolveFn(inspectedElement);
+                setCurrentlyInspectedElement(inspectedElement);
+              });
+            } else {
+              resource.write(element, inspectedElement);
+
+              // Schedule update with React if the curently-selected element has been invalidated.
+              if (id === selectedElementID) {
+                setCurrentlyInspectedElement(inspectedElement);
+              }
             }
           }
-        }
+          break;
+        default:
+          break;
       }
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
     return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, selectedElementID, store]);
+  }, [bridge, currentlyInspectedElement, selectedElementID, store]);
 
   // This effect handler polls for updates on the currently selected element.
   useEffect(() => {
@@ -175,16 +236,10 @@ function InspectedElementContextController({ children }: Props) {
     // Update the $r variable.
     bridge.send('selectElement', { id: selectedElementID, rendererID });
 
-    const onInspectedElement = (
-      data: InspectedElementBackend | number | null
-    ) => {
-      if (data !== null) {
-        // If this is the element we requested, wait a little bit and then ask for an update.
-        if (data === selectedElementID) {
-          timeoutID = setTimeout(sendRequest, 1000);
-        } else if (typeof data === 'object' && data.id === selectedElementID) {
-          timeoutID = setTimeout(sendRequest, 1000);
-        }
+    const onInspectedElement = ({ id }: InspectedElementPayload) => {
+      // If this is the element we requested, wait a little bit and then ask for another update.
+      if (id === selectedElementID) {
+        timeoutID = setTimeout(sendRequest, 1000);
       }
     };
 
@@ -200,10 +255,10 @@ function InspectedElementContextController({ children }: Props) {
   }, [bridge, selectedElementID, store]);
 
   const value = useMemo(
-    () => ({ read }),
-    // Count is used to invalidate the cache and schedule an update with React.
+    () => ({ getPath, read }),
+    // InspectedElement is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [count, read]
+    [currentlyInspectedElement, getPath, read]
   );
 
   return (
@@ -213,9 +268,21 @@ function InspectedElementContextController({ children }: Props) {
   );
 }
 
-function hydrateHelper(dehydratedData: DehydratedData | null): Object | null {
+function hydrateHelper(
+  dehydratedData: DehydratedData | null,
+  path?: Array<string | number>
+): Object | null {
   if (dehydratedData !== null) {
-    return hydrate(dehydratedData.data, dehydratedData.cleaned);
+    let { cleaned, data } = dehydratedData;
+
+    if (path) {
+      const { length } = path;
+      if (length > 0) {
+        cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));
+      }
+    }
+
+    return hydrate(data, cleaned);
   } else {
     return null;
   }
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 9fb868e90999..5ccbeb1e669b 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -21,7 +21,9 @@
 
 .Value {
   color: var(--color-attribute-value);
-  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .None {
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ca5504e7b16b..119a9a9bd5af 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -19,6 +19,9 @@ type KeyValueProps = {|
   value: any,
 |};
 
+// TODO (hydration) Don't display meta objects.
+// Add event listener to request a "read" instead.
+
 export default function KeyValue({
   depth,
   hidden,
@@ -78,6 +81,7 @@ export default function KeyValue({
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
+    // TODO (hydration) show UI to load its data?
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} hidden={hidden} style={style}>
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index a1c2a2b80cdb..6d88ce8fd8ac 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -83,6 +83,6 @@ export type InspectedElement = {|
 // TODO: Add profiling type
 
 export type DehydratedData = {|
-  cleaned: Array<Array<string>>,
+  cleaned: Array<Array<string | number>>,
   data: Object,
 |};
diff --git a/src/hydration.js b/src/hydration.js
index fe1834ca94fa..a586c8ea836c 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -16,7 +16,7 @@ import {
   StrictMode,
   Suspense,
 } from 'react-is';
-import { getDisplayName } from './utils';
+import { getDisplayName, getInObject, setInObject } from './utils';
 
 export const meta = {
   name: Symbol('name'),
@@ -29,14 +29,12 @@ export const meta = {
 // This threshold determines the depth at which the bridge "dehydrates" nested data.
 // Dehydration means that we don't serialize the data for e.g. postMessage or stringify,
 // unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
-// We tried reducing this value from 2 to 1 to improve performance:
-// https://github.com/facebook/react-devtools/issues/1200
-// But this caused problems with the Profiler's interaction tracing output.
-// Because React mutates Fibers, profiling data that is dehydrated for old commits–
-// will not be available later from within the Profiler.
-// This impacts props/state as well as Interactions.
-// https://github.com/facebook/react-devtools/issues/1262
-const LEVEL_THRESHOLD = 6;
+//
+// Reducing this threshold will improve the speed of initial component inspection,
+// but may decrease the responsiveness of expanding objects/arrays to inspect further.
+//
+// Note that reducing the threshold to below two effectively breaks the inspected hooks interface.
+const LEVEL_THRESHOLD = 2;
 
 /**
  * Get a enhanced/artificial type string based on the object instance
@@ -85,8 +83,8 @@ function getPropType(data: Object): string | null {
 function createDehydrated(
   type: string,
   data: Object,
-  cleaned: Array<Array<string>>,
-  path: Array<string>
+  cleaned: Array<Array<string | number>>,
+  path: Array<string | number>
 ): Object {
   const meta = {};
 
@@ -109,6 +107,20 @@ function createDehydrated(
   };
 }
 
+function isInspectedPath(
+  path: Array<string | number> = [],
+  inspectedPaths: Object
+): boolean {
+  let current = inspectedPaths;
+  for (let i = 0; i < path.length; i++) {
+    current = current[path[i]];
+    if (!current) {
+      return false;
+    }
+  }
+  return true;
+}
+
 /**
  * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
  * The paths of the stripped out objects are appended to the `cleaned` list.
@@ -129,8 +141,9 @@ function createDehydrated(
  */
 export function dehydrate(
   data: Object,
-  cleaned: Array<Array<string>>,
-  path?: Array<string> = [],
+  cleaned: Array<Array<string | number>>,
+  path: Array<string | number>,
+  inspectedPaths: Object,
   level?: number = 0
 ): string | Object {
   const type = getPropType(data);
@@ -185,11 +198,18 @@ export function dehydrate(
       };
 
     case 'array':
-      if (level > LEVEL_THRESHOLD) {
+      const arrayPathCheck = isInspectedPath(path, inspectedPaths);
+      if (level >= LEVEL_THRESHOLD && !arrayPathCheck) {
         return createDehydrated(type, data, cleaned, path);
       }
       return data.map((item, i) =>
-        dehydrate(item, cleaned, path.concat([i]), level + 1)
+        dehydrate(
+          item,
+          cleaned,
+          path.concat([i]),
+          inspectedPaths,
+          arrayPathCheck ? 1 : level + 1
+        )
       );
 
     case 'typed_array':
@@ -205,7 +225,8 @@ export function dehydrate(
         },
       };
     case 'object':
-      if (level > LEVEL_THRESHOLD) {
+      const objectPathCheck = isInspectedPath(path, inspectedPaths);
+      if (level >= LEVEL_THRESHOLD && !objectPathCheck) {
         return createDehydrated(type, data, cleaned, path);
       } else {
         const res = {};
@@ -214,7 +235,8 @@ export function dehydrate(
             data[name],
             cleaned,
             path.concat([name]),
-            level + 1
+            inspectedPaths,
+            objectPathCheck ? 1 : level + 1
           );
         }
         return res;
@@ -225,24 +247,47 @@ export function dehydrate(
   }
 }
 
-export function hydrate(data: Object, cleaned: Array<Array<string>>): Object {
-  cleaned.forEach((path: Array<string>) => {
-    const last = path.pop();
-    const reduced: Object = path.reduce(
-      (object: Object, attr: string) => (object ? object[attr] : (null: any)),
-      data
-    );
-    if (!reduced || !reduced[last]) {
+export function fillInPath(
+  object: Object,
+  path: Array<string | number>,
+  value: any
+) {
+  const length = path.length;
+  const parent = getInObject(object, path.slice(0, length - 1));
+  if (object != null) {
+    delete parent[meta.name];
+    delete parent[meta.type];
+    delete parent[meta.meta];
+    delete parent[meta.inspected];
+
+    setInObject(object, path, value);
+  }
+}
+
+export function hydrate(
+  object: Object,
+  cleaned: Array<Array<string | number>>
+): Object {
+  cleaned.forEach((path: Array<string | number>) => {
+    const length = path.length;
+    const last = path[length - 1];
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (!parent || !parent[last]) {
       return;
     }
-    const replace: { [key: Symbol]: boolean | string } = {};
-    replace[meta.name] = reduced[last].name;
-    replace[meta.type] = reduced[last].type;
-    replace[meta.meta] = reduced[last].meta;
-    replace[meta.inspected] = false;
-    reduced[last] = replace;
+
+    const value = parent[last];
+
+    // Replace the string keys with Symbols so they're non-enumerable.
+    const replaced: { [key: Symbol]: boolean | string } = {};
+    replaced[meta.inspected] = false;
+    replaced[meta.meta] = value.meta;
+    replaced[meta.name] = value.name;
+    replaced[meta.type] = value.type;
+
+    parent[last] = replaced;
   });
-  return data;
+  return object;
 }
 
 export function getDisplayNameForReactElement(
diff --git a/src/utils.js b/src/utils.js
index 96e3c86fae06..fe65aade77e9 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -245,3 +245,30 @@ export function shallowDiffers(prev: Object, next: Object): boolean {
   }
   return false;
 }
+
+export function getInObject(object: Object, path: Array<string | number>): any {
+  return path.reduce((reduced: Object, attr: string | number): any => {
+    if (typeof reduced === 'object' && reduced !== null) {
+      return reduced[attr];
+    } else if (Array.isArray(reduced)) {
+      return reduced[attr];
+    } else {
+      return null;
+    }
+  }, object);
+}
+
+export function setInObject(
+  object: Object,
+  path: Array<string | number>,
+  value: any
+) {
+  const length = path.length;
+  const last = path[length - 1];
+  if (object != null) {
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (parent) {
+      parent[last] = value;
+    }
+  }
+}

From 7a94ad4e8a071ebaf8adb329cb4939be07b8b269 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 17 Jun 2019 11:30:53 -0700
Subject: [PATCH 731/814] Added props/state/context inspection to KeyValue

---
 .../dev/app/InspectableElements/Hydration.js  |  2 +
 src/__tests__/inspectedElementContext-test.js | 10 +-
 src/__tests__/legacy/inspectElement-test.js   |  4 +-
 src/backend/renderer.js                       |  2 +-
 .../views/Components/ExpandCollapseToggle.js  |  8 +-
 .../views/Components/InspectedElementTree.js  |  6 +-
 src/devtools/views/Components/KeyValue.js     | 47 +++++++--
 .../views/Components/SelectedElement.js       | 33 ++++++-
 src/devtools/views/utils.js                   |  2 +-
 src/hydration.js                              | 99 +++++++++++--------
 10 files changed, 149 insertions(+), 64 deletions(-)

diff --git a/shells/dev/app/InspectableElements/Hydration.js b/shells/dev/app/InspectableElements/Hydration.js
index 04cdc50164ca..a51db3e2eb87 100644
--- a/shells/dev/app/InspectableElements/Hydration.js
+++ b/shells/dev/app/InspectableElements/Hydration.js
@@ -13,6 +13,7 @@ const arrayOfArrays = [
   [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],
   [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],
   [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],
+  [],
 ];
 
 const objectOfObjects = {
@@ -31,6 +32,7 @@ const objectOfObjects = {
     i: 8,
     j: 9,
   },
+  qux: {},
 };
 
 export default function Hydration() {
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 64ddb50fb509..c8ffcaeb4868 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -315,18 +315,24 @@ describe('InspectedElementContext', () => {
       typed_array,
       date,
     } = (inspectedElement: any).props;
+    expect(html_element[meta.inspectable]).toBe(false);
     expect(html_element[meta.name]).toBe('DIV');
     expect(html_element[meta.type]).toBe('html_element');
+    expect(fn[meta.inspectable]).toBe(false);
     expect(fn[meta.name]).toBe('exmapleFunction');
     expect(fn[meta.type]).toBe('function');
+    expect(symbol[meta.inspectable]).toBe(false);
     expect(symbol[meta.name]).toBe('Symbol(symbol)');
     expect(symbol[meta.type]).toBe('symbol');
+    expect(react_element[meta.inspectable]).toBe(false);
     expect(react_element[meta.name]).toBe('span');
     expect(react_element[meta.type]).toBe('react_element');
-    expect(array_buffer[meta.meta].length).toBe(3);
+    expect(array_buffer[meta.size]).toBe(3);
+    expect(array_buffer[meta.inspectable]).toBe(false);
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
     expect(array_buffer[meta.type]).toBe('array_buffer');
-    expect(typed_array[meta.meta].length).toBe(3);
+    expect(typed_array[meta.size]).toBe(3);
+    expect(typed_array[meta.inspectable]).toBe(false);
     expect(typed_array[meta.name]).toBe('Uint8Array');
     expect(typed_array[meta.type]).toBe('typed_array');
     expect(date[meta.type]).toBe('date');
diff --git a/src/__tests__/legacy/inspectElement-test.js b/src/__tests__/legacy/inspectElement-test.js
index 7e8eb91bc92f..49b15c6a44eb 100644
--- a/src/__tests__/legacy/inspectElement-test.js
+++ b/src/__tests__/legacy/inspectElement-test.js
@@ -132,10 +132,10 @@ describe('InspectedElementContext', () => {
     expect(symbol[meta.type]).toBe('symbol');
     expect(react_element[meta.name]).toBe('span');
     expect(react_element[meta.type]).toBe('react_element');
-    expect(array_buffer[meta.meta].length).toBe(3);
+    expect(array_buffer[meta.size]).toBe(3);
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
     expect(array_buffer[meta.type]).toBe('array_buffer');
-    expect(typed_array[meta.meta].length).toBe(3);
+    expect(typed_array[meta.size]).toBe(3);
     expect(typed_array[meta.name]).toBe('Uint8Array');
     expect(typed_array[meta.type]).toBe('typed_array');
     expect(date[meta.type]).toBe('date');
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 75c76d7ae266..4cd29d69f6f4 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2168,7 +2168,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path
             ),
-            mergeInspectedPaths,
+            currentlyInspectedPaths,
             path
           ),
         };
diff --git a/src/devtools/views/Components/ExpandCollapseToggle.js b/src/devtools/views/Components/ExpandCollapseToggle.js
index b5425c8129ea..61fdca7f33d2 100644
--- a/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 
@@ -15,14 +15,10 @@ export default function ExpandCollapseToggle({
   isOpen,
   setIsOpen,
 }: ExpandCollapseToggleProps) {
-  const handleClick = useCallback(() => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  }, [setIsOpen]);
-
   return (
     <Button
       className={styles.ExpandCollapseToggle}
-      onClick={handleClick}
+      onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
       title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
     >
       <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
diff --git a/src/devtools/views/Components/InspectedElementTree.js b/src/devtools/views/Components/InspectedElementTree.js
index aeab263fce69..5475b236c899 100644
--- a/src/devtools/views/Components/InspectedElementTree.js
+++ b/src/devtools/views/Components/InspectedElementTree.js
@@ -8,10 +8,13 @@ import KeyValue from './KeyValue';
 import { serializeDataForCopy } from '../utils';
 import styles from './InspectedElementTree.css';
 
+import type { InspectPath } from './SelectedElement';
+
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type Props = {|
   data: Object | null,
+  inspectPath?: InspectPath,
   label: string,
   overrideValueFn?: ?OverrideValueFn,
   showWhenEmpty?: boolean,
@@ -19,6 +22,7 @@ type Props = {|
 
 export default function InspectedElementTree({
   data,
+  inspectPath,
   label,
   overrideValueFn,
   showWhenEmpty = false,
@@ -32,7 +36,6 @@ export default function InspectedElementTree({
   if (isEmpty && !showWhenEmpty) {
     return null;
   } else {
-    // TODO Add click and key handlers for toggling element open/close state.
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.HeaderRow}>
@@ -49,6 +52,7 @@ export default function InspectedElementTree({
             <KeyValue
               key={name}
               depth={1}
+              inspectPath={inspectPath}
               name={name}
               overrideValueFn={overrideValueFn}
               path={[name]}
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 119a9a9bd5af..2bc78e7c91cd 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
@@ -8,11 +8,14 @@ import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
 
+import type { InspectPath } from './SelectedElement';
+
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type KeyValueProps = {|
   depth: number,
   hidden?: boolean,
+  inspectPath?: InspectPath,
   name: string,
   overrideValueFn?: ?OverrideValueFn,
   path?: Array<any>,
@@ -24,6 +27,7 @@ type KeyValueProps = {|
 
 export default function KeyValue({
   depth,
+  inspectPath,
   hidden,
   name,
   overrideValueFn,
@@ -31,11 +35,27 @@ export default function KeyValue({
   value,
 }: KeyValueProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const prevIsOpenRef = useRef(isOpen);
+
+  const isInspectable =
+    value !== null &&
+    typeof value === 'object' &&
+    value[meta.inspectable] &&
+    value[meta.size] !== 0;
+
+  useEffect(() => {
+    if (
+      isInspectable &&
+      isOpen &&
+      !prevIsOpenRef.current &&
+      typeof inspectPath === 'function'
+    ) {
+      inspectPath(path);
+    }
+    prevIsOpenRef.current = isOpen;
+  }, [inspectPath, isInspectable, isOpen, path]);
 
-  const toggleIsOpen = useCallback(
-    () => setIsOpen(prevIsOpen => !prevIsOpen),
-    []
-  );
+  const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
 
   const dataType = typeof value;
   const isSimpleType =
@@ -81,12 +101,19 @@ export default function KeyValue({
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
-    // TODO (hydration) show UI to load its data?
-    // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} hidden={hidden} style={style}>
-        <div className={styles.ExpandCollapseToggleSpacer} />
-        <span className={styles.Name}>{name}</span>
+        {isInspectable ? (
+          <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+        ) : (
+          <div className={styles.ExpandCollapseToggleSpacer} />
+        )}
+        <span
+          className={styles.Name}
+          onClick={isInspectable ? toggleIsOpen : undefined}
+        >
+          {name}
+        </span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
@@ -98,6 +125,7 @@ export default function KeyValue({
         <KeyValue
           key={index}
           depth={depth + 1}
+          inspectPath={inspectPath}
           hidden={hidden || !isOpen}
           name={index}
           overrideValueFn={overrideValueFn}
@@ -133,6 +161,7 @@ export default function KeyValue({
         <KeyValue
           key={name}
           depth={depth + 1}
+          inspectPath={inspectPath}
           hidden={hidden || !isOpen}
           name={name}
           overrideValueFn={overrideValueFn}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index e4250fbe0392..97cd2d20dbb2 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -25,6 +25,7 @@ import {
 
 import styles from './SelectedElement.css';
 
+import type { GetPath } from './InspectedElementContext';
 import type { Element, InspectedElement } from './types';
 import type { ElementType } from 'src/types';
 
@@ -38,7 +39,7 @@ export default function SelectedElement(_: Props) {
   const store = useContext(StoreContext);
   const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
 
-  const { read } = useContext(InspectedElementContext);
+  const { getPath, read } = useContext(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
@@ -200,7 +201,11 @@ export default function SelectedElement(_: Props) {
 
       {inspectedElement !== null && (
         <InspectedElementView
+          key={
+            inspectedElementID /* Ensure state resets between seleted Elements */
+          }
           element={element}
+          getPath={getPath}
           inspectedElement={inspectedElement}
         />
       )}
@@ -208,8 +213,11 @@ export default function SelectedElement(_: Props) {
   );
 }
 
+export type InspectPath = (path: Array<string | number>) => void;
+
 type InspectedElementViewProps = {|
   element: Element,
+  getPath: GetPath,
   inspectedElement: InspectedElement,
 |};
 
@@ -217,6 +225,7 @@ const IS_SUSPENDED = 'Suspended';
 
 function InspectedElementView({
   element,
+  getPath,
   inspectedElement,
 }: InspectedElementViewProps) {
   const { id, type } = element;
@@ -236,6 +245,25 @@ function InspectedElementView({
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const inspectContextPath = useCallback(
+    (path: Array<string | number>) => {
+      getPath(id, ['context', ...path]);
+    },
+    [getPath, id]
+  );
+  const inspectPropsPath = useCallback(
+    (path: Array<string | number>) => {
+      getPath(id, ['props', ...path]);
+    },
+    [getPath, id]
+  );
+  const inspectStatePath = useCallback(
+    (path: Array<string | number>) => {
+      getPath(id, ['state', ...path]);
+    },
+    [getPath, id]
+  );
+
   let overrideContextFn = null;
   let overridePropsFn = null;
   let overrideStateFn = null;
@@ -279,6 +307,7 @@ function InspectedElementView({
       <InspectedElementTree
         label="props"
         data={props}
+        inspectPath={inspectPropsPath}
         overrideValueFn={overridePropsFn}
         showWhenEmpty
       />
@@ -294,6 +323,7 @@ function InspectedElementView({
         <InspectedElementTree
           label="state"
           data={state}
+          inspectPath={inspectStatePath}
           overrideValueFn={overrideStateFn}
         />
       )}
@@ -301,6 +331,7 @@ function InspectedElementView({
       <InspectedElementTree
         label="context"
         data={context}
+        inspectPath={inspectContextPath}
         overrideValueFn={overrideContextFn}
       />
       {events !== null && events.length > 0 && <EventsTree events={events} />}
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 96b808ad7826..f5bf15371fb5 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -91,7 +91,7 @@ export function getMetaValueLabel(data: Object): string | null {
     case 'data_view':
     case 'array':
     case 'typed_array':
-      return `${name}[${data[meta.meta].length}]`;
+      return `${name}[${data[meta.size]}]`;
     default:
       return null;
   }
diff --git a/src/hydration.js b/src/hydration.js
index a586c8ea836c..9bde94aca34f 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -19,13 +19,22 @@ import {
 import { getDisplayName, getInObject, setInObject } from './utils';
 
 export const meta = {
+  inspectable: Symbol('inspectable'),
+  inspected: Symbol('inspected'),
   name: Symbol('name'),
+  readonly: Symbol('readonly'),
+  size: Symbol('size'),
   type: Symbol('type'),
-  inspected: Symbol('inspected'),
-  meta: Symbol('meta'),
-  proto: Symbol('proto'),
 };
 
+type Dehydrated = {|
+  inspectable: boolean,
+  name: string | null,
+  readonly?: boolean,
+  size?: number,
+  type: string,
+|};
+
 // This threshold determines the depth at which the bridge "dehydrates" nested data.
 // Dehydration means that we don't serialize the data for e.g. postMessage or stringify,
 // unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
@@ -82,29 +91,33 @@ function getPropType(data: Object): string | null {
  */
 function createDehydrated(
   type: string,
+  inspectable: boolean,
   data: Object,
   cleaned: Array<Array<string | number>>,
   path: Array<string | number>
-): Object {
-  const meta = {};
-
-  if (type === 'array' || type === 'typed_array') {
-    meta.length = data.length;
-  }
-  if (type === 'iterator' || type === 'typed_array') {
-    meta.readOnly = true;
-  }
-
+): Dehydrated {
   cleaned.push(path);
 
-  return {
+  const dehydrated: Dehydrated = {
+    inspectable,
     type,
-    meta,
     name:
       !data.constructor || data.constructor.name === 'Object'
         ? ''
         : data.constructor.name,
   };
+
+  if (type === 'array' || type === 'typed_array') {
+    dehydrated.size = data.length;
+  } else if (type === 'object') {
+    dehydrated.size = Object.keys(data).length;
+  }
+
+  if (type === 'iterator' || type === 'typed_array') {
+    dehydrated.readonly = true;
+  }
+
+  return dehydrated;
 }
 
 function isInspectedPath(
@@ -145,13 +158,14 @@ export function dehydrate(
   path: Array<string | number>,
   inspectedPaths: Object,
   level?: number = 0
-): string | Object {
+): string | Dehydrated | { [key: string]: string | Dehydrated } {
   const type = getPropType(data);
 
   switch (type) {
     case 'html_element':
       cleaned.push(path);
       return {
+        inspectable: false,
         name: data.tagName,
         type: 'html_element',
       };
@@ -159,6 +173,7 @@ export function dehydrate(
     case 'function':
       cleaned.push(path);
       return {
+        inspectable: false,
         name: data.name,
         type: 'function',
       };
@@ -171,8 +186,9 @@ export function dehydrate(
     case 'symbol':
       cleaned.push(path);
       return {
-        type: 'symbol',
+        inspectable: false,
         name: data.toString(),
+        type: 'symbol',
       };
 
     // React Elements aren't very inspector-friendly,
@@ -180,6 +196,7 @@ export function dehydrate(
     case 'react_element':
       cleaned.push(path);
       return {
+        inspectable: false,
         name: getDisplayNameForReactElement(data),
         type: 'react_element',
       };
@@ -189,18 +206,16 @@ export function dehydrate(
     case 'data_view':
       cleaned.push(path);
       return {
-        type,
+        inspectable: false,
         name: type === 'data_view' ? 'DataView' : 'ArrayBuffer',
-        meta: {
-          length: data.byteLength,
-          uninspectable: true,
-        },
+        size: data.byteLength,
+        type,
       };
 
     case 'array':
       const arrayPathCheck = isInspectedPath(path, inspectedPaths);
       if (level >= LEVEL_THRESHOLD && !arrayPathCheck) {
-        return createDehydrated(type, data, cleaned, path);
+        return createDehydrated(type, true, data, cleaned, path);
       }
       return data.map((item, i) =>
         dehydrate(
@@ -214,24 +229,24 @@ export function dehydrate(
 
     case 'typed_array':
     case 'iterator':
-      return createDehydrated(type, data, cleaned, path);
+      return createDehydrated(type, false, data, cleaned, path);
+
     case 'date':
       cleaned.push(path);
       return {
+        inspectable: false,
         name: data.toString(),
         type: 'date',
-        meta: {
-          uninspectable: true,
-        },
       };
+
     case 'object':
       const objectPathCheck = isInspectedPath(path, inspectedPaths);
       if (level >= LEVEL_THRESHOLD && !objectPathCheck) {
-        return createDehydrated(type, data, cleaned, path);
+        return createDehydrated(type, true, data, cleaned, path);
       } else {
-        const res = {};
+        const object = {};
         for (let name in data) {
-          res[name] = dehydrate(
+          object[name] = dehydrate(
             data[name],
             cleaned,
             path.concat([name]),
@@ -239,7 +254,7 @@ export function dehydrate(
             objectPathCheck ? 1 : level + 1
           );
         }
-        return res;
+        return object;
       }
 
     default:
@@ -252,16 +267,16 @@ export function fillInPath(
   path: Array<string | number>,
   value: any
 ) {
-  const length = path.length;
-  const parent = getInObject(object, path.slice(0, length - 1));
-  if (object != null) {
-    delete parent[meta.name];
-    delete parent[meta.type];
-    delete parent[meta.meta];
-    delete parent[meta.inspected];
-
-    setInObject(object, path, value);
+  const target = getInObject(object, path);
+  if (target != null) {
+    delete target[meta.inspectable];
+    delete target[meta.inspected];
+    delete target[meta.name];
+    delete target[meta.readonly];
+    delete target[meta.size];
+    delete target[meta.type];
   }
+  setInObject(object, path, value);
 }
 
 export function hydrate(
@@ -280,9 +295,11 @@ export function hydrate(
 
     // Replace the string keys with Symbols so they're non-enumerable.
     const replaced: { [key: Symbol]: boolean | string } = {};
+    replaced[meta.inspectable] = !!value.inspectable;
     replaced[meta.inspected] = false;
-    replaced[meta.meta] = value.meta;
     replaced[meta.name] = value.name;
+    replaced[meta.size] = value.size;
+    replaced[meta.readonly] = !!value.readonly;
     replaced[meta.type] = value.type;
 
     parent[last] = replaced;

From d3d8a5d8b1fa49a0f61c2596dd81232af9a28908 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 17 Jun 2019 14:30:34 -0700
Subject: [PATCH 732/814] Hooks hydrate/dehydrate

---
 .../dev/app/InspectableElements/Hydration.js  |  60 ++++++++-
 .../inspectedElementContext-test.js.snap      | 124 +++++++++++++++++-
 src/__tests__/inspectedElementContext-test.js |  30 ++++-
 src/backend/legacy/renderer.js                |  24 +++-
 src/backend/renderer.js                       |  35 ++++-
 src/backend/utils.js                          |   5 +-
 src/devtools/views/Components/HooksTree.js    |  78 ++++++++---
 src/devtools/views/Components/KeyValue.js     |   4 +-
 src/hydration.js                              |  24 +---
 9 files changed, 328 insertions(+), 56 deletions(-)

diff --git a/shells/dev/app/InspectableElements/Hydration.js b/shells/dev/app/InspectableElements/Hydration.js
index a51db3e2eb87..3fc354e869aa 100644
--- a/shells/dev/app/InspectableElements/Hydration.js
+++ b/shells/dev/app/InspectableElements/Hydration.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { useDebugValue, useState } from 'react';
 
 const div = document.createElement('div');
 const exmapleFunction = () => {};
@@ -35,6 +35,61 @@ const objectOfObjects = {
   qux: {},
 };
 
+function useOuterFoo() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  useState({
+    valueA: {
+      valueB: {
+        valueC: 'abc',
+      },
+    },
+  });
+  return useInnerFoo();
+}
+
+function useInnerFoo() {
+  const [value] = useState([[['a', 'b', 'c']]]);
+  return value;
+}
+
+function useOuterBar() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  return useInnerBar();
+}
+
+function useInnerBar() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  const [count] = useState(123);
+  return count;
+}
+
+function useOuterBaz() {
+  return useInnerBaz();
+}
+
+function useInnerBaz() {
+  const [count] = useState(123);
+  return count;
+}
+
 export default function Hydration() {
   return (
     <ChildComponent
@@ -52,5 +107,8 @@ export default function Hydration() {
 }
 
 function ChildComponent(props: any) {
+  useOuterFoo();
+  useOuterBar();
+  useOuterBaz();
   return null;
 }
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 450ca5fe67b9..421b1011dc37 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -107,7 +107,7 @@ exports[`InspectedElementContext should inspect the currently selected element:
       "isStateEditable": true,
       "name": "State",
       "value": 1,
-      "subHooks": {}
+      "subHooks": []
     }
   ],
   "props": {
@@ -124,7 +124,15 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "owners": null,
   "context": null,
   "events": null,
-  "hooks": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {},
+      "subHooks": []
+    }
+  ],
   "props": {
     "nestedObject": {
       "a": {}
@@ -140,7 +148,15 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "owners": null,
   "context": null,
   "events": null,
-  "hooks": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {},
+      "subHooks": []
+    }
+  ],
   "props": {
     "nestedObject": {
       "a": {
@@ -160,7 +176,15 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "owners": null,
   "context": null,
   "events": null,
-  "hooks": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {},
+      "subHooks": []
+    }
+  ],
   "props": {
     "nestedObject": {
       "a": {
@@ -184,7 +208,93 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "owners": null,
   "context": null,
   "events": null,
-  "hooks": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {},
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {
+          "bar": {}
+        }
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {
+          "bar": {
+            "baz": "hi"
+          }
+        }
+      },
+      "subHooks": []
+    }
+  ],
   "props": {
     "nestedObject": {
       "a": {
@@ -216,7 +326,7 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
       "isStateEditable": true,
       "name": "State",
       "value": 0,
-      "subHooks": {}
+      "subHooks": []
     }
   ],
   "props": {
@@ -239,7 +349,7 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
       "isStateEditable": true,
       "name": "State",
       "value": 0,
-      "subHooks": {}
+      "subHooks": []
     }
   ],
   "props": {
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index c8ffcaeb4868..5a8c60c74633 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -397,7 +397,17 @@ describe('InspectedElementContext', () => {
   });
 
   it('should not dehydrate nested values until explicitly requested', async done => {
-    const Example = () => null;
+    const Example = () => {
+      const [state] = React.useState({
+        foo: {
+          bar: {
+            baz: 'hi',
+          },
+        },
+      });
+
+      return state.foo.bar.baz;
+    };
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
@@ -479,6 +489,24 @@ describe('InspectedElementContext', () => {
       '4: Inspect props.nestedObject.a.b.c.0.d'
     );
 
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['hooks', 0, 'value']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      getPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '6: Inspect hooks.0.value.foo.bar'
+    );
+
     done();
   });
 
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index cc0cf4b1aaa1..889b14c96f9b 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -562,6 +562,24 @@ export function attach(
     });
   }
 
+  function isKeyedPathWhitelisted(
+    key: string
+  ): (path: Array<string | number>) => boolean {
+    return (path: Array<string | number>) =>
+      isPathWhitelisted([key].concat(path));
+  }
+
+  function isPathWhitelisted(path: Array<string | number>): boolean {
+    let current = currentlyInspectedPaths;
+    for (let i = 0; i < path.length; i++) {
+      current = current[path[i]];
+      if (!current) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>
@@ -585,15 +603,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      currentlyInspectedPaths['context']
+      isKeyedPathWhitelisted('context')
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      currentlyInspectedPaths['props']
+      isKeyedPathWhitelisted('props')
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      currentlyInspectedPaths['state']
+      isKeyedPathWhitelisted('state')
     );
 
     return {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 4cd29d69f6f4..10b8cd6199e0 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2147,6 +2147,28 @@ export function attach(
     });
   }
 
+  function isKeyedPathWhitelisted(
+    key: string,
+    isHooks: boolean
+  ): (path: Array<string | number>) => boolean {
+    return (path: Array<string | number>) =>
+      isPathWhitelisted([key].concat(path)) ||
+      // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
+      // so it's easiest for now if we just don't break on this boundary.
+      (isHooks && path[path.length - 1] === 'subHooks');
+  }
+
+  function isPathWhitelisted(path: Array<string | number>): boolean {
+    let current = currentlyInspectedPaths;
+    for (let i = 0; i < path.length; i++) {
+      current = current[path[i]];
+      if (!current) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>
@@ -2168,7 +2190,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path
             ),
-            currentlyInspectedPaths,
+            isPathWhitelisted,
             path
           ),
         };
@@ -2206,23 +2228,23 @@ export function attach(
 
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        currentlyInspectedPaths.context
+        isKeyedPathWhitelisted('context', false)
       );
       cleanedInspectedElement.events = cleanForBridge(
         cleanedInspectedElement.events,
-        currentlyInspectedPaths.events
+        isKeyedPathWhitelisted('events', false)
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        currentlyInspectedPaths.hooks
+        isKeyedPathWhitelisted('hooks', true)
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        currentlyInspectedPaths.props
+        isKeyedPathWhitelisted('props', false)
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        currentlyInspectedPaths.state
+        isKeyedPathWhitelisted('state', false)
       );
 
       return {
@@ -2285,6 +2307,7 @@ export function attach(
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       if (typeof overrideHookState === 'function') {
+        console.log('[renderer] overrideHookState()', { path, value, index });
         overrideHookState(fiber, index, path, value);
       }
     }
diff --git a/src/backend/utils.js b/src/backend/utils.js
index 18dc58c1f9e1..020d841d46ce 100644
--- a/src/backend/utils.js
+++ b/src/backend/utils.js
@@ -6,14 +6,14 @@ import type { DehydratedData } from 'src/devtools/views/Components/types';
 
 export function cleanForBridge(
   data: Object | null,
-  inspectedPaths?: Object = {},
+  isPathWhitelisted: (path: Array<string | number>) => boolean,
   path?: Array<string | number> = []
 ): DehydratedData | null {
   if (data !== null) {
     const cleaned = [];
 
     return {
-      data: dehydrate(data, cleaned, path, inspectedPaths),
+      data: dehydrate(data, cleaned, path, isPathWhitelisted),
       cleaned,
     };
   } else {
@@ -27,6 +27,7 @@ export function copyWithSet(
   value: any,
   index: number = 0
 ): Object | Array<any> {
+  console.log('[utils] copyWithSet()', obj, path, index, value);
   if (index >= path.length) {
     return value;
   }
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index f8261adc2118..a9c8122ff163 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -7,11 +7,13 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
+import { InspectedElementContext } from './InspectedElementContext';
 import KeyValue from './KeyValue';
 import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
 import { meta } from '../../../hydration';
 
+import type { InspectPath } from './SelectedElement';
 import type { HooksNode, HooksTree } from 'src/backend/types';
 
 type HooksTreeViewProps = {|
@@ -21,6 +23,13 @@ type HooksTreeViewProps = {|
 |};
 
 export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
+  const { getPath } = useContext(InspectedElementContext);
+  const inspectPath = useCallback(
+    (path: Array<string | number>) => {
+      getPath(id, ['hooks', ...path]);
+    },
+    [getPath, id]
+  );
   const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [
     hooks,
   ]);
@@ -36,7 +45,13 @@ export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
             <ButtonIcon type="copy" />
           </Button>
         </div>
-        <InnerHooksTreeView canEditHooks={canEditHooks} hooks={hooks} id={id} />
+        <InnerHooksTreeView
+          canEditHooks={canEditHooks}
+          hooks={hooks}
+          id={id}
+          inspectPath={inspectPath}
+          path={[]}
+        />
       </div>
     );
   }
@@ -46,12 +61,16 @@ type InnerHooksTreeViewProps = {|
   canEditHooks: boolean,
   hooks: HooksTree,
   id: number,
+  inspectPath: InspectPath,
+  path: Array<string | number>,
 |};
 
 export function InnerHooksTreeView({
   canEditHooks,
   hooks,
   id,
+  inspectPath,
+  path,
 }: InnerHooksTreeViewProps) {
   // $FlowFixMe "Missing type annotation for U" whatever that means
   return hooks.map((hook, index) => (
@@ -60,6 +79,8 @@ export function InnerHooksTreeView({
       canEditHooks={canEditHooks}
       hook={hooks[index]}
       id={id}
+      inspectPath={inspectPath}
+      path={path.concat([index])}
     />
   ));
 }
@@ -68,10 +89,17 @@ type HookViewProps = {|
   canEditHooks: boolean,
   hook: HooksNode,
   id: number,
-  path?: Array<any>,
+  inspectPath: InspectPath,
+  path: Array<string | number>,
 |};
 
-function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
+function HookView({
+  canEditHooks,
+  hook,
+  id,
+  inspectPath,
+  path,
+}: HookViewProps) {
   const { name, id: hookID, isStateEditable, subHooks, value } = hook;
 
   const bridge = useContext(BridgeContext);
@@ -125,6 +153,24 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   }
 
   if (isCustomHook) {
+    const subHooksView = Array.isArray(subHooks) ? (
+      <InnerHooksTreeView
+        canEditHooks={canEditHooks}
+        hooks={subHooks}
+        id={id}
+        inspectPath={inspectPath}
+        path={path.concat(['subHooks'])}
+      />
+    ) : (
+      <KeyValue
+        depth={1}
+        inspectPath={inspectPath}
+        name="subHooks"
+        path={path.concat(['subHooks'])}
+        value={subHooks}
+      />
+    );
+
     if (isComplexDisplayValue) {
       return (
         <div className={styles.Hook}>
@@ -135,12 +181,14 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
             </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
-            <KeyValue depth={1} name="DebugValue" value={value} />
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
+            <KeyValue
+              depth={1}
+              inspectPath={inspectPath}
+              name="DebugValue"
+              path={path.concat(['value'])}
+              value={value}
             />
+            {subHooksView}
           </div>
         </div>
       );
@@ -156,11 +204,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
             <span className={styles.Value}>{displayValue}</span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
-            />
+            {subHooksView}
           </div>
         </div>
       );
@@ -169,12 +213,14 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
     let overrideValueFn = null;
     // TODO Maybe read editable value from debug hook?
     if (canEditHooks && isStateEditable) {
-      overrideValueFn = (path: Array<string | number>, value: any) => {
+      overrideValueFn = (absolutePath: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
         bridge.send('overrideHookState', {
           id,
           hookID,
-          path,
+          // Hooks override function expects a relative path for the specified hook (id).
+          // This should not include the fake tree structure DevTools uses for display.
+          path: absolutePath.slice(path.length + 1),
           rendererID,
           value,
         });
@@ -186,8 +232,10 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         <div className={styles.Hook}>
           <KeyValue
             depth={1}
+            inspectPath={inspectPath}
             name={name}
             overrideValueFn={overrideValueFn}
+            path={path.concat(['value'])}
             value={value}
           />
         </div>
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 2bc78e7c91cd..4d19c255c021 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -18,7 +18,7 @@ type KeyValueProps = {|
   inspectPath?: InspectPath,
   name: string,
   overrideValueFn?: ?OverrideValueFn,
-  path?: Array<any>,
+  path: Array<any>,
   value: any,
 |};
 
@@ -31,7 +31,7 @@ export default function KeyValue({
   hidden,
   name,
   overrideValueFn,
-  path = [],
+  path,
   value,
 }: KeyValueProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
diff --git a/src/hydration.js b/src/hydration.js
index 9bde94aca34f..6bd9750f2538 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -120,20 +120,6 @@ function createDehydrated(
   return dehydrated;
 }
 
-function isInspectedPath(
-  path: Array<string | number> = [],
-  inspectedPaths: Object
-): boolean {
-  let current = inspectedPaths;
-  for (let i = 0; i < path.length; i++) {
-    current = current[path[i]];
-    if (!current) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /**
  * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
  * The paths of the stripped out objects are appended to the `cleaned` list.
@@ -156,7 +142,7 @@ export function dehydrate(
   data: Object,
   cleaned: Array<Array<string | number>>,
   path: Array<string | number>,
-  inspectedPaths: Object,
+  isPathWhitelisted: (path: Array<string | number>) => boolean,
   level?: number = 0
 ): string | Dehydrated | { [key: string]: string | Dehydrated } {
   const type = getPropType(data);
@@ -213,7 +199,7 @@ export function dehydrate(
       };
 
     case 'array':
-      const arrayPathCheck = isInspectedPath(path, inspectedPaths);
+      const arrayPathCheck = isPathWhitelisted(path);
       if (level >= LEVEL_THRESHOLD && !arrayPathCheck) {
         return createDehydrated(type, true, data, cleaned, path);
       }
@@ -222,7 +208,7 @@ export function dehydrate(
           item,
           cleaned,
           path.concat([i]),
-          inspectedPaths,
+          isPathWhitelisted,
           arrayPathCheck ? 1 : level + 1
         )
       );
@@ -240,7 +226,7 @@ export function dehydrate(
       };
 
     case 'object':
-      const objectPathCheck = isInspectedPath(path, inspectedPaths);
+      const objectPathCheck = isPathWhitelisted(path);
       if (level >= LEVEL_THRESHOLD && !objectPathCheck) {
         return createDehydrated(type, true, data, cleaned, path);
       } else {
@@ -250,7 +236,7 @@ export function dehydrate(
             data[name],
             cleaned,
             path.concat([name]),
-            inspectedPaths,
+            isPathWhitelisted,
             objectPathCheck ? 1 : level + 1
           );
         }

From 717af9f5c339523f4855c555b8c039f83f0fca8b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 17 Jun 2019 14:37:49 -0700
Subject: [PATCH 733/814] Updated the hydration test harness to cover a bit
 more

---
 .../Hydration.js => Hydration/index.js}       | 53 +++++++++++++------
 .../InspectableElements.js                    |  2 -
 shells/dev/app/index.js                       |  2 +
 3 files changed, 38 insertions(+), 19 deletions(-)
 rename shells/dev/app/{InspectableElements/Hydration.js => Hydration/index.js} (60%)

diff --git a/shells/dev/app/InspectableElements/Hydration.js b/shells/dev/app/Hydration/index.js
similarity index 60%
rename from shells/dev/app/InspectableElements/Hydration.js
rename to shells/dev/app/Hydration/index.js
index 3fc354e869aa..bf0cd66a527a 100644
--- a/shells/dev/app/InspectableElements/Hydration.js
+++ b/shells/dev/app/Hydration/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useDebugValue, useState } from 'react';
+import React, { Fragment, useDebugValue, useState } from 'react';
 
 const div = document.createElement('div');
 const exmapleFunction = () => {};
@@ -92,23 +92,42 @@ function useInnerBaz() {
 
 export default function Hydration() {
   return (
-    <ChildComponent
-      html_element={div}
-      fn={exmapleFunction}
-      symbol={Symbol('symbol')}
-      react_element={<span />}
-      array_buffer={typedArray.buffer}
-      typed_array={typedArray}
-      date={new Date()}
-      array={arrayOfArrays}
-      object={objectOfObjects}
-    />
+    <Fragment>
+      <h1>Hydration</h1>
+      <DehydratableProps
+        html_element={div}
+        fn={exmapleFunction}
+        symbol={Symbol('symbol')}
+        react_element={<span />}
+        array_buffer={typedArray.buffer}
+        typed_array={typedArray}
+        date={new Date()}
+        array={arrayOfArrays}
+        object={objectOfObjects}
+      />
+      <DeepHooks />
+    </Fragment>
   );
 }
 
-function ChildComponent(props: any) {
-  useOuterFoo();
-  useOuterBar();
-  useOuterBaz();
-  return null;
+function DehydratableProps({ array, object }: any) {
+  return (
+    <ul>
+      <li>array: {JSON.stringify(array, null, 2)}</li>
+      <li>object: {JSON.stringify(object, null, 2)}</li>
+    </ul>
+  );
+}
+
+function DeepHooks(props: any) {
+  const foo = useOuterFoo();
+  const bar = useOuterBar();
+  const baz = useOuterBaz();
+  return (
+    <ul>
+      <li>foo: {foo}</li>
+      <li>bar: {bar}</li>
+      <li>baz: {baz}</li>
+    </ul>
+  );
 }
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index 6eadd15bc6cb..b148501ce11f 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -4,7 +4,6 @@ import React, { Fragment } from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';
-import Hydration from './Hydration';
 import NestedProps from './NestedProps';
 
 // TODO Add Immutable JS example
@@ -17,7 +16,6 @@ export default function InspectableElements() {
       <Contexts />
       <CustomHooks />
       <CustomObject />
-      <Hydration />
     </Fragment>
   );
 }
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index 1a2336982c47..b5f0923c1b2e 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -10,6 +10,7 @@ import {
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
+import Hydration from './Hydration';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import PriorityLevels from './PriorityLevels';
@@ -36,6 +37,7 @@ function mountTestApp() {
   mountHelper(ToDoList);
   mountHelper(InteractionTracing);
   mountHelper(InspectableElements);
+  mountHelper(Hydration);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(PriorityLevels);

From 6c03f6abbdc2d9154ac908ff648d50a2a4d7ddb6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 17 Jun 2019 14:49:19 -0700
Subject: [PATCH 734/814] Tidied up a bit

---
 src/__tests__/inspectedElementContext-test.js |  1 +
 src/__tests__/legacy/inspectElement-test.js   |  7 ++++
 src/backend/legacy/renderer.js                | 30 +++++++-------
 src/backend/renderer.js                       | 41 ++++++++++---------
 4 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 5a8c60c74633..013f6403b046 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -335,6 +335,7 @@ describe('InspectedElementContext', () => {
     expect(typed_array[meta.inspectable]).toBe(false);
     expect(typed_array[meta.name]).toBe('Uint8Array');
     expect(typed_array[meta.type]).toBe('typed_array');
+    expect(date[meta.inspectable]).toBe(false);
     expect(date[meta.type]).toBe('date');
 
     done();
diff --git a/src/__tests__/legacy/inspectElement-test.js b/src/__tests__/legacy/inspectElement-test.js
index 49b15c6a44eb..23e384e52960 100644
--- a/src/__tests__/legacy/inspectElement-test.js
+++ b/src/__tests__/legacy/inspectElement-test.js
@@ -124,20 +124,27 @@ describe('InspectedElementContext', () => {
       typed_array,
       date,
     } = inspectedElement.value.props;
+    expect(html_element[meta.inspectable]).toBe(false);
     expect(html_element[meta.name]).toBe('DIV');
     expect(html_element[meta.type]).toBe('html_element');
+    expect(fn[meta.inspectable]).toBe(false);
     expect(fn[meta.name]).toBe('exmapleFunction');
     expect(fn[meta.type]).toBe('function');
+    expect(symbol[meta.inspectable]).toBe(false);
     expect(symbol[meta.name]).toBe('Symbol(symbol)');
     expect(symbol[meta.type]).toBe('symbol');
+    expect(react_element[meta.inspectable]).toBe(false);
     expect(react_element[meta.name]).toBe('span');
     expect(react_element[meta.type]).toBe('react_element');
     expect(array_buffer[meta.size]).toBe(3);
+    expect(array_buffer[meta.inspectable]).toBe(false);
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
     expect(array_buffer[meta.type]).toBe('array_buffer');
     expect(typed_array[meta.size]).toBe(3);
+    expect(typed_array[meta.inspectable]).toBe(false);
     expect(typed_array[meta.name]).toBe('Uint8Array');
     expect(typed_array[meta.type]).toBe('typed_array');
+    expect(date[meta.inspectable]).toBe(false);
     expect(date[meta.type]).toBe('date');
 
     done();
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 889b14c96f9b..1c389a3f9a80 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -562,22 +562,20 @@ export function attach(
     });
   }
 
-  function isKeyedPathWhitelisted(
-    key: string
-  ): (path: Array<string | number>) => boolean {
-    return (path: Array<string | number>) =>
-      isPathWhitelisted([key].concat(path));
-  }
-
-  function isPathWhitelisted(path: Array<string | number>): boolean {
-    let current = currentlyInspectedPaths;
-    for (let i = 0; i < path.length; i++) {
-      current = current[path[i]];
+  function createIsPathWhitelisted(key: string) {
+    return function isPathWhitelisted(path: Array<string | number>): boolean {
+      let current = currentlyInspectedPaths[key];
       if (!current) {
         return false;
       }
-    }
-    return true;
+      for (let i = 0; i < path.length; i++) {
+        current = current[path[i]];
+        if (!current) {
+          return false;
+        }
+      }
+      return true;
+    };
   }
 
   function inspectElement(
@@ -603,15 +601,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      isKeyedPathWhitelisted('context')
+      createIsPathWhitelisted('context')
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      isKeyedPathWhitelisted('props')
+      createIsPathWhitelisted('props')
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      isKeyedPathWhitelisted('state')
+      createIsPathWhitelisted('state')
     );
 
     return {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 10b8cd6199e0..e75a4548c1de 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2147,26 +2147,27 @@ export function attach(
     });
   }
 
-  function isKeyedPathWhitelisted(
-    key: string,
-    isHooks: boolean
-  ): (path: Array<string | number>) => boolean {
-    return (path: Array<string | number>) =>
-      isPathWhitelisted([key].concat(path)) ||
+  function createIsPathWhitelisted(isHooksPath: boolean, key: string | null) {
+    return function isPathWhitelisted(path: Array<string | number>): boolean {
       // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
       // so it's easiest for now if we just don't break on this boundary.
-      (isHooks && path[path.length - 1] === 'subHooks');
-  }
+      if (isHooksPath && path[path.length - 1] === 'subHooks') {
+        return true;
+      }
 
-  function isPathWhitelisted(path: Array<string | number>): boolean {
-    let current = currentlyInspectedPaths;
-    for (let i = 0; i < path.length; i++) {
-      current = current[path[i]];
+      let current =
+        key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];
       if (!current) {
         return false;
       }
-    }
-    return true;
+      for (let i = 0; i < path.length; i++) {
+        current = current[path[i]];
+        if (!current) {
+          return false;
+        }
+      }
+      return true;
+    };
   }
 
   function inspectElement(
@@ -2190,7 +2191,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path
             ),
-            isPathWhitelisted,
+            createIsPathWhitelisted(path[0] === 'hooks', null),
             path
           ),
         };
@@ -2228,23 +2229,23 @@ export function attach(
 
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        isKeyedPathWhitelisted('context', false)
+        createIsPathWhitelisted(false, 'context')
       );
       cleanedInspectedElement.events = cleanForBridge(
         cleanedInspectedElement.events,
-        isKeyedPathWhitelisted('events', false)
+        createIsPathWhitelisted(false, 'events')
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        isKeyedPathWhitelisted('hooks', true)
+        createIsPathWhitelisted(true, 'hooks')
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        isKeyedPathWhitelisted('props', false)
+        createIsPathWhitelisted(false, 'props')
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        isKeyedPathWhitelisted('state', false)
+        createIsPathWhitelisted(false, 'state')
       );
 
       return {

From 8e3cd8ab1e857ccc513c0516f4cceb0ad6847be3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 07:41:30 -0700
Subject: [PATCH 735/814] Debounce inspect-element polling

---
 src/__tests__/inspectedElementContext-test.js   |  2 +-
 .../views/Components/InspectedElementContext.js | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 013f6403b046..6c0197371f30 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -613,7 +613,7 @@ describe('InspectedElementContext', () => {
 
     TestUtils.act(() => {
       inspectedElement = null;
-      jest.runOnlyPendingTimers();
+      jest.advanceTimersByTime(1000);
       expect(inspectedElement).not.toBeNull();
       expect(inspectedElement).toMatchSnapshot('4: update inspected element');
     });
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 7e6021a686a4..65d5e6d4213c 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -236,10 +236,21 @@ function InspectedElementContextController({ children }: Props) {
     // Update the $r variable.
     bridge.send('selectElement', { id: selectedElementID, rendererID });
 
-    const onInspectedElement = ({ id }: InspectedElementPayload) => {
+    const onInspectedElement = (data: InspectedElementPayload) => {
       // If this is the element we requested, wait a little bit and then ask for another update.
-      if (id === selectedElementID) {
-        timeoutID = setTimeout(sendRequest, 1000);
+      if (data.id === selectedElementID) {
+        switch (data.type) {
+          case 'no-change':
+          case 'full-data':
+          case 'hydrated-path':
+            if (timeoutID !== null) {
+              clearTimeout(timeoutID);
+            }
+            timeoutID = setTimeout(sendRequest, 1000);
+            break;
+          default:
+            break;
+        }
       }
     };
 

From a56fd4c36dd7cbfca5a02fbe0389c3c7ff9f0100 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 08:40:58 -0700
Subject: [PATCH 736/814] Tidied up. Added comments. Renamed a few things.

---
 .../inspectedElementContext-test.js.snap      |  2 +
 src/__tests__/inspectedElementContext-test.js | 72 +++++++++++--------
 src/backend/legacy/renderer.js                |  4 ++
 src/backend/renderer.js                       | 11 ++-
 src/devtools/views/Components/HooksTree.js    | 18 ++---
 .../Components/InspectedElementContext.js     | 24 ++++---
 src/devtools/views/Components/KeyValue.js     |  3 -
 .../views/Components/SelectedElement.js       | 28 ++++----
 src/hydration.js                              |  3 +-
 9 files changed, 99 insertions(+), 66 deletions(-)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 421b1011dc37..db663bc853b9 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -369,6 +369,7 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "hooks": null,
   "props": {
     "nestedObject": {
+      "value": 1,
       "a": {}
     }
   },
@@ -385,6 +386,7 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "hooks": null,
   "props": {
     "nestedObject": {
+      "value": 2,
       "a": {
         "value": 2,
         "b": {
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 6c0197371f30..105a23135f28 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { GetPath } from 'src/devtools/views/Components/InspectedElementContext';
+import type { GetInspectedElementPath } from 'src/devtools/views/Components/InspectedElementContext';
 import type Bridge from 'src/bridge';
 import type Store from 'src/devtools/store';
 
@@ -81,8 +81,8 @@ describe('InspectedElementContext', () => {
     let didFinish = false;
 
     function Suspender({ target }) {
-      const { read } = React.useContext(InspectedElementContext);
-      const inspectedElement = read(id);
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
       expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
       return null;
@@ -121,8 +121,8 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({ target }) {
-      const { read } = React.useContext(InspectedElementContext);
-      inspectedElement = read(id);
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
       return null;
     }
 
@@ -189,8 +189,8 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({ target }) {
-      const { read } = React.useContext(InspectedElementContext);
-      inspectedElement = read(target);
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(target);
       return null;
     }
 
@@ -283,8 +283,8 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({ target }) {
-      const { read } = React.useContext(InspectedElementContext);
-      inspectedElement = read(id);
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
       return null;
     }
 
@@ -371,8 +371,8 @@ describe('InspectedElementContext', () => {
     let didFinish = false;
 
     function Suspender({ target }) {
-      const { read } = React.useContext(InspectedElementContext);
-      const inspectedElement = read(id);
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
       expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
       return null;
@@ -434,13 +434,13 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getPath: GetPath = ((null: any): GetPath);
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
     function Suspender({ target }) {
       const context = React.useContext(InspectedElementContext);
-      getPath = context.getPath;
-      inspectedElement = context.read(target);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(target);
       return null;
     }
 
@@ -458,13 +458,13 @@ describe('InspectedElementContext', () => {
         ),
       false
     );
-    expect(getPath).not.toBeNull();
+    expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'a']);
+      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -472,7 +472,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+      getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -482,7 +482,15 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']);
+      getInspectedElementPath(id, [
+        'props',
+        'nestedObject',
+        'a',
+        'b',
+        'c',
+        0,
+        'd',
+      ]);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -492,7 +500,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['hooks', 0, 'value']);
+      getInspectedElementPath(id, ['hooks', 0, 'value']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -500,7 +508,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
+      getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -542,13 +550,13 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getPath: GetPath = ((null: any): GetPath);
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
     function Suspender({ target }) {
       const context = React.useContext(InspectedElementContext);
-      getPath = context.getPath;
-      inspectedElement = context.read(id);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(id);
       return null;
     }
 
@@ -566,13 +574,13 @@ describe('InspectedElementContext', () => {
         ),
       false
     );
-    expect(getPath).not.toBeNull();
+    expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'a']);
+      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -580,7 +588,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'c']);
+      getInspectedElementPath(id, ['props', 'nestedObject', 'c']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
@@ -629,6 +637,7 @@ describe('InspectedElementContext', () => {
       ReactDOM.render(
         <Example
           nestedObject={{
+            value: 1,
             a: {
               value: 1,
               b: {
@@ -643,13 +652,13 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getPath: GetPath = ((null: any): GetPath);
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
     function Suspender({ target }) {
       const context = React.useContext(InspectedElementContext);
-      getPath = context.getPath;
-      inspectedElement = context.read(id);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(id);
       return null;
     }
 
@@ -667,7 +676,7 @@ describe('InspectedElementContext', () => {
         ),
       false
     );
-    expect(getPath).not.toBeNull();
+    expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
 
@@ -675,6 +684,7 @@ describe('InspectedElementContext', () => {
       ReactDOM.render(
         <Example
           nestedObject={{
+            value: 2,
             a: {
               value: 2,
               b: {
@@ -689,7 +699,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getPath(id, ['props', 'nestedObject', 'a']);
+      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 1c389a3f9a80..2e22bc73375c 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -552,6 +552,8 @@ export function attach(
   let currentlyInspectedElementID: number | null = null;
   let currentlyInspectedPaths: Object = {};
 
+  // Track the intersection of currently inspected paths,
+  // so that we can send their data along if the element is re-rendered.
   function mergeInspectedPaths(path: Array<string | number>) {
     let current = currentlyInspectedPaths;
     path.forEach(key => {
@@ -563,6 +565,8 @@ export function attach(
   }
 
   function createIsPathWhitelisted(key: string) {
+    // This function helps prevent previously-inspected paths from being dehydrated in updates.
+    // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathWhitelisted(path: Array<string | number>): boolean {
       let current = currentlyInspectedPaths[key];
       if (!current) {
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index e75a4548c1de..244454c70276 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2137,6 +2137,8 @@ export function attach(
     );
   }
 
+  // Track the intersection of currently inspected paths,
+  // so that we can send their data along if the element is re-rendered.
   function mergeInspectedPaths(path: Array<string | number>) {
     let current = currentlyInspectedPaths;
     path.forEach(key => {
@@ -2148,9 +2150,13 @@ export function attach(
   }
 
   function createIsPathWhitelisted(isHooksPath: boolean, key: string | null) {
+    // This function helps prevent previously-inspected paths from being dehydrated in updates.
+    // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathWhitelisted(path: Array<string | number>): boolean {
       // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
       // so it's easiest for now if we just don't break on this boundary.
+      // We can always dehydrate a level deeper (in the value object).
+      // TODO (hydration) This check depends on a LEVEL_THRESHOLD of 2 to avoid dehydrating a hook incorrectly.
       if (isHooksPath && path[path.length - 1] === 'subHooks') {
         return true;
       }
@@ -2225,8 +2231,10 @@ export function attach(
         mergeInspectedPaths(path);
       }
 
+      // Clone before cleaning so that we preserve the full data.
+      // This will enable us to send patches without re-inspecting if hydrated paths are requested.
+      // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
       const cleanedInspectedElement = { ...mostRecentlyInspectedElement };
-
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
         createIsPathWhitelisted(false, 'context')
@@ -2308,7 +2316,6 @@ export function attach(
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       if (typeof overrideHookState === 'function') {
-        console.log('[renderer] overrideHookState()', { path, value, index });
         overrideHookState(fiber, index, path, value);
       }
     }
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index a9c8122ff163..d1ab04778f5d 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -23,12 +23,12 @@ type HooksTreeViewProps = {|
 |};
 
 export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
-  const { getPath } = useContext(InspectedElementContext);
+  const { getInspectedElementPath } = useContext(InspectedElementContext);
   const inspectPath = useCallback(
     (path: Array<string | number>) => {
-      getPath(id, ['hooks', ...path]);
+      getInspectedElementPath(id, ['hooks', ...path]);
     },
-    [getPath, id]
+    [getInspectedElementPath, id]
   );
   const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [
     hooks,
@@ -114,7 +114,9 @@ function HookView({
 
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
-    // TODO (hydration) show UI to load its data.
+    if (__DEV__) {
+      console.warn('Unexpected dehydrated hook; this is a DevTools error.');
+    }
     return (
       <div className={styles.Hook}>
         <div className={styles.NameValueRow}>
@@ -124,8 +126,6 @@ function HookView({
     );
   }
 
-  // TODO Add click and key handlers for toggling element open/close state.
-
   const isCustomHook = subHooks.length > 0;
 
   const type = typeof value;
@@ -218,8 +218,10 @@ function HookView({
         bridge.send('overrideHookState', {
           id,
           hookID,
-          // Hooks override function expects a relative path for the specified hook (id).
-          // This should not include the fake tree structure DevTools uses for display.
+          // Hooks override function expects a relative path for the specified hook (id),
+          // starting with its id within the (flat) hooks list structure.
+          // This relative path does not include the fake tree structure DevTools uses for display,
+          // so it's important that we remove that part of the path before sending the update.
           path: absolutePath.slice(path.length + 1),
           rendererID,
           value,
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 65d5e6d4213c..97efcac574ff 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -26,12 +26,17 @@ import type {
 } from 'src/devtools/views/Components/types';
 import type { Resource, Thenable } from '../../cache';
 
-export type GetPath = (id: number, path: Array<string | number>) => void;
-export type Read = (id: number) => InspectedElementFrontend | null;
+export type GetInspectedElementPath = (
+  id: number,
+  path: Array<string | number>
+) => void;
+export type GetInspectedElement = (
+  id: number
+) => InspectedElementFrontend | null;
 
 type Context = {|
-  getPath: GetPath,
-  read: Read,
+  getInspectedElementPath: GetInspectedElementPath,
+  getInspectedElement: GetInspectedElement,
 |};
 
 const InspectedElementContext = createContext<Context>(((null: any): Context));
@@ -76,7 +81,8 @@ function InspectedElementContextController({ children }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const getPath = useCallback<GetPath>(
+  // Ask the backend to fill in a "dehydrated" path; this will result in a "inspectedElement".
+  const getInspectedElementPath = useCallback<GetInspectedElementPath>(
     (id: number, path: Array<string | number>) => {
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('inspectElement', { id, path, rendererID });
@@ -84,7 +90,7 @@ function InspectedElementContextController({ children }: Props) {
     [bridge, store]
   );
 
-  const read = useCallback<Read>(
+  const getInspectedElement = useCallback<GetInspectedElement>(
     (id: number) => {
       const element = store.getElementByID(id);
       if (element !== null) {
@@ -266,10 +272,10 @@ function InspectedElementContextController({ children }: Props) {
   }, [bridge, selectedElementID, store]);
 
   const value = useMemo(
-    () => ({ getPath, read }),
+    () => ({ getInspectedElement, getInspectedElementPath }),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [currentlyInspectedElement, getPath, read]
+    [currentlyInspectedElement, getInspectedElement, getInspectedElementPath]
   );
 
   return (
@@ -289,6 +295,8 @@ function hydrateHelper(
     if (path) {
       const { length } = path;
       if (length > 0) {
+        // Hydration helper requires full paths, but inspection dehydrates with relative paths.
+        // In that event it's important that we adjust the "cleaned" paths to match.
         cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));
       }
     }
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index 4d19c255c021..7fd333a0a8ff 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -22,9 +22,6 @@ type KeyValueProps = {|
   value: any,
 |};
 
-// TODO (hydration) Don't display meta objects.
-// Add event listener to request a "read" instead.
-
 export default function KeyValue({
   depth,
   inspectPath,
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 97cd2d20dbb2..5802d204b9fa 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -25,7 +25,7 @@ import {
 
 import styles from './SelectedElement.css';
 
-import type { GetPath } from './InspectedElementContext';
+import type { GetInspectedElementPath } from './InspectedElementContext';
 import type { Element, InspectedElement } from './types';
 import type { ElementType } from 'src/types';
 
@@ -39,7 +39,9 @@ export default function SelectedElement(_: Props) {
   const store = useContext(StoreContext);
   const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
 
-  const { getPath, read } = useContext(InspectedElementContext);
+  const { getInspectedElementPath, getInspectedElement } = useContext(
+    InspectedElementContext
+  );
 
   const element =
     inspectedElementID !== null
@@ -47,7 +49,7 @@ export default function SelectedElement(_: Props) {
       : null;
 
   const inspectedElement =
-    inspectedElementID != null ? read(inspectedElementID) : null;
+    inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;
 
   const highlightElement = useCallback(() => {
     if (element !== null && inspectedElementID !== null) {
@@ -202,10 +204,10 @@ export default function SelectedElement(_: Props) {
       {inspectedElement !== null && (
         <InspectedElementView
           key={
-            inspectedElementID /* Ensure state resets between seleted Elements */
+            inspectedElementID /* Force reset when seleted Element changes */
           }
           element={element}
-          getPath={getPath}
+          getInspectedElementPath={getInspectedElementPath}
           inspectedElement={inspectedElement}
         />
       )}
@@ -217,7 +219,7 @@ export type InspectPath = (path: Array<string | number>) => void;
 
 type InspectedElementViewProps = {|
   element: Element,
-  getPath: GetPath,
+  getInspectedElementPath: GetInspectedElementPath,
   inspectedElement: InspectedElement,
 |};
 
@@ -225,7 +227,7 @@ const IS_SUSPENDED = 'Suspended';
 
 function InspectedElementView({
   element,
-  getPath,
+  getInspectedElementPath,
   inspectedElement,
 }: InspectedElementViewProps) {
   const { id, type } = element;
@@ -247,21 +249,21 @@ function InspectedElementView({
 
   const inspectContextPath = useCallback(
     (path: Array<string | number>) => {
-      getPath(id, ['context', ...path]);
+      getInspectedElementPath(id, ['context', ...path]);
     },
-    [getPath, id]
+    [getInspectedElementPath, id]
   );
   const inspectPropsPath = useCallback(
     (path: Array<string | number>) => {
-      getPath(id, ['props', ...path]);
+      getInspectedElementPath(id, ['props', ...path]);
     },
-    [getPath, id]
+    [getInspectedElementPath, id]
   );
   const inspectStatePath = useCallback(
     (path: Array<string | number>) => {
-      getPath(id, ['state', ...path]);
+      getInspectedElementPath(id, ['state', ...path]);
     },
-    [getPath, id]
+    [getInspectedElementPath, id]
   );
 
   let overrideContextFn = null;
diff --git a/src/hydration.js b/src/hydration.js
index 6bd9750f2538..438165c76541 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -42,7 +42,8 @@ type Dehydrated = {|
 // Reducing this threshold will improve the speed of initial component inspection,
 // but may decrease the responsiveness of expanding objects/arrays to inspect further.
 //
-// Note that reducing the threshold to below two effectively breaks the inspected hooks interface.
+// Note that reducing the threshold to below 2 effectively breaks the inspected hooks interface.
+// It is only safe to dehydrate hooks within the "value" key, never within the "subHooks" array directly.
 const LEVEL_THRESHOLD = 2;
 
 /**

From 6298fd424865811a5af655f01ee8e791c9298fc5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 08:47:37 -0700
Subject: [PATCH 737/814] Hardened the hooks dehydration check

---
 .../inspectedElementContext-test.js.snap         | 16 ++++++++++++----
 src/backend/renderer.js                          | 15 ++++++++++++---
 src/hydration.js                                 |  3 ---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index db663bc853b9..1c9be05a4fa3 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -129,7 +129,9 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
       "id": 0,
       "isStateEditable": true,
       "name": "State",
-      "value": {},
+      "value": {
+        "foo": {}
+      },
       "subHooks": []
     }
   ],
@@ -153,7 +155,9 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
       "id": 0,
       "isStateEditable": true,
       "name": "State",
-      "value": {},
+      "value": {
+        "foo": {}
+      },
       "subHooks": []
     }
   ],
@@ -181,7 +185,9 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
       "id": 0,
       "isStateEditable": true,
       "name": "State",
-      "value": {},
+      "value": {
+        "foo": {}
+      },
       "subHooks": []
     }
   ],
@@ -213,7 +219,9 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
       "id": 0,
       "isStateEditable": true,
       "name": "State",
-      "value": {},
+      "value": {
+        "foo": {}
+      },
       "subHooks": []
     }
   ],
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 244454c70276..904116085010 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2156,9 +2156,18 @@ export function attach(
       // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
       // so it's easiest for now if we just don't break on this boundary.
       // We can always dehydrate a level deeper (in the value object).
-      // TODO (hydration) This check depends on a LEVEL_THRESHOLD of 2 to avoid dehydrating a hook incorrectly.
-      if (isHooksPath && path[path.length - 1] === 'subHooks') {
-        return true;
+      if (isHooksPath) {
+        if (path.length === 1) {
+          // Never dehydrate the hooks object at the top level.
+          return true;
+        }
+        if (
+          path[path.length - 1] === 'subHooks' ||
+          path[path.length - 2] === 'subHooks'
+        ) {
+          // Never dehydrate the subHooks array
+          return true;
+        }
       }
 
       let current =
diff --git a/src/hydration.js b/src/hydration.js
index 438165c76541..9aa36f61b121 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -41,9 +41,6 @@ type Dehydrated = {|
 //
 // Reducing this threshold will improve the speed of initial component inspection,
 // but may decrease the responsiveness of expanding objects/arrays to inspect further.
-//
-// Note that reducing the threshold to below 2 effectively breaks the inspected hooks interface.
-// It is only safe to dehydrate hooks within the "value" key, never within the "subHooks" array directly.
 const LEVEL_THRESHOLD = 2;
 
 /**

From cf19916be7d3e89ddda4b65d85f82ec37b7351e9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 08:59:27 -0700
Subject: [PATCH 738/814] Tweaked overflow check

---
 .../Profiler/SidebarSelectedFiberInfo.css      |  9 +++------
 .../views/Profiler/SidebarSelectedFiberInfo.js | 18 +++++++++---------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 00d85a54935a..77a29574d074 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -10,14 +10,11 @@
 .Content {
   padding: 0.5rem;
   user-select: none;
+  overflow-y: auto;
 }
 
-.ContentShort {
-  overflow-y: visible;
-}
-
-.ContentMaybeLong {
-  overflow-y: auto;
+.WhatChanged {
+  margin-bottom: 1rem;
 }
 
 .Component {
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 627851faeece..9a34361a173c 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -68,13 +68,13 @@ export default function SidebarSelectedFiberInfo(_: Props) {
           <ButtonIcon type="close" />
         </Button>
       </div>
-      <WhatChanged
-        commitIndex={((selectedCommitIndex: any): number)}
-        fiberID={((selectedFiberID: any): number)}
-        profilerStore={profilerStore}
-        rootID={((rootID: any): number)}
-      />
-      <div className={`${styles.Content} ${styles.ContentMaybeLong}`}>
+      <div className={styles.Content}>
+        <WhatChanged
+          commitIndex={((selectedCommitIndex: any): number)}
+          fiberID={((selectedFiberID: any): number)}
+          profilerStore={profilerStore}
+          rootID={((rootID: any): number)}
+        />
         {listItems.length > 0 && (
           <Fragment>
             <label className={styles.Label}>Rendered at</label>: {listItems}
@@ -116,7 +116,7 @@ function WhatChanged({
 
   if (changeDescription.isFirstMount) {
     return (
-      <div className={`${styles.Content} ${styles.ContentShort}`}>
+      <div className={styles.WhatChanged}>
         <label className={styles.Label}>Why did this render?</label>
         <div className={styles.WhatChangedItem}>
           This is the first time the component rendered.
@@ -199,7 +199,7 @@ function WhatChanged({
   }
 
   return (
-    <div className={`${styles.Content} ${styles.ContentShort}`}>
+    <div className={styles.WhatChanged}>
       <label className={styles.Label}>Why did this render?</label>
       {changes}
     </div>

From a2c79f2d9e4ec0a631859e226ce91a824892e62c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 10:50:19 -0700
Subject: [PATCH 739/814] Fixed hydration for events meta data

---
 src/backend/renderer.js                       | 63 ++++++++++++-------
 src/devtools/views/Components/EventsTree.css  |  4 ++
 src/devtools/views/Components/EventsTree.js   | 50 +++++++++++++--
 .../views/Components/SelectedElement.js       |  8 ++-
 4 files changed, 96 insertions(+), 29 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 904116085010..59a94fbe32d2 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -2149,25 +2149,37 @@ export function attach(
     });
   }
 
-  function createIsPathWhitelisted(isHooksPath: boolean, key: string | null) {
+  function createIsPathWhitelisted(
+    key: string | null,
+    secondaryCategory: 'events' | 'hooks' | null
+  ) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathWhitelisted(path: Array<string | number>): boolean {
-      // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
-      // so it's easiest for now if we just don't break on this boundary.
-      // We can always dehydrate a level deeper (in the value object).
-      if (isHooksPath) {
-        if (path.length === 1) {
-          // Never dehydrate the hooks object at the top level.
-          return true;
-        }
-        if (
-          path[path.length - 1] === 'subHooks' ||
-          path[path.length - 2] === 'subHooks'
-        ) {
-          // Never dehydrate the subHooks array
-          return true;
-        }
+      switch (secondaryCategory) {
+        case 'events':
+          if (path.length <= 2) {
+            // Never dehydrate the "hooks" object at the top level (becaues it's always just an array).
+            return true;
+          }
+          break;
+        case 'hooks':
+          if (path.length === 1) {
+            // Never dehydrate the "hooks" object at the top levels.
+            return true;
+          }
+          if (
+            path[path.length - 1] === 'subHooks' ||
+            path[path.length - 2] === 'subHooks'
+          ) {
+            // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
+            // so it's easiest for now if we just don't break on this boundary.
+            // We can always dehydrate a level deeper (in the value object).
+            return true;
+          }
+          break;
+        default:
+          break;
       }
 
       let current =
@@ -2195,6 +2207,13 @@ export function attach(
       if (path != null) {
         mergeInspectedPaths(path);
 
+        let secondaryCategory = null;
+        if (path[0] === 'events') {
+          secondaryCategory = 'events';
+        } else if (path[0] === 'hooks') {
+          secondaryCategory = 'hooks';
+        }
+
         // If this element has not been updated since it was last inspected,
         // we can just return the subset of data in the newly-inspected path.
         return {
@@ -2206,7 +2225,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path
             ),
-            createIsPathWhitelisted(path[0] === 'hooks', null),
+            createIsPathWhitelisted(null, secondaryCategory),
             path
           ),
         };
@@ -2246,23 +2265,23 @@ export function attach(
       const cleanedInspectedElement = { ...mostRecentlyInspectedElement };
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        createIsPathWhitelisted(false, 'context')
+        createIsPathWhitelisted('context', null)
       );
       cleanedInspectedElement.events = cleanForBridge(
         cleanedInspectedElement.events,
-        createIsPathWhitelisted(false, 'events')
+        createIsPathWhitelisted('events', 'events')
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        createIsPathWhitelisted(true, 'hooks')
+        createIsPathWhitelisted('hooks', 'hooks')
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        createIsPathWhitelisted(false, 'props')
+        createIsPathWhitelisted('props', null)
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        createIsPathWhitelisted(false, 'state')
+        createIsPathWhitelisted('state', null)
       );
 
       return {
diff --git a/src/devtools/views/Components/EventsTree.css b/src/devtools/views/Components/EventsTree.css
index 7506ba430d2f..686c5dc768ca 100644
--- a/src/devtools/views/Components/EventsTree.css
+++ b/src/devtools/views/Components/EventsTree.css
@@ -20,6 +20,10 @@
   display: flex;
 }
 
+.Name {
+  user-select: none;
+}
+
 .Empty {
   color: var(--color-dimmer);
   font-style: italic;
diff --git a/src/devtools/views/Components/EventsTree.js b/src/devtools/views/Components/EventsTree.js
index 3c8635e627a7..eda2a54c25c5 100644
--- a/src/devtools/views/Components/EventsTree.js
+++ b/src/devtools/views/Components/EventsTree.js
@@ -1,3 +1,5 @@
+// @flow
+
 import { copy } from 'clipboard-js';
 import React, { useCallback, useState } from 'react';
 import styles from './EventsTree.css';
@@ -7,15 +9,32 @@ import KeyValue from './KeyValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
 import { serializeDataForCopy } from '../utils';
 
-type Props = {|
+import type { GetInspectedElementPath } from './InspectedElementContext';
+
+type InspectPath = (path: Array<string | number>) => void;
+
+type EventsTreeViewProps = {|
   events: Object,
+  getInspectedElementPath: GetInspectedElementPath,
+  id: number,
 |};
 
-function EventsTreeView({ events }: Props) {
+function EventsTreeView({
+  events,
+  getInspectedElementPath,
+  id,
+}: EventsTreeViewProps) {
   const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [
     events,
   ]);
 
+  const inspectPath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['events', ...path]);
+    },
+    [getInspectedElementPath, id]
+  );
+
   return (
     <div className={styles.EventsTree}>
       <div className={styles.HeaderRow}>
@@ -26,16 +45,26 @@ function EventsTreeView({ events }: Props) {
           </Button>
         }
       </div>
-      <InnerEventsTreeView events={events} />
+      <InnerEventsTreeView events={events} inspectPath={inspectPath} />
     </div>
   );
 }
 
-function InnerEventsTreeView({ events }: Props) {
+type InnerEventsTreeViewProps = {|
+  events: Object,
+  inspectPath: InspectPath,
+|};
+
+function InnerEventsTreeView({
+  events,
+  inspectPath,
+}: InnerEventsTreeViewProps) {
   return events.map((event, index) => (
     <EventComponentView
       key={index}
       displayName={event.displayName}
+      index={index}
+      inspectPath={inspectPath}
       props={event.props}
     />
   ));
@@ -43,11 +72,19 @@ function InnerEventsTreeView({ events }: Props) {
 
 type EventComponentViewProps = {|
   displayName: string,
+  index: number,
+  inspectPath: InspectPath,
   props: null | Object,
 |};
 
-function EventComponentView({ displayName, props }: EventComponentViewProps) {
+function EventComponentView({
+  displayName,
+  index,
+  inspectPath,
+  props,
+}: EventComponentViewProps) {
   const [isOpen, setIsOpen] = useState(false);
+
   let eventComponentProps = null;
   // eslint-disable-next-line no-unused-vars
   let children;
@@ -74,8 +111,9 @@ function EventComponentView({ displayName, props }: EventComponentViewProps) {
             <KeyValue
               key={name}
               depth={1}
+              inspectPath={inspectPath}
               name={name}
-              path={[name]}
+              path={[index]}
               value={(eventComponentProps: any)[name]}
             />
           ))}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 5802d204b9fa..93cccda033f9 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -336,7 +336,13 @@ function InspectedElementView({
         inspectPath={inspectContextPath}
         overrideValueFn={overrideContextFn}
       />
-      {events !== null && events.length > 0 && <EventsTree events={events} />}
+      {events !== null && events.length > 0 && (
+        <EventsTree
+          events={events}
+          getInspectedElementPath={getInspectedElementPath}
+          id={id}
+        />
+      )}
 
       {ownerID === null && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>

From abc8ef3d5da8652e4741212d4da0d3fc72d70451 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 11:37:29 -0700
Subject: [PATCH 740/814] Display unnamed custom hooks as 'Anonymous'

---
 src/devtools/views/Components/HooksTree.css | 11 +++++++++--
 src/devtools/views/Components/HooksTree.js  | 14 ++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index d82764c47951..1304c276cc71 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -24,11 +24,18 @@
   display: flex;
 }
 
-.Name {
-  color: var(--color-dim);
+.Name,
+.NameAnonymous {
   flex: 0 0 auto;
   user-select: none;
 }
+.Name {
+  color: var(--color-dim);
+}
+.NameAnonymous {
+  color: var(--color-dimmer);
+}
+
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index d1ab04778f5d..0c3b3e79b2a5 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -176,8 +176,11 @@ function HookView({
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onClick={toggleIsOpen} className={styles.Name}>
-              {name}
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}
+            >
+              {name || 'Anonymous'}
             </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
@@ -197,8 +200,11 @@ function HookView({
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onClick={toggleIsOpen} className={styles.Name}>
-              {name}
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}
+            >
+              {name || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>

From 0e4005e0a19761bff83c0329b4d46078c689ff37 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 15:44:22 -0700
Subject: [PATCH 741/814] Added command to build Chrome CRX

---
 .gitignore                          |  3 +-
 package.json                        |  5 +-
 shells/browser/chrome/build.js      | 21 +++++++
 shells/browser/chrome/manifest.json |  2 +-
 yarn.lock                           | 93 +++++++++++++++++++++++++++--
 5 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index e2524be341a3..548807aab6a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,5 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
-.watchmanconfig
\ No newline at end of file
+.watchmanconfig
+*.pem
\ No newline at end of file
diff --git a/package.json b/package.json
index f9bb136be5c4..3dda0df85a39 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "build:extension": "cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:dev": "cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:chrome": "cross-env NODE_ENV=production node ./shells/browser/chrome/build",
+    "build:extension:chrome:crx": "cross-env NODE_ENV=production node ./shells/browser/chrome/build --crx",
     "build:extension:chrome:dev": "cross-env NODE_ENV=development node ./shells/browser/chrome/build",
     "build:extension:firefox": "cross-env NODE_ENV=production node ./shells/browser/firefox/build",
     "build:extension:firefox:dev": "cross-env NODE_ENV=development node ./shells/browser/firefox/build",
@@ -90,6 +91,7 @@
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
     "cross-env": "^5.2.0",
+    "crx": "^5.0.0",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
@@ -149,6 +151,7 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.3.1"
+    "webpack-dev-server": "^3.3.1",
+    "yargs": "^13.2.4"
   }
 }
diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 57b2dbb1f9b1..88c8c9ac1804 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -1,11 +1,32 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
+const { execSync } = require('child_process');
+const { existsSync } = require('fs');
+const { join, relative } = require('path');
+const { argv } = require('yargs');
 const build = require('../shared/build');
 
 const main = async () => {
+  const { crx, keyPath } = argv;
+
+  if (crx) {
+    if (!keyPath || !existsSync(keyPath)) {
+      console.error('Must specify a key file (.pem) to build CRX');
+      process.exit(1);
+    }
+  }
+
   await build('chrome');
 
+  if (crx) {
+    const cwd = join(__dirname, 'build');
+    const relativeKeyPath = join(relative(cwd, process.cwd()), keyPath);
+    execSync(`crx pack ./unpacked -o ReactDevTools.crx -p ${relativeKeyPath}`, {
+      cwd,
+    });
+  }
+
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
   console.log(chalk.gray('\n# From the react-devtools root directory:'));
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 3a1dfb1db4bd..a63ad4a7fc16 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.0.0",
+  "version": "4.0.0.0",
   "version_name": "4.0.0",
 
   "minimum_chrome_version": "49",
diff --git a/yarn.lock b/yarn.lock
index 8b7b83046662..13de92f1dccd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1842,7 +1842,7 @@ asn1.js@^4.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-asn1@~0.2.3:
+asn1@^0.2.4, asn1@~0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
   integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
@@ -3119,6 +3119,15 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 clone-stats@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
@@ -3210,7 +3219,7 @@ commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@^2.3.0, commander@^2.6.0:
+commander@^2.20.0, commander@^2.3.0, commander@^2.6.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -3708,6 +3717,16 @@ crx-parser@0.1.2:
   resolved "https://registry.yarnpkg.com/crx-parser/-/crx-parser-0.1.2.tgz#7eeeed9eddc95e22c189382e34624044a89a5a6d"
   integrity sha1-fu7tnt3JXiLBiTguNGJARKiaWm0=
 
+crx@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/crx/-/crx-5.0.0.tgz#da5edd267bc273f6af4ec51bb24c99c3275cb60c"
+  integrity sha512-xm+94OuKy3KWV46gzsZueYgCnawx8iHFL7Xudd/LLLZKgxIYv6OHYFrLmX7B0FvPLO2/m1sOgGLt7z+MXz+/ow==
+  dependencies:
+    archiver "^3.0.0"
+    commander "^2.20.0"
+    node-rsa "^1.0.5"
+    pbf "^3.2.0"
+
 cryptiles@3.x.x:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
@@ -6275,6 +6294,11 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
+ieee754@^1.1.12:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
 ieee754@^1.1.4:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
@@ -8710,6 +8734,13 @@ node-releases@^1.1.8:
   dependencies:
     semver "^5.3.0"
 
+node-rsa@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
+  integrity sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==
+  dependencies:
+    asn1 "^0.2.4"
+
 node-version@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.0.0.tgz#1b9b9584a9a7f7a6123f215cd14a652bf21ab19e"
@@ -9288,6 +9319,14 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+pbf@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.0.tgz#e76f9f5114e395c25077ad6fe463b3507d6877fc"
+  integrity sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
@@ -9595,6 +9634,11 @@ prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+protocol-buffers-schema@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
+  integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
+
 proxy-addr@~2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -10340,6 +10384,13 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -11194,7 +11245,7 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0:
+string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -11249,7 +11300,7 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.0.0, strip-ansi@^5.1.0:
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -12358,6 +12409,15 @@ wrap-ansi@^3.0.1:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -12488,6 +12548,14 @@ yargs-parser@^13.0.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^13.1.0:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
@@ -12556,6 +12624,23 @@ yargs@6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
+yargs@^13.2.4:
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
+  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.0"
+
 yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"

From 083bf8d98b2cdb7af7b53d2f45b86afc91e98413 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 18:40:05 -0700
Subject: [PATCH 742/814] Don't try to convert absolute paths to relative

---
 shells/browser/chrome/build.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/shells/browser/chrome/build.js b/shells/browser/chrome/build.js
index 88c8c9ac1804..8bcb863f11c5 100644
--- a/shells/browser/chrome/build.js
+++ b/shells/browser/chrome/build.js
@@ -3,7 +3,7 @@
 const chalk = require('chalk');
 const { execSync } = require('child_process');
 const { existsSync } = require('fs');
-const { join, relative } = require('path');
+const { isAbsolute, join, relative } = require('path');
 const { argv } = require('yargs');
 const build = require('../shared/build');
 
@@ -21,8 +21,13 @@ const main = async () => {
 
   if (crx) {
     const cwd = join(__dirname, 'build');
-    const relativeKeyPath = join(relative(cwd, process.cwd()), keyPath);
-    execSync(`crx pack ./unpacked -o ReactDevTools.crx -p ${relativeKeyPath}`, {
+
+    let safeKeyPath = keyPath;
+    if (!isAbsolute(keyPath)) {
+      safeKeyPath = join(relative(cwd, process.cwd()), keyPath);
+    }
+
+    execSync(`crx pack ./unpacked -o ReactDevTools.crx -p ${safeKeyPath}`, {
       cwd,
     });
   }

From 89a0886872703912938f4182212cf81d93a68344 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 19 Jun 2019 17:43:15 +0100
Subject: [PATCH 743/814] [Flare] Update event component displayName

---
 src/backend/renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 59a94fbe32d2..a021dd74ad8a 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -479,7 +479,7 @@ export function attach(
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
       case EventComponent:
-        return type.displayName || 'EventComponent';
+        return type.responder.displayName || 'EventComponent';
       case EventTarget:
         switch (getTypeSymbol(elementType.type)) {
           case EVENT_TARGET_TOUCH_HIT_NUMBER:

From 35600be1daaec741cf07466c0c874caf0ddc12b3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 Jun 2019 11:06:36 -0700
Subject: [PATCH 744/814] Changed Chrome manifest version from 4.0.0.0 to 4.0.0

---
 shells/browser/chrome/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index a63ad4a7fc16..3a1dfb1db4bd 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.0.0.0",
+  "version": "4.0.0",
   "version_name": "4.0.0",
 
   "minimum_chrome_version": "49",

From 81e5e9be0b7de8cd0092f33e5741a42ada1b0316 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 Jun 2019 15:43:15 -0700
Subject: [PATCH 745/814] Updated @reach/tooltip to v0.2.2 for a bugfix

---
 package.json |  2 +-
 yarn.lock    | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 3dda0df85a39..6cd8a520e020 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@reach/menu-button": "^0.1.17",
-    "@reach/tooltip": "^0.2.0",
+    "@reach/tooltip": "^0.2.2",
     "archiver": "^3.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
diff --git a/yarn.lock b/yarn.lock
index 13de92f1dccd..cb35f65ede94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1062,15 +1062,15 @@
     "@reach/component-component" "^0.1.3"
     "@reach/observe-rect" "^1.0.3"
 
-"@reach/tooltip@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.0.tgz#705da2c5487d3f611f3d40482b387b6f42825b8e"
-  integrity sha512-RKJkGR+w3vS+flGjcVL82SK016E6rzjG8wC4ZtFu03VCAxJyhveG0uaB3juv7Rx+u8CEwv2gxfWgfMWgrJ2cRA==
+"@reach/tooltip@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.2.tgz#a861ce38269b586597ab40417323b33d3d6dc927"
+  integrity sha512-afcfqH6EzDHmwTB6g1k0dSbkyT0s9KPIi5bX56nNuldsCIasImFFYDjRZLhFcuxjskwIsHAi06yC3GV6mtcRxw==
   dependencies:
     "@reach/auto-id" "0.2.0"
     "@reach/portal" "^0.2.1"
     "@reach/rect" "^0.2.1"
-    "@reach/utils" "^0.2.2"
+    "@reach/utils" "^0.2.3"
     "@reach/visually-hidden" "^0.1.4"
     prop-types "^15.7.2"
 
@@ -1079,6 +1079,11 @@
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.2.tgz#c3a05ae9fd1f921988ae8a89b5a0d28d1a2b92df"
   integrity sha512-jYeIi46AA5jh2gfdXD/nInUYfeLp3girRafiajP7AVHF6B4hpYAzUSx/ZH4xmPyf5alut5rml2DHxrv+X+Xu+A==
 
+"@reach/utils@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.3.tgz#820f6a6af4301b4c5065cfc04bb89e6a3d1d723f"
+  integrity sha512-zM9rA8jDchr05giMhL95dPeYkK67cBQnIhCVrOKKqgWGsv+2GE/HZqeptvU4zqs0BvIqsThwov+YxVNVh5csTQ==
+
 "@reach/visually-hidden@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"

From 5ec387aa829d0f9bef9b1e2871491c4c30fcf188 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Mon, 1 Jul 2019 23:35:35 +0200
Subject: [PATCH 746/814] Mark reload-and-profile attach as configurable

---
 shells/browser/shared/src/renderer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shells/browser/shared/src/renderer.js b/shells/browser/shared/src/renderer.js
index c4cc4c6f55cc..98e7a0d48863 100644
--- a/shells/browser/shared/src/renderer.js
+++ b/shells/browser/shared/src/renderer.js
@@ -15,6 +15,7 @@ Object.defineProperty(
   '__REACT_DEVTOOLS_ATTACH__',
   ({
     enumerable: false,
+    configurable: true,
     get() {
       return attach;
     },

From 8e90194f7d38136be48bfebc8fc3c45d88dbc2d6 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Mon, 1 Jul 2019 23:48:52 +0200
Subject: [PATCH 747/814] Add comment about 3rd party integrations

---
 shells/browser/shared/src/renderer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/shells/browser/shared/src/renderer.js b/shells/browser/shared/src/renderer.js
index 98e7a0d48863..0a0e74808efd 100644
--- a/shells/browser/shared/src/renderer.js
+++ b/shells/browser/shared/src/renderer.js
@@ -15,6 +15,9 @@ Object.defineProperty(
   '__REACT_DEVTOOLS_ATTACH__',
   ({
     enumerable: false,
+    // This property needs to be configurable to allow third-party integrations
+    // to attach their own renderer. Note that using third-party integrations
+    // is not officially supported. Use at your own risk.
     configurable: true,
     get() {
       return attach;

From 0f2fb5badf5908ee271e0b9e7ec7f3022e31a648 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 13 Jul 2019 10:05:04 -0700
Subject: [PATCH 748/814] Standalone NPM packages and React Native support
 (#335)

* Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage.
* Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed.
* Adds support for React Native (paper renderer)
* Adds a style editor for react-native and react-native-web
---
 .gitignore                                    |   1 +
 babel.config.js                               |   3 +
 fixtures/standalone/index.html                | 284 ++++++++++++++++
 flow-typed/chrome.js                          |  94 ++++++
 package.json                                  |   7 +-
 packages/react-devtools-core/README.md        |  44 +++
 packages/react-devtools-core/backend.js       |   1 +
 packages/react-devtools-core/package.json     |  31 ++
 packages/react-devtools-core/src/backend.js   | 269 +++++++++++++++
 .../react-devtools-core/src/launchEditor.js   | 170 ++++++++++
 .../react-devtools-core/src/standalone.js     | 286 ++++++++++++++++
 packages/react-devtools-core/standalone.js    |   1 +
 .../react-devtools-core/webpack.backend.js    |  53 +++
 .../react-devtools-core/webpack.standalone.js |  69 ++++
 packages/react-devtools/README.md             |  98 ++++++
 packages/react-devtools/app.html              | 129 +++++++
 packages/react-devtools/app.js                |  50 +++
 packages/react-devtools/bin.js                |  18 +
 packages/react-devtools/icons/icon128.png     | Bin 0 -> 4577 bytes
 packages/react-devtools/index.js              |   7 +
 packages/react-devtools/package.json          |  31 ++
 shells/browser/shared/src/backend.js          |  12 +
 shells/browser/shared/src/main.js             |  16 +-
 shells/browser/shared/src/utils.js            |   8 +-
 .../InspectableElements.js                    |   2 +
 .../app/InspectableElements/SimpleValues.js   |  23 ++
 shells/dev/src/devtools.js                    |   1 -
 .../inspectedElementContext-test.js.snap      |  23 ++
 .../__snapshots__/profilingCache-test.js.snap |  10 +-
 src/__tests__/inspectedElementContext-test.js |  66 ++++
 .../__snapshots__/inspectElement-test.js.snap |  27 ++
 src/__tests__/legacy/inspectElement-test.js   |  43 +++
 .../NativeStyleEditor/resolveBoxStyle.js      |  85 +++++
 .../setupNativeStyleEditor.js                 | 315 ++++++++++++++++++
 src/backend/NativeStyleEditor/types.js        |  27 ++
 src/backend/agent.js                          | 205 +++---------
 src/backend/legacy/renderer.js                |  34 +-
 src/backend/renderer.js                       |  36 +-
 src/backend/types.js                          |  11 +
 .../views/{ => Highlighter}/Highlighter.js    |   5 +
 .../views/{ => Highlighter}/Overlay.js        |   0
 src/backend/views/Highlighter/index.js        | 142 ++++++++
 src/bridge.js                                 |  34 +-
 src/devtools/ProfilerStore.js                 |   9 +-
 src/devtools/store.js                         |  61 +++-
 src/devtools/views/Components/Components.css  |   8 +
 src/devtools/views/Components/Components.js   |   9 +-
 src/devtools/views/Components/Element.css     |   5 -
 src/devtools/views/Components/Element.js      |   2 -
 .../Components/InspectHostNodesToggle.js      |  10 +-
 .../NativeStyleEditor/AutoSizeInput.css       |  26 ++
 .../NativeStyleEditor/AutoSizeInput.js        |  93 ++++++
 .../NativeStyleEditor/LayoutViewer.css        |  50 +++
 .../NativeStyleEditor/LayoutViewer.js         |  64 ++++
 .../NativeStyleEditor/StyleEditor.css         |  52 +++
 .../NativeStyleEditor/StyleEditor.js          | 278 ++++++++++++++++
 .../Components/NativeStyleEditor/context.js   | 187 +++++++++++
 .../Components/NativeStyleEditor/index.js     |  68 ++++
 .../Components/NativeStyleEditor/types.js     |  13 +
 .../views/Components/SelectedElement.css      |  12 -
 .../views/Components/SelectedElement.js       |  21 +-
 src/devtools/views/Components/Tree.js         |  31 +-
 .../Components/ViewElementSourceContext.js    |   9 +-
 src/devtools/views/DevTools.css               |  18 +-
 src/devtools/views/DevTools.js                |  27 +-
 .../views/Profiler/CommitTreeBuilder.js       |   2 +-
 src/devtools/views/Profiler/Profiler.css      |   5 +
 src/devtools/views/Profiler/Profiler.js       |  34 +-
 .../Profiler/SidebarSelectedFiberInfo.css     |  12 +-
 src/devtools/views/Profiler/types.js          |   2 +-
 src/devtools/views/Profiler/utils.js          |   6 +-
 .../views/Settings/SettingsContext.js         |   8 +-
 src/devtools/views/TabBar.css                 |   3 +
 src/devtools/views/root.css                   |   8 +-
 src/hydration.js                              | 136 +++++---
 src/utils.js                                  |  16 +-
 yarn.lock                                     | 242 +++++++++++---
 77 files changed, 3911 insertions(+), 387 deletions(-)
 create mode 100644 fixtures/standalone/index.html
 create mode 100644 flow-typed/chrome.js
 create mode 100644 packages/react-devtools-core/README.md
 create mode 100644 packages/react-devtools-core/backend.js
 create mode 100644 packages/react-devtools-core/package.json
 create mode 100644 packages/react-devtools-core/src/backend.js
 create mode 100644 packages/react-devtools-core/src/launchEditor.js
 create mode 100644 packages/react-devtools-core/src/standalone.js
 create mode 100644 packages/react-devtools-core/standalone.js
 create mode 100644 packages/react-devtools-core/webpack.backend.js
 create mode 100644 packages/react-devtools-core/webpack.standalone.js
 create mode 100644 packages/react-devtools/README.md
 create mode 100644 packages/react-devtools/app.html
 create mode 100644 packages/react-devtools/app.js
 create mode 100755 packages/react-devtools/bin.js
 create mode 100644 packages/react-devtools/icons/icon128.png
 create mode 100644 packages/react-devtools/index.js
 create mode 100644 packages/react-devtools/package.json
 create mode 100644 shells/dev/app/InspectableElements/SimpleValues.js
 create mode 100644 src/backend/NativeStyleEditor/resolveBoxStyle.js
 create mode 100644 src/backend/NativeStyleEditor/setupNativeStyleEditor.js
 create mode 100644 src/backend/NativeStyleEditor/types.js
 rename src/backend/views/{ => Highlighter}/Highlighter.js (86%)
 rename src/backend/views/{ => Highlighter}/Overlay.js (100%)
 create mode 100644 src/backend/views/Highlighter/index.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/context.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/index.js
 create mode 100644 src/devtools/views/Components/NativeStyleEditor/types.js

diff --git a/.gitignore b/.gitignore
index 548807aab6a6..bbe2c0a3d5a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 /shells/browser/firefox/*.xpi
 /shells/browser/firefox/*.pem
 /shells/browser/shared/build
+/packages/react-devtools-core/dist
 /shells/dev/dist
 build
 node_modules
diff --git a/babel.config.js b/babel.config.js
index 1d705076ff9f..6dd41082dede 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -24,6 +24,9 @@ module.exports = api => {
   } else {
     targets.chrome = minChromeVersion.toString();
     targets.firefox = minFirefoxVersion.toString();
+
+    // This targets RN/Hermes.
+    targets.IE = '11';
   }
   const plugins = [
     ['@babel/plugin-transform-flow-strip-types'],
diff --git a/fixtures/standalone/index.html b/fixtures/standalone/index.html
new file mode 100644
index 000000000000..17e133bae891
--- /dev/null
+++ b/fixtures/standalone/index.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>TODO List</title>
+
+    <!-- DevTools -->
+    <script src="http://localhost:8097"></script>
+
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+    <style type="text/css">
+      .Input {
+        font-size: 1rem;
+        padding: 0.25rem;
+      }
+
+      .IconButton {
+        padding: 0.25rem;
+        border: none;
+        background: none;
+        cursor: pointer;
+      }
+
+      .List {
+        margin: 0.5rem 0 0;
+        padding: 0;
+      }
+
+      .ListItem {
+        list-style-type: none;
+      }
+
+      .Label {
+        cursor: pointer;
+        padding: 0.25rem;
+        color: #555;
+      }
+      .Label:hover {
+        color: #000;
+      }
+
+      .IconButton {
+        padding: 0.25rem;
+        border: none;
+        background: none;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      const { Fragment, useCallback, useState } = React;
+
+      function List(props) {
+        const [newItemText, setNewItemText] = useState("");
+        const [items, setItems] = useState([
+          { id: 1, isComplete: true, text: "First" },
+          { id: 2, isComplete: true, text: "Second" },
+          { id: 3, isComplete: false, text: "Third" }
+        ]);
+        const [uid, setUID] = useState(4);
+
+        const handleClick = useCallback(() => {
+          if (newItemText !== "") {
+            setItems([
+              ...items,
+              {
+                id: uid,
+                isComplete: false,
+                text: newItemText
+              }
+            ]);
+            setUID(uid + 1);
+            setNewItemText("");
+          }
+        }, [newItemText, items, uid]);
+
+        const handleKeyPress = useCallback(
+          event => {
+            if (event.key === "Enter") {
+              handleClick();
+            }
+          },
+          [handleClick]
+        );
+
+        const handleChange = useCallback(
+          event => {
+            setNewItemText(event.currentTarget.value);
+          },
+          [setNewItemText]
+        );
+
+        const removeItem = useCallback(
+          itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
+          [items]
+        );
+
+        const toggleItem = useCallback(
+          itemToToggle => {
+            const index = items.indexOf(itemToToggle);
+
+            setItems(
+              items
+                .slice(0, index)
+                .concat({
+                  ...itemToToggle,
+                  isComplete: !itemToToggle.isComplete
+                })
+                .concat(items.slice(index + 1))
+            );
+          },
+          [items]
+        );
+
+        return (
+          <Fragment>
+            <h1>List</h1>
+            <input
+              type="text"
+              placeholder="New list item..."
+              className="Input"
+              value={newItemText}
+              onChange={handleChange}
+              onKeyPress={handleKeyPress}
+            />
+            <button
+              className="IconButton"
+              disabled={newItemText === ""}
+              onClick={handleClick}
+            >
+              <span role="img" aria-label="Add item">
+                ➕
+              </span>
+            </button>
+            <ul className="List">
+              {items.map(item => (
+                <ListItem
+                  key={item.id}
+                  item={item}
+                  removeItem={removeItem}
+                  toggleItem={toggleItem}
+                />
+              ))}
+            </ul>
+          </Fragment>
+        );
+      }
+
+      function ListItem({ item, removeItem, toggleItem }) {
+        const handleDelete = useCallback(() => {
+          removeItem(item);
+        }, [item, removeItem]);
+
+        const handleToggle = useCallback(() => {
+          toggleItem(item);
+        }, [item, toggleItem]);
+
+        return (
+          <li className="ListItem">
+            <button className="IconButton" onClick={handleDelete}>
+              🗑
+            </button>
+            <label className="Label">
+              <input
+                className="Input"
+                checked={item.isComplete}
+                onChange={handleToggle}
+                type="checkbox"
+              />{" "}
+              {item.text}
+            </label>
+          </li>
+        );
+      }
+
+      function SimpleValues() {
+        return (
+          <ChildComponent
+            string="abc"
+            emptyString=""
+            number={123}
+            undefined={undefined}
+            null={null}
+            nan={NaN}
+            infinity={Infinity}
+            true={true}
+            false={false}
+          />
+        );
+      }
+
+      class Custom {
+        _number = 42;
+        get number() {
+          return this._number;
+        }
+      }
+
+      function CustomObject() {
+        return <ChildComponent customObject={new Custom()} />;
+      }
+
+      const object = {
+        string: "abc",
+        longString: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890",
+        emptyString: "",
+        number: 123,
+        boolean: true,
+        undefined: undefined,
+        null: null
+      };
+
+      function ObjectProps() {
+        return (
+          <ChildComponent
+            object={{
+              outer: {
+                inner: object
+              }
+            }}
+            array={["first", "second", "third"]}
+            objectInArray={[object]}
+            arrayInObject={{ array: ["first", "second", "third"] }}
+            deepObject={{
+              // Known limitation: we won't go deeper than several levels.
+              // In the future, we might offer a way to request deeper access on demand.
+              a: {
+                b: {
+                  c: {
+                    d: {
+                      e: {
+                        f: {
+                          g: {
+                            h: {
+                              i: {
+                                j: 10
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }}
+          />
+        );
+      }
+
+      function ChildComponent(props: any) {
+        return null;
+      }
+
+      function InspectableElements() {
+        return (
+          <Fragment>
+            <SimpleValues />
+            <ObjectProps />
+            <CustomObject />
+          </Fragment>
+        );
+      }
+
+      function App() {
+        return (
+          <Fragment>
+            <List />
+            <InspectableElements />
+          </Fragment>
+        );
+      }
+
+      ReactDOM.render(<App />, document.getElementById("root"));
+    </script>
+  </body>
+</html>
diff --git a/flow-typed/chrome.js b/flow-typed/chrome.js
new file mode 100644
index 000000000000..fac810912420
--- /dev/null
+++ b/flow-typed/chrome.js
@@ -0,0 +1,94 @@
+// @flow
+
+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,
+      themeName: ?string,
+    },
+  },
+  tabs: {
+    create: (options: Object) => void,
+    executeScript: (tabId: number, options: Object, fn: () => void) => void,
+    onUpdated: {
+      addListener: (
+        fn: (tabId: number, changeInfo: Object, tab: Object) => void
+      ) => void,
+    },
+    query: (options: Object, fn: (tabArray: Array<Object>) => void) => void,
+  },
+  browserAction: {
+    setIcon: (options: {
+      tabId: number,
+      path: { [key: string]: string },
+    }) => void,
+    setPopup: (options: {
+      tabId: number,
+      popup: string,
+    }) => void,
+  },
+  runtime: {
+    getURL: (path: string) => string,
+    sendMessage: (config: Object) => void,
+    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,
+              url: string,
+            },
+          },
+        }) => void
+      ) => void,
+    },
+    onMessage: {
+      addListener: (
+        fn: (
+          req: Object,
+          sender: {
+            url: string,
+            tab: {
+              id: number,
+            },
+          }
+        ) => void
+      ) => void,
+    },
+  },
+};
diff --git a/package.json b/package.json
index 6cd8a520e020..daf94f6447ab 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "version": "4.0.0",
   "repository": "bvaughn/react-devtools-experimental",
-  "license": "BSD-3-Clause",
+  "license": "MIT",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -32,6 +32,8 @@
     ]
   },
   "scripts": {
+    "build:core:backend": "cd ./packages/react-devtools-core && yarn build:backend",
+    "build:core:standalone": "cd ./packages/react-devtools-core && yarn build:standalone",
     "build:demo": "cd ./shells/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
     "build:extension": "cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:dev": "cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox",
@@ -52,6 +54,9 @@
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "prettier:ci": "prettier --check '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open",
+    "start:core:backend": "cd ./packages/react-devtools-core && yarn start:backend",
+    "start:core:standalone": "cd ./packages/react-devtools-core && yarn start:standalone",
+    "start:electron": "cd ./packages/react-devtools && node bin.js",
     "start:prod": "cd ./shells/dev && cross-env NODE_ENV=production cross-env TARGET=local webpack-dev-server --open",
     "test": "jest",
     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
new file mode 100644
index 000000000000..7bb1a2e0b716
--- /dev/null
+++ b/packages/react-devtools-core/README.md
@@ -0,0 +1,44 @@
+# `react-devtools-core`
+
+A standalone React DevTools implementation.  
+
+This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**
+
+## API
+
+### `react-devtools-core`
+
+This is similar requiring the `react-devtools` package, but provides several configurable options. Unlike `react-devtools`, requiring `react-devtools-core` doesn't connect immediately but instead exports a function:
+
+```js
+const { connectToDevTools } = require("react-devtools-core");
+connectToDevTools({
+  // Config options
+});
+
+```
+
+Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.  
+Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
+
+The `options` object may contain:
+* `host: string` (defaults to "localhost") - Websocket will connect to this host.
+* `port: number` (defaults to `8097`) - Websocket will connect to this port.
+* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
+* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
+* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
+
+## `react-devtools-core/standalone`
+
+Renders the DevTools interface into a DOM node.
+
+```js
+require("react-devtools-core/standalone")
+  .setContentDOMNode(document.getElementById("container"))
+  .setStatusListener(status => {
+    // This callback is optional...
+  })
+  .startServer(port);
+```
+
+Reference the `react-devtools` package for a complete integration example.
diff --git a/packages/react-devtools-core/backend.js b/packages/react-devtools-core/backend.js
new file mode 100644
index 000000000000..2c2a32d45125
--- /dev/null
+++ b/packages/react-devtools-core/backend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/backend');
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
new file mode 100644
index 000000000000..f560258e8f76
--- /dev/null
+++ b/packages/react-devtools-core/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "react-devtools-core",
+  "description": "Use react-devtools outside of the browser",
+  "version": "4.0.0",
+  "license": "MIT",
+  "main": "./dist/backend.js",
+  "repository": {
+    "url": "https://github.com/bvaughn/react-devtools-experimental.git",
+    "type": "git"
+  },
+  "files": [
+    "dist",
+    "backend.js",
+    "standalone.js"
+  ],
+  "scripts": {
+    "build": "yarn build:backend && yarn build:standalone",
+    "build:backend": "cross-env NODE_ENV=production webpack --config webpack.backend.js",
+    "build:standalone": "cross-env NODE_ENV=production webpack --config webpack.standalone.js",
+    "prepublish": "yarn run build",
+    "start:backend": "cross-env NODE_ENV=development webpack --config webpack.backend.js --watch",
+    "start:standalone": "cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch"
+  },
+  "dependencies": {
+    "shell-quote": "^1.6.1",
+    "ws": "^7"
+  },
+  "devDependencies": {
+    "cross-env": "^3.1.4"
+  }
+}
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
new file mode 100644
index 000000000000..f76659180aa5
--- /dev/null
+++ b/packages/react-devtools-core/src/backend.js
@@ -0,0 +1,269 @@
+// @flow
+
+import Agent from 'src/backend/agent';
+import Bridge from 'src/bridge';
+import { installHook } from 'src/hook';
+import { initBackend } from 'src/backend';
+import { __DEBUG__ } from 'src/constants';
+import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import { getDefaultComponentFilters } from 'src/utils';
+
+import type { ComponentFilter } from 'src/types';
+import type { DevToolsHook } from 'src/backend/types';
+import type { ResolveNativeStyle } from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
+
+type ConnectOptions = {
+  host?: string,
+  nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
+  port?: number,
+  resolveRNStyle?: ResolveNativeStyle,
+  isAppActive?: () => boolean,
+  websocket?: ?WebSocket,
+};
+
+installHook(window);
+
+const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();
+
+function debug(methodName: string, ...args) {
+  if (__DEBUG__) {
+    console.log(
+      `%c[core/backend] %c${methodName}`,
+      'color: teal; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
+}
+
+export function connectToDevTools(options: ?ConnectOptions) {
+  const {
+    host = 'localhost',
+    nativeStyleEditorValidAttributes,
+    port = 8097,
+    websocket,
+    resolveRNStyle = null,
+    isAppActive = () => true,
+  } = options || {};
+
+  let retryTimeoutID: TimeoutID | null = null;
+
+  function scheduleRetry() {
+    if (retryTimeoutID === null) {
+      // Two seconds because RN had issues with quick retries.
+      retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);
+    }
+  }
+
+  if (!isAppActive()) {
+    // If the app is in background, maybe retry later.
+    // Don't actually attempt to connect until we're in foreground.
+    scheduleRetry();
+    return;
+  }
+
+  let bridge: Bridge | null = null;
+
+  const messageListeners = [];
+  const uri = 'ws://' + host + ':' + port;
+
+  // If existing websocket is passed, use it.
+  // This is necessary to support our custom integrations.
+  // See D6251744.
+  const ws = websocket ? websocket : new window.WebSocket(uri);
+  ws.onclose = handleClose;
+  ws.onerror = handleFailed;
+  ws.onmessage = handleMessage;
+  ws.onopen = function() {
+    bridge = new Bridge({
+      listen(fn) {
+        messageListeners.push(fn);
+        return () => {
+          const index = messageListeners.indexOf(fn);
+          if (index >= 0) {
+            messageListeners.splice(index, 1);
+          }
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        if (ws.readyState === ws.OPEN) {
+          if (__DEBUG__) {
+            debug('wall.send()', event, payload);
+          }
+
+          ws.send(JSON.stringify({ event, payload }));
+        } else {
+          if (__DEBUG__) {
+            debug(
+              'wall.send()',
+              'Shutting down bridge because of closed WebSocket connection'
+            );
+          }
+
+          if (bridge !== null) {
+            bridge.emit('shutdown');
+          }
+
+          scheduleRetry();
+        }
+      },
+    });
+    bridge.addListener(
+      'selectElement',
+      ({ id, rendererID }: {| id: number, rendererID: number |}) => {
+        const renderer = agent.rendererInterfaces[rendererID];
+        if (renderer != null) {
+          // Send event for RN to highlight.
+          const nodes: ?Array<HTMLElement> = renderer.findNativeNodesForFiberID(
+            id
+          );
+          if (nodes != null && nodes[0] != null) {
+            agent.emit('showNativeHighlight', nodes[0]);
+          }
+        }
+      }
+    );
+    bridge.addListener(
+      'updateComponentFilters',
+      (componentFilters: Array<ComponentFilter>) => {
+        // Save filter changes in memory, in case DevTools is reloaded.
+        // In that case, the renderer will already be using the updated values.
+        // We'll lose these in between backend reloads but that can't be helped.
+        savedComponentFilters = componentFilters;
+      }
+    );
+
+    // The renderer interface doesn't read saved component filters directly,
+    // because they are generally stored in localStorage within the context of the extension.
+    // Because of this it relies on the extension to pass filters.
+    // In the case of the standalone DevTools being used with a website,
+    // saved filters are injected along with the backend script tag so we shouldn't override them here.
+    // This injection strategy doesn't work for React Native though.
+    // Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution.
+    // So for now we just fall back to using the default filters...
+    if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {
+      bridge.send('overrideComponentFilters', savedComponentFilters);
+    }
+
+    // TODO (npm-packages) Warn if "isBackendStorageAPISupported"
+    const agent = new Agent(bridge);
+    agent.addListener('shutdown', () => {
+      // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
+      // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
+      hook.emit('shutdown');
+    });
+
+    initBackend(hook, agent, window);
+
+    // Setup React Native style editor if the environment supports it.
+    if (resolveRNStyle != null || hook.resolveRNStyle != null) {
+      setupNativeStyleEditor(
+        bridge,
+        agent,
+        ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),
+        nativeStyleEditorValidAttributes ||
+          hook.nativeStyleEditorValidAttributes ||
+          null
+      );
+    } else {
+      // Otherwise listen to detect if the environment later supports it.
+      // For example, Flipper does not eagerly inject these values.
+      // Instead it relies on the React Native Inspector to lazily inject them.
+      let lazyResolveRNStyle;
+      let lazyNativeStyleEditorValidAttributes;
+
+      const initAfterTick = () => {
+        if (bridge !== null) {
+          setupNativeStyleEditor(
+            bridge,
+            agent,
+            lazyResolveRNStyle,
+            lazyNativeStyleEditorValidAttributes
+          );
+        }
+      };
+
+      Object.defineProperty(
+        hook,
+        'resolveRNStyle',
+        ({
+          enumerable: false,
+          get() {
+            return lazyResolveRNStyle;
+          },
+          set(value) {
+            lazyResolveRNStyle = value;
+            initAfterTick();
+          },
+        }: Object)
+      );
+      Object.defineProperty(
+        hook,
+        'nativeStyleEditorValidAttributes',
+        ({
+          enumerable: false,
+          get() {
+            return lazyNativeStyleEditorValidAttributes;
+          },
+          set(value) {
+            lazyNativeStyleEditorValidAttributes = value;
+            initAfterTick();
+          },
+        }: Object)
+      );
+    }
+  };
+
+  function handleClose() {
+    if (__DEBUG__) {
+      debug('WebSocket.onclose');
+    }
+
+    if (bridge !== null) {
+      bridge.emit('shutdown');
+    }
+
+    scheduleRetry();
+  }
+
+  function handleFailed() {
+    if (__DEBUG__) {
+      debug('WebSocket.onerror');
+    }
+
+    scheduleRetry();
+  }
+
+  function handleMessage(event) {
+    let data;
+    try {
+      if (typeof event.data === 'string') {
+        data = JSON.parse(event.data);
+        if (__DEBUG__) {
+          debug('WebSocket.onmessage', data);
+        }
+      } else {
+        throw Error();
+      }
+    } catch (e) {
+      console.error(
+        '[React DevTools] Failed to parse JSON: ' + String(event.data)
+      );
+      return;
+    }
+    messageListeners.forEach(fn => {
+      try {
+        fn(data);
+      } catch (error) {
+        // jsc doesn't play so well with tracebacks that go into eval'd code,
+        // so the stack trace here will stop at the `eval()` call. Getting the
+        // message that caused the error is the best we can do for now.
+        console.log('[React DevTools] Error calling listener', data);
+        console.log('error:', error);
+        throw error;
+      }
+    });
+  }
+}
diff --git a/packages/react-devtools-core/src/launchEditor.js b/packages/react-devtools-core/src/launchEditor.js
new file mode 100644
index 000000000000..94628be8582e
--- /dev/null
+++ b/packages/react-devtools-core/src/launchEditor.js
@@ -0,0 +1,170 @@
+// @flow
+
+import { existsSync } from 'fs';
+import { basename, join, isAbsolute } from 'path';
+import { execSync, spawn } from 'child_process';
+import { parse } from 'shell-quote';
+
+function isTerminalEditor(editor: string): boolean {
+  switch (editor) {
+    case 'vim':
+    case 'emacs':
+    case 'nano':
+      return true;
+    default:
+      return false;
+  }
+}
+
+// Map from full process name to binary that starts the process
+// We can't just re-use full process name, because it will spawn a new instance
+// of the app every time
+const COMMON_EDITORS = {
+  '/Applications/Atom.app/Contents/MacOS/Atom': 'atom',
+  '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta':
+    '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta',
+  '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text':
+    '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl',
+  '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2':
+    '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl',
+  '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code',
+};
+
+function getArgumentsForLineNumber(
+  editor: string,
+  filePath: string,
+  lineNumber: number
+): Array<string> {
+  switch (basename(editor)) {
+    case 'vim':
+    case 'mvim':
+      return [filePath, '+' + lineNumber];
+    case 'atom':
+    case 'Atom':
+    case 'Atom Beta':
+    case 'subl':
+    case 'sublime':
+    case 'wstorm':
+    case 'appcode':
+    case 'charm':
+    case 'idea':
+      return [filePath + ':' + lineNumber];
+    case 'joe':
+    case 'emacs':
+    case 'emacsclient':
+      return ['+' + lineNumber, filePath];
+    case 'rmate':
+    case 'mate':
+    case 'mine':
+      return ['--line', lineNumber + '', filePath];
+    case 'code':
+      return ['-g', filePath + ':' + lineNumber];
+    default:
+      // For all others, drop the lineNumber until we have
+      // a mapping above, since providing the lineNumber incorrectly
+      // can result in errors or confusing behavior.
+      return [filePath];
+  }
+}
+
+function guessEditor(): Array<string> {
+  // Explicit config always wins
+  if (process.env.REACT_EDITOR) {
+    return parse(process.env.REACT_EDITOR);
+  }
+
+  // Using `ps x` on OSX we can find out which editor is currently running.
+  // Potentially we could use similar technique for Windows and Linux
+  if (process.platform === 'darwin') {
+    try {
+      const output = execSync('ps x').toString();
+      const processNames = Object.keys(COMMON_EDITORS);
+      for (let i = 0; i < processNames.length; i++) {
+        const processName = processNames[i];
+        if (output.indexOf(processName) !== -1) {
+          return [COMMON_EDITORS[processName]];
+        }
+      }
+    } catch (error) {
+      // Ignore...
+    }
+  }
+
+  // Last resort, use old skool env vars
+  if (process.env.VISUAL) {
+    return [process.env.VISUAL];
+  } else if (process.env.EDITOR) {
+    return [process.env.EDITOR];
+  }
+
+  return [];
+}
+
+let childProcess = null;
+
+export default function launchEditor(
+  maybeRelativePath: string,
+  lineNumber: number,
+  absoluteProjectRoots: Array<string>
+) {
+  // We use relative paths at Facebook with deterministic builds.
+  // This is why our internal tooling calls React DevTools with absoluteProjectRoots.
+  // If the filename is absolute then we don't need to care about this.
+  let filePath;
+  if (isAbsolute(maybeRelativePath)) {
+    if (existsSync(maybeRelativePath)) {
+      filePath = maybeRelativePath;
+    }
+  } else {
+    for (let i = 0; i < absoluteProjectRoots.length; i++) {
+      const projectRoot = absoluteProjectRoots[i];
+      const joinedPath = join(projectRoot, maybeRelativePath);
+      if (existsSync(joinedPath)) {
+        filePath = joinedPath;
+        break;
+      }
+    }
+  }
+
+  if (!filePath) {
+    return;
+  }
+
+  // Sanitize lineNumber to prevent malicious use on win32
+  // via: https://github.com/nodejs/node/blob/c3bb4b1aa5e907d489619fb43d233c3336bfc03d/lib/child_process.js#L333
+  if (lineNumber && isNaN(lineNumber)) {
+    return;
+  }
+
+  let [editor, ...args] = guessEditor();
+  if (!editor) {
+    return;
+  }
+
+  if (lineNumber) {
+    args = args.concat(getArgumentsForLineNumber(editor, filePath, lineNumber));
+  } else {
+    args.push(filePath);
+  }
+
+  if (childProcess && isTerminalEditor(editor)) {
+    // There's an existing editor process already and it's attached
+    // to the terminal, so go kill it. Otherwise two separate editor
+    // instances attach to the stdin/stdout which gets confusing.
+    childProcess.kill('SIGKILL');
+  }
+
+  if (process.platform === 'win32') {
+    // On Windows, launch the editor in a shell because spawn can only
+    // launch .exe files.
+    childProcess = spawn('cmd.exe', ['/C', editor].concat(args), {
+      stdio: 'inherit',
+    });
+  } else {
+    childProcess = spawn(editor, args, { stdio: 'inherit' });
+  }
+  childProcess.on('error', function() {});
+  childProcess.on('exit', function(errorCode) {
+    childProcess = null;
+  });
+}
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
new file mode 100644
index 000000000000..d98956276e64
--- /dev/null
+++ b/packages/react-devtools-core/src/standalone.js
@@ -0,0 +1,286 @@
+// @flow
+
+import { createElement } from 'react';
+import {
+  // $FlowFixMe Flow does not yet know about flushSync()
+  flushSync,
+  // $FlowFixMe Flow does not yet know about createRoot()
+  unstable_createRoot as createRoot,
+} from 'react-dom';
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/store';
+import { getSavedComponentFilters } from 'src/utils';
+import { Server } from 'ws';
+import { existsSync, readFileSync } from 'fs';
+import { installHook } from 'src/hook';
+import DevTools from 'src/devtools/views/DevTools';
+import launchEditor from './launchEditor';
+import { __DEBUG__ } from 'src/constants';
+
+import type { InspectedElement } from 'src/devtools/views/Components/types';
+
+installHook(window);
+
+export type StatusListener = (message: string) => void;
+
+let node: HTMLElement = ((null: any): HTMLElement);
+let nodeWaitingToConnectHTML: string = '';
+let projectRoots: Array<string> = [];
+let statusListener: StatusListener = (message: string) => {};
+
+function setContentDOMNode(value: HTMLElement) {
+  node = value;
+
+  // Save so we can restore the exact waiting message between sessions.
+  nodeWaitingToConnectHTML = node.innerHTML;
+
+  return DevtoolsUI;
+}
+
+function setProjectRoots(value: Array<string>) {
+  projectRoots = value;
+}
+
+function setStatusListener(value: StatusListener) {
+  statusListener = value;
+  return DevtoolsUI;
+}
+
+let bridge: Bridge | null = null;
+let store: Store | null = null;
+let root = null;
+
+const log = (...args) => console.log('[React DevTools]', ...args);
+log.warn = (...args) => console.warn('[React DevTools]', ...args);
+log.error = (...args) => console.error('[React DevTools]', ...args);
+
+function debug(methodName: string, ...args) {
+  if (__DEBUG__) {
+    console.log(
+      `%c[core/standalone] %c${methodName}`,
+      'color: teal; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
+}
+
+function safeUnmount() {
+  flushSync(() => {
+    if (root !== null) {
+      root.unmount();
+    }
+  });
+  root = null;
+}
+
+function reload() {
+  safeUnmount();
+
+  node.innerHTML = '';
+
+  setTimeout(() => {
+    root = createRoot(node);
+    root.render(
+      createElement(DevTools, {
+        bridge: ((bridge: any): Bridge),
+        showTabBar: true,
+        store: ((store: any): Store),
+        viewElementSourceFunction,
+        viewElementSourceRequiresFileLocation: true,
+      })
+    );
+  }, 100);
+}
+
+function viewElementSourceFunction(
+  id: number,
+  inspectedElement: InspectedElement
+): void {
+  const { source } = inspectedElement;
+  if (source !== null) {
+    launchEditor(source.fileName, source.lineNumber, projectRoots);
+  } else {
+    log.error('Cannot inspect element', id);
+  }
+}
+
+function onDisconnected() {
+  safeUnmount();
+
+  node.innerHTML = nodeWaitingToConnectHTML;
+}
+
+function onError({ code, message }) {
+  safeUnmount();
+
+  if (code === 'EADDRINUSE') {
+    node.innerHTML = `<div id="waiting"><h2>Another instance of DevTools is running</h2></div>`;
+  } else {
+    node.innerHTML = `<div id="waiting"><h2>Unknown error (${message})</h2></div>`;
+  }
+}
+
+function initialize(socket: WebSocket) {
+  const listeners = [];
+  socket.onmessage = event => {
+    let data;
+    try {
+      if (typeof event.data === 'string') {
+        data = JSON.parse(event.data);
+
+        if (__DEBUG__) {
+          debug('WebSocket.onmessage', data);
+        }
+      } else {
+        throw Error();
+      }
+    } catch (e) {
+      log.error('Failed to parse JSON', event.data);
+      return;
+    }
+    listeners.forEach(fn => {
+      try {
+        fn(data);
+      } catch (error) {
+        log.error('Error calling listener', data);
+        throw error;
+      }
+    });
+  };
+
+  bridge = new Bridge({
+    listen(fn) {
+      listeners.push(fn);
+      return () => {
+        const index = listeners.indexOf(fn);
+        if (index >= 0) {
+          listeners.splice(index, 1);
+        }
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      if (socket.readyState === socket.OPEN) {
+        socket.send(JSON.stringify({ event, payload }));
+      }
+    },
+  });
+  ((bridge: any): Bridge).addListener('shutdown', () => {
+    socket.close();
+  });
+
+  store = new Store(bridge, { supportsNativeInspection: false });
+
+  log('Connected');
+  reload();
+}
+
+let startServerTimeoutID: TimeoutID | null = null;
+
+function connectToSocket(socket: WebSocket) {
+  socket.onerror = err => {
+    onDisconnected();
+    log.error('Error with websocket connection', err);
+  };
+  socket.onclose = () => {
+    onDisconnected();
+    log('Connection to RN closed');
+  };
+  initialize(socket);
+
+  return {
+    close: function() {
+      onDisconnected();
+    },
+  };
+}
+
+function startServer(port?: number = 8097) {
+  const httpServer = require('http').createServer();
+  const server = new Server({ server: httpServer });
+  let connected: WebSocket | null = null;
+  server.on('connection', (socket: WebSocket) => {
+    if (connected !== null) {
+      connected.close();
+      log.warn(
+        'Only one connection allowed at a time.',
+        'Closing the previous connection'
+      );
+    }
+    connected = socket;
+    socket.onerror = error => {
+      connected = null;
+      onDisconnected();
+      log.error('Error with websocket connection', error);
+    };
+    socket.onclose = () => {
+      connected = null;
+      onDisconnected();
+      log('Connection to RN closed');
+    };
+    initialize(socket);
+  });
+
+  server.on('error', event => {
+    onError(event);
+    log.error('Failed to start the DevTools server', event);
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.on('request', (request, response) => {
+    // NPM installs should read from node_modules,
+    // But local dev mode needs to use a relative path.
+    const basePath = existsSync('./node_modules/react-devtools-core')
+      ? 'node_modules/react-devtools-core'
+      : '../react-devtools-core';
+
+    // Serve a file that immediately sets up the connection.
+    const backendFile = readFileSync(`${basePath}/dist/backend.js`);
+
+    // The renderer interface doesn't read saved component filters directly,
+    // because they are generally stored in localStorage within the context of the extension.
+    // Because of this it relies on the extension to pass filters, so include them wth the response here.
+    // This will ensure that saved filters are shared across different web pages.
+    const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+      getSavedComponentFilters()
+    )};`;
+
+    response.end(
+      savedFiltersString +
+        '\n;' +
+        backendFile.toString() +
+        '\n;' +
+        'ReactDevToolsBackend.connectToDevTools();'
+    );
+  });
+
+  httpServer.on('error', event => {
+    onError(event);
+    statusListener('Failed to start the server.');
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.listen(port, () => {
+    statusListener('The server is listening on the port ' + port + '.');
+  });
+
+  return {
+    close: function() {
+      connected = null;
+      onDisconnected();
+      clearTimeout(startServerTimeoutID);
+      server.close();
+      httpServer.close();
+    },
+  };
+}
+
+const DevtoolsUI = {
+  connectToSocket,
+  setContentDOMNode,
+  setProjectRoots,
+  setStatusListener,
+  startServer,
+};
+
+export default DevtoolsUI;
diff --git a/packages/react-devtools-core/standalone.js b/packages/react-devtools-core/standalone.js
new file mode 100644
index 000000000000..fe55aa11d5d4
--- /dev/null
+++ b/packages/react-devtools-core/standalone.js
@@ -0,0 +1 @@
+module.exports = require('./dist/standalone');
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
new file mode 100644
index 000000000000..3103abdd6bcf
--- /dev/null
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -0,0 +1,53 @@
+const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../shells/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
+
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: 'development', // TODO TESTING __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+
+    // This name is important; standalone references it in order to connect.
+    library: 'ReactDevToolsBackend',
+    libraryTarget: 'umd',
+  },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../src'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: true,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(__dirname, '../../babel.config.js'),
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
new file mode 100644
index 000000000000..b21dfe5180b2
--- /dev/null
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -0,0 +1,69 @@
+const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../shells/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
+
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  target: 'electron-main',
+  entry: {
+    standalone: './src/standalone.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    library: '[name]',
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../src'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: false,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(__dirname, '../../babel.config.js'),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
new file mode 100644
index 000000000000..2220a6661d5b
--- /dev/null
+++ b/packages/react-devtools/README.md
@@ -0,0 +1,98 @@
+# `react-devtools`
+
+React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).
+
+It works both with React DOM and React Native.
+
+<img src="http://i.imgur.com/IXeHiZD.png" width="600" alt="Screenshot of React DevTools running with React Native">
+
+## Installation
+Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
+```sh
+# Yarn
+yarn global add react-devtools
+
+# NPM
+npm install -g react-devtools
+```
+
+If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:
+```sh
+yarn add --dev react-devtools
+```
+
+With NPM you can just use [NPX](https://www.npmjs.com/package/npx):
+```sh
+npx react-devtools
+```
+
+## Usage with React Native
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+If you're not in a simulator then you also need to run the following in a command prompt:
+```sh
+adb reverse tcp:8097 tcp:8097
+```
+
+If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.
+
+### Integration with React Native Inspector
+
+You can open the [in-app developer menu](https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+
+![React Native Inspector](http://i.imgur.com/ReFhREb.gif)
+
+However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
+
+![React DevTools Inspector Integration](http://i.imgur.com/wVgV9RP.gif)
+
+You can choose "Hide Inspector" in the same menu to exit this mode.
+
+### Inspecting Component Instances
+
+When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
+
+First, follow the [instructions for debugging in Chrome](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) to open the Chrome console.
+
+Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**
+
+Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
+
+![React DevTools Chrome Console Integration](http://i.imgur.com/Cpvhs8i.gif)
+
+
+## Usage with React DOM
+
+The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).
+
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+Add `<script src="http://localhost:8097"></script>` as the very first `<script>` tag in the `<head>` of your page when developing:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <script src="http://localhost:8097"></script>
+```
+
+This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**
+
+>If you install `react-devtools` as a project dependency, you may also replace the `<script>` suggested above with a JavaScript import (`import 'react-devtools'`). It is important that this import comes before any other imports in your app (especially before `react-dom`). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add `'react-devtools'` as the first item in the `entry` array of the development-only configuration, and then you wouldn’t need to deal either with `<script>` tags or `import` statements.
+
+## Advanced
+
+By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
+
+## Developing
+
+* Run `yarn run backend:watch` and `yarn run standalone:watch` in `../react-devtools-core`
+* Run `yarn start` in this folder
+* Refresh the app after it has recompiled a change
+* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.
\ No newline at end of file
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
new file mode 100644
index 000000000000..83250645ce5a
--- /dev/null
+++ b/packages/react-devtools/app.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Developer Tools</title>
+    <meta charset="utf8" />
+    <style>
+      html {
+        display: flex;
+        font-family: sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        display: flex;
+      }
+      #container {
+        display: flex;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: white;
+      }
+      #logs {
+        position: fixed;
+        top: 0;
+        left: 0;
+        white-space: pre;
+      }
+      #waiting {
+        flex-direction: column;
+        text-align: center;
+        font-family: sans-serif;
+        color: #aaa;
+        flex: 1;
+        overflow: auto;
+      }
+      #waiting h2 {
+        padding: 30px;
+      }
+      #waiting p {
+        padding: 0;
+        margin: 0;
+      }
+      .input {
+        display: inline-block;
+        max-width: 100%;
+        font-weight: 100;
+        border: 1px solid #aaa;
+        padding: 0.125rem 0.25rem;
+        margin: 0.125rem;
+        color: #666;
+      }
+      #loading-status {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="waiting" style="-webkit-user-select: none; -webkit-app-region: drag;">
+        <h2>Waiting for React to connect…</h2>
+        <div>
+          <h4>React Native</h4>
+          <div>The active app will automatically connect in a few seconds.</div>
+          <br />
+          <h4>React DOM</h4>
+          <div>
+            Add <span class="input" contenteditable="true" id="localhost"></span><br />
+            or <span class="input" contenteditable="true" id="byip"></span>
+          </div>
+          <div>
+            to the top of the page you want to debug,
+            <br />
+            <b>before</b> importing React DOM.
+          </div>
+        </div>
+        <br />
+        <br />
+        <div id="loading-status">Starting the server…</div>
+      </div>
+    </div>
+    <script>
+      const port = process.env.PORT || 8097;
+      const localIp = require("ip").address();
+      const $ = document.querySelector.bind(document);
+
+      function selectAll(event) {
+        const element = event.target;
+        if (window.getSelection) {
+          const selection = window.getSelection();        
+          const range = document.createRange();
+          range.selectNodeContents(element);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+
+      const $localhost = $("#localhost");
+      $localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
+      $localhost.addEventListener('click', selectAll);
+      $localhost.addEventListener('focus', selectAll);
+
+      const $byIp = $("#byip");
+      $byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
+      $byIp.addEventListener('click', selectAll);
+      $byIp.addEventListener('focus', selectAll);
+
+      let devtools;
+      try {
+        devtools = require("react-devtools-core/standalone").default;
+      } catch (err) {
+        alert(
+          err.toString() +
+            "\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?"
+        );
+      }
+      window.devtools = devtools;
+      window.server = devtools
+        .setContentDOMNode(document.getElementById("container"))
+        .setStatusListener(function(status) {
+          document.getElementById("loading-status").innerText = status;
+        })
+        .startServer(port);
+    </script>
+  </body>
+</html>
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
new file mode 100644
index 000000000000..c9b415ea4961
--- /dev/null
+++ b/packages/react-devtools/app.js
@@ -0,0 +1,50 @@
+// @flow
+
+const { app, BrowserWindow } = require('electron'); // Module to create native browser window.
+const { join } = require('path');
+
+const argv = require('minimist')(process.argv.slice(2));
+const projectRoots = argv._;
+const defaultThemeName = argv.theme;
+
+let mainWindow = null;
+
+app.on('window-all-closed', function() {
+  app.quit();
+});
+
+app.on('ready', function() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    icon: join(__dirname, 'icons/icon128.png'),
+    frame: false,
+    //titleBarStyle: 'customButtonsOnHover',
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL('file://' + __dirname + '/app.html'); // eslint-disable-line no-path-concat
+  mainWindow.webContents.executeJavaScript(
+    // We use this so that RN can keep relative JSX __source filenames
+    // but "click to open in editor" still works. js1 passes project roots
+    // as the argument to DevTools.
+    'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')'
+  );
+
+  if (argv.theme) {
+    mainWindow.webContents.executeJavaScript(
+      'window.devtools.setDefaultThemeName(' +
+        JSON.stringify(defaultThemeName) +
+        ')'
+    );
+  }
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function() {
+    mainWindow = null;
+  });
+});
diff --git a/packages/react-devtools/bin.js b/packages/react-devtools/bin.js
new file mode 100755
index 000000000000..55fd22c22ff4
--- /dev/null
+++ b/packages/react-devtools/bin.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+// @flow
+
+const electron = require('electron');
+const spawn = require('cross-spawn');
+const argv = process.argv.slice(2);
+const pkg = require('./package.json');
+const updateNotifier = require('update-notifier');
+
+// notify if there's an update
+updateNotifier({ pkg }).notify({ defer: false });
+
+const result = spawn.sync(electron, [require.resolve('./app')].concat(argv), {
+  stdio: 'ignore',
+});
+
+process.exit(result.status);
diff --git a/packages/react-devtools/icons/icon128.png b/packages/react-devtools/icons/icon128.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df
GIT binary patch
literal 4577
zcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)
zqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?
z@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni
z#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6
z=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=
zZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f
z4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@
zKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<
zp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!
zl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c
z=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh
zdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn
z_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6
z_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{
zOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa
zotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>
z>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=
z-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK
zmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;
zk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK
zAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV
zk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI
z{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w
z7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@
zBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov
z?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R
zna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7
zKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant
ziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz
zPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt
zyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J
zB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)
zWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC
z`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT
z$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(
z-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe
zo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven
zSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z
z67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb
zTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b
z#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&
zW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2
za`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y
zMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m
zjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@
zlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj
zR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h
z@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o
zRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y
zK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n
zdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV
zZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu
zI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M
zR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|
z2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o
zfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?
zQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3
z5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0
zOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4
zR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k
z?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E
zRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj
z^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud
zV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-
z`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%
zO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q
zDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P
z*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ
zSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^
zOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N
z>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`
zRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J
zzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|
zldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*
z0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?
z{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX
z0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj
z4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y
z^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`
zcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA
zR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA
zx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3
z^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U
zY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6
z3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I
z`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M
z!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000
LNkvXXu0mjfqT|45

literal 0
HcmV?d00001

diff --git a/packages/react-devtools/index.js b/packages/react-devtools/index.js
new file mode 100644
index 000000000000..9a48b9c2b69a
--- /dev/null
+++ b/packages/react-devtools/index.js
@@ -0,0 +1,7 @@
+// @flow
+
+const { connectToDevTools } = require('react-devtools-core/backend');
+
+// Connect immediately with default options.
+// If you need more control, use `react-devtools-core` directly instead of `react-devtools`.
+connectToDevTools();
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
new file mode 100644
index 000000000000..e16415d677a5
--- /dev/null
+++ b/packages/react-devtools/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "react-devtools",
+  "version": "4.0.0",
+  "description": "Use react-devtools outside of the browser",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/bvaughn/react-devtools-experimental.git",
+    "type": "git"
+  },
+  "bin": {
+    "react-devtools": "./bin.js"
+  },
+  "files": [
+    "bin.js",
+    "app.html",
+    "app.js",
+    "index.js",
+    "icons"
+  ],
+  "scripts": {
+    "start": "node bin.js"
+  },
+  "dependencies": {
+    "cross-spawn": "^5.0.1",
+    "electron": "^5.0.0",
+    "ip": "^1.1.4",
+    "minimist": "^1.2.0",
+    "react-devtools-core": "^4.0.0",
+    "update-notifier": "^2.1.0"
+  }
+}
diff --git a/shells/browser/shared/src/backend.js b/shells/browser/shared/src/backend.js
index 97f9e55d6efc..c8cee150d8cb 100644
--- a/shells/browser/shared/src/backend.js
+++ b/shells/browser/shared/src/backend.js
@@ -23,6 +23,8 @@ function setup(hook) {
   const Agent = require('src/backend/agent').default;
   const Bridge = require('src/bridge').default;
   const { initBackend } = require('src/backend');
+  const setupNativeStyleEditor = require('src/backend/NativeStyleEditor/setupNativeStyleEditor')
+    .default;
 
   const bridge = new Bridge({
     listen(fn) {
@@ -62,4 +64,14 @@ function setup(hook) {
   });
 
   initBackend(hook, agent, window);
+
+  // Setup React Native style editor if a renderer like react-native-web has injected it.
+  if (!!hook.resolveRNStyle) {
+    setupNativeStyleEditor(
+      bridge,
+      agent,
+      hook.resolveRNStyle,
+      hook.nativeStyleEditorValidAttributes
+    );
+  }
 }
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 320e20678f78..3d80e951ec0b 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -5,11 +5,7 @@ import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import inject from './inject';
-import {
-  createViewElementSource,
-  getBrowserName,
-  getBrowserTheme,
-} from './utils';
+import { createViewElementSource, getBrowserTheme } from './utils';
 import { getSavedComponentFilters } from 'src/utils';
 import {
   localStorageGetItem,
@@ -121,8 +117,6 @@ function createPanelIfReactLoaded() {
           localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
 
-        const browserName = getBrowserName();
-
         store = new Store(bridge, {
           isProfiling,
           supportsCaptureScreenshots: true,
@@ -135,7 +129,10 @@ function createPanelIfReactLoaded() {
         // Otherwise the Store may miss important initial tree op codes.
         inject(chrome.runtime.getURL('build/backend.js'));
 
-        const viewElementSource = createViewElementSource(bridge, store);
+        const viewElementSourceFunction = createViewElementSource(
+          bridge,
+          store
+        );
 
         root = createRoot(document.createElement('div'));
 
@@ -145,7 +142,6 @@ function createPanelIfReactLoaded() {
           root.render(
             createElement(DevTools, {
               bridge,
-              browserName,
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
               overrideTab,
@@ -153,7 +149,7 @@ function createPanelIfReactLoaded() {
               settingsPortalContainer,
               showTabBar: false,
               store,
-              viewElementSource,
+              viewElementSourceFunction,
             })
           );
         };
diff --git a/shells/browser/shared/src/utils.js b/shells/browser/shared/src/utils.js
index 0446ff9daf9a..c41924459659 100644
--- a/shells/browser/shared/src/utils.js
+++ b/shells/browser/shared/src/utils.js
@@ -23,11 +23,15 @@ export function createViewElementSource(bridge: Bridge, store: Store) {
   };
 }
 
-export function getBrowserName() {
+export type BrowserName = 'Chrome' | 'Firefox';
+
+export function getBrowserName(): BrowserName {
   return IS_CHROME ? 'Chrome' : 'Firefox';
 }
 
-export function getBrowserTheme() {
+export type BrowserTheme = 'dark' | 'light';
+
+export function getBrowserTheme(): BrowserTheme {
   if (IS_CHROME) {
     // chrome.devtools.panels added in Chrome 18.
     // chrome.devtools.panels.themeName added in Chrome 54.
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/shells/dev/app/InspectableElements/InspectableElements.js
index b148501ce11f..8917b3303735 100644
--- a/shells/dev/app/InspectableElements/InspectableElements.js
+++ b/shells/dev/app/InspectableElements/InspectableElements.js
@@ -5,6 +5,7 @@ import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';
 import NestedProps from './NestedProps';
+import SimpleValues from './SimpleValues';
 
 // TODO Add Immutable JS example
 
@@ -12,6 +13,7 @@ export default function InspectableElements() {
   return (
     <Fragment>
       <h1>Inspectable elements</h1>
+      <SimpleValues />
       <NestedProps />
       <Contexts />
       <CustomHooks />
diff --git a/shells/dev/app/InspectableElements/SimpleValues.js b/shells/dev/app/InspectableElements/SimpleValues.js
new file mode 100644
index 000000000000..43373d6095e7
--- /dev/null
+++ b/shells/dev/app/InspectableElements/SimpleValues.js
@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+
+export default function SimpleValues() {
+  return (
+    <ChildComponent
+      string="abc"
+      emptyString=""
+      number={123}
+      undefined={undefined}
+      null={null}
+      nan={NaN}
+      infinity={Infinity}
+      true={true}
+      false={false}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 0f35d726bdb0..6bf66cddcdd4 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -73,7 +73,6 @@ inject('dist/app.js', () => {
       batch.render(
         createElement(DevTools, {
           bridge,
-          browserName: 'Chrome',
           browserTheme: 'light',
           showTabBar: true,
           store,
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 1c9be05a4fa3..88d8e2dcea28 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -473,3 +473,26 @@ exports[`InspectedElementContext should support custom objects with enumerable p
   "state": null
 }
 `;
+
+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "events": null,
+  "hooks": null,
+  "props": {
+    "boolean_false": false,
+    "boolean_true": true,
+    "infinity": null,
+    "integer_zero": 0,
+    "integer_one": 1,
+    "float": 1.23,
+    "string": "abc",
+    "string_empty": "",
+    "nan": null,
+    "value_null": null
+  },
+  "state": null
+}
+`;
diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 85291acdac04..8485313a2989 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -1289,7 +1289,7 @@ Object {
   "interactionCommits": Map {},
   "interactions": Map {},
   "operations": Array [
-    Uint32Array [
+    Array [
       1,
       1,
       8,
@@ -1325,7 +1325,7 @@ Object {
       1,
       14000,
     ],
-    Uint32Array [
+    Array [
       1,
       1,
       0,
@@ -1345,7 +1345,7 @@ Object {
       1,
       11000,
     ],
-    Uint32Array [
+    Array [
       1,
       1,
       0,
@@ -1452,7 +1452,7 @@ Object {
   "interactionCommits": Map {},
   "interactions": Map {},
   "operations": Array [
-    Uint32Array [
+    Array [
       1,
       11,
       15,
@@ -1540,7 +1540,7 @@ Object {
   "interactionCommits": Map {},
   "interactions": Map {},
   "operations": Array [
-    Uint32Array [
+    Array [
       1,
       6,
       0,
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 105a23135f28..7e9ee97dc628 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -255,6 +255,72 @@ describe('InspectedElementContext', () => {
     done();
   });
 
+  it('should support simple data types', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          boolean_false={false}
+          boolean_true={true}
+          infinity={Infinity}
+          integer_zero={0}
+          integer_one={1}
+          float={1.23}
+          string="abc"
+          string_empty=""
+          nan={NaN}
+          value_null={null}
+          value_undefined={undefined}
+        />,
+        container
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const { props } = (inspectedElement: any);
+    expect(props.boolean_false).toBe(false);
+    expect(props.boolean_true).toBe(true);
+    expect(Number.isFinite(props.infinity)).toBe(false);
+    expect(props.integer_zero).toEqual(0);
+    expect(props.integer_one).toEqual(1);
+    expect(props.float).toEqual(1.23);
+    expect(props.string).toEqual('abc');
+    expect(props.string_empty).toEqual('');
+    expect(props.nan).toBeNaN();
+    expect(props.value_null).toBeNull();
+    expect(props.value_undefined).toBeUndefined();
+
+    done();
+  });
+
   it('should support complex data types', async done => {
     const Example = () => null;
 
diff --git a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
index db3aec6f2988..40d3ab5ed91d 100644
--- a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
@@ -165,3 +165,30 @@ Object {
 },
 }
 `;
+
+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "events": null,
+  "hooks": null,
+  "props": {
+    "boolean_false": false,
+    "boolean_true": true,
+    "infinity": null,
+    "integer_zero": 0,
+    "integer_one": 1,
+    "float": 1.23,
+    "string": "abc",
+    "string_empty": "",
+    "nan": null,
+    "value_null": null
+  },
+  "state": null
+},
+}
+`;
diff --git a/src/__tests__/legacy/inspectElement-test.js b/src/__tests__/legacy/inspectElement-test.js
index 23e384e52960..f71d22343f15 100644
--- a/src/__tests__/legacy/inspectElement-test.js
+++ b/src/__tests__/legacy/inspectElement-test.js
@@ -88,6 +88,49 @@ describe('InspectedElementContext', () => {
     done();
   });
 
+  it('should support simple data types', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          boolean_false={false}
+          boolean_true={true}
+          infinity={Infinity}
+          integer_zero={0}
+          integer_one={1}
+          float={1.23}
+          string="abc"
+          string_empty=""
+          nan={NaN}
+          value_null={null}
+          value_undefined={undefined}
+        />,
+        document.createElement('div')
+      )
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const { props } = inspectedElement.value;
+    expect(props.boolean_false).toBe(false);
+    expect(props.boolean_true).toBe(true);
+    expect(Number.isFinite(props.infinity)).toBe(false);
+    expect(props.integer_zero).toEqual(0);
+    expect(props.integer_one).toEqual(1);
+    expect(props.float).toEqual(1.23);
+    expect(props.string).toEqual('abc');
+    expect(props.string_empty).toEqual('');
+    expect(props.nan).toBeNaN();
+    expect(props.value_null).toBeNull();
+    expect(props.value_undefined).toBeUndefined();
+
+    done();
+  });
+
   it('should support complex data types', async done => {
     const Example = () => null;
 
diff --git a/src/backend/NativeStyleEditor/resolveBoxStyle.js b/src/backend/NativeStyleEditor/resolveBoxStyle.js
new file mode 100644
index 000000000000..0609272dc905
--- /dev/null
+++ b/src/backend/NativeStyleEditor/resolveBoxStyle.js
@@ -0,0 +1,85 @@
+// @flow
+
+import type { BoxStyle } from './types';
+
+/**
+ * This mirrors react-native/Libraries/Inspector/resolveBoxStyle.js (but without RTL support).
+ *
+ * Resolve a style property into it's component parts, e.g.
+ *
+ * resolveBoxStyle('margin', {margin: 5, marginBottom: 10})
+ * -> {top: 5, left: 5, right: 5, bottom: 10}
+ */
+export default function resolveBoxStyle(
+  prefix: string,
+  style: Object
+): BoxStyle | null {
+  let hasParts = false;
+  const result = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  };
+
+  const styleForAll = style[prefix];
+  if (styleForAll != null) {
+    for (const key of Object.keys(result)) {
+      result[key] = styleForAll;
+    }
+    hasParts = true;
+  }
+
+  const styleForHorizontal = style[prefix + 'Horizontal'];
+  if (styleForHorizontal != null) {
+    result.left = styleForHorizontal;
+    result.right = styleForHorizontal;
+    hasParts = true;
+  } else {
+    const styleForLeft = style[prefix + 'Left'];
+    if (styleForLeft != null) {
+      result.left = styleForLeft;
+      hasParts = true;
+    }
+
+    const styleForRight = style[prefix + 'Right'];
+    if (styleForRight != null) {
+      result.right = styleForRight;
+      hasParts = true;
+    }
+
+    const styleForEnd = style[prefix + 'End'];
+    if (styleForEnd != null) {
+      // TODO RTL support
+      result.right = styleForEnd;
+      hasParts = true;
+    }
+    const styleForStart = style[prefix + 'Start'];
+    if (styleForStart != null) {
+      // TODO RTL support
+      result.left = styleForStart;
+      hasParts = true;
+    }
+  }
+
+  const styleForVertical = style[prefix + 'Vertical'];
+  if (styleForVertical != null) {
+    result.bottom = styleForVertical;
+    result.top = styleForVertical;
+    hasParts = true;
+  } else {
+    const styleForBottom = style[prefix + 'Bottom'];
+    if (styleForBottom != null) {
+      result.bottom = styleForBottom;
+      hasParts = true;
+    }
+
+    const styleForTop = style[prefix + 'Top'];
+    if (styleForTop != null) {
+      result.top = styleForTop;
+      hasParts = true;
+    }
+  }
+
+  return hasParts ? result : null;
+}
diff --git a/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
new file mode 100644
index 000000000000..5880bbac4d40
--- /dev/null
+++ b/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -0,0 +1,315 @@
+// @flow
+
+import Agent from 'src/backend/agent';
+import Bridge from 'src/bridge';
+import resolveBoxStyle from './resolveBoxStyle';
+
+import type { RendererID } from '../types';
+import type { StyleAndLayout } from './types';
+
+export type ResolveNativeStyle = (stylesheetID: number) => ?Object;
+
+export default function setupNativeStyleEditor(
+  bridge: Bridge,
+  agent: Agent,
+  resolveNativeStyle: ResolveNativeStyle,
+  validAttributes?: $ReadOnlyArray<string> | null
+) {
+  bridge.addListener(
+    'NativeStyleEditor_measure',
+    ({ id, rendererID }: {| id: number, rendererID: RendererID |}) => {
+      measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
+    }
+  );
+
+  bridge.addListener(
+    'NativeStyleEditor_renameAttribute',
+    ({
+      id,
+      rendererID,
+      oldName,
+      newName,
+      value,
+    }: {|
+      id: number,
+      rendererID: RendererID,
+      oldName: string,
+      newName: string,
+      value: string,
+    |}) => {
+      renameStyle(agent, id, rendererID, oldName, newName, value);
+      setTimeout(() =>
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)
+      );
+    }
+  );
+
+  bridge.addListener(
+    'NativeStyleEditor_setValue',
+    ({
+      id,
+      rendererID,
+      name,
+      value,
+    }: {|
+      id: number,
+      rendererID: number,
+      name: string,
+      value: string,
+    |}) => {
+      setStyle(agent, id, rendererID, name, value);
+      setTimeout(() =>
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)
+      );
+    }
+  );
+
+  bridge.send('isNativeStyleEditorSupported', {
+    isSupported: true,
+    validAttributes,
+  });
+}
+
+const EMPTY_BOX_STYLE = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+const componentIDToStyleOverrides: Map<number, Object> = new Map();
+
+function measureStyle(
+  agent: Agent,
+  bridge: Bridge,
+  resolveNativeStyle: ResolveNativeStyle,
+  id: number,
+  rendererID: RendererID
+) {
+  const data = agent.getInstanceAndStyle({ id, rendererID });
+  if (!data || !data.style) {
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: null,
+        style: null,
+      }: StyleAndLayout)
+    );
+    return;
+  }
+
+  const { instance, style } = data;
+
+  let resolvedStyle = resolveNativeStyle(style);
+
+  // If it's a host component we edited before, amend styles.
+  const styleOverrides = componentIDToStyleOverrides.get(id);
+  if (styleOverrides != null) {
+    resolvedStyle = Object.assign({}, resolvedStyle, styleOverrides);
+  }
+
+  if (!instance || typeof instance.measure !== 'function') {
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: null,
+        style: resolvedStyle || null,
+      }: StyleAndLayout)
+    );
+    return;
+  }
+
+  // $FlowFixMe the parameter types of an unknown function are unknown
+  instance.measure((x, y, width, height, left, top) => {
+    // RN Android sometimes returns undefined here. Don't send measurements in this case.
+    // https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-304611817
+    if (typeof x !== 'number') {
+      bridge.send(
+        'NativeStyleEditor_styleAndLayout',
+        ({
+          id,
+          layout: null,
+          style: resolvedStyle || null,
+        }: StyleAndLayout)
+      );
+      return;
+    }
+    const margin = resolveBoxStyle('margin', resolvedStyle) || EMPTY_BOX_STYLE;
+    const padding =
+      resolveBoxStyle('padding', resolvedStyle) || EMPTY_BOX_STYLE;
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: {
+          x,
+          y,
+          width,
+          height,
+          left,
+          top,
+          margin,
+          padding,
+        },
+        style: resolvedStyle || null,
+      }: StyleAndLayout)
+    );
+  });
+}
+
+function shallowClone(object: Object): Object {
+  const cloned = {};
+  for (let n in object) {
+    cloned[n] = object[n];
+  }
+  return cloned;
+}
+
+function renameStyle(
+  agent: Agent,
+  id: number,
+  rendererID: RendererID,
+  oldName: string,
+  newName: string,
+  value: string
+): void {
+  const data = agent.getInstanceAndStyle({ id, rendererID });
+  if (!data || !data.style) {
+    return;
+  }
+
+  const { instance, style } = data;
+
+  const newStyle = newName
+    ? { [oldName]: undefined, [newName]: value }
+    : { [oldName]: undefined };
+
+  let customStyle;
+
+  // TODO It would be nice if the renderer interface abstracted this away somehow.
+  if (instance !== null && typeof instance.setNativeProps === 'function') {
+    // In the case of a host component, we need to use setNativeProps().
+    // Remember to "correct" resolved styles when we read them next time.
+    const styleOverrides = componentIDToStyleOverrides.get(id);
+    if (!styleOverrides) {
+      componentIDToStyleOverrides.set(id, newStyle);
+    } else {
+      Object.assign(styleOverrides, newStyle);
+    }
+    // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
+    instance.setNativeProps({ style: newStyle });
+  } else if (Array.isArray(style)) {
+    const lastIndex = style.length - 1;
+    if (
+      typeof style[lastIndex] === 'object' &&
+      !Array.isArray(style[lastIndex])
+    ) {
+      customStyle = shallowClone(style[lastIndex]);
+      delete customStyle[oldName];
+      if (newName) {
+        customStyle[newName] = value;
+      } else {
+        customStyle[oldName] = undefined;
+      }
+
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style', lastIndex],
+        value: customStyle,
+      });
+    } else {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style'],
+        value: style.concat([newStyle]),
+      });
+    }
+  } else if (typeof style === 'object') {
+    customStyle = shallowClone(style);
+    delete customStyle[oldName];
+    if (newName) {
+      customStyle[newName] = value;
+    } else {
+      customStyle[oldName] = undefined;
+    }
+
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: customStyle,
+    });
+  } else {
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: [style, newStyle],
+    });
+  }
+
+  agent.emit('hideNativeHighlight');
+}
+
+function setStyle(
+  agent: Agent,
+  id: number,
+  rendererID: RendererID,
+  name: string,
+  value: string
+) {
+  const data = agent.getInstanceAndStyle({ id, rendererID });
+  if (!data || !data.style) {
+    return;
+  }
+
+  const { instance, style } = data;
+  const newStyle = { [name]: value };
+
+  // TODO It would be nice if the renderer interface abstracted this away somehow.
+  if (instance !== null && typeof instance.setNativeProps === 'function') {
+    // In the case of a host component, we need to use setNativeProps().
+    // Remember to "correct" resolved styles when we read them next time.
+    const styleOverrides = componentIDToStyleOverrides.get(id);
+    if (!styleOverrides) {
+      componentIDToStyleOverrides.set(id, newStyle);
+    } else {
+      Object.assign(styleOverrides, newStyle);
+    }
+    // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
+    instance.setNativeProps({ style: newStyle });
+  } else if (Array.isArray(style)) {
+    const lastLength = style.length - 1;
+    if (
+      typeof style[lastLength] === 'object' &&
+      !Array.isArray(style[lastLength])
+    ) {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style', lastLength, name],
+        value,
+      });
+    } else {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style'],
+        value: style.concat([newStyle]),
+      });
+    }
+  } else {
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: [style, newStyle],
+    });
+  }
+
+  agent.emit('hideNativeHighlight');
+}
diff --git a/src/backend/NativeStyleEditor/types.js b/src/backend/NativeStyleEditor/types.js
new file mode 100644
index 000000000000..f7040cb8d304
--- /dev/null
+++ b/src/backend/NativeStyleEditor/types.js
@@ -0,0 +1,27 @@
+// @flow
+
+export type BoxStyle = $ReadOnly<{|
+  bottom: number,
+  left: number,
+  right: number,
+  top: number,
+|}>;
+
+export type Layout = {|
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  left: number,
+  top: number,
+  margin: BoxStyle,
+  padding: BoxStyle,
+|};
+
+export type Style = Object;
+
+export type StyleAndLayout = {|
+  id: number,
+  style: Style | null,
+  layout: Layout | null,
+|};
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 75ca51b2016c..abdd5ed37f6f 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -1,7 +1,6 @@
 // @flow
 
 import EventEmitter from 'events';
-import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import Bridge from 'src/bridge';
 import {
@@ -15,9 +14,11 @@ import {
   sessionStorageRemoveItem,
   sessionStorageSetItem,
 } from 'src/storage';
-import { hideOverlay, showOverlay } from './views/Highlighter';
+import setupHighlighter from './views/Highlighter';
 
 import type {
+  InstanceAndStyle,
+  NativeType,
   OwnersList,
   PathFrame,
   PathMatch,
@@ -75,6 +76,8 @@ type PersistedSelection = {|
 |};
 
 export default class Agent extends EventEmitter<{|
+  hideNativeHighlight: [],
+  showNativeHighlight: [NativeType],
   shutdown: [],
 |}> {
   _bridge: Bridge;
@@ -110,13 +113,8 @@ export default class Agent extends EventEmitter<{|
     this._bridge = bridge;
 
     bridge.addListener('captureScreenshot', this.captureScreenshot);
-    bridge.addListener(
-      'clearHighlightedElementInDOM',
-      this.clearHighlightedElementInDOM
-    );
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
-    bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);
     bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('logElementToConsole', this.logElementToConsole);
@@ -128,9 +126,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
     bridge.addListener('screenshotCaptured', this.screenshotCaptured);
     bridge.addListener('selectElement', this.selectElement);
-    bridge.addListener('startInspectingDOM', this.startInspectingDOM);
     bridge.addListener('startProfiling', this.startProfiling);
-    bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener(
       'syncSelectionFromNativeElementsPanel',
@@ -152,6 +148,12 @@ export default class Agent extends EventEmitter<{|
       isBackendStorageAPISupported = true;
     } catch (error) {}
     bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
+
+    setupHighlighter(bridge, this);
+  }
+
+  get rendererInterfaces(): { [key: RendererID]: RendererInterface } {
+    return this._rendererInterfaces;
   }
 
   captureScreenshot = ({
@@ -164,6 +166,18 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('captureScreenshot', { commitIndex, rootID });
   };
 
+  getInstanceAndStyle({
+    id,
+    rendererID,
+  }: ElementAndRendererID): InstanceAndStyle | null {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+      return null;
+    }
+    return renderer.getInstanceAndStyle(id);
+  }
+
   getIDForNode(node: Object): number | null {
     for (let rendererID in this._rendererInterfaces) {
       // A renderer will throw if it can't find a fiber for the specified node.
@@ -190,54 +204,6 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  clearHighlightedElementInDOM = () => {
-    hideOverlay();
-  };
-
-  highlightElementInDOM = ({
-    displayName,
-    hideAfterTimeout,
-    id,
-    openNativeElementsPanel,
-    rendererID,
-    scrollIntoView,
-  }: {
-    displayName: string,
-    hideAfterTimeout: boolean,
-    id: number,
-    openNativeElementsPanel: boolean,
-    rendererID: number,
-    scrollIntoView: boolean,
-  }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
-    }
-
-    let nodes: ?Array<HTMLElement> = null;
-    if (renderer !== null) {
-      nodes = ((renderer.findNativeNodesForFiberID(
-        id
-      ): any): ?Array<HTMLElement>);
-    }
-
-    if (nodes != null && nodes[0] != null) {
-      const node = nodes[0];
-      if (scrollIntoView && typeof node.scrollIntoView === 'function') {
-        // If the node isn't visible show it before highlighting it.
-        // We may want to reconsider this; it might be a little disruptive.
-        node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-      }
-      showOverlay(nodes, displayName, hideAfterTimeout);
-      if (openNativeElementsPanel) {
-        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
-        this._bridge.send('syncSelectionToNativeElementsPanel');
-      }
-    } else {
-      hideOverlay();
-    }
-  };
-
   getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -373,6 +339,13 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  selectNode(target: Object): void {
+    const id = this.getIDForNode(target);
+    if (id !== null) {
+      this._bridge.send('selectFiber', id);
+    }
+  }
+
   setRendererInterface(
     rendererID: RendererID,
     rendererInterface: RendererInterface
@@ -397,28 +370,14 @@ export default class Agent extends EventEmitter<{|
     if (target == null) {
       return;
     }
-    const id = this.getIDForNode(target);
-    if (id !== null) {
-      this._bridge.send('selectFiber', id);
-    }
+    this.selectNode(target);
   };
 
   shutdown = () => {
     // Clean up the overlay if visible, and associated events.
-    this.stopInspectingDOM();
     this.emit('shutdown');
   };
 
-  startInspectingDOM = () => {
-    window.addEventListener('click', this._onClick, true);
-    window.addEventListener('mousedown', this._onMouseEvent, true);
-    window.addEventListener('mouseover', this._onMouseEvent, true);
-    window.addEventListener('mouseup', this._onMouseEvent, true);
-    window.addEventListener('pointerdown', this._onPointerDown, true);
-    window.addEventListener('pointerover', this._onPointerOver, true);
-    window.addEventListener('pointerup', this._onPointerUp, true);
-  };
-
   startProfiling = (recordChangeDescriptions: boolean) => {
     this._recordChangeDescriptions = recordChangeDescriptions;
     this._isProfiling = true;
@@ -431,18 +390,6 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  stopInspectingDOM = () => {
-    hideOverlay();
-
-    window.removeEventListener('click', this._onClick, true);
-    window.removeEventListener('mousedown', this._onMouseEvent, true);
-    window.removeEventListener('mouseover', this._onMouseEvent, true);
-    window.removeEventListener('mouseup', this._onMouseEvent, true);
-    window.removeEventListener('pointerdown', this._onPointerDown, true);
-    window.removeEventListener('pointerover', this._onPointerOver, true);
-    window.removeEventListener('pointerup', this._onPointerUp, true);
-  };
-
   stopProfiling = () => {
     this._isProfiling = false;
     this._recordChangeDescriptions = false;
@@ -473,7 +420,7 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  onHookOperations = (operations: Uint32Array) => {
+  onHookOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       debug('onHookOperations', operations);
     }
@@ -505,80 +452,32 @@ export default class Agent extends EventEmitter<{|
       if (this._persistedSelection.rendererID === rendererID) {
         // Check if we can select a deeper match for the persisted selection.
         const renderer = this._rendererInterfaces[rendererID];
-        const prevMatch = this._persistedSelectionMatch;
-        const nextMatch = renderer.getBestMatchForTrackedPath();
-        this._persistedSelectionMatch = nextMatch;
-        const prevMatchID = prevMatch !== null ? prevMatch.id : null;
-        const nextMatchID = nextMatch !== null ? nextMatch.id : null;
-        if (prevMatchID !== nextMatchID) {
-          if (nextMatchID !== null) {
-            // We moved forward, unlocking a deeper node.
-            this._bridge.send('selectFiber', nextMatchID);
+        if (renderer == null) {
+          console.warn(`Invalid renderer id "${rendererID}"`);
+        } else {
+          const prevMatch = this._persistedSelectionMatch;
+          const nextMatch = renderer.getBestMatchForTrackedPath();
+          this._persistedSelectionMatch = nextMatch;
+          const prevMatchID = prevMatch !== null ? prevMatch.id : null;
+          const nextMatchID = nextMatch !== null ? nextMatch.id : null;
+          if (prevMatchID !== nextMatchID) {
+            if (nextMatchID !== null) {
+              // We moved forward, unlocking a deeper node.
+              this._bridge.send('selectFiber', nextMatchID);
+            }
+          }
+          if (nextMatch !== null && nextMatch.isFullMatch) {
+            // We've just unlocked the innermost selected node.
+            // There's no point tracking it further.
+            this._persistedSelection = null;
+            this._persistedSelectionMatch = null;
+            renderer.setTrackedPath(null);
           }
-        }
-        if (nextMatch !== null && nextMatch.isFullMatch) {
-          // We've just unlocked the innermost selected node.
-          // There's no point tracking it further.
-          this._persistedSelection = null;
-          this._persistedSelectionMatch = null;
-          renderer.setTrackedPath(null);
         }
       }
     }
   };
 
-  _onClick = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.stopInspectingDOM();
-
-    this._bridge.send('stopInspectingDOM', true);
-  };
-
-  _onMouseEvent = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  _onPointerDown = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this._selectFiberForNode(((event.target: any): HTMLElement));
-  };
-
-  _onPointerOver = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const target = ((event.target: any): HTMLElement);
-
-    // Don't pass the name explicitly.
-    // It will be inferred from DOM tag and Fiber owner.
-    showOverlay([target], null, false);
-
-    this._selectFiberForNode(target);
-  };
-
-  _onPointerUp = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  _selectFiberForNode = throttle(
-    memoize((node: HTMLElement) => {
-      const id = this.getIDForNode(node);
-      if (id !== null) {
-        this._bridge.send('selectFiber', id);
-      }
-    }),
-    200,
-    // Don't change the selection in the very first 200ms
-    // because those are usually unintentional as you lift the cursor.
-    { leading: false }
-  );
-
   _throttledPersistSelection = throttle((rendererID: number, id: number) => {
     // This is throttled, so both renderer and selected ID
     // might not be available by the time we read them.
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 2e22bc73375c..96517385bc9b 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -22,6 +22,7 @@ import type {
   DevToolsHook,
   GetFiberIDForNative,
   InspectedElementPayload,
+  InstanceAndStyle,
   NativeType,
   PathFrame,
   PathMatch,
@@ -456,7 +457,7 @@ export function attach(
     const numUnmountIDs =
       pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
 
-    const operations = new Uint32Array(
+    const operations = new Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
       // How big is the string table?
@@ -482,7 +483,10 @@ export function attach(
     operations[i++] = pendingStringTableLength;
     pendingStringTable.forEach((value, key) => {
       operations[i++] = key.length;
-      operations.set(utfEncodeString(key), i);
+      const encodedKey = utfEncodeString(key);
+      for (let j = 0; j < encodedKey.length; j++) {
+        operations[i + j] = encodedKey[j];
+      }
       i += key.length;
     });
 
@@ -503,7 +507,9 @@ export function attach(
     }
 
     // Fill in the rest of the operations.
-    operations.set(pendingOperations, i);
+    for (let j = 0; j < pendingOperations.length; j++) {
+      operations[i + j] = pendingOperations[j];
+    }
     i += pendingOperations.length;
 
     if (__DEBUG__) {
@@ -582,6 +588,27 @@ export function attach(
     };
   }
 
+  // Fast path props lookup for React Native style editor.
+  function getInstanceAndStyle(id: number): InstanceAndStyle {
+    let instance = null;
+    let style = null;
+
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      instance = internalInstance._instance || null;
+
+      const element = internalInstance._currentElement;
+      if (element != null && element.props != null) {
+        style = element.props.style || null;
+      }
+    }
+
+    return {
+      instance,
+      style,
+    };
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>
@@ -879,6 +906,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getFiberIDForNative: getInternalIDForNative,
+    getInstanceAndStyle,
     findNativeNodesForFiberID: (id: number) => {
       const nativeNode = findNativeNodeForInternalID(id);
       return nativeNode == null ? null : [nativeNode];
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index a021dd74ad8a..dbb91eec68cd 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -47,6 +47,7 @@ import type {
   Fiber,
   InspectedElement,
   InspectedElementPayload,
+  InstanceAndStyle,
   Owner,
   PathFrame,
   PathMatch,
@@ -856,7 +857,7 @@ export function attach(
   let pendingOperations: Array<number> = [];
   let pendingRealUnmountedIDs: Array<number> = [];
   let pendingSimulatedUnmountedIDs: Array<number> = [];
-  let pendingOperationsQueue: Array<Uint32Array> | null = [];
+  let pendingOperationsQueue: Array<Array<number>> | null = [];
   let pendingStringTable: Map<string, number> = new Map();
   let pendingStringTableLength: number = 0;
   let pendingUnmountedRootID: number | null = null;
@@ -893,7 +894,7 @@ export function attach(
       pendingSimulatedUnmountedIDs.length +
       (pendingUnmountedRootID === null ? 0 : 1);
 
-    const operations = new Uint32Array(
+    const operations = new Array(
       // Identify which renderer this update is coming from.
       2 + // [rendererID, rootFiberID]
       // How big is the string table?
@@ -919,7 +920,10 @@ export function attach(
     operations[i++] = pendingStringTableLength;
     pendingStringTable.forEach((value, key) => {
       operations[i++] = key.length;
-      operations.set(utfEncodeString(key), i);
+      const encodedKey = utfEncodeString(key);
+      for (let j = 0; j < encodedKey.length; j++) {
+        operations[i + j] = encodedKey[j];
+      }
       i += key.length;
     });
 
@@ -939,7 +943,9 @@ export function attach(
       // They go *after* the real unmounts because we know for sure they won't be
       // children of already pushed "real" IDs. If they were, we wouldn't be able
       // to discover them during the traversal, as they would have been deleted.
-      operations.set(pendingSimulatedUnmountedIDs, i);
+      for (let j = 0; j < pendingSimulatedUnmountedIDs.length; j++) {
+        operations[i + j] = pendingSimulatedUnmountedIDs[j];
+      }
       i += pendingSimulatedUnmountedIDs.length;
       // The root ID should always be unmounted last.
       if (pendingUnmountedRootID !== null) {
@@ -948,7 +954,10 @@ export function attach(
       }
     }
     // Fill in the rest of the operations.
-    operations.set(pendingOperations, i);
+    for (let j = 0; j < pendingOperations.length; j++) {
+      operations[i + j] = pendingOperations[j];
+    }
+    i += pendingOperations.length;
 
     // Let the frontend know about tree operations.
     // The first value in this array will identify which root it corresponds to,
@@ -1969,6 +1978,22 @@ export function attach(
     return owners;
   }
 
+  // Fast path props lookup for React Native style editor.
+  // Could use inspectElementRaw() but that would require shallow rendering hooks components,
+  // and could also mess with memoization.
+  function getInstanceAndStyle(id: number): InstanceAndStyle {
+    let instance = null;
+    let style = null;
+
+    let fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      instance = fiber.stateNode;
+      style = fiber.memoizedProps.style;
+    }
+
+    return { instance, style };
+  }
+
   function inspectElementRaw(id: number): InspectedElement | null {
     let fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
@@ -2837,6 +2862,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getFiberIDForNative,
+    getInstanceAndStyle,
     getOwnersList,
     getPathForElement,
     getProfilingData,
diff --git a/src/backend/types.js b/src/backend/types.js
index b9e3a8521e29..59791db472ae 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -2,6 +2,7 @@
 
 import type { ComponentFilter, ElementType } from 'src/types';
 import type { Interaction } from 'src/devtools/views/Profiler/types';
+import type { ResolveNativeStyle } from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 type BundleType =
   | 0 // PROD
@@ -249,12 +250,18 @@ export type InspectedElementPayload =
   | InspectElementNoChange
   | InspectElementNotFound;
 
+export type InstanceAndStyle = {|
+  instance: Object | null,
+  style: Object | null,
+|};
+
 export type RendererInterface = {
   cleanup: () => void,
   findNativeNodesForFiberID: FindNativeNodesForFiberID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
   getFiberIDForNative: GetFiberIDForNative,
+  getInstanceAndStyle(id: number): InstanceAndStyle,
   getProfilingData(): ProfilingDataBackend,
   getOwnersList: (id: number) => Array<Owner> | null,
   getPathForElement: (id: number) => Array<PathFrame> | null,
@@ -299,6 +306,10 @@ export type DevToolsHook = {
   reactDevtoolsAgent?: ?Object,
   sub: (event: string, handler: Handler) => () => void,
 
+  // Used by react-native-web and Flipper/Inspector
+  resolveRNStyle?: ResolveNativeStyle,
+  nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
+
   // React uses these methods.
   checkDCE: (fn: Function) => void,
   onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,
diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter/Highlighter.js
similarity index 86%
rename from src/backend/views/Highlighter.js
rename to src/backend/views/Highlighter/Highlighter.js
index 9445d838e3de..1d838f8c124f 100644
--- a/src/backend/views/Highlighter.js
+++ b/src/backend/views/Highlighter/Highlighter.js
@@ -21,6 +21,11 @@ export function showOverlay(
   componentName: string | null,
   hideAfterTimeout: boolean
 ) {
+  // TODO (npm-packages) Detect RN and support it somehow
+  if (window.document == null) {
+    return;
+  }
+
   if (timeoutID !== null) {
     clearTimeout(timeoutID);
   }
diff --git a/src/backend/views/Overlay.js b/src/backend/views/Highlighter/Overlay.js
similarity index 100%
rename from src/backend/views/Overlay.js
rename to src/backend/views/Highlighter/Overlay.js
diff --git a/src/backend/views/Highlighter/index.js b/src/backend/views/Highlighter/index.js
new file mode 100644
index 000000000000..3096b6fab3eb
--- /dev/null
+++ b/src/backend/views/Highlighter/index.js
@@ -0,0 +1,142 @@
+// @flow
+
+import memoize from 'memoize-one';
+import throttle from 'lodash.throttle';
+import Bridge from 'src/bridge';
+import Agent from 'src/backend/agent';
+import { hideOverlay, showOverlay } from './Highlighter';
+
+export default function setup(bridge: Bridge, agent: Agent): void {
+  bridge.addListener(
+    'clearNativeElementHighlight',
+    clearNativeElementHighlight
+  );
+  bridge.addListener('highlightNativeElement', highlightNativeElement);
+  bridge.addListener('shutdown', stopInspectingNative);
+  bridge.addListener('startInspectingNative', startInspectingNative);
+  bridge.addListener('stopInspectingNative', stopInspectingNative);
+
+  function startInspectingNative() {
+    window.addEventListener('click', onClick, true);
+    window.addEventListener('mousedown', onMouseEvent, true);
+    window.addEventListener('mouseover', onMouseEvent, true);
+    window.addEventListener('mouseup', onMouseEvent, true);
+    window.addEventListener('pointerdown', onPointerDown, true);
+    window.addEventListener('pointerover', onPointerOver, true);
+    window.addEventListener('pointerup', onPointerUp, true);
+  }
+
+  function stopInspectingNative() {
+    hideOverlay();
+
+    window.removeEventListener('click', onClick, true);
+    window.removeEventListener('mousedown', onMouseEvent, true);
+    window.removeEventListener('mouseover', onMouseEvent, true);
+    window.removeEventListener('mouseup', onMouseEvent, true);
+    window.removeEventListener('pointerdown', onPointerDown, true);
+    window.removeEventListener('pointerover', onPointerOver, true);
+    window.removeEventListener('pointerup', onPointerUp, true);
+  }
+
+  function clearNativeElementHighlight() {
+    hideOverlay();
+  }
+
+  function highlightNativeElement({
+    displayName,
+    hideAfterTimeout,
+    id,
+    openNativeElementsPanel,
+    rendererID,
+    scrollIntoView,
+  }: {
+    displayName: string,
+    hideAfterTimeout: boolean,
+    id: number,
+    openNativeElementsPanel: boolean,
+    rendererID: number,
+    scrollIntoView: boolean,
+  }) {
+    const renderer = agent.rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    }
+
+    let nodes: ?Array<HTMLElement> = null;
+    if (renderer !== null) {
+      nodes = ((renderer.findNativeNodesForFiberID(
+        id
+      ): any): ?Array<HTMLElement>);
+    }
+
+    if (nodes != null && nodes[0] != null) {
+      const node = nodes[0];
+      if (scrollIntoView && typeof node.scrollIntoView === 'function') {
+        // If the node isn't visible show it before highlighting it.
+        // We may want to reconsider this; it might be a little disruptive.
+        node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+
+      showOverlay(nodes, displayName, hideAfterTimeout);
+
+      if (openNativeElementsPanel) {
+        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        bridge.send('syncSelectionToNativeElementsPanel');
+      }
+    } else {
+      hideOverlay();
+    }
+  }
+
+  function onClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    stopInspectingNative();
+
+    bridge.send('stopInspectingNative', true);
+  }
+
+  function onMouseEvent(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function onPointerDown(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    selectFiberForNode(((event.target: any): HTMLElement));
+  }
+
+  function onPointerOver(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = ((event.target: any): HTMLElement);
+
+    // Don't pass the name explicitly.
+    // It will be inferred from DOM tag and Fiber owner.
+    showOverlay([target], null, false);
+
+    selectFiberForNode(target);
+  }
+
+  function onPointerUp(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  const selectFiberForNode = throttle(
+    memoize((node: HTMLElement) => {
+      const id = agent.getIDForNode(node);
+      if (id !== null) {
+        bridge.send('selectFiber', id);
+      }
+    }),
+    200,
+    // Don't change the selection in the very first 200ms
+    // because those are usually unintentional as you lift the cursor.
+    { leading: false }
+  );
+}
diff --git a/src/bridge.js b/src/bridge.js
index 1d08474e3983..d9db3b6318f1 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -9,6 +9,7 @@ import type {
   ProfilingDataBackend,
   RendererID,
 } from 'src/backend/types';
+import type { StyleAndLayout as StyleAndLayoutPayload } from 'src/backend/NativeStyleEditor/types';
 
 const BATCH_DURATION = 100;
 
@@ -48,20 +49,34 @@ type InspectElementParams = {|
   path?: Array<string | number>,
 |};
 
+type NativeStyleEditor_RenameAttributeParams = {|
+  ...ElementAndRendererID,
+  oldName: string,
+  newName: string,
+  value: string,
+|};
+
+type NativeStyleEditor_SetValueParams = {|
+  ...ElementAndRendererID,
+  name: string,
+  value: string,
+|};
+
 export default class Bridge extends EventEmitter<{|
   captureScreenshot: [{| commitIndex: number, rootID: number |}],
-  clearHighlightedElementInDOM: [],
+  clearNativeElementHighlight: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{| rendererID: RendererID |}],
   getProfilingStatus: [],
-  highlightElementInDOM: [HighlightElementInDOM],
+  highlightNativeElement: [HighlightElementInDOM],
   init: [],
   inspectElement: [InspectElementParams],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   logElementToConsole: [ElementAndRendererID],
-  operations: [Uint32Array],
+  operations: [Array<number>],
   ownersList: [OwnersList],
+  overrideComponentFilters: [Array<ComponentFilter>],
   overrideContext: [OverrideValue],
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],
@@ -77,14 +92,23 @@ export default class Bridge extends EventEmitter<{|
   selectElement: [ElementAndRendererID],
   selectFiber: [number],
   shutdown: [],
-  startInspectingDOM: [],
+  startInspectingNative: [],
   startProfiling: [boolean],
-  stopInspectingDOM: [boolean],
+  stopInspectingNative: [boolean],
   stopProfiling: [],
   syncSelectionFromNativeElementsPanel: [],
   syncSelectionToNativeElementsPanel: [],
   updateComponentFilters: [Array<ComponentFilter>],
   viewElementSource: [ElementAndRendererID],
+
+  // React Native style editor plug-in.
+  isNativeStyleEditorSupported: [
+    {| isSupported: boolean, validAttributes: $ReadOnlyArray<string> |},
+  ],
+  NativeStyleEditor_measure: [ElementAndRendererID],
+  NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],
+  NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],
+  NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
 |}> {
   _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index 1f20fa2a051c..bf2e8544a3f6 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -60,7 +60,7 @@ export default class ProfilerStore extends EventEmitter<{|
   //
   // This map is only updated while profiling is in progress;
   // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
-  _inProgressOperationsByRootID: Map<number, Array<Uint32Array>> = new Map();
+  _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();
 
   // Map of root (id) to a Map of screenshots by commit ID.
   // Stores screenshots for each commit (when profiling).
@@ -228,12 +228,7 @@ export default class ProfilerStore 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));
-    }
-
+  onBridgeOperations = (operations: Array<number>) => {
     // The first two values are always rendererID and rootID
     const rendererID = operations[0];
     const rootID = operations[1];
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 76ef1544e8ff..2c778a0ccd00 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -46,6 +46,7 @@ const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
 type Config = {|
   isProfiling?: boolean,
   supportsCaptureScreenshots?: boolean,
+  supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
 |};
@@ -66,6 +67,7 @@ export default class Store extends EventEmitter<{|
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
+  supportsNativeStyleEditor: [],
   supportsProfiling: [],
   supportsReloadAndProfile: [],
 |}> {
@@ -86,10 +88,15 @@ export default class Store extends EventEmitter<{|
   // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
+  // Should the React Native style editor panel be shown?
+  _isNativeStyleEditorSupported: boolean = false;
+
   // Can the backend use the Storage API (e.g. localStorage)?
   // If not, features like reload-and-profile will not work correctly and must be disabled.
   _isBackendStorageAPISupported: boolean = false;
 
+  _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;
+
   // Map of element (id) to the set of elements (ids) it owns.
   // This map enables getOwnersListForElement() to avoid traversing the entire tree.
   _ownersMap: Map<number, Set<number>> = new Map();
@@ -114,6 +121,7 @@ export default class Store extends EventEmitter<{|
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
   _supportsCaptureScreenshots: boolean = false;
+  _supportsNativeInspection: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 
@@ -145,6 +153,7 @@ export default class Store extends EventEmitter<{|
 
       const {
         supportsCaptureScreenshots,
+        supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
@@ -153,6 +162,7 @@ export default class Store extends EventEmitter<{|
         this._captureScreenshots =
           localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
       }
+      this._supportsNativeInspection = supportsNativeInspection !== false;
       if (supportsProfiling) {
         this._supportsProfiling = true;
       }
@@ -163,11 +173,19 @@ export default class Store extends EventEmitter<{|
 
     this._bridge = bridge;
     bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener(
+      'overrideComponentFilters',
+      this.onBridgeOverrideComponentFilters
+    );
     bridge.addListener('shutdown', this.onBridgeShutdown);
     bridge.addListener(
       'isBackendStorageAPISupported',
       this.onBridgeStorageSupported
     );
+    bridge.addListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported
+    );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
@@ -283,6 +301,10 @@ export default class Store extends EventEmitter<{|
     return this._hasOwnerMetadata;
   }
 
+  get nativeStyleEditorValidAttributes(): $ReadOnlyArray<string> | null {
+    return this._nativeStyleEditorValidAttributes;
+  }
+
   get numElements(): number {
     return this._weightAcrossRoots;
   }
@@ -321,6 +343,14 @@ export default class Store extends EventEmitter<{|
     return this._supportsCaptureScreenshots;
   }
 
+  get supportsNativeInspection(): boolean {
+    return this._supportsNativeInspection;
+  }
+
+  get supportsNativeStyleEditor(): boolean {
+    return this._isNativeStyleEditorSupported;
+  }
+
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
@@ -666,12 +696,20 @@ 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));
-    }
+  onBridgeNativeStyleEditorSupported = ({
+    isSupported,
+    validAttributes,
+  }: {|
+    isSupported: boolean,
+    validAttributes: $ReadOnlyArray<string>,
+  |}) => {
+    this._isNativeStyleEditorSupported = isSupported;
+    this._nativeStyleEditorValidAttributes = validAttributes || null;
+
+    this.emit('supportsNativeStyleEditor');
+  };
 
+  onBridgeOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');
       debug('onBridgeOperations', operations.join(','));
@@ -965,6 +1003,19 @@ export default class Store extends EventEmitter<{|
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
+  // Certain backends save filters on a per-domain basis.
+  // In order to prevent filter preferences and applied filters from being out of sync,
+  // this message enables the backend to override the frontend's current ("saved") filters.
+  // This action should also override the saved filters too,
+  // else reloading the frontend without reloading the backend would leave things out of sync.
+  onBridgeOverrideComponentFilters = (
+    componentFilters: Array<ComponentFilter>
+  ) => {
+    this._componentFilters = componentFilters;
+
+    saveComponentFilters(componentFilters);
+  };
+
   onBridgeShutdown = () => {
     if (__DEBUG__) {
       debug('onBridgeShutdown', 'unsubscribing from Bridge');
diff --git a/src/devtools/views/Components/Components.css b/src/devtools/views/Components/Components.css
index 0cecdd905616..f37b3eaa73d3 100644
--- a/src/devtools/views/Components/Components.css
+++ b/src/devtools/views/Components/Components.css
@@ -24,6 +24,14 @@
   .Components {
     flex-direction: column;
   }
+
+  .TreeWrapper {
+    flex: 0 0 50%;
+  }
+
+  .SelectedElementWrapper {
+    flex: 0 0 50%;
+  }
 }
 
 .Loading {
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 997d051678c4..2623041e0c4a 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -4,6 +4,7 @@ import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import { InspectedElementContextController } from './InspectedElementContext';
+import { NativeStyleContextController } from './NativeStyleEditor/context';
 import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
 import { ModalDialog } from '../ModalDialog';
@@ -23,9 +24,11 @@ function Components(_: {||}) {
               <Tree />
             </div>
             <div className={styles.SelectedElementWrapper}>
-              <Suspense fallback={<Loading />}>
-                <SelectedElement />
-              </Suspense>
+              <NativeStyleContextController>
+                <Suspense fallback={<Loading />}>
+                  <SelectedElement />
+                </Suspense>
+              </NativeStyleContextController>
             </div>
             <ModalDialog />
             <SettingsModal />
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index bd5a42c7be8a..97baeb888c93 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -22,10 +22,6 @@
   user-select: none;
 }
 
-.Bracket {
-  color: var(--color-jsx-arrow-brackets);
-}
-
 .ScrollAnchor {
   height: 100%;
   width: 0;
@@ -42,7 +38,6 @@
     --color-component-badge-background-inverted
   );
   --color-component-badge-count: var(--color-component-badge-count-inverted);
-  --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index ca3a64ceddbb..67cc721e6cd2 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -119,7 +119,6 @@ export default function ElementView({ data, index, style }: Props) {
         {ownerID === null ? (
           <ExpandCollapseToggle element={element} store={store} />
         ) : null}
-        <span className={styles.Bracket}>&lt;</span>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>
@@ -129,7 +128,6 @@ export default function ElementView({ data, index, style }: Props) {
             </span>
           </Fragment>
         )}
-        <span className={styles.Bracket}>&gt;</span>
         <Badge
           className={styles.Badge}
           hocDisplayNames={hocDisplayNames}
diff --git a/src/devtools/views/Components/InspectHostNodesToggle.js b/src/devtools/views/Components/InspectHostNodesToggle.js
index c0893f7fa386..06fad24c1097 100644
--- a/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -14,19 +14,19 @@ export default function InspectHostNodesToggle() {
       setIsInspecting(isChecked);
 
       if (isChecked) {
-        bridge.send('startInspectingDOM');
+        bridge.send('startInspectingNative');
       } else {
-        bridge.send('stopInspectingDOM', false);
+        bridge.send('stopInspectingNative', false);
       }
     },
     [bridge]
   );
 
   useEffect(() => {
-    const onStopInspectingDOM = () => setIsInspecting(false);
-    bridge.addListener('stopInspectingDOM', onStopInspectingDOM);
+    const onStopInspectingNative = () => setIsInspecting(false);
+    bridge.addListener('stopInspectingNative', onStopInspectingNative);
     return () =>
-      bridge.removeListener('stopInspectingDOM', onStopInspectingDOM);
+      bridge.removeListener('stopInspectingNative', onStopInspectingNative);
   }, [bridge]);
 
   return (
diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
new file mode 100644
index 000000000000..d231c8b8af02
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
@@ -0,0 +1,26 @@
+.Input {
+  width: 0;
+  min-width: 0.5rem;
+  flex: 1 1 auto;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0;
+  border: none;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Input:focus {
+  border-color: var(--color-border);
+}
+
+.HiddenDiv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  height: 0;
+  overflow: scroll;
+  white-space: pre;
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
new file mode 100644
index 000000000000..f2eb4f4cb6b0
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -0,0 +1,93 @@
+// @flow
+
+import React, { Fragment, useLayoutEffect, useRef } from 'react';
+import styles from './AutoSizeInput.css';
+
+type Props = {
+  className?: string,
+  onFocus?: (event: FocusEvent) => void,
+  placeholder?: string,
+  value: any,
+};
+
+export default function AutoSizeInput({
+  className,
+  onFocus,
+  placeholder,
+  value,
+  ...rest
+}: Props) {
+  const hiddenDivRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const onFocusWrapper = event => {
+    if (inputRef.current !== null) {
+      inputRef.current.selectionStart = 0;
+      inputRef.current.selectionEnd = value.length;
+    }
+
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
+  };
+
+  // Copy text stlyes from <input> to hidden sizing <div>
+  useLayoutEffect(() => {
+    if (
+      typeof window.getComputedStyle !== 'function' ||
+      inputRef.current === null
+    ) {
+      return;
+    }
+
+    const inputStyle = window.getComputedStyle(inputRef.current);
+    if (!inputStyle) {
+      return;
+    }
+
+    if (hiddenDivRef.current !== null) {
+      const divStyle = hiddenDivRef.current.style;
+      divStyle.border = inputStyle.border;
+      divStyle.fontFamily = inputStyle.fontFamily;
+      divStyle.fontSize = inputStyle.fontSize;
+      divStyle.fontStyle = inputStyle.fontStyle;
+      divStyle.fontWeight = inputStyle.fontWeight;
+      divStyle.letterSpacing = inputStyle.letterSpacing;
+      divStyle.padding = inputStyle.padding;
+    }
+  }, []);
+
+  // Resize input any time text changes
+  useLayoutEffect(() => {
+    if (hiddenDivRef.current === null) {
+      return;
+    }
+
+    const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;
+    if (!scrollWidth) {
+      return;
+    }
+
+    if (inputRef.current !== null) {
+      inputRef.current.style.width = `${scrollWidth}px`;
+    }
+  }, [value]);
+
+  const isEmpty = value === '' || value === '""';
+
+  return (
+    <Fragment>
+      <input
+        ref={inputRef}
+        className={`${className ? className : ''} ${styles.Input}`}
+        onFocus={onFocusWrapper}
+        placeholder={placeholder}
+        value={isEmpty ? '' : value}
+        {...rest}
+      />
+      <div ref={hiddenDivRef} className={styles.HiddenDiv}>
+        {isEmpty ? placeholder : value}
+      </div>
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css b/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
new file mode 100644
index 000000000000..d21b49197a19
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
@@ -0,0 +1,50 @@
+.LayoutViewer {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
+
+.Header {
+  font-family: var(--font-family-sans);
+}
+
+.DashedBox,
+.SolidBox {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-width: 1px;
+  border-color: var(--color-dim);
+  padding: 0.25rem;
+  margin: 0.25rem;
+}
+.DashedBox {
+  border-style: dashed;
+}
+.SolidBox {
+  border-style: solid;
+}
+
+.LabelRow {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Label {
+  position: absolute;
+  left: 0.5rem;
+  flex: 1 0 100px;
+  color: var(--color-attribute-name);
+}
+
+.BoxRow {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
new file mode 100644
index 000000000000..1a4724801144
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -0,0 +1,64 @@
+// @flow
+
+import React from 'react';
+import styles from './LayoutViewer.css';
+
+import type { Layout } from './types';
+
+type Props = {|
+  id: number,
+  layout: Layout,
+|};
+
+export default function LayoutViewer({ id, layout }: Props) {
+  const { height, margin, padding, y, width, x } = layout;
+
+  return (
+    <div className={styles.LayoutViewer}>
+      <div className={styles.Header}>layout</div>
+      <div className={styles.DashedBox}>
+        <div className={styles.LabelRow}>
+          <label className={styles.Label}>margin</label>
+
+          <label>{margin.top || '-'}</label>
+        </div>
+
+        <div className={styles.BoxRow}>
+          <label>{margin.left || '-'}</label>
+
+          <div className={styles.SolidBox}>
+            <div className={styles.LabelRow}>
+              <label className={styles.Label}>padding</label>
+
+              <label>{padding.top || '-'}</label>
+            </div>
+
+            <div className={styles.BoxRow}>
+              <label>{padding.left || '-'}</label>
+
+              <div className={styles.DashedBox}>
+                <div className={styles.LabelRow}>
+                  {format(width)} x {format(height)} ({format(x)}, {format(y)})
+                </div>
+              </div>
+
+              <label>{padding.right || '-'}</label>
+            </div>
+
+            <label>{padding.bottom || '-'}</label>
+          </div>
+          <label>{margin.right || '-'}</label>
+        </div>
+        <label>{margin.bottom || '-'}</label>
+      </div>
+    </div>
+  );
+}
+
+function format(number: number): string | number {
+  if (Math.round(number) === number) {
+    return number;
+  } else {
+    return number.toFixed(1);
+  }
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
new file mode 100644
index 000000000000..a097665581b7
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -0,0 +1,52 @@
+.StyleEditor {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  flex: 1 1;
+}
+
+.Brackets {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-small);
+}
+
+.Row {
+  white-space: nowrap;
+  padding-left: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.Invalid {
+  background-color: var(--color-background-invalid);
+  color: var(--color-text-invalid);
+
+  --color-border: var(--color-text-invalid);
+}
+.Attribute {
+  color: var(--color-attribute-name);
+}
+
+.Value {
+  color: var(--color-attribute-value);
+}
+
+.Input {
+  flex: 0 1 auto;
+}
+
+.Empty {
+  color: var(--color-dimmer);
+  font-style: italic;
+  user-select: none;
+  padding-left: 1rem;
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
new file mode 100644
index 000000000000..570f473355ee
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -0,0 +1,278 @@
+// @flow
+
+import React, { useContext, useMemo, useRef, useState } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { copy } from 'clipboard-js';
+import { BridgeContext, StoreContext } from 'src/devtools/views/context';
+import Button from '../../Button';
+import ButtonIcon from '../../ButtonIcon';
+import { serializeDataForCopy } from '../../utils';
+import AutoSizeInput from './AutoSizeInput';
+import styles from './StyleEditor.css';
+
+import type { Style } from './types';
+
+type Props = {|
+  id: number,
+  style: Style,
+|};
+
+type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
+type ChangeValueFn = (name: string, value: any) => void;
+
+export default function StyleEditor({ id, style }: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const changeAttribute = (oldName: string, newName: string, value: any) => {
+    bridge.send('NativeStyleEditor_renameAttribute', {
+      id,
+      rendererID: store.getRendererIDForElement(id),
+      oldName,
+      newName,
+      value,
+    });
+  };
+
+  const changeValue = (name: string, value: any) => {
+    bridge.send('NativeStyleEditor_setValue', {
+      id,
+      rendererID: store.getRendererIDForElement(id),
+      name,
+      value,
+    });
+  };
+
+  const keys = useMemo(() => Array.from(Object.keys(style)), [style]);
+
+  const handleCopy = () => copy(serializeDataForCopy(style));
+
+  return (
+    <div className={styles.StyleEditor}>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>
+          <div className={styles.Brackets}>{'style {'}</div>
+        </div>
+        <Button onClick={handleCopy} title="Copy to clipboard">
+          <ButtonIcon type="copy" />
+        </Button>
+      </div>
+      {keys.length > 0 &&
+        keys.map(attribute => (
+          <Row
+            key={attribute}
+            attribute={attribute}
+            changeAttribute={changeAttribute}
+            changeValue={changeValue}
+            validAttributes={store.nativeStyleEditorValidAttributes}
+            value={style[attribute]}
+          />
+        ))}
+      <NewRow
+        changeAttribute={changeAttribute}
+        changeValue={changeValue}
+        validAttributes={store.nativeStyleEditorValidAttributes}
+      />
+      <div className={styles.Brackets}>{'}'}</div>
+    </div>
+  );
+}
+
+type NewRowProps = {|
+  changeAttribute: ChangeAttributeFn,
+  changeValue: ChangeValueFn,
+  validAttributes: $ReadOnlyArray<string> | null,
+|};
+
+function NewRow({
+  changeAttribute,
+  changeValue,
+  validAttributes,
+}: NewRowProps) {
+  const [key, setKey] = useState<number>(0);
+  const reset = () => setKey(key + 1);
+
+  const newAttributeRef = useRef<string>('');
+
+  const changeAttributeWrapper = (
+    oldAttribute: string,
+    newAttribute: string,
+    value: any
+  ) => {
+    // Ignore attribute changes until a value has been specified
+    newAttributeRef.current = newAttribute;
+  };
+
+  const changeValueWrapper = (attribute: string, value: any) => {
+    // Blur events should reset/cancel if there's no value or no attribute
+    if (newAttributeRef.current !== '') {
+      if (value !== '') {
+        changeValue(newAttributeRef.current, value);
+      }
+      reset();
+    }
+  };
+
+  return (
+    <Row
+      key={key}
+      attribute={''}
+      attributePlaceholder="attribute"
+      changeAttribute={changeAttributeWrapper}
+      changeValue={changeValueWrapper}
+      validAttributes={validAttributes}
+      value={''}
+      valuePlaceholder="value"
+    />
+  );
+}
+
+type RowProps = {|
+  attribute: string,
+  attributePlaceholder?: string,
+  changeAttribute: ChangeAttributeFn,
+  changeValue: ChangeValueFn,
+  validAttributes: $ReadOnlyArray<string> | null,
+  value: any,
+  valuePlaceholder?: string,
+|};
+
+function Row({
+  attribute,
+  attributePlaceholder,
+  changeAttribute,
+  changeValue,
+  validAttributes,
+  value,
+  valuePlaceholder,
+}: RowProps) {
+  // TODO (RN style editor) Use @reach/combobox to auto-complete attributes.
+  // The list of valid attributes would need to be injected by RN backend,
+  // which would need to require them from ReactNativeViewViewConfig "validAttributes.style" keys.
+  // This would need to degrade gracefully for react-native-web,
+  // althoguh we could let it also inject a custom set of whitelisted attributes.
+
+  const [localAttribute, setLocalAttribute] = useState(attribute);
+  const [localValue, setLocalValue] = useState(JSON.stringify(value));
+  const [isAttributeValid, setIsAttributeValid] = useState(true);
+  const [isValueValid, setIsValueValid] = useState(true);
+
+  const validateAndSetLocalAttribute = attribute => {
+    const isValid =
+      attribute === '' ||
+      validAttributes === null ||
+      validAttributes.indexOf(attribute) >= 0;
+
+    batchedUpdates(() => {
+      setLocalAttribute(attribute);
+      setIsAttributeValid(isValid);
+    });
+  };
+
+  const validateAndSetLocalValue = value => {
+    let isValid = false;
+    try {
+      JSON.parse(value);
+      isValid = true;
+    } catch (error) {}
+
+    batchedUpdates(() => {
+      setLocalValue(value);
+      setIsValueValid(isValid);
+    });
+  };
+
+  const resetAttribute = () => {
+    setLocalAttribute(attribute);
+  };
+
+  const resetValue = () => {
+    setLocalValue(value);
+  };
+
+  const submitValueChange = () => {
+    if (isValueValid) {
+      const parsedLocalValue = JSON.parse(localValue);
+      if (value !== parsedLocalValue) {
+        changeValue(attribute, parsedLocalValue);
+      }
+    }
+  };
+
+  const submitAttributeChange = () => {
+    if (isAttributeValid && attribute !== localAttribute) {
+      changeAttribute(attribute, localAttribute, value);
+    }
+  };
+
+  return (
+    <div className={styles.Row}>
+      <Field
+        className={isAttributeValid ? styles.Attribute : styles.Invalid}
+        onChange={validateAndSetLocalAttribute}
+        onReset={resetAttribute}
+        onSubmit={submitAttributeChange}
+        placeholder={attributePlaceholder}
+        value={localAttribute}
+      />
+      :&nbsp;
+      <Field
+        className={isValueValid ? styles.Value : styles.Invalid}
+        onChange={validateAndSetLocalValue}
+        onReset={resetValue}
+        onSubmit={submitValueChange}
+        placeholder={valuePlaceholder}
+        value={localValue}
+      />
+      ;
+    </div>
+  );
+}
+
+type FieldProps = {|
+  className: string,
+  onChange: (value: any) => void,
+  onReset: () => void,
+  onSubmit: () => void,
+  placeholder?: string,
+  value: any,
+|};
+
+function Field({
+  className,
+  onChange,
+  onReset,
+  onSubmit,
+  placeholder,
+  value,
+}: FieldProps) {
+  const onKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+        onSubmit();
+        break;
+      case 'Escape':
+        onReset();
+        break;
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <AutoSizeInput
+      className={`${className} ${styles.Input}`}
+      onBlur={onSubmit}
+      onChange={event => onChange(event.target.value)}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      value={value}
+    />
+  );
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/context.js b/src/devtools/views/Components/NativeStyleEditor/context.js
new file mode 100644
index 000000000000..927a4d4151d5
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -0,0 +1,187 @@
+// @flow
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { createResource } from 'src/devtools/cache';
+import { BridgeContext, StoreContext } from 'src/devtools/views/context';
+import { TreeStateContext } from '../TreeContext';
+
+import type { StyleAndLayout as StyleAndLayoutBackend } from 'src/backend/NativeStyleEditor/types';
+import type { StyleAndLayout as StyleAndLayoutFrontend } from './types';
+import type { Element } from 'src/devtools/views/Components/types';
+import type { Resource, Thenable } from 'src/devtools/cache';
+
+export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;
+
+type Context = {|
+  getStyleAndLayout: GetStyleAndLayout,
+|};
+
+const NativeStyleContext = createContext<Context>(((null: any): Context));
+NativeStyleContext.displayName = 'NativeStyleContext';
+
+type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
+type InProgressRequest = {|
+  promise: Thenable<StyleAndLayoutFrontend>,
+  resolveFn: ResolveFn,
+|};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<
+  Element,
+  Element,
+  StyleAndLayoutFrontend
+> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(element, { promise, resolveFn });
+
+    return promise;
+  },
+  (element: Element) => element,
+  { useWeakMap: true }
+);
+
+type Props = {|
+  children: React$Node,
+|};
+
+function NativeStyleContextController({ children }: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const getStyleAndLayout = useCallback<GetStyleAndLayout>(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store]
+  );
+
+  // It's very important that this context consumes selectedElementID and not NativeStyleID.
+  // Otherwise the effect that sends the "inspect" message across the bridge-
+  // would itself be blocked by the same render that suspends (waiting for the data).
+  const { selectedElementID } = useContext(TreeStateContext);
+
+  const [
+    currentStyleAndLayout,
+    setCurrentStyleAndLayout,
+  ] = useState<StyleAndLayoutFrontend | null>(null);
+
+  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
+  useEffect(() => {
+    const onStyleAndLayout = ({ id, layout, style }: StyleAndLayoutBackend) => {
+      let element = store.getElementByID(id);
+      if (element !== null) {
+        const styleAndLayout: StyleAndLayoutFrontend = {
+          layout,
+          style,
+        };
+        const request = inProgressRequests.get(element);
+        if (request != null) {
+          inProgressRequests.delete(element);
+          batchedUpdates(() => {
+            request.resolveFn(styleAndLayout);
+            setCurrentStyleAndLayout(styleAndLayout);
+          });
+        } else {
+          resource.write(element, styleAndLayout);
+
+          // Schedule update with React if the curently-selected element has been invalidated.
+          if (id === selectedElementID) {
+            setCurrentStyleAndLayout(styleAndLayout);
+          }
+        }
+      }
+    };
+
+    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+    return () =>
+      bridge.removeListener(
+        'NativeStyleEditor_styleAndLayout',
+        onStyleAndLayout
+      );
+  }, [bridge, currentStyleAndLayout, selectedElementID, store]);
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(() => {
+    if (selectedElementID === null) {
+      return () => {};
+    }
+
+    const rendererID = store.getRendererIDForElement(selectedElementID);
+
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
+      bridge.send('NativeStyleEditor_measure', {
+        id: selectedElementID,
+        rendererID,
+      });
+    };
+
+    // Send the initial measurement request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onStyleAndLayout = ({ id }: StyleAndLayoutBackend) => {
+      // If this is the element we requested, wait a little bit and then ask for another update.
+      if (id === selectedElementID) {
+        if (timeoutID !== null) {
+          clearTimeout(timeoutID);
+        }
+        timeoutID = setTimeout(sendRequest, 1000);
+      }
+    };
+
+    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+
+    return () => {
+      bridge.removeListener(
+        'NativeStyleEditor_styleAndLayout',
+        onStyleAndLayout
+      );
+
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [bridge, selectedElementID, store]);
+
+  const value = useMemo(
+    () => ({ getStyleAndLayout }),
+    // NativeStyle is used to invalidate the cache and schedule an update with React.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentStyleAndLayout, getStyleAndLayout]
+  );
+
+  return (
+    <NativeStyleContext.Provider value={value}>
+      {children}
+    </NativeStyleContext.Provider>
+  );
+}
+
+export { NativeStyleContext, NativeStyleContextController };
diff --git a/src/devtools/views/Components/NativeStyleEditor/index.js b/src/devtools/views/Components/NativeStyleEditor/index.js
new file mode 100644
index 000000000000..def85e561000
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -0,0 +1,68 @@
+// @flow
+
+import React, { Fragment, useContext, useMemo } from 'react';
+import Store from 'src/devtools/store';
+import { StoreContext } from 'src/devtools/views/context';
+import { useSubscription } from 'src/devtools/views/hooks';
+import { NativeStyleContext } from './context';
+import LayoutViewer from './LayoutViewer';
+import StyleEditor from './StyleEditor';
+import { TreeStateContext } from '../TreeContext';
+
+type Props = {||};
+
+export default function NativeStyleEditorWrapper(_: Props) {
+  const store = useContext(StoreContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.supportsNativeStyleEditor,
+      subscribe: (callback: Function) => {
+        store.addListener('supportsNativeStyleEditor', callback);
+        return () => {
+          store.removeListener('supportsNativeStyleEditor', callback);
+        };
+      },
+    }),
+    [store]
+  );
+  const supportsNativeStyleEditor = useSubscription<boolean, Store>(
+    subscription
+  );
+
+  if (!supportsNativeStyleEditor) {
+    return null;
+  }
+
+  return <NativeStyleEditor />;
+}
+
+function NativeStyleEditor(_: Props) {
+  const { getStyleAndLayout } = useContext(NativeStyleContext);
+
+  const { inspectedElementID } = useContext(TreeStateContext);
+  if (inspectedElementID === null) {
+    return null;
+  }
+
+  const maybeStyleAndLayout = getStyleAndLayout(inspectedElementID);
+  if (maybeStyleAndLayout === null) {
+    return null;
+  }
+
+  const { layout, style } = maybeStyleAndLayout;
+
+  return (
+    <Fragment>
+      {layout !== null && (
+        <LayoutViewer id={inspectedElementID} layout={layout} />
+      )}
+      {style !== null && (
+        <StyleEditor
+          id={inspectedElementID}
+          style={style !== null ? style : {}}
+        />
+      )}
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/Components/NativeStyleEditor/types.js b/src/devtools/views/Components/NativeStyleEditor/types.js
new file mode 100644
index 000000000000..882412af3a1c
--- /dev/null
+++ b/src/devtools/views/Components/NativeStyleEditor/types.js
@@ -0,0 +1,13 @@
+// @flow
+
+import type {
+  Layout as LayoutBackend,
+  Style as StyleBackend,
+} from 'src/backend/NativeStyleEditor/types';
+
+export type Layout = LayoutBackend;
+export type Style = StyleBackend;
+export type StyleAndLayout = {|
+  layout: LayoutBackend | null,
+  style: StyleBackend | null,
+|};
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index eb0169e4da07..b6b0b6c62cfb 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -41,18 +41,6 @@
   text-overflow: ellipsis;
   max-width: 100%;
 }
-.Component:before,
-.Owner:before {
-  white-space: nowrap;
-  content: '<';
-  color: var(--color-jsx-arrow-brackets);
-}
-.Component:after,
-.Owner:after {
-  white-space: nowrap;
-  content: '>';
-  color: var(--color-jsx-arrow-brackets);
-}
 
 .Component {
   flex: 1 1 auto;
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 93cccda033f9..2d3eece42954 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -12,6 +12,7 @@ import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
+import NativeStyleEditor from './NativeStyleEditor';
 import Toggle from '../Toggle';
 import Badge from './Badge';
 import {
@@ -34,7 +35,9 @@ export type Props = {||};
 export default function SelectedElement(_: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
-  const viewElementSource = useContext(ViewElementSourceContext);
+  const { isFileLocationRequired, viewElementSourceFunction } = useContext(
+    ViewElementSourceContext
+  );
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
@@ -55,7 +58,7 @@ export default function SelectedElement(_: Props) {
     if (element !== null && inspectedElementID !== null) {
       const rendererID = store.getRendererIDForElement(inspectedElementID);
       if (rendererID !== null) {
-        bridge.send('highlightElementInDOM', {
+        bridge.send('highlightNativeElement', {
           displayName: element.displayName,
           hideAfterTimeout: true,
           id: inspectedElementID,
@@ -80,15 +83,19 @@ export default function SelectedElement(_: Props) {
   }, [bridge, inspectedElementID, store]);
 
   const viewSource = useCallback(() => {
-    if (viewElementSource != null && inspectedElementID !== null) {
-      viewElementSource(inspectedElementID);
+    if (viewElementSourceFunction != null && inspectedElement !== null) {
+      viewElementSourceFunction(
+        inspectedElement.id,
+        ((inspectedElement: any): InspectedElement)
+      );
     }
-  }, [inspectedElementID, viewElementSource]);
+  }, [inspectedElement, viewElementSourceFunction]);
 
   const canViewSource =
     inspectedElement &&
     inspectedElement.canViewSource &&
-    viewElementSource !== null;
+    viewElementSourceFunction !== null &&
+    (!isFileLocationRequired || inspectedElement.source !== null);
 
   const isSuspended =
     element !== null &&
@@ -344,6 +351,8 @@ function InspectedElementView({
         />
       )}
 
+      <NativeStyleEditor />
+
       {ownerID === null && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
           <div className={styles.OwnersHeader}>rendered by</div>
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 9663f79a74ee..85d3ef165819 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  Fragment,
   Suspense,
   useState,
   useCallback,
@@ -77,14 +78,14 @@ export default function Tree(props: Props) {
   // Picking an element in the inspector should put focus into the tree.
   // This ensures that keyboard navigation works right after picking a node.
   useEffect(() => {
-    function handleStopInspectingDOM(didSelectNode) {
+    function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
       }
     }
-    bridge.addListener('stopInspectingDOM', handleStopInspectingDOM);
+    bridge.addListener('stopInspectingNative', handleStopInspectingNative);
     return () =>
-      bridge.removeListener('stopInspectingDOM', handleStopInspectingDOM);
+      bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
   }, [bridge]);
 
   // This ref is passed down the context to elements.
@@ -187,12 +188,12 @@ export default function Tree(props: Props) {
     [dispatch, selectedElementID]
   );
 
-  const highlightElementInDOM = useCallback(
+  const highlightNativeElement = useCallback(
     (id: number) => {
       const element = store.getElementByID(id);
       const rendererID = store.getRendererIDForElement(id);
       if (element !== null) {
-        bridge.send('highlightElementInDOM', {
+        bridge.send('highlightNativeElement', {
           displayName: element.displayName,
           hideAfterTimeout: false,
           id,
@@ -220,15 +221,15 @@ export default function Tree(props: Props) {
     }
     if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
       if (selectedElementID !== null) {
-        highlightElementInDOM(selectedElementID);
+        highlightNativeElement(selectedElementID);
       } else {
-        bridge.send('clearHighlightedElementInDOM');
+        bridge.send('clearNativeElementHighlight');
       }
     }
   }, [
     bridge,
     isNavigatingWithKeyboard,
-    highlightElementInDOM,
+    highlightNativeElement,
     searchIndex,
     searchResults,
     selectedElementID,
@@ -240,10 +241,10 @@ export default function Tree(props: Props) {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
       if (!isNavigatingWithKeyboard) {
-        highlightElementInDOM(id);
+        highlightNativeElement(id);
       }
     },
-    [isNavigatingWithKeyboard, highlightElementInDOM]
+    [isNavigatingWithKeyboard, highlightNativeElement]
   );
 
   const handleMouseMove = useCallback(() => {
@@ -253,7 +254,7 @@ export default function Tree(props: Props) {
   }, []);
 
   const handleMouseLeave = useCallback(() => {
-    bridge.send('clearHighlightedElementInDOM');
+    bridge.send('clearNativeElementHighlight');
   }, [bridge]);
 
   // Let react-window know to re-render any time the underlying tree data changes.
@@ -284,8 +285,12 @@ export default function Tree(props: Props) {
     <TreeFocusedContext.Provider value={treeFocused}>
       <div className={styles.Tree} ref={treeRef}>
         <div className={styles.SearchInput}>
-          <InspectHostNodesToggle />
-          <div className={styles.VRule} />
+          {store.supportsNativeInspection && (
+            <Fragment>
+              <InspectHostNodesToggle />
+              <div className={styles.VRule} />
+            </Fragment>
+          )}
           <Suspense fallback={<Loading />}>
             {ownerID !== null ? <OwnersStack /> : <SearchInput />}
           </Suspense>
diff --git a/src/devtools/views/Components/ViewElementSourceContext.js b/src/devtools/views/Components/ViewElementSourceContext.js
index 0ce3191cff0a..0e76f7c56eb3 100644
--- a/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/src/devtools/views/Components/ViewElementSourceContext.js
@@ -2,7 +2,14 @@
 
 import { createContext } from 'react';
 
-const ViewElementSourceContext = createContext<Function | null>(null);
+import type { ViewElementSource } from 'src/devtools/views/DevTools';
+
+export type Context = {|
+  isFileLocationRequired: boolean,
+  viewElementSourceFunction: ViewElementSource | null,
+|};
+
+const ViewElementSourceContext = createContext<Context>(((null: any): Context));
 ViewElementSourceContext.displayName = 'ViewElementSourceContext';
 
 export default ViewElementSourceContext;
diff --git a/src/devtools/views/DevTools.css b/src/devtools/views/DevTools.css
index 34a530b16b90..efc59b78dba6 100644
--- a/src/devtools/views/DevTools.css
+++ b/src/devtools/views/DevTools.css
@@ -16,6 +16,10 @@
   border-top: 1px solid var(--color-border);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-large);
+  user-select: none;
+
+  /* Electron drag area */
+  -webkit-app-region: drag;
 }
 
 .Spacer {
@@ -27,12 +31,24 @@
   overflow: auto;
 }
 
+.DevToolsVersion {
+  font-size: var(--font-size-sans-normal);
+  margin-right: 0.5rem;
+}
+
 .DevToolsVersion:before {
+  font-size: var(--font-size-sans-large);
   content: 'DevTools ';
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   .DevToolsVersion:before {
     content: '';
   }
 }
+
+@media screen and (max-width: 300px) {
+  .DevToolsVersion {
+    display: none;
+  }
+}
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 2700c66e9c37..7a04ee46bc83 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -5,7 +5,7 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Bridge from 'src/bridge';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
@@ -23,18 +23,23 @@ import styles from './DevTools.css';
 
 import './root.css';
 
-export type BrowserName = 'Chrome' | 'Firefox';
+import type { InspectedElement } from 'src/devtools/views/Components/types';
+
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler' | 'settings';
+export type ViewElementSource = (
+  id: number,
+  inspectedElement: InspectedElement
+) => void;
 
 export type Props = {|
   bridge: Bridge,
-  browserName: BrowserName,
-  browserTheme: BrowserTheme,
+  browserTheme?: BrowserTheme,
   defaultTab?: TabID,
   showTabBar?: boolean,
   store: Store,
-  viewElementSource?: ?Function,
+  viewElementSourceFunction?: ?ViewElementSource,
+  viewElementSourceRequiresFileLocation?: boolean,
 
   // This property is used only by the web extension target.
   // The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.
@@ -67,7 +72,6 @@ const tabs = [componentsTab, profilerTab];
 
 export default function DevTools({
   bridge,
-  browserName,
   browserTheme = 'light',
   defaultTab = 'components',
   componentsPortalContainer,
@@ -76,13 +80,22 @@ export default function DevTools({
   settingsPortalContainer,
   showTabBar = false,
   store,
-  viewElementSource = null,
+  viewElementSourceFunction,
+  viewElementSourceRequiresFileLocation = false,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
   if (overrideTab != null && overrideTab !== tab) {
     setTab(overrideTab);
   }
 
+  const viewElementSource = useMemo(
+    () => ({
+      isFileLocationRequired: viewElementSourceRequiresFileLocation,
+      viewElementSourceFunction: viewElementSourceFunction || null,
+    }),
+    [viewElementSourceFunction, viewElementSourceRequiresFileLocation]
+  );
+
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js
index 35ad483aeeb5..d805f92b1cc7 100644
--- a/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -139,7 +139,7 @@ function recursivelyInitializeTree(
 
 function updateTree(
   commitTree: CommitTree,
-  operations: Uint32Array
+  operations: Array<number>
 ): CommitTree {
   // Clone the original tree so edits don't affect it.
   const nodes = new Map(commitTree.nodes);
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index f17546eba938..a7eeb78a181a 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -42,6 +42,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 0 1rem;
+}
+
+.Paragraph {
+  text-align: center;
 }
 
 .Row {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index efa729d2582d..a134f1d016b4 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -150,24 +150,22 @@ const NoProfilingData = () => (
 const ProfilingNotSupported = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>Profiling not supported.</div>
-    <div className={styles.Column}>
-      <p>
-        Profiling support requires either a development or production-profiling
-        build of React v16.5+.
-      </p>
-      <p>
-        Learn more at{' '}
-        <a
-          className={styles.Link}
-          href="https://fb.me/react-profiling"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          fb.me/react-profiling
-        </a>
-        .
-      </p>
-    </div>
+    <p className={styles.Paragraph}>
+      Profiling support requires either a development or production-profiling
+      build of React v16.5+.
+    </p>
+    <p className={styles.Paragraph}>
+      Learn more at{' '}
+      <a
+        className={styles.Link}
+        href="https://fb.me/react-profiling"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        fb.me/react-profiling
+      </a>
+      .
+    </p>
   </div>
 );
 
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 77a29574d074..2ea9526d9653 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -20,20 +20,12 @@
 .Component {
   flex: 1;
   color: var(--color-component-name);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
-.Component:before {
-  white-space: nowrap;
-  content: '<';
-  color: var(--color-jsx-arrow-brackets);
-}
-.Component:after {
-  white-space: nowrap;
-  content: '>';
-  color: var(--color-jsx-arrow-brackets);
-}
 
 .Label {
   font-weight: bold;
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index c99a79fed8b9..b6c2fcc2fdcc 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -87,7 +87,7 @@ export type ProfilingDataForRootFrontend = {|
 
   // List of tree mutation that occur during profiling.
   // These mutations can be used along with initial snapshots to reconstruct the tree for any commit.
-  operations: Array<Uint32Array>,
+  operations: Array<Array<number>>,
 
   // Identifies the root this profiler data corresponds to.
   rootID: number,
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index bd4d1e9f3195..e0f1dcdd834d 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -28,7 +28,7 @@ const commitGradient = [
 // This format can then be quickly exported (and re-imported).
 export function prepareProfilingDataFrontendFromBackendAndStore(
   dataBackends: Array<ProfilingDataBackend>,
-  operationsByRootID: Map<number, Array<Uint32Array>>,
+  operationsByRootID: Map<number, Array<Array<number>>>,
   screenshotsByRootID: Map<number, Map<number, string>>,
   snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
 ): ProfilingDataFrontend {
@@ -137,7 +137,7 @@ export function prepareProfilingDataFrontendFromExport(
         initialTreeBaseDurations: new Map(initialTreeBaseDurations),
         interactionCommits: new Map(interactionCommits),
         interactions: new Map(interactions),
-        operations: operations.map(array => Uint32Array.from(array)), // Convert Array back to Uint32Array
+        operations,
         rootID,
         snapshots: new Map(snapshots),
       });
@@ -194,7 +194,7 @@ export function prepareProfilingDataExport(
         ),
         interactionCommits: Array.from(interactionCommits.entries()),
         interactions: Array.from(interactions.entries()),
-        operations: operations.map(array => Array.from(array)), // Convert Uint32Array to Array for serialization
+        operations,
         rootID,
         snapshots: Array.from(snapshots.entries()),
       });
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index d18ffe0dbffa..70ad39f6134a 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -213,6 +213,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-background-hover', documentElements);
   updateStyleHelper(theme, 'color-background-inactive', documentElements);
+  updateStyleHelper(theme, 'color-background-invalid', documentElements);
   updateStyleHelper(theme, 'color-background-selected', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
@@ -275,12 +276,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-jsx-arrow-brackets-inverted',
-    documentElements
-  );
   updateStyleHelper(theme, 'color-modal-background', documentElements);
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
@@ -301,6 +296,7 @@ function updateThemeVariables(
   );
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
+  updateStyleHelper(theme, 'color-text-invalid', documentElements);
   updateStyleHelper(theme, 'color-text-selected', documentElements);
   updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
   updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 1218421eec8e..ea6fefbbc36e 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -9,6 +9,9 @@
   border-bottom: 3px solid transparent;
   user-select: none;
   color: var(--color-text);
+
+  /* Electron drag area */
+  -webkit-app-region: no-drag;
 }
 .Tab:hover,
 .TabCurrent:hover {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 30e70443ecf1..b822462a3cc2 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -12,6 +12,7 @@
   --light-color-background: #ffffff;
   --light-color-background-hover: rgba(0, 136, 250, 0.1);
   --light-color-background-inactive: #e5e5e5;
+  --light-color-background-invalid: #fff0f0;
   --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
   --light-color-button-background-focus: #ededed;
@@ -46,8 +47,6 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-jsx-arrow-brackets: #333333;
-  --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
@@ -60,6 +59,7 @@
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
+  --light-color-text-invalid: #ff0000;
   --light-color-text-selected: #ffffff;
   --light-color-toggle-background-invalid: #fc3a4b;
   --light-color-toggle-background-on: #0088fa;
@@ -77,6 +77,7 @@
   --dark-color-background: #282c34;
   --dark-color-background-hover: rgba(255, 255, 255, 0.1);
   --dark-color-background-inactive: #3d424a;
+  --dark-color-background-invalid: #5c0000;
   --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
   --dark-color-button-background-focus: #3d424a;
@@ -111,8 +112,6 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-jsx-arrow-brackets: #777d88;
-  --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
@@ -125,6 +124,7 @@
   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
+  --dark-color-text-invalid: #ff8080;
   --dark-color-text-selected: #ffffff;
   --dark-color-toggle-background-invalid: #fc3a4b;
   --dark-color-toggle-background-on: #178fb9;
diff --git a/src/hydration.js b/src/hydration.js
index 9aa36f61b121..ac94f73d1c93 100644
--- a/src/hydration.js
+++ b/src/hydration.js
@@ -43,45 +43,79 @@ type Dehydrated = {|
 // but may decrease the responsiveness of expanding objects/arrays to inspect further.
 const LEVEL_THRESHOLD = 2;
 
+type PropType =
+  | 'array'
+  | 'array_buffer'
+  | 'boolean'
+  | 'data_view'
+  | 'date'
+  | 'function'
+  | 'html_element'
+  | 'infinity'
+  | 'iterator'
+  | 'nan'
+  | 'null'
+  | 'number'
+  | 'object'
+  | 'react_element'
+  | 'string'
+  | 'symbol'
+  | 'typed_array'
+  | 'undefined'
+  | 'unknown';
+
 /**
  * Get a enhanced/artificial type string based on the object instance
  */
-function getPropType(data: Object): string | null {
-  if (!data) {
-    return null;
+function getDataType(data: Object): PropType {
+  if (data === null) {
+    return 'null';
+  } else if (data === undefined) {
+    return 'undefined';
   }
 
   if (isElement(data)) {
     return 'react_element';
   }
 
-  if (data instanceof HTMLElement) {
+  if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {
     return 'html_element';
   }
 
   const type = typeof data;
-  if (type === 'object') {
-    if (Array.isArray(data)) {
-      return 'array';
-    }
-    if (ArrayBuffer.isView(data)) {
-      if (data instanceof DataView) {
-        return 'data_view';
+  switch (type) {
+    case 'boolean':
+      return 'boolean';
+    case 'function':
+      return 'function';
+    case 'number':
+      if (Number.isNaN(data)) {
+        return 'nan';
+      } else if (!Number.isFinite(data)) {
+        return 'infinity';
+      } else {
+        return 'number';
       }
-      return 'typed_array';
-    }
-    if (data instanceof ArrayBuffer) {
-      return 'array_buffer';
-    }
-    if (typeof data[Symbol.iterator] === 'function') {
-      return 'iterator';
-    }
-    if (Object.prototype.toString.call(data) === '[object Date]') {
-      return 'date';
-    }
+    case 'object':
+      if (Array.isArray(data)) {
+        return 'array';
+      } else if (ArrayBuffer.isView(data)) {
+        return data instanceof DataView ? 'data_view' : 'typed_array';
+      } else if (data instanceof ArrayBuffer) {
+        return 'array_buffer';
+      } else if (typeof data[Symbol.iterator] === 'function') {
+        return 'iterator';
+      } else if (Object.prototype.toString.call(data) === '[object Date]') {
+        return 'date';
+      }
+      return 'object';
+    case 'string':
+      return 'string';
+    case 'symbol':
+      return 'symbol';
+    default:
+      return 'unknown';
   }
-
-  return type;
 }
 
 /**
@@ -143,7 +177,7 @@ export function dehydrate(
   isPathWhitelisted: (path: Array<string | number>) => boolean,
   level?: number = 0
 ): string | Dehydrated | { [key: string]: string | Dehydrated } {
-  const type = getPropType(data);
+  const type = getDataType(data);
 
   switch (type) {
     case 'html_element':
@@ -151,7 +185,7 @@ export function dehydrate(
       return {
         inspectable: false,
         name: data.tagName,
-        type: 'html_element',
+        type,
       };
 
     case 'function':
@@ -159,20 +193,18 @@ export function dehydrate(
       return {
         inspectable: false,
         name: data.name,
-        type: 'function',
+        type,
       };
 
     case 'string':
       return data.length <= 500 ? data : data.slice(0, 500) + '...';
 
-    // We have to do this assignment b/c Flow doesn't think "symbol" is
-    // something typeof would return. Error 'unexpected predicate "symbol"'
     case 'symbol':
       cleaned.push(path);
       return {
         inspectable: false,
         name: data.toString(),
-        type: 'symbol',
+        type,
       };
 
     // React Elements aren't very inspector-friendly,
@@ -182,7 +214,7 @@ export function dehydrate(
       return {
         inspectable: false,
         name: getDisplayNameForReactElement(data),
-        type: 'react_element',
+        type,
       };
 
     // ArrayBuffers error if you try to inspect them.
@@ -220,7 +252,7 @@ export function dehydrate(
       return {
         inspectable: false,
         name: data.toString(),
-        type: 'date',
+        type,
       };
 
     case 'object':
@@ -241,6 +273,16 @@ export function dehydrate(
         return object;
       }
 
+    case 'infinity':
+    case 'nan':
+    case 'undefined':
+      // Some values are lossy when sent through a WebSocket.
+      // We dehydrate+rehydrate them to preserve their type.
+      cleaned.push(path);
+      return {
+        type,
+      };
+
     default:
       return data;
   }
@@ -271,22 +313,30 @@ export function hydrate(
     const length = path.length;
     const last = path[length - 1];
     const parent = getInObject(object, path.slice(0, length - 1));
-    if (!parent || !parent[last]) {
+    if (!parent || !parent.hasOwnProperty(last)) {
       return;
     }
 
     const value = parent[last];
 
-    // Replace the string keys with Symbols so they're non-enumerable.
-    const replaced: { [key: Symbol]: boolean | string } = {};
-    replaced[meta.inspectable] = !!value.inspectable;
-    replaced[meta.inspected] = false;
-    replaced[meta.name] = value.name;
-    replaced[meta.size] = value.size;
-    replaced[meta.readonly] = !!value.readonly;
-    replaced[meta.type] = value.type;
-
-    parent[last] = replaced;
+    if (value.type === 'infinity') {
+      parent[last] = Infinity;
+    } else if (value.type === 'nan') {
+      parent[last] = NaN;
+    } else if (value.type === 'undefined') {
+      parent[last] = undefined;
+    } else {
+      // Replace the string keys with Symbols so they're non-enumerable.
+      const replaced: { [key: Symbol]: boolean | string } = {};
+      replaced[meta.inspectable] = !!value.inspectable;
+      replaced[meta.inspected] = false;
+      replaced[meta.name] = value.name;
+      replaced[meta.size] = value.size;
+      replaced[meta.readonly] = !!value.readonly;
+      replaced[meta.type] = value.type;
+
+      parent[last] = replaced;
+    }
   });
   return object;
 }
diff --git a/src/utils.js b/src/utils.js
index fe65aade77e9..3f73a7967173 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -58,27 +58,25 @@ export function getUID(): number {
   return ++uidCounter;
 }
 
-export function utfDecodeString(array: Uint32Array): string {
+export function utfDecodeString(array: Array<number>): string {
   return String.fromCodePoint(...array);
 }
 
-export function utfEncodeString(string: string): Uint32Array {
+export function utfEncodeString(string: string): Array<number> {
   let cached = encodedStringCache.get(string);
   if (cached !== undefined) {
     return cached;
   }
 
-  // $FlowFixMe Flow's Uint32Array.from's type definition is wrong; first argument of mapFn will be string
-  const encoded = Uint32Array.from(string, toCodePoint);
+  const encoded = new Array(string.length);
+  for (let i = 0; i < string.length; i++) {
+    encoded[i] = string.codePointAt(i);
+  }
   encodedStringCache.set(string, encoded);
   return encoded;
 }
 
-function toCodePoint(string: string) {
-  return string.codePointAt(0);
-}
-
-export function printOperationsArray(operations: Uint32Array) {
+export function printOperationsArray(operations: Array<number>) {
   // The first two values are always rendererID and rootID
   const rendererID = operations[0];
   const rootID = operations[1];
diff --git a/yarn.lock b/yarn.lock
index cb35f65ede94..80d36901ff0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1165,6 +1165,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.4.tgz#f83ec3c3e05b174b7241fadeb6688267fe5b22ca"
   integrity sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==
 
+"@types/node@^10.12.18":
+  version "10.14.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.9.tgz#2e8d678039d27943ce53a1913386133227fd9066"
+  integrity sha512-NelG/dSahlXYtSoVPErrp06tYFrvzj8XLWmKA+X8x0W//4MqbUyZu++giUG/v0bjAT6/Qxa8IjodrfdACyb0Fg==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1885,7 +1890,7 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
   integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
 
-async-limiter@~1.0.0:
+async-limiter@^1.0.0, async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
@@ -3297,7 +3302,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.0:
+concat-stream@1.6.2, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -3669,6 +3674,14 @@ create-react-class@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+cross-env@^3.1.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
+  integrity sha1-ngWF8neGTtQhznVvgamA/w1piro=
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
 cross-env@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
@@ -3901,7 +3914,7 @@ debounce@1.1.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
   integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==
 
-debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
+debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -3914,19 +3927,19 @@ debug@^2.1.1:
   dependencies:
     ms "0.7.2"
 
-debug@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
   dependencies:
     ms "^2.1.1"
 
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
 debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -4304,11 +4317,35 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+electron-download@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/electron-download/-/electron-download-4.1.1.tgz#02e69556705cc456e520f9e035556ed5a015ebe8"
+  integrity sha512-FjEWG9Jb/ppK/2zToP+U5dds114fM1ZOJqMAR4aXXL5CvyPE9fiqBK/9YcwC9poIFQTEJk/EM/zyRwziziRZrg==
+  dependencies:
+    debug "^3.0.0"
+    env-paths "^1.0.0"
+    fs-extra "^4.0.1"
+    minimist "^1.2.0"
+    nugget "^2.0.1"
+    path-exists "^3.0.0"
+    rc "^1.2.1"
+    semver "^5.4.1"
+    sumchecker "^2.0.2"
+
 electron-to-chromium@^1.3.113:
   version "1.3.113"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
   integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
 
+electron@^5.0.0:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.4.tgz#2e0d09055363e983f4a73317cde4821c39617b02"
+  integrity sha512-7QaKorvANvP+azMT7wElx33oLlqw8QxmLs7/outfH7LC5amErk4EUtWDesQ6Zgr+s5pYFbykl8ZtJ4ZGXER05g==
+  dependencies:
+    "@types/node" "^10.12.18"
+    electron-download "^4.1.0"
+    extract-zip "^1.0.3"
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -4382,6 +4419,11 @@ entities@^1.1.1, entities@~1.1.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
+env-paths@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
+  integrity sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5171,6 +5213,16 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-zip@^1.0.3:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
+  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
+  dependencies:
+    concat-stream "1.6.2"
+    debug "2.6.9"
+    mkdirp "0.5.1"
+    yauzl "2.4.1"
+
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -5289,6 +5341,13 @@ fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
+  dependencies:
+    pend "~1.2.0"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -6507,7 +6566,7 @@ ip-regex@^2.1.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
   integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
-ip@^1.1.0, ip@^1.1.5:
+ip@^1.1.0, ip@^1.1.4, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
@@ -8207,7 +8266,7 @@ memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.3.0:
+meow@^3.1.0, meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
@@ -8851,6 +8910,19 @@ nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
+nugget@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nugget/-/nugget-2.0.1.tgz#201095a487e1ad36081b3432fa3cada4f8d071b0"
+  integrity sha1-IBCVpIfhrTYIGzQy+jytpPjQcbA=
+  dependencies:
+    debug "^2.1.3"
+    minimist "^1.1.0"
+    pretty-bytes "^1.0.2"
+    progress-stream "^1.1.0"
+    request "^2.45.0"
+    single-line-log "^1.1.2"
+    throttleit "0.0.2"
+
 nullthrows@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -8901,6 +8973,11 @@ object-keys@^1.0.12:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
   integrity sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==
 
+object-keys@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
+  integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -9545,6 +9622,14 @@ prettier@^1.16.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
   integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
+pretty-bytes@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"
+  integrity sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=
+  dependencies:
+    get-stdin "^4.0.1"
+    meow "^3.1.0"
+
 pretty-format@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
@@ -9590,6 +9675,14 @@ process@^0.11.0, process@^0.11.10, process@~0.11.0:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
+progress-stream@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-1.2.0.tgz#2cd3cfea33ba3a89c9c121ec3347abe9ab125f77"
+  integrity sha1-LNPP6jO6OonJwSHsM0er6asSX3c=
+  dependencies:
+    speedometer "~0.1.2"
+    through2 "~0.2.3"
+
 progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
@@ -9808,7 +9901,7 @@ raw-body@2.3.3:
     iconv-lite "0.4.23"
     unpipe "1.0.0"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -10280,6 +10373,32 @@ request@2.87.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@^2.45.0, request@~2.88.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 request@^2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
@@ -10307,32 +10426,6 @@ request@^2.83.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
-request@~2.88.0:
-  version "2.88.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
-  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.0"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.4.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -10766,7 +10859,7 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
-shell-quote@1.6.1:
+shell-quote@1.6.1, shell-quote@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
   integrity sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=
@@ -10819,6 +10912,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+single-line-log@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
+  integrity sha1-wvg/Jzo+GhbtsJlWYdoO1e8DM2Q=
+  dependencies:
+    string-width "^1.0.1"
+
 sisteransi@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.0.tgz#77d9622ff909080f1c19e5f4a1df0c1b0a27b88c"
@@ -11062,6 +11162,11 @@ spdy@^4.0.0:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speedometer@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/speedometer/-/speedometer-0.1.4.tgz#9876dbd2a169d3115402d48e6ea6329c8816a50d"
+  integrity sha1-mHbb0qFp0xFUAtSObqYynIgWpQ0=
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -11396,6 +11501,13 @@ style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
+sumchecker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-2.0.2.tgz#0f42c10e5d05da5d42eea3e56c3399a37d6c5b3e"
+  integrity sha1-D0LBDl0F2l1C7qPlbDOZo31sWz4=
+  dependencies:
+    debug "^2.2.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -11588,6 +11700,11 @@ throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
+throttleit@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
+  integrity sha1-z+34jmDADdlpe2H90qg0OptoDq8=
+
 through2@^2.0.0, through2@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -11596,6 +11713,14 @@ through2@^2.0.0, through2@^2.0.2:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
+through2@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.2.3.tgz#eb3284da4ea311b6cc8ace3653748a52abf25a3f"
+  integrity sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=
+  dependencies:
+    readable-stream "~1.1.9"
+    xtend "~2.1.1"
+
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -11919,6 +12044,22 @@ update-notifier@2.3.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+update-notifier@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
+  integrity sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -12480,6 +12621,13 @@ ws@^4.0.0:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
+ws@^7:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.0.1.tgz#1a04e86cc3a57c03783f4910fdb090cf31b8e165"
+  integrity sha512-ILHfMbuqLJvnSgYXLgy4kMntroJpe8hT41dOVWM8bxRuw6TK4mgMp9VJUNsZTEc5Bh+Mbs0DJT4M0N+wBG9l9A==
+  dependencies:
+    async-limiter "^1.0.0"
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
@@ -12517,6 +12665,13 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
   integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
 
+xtend@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
+  integrity sha1-bv7MKk2tjmlixJAbM3znuoe10os=
+  dependencies:
+    object-keys "~0.4.0"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
@@ -12672,6 +12827,13 @@ yauzl@2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
+  dependencies:
+    fd-slicer "~1.0.1"
+
 zip-dir@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-1.0.2.tgz#253f907aead62a21acd8721d8b88032b2411c051"

From 41c00cb0cb0920e7d3ae1a1c0bb984e9d6a0f565 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sun, 14 Jul 2019 23:11:08 +0900
Subject: [PATCH 749/814] fix to input a number value to props

---
 src/devtools/views/Components/EditableValue.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Components/EditableValue.js b/src/devtools/views/Components/EditableValue.js
index 23e35c967929..09b2893a0687 100644
--- a/src/devtools/views/Components/EditableValue.js
+++ b/src/devtools/views/Components/EditableValue.js
@@ -33,8 +33,6 @@ export default function EditableValue({
       if (dataType === 'boolean') {
         setEditableValue(target.checked);
         overrideValueFn(path, target.checked);
-      } else if (dataType === 'number') {
-        setEditableValue(parseFloat(target.value));
       } else {
         setEditableValue(target.value);
       }
@@ -60,7 +58,11 @@ export default function EditableValue({
       const { key } = event;
 
       if (key === 'Enter') {
-        overrideValueFn(path, editableValue);
+        if (dataType === 'number') {
+          overrideValueFn(path, parseFloat(editableValue));
+        } else {
+          overrideValueFn(path, editableValue);
+        }
 
         // Don't reset the pending change flag here.
         // The inspected fiber won't be updated until after the next "inspectElement" message.
@@ -70,7 +72,7 @@ export default function EditableValue({
         setHasPendingChanges(false);
       }
     },
-    [path, editableValue, overrideValueFn, value]
+    [path, editableValue, overrideValueFn, value, dataType]
   );
 
   // Render different input types based on the dataType

From cb3fb4212972ad514ff53bff96530a0dffcaabcf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Jul 2019 11:12:39 -0700
Subject: [PATCH 750/814] Patch console to append component stacks (#348)

* Patch console.warn and console.error to auto-append owners-only component stacks.

This setting is enabled by default and will work for React Native even if no front-end DevTools shell is being used. The setting can be disabled via a new, persisted user preference though.
---
 flow-typed/npm/react-test-renderer_v16.x.x.js |   2 +-
 package.json                                  |  10 +-
 .../react-devtools-core/src/standalone.js     |  14 +-
 shells/browser/shared/src/main.js             |  17 +-
 shells/dev/src/devtools.js                    |   3 +-
 src/__tests__/console-test.js                 | 349 ++++++++++++++++
 src/__tests__/inspectedElementContext-test.js | 101 +++--
 src/__tests__/profilingCache-test.js          |  28 +-
 src/__tests__/profilingCharts-test.js         |  12 +-
 .../profilingCommitTreeBuilder-test.js        |   4 +-
 src/__tests__/utils.js                        |  50 ++-
 src/backend/agent.js                          |  17 +
 src/backend/console.js                        | 125 ++++++
 src/backend/describeComponentFrame.js         |  41 ++
 src/backend/index.js                          |   3 +-
 src/backend/renderer.js                       | 387 ++++++++++++------
 src/backend/types.js                          |   4 +
 src/bridge.js                                 |   1 +
 src/constants.js                              |   3 +
 .../views/Settings/GeneralSettings.js         |  41 +-
 .../views/Settings/SettingsContext.js         |  27 +-
 src/hook.js                                   |  31 ++
 src/utils.js                                  |  22 +-
 yarn.lock                                     |  46 +--
 24 files changed, 1083 insertions(+), 255 deletions(-)
 create mode 100644 src/__tests__/console-test.js
 create mode 100644 src/backend/console.js
 create mode 100644 src/backend/describeComponentFrame.js

diff --git a/flow-typed/npm/react-test-renderer_v16.x.x.js b/flow-typed/npm/react-test-renderer_v16.x.x.js
index 87a149a1d37d..67eb20ab753f 100644
--- a/flow-typed/npm/react-test-renderer_v16.x.x.js
+++ b/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -66,7 +66,7 @@ declare module 'react-test-renderer' {
     options?: TestRendererOptions
   ): ReactTestRenderer;
 
-  declare function act(callback: () => void): Thenable;
+  declare function act(callback: () => ?Thenable): Thenable;
 }
 
 declare module 'react-test-renderer/shallow' {
diff --git a/package.json b/package.json
index daf94f6447ab..18c5527081a3 100644
--- a/package.json
+++ b/package.json
@@ -138,18 +138,18 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^0.0.0-50b50c26f",
+    "react": "^0.0.0-424099da6",
     "react-15": "npm:react@^15",
     "react-color": "^2.11.7",
-    "react-dom": "^0.0.0-50b50c26f",
+    "react-dom": "^0.0.0-424099da6",
     "react-dom-15": "npm:react-dom@^15",
-    "react-is": "^0.0.0-50b50c26f",
-    "react-test-renderer": "^0.0.0-50b50c26f",
+    "react-is": "0.0.0-424099da6",
+    "react-test-renderer": "^0.0.0-424099da6",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "./vendor/react-window",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
-    "scheduler": "^0.0.0-50b50c26f",
+    "scheduler": "^0.0.0-424099da6",
     "semver": "^5.5.1",
     "serve-static": "^1.14.1",
     "style-loader": "^0.23.1",
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index d98956276e64..c105f20cc844 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -9,7 +9,7 @@ import {
 } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import { Server } from 'ws';
 import { existsSync, readFileSync } from 'fs';
 import { installHook } from 'src/hook';
@@ -241,12 +241,16 @@ function startServer(port?: number = 8097) {
     // because they are generally stored in localStorage within the context of the extension.
     // Because of this it relies on the extension to pass filters, so include them wth the response here.
     // This will ensure that saved filters are shared across different web pages.
-    const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      getSavedComponentFilters()
-    )};`;
+    const savedPreferencesString = `
+      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+        getSavedComponentFilters()
+      )};
+      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+        getAppendComponentStack()
+      )};`;
 
     response.end(
-      savedFiltersString +
+      savedPreferencesString +
         '\n;' +
         backendFile.toString() +
         '\n;' +
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 3d80e951ec0b..3554ed03eee1 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -6,7 +6,7 @@ import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import inject from './inject';
 import { createViewElementSource, getBrowserTheme } from './utils';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -22,16 +22,23 @@ let panelCreated = false;
 // The renderer interface can't read saved component filters directly,
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
-function initializeSavedComponentFilters() {
+function syncSavedPreferences() {
   const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
       componentFilters
     )};`
   );
+
+  const appendComponentStack = getAppendComponentStack();
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+      appendComponentStack
+    )};`
+  );
 }
 
-initializeSavedComponentFilters();
+syncSavedPreferences();
 
 function createPanelIfReactLoaded() {
   if (panelCreated) {
@@ -286,7 +293,7 @@ function createPanelIfReactLoaded() {
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         // Re-initialize saved filters on navigation,
         // since global values stored on window get reset in this case.
-        initializeSavedComponentFilters();
+        syncSavedPreferences();
 
         // It's easiest to recreate the DevTools panel (to clean up potential stale state).
         // We can revisit this in the future as a small optimization.
@@ -302,7 +309,7 @@ function createPanelIfReactLoaded() {
 
 // Load (or reload) the DevTools extension when the user navigates to a new page.
 function checkPageForReact() {
-  initializeSavedComponentFilters();
+  syncSavedPreferences();
   createPanelIfReactLoaded();
 }
 
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 6bf66cddcdd4..80d8bb38ccb1 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -8,7 +8,7 @@ import { installHook } from 'src/hook';
 import { initDevTools } from 'src/devtools';
 import Store from 'src/devtools/store';
 import DevTools from 'src/devtools/views/DevTools';
-import { getSavedComponentFilters } from 'src/utils';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
@@ -18,6 +18,7 @@ const { contentDocument, contentWindow } = iframe;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
+contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = getAppendComponentStack();
 
 installHook(contentWindow);
 
diff --git a/src/__tests__/console-test.js b/src/__tests__/console-test.js
new file mode 100644
index 000000000000..92d54d2097ae
--- /dev/null
+++ b/src/__tests__/console-test.js
@@ -0,0 +1,349 @@
+// @flow
+
+describe('console', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let enableConsole;
+  let disableConsole;
+  let fakeConsole;
+  let mockError;
+  let mockLog;
+  let mockWarn;
+  let patchConsole;
+  let unpatchConsole;
+
+  beforeEach(() => {
+    const Console = require('../backend/console');
+    enableConsole = Console.enable;
+    disableConsole = Console.disable;
+    patchConsole = Console.patch;
+    unpatchConsole = Console.unpatch;
+
+    const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
+      inject(internals);
+
+      Console.registerRenderer(internals);
+    };
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const utils = require('./utils');
+    act = utils.act;
+
+    // Patch a fake console so we can verify with tests below.
+    // Patching the real console is too complicated,
+    // because Jest itself has hooks into it as does our test env setup.
+    mockError = jest.fn();
+    mockLog = jest.fn();
+    mockWarn = jest.fn();
+    fakeConsole = {
+      error: mockError,
+      log: mockLog,
+      warn: mockWarn,
+    };
+
+    patchConsole(fakeConsole);
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
+  it('should only patch the console once', () => {
+    const { error, warn } = fakeConsole;
+
+    patchConsole(fakeConsole);
+
+    expect(fakeConsole.error).toBe(error);
+    expect(fakeConsole.warn).toBe(warn);
+  });
+
+  it('should un-patch when requested', () => {
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+
+    unpatchConsole();
+
+    expect(fakeConsole.error).toBe(mockError);
+    expect(fakeConsole.warn).toBe(mockWarn);
+  });
+
+  it('should pass through logs when there is no current fiber', () => {
+    expect(mockLog).toHaveBeenCalledTimes(0);
+    expect(mockWarn).toHaveBeenCalledTimes(0);
+    expect(mockError).toHaveBeenCalledTimes(0);
+    fakeConsole.log('log');
+    fakeConsole.warn('warn');
+    fakeConsole.error('error');
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
+
+  it('should suppress console logging when disabled', () => {
+    disableConsole();
+    fakeConsole.log('log');
+    fakeConsole.warn('warn');
+    fakeConsole.error('error');
+    expect(mockLog).toHaveBeenCalledTimes(0);
+    expect(mockWarn).toHaveBeenCalledTimes(0);
+    expect(mockError).toHaveBeenCalledTimes(0);
+
+    enableConsole();
+    fakeConsole.log('log');
+    fakeConsole.warn('warn');
+    fakeConsole.error('error');
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
+
+  it('should not append multiple stacks', () => {
+    const Child = () => {
+      fakeConsole.warn('warn\n    in Child (at fake.js:123)');
+      fakeConsole.error('error', '\n    in Child (at fake.js:123)');
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe(
+      'warn\n    in Child (at fake.js:123)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[0][1]).toBe('\n    in Child (at fake.js:123)');
+  });
+
+  it('should append component stacks to errors and warnings logged during render', () => {
+    const Intermediate = ({ children }) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = () => {
+      fakeConsole.error('error');
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from effects', () => {
+    const Intermediate = ({ children }) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = () => {
+      React.useLayoutEffect(() => {
+        fakeConsole.error('active error');
+        fakeConsole.log('active log');
+        fakeConsole.warn('active warn');
+      });
+      React.useEffect(() => {
+        fakeConsole.error('passive error');
+        fakeConsole.log('passive log');
+        fakeConsole.warn('passive warn');
+      });
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('active log');
+    expect(mockLog.mock.calls[1]).toHaveLength(1);
+    expect(mockLog.mock.calls[1][0]).toBe('passive log');
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('active warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('active error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('passive error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from commit hooks', () => {
+    const Intermediate = ({ children }) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any> {
+      componentDidMount() {
+        fakeConsole.error('didMount error');
+        fakeConsole.log('didMount log');
+        fakeConsole.warn('didMount warn');
+      }
+      componentDidUpdate() {
+        fakeConsole.error('didUpdate error');
+        fakeConsole.log('didUpdate log');
+        fakeConsole.warn('didUpdate warn');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Parent />, container));
+    act(() => ReactDOM.render(<Parent />, container));
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('didMount log');
+    expect(mockLog.mock.calls[1]).toHaveLength(1);
+    expect(mockLog.mock.calls[1][0]).toBe('didUpdate log');
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('didMount error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from gDSFP', () => {
+    const Intermediate = ({ children }) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any, any> {
+      state = {};
+      static getDerivedStateFromProps() {
+        fakeConsole.error('error');
+        fakeConsole.log('log');
+        fakeConsole.warn('warn');
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)'
+    );
+  });
+
+  it('should append stacks after being uninstalled and reinstalled', () => {
+    const Child = () => {
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return null;
+    };
+
+    unpatchConsole();
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+
+    patchConsole(fakeConsole);
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)'
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)'
+    );
+  });
+});
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 7e9ee97dc628..01895d183d9b 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -530,16 +530,20 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
-      jest.runOnlyPendingTimers();
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
-      jest.runOnlyPendingTimers();
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
@@ -548,16 +552,18 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getInspectedElementPath(id, [
-        'props',
-        'nestedObject',
-        'a',
-        'b',
-        'c',
-        0,
-        'd',
-      ]);
-      jest.runOnlyPendingTimers();
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, [
+          'props',
+          'nestedObject',
+          'a',
+          'b',
+          'c',
+          0,
+          'd',
+        ]);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
@@ -566,16 +572,20 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getInspectedElementPath(id, ['hooks', 0, 'value']);
-      jest.runOnlyPendingTimers();
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['hooks', 0, 'value']);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');
 
     inspectedElement = null;
     TestUtils.act(() => {
-      getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
-      jest.runOnlyPendingTimers();
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
@@ -645,7 +655,7 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
 
     inspectedElement = null;
-    TestUtils.act(() => {
+    TestRenderer.act(() => {
       getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
       jest.runOnlyPendingTimers();
     });
@@ -653,44 +663,46 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
 
     inspectedElement = null;
-    TestUtils.act(() => {
+    TestRenderer.act(() => {
       getInspectedElementPath(id, ['props', 'nestedObject', 'c']);
       jest.runOnlyPendingTimers();
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');
 
-    TestUtils.act(() => {
-      ReactDOM.render(
-        <Example
-          nestedObject={{
-            a: {
-              value: 2,
-              b: {
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        ReactDOM.render(
+          <Example
+            nestedObject={{
+              a: {
                 value: 2,
+                b: {
+                  value: 2,
+                },
               },
-            },
-            c: {
-              value: 2,
-              d: {
+              c: {
                 value: 2,
-                e: {
+                d: {
                   value: 2,
+                  e: {
+                    value: 2,
+                  },
                 },
               },
-            },
-          }}
-        />,
-        container
-      );
+            }}
+          />,
+          container
+        );
+      });
     });
 
-    TestUtils.act(() => {
+    TestRenderer.act(() => {
       inspectedElement = null;
       jest.advanceTimersByTime(1000);
-      expect(inspectedElement).not.toBeNull();
-      expect(inspectedElement).toMatchSnapshot('4: update inspected element');
     });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('4: update inspected element');
 
     done();
   });
@@ -764,9 +776,12 @@ describe('InspectedElementContext', () => {
     });
 
     inspectedElement = null;
-    TestUtils.act(() => {
-      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
-      jest.runOnlyPendingTimers();
+
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
+        jest.runOnlyPendingTimers();
+      });
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index 4e1688a778f7..e5b56028936f 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -34,7 +34,7 @@ describe('ProfilingCache', () => {
 
   it('should collect data for each root (including ones added or mounted after profiling started)', () => {
     const Parent = ({ count }) => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} duration={index} />);
@@ -46,7 +46,7 @@ describe('ProfilingCache', () => {
       );
     };
     const Child = ({ duration }) => {
-      Scheduler.advanceTime(duration);
+      Scheduler.unstable_advanceTime(duration);
       return null;
     };
     const MemoizedChild = React.memo(Child);
@@ -118,7 +118,7 @@ describe('ProfilingCache', () => {
 
   it('should collect data for each commit', () => {
     const Parent = ({ count }) => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} duration={index} />);
@@ -130,7 +130,7 @@ describe('ProfilingCache', () => {
       );
     };
     const Child = ({ duration }) => {
-      Scheduler.advanceTime(duration);
+      Scheduler.unstable_advanceTime(duration);
       return null;
     };
     const MemoizedChild = React.memo(Child);
@@ -305,7 +305,7 @@ describe('ProfilingCache', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       return (
         <React.Fragment>
           <Parent key="one" />
@@ -314,11 +314,11 @@ describe('ProfilingCache', () => {
       );
     };
     const Parent = () => {
-      Scheduler.advanceTime(2);
+      Scheduler.unstable_advanceTime(2);
       return <Child />;
     };
     const Child = () => {
-      Scheduler.advanceTime(1);
+      Scheduler.unstable_advanceTime(1);
       return null;
     };
 
@@ -361,7 +361,7 @@ describe('ProfilingCache', () => {
     };
 
     const Parent = () => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       return (
         <React.Suspense fallback={<Fallback />}>
           <Async />
@@ -369,11 +369,11 @@ describe('ProfilingCache', () => {
       );
     };
     const Fallback = () => {
-      Scheduler.advanceTime(2);
+      Scheduler.unstable_advanceTime(2);
       return 'Fallback...';
     };
     const Async = () => {
-      Scheduler.advanceTime(3);
+      Scheduler.unstable_advanceTime(3);
       const data = getData();
       return data;
     };
@@ -412,7 +412,7 @@ describe('ProfilingCache', () => {
 
   it('should collect data for each rendered fiber', () => {
     const Parent = ({ count }) => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} duration={index} />);
@@ -424,7 +424,7 @@ describe('ProfilingCache', () => {
       );
     };
     const Child = ({ duration }) => {
-      Scheduler.advanceTime(duration);
+      Scheduler.unstable_advanceTime(duration);
       return null;
     };
     const MemoizedChild = React.memo(Child);
@@ -496,7 +496,7 @@ describe('ProfilingCache', () => {
 
   it('should report every traced interaction', () => {
     const Parent = ({ count }) => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} duration={index} />);
@@ -508,7 +508,7 @@ describe('ProfilingCache', () => {
       );
     };
     const Child = ({ duration }) => {
-      Scheduler.advanceTime(duration);
+      Scheduler.unstable_advanceTime(duration);
       return null;
     };
     const MemoizedChild = React.memo(Child);
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index 9cb6d25d6fd0..dbf1ee16544b 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -30,7 +30,7 @@ describe('profiling charts', () => {
   describe('flamegraph chart', () => {
     it('should contain valid data', () => {
       const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
+        Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
             <Child key="first" duration={3} />
@@ -42,7 +42,7 @@ describe('profiling charts', () => {
 
       // Memoize children to verify that chart doesn't include in the update.
       const Child = React.memo(function Child({ duration }) {
-        Scheduler.advanceTime(duration);
+        Scheduler.unstable_advanceTime(duration);
         return null;
       });
 
@@ -106,7 +106,7 @@ describe('profiling charts', () => {
   describe('ranked chart', () => {
     it('should contain valid data', () => {
       const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
+        Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
             <Child key="first" duration={3} />
@@ -118,7 +118,7 @@ describe('profiling charts', () => {
 
       // Memoize children to verify that chart doesn't include in the update.
       const Child = React.memo(function Child({ duration }) {
-        Scheduler.advanceTime(duration);
+        Scheduler.unstable_advanceTime(duration);
         return null;
       });
 
@@ -178,7 +178,7 @@ describe('profiling charts', () => {
   describe('interactions', () => {
     it('should contain valid data', () => {
       const Parent = ({ count }) => {
-        Scheduler.advanceTime(10);
+        Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
             <Child key="first" duration={3} />
@@ -190,7 +190,7 @@ describe('profiling charts', () => {
 
       // Memoize children to verify that chart doesn't include in the update.
       const Child = React.memo(function Child({ duration }) {
-        Scheduler.advanceTime(duration);
+        Scheduler.unstable_advanceTime(duration);
         return null;
       });
 
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/src/__tests__/profilingCommitTreeBuilder-test.js
index 68d42961ea36..0ef670607f96 100644
--- a/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -27,13 +27,13 @@ describe('commit tree', () => {
 
   it('should be able to rebuild the store tree for each commit', () => {
     const Parent = ({ count }) => {
-      Scheduler.advanceTime(10);
+      Scheduler.unstable_advanceTime(10);
       return new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} />);
     };
     const Child = React.memo(function Child() {
-      Scheduler.advanceTime(2);
+      Scheduler.unstable_advanceTime(2);
       return null;
     });
 
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 089ddf045fed..345b773832aa 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -8,14 +8,20 @@ import type { ProfilingDataFrontend } from 'src/devtools/views/Profiler/types';
 import type { ElementType } from 'src/types';
 
 export function act(callback: Function): void {
-  const TestUtils = require('react-dom/test-utils');
-  TestUtils.act(() => {
-    callback();
+  const { act: actTestRenderer } = require('react-test-renderer');
+  const { act: actDOM } = require('react-dom/test-utils');
+
+  actDOM(() => {
+    actTestRenderer(() => {
+      callback();
+    });
   });
 
   // Flush Bridge operations
-  TestUtils.act(() => {
-    jest.runAllTimers();
+  actDOM(() => {
+    actTestRenderer(() => {
+      jest.runAllTimers();
+    });
   });
 }
 
@@ -23,24 +29,31 @@ export async function actAsync(
   cb: () => *,
   recursivelyFlush: boolean = true
 ): Promise<void> {
-  const TestUtils = require('react-dom/test-utils');
+  const { act: actTestRenderer } = require('react-test-renderer');
+  const { act: actDOM } = require('react-dom/test-utils');
 
   // $FlowFixMe Flow doens't know about "await act()" yet
-  await TestUtils.act(async () => {
-    await cb();
+  await actDOM(async () => {
+    await actTestRenderer(async () => {
+      await cb();
+    });
   });
 
   if (recursivelyFlush) {
     while (jest.getTimerCount() > 0) {
       // $FlowFixMe Flow doens't know about "await act()" yet
-      await TestUtils.act(async () => {
-        jest.runAllTimers();
+      await actDOM(async () => {
+        await actTestRenderer(async () => {
+          jest.runAllTimers();
+        });
       });
     }
   } else {
     // $FlowFixMe Flow doesn't know about "await act()" yet
-    await TestUtils.act(async () => {
-      jest.runOnlyPendingTimers();
+    await actDOM(async () => {
+      await actTestRenderer(async () => {
+        jest.runOnlyPendingTimers();
+      });
     });
   }
 }
@@ -122,10 +135,17 @@ export function getRendererID(): number {
     throw Error('Agent unavailable.');
   }
   const ids = Object.keys(global.agent._rendererInterfaces);
-  if (ids.length !== 1) {
-    throw Error('Multiple renderers attached.');
+
+  const id = ids.find(id => {
+    const rendererInterface = global.agent._rendererInterfaces[id];
+    return rendererInterface.renderer.rendererPackageName === 'react-dom';
+  });
+
+  if (ids == null) {
+    throw Error('Could not find renderer.');
   }
-  return parseInt(ids[0], 10);
+
+  return parseInt(id, 10);
 }
 
 export function requireTestRenderer(): ReactTestRenderer {
diff --git a/src/backend/agent.js b/src/backend/agent.js
index abdd5ed37f6f..fadd2e697ee5 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -15,6 +15,7 @@ import {
   sessionStorageSetItem,
 } from 'src/storage';
 import setupHighlighter from './views/Highlighter';
+import { patch as patchConsole, unpatch as unpatchConsole } from './console';
 
 import type {
   InstanceAndStyle,
@@ -133,6 +134,10 @@ export default class Agent extends EventEmitter<{|
       this.syncSelectionFromNativeElementsPanel
     );
     bridge.addListener('shutdown', this.shutdown);
+    bridge.addListener(
+      'updateAppendComponentStack',
+      this.updateAppendComponentStack
+    );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
@@ -402,6 +407,18 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  updateAppendComponentStack = (appendComponentStack: boolean) => {
+    // If the frontend preference has change,
+    // or in the case of React Native- if the backend is just finding out the preference-
+    // then install or uninstall the console overrides.
+    // It's safe to call these methods multiple times, so we don't need to worry about that.
+    if (appendComponentStack) {
+      patchConsole();
+    } else {
+      unpatchConsole();
+    }
+  };
+
   updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
     for (let rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
diff --git a/src/backend/console.js b/src/backend/console.js
new file mode 100644
index 000000000000..95a457781972
--- /dev/null
+++ b/src/backend/console.js
@@ -0,0 +1,125 @@
+// @flow
+
+import { getInternalReactConstants } from './renderer';
+import describeComponentFrame from './describeComponentFrame';
+
+import type { Fiber, ReactRenderer } from './types';
+
+const FRAME_REGEX = /\n {4}in /;
+
+const injectedRenderers: Map<
+  ReactRenderer,
+  {|
+    getCurrentFiber: () => Fiber | null,
+    getDisplayNameForFiber: (fiber: Fiber) => string | null,
+  |}
+> = new Map();
+
+let isDisabled: boolean = false;
+let unpatchFn: null | (() => void) = null;
+
+export function disable(): void {
+  isDisabled = true;
+}
+
+export function enable(): void {
+  isDisabled = false;
+}
+
+export function registerRenderer(renderer: ReactRenderer): void {
+  const { getCurrentFiber, findFiberByHostInstance, version } = renderer;
+
+  // Ignore React v15 and older because they don't expose a component stack anyway.
+  if (typeof findFiberByHostInstance !== 'function') {
+    return;
+  }
+
+  if (typeof getCurrentFiber === 'function') {
+    const { getDisplayNameForFiber } = getInternalReactConstants(version);
+
+    injectedRenderers.set(renderer, {
+      getCurrentFiber,
+      getDisplayNameForFiber,
+    });
+  }
+}
+
+export function patch(targetConsole?: Object = console): void {
+  if (unpatchFn !== null) {
+    // Don't patch twice.
+    return;
+  }
+
+  const originalConsoleMethods = { ...targetConsole };
+
+  unpatchFn = () => {
+    for (let method in targetConsole) {
+      try {
+        // $FlowFixMe property error|warn is not writable.
+        targetConsole[method] = originalConsoleMethods[method];
+      } catch (error) {}
+    }
+  };
+
+  for (let method in targetConsole) {
+    const appendComponentStack =
+      method === 'error' || method === 'warn' || method === 'trace';
+
+    const originalMethod = targetConsole[method];
+    const overrideMethod = (...args) => {
+      if (isDisabled) return;
+
+      if (appendComponentStack) {
+        // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
+        // don't append a second stack.
+        const alreadyHasComponentStack =
+          args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);
+
+        if (!alreadyHasComponentStack) {
+          // If there's a component stack for at least one of the injected renderers, append it.
+          // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+          for (let {
+            getCurrentFiber,
+            getDisplayNameForFiber,
+          } of injectedRenderers.values()) {
+            let current: ?Fiber = getCurrentFiber();
+            let ownerStack: string = '';
+            while (current != null) {
+              const name = getDisplayNameForFiber(current);
+              const owner = current._debugOwner;
+              const ownerName =
+                owner != null ? getDisplayNameForFiber(owner) : null;
+
+              ownerStack += describeComponentFrame(
+                name,
+                current._debugSource,
+                ownerName
+              );
+
+              current = owner;
+            }
+
+            if (ownerStack !== '') {
+              args.push(ownerStack);
+              break;
+            }
+          }
+        }
+      }
+
+      originalMethod(...args);
+    };
+
+    try {
+      // $FlowFixMe property error|warn is not writable.
+      targetConsole[method] = overrideMethod;
+    } catch (error) {}
+  }
+}
+
+export function unpatch(): void {
+  if (unpatchFn !== null) {
+    unpatchFn();
+    unpatchFn = null;
+  }
+}
diff --git a/src/backend/describeComponentFrame.js b/src/backend/describeComponentFrame.js
new file mode 100644
index 000000000000..5c632471babc
--- /dev/null
+++ b/src/backend/describeComponentFrame.js
@@ -0,0 +1,41 @@
+// @flow
+
+// This file was forked from the React GitHub repo:
+// https://raw.githubusercontent.com/facebook/react/master/packages/shared/describeComponentFrame.js
+//
+// It has been modified sligthly to add a zero width space as commented below.
+
+const BEFORE_SLASH_RE = /^(.*)[\\/]/;
+
+export default function describeComponentFrame(
+  name: null | string,
+  source: any,
+  ownerName: null | string
+) {
+  let sourceInfo = '';
+  if (source) {
+    let path = source.fileName;
+    let fileName = path.replace(BEFORE_SLASH_RE, '');
+    if (__DEV__) {
+      // In DEV, include code for a common special case:
+      // prefer "folder/index.js" instead of just "index.js".
+      if (/^index\./.test(fileName)) {
+        const match = path.match(BEFORE_SLASH_RE);
+        if (match) {
+          const pathBeforeSlash = match[1];
+          if (pathBeforeSlash) {
+            const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            // Note the below string contains a zero width space after the "/" character.
+            // This is to prevent browsers like Chrome from formatting the file name as a link.
+            // (Since this is a source link, it would not work to open the source file anyway.)
+            fileName = folderName + '/​' + fileName;
+          }
+        }
+      }
+    }
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
diff --git a/src/backend/index.js b/src/backend/index.js
index 3e65e4c00cff..feee4c00dedd 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,11 +1,12 @@
 // @flow
 
-import type { DevToolsHook, ReactRenderer, RendererInterface } from './types';
 import Agent from './agent';
 
 import { attach } from './renderer';
 import { attach as attachLegacy } from './legacy/renderer';
 
+import type { DevToolsHook, ReactRenderer, RendererInterface } from './types';
+
 export function initBackend(
   hook: DevToolsHook,
   agent: Agent,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index dbb91eec68cd..dadee18bc61e 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -39,6 +39,12 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
+import {
+  disable as disableConsole,
+  enable as enableConsole,
+  patch as patchConsole,
+  registerRenderer as registerRendererWithConsole,
+} from './console';
 
 import type {
   ChangeDescription,
@@ -59,8 +65,89 @@ import type {
 import type { Interaction } from 'src/devtools/views/Profiler/types';
 import type { ComponentFilter, ElementType } from 'src/types';
 
-function getInternalReactConstants(version) {
-  const ReactSymbols = {
+type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
+type getTypeSymbolType = (type: any) => Symbol | number;
+
+type ReactSymbolsType = {
+  CONCURRENT_MODE_NUMBER: number,
+  CONCURRENT_MODE_SYMBOL_STRING: string,
+  DEPRECATED_ASYNC_MODE_SYMBOL_STRING: string,
+  CONTEXT_CONSUMER_NUMBER: number,
+  CONTEXT_CONSUMER_SYMBOL_STRING: string,
+  CONTEXT_PROVIDER_NUMBER: number,
+  CONTEXT_PROVIDER_SYMBOL_STRING: string,
+  EVENT_COMPONENT_NUMBER: number,
+  EVENT_COMPONENT_STRING: string,
+  EVENT_TARGET_NUMBER: number,
+  EVENT_TARGET_STRING: string,
+  EVENT_TARGET_TOUCH_HIT_NUMBER: number,
+  EVENT_TARGET_TOUCH_HIT_STRING: string,
+  FORWARD_REF_NUMBER: number,
+  FORWARD_REF_SYMBOL_STRING: string,
+  MEMO_NUMBER: number,
+  MEMO_SYMBOL_STRING: string,
+  PROFILER_NUMBER: number,
+  PROFILER_SYMBOL_STRING: string,
+  STRICT_MODE_NUMBER: number,
+  STRICT_MODE_SYMBOL_STRING: string,
+  SUSPENSE_NUMBER: number,
+  SUSPENSE_SYMBOL_STRING: string,
+  DEPRECATED_PLACEHOLDER_SYMBOL_STRING: string,
+};
+
+type ReactPriorityLevelsType = {|
+  ImmediatePriority: number,
+  UserBlockingPriority: number,
+  NormalPriority: number,
+  LowPriority: number,
+  IdlePriority: number,
+  NoPriority: number,
+|};
+
+type ReactTypeOfWorkType = {|
+  ClassComponent: number,
+  ContextConsumer: number,
+  ContextProvider: number,
+  CoroutineComponent: number,
+  CoroutineHandlerPhase: number,
+  DehydratedSuspenseComponent: number,
+  EventComponent: number,
+  EventTarget: number,
+  ForwardRef: number,
+  Fragment: number,
+  FunctionComponent: number,
+  HostComponent: number,
+  HostPortal: number,
+  HostRoot: number,
+  HostText: number,
+  IncompleteClassComponent: number,
+  IndeterminateComponent: number,
+  LazyComponent: number,
+  MemoComponent: number,
+  Mode: number,
+  Profiler: number,
+  SimpleMemoComponent: number,
+  SuspenseComponent: number,
+  YieldComponent: number,
+|};
+
+type ReactTypeOfSideEffectType = {|
+  NoEffect: number,
+  PerformedWork: number,
+  Placement: number,
+|};
+
+export function getInternalReactConstants(
+  version: string
+): {|
+  getDisplayNameForFiber: getDisplayNameForFiberType,
+  getTypeSymbol: getTypeSymbolType,
+  ReactPriorityLevels: ReactPriorityLevelsType,
+  ReactSymbols: ReactSymbolsType,
+  ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
+  ReactTypeOfWork: ReactTypeOfWorkType,
+|} {
+  const ReactSymbols: ReactSymbolsType = {
     CONCURRENT_MODE_NUMBER: 0xeacf,
     CONCURRENT_MODE_SYMBOL_STRING: 'Symbol(react.concurrent_mode)',
     DEPRECATED_ASYNC_MODE_SYMBOL_STRING: 'Symbol(react.async_mode)',
@@ -87,7 +174,7 @@ function getInternalReactConstants(version) {
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING: 'Symbol(react.placeholder)',
   };
 
-  const ReactTypeOfSideEffect = {
+  const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
     NoEffect: 0b00,
     PerformedWork: 0b01,
     Placement: 0b10,
@@ -100,7 +187,7 @@ function getInternalReactConstants(version) {
   // Technically these priority levels are invalid for versions before 16.9,
   // but 16.9 is the first version to report priority level to DevTools,
   // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
-  const ReactPriorityLevels = {
+  const ReactPriorityLevels: ReactPriorityLevelsType = {
     ImmediatePriority: 99,
     UserBlockingPriority: 98,
     NormalPriority: 97,
@@ -109,7 +196,7 @@ function getInternalReactConstants(version) {
     NoPriority: 90,
   };
 
-  let ReactTypeOfWork;
+  let ReactTypeOfWork: ReactTypeOfWorkType = ((null: any): ReactTypeOfWorkType);
 
   // **********************************************************
   // The section below is copied from files in React repo.
@@ -200,7 +287,149 @@ function getInternalReactConstants(version) {
   // End of copied code.
   // **********************************************************
 
+  function getTypeSymbol(type: any): Symbol | number {
+    const symbolOrNumber =
+      typeof type === 'object' && type !== null ? type.$$typeof : type;
+
+    return typeof symbolOrNumber === 'symbol'
+      ? symbolOrNumber.toString()
+      : symbolOrNumber;
+  }
+
+  const {
+    ClassComponent,
+    IncompleteClassComponent,
+    FunctionComponent,
+    IndeterminateComponent,
+    EventComponent,
+    EventTarget,
+    ForwardRef,
+    HostRoot,
+    HostComponent,
+    HostPortal,
+    HostText,
+    Fragment,
+    MemoComponent,
+    SimpleMemoComponent,
+  } = ReactTypeOfWork;
+
+  const {
+    EVENT_TARGET_TOUCH_HIT_NUMBER,
+    EVENT_TARGET_TOUCH_HIT_STRING,
+    CONCURRENT_MODE_NUMBER,
+    CONCURRENT_MODE_SYMBOL_STRING,
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
+    CONTEXT_PROVIDER_NUMBER,
+    CONTEXT_PROVIDER_SYMBOL_STRING,
+    CONTEXT_CONSUMER_NUMBER,
+    CONTEXT_CONSUMER_SYMBOL_STRING,
+    STRICT_MODE_NUMBER,
+    STRICT_MODE_SYMBOL_STRING,
+    SUSPENSE_NUMBER,
+    SUSPENSE_SYMBOL_STRING,
+    DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
+    PROFILER_NUMBER,
+    PROFILER_SYMBOL_STRING,
+  } = ReactSymbols;
+
+  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
+  function getDisplayNameForFiber(fiber: Fiber): string | null {
+    const { elementType, type, tag } = fiber;
+
+    // This is to support lazy components with a Promise as the type.
+    // see https://github.com/facebook/react/pull/13397
+    let resolvedType = type;
+    if (typeof type === 'object' && type !== null) {
+      if (typeof type.then === 'function') {
+        resolvedType = type._reactResult;
+      }
+    }
+
+    let resolvedContext: any = null;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+        return getDisplayName(resolvedType);
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return getDisplayName(resolvedType);
+      case EventComponent:
+        return type.responder.displayName || 'EventComponent';
+      case EventTarget:
+        switch (getTypeSymbol(elementType.type)) {
+          case EVENT_TARGET_TOUCH_HIT_NUMBER:
+          case EVENT_TARGET_TOUCH_HIT_STRING:
+            return 'TouchHitTarget';
+          default:
+            return elementType.displayName || 'EventTarget';
+        }
+      case ForwardRef:
+        return (
+          resolvedType.displayName ||
+          getDisplayName(resolvedType.render, 'Anonymous')
+        );
+      case HostRoot:
+        return null;
+      case HostComponent:
+        return type;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return null;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        if (elementType.displayName) {
+          return elementType.displayName;
+        } else {
+          return getDisplayName(type, 'Anonymous');
+        }
+      default:
+        const typeSymbol = getTypeSymbol(type);
+
+        switch (typeSymbol) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+            return null;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+            // 16.3.0 exposed the context object as "context"
+            // PR #12501 changed it to "_context" for 16.3.1+
+            // NOTE Keep in sync with inspectElementRaw()
+            resolvedContext = fiber.type._context || fiber.type.context;
+            return `${resolvedContext.displayName || 'Context'}.Provider`;
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+            // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+            // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+            // NOTE Keep in sync with inspectElementRaw()
+            resolvedContext = fiber.type._context || fiber.type;
+
+            // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
+            // If you change the name, figure out a more resilient way to detect it.
+            return `${resolvedContext.displayName || 'Context'}.Consumer`;
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return null;
+          case SUSPENSE_NUMBER:
+          case SUSPENSE_SYMBOL_STRING:
+          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
+            return 'Suspense';
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            return `Profiler(${fiber.memoizedProps.id})`;
+          default:
+            // Unknown element type.
+            // This may mean a new element type that has not yet been added to DevTools.
+            return null;
+        }
+    }
+  }
+
   return {
+    getDisplayNameForFiber,
+    getTypeSymbol,
     ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
@@ -215,6 +444,8 @@ export function attach(
   global: Object
 ): RendererInterface {
   const {
+    getDisplayNameForFiber,
+    getTypeSymbol,
     ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
@@ -256,8 +487,6 @@ export function attach(
     CONTEXT_CONSUMER_SYMBOL_STRING,
     CONTEXT_PROVIDER_NUMBER,
     CONTEXT_PROVIDER_SYMBOL_STRING,
-    EVENT_TARGET_TOUCH_HIT_NUMBER,
-    EVENT_TARGET_TOUCH_HIT_STRING,
     PROFILER_NUMBER,
     PROFILER_SYMBOL_STRING,
     STRICT_MODE_NUMBER,
@@ -277,6 +506,22 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  // Patching the console enables DevTools to do a few useful things:
+  // * Append component stacks to warnings and error messages
+  // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
+  //
+  // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
+  if (process.env.NODE_ENV !== 'test') {
+    registerRendererWithConsole(renderer);
+
+    // The renderer interface can't read this preference directly,
+    // because it is stored in localStorage within the context of the extension.
+    // It relies on the extension to pass the preference through via the global.
+    if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {
+      patchConsole();
+    }
+  }
+
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
       const displayName = getDisplayNameForFiber(fiber) || 'null';
@@ -345,7 +590,10 @@ export function attach(
   if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
     applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
   } else {
-    console.warn('⚛️ DevTools: Could not locate saved component filters');
+    // Unfortunately this feature is not expected to work for React Native for now.
+    // It would be annoying for us to spam YellowBox warnings with unactionable stuff,
+    // so for now just skip this message...
+    //console.warn('⚛️ DevTools: Could not locate saved component filters');
 
     // Fallback to assuming the default filters in this case.
     applyComponentFilters(getDefaultComponentFilters());
@@ -447,111 +695,6 @@ export function attach(
 
     return false;
   }
-
-  function getTypeSymbol(type: any): Symbol | number {
-    const symbolOrNumber =
-      typeof type === 'object' && type !== null ? type.$$typeof : type;
-
-    return typeof symbolOrNumber === 'symbol'
-      ? symbolOrNumber.toString()
-      : symbolOrNumber;
-  }
-
-  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
-  function getDisplayNameForFiber(fiber: Fiber): string | null {
-    const { elementType, type, tag } = fiber;
-
-    // This is to support lazy components with a Promise as the type.
-    // see https://github.com/facebook/react/pull/13397
-    let resolvedType = type;
-    if (typeof type === 'object' && type !== null) {
-      if (typeof type.then === 'function') {
-        resolvedType = type._reactResult;
-      }
-    }
-
-    let resolvedContext: any = null;
-
-    switch (tag) {
-      case ClassComponent:
-      case IncompleteClassComponent:
-        return getDisplayName(resolvedType);
-      case FunctionComponent:
-      case IndeterminateComponent:
-        return getDisplayName(resolvedType);
-      case EventComponent:
-        return type.responder.displayName || 'EventComponent';
-      case EventTarget:
-        switch (getTypeSymbol(elementType.type)) {
-          case EVENT_TARGET_TOUCH_HIT_NUMBER:
-          case EVENT_TARGET_TOUCH_HIT_STRING:
-            return 'TouchHitTarget';
-          default:
-            return elementType.displayName || 'EventTarget';
-        }
-      case ForwardRef:
-        return (
-          resolvedType.displayName ||
-          getDisplayName(resolvedType.render, 'Anonymous')
-        );
-      case HostRoot:
-        return null;
-      case HostComponent:
-        return type;
-      case HostPortal:
-      case HostText:
-      case Fragment:
-        return null;
-      case MemoComponent:
-      case SimpleMemoComponent:
-        if (elementType.displayName) {
-          return elementType.displayName;
-        } else {
-          return getDisplayName(type, 'Anonymous');
-        }
-      default:
-        const typeSymbol = getTypeSymbol(type);
-
-        switch (typeSymbol) {
-          case CONCURRENT_MODE_NUMBER:
-          case CONCURRENT_MODE_SYMBOL_STRING:
-          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
-            return null;
-          case CONTEXT_PROVIDER_NUMBER:
-          case CONTEXT_PROVIDER_SYMBOL_STRING:
-            // 16.3.0 exposed the context object as "context"
-            // PR #12501 changed it to "_context" for 16.3.1+
-            // NOTE Keep in sync with inspectElementRaw()
-            resolvedContext = fiber.type._context || fiber.type.context;
-            return `${resolvedContext.displayName || 'Context'}.Provider`;
-          case CONTEXT_CONSUMER_NUMBER:
-          case CONTEXT_CONSUMER_SYMBOL_STRING:
-            // 16.3-16.5 read from "type" because the Consumer is the actual context object.
-            // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
-            // NOTE Keep in sync with inspectElementRaw()
-            resolvedContext = fiber.type._context || fiber.type;
-
-            // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
-            // If you change the name, figure out a more resilient way to detect it.
-            return `${resolvedContext.displayName || 'Context'}.Consumer`;
-          case STRICT_MODE_NUMBER:
-          case STRICT_MODE_SYMBOL_STRING:
-            return null;
-          case SUSPENSE_NUMBER:
-          case SUSPENSE_SYMBOL_STRING:
-          case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
-            return 'Suspense';
-          case PROFILER_NUMBER:
-          case PROFILER_SYMBOL_STRING:
-            return `Profiler(${fiber.memoizedProps.id})`;
-          default:
-            // Unknown element type.
-            // This may mean a new element type that has not yet been added to DevTools.
-            return null;
-        }
-    }
-  }
-
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getElementTypeForFiber(fiber: Fiber): ElementType {
     const { type, tag } = fiber;
@@ -2109,6 +2252,20 @@ export function attach(
       node = node.return;
     }
 
+    let hooks = null;
+    if (usesHooks) {
+      // Suppress console logging while re-rendering
+      try {
+        disableConsole();
+        hooks = inspectHooksOfFiber(
+          fiber,
+          (renderer.currentDispatcherRef: any)
+        );
+      } finally {
+        enableConsole();
+      }
+    }
+
     return {
       id,
 
@@ -2136,9 +2293,7 @@ export function attach(
       // TODO Review sanitization approach for the below inspectable values.
       context,
       events,
-      hooks: usesHooks
-        ? inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
-        : null,
+      hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
 
diff --git a/src/backend/types.js b/src/backend/types.js
index 59791db472ae..ac6b6a49da84 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -118,6 +118,10 @@ export type ReactRenderer = {
   // Only injected by React v16.8+ in order to support hooks inspection.
   currentDispatcherRef?: {| current: null | Dispatcher |},
 
+  // Only injected by React v16.9+ in DEV mode.
+  // Enables DevTools to append owners-only component stack to error messages.
+  getCurrentFiber?: () => Fiber | null,
+
   // <= 15
   Mount?: any,
 };
diff --git a/src/bridge.js b/src/bridge.js
index d9db3b6318f1..c5ed0f4a0379 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -98,6 +98,7 @@ export default class Bridge extends EventEmitter<{|
   stopProfiling: [],
   syncSelectionFromNativeElementsPanel: [],
   syncSelectionToNativeElementsPanel: [],
+  updateAppendComponentStack: [boolean],
   updateComponentFilters: [Array<ComponentFilter>],
   viewElementSource: [ElementAndRendererID],
 
diff --git a/src/constants.js b/src/constants.js
index 9267c53e4b5e..da55631a01e4 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -20,4 +20,7 @@ export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
 export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
 
+export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
+  'React::DevTools::appendComponentStack';
+
 export const PROFILER_EXPORT_VERSION = 4;
diff --git a/src/devtools/views/Settings/GeneralSettings.js b/src/devtools/views/Settings/GeneralSettings.js
index 899eaafefaea..60d61bb817fa 100644
--- a/src/devtools/views/Settings/GeneralSettings.js
+++ b/src/devtools/views/Settings/GeneralSettings.js
@@ -1,27 +1,25 @@
 // @flow
 
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import { SettingsContext } from './SettingsContext';
 
 import styles from './SettingsShared.css';
 
 export default function GeneralSettings(_: {||}) {
-  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
-    SettingsContext
-  );
+  const {
+    displayDensity,
+    setDisplayDensity,
+    theme,
+    setTheme,
+    appendComponentStack,
+    setAppendComponentStack,
+  } = useContext(SettingsContext);
 
-  const updateDisplayDensity = useCallback(
-    ({ currentTarget }) => {
-      setDisplayDensity(currentTarget.value);
-    },
-    [setDisplayDensity]
-  );
-  const updateTheme = useCallback(
-    ({ currentTarget }) => {
-      setTheme(currentTarget.value);
-    },
-    [setTheme]
-  );
+  const updateDisplayDensity = ({ currentTarget }) =>
+    setDisplayDensity(currentTarget.value);
+  const updateTheme = ({ currentTarget }) => setTheme(currentTarget.value);
+  const updateappendComponentStack = ({ currentTarget }) =>
+    setAppendComponentStack(currentTarget.checked);
 
   return (
     <div className={styles.Settings}>
@@ -45,6 +43,17 @@ export default function GeneralSettings(_: {||}) {
           <option value="comfortable">Comfortable</option>
         </select>
       </div>
+
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={appendComponentStack}
+            onChange={updateappendComponentStack}
+          />{' '}
+          Append component stacks to console warnings and errors.
+        </label>
+      </div>
     </div>
   );
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 70ad39f6134a..4286e3d65df4 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -1,7 +1,15 @@
 // @flow
 
-import React, { createContext, useLayoutEffect, useMemo } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
 import { useLocalStorage } from '../hooks';
+import { BridgeContext } from '../context';
 
 import type { BrowserTheme } from '../DevTools';
 
@@ -16,6 +24,9 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
+  appendComponentStack: boolean,
+  setAppendComponentStack: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -40,6 +51,8 @@ function SettingsContextController({
   profilerPortalContainer,
   settingsPortalContainer,
 }: Props) {
+  const bridge = useContext(BridgeContext);
+
   const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
     'React::DevTools::displayDensity',
     'compact'
@@ -48,6 +61,10 @@ function SettingsContextController({
     'React::DevTools::theme',
     'auto'
   );
+  const [
+    appendComponentStack,
+    setAppendComponentStack,
+  ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
 
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
@@ -117,12 +134,18 @@ function SettingsContextController({
     }
   }, [browserTheme, theme, documentElements]);
 
+  useEffect(() => {
+    bridge.send('updateAppendComponentStack', appendComponentStack);
+  }, [bridge, appendComponentStack]);
+
   const value = useMemo(
     () => ({
       displayDensity,
       setDisplayDensity,
       theme,
       setTheme,
+      appendComponentStack,
+      setAppendComponentStack,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -134,6 +157,8 @@ function SettingsContextController({
       displayDensity,
       setDisplayDensity,
       setTheme,
+      appendComponentStack,
+      setAppendComponentStack,
       theme,
     ]
   );
diff --git a/src/hook.js b/src/hook.js
index 168aa3591a43..3e9e55d035b0 100644
--- a/src/hook.js
+++ b/src/hook.js
@@ -7,6 +7,11 @@
  * @flow
  */
 
+import {
+  patch as patchConsole,
+  registerRenderer as registerRendererWithConsole,
+} from './backend/console';
+
 import type { DevToolsHook } from 'src/backend/types';
 
 declare var window: any;
@@ -155,6 +160,32 @@ export function installHook(target: any): DevToolsHook | null {
       ? 'deadcode'
       : detectReactBuildType(renderer);
 
+    // Patching the console enables DevTools to do a few useful things:
+    // * Append component stacks to warnings and error messages
+    // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
+    //
+    // For React Native, we intentionally patch early (during injection).
+    // This provides React Native developers with components stacks even if they don't run DevTools.
+    // This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.
+    // In that case, we'll patch later (when the frontend attaches).
+    //
+    // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
+    if (process.env.NODE_ENV !== 'test') {
+      try {
+        // The installHook() function is injected by being stringified in the browser,
+        // so imports outside of this function do not get included.
+        //
+        // Normally we could check "typeof patchConsole === 'function'",
+        // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
+        // and the object itself will be undefined as well for the reasons mentioned above,
+        // so we use try/catch instead.
+        if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {
+          registerRendererWithConsole(renderer);
+          patchConsole();
+        }
+      } catch (error) {}
+    }
+
     // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
     // Otherwise the renderer won't yet exist and we can skip this step.
     const attach = target.__REACT_DEVTOOLS_ATTACH__;
diff --git a/src/utils.js b/src/utils.js
index 3f73a7967173..f655c7729a01 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -8,7 +8,10 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from './constants';
 import { ElementTypeRoot } from 'src/types';
-import { LOCAL_STORAGE_FILTER_PREFERENCES_KEY } from './constants';
+import {
+  LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+} from './constants';
 import { ComponentFilterElementType, ElementTypeHostComponent } from './types';
 import {
   ElementTypeClass,
@@ -198,6 +201,23 @@ export function saveComponentFilters(
   );
 }
 
+export function getAppendComponentStack(): boolean {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return true;
+}
+
+export function setAppendComponentStack(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    JSON.stringify(value)
+  );
+}
+
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
   type: ElementType
diff --git a/yarn.lock b/yarn.lock
index 80d36901ff0a..616e6e264520 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9944,20 +9944,20 @@ react-color@^2.11.7:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-dom@^0.0.0-50b50c26f:
-  version "0.0.0-50b50c26f"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-50b50c26f.tgz#3cd8da0f2276ed4b7a926e1807d2675b2eb40227"
-  integrity sha512-da9qleWDdBdAguEIDvvpFE0iuS8hfcCSGgZTYKRQMlSh5A94Ktr1otL4rgDTFH+bNsOwz3XrvEBYRA6WaE9xzQ==
+react-dom@^0.0.0-424099da6:
+  version "0.0.0-424099da6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-424099da6.tgz#2a6392d5730fd7688d7ec5a56b2f9f8e3627d271"
+  integrity sha512-B6x2YWaw06xJ0br9wsny6a9frqmaNAw+vGrm08W7JZp7WfiBYKhM6Nt9seijaAVzajp49fe18orNMgL12Lafsg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "0.0.0-50b50c26f"
+    scheduler "0.0.0-424099da6"
 
-react-is@0.0.0-50b50c26f, react-is@^0.0.0-50b50c26f:
-  version "0.0.0-50b50c26f"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-50b50c26f.tgz#c4003ffffef9bd2b287979f9041a23d12a607bf2"
-  integrity sha512-9Y6ZvdOVmOxXs9mGuFy6eXHBww8RJCtJAh94b1hkbjhnW8Mb5ADScDoxJBVxcNuX9hvDkhENspC96ZQK1NIv3g==
+react-is@0.0.0-424099da6:
+  version "0.0.0-424099da6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-424099da6.tgz#a8b1322bbb1ef014b33ee3bff30d3be9a4729baa"
+  integrity sha512-VMFvIdqNV0eB8YxmE9katf3XM4qbdKGhLYANfohwktTryrWWOUOoVRX6IHm4iN06LgHwWLBOBP/YARc1qzuF2w==
 
 react-is@^16.8.1:
   version "16.8.3"
@@ -9969,15 +9969,15 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-test-renderer@^0.0.0-50b50c26f:
-  version "0.0.0-50b50c26f"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-50b50c26f.tgz#1a85cf9073ef5a932d03bee36fcfd9bf15aeae2c"
-  integrity sha512-gWc4L+mFIUCjvBpafR88n4/i/oaKHD6rzVyZY+XBou9MNtr2rRkjePOhBVsiYlCwkj+zZi6klV9b05TMzftosA==
+react-test-renderer@^0.0.0-424099da6:
+  version "0.0.0-424099da6"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-424099da6.tgz#75272c39e0b45e99dbd674977a4afc32a2d37f81"
+  integrity sha512-tF9NutO52Js52L390poDUvnN43j77SekXyIt0KzQa+HdgY7uvvzKH9ouqCz3M5f52eDZDff4OG4cZuZ+lNLIfQ==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    react-is "0.0.0-50b50c26f"
-    scheduler "0.0.0-50b50c26f"
+    react-is "0.0.0-424099da6"
+    scheduler "0.0.0-424099da6"
 
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
@@ -9990,10 +9990,10 @@ react-window@./vendor/react-window:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^0.0.0-50b50c26f:
-  version "0.0.0-50b50c26f"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-50b50c26f.tgz#b782b579ce1f5d8bd696c5e45c744714ebecb111"
-  integrity sha512-jUAzS4DeWTdUZ/3kqm2T6C9OIpiAf2qdwVamCts0qzwYVni1/gUTOWK1ui0J+eaRzKxrIEzVvmCMxFd35lP/pA==
+react@^0.0.0-424099da6:
+  version "0.0.0-424099da6"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-424099da6.tgz#bf9155a10bb09783cfdc9e79438062af4b249861"
+  integrity sha512-z/brDYS4RaX3+zknH8nIV7i9B7We3hFBdD0QWhDKKgEHInFLF1Y/+2GsdedDI69GWw8Hv6mw1iilycHjHRaCZA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -10658,10 +10658,10 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.0.0-50b50c26f, scheduler@^0.0.0-50b50c26f:
-  version "0.0.0-50b50c26f"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-50b50c26f.tgz#09bedde1c64d7a042b557bee2dbf5faf5fd58a50"
-  integrity sha512-LBN3zrP8iBdILOoYxybFtkU7j+ldZTHORKyYyVLwXuIwGQ8/Xhs5VZjNQ5R2Xru2zv3GGVpJSbd47EpDuD2EHw==
+scheduler@0.0.0-424099da6, scheduler@^0.0.0-424099da6:
+  version "0.0.0-424099da6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-424099da6.tgz#5311edfc2716479475517fdcbc24909948026bdb"
+  integrity sha512-eDsz8sdikcel1lKRDJhUZ17K22rOdmJAV07coMgIvdX0MoHh9cVNQ+iryU7O9Gi/c7ySE3DaX1M9xBqAqyXA3g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From 9fb753b5cd399ccc702bd3e53dd8d86a739e3504 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Jul 2019 15:08:34 -0700
Subject: [PATCH 751/814] Hardened logic around when and how to patch console
 methods

---
 src/__tests__/console-test.js                 | 46 ++++---------
 src/__tests__/inspectedElementContext-test.js | 68 +++++++++++++++++++
 src/backend/console.js                        | 60 +++++++++-------
 src/backend/renderer.js                       | 23 +++++--
 4 files changed, 136 insertions(+), 61 deletions(-)

diff --git a/src/__tests__/console-test.js b/src/__tests__/console-test.js
index 92d54d2097ae..a633e6f817a1 100644
--- a/src/__tests__/console-test.js
+++ b/src/__tests__/console-test.js
@@ -4,10 +4,9 @@ describe('console', () => {
   let React;
   let ReactDOM;
   let act;
-  let enableConsole;
-  let disableConsole;
   let fakeConsole;
   let mockError;
+  let mockInfo;
   let mockLog;
   let mockWarn;
   let patchConsole;
@@ -15,8 +14,6 @@ describe('console', () => {
 
   beforeEach(() => {
     const Console = require('../backend/console');
-    enableConsole = Console.enable;
-    disableConsole = Console.disable;
     patchConsole = Console.patch;
     unpatchConsole = Console.unpatch;
 
@@ -37,25 +34,36 @@ describe('console', () => {
     // Patching the real console is too complicated,
     // because Jest itself has hooks into it as does our test env setup.
     mockError = jest.fn();
+    mockInfo = jest.fn();
     mockLog = jest.fn();
     mockWarn = jest.fn();
     fakeConsole = {
       error: mockError,
+      info: mockInfo,
       log: mockLog,
       warn: mockWarn,
     };
 
-    patchConsole(fakeConsole);
+    Console.dangerous_setTargetConsoleForTesting(fakeConsole);
+
+    patchConsole();
   });
 
   function normalizeCodeLocInfo(str) {
     return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
   }
 
+  it('should not patch console methods that do not receive component stacks', () => {
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.info).toBe(mockInfo);
+    expect(fakeConsole.log).toBe(mockLog);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+  });
+
   it('should only patch the console once', () => {
     const { error, warn } = fakeConsole;
 
-    patchConsole(fakeConsole);
+    patchConsole();
 
     expect(fakeConsole.error).toBe(error);
     expect(fakeConsole.warn).toBe(warn);
@@ -89,30 +97,6 @@ describe('console', () => {
     expect(mockError.mock.calls[0][0]).toBe('error');
   });
 
-  it('should suppress console logging when disabled', () => {
-    disableConsole();
-    fakeConsole.log('log');
-    fakeConsole.warn('warn');
-    fakeConsole.error('error');
-    expect(mockLog).toHaveBeenCalledTimes(0);
-    expect(mockWarn).toHaveBeenCalledTimes(0);
-    expect(mockError).toHaveBeenCalledTimes(0);
-
-    enableConsole();
-    fakeConsole.log('log');
-    fakeConsole.warn('warn');
-    fakeConsole.error('error');
-    expect(mockLog).toHaveBeenCalledTimes(1);
-    expect(mockLog.mock.calls[0]).toHaveLength(1);
-    expect(mockLog.mock.calls[0][0]).toBe('log');
-    expect(mockWarn).toHaveBeenCalledTimes(1);
-    expect(mockWarn.mock.calls[0]).toHaveLength(1);
-    expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockError).toHaveBeenCalledTimes(1);
-    expect(mockError.mock.calls[0]).toHaveLength(1);
-    expect(mockError.mock.calls[0][0]).toBe('error');
-  });
-
   it('should not append multiple stacks', () => {
     const Child = () => {
       fakeConsole.warn('warn\n    in Child (at fake.js:123)');
@@ -330,7 +314,7 @@ describe('console', () => {
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
 
-    patchConsole(fakeConsole);
+    patchConsole();
     act(() => ReactDOM.render(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 01895d183d9b..2fdbfe95e890 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -255,6 +255,74 @@ describe('InspectedElementContext', () => {
     done();
   });
 
+  it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {
+    let targetRenderCount = 0;
+
+    const errorSpy = ((console: any).error = jest.fn());
+    const infoSpy = ((console: any).info = jest.fn());
+    const logSpy = ((console: any).log = jest.fn());
+    const warnSpy = ((console: any).warn = jest.fn());
+
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      console.error('error');
+      console.info('info');
+      console.log('log');
+      console.warn('warn');
+      React.useState(0);
+      return null;
+    });
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Target a={1} b="abc" />, container)
+    );
+
+    expect(targetRenderCount).toBe(1);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    expect(errorSpy).toHaveBeenCalledWith('error');
+    expect(infoSpy).toHaveBeenCalledTimes(1);
+    expect(infoSpy).toHaveBeenCalledWith('info');
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(logSpy).toHaveBeenCalledWith('log');
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith('warn');
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({ target }) {
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+
+    expect(inspectedElement).not.toBe(null);
+    expect(targetRenderCount).toBe(2);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    expect(infoSpy).toHaveBeenCalledTimes(1);
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+
+    done();
+  });
+
   it('should support simple data types', async done => {
     const Example = () => null;
 
diff --git a/src/backend/console.js b/src/backend/console.js
index 95a457781972..aa5510a21166 100644
--- a/src/backend/console.js
+++ b/src/backend/console.js
@@ -5,6 +5,8 @@ import describeComponentFrame from './describeComponentFrame';
 
 import type { Fiber, ReactRenderer } from './types';
 
+const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];
+
 const FRAME_REGEX = /\n {4}in /;
 
 const injectedRenderers: Map<
@@ -15,17 +17,29 @@ const injectedRenderers: Map<
   |}
 > = new Map();
 
-let isDisabled: boolean = false;
+let targetConsole: Object = console;
+let targetConsoleMethods = {};
+for (let method in console) {
+  targetConsoleMethods[method] = console[method];
+}
+
 let unpatchFn: null | (() => void) = null;
 
-export function disable(): void {
-  isDisabled = true;
-}
+// Enables e.g. Jest tests to inject a mock console object.
+export function dangerous_setTargetConsoleForTesting(
+  targetConsoleForTesting: Object
+): void {
+  targetConsole = targetConsoleForTesting;
 
-export function enable(): void {
-  isDisabled = false;
+  targetConsoleMethods = {};
+  for (let method in targetConsole) {
+    targetConsoleMethods[method] = console[method];
+  }
 }
 
+// v16 renderers should use this method to inject internals necessary to generate a component stack.
+// These internals will be used if the console is patched.
+// Injecting them separately allows the console to easily be patched or unpacted later (at runtime).
 export function registerRenderer(renderer: ReactRenderer): void {
   const { getCurrentFiber, findFiberByHostInstance, version } = renderer;
 
@@ -44,16 +58,18 @@ export function registerRenderer(renderer: ReactRenderer): void {
   }
 }
 
-export function patch(targetConsole?: Object = console): void {
+// Patches whitelisted console methods to append component stack for the current fiber.
+// Call unpatch() to remove the injected behavior.
+export function patch(): void {
   if (unpatchFn !== null) {
     // Don't patch twice.
     return;
   }
 
-  const originalConsoleMethods = { ...targetConsole };
+  const originalConsoleMethods = {};
 
   unpatchFn = () => {
-    for (let method in targetConsole) {
+    for (let method in originalConsoleMethods) {
       try {
         // $FlowFixMe property error|warn is not writable.
         targetConsole[method] = originalConsoleMethods[method];
@@ -61,15 +77,13 @@ export function patch(targetConsole?: Object = console): void {
     }
   };
 
-  for (let method in targetConsole) {
-    const appendComponentStack =
-      method === 'error' || method === 'warn' || method === 'trace';
-
-    const originalMethod = targetConsole[method];
-    const overrideMethod = (...args) => {
-      if (isDisabled) return;
+  APPEND_STACK_TO_METHODS.forEach(method => {
+    try {
+      const originalMethod = (originalConsoleMethods[method] =
+        targetConsole[method]);
 
-      if (appendComponentStack) {
+      // $FlowFixMe property error|warn is not writable.
+      targetConsole[method] = (...args) => {
         // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
         // don't append a second stack.
         const alreadyHasComponentStack =
@@ -105,18 +119,14 @@ export function patch(targetConsole?: Object = console): void {
             }
           }
         }
-      }
-
-      originalMethod(...args);
-    };
 
-    try {
-      // $FlowFixMe property error|warn is not writable.
-      targetConsole[method] = overrideMethod;
+        originalMethod(...args);
+      };
     } catch (error) {}
-  }
+  });
 }
 
+// Removed component stack patch from whitelisted console methods.
 export function unpatch(): void {
   if (unpatchFn !== null) {
     unpatchFn();
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index dadee18bc61e..b8309557f932 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -40,8 +40,6 @@ import {
 } from '../constants';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
 import {
-  disable as disableConsole,
-  enable as enableConsole,
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
 } from './console';
@@ -2254,15 +2252,30 @@ export function attach(
 
     let hooks = null;
     if (usesHooks) {
-      // Suppress console logging while re-rendering
+      const originalConsoleMethods = {};
+
+      // Temporarily disable all console logging before re-running the hook.
+      for (let method in console) {
+        try {
+          originalConsoleMethods[method] = console[method];
+          // $FlowFixMe property error|warn is not writable.
+          console[method] = () => {};
+        } catch (error) {}
+      }
+
       try {
-        disableConsole();
         hooks = inspectHooksOfFiber(
           fiber,
           (renderer.currentDispatcherRef: any)
         );
       } finally {
-        enableConsole();
+        // Restore original console functionality.
+        for (let method in originalConsoleMethods) {
+          try {
+            // $FlowFixMe property error|warn is not writable.
+            console[method] = originalConsoleMethods[method];
+          } catch (error) {}
+        }
       }
     }
 

From 249a2e043dbd261bf54a95d0893dd973f4489d57 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Jul 2019 16:24:22 -0700
Subject: [PATCH 752/814] Detect React Native v3 backend and show warning

---
 .../react-devtools-core/src/standalone.js     |  1 +
 shells/dev/src/devtools.js                    |  1 +
 src/bridge.js                                 |  6 ++
 src/devtools/views/DevTools.js                |  4 ++
 src/devtools/views/ModalDialog.js             | 30 +++++++---
 .../views/WarnIfLegacyBackendDetected.css     |  6 ++
 .../views/WarnIfLegacyBackendDetected.js      | 60 +++++++++++++++++++
 7 files changed, 99 insertions(+), 9 deletions(-)
 create mode 100644 src/devtools/views/WarnIfLegacyBackendDetected.css
 create mode 100644 src/devtools/views/WarnIfLegacyBackendDetected.js

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index c105f20cc844..7bd636b80e44 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -86,6 +86,7 @@ function reload() {
         bridge: ((bridge: any): Bridge),
         showTabBar: true,
         store: ((store: any): Store),
+        warnIfLegacyBackendDetected: true,
         viewElementSourceFunction,
         viewElementSourceRequiresFileLocation: true,
       })
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 80d8bb38ccb1..2afed0c20863 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -77,6 +77,7 @@ inject('dist/app.js', () => {
           browserTheme: 'light',
           showTabBar: true,
           store,
+          warnIfLegacyBackendDetected: true,
         })
       );
       batch.then(() => {
diff --git a/src/bridge.js b/src/bridge.js
index c5ed0f4a0379..23b887af7fc7 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -128,6 +128,12 @@ export default class Bridge extends EventEmitter<{|
       }) || null;
   }
 
+  // Listening directly to the wall isn't advised.
+  // It can be used to listen for legacy (v3) messages (since they use a different format).
+  get wall(): Wall {
+    return this._wall;
+  }
+
   send(event: string, payload: any, transferable?: Array<any>) {
     if (this._isShutdown) {
       console.warn(
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 7a04ee46bc83..f8d9bcec9186 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -18,6 +18,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
+import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 
 import styles from './DevTools.css';
 
@@ -38,6 +39,7 @@ export type Props = {|
   defaultTab?: TabID,
   showTabBar?: boolean,
   store: Store,
+  warnIfLegacyBackendDetected?: boolean,
   viewElementSourceFunction?: ?ViewElementSource,
   viewElementSourceRequiresFileLocation?: boolean,
 
@@ -80,6 +82,7 @@ export default function DevTools({
   settingsPortalContainer,
   showTabBar = false,
   store,
+  warnIfLegacyBackendDetected = false,
   viewElementSourceFunction,
   viewElementSourceRequiresFileLocation = false,
 }: Props) {
@@ -143,6 +146,7 @@ export default function DevTools({
               </TreeContextController>
             </ViewElementSourceContext.Provider>
           </SettingsContextController>
+          {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
         </ModalDialogContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
diff --git a/src/devtools/views/ModalDialog.js b/src/devtools/views/ModalDialog.js
index b9ca5cc97469..2cceb9a49e03 100644
--- a/src/devtools/views/ModalDialog.js
+++ b/src/devtools/views/ModalDialog.js
@@ -18,6 +18,7 @@ type DIALOG_ACTION_HIDE = {|
 |};
 type DIALOG_ACTION_SHOW = {|
   type: 'SHOW',
+  canBeDismissed?: boolean,
   content: React$Node,
   title?: React$Node | null,
 |};
@@ -27,6 +28,7 @@ type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
 type Dispatch = (action: Action) => void;
 
 type State = {|
+  canBeDismissed: boolean,
   content: React$Node | null,
   isVisible: boolean,
   title: React$Node | null,
@@ -46,12 +48,14 @@ function dialogReducer(state, action) {
   switch (action.type) {
     case 'HIDE':
       return {
+        canBeDismissed: true,
         content: null,
         isVisible: false,
         title: null,
       };
     case 'SHOW':
       return {
+        canBeDismissed: action.canBeDismissed !== false,
         content: action.content,
         isVisible: true,
         title: action.title || null,
@@ -67,6 +71,7 @@ type Props = {|
 
 function ModalDialogContextController({ children }: Props) {
   const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+    canBeDismissed: true,
     content: null,
     isVisible: false,
     title: null,
@@ -74,6 +79,7 @@ function ModalDialogContextController({ children }: Props) {
 
   const value = useMemo<ModalDialogContextType>(
     () => ({
+      canBeDismissed: state.canBeDismissed,
       content: state.content,
       isVisible: state.isVisible,
       title: state.title,
@@ -95,10 +101,14 @@ function ModalDialog(_: {||}) {
 }
 
 function ModalDialogImpl(_: {||}) {
-  const { content, dispatch, title } = useContext(ModalDialogContext);
-  const dismissModal = useCallback(() => dispatch({ type: 'HIDE' }), [
-    dispatch,
-  ]);
+  const { canBeDismissed, content, dispatch, title } = useContext(
+    ModalDialogContext
+  );
+  const dismissModal = useCallback(() => {
+    if (canBeDismissed) {
+      dispatch({ type: 'HIDE' });
+    }
+  }, [canBeDismissed, dispatch]);
   const modalRef = useRef<HTMLDivElement | null>(null);
 
   useModalDismissSignal(modalRef, dismissModal);
@@ -108,11 +118,13 @@ function ModalDialogImpl(_: {||}) {
       <div className={styles.Dialog} ref={modalRef}>
         {title !== null && <div className={styles.Title}>{title}</div>}
         {content}
-        <div className={styles.Buttons}>
-          <Button autoFocus onClick={dismissModal}>
-            Okay
-          </Button>
-        </div>
+        {canBeDismissed && (
+          <div className={styles.Buttons}>
+            <Button autoFocus onClick={dismissModal}>
+              Okay
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.css b/src/devtools/views/WarnIfLegacyBackendDetected.css
new file mode 100644
index 000000000000..e1c3817309f6
--- /dev/null
+++ b/src/devtools/views/WarnIfLegacyBackendDetected.css
@@ -0,0 +1,6 @@
+.Command {
+  background-color: var(--color-dimmest);
+  padding: 0.25rem 0.5rem;
+  display: block;
+  border-radius: 0.125rem;
+}
diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.js b/src/devtools/views/WarnIfLegacyBackendDetected.js
new file mode 100644
index 000000000000..79dd8978cdcc
--- /dev/null
+++ b/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -0,0 +1,60 @@
+// @flow
+
+import React, { Fragment, useContext, useEffect } from 'react';
+import { BridgeContext } from './context';
+import { ModalDialogContext } from './ModalDialog';
+
+import styles from './WarnIfLegacyBackendDetected.css';
+
+export default function WarnIfLegacyBackendDetected(_: {||}) {
+  const bridge = useContext(BridgeContext);
+  const { dispatch } = useContext(ModalDialogContext);
+
+  // Detect pairing with legacy v3 backend.
+  // We do this by listening to a message that it broadcasts but the v4 backend doesn't.
+  // In this case the frontend should show upgrade instructions.
+  useEffect(() => {
+    // Wall.listen returns a cleanup function
+    let unlisten = bridge.wall.listen(event => {
+      switch (event.type) {
+        case 'call':
+        case 'event':
+        case 'many-events':
+          // Any of these types indicate the v3 backend.
+          dispatch({
+            canBeDismissed: false,
+            type: 'SHOW',
+            title:
+              'React DevTools v4 is incompatible with this version of React',
+            content: <InvalidBackendDetected />,
+          });
+
+          if (typeof unlisten === 'function') {
+            unlisten();
+            unlisten = null;
+          }
+          break;
+        default:
+          break;
+      }
+    });
+
+    return () => {
+      if (typeof unlisten === 'function') {
+        unlisten();
+        unlisten = null;
+      }
+    };
+  }, [bridge, dispatch]);
+
+  return null;
+}
+
+function InvalidBackendDetected(_: {||}) {
+  return (
+    <Fragment>
+      <p>Either upgrade React or install React DevTools v3:</p>
+      <code className={styles.Command}>npm install -d react-devtools@^3</code>
+    </Fragment>
+  );
+}

From bd0a0c58fdb2a01c45d07dc08398aab206371a2f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Jul 2019 16:26:27 -0700
Subject: [PATCH 753/814] Tweaked modal title to better fit without wrapping

---
 src/devtools/views/WarnIfLegacyBackendDetected.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.js b/src/devtools/views/WarnIfLegacyBackendDetected.js
index 79dd8978cdcc..22acd939cbee 100644
--- a/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -25,7 +25,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
             canBeDismissed: false,
             type: 'SHOW',
             title:
-              'React DevTools v4 is incompatible with this version of React',
+              'DevTools v4 is incompatible with this version of React',
             content: <InvalidBackendDetected />,
           });
 

From 67e749a73a01482f2ccc42d13a95dc72ba8ee59a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Jul 2019 16:28:20 -0700
Subject: [PATCH 754/814] Tweaked modal font size style

---
 src/devtools/views/ModalDialog.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/devtools/views/ModalDialog.css b/src/devtools/views/ModalDialog.css
index f1971b6fabb6..3819a592aa0b 100644
--- a/src/devtools/views/ModalDialog.css
+++ b/src/devtools/views/ModalDialog.css
@@ -21,6 +21,7 @@
   padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
+  font-size: var(--font-size-sans-normal);
 }
 
 .Title {

From dbbf30a332936b67c88631d7ccc2ba5d32114ec5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Jul 2019 16:37:57 -0700
Subject: [PATCH 755/814] Make my code PRETTIER

---
 src/devtools/views/WarnIfLegacyBackendDetected.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.js b/src/devtools/views/WarnIfLegacyBackendDetected.js
index 22acd939cbee..3d76fbfecab0 100644
--- a/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -24,8 +24,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
           dispatch({
             canBeDismissed: false,
             type: 'SHOW',
-            title:
-              'DevTools v4 is incompatible with this version of React',
+            title: 'DevTools v4 is incompatible with this version of React',
             content: <InvalidBackendDetected />,
           });
 

From 0abaefb7c2f10d64d4f5ba1bf9de40dfd9727300 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Jul 2019 09:02:30 -0700
Subject: [PATCH 756/814] Cleanup legacy backend event listener if modern
 backend is detected

---
 .../views/WarnIfLegacyBackendDetected.js      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.js b/src/devtools/views/WarnIfLegacyBackendDetected.js
index 3d76fbfecab0..466c9ba1bd06 100644
--- a/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -15,8 +15,8 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
   // In this case the frontend should show upgrade instructions.
   useEffect(() => {
     // Wall.listen returns a cleanup function
-    let unlisten = bridge.wall.listen(event => {
-      switch (event.type) {
+    let unlisten = bridge.wall.listen(message => {
+      switch (message.type) {
         case 'call':
         case 'event':
         case 'many-events':
@@ -28,6 +28,23 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
             content: <InvalidBackendDetected />,
           });
 
+          // Once we've identified the backend version, it's safe to unsubscribe.
+          if (typeof unlisten === 'function') {
+            unlisten();
+            unlisten = null;
+          }
+          break;
+        default:
+          break;
+      }
+
+      switch (message.event) {
+        case 'isBackendStorageAPISupported':
+        case 'isNativeStyleEditorSupported':
+        case 'operations':
+        case 'overrideComponentFilters':
+          // Any of these is sufficient to indicate a v4 backend.
+          // Once we've identified the backend version, it's safe to unsubscribe.
           if (typeof unlisten === 'function') {
             unlisten();
             unlisten = null;

From abe75b0e3909cd037e017a46295302a197d760af Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Jul 2019 09:19:03 -0700
Subject: [PATCH 757/814] Slight tweak to avoid setting an invalid numeric
 value in props editor

---
 src/devtools/views/Components/EditableValue.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/EditableValue.js b/src/devtools/views/Components/EditableValue.js
index 09b2893a0687..3238315a1572 100644
--- a/src/devtools/views/Components/EditableValue.js
+++ b/src/devtools/views/Components/EditableValue.js
@@ -59,7 +59,10 @@ export default function EditableValue({
 
       if (key === 'Enter') {
         if (dataType === 'number') {
-          overrideValueFn(path, parseFloat(editableValue));
+          const parsedValue = parseFloat(editableValue);
+          if (!Number.isNaN(parsedValue)) {
+            overrideValueFn(path, parsedValue);
+          }
         } else {
           overrideValueFn(path, editableValue);
         }
@@ -72,7 +75,7 @@ export default function EditableValue({
         setHasPendingChanges(false);
       }
     },
-    [path, editableValue, overrideValueFn, value, dataType]
+    [editableValue, dataType, overrideValueFn, path, value]
   );
 
   // Render different input types based on the dataType

From 167daf7a4ad54d11a99b80452ba3c9f8022a8b71 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Jul 2019 10:09:49 -0700
Subject: [PATCH 758/814] Updating NPM packages as 4.0.0-alpha.0

---
 packages/react-devtools-core/README.md    | 2 +-
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 7bb1a2e0b716..35615b3074e4 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -1,6 +1,6 @@
 # `react-devtools-core`
 
-A standalone React DevTools implementation.  
+A standalone React DevTools implementation.
 
 This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**
 
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index f560258e8f76..2f4bd08239cc 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-devtools-core",
+  "version": "4.0.0-alpha.0",
   "description": "Use react-devtools outside of the browser",
-  "version": "4.0.0",
   "license": "MIT",
   "main": "./dist/backend.js",
   "repository": {
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index e16415d677a5..21a9bcca5536 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0",
+  "version": "4.0.0-alpha.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "^4.0.0",
+    "react-devtools-core": "4.0.0-alpha.0",
     "update-notifier": "^2.1.0"
   }
 }

From 33da657178159702c5e08c4634e062f992019208 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Jul 2019 08:05:08 -0700
Subject: [PATCH 759/814] Make console override detectable (for RN YellowBox)

---
 src/backend/console.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/backend/console.js b/src/backend/console.js
index aa5510a21166..1b89ce782dd7 100644
--- a/src/backend/console.js
+++ b/src/backend/console.js
@@ -82,8 +82,7 @@ export function patch(): void {
       const originalMethod = (originalConsoleMethods[method] =
         targetConsole[method]);
 
-      // $FlowFixMe property error|warn is not writable.
-      targetConsole[method] = (...args) => {
+      const overrideMethod = (...args) => {
         // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
         // don't append a second stack.
         const alreadyHasComponentStack =
@@ -122,6 +121,11 @@ export function patch(): void {
 
         originalMethod(...args);
       };
+
+      overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+
+      // $FlowFixMe property error|warn is not writable.
+      targetConsole[method] = overrideMethod;
     } catch (error) {}
   });
 }

From 39ad101ea2e1d92ee78174e834a4dad615c5d2ad Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Jul 2019 09:28:09 -0700
Subject: [PATCH 760/814] Removed reference to setDefaultThemeName() method

This functionality was added to v3 to support external changing of theme at runtime. This isn't supported in v4.
---
 packages/react-devtools/app.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index c9b415ea4961..679dfb70df5c 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -5,7 +5,6 @@ const { join } = require('path');
 
 const argv = require('minimist')(process.argv.slice(2));
 const projectRoots = argv._;
-const defaultThemeName = argv.theme;
 
 let mainWindow = null;
 
@@ -35,14 +34,6 @@ app.on('ready', function() {
     'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')'
   );
 
-  if (argv.theme) {
-    mainWindow.webContents.executeJavaScript(
-      'window.devtools.setDefaultThemeName(' +
-        JSON.stringify(defaultThemeName) +
-        ')'
-    );
-  }
-
   // Emitted when the window is closed.
   mainWindow.on('closed', function() {
     mainWindow = null;

From 4b34a77d290cf67ab0be51bf8edef0fe9787732b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 20 Jul 2019 14:08:23 -0700
Subject: [PATCH 761/814] Improve Bridge Flow types (#352)

* Updated local fork of react-window
* Updated Fow 97 -> 103
* Lint ignore NPM dist
* Improved Bridge Flow types
---
 .eslintignore                                 |   1 +
 package.json                                  |   4 +-
 packages/react-devtools-core/src/backend.js   |   3 +-
 .../react-devtools-core/src/standalone.js     |   7 +-
 shells/dev/app/SuspenseTree/index.js          |  40 +--
 src/__tests__/bridge-test.js                  |  10 +-
 src/__tests__/inspectedElementContext-test.js |   4 +-
 src/__tests__/legacy/inspectElement-test.js   |   4 +-
 src/__tests__/ownersListContext-test.js       |   4 +-
 src/__tests__/profilerContext-test.js         |   4 +-
 src/__tests__/profilingCache-test.js          |   4 +-
 src/__tests__/profilingCharts-test.js         |   6 +-
 src/__tests__/setupTests.js                   |   6 +-
 src/__tests__/storeComponentFilters-test.js   |   4 +-
 src/__tests__/treeContext-test.js             |   4 +-
 src/__tests__/utils.js                        |   4 +-
 .../setupNativeStyleEditor.js                 |   6 +-
 src/backend/agent.js                          |   8 +-
 src/backend/views/Highlighter/Overlay.js      |  13 +-
 src/backend/views/Highlighter/index.js        |  10 +-
 src/bridge.js                                 |  75 +++--
 src/devtools/ProfilerStore.js                 |  10 +-
 src/devtools/index.js                         |   4 +-
 src/devtools/store.js                         |   8 +-
 src/devtools/views/Components/HooksTree.js    |  24 +-
 .../Components/InspectedElementContext.js     |  12 +-
 .../NativeStyleEditor/StyleEditor.js          |  32 +-
 .../Components/NativeStyleEditor/context.js   |  10 +-
 .../views/Components/OwnersListContext.js     |   5 +-
 .../views/Components/SelectedElement.js       |  40 ++-
 src/devtools/views/Components/Tree.js         |   2 +-
 src/devtools/views/DevTools.js                |   4 +-
 src/devtools/views/context.js                 |   8 +-
 vendor/react-window/dist/index-dev.umd.js     |   2 +
 vendor/react-window/dist/index-prod.umd.js    |   2 +
 vendor/react-window/dist/index.cjs.js         | 309 +++++++++++++----
 vendor/react-window/dist/index.esm.js         | 317 ++++++++++++++----
 vendor/react-window/package.json              |   8 +-
 vendor/react-window/src/FixedSizeGrid.js      |  76 +++--
 vendor/react-window/src/FixedSizeList.js      |  41 ++-
 vendor/react-window/src/VariableSizeGrid.js   |   6 +-
 vendor/react-window/src/VariableSizeList.js   |   2 +-
 .../react-window/src/createGridComponent.js   | 132 ++++++--
 .../react-window/src/createListComponent.js   |  94 ++++--
 vendor/react-window/src/domHelpers.js         |  50 +++
 yarn.lock                                     |  26 +-
 46 files changed, 1066 insertions(+), 379 deletions(-)
 create mode 100644 vendor/react-window/dist/index-dev.umd.js
 create mode 100644 vendor/react-window/dist/index-prod.umd.js

diff --git a/.eslintignore b/.eslintignore
index 564cfdfb14d2..5e4165322a11 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,7 @@ shells/browser/chrome/build
 shells/browser/firefox/build
 shells/browser/shared/build
 shells/dev/dist
+packages/react-devtools-core/dist
 vendor
 *.js.snap
 
diff --git a/package.json b/package.json
index 18c5527081a3..f5dd64b0dee1 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "test:chrome": "node ./shells/browser/chrome/test",
     "test:firefox": "node ./shells/browser/firefox/test",
     "test:standalone": "cd packages/react-devtools && yarn start",
-    "typecheck": "flow check"
+    "typecheck": "flow check --show-all-errors"
   },
   "devEngines": {
     "node": "10.x || 11.x"
@@ -119,7 +119,7 @@
     "fbjs": "0.5.1",
     "fbjs-scripts": "0.7.0",
     "firefox-profile": "^1.0.2",
-    "flow-bin": "^0.97.0",
+    "flow-bin": "^0.103.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
     "html2canvas": "^1.0.0-alpha.12",
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index f76659180aa5..11a5dde7c96c 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -8,6 +8,7 @@ import { __DEBUG__ } from 'src/constants';
 import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
 import { getDefaultComponentFilters } from 'src/utils';
 
+import type { BackendBridge } from 'src/bridge';
 import type { ComponentFilter } from 'src/types';
 import type { DevToolsHook } from 'src/backend/types';
 import type { ResolveNativeStyle } from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
@@ -64,7 +65,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
     return;
   }
 
-  let bridge: Bridge | null = null;
+  let bridge: BackendBridge | null = null;
 
   const messageListeners = [];
   const uri = 'ws://' + host + ':' + port;
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 7bd636b80e44..b9fc4ff25a80 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -17,6 +17,7 @@ import DevTools from 'src/devtools/views/DevTools';
 import launchEditor from './launchEditor';
 import { __DEBUG__ } from 'src/constants';
 
+import type { FrontendBridge } from 'src/bridge';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 installHook(window);
@@ -46,7 +47,7 @@ function setStatusListener(value: StatusListener) {
   return DevtoolsUI;
 }
 
-let bridge: Bridge | null = null;
+let bridge: FrontendBridge | null = null;
 let store: Store | null = null;
 let root = null;
 
@@ -83,7 +84,7 @@ function reload() {
     root = createRoot(node);
     root.render(
       createElement(DevTools, {
-        bridge: ((bridge: any): Bridge),
+        bridge: ((bridge: any): FrontendBridge),
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
@@ -166,7 +167,7 @@ function initialize(socket: WebSocket) {
       }
     },
   });
-  ((bridge: any): Bridge).addListener('shutdown', () => {
+  ((bridge: any): FrontendBridge).addListener('shutdown', () => {
     socket.close();
   });
 
diff --git a/shells/dev/app/SuspenseTree/index.js b/shells/dev/app/SuspenseTree/index.js
index e9a1fef4d2b5..873f210e163d 100644
--- a/shells/dev/app/SuspenseTree/index.js
+++ b/shells/dev/app/SuspenseTree/index.js
@@ -1,17 +1,17 @@
 // @flow
 
-import React, { Suspense, useState } from 'react';
+import React, { Fragment, Suspense, useState } from 'react';
 
 function SuspenseTree() {
   return (
-    <>
+    <Fragment>
       <h1>Suspense</h1>
       <h4>Primary to Fallback Cycle</h4>
       <PrimaryFallbackTest initialSuspend={false} />
       <h4>Fallback to Primary Cycle</h4>
       <PrimaryFallbackTest initialSuspend={true} />
       <NestedSuspenseTest />
-    </>
+    </Fragment>
   );
 }
 
@@ -20,7 +20,7 @@ function PrimaryFallbackTest({ initialSuspend }) {
   const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
   const primaryStep = useTestSequence('primary', Primary1, Primary2);
   return (
-    <>
+    <Fragment>
       <label>
         <input
           checked={suspend}
@@ -33,7 +33,7 @@ function PrimaryFallbackTest({ initialSuspend }) {
       <Suspense fallback={fallbackStep}>
         {suspend ? <Never /> : primaryStep}
       </Suspense>
-    </>
+    </Fragment>
   );
 }
 
@@ -45,32 +45,32 @@ function useTestSequence(label, T1, T2) {
     </button>
   );
   let allSteps = [
-    <>{next}</>,
-    <>
+    <Fragment>{next}</Fragment>,
+    <Fragment>
       {next} <T1 prop={step}>mount</T1>
-    </>,
-    <>
+    </Fragment>,
+    <Fragment>
       {next} <T1 prop={step}>update</T1>
-    </>,
-    <>
+    </Fragment>,
+    <Fragment>
       {next} <T2 prop={step}>several</T2> <T1 prop={step}>different</T1>{' '}
       <T2 prop={step}>children</T2>
-    </>,
-    <>
+    </Fragment>,
+    <Fragment>
       {next} <T2 prop={step}>goodbye</T2>
-    </>,
+    </Fragment>,
   ];
   return allSteps[step];
 }
 
 function NestedSuspenseTest() {
   return (
-    <>
+    <Fragment>
       <h3>Nested Suspense</h3>
       <Suspense fallback={<Fallback1>Loading outer</Fallback1>}>
         <Parent />
       </Suspense>
-    </>
+    </Fragment>
   );
 }
 
@@ -118,19 +118,19 @@ function Never() {
   throw new Promise(resolve => {});
 }
 
-function Fallback1({ prop, ...rest }) {
+function Fallback1({ prop, ...rest }: any) {
   return <span {...rest} />;
 }
 
-function Fallback2({ prop, ...rest }) {
+function Fallback2({ prop, ...rest }: any) {
   return <span {...rest} />;
 }
 
-function Primary1({ prop, ...rest }) {
+function Primary1({ prop, ...rest }: any) {
   return <span {...rest} />;
 }
 
-function Primary2({ prop, ...rest }) {
+function Primary2({ prop, ...rest }: any) {
   return <span {...rest} />;
 }
 
diff --git a/src/__tests__/bridge-test.js b/src/__tests__/bridge-test.js
index 1a9b4b949a5c..fe89a6c2b10f 100644
--- a/src/__tests__/bridge-test.js
+++ b/src/__tests__/bridge-test.js
@@ -15,9 +15,9 @@ describe('Bridge', () => {
     const bridge = new Bridge(wall);
 
     // Check that we're wired up correctly.
-    bridge.send('init');
+    bridge.send('reloadAppForProfiling');
     jest.runAllTimers();
-    expect(wall.send).toHaveBeenCalledWith('init', undefined, undefined);
+    expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');
 
     // Should flush pending messages and then shut down.
     wall.send.mockClear();
@@ -25,9 +25,9 @@ describe('Bridge', () => {
     bridge.send('update', '2');
     bridge.shutdown();
     jest.runAllTimers();
-    expect(wall.send).toHaveBeenCalledWith('update', '1', undefined);
-    expect(wall.send).toHaveBeenCalledWith('update', '2', undefined);
-    expect(wall.send).toHaveBeenCalledWith('shutdown', undefined, undefined);
+    expect(wall.send).toHaveBeenCalledWith('update', '1');
+    expect(wall.send).toHaveBeenCalledWith('update', '2');
+    expect(wall.send).toHaveBeenCalledWith('shutdown');
 
     // Verify that the Bridge doesn't send messages after shutdown.
     spyOn(console, 'warn');
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 2fdbfe95e890..2cf1ed863297 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/src/__tests__/inspectedElementContext-test.js
@@ -2,14 +2,14 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 import type { GetInspectedElementPath } from 'src/devtools/views/Components/InspectedElementContext';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('InspectedElementContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let meta;
   let utils;
diff --git a/src/__tests__/legacy/inspectElement-test.js b/src/__tests__/legacy/inspectElement-test.js
index f71d22343f15..7b8c2b04a9f5 100644
--- a/src/__tests__/legacy/inspectElement-test.js
+++ b/src/__tests__/legacy/inspectElement-test.js
@@ -2,7 +2,7 @@
 
 import type { InspectedElementPayload } from 'src/backend/types';
 import type { DehydratedData } from 'src/devtools/views/Components/types';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('InspectedElementContext', () => {
@@ -10,7 +10,7 @@ describe('InspectedElementContext', () => {
   let ReactDOM;
   let hydrate;
   let meta;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
 
   const act = (callback: Function) => {
diff --git a/src/__tests__/ownersListContext-test.js b/src/__tests__/ownersListContext-test.js
index 7dde191cf997..97681b70bdde 100644
--- a/src/__tests__/ownersListContext-test.js
+++ b/src/__tests__/ownersListContext-test.js
@@ -2,14 +2,14 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 import type { Element } from 'src/devtools/views/Components/types';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('OwnersListContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 
diff --git a/src/__tests__/profilerContext-test.js b/src/__tests__/profilerContext-test.js
index 6857ddb4070c..c06f70d0390d 100644
--- a/src/__tests__/profilerContext-test.js
+++ b/src/__tests__/profilerContext-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type { Context } from 'src/devtools/views/Profiler/ProfilerContext';
 import type { DispatcherContext } from 'src/devtools/views/Components/TreeContext';
 import type Store from 'src/devtools/store';
@@ -10,7 +10,7 @@ describe('ProfilerContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 
diff --git a/src/__tests__/profilingCache-test.js b/src/__tests__/profilingCache-test.js
index e5b56028936f..6f6e4742cda4 100644
--- a/src/__tests__/profilingCache-test.js
+++ b/src/__tests__/profilingCache-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('ProfilingCache', () => {
@@ -11,7 +11,7 @@ describe('ProfilingCache', () => {
   let Scheduler;
   let SchedulerTracing;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 
diff --git a/src/__tests__/profilingCharts-test.js b/src/__tests__/profilingCharts-test.js
index dbf1ee16544b..0e7fff951e94 100644
--- a/src/__tests__/profilingCharts-test.js
+++ b/src/__tests__/profilingCharts-test.js
@@ -29,7 +29,7 @@ describe('profiling charts', () => {
 
   describe('flamegraph chart', () => {
     it('should contain valid data', () => {
-      const Parent = ({ count }) => {
+      const Parent = (_: {||}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
@@ -105,7 +105,7 @@ describe('profiling charts', () => {
 
   describe('ranked chart', () => {
     it('should contain valid data', () => {
-      const Parent = ({ count }) => {
+      const Parent = (_: {||}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
@@ -177,7 +177,7 @@ describe('profiling charts', () => {
 
   describe('interactions', () => {
     it('should contain valid data', () => {
-      const Parent = ({ count }) => {
+      const Parent = (_: {||}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
diff --git a/src/__tests__/setupTests.js b/src/__tests__/setupTests.js
index 18127c4d47ad..3fb0a57a2f27 100644
--- a/src/__tests__/setupTests.js
+++ b/src/__tests__/setupTests.js
@@ -1,5 +1,7 @@
 // @flow
 
+import type { BackendBridge, FrontendBridge } from 'src/bridge';
+
 const env = jasmine.getEnv();
 env.beforeEach(() => {
   // These files should be required (and re-reuired) before each test,
@@ -51,13 +53,13 @@ env.beforeEach(() => {
     },
   });
 
-  const agent = new Agent(bridge);
+  const agent = new Agent(((bridge: any): BackendBridge));
 
   const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
   initBackend(hook, agent, global);
 
-  const store = new Store(bridge);
+  const store = new Store(((bridge: any): FrontendBridge));
 
   global.agent = agent;
   global.bridge = bridge;
diff --git a/src/__tests__/storeComponentFilters-test.js b/src/__tests__/storeComponentFilters-test.js
index 3b7cfa53010d..5e2385b33b96 100644
--- a/src/__tests__/storeComponentFilters-test.js
+++ b/src/__tests__/storeComponentFilters-test.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 
 describe('Store component filters', () => {
@@ -8,7 +8,7 @@ describe('Store component filters', () => {
   let ReactDOM;
   let TestUtils;
   let Types;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index 09940efe95dd..ecf8d4771743 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 import type {
   DispatcherContext,
@@ -12,7 +12,7 @@ describe('TreeListContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 345b773832aa..bf0c816109fa 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -2,7 +2,7 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 
-import type Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 import type Store from 'src/devtools/store';
 import type { ProfilingDataFrontend } from 'src/devtools/views/Profiler/types';
 import type { ElementType } from 'src/types';
@@ -161,7 +161,7 @@ export function requireTestRenderer(): ReactTestRenderer {
   }
 }
 
-export function exportImportHelper(bridge: Bridge, store: Store): void {
+export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
   const { act } = require('./utils');
   const {
     prepareProfilingDataExport,
diff --git a/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 5880bbac4d40..642dbb91eb87 100644
--- a/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -1,16 +1,16 @@
 // @flow
 
 import Agent from 'src/backend/agent';
-import Bridge from 'src/bridge';
 import resolveBoxStyle from './resolveBoxStyle';
 
+import type { BackendBridge } from 'src/bridge';
 import type { RendererID } from '../types';
 import type { StyleAndLayout } from './types';
 
 export type ResolveNativeStyle = (stylesheetID: number) => ?Object;
 
 export default function setupNativeStyleEditor(
-  bridge: Bridge,
+  bridge: BackendBridge,
   agent: Agent,
   resolveNativeStyle: ResolveNativeStyle,
   validAttributes?: $ReadOnlyArray<string> | null
@@ -81,7 +81,7 @@ const componentIDToStyleOverrides: Map<number, Object> = new Map();
 
 function measureStyle(
   agent: Agent,
-  bridge: Bridge,
+  bridge: BackendBridge,
   resolveNativeStyle: ResolveNativeStyle,
   id: number,
   rendererID: RendererID
diff --git a/src/backend/agent.js b/src/backend/agent.js
index fadd2e697ee5..9d8c4cff3710 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -2,7 +2,6 @@
 
 import EventEmitter from 'events';
 import throttle from 'lodash.throttle';
-import Bridge from 'src/bridge';
 import {
   SESSION_STORAGE_LAST_SELECTION_KEY,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
@@ -17,6 +16,7 @@ import {
 import setupHighlighter from './views/Highlighter';
 import { patch as patchConsole, unpatch as unpatchConsole } from './console';
 
+import type { BackendBridge } from 'src/bridge';
 import type {
   InstanceAndStyle,
   NativeType,
@@ -81,14 +81,14 @@ export default class Agent extends EventEmitter<{|
   showNativeHighlight: [NativeType],
   shutdown: [],
 |}> {
-  _bridge: Bridge;
+  _bridge: BackendBridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
   _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
 
-  constructor(bridge: Bridge) {
+  constructor(bridge: BackendBridge) {
     super();
 
     if (
@@ -259,7 +259,7 @@ export default class Agent extends EventEmitter<{|
     dataURL: string,
     rootID: number,
   |}) => {
-    this._bridge.send('screenshotCaptured', { commitIndex, dataURL });
+    this._bridge.send('screenshotCaptured', { commitIndex, dataURL, rootID });
   };
 
   selectElement = ({ id, rendererID }: ElementAndRendererID) => {
diff --git a/src/backend/views/Highlighter/Overlay.js b/src/backend/views/Highlighter/Overlay.js
index 55ef361dc627..f2190066b479 100644
--- a/src/backend/views/Highlighter/Overlay.js
+++ b/src/backend/views/Highlighter/Overlay.js
@@ -11,6 +11,8 @@ type Rect = {
   width: number,
 };
 
+type Box = {| top: number, left: number, width: number, height: number |};
+
 // Note that the Overlay components are not affected by the active Theme,
 // because they highlight elements in the main Chrome window (outside of devtools).
 // The colors below were chosen to roughly match those used by Chrome devtools.
@@ -21,7 +23,7 @@ class OverlayRect {
   padding: HTMLElement;
   content: HTMLElement;
 
-  constructor(doc, container) {
+  constructor(doc: Document, container: HTMLElement) {
     this.node = doc.createElement('div');
     this.border = doc.createElement('div');
     this.padding = doc.createElement('div');
@@ -51,7 +53,7 @@ class OverlayRect {
     }
   }
 
-  update(box, dims) {
+  update(box: Rect, dims: any) {
     boxWrap(dims, 'margin', this.node);
     boxWrap(dims, 'border', this.border);
     boxWrap(dims, 'padding', this.padding);
@@ -85,7 +87,7 @@ class OverlayTip {
   nameSpan: HTMLElement;
   dimSpan: HTMLElement;
 
-  constructor(doc, container) {
+  constructor(doc: Document, container: HTMLElement) {
     this.tip = doc.createElement('div');
     assign(this.tip.style, {
       display: 'flex',
@@ -126,13 +128,13 @@ class OverlayTip {
     }
   }
 
-  updateText(name, width, height) {
+  updateText(name: string, width: number, height: number) {
     this.nameSpan.textContent = name;
     this.dimSpan.textContent =
       Math.round(width) + 'px × ' + Math.round(height) + 'px';
   }
 
-  updatePosition(dims, bounds) {
+  updatePosition(dims: Box, bounds: Box) {
     const tipRect = this.tip.getBoundingClientRect();
     const tipPos = findTipPos(dims, bounds, {
       width: tipRect.width,
@@ -247,6 +249,7 @@ export default class Overlay {
       this.tipBoundsWindow.document.documentElement,
       this.window
     );
+
     this.tip.updatePosition(
       {
         top: outerBox.top,
diff --git a/src/backend/views/Highlighter/index.js b/src/backend/views/Highlighter/index.js
index 3096b6fab3eb..70d64e4cbc05 100644
--- a/src/backend/views/Highlighter/index.js
+++ b/src/backend/views/Highlighter/index.js
@@ -2,11 +2,15 @@
 
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
-import Bridge from 'src/bridge';
 import Agent from 'src/backend/agent';
 import { hideOverlay, showOverlay } from './Highlighter';
 
-export default function setup(bridge: Bridge, agent: Agent): void {
+import type { BackendBridge } from 'src/bridge';
+
+export default function setupHighlighter(
+  bridge: BackendBridge,
+  agent: Agent
+): void {
   bridge.addListener(
     'clearNativeElementHighlight',
     clearNativeElementHighlight
@@ -50,7 +54,7 @@ export default function setup(bridge: Bridge, agent: Agent): void {
     rendererID,
     scrollIntoView,
   }: {
-    displayName: string,
+    displayName: string | null,
     hideAfterTimeout: boolean,
     id: number,
     openNativeElementsPanel: boolean,
diff --git a/src/bridge.js b/src/bridge.js
index 23b887af7fc7..b8ab73e710e9 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -22,7 +22,7 @@ type Message = {|
 
 type HighlightElementInDOM = {|
   ...ElementAndRendererID,
-  displayName: string,
+  displayName: string | null,
   hideAfterTimeout: boolean,
   openNativeElementsPanel: boolean,
   scrollIntoView: boolean,
@@ -62,33 +62,48 @@ type NativeStyleEditor_SetValueParams = {|
   value: string,
 |};
 
-export default class Bridge extends EventEmitter<{|
+type BackendEvents = {|
+  captureScreenshot: [{| commitIndex: number, rootID: number |}],
+  inspectedElement: [InspectedElementPayload],
+  isBackendStorageAPISupported: [boolean],
+  operations: [Array<number>],
+  ownersList: [OwnersList],
+  overrideComponentFilters: [Array<ComponentFilter>],
+  profilingData: [ProfilingDataBackend],
+  profilingStatus: [boolean],
+  reloadAppForProfiling: [],
+  screenshotCaptured: [
+    {| commitIndex: number, dataURL: string, rootID: number |},
+  ],
+  selectFiber: [number],
+  shutdown: [],
+  stopInspectingNative: [boolean],
+  syncSelectionFromNativeElementsPanel: [],
+  syncSelectionToNativeElementsPanel: [],
+
+  // React Native style editor plug-in.
+  isNativeStyleEditorSupported: [
+    {| isSupported: boolean, validAttributes: ?$ReadOnlyArray<string> |},
+  ],
+  NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+|};
+
+type FrontendEvents = {|
   captureScreenshot: [{| commitIndex: number, rootID: number |}],
   clearNativeElementHighlight: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{| rendererID: RendererID |}],
   getProfilingStatus: [],
   highlightNativeElement: [HighlightElementInDOM],
-  init: [],
   inspectElement: [InspectElementParams],
-  inspectedElement: [InspectedElementPayload],
-  isBackendStorageAPISupported: [boolean],
   logElementToConsole: [ElementAndRendererID],
-  operations: [Array<number>],
-  ownersList: [OwnersList],
-  overrideComponentFilters: [Array<ComponentFilter>],
   overrideContext: [OverrideValue],
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],
   overrideState: [OverrideValue],
   overrideSuspense: [OverrideSuspense],
   profilingData: [ProfilingDataBackend],
-  profilingStatus: [boolean],
   reloadAndProfile: [boolean],
-  reloadAppForProfiling: [],
-  screenshotCaptured: [
-    {| commitIndex: number, dataURL: string, rootID: number |},
-  ],
   selectElement: [ElementAndRendererID],
   selectFiber: [number],
   shutdown: [],
@@ -96,20 +111,22 @@ export default class Bridge extends EventEmitter<{|
   startProfiling: [boolean],
   stopInspectingNative: [boolean],
   stopProfiling: [],
-  syncSelectionFromNativeElementsPanel: [],
-  syncSelectionToNativeElementsPanel: [],
   updateAppendComponentStack: [boolean],
   updateComponentFilters: [Array<ComponentFilter>],
   viewElementSource: [ElementAndRendererID],
 
   // React Native style editor plug-in.
-  isNativeStyleEditorSupported: [
-    {| isSupported: boolean, validAttributes: $ReadOnlyArray<string> |},
-  ],
   NativeStyleEditor_measure: [ElementAndRendererID],
   NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],
   NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],
-  NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+|};
+
+class Bridge<
+  OutgoingEvents: Object,
+  IncomingEvents: Object
+> extends EventEmitter<{|
+  ...IncomingEvents,
+  ...OutgoingEvents,
 |}> {
   _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
@@ -134,7 +151,10 @@ export default class Bridge extends EventEmitter<{|
     return this._wall;
   }
 
-  send(event: string, payload: any, transferable?: Array<any>) {
+  send<EventName: $Keys<OutgoingEvents>>(
+    event: EventName,
+    ...payload: $ElementType<OutgoingEvents, EventName>
+  ) {
     if (this._isShutdown) {
       console.warn(
         `Cannot send message "${event}" through a Bridge that has been shutdown.`
@@ -150,7 +170,7 @@ export default class Bridge extends EventEmitter<{|
     // - if there *has* been a message flushed in the last BATCH_DURATION ms
     //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
     //   be set, and we'll simply add to the queue and wait for that
-    this._messageQueue.push(event, payload, transferable);
+    this._messageQueue.push(event, payload);
     if (!this._timeoutID) {
       this._timeoutID = setTimeout(this._flush, 0);
     }
@@ -204,12 +224,8 @@ export default class Bridge extends EventEmitter<{|
     this._timeoutID = null;
 
     if (this._messageQueue.length) {
-      for (let i = 0; i < this._messageQueue.length; i += 3) {
-        this._wall.send(
-          this._messageQueue[i],
-          this._messageQueue[i + 1],
-          this._messageQueue[i + 2]
-        );
+      for (let i = 0; i < this._messageQueue.length; i += 2) {
+        this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);
       }
       this._messageQueue.length = 0;
 
@@ -220,3 +236,8 @@ export default class Bridge extends EventEmitter<{|
     }
   };
 }
+
+export type BackendBridge = Bridge<BackendEvents, FrontendEvents>;
+export type FrontendBridge = Bridge<FrontendEvents, BackendEvents>;
+
+export default Bridge;
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index bf2e8544a3f6..eb79c41e65b0 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -3,11 +3,11 @@
 import EventEmitter from 'events';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
-import Bridge from 'src/bridge';
 import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
 import ProfilingCache from './ProfilingCache';
 import Store from './store';
 
+import type { FrontendBridge } from 'src/bridge';
 import type { ProfilingDataBackend } from 'src/backend/types';
 import type {
   CommitDataFrontend,
@@ -23,7 +23,7 @@ export default class ProfilerStore extends EventEmitter<{|
   isProfiling: [],
   profilingData: [],
 |}> {
-  _bridge: Bridge;
+  _bridge: FrontendBridge;
 
   // Suspense cache for lazily calculating derived profiling data.
   _cache: ProfilingCache;
@@ -79,7 +79,11 @@ export default class ProfilerStore extends EventEmitter<{|
 
   _store: Store;
 
-  constructor(bridge: Bridge, store: Store, defaultIsProfiling: boolean) {
+  constructor(
+    bridge: FrontendBridge,
+    store: Store,
+    defaultIsProfiling: boolean
+  ) {
     super();
 
     this._bridge = bridge;
diff --git a/src/devtools/index.js b/src/devtools/index.js
index b41b51a1102d..33e628e96542 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import Bridge from 'src/bridge';
+import type { FrontendBridge } from 'src/bridge';
 
 type Shell = {|
   connect: (callback: Function) => void,
@@ -8,7 +8,7 @@ type Shell = {|
 |};
 
 export function initDevTools(shell: Shell) {
-  shell.connect((bridge: Bridge) => {
+  shell.connect((bridge: FrontendBridge) => {
     // TODO ...
   });
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 2c778a0ccd00..5b3e6a34d75f 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -2,7 +2,6 @@
 
 import EventEmitter from 'events';
 import { inspect } from 'util';
-import Bridge from 'src/bridge';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
@@ -24,6 +23,7 @@ import ProfilerStore from './ProfilerStore';
 
 import type { Element } from './views/Components/types';
 import type { ComponentFilter, ElementType } from '../types';
+import type { FrontendBridge } from 'src/bridge';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -71,7 +71,7 @@ export default class Store extends EventEmitter<{|
   supportsProfiling: [],
   supportsReloadAndProfile: [],
 |}> {
-  _bridge: Bridge;
+  _bridge: FrontendBridge;
 
   _captureScreenshots: boolean = false;
 
@@ -129,7 +129,7 @@ export default class Store extends EventEmitter<{|
   // Used for windowing purposes.
   _weightAcrossRoots: number = 0;
 
-  constructor(bridge: Bridge, config?: Config) {
+  constructor(bridge: FrontendBridge, config?: Config) {
     super();
 
     if (__DEBUG__) {
@@ -701,7 +701,7 @@ export default class Store extends EventEmitter<{|
     validAttributes,
   }: {|
     isSupported: boolean,
-    validAttributes: $ReadOnlyArray<string>,
+    validAttributes: ?$ReadOnlyArray<string>,
   |}) => {
     this._isNativeStyleEditorSupported = isSupported;
     this._nativeStyleEditorValidAttributes = validAttributes || null;
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 0c3b3e79b2a5..10df0c470a65 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -221,17 +221,19 @@ function HookView({
     if (canEditHooks && isStateEditable) {
       overrideValueFn = (absolutePath: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
-        bridge.send('overrideHookState', {
-          id,
-          hookID,
-          // Hooks override function expects a relative path for the specified hook (id),
-          // starting with its id within the (flat) hooks list structure.
-          // This relative path does not include the fake tree structure DevTools uses for display,
-          // so it's important that we remove that part of the path before sending the update.
-          path: absolutePath.slice(path.length + 1),
-          rendererID,
-          value,
-        });
+        if (rendererID !== null) {
+          bridge.send('overrideHookState', {
+            id,
+            hookID,
+            // Hooks override function expects a relative path for the specified hook (id),
+            // starting with its id within the (flat) hooks list structure.
+            // This relative path does not include the fake tree structure DevTools uses for display,
+            // so it's important that we remove that part of the path before sending the update.
+            path: absolutePath.slice(path.length + 1),
+            rendererID,
+            value,
+          });
+        }
       };
     }
 
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 97efcac574ff..31841774eb63 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -85,7 +85,9 @@ function InspectedElementContextController({ children }: Props) {
   const getInspectedElementPath = useCallback<GetInspectedElementPath>(
     (id: number, path: Array<string | number>) => {
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('inspectElement', { id, path, rendererID });
+      if (rendererID !== null) {
+        bridge.send('inspectElement', { id, path, rendererID });
+      }
     },
     [bridge, store]
   );
@@ -232,7 +234,9 @@ function InspectedElementContextController({ children }: Props) {
     const sendRequest = () => {
       timeoutID = null;
 
-      bridge.send('inspectElement', { id: selectedElementID, rendererID });
+      if (rendererID !== null) {
+        bridge.send('inspectElement', { id: selectedElementID, rendererID });
+      }
     };
 
     // Send the initial inspection request.
@@ -240,7 +244,9 @@ function InspectedElementContextController({ children }: Props) {
     sendRequest();
 
     // Update the $r variable.
-    bridge.send('selectElement', { id: selectedElementID, rendererID });
+    if (rendererID !== null) {
+      bridge.send('selectElement', { id: selectedElementID, rendererID });
+    }
 
     const onInspectedElement = (data: InspectedElementPayload) => {
       // If this is the element we requested, wait a little bit and then ask for another update.
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
index 570f473355ee..94d6923c37f1 100644
--- a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+++ b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -25,22 +25,28 @@ export default function StyleEditor({ id, style }: Props) {
   const store = useContext(StoreContext);
 
   const changeAttribute = (oldName: string, newName: string, value: any) => {
-    bridge.send('NativeStyleEditor_renameAttribute', {
-      id,
-      rendererID: store.getRendererIDForElement(id),
-      oldName,
-      newName,
-      value,
-    });
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('NativeStyleEditor_renameAttribute', {
+        id,
+        rendererID,
+        oldName,
+        newName,
+        value,
+      });
+    }
   };
 
   const changeValue = (name: string, value: any) => {
-    bridge.send('NativeStyleEditor_setValue', {
-      id,
-      rendererID: store.getRendererIDForElement(id),
-      name,
-      value,
-    });
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('NativeStyleEditor_setValue', {
+        id,
+        rendererID,
+        name,
+        value,
+      });
+    }
   };
 
   const keys = useMemo(() => Array.from(Object.keys(style)), [style]);
diff --git a/src/devtools/views/Components/NativeStyleEditor/context.js b/src/devtools/views/Components/NativeStyleEditor/context.js
index 927a4d4151d5..f062fef43e57 100644
--- a/src/devtools/views/Components/NativeStyleEditor/context.js
+++ b/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -136,10 +136,12 @@ function NativeStyleContextController({ children }: Props) {
     const sendRequest = () => {
       timeoutID = null;
 
-      bridge.send('NativeStyleEditor_measure', {
-        id: selectedElementID,
-        rendererID,
-      });
+      if (rendererID !== null) {
+        bridge.send('NativeStyleEditor_measure', {
+          id: selectedElementID,
+          rendererID,
+        });
+      }
     };
 
     // Send the initial measurement request.
diff --git a/src/devtools/views/Components/OwnersListContext.js b/src/devtools/views/Components/OwnersListContext.js
index aa7e2dab0503..6da02d3546ed 100644
--- a/src/devtools/views/Components/OwnersListContext.js
+++ b/src/devtools/views/Components/OwnersListContext.js
@@ -106,8 +106,9 @@ function OwnersListContextController({ children }: Props) {
   useEffect(() => {
     if (ownerID !== null) {
       const rendererID = store.getRendererIDForElement(ownerID);
-
-      bridge.send('getOwnersList', { id: ownerID, rendererID });
+      if (rendererID !== null) {
+        bridge.send('getOwnersList', { id: ownerID, rendererID });
+      }
     }
 
     return () => {};
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 2d3eece42954..ecc12028c94e 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -140,12 +140,18 @@ export default function SelectedElement(_: Props) {
         });
       }
 
+      const rendererID = store.getRendererIDForElement(
+        nearestSuspenseElementID
+      );
+
       // Toggle suspended
-      bridge.send('overrideSuspense', {
-        id: nearestSuspenseElementID,
-        rendererID: store.getRendererIDForElement(nearestSuspenseElementID),
-        forceFallback: !isSuspended,
-      });
+      if (rendererID !== null) {
+        bridge.send('overrideSuspense', {
+          id: nearestSuspenseElementID,
+          rendererID,
+          forceFallback: !isSuspended,
+        });
+      }
     }
   }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
 
@@ -280,15 +286,21 @@ function InspectedElementView({
   if (type === ElementTypeClass) {
     overrideContextFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('overrideContext', { id, path, rendererID, value });
+      if (rendererID !== null) {
+        bridge.send('overrideContext', { id, path, rendererID, value });
+      }
     };
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('overrideProps', { id, path, rendererID, value });
+      if (rendererID !== null) {
+        bridge.send('overrideProps', { id, path, rendererID, value });
+      }
     };
     overrideStateFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('overrideState', { id, path, rendererID, value });
+      if (rendererID !== null) {
+        bridge.send('overrideState', { id, path, rendererID, value });
+      }
     };
   } else if (
     (type === ElementTypeFunction ||
@@ -298,7 +310,9 @@ function InspectedElementView({
   ) {
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('overrideProps', { id, path, rendererID, value });
+      if (rendererID !== null) {
+        bridge.send('overrideProps', { id, path, rendererID, value });
+      }
     };
   } else if (type === ElementTypeSuspense && canToggleSuspense) {
     overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {
@@ -306,7 +320,13 @@ function InspectedElementView({
         throw new Error('Unexpected path.');
       }
       const rendererID = store.getRendererIDForElement(id);
-      bridge.send('overrideSuspense', { id, rendererID, forceFallback: value });
+      if (rendererID !== null) {
+        bridge.send('overrideSuspense', {
+          id,
+          rendererID,
+          forceFallback: value,
+        });
+      }
     };
   }
 
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 85d3ef165819..285cb39c4165 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -192,7 +192,7 @@ export default function Tree(props: Props) {
     (id: number) => {
       const element = store.getElementByID(id);
       const rendererID = store.getRendererIDForElement(id);
-      if (element !== null) {
+      if (element !== null && rendererID !== null) {
         bridge.send('highlightNativeElement', {
           displayName: element.displayName,
           hideAfterTimeout: false,
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index f8d9bcec9186..1aab4afaef5b 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -6,7 +6,6 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import React, { useMemo, useState } from 'react';
-import Bridge from 'src/bridge';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -25,6 +24,7 @@ import styles from './DevTools.css';
 import './root.css';
 
 import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type { FrontendBridge } from 'src/bridge';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler' | 'settings';
@@ -34,7 +34,7 @@ export type ViewElementSource = (
 ) => void;
 
 export type Props = {|
-  bridge: Bridge,
+  bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   defaultTab?: TabID,
   showTabBar?: boolean,
diff --git a/src/devtools/views/context.js b/src/devtools/views/context.js
index e5ede9ef48a0..96c654a94397 100644
--- a/src/devtools/views/context.js
+++ b/src/devtools/views/context.js
@@ -1,11 +1,13 @@
 // @flow
 
 import { createContext } from 'react';
-import Bridge from 'src/bridge';
-
 import Store from '../store';
 
-export const BridgeContext = createContext<Bridge>(((null: any): Bridge));
+import type { FrontendBridge } from 'src/bridge';
+
+export const BridgeContext = createContext<FrontendBridge>(
+  ((null: any): FrontendBridge)
+);
 BridgeContext.displayName = 'BridgeContext';
 
 export const StoreContext = createContext<Store>(((null: any): Store));
diff --git a/vendor/react-window/dist/index-dev.umd.js b/vendor/react-window/dist/index-dev.umd.js
new file mode 100644
index 000000000000..96dc2ae17a61
--- /dev/null
+++ b/vendor/react-window/dist/index-dev.umd.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactWindow={},e.React)}(this,function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var i=function(e,t){return e.length===t.length&&e.every(function(e,r){return n=e,o=t[r],n===o;var n,o})};function a(e,t){var r;void 0===t&&(t=i);var n,o=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&t(l,o)?n:(n=e.apply(this,l),a=!0,r=this,o=l,n)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(e){cancelAnimationFrame(e.id)}function c(e,t){var r=l();var n={id:requestAnimationFrame(function o(){l()-r>=t?e.call(null):n.id=requestAnimationFrame(o)})};return n}var u=-1;var d=null;function f(e){if(void 0===e&&(e=!1),null===d||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var n=document.createElement("div"),o=n.style;return o.width="100px",o.height="100px",t.appendChild(n),document.body.appendChild(t),t.scrollLeft>0?d="positive-descending":(t.scrollLeft=1,d=0===t.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(t),d}return d}var h=150,p=function(e){var t=e.columnIndex;e.data;return e.rowIndex+":"+t},m=null,v=null,g=null;function w(e){var i,l,d=e.getColumnOffset,m=e.getColumnStartIndexForOffset,v=e.getColumnStopIndexForStartIndex,g=e.getColumnWidth,w=e.getEstimatedTotalHeight,I=e.getEstimatedTotalWidth,M=e.getOffsetForColumnAndAlignment,y=e.getOffsetForRowAndAlignment,x=e.getRowHeight,C=e.getRowOffset,_=e.getRowStartIndexForOffset,b=e.getRowStopIndexForStartIndex,R=e.initInstanceProps,T=e.shouldResetStyleCacheOnItemSizeChange,z=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=R(r.props,o(o(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:o(o(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:e,overscanColumnStopIndex:t,overscanRowStartIndex:n,overscanRowStopIndex:o,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n,o,i){return r.props.onScroll({horizontalScrollDirection:n,scrollLeft:e,scrollTop:t,verticalScrollDirection:o,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(e,t){var n,o,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(T&&a,T&&l,T&&s),u=e+":"+t;c.hasOwnProperty(u)?n=c[u]:c[u]=((o={position:"absolute"})["rtl"===l?"right":"left"]=d(r.props,t,r._instanceProps),o.top=C(r.props,e,r._instanceProps),o.height=x(r.props,e,r._instanceProps),o.width=g(r.props,t,r._instanceProps),n=o);return n},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScroll=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.clientWidth,i=t.scrollLeft,a=t.scrollTop,l=t.scrollHeight,s=t.scrollWidth;r.setState(function(e){if(e.scrollLeft===i&&e.scrollTop===a)return null;var t=r.props.direction,c=i;if("rtl"===t)switch(f()){case"negative":c=-i;break;case"positive-descending":c=s-o-i}c=Math.max(0,Math.min(c,s-o));var u=Math.max(0,Math.min(a,l-n));return{isScrolling:!0,horizontalScrollDirection:e.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:e.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return S(e,t),z(e),null};var l=i.prototype;return l.scrollTo=function(e){var t=e.scrollLeft,r=e.scrollTop;void 0!==t&&(t=Math.max(0,t)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(e){return void 0===t&&(t=e.scrollLeft),void 0===r&&(r=e.scrollTop),e.scrollLeft===t&&e.scrollTop===r?null:{horizontalScrollDirection:e.scrollLeft<t?"forward":"backward",scrollLeft:t,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:e.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e){var t=e.align,r=void 0===t?"auto":t,n=e.columnIndex,o=e.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,d=this.state,f=d.scrollLeft,h=d.scrollTop,p=function(e){if(void 0===e&&(e=!1),-1===u||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(t),u=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return u}();void 0!==n&&(n=Math.max(0,Math.min(n,a-1))),void 0!==o&&(o=Math.max(0,Math.min(o,s-1)));var m=w(this.props,this._instanceProps),v=I(this.props,this._instanceProps)>c?p:0,g=m>l?p:0;this.scrollTo({scrollLeft:void 0!==n?M(this.props,n,r,f,this._instanceProps,g):f,scrollTop:void 0!==o?y(this.props,o,r,h,this._instanceProps,v):h})},l.componentDidMount=function(){var e=this.props,t=e.initialScrollLeft,r=e.initialScrollTop;if(null!=this._outerRef){var n=this._outerRef;"number"==typeof t&&(n.scrollLeft=t),"number"==typeof r&&(n.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props.direction,t=this.state,r=t.scrollLeft,n=t.scrollTop;if(t.scrollUpdateWasRequested&&null!=this._outerRef){var o=this._outerRef;if("rtl"===e)switch(f()){case"negative":o.scrollLeft=-r;break;case"positive-ascending":o.scrollLeft=r;break;default:var i=o.clientWidth,a=o.scrollWidth;o.scrollLeft=a-i-r}else o.scrollLeft=Math.max(0,r);o.scrollTop=Math.max(0,n)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.columnCount,a=e.direction,l=e.height,s=e.innerRef,c=e.innerElementType,u=e.innerTagName,d=e.itemData,f=e.itemKey,h=void 0===f?p:f,m=e.outerElementType,v=e.outerTagName,g=e.rowCount,S=e.style,M=e.useIsScrolling,y=e.width,x=this.state.isScrolling,C=this._getHorizontalRangeToRender(),_=C[0],b=C[1],R=this._getVerticalRangeToRender(),T=R[0],z=R[1],O=[];if(i>0&&g)for(var P=T;P<=z;P++)for(var W=_;W<=b;W++)O.push(t.createElement(n,{columnIndex:W,data:d,isScrolling:M?x:void 0,key:h({columnIndex:W,data:d,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var E=w(this.props,this._instanceProps),A=I(this.props,this._instanceProps);return t.createElement(m||v||"div",{className:o,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:y,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},t.createElement(c||u||"div",{children:O,ref:s,style:{height:E,pointerEvents:x?"none":void 0,width:A}}))},l._callPropsCallbacks=function(){var e=this.props,t=e.columnCount,r=e.onItemsRendered,n=e.onScroll,o=e.rowCount;if("function"==typeof r&&t>0&&o>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),d=u[0],f=u[1],h=u[2],p=u[3];this._callOnItemsRendered(a,l,d,f,s,c,h,p)}if("function"==typeof n){var m=this.state,v=m.horizontalScrollDirection,g=m.scrollLeft,w=m.scrollTop,S=m.scrollUpdateWasRequested,I=m.verticalScrollDirection;this._callOnScroll(g,w,v,I,S)}},l._getHorizontalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanColumnCount,n=e.overscanColumnsCount,o=e.overscanCount,i=e.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||n||o||1;if(0===t||0===i)return[0,0,0,0];var d=m(this.props,c,this._instanceProps),f=v(this.props,d,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),p=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(t-1,f+p)),d,f]},l._getVerticalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanCount,n=e.overscanRowCount,o=e.overscanRowsCount,i=e.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=n||o||r||1;if(0===t||0===i)return[0,0,0,0];var d=_(this.props,c,this._instanceProps),f=b(this.props,d,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),p=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(i-1,f+p)),d,f]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(m=new WeakSet,v=new WeakSet,g=new WeakSet);var S=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.innerTagName,a=e.outerTagName,l=e.overscanColumnsCount,s=e.overscanCount,c=e.overscanRowsCount,u=e.width,d=t.instance;if("number"==typeof s&&m&&!m.has(d)&&(m.add(d),console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),"number"!=typeof l&&"number"!=typeof c||v&&!v.has(d)&&(v.add(d),console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),null==i&&null==a||g&&!g.has(d)&&(g.add(d),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")),null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');switch(n){case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}if("number"!=typeof u)throw Error('An invalid "width" prop has been specified. Grids must specify a number for width. "'+(null===u?"null":typeof u)+'" was specified.');if("number"!=typeof o)throw Error('An invalid "height" prop has been specified. Grids must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},I=function(e,t){var r=e.rowCount,n=t.rowMetadataMap,o=t.estimatedRowHeight,i=t.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},M=function(e,t){var r=e.columnCount,n=t.columnMetadataMap,o=t.estimatedColumnWidth,i=t.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},y=function(e,t,r,n){var o,i,a;if("column"===e?(o=n.columnMetadataMap,i=t.columnWidth,a=n.lastMeasuredColumnIndex):(o=n.rowMetadataMap,i=t.rowHeight,a=n.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=o[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);o[c]={offset:l,size:u},l+=u}"column"===e?n.lastMeasuredColumnIndex=r:n.lastMeasuredRowIndex=r}return o[r]},x=function(e,t,r,n){var o,i;return"column"===e?(o=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(o=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?o[i].offset:0)>=n?C(e,t,r,i,0,n):_(e,t,r,Math.max(0,i),n)},C=function(e,t,r,n,o,i){for(;o<=n;){var a=o+Math.floor((n-o)/2),l=y(e,t,a,r).offset;if(l===i)return a;l<i?o=a+1:l>i&&(n=a-1)}return o>0?o-1:0},_=function(e,t,r,n,o){for(var i="column"===e?t.columnCount:t.rowCount,a=1;n<i&&y(e,t,n,r).offset<o;)n+=a,a*=2;return C(e,t,r,Math.min(n,i-1),Math.floor(n/2),o)},b=function(e,t,r,n,o,i,a){var l="column"===e?t.width:t.height,s=y(e,t,r,i),c="column"===e?M(t,i):I(t,i),u=Math.max(0,Math.min(c-l,s.offset)),d=Math.max(0,s.offset-l+a+s.size);switch("smart"===n&&(n=o>=d-l&&o<=u+l?"auto":"center"),n){case"start":return u;case"end":return d;case"center":return Math.round(d+(u-d)/2);case"auto":default:return o>=d&&o<=u?o:d>u?d:o<d?d:u}},R=w({getColumnOffset:function(e,t,r){return y("column",e,t,r).offset},getColumnStartIndexForOffset:function(e,t,r){return x("column",e,r,t)},getColumnStopIndexForStartIndex:function(e,t,r,n){for(var o=e.columnCount,i=e.width,a=y("column",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("column",e,++c,n).size;return c},getColumnWidth:function(e,t,r){return r.columnMetadataMap[t].size},getEstimatedTotalHeight:I,getEstimatedTotalWidth:M,getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){return b("column",e,t,r,n,o,i)},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){return b("row",e,t,r,n,o,i)},getRowOffset:function(e,t,r){return y("row",e,t,r).offset},getRowHeight:function(e,t,r){return r.rowMetadataMap[t].size},getRowStartIndexForOffset:function(e,t,r){return x("row",e,r,t)},getRowStopIndexForStartIndex:function(e,t,r,n){for(var o=e.rowCount,i=e.height,a=y("row",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("row",e,++c,n).size;return c},initInstanceProps:function(e,t){var r=e,n={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return t.resetAfterColumnIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({columnIndex:e,shouldForceUpdate:r})},t.resetAfterRowIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({rowIndex:e,shouldForceUpdate:r})},t.resetAfterIndices=function(e){var r=e.columnIndex,o=e.rowIndex,i=e.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(n.lastMeasuredColumnIndex=Math.min(n.lastMeasuredColumnIndex,r-1)),"number"==typeof o&&(n.lastMeasuredRowIndex=Math.min(n.lastMeasuredRowIndex,o-1)),t._getItemStyleCache(-1),a&&t.forceUpdate()},n},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("function"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.');if("function"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a function. "'+(null===r?"null":typeof r)+'" was specified.')}}),T=150,z=function(e,t){return e},O=null,P=null;function W(e){var i,l,u=e.getItemOffset,d=e.getEstimatedTotalSize,h=e.getItemSize,p=e.getOffsetForIndexAndAlignment,m=e.getStartIndexForOffset,v=e.getStopIndexForStartIndex,g=e.initInstanceProps,w=e.shouldResetStyleCacheOnItemSizeChange,S=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=g(r.props,o(o(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:o(o(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o){return r.props.onItemsRendered({overscanStartIndex:e,overscanStopIndex:t,visibleStartIndex:n,visibleStopIndex:o})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n){return r.props.onScroll({scrollDirection:e,scrollOffset:t,scrollUpdateWasRequested:n})}),r._getItemStyle=void 0,r._getItemStyle=function(e){var t,n=r.props,o=n.direction,i=n.itemSize,a=n.layout,l=r._getItemStyleCache(w&&i,w&&a,w&&o);if(l.hasOwnProperty(e))t=l[e];else{var s,c=u(r.props,e,r._instanceProps),d=h(r.props,e,r._instanceProps),f="horizontal"===o||"horizontal"===a;l[e]=((s={position:"absolute"})["rtl"===o?"right":"left"]=f?c:0,s.top=f?0:c,s.height=f?"100%":d,s.width=f?d:"100%",t=s)}return t},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScrollHorizontal=function(e){var t=e.currentTarget,n=t.clientWidth,o=t.scrollLeft,i=t.scrollWidth;r.setState(function(e){if(e.scrollOffset===o)return null;var t=r.props.direction,a=o;if("rtl"===t)switch(f()){case"negative":a=-o;break;case"positive-descending":a=i-n-o}return a=Math.max(0,Math.min(a,i-n)),{isScrolling:!0,scrollDirection:e.scrollOffset<o?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.scrollHeight,i=t.scrollTop;r.setState(function(e){if(e.scrollOffset===i)return null;var t=Math.max(0,Math.min(i,o-n));return{isScrolling:!0,scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,T)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return E(e,t),S(e),null};var l=i.prototype;return l.scrollTo=function(e){e=Math.max(0,e),this.setState(function(t){return t.scrollOffset===e?null:{scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e,t){void 0===t&&(t="auto");var r=this.props.itemCount,n=this.state.scrollOffset;e=Math.max(0,Math.min(e,r-1)),this.scrollTo(p(this.props,e,t,n,this._instanceProps))},l.componentDidMount=function(){var e=this.props,t=e.direction,r=e.initialScrollOffset,n=e.layout;if("number"==typeof r&&null!=this._outerRef){var o=this._outerRef;"horizontal"===t||"horizontal"===n?o.scrollLeft=r:o.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props,t=e.direction,r=e.layout,n=this.state,o=n.scrollOffset;if(n.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===t||"horizontal"===r)if("rtl"===t)switch(f()){case"negative":i.scrollLeft=-o;break;case"positive-ascending":i.scrollLeft=o;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-o}else i.scrollLeft=o;else i.scrollTop=o}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.direction,a=e.height,l=e.innerRef,s=e.innerElementType,c=e.innerTagName,u=e.itemCount,f=e.itemData,h=e.itemKey,p=void 0===h?z:h,m=e.layout,v=e.outerElementType,g=e.outerTagName,w=e.style,S=e.useIsScrolling,I=e.width,M=this.state.isScrolling,y="horizontal"===i||"horizontal"===m,x=y?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),_=C[0],b=C[1],R=[];if(u>0)for(var T=_;T<=b;T++)R.push(t.createElement(n,{data:f,key:p(T,f),index:T,isScrolling:S?M:void 0,style:this._getItemStyle(T)}));var O=d(this.props,this._instanceProps);return t.createElement(v||g||"div",{className:o,onScroll:x,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:I,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},w)},t.createElement(s||c||"div",{children:R,ref:l,style:{height:y?"100%":O,pointerEvents:M?"none":void 0,width:y?O:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var e=this._getRangeToRender(),t=e[0],r=e[1],n=e[2],o=e[3];this._callOnItemsRendered(t,r,n,o)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var e=this.props,t=e.itemCount,r=e.overscanCount,n=this.state,o=n.isScrolling,i=n.scrollDirection,a=n.scrollOffset;if(0===t)return[0,0,0,0];var l=m(this.props,a,this._instanceProps),s=v(this.props,l,a,this._instanceProps),c=o&&"backward"!==i?1:Math.max(1,r),u=o&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(t-1,s+u)),l,s]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(O=new WeakSet,P=new WeakSet);var E=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.layout,a=e.innerTagName,l=e.outerTagName,s=e.width,c=t.instance;null==a&&null==l||P&&!P.has(c)&&(P.add(c),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));var u="horizontal"===n||"horizontal"===i;switch(n){case"horizontal":case"vertical":O&&!O.has(c)&&(O.add(c),console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));break;case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}switch(i){case"horizontal":case"vertical":break;default:throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". "'+i+'" was specified.')}if(null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');if(u&&"number"!=typeof s)throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. "'+(null===s?"null":typeof s)+'" was specified.');if(!u&&"number"!=typeof o)throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},A=function(e,t,r){var n=e.itemSize,o=r.itemMetadataMap,i=r.lastMeasuredIndex;if(t>i){var a=0;if(i>=0){var l=o[i];a=l.offset+l.size}for(var s=i+1;s<=t;s++){var c=n(s);o[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=t}return o[t]},k=function(e,t,r,n,o){for(;n<=r;){var i=n+Math.floor((r-n)/2),a=A(e,i,t).offset;if(a===o)return i;a<o?n=i+1:a>o&&(r=i-1)}return n>0?n-1:0},D=function(e,t,r,n){for(var o=e.itemCount,i=1;r<o&&A(e,r,t).offset<n;)r+=i,i*=2;return k(e,t,Math.min(r,o-1),Math.floor(r/2),n)},F=function(e,t){var r=e.itemCount,n=t.itemMetadataMap,o=t.estimatedItemSize,i=t.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},L=W({getItemOffset:function(e,t,r){return A(e,t,r).offset},getItemSize:function(e,t,r){return r.itemMetadataMap[t].size},getEstimatedTotalSize:F,getOffsetForIndexAndAlignment:function(e,t,r,n,o){var i=e.direction,a=e.height,l=e.layout,s=e.width,c="horizontal"===i||"horizontal"===l?s:a,u=A(e,t,o),d=F(e,o),f=Math.max(0,Math.min(d-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=n>=h-c&&n<=f+c?"auto":"center"),r){case"start":return f;case"end":return h;case"center":return Math.round(h+(f-h)/2);case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t,r){return function(e,t,r){var n=t.itemMetadataMap,o=t.lastMeasuredIndex;return(o>0?n[o].offset:0)>=r?k(e,t,o,0,r):D(e,t,Math.max(0,o),r)}(e,r,t)},getStopIndexForStartIndex:function(e,t,r,n){for(var o=e.direction,i=e.height,a=e.itemCount,l=e.layout,s=e.width,c="horizontal"===o||"horizontal"===l?s:i,u=A(e,t,n),d=r+c,f=u.offset+u.size,h=t;h<a-1&&f<d;)f+=A(e,++h,n).size;return h},initInstanceProps:function(e,t){var r={itemMetadataMap:{},estimatedItemSize:e.estimatedItemSize||50,lastMeasuredIndex:-1};return t.resetAfterIndex=function(e,n){void 0===n&&(n=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,e-1),t._getItemStyleCache(-1),n&&t.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.itemSize;if("function"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.')}}),H=w({getColumnOffset:function(e,t){return t*e.columnWidth},getColumnWidth:function(e,t){return e.columnWidth},getRowOffset:function(e,t){return t*e.rowHeight},getRowHeight:function(e,t){return e.rowHeight},getEstimatedTotalHeight:function(e){var t=e.rowCount;return e.rowHeight*t},getEstimatedTotalWidth:function(e){var t=e.columnCount;return e.columnWidth*t},getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){var a=e.columnCount,l=e.columnWidth,s=e.width,c=Math.max(0,a*l-s),u=Math.min(c,t*l),d=Math.max(0,t*l-s+i+l);switch("smart"===r&&(r=n>=d-s&&n<=u+s?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(s/2)?0:f>c+Math.floor(s/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){var a=e.rowHeight,l=e.height,s=e.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,t*a),d=Math.max(0,t*a-l+i+a);switch("smart"===r&&(r=n>=d-l&&n<=u+l?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(l/2)?0:f>c+Math.floor(l/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getColumnStartIndexForOffset:function(e,t){var r=e.columnWidth,n=e.columnCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getColumnStopIndexForStartIndex:function(e,t,r){var n=e.columnWidth,o=e.columnCount,i=e.width,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},getRowStartIndexForOffset:function(e,t){var r=e.rowHeight,n=e.rowCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getRowStopIndexForStartIndex:function(e,t,r){var n=e.rowHeight,o=e.rowCount,i=e.height,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("number"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.');if("number"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a number. "'+(null===r?"null":typeof r)+'" was specified.')}}),U=W({getItemOffset:function(e,t){return t*e.itemSize},getItemSize:function(e,t){return e.itemSize},getEstimatedTotalSize:function(e){var t=e.itemCount;return e.itemSize*t},getOffsetForIndexAndAlignment:function(e,t,r,n){var o=e.direction,i=e.height,a=e.itemCount,l=e.itemSize,s=e.layout,c=e.width,u="horizontal"===o||"horizontal"===s?c:i,d=Math.max(0,a*l-u),f=Math.min(d,t*l),h=Math.max(0,t*l-u+l);switch("smart"===r&&(r=n>=h-u&&n<=f+u?"auto":"center"),r){case"start":return f;case"end":return h;case"center":var p=Math.round(h+(f-h)/2);return p<Math.ceil(u/2)?0:p>d+Math.floor(u/2)?d:p;case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t){var r=e.itemCount,n=e.itemSize;return Math.max(0,Math.min(r-1,Math.floor(t/n)))},getStopIndexForStartIndex:function(e,t,r){var n=e.direction,o=e.height,i=e.itemCount,a=e.itemSize,l=e.layout,s=e.width,c=t*a,u="horizontal"===n||"horizontal"===l?s:o,d=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,t+d-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.itemSize;if("number"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.')}});function V(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function q(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1}function N(e,t){var r=e.style,n=V(e,["style"]),o=t.style,i=V(t,["style"]);return!q(r,o)&&!q(n,i)}e.VariableSizeGrid=R,e.VariableSizeList=L,e.FixedSizeGrid=H,e.FixedSizeList=U,e.areEqual=N,e.shouldComponentUpdate=function(e,t){return!N(this.props,e)||q(this.state,t)},Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=index-dev.umd.js.map
diff --git a/vendor/react-window/dist/index-prod.umd.js b/vendor/react-window/dist/index-prod.umd.js
new file mode 100644
index 000000000000..ca33541ed54f
--- /dev/null
+++ b/vendor/react-window/dist/index-prod.umd.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactWindow={},t.React)}(this,function(t,e){"use strict";function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t}).apply(this,arguments)}function o(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var i=function(t,e){return t.length===e.length&&t.every(function(t,r){return o=t,n=e[r],o===n;var o,n})};function a(t,e){var r;void 0===e&&(e=i);var o,n=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&e(l,n)?o:(o=t.apply(this,l),a=!0,r=this,n=l,o)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(t){cancelAnimationFrame(t.id)}function c(t,e){var r=l();var o={id:requestAnimationFrame(function n(){l()-r>=e?t.call(null):o.id=requestAnimationFrame(n)})};return o}var u=-1;var f=null;function d(t){if(void 0===t&&(t=!1),null===f||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var o=document.createElement("div"),n=o.style;return n.width="100px",n.height="100px",e.appendChild(o),document.body.appendChild(e),e.scrollLeft>0?f="positive-descending":(e.scrollLeft=1,f=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),f}return f}var h=150,m=function(t){var e=t.columnIndex;t.data;return t.rowIndex+":"+e};function p(t){var i,l,f=t.getColumnOffset,p=t.getColumnStartIndexForOffset,v=t.getColumnStopIndexForStartIndex,S=t.getColumnWidth,I=t.getEstimatedTotalHeight,w=t.getEstimatedTotalWidth,M=t.getOffsetForColumnAndAlignment,x=t.getOffsetForRowAndAlignment,_=t.getRowHeight,C=t.getRowOffset,R=t.getRowStartIndexForOffset,y=t.getRowStopIndexForStartIndex,T=t.initInstanceProps,O=t.shouldResetStyleCacheOnItemSizeChange,z=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=T(r.props,n(n(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:n(n(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:t,overscanColumnStopIndex:e,overscanRowStartIndex:o,overscanRowStopIndex:n,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o,n,i){return r.props.onScroll({horizontalScrollDirection:o,scrollLeft:t,scrollTop:e,verticalScrollDirection:n,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(t,e){var o,n,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(O&&a,O&&l,O&&s),u=t+":"+e;c.hasOwnProperty(u)?o=c[u]:c[u]=((n={position:"absolute"})["rtl"===l?"right":"left"]=f(r.props,e,r._instanceProps),n.top=C(r.props,t,r._instanceProps),n.height=_(r.props,t,r._instanceProps),n.width=S(r.props,e,r._instanceProps),o=n);return o},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScroll=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.clientWidth,i=e.scrollLeft,a=e.scrollTop,l=e.scrollHeight,s=e.scrollWidth;r.setState(function(t){if(t.scrollLeft===i&&t.scrollTop===a)return null;var e=r.props.direction,c=i;if("rtl"===e)switch(d()){case"negative":c=-i;break;case"positive-descending":c=s-n-i}c=Math.max(0,Math.min(c,s-n));var u=Math.max(0,Math.min(a,l-o));return{isScrolling:!0,horizontalScrollDirection:t.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:t.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return g(t,e),z(t),null};var l=i.prototype;return l.scrollTo=function(t){var e=t.scrollLeft,r=t.scrollTop;void 0!==e&&(e=Math.max(0,e)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(t){return void 0===e&&(e=t.scrollLeft),void 0===r&&(r=t.scrollTop),t.scrollLeft===e&&t.scrollTop===r?null:{horizontalScrollDirection:t.scrollLeft<e?"forward":"backward",scrollLeft:e,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:t.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t){var e=t.align,r=void 0===e?"auto":e,o=t.columnIndex,n=t.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,f=this.state,d=f.scrollLeft,h=f.scrollTop,m=function(t){if(void 0===t&&(t=!1),-1===u||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(e),u=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}return u}();void 0!==o&&(o=Math.max(0,Math.min(o,a-1))),void 0!==n&&(n=Math.max(0,Math.min(n,s-1)));var p=I(this.props,this._instanceProps),g=w(this.props,this._instanceProps)>c?m:0,v=p>l?m:0;this.scrollTo({scrollLeft:void 0!==o?M(this.props,o,r,d,this._instanceProps,v):d,scrollTop:void 0!==n?x(this.props,n,r,h,this._instanceProps,g):h})},l.componentDidMount=function(){var t=this.props,e=t.initialScrollLeft,r=t.initialScrollTop;if(null!=this._outerRef){var o=this._outerRef;"number"==typeof e&&(o.scrollLeft=e),"number"==typeof r&&(o.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props.direction,e=this.state,r=e.scrollLeft,o=e.scrollTop;if(e.scrollUpdateWasRequested&&null!=this._outerRef){var n=this._outerRef;if("rtl"===t)switch(d()){case"negative":n.scrollLeft=-r;break;case"positive-ascending":n.scrollLeft=r;break;default:var i=n.clientWidth,a=n.scrollWidth;n.scrollLeft=a-i-r}else n.scrollLeft=Math.max(0,r);n.scrollTop=Math.max(0,o)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.columnCount,a=t.direction,l=t.height,s=t.innerRef,c=t.innerElementType,u=t.innerTagName,f=t.itemData,d=t.itemKey,h=void 0===d?m:d,p=t.outerElementType,g=t.outerTagName,v=t.rowCount,S=t.style,M=t.useIsScrolling,x=t.width,_=this.state.isScrolling,C=this._getHorizontalRangeToRender(),R=C[0],y=C[1],T=this._getVerticalRangeToRender(),O=T[0],z=T[1],b=[];if(i>0&&v)for(var P=O;P<=z;P++)for(var W=R;W<=y;W++)b.push(e.createElement(o,{columnIndex:W,data:f,isScrolling:M?_:void 0,key:h({columnIndex:W,data:f,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var D=I(this.props,this._instanceProps),F=w(this.props,this._instanceProps);return e.createElement(p||g||"div",{className:n,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:x,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},e.createElement(c||u||"div",{children:b,ref:s,style:{height:D,pointerEvents:_?"none":void 0,width:F}}))},l._callPropsCallbacks=function(){var t=this.props,e=t.columnCount,r=t.onItemsRendered,o=t.onScroll,n=t.rowCount;if("function"==typeof r&&e>0&&n>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),f=u[0],d=u[1],h=u[2],m=u[3];this._callOnItemsRendered(a,l,f,d,s,c,h,m)}if("function"==typeof o){var p=this.state,g=p.horizontalScrollDirection,v=p.scrollLeft,S=p.scrollTop,I=p.scrollUpdateWasRequested,w=p.verticalScrollDirection;this._callOnScroll(v,S,g,w,I)}},l._getHorizontalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanColumnCount,o=t.overscanColumnsCount,n=t.overscanCount,i=t.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||o||n||1;if(0===e||0===i)return[0,0,0,0];var f=p(this.props,c,this._instanceProps),d=v(this.props,f,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),m=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(e-1,d+m)),f,d]},l._getVerticalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanCount,o=t.overscanRowCount,n=t.overscanRowsCount,i=t.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=o||n||r||1;if(0===e||0===i)return[0,0,0,0];var f=R(this.props,c,this._instanceProps),d=y(this.props,f,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),m=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(i-1,d+m)),f,d]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}var g=function(t,e){t.children,t.direction,t.height,t.innerTagName,t.outerTagName,t.overscanColumnsCount,t.overscanCount,t.overscanRowsCount,t.width,e.instance},v=function(t,e){var r=t.rowCount,o=e.rowMetadataMap,n=e.estimatedRowHeight,i=e.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},S=function(t,e){var r=t.columnCount,o=e.columnMetadataMap,n=e.estimatedColumnWidth,i=e.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},I=function(t,e,r,o){var n,i,a;if("column"===t?(n=o.columnMetadataMap,i=e.columnWidth,a=o.lastMeasuredColumnIndex):(n=o.rowMetadataMap,i=e.rowHeight,a=o.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=n[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);n[c]={offset:l,size:u},l+=u}"column"===t?o.lastMeasuredColumnIndex=r:o.lastMeasuredRowIndex=r}return n[r]},w=function(t,e,r,o){var n,i;return"column"===t?(n=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(n=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?n[i].offset:0)>=o?M(t,e,r,i,0,o):x(t,e,r,Math.max(0,i),o)},M=function(t,e,r,o,n,i){for(;n<=o;){var a=n+Math.floor((o-n)/2),l=I(t,e,a,r).offset;if(l===i)return a;l<i?n=a+1:l>i&&(o=a-1)}return n>0?n-1:0},x=function(t,e,r,o,n){for(var i="column"===t?e.columnCount:e.rowCount,a=1;o<i&&I(t,e,o,r).offset<n;)o+=a,a*=2;return M(t,e,r,Math.min(o,i-1),Math.floor(o/2),n)},_=function(t,e,r,o,n,i,a){var l="column"===t?e.width:e.height,s=I(t,e,r,i),c="column"===t?S(e,i):v(e,i),u=Math.max(0,Math.min(c-l,s.offset)),f=Math.max(0,s.offset-l+a+s.size);switch("smart"===o&&(o=n>=f-l&&n<=u+l?"auto":"center"),o){case"start":return u;case"end":return f;case"center":return Math.round(f+(u-f)/2);case"auto":default:return n>=f&&n<=u?n:f>u?f:n<f?f:u}},C=p({getColumnOffset:function(t,e,r){return I("column",t,e,r).offset},getColumnStartIndexForOffset:function(t,e,r){return w("column",t,r,e)},getColumnStopIndexForStartIndex:function(t,e,r,o){for(var n=t.columnCount,i=t.width,a=I("column",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("column",t,++c,o).size;return c},getColumnWidth:function(t,e,r){return r.columnMetadataMap[e].size},getEstimatedTotalHeight:v,getEstimatedTotalWidth:S,getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){return _("column",t,e,r,o,n,i)},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){return _("row",t,e,r,o,n,i)},getRowOffset:function(t,e,r){return I("row",t,e,r).offset},getRowHeight:function(t,e,r){return r.rowMetadataMap[e].size},getRowStartIndexForOffset:function(t,e,r){return w("row",t,r,e)},getRowStopIndexForStartIndex:function(t,e,r,o){for(var n=t.rowCount,i=t.height,a=I("row",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("row",t,++c,o).size;return c},initInstanceProps:function(t,e){var r=t,o={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return e.resetAfterColumnIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({columnIndex:t,shouldForceUpdate:r})},e.resetAfterRowIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({rowIndex:t,shouldForceUpdate:r})},e.resetAfterIndices=function(t){var r=t.columnIndex,n=t.rowIndex,i=t.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(o.lastMeasuredColumnIndex=Math.min(o.lastMeasuredColumnIndex,r-1)),"number"==typeof n&&(o.lastMeasuredRowIndex=Math.min(o.lastMeasuredRowIndex,n-1)),e._getItemStyleCache(-1),a&&e.forceUpdate()},o},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.columnWidth,t.rowHeight}}),R=150,y=function(t,e){return t};function T(t){var i,l,u=t.getItemOffset,f=t.getEstimatedTotalSize,h=t.getItemSize,m=t.getOffsetForIndexAndAlignment,p=t.getStartIndexForOffset,g=t.getStopIndexForStartIndex,v=t.initInstanceProps,S=t.shouldResetStyleCacheOnItemSizeChange,I=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=v(r.props,n(n(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:n(n(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n){return r.props.onItemsRendered({overscanStartIndex:t,overscanStopIndex:e,visibleStartIndex:o,visibleStopIndex:n})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o){return r.props.onScroll({scrollDirection:t,scrollOffset:e,scrollUpdateWasRequested:o})}),r._getItemStyle=void 0,r._getItemStyle=function(t){var e,o=r.props,n=o.direction,i=o.itemSize,a=o.layout,l=r._getItemStyleCache(S&&i,S&&a,S&&n);if(l.hasOwnProperty(t))e=l[t];else{var s,c=u(r.props,t,r._instanceProps),f=h(r.props,t,r._instanceProps),d="horizontal"===n||"horizontal"===a;l[t]=((s={position:"absolute"})["rtl"===n?"right":"left"]=d?c:0,s.top=d?0:c,s.height=d?"100%":f,s.width=d?f:"100%",e=s)}return e},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScrollHorizontal=function(t){var e=t.currentTarget,o=e.clientWidth,n=e.scrollLeft,i=e.scrollWidth;r.setState(function(t){if(t.scrollOffset===n)return null;var e=r.props.direction,a=n;if("rtl"===e)switch(d()){case"negative":a=-n;break;case"positive-descending":a=i-o-n}return a=Math.max(0,Math.min(a,i-o)),{isScrolling:!0,scrollDirection:t.scrollOffset<n?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.scrollHeight,i=e.scrollTop;r.setState(function(t){if(t.scrollOffset===i)return null;var e=Math.max(0,Math.min(i,n-o));return{isScrolling:!0,scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,R)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return O(t,e),I(t),null};var l=i.prototype;return l.scrollTo=function(t){t=Math.max(0,t),this.setState(function(e){return e.scrollOffset===t?null:{scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t,e){void 0===e&&(e="auto");var r=this.props.itemCount,o=this.state.scrollOffset;t=Math.max(0,Math.min(t,r-1)),this.scrollTo(m(this.props,t,e,o,this._instanceProps))},l.componentDidMount=function(){var t=this.props,e=t.direction,r=t.initialScrollOffset,o=t.layout;if("number"==typeof r&&null!=this._outerRef){var n=this._outerRef;"horizontal"===e||"horizontal"===o?n.scrollLeft=r:n.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props,e=t.direction,r=t.layout,o=this.state,n=o.scrollOffset;if(o.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===e||"horizontal"===r)if("rtl"===e)switch(d()){case"negative":i.scrollLeft=-n;break;case"positive-ascending":i.scrollLeft=n;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-n}else i.scrollLeft=n;else i.scrollTop=n}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.direction,a=t.height,l=t.innerRef,s=t.innerElementType,c=t.innerTagName,u=t.itemCount,d=t.itemData,h=t.itemKey,m=void 0===h?y:h,p=t.layout,g=t.outerElementType,v=t.outerTagName,S=t.style,I=t.useIsScrolling,w=t.width,M=this.state.isScrolling,x="horizontal"===i||"horizontal"===p,_=x?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),R=C[0],T=C[1],O=[];if(u>0)for(var z=R;z<=T;z++)O.push(e.createElement(o,{data:d,key:m(z,d),index:z,isScrolling:I?M:void 0,style:this._getItemStyle(z)}));var b=f(this.props,this._instanceProps);return e.createElement(g||v||"div",{className:n,onScroll:_,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:w,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},S)},e.createElement(s||c||"div",{children:O,ref:l,style:{height:x?"100%":b,pointerEvents:M?"none":void 0,width:x?b:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var t=this._getRangeToRender(),e=t[0],r=t[1],o=t[2],n=t[3];this._callOnItemsRendered(e,r,o,n)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var t=this.props,e=t.itemCount,r=t.overscanCount,o=this.state,n=o.isScrolling,i=o.scrollDirection,a=o.scrollOffset;if(0===e)return[0,0,0,0];var l=p(this.props,a,this._instanceProps),s=g(this.props,l,a,this._instanceProps),c=n&&"backward"!==i?1:Math.max(1,r),u=n&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(e-1,s+u)),l,s]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}var O=function(t,e){t.children,t.direction,t.height,t.layout,t.innerTagName,t.outerTagName,t.width,e.instance},z=function(t,e,r){var o=t.itemSize,n=r.itemMetadataMap,i=r.lastMeasuredIndex;if(e>i){var a=0;if(i>=0){var l=n[i];a=l.offset+l.size}for(var s=i+1;s<=e;s++){var c=o(s);n[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=e}return n[e]},b=function(t,e,r,o,n){for(;o<=r;){var i=o+Math.floor((r-o)/2),a=z(t,i,e).offset;if(a===n)return i;a<n?o=i+1:a>n&&(r=i-1)}return o>0?o-1:0},P=function(t,e,r,o){for(var n=t.itemCount,i=1;r<n&&z(t,r,e).offset<o;)r+=i,i*=2;return b(t,e,Math.min(r,n-1),Math.floor(r/2),o)},W=function(t,e){var r=t.itemCount,o=e.itemMetadataMap,n=e.estimatedItemSize,i=e.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},D=T({getItemOffset:function(t,e,r){return z(t,e,r).offset},getItemSize:function(t,e,r){return r.itemMetadataMap[e].size},getEstimatedTotalSize:W,getOffsetForIndexAndAlignment:function(t,e,r,o,n){var i=t.direction,a=t.height,l=t.layout,s=t.width,c="horizontal"===i||"horizontal"===l?s:a,u=z(t,e,n),f=W(t,n),d=Math.max(0,Math.min(f-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=o>=h-c&&o<=d+c?"auto":"center"),r){case"start":return d;case"end":return h;case"center":return Math.round(h+(d-h)/2);case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e,r){return function(t,e,r){var o=e.itemMetadataMap,n=e.lastMeasuredIndex;return(n>0?o[n].offset:0)>=r?b(t,e,n,0,r):P(t,e,Math.max(0,n),r)}(t,r,e)},getStopIndexForStartIndex:function(t,e,r,o){for(var n=t.direction,i=t.height,a=t.itemCount,l=t.layout,s=t.width,c="horizontal"===n||"horizontal"===l?s:i,u=z(t,e,o),f=r+c,d=u.offset+u.size,h=e;h<a-1&&d<f;)d+=z(t,++h,o).size;return h},initInstanceProps:function(t,e){var r={itemMetadataMap:{},estimatedItemSize:t.estimatedItemSize||50,lastMeasuredIndex:-1};return e.resetAfterIndex=function(t,o){void 0===o&&(o=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,t-1),e._getItemStyleCache(-1),o&&e.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.itemSize}}),F=p({getColumnOffset:function(t,e){return e*t.columnWidth},getColumnWidth:function(t,e){return t.columnWidth},getRowOffset:function(t,e){return e*t.rowHeight},getRowHeight:function(t,e){return t.rowHeight},getEstimatedTotalHeight:function(t){var e=t.rowCount;return t.rowHeight*e},getEstimatedTotalWidth:function(t){var e=t.columnCount;return t.columnWidth*e},getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){var a=t.columnCount,l=t.columnWidth,s=t.width,c=Math.max(0,a*l-s),u=Math.min(c,e*l),f=Math.max(0,e*l-s+i+l);switch("smart"===r&&(r=o>=f-s&&o<=u+s?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(s/2)?0:d>c+Math.floor(s/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){var a=t.rowHeight,l=t.height,s=t.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,e*a),f=Math.max(0,e*a-l+i+a);switch("smart"===r&&(r=o>=f-l&&o<=u+l?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(l/2)?0:d>c+Math.floor(l/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getColumnStartIndexForOffset:function(t,e){var r=t.columnWidth,o=t.columnCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getColumnStopIndexForStartIndex:function(t,e,r){var o=t.columnWidth,n=t.columnCount,i=t.width,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},getRowStartIndexForOffset:function(t,e){var r=t.rowHeight,o=t.rowCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getRowStopIndexForStartIndex:function(t,e,r){var o=t.rowHeight,n=t.rowCount,i=t.height,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.columnWidth,t.rowHeight}}),L=T({getItemOffset:function(t,e){return e*t.itemSize},getItemSize:function(t,e){return t.itemSize},getEstimatedTotalSize:function(t){var e=t.itemCount;return t.itemSize*e},getOffsetForIndexAndAlignment:function(t,e,r,o){var n=t.direction,i=t.height,a=t.itemCount,l=t.itemSize,s=t.layout,c=t.width,u="horizontal"===n||"horizontal"===s?c:i,f=Math.max(0,a*l-u),d=Math.min(f,e*l),h=Math.max(0,e*l-u+l);switch("smart"===r&&(r=o>=h-u&&o<=d+u?"auto":"center"),r){case"start":return d;case"end":return h;case"center":var m=Math.round(h+(d-h)/2);return m<Math.ceil(u/2)?0:m>f+Math.floor(u/2)?f:m;case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e){var r=t.itemCount,o=t.itemSize;return Math.max(0,Math.min(r-1,Math.floor(e/o)))},getStopIndexForStartIndex:function(t,e,r){var o=t.direction,n=t.height,i=t.itemCount,a=t.itemSize,l=t.layout,s=t.width,c=e*a,u="horizontal"===o||"horizontal"===l?s:n,f=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,e+f-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.itemSize}});function A(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}function H(t,e){for(var r in t)if(!(r in e))return!0;for(var o in e)if(t[o]!==e[o])return!0;return!1}function k(t,e){var r=t.style,o=A(t,["style"]),n=e.style,i=A(e,["style"]);return!H(r,n)&&!H(o,i)}t.VariableSizeGrid=C,t.VariableSizeList=D,t.FixedSizeGrid=F,t.FixedSizeList=L,t.areEqual=k,t.shouldComponentUpdate=function(t,e){return!k(this.props,t)||H(this.state,e)},Object.defineProperty(t,"__esModule",{value:!0})});
+//# sourceMappingURL=index-prod.umd.js.map
diff --git a/vendor/react-window/dist/index.cjs.js b/vendor/react-window/dist/index.cjs.js
index 08582cdb6fc5..83875b5ee019 100644
--- a/vendor/react-window/dist/index.cjs.js
+++ b/vendor/react-window/dist/index.cjs.js
@@ -59,6 +59,50 @@ function getScrollbarSize(recalculate) {
 
   return size;
 }
+var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
 
 var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
 
@@ -72,6 +116,7 @@ var defaultItemKey = function defaultItemKey(_ref) {
 
 
 var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
 var devWarningsTagName = null;
 
 if (process.env.NODE_ENV !== 'production') {
@@ -79,6 +124,9 @@ if (process.env.NODE_ENV !== 'production') {
     devWarningsOverscanCount =
     /*#__PURE__*/
     new WeakSet();
+    devWarningsOverscanRowsColumnsCount =
+    /*#__PURE__*/
+    new WeakSet();
     devWarningsTagName =
     /*#__PURE__*/
     new WeakSet();
@@ -183,9 +231,11 @@ function createGridComponent(_ref2) {
 
       _this._onScroll = function (event) {
         var _event$currentTarget = event.currentTarget,
+            clientHeight = _event$currentTarget.clientHeight,
             clientWidth = _event$currentTarget.clientWidth,
             scrollLeft = _event$currentTarget.scrollLeft,
             scrollTop = _event$currentTarget.scrollTop,
+            scrollHeight = _event$currentTarget.scrollHeight,
             scrollWidth = _event$currentTarget.scrollWidth;
 
         _this.setState(function (prevState) {
@@ -196,25 +246,33 @@ function createGridComponent(_ref2) {
             return null;
           }
 
-          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+          var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
 
           var calculatedScrollLeft = scrollLeft;
 
           if (direction === 'rtl') {
-            if (scrollLeft <= 0) {
-              calculatedScrollLeft = -scrollLeft;
-            } else {
-              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                calculatedScrollLeft = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
             }
-          }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
 
+          calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
+          var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
           return {
             isScrolling: true,
             horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
             scrollLeft: calculatedScrollLeft,
-            scrollTop: scrollTop,
+            scrollTop: calculatedScrollTop,
             verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
             scrollUpdateWasRequested: false
           };
@@ -339,26 +397,55 @@ function createGridComponent(_ref2) {
           initialScrollLeft = _this$props3.initialScrollLeft,
           initialScrollTop = _this$props3.initialScrollTop;
 
-      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
-        this._outerRef.scrollLeft = initialScrollLeft;
-      }
+      if (this._outerRef != null) {
+        var outerRef = this._outerRef;
+
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
 
-      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
-        this._outerRef.scrollTop = initialScrollTop;
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
       }
 
       this._callPropsCallbacks();
     };
 
     _proto.componentDidUpdate = function componentDidUpdate() {
+      var direction = this.props.direction;
       var _this$state2 = this.state,
           scrollLeft = _this$state2.scrollLeft,
           scrollTop = _this$state2.scrollTop,
           scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
 
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
-        this._outerRef.scrollLeft = scrollLeft;
-        this._outerRef.scrollTop = scrollTop;
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        var outerRef = this._outerRef;
+
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
       }
 
       this._callPropsCallbacks();
@@ -442,7 +529,7 @@ function createGridComponent(_ref2) {
         ref: innerRef,
         style: {
           height: estimatedTotalHeight,
-          pointerEvents: isScrolling ? 'none' : '',
+          pointerEvents: isScrolling ? 'none' : undefined,
           width: estimatedTotalWidth
         }
       }));
@@ -492,6 +579,7 @@ function createGridComponent(_ref2) {
     _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
       var _this$props6 = this.props,
           columnCount = _this$props6.columnCount,
+          overscanColumnCount = _this$props6.overscanColumnCount,
           overscanColumnsCount = _this$props6.overscanColumnsCount,
           overscanCount = _this$props6.overscanCount,
           rowCount = _this$props6.rowCount;
@@ -499,7 +587,7 @@ function createGridComponent(_ref2) {
           horizontalScrollDirection = _this$state4.horizontalScrollDirection,
           isScrolling = _this$state4.isScrolling,
           scrollLeft = _this$state4.scrollLeft;
-      var overscanCountResolved = overscanColumnsCount || overscanCount || 1;
+      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -518,13 +606,14 @@ function createGridComponent(_ref2) {
       var _this$props7 = this.props,
           columnCount = _this$props7.columnCount,
           overscanCount = _this$props7.overscanCount,
+          overscanRowCount = _this$props7.overscanRowCount,
           overscanRowsCount = _this$props7.overscanRowsCount,
           rowCount = _this$props7.rowCount;
       var _this$state5 = this.state,
           isScrolling = _this$state5.isScrolling,
           verticalScrollDirection = _this$state5.verticalScrollDirection,
           scrollTop = _this$state5.scrollTop;
-      var overscanCountResolved = overscanRowsCount || overscanCount || 1;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -553,7 +642,9 @@ var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
       height = _ref5.height,
       innerTagName = _ref5.innerTagName,
       outerTagName = _ref5.outerTagName,
+      overscanColumnsCount = _ref5.overscanColumnsCount,
       overscanCount = _ref5.overscanCount,
+      overscanRowsCount = _ref5.overscanRowsCount,
       width = _ref5.width;
   var instance = _ref6.instance;
 
@@ -561,7 +652,14 @@ var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
     if (typeof overscanCount === 'number') {
       if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
         devWarningsOverscanCount.add(instance);
-        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnsCount and overscanRowsCount props instead.');
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
+      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
       }
     }
 
@@ -770,7 +868,11 @@ var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemT
     default:
       if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
         return scrollOffset;
-      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
         return minOffset;
       } else {
         return maxOffset;
@@ -1037,20 +1139,27 @@ function createListComponent(_ref) {
             return null;
           }
 
-          var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
-          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
-
+          var direction = _this.props.direction;
           var scrollOffset = scrollLeft;
 
           if (direction === 'rtl') {
-            if (scrollLeft <= 0) {
-              scrollOffset = -scrollOffset;
-            } else {
-              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                scrollOffset = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
             }
-          }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
 
+          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
           return {
             isScrolling: true,
             scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
@@ -1061,7 +1170,10 @@ function createListComponent(_ref) {
       };
 
       _this._onScrollVertical = function (event) {
-        var scrollTop = event.currentTarget.scrollTop;
+        var _event$currentTarget2 = event.currentTarget,
+            clientHeight = _event$currentTarget2.clientHeight,
+            scrollHeight = _event$currentTarget2.scrollHeight,
+            scrollTop = _event$currentTarget2.scrollTop;
 
         _this.setState(function (prevState) {
           if (prevState.scrollOffset === scrollTop) {
@@ -1069,12 +1181,14 @@ function createListComponent(_ref) {
             // In which case we don't need to trigger another render,
             // And we don't want to update state.isScrolling.
             return null;
-          }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
 
+
+          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
           return {
             isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
-            scrollOffset: scrollTop,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+            scrollOffset: scrollOffset,
             scrollUpdateWasRequested: false
           };
         }, _this._resetIsScrollingDebounced);
@@ -1154,12 +1268,13 @@ function createListComponent(_ref) {
           initialScrollOffset = _this$props2.initialScrollOffset,
           layout = _this$props2.layout;
 
-      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
-        // TODO Deprecate direction "horizontal"
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
         if (direction === 'horizontal' || layout === 'horizontal') {
-          this._outerRef.scrollLeft = initialScrollOffset;
+          outerRef.scrollLeft = initialScrollOffset;
         } else {
-          this._outerRef.scrollTop = initialScrollOffset;
+          outerRef.scrollTop = initialScrollOffset;
         }
       }
 
@@ -1174,12 +1289,34 @@ function createListComponent(_ref) {
           scrollOffset = _this$state.scrollOffset,
           scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
 
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
-        // TODO Deprecate direction "horizontal"
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
         if (direction === 'horizontal' || layout === 'horizontal') {
-          this._outerRef.scrollLeft = scrollOffset;
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+
+              default:
+                var clientWidth = outerRef.clientWidth,
+                    scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
         } else {
-          this._outerRef.scrollTop = scrollOffset;
+          outerRef.scrollTop = scrollOffset;
         }
       }
 
@@ -1255,7 +1392,7 @@ function createListComponent(_ref) {
         ref: innerRef,
         style: {
           height: isHorizontal ? '100%' : estimatedTotalSize,
-          pointerEvents: isScrolling ? 'none' : '',
+          pointerEvents: isScrolling ? 'none' : undefined,
           width: isHorizontal ? estimatedTotalSize : '100%'
         }
       }));
@@ -1537,7 +1674,7 @@ createListComponent({
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1642,7 +1779,8 @@ createGridComponent({
     var columnCount = _ref7.columnCount,
         columnWidth = _ref7.columnWidth,
         width = _ref7.width;
-    var maxOffset = Math.max(0, Math.min(columnCount * columnWidth - width, columnIndex * columnWidth));
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
     var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
 
     if (align === 'smart') {
@@ -1661,13 +1799,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
           return scrollLeft;
-        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1679,7 +1831,8 @@ createGridComponent({
     var rowHeight = _ref8.rowHeight,
         height = _ref8.height,
         rowCount = _ref8.rowCount;
-    var maxOffset = Math.max(0, Math.min(rowCount * rowHeight - height, rowIndex * rowHeight));
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
     var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
 
     if (align === 'smart') {
@@ -1698,13 +1851,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollTop >= minOffset && scrollTop <= maxOffset) {
           return scrollTop;
-        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1722,7 +1889,9 @@ createGridComponent({
         columnCount = _ref10.columnCount,
         width = _ref10.width;
     var left = startIndex * columnWidth;
-    return Math.max(0, Math.min(columnCount - 1, startIndex + Math.floor((width + (scrollLeft - left)) / columnWidth)));
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
   },
   getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
     var rowHeight = _ref11.rowHeight,
@@ -1733,8 +1902,10 @@ createGridComponent({
     var rowHeight = _ref12.rowHeight,
         rowCount = _ref12.rowCount,
         height = _ref12.height;
-    var left = startIndex * rowHeight;
-    return Math.max(0, Math.min(rowCount - 1, startIndex + Math.floor((height + (scrollTop - left)) / rowHeight)));
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1759,13 +1930,11 @@ var FixedSizeList =
 /*#__PURE__*/
 createListComponent({
   getItemOffset: function getItemOffset(_ref, index) {
-    var itemSize = _ref.itemSize,
-        size = _ref.size;
+    var itemSize = _ref.itemSize;
     return index * itemSize;
   },
   getItemSize: function getItemSize(_ref2, index) {
-    var itemSize = _ref2.itemSize,
-        size = _ref2.size;
+    var itemSize = _ref2.itemSize;
     return itemSize;
   },
   getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
@@ -1783,7 +1952,8 @@ createListComponent({
     // TODO Deprecate direction "horizontal"
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var size = isHorizontal ? width : height;
-    var maxOffset = Math.max(0, Math.min(itemCount * itemSize - size, index * itemSize));
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
+    var maxOffset = Math.min(lastItemOffset, index * itemSize);
     var minOffset = Math.max(0, index * itemSize - size + itemSize);
 
     if (align === 'smart') {
@@ -1802,13 +1972,25 @@ createListComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        {
+          // "Centered" offset is usually the average of the min and max.
+          // But near the edges of the list, this doesn't hold true.
+          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+          if (middleOffset < Math.ceil(size / 2)) {
+            return 0; // near the beginning
+          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+            return lastItemOffset; // near the end
+          } else {
+            return middleOffset;
+          }
+        }
 
       case 'auto':
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1832,7 +2014,9 @@ createListComponent({
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var offset = startIndex * itemSize;
     var size = isHorizontal ? width : height;
-    return Math.max(0, Math.min(itemCount - 1, startIndex + Math.floor((size + (scrollOffset - offset)) / itemSize)));
+    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1892,3 +2076,4 @@ exports.FixedSizeGrid = FixedSizeGrid;
 exports.FixedSizeList = FixedSizeList;
 exports.areEqual = areEqual;
 exports.shouldComponentUpdate = shouldComponentUpdate;
+//# sourceMappingURL=index.cjs.js.map
diff --git a/vendor/react-window/dist/index.esm.js b/vendor/react-window/dist/index.esm.js
index 19b1884d12ca..9cf49546c891 100644
--- a/vendor/react-window/dist/index.esm.js
+++ b/vendor/react-window/dist/index.esm.js
@@ -54,6 +54,50 @@ function getScrollbarSize(recalculate) {
 
   return size;
 }
+var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
 
 var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
 
@@ -67,6 +111,7 @@ var defaultItemKey = function defaultItemKey(_ref) {
 
 
 var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
 var devWarningsTagName = null;
 
 if (process.env.NODE_ENV !== 'production') {
@@ -74,6 +119,9 @@ if (process.env.NODE_ENV !== 'production') {
     devWarningsOverscanCount =
     /*#__PURE__*/
     new WeakSet();
+    devWarningsOverscanRowsColumnsCount =
+    /*#__PURE__*/
+    new WeakSet();
     devWarningsTagName =
     /*#__PURE__*/
     new WeakSet();
@@ -178,9 +226,11 @@ function createGridComponent(_ref2) {
 
       _this._onScroll = function (event) {
         var _event$currentTarget = event.currentTarget,
+            clientHeight = _event$currentTarget.clientHeight,
             clientWidth = _event$currentTarget.clientWidth,
             scrollLeft = _event$currentTarget.scrollLeft,
             scrollTop = _event$currentTarget.scrollTop,
+            scrollHeight = _event$currentTarget.scrollHeight,
             scrollWidth = _event$currentTarget.scrollWidth;
 
         // Force flush sync for scroll updates to reduce visual checkerboarding.
@@ -193,25 +243,33 @@ function createGridComponent(_ref2) {
               return null;
             }
 
-            var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-            // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-            // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+            var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
 
             var calculatedScrollLeft = scrollLeft;
 
             if (direction === 'rtl') {
-              if (scrollLeft <= 0) {
-                calculatedScrollLeft = -scrollLeft;
-              } else {
-                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+              switch (getRTLOffsetType()) {
+                case 'negative':
+                  calculatedScrollLeft = -scrollLeft;
+                  break;
+
+                case 'positive-descending':
+                  calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                  break;
               }
-            }
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
 
+            calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
+            var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
             return {
               isScrolling: true,
               horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
               scrollLeft: calculatedScrollLeft,
-              scrollTop: scrollTop,
+              scrollTop: calculatedScrollTop,
               verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
               scrollUpdateWasRequested: false
             };
@@ -337,26 +395,55 @@ function createGridComponent(_ref2) {
           initialScrollLeft = _this$props3.initialScrollLeft,
           initialScrollTop = _this$props3.initialScrollTop;
 
-      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
-        this._outerRef.scrollLeft = initialScrollLeft;
-      }
+      if (this._outerRef != null) {
+        var outerRef = this._outerRef;
 
-      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
-        this._outerRef.scrollTop = initialScrollTop;
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
       }
 
       this._callPropsCallbacks();
     };
 
     _proto.componentDidUpdate = function componentDidUpdate() {
+      var direction = this.props.direction;
       var _this$state2 = this.state,
           scrollLeft = _this$state2.scrollLeft,
           scrollTop = _this$state2.scrollTop,
           scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
 
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
-        this._outerRef.scrollLeft = scrollLeft;
-        this._outerRef.scrollTop = scrollTop;
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        var outerRef = this._outerRef;
+
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
       }
 
       this._callPropsCallbacks();
@@ -440,7 +527,7 @@ function createGridComponent(_ref2) {
         ref: innerRef,
         style: {
           height: estimatedTotalHeight,
-          pointerEvents: isScrolling ? 'none' : '',
+          pointerEvents: isScrolling ? 'none' : undefined,
           width: estimatedTotalWidth
         }
       }));
@@ -490,6 +577,7 @@ function createGridComponent(_ref2) {
     _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
       var _this$props6 = this.props,
           columnCount = _this$props6.columnCount,
+          overscanColumnCount = _this$props6.overscanColumnCount,
           overscanColumnsCount = _this$props6.overscanColumnsCount,
           overscanCount = _this$props6.overscanCount,
           rowCount = _this$props6.rowCount;
@@ -497,7 +585,7 @@ function createGridComponent(_ref2) {
           horizontalScrollDirection = _this$state4.horizontalScrollDirection,
           isScrolling = _this$state4.isScrolling,
           scrollLeft = _this$state4.scrollLeft;
-      var overscanCountResolved = overscanColumnsCount || overscanCount || 1;
+      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -516,13 +604,14 @@ function createGridComponent(_ref2) {
       var _this$props7 = this.props,
           columnCount = _this$props7.columnCount,
           overscanCount = _this$props7.overscanCount,
+          overscanRowCount = _this$props7.overscanRowCount,
           overscanRowsCount = _this$props7.overscanRowsCount,
           rowCount = _this$props7.rowCount;
       var _this$state5 = this.state,
           isScrolling = _this$state5.isScrolling,
           verticalScrollDirection = _this$state5.verticalScrollDirection,
           scrollTop = _this$state5.scrollTop;
-      var overscanCountResolved = overscanRowsCount || overscanCount || 1;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -551,7 +640,9 @@ var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
       height = _ref5.height,
       innerTagName = _ref5.innerTagName,
       outerTagName = _ref5.outerTagName,
+      overscanColumnsCount = _ref5.overscanColumnsCount,
       overscanCount = _ref5.overscanCount,
+      overscanRowsCount = _ref5.overscanRowsCount,
       width = _ref5.width;
   var instance = _ref6.instance;
 
@@ -559,7 +650,14 @@ var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
     if (typeof overscanCount === 'number') {
       if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
         devWarningsOverscanCount.add(instance);
-        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnsCount and overscanRowsCount props instead.');
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
+      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
       }
     }
 
@@ -768,7 +866,11 @@ var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemT
     default:
       if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
         return scrollOffset;
-      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
         return minOffset;
       } else {
         return maxOffset;
@@ -1037,20 +1139,27 @@ function createListComponent(_ref) {
               return null;
             }
 
-            var direction = _this.props.direction; // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-            // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
-            // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
-
+            var direction = _this.props.direction;
             var scrollOffset = scrollLeft;
 
             if (direction === 'rtl') {
-              if (scrollLeft <= 0) {
-                scrollOffset = -scrollOffset;
-              } else {
-                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+              // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+              // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+              switch (getRTLOffsetType()) {
+                case 'negative':
+                  scrollOffset = -scrollLeft;
+                  break;
+
+                case 'positive-descending':
+                  scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                  break;
               }
-            }
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
 
+
+            scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
             return {
               isScrolling: true,
               scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
@@ -1058,11 +1167,14 @@ function createListComponent(_ref) {
               scrollUpdateWasRequested: false
             };
           }, _this._resetIsScrollingDebounced);
-        });
-      };
+        };
+      });
 
       _this._onScrollVertical = function (event) {
-        var scrollTop = event.currentTarget.scrollTop;
+        var _event$currentTarget2 = event.currentTarget,
+            clientHeight = _event$currentTarget2.clientHeight,
+            scrollHeight = _event$currentTarget2.scrollHeight,
+            scrollTop = _event$currentTarget2.scrollTop;
 
         // Force flush sync for scroll updates to reduce visual checkerboarding.
         flushSync(() => {
@@ -1072,17 +1184,19 @@ function createListComponent(_ref) {
               // In which case we don't need to trigger another render,
               // And we don't want to update state.isScrolling.
               return null;
-            }
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
 
+
+            var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
             return {
               isScrolling: true,
-              scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
-              scrollOffset: scrollTop,
+              scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+              scrollOffset: scrollOffset,
               scrollUpdateWasRequested: false
             };
           }, _this._resetIsScrollingDebounced);
-        });
-      };
+        };
+      });
 
       _this._outerRefSetter = function (ref) {
         var outerRef = _this.props.outerRef;
@@ -1158,12 +1272,13 @@ function createListComponent(_ref) {
           initialScrollOffset = _this$props2.initialScrollOffset,
           layout = _this$props2.layout;
 
-      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
-        // TODO Deprecate direction "horizontal"
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
         if (direction === 'horizontal' || layout === 'horizontal') {
-          this._outerRef.scrollLeft = initialScrollOffset;
+          outerRef.scrollLeft = initialScrollOffset;
         } else {
-          this._outerRef.scrollTop = initialScrollOffset;
+          outerRef.scrollTop = initialScrollOffset;
         }
       }
 
@@ -1178,12 +1293,34 @@ function createListComponent(_ref) {
           scrollOffset = _this$state.scrollOffset,
           scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
 
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
-        // TODO Deprecate direction "horizontal"
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
         if (direction === 'horizontal' || layout === 'horizontal') {
-          this._outerRef.scrollLeft = scrollOffset;
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+
+              default:
+                var clientWidth = outerRef.clientWidth,
+                    scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
         } else {
-          this._outerRef.scrollTop = scrollOffset;
+          outerRef.scrollTop = scrollOffset;
         }
       }
 
@@ -1259,7 +1396,7 @@ function createListComponent(_ref) {
         ref: innerRef,
         style: {
           height: isHorizontal ? '100%' : estimatedTotalSize,
-          pointerEvents: isScrolling ? 'none' : '',
+          pointerEvents: isScrolling ? 'none' : undefined,
           width: isHorizontal ? estimatedTotalSize : '100%'
         }
       }));
@@ -1541,7 +1678,7 @@ createListComponent({
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1646,7 +1783,8 @@ createGridComponent({
     var columnCount = _ref7.columnCount,
         columnWidth = _ref7.columnWidth,
         width = _ref7.width;
-    var maxOffset = Math.max(0, Math.min(columnCount * columnWidth - width, columnIndex * columnWidth));
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
     var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
 
     if (align === 'smart') {
@@ -1665,13 +1803,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
           return scrollLeft;
-        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1683,7 +1835,8 @@ createGridComponent({
     var rowHeight = _ref8.rowHeight,
         height = _ref8.height,
         rowCount = _ref8.rowCount;
-    var maxOffset = Math.max(0, Math.min(rowCount * rowHeight - height, rowIndex * rowHeight));
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
     var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
 
     if (align === 'smart') {
@@ -1702,13 +1855,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollTop >= minOffset && scrollTop <= maxOffset) {
           return scrollTop;
-        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1726,7 +1893,9 @@ createGridComponent({
         columnCount = _ref10.columnCount,
         width = _ref10.width;
     var left = startIndex * columnWidth;
-    return Math.max(0, Math.min(columnCount - 1, startIndex + Math.floor((width + (scrollLeft - left)) / columnWidth)));
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
   },
   getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
     var rowHeight = _ref11.rowHeight,
@@ -1737,8 +1906,10 @@ createGridComponent({
     var rowHeight = _ref12.rowHeight,
         rowCount = _ref12.rowCount,
         height = _ref12.height;
-    var left = startIndex * rowHeight;
-    return Math.max(0, Math.min(rowCount - 1, startIndex + Math.floor((height + (scrollTop - left)) / rowHeight)));
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1763,13 +1934,11 @@ var FixedSizeList =
 /*#__PURE__*/
 createListComponent({
   getItemOffset: function getItemOffset(_ref, index) {
-    var itemSize = _ref.itemSize,
-        size = _ref.size;
+    var itemSize = _ref.itemSize;
     return index * itemSize;
   },
   getItemSize: function getItemSize(_ref2, index) {
-    var itemSize = _ref2.itemSize,
-        size = _ref2.size;
+    var itemSize = _ref2.itemSize;
     return itemSize;
   },
   getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
@@ -1787,7 +1956,8 @@ createListComponent({
     // TODO Deprecate direction "horizontal"
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var size = isHorizontal ? width : height;
-    var maxOffset = Math.max(0, Math.min(itemCount * itemSize - size, index * itemSize));
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
+    var maxOffset = Math.min(lastItemOffset, index * itemSize);
     var minOffset = Math.max(0, index * itemSize - size + itemSize);
 
     if (align === 'smart') {
@@ -1806,13 +1976,25 @@ createListComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        {
+          // "Centered" offset is usually the average of the min and max.
+          // But near the edges of the list, this doesn't hold true.
+          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+          if (middleOffset < Math.ceil(size / 2)) {
+            return 0; // near the beginning
+          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+            return lastItemOffset; // near the end
+          } else {
+            return middleOffset;
+          }
+        }
 
       case 'auto':
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1836,7 +2018,9 @@ createListComponent({
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var offset = startIndex * itemSize;
     var size = isHorizontal ? width : height;
-    return Math.max(0, Math.min(itemCount - 1, startIndex + Math.floor((size + (scrollOffset - offset)) / itemSize)));
+    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1891,3 +2075,4 @@ function shouldComponentUpdate(nextProps, nextState) {
 }
 
 export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
+//# sourceMappingURL=index.esm.js.map
diff --git a/vendor/react-window/package.json b/vendor/react-window/package.json
index adaea80fdb37..d10a25a04ffd 100644
--- a/vendor/react-window/package.json
+++ b/vendor/react-window/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-window",
-  "version": "1.8.0",
+  "version": "1.8.5",
   "description":
     "React components for efficiently rendering large, scrollable lists and tabular data",
   "author":
@@ -91,7 +91,7 @@
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
-    "flow-bin": "^0.80.0",
+    "flow-bin": "^0.103.0",
     "gh-pages": "^1.1.0",
     "lint-staged": "^7.0.5",
     "prettier": "^1.12.1",
@@ -103,6 +103,8 @@
     "rollup": "^1.4.1",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1"
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.0"
   }
 }
diff --git a/vendor/react-window/src/FixedSizeGrid.js b/vendor/react-window/src/FixedSizeGrid.js
index 452536a9df4b..685ad3347820 100644
--- a/vendor/react-window/src/FixedSizeGrid.js
+++ b/vendor/react-window/src/FixedSizeGrid.js
@@ -31,12 +31,13 @@ const FixedSizeGrid = createGridComponent({
     instanceProps: typeof undefined,
     scrollbarSize: number
   ): number => {
-    const maxOffset = Math.max(
+    const lastColumnOffset = Math.max(
       0,
-      Math.min(
-        columnCount * ((columnWidth: any): number) - width,
-        columnIndex * ((columnWidth: any): number)
-      )
+      columnCount * ((columnWidth: any): number) - width
+    );
+    const maxOffset = Math.min(
+      lastColumnOffset,
+      columnIndex * ((columnWidth: any): number)
     );
     const minOffset = Math.max(
       0,
@@ -60,12 +61,27 @@ const FixedSizeGrid = createGridComponent({
       case 'end':
         return minOffset;
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
       case 'auto':
       default:
         if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
           return scrollLeft;
-        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -81,12 +97,13 @@ const FixedSizeGrid = createGridComponent({
     instanceProps: typeof undefined,
     scrollbarSize: number
   ): number => {
-    const maxOffset = Math.max(
+    const lastRowOffset = Math.max(
       0,
-      Math.min(
-        rowCount * ((rowHeight: any): number) - height,
-        rowIndex * ((rowHeight: any): number)
-      )
+      rowCount * ((rowHeight: any): number) - height
+    );
+    const maxOffset = Math.min(
+      lastRowOffset,
+      rowIndex * ((rowHeight: any): number)
     );
     const minOffset = Math.max(
       0,
@@ -110,12 +127,27 @@ const FixedSizeGrid = createGridComponent({
       case 'end':
         return minOffset;
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
       case 'auto':
       default:
         if (scrollTop >= minOffset && scrollTop <= maxOffset) {
           return scrollTop;
-        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -141,14 +173,14 @@ const FixedSizeGrid = createGridComponent({
     scrollLeft: number
   ): number => {
     const left = startIndex * ((columnWidth: any): number);
+    const numVisibleColumns = Math.ceil(
+      (width + scrollLeft - left) / ((columnWidth: any): number)
+    );
     return Math.max(
       0,
       Math.min(
         columnCount - 1,
-        startIndex +
-          Math.floor(
-            (width + (scrollLeft - left)) / ((columnWidth: any): number)
-          )
+        startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
       )
     );
   },
@@ -167,13 +199,15 @@ const FixedSizeGrid = createGridComponent({
     startIndex: number,
     scrollTop: number
   ): number => {
-    const left = startIndex * ((rowHeight: any): number);
+    const top = startIndex * ((rowHeight: any): number);
+    const numVisibleRows = Math.ceil(
+      (height + scrollTop - top) / ((rowHeight: any): number)
+    );
     return Math.max(
       0,
       Math.min(
         rowCount - 1,
-        startIndex +
-          Math.floor((height + (scrollTop - left)) / ((rowHeight: any): number))
+        startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
       )
     );
   },
diff --git a/vendor/react-window/src/FixedSizeList.js b/vendor/react-window/src/FixedSizeList.js
index 991f9004305b..0e0fc305bc30 100644
--- a/vendor/react-window/src/FixedSizeList.js
+++ b/vendor/react-window/src/FixedSizeList.js
@@ -5,10 +5,10 @@ import createListComponent from './createListComponent';
 import type { Props, ScrollToAlign } from './createListComponent';
 
 const FixedSizeList = createListComponent({
-  getItemOffset: ({ itemSize, size }: Props<any>, index: number): number =>
+  getItemOffset: ({ itemSize }: Props<any>, index: number): number =>
     index * ((itemSize: any): number),
 
-  getItemSize: ({ itemSize, size }: Props<any>, index: number): number =>
+  getItemSize: ({ itemSize }: Props<any>, index: number): number =>
     ((itemSize: any): number),
 
   getEstimatedTotalSize: ({ itemCount, itemSize }: Props<any>) =>
@@ -23,12 +23,13 @@ const FixedSizeList = createListComponent({
     // TODO Deprecate direction "horizontal"
     const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     const size = (((isHorizontal ? width : height): any): number);
-    const maxOffset = Math.max(
+    const lastItemOffset = Math.max(
       0,
-      Math.min(
-        itemCount * ((itemSize: any): number) - size,
-        index * ((itemSize: any): number)
-      )
+      itemCount * ((itemSize: any): number) - size
+    );
+    const maxOffset = Math.min(
+      lastItemOffset,
+      index * ((itemSize: any): number)
     );
     const minOffset = Math.max(
       0,
@@ -51,13 +52,25 @@ const FixedSizeList = createListComponent({
         return maxOffset;
       case 'end':
         return minOffset;
-      case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'center': {
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(size / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+          return lastItemOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+      }
       case 'auto':
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -83,14 +96,14 @@ const FixedSizeList = createListComponent({
     const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     const offset = startIndex * ((itemSize: any): number);
     const size = (((isHorizontal ? width : height): any): number);
+    const numVisibleItems = Math.ceil(
+      (size + scrollOffset - offset) / ((itemSize: any): number)
+    );
     return Math.max(
       0,
       Math.min(
         itemCount - 1,
-        startIndex +
-          Math.floor(
-            (size + (scrollOffset - offset)) / ((itemSize: any): number)
-          )
+        startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
       )
     );
   },
diff --git a/vendor/react-window/src/VariableSizeGrid.js b/vendor/react-window/src/VariableSizeGrid.js
index a1273e198e0d..46d59521f197 100644
--- a/vendor/react-window/src/VariableSizeGrid.js
+++ b/vendor/react-window/src/VariableSizeGrid.js
@@ -274,7 +274,11 @@ const getOffsetForIndexAndAlignment = (
     default:
       if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
         return scrollOffset;
-      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
         return minOffset;
       } else {
         return maxOffset;
diff --git a/vendor/react-window/src/VariableSizeList.js b/vendor/react-window/src/VariableSizeList.js
index cebadc663eb2..f4ad10323101 100644
--- a/vendor/react-window/src/VariableSizeList.js
+++ b/vendor/react-window/src/VariableSizeList.js
@@ -227,7 +227,7 @@ const VariableSizeList = createListComponent({
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
diff --git a/vendor/react-window/src/createGridComponent.js b/vendor/react-window/src/createGridComponent.js
index c72af855c7b2..f2895b60a4ea 100644
--- a/vendor/react-window/src/createGridComponent.js
+++ b/vendor/react-window/src/createGridComponent.js
@@ -3,7 +3,7 @@
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import { cancelTimeout, requestTimeout } from './timer';
-import { getScrollbarSize } from './domHelpers';
+import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
 
@@ -46,6 +46,22 @@ type OnScrollCallback = ({
 type ScrollEvent = SyntheticEvent<HTMLDivElement>;
 type ItemStyleCache = { [key: string]: Object };
 
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
 export type Props<T> = {|
   children: RenderComponent<T>,
   className?: string,
@@ -56,7 +72,7 @@ export type Props<T> = {|
   initialScrollLeft?: number,
   initialScrollTop?: number,
   innerRef?: any,
-  innerElementType?: React$ElementType,
+  innerElementType?: string | React$AbstractComponent<InnerProps, any>,
   innerTagName?: string, // deprecated
   itemData: T,
   itemKey?: (params: {|
@@ -67,11 +83,13 @@ export type Props<T> = {|
   onItemsRendered?: OnItemsRenderedCallback,
   onScroll?: OnScrollCallback,
   outerRef?: any,
-  outerElementType?: React$ElementType,
+  outerElementType?: string | React$AbstractComponent<OuterProps, any>,
   outerTagName?: string, // deprecated
-  overscanColumnsCount?: number,
+  overscanColumnCount?: number,
+  overscanColumnsCount?: number, // deprecated
   overscanCount?: number, // deprecated
-  overscanRowsCount?: number,
+  overscanRowCount?: number,
+  overscanRowsCount?: number, // deprecated
   rowCount: number,
   rowHeight: itemSize,
   style?: Object,
@@ -130,10 +148,12 @@ const defaultItemKey = ({ columnIndex, data, rowIndex }) =>
 // In DEV mode, this Set helps us only log a warning once per component instance.
 // This avoids spamming the console every time a render happens.
 let devWarningsOverscanCount = null;
+let devWarningsOverscanRowsColumnsCount = null;
 let devWarningsTagName = null;
 if (process.env.NODE_ENV !== 'production') {
   if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
     devWarningsOverscanCount = new WeakSet();
+    devWarningsOverscanRowsColumnsCount = new WeakSet();
     devWarningsTagName = new WeakSet();
   }
 }
@@ -320,21 +340,47 @@ export default function createGridComponent({
 
     componentDidMount() {
       const { initialScrollLeft, initialScrollTop } = this.props;
-      if (typeof initialScrollLeft === 'number' && this._outerRef != null) {
-        ((this._outerRef: any): HTMLDivElement).scrollLeft = initialScrollLeft;
-      }
-      if (typeof initialScrollTop === 'number' && this._outerRef != null) {
-        ((this._outerRef: any): HTMLDivElement).scrollTop = initialScrollTop;
+
+      if (this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
       }
 
       this._callPropsCallbacks();
     }
 
     componentDidUpdate() {
+      const { direction } = this.props;
       const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
-        ((this._outerRef: any): HTMLDivElement).scrollLeft = scrollLeft;
-        ((this._outerRef: any): HTMLDivElement).scrollTop = scrollTop;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+            default:
+              const { clientWidth, scrollWidth } = outerRef;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
       }
 
       this._callPropsCallbacks();
@@ -432,7 +478,7 @@ export default function createGridComponent({
           ref: innerRef,
           style: {
             height: estimatedTotalHeight,
-            pointerEvents: isScrolling ? 'none' : '',
+            pointerEvents: isScrolling ? 'none' : undefined,
             width: estimatedTotalWidth,
           },
         })
@@ -586,6 +632,7 @@ export default function createGridComponent({
     _getHorizontalRangeToRender(): [number, number, number, number] {
       const {
         columnCount,
+        overscanColumnCount,
         overscanColumnsCount,
         overscanCount,
         rowCount,
@@ -593,7 +640,7 @@ export default function createGridComponent({
       const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
 
       const overscanCountResolved: number =
-        overscanColumnsCount || overscanCount || 1;
+        overscanColumnCount || overscanColumnsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -634,13 +681,14 @@ export default function createGridComponent({
       const {
         columnCount,
         overscanCount,
+        overscanRowCount,
         overscanRowsCount,
         rowCount,
       } = this.props;
       const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
 
       const overscanCountResolved: number =
-        overscanRowsCount || overscanCount || 1;
+        overscanRowCount || overscanRowsCount || overscanCount || 1;
 
       if (columnCount === 0 || rowCount === 0) {
         return [0, 0, 0, 0];
@@ -679,9 +727,11 @@ export default function createGridComponent({
 
     _onScroll = (event: ScrollEvent): void => {
       const {
+        clientHeight,
         clientWidth,
         scrollLeft,
         scrollTop,
+        scrollHeight,
         scrollWidth,
       } = event.currentTarget;
       this.setState(prevState => {
@@ -697,24 +747,38 @@ export default function createGridComponent({
 
         const { direction } = this.props;
 
-        // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-        // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-        // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+        // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
         let calculatedScrollLeft = scrollLeft;
         if (direction === 'rtl') {
-          if (scrollLeft <= 0) {
-            calculatedScrollLeft = -scrollLeft;
-          } else {
-            calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              calculatedScrollLeft = -scrollLeft;
+              break;
+            case 'positive-descending':
+              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         }
 
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        calculatedScrollLeft = Math.max(
+          0,
+          Math.min(calculatedScrollLeft, scrollWidth - clientWidth)
+        );
+        const calculatedScrollTop = Math.max(
+          0,
+          Math.min(scrollTop, scrollHeight - clientHeight)
+        );
+
         return {
           isScrolling: true,
           horizontalScrollDirection:
             prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
           scrollLeft: calculatedScrollLeft,
-          scrollTop,
+          scrollTop: calculatedScrollTop,
           verticalScrollDirection:
             prevState.scrollTop < scrollTop ? 'forward' : 'backward',
           scrollUpdateWasRequested: false,
@@ -768,7 +832,9 @@ const validateSharedProps = (
     height,
     innerTagName,
     outerTagName,
+    overscanColumnsCount,
     overscanCount,
+    overscanRowsCount,
     width,
   }: Props<any>,
   { instance }: State
@@ -779,7 +845,23 @@ const validateSharedProps = (
         devWarningsOverscanCount.add(instance);
         console.warn(
           'The overscanCount prop has been deprecated. ' +
-            'Please use the overscanColumnsCount and overscanRowsCount props instead.'
+            'Please use the overscanColumnCount and overscanRowCount props instead.'
+        );
+      }
+    }
+
+    if (
+      typeof overscanColumnsCount === 'number' ||
+      typeof overscanRowsCount === 'number'
+    ) {
+      if (
+        devWarningsOverscanRowsColumnsCount &&
+        !devWarningsOverscanRowsColumnsCount.has(instance)
+      ) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn(
+          'The overscanColumnsCount and overscanRowsCount props have been deprecated. ' +
+            'Please use the overscanColumnCount and overscanRowCount props instead.'
         );
       }
     }
diff --git a/vendor/react-window/src/createListComponent.js b/vendor/react-window/src/createListComponent.js
index 86696a0b803e..ae7851e9f402 100644
--- a/vendor/react-window/src/createListComponent.js
+++ b/vendor/react-window/src/createListComponent.js
@@ -3,6 +3,7 @@
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import { cancelTimeout, requestTimeout } from './timer';
+import { getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
 
@@ -38,6 +39,22 @@ type onScrollCallback = ({
 type ScrollEvent = SyntheticEvent<HTMLDivElement>;
 type ItemStyleCache = { [index: number]: Object };
 
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
 export type Props<T> = {|
   children: RenderComponent<T>,
   className?: string,
@@ -45,7 +62,7 @@ export type Props<T> = {|
   height: number | string,
   initialScrollOffset?: number,
   innerRef?: any,
-  innerElementType?: React$ElementType,
+  innerElementType?: string | React$AbstractComponent<InnerProps, any>,
   innerTagName?: string, // deprecated
   itemCount: number,
   itemData: T,
@@ -55,7 +72,7 @@ export type Props<T> = {|
   onItemsRendered?: onItemsRenderedCallback,
   onScroll?: onScrollCallback,
   outerRef?: any,
-  outerElementType?: React$ElementType,
+  outerElementType?: string | React$AbstractComponent<OuterProps, any>,
   outerTagName?: string, // deprecated
   overscanCount: number,
   style?: Object,
@@ -215,14 +232,13 @@ export default function createListComponent({
     componentDidMount() {
       const { direction, initialScrollOffset, layout } = this.props;
 
-      if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
         // TODO Deprecate direction "horizontal"
         if (direction === 'horizontal' || layout === 'horizontal') {
-          ((this
-            ._outerRef: any): HTMLDivElement).scrollLeft = initialScrollOffset;
+          outerRef.scrollLeft = initialScrollOffset;
         } else {
-          ((this
-            ._outerRef: any): HTMLDivElement).scrollTop = initialScrollOffset;
+          outerRef.scrollTop = initialScrollOffset;
         }
       }
 
@@ -233,12 +249,32 @@ export default function createListComponent({
       const { direction, layout } = this.props;
       const { scrollOffset, scrollUpdateWasRequested } = this.state;
 
-      if (scrollUpdateWasRequested && this._outerRef !== null) {
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+
         // TODO Deprecate direction "horizontal"
         if (direction === 'horizontal' || layout === 'horizontal') {
-          ((this._outerRef: any): HTMLDivElement).scrollLeft = scrollOffset;
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                const { clientWidth, scrollWidth } = outerRef;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
         } else {
-          ((this._outerRef: any): HTMLDivElement).scrollTop = scrollOffset;
+          outerRef.scrollTop = scrollOffset;
         }
       }
 
@@ -326,7 +362,7 @@ export default function createListComponent({
           ref: innerRef,
           style: {
             height: isHorizontal ? '100%' : estimatedTotalSize,
-            pointerEvents: isScrolling ? 'none' : '',
+            pointerEvents: isScrolling ? 'none' : undefined,
             width: isHorizontal ? estimatedTotalSize : '100%',
           },
         })
@@ -496,18 +532,28 @@ export default function createListComponent({
 
         const { direction } = this.props;
 
-        // HACK According to the spec, scrollLeft should be negative for RTL aligned elements.
-        // Chrome does not seem to adhere; its scrolLeft values are positive (measured relative to the left).
-        // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
         let scrollOffset = scrollLeft;
         if (direction === 'rtl') {
-          if (scrollLeft <= 0) {
-            scrollOffset = -scrollOffset;
-          } else {
-            scrollOffset = scrollWidth - clientWidth - scrollLeft;
+          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              scrollOffset = -scrollLeft;
+              break;
+            case 'positive-descending':
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         }
 
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        scrollOffset = Math.max(
+          0,
+          Math.min(scrollOffset, scrollWidth - clientWidth)
+        );
+
         return {
           isScrolling: true,
           scrollDirection:
@@ -519,7 +565,7 @@ export default function createListComponent({
     };
 
     _onScrollVertical = (event: ScrollEvent): void => {
-      const { scrollTop } = event.currentTarget;
+      const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
       this.setState(prevState => {
         if (prevState.scrollOffset === scrollTop) {
           // Scroll position may have been updated by cDM/cDU,
@@ -528,11 +574,17 @@ export default function createListComponent({
           return null;
         }
 
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        const scrollOffset = Math.max(
+          0,
+          Math.min(scrollTop, scrollHeight - clientHeight)
+        );
+
         return {
           isScrolling: true,
           scrollDirection:
-            prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
-          scrollOffset: scrollTop,
+            prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset,
           scrollUpdateWasRequested: false,
         };
       }, this._resetIsScrollingDebounced);
diff --git a/vendor/react-window/src/domHelpers.js b/vendor/react-window/src/domHelpers.js
index 830aba68d79a..1bdc9dddc10a 100644
--- a/vendor/react-window/src/domHelpers.js
+++ b/vendor/react-window/src/domHelpers.js
@@ -20,3 +20,53 @@ export function getScrollbarSize(recalculate?: boolean = false): number {
 
   return size;
 }
+
+export type RTLOffsetType =
+  | 'negative'
+  | 'positive-descending'
+  | 'positive-ascending';
+
+let cachedRTLResult: RTLOffsetType | null = null;
+
+// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
+  if (cachedRTLResult === null || recalculate) {
+    const outerDiv = document.createElement('div');
+    const outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+
+    const innerDiv = document.createElement('div');
+    const innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+
+    outerDiv.appendChild(innerDiv);
+
+    ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    ((document.body: any): HTMLBodyElement).removeChild(outerDiv);
+
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
diff --git a/yarn.lock b/yarn.lock
index 616e6e264520..76c0f0e882c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -766,9 +766,9 @@
     regenerator-runtime "^0.12.0"
 
 "@babel/runtime@^7.0.0":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
-  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
+  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
   dependencies:
     regenerator-runtime "^0.13.2"
 
@@ -5522,10 +5522,10 @@ flatstr@^1.0.9:
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.9.tgz#0950d56fec02de1030c1311847ecd58c25690eb9"
   integrity sha512-qFlJnOBWDfIaunF54/lBqNKmXOI0HqNhu+mHkLmbaBXlS71PUd9OjFOdyevHt/aHoHB1+eW7eKHgRKOG5aHSpw==
 
-flow-bin@^0.97.0:
-  version "0.97.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.97.0.tgz#036ffcfc27503367a9d906ec9d843a0aa6f6bb83"
-  integrity sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w==
+flow-bin@^0.103.0:
+  version "0.103.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.103.0.tgz#7aec510d85e1c1b0f2b912bb988337d70035cb0f"
+  integrity sha512-Y3yrnE5ICN1Kl/y10BwjA3JSuS+gt4jVPNyUNCZb0RqmkdssMrW8QNNysJYvhgAY/JBJH8Qv7NVUf11MiwfSlA==
 
 fluent-syntax@0.10.0:
   version "0.10.0"
@@ -8250,9 +8250,9 @@ mem@^4.0.0:
     p-is-promise "^2.0.0"
 
 "memoize-one@>=3.1.1 <6":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
-  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
+  integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
 
 memoize-one@^3.1.1:
   version "3.1.1"
@@ -10183,9 +10183,9 @@ regenerator-runtime@^0.12.0:
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
 regenerator-runtime@^0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
-  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
 regenerator-runtime@^0.9.5:
   version "0.9.6"

From ffb19346c72e965e5c6dd66bf8bdd835a4e4ff79 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Jul 2019 11:19:53 -0700
Subject: [PATCH 762/814] NPM packages 4.0.0-alpha.0 -> 4.0.0-alpha.1

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 2f4bd08239cc..f406c51c9d74 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 21a9bcca5536..92e61438ffcb 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {

From 1178d5725731e228e948e6bec69f758d9e378b81 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Jul 2019 07:46:19 -0700
Subject: [PATCH 763/814] Fixed a module resolution issue and a syntax error
 from a bad merge

---
 .gitignore                                    |  4 ++-
 package.json                                  |  1 -
 .../node_modules}/react-window/CHANGELOG.md   |  0
 .../node_modules}/react-window/LICENSE.md     |  0
 .../node_modules}/react-window/README.md      |  0
 .../react-window/dist/index-dev.umd.js        |  0
 .../react-window/dist/index-prod.umd.js       |  0
 .../react-window/dist/index.cjs.js            |  0
 .../react-window/dist/index.cjs.js.flow       |  0
 .../react-window/dist/index.esm.js            | 10 +++---
 .../react-window/dist/index.esm.js.flow       |  0
 .../node_modules}/react-window/package.json   |  0
 .../react-window/src/FixedSizeGrid.js         |  0
 .../react-window/src/FixedSizeList.js         |  0
 .../react-window/src/VariableSizeGrid.js      |  0
 .../react-window/src/VariableSizeList.js      |  0
 .../react-window/src/areEqual.js              |  0
 .../react-window/src/createGridComponent.js   |  0
 .../react-window/src/createListComponent.js   |  0
 .../react-window/src/domHelpers.js            |  0
 .../node_modules}/react-window/src/index.js   |  0
 .../react-window/src/shallowDiffers.js        |  0
 .../react-window/src/shouldComponentUpdate.js |  0
 .../node_modules}/react-window/src/timer.js   |  0
 yarn.lock                                     | 31 +++++--------------
 25 files changed, 17 insertions(+), 29 deletions(-)
 rename {vendor => src/node_modules}/react-window/CHANGELOG.md (100%)
 rename {vendor => src/node_modules}/react-window/LICENSE.md (100%)
 rename {vendor => src/node_modules}/react-window/README.md (100%)
 rename {vendor => src/node_modules}/react-window/dist/index-dev.umd.js (100%)
 rename {vendor => src/node_modules}/react-window/dist/index-prod.umd.js (100%)
 rename {vendor => src/node_modules}/react-window/dist/index.cjs.js (100%)
 rename {vendor => src/node_modules}/react-window/dist/index.cjs.js.flow (100%)
 rename {vendor => src/node_modules}/react-window/dist/index.esm.js (99%)
 rename {vendor => src/node_modules}/react-window/dist/index.esm.js.flow (100%)
 rename {vendor => src/node_modules}/react-window/package.json (100%)
 rename {vendor => src/node_modules}/react-window/src/FixedSizeGrid.js (100%)
 rename {vendor => src/node_modules}/react-window/src/FixedSizeList.js (100%)
 rename {vendor => src/node_modules}/react-window/src/VariableSizeGrid.js (100%)
 rename {vendor => src/node_modules}/react-window/src/VariableSizeList.js (100%)
 rename {vendor => src/node_modules}/react-window/src/areEqual.js (100%)
 rename {vendor => src/node_modules}/react-window/src/createGridComponent.js (100%)
 rename {vendor => src/node_modules}/react-window/src/createListComponent.js (100%)
 rename {vendor => src/node_modules}/react-window/src/domHelpers.js (100%)
 rename {vendor => src/node_modules}/react-window/src/index.js (100%)
 rename {vendor => src/node_modules}/react-window/src/shallowDiffers.js (100%)
 rename {vendor => src/node_modules}/react-window/src/shouldComponentUpdate.js (100%)
 rename {vendor => src/node_modules}/react-window/src/timer.js (100%)

diff --git a/.gitignore b/.gitignore
index bbe2c0a3d5a7..738522e01f4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,9 @@
 /packages/react-devtools-core/dist
 /shells/dev/dist
 build
-node_modules
+/node_modules
+/packages/react-devtools-core/node_modules/
+/packages/react-devtools/node_modules/
 npm-debug.log
 yarn-error.log
 .DS_Store
diff --git a/package.json b/package.json
index f5dd64b0dee1..55425c6b8c22 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,6 @@
     "react-is": "0.0.0-424099da6",
     "react-test-renderer": "^0.0.0-424099da6",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "./vendor/react-window",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
     "scheduler": "^0.0.0-424099da6",
diff --git a/vendor/react-window/CHANGELOG.md b/src/node_modules/react-window/CHANGELOG.md
similarity index 100%
rename from vendor/react-window/CHANGELOG.md
rename to src/node_modules/react-window/CHANGELOG.md
diff --git a/vendor/react-window/LICENSE.md b/src/node_modules/react-window/LICENSE.md
similarity index 100%
rename from vendor/react-window/LICENSE.md
rename to src/node_modules/react-window/LICENSE.md
diff --git a/vendor/react-window/README.md b/src/node_modules/react-window/README.md
similarity index 100%
rename from vendor/react-window/README.md
rename to src/node_modules/react-window/README.md
diff --git a/vendor/react-window/dist/index-dev.umd.js b/src/node_modules/react-window/dist/index-dev.umd.js
similarity index 100%
rename from vendor/react-window/dist/index-dev.umd.js
rename to src/node_modules/react-window/dist/index-dev.umd.js
diff --git a/vendor/react-window/dist/index-prod.umd.js b/src/node_modules/react-window/dist/index-prod.umd.js
similarity index 100%
rename from vendor/react-window/dist/index-prod.umd.js
rename to src/node_modules/react-window/dist/index-prod.umd.js
diff --git a/vendor/react-window/dist/index.cjs.js b/src/node_modules/react-window/dist/index.cjs.js
similarity index 100%
rename from vendor/react-window/dist/index.cjs.js
rename to src/node_modules/react-window/dist/index.cjs.js
diff --git a/vendor/react-window/dist/index.cjs.js.flow b/src/node_modules/react-window/dist/index.cjs.js.flow
similarity index 100%
rename from vendor/react-window/dist/index.cjs.js.flow
rename to src/node_modules/react-window/dist/index.cjs.js.flow
diff --git a/vendor/react-window/dist/index.esm.js b/src/node_modules/react-window/dist/index.esm.js
similarity index 99%
rename from vendor/react-window/dist/index.esm.js
rename to src/node_modules/react-window/dist/index.esm.js
index 9cf49546c891..21d001d66ce3 100644
--- a/vendor/react-window/dist/index.esm.js
+++ b/src/node_modules/react-window/dist/index.esm.js
@@ -6,6 +6,8 @@ import { createElement, PureComponent } from 'react';
 import { flushSync } from 'react-dom';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 
+console.warn('react-window index.esm.js');
+
 // Animation frame based implementation of setTimeout.
 // Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
 var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
@@ -1167,8 +1169,8 @@ function createListComponent(_ref) {
               scrollUpdateWasRequested: false
             };
           }, _this._resetIsScrollingDebounced);
-        };
-      });
+        });
+      };
 
       _this._onScrollVertical = function (event) {
         var _event$currentTarget2 = event.currentTarget,
@@ -1195,8 +1197,8 @@ function createListComponent(_ref) {
               scrollUpdateWasRequested: false
             };
           }, _this._resetIsScrollingDebounced);
-        };
-      });
+        });
+      };
 
       _this._outerRefSetter = function (ref) {
         var outerRef = _this.props.outerRef;
diff --git a/vendor/react-window/dist/index.esm.js.flow b/src/node_modules/react-window/dist/index.esm.js.flow
similarity index 100%
rename from vendor/react-window/dist/index.esm.js.flow
rename to src/node_modules/react-window/dist/index.esm.js.flow
diff --git a/vendor/react-window/package.json b/src/node_modules/react-window/package.json
similarity index 100%
rename from vendor/react-window/package.json
rename to src/node_modules/react-window/package.json
diff --git a/vendor/react-window/src/FixedSizeGrid.js b/src/node_modules/react-window/src/FixedSizeGrid.js
similarity index 100%
rename from vendor/react-window/src/FixedSizeGrid.js
rename to src/node_modules/react-window/src/FixedSizeGrid.js
diff --git a/vendor/react-window/src/FixedSizeList.js b/src/node_modules/react-window/src/FixedSizeList.js
similarity index 100%
rename from vendor/react-window/src/FixedSizeList.js
rename to src/node_modules/react-window/src/FixedSizeList.js
diff --git a/vendor/react-window/src/VariableSizeGrid.js b/src/node_modules/react-window/src/VariableSizeGrid.js
similarity index 100%
rename from vendor/react-window/src/VariableSizeGrid.js
rename to src/node_modules/react-window/src/VariableSizeGrid.js
diff --git a/vendor/react-window/src/VariableSizeList.js b/src/node_modules/react-window/src/VariableSizeList.js
similarity index 100%
rename from vendor/react-window/src/VariableSizeList.js
rename to src/node_modules/react-window/src/VariableSizeList.js
diff --git a/vendor/react-window/src/areEqual.js b/src/node_modules/react-window/src/areEqual.js
similarity index 100%
rename from vendor/react-window/src/areEqual.js
rename to src/node_modules/react-window/src/areEqual.js
diff --git a/vendor/react-window/src/createGridComponent.js b/src/node_modules/react-window/src/createGridComponent.js
similarity index 100%
rename from vendor/react-window/src/createGridComponent.js
rename to src/node_modules/react-window/src/createGridComponent.js
diff --git a/vendor/react-window/src/createListComponent.js b/src/node_modules/react-window/src/createListComponent.js
similarity index 100%
rename from vendor/react-window/src/createListComponent.js
rename to src/node_modules/react-window/src/createListComponent.js
diff --git a/vendor/react-window/src/domHelpers.js b/src/node_modules/react-window/src/domHelpers.js
similarity index 100%
rename from vendor/react-window/src/domHelpers.js
rename to src/node_modules/react-window/src/domHelpers.js
diff --git a/vendor/react-window/src/index.js b/src/node_modules/react-window/src/index.js
similarity index 100%
rename from vendor/react-window/src/index.js
rename to src/node_modules/react-window/src/index.js
diff --git a/vendor/react-window/src/shallowDiffers.js b/src/node_modules/react-window/src/shallowDiffers.js
similarity index 100%
rename from vendor/react-window/src/shallowDiffers.js
rename to src/node_modules/react-window/src/shallowDiffers.js
diff --git a/vendor/react-window/src/shouldComponentUpdate.js b/src/node_modules/react-window/src/shouldComponentUpdate.js
similarity index 100%
rename from vendor/react-window/src/shouldComponentUpdate.js
rename to src/node_modules/react-window/src/shouldComponentUpdate.js
diff --git a/vendor/react-window/src/timer.js b/src/node_modules/react-window/src/timer.js
similarity index 100%
rename from vendor/react-window/src/timer.js
rename to src/node_modules/react-window/src/timer.js
diff --git a/yarn.lock b/yarn.lock
index 76c0f0e882c1..e255c0ab2db1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -765,13 +765,6 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
-  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/template@^7.0.0", "@babel/template@^7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
@@ -8249,11 +8242,6 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^2.0.0"
 
-"memoize-one@>=3.1.1 <6":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
-  integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
-
 memoize-one@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -9934,6 +9922,14 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-devtools-core@4.0.0-alpha.0:
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.0.0-alpha.0.tgz#79d3cd89b456ca264d5f4da392a70c85ad870402"
+  integrity sha512-l9JgiXz7nj/u+oLmiri/4yRnddRY4F6bHtsUKQNrddYHilGAiA+3WXzeEhX2QAlXMEcmpXdcT5celmAFzLnycQ==
+  dependencies:
+    shell-quote "^1.6.1"
+    ws "^7"
+
 "react-dom-15@npm:react-dom@^15":
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -9984,12 +9980,6 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
-react-window@./vendor/react-window:
-  version "1.8.0"
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    memoize-one ">=3.1.1 <6"
-
 react@^0.0.0-424099da6:
   version "0.0.0-424099da6"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-424099da6.tgz#bf9155a10bb09783cfdc9e79438062af4b249861"
@@ -10182,11 +10172,6 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
-regenerator-runtime@^0.13.2:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
-  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
-
 regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"

From 13959aa8fb3576cee6b2e890ac3a2d149d752fc3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 11:13:30 -0700
Subject: [PATCH 764/814] Removed accidental log statement

---
 src/node_modules/react-window/dist/index.esm.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/node_modules/react-window/dist/index.esm.js b/src/node_modules/react-window/dist/index.esm.js
index 21d001d66ce3..fed3a77c2cdc 100644
--- a/src/node_modules/react-window/dist/index.esm.js
+++ b/src/node_modules/react-window/dist/index.esm.js
@@ -6,8 +6,6 @@ import { createElement, PureComponent } from 'react';
 import { flushSync } from 'react-dom';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 
-console.warn('react-window index.esm.js');
-
 // Animation frame based implementation of setTimeout.
 // Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
 var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';

From f74c89b145c3ed48b0e6e6185c915b96c7f161dc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 11:25:11 -0700
Subject: [PATCH 765/814] Misc improvements based on user feedback from Tim

* Added shadow to modals
* Change default "collapse new nodes" to be disabled rather than enabled
* Changed setting label "Collapse newly added components by default" to "Expand component tree by default"
* Change CSS media query for settings popup to show labels at smaller size
* Hide "Inspect the matching DOM element" button (since it doesnt really serve a purpose in standalone)
* Fixed small size bug for settings icon (viewbox of 20x20 instead of 24x24)
* bugfix: window.addEventListener/window.removeEventListener is not defined in Hermes.
---
 .../react-devtools-core/src/standalone.js     |  1 +
 src/backend/renderer.js                       | 12 +++--
 src/backend/views/Highlighter/index.js        | 39 +++++++++-----
 src/devtools/store.js                         |  5 +-
 src/devtools/views/ButtonIcon.js              | 13 ++---
 src/devtools/views/Components/Components.js   |  4 +-
 .../views/Components/SelectedElement.css      |  1 -
 .../views/Components/SelectedElement.js       | 22 ++++----
 src/devtools/views/DevTools.js                |  9 +++-
 src/devtools/views/Icon.js                    | 13 ++---
 src/devtools/views/ModalDialog.css            |  1 +
 src/devtools/views/Profiler/Profiler.js       |  2 +-
 .../views/Settings/ComponentsSettings.js      |  6 +--
 .../views/Settings/SettingsContext.js         |  1 +
 src/devtools/views/Settings/SettingsModal.css |  2 +
 src/devtools/views/Settings/SettingsModal.js  |  2 +-
 src/devtools/views/TabBar.css                 | 51 +++++++++++++------
 src/devtools/views/TabBar.js                  | 44 ++++++++++------
 src/devtools/views/root.css                   |  2 +
 19 files changed, 148 insertions(+), 82 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index b9fc4ff25a80..d3955fa1f11c 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -85,6 +85,7 @@ function reload() {
     root.render(
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
+        isBrowserMode: false,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b8309557f932..9f6f54d8f85b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -135,6 +135,12 @@ type ReactTypeOfSideEffectType = {|
   Placement: number,
 |};
 
+// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+const getCurrentTime =
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
 export function getInternalReactConstants(
   version: string
 ): {|
@@ -1645,7 +1651,7 @@ export function attach(
           currentCommitProfilingMetadata = {
             changeDescriptions: recordChangeDescriptions ? new Map() : null,
             durations: [],
-            commitTime: performance.now() - profilingStartTime,
+            commitTime: getCurrentTime() - profilingStartTime,
             interactions: Array.from(root.memoizedInteractions).map(
               (interaction: Interaction) => ({
                 ...interaction,
@@ -1689,7 +1695,7 @@ export function attach(
       currentCommitProfilingMetadata = {
         changeDescriptions: recordChangeDescriptions ? new Map() : null,
         durations: [],
-        commitTime: performance.now() - profilingStartTime,
+        commitTime: getCurrentTime() - profilingStartTime,
         interactions: Array.from(root.memoizedInteractions).map(
           (interaction: Interaction) => ({
             ...interaction,
@@ -2738,7 +2744,7 @@ export function attach(
     });
 
     isProfiling = true;
-    profilingStartTime = performance.now();
+    profilingStartTime = getCurrentTime();
     rootToCommitProfilingMetadataMap = new Map();
   }
 
diff --git a/src/backend/views/Highlighter/index.js b/src/backend/views/Highlighter/index.js
index 70d64e4cbc05..bd2cc5abdeb3 100644
--- a/src/backend/views/Highlighter/index.js
+++ b/src/backend/views/Highlighter/index.js
@@ -7,6 +7,11 @@ import { hideOverlay, showOverlay } from './Highlighter';
 
 import type { BackendBridge } from 'src/bridge';
 
+// This plug-in provides in-page highlighting of the selected element.
+// It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
+// It is not currently the mechanism used to highlight React Native views.
+// That is done by the React Native Inspector component.
+
 export default function setupHighlighter(
   bridge: BackendBridge,
   agent: Agent
@@ -21,25 +26,31 @@ export default function setupHighlighter(
   bridge.addListener('stopInspectingNative', stopInspectingNative);
 
   function startInspectingNative() {
-    window.addEventListener('click', onClick, true);
-    window.addEventListener('mousedown', onMouseEvent, true);
-    window.addEventListener('mouseover', onMouseEvent, true);
-    window.addEventListener('mouseup', onMouseEvent, true);
-    window.addEventListener('pointerdown', onPointerDown, true);
-    window.addEventListener('pointerover', onPointerOver, true);
-    window.addEventListener('pointerup', onPointerUp, true);
+    // This plug-in may run in non-DOM environments (e.g. React Native).
+    if (window && typeof window.addEventListener === 'function') {
+      window.addEventListener('click', onClick, true);
+      window.addEventListener('mousedown', onMouseEvent, true);
+      window.addEventListener('mouseover', onMouseEvent, true);
+      window.addEventListener('mouseup', onMouseEvent, true);
+      window.addEventListener('pointerdown', onPointerDown, true);
+      window.addEventListener('pointerover', onPointerOver, true);
+      window.addEventListener('pointerup', onPointerUp, true);
+    }
   }
 
   function stopInspectingNative() {
     hideOverlay();
 
-    window.removeEventListener('click', onClick, true);
-    window.removeEventListener('mousedown', onMouseEvent, true);
-    window.removeEventListener('mouseover', onMouseEvent, true);
-    window.removeEventListener('mouseup', onMouseEvent, true);
-    window.removeEventListener('pointerdown', onPointerDown, true);
-    window.removeEventListener('pointerover', onPointerOver, true);
-    window.removeEventListener('pointerup', onPointerUp, true);
+    // This plug-in may run in non-DOM environments (e.g. React Native).
+    if (window && typeof window.removeEventListener === 'function') {
+      window.removeEventListener('click', onClick, true);
+      window.removeEventListener('mousedown', onMouseEvent, true);
+      window.removeEventListener('mouseover', onMouseEvent, true);
+      window.removeEventListener('mouseup', onMouseEvent, true);
+      window.removeEventListener('pointerdown', onPointerDown, true);
+      window.removeEventListener('pointerover', onPointerOver, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+    }
   }
 
   function clearNativeElementHighlight() {
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 5b3e6a34d75f..adaccfe24b27 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -136,10 +136,9 @@ export default class Store extends EventEmitter<{|
       debug('constructor', 'subscribing to Bridge');
     }
 
-    // Default this setting to true unless otherwise specified.
     this._collapseNodesByDefault =
-      localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
-      'false';
+      localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===
+      'true';
 
     this._recordChangeDescriptions =
       localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
diff --git a/src/devtools/views/ButtonIcon.js b/src/devtools/views/ButtonIcon.js
index b24b35ceeb83..6c3887fe6664 100644
--- a/src/devtools/views/ButtonIcon.js
+++ b/src/devtools/views/ButtonIcon.js
@@ -208,12 +208,13 @@ const PATH_SEARCH = `
 `;
 
 const PATH_SETTINGS = `
-  M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
-  2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
-  0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
-  1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
-  1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
-  .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
+  M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
+  1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
+  2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
+  1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
+  1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
+  1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
+  3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
 `;
 
 const PATH_SUSPEND = `
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 2623041e0c4a..5960669a6221 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -13,7 +13,7 @@ import { SettingsModalContextController } from 'src/devtools/views/Settings/Sett
 
 import styles from './Components.css';
 
-function Components(_: {||}) {
+function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <SettingsModalContextController>
@@ -26,7 +26,7 @@ function Components(_: {||}) {
             <div className={styles.SelectedElementWrapper}>
               <NativeStyleContextController>
                 <Suspense fallback={<Loading />}>
-                  <SelectedElement />
+                  <SelectedElement isBrowserMode={isBrowserMode} />
                 </Suspense>
               </NativeStyleContextController>
             </div>
diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
index b6b0b6c62cfb..c6fa68ddb782 100644
--- a/src/devtools/views/Components/SelectedElement.css
+++ b/src/devtools/views/Components/SelectedElement.css
@@ -74,7 +74,6 @@
 }
 
 .CannotSuspendWarningMessage {
-  font-size: var(--font-size-sans-large);
 }
 
 .NotInStore {
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index ecc12028c94e..b851475344a6 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -30,9 +30,11 @@ import type { GetInspectedElementPath } from './InspectedElementContext';
 import type { Element, InspectedElement } from './types';
 import type { ElementType } from 'src/types';
 
-export type Props = {||};
+export type Props = {|
+  isBrowserMode?: boolean,
+|};
 
-export default function SelectedElement(_: Props) {
+export default function SelectedElement({ isBrowserMode }: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const { isFileLocationRequired, viewElementSourceFunction } = useContext(
@@ -186,13 +188,15 @@ export default function SelectedElement(_: Props) {
             <ButtonIcon type="suspend" />
           </Toggle>
         )}
-        <Button
-          className={styles.IconButton}
-          onClick={highlightElement}
-          title="Inspect the matching DOM element"
-        >
-          <ButtonIcon type="view-dom" />
-        </Button>
+        {isBrowserMode && (
+          <Button
+            className={styles.IconButton}
+            onClick={highlightElement}
+            title="Inspect the matching DOM element"
+          >
+            <ButtonIcon type="view-dom" />
+          </Button>
+        )}
         <Button
           className={styles.IconButton}
           onClick={logElement}
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 1aab4afaef5b..8c96da1dba3f 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -37,6 +37,7 @@ export type Props = {|
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   defaultTab?: TabID,
+  isBrowserMode?: boolean,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
@@ -77,6 +78,7 @@ export default function DevTools({
   browserTheme = 'light',
   defaultTab = 'components',
   componentsPortalContainer,
+  isBrowserMode = true,
   overrideTab,
   profilerPortalContainer,
   settingsPortalContainer,
@@ -124,8 +126,8 @@ export default function DevTools({
                           currentTab={tab}
                           id="DevTools"
                           selectTab={setTab}
-                          size="large"
                           tabs={tabs}
+                          type="navigation"
                         />
                       </div>
                     )}
@@ -133,7 +135,10 @@ export default function DevTools({
                       className={styles.TabContent}
                       hidden={tab !== 'components'}
                     >
-                      <Components portalContainer={componentsPortalContainer} />
+                      <Components
+                        isBrowserMode={isBrowserMode}
+                        portalContainer={componentsPortalContainer}
+                      />
                     </div>
                     <div
                       className={styles.TabContent}
diff --git a/src/devtools/views/Icon.js b/src/devtools/views/Icon.js
index 66e9e64fbe62..b3b1c2c45cb0 100644
--- a/src/devtools/views/Icon.js
+++ b/src/devtools/views/Icon.js
@@ -101,10 +101,11 @@ const PATH_SEARCH = `
 const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';
 
 const PATH_SETTINGS = `
-  M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
-  2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
-  0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
-  1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
-  1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
-  .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
+  M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
+  1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
+  2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
+  1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
+  1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
+  1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
+  3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
 `;
diff --git a/src/devtools/views/ModalDialog.css b/src/devtools/views/ModalDialog.css
index 3819a592aa0b..f01a1af5a0ae 100644
--- a/src/devtools/views/ModalDialog.css
+++ b/src/devtools/views/ModalDialog.css
@@ -18,6 +18,7 @@
   max-width: 100%;
   display: inline-block;
   background-color: var(--color-background);
+  box-shadow: 0 2px 4px var(--color-shadow);
   padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index a134f1d016b4..a4a5ce935fd8 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -92,8 +92,8 @@ function Profiler(_: {||}) {
               currentTab={selectedTabID}
               id="Profiler"
               selectTab={selectTab}
-              size="small"
               tabs={tabs}
+              type="profiler"
             />
             <RootSelector />
             <div className={styles.Spacer} />
diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js
index 575a5226bb18..39e516eb4625 100644
--- a/src/devtools/views/Settings/ComponentsSettings.js
+++ b/src/devtools/views/Settings/ComponentsSettings.js
@@ -61,7 +61,7 @@ export default function ComponentsSettings(_: {||}) {
 
   const updateCollapseNodesByDefault = useCallback(
     ({ currentTarget }) => {
-      store.collapseNodesByDefault = currentTarget.checked;
+      store.collapseNodesByDefault = !currentTarget.checked;
     },
     [store]
   );
@@ -240,10 +240,10 @@ export default function ComponentsSettings(_: {||}) {
       <label className={styles.Setting}>
         <input
           type="checkbox"
-          checked={collapseNodesByDefault}
+          checked={!collapseNodesByDefault}
           onChange={updateCollapseNodesByDefault}
         />{' '}
-        Collapse newly added components by default
+        Expand component tree by default
       </label>
 
       <div className={styles.Header}>Hide components where...</div>
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4286e3d65df4..02a1f720b69e 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -308,6 +308,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
+  updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/Settings/SettingsModal.css b/src/devtools/views/Settings/SettingsModal.css
index 07346d56e37c..af400ba9161d 100644
--- a/src/devtools/views/Settings/SettingsModal.css
+++ b/src/devtools/views/Settings/SettingsModal.css
@@ -1,5 +1,6 @@
 .Background {
   position: absolute;
+  z-index: 3;
   width: 100%;
   top: 0;
   bottom: 0;
@@ -18,6 +19,7 @@
   max-height: 100%;
   background-color: var(--color-background);
   border: 1px solid var(--color-border);
+  box-shadow: 0 2px 4px var(--color-shadow);
   border-radius: 0.25rem;
   overflow: auto;
   width: 400px;
diff --git a/src/devtools/views/Settings/SettingsModal.js b/src/devtools/views/Settings/SettingsModal.js
index d6618a6fed47..ae972e70f477 100644
--- a/src/devtools/views/Settings/SettingsModal.js
+++ b/src/devtools/views/Settings/SettingsModal.js
@@ -100,8 +100,8 @@ function SettingsModalImpl(_: {||}) {
             currentTab={selectedTabID}
             id="Settings"
             selectTab={selectTab}
-            size="small"
             tabs={tabs}
+            type="settings"
           />
           <div className={styles.Spacer} />
           <Button onClick={dismissModal} title="Close settings dialog">
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index ea6fefbbc36e..a29770a0d010 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -31,11 +31,15 @@
   cursor: default;
 }
 
-.TabSizeLarge {
+.TabSizeNavigation {
   font-size: var(--font-size-sans-large);
   padding: 0.5rem 1rem;
 }
-.TabSizeSmall {
+.TabSizeProfiler {
+  font-size: var(--font-size-sans-normal);
+  padding: 0.25rem 0.5rem;
+}
+.TabSizeSettings {
   font-size: var(--font-size-sans-normal);
   padding: 0.25rem 0.5rem;
 }
@@ -46,8 +50,9 @@
   opacity: 0;
 }
 
-.IconSizeLarge,
-.IconSizeSmall {
+.IconSizeNavigation,
+.IconSizeProfiler,
+.IconSizeSettings {
   margin-right: 0.5rem;
   color: var(--color-button-active);
 }
@@ -56,36 +61,50 @@
   color: var(--color-dim);
 }
 
-.IconSizeLarge {
+.IconSizeNavigation {
   width: 1.5rem;
   height: 1.5rem;
 }
-
-.IconSizeSmall {
+.IconSizeProfiler {
+  width: 1rem;
+  height: 1rem;
+}
+.IconSizeSettings {
   width: 1rem;
   height: 1rem;
 }
 
-.TabLabelLarge,
-.TabLabelSmall {
+.TabLabelNavigation,
+.TabLabelProfiler,
+.TabLabelSettings {
+}
+
+@media screen and (max-width: 525px) {
+  .IconSizeNavigation {
+    margin-right: 0;
+  }
+
+  .TabLabelNavigation {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 900px) {
-  .TabLabelSmall {
+  .TabLabelProfiler {
     display: none;
   }
 
-  .IconSizeSmall {
+  .IconSizeProfiler {
     margin-right: 0;
   }
 }
 
-@media screen and (max-width: 525px) {
-  .IconSizeLarge {
-    margin-right: 0;
+@media screen and (max-width: 400px) {
+  .TabLabelSettings {
+    display: none;
   }
 
-  .TabLabelLarge {
-    display: none;
+  .IconSizeSettings {
+    margin-right: 0;
   }
 }
diff --git a/src/devtools/views/TabBar.js b/src/devtools/views/TabBar.js
index 53733b7ff861..e8bc6eab076c 100644
--- a/src/devtools/views/TabBar.js
+++ b/src/devtools/views/TabBar.js
@@ -22,8 +22,8 @@ export type Props = {|
   disabled?: boolean,
   id: string,
   selectTab: (tabID: any) => void,
-  size: 'large' | 'small',
   tabs: Array<TabInfo>,
+  type: 'navigation' | 'profiler' | 'settings',
 |};
 
 export default function TabBar({
@@ -31,8 +31,8 @@ export default function TabBar({
   disabled = false,
   id: groupName,
   selectTab,
-  size,
   tabs,
+  type,
 }: Props) {
   if (!tabs.some(tab => tab.id === currentTab)) {
     selectTab(tabs[0].id);
@@ -56,8 +56,28 @@ export default function TabBar({
     }
   }, []);
 
-  const tabClassName =
-    size === 'large' ? styles.TabSizeLarge : styles.TabSizeSmall;
+  let iconSizeClassName;
+  let tabLabelClassName;
+  let tabSizeClassName;
+  switch (type) {
+    case 'navigation':
+      iconSizeClassName = styles.IconSizeNavigation;
+      tabLabelClassName = styles.TabLabelNavigation;
+      tabSizeClassName = styles.TabSizeNavigation;
+      break;
+    case 'profiler':
+      iconSizeClassName = styles.IconSizeProfiler;
+      tabLabelClassName = styles.TabLabelProfiler;
+      tabSizeClassName = styles.TabSizeProfiler;
+      break;
+    case 'settings':
+      iconSizeClassName = styles.IconSizeSettings;
+      tabLabelClassName = styles.TabLabelSettings;
+      tabSizeClassName = styles.TabSizeSettings;
+      break;
+    default:
+      throw Error(`Unsupported type "${type}"`);
+  }
 
   return (
     <Fragment>
@@ -65,7 +85,7 @@ export default function TabBar({
         let button = (
           <label
             className={classNames(
-              tabClassName,
+              tabSizeClassName,
               disabled ? styles.TabDisabled : styles.Tab,
               !disabled && currentTab === id ? styles.TabCurrent : null
             )}
@@ -83,18 +103,12 @@ export default function TabBar({
               onChange={onChange}
             />
             <Icon
-              className={`${disabled ? styles.IconDisabled : ''} ${
-                size === 'large' ? styles.IconSizeLarge : styles.IconSizeSmall
-              }`}
+              className={`${
+                disabled ? styles.IconDisabled : ''
+              } ${iconSizeClassName}`}
               type={icon}
             />
-            <span
-              className={
-                size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
-              }
-            >
-              {label}
-            </span>
+            <span className={tabLabelClassName}>{label}</span>
           </label>
         );
 
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index b822462a3cc2..eb5812ca6c2a 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -57,6 +57,7 @@
   --light-color-search-match-current: #f7923b;
   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
+  --light-color-shadow: rgba(0, 0, 0, 0.25);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-invalid: #ff0000;
@@ -122,6 +123,7 @@
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
+  --dark-color-shadow: rgba(0, 0, 0, 0.5);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
   --dark-color-text-invalid: #ff8080;

From 56b00176159d87999b71c2f8ff788b0b12583310 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 11:25:52 -0700
Subject: [PATCH 766/814] 4.0.0-alpha.1 -> 4.0.0-alpha.2

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index f406c51c9d74..67034d461801 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 92e61438ffcb..d7d0cbad31a3 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.0",
+    "react-devtools-core": "4.0.0-alpha.2",
     "update-notifier": "^2.1.0"
   }
 }

From 722d366e9f7709b1dc118ed1a3ef6e4c774e95d1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 11:27:15 -0700
Subject: [PATCH 767/814] Updated snapshot

---
 .../legacy/__snapshots__/storeLegacy-v15-test.js.snap          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
index d43112d058b5..06628a9e9a02 100644
--- a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -494,5 +494,6 @@ exports[`Store (legacy) collapseNodesByDefault:true should support reordering of
 
 exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
-  ▸ <Component>
+  ▾ <Component>
+      <div>
 `;

From 9a05e0b600df6a7a5097a6998bcd2d1d95da062d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 13:36:51 -0700
Subject: [PATCH 768/814] Disable view-source button in standalone mode if no
 project roots are provided

---
 .../react-devtools-core/src/standalone.js     |  6 +++--
 src/devtools/store.js                         |  8 ++++++
 src/devtools/views/Components/Components.js   |  4 +--
 .../views/Components/SelectedElement.js       | 26 +++++++++----------
 src/devtools/views/DevTools.js                |  7 +----
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index d3955fa1f11c..27774b380d96 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -85,7 +85,6 @@ function reload() {
     root.render(
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
-        isBrowserMode: false,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
@@ -172,7 +171,10 @@ function initialize(socket: WebSocket) {
     socket.close();
   });
 
-  store = new Store(bridge, { supportsNativeInspection: false });
+  store = new Store(bridge, {
+    supportsNativeInspection: false,
+    supportsViewSource: projectRoots.length > 0,
+  });
 
   log('Connected');
   reload();
diff --git a/src/devtools/store.js b/src/devtools/store.js
index adaccfe24b27..b843831e1dee 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -49,6 +49,7 @@ type Config = {|
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
+  supportsViewSource?: boolean,
 |};
 
 export type Capabilities = {|
@@ -124,6 +125,7 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
+  _supportsViewSource: boolean = true;
 
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
@@ -155,6 +157,7 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
+        supportsViewSource,
       } = config;
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
@@ -162,6 +165,7 @@ export default class Store extends EventEmitter<{|
           localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
       }
       this._supportsNativeInspection = supportsNativeInspection !== false;
+      this._supportsViewSource = supportsViewSource !== false;
       if (supportsProfiling) {
         this._supportsProfiling = true;
       }
@@ -361,6 +365,10 @@ export default class Store extends EventEmitter<{|
     return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
 
+  get supportsViewSource(): boolean {
+    return this._supportsViewSource;
+  }
+
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 5960669a6221..2623041e0c4a 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -13,7 +13,7 @@ import { SettingsModalContextController } from 'src/devtools/views/Settings/Sett
 
 import styles from './Components.css';
 
-function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
+function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <SettingsModalContextController>
@@ -26,7 +26,7 @@ function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
             <div className={styles.SelectedElementWrapper}>
               <NativeStyleContextController>
                 <Suspense fallback={<Loading />}>
-                  <SelectedElement isBrowserMode={isBrowserMode} />
+                  <SelectedElement />
                 </Suspense>
               </NativeStyleContextController>
             </div>
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index b851475344a6..5b404b35755b 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -30,11 +30,9 @@ import type { GetInspectedElementPath } from './InspectedElementContext';
 import type { Element, InspectedElement } from './types';
 import type { ElementType } from 'src/types';
 
-export type Props = {|
-  isBrowserMode?: boolean,
-|};
+export type Props = {||};
 
-export default function SelectedElement({ isBrowserMode }: Props) {
+export default function SelectedElement(_: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const { isFileLocationRequired, viewElementSourceFunction } = useContext(
@@ -188,7 +186,7 @@ export default function SelectedElement({ isBrowserMode }: Props) {
             <ButtonIcon type="suspend" />
           </Toggle>
         )}
-        {isBrowserMode && (
+        {store.supportsNativeInspection && (
           <Button
             className={styles.IconButton}
             onClick={highlightElement}
@@ -204,14 +202,16 @@ export default function SelectedElement({ isBrowserMode }: Props) {
         >
           <ButtonIcon type="log-data" />
         </Button>
-        <Button
-          className={styles.IconButton}
-          disabled={!canViewSource}
-          onClick={viewSource}
-          title="View source for this element"
-        >
-          <ButtonIcon type="view-source" />
-        </Button>
+        {store.supportsViewSource && (
+          <Button
+            className={styles.IconButton}
+            disabled={!canViewSource}
+            onClick={viewSource}
+            title="View source for this element"
+          >
+            <ButtonIcon type="view-source" />
+          </Button>
+        )}
       </div>
 
       {inspectedElement === null && (
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 8c96da1dba3f..c63113dda54b 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -37,7 +37,6 @@ export type Props = {|
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   defaultTab?: TabID,
-  isBrowserMode?: boolean,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
@@ -78,7 +77,6 @@ export default function DevTools({
   browserTheme = 'light',
   defaultTab = 'components',
   componentsPortalContainer,
-  isBrowserMode = true,
   overrideTab,
   profilerPortalContainer,
   settingsPortalContainer,
@@ -135,10 +133,7 @@ export default function DevTools({
                       className={styles.TabContent}
                       hidden={tab !== 'components'}
                     >
-                      <Components
-                        isBrowserMode={isBrowserMode}
-                        portalContainer={componentsPortalContainer}
-                      />
+                      <Components portalContainer={componentsPortalContainer} />
                     </div>
                     <div
                       className={styles.TabContent}

From 4c610950a4d9262c5bf5c719c8e4a8eeaf0a351d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 14:05:56 -0700
Subject: [PATCH 769/814] Hide "style" prop if we are showing the style editor

Also add react-native-web to test harness
---
 package.json                                  |  1 +
 shells/dev/app/ReactNativeWeb/index.js        | 34 +++++++
 shells/dev/app/index.js                       |  2 +
 shells/dev/src/backend.js                     | 15 ++-
 .../views/Components/SelectedElement.js       | 13 ++-
 yarn.lock                                     | 96 ++++++++++++++++---
 6 files changed, 148 insertions(+), 13 deletions(-)
 create mode 100644 shells/dev/app/ReactNativeWeb/index.js

diff --git a/package.json b/package.json
index 55425c6b8c22..a2615e14a2ac 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
     "react-dom": "^0.0.0-424099da6",
     "react-dom-15": "npm:react-dom@^15",
     "react-is": "0.0.0-424099da6",
+    "react-native-web": "^0.11.5",
     "react-test-renderer": "^0.0.0-424099da6",
     "react-virtualized-auto-sizer": "^1.0.2",
     "request-promise": "^4.2.4",
diff --git a/shells/dev/app/ReactNativeWeb/index.js b/shells/dev/app/ReactNativeWeb/index.js
new file mode 100644
index 000000000000..7e2e27ede730
--- /dev/null
+++ b/shells/dev/app/ReactNativeWeb/index.js
@@ -0,0 +1,34 @@
+// @flow
+
+import React, { Fragment, useState } from 'react';
+import { Button, Text, View } from 'react-native-web';
+
+export default function ReactNativeWeb() {
+  const [backgroundColor, setBackgroundColor] = useState('blue');
+  const toggleColor = () =>
+    setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
+  return (
+    <Fragment>
+      <h1>ReactNativeWeb</h1>
+      <View>
+        <Text>auto (default) - english LTR</Text>
+        <Text>
+          {
+            '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
+          }
+        </Text>
+        <Text style={{ textAlign: 'left' }}>
+          left left left left left left left left left left left left left left
+          left
+        </Text>
+        <Button
+          onPress={toggleColor}
+          style={{ backgroundColor }}
+          title={`Switch background color to "${
+            backgroundColor === 'purple' ? 'green' : 'purple'
+          }"`}
+        />
+      </View>
+    </Fragment>
+  );
+}
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index b5f0923c1b2e..d5ca32dd0890 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -14,6 +14,7 @@ import Hydration from './Hydration';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import PriorityLevels from './PriorityLevels';
+import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
@@ -41,6 +42,7 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(PriorityLevels);
+  mountHelper(ReactNativeWeb);
   mountHelper(Toggle);
   mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 20783cd2ec40..808230b82d43 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -4,6 +4,7 @@ import html2canvas from 'html2canvas';
 import Agent from 'src/backend/agent';
 import Bridge from 'src/bridge';
 import { initBackend } from 'src/backend';
+import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 const bridge = new Bridge({
   listen(fn) {
@@ -32,4 +33,16 @@ bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
 
 const agent = new Agent(bridge);
 
-initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window.parent);
+const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+initBackend(hook, agent, window.parent);
+
+// Setup React Native style editor if a renderer like react-native-web has injected it.
+if (!!hook.resolveRNStyle) {
+  setupNativeStyleEditor(
+    bridge,
+    agent,
+    hook.resolveRNStyle,
+    hook.nativeStyleEditorValidAttributes
+  );
+}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 5b404b35755b..b214c7d0d19e 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -13,6 +13,7 @@ import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import NativeStyleEditor from './NativeStyleEditor';
+import { NativeStyleContext } from './NativeStyleEditor/context';
 import Toggle from '../Toggle';
 import Badge from './Badge';
 import {
@@ -263,6 +264,7 @@ function InspectedElementView({
   const { ownerID } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const { getStyleAndLayout } = useContext(NativeStyleContext);
 
   const inspectContextPath = useCallback(
     (path: Array<string | number>) => {
@@ -334,12 +336,21 @@ function InspectedElementView({
     };
   }
 
+  let filteredProps = props;
+  if (filteredProps !== null) {
+    const maybeStyleAndLayout = getStyleAndLayout(id);
+    // Hide props.style if we are showing the style editor UI.
+    if (maybeStyleAndLayout !== null && maybeStyleAndLayout.style !== null) {
+      delete filteredProps['style'];
+    }
+  }
+
   return (
     <div className={styles.InspectedElement}>
       <HocBadges element={element} />
       <InspectedElementTree
         label="props"
-        data={props}
+        data={filteredProps}
         inspectPath={inspectPropsPath}
         overrideValueFn={overridePropsFn}
         showWhenEmpty
diff --git a/yarn.lock b/yarn.lock
index e255c0ab2db1..3f8a3dd8fe61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1767,7 +1767,7 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
   integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -3585,6 +3585,11 @@ core-js@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
+core-js@^2.4.1:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+  integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
+
 core-js@^2.5.7:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
@@ -3658,7 +3663,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.0:
+create-react-class@^15.6.0, create-react-class@^15.6.2:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -3775,6 +3780,14 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-line-break@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
@@ -3907,6 +3920,11 @@ debounce@1.1.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
   integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3970,6 +3988,13 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
+  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
+  dependencies:
+    is-obj "^1.0.0"
+
 deep-equal@^1.0.0, deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -5298,6 +5323,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
+fbjs-css-vars@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
+
 fbjs-scripts@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz#9da67cec6d62fddc94b099563f6c48a749900aef"
@@ -5334,6 +5364,20 @@ fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
+fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
+  dependencies:
+    core-js "^2.4.1"
+    fbjs-css-vars "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6321,6 +6365,11 @@ humanize-url@^1.0.0:
     normalize-url "^1.0.0"
     strip-url-auth "^1.0.0"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -6461,6 +6510,13 @@ ini@^1.3.2, ini@^1.3.4, ini@~1.3.0, ini@~1.3.3:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
+inline-style-prefixer@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811"
+  integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -8813,6 +8869,11 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -9711,7 +9772,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9922,14 +9983,6 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-devtools-core@4.0.0-alpha.0:
-  version "4.0.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.0.0-alpha.0.tgz#79d3cd89b456ca264d5f4da392a70c85ad870402"
-  integrity sha512-l9JgiXz7nj/u+oLmiri/4yRnddRY4F6bHtsUKQNrddYHilGAiA+3WXzeEhX2QAlXMEcmpXdcT5celmAFzLnycQ==
-  dependencies:
-    shell-quote "^1.6.1"
-    ws "^7"
-
 "react-dom-15@npm:react-dom@^15":
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -9965,6 +10018,22 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-native-web@^0.11.5:
+  version "0.11.5"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.5.tgz#adf2eff902fdb32e86be7877294d9a6bb0ad3815"
+  integrity sha512-KVvE6s32uBgp5m1BNSfNOXvGo1wt/pORSKvi8oy8tdhAPYqsr0oMuMP3rZd8vk+MpiYt1Z8raS/n+DK2xj85Jg==
+  dependencies:
+    array-find-index "^1.0.2"
+    create-react-class "^15.6.2"
+    debounce "^1.2.0"
+    deep-assign "^3.0.0"
+    fbjs "^1.0.0"
+    hyphenate-style-name "^1.0.2"
+    inline-style-prefixer "^5.0.3"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.6.0"
+    react-timer-mixin "^0.13.4"
+
 react-test-renderer@^0.0.0-424099da6:
   version "0.0.0-424099da6"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-424099da6.tgz#75272c39e0b45e99dbd674977a4afc32a2d37f81"
@@ -9975,6 +10044,11 @@ react-test-renderer@^0.0.0-424099da6:
     react-is "0.0.0-424099da6"
     scheduler "0.0.0-424099da6"
 
+react-timer-mixin@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
+  integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"

From 2e8b9fad366fa2da4fdc5c26562008f9bdcc8317 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 14:43:29 -0700
Subject: [PATCH 770/814] Make style editor inputs more obvious resemble inputs

---
 .../views/Components/NativeStyleEditor/AutoSizeInput.js     | 6 +++++-
 .../views/Components/NativeStyleEditor/StyleEditor.css      | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
index f2eb4f4cb6b0..b9fc9b6e0b57 100644
--- a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -68,8 +68,12 @@ export default function AutoSizeInput({
       return;
     }
 
+    // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
+    // Not sure why this is, but the old DevTools did a similar thing.
+    const targetWidth = Math.ceil(scrollWidth) + 1;
+
     if (inputRef.current !== null) {
-      inputRef.current.style.width = `${scrollWidth}px`;
+      inputRef.current.style.width = `${targetWidth}px`;
     }
   }, [value]);
 
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
index a097665581b7..bbaaf16ea582 100644
--- a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
+++ b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -42,6 +42,12 @@
 
 .Input {
   flex: 0 1 auto;
+  padding: 1px;
+  box-shadow: 0px 1px 3px transparent;
+}
+.Input:focus {
+  color: var(--color-text);
+  box-shadow: 0px 1px 3px var(--color-shadow);
 }
 
 .Empty {

From c7aff5503fa98ccc5007c210db732161ca411f02 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 14:46:53 -0700
Subject: [PATCH 771/814] 4.0.0-alpha.2 -> 4.0.0-alpha.3

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 67034d461801..2b8eae207bfa 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index d7d0cbad31a3..cd4ac8645709 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.2",
+    "react-devtools-core": "4.0.0-alpha.3",
     "update-notifier": "^2.1.0"
   }
 }

From 8d1c82901942a67f51847c1e1dbedb1732f0bed6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Jul 2019 15:48:48 -0700
Subject: [PATCH 772/814] Reverted style-prop hiding change because it caused a
 regression in the browser extension

---
 src/devtools/views/Components/SelectedElement.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index b214c7d0d19e..5b404b35755b 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -13,7 +13,6 @@ import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import NativeStyleEditor from './NativeStyleEditor';
-import { NativeStyleContext } from './NativeStyleEditor/context';
 import Toggle from '../Toggle';
 import Badge from './Badge';
 import {
@@ -264,7 +263,6 @@ function InspectedElementView({
   const { ownerID } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const { getStyleAndLayout } = useContext(NativeStyleContext);
 
   const inspectContextPath = useCallback(
     (path: Array<string | number>) => {
@@ -336,21 +334,12 @@ function InspectedElementView({
     };
   }
 
-  let filteredProps = props;
-  if (filteredProps !== null) {
-    const maybeStyleAndLayout = getStyleAndLayout(id);
-    // Hide props.style if we are showing the style editor UI.
-    if (maybeStyleAndLayout !== null && maybeStyleAndLayout.style !== null) {
-      delete filteredProps['style'];
-    }
-  }
-
   return (
     <div className={styles.InspectedElement}>
       <HocBadges element={element} />
       <InspectedElementTree
         label="props"
-        data={filteredProps}
+        data={props}
         inspectPath={inspectPropsPath}
         overrideValueFn={overridePropsFn}
         showWhenEmpty

From 270f34f7f0e1d121c340937fe3302908ec117e3d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Jul 2019 08:21:41 -0700
Subject: [PATCH 773/814] Support new Flare hook, unstable_useListener

---
 src/backend/ReactDebugHooks.js | 91 ++++++++++++++++++++++++----------
 src/backend/types.js           | 40 +++++++++++++++
 2 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 7dc1e1c2f5f0..01734c840a06 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -8,6 +8,8 @@
 
 import ErrorStackParser from 'error-stack-parser';
 
+import type { ReactContext, ReactEventResponder } from './types';
+
 type Fiber = any;
 type Hook = any;
 
@@ -28,6 +30,8 @@ type HookLogEntry = {
   value: mixed,
 };
 
+const emptyObject = {};
+
 let hookLog: Array<HookLogEntry> = [];
 
 // Primitives
@@ -53,9 +57,9 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useLayoutEffect(() => {});
       Dispatcher.useEffect(() => {});
       Dispatcher.useImperativeHandle(undefined, () => null);
+      Dispatcher.useDebugValue(null);
       Dispatcher.useCallback(() => {});
       Dispatcher.useMemo(() => null);
-      Dispatcher.useDebugValue(null);
     } finally {
       readHookLog = hookLog;
       hookLog = [];
@@ -79,14 +83,17 @@ function nextHook(): null | Hook {
 }
 
 function readContext<T>(
-  context: any,
+  context: ReactContext<T>,
   observedBits: void | number | boolean
 ): T {
   // For now we don't expose readContext usage in the hooks debugging info.
   return context._currentValue;
 }
 
-function useContext<T>(context: any, observedBits: void | number | boolean): T {
+function useContext<T>(
+  context: ReactContext<T>,
+  observedBits: void | number | boolean
+): T {
   hookLog.push({
     primitive: 'Context',
     stackError: new Error(),
@@ -109,13 +116,18 @@ function useState<S>(
   return [state, (action: BasicStateAction<S>) => {}];
 }
 
-function useReducer<S, A>(
+function useReducer<S, I, A>(
   reducer: (S, A) => S,
-  initialState: S,
-  initialAction: A | void | null
+  initialArg: I,
+  init?: I => S
 ): [S, Dispatch<A>] {
   const hook = nextHook();
-  const state = hook !== null ? hook.memoizedState : initialState;
+  let state;
+  if (hook !== null) {
+    state = hook.memoizedState;
+  } else {
+    state = init !== undefined ? init(initialArg) : ((initialArg: any): S);
+  }
   hookLog.push({
     primitive: 'Reducer',
     stackError: new Error(),
@@ -136,7 +148,7 @@ function useRef<T>(initialValue: T): { current: T } {
 }
 
 function useLayoutEffect(
-  create: () => mixed,
+  create: () => (() => void) | void,
   inputs: Array<mixed> | void | null
 ): void {
   nextHook();
@@ -148,7 +160,7 @@ function useLayoutEffect(
 }
 
 function useEffect(
-  create: () => mixed,
+  create: () => (() => void) | void,
   inputs: Array<mixed> | void | null
 ): void {
   nextHook();
@@ -176,22 +188,22 @@ function useImperativeHandle<T>(
   });
 }
 
-function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
-  const hook = nextHook();
+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
   hookLog.push({
-    primitive: 'Callback',
+    primitive: 'DebugValue',
     stackError: new Error(),
-    value: hook !== null ? hook.memoizedState[0] : callback,
+    value: typeof formatterFn === 'function' ? formatterFn(value) : value,
   });
-  return callback;
 }
 
-function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
+function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
+  const hook = nextHook();
   hookLog.push({
-    primitive: 'DebugValue',
+    primitive: 'Callback',
     stackError: new Error(),
-    value: typeof formatterFn === 'function' ? formatterFn(value) : value,
+    value: hook !== null ? hook.memoizedState[0] : callback,
   });
+  return callback;
 }
 
 function useMemo<T>(
@@ -204,6 +216,21 @@ function useMemo<T>(
   return value;
 }
 
+function useListener(
+  responder: ReactEventResponder<any, any>,
+  hookProps: ?Object
+): void {
+  const value = {
+    responder: responder.displayName || 'EventComponent',
+    props: hookProps || emptyObject,
+  };
+  hookLog.push({
+    primitive: 'Listener',
+    stackError: new Error(),
+    value,
+  });
+}
+
 const Dispatcher = {
   readContext,
   useCallback,
@@ -216,6 +243,7 @@ const Dispatcher = {
   useReducer,
   useRef,
   useState,
+  useListener,
 };
 
 // Inspect
@@ -400,10 +428,10 @@ function buildTree(rootStack, readHookLog): HooksTree {
       for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
         const children = [];
         levelChildren.push({
-          name: parseCustomHookName(stack[j - 1].functionName),
-          value: undefined,
           id: null,
           isStateEditable: false,
+          name: parseCustomHookName(stack[j - 1].functionName),
+          value: undefined,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -438,10 +466,11 @@ function buildTree(rootStack, readHookLog): HooksTree {
   return rootChildren;
 }
 
-// Custom hooks support user-configurable labels (via the useDebugValue() hook).
-// That hook adds the user-provided values to the hooks tree.
-// This method removes those values (so they don't appear in DevTools),
-// and bubbles them up to the "value" attribute of their parent custom hook.
+// Custom hooks support user-configurable labels (via the special useDebugValue() hook).
+// That hook adds user-provided values to the hooks tree,
+// but these values aren't intended to appear alongside of the other hooks.
+// Instead they should be attributed to their parent custom hook.
+// This method walks the tree and assigns debug values to their custom hook owners.
 function processDebugValues(
   hooksTree: HooksTree,
   parentHooksNode: HooksNode | null
@@ -459,8 +488,8 @@ function processDebugValues(
     }
   }
 
-  // Bubble debug value labels to their parent custom hook.
-  // If there is no parent hook, just ignore them.
+  // Bubble debug value labels to their custom hook owner.
+  // If there is no parent hook, just ignore them for now.
   // (We may warn about this in the future.)
   if (parentHooksNode !== null) {
     if (debugValueHooksNodes.length === 1) {
@@ -476,6 +505,12 @@ export function inspectHooks<Props>(
   props: Props,
   currentDispatcher: ReactCurrentDispatcher
 ): HooksTree {
+  // DevTools will pass the current renderer's injected dispatcher.
+  // Other apps might compile debug hooks as part of their app though.
+  //if (currentDispatcher == null) {
+  //currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+  //}
+
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
   currentDispatcher.current = Dispatcher;
@@ -554,6 +589,12 @@ export function inspectHooksOfFiber(
   fiber: Fiber,
   currentDispatcher: ReactCurrentDispatcher
 ) {
+  // DevTools will pass the current renderer's injected dispatcher.
+  // Other apps might compile debug hooks as part of their app though.
+  //if (currentDispatcher == null) {
+  //currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+  //}
+
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
diff --git a/src/backend/types.js b/src/backend/types.js
index ac6b6a49da84..6bc08d6e1890 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -91,6 +91,27 @@ export type GetFiberIDForNative = (
 ) => number | null;
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
+export type ReactProviderType<T> = {
+  $$typeof: Symbol | number,
+  _context: ReactContext<T>,
+};
+
+export type ReactContext<T> = {
+  $$typeof: Symbol | number,
+  Consumer: ReactContext<T>,
+  Provider: ReactProviderType<T>,
+
+  _calculateChangedBits: ((a: T, b: T) => number) | null,
+
+  _currentValue: T,
+  _currentValue2: T,
+  _threadCount: number,
+
+  // DEV only
+  _currentRenderer?: Object | null,
+  _currentRenderer2?: Object | null,
+};
+
 export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
@@ -332,3 +353,22 @@ export type HooksNode = {
   subHooks: Array<HooksNode>,
 };
 export type HooksTree = Array<HooksNode>;
+
+export type ReactEventResponder<E, C> = {
+  $$typeof: Symbol | number,
+  displayName: string,
+  targetEventTypes: null | Array<string>,
+  rootEventTypes: null | Array<string>,
+  getInitialState: null | ((props: Object) => Object),
+  onEvent:
+    | null
+    | ((event: E, context: C, props: Object, state: Object) => void),
+  onRootEvent:
+    | null
+    | ((event: E, context: C, props: Object, state: Object) => void),
+  onMount: null | ((context: C, props: Object, state: Object) => void),
+  onUnmount: null | ((context: C, props: Object, state: Object) => void),
+  onOwnershipChange:
+    | null
+    | ((context: C, props: Object, state: Object) => void),
+};

From a7948e834223ab010475cfe6fabfc55d24f38955 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 25 Jul 2019 16:45:59 +0100
Subject: [PATCH 774/814] [Flare] Remove the old EventComponent/EventTarget
 system (#354)

---
 .../inspectedElementContext-test.js.snap      |  20 ---
 .../__snapshots__/inspectElement-test.js.snap |   8 --
 src/backend/legacy/renderer.js                |   3 -
 src/backend/renderer.js                       |  65 +--------
 src/backend/types.js                          |   1 -
 src/devtools/views/Components/EventsTree.css  |  31 -----
 src/devtools/views/Components/EventsTree.js   | 126 ------------------
 .../Components/InspectedElementContext.js     |   2 -
 .../views/Components/SelectedElement.js       |   9 --
 src/devtools/views/Components/types.js        |   1 -
 .../views/Settings/ComponentsSettings.js      |   2 -
 src/types.js                                  |   2 -
 12 files changed, 2 insertions(+), 268 deletions(-)
 delete mode 100644 src/devtools/views/Components/EventsTree.css
 delete mode 100644 src/devtools/views/Components/EventsTree.js

diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 88d8e2dcea28..a27a73527ca0 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -5,7 +5,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -22,7 +21,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -44,7 +42,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -72,7 +69,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -100,7 +96,6 @@ exports[`InspectedElementContext should inspect the currently selected element:
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -123,7 +118,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -149,7 +143,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -179,7 +172,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -213,7 +205,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -249,7 +240,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -287,7 +277,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -327,7 +316,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
   "id": 3,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -350,7 +338,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
   "id": 3,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -373,7 +360,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -390,7 +376,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -412,7 +397,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "a": 1,
@@ -427,7 +411,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "a": 2,
@@ -442,7 +425,6 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "html_element": {},
@@ -462,7 +444,6 @@ exports[`InspectedElementContext should support custom objects with enumerable p
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "data": {
@@ -479,7 +460,6 @@ exports[`InspectedElementContext should support simple data types: 1: Initial in
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "boolean_false": false,
diff --git a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
index 40d3ab5ed91d..1cfc30e88444 100644
--- a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+++ b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
@@ -8,7 +8,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "a": 1,
@@ -27,7 +26,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -47,7 +45,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -71,7 +68,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -99,7 +95,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -129,7 +124,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "html_element": {},
@@ -153,7 +147,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "data": {
@@ -174,7 +167,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "boolean_false": false,
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 96517385bc9b..461905a3b203 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -709,9 +709,6 @@ export function attach(
 
       type: type,
 
-      // New events system did not exist in legacy versions
-      events: null,
-
       // Inspectable properties.
       context,
       hooks: null,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 9f6f54d8f85b..979eefd141de 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -8,8 +8,6 @@ import {
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
-  ElementTypeEventComponent,
-  ElementTypeEventTarget,
   ElementTypeFunction,
   ElementTypeForwardRef,
   ElementTypeHostComponent,
@@ -109,8 +107,6 @@ type ReactTypeOfWorkType = {|
   CoroutineComponent: number,
   CoroutineHandlerPhase: number,
   DehydratedSuspenseComponent: number,
-  EventComponent: number,
-  EventTarget: number,
   ForwardRef: number,
   Fragment: number,
   FunctionComponent: number,
@@ -213,8 +209,6 @@ export function getInternalReactConstants(
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
       DehydratedSuspenseComponent: 18, // Behind a flag
-      EventComponent: 19, // Added in 16.9
-      EventTarget: 20, // Added in 16.9
       ForwardRef: 11,
       Fragment: 7,
       FunctionComponent: 0,
@@ -240,8 +234,6 @@ export function getInternalReactConstants(
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
       DehydratedSuspenseComponent: -1, // Doesn't exist yet
-      EventComponent: -1, // Doesn't exist yet
-      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 13,
       Fragment: 9,
       FunctionComponent: 0,
@@ -267,8 +259,6 @@ export function getInternalReactConstants(
       CoroutineComponent: 7,
       CoroutineHandlerPhase: 8,
       DehydratedSuspenseComponent: -1, // Doesn't exist yet
-      EventComponent: -1, // Doesn't exist yet
-      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 14,
       Fragment: 10,
       FunctionComponent: 1,
@@ -305,8 +295,6 @@ export function getInternalReactConstants(
     IncompleteClassComponent,
     FunctionComponent,
     IndeterminateComponent,
-    EventComponent,
-    EventTarget,
     ForwardRef,
     HostRoot,
     HostComponent,
@@ -318,8 +306,6 @@ export function getInternalReactConstants(
   } = ReactTypeOfWork;
 
   const {
-    EVENT_TARGET_TOUCH_HIT_NUMBER,
-    EVENT_TARGET_TOUCH_HIT_STRING,
     CONCURRENT_MODE_NUMBER,
     CONCURRENT_MODE_SYMBOL_STRING,
     DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
@@ -358,16 +344,6 @@ export function getInternalReactConstants(
       case FunctionComponent:
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
-      case EventComponent:
-        return type.responder.displayName || 'EventComponent';
-      case EventTarget:
-        switch (getTypeSymbol(elementType.type)) {
-          case EVENT_TARGET_TOUCH_HIT_NUMBER:
-          case EVENT_TARGET_TOUCH_HIT_STRING:
-            return 'TouchHitTarget';
-          default:
-            return elementType.displayName || 'EventTarget';
-        }
       case ForwardRef:
         return (
           resolvedType.displayName ||
@@ -461,8 +437,6 @@ export function attach(
     ClassComponent,
     ContextConsumer,
     DehydratedSuspenseComponent,
-    EventComponent,
-    EventTarget,
     Fragment,
     ForwardRef,
     HostRoot,
@@ -649,7 +623,6 @@ export function attach(
         // For now, ignore it, and only show it once it gets hydrated.
         // https://github.com/bvaughn/react-devtools-experimental/issues/197
         return true;
-      case EventComponent:
       case HostPortal:
       case HostText:
       case Fragment:
@@ -710,10 +683,6 @@ export function attach(
       case FunctionComponent:
       case IndeterminateComponent:
         return ElementTypeFunction;
-      case EventComponent:
-        return ElementTypeEventComponent;
-      case EventTarget:
-        return ElementTypeEventTarget;
       case ForwardRef:
         return ElementTypeForwardRef;
       case HostRoot:
@@ -2239,23 +2208,6 @@ export function attach(
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
 
-    let events = null;
-    let node = fiber;
-    while (node !== null) {
-      if (node.tag === EventComponent) {
-        if (events === null) {
-          events = [];
-        }
-        const eventComponentInstance = node.stateNode;
-        const currentFiber = eventComponentInstance.currentFiber;
-        events.push({
-          props: eventComponentInstance.props,
-          displayName: getDisplayNameForFiber(currentFiber),
-        });
-      }
-      node = node.return;
-    }
-
     let hooks = null;
     if (usesHooks) {
       const originalConsoleMethods = {};
@@ -2311,7 +2263,6 @@ export function attach(
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
       context,
-      events,
       hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
@@ -2350,18 +2301,12 @@ export function attach(
 
   function createIsPathWhitelisted(
     key: string | null,
-    secondaryCategory: 'events' | 'hooks' | null
+    secondaryCategory: 'hooks' | null
   ) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathWhitelisted(path: Array<string | number>): boolean {
       switch (secondaryCategory) {
-        case 'events':
-          if (path.length <= 2) {
-            // Never dehydrate the "hooks" object at the top level (becaues it's always just an array).
-            return true;
-          }
-          break;
         case 'hooks':
           if (path.length === 1) {
             // Never dehydrate the "hooks" object at the top levels.
@@ -2407,9 +2352,7 @@ export function attach(
         mergeInspectedPaths(path);
 
         let secondaryCategory = null;
-        if (path[0] === 'events') {
-          secondaryCategory = 'events';
-        } else if (path[0] === 'hooks') {
+        if (path[0] === 'hooks') {
           secondaryCategory = 'hooks';
         }
 
@@ -2466,10 +2409,6 @@ export function attach(
         cleanedInspectedElement.context,
         createIsPathWhitelisted('context', null)
       );
-      cleanedInspectedElement.events = cleanForBridge(
-        cleanedInspectedElement.events,
-        createIsPathWhitelisted('events', 'events')
-      );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
         createIsPathWhitelisted('hooks', 'hooks')
diff --git a/src/backend/types.js b/src/backend/types.js
index 6bc08d6e1890..c0a27229508c 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -227,7 +227,6 @@ export type InspectedElement = {|
 
   // Inspectable properties.
   context: Object | null,
-  events: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
diff --git a/src/devtools/views/Components/EventsTree.css b/src/devtools/views/Components/EventsTree.css
deleted file mode 100644
index 686c5dc768ca..000000000000
--- a/src/devtools/views/Components/EventsTree.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.EventsTree {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-.EventsTree:first-of-type {
-  border-top: none;
-}
-
-.HeaderRow {
-  display: flex;
-  align-items: center;
-}
-
-.Header {
-  flex: 1 1;
-  font-family: var(--font-family-sans);
-}
-
-.NameValueRow {
-  display: flex;
-}
-
-.Name {
-  user-select: none;
-}
-
-.Empty {
-  color: var(--color-dimmer);
-  font-style: italic;
-  padding-left: 0.75rem;
-}
diff --git a/src/devtools/views/Components/EventsTree.js b/src/devtools/views/Components/EventsTree.js
deleted file mode 100644
index eda2a54c25c5..000000000000
--- a/src/devtools/views/Components/EventsTree.js
+++ /dev/null
@@ -1,126 +0,0 @@
-// @flow
-
-import { copy } from 'clipboard-js';
-import React, { useCallback, useState } from 'react';
-import styles from './EventsTree.css';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import KeyValue from './KeyValue';
-import ExpandCollapseToggle from './ExpandCollapseToggle';
-import { serializeDataForCopy } from '../utils';
-
-import type { GetInspectedElementPath } from './InspectedElementContext';
-
-type InspectPath = (path: Array<string | number>) => void;
-
-type EventsTreeViewProps = {|
-  events: Object,
-  getInspectedElementPath: GetInspectedElementPath,
-  id: number,
-|};
-
-function EventsTreeView({
-  events,
-  getInspectedElementPath,
-  id,
-}: EventsTreeViewProps) {
-  const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [
-    events,
-  ]);
-
-  const inspectPath = useCallback(
-    (path: Array<string | number>) => {
-      getInspectedElementPath(id, ['events', ...path]);
-    },
-    [getInspectedElementPath, id]
-  );
-
-  return (
-    <div className={styles.EventsTree}>
-      <div className={styles.HeaderRow}>
-        <div className={styles.Header}>events</div>
-        {
-          <Button onClick={handleCopy} title="Copy to clipboard">
-            <ButtonIcon type="copy" />
-          </Button>
-        }
-      </div>
-      <InnerEventsTreeView events={events} inspectPath={inspectPath} />
-    </div>
-  );
-}
-
-type InnerEventsTreeViewProps = {|
-  events: Object,
-  inspectPath: InspectPath,
-|};
-
-function InnerEventsTreeView({
-  events,
-  inspectPath,
-}: InnerEventsTreeViewProps) {
-  return events.map((event, index) => (
-    <EventComponentView
-      key={index}
-      displayName={event.displayName}
-      index={index}
-      inspectPath={inspectPath}
-      props={event.props}
-    />
-  ));
-}
-
-type EventComponentViewProps = {|
-  displayName: string,
-  index: number,
-  inspectPath: InspectPath,
-  props: null | Object,
-|};
-
-function EventComponentView({
-  displayName,
-  index,
-  inspectPath,
-  props,
-}: EventComponentViewProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  let eventComponentProps = null;
-  // eslint-disable-next-line no-unused-vars
-  let children;
-
-  if (props !== null) {
-    // We don't want children, so extract it out
-    ({ children, ...eventComponentProps } = props);
-  }
-
-  return (
-    <div>
-      <div className={styles.NameValueRow}>
-        <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-        <span onClick={() => {}} className={styles.Name}>
-          {displayName}
-        </span>
-      </div>
-      <div className={styles.Children} hidden={!isOpen}>
-        {eventComponentProps === null && (
-          <div className={styles.Empty}>None</div>
-        )}
-        {eventComponentProps !== null &&
-          Object.keys((eventComponentProps: any)).map(name => (
-            <KeyValue
-              key={name}
-              depth={1}
-              inspectPath={inspectPath}
-              name={name}
-              path={[index]}
-              value={(eventComponentProps: any)[name]}
-            />
-          ))}
-      </div>
-    </div>
-  );
-}
-
-// $FlowFixMe
-export default React.memo(EventsTreeView);
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 31841774eb63..8ba1b7718aa2 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -155,7 +155,6 @@ function InspectedElementContextController({ children }: Props) {
             type,
             owners,
             context,
-            events,
             hooks,
             props,
             state,
@@ -187,7 +186,6 @@ function InspectedElementContextController({ children }: Props) {
                     };
                   }),
             context: hydrateHelper(context),
-            events: hydrateHelper(events),
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 5b404b35755b..957d84442184 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -6,7 +6,6 @@ import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
-import EventsTree from './EventsTree';
 import { ModalDialogContext } from '../ModalDialog';
 import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
@@ -253,7 +252,6 @@ function InspectedElementView({
     canEditHooks,
     canToggleSuspense,
     context,
-    events,
     hooks,
     owners,
     props,
@@ -367,13 +365,6 @@ function InspectedElementView({
         inspectPath={inspectContextPath}
         overrideValueFn={overrideContextFn}
       />
-      {events !== null && events.length > 0 && (
-        <EventsTree
-          events={events}
-          getInspectedElementPath={getInspectedElementPath}
-          id={id}
-        />
-      )}
 
       <NativeStyleEditor />
 
diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js
index 6d88ce8fd8ac..bba0b300c9f7 100644
--- a/src/devtools/views/Components/types.js
+++ b/src/devtools/views/Components/types.js
@@ -66,7 +66,6 @@ export type InspectedElement = {|
 
   // Inspectable properties.
   context: Object | null,
-  events: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js
index 39e516eb4625..6b62b935f17e 100644
--- a/src/devtools/views/Settings/ComponentsSettings.js
+++ b/src/devtools/views/Settings/ComponentsSettings.js
@@ -21,7 +21,6 @@ import {
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
-  ElementTypeEventTarget,
   ElementTypeFunction,
   ElementTypeForwardRef,
   ElementTypeHostComponent,
@@ -328,7 +327,6 @@ export default function ComponentsSettings(_: {||}) {
                   >
                     <option value={ElementTypeClass}>class</option>
                     <option value={ElementTypeContext}>context</option>
-                    <option value={ElementTypeEventTarget}>event</option>
                     <option value={ElementTypeFunction}>function</option>
                     <option value={ElementTypeForwardRef}>forward ref</option>
                     <option value={ElementTypeHostComponent}>
diff --git a/src/types.js b/src/types.js
index 446e63ddc709..f6ac70cee663 100644
--- a/src/types.js
+++ b/src/types.js
@@ -12,8 +12,6 @@ export type Wall = {|
 // If new element types are added, use new numbers rather than re-ordering existing ones.
 export const ElementTypeClass = 1;
 export const ElementTypeContext = 2;
-export const ElementTypeEventComponent = 3;
-export const ElementTypeEventTarget = 4;
 export const ElementTypeFunction = 5;
 export const ElementTypeForwardRef = 6;
 export const ElementTypeHostComponent = 7;

From c6fb74391027510d43db2d59d9d2a9c044dc6fc4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Jul 2019 09:13:45 -0700
Subject: [PATCH 775/814] Flow type cleanup

---
 src/types.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/types.js b/src/types.js
index f6ac70cee663..a9999784920f 100644
--- a/src/types.js
+++ b/src/types.js
@@ -10,6 +10,10 @@ export type Wall = {|
 // The values below are referenced by ComponentFilters (which are saved via localStorage).
 // Do not change them or it will break previously saved user customizations.
 // If new element types are added, use new numbers rather than re-ordering existing ones.
+//
+// Changing these types is also a backwards breaking change for the standalone shell,
+// since the frontend and backend must share the same values-
+// and the backend is embedded in certain environments (like React Native).
 export const ElementTypeClass = 1;
 export const ElementTypeContext = 2;
 export const ElementTypeFunction = 5;
@@ -24,7 +28,7 @@ export const ElementTypeSuspense = 12;
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 // WARNING
 // The values below are referenced by ComponentFilters (which are saved via localStorage).

From 1e8aa8105ab10ee7c4ec49a405fcc7976820da4c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Jul 2019 09:28:45 -0700
Subject: [PATCH 776/814] Re-enable "view source" button for standalone shell

But only do this if we can verify the element file path. This hopefully avoids the case where clicking the button does nothing because of an invalid/incomplete path.
---
 .../src/{launchEditor.js => editor.js}        | 29 ++++++++++++-----
 .../react-devtools-core/src/standalone.js     | 24 ++++++++++----
 src/devtools/store.js                         |  8 -----
 .../views/Components/SelectedElement.js       | 32 ++++++++++---------
 .../Components/ViewElementSourceContext.js    |  7 ++--
 src/devtools/views/DevTools.js                | 15 +++++----
 6 files changed, 70 insertions(+), 45 deletions(-)
 rename packages/react-devtools-core/src/{launchEditor.js => editor.js} (90%)

diff --git a/packages/react-devtools-core/src/launchEditor.js b/packages/react-devtools-core/src/editor.js
similarity index 90%
rename from packages/react-devtools-core/src/launchEditor.js
rename to packages/react-devtools-core/src/editor.js
index 94628be8582e..26043f07f650 100644
--- a/packages/react-devtools-core/src/launchEditor.js
+++ b/packages/react-devtools-core/src/editor.js
@@ -102,31 +102,44 @@ function guessEditor(): Array<string> {
 
 let childProcess = null;
 
-export default function launchEditor(
+export function getValidFilePath(
   maybeRelativePath: string,
-  lineNumber: number,
   absoluteProjectRoots: Array<string>
-) {
+): string | null {
   // We use relative paths at Facebook with deterministic builds.
   // This is why our internal tooling calls React DevTools with absoluteProjectRoots.
   // If the filename is absolute then we don't need to care about this.
-  let filePath;
   if (isAbsolute(maybeRelativePath)) {
     if (existsSync(maybeRelativePath)) {
-      filePath = maybeRelativePath;
+      return maybeRelativePath;
     }
   } else {
     for (let i = 0; i < absoluteProjectRoots.length; i++) {
       const projectRoot = absoluteProjectRoots[i];
       const joinedPath = join(projectRoot, maybeRelativePath);
       if (existsSync(joinedPath)) {
-        filePath = joinedPath;
-        break;
+        return joinedPath;
       }
     }
   }
 
-  if (!filePath) {
+  return null;
+}
+
+export function doesFilePathExist(
+  maybeRelativePath: string,
+  absoluteProjectRoots: Array<string>
+): boolean {
+  return getValidFilePath(maybeRelativePath, absoluteProjectRoots) !== null;
+}
+
+export function launchEditor(
+  maybeRelativePath: string,
+  lineNumber: number,
+  absoluteProjectRoots: Array<string>
+) {
+  const filePath = getValidFilePath(maybeRelativePath, absoluteProjectRoots);
+  if (filePath === null) {
     return;
   }
 
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 27774b380d96..a88691d77ed8 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -14,7 +14,7 @@ import { Server } from 'ws';
 import { existsSync, readFileSync } from 'fs';
 import { installHook } from 'src/hook';
 import DevTools from 'src/devtools/views/DevTools';
-import launchEditor from './launchEditor';
+import { doesFilePathExist, launchEditor } from './editor';
 import { __DEBUG__ } from 'src/constants';
 
 import type { FrontendBridge } from 'src/bridge';
@@ -85,16 +85,31 @@ function reload() {
     root.render(
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
+        canViewElementSourceFunction,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
         viewElementSourceFunction,
-        viewElementSourceRequiresFileLocation: true,
       })
     );
   }, 100);
 }
 
+function canViewElementSourceFunction(
+  inspectedElement: InspectedElement
+): boolean {
+  if (
+    inspectedElement.canViewSource === false ||
+    inspectedElement.source === null
+  ) {
+    return false;
+  }
+
+  const { source } = inspectedElement;
+
+  return doesFilePathExist(source.fileName, projectRoots);
+}
+
 function viewElementSourceFunction(
   id: number,
   inspectedElement: InspectedElement
@@ -171,10 +186,7 @@ function initialize(socket: WebSocket) {
     socket.close();
   });
 
-  store = new Store(bridge, {
-    supportsNativeInspection: false,
-    supportsViewSource: projectRoots.length > 0,
-  });
+  store = new Store(bridge, { supportsNativeInspection: false });
 
   log('Connected');
   reload();
diff --git a/src/devtools/store.js b/src/devtools/store.js
index b843831e1dee..adaccfe24b27 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -49,7 +49,6 @@ type Config = {|
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
-  supportsViewSource?: boolean,
 |};
 
 export type Capabilities = {|
@@ -125,7 +124,6 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
-  _supportsViewSource: boolean = true;
 
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
@@ -157,7 +155,6 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
-        supportsViewSource,
       } = config;
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
@@ -165,7 +162,6 @@ export default class Store extends EventEmitter<{|
           localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
       }
       this._supportsNativeInspection = supportsNativeInspection !== false;
-      this._supportsViewSource = supportsViewSource !== false;
       if (supportsProfiling) {
         this._supportsProfiling = true;
       }
@@ -365,10 +361,6 @@ export default class Store extends EventEmitter<{|
     return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
 
-  get supportsViewSource(): boolean {
-    return this._supportsViewSource;
-  }
-
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
index 957d84442184..30e9bd527014 100644
--- a/src/devtools/views/Components/SelectedElement.js
+++ b/src/devtools/views/Components/SelectedElement.js
@@ -34,9 +34,10 @@ export type Props = {||};
 export default function SelectedElement(_: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
-  const { isFileLocationRequired, viewElementSourceFunction } = useContext(
-    ViewElementSourceContext
-  );
+  const {
+    canViewElementSourceFunction,
+    viewElementSourceFunction,
+  } = useContext(ViewElementSourceContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
@@ -90,11 +91,14 @@ export default function SelectedElement(_: Props) {
     }
   }, [inspectedElement, viewElementSourceFunction]);
 
+  // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
+  // To detect this case, we defer to an injected helper function (if present).
   const canViewSource =
-    inspectedElement &&
+    inspectedElement !== null &&
     inspectedElement.canViewSource &&
     viewElementSourceFunction !== null &&
-    (!isFileLocationRequired || inspectedElement.source !== null);
+    (canViewElementSourceFunction === null ||
+      canViewElementSourceFunction(inspectedElement));
 
   const isSuspended =
     element !== null &&
@@ -201,16 +205,14 @@ export default function SelectedElement(_: Props) {
         >
           <ButtonIcon type="log-data" />
         </Button>
-        {store.supportsViewSource && (
-          <Button
-            className={styles.IconButton}
-            disabled={!canViewSource}
-            onClick={viewSource}
-            title="View source for this element"
-          >
-            <ButtonIcon type="view-source" />
-          </Button>
-        )}
+        <Button
+          className={styles.IconButton}
+          disabled={!canViewSource}
+          onClick={viewSource}
+          title="View source for this element"
+        >
+          <ButtonIcon type="view-source" />
+        </Button>
       </div>
 
       {inspectedElement === null && (
diff --git a/src/devtools/views/Components/ViewElementSourceContext.js b/src/devtools/views/Components/ViewElementSourceContext.js
index 0e76f7c56eb3..30a3f017af20 100644
--- a/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/src/devtools/views/Components/ViewElementSourceContext.js
@@ -2,10 +2,13 @@
 
 import { createContext } from 'react';
 
-import type { ViewElementSource } from 'src/devtools/views/DevTools';
+import type {
+  CanViewElementSource,
+  ViewElementSource,
+} from 'src/devtools/views/DevTools';
 
 export type Context = {|
-  isFileLocationRequired: boolean,
+  canViewElementSourceFunction: CanViewElementSource | null,
   viewElementSourceFunction: ViewElementSource | null,
 |};
 
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index c63113dda54b..0dd3bd3ed22d 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -32,16 +32,19 @@ export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement
 ) => void;
+export type CanViewElementSource = (
+  inspectedElement: InspectedElement
+) => boolean;
 
 export type Props = {|
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
+  canViewElementSourceFunction?: ?CanViewElementSource,
   defaultTab?: TabID,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
   viewElementSourceFunction?: ?ViewElementSource,
-  viewElementSourceRequiresFileLocation?: boolean,
 
   // This property is used only by the web extension target.
   // The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.
@@ -75,6 +78,7 @@ const tabs = [componentsTab, profilerTab];
 export default function DevTools({
   bridge,
   browserTheme = 'light',
+  canViewElementSourceFunction = null,
   defaultTab = 'components',
   componentsPortalContainer,
   overrideTab,
@@ -83,8 +87,7 @@ export default function DevTools({
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
-  viewElementSourceFunction,
-  viewElementSourceRequiresFileLocation = false,
+  viewElementSourceFunction = null,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
   if (overrideTab != null && overrideTab !== tab) {
@@ -93,10 +96,10 @@ export default function DevTools({
 
   const viewElementSource = useMemo(
     () => ({
-      isFileLocationRequired: viewElementSourceRequiresFileLocation,
-      viewElementSourceFunction: viewElementSourceFunction || null,
+      canViewElementSourceFunction,
+      viewElementSourceFunction,
     }),
-    [viewElementSourceFunction, viewElementSourceRequiresFileLocation]
+    [canViewElementSourceFunction, viewElementSourceFunction]
   );
 
   return (

From 050cb8452d7255057cd7d73f31e636249a32928b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Jul 2019 10:26:52 -0700
Subject: [PATCH 777/814] 4.0.0-alpha.3 -> 4.0.0-alpha.4

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 2b8eae207bfa..280f8cb856d9 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index cd4ac8645709..579a9ac78174 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.3",
+    "react-devtools-core": "4.0.0-alpha.4",
     "update-notifier": "^2.1.0"
   }
 }

From 76c67399db8f406df3d6435ca625fb922219c450 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Jul 2019 15:10:30 -0700
Subject: [PATCH 778/814] Re-enabled packages backend build to be production
 mode (whoops)

---
 packages/react-devtools-core/webpack.backend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 3103abdd6bcf..79e633f7433b 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -14,7 +14,7 @@ const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
-  mode: 'development', // TODO TESTING __DEV__ ? 'development' : 'production',
+  mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
     backend: './src/backend.js',

From 7385de9fc233cc78572951bb26055e996823bc44 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Jul 2019 10:13:07 -0700
Subject: [PATCH 779/814] react-devtools-core standalone bugfix: prevent
 electron crash

CSS source maps require the style-loader to use URL.createObjectURL (rather than just a <style> tag). For some reason, this crashes Electron's webview process, which completely breaks the embedded extension inside of Nuclide and other Electron apps. This commit turns (CSS) source maps off for production builds to avoid this crash.
---
 packages/react-devtools-core/webpack.standalone.js | 6 +++++-
 shells/browser/shared/webpack.config.js            | 2 +-
 shells/dev/webpack.config.js                       | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index b21dfe5180b2..9818479d1637 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -57,7 +57,11 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              // WARNING It's important that we disable CSS source maps for production builds.
+              // This causes style-loader to insert styles via a <style> tag rather than URL.createObjectURL,
+              // which in turn avoids a nasty Electron/Chromium bug that breaks DevTools in Nuclide.
+              // (Calls to URL.createObjectURL seem to crash the webview process.)
+              sourceMap: __DEV__,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index dd2acc1f3c91..def3e17b87d5 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -59,7 +59,7 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: __DEV__,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 6738e1311746..feefff86b346 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -57,7 +57,7 @@ const config = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: __DEV__,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },

From 3b2905b690f61d2b136be810e067a29e55958242 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 26 Jul 2019 10:13:52 -0700
Subject: [PATCH 780/814] NPM package versions 4.0.0-alpha.4 -> 4.0.0-alpha.5

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 280f8cb856d9..b13f815877d4 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 579a9ac78174..604429d06b45 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.4",
+    "react-devtools-core": "4.0.0-alpha.5",
     "update-notifier": "^2.1.0"
   }
 }

From 29a6bf2a7bb07be2bace750409afc08a8171b9d7 Mon Sep 17 00:00:00 2001
From: Fanny <fannyvieira082@gmail.com>
Date: Sat, 27 Jul 2019 13:04:20 -0300
Subject: [PATCH 781/814] Feature: tweak search behaviour (#353)

Merge PR #353 from @fanny

This change changes search beahvior to initially select the result nearest the currently selected element (rather than selecting the first result in the set).
---
 src/devtools/views/Components/TreeContext.js | 23 ++++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 7b8f54805a7d..5af9398fe52b 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -277,7 +277,6 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
   } = state;
 
-  const prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
@@ -380,15 +379,11 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
           store.roots.forEach(rootID => {
             recursivelySearchTree(store, rootID, regExp, searchResults);
           });
-
           if (searchResults.length > 0) {
-            if (prevSearchIndex === null) {
-              searchIndex = 0;
+            if (selectedElementID !== null) {
+              searchIndex = getNearestResult(searchResults, selectedElementID);
             } else {
-              searchIndex = Math.min(
-                ((prevSearchIndex: any): number),
-                searchResults.length - 1
-              );
+              searchIndex = 0;
             }
           }
         }
@@ -760,7 +755,6 @@ function TreeContextController({
     </TreeStateContext.Provider>
   );
 }
-
 function recursivelySearchTree(
   store: Store,
   elementID: number,
@@ -780,4 +774,15 @@ function recursivelySearchTree(
   );
 }
 
+function getNearestResult(
+  searchResults: Array<number>,
+  selectedElementID: number | null
+) {
+  const result = searchResults.findIndex(
+    value => value >= ((selectedElementID: any): number)
+  );
+
+  return result === -1 ? 0 : result;
+}
+
 export { TreeDispatcherContext, TreeStateContext, TreeContextController };

From ca4aac5014a8e22d65b94ca7f2546a6c336ac741 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 27 Jul 2019 09:15:53 -0700
Subject: [PATCH 782/814] Tweaked recent search changes

1. Compare element indices rather than ids (since these don't necessarily correlate)
2. Restored previous behaior when new search text reduces the number of results past the currently-selected element.
---
 src/devtools/views/Components/TreeContext.js | 34 ++++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 5af9398fe52b..51697531f673 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -277,6 +277,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
   } = state;
 
+  const prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
@@ -380,10 +381,21 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             recursivelySearchTree(store, rootID, regExp, searchResults);
           });
           if (searchResults.length > 0) {
-            if (selectedElementID !== null) {
-              searchIndex = getNearestResult(searchResults, selectedElementID);
+            if (prevSearchIndex === null) {
+              if (selectedElementIndex !== null) {
+                searchIndex = getNearestResultIndex(
+                  store,
+                  searchResults,
+                  selectedElementIndex
+                );
+              } else {
+                searchIndex = 0;
+              }
             } else {
-              searchIndex = 0;
+              searchIndex = Math.min(
+                ((prevSearchIndex: any): number),
+                searchResults.length - 1
+              );
             }
           }
         }
@@ -774,15 +786,17 @@ function recursivelySearchTree(
   );
 }
 
-function getNearestResult(
+function getNearestResultIndex(
+  store: Store,
   searchResults: Array<number>,
-  selectedElementID: number | null
-) {
-  const result = searchResults.findIndex(
-    value => value >= ((selectedElementID: any): number)
-  );
+  selectedElementIndex: number
+): number {
+  const index = searchResults.findIndex(id => {
+    const index = store.getIndexOfElementID(id);
+    return index !== null && index >= selectedElementIndex;
+  });
 
-  return result === -1 ? 0 : result;
+  return index === -1 ? 0 : index;
 }
 
 export { TreeDispatcherContext, TreeStateContext, TreeContextController };

From 50512a223bbad09700d6a6e54717f11832375c6d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 27 Jul 2019 09:30:23 -0700
Subject: [PATCH 783/814] Reverted a Webpack config change that broke browser
 extension styles

---
 shells/browser/shared/webpack.config.js | 2 +-
 shells/dev/webpack.config.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index def3e17b87d5..dd2acc1f3c91 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -59,7 +59,7 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: __DEV__,
+              sourceMap: true,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index feefff86b346..6738e1311746 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -57,7 +57,7 @@ const config = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: __DEV__,
+              sourceMap: true,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },

From 82881ab261d35c7840e4599327c097955a40ed0f Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Sun, 28 Jul 2019 17:40:02 +0200
Subject: [PATCH 784/814] Allow Inspecting Elements Within Iframes (#355)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change adds support for element inspecting within `<iframe/>`s.

The iframes are kept in a Set so that we only append listeners once and
clean them up properly. I’ve run a few tests and it seems to behave as
expected.

The fixture includes a cross-origin iframe to make sure we do not error
in this case.
---
 shells/dev/app/Iframe/index.js         | 67 ++++++++++++++++++++++++++
 shells/dev/app/index.js                |  2 +
 src/backend/agent.js                   | 16 +++---
 src/backend/views/Highlighter/index.js | 30 ++++++++++++
 4 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 shells/dev/app/Iframe/index.js

diff --git a/shells/dev/app/Iframe/index.js b/shells/dev/app/Iframe/index.js
new file mode 100644
index 000000000000..12fbf4bbc706
--- /dev/null
+++ b/shells/dev/app/Iframe/index.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default function Iframe() {
+  return (
+    <>
+      <h2>Iframe</h2>
+      <div>
+        <Frame>
+          <Greeting />
+        </Frame>
+      </div>
+    </>
+  );
+}
+
+const iframeStyle = { border: '2px solid #eee', height: 80 };
+
+function Frame(props) {
+  const [element, setElement] = React.useState(null);
+
+  const ref = React.useRef();
+
+  React.useLayoutEffect(function() {
+    const iframe = ref.current;
+
+    if (iframe) {
+      const html = `
+    <!DOCTYPE html>
+    <html>
+    <body>
+      <div id="root"></div>
+    </body>
+    </html>
+    `;
+
+      const document = iframe.contentDocument;
+
+      document.open();
+      document.write(html);
+      document.close();
+
+      setElement(document.getElementById('root'));
+    }
+  }, []);
+
+  return (
+    <>
+      <iframe title="Test Iframe" ref={ref} style={iframeStyle} />
+      <iframe
+        title="Secured Iframe"
+        src="https://example.com"
+        style={iframeStyle}
+      />
+
+      {element ? ReactDOM.createPortal(props.children, element) : null}
+    </>
+  );
+}
+
+function Greeting() {
+  return (
+    <p>
+      Hello from within an <code>&lt;iframe&gt;</code>!
+    </p>
+  );
+}
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index d5ca32dd0890..b0609a877ca2 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -8,6 +8,7 @@ import {
   unstable_createRoot as createRoot,
 } from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
+import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
@@ -46,6 +47,7 @@ function mountTestApp() {
   mountHelper(Toggle);
   mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);
+  mountHelper(Iframe);
 }
 
 function unmountTestApp() {
diff --git a/src/backend/agent.js b/src/backend/agent.js
index 9d8c4cff3710..b23369b0f251 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -185,13 +185,15 @@ export default class Agent extends EventEmitter<{|
 
   getIDForNode(node: Object): number | null {
     for (let rendererID in this._rendererInterfaces) {
-      // A renderer will throw if it can't find a fiber for the specified node.
-      try {
-        const renderer = ((this._rendererInterfaces[
-          (rendererID: any)
-        ]: any): RendererInterface);
-        return renderer.getFiberIDForNative(node, true);
-      } catch (e) {}
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+
+      const id = renderer.getFiberIDForNative(node, true);
+
+      if (id !== null) {
+        return id;
+      }
     }
     return null;
   }
diff --git a/src/backend/views/Highlighter/index.js b/src/backend/views/Highlighter/index.js
index bd2cc5abdeb3..c50ef74c5650 100644
--- a/src/backend/views/Highlighter/index.js
+++ b/src/backend/views/Highlighter/index.js
@@ -12,6 +12,8 @@ import type { BackendBridge } from 'src/bridge';
 // It is not currently the mechanism used to highlight React Native views.
 // That is done by the React Native Inspector component.
 
+let iframesListeningTo: Set<HTMLIFrameElement> = new Set();
+
 export default function setupHighlighter(
   bridge: BackendBridge,
   agent: Agent
@@ -26,6 +28,10 @@ export default function setupHighlighter(
   bridge.addListener('stopInspectingNative', stopInspectingNative);
 
   function startInspectingNative() {
+    registerListenersOnWindow(window);
+  }
+
+  function registerListenersOnWindow(window) {
     // This plug-in may run in non-DOM environments (e.g. React Native).
     if (window && typeof window.addEventListener === 'function') {
       window.addEventListener('click', onClick, true);
@@ -40,7 +46,18 @@ export default function setupHighlighter(
 
   function stopInspectingNative() {
     hideOverlay();
+    removeListenersOnWindow(window);
+    iframesListeningTo.forEach(function(frame) {
+      try {
+        removeListenersOnWindow(frame.contentWindow);
+      } catch (error) {
+        // This can error when the iframe is on a cross-origin.
+      }
+    });
+    iframesListeningTo = new Set();
+  }
 
+  function removeListenersOnWindow(window) {
     // This plug-in may run in non-DOM environments (e.g. React Native).
     if (window && typeof window.removeEventListener === 'function') {
       window.removeEventListener('click', onClick, true);
@@ -130,6 +147,19 @@ export default function setupHighlighter(
 
     const target = ((event.target: any): HTMLElement);
 
+    if (target.tagName === 'IFRAME') {
+      const iframe: HTMLIFrameElement = (target: any);
+      try {
+        if (!iframesListeningTo.has(iframe)) {
+          const window = iframe.contentWindow;
+          registerListenersOnWindow(window);
+          iframesListeningTo.add(iframe);
+        }
+      } catch (error) {
+        // This can error when the iframe is on a cross-origin.
+      }
+    }
+
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
     showOverlay([target], null, false);

From 8e2134beee2b174ea9cd16ba1d2f5d50aaea1ead Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 28 Jul 2019 08:42:21 -0700
Subject: [PATCH 785/814] Re-add try/catch inside Agent's getIDForNode()

---
 src/backend/agent.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index b23369b0f251..a71108082740 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -189,10 +189,14 @@ export default class Agent extends EventEmitter<{|
         (rendererID: any)
       ]: any): RendererInterface);
 
-      const id = renderer.getFiberIDForNative(node, true);
-
-      if (id !== null) {
-        return id;
+      try {
+        const id = renderer.getFiberIDForNative(node, true);
+        if (id !== null) {
+          return id;
+        }
+      } catch (error) {
+        // Some old React versions might throw if they can't find a match.
+        // If so we should ignore it...
       }
     }
     return null;

From 9a36e56d342256f335ce6308fe3908ebab43dccf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 28 Jul 2019 17:21:00 -0700
Subject: [PATCH 786/814] Added missing Flow header

---
 shells/dev/app/Iframe/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/shells/dev/app/Iframe/index.js b/shells/dev/app/Iframe/index.js
index 12fbf4bbc706..8e4967ae5aca 100644
--- a/shells/dev/app/Iframe/index.js
+++ b/shells/dev/app/Iframe/index.js
@@ -1,16 +1,18 @@
-import React from 'react';
+/** @flow */
+
+import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 
 export default function Iframe() {
   return (
-    <>
+    <Fragment>
       <h2>Iframe</h2>
       <div>
         <Frame>
           <Greeting />
         </Frame>
       </div>
-    </>
+    </Fragment>
   );
 }
 
@@ -45,7 +47,7 @@ function Frame(props) {
   }, []);
 
   return (
-    <>
+    <Fragment>
       <iframe title="Test Iframe" ref={ref} style={iframeStyle} />
       <iframe
         title="Secured Iframe"
@@ -54,7 +56,7 @@ function Frame(props) {
       />
 
       {element ? ReactDOM.createPortal(props.children, element) : null}
-    </>
+    </Fragment>
   );
 }
 

From c57d2a2901b4758f5be77dad581e7a8ab68eb5af Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 10:50:56 -0700
Subject: [PATCH 787/814] Added CHANGELOG

---
 CHANGELOG.md | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++
 OVERVIEW.md  |  10 ++---
 2 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000000..5190ec63b179
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,116 @@
+# React DevTools changelog
+
+<!-- ## [Unreleased]
+<details>
+  <summary>
+    Changes that have landed in master but are not yet released.
+    Click to see more.
+  </summary>
+  
+  <!-- Upcoming changes go here
+</details> -->
+
+## 4.0.0 (release date TBD)
+
+### General changes
+
+#### Improved performance
+One of the largest performance bottlenecks of the legacy DevTools extension was the amount of message it sent across its "bridge" (an abstraction around e.g. `postMessage`). The primary goal for the DevTools rewrite was to drastically reduce this traffic.
+
+The legacy DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
+
+Learn more about these optimizations [here](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md).
+
+#### Component stacks
+
+React component authors have often requested a way to log warnings that include the React ["component stack"](https://reactjs.org/docs/error-boundaries.html#component-stack-traces). DevTools now provides an option to automatically append this information to warnings (`console.warn`) and errors (`console.error`).
+
+![Example console warning with component stack added](https://user-images.githubusercontent.com/29597/62228120-eec3da80-b371-11e9-81bb-018c1e577389.png)
+
+It can be disabled in the general settings panel:
+
+![Settings panel showing "component stacks" option](https://user-images.githubusercontent.com/29597/62227882-8f65ca80-b371-11e9-8a4e-5d27011ad1aa.png)
+
+### Components tree changes
+
+#### Component filters
+
+Large component trees can sometimes be hard to navigate. DevTools now provides a way to filter components so that you can hide ones you're not interested in seeing.
+
+![Component filter demo video](https://user-images.githubusercontent.com/29597/62229209-0bf9a880-b374-11e9-8f84-cebd6c1a016b.gif)
+
+Filter preferences are remembered between sessions.
+
+#### "Rendered by" list
+
+In React, an element's "owner" refers the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.
+
+![Example code](https://user-images.githubusercontent.com/29597/62229551-bbcf1600-b374-11e9-8411-8ff411f4f847.png)
+
+When you are debugging an unexpected prop value, you can save time if you skip over the parents.
+
+DevTools v4 adds a new "rendered by" list in the right hand pane that allows you to quickly step through the list of owners to speed up your debugging.
+
+![Example video showing the "rendered by" list](https://user-images.githubusercontent.com/29597/62229747-4152c600-b375-11e9-9930-3f6b3b92be7a.gif)
+
+#### Owners tree
+
+The inverse of the "rendered by" list is called the "owners tree". It is the list of things rendered by a particular component- (the things it "owns"). This view is kind of like looking at the source of the component's render method, and can be a helpful way to explore large, unfamiliar React applications.
+
+Double click a component to view the owners tree and click the "x" button to return to the full component tree:
+
+![Demo showing "owners tree" feature](https://user-images.githubusercontent.com/29597/62229452-84f90000-b374-11e9-818a-61eec6be0bb4.gif)
+
+#### Improved hooks support
+
+Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.
+
+![Video demonstrating hooks support](https://user-images.githubusercontent.com/29597/62230532-d86c4d80-b376-11e9-8629-1b2129b210d6.gif)
+
+#### Improved search UX
+
+Legacy DevTools search filtered the components tree to show matching nodes as roots. This made the overall structure of the application harder to reason about, because it displayed ancestors as siblings.
+
+Search results are now shown inline similar to the browser's find-in-page search.
+
+![Video demonstrating the search UX](https://user-images.githubusercontent.com/29597/62230923-c63edf00-b377-11e9-9f95-aa62ddc8f62c.gif)
+
+#### Suspense toggle
+
+React's experimental [Suspense API](https://reactjs.org/docs/react-api.html#suspense) lets components "wait" for something before rendering. `<Suspense>` components can be used to specify loading states when components deeper in the tree are waiting to render.
+
+DevTools lets you test these loading states with a new toggle:
+
+![Video demonstrating suspense toggle UI](https://user-images.githubusercontent.com/29597/62231446-e15e1e80-b378-11e9-92d4-086751dc65fc.gif)
+
+### Profiler changes
+
+#### Reload and profile
+
+The profiler is a powerful tool for performing tuning React components. Legacy DevTools supported profiling, but only after it detected a profiling-capable version of React. Because of this there was no way to profile the initial _mount_ (one of the most performance sensitive parts) of an application.
+
+This feature is now supported with a "reload and profile" action:
+
+![Video demonstrating the reload-and-profile feature](https://user-images.githubusercontent.com/29597/62233455-7a8f3400-b37d-11e9-9563-ec334bfb2572.gif)
+
+#### Import/export
+
+Profiler data can now be exported and shared with other developers to enable easier collaboration.
+
+![Video demonstrating exporting and importing profiler data](https://user-images.githubusercontent.com/29597/62233911-6566d500-b37e-11e9-9052-692378c92538.gif)
+
+Exports include all commits, timings, interactions, etc.
+
+#### "Why did this render?"
+
+"Why did this render?" is a common question when profiling. The profiler now helps answer this question by recording which props and state change between renders.
+
+![Video demonstrating profiler "why did this render?" feature](https://user-images.githubusercontent.com/29597/62234698-0f932c80-b380-11e9-8cf3-a5183af0c388.gif)
+
+Because this feature adds a small amount of overhead, it can be disabled in the profiler settings panel.
+
+#### Component renders list
+
+The profiler now displays a list of each time the selected component rendered during a profiling session, along with the duration of each render. This list can be used to quickly jump between commits when analyzing the performance of a specific component.
+
+![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
diff --git a/OVERVIEW.md b/OVERVIEW.md
index eba370d98b3e..f4f849096a2c 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -1,14 +1,14 @@
 # Overview
 
 The React DevTools extension consists of multiple pieces:
-* The **frontend** portion is the extension you see (the Elements tree, the Profiler, etc.).
+* The **frontend** portion is the extension you see (the Components tree, the Profiler, etc.).
 * The **backend** portion is invisible. It runs in the same context as React itself. When React commits changes to e.g. the DOM, the backend is responsible for notifying the frontend by sending a message through the **bridge** (an abstraction around e.g. `postMessage`).
 
-One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic. Each time React commits an update, the backend sends every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, **the backend should only send the minimum amount required to render the Elements tree**. The frontend can request more information (e.g. an element's props) on demand, only as needed.
+One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic. Each time React commits an update, the backend sends every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, **the backend should only send the minimum amount required to render the Components tree**. The frontend can request more information (e.g. an element's props) on demand, only as needed.
 
 The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
 
-## Elements panel
+## Components panel
 
 ### Serializing the tree
 
@@ -160,9 +160,9 @@ The frontend stores its information about the tree in a map of id to objects wit
 * depth: `number` <sup>1</sup>
 * weight: `number` <sup>2</sup>
 
-<sup>1</sup> The `depth` value determines how much padding/indentation to use for the element when rendering it in the Elements panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
+<sup>1</sup> The `depth` value determines how much padding/indentation to use for the element when rendering it in the Components panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
 
-<sup>2</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
+<sup>2</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Components as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
 
 #### Finding the element at index N
 

From 4f8b7864eea378841ef7e4a41aeec92d54431084 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 11:22:51 -0700
Subject: [PATCH 788/814] Add "Welcome to the new DevTools" notification

This dialog is shown in the browser extension the first time a user views v4. It is off by default for the standalone extension, but can be enabled via a public API.
---
 .../react-devtools-core/src/standalone.js     | 12 ++++
 shells/browser/shared/src/main.js             |  1 +
 shells/dev/src/devtools.js                    |  1 +
 src/constants.js                              |  3 +
 src/devtools/views/DevTools.js                |  6 ++
 src/devtools/views/ModalDialog.css            |  4 ++
 src/devtools/views/ModalDialog.js             | 27 ++++++--
 src/devtools/views/ReactLogo.js               |  8 ++-
 .../views/Settings/GeneralSettings.js         | 13 ++++
 .../views/Settings/SettingsShared.css         | 11 ++++
 .../ShowWelcomeToTheNewDevToolsDialog.css     | 26 ++++++++
 .../ShowWelcomeToTheNewDevToolsDialog.js      | 64 +++++++++++++++++++
 src/devtools/views/hooks.js                   | 19 +++---
 13 files changed, 180 insertions(+), 15 deletions(-)
 create mode 100644 src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
 create mode 100644 src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index a88691d77ed8..c93a3de81254 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -29,6 +29,11 @@ let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
 
+// Unlike browser extension users, people using the standalone have actively installed version 4,
+// So we probably don't need to show them a changelog notice.
+// We should give embedded users (e.g. Nuclide, Sonar) a way of showing this dialog though.
+let showWelcomeToTheNewDevToolsDialog: boolean = false;
+
 function setContentDOMNode(value: HTMLElement) {
   node = value;
 
@@ -47,6 +52,11 @@ function setStatusListener(value: StatusListener) {
   return DevtoolsUI;
 }
 
+function setShowWelcomeToTheNewDevToolsDialog(value: boolean) {
+  showWelcomeToTheNewDevToolsDialog = value;
+  return DevtoolsUI;
+}
+
 let bridge: FrontendBridge | null = null;
 let store: Store | null = null;
 let root = null;
@@ -87,6 +97,7 @@ function reload() {
         bridge: ((bridge: any): FrontendBridge),
         canViewElementSourceFunction,
         showTabBar: true,
+        showWelcomeToTheNewDevToolsDialog,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
         viewElementSourceFunction,
@@ -300,6 +311,7 @@ const DevtoolsUI = {
   connectToSocket,
   setContentDOMNode,
   setProjectRoots,
+  setShowWelcomeToTheNewDevToolsDialog,
   setStatusListener,
   startServer,
 };
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 3554ed03eee1..8263adab5367 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -155,6 +155,7 @@ function createPanelIfReactLoaded() {
               profilerPortalContainer,
               settingsPortalContainer,
               showTabBar: false,
+              showWelcomeToTheNewDevToolsDialog: true,
               store,
               viewElementSourceFunction,
             })
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 2afed0c20863..5727856dd98b 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -76,6 +76,7 @@ inject('dist/app.js', () => {
           bridge,
           browserTheme: 'light',
           showTabBar: true,
+          showWelcomeToTheNewDevToolsDialog: true,
           store,
           warnIfLegacyBackendDetected: true,
         })
diff --git a/src/constants.js b/src/constants.js
index da55631a01e4..d18624fbf04f 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -24,3 +24,6 @@ export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 
 export const PROFILER_EXPORT_VERSION = 4;
+
+export const CHANGE_LOG_URL =
+  'https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md';
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 0dd3bd3ed22d..864198c4b694 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -18,6 +18,7 @@ import { ProfilerContextController } from './Profiler/ProfilerContext';
 import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
+import ShowWelcomeToTheNewDevToolsDialog from './ShowWelcomeToTheNewDevToolsDialog';
 
 import styles from './DevTools.css';
 
@@ -42,6 +43,7 @@ export type Props = {|
   canViewElementSourceFunction?: ?CanViewElementSource,
   defaultTab?: TabID,
   showTabBar?: boolean,
+  showWelcomeToTheNewDevToolsDialog?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
   viewElementSourceFunction?: ?ViewElementSource,
@@ -85,6 +87,7 @@ export default function DevTools({
   profilerPortalContainer,
   settingsPortalContainer,
   showTabBar = false,
+  showWelcomeToTheNewDevToolsDialog = false,
   store,
   warnIfLegacyBackendDetected = false,
   viewElementSourceFunction = null,
@@ -150,6 +153,9 @@ export default function DevTools({
             </ViewElementSourceContext.Provider>
           </SettingsContextController>
           {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+          {showWelcomeToTheNewDevToolsDialog && (
+            <ShowWelcomeToTheNewDevToolsDialog />
+          )}
         </ModalDialogContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
diff --git a/src/devtools/views/ModalDialog.css b/src/devtools/views/ModalDialog.css
index f01a1af5a0ae..378e8e73b4b3 100644
--- a/src/devtools/views/ModalDialog.css
+++ b/src/devtools/views/ModalDialog.css
@@ -34,3 +34,7 @@
   text-align: right;
   margin-top: 0.5rem;
 }
+
+.Button {
+  font-size: var(--font-size-sans-large);
+}
diff --git a/src/devtools/views/ModalDialog.js b/src/devtools/views/ModalDialog.js
index 2cceb9a49e03..e8fd44c93a8e 100644
--- a/src/devtools/views/ModalDialog.js
+++ b/src/devtools/views/ModalDialog.js
@@ -109,18 +109,35 @@ function ModalDialogImpl(_: {||}) {
       dispatch({ type: 'HIDE' });
     }
   }, [canBeDismissed, dispatch]);
-  const modalRef = useRef<HTMLDivElement | null>(null);
+  const dialogRef = useRef<HTMLDivElement | null>(null);
 
-  useModalDismissSignal(modalRef, dismissModal);
+  // It's important to trap click events within the dialog,
+  // so the dismiss hook will use it for click hit detection.
+  // Because multiple tabs may be showing this ModalDialog,
+  // the normal `dialog.contains(target)` check would fail on a background tab.
+  useModalDismissSignal(dialogRef, dismissModal, false);
+
+  // Clicks on the dialog should not bubble.
+  // This way we can dismiss by listening to clicks on the background.
+  const handleDialogClick = (event: any) => {
+    event.stopPropagation();
+
+    // It is important that we don't also prevent default,
+    // or clicks within the dialog (e.g. on links) won't work.
+  };
 
   return (
-    <div className={styles.Background}>
-      <div className={styles.Dialog} ref={modalRef}>
+    <div className={styles.Background} onClick={dismissModal}>
+      <div
+        ref={dialogRef}
+        className={styles.Dialog}
+        onClick={handleDialogClick}
+      >
         {title !== null && <div className={styles.Title}>{title}</div>}
         {content}
         {canBeDismissed && (
           <div className={styles.Buttons}>
-            <Button autoFocus onClick={dismissModal}>
+            <Button autoFocus className={styles.Button} onClick={dismissModal}>
               Okay
             </Button>
           </div>
diff --git a/src/devtools/views/ReactLogo.js b/src/devtools/views/ReactLogo.js
index d7f33639c7d8..358a3a8ec8a8 100644
--- a/src/devtools/views/ReactLogo.js
+++ b/src/devtools/views/ReactLogo.js
@@ -4,11 +4,15 @@ import React from 'react';
 
 import styles from './ReactLogo.css';
 
-export default function ReactLogo() {
+type Props = {|
+  className?: string,
+|};
+
+export default function ReactLogo({ className }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.ReactLogo}
+      className={`${styles.ReactLogo} ${className || ''}`}
       viewBox="-11.5 -10.23174 23 20.46348"
     >
       <circle cx="0" cy="0" r="2.05" fill="currentColor" />
diff --git a/src/devtools/views/Settings/GeneralSettings.js b/src/devtools/views/Settings/GeneralSettings.js
index 60d61bb817fa..8b8692d739b5 100644
--- a/src/devtools/views/Settings/GeneralSettings.js
+++ b/src/devtools/views/Settings/GeneralSettings.js
@@ -2,6 +2,7 @@
 
 import React, { useContext } from 'react';
 import { SettingsContext } from './SettingsContext';
+import { CHANGE_LOG_URL } from 'src/constants';
 
 import styles from './SettingsShared.css';
 
@@ -54,6 +55,18 @@ export default function GeneralSettings(_: {||}) {
           Append component stacks to console warnings and errors.
         </label>
       </div>
+
+      <div className={styles.ReleaseNotes}>
+        <a
+          className={styles.ReleaseNotesLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          href={CHANGE_LOG_URL}
+        >
+          View release notes
+        </a>{' '}
+        for DevTools version {process.env.DEVTOOLS_VERSION}
+      </div>
     </div>
   );
 }
diff --git a/src/devtools/views/Settings/SettingsShared.css b/src/devtools/views/Settings/SettingsShared.css
index f816d4346b69..cafbe1bedef4 100644
--- a/src/devtools/views/Settings/SettingsShared.css
+++ b/src/devtools/views/Settings/SettingsShared.css
@@ -134,3 +134,14 @@
   height: 0.375rem;
   background-color: var(--color-toggle-text);
 }
+
+.ReleaseNotes {
+  width: 100%;
+  background-color: var(--color-background-hover);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.ReleaseNotesLink {
+  color: var(--color-button-active);
+}
diff --git a/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css b/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
new file mode 100644
index 000000000000..8168d947d218
--- /dev/null
+++ b/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
@@ -0,0 +1,26 @@
+.Row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.Column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Logo {
+  height: 4rem;
+  width: 4rem;
+  margin: 1rem;
+}
+
+.Title {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.ReleaseNotesLink {
+  color: var(--color-button-active);
+}
diff --git a/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js b/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
new file mode 100644
index 000000000000..025c3f338c0c
--- /dev/null
+++ b/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
@@ -0,0 +1,64 @@
+// @flow
+
+import React, { Fragment, useContext, useEffect } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { useLocalStorage } from './hooks';
+import { ModalDialogContext } from './ModalDialog';
+import ReactLogo from './ReactLogo';
+import { CHANGE_LOG_URL } from 'src/constants';
+
+import styles from './ShowWelcomeToTheNewDevToolsDialog.css';
+
+const LOCAL_STORAGE_KEY =
+  'React::DevTools::hasShownWelcomeToTheNewDevToolsDialog';
+
+export default function ShowWelcomeToTheNewDevToolsDialog(_: {||}) {
+  const { dispatch } = useContext(ModalDialogContext);
+  const [
+    hasShownWelcomeToTheNewDevToolsDialog,
+    setHasShownWelcomeToTheNewDevToolsDialog,
+  ] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY, false);
+
+  useEffect(() => {
+    if (!hasShownWelcomeToTheNewDevToolsDialog) {
+      batchedUpdates(() => {
+        setHasShownWelcomeToTheNewDevToolsDialog(true);
+        dispatch({
+          canBeDismissed: true,
+          type: 'SHOW',
+          content: <DialogContent />,
+        });
+      });
+    }
+  }, [
+    dispatch,
+    hasShownWelcomeToTheNewDevToolsDialog,
+    setHasShownWelcomeToTheNewDevToolsDialog,
+  ]);
+
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <div className={styles.Row}>
+        <ReactLogo className={styles.Logo} />
+        <div>
+          <div className={styles.Title}>Welcome to the new React DevTools!</div>
+          <div>
+            <a
+              className={styles.ReleaseNotesLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              href={CHANGE_LOG_URL}
+            >
+              Learn more
+            </a>{' '}
+            about changes in this version.
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/src/devtools/views/hooks.js b/src/devtools/views/hooks.js
index ae963047a41e..abbf5bcdde82 100644
--- a/src/devtools/views/hooks.js
+++ b/src/devtools/views/hooks.js
@@ -95,20 +95,21 @@ export function useLocalStorage<T>(
 
 export function useModalDismissSignal(
   modalRef: { current: HTMLDivElement | null },
-  dismissCallback: () => void
+  dismissCallback: () => void,
+  dismissOnClickOutside?: boolean = true
 ): void {
   useEffect(() => {
     if (modalRef.current === null) {
       return () => {};
     }
 
-    const handleKeyDown = ({ key }: any) => {
+    const handleDocumentKeyDown = ({ key }: any) => {
       if (key === 'Escape') {
         dismissCallback();
       }
     };
 
-    const handleClick = (event: any) => {
+    const handleDocumentClick = (event: any) => {
       // $FlowFixMe
       if (
         modalRef.current !== null &&
@@ -125,14 +126,16 @@ export function useModalDismissSignal(
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerDocument = modalRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleKeyDown);
-    ownerDocument.addEventListener('click', handleClick);
+    ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
+    if (dismissOnClickOutside) {
+      ownerDocument.addEventListener('click', handleDocumentClick);
+    }
 
     return () => {
-      ownerDocument.removeEventListener('keydown', handleKeyDown);
-      ownerDocument.removeEventListener('click', handleClick);
+      ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
+      ownerDocument.removeEventListener('click', handleDocumentClick);
     };
-  }, [modalRef, dismissCallback]);
+  }, [modalRef, dismissCallback, dismissOnClickOutside]);
 }
 
 // Copied from https://github.com/facebook/react/pull/15022

From 271aa75cf2685ff62932863c1b1eaf08b1898d1a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 11:36:01 -0700
Subject: [PATCH 789/814] Removed the Profiler screenshot capture feature

This wasn't reliable because of browser extension API limitations and required serious throttling to avoid harming performance, so I've decided to just remove it entirely for now.
---
 OVERVIEW.md                                   |  4 +-
 package.json                                  |  1 -
 shells/browser/shared/src/background.js       | 26 ---------
 shells/browser/shared/src/contentScript.js    | 12 ----
 shells/browser/shared/src/main.js             | 11 ----
 shells/dev/src/backend.js                     | 11 ----
 shells/dev/src/devtools.js                    |  2 +-
 .../__snapshots__/profilingCache-test.js.snap | 36 ------------
 src/backend/agent.js                          | 24 --------
 src/bridge.js                                 |  5 --
 src/devtools/ProfilerStore.js                 | 49 ----------------
 src/devtools/store.js                         | 31 ----------
 .../views/Profiler/SidebarCommitInfo.css      | 37 ------------
 .../views/Profiler/SidebarCommitInfo.js       | 56 +------------------
 src/devtools/views/Profiler/types.js          |  4 --
 src/devtools/views/Profiler/utils.js          |  9 ---
 .../views/Settings/ProfilerSettings.js        | 49 +---------------
 .../views/Settings/SettingsShared.css         |  7 ---
 yarn.lock                                     | 19 -------
 19 files changed, 5 insertions(+), 388 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index f4f849096a2c..3cd314d888f1 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -262,6 +262,4 @@ Once profiling is finished, the frontend requests profiling data from the backen
 
 ### Importing/exporting data
 
-Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users.
-
-At the moment, screenshots are not included in the exported data (to keep the export filesize small) but this could be changed in the future.
\ No newline at end of file
+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users.
\ No newline at end of file
diff --git a/package.json b/package.json
index a2615e14a2ac..cdfd58da14f0 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,6 @@
     "flow-bin": "^0.103.0",
     "fs-extra": "^3.0.1",
     "gh-pages": "^1.0.0",
-    "html2canvas": "^1.0.0-alpha.12",
     "immutable": "3.7.6",
     "jest": "^24.7.1",
     "lerna": "^2.8.0",
diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js
index 1090ef76d8eb..e22071b3aa65 100644
--- a/shells/browser/shared/src/background.js
+++ b/shells/browser/shared/src/background.js
@@ -109,31 +109,5 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
       setIconAndPopup(reactBuildType, sender.tab.id);
     }
-
-    if (request.captureScreenshot) {
-      const { commitIndex, rootID } = request;
-      try {
-        chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
-          // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
-          // so we have to use the chrome.tabs API for this instead.
-          chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-            if (tabs.length > 0) {
-              chrome.tabs.sendMessage(tabs[0].id, {
-                event: 'screenshotCaptured',
-                payload: {
-                  commitIndex,
-                  dataURL,
-                  rootID,
-                },
-              });
-            }
-          });
-        });
-      } catch (error) {
-        // Screen captures may not always be allowed.
-        // DevTools is robust enough to handle missing images in this case.
-        // See https://stackoverflow.com/questions/55504938
-      }
-    }
   }
 });
diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js
index af4e328f0d66..68a44e21afcf 100644
--- a/shells/browser/shared/src/contentScript.js
+++ b/shells/browser/shared/src/contentScript.js
@@ -75,15 +75,3 @@ if (!backendInitialized) {
     }
   }, 500);
 }
-
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
-  if (request.event === 'screenshotCaptured') {
-    window.postMessage(
-      {
-        source: 'react-devtools-content-script',
-        payload: request,
-      },
-      '*'
-    );
-  }
-});
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 8263adab5367..8ce8782216a3 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -97,16 +97,6 @@ function createPanelIfReactLoaded() {
           localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
           chrome.devtools.inspectedWindow.eval('window.location.reload();');
         });
-        bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
-          chrome.runtime.sendMessage(
-            {
-              captureScreenshot: true,
-              commitIndex,
-              rootID,
-            },
-            response => bridge.send('screenshotCaptured', response)
-          );
-        });
         bridge.addListener('syncSelectionToNativeElementsPanel', () => {
           setBrowserSelectionFromReact();
         });
@@ -126,7 +116,6 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsCaptureScreenshots: true,
           supportsReloadAndProfile: true,
           supportsProfiling,
         });
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
index 808230b82d43..6d0af11c43fb 100644
--- a/shells/dev/src/backend.js
+++ b/shells/dev/src/backend.js
@@ -1,6 +1,5 @@
 /** @flow */
 
-import html2canvas from 'html2canvas';
 import Agent from 'src/backend/agent';
 import Bridge from 'src/bridge';
 import { initBackend } from 'src/backend';
@@ -21,16 +20,6 @@ const bridge = new Bridge({
   },
 });
 
-bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
-  html2canvas(document.body, { logging: false }).then(canvas => {
-    bridge.send('screenshotCaptured', {
-      commitIndex,
-      dataURL: canvas.toDataURL(),
-      rootID,
-    });
-  });
-});
-
 const agent = new Agent(bridge);
 
 const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index 5727856dd98b..c8f5ba036fa6 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -67,7 +67,7 @@ inject('dist/app.js', () => {
 
       cb(bridge);
 
-      const store = new Store(bridge, { supportsCaptureScreenshots: true });
+      const store = new Store(bridge);
 
       const root = createRoot(container);
       const batch = root.createBatch();
diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 8485313a2989..82438ada7ca3 100644
--- a/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -40,7 +40,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 16,
 }
 `;
@@ -78,7 +77,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 15,
 }
 `;
@@ -105,7 +103,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 18,
 }
 `;
@@ -159,7 +156,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 12,
 }
 `;
@@ -215,7 +211,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 25,
 }
 `;
@@ -253,7 +248,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 35,
 }
 `;
@@ -282,7 +276,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 45,
 }
 `;
@@ -382,7 +375,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 12,
         },
         Object {
@@ -477,7 +469,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 25,
         },
         Object {
@@ -536,7 +527,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 35,
         },
         Object {
@@ -577,7 +567,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 45,
         },
       ],
@@ -841,7 +830,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 11,
         },
         Object {
@@ -918,7 +906,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 22,
         },
         Object {
@@ -1013,7 +1000,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 35,
         },
       ],
@@ -1213,7 +1199,6 @@ Object {
       },
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
-      "screenshot": null,
       "timestamp": 13,
     },
     Object {
@@ -1248,7 +1233,6 @@ Object {
       },
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
-      "screenshot": null,
       "timestamp": 34,
     },
     Object {
@@ -1274,7 +1258,6 @@ Object {
       },
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
-      "screenshot": null,
       "timestamp": 44,
     },
   ],
@@ -1443,7 +1426,6 @@ Object {
       },
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
-      "screenshot": null,
       "timestamp": 24,
     },
   ],
@@ -1526,7 +1508,6 @@ Object {
       "fiberSelfDurations": Map {},
       "interactionIDs": Array [],
       "priorityLevel": "Immediate",
-      "screenshot": null,
       "timestamp": 34,
     },
   ],
@@ -1688,7 +1669,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 13,
         },
         Object {
@@ -1747,7 +1727,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 34,
         },
         Object {
@@ -1788,7 +1767,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 44,
         },
       ],
@@ -2017,7 +1995,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 24,
         },
       ],
@@ -2097,7 +2074,6 @@ Object {
           "fiberSelfDurations": Array [],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 34,
         },
       ],
@@ -2249,7 +2225,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 0,
 }
 `;
@@ -2320,7 +2295,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 0,
 }
 `;
@@ -2387,7 +2361,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 0,
 }
 `;
@@ -2455,7 +2428,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 0,
 }
 `;
@@ -2522,7 +2494,6 @@ Object {
   },
   "interactionIDs": Array [],
   "priorityLevel": "Immediate",
-  "screenshot": null,
   "timestamp": 0,
 }
 `;
@@ -2648,7 +2619,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 0,
         },
         Object {
@@ -2767,7 +2737,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 0,
         },
         Object {
@@ -2888,7 +2857,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 0,
         },
         Object {
@@ -3010,7 +2978,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 0,
         },
         Object {
@@ -3131,7 +3098,6 @@ Object {
           ],
           "interactionIDs": Array [],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 0,
         },
       ],
@@ -3445,7 +3411,6 @@ Object {
             0,
           ],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 11,
         },
         Object {
@@ -3524,7 +3489,6 @@ Object {
             1,
           ],
           "priorityLevel": "Immediate",
-          "screenshot": null,
           "timestamp": 22,
         },
       ],
diff --git a/src/backend/agent.js b/src/backend/agent.js
index a71108082740..fa2df90f73ea 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -113,7 +113,6 @@ export default class Agent extends EventEmitter<{|
 
     this._bridge = bridge;
 
-    bridge.addListener('captureScreenshot', this.captureScreenshot);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getOwnersList', this.getOwnersList);
@@ -125,7 +124,6 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
-    bridge.addListener('screenshotCaptured', this.screenshotCaptured);
     bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopProfiling', this.stopProfiling);
@@ -161,16 +159,6 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
-  captureScreenshot = ({
-    commitIndex,
-    rootID,
-  }: {
-    commitIndex: number,
-    rootID: number,
-  }) => {
-    this._bridge.send('captureScreenshot', { commitIndex, rootID });
-  };
-
   getInstanceAndStyle({
     id,
     rendererID,
@@ -256,18 +244,6 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('reloadAppForProfiling');
   };
 
-  screenshotCaptured = ({
-    commitIndex,
-    dataURL,
-    rootID,
-  }: {|
-    commitIndex: number,
-    dataURL: string,
-    rootID: number,
-  |}) => {
-    this._bridge.send('screenshotCaptured', { commitIndex, dataURL, rootID });
-  };
-
   selectElement = ({ id, rendererID }: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/bridge.js b/src/bridge.js
index b8ab73e710e9..f9101e582bee 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -63,7 +63,6 @@ type NativeStyleEditor_SetValueParams = {|
 |};
 
 type BackendEvents = {|
-  captureScreenshot: [{| commitIndex: number, rootID: number |}],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   operations: [Array<number>],
@@ -72,9 +71,6 @@ type BackendEvents = {|
   profilingData: [ProfilingDataBackend],
   profilingStatus: [boolean],
   reloadAppForProfiling: [],
-  screenshotCaptured: [
-    {| commitIndex: number, dataURL: string, rootID: number |},
-  ],
   selectFiber: [number],
   shutdown: [],
   stopInspectingNative: [boolean],
@@ -89,7 +85,6 @@ type BackendEvents = {|
 |};
 
 type FrontendEvents = {|
-  captureScreenshot: [{| commitIndex: number, rootID: number |}],
   clearNativeElementHighlight: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{| rendererID: RendererID |}],
diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js
index eb79c41e65b0..103947ac8c80 100644
--- a/src/devtools/ProfilerStore.js
+++ b/src/devtools/ProfilerStore.js
@@ -1,8 +1,6 @@
 // @flow
 
 import EventEmitter from 'events';
-import memoize from 'memoize-one';
-import throttle from 'lodash.throttle';
 import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
 import ProfilingCache from './ProfilingCache';
 import Store from './store';
@@ -16,8 +14,6 @@ import type {
   SnapshotNode,
 } from './views/Profiler/types';
 
-const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
-
 export default class ProfilerStore extends EventEmitter<{|
   isProcessingData: [],
   isProfiling: [],
@@ -62,13 +58,6 @@ export default class ProfilerStore extends EventEmitter<{|
   // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
   _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();
 
-  // Map of root (id) to a Map of screenshots by commit ID.
-  // Stores screenshots for each commit (when profiling).
-  //
-  // This map is only updated while profiling is in progress;
-  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
-  _inProgressScreenshotsByRootID: Map<number, Map<number, string>> = new Map();
-
   // The backend is currently profiling.
   // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
   _isProfiling: boolean = false;
@@ -164,7 +153,6 @@ export default class ProfilerStore extends EventEmitter<{|
     this._initialRendererIDs.clear();
     this._initialSnapshotsByRootID.clear();
     this._inProgressOperationsByRootID.clear();
-    this._inProgressScreenshotsByRootID.clear();
     this._cache.invalidate();
 
     this.emit('profilingData');
@@ -176,7 +164,6 @@ export default class ProfilerStore extends EventEmitter<{|
     this._initialRendererIDs.clear();
     this._initialSnapshotsByRootID.clear();
     this._inProgressOperationsByRootID.clear();
-    this._inProgressScreenshotsByRootID.clear();
     this._rendererQueue.clear();
 
     // Invalidate suspense cache if profiling data is being (re-)recorded.
@@ -204,13 +191,6 @@ export default class ProfilerStore extends EventEmitter<{|
     // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
-  _captureScreenshot = throttle(
-    memoize((rootID: number, commitIndex: number) => {
-      this._bridge.send('captureScreenshot', { commitIndex, rootID });
-    }),
-    THROTTLE_CAPTURE_SCREENSHOT_DURATION
-  );
-
   _takeProfilingSnapshotRecursive = (
     elementID: number,
     profilingSnapshots: Map<number, SnapshotNode>
@@ -253,11 +233,6 @@ export default class ProfilerStore extends EventEmitter<{|
       if (!this._initialSnapshotsByRootID.has(rootID)) {
         this._initialSnapshotsByRootID.set(rootID, new Map());
       }
-
-      if (this._store.captureScreenshots) {
-        const commitIndex = profilingOperations.length - 1;
-        this._captureScreenshot(rootID, commitIndex);
-      }
     }
   };
 
@@ -282,7 +257,6 @@ export default class ProfilerStore extends EventEmitter<{|
       this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(
         this._dataBackends,
         this._inProgressOperationsByRootID,
-        this._inProgressScreenshotsByRootID,
         this._initialSnapshotsByRootID
       );
 
@@ -306,7 +280,6 @@ export default class ProfilerStore extends EventEmitter<{|
       this._initialRendererIDs.clear();
       this._initialSnapshotsByRootID.clear();
       this._inProgressOperationsByRootID.clear();
-      this._inProgressScreenshotsByRootID.clear();
       this._rendererQueue.clear();
 
       // Record all renderer IDs initially too (in case of unmount)
@@ -354,26 +327,4 @@ export default class ProfilerStore extends EventEmitter<{|
       }
     }
   };
-
-  onScreenshotCaptured = ({
-    commitIndex,
-    dataURL,
-    rootID,
-  }: {|
-    commitIndex: number,
-    dataURL: string,
-    rootID: number,
-  |}) => {
-    let screenshotsForRootByCommitIndex = this._inProgressScreenshotsByRootID.get(
-      rootID
-    );
-    if (!screenshotsForRootByCommitIndex) {
-      screenshotsForRootByCommitIndex = new Map();
-      this._inProgressScreenshotsByRootID.set(
-        rootID,
-        screenshotsForRootByCommitIndex
-      );
-    }
-    screenshotsForRootByCommitIndex.set(commitIndex, dataURL);
-  };
 }
diff --git a/src/devtools/store.js b/src/devtools/store.js
index adaccfe24b27..41db44634f60 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -36,8 +36,6 @@ const debug = (methodName, ...args) => {
   }
 };
 
-const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
-  'React::DevTools::captureScreenshots';
 const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
   'React::DevTools::collapseNodesByDefault';
 const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
@@ -45,7 +43,6 @@ const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
 
 type Config = {|
   isProfiling?: boolean,
-  supportsCaptureScreenshots?: boolean,
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
@@ -61,7 +58,6 @@ export type Capabilities = {|
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter<{|
-  captureScreenshots: [],
   collapseNodesByDefault: [],
   componentFilters: [],
   mutated: [[Array<number>, Map<number, number>]],
@@ -73,8 +69,6 @@ export default class Store extends EventEmitter<{|
 |}> {
   _bridge: FrontendBridge;
 
-  _captureScreenshots: boolean = false;
-
   // Should new nodes be collapsed by default when added to the tree?
   _collapseNodesByDefault: boolean = true;
 
@@ -120,7 +114,6 @@ export default class Store extends EventEmitter<{|
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
-  _supportsCaptureScreenshots: boolean = false;
   _supportsNativeInspection: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
@@ -151,16 +144,10 @@ export default class Store extends EventEmitter<{|
       isProfiling = config.isProfiling === true;
 
       const {
-        supportsCaptureScreenshots,
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
       } = config;
-      if (supportsCaptureScreenshots) {
-        this._supportsCaptureScreenshots = true;
-        this._captureScreenshots =
-          localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
-      }
       this._supportsNativeInspection = supportsNativeInspection !== false;
       if (supportsProfiling) {
         this._supportsProfiling = true;
@@ -222,20 +209,6 @@ export default class Store extends EventEmitter<{|
     }
   }
 
-  get captureScreenshots(): boolean {
-    return this._captureScreenshots;
-  }
-  set captureScreenshots(value: boolean): void {
-    this._captureScreenshots = value;
-
-    localStorageSetItem(
-      LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY,
-      value ? 'true' : 'false'
-    );
-
-    this.emit('captureScreenshots');
-  }
-
   get collapseNodesByDefault(): boolean {
     return this._collapseNodesByDefault;
   }
@@ -338,10 +311,6 @@ export default class Store extends EventEmitter<{|
     return this._roots;
   }
 
-  get supportsCaptureScreenshots(): boolean {
-    return this._supportsCaptureScreenshots;
-  }
-
   get supportsNativeInspection(): boolean {
     return this._supportsNativeInspection;
   }
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 6a835e64a269..c0564e0d8c52 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -63,40 +63,3 @@
   height: 100%;
   color: var(--color-dim);
 }
-
-.Screenshot {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: 0.25rem;
-  cursor: pointer;
-}
-
-.Modal {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--color-modal-background);
-  padding: 0.5rem;
-}
-
-.ModalImage {
-  max-height: 100%;
-  max-width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-}
-
-.NoScreenshot {
-  width: 100%;
-  height: 200px;
-  background-color: var(--color-button-background-focus);
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index f4b7ea9a240e..527d0ebffa61 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useState } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
 import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
@@ -17,21 +17,7 @@ export default function SidebarCommitInfo(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { captureScreenshots, profilerStore } = useContext(StoreContext);
-
-  const [
-    isScreenshotModalVisible,
-    setIsScreenshotModalVisible,
-  ] = useState<boolean>(false);
-
-  const hideScreenshotModal = useCallback(
-    () => setIsScreenshotModalVisible(false),
-    []
-  );
-  const showScreenshotModal = useCallback(
-    () => setIsScreenshotModalVisible(true),
-    []
-  );
+  const { profilerStore } = useContext(StoreContext);
 
   if (rootID === null || selectedCommitIndex === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
@@ -42,7 +28,6 @@ export default function SidebarCommitInfo(_: Props) {
     duration,
     interactionIDs,
     priorityLevel,
-    screenshot,
     timestamp,
   } = profilerStore.getCommitData(rootID, selectedCommitIndex);
 
@@ -93,45 +78,8 @@ export default function SidebarCommitInfo(_: Props) {
               })}
             </div>
           </li>
-          {captureScreenshots && (
-            <li>
-              <label className={styles.Label}>Screenshot</label>:
-              {screenshot != null ? (
-                <img
-                  alt="Screenshot"
-                  className={styles.Screenshot}
-                  onClick={showScreenshotModal}
-                  src={screenshot}
-                />
-              ) : (
-                <div className={styles.NoScreenshot}>
-                  No screenshot available
-                </div>
-              )}
-            </li>
-          )}
-          {screenshot != null && isScreenshotModalVisible && (
-            <ScreenshotModal
-              hideScreenshotModal={hideScreenshotModal}
-              screenshot={screenshot}
-            />
-          )}
         </ul>
       </div>
     </Fragment>
   );
 }
-
-function ScreenshotModal({
-  hideScreenshotModal,
-  screenshot,
-}: {|
-  hideScreenshotModal: Function,
-  screenshot: string,
-|}) {
-  return (
-    <div className={styles.Modal} onClick={hideScreenshotModal}>
-      <img alt="Screenshot" className={styles.ModalImage} src={screenshot} />
-    </div>
-  );
-}
diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js
index b6c2fcc2fdcc..d8c954e5b7fa 100644
--- a/src/devtools/views/Profiler/types.js
+++ b/src/devtools/views/Profiler/types.js
@@ -60,9 +60,6 @@ export type CommitDataFrontend = {|
   // Priority level of the commit (if React provided this info)
   priorityLevel: string | null,
 
-  // Screenshot data for this commit (if available).
-  screenshot: string | null,
-
   // When did this commit occur (relative to the start of profiling)
   timestamp: number,
 |};
@@ -112,7 +109,6 @@ export type CommitDataExport = {|
   fiberSelfDurations: Array<[number, number]>,
   interactionIDs: Array<number>,
   priorityLevel: string | null,
-  screenshot: string | null,
   timestamp: number,
 |};
 
diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js
index e0f1dcdd834d..973d5ba2d527 100644
--- a/src/devtools/views/Profiler/utils.js
+++ b/src/devtools/views/Profiler/utils.js
@@ -29,7 +29,6 @@ const commitGradient = [
 export function prepareProfilingDataFrontendFromBackendAndStore(
   dataBackends: Array<ProfilingDataBackend>,
   operationsByRootID: Map<number, Array<Array<number>>>,
-  screenshotsByRootID: Map<number, Map<number, string>>,
   snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
 ): ProfilingDataFrontend {
   const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
@@ -44,8 +43,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
         interactions,
         rootID,
       }) => {
-        const screenshots = screenshotsByRootID.get(rootID) || null;
-
         const operations = operationsByRootID.get(rootID);
         if (operations == null) {
           throw Error(`Could not find profiling operations for root ${rootID}`);
@@ -69,8 +66,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
             fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
             interactionIDs: commitDataBackend.interactionIDs,
             priorityLevel: commitDataBackend.priorityLevel,
-            screenshot:
-              (screenshots !== null && screenshots.get(commitIndex)) || null,
             timestamp: commitDataBackend.timestamp,
           })),
           displayName,
@@ -119,7 +114,6 @@ export function prepareProfilingDataFrontendFromExport(
             fiberSelfDurations,
             interactionIDs,
             priorityLevel,
-            screenshot,
             timestamp,
           }) => ({
             changeDescriptions:
@@ -129,7 +123,6 @@ export function prepareProfilingDataFrontendFromExport(
             fiberSelfDurations: new Map(fiberSelfDurations),
             interactionIDs,
             priorityLevel,
-            screenshot,
             timestamp,
           })
         ),
@@ -172,7 +165,6 @@ export function prepareProfilingDataExport(
             fiberSelfDurations,
             interactionIDs,
             priorityLevel,
-            screenshot,
             timestamp,
           }) => ({
             changeDescriptions:
@@ -184,7 +176,6 @@ export function prepareProfilingDataExport(
             fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
             interactionIDs,
             priorityLevel,
-            screenshot,
             timestamp,
           })
         ),
diff --git a/src/devtools/views/Settings/ProfilerSettings.js b/src/devtools/views/Settings/ProfilerSettings.js
index a52597d2eb29..b13f7ad6e838 100644
--- a/src/devtools/views/Settings/ProfilerSettings.js
+++ b/src/devtools/views/Settings/ProfilerSettings.js
@@ -1,12 +1,6 @@
 // @flow
 
-import React, {
-  Fragment,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { ProfilerContext } from 'src/devtools/views/Profiler/ProfilerContext';
@@ -23,20 +17,6 @@ export default function ProfilerSettings(_: {||}) {
   } = useContext(ProfilerContext);
   const store = useContext(StoreContext);
 
-  const captureScreenshotsSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.captureScreenshots,
-      subscribe: (callback: Function) => {
-        store.addListener('captureScreenshots', callback);
-        return () => store.removeListener('captureScreenshots', callback);
-      },
-    }),
-    [store]
-  );
-  const captureScreenshots = useSubscription<boolean, Store>(
-    captureScreenshotsSubscription
-  );
-
   const recordChangeDescriptionsSubscription = useMemo(
     () => ({
       getCurrentValue: () => store.recordChangeDescriptions,
@@ -51,12 +31,6 @@ export default function ProfilerSettings(_: {||}) {
     recordChangeDescriptionsSubscription
   );
 
-  const updateCaptureScreenshotsWhileProfiling = useCallback(
-    ({ currentTarget }) => {
-      store.captureScreenshots = currentTarget.checked;
-    },
-    [store]
-  );
   const updateRecordChangeDescriptions = useCallback(
     ({ currentTarget }) => {
       store.recordChangeDescriptions = currentTarget.checked;
@@ -118,27 +92,6 @@ export default function ProfilerSettings(_: {||}) {
         />{' '}
         (ms)
       </div>
-
-      {store.supportsCaptureScreenshots && (
-        <Fragment>
-          <div className={styles.Setting}>
-            <label>
-              <input
-                type="checkbox"
-                checked={captureScreenshots}
-                onChange={updateCaptureScreenshotsWhileProfiling}
-              />{' '}
-              Capture screenshots while profiling
-            </label>
-          </div>
-          {captureScreenshots && (
-            <div className={styles.ScreenshotThrottling}>
-              Screenshots will be throttled in order to reduce the negative
-              impact on performance.
-            </div>
-          )}
-        </Fragment>
-      )}
     </div>
   );
 }
diff --git a/src/devtools/views/Settings/SettingsShared.css b/src/devtools/views/Settings/SettingsShared.css
index cafbe1bedef4..bcdc427668df 100644
--- a/src/devtools/views/Settings/SettingsShared.css
+++ b/src/devtools/views/Settings/SettingsShared.css
@@ -38,13 +38,6 @@
   padding: 0 0 0.5rem;
 }
 
-.ScreenshotThrottling {
-  display: inline-block;
-  background-color: var(--color-background-hover);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
 .HRule {
   height: 1px;
   background-color: var(--color-border);
diff --git a/yarn.lock b/yarn.lock
index 3f8a3dd8fe61..86531c672e4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2414,11 +2414,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-arraybuffer@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
-  integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
-
 base64-js@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
@@ -3788,13 +3783,6 @@ css-in-js-utils@^2.0.0:
     hyphenate-style-name "^1.0.2"
     isobject "^3.0.1"
 
-css-line-break@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
-  integrity sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=
-  dependencies:
-    base64-arraybuffer "^0.1.5"
-
 css-loader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -6262,13 +6250,6 @@ html-entities@^1.2.1:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
-html2canvas@^1.0.0-alpha.12:
-  version "1.0.0-alpha.12"
-  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz#3b1992e3c9b3f56063c35fd620494f37eba88513"
-  integrity sha1-OxmS48mz9WBjw1/WIElPN+uohRM=
-  dependencies:
-    css-line-break "1.0.1"
-
 htmlparser2@^3.9.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"

From 52b0c20a620c769b836fff2c0f31d78fe83989cb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 13:44:32 -0700
Subject: [PATCH 790/814] Added dynamic indentation to change log

---
 CHANGELOG.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5190ec63b179..e7590ca00668 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,6 +61,12 @@ Double click a component to view the owners tree and click the "x" button to ret
 
 ![Demo showing "owners tree" feature](https://user-images.githubusercontent.com/29597/62229452-84f90000-b374-11e9-818a-61eec6be0bb4.gif)
 
+#### No more horizontal scrolling
+
+Deeply nested components used to require both vertical and horizontal scrolling to see, making it easy to "get lost" within large component trees. DevTools now dynamically adjusts nesting indentation to eliminate horizontal scrolling.
+
+![Video demonstration dynamic indentation to eliminate horizontal scrolling](https://user-images.githubusercontent.com/29597/62246661-f8ad0400-b398-11e9-885f-284f150a6d76.gif)
+
 #### Improved hooks support
 
 Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.
@@ -87,7 +93,7 @@ DevTools lets you test these loading states with a new toggle:
 
 #### Reload and profile
 
-The profiler is a powerful tool for performing tuning React components. Legacy DevTools supported profiling, but only after it detected a profiling-capable version of React. Because of this there was no way to profile the initial _mount_ (one of the most performance sensitive parts) of an application.
+The profiler is a powerful tool for performance tuning React components. Legacy DevTools supported profiling, but only after it detected a profiling-capable version of React. Because of this there was no way to profile the initial _mount_ (one of the most performance sensitive parts) of an application.
 
 This feature is now supported with a "reload and profile" action:
 

From e4ccafc09988b38423a67c755ea685b9cfe58ba9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 14:08:44 -0700
Subject: [PATCH 791/814] Updated CHANGELOG based on Dan's feedback

---
 CHANGELOG.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7590ca00668..cf23162f0869 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,11 +15,9 @@
 ### General changes
 
 #### Improved performance
-One of the largest performance bottlenecks of the legacy DevTools extension was the amount of message it sent across its "bridge" (an abstraction around e.g. `postMessage`). The primary goal for the DevTools rewrite was to drastically reduce this traffic.
+The legacy DevTools extension used to add significant performance overhead, making it unusable for some larger React applications. That overhead has been effectively eliminated in version 4.
 
-The legacy DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
-
-Learn more about these optimizations [here](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md).
+[Learn more](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md) about the performance optimizations that made this possible.
 
 #### Component stacks
 
@@ -39,6 +37,8 @@ Large component trees can sometimes be hard to navigate. DevTools now provides a
 
 ![Component filter demo video](https://user-images.githubusercontent.com/29597/62229209-0bf9a880-b374-11e9-8f84-cebd6c1a016b.gif)
 
+Host nodes (e.g. HTML `<div>`, React Native `View`) are now hidden by default, but you can see them by disabling that filter.
+
 Filter preferences are remembered between sessions.
 
 #### "Rendered by" list

From 11e7b1d290d6be07af521275edcae6642c0e21f5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 14:22:43 -0700
Subject: [PATCH 792/814] Updated OVERVIEW doc

---
 OVERVIEW.md | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/OVERVIEW.md b/OVERVIEW.md
index 3cd314d888f1..b7ec0639ca9e 100644
--- a/OVERVIEW.md
+++ b/OVERVIEW.md
@@ -221,13 +221,19 @@ Instead DevTools lazily requests additional information about an element only wh
 
 Elements can update frequently, especially in response to things like scrolling events. Since props and state can be large, we avoid sending this information across the bridge every time the selected element is updated. Instead, the frontend polls the backend for updates about once a second. The backend tracks when the element was last "inspected" and sends a special no-op response if it has not re-rendered since then.
 
+### Deeply nested properties
+
+Even when dealing with a single component, serializing deeply nested properties can be expensive. Because of this, DevTools uses a technique referred to as "dehyration" to only send a shallow copy of the data on initial inspection. DevTools then fills in the missing data on demand as a user expands nested objects or arrays. Filled in paths are remembered (for the currently inspected element) so they are not "dehyrated" again as part of a polling update.
+
 ### Inspecting hooks
 
 Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with "use".)
 
 So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https://github.com/bvaughn/react-devtools-experimental/blob/master/src/backend/ReactDebugHooks.js).)
 
-> **Note**: DevTools obtains hooks info by re-rendering a component. Breakpoints and console logs will be invoked during this additional (shallow) render.
+> **Note**: DevTools obtains hooks info by re-rendering a component.
+> Breakpoints will be invoked during this additional (shallow) render,
+> but DevTools temporarily overrides `console` methods to suppress logging.
 
 ### Performance implications
 
@@ -243,23 +249,22 @@ The Profiler UI is a powerful tool for identifying and fixing performance proble
 * Minimizing bridge traffic.
 * Making expensive computations lazy.
 
-The majority of profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. (The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message.)
+The majority of profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message. (This is done to support the reload-and-profile functionality.)
 
 When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
 
-When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information <sup>1</sup> about each commit:
+When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information about each commit, including:
 * Commit time and duration
-* Which elements were rendered during that commit.
-* Which interactions (if any) were part of the commit.
+* Which elements were rendered during that commit
+* Which interactions (if any) were part of the commit
+* Which props and state changed (if enabled in profiler settings)
 
 This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).
 
-<sup>1</sup> In the future, the backend may also store additional metadata (e.g. which props/states changed between rendered for a given component).
-
 ### Combining profiling data
 
 Once profiling is finished, the frontend requests profiling data from the backend one renderer at a time by sending a "_getProfilingData_" message. The backend responds with a "_profilingData_" message that contains per-root commit timing and duration information. The frontend then combines this information with its own snapshots to form a complete picture of the profiling session. Using this data, charts and graphs are lazily computed (and incrementally cached) on demand, based on which commits and views are selected in the Profiler UI.
 
 ### Importing/exporting data
 
-Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users.
\ No newline at end of file
+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as a single JSON object), enabling profiling sessions to be shared between users.
\ No newline at end of file

From aed31fdf12b01eb508b347fff8e3c237a0c91a3f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 31 Jul 2019 14:48:39 -0700
Subject: [PATCH 793/814] Element keys are selectable text

Changed truncation to be CSS-driven, and enabled double-click selection of text, so that long keys could be copied from within the tree.
---
 src/devtools/views/Components/Element.css |  8 ++-
 src/devtools/views/Components/Element.js  | 78 +++++++++++------------
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 97baeb888c93..f71e9f479f47 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -43,12 +43,16 @@
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 
-.AttributeName {
+.KeyName {
   color: var(--color-attribute-name);
 }
 
-.AttributeValue {
+.KeyValue {
   color: var(--color-attribute-value);
+  user-select: text;
+  max-width: 100px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .Highlight {
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 67cc721e6cd2..dc7f52c065a5 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -1,16 +1,10 @@
 // @flow
 
-import React, {
-  Fragment,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
+import React, { Fragment, useContext, useMemo, useState } from 'react';
 import Store from 'src/devtools/store';
 import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
-import { createRegExp, truncateText } from '../utils';
+import { createRegExp } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { StoreContext } from '../context';
 
@@ -43,34 +37,38 @@ export default function ElementView({ data, index, style }: Props) {
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
-  const handleDoubleClick = useCallback(() => {
+  const handleDoubleClick = () => {
     if (id !== null) {
       dispatch({ type: 'SELECT_OWNER', payload: id });
     }
-  }, [dispatch, id]);
-
-  const handleMouseDown = useCallback(
-    ({ metaKey }) => {
-      if (id !== null) {
-        dispatch({
-          type: 'SELECT_ELEMENT_BY_ID',
-          payload: metaKey ? null : id,
-        });
-      }
-    },
-    [dispatch, id]
-  );
+  };
+
+  const handleMouseDown = ({ metaKey }) => {
+    if (id !== null) {
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: metaKey ? null : id,
+      });
+    }
+  };
 
-  const handleMouseEnter = useCallback(() => {
+  const handleMouseEnter = () => {
     setIsHovered(true);
     if (id !== null) {
       onElementMouseEnter(id);
     }
-  }, [id, onElementMouseEnter]);
+  };
 
-  const handleMouseLeave = useCallback(() => {
+  const handleMouseLeave = () => {
     setIsHovered(false);
-  }, []);
+  };
+
+  const handleKeyDoubleClick = event => {
+    // Double clicks on key value are used for text selection (if the text has been truncated).
+    // They should not enter the owners tree view.
+    event.stopPropagation();
+    event.preventDefault();
+  };
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
@@ -122,10 +120,15 @@ export default function ElementView({ data, index, style }: Props) {
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>
-            &nbsp;<span className={styles.AttributeName}>key</span>=
-            <span className={styles.AttributeValue} title={key}>
-              "{truncateText(`${key}`, 10)}"
+            &nbsp;<span className={styles.KeyName}>key</span>="
+            <span
+              className={styles.KeyValue}
+              title={key}
+              onDoubleClick={handleKeyDoubleClick}
+            >
+              {key}
             </span>
+            "
           </Fragment>
         )}
         <Badge
@@ -152,20 +155,17 @@ type ExpandCollapseToggleProps = {|
 function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
   const { children, id, isCollapsed } = element;
 
-  const toggleCollapsed = useCallback(
-    event => {
-      event.preventDefault();
-      event.stopPropagation();
+  const toggleCollapsed = event => {
+    event.preventDefault();
+    event.stopPropagation();
 
-      store.toggleIsCollapsed(id, !isCollapsed);
-    },
-    [id, isCollapsed, store]
-  );
+    store.toggleIsCollapsed(id, !isCollapsed);
+  };
 
-  const stopPropagation = useCallback(event => {
+  const stopPropagation = event => {
     // Prevent the row from selecting
     event.stopPropagation();
-  }, []);
+  };
 
   if (children.length === 0) {
     return <div className={styles.ExpandCollapseToggle} />;

From 51a15e0e4d71ef8c979c47eb5f8568448c467643 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 1 Aug 2019 07:56:10 -0700
Subject: [PATCH 794/814] Added CHANGELOG entries for HOC badges and no in-line
 props

---
 CHANGELOG.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf23162f0869..8604ca7a83ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,14 @@ Host nodes (e.g. HTML `<div>`, React Native `View`) are now hidden by default, b
 
 Filter preferences are remembered between sessions.
 
+#### No more in-line props
+
+Components in the tree no longer show in-line props. This was done to [make DevTools faster](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md) and to make it easier to browse larger component trees.
+
+You can view a component's props, state, and hooks by selecting it:
+
+![Inspecting props](https://user-images.githubusercontent.com/29597/62303001-37da6400-b430-11e9-87fd-10a94df88efa.png)
+
 #### "Rendered by" list
 
 In React, an element's "owner" refers the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.
@@ -81,6 +89,18 @@ Search results are now shown inline similar to the browser's find-in-page search
 
 ![Video demonstrating the search UX](https://user-images.githubusercontent.com/29597/62230923-c63edf00-b377-11e9-9f95-aa62ddc8f62c.gif)
 
+#### Higher order components
+
+[Higher order components](https://reactjs.org/docs/higher-order-components.html) (or HOCs) often provide a [custom `displayName`](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) following a convention of `withHOC(InnerComponentName)` in order to make it easier to identify components in React warnings and in DevTools.
+
+The new Components tree formats these HOC names (along with several built-in utilities like `React.memo` and `React.forwardRef`) as a special badge to the right of the decorated component name.
+
+![Screenshot showing HOC badges](https://user-images.githubusercontent.com/29597/62302774-c4385700-b42f-11e9-9ef4-49c5f18d6276.png)
+
+Components decorated with multiple HOCs show the topmost badge and a count. Selecting the component shows all of the HOCs badges in the properties panel.
+
+![Screenshot showing a component with multiple HOC badges](https://user-images.githubusercontent.com/29597/62303729-7fadbb00-b431-11e9-8685-45f5ab52b30b.png)
+
 #### Suspense toggle
 
 React's experimental [Suspense API](https://reactjs.org/docs/react-api.html#suspense) lets components "wait" for something before rendering. `<Suspense>` components can be used to specify loading states when components deeper in the tree are waiting to render.

From 62e5fd57a15295fe269dc998350005aaa4042ed9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 1 Aug 2019 08:26:32 -0700
Subject: [PATCH 795/814] NPM package versions 4.0.0-alpha.5 -> 4.0.0-alpha.6

---
 packages/react-devtools-core/package.json | 2 +-
 packages/react-devtools/package.json      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index b13f815877d4..c6ab52f8125e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 604429d06b45..1c1593fe3f5b 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.5",
+    "react-devtools-core": "4.0.0-alpha.6",
     "update-notifier": "^2.1.0"
   }
 }

From abbaedd2641c6b71536785f5fe047f4f79899af9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 2 Aug 2019 09:27:13 -0700
Subject: [PATCH 796/814] Updated Flow type for DevTools tab id

---
 src/devtools/views/DevTools.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 864198c4b694..845d0a89a2f9 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -28,7 +28,7 @@ import type { InspectedElement } from 'src/devtools/views/Components/types';
 import type { FrontendBridge } from 'src/bridge';
 
 export type BrowserTheme = 'dark' | 'light';
-export type TabID = 'components' | 'profiler' | 'settings';
+export type TabID = 'components' | 'profiler';
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement

From 9727f4e88f7a9af233de07112794988ef9c1d61c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 2 Aug 2019 09:39:39 -0700
Subject: [PATCH 797/814] Don't let a DevTools or React internal error
 interfere with logging.

---
 src/backend/console.js | 68 ++++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/backend/console.js b/src/backend/console.js
index 1b89ce782dd7..22f5db951541 100644
--- a/src/backend/console.js
+++ b/src/backend/console.js
@@ -83,40 +83,44 @@ export function patch(): void {
         targetConsole[method]);
 
       const overrideMethod = (...args) => {
-        // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
-        // don't append a second stack.
-        const alreadyHasComponentStack =
-          args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);
-
-        if (!alreadyHasComponentStack) {
-          // If there's a component stack for at least one of the injected renderers, append it.
-          // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-          for (let {
-            getCurrentFiber,
-            getDisplayNameForFiber,
-          } of injectedRenderers.values()) {
-            let current: ?Fiber = getCurrentFiber();
-            let ownerStack: string = '';
-            while (current != null) {
-              const name = getDisplayNameForFiber(current);
-              const owner = current._debugOwner;
-              const ownerName =
-                owner != null ? getDisplayNameForFiber(owner) : null;
-
-              ownerStack += describeComponentFrame(
-                name,
-                current._debugSource,
-                ownerName
-              );
-
-              current = owner;
-            }
-
-            if (ownerStack !== '') {
-              args.push(ownerStack);
-              break;
+        try {
+          // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
+          // don't append a second stack.
+          const alreadyHasComponentStack =
+            args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);
+
+          if (!alreadyHasComponentStack) {
+            // If there's a component stack for at least one of the injected renderers, append it.
+            // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+            for (let {
+              getCurrentFiber,
+              getDisplayNameForFiber,
+            } of injectedRenderers.values()) {
+              let current: ?Fiber = getCurrentFiber();
+              let ownerStack: string = '';
+              while (current != null) {
+                const name = getDisplayNameForFiber(current);
+                const owner = current._debugOwner;
+                const ownerName =
+                  owner != null ? getDisplayNameForFiber(owner) : null;
+
+                ownerStack += describeComponentFrame(
+                  name,
+                  current._debugSource,
+                  ownerName
+                );
+
+                current = owner;
+              }
+
+              if (ownerStack !== '') {
+                args.push(ownerStack);
+                break;
+              }
             }
           }
+        } catch (error) {
+          // Don't let a DevTools or React internal error interfere with logging.
         }
 
         originalMethod(...args);

From 644c9c4e1c2ca587275c061b0394ea4be45fdfc7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 2 Aug 2019 18:14:25 +0100
Subject: [PATCH 798/814] [Flare] useListener -> useResponder (#362)

---
 src/backend/ReactDebugHooks.js | 31 +++++++++++++++++--------------
 src/backend/types.js           |  5 +++++
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/backend/ReactDebugHooks.js b/src/backend/ReactDebugHooks.js
index 01734c840a06..6baaa2530031 100644
--- a/src/backend/ReactDebugHooks.js
+++ b/src/backend/ReactDebugHooks.js
@@ -8,7 +8,11 @@
 
 import ErrorStackParser from 'error-stack-parser';
 
-import type { ReactContext, ReactEventResponder } from './types';
+import type {
+  ReactContext,
+  ReactEventResponder,
+  ReactEventResponderListener,
+} from './types';
 
 type Fiber = any;
 type Hook = any;
@@ -30,8 +34,6 @@ type HookLogEntry = {
   value: mixed,
 };
 
-const emptyObject = {};
-
 let hookLog: Array<HookLogEntry> = [];
 
 // Primitives
@@ -216,19 +218,20 @@ function useMemo<T>(
   return value;
 }
 
-function useListener(
+function useResponder(
   responder: ReactEventResponder<any, any>,
-  hookProps: ?Object
-): void {
+  listenerProps: Object
+): ReactEventResponderListener<any, any> {
+  // Don't put the actual event responder object in, just its displayName
   const value = {
-    responder: responder.displayName || 'EventComponent',
-    props: hookProps || emptyObject,
+    responder: responder.displayName || 'EventResponder',
+    props: listenerProps,
+  };
+  hookLog.push({ primitive: 'Responder', stackError: new Error(), value });
+  return {
+    responder,
+    props: listenerProps,
   };
-  hookLog.push({
-    primitive: 'Listener',
-    stackError: new Error(),
-    value,
-  });
 }
 
 const Dispatcher = {
@@ -243,7 +246,7 @@ const Dispatcher = {
   useReducer,
   useRef,
   useState,
-  useListener,
+  useResponder,
 };
 
 // Inspect
diff --git a/src/backend/types.js b/src/backend/types.js
index c0a27229508c..9ff374cdc4a4 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -371,3 +371,8 @@ export type ReactEventResponder<E, C> = {
     | null
     | ((context: C, props: Object, state: Object) => void),
 };
+
+export type ReactEventResponderListener<E, C> = {|
+  props: Object,
+  responder: ReactEventResponder<E, C>,
+|};

From db8542ad97c75c9f61a949209f6c054a1c0c9688 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 3 Aug 2019 17:59:35 -0700
Subject: [PATCH 799/814] Refactor inspect/select logic so that $r contains
 hooks data (#364)

* Refactor inspect/select logic so that  var contains hooks data
* Legacy renderer resets $r to null when inspecting non class/function element
---
 packages/react-devtools-core/src/backend.js   |  4 +-
 src/backend/agent.js                          | 46 ++++-----
 src/backend/legacy/renderer.js                | 63 ++++++------
 src/backend/renderer.js                       | 95 ++++++++++---------
 src/backend/types.js                          |  1 -
 src/bridge.js                                 |  1 -
 .../Components/InspectedElementContext.js     |  5 -
 7 files changed, 105 insertions(+), 110 deletions(-)

diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index 11a5dde7c96c..71dac50aa75e 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -112,8 +112,8 @@ export function connectToDevTools(options: ?ConnectOptions) {
       },
     });
     bridge.addListener(
-      'selectElement',
-      ({ id, rendererID }: {| id: number, rendererID: number |}) => {
+      'inspectElement',
+      ({ id, rendererID }: { id: number, rendererID: number }) => {
         const renderer = agent.rendererInterfaces[rendererID];
         if (renderer != null) {
           // Send event for RN to highlight.
diff --git a/src/backend/agent.js b/src/backend/agent.js
index fa2df90f73ea..f246934a5d3d 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -124,7 +124,6 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
-    bridge.addListener('selectElement', this.selectElement);
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener(
@@ -219,6 +218,24 @@ export default class Agent extends EventEmitter<{|
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
       this._bridge.send('inspectedElement', renderer.inspectElement(id, path));
+
+      // When user selects an element, stop trying to restore the selection,
+      // and instead remember the current selection for the next reload.
+      if (
+        this._persistedSelectionMatch === null ||
+        this._persistedSelectionMatch.id !== id
+      ) {
+        this._persistedSelection = null;
+        this._persistedSelectionMatch = null;
+        renderer.setTrackedPath(null);
+        this._throttledPersistSelection(rendererID, id);
+      }
+
+      // TODO: If there was a way to change the selected DOM element
+      // in native Elements tab without forcing a switch to it, we'd do it here.
+      // For now, it doesn't seem like there is a way to do that:
+      // https://github.com/bvaughn/react-devtools-experimental/issues/102
+      // (Setting $0 doesn't work, and calling inspect() switches the tab.)
     }
   };
 
@@ -244,33 +261,6 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('reloadAppForProfiling');
   };
 
-  selectElement = ({ id, rendererID }: ElementAndRendererID) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
-    } else {
-      renderer.selectElement(id);
-
-      // When user selects an element, stop trying to restore the selection,
-      // and instead remember the current selection for the next reload.
-      if (
-        this._persistedSelectionMatch === null ||
-        this._persistedSelectionMatch.id !== id
-      ) {
-        this._persistedSelection = null;
-        this._persistedSelectionMatch = null;
-        renderer.setTrackedPath(null);
-        this._throttledPersistSelection(rendererID, id);
-      }
-
-      // TODO: If there was a way to change the selected DOM element
-      // in native Elements tab without forcing a switch to it, we'd do it here.
-      // For now, it doesn't seem like there is a way to do that:
-      // https://github.com/bvaughn/react-devtools-experimental/issues/102
-      // (Setting $0 doesn't work, and calling inspect() switches the tab.)
-    }
-  };
-
   overrideContext = ({ id, path, rendererID, value }: SetInParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js
index 461905a3b203..51ca6a626ac9 100644
--- a/src/backend/legacy/renderer.js
+++ b/src/backend/legacy/renderer.js
@@ -609,6 +609,35 @@ export function attach(
     };
   }
 
+  function updateSelectedElement(id: number): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return;
+    }
+
+    switch (getElementType(internalInstance)) {
+      case ElementTypeClass:
+        global.$r = internalInstance._instance;
+        break;
+      case ElementTypeFunction:
+        const element = internalInstance._currentElement;
+        if (element == null) {
+          console.warn(`Could not find element with id "${id}"`);
+          return;
+        }
+
+        global.$r = {
+          props: element.props,
+          type: element.type,
+        };
+        break;
+      default:
+        global.$r = null;
+        break;
+    }
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>
@@ -630,6 +659,11 @@ export function attach(
       mergeInspectedPaths(path);
     }
 
+    // Any time an inspected element has an update,
+    // we should update the selected $r value as wel.
+    // Do this before dehyration (cleanForBridge).
+    updateSelectedElement(id);
+
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
       createIsPathWhitelisted('context')
@@ -777,34 +811,6 @@ export function attach(
     global.$type = element.type;
   }
 
-  function selectElement(id: number): void {
-    const internalInstance = idToInternalInstanceMap.get(id);
-    if (internalInstance == null) {
-      console.warn(`Could not find instance with id "${id}"`);
-      return;
-    }
-
-    switch (getElementType(internalInstance)) {
-      case ElementTypeClass:
-        global.$r = internalInstance._instance;
-        break;
-      case ElementTypeFunction:
-        const element = internalInstance._currentElement;
-        if (element == null) {
-          console.warn(`Could not find element with id "${id}"`);
-          return;
-        }
-
-        global.$r = {
-          props: element.props,
-          type: element.type,
-        };
-        break;
-      default:
-        break;
-    }
-  }
-
   function setInProps(id: number, path: Array<string | number>, value: any) {
     const internalInstance = idToInternalInstanceMap.get(id);
     if (internalInstance != null) {
@@ -918,7 +924,6 @@ export function attach(
     overrideSuspense,
     prepareViewElementSource,
     renderer,
-    selectElement,
     setInContext,
     setInHook,
     setInProps,
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 979eefd141de..63aae20c8788 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -1988,49 +1988,6 @@ export function attach(
   }
   // END copied code
 
-  function selectElement(id: number): void {
-    let fiber = idToFiberMap.get(id);
-    if (fiber == null) {
-      console.warn(`Could not find Fiber with id "${id}"`);
-      return;
-    }
-
-    const { elementType, memoizedProps, stateNode, tag, type } = fiber;
-
-    switch (tag) {
-      case ClassComponent:
-      case IncompleteClassComponent:
-      case IndeterminateComponent:
-        global.$r = stateNode;
-        break;
-      case FunctionComponent:
-        global.$r = {
-          props: memoizedProps,
-          type,
-        };
-        break;
-      case ForwardRef:
-        global.$r = {
-          props: memoizedProps,
-          type: type.render,
-        };
-        break;
-      case MemoComponent:
-      case SimpleMemoComponent:
-        global.$r = {
-          props: memoizedProps,
-          type:
-            elementType != null && elementType.type != null
-              ? elementType.type
-              : type,
-        };
-        break;
-      default:
-        global.$r = null;
-        break;
-    }
-  }
-
   function prepareViewElementSource(id: number): void {
     let fiber = idToFiberMap.get(id);
     if (fiber == null) {
@@ -2341,6 +2298,52 @@ export function attach(
     };
   }
 
+  function updateSelectedElement(inspectedElement: InspectedElement): void {
+    const { hooks, id, props } = inspectedElement;
+
+    let fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    const { elementType, stateNode, tag, type } = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+        global.$r = stateNode;
+        break;
+      case FunctionComponent:
+        global.$r = {
+          hooks,
+          props,
+          type,
+        };
+        break;
+      case ForwardRef:
+        global.$r = {
+          props,
+          type: type.render,
+        };
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$r = {
+          props,
+          type:
+            elementType != null && elementType.type != null
+              ? elementType.type
+              : type,
+        };
+        break;
+      default:
+        global.$r = null;
+        break;
+    }
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>
@@ -2401,6 +2404,11 @@ export function attach(
         mergeInspectedPaths(path);
       }
 
+      // Any time an inspected element has an update,
+      // we should update the selected $r value as wel.
+      // Do this before dehyration (cleanForBridge).
+      updateSelectedElement(mostRecentlyInspectedElement);
+
       // Clone before cleaning so that we preserve the full data.
       // This will enable us to send patches without re-inspecting if hydrated paths are requested.
       // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
@@ -2986,7 +2994,6 @@ export function attach(
     prepareViewElementSource,
     overrideSuspense,
     renderer,
-    selectElement,
     setInContext,
     setInHook,
     setInProps,
diff --git a/src/backend/types.js b/src/backend/types.js
index 9ff374cdc4a4..75cd1e11f5a6 100644
--- a/src/backend/types.js
+++ b/src/backend/types.js
@@ -299,7 +299,6 @@ export type RendererInterface = {
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
   renderer: ReactRenderer | null,
-  selectElement: (id: number) => void,
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
   setInHook: (
     id: number,
diff --git a/src/bridge.js b/src/bridge.js
index f9101e582bee..cc110f8e5031 100644
--- a/src/bridge.js
+++ b/src/bridge.js
@@ -99,7 +99,6 @@ type FrontendEvents = {|
   overrideSuspense: [OverrideSuspense],
   profilingData: [ProfilingDataBackend],
   reloadAndProfile: [boolean],
-  selectElement: [ElementAndRendererID],
   selectFiber: [number],
   shutdown: [],
   startInspectingNative: [],
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index 8ba1b7718aa2..cc9d1f5969f3 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -241,11 +241,6 @@ function InspectedElementContextController({ children }: Props) {
     // We'll poll for an update in the response handler below.
     sendRequest();
 
-    // Update the $r variable.
-    if (rendererID !== null) {
-      bridge.send('selectElement', { id: selectedElementID, rendererID });
-    }
-
     const onInspectedElement = (data: InspectedElementPayload) => {
       // If this is the element we requested, wait a little bit and then ask for another update.
       if (data.id === selectedElementID) {

From 6b3ae6459819065b047244db43d432da2a7be6a1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 4 Aug 2019 14:33:38 -0700
Subject: [PATCH 800/814] Suppress known/expected warnings and errors in local
 DEV shell

---
 shells/dev/app/console.js | 27 +++++++++++++++++++++++++++
 shells/dev/app/index.js   | 11 +++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 shells/dev/app/console.js

diff --git a/shells/dev/app/console.js b/shells/dev/app/console.js
new file mode 100644
index 000000000000..9e5f01401aa3
--- /dev/null
+++ b/shells/dev/app/console.js
@@ -0,0 +1,27 @@
+// @flow
+
+function ignoreStrings(
+  methodName: string,
+  stringsToIgnore: Array<string>
+): void {
+  const originalMethod = console[methodName];
+  console[methodName] = (...args) => {
+    const maybeString = args[0];
+    if (typeof maybeString === 'string') {
+      for (let i = 0; i < stringsToIgnore.length; i++) {
+        if (maybeString.startsWith(stringsToIgnore[i])) {
+          return;
+        }
+      }
+    }
+    originalMethod(...args);
+  };
+}
+
+export function ignoreErrors(errorsToIgnore: Array<string>): void {
+  ignoreStrings('error', errorsToIgnore);
+}
+
+export function ignoreWarnings(warningsToIgnore: Array<string>): void {
+  ignoreStrings('warn', warningsToIgnore);
+}
diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js
index b0609a877ca2..4115c1c4807f 100644
--- a/shells/dev/app/index.js
+++ b/shells/dev/app/index.js
@@ -19,9 +19,20 @@ import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
+import { ignoreErrors, ignoreWarnings } from './console';
 
 import './styles.css';
 
+// DevTools intentionally tests compatibility with certain legacy APIs.
+// Suppress their error messages in the local dev shell,
+// because they might mask other more serious error messages.
+ignoreErrors([
+  'Warning: Legacy context API',
+  'Warning: Unsafe lifecycle methods',
+  'Warning: %s is deprecated in StrictMode.', // findDOMNode
+]);
+ignoreWarnings(['Warning: componentWillReceiveProps is deprecated']);
+
 const roots = [];
 
 function mountHelper(App) {

From 6f1e283b764db82c9ad922faf5d55cd523d0b9e6 Mon Sep 17 00:00:00 2001
From: Sam Horton <savepointsam@gmail.com>
Date: Mon, 5 Aug 2019 11:44:48 -0500
Subject: [PATCH 801/814] feat: match HOC display names during search (#360)

* feat: match HOC display names during search

* chore: update tests for new search logic
---
 .../__snapshots__/treeContext-test.js.snap    | 29 +++++++++++++++----
 src/__tests__/treeContext-test.js             | 16 ++++++++--
 src/devtools/views/Components/TreeContext.js  | 16 ++++++----
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap
index dd268147d963..33230c69aa6b 100644
--- a/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ b/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -558,12 +558,13 @@ exports[`TreeListContext search state should find elements matching search text:
     <Foo>
     <Bar>
     <Baz>
+    <Qux> [withHOC]
 `;
 
 exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
 Object {
   "inspectedElementID": null,
-  "numElements": 3,
+  "numElements": 4,
   "ownerFlatTree": null,
   "ownerID": null,
   "searchIndex": null,
@@ -577,7 +578,7 @@ Object {
 exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
 Object {
   "inspectedElementID": 3,
-  "numElements": 3,
+  "numElements": 4,
   "ownerFlatTree": null,
   "ownerID": null,
   "searchIndex": 0,
@@ -594,7 +595,7 @@ Object {
 exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
 Object {
   "inspectedElementID": 2,
-  "numElements": 3,
+  "numElements": 4,
   "ownerFlatTree": null,
   "ownerID": null,
   "searchIndex": 0,
@@ -607,20 +608,36 @@ Object {
 }
 `;
 
-exports[`TreeListContext search state should find elements matching search text: 4: search for "q" 1`] = `
+exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = `
 Object {
   "inspectedElementID": 2,
-  "numElements": 3,
+  "numElements": 4,
   "ownerFlatTree": null,
   "ownerID": null,
   "searchIndex": null,
   "searchResults": Array [],
-  "searchText": "q",
+  "searchText": "y",
   "selectedElementID": 2,
   "selectedElementIndex": 0,
 }
 `;
 
+exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    5,
+  ],
+  "searchText": "w",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
 exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
 [root]
     <Foo>
diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
index ecf8d4771743..68d3ea422b49 100644
--- a/src/__tests__/treeContext-test.js
+++ b/src/__tests__/treeContext-test.js
@@ -270,6 +270,9 @@ describe('TreeListContext', () => {
       const Foo = () => null;
       const Bar = () => null;
       const Baz = () => null;
+      const Qux = () => null;
+
+      Qux.displayName = `withHOC(${Qux.name})`;
 
       utils.act(() =>
         ReactDOM.render(
@@ -277,6 +280,7 @@ describe('TreeListContext', () => {
             <Foo />
             <Bar />
             <Baz />
+            <Qux />
           </React.Fragment>,
           document.createElement('div')
         )
@@ -288,17 +292,25 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
+      // NOTE: multi-match
       utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
+      // NOTE: single match
       utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: search for "f"');
 
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));
+      // NOTE: no match
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' }));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: search for "y"');
+
+      // NOTE: HOC match
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: search for "q"');
+      expect(state).toMatchSnapshot('5: search for "w"');
     });
 
     it('should select the next and previous items within the search results', () => {
diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 51697531f673..9ae209da69b7 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -773,14 +773,20 @@ function recursivelySearchTree(
   regExp: RegExp,
   searchResults: Array<number>
 ): void {
-  const { children, displayName } = ((store.getElementByID(
+  const { children, displayName, hocDisplayNames } = ((store.getElementByID(
     elementID
   ): any): Element);
-  if (displayName !== null) {
-    if (regExp.test(displayName)) {
-      searchResults.push(elementID);
-    }
+
+  if (displayName != null && regExp.test(displayName) === true) {
+    searchResults.push(elementID);
+  } else if (
+    hocDisplayNames != null &&
+    hocDisplayNames.length > 0 &&
+    hocDisplayNames.some(name => regExp.test(name)) === true
+  ) {
+    searchResults.push(elementID);
   }
+
   children.forEach(childID =>
     recursivelySearchTree(store, childID, regExp, searchResults)
   );

From dc8580e64df475709fd693f87ef85ae25e5181dd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 5 Aug 2019 10:09:26 -0700
Subject: [PATCH 802/814] New NPM package react-devtools-inline (#363)

---
 .eslintignore                                 |   1 +
 .gitignore                                    |   6 +-
 package.json                                  |   2 +
 packages/react-devtools-core/package.json     |   2 +-
 packages/react-devtools-inline/README.md      | 134 ++++++++++++++++++
 packages/react-devtools-inline/backend.js     |   1 +
 packages/react-devtools-inline/frontend.js    |   1 +
 packages/react-devtools-inline/package.json   |  25 ++++
 packages/react-devtools-inline/src/backend.js |  96 +++++++++++++
 .../react-devtools-inline/src/constants.js    |   6 +
 .../react-devtools-inline/src/frontend.js     |  68 +++++++++
 .../react-devtools-inline/webpack.config.js   |  74 ++++++++++
 packages/react-devtools/package.json          |   4 +-
 shells/browser/shared/src/main.js             |   2 -
 shells/dev/src/backend.js                     |  37 -----
 shells/dev/src/devtools.js                    |  54 ++-----
 shells/dev/webpack.config.js                  |  11 +-
 src/backend/views/Highlighter/Overlay.js      |  13 +-
 src/devtools/store.js                         |   2 +-
 src/devtools/views/DevTools.js                |   3 -
 .../views/Settings/SettingsContext.js         |  14 +-
 21 files changed, 440 insertions(+), 116 deletions(-)
 create mode 100644 packages/react-devtools-inline/README.md
 create mode 100644 packages/react-devtools-inline/backend.js
 create mode 100644 packages/react-devtools-inline/frontend.js
 create mode 100644 packages/react-devtools-inline/package.json
 create mode 100644 packages/react-devtools-inline/src/backend.js
 create mode 100644 packages/react-devtools-inline/src/constants.js
 create mode 100644 packages/react-devtools-inline/src/frontend.js
 create mode 100644 packages/react-devtools-inline/webpack.config.js
 delete mode 100644 shells/dev/src/backend.js

diff --git a/.eslintignore b/.eslintignore
index 5e4165322a11..7f1c5b3bd4a8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,6 +5,7 @@ shells/browser/firefox/build
 shells/browser/shared/build
 shells/dev/dist
 packages/react-devtools-core/dist
+packages/react-devtools-inline/dist
 vendor
 *.js.snap
 
diff --git a/.gitignore b/.gitignore
index 738522e01f4d..8ec77912d297 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,11 +4,13 @@
 /shells/browser/firefox/*.pem
 /shells/browser/shared/build
 /packages/react-devtools-core/dist
+/packages/react-devtools-inline/dist
 /shells/dev/dist
 build
 /node_modules
-/packages/react-devtools-core/node_modules/
-/packages/react-devtools/node_modules/
+/packages/react-devtools-core/node_modules
+/packages/react-devtools-inline/node_modules
+/packages/react-devtools/node_modules
 npm-debug.log
 yarn-error.log
 .DS_Store
diff --git a/package.json b/package.json
index cdfd58da14f0..1540785118c9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,8 @@
   "scripts": {
     "build:core:backend": "cd ./packages/react-devtools-core && yarn build:backend",
     "build:core:standalone": "cd ./packages/react-devtools-core && yarn build:standalone",
+    "build:core": "cd ./packages/react-devtools-core && yarn build",
+    "build:inline": "cd ./packages/react-devtools-inline && yarn build",
     "build:demo": "cd ./shells/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
     "build:extension": "cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:dev": "cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox",
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index c6ab52f8125e..035564a20a52 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
new file mode 100644
index 000000000000..c678f2c5f068
--- /dev/null
+++ b/packages/react-devtools-inline/README.md
@@ -0,0 +1,134 @@
+# `react-devtools-inline`
+
+React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https://codesandbox.io/), [StackBlitz](https://stackblitz.com/)).
+
+This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.**
+
+## Usage
+
+This package exports two entry points: a frontend (to be run in the main `window`) and a backend (to be installed and run within an `iframe`<sup>1</sup>).
+
+The frontend and backend can be initialized in any order, but **the backend must not be activated until after the frontend has been initialized**. Because of this, the simplest sequence is:
+
+1. Frontend (DevTools interface) initialized in the main `window`.
+1. Backend initialized in an `iframe`.
+1. Backend activated.
+
+<sup>1</sup> Sandboxed iframes are supported.
+
+## API
+
+### `react-devtools-inline/backend`
+
+* **`initialize(contentWindow)`** -
+Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.** (This means before any `import` or `require` statements!)
+* **`activate(contentWindow)`** -
+Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
+
+```js
+import { activate, initialize } from 'react-devtools-inline/backend';
+
+// Call this before importing React (or any other packages that might import React).
+initialize();
+
+// Call this only once the frontend has been initialized.
+activate();
+```
+
+### `react-devtools-inline/frontend`
+
+* **`initialize(contentWindow)`** -
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly.
+
+```js
+import { initialize } from 'react-devtools-inline/frontend';
+
+// This should be the iframe the backend hook has been installed in.
+const iframe = document.getElementById(frameID);
+const contentWindow = iframe.contentWindow;
+
+// This returns a React component that can be rendered into your app.
+// <DevTools {...props} />
+const DevTools = initialize(contentWindow);
+```
+
+## Examples
+
+### Configuring a same-origin `iframe`
+
+The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions.
+
+```js
+import {
+  activate as activateBackend,
+  initialize as initializeBackend
+} from 'react-devtools-inline/backend';
+import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
+
+// The React app you want to inspect with DevTools is running within this iframe:
+const iframe = document.getElementById('target');
+const { contentWindow } = iframe;
+
+// Installs the global hook into the iframe.
+// This be called before React is loaded into that frame.
+initializeBackend(contentWindow);
+
+// React application can be injected into <iframe> at any time now...
+
+// Initialize DevTools UI to listen to the hook we just installed.
+// This returns a React component we can render anywhere in the parent window.
+const DevTools = initializeFrontend(contentWindow);
+
+// <DevTools /> interface can be rendered in the parent window at any time now...
+
+// Let the backend know the frontend is ready and listening.
+activateBackend(contentWindow);
+```
+
+### Configuring a sandboxed `iframe`
+
+Sandboxed `iframe`s are also supported but require more complex initialization.
+
+**`iframe.html`**
+```js
+import { activate, initialize } from 'react-devtools-inline/backend';
+
+// The DevTooks hook needs to be installed before React is even required!
+// The safest way to do this is probably to install it in a separate script tag.
+initialize(window);
+
+// Wait for the frontend to let us know that it's ready.
+window.addEventListener('message', ({ data }) => {
+  switch (data.type) {
+    case 'activate':
+      activate(window);
+      break;
+    default:
+      break;
+  }
+});
+```
+
+**`main-window.html`**
+```js
+import { initialize } from 'react-devtools-inline/frontend';
+
+const iframe = document.getElementById('target');
+const { contentWindow } = iframe;
+
+// Initialize DevTools UI to listen to the iframe.
+// This returns a React component we can render anywhere in the main window.
+const DevTools = initialize(contentWindow);
+
+// Let the backend know to initialize itself.
+// We can't do this directly because the iframe is sandboxed.
+// Only initialize the backend once the DevTools frontend has been initialized.
+iframe.onload = () => {
+  contentWindow.postMessage(
+    {
+      type: 'activate',
+    },
+    '*'
+  );
+};
+```
\ No newline at end of file
diff --git a/packages/react-devtools-inline/backend.js b/packages/react-devtools-inline/backend.js
new file mode 100644
index 000000000000..2c2a32d45125
--- /dev/null
+++ b/packages/react-devtools-inline/backend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/backend');
diff --git a/packages/react-devtools-inline/frontend.js b/packages/react-devtools-inline/frontend.js
new file mode 100644
index 000000000000..a86be22376f3
--- /dev/null
+++ b/packages/react-devtools-inline/frontend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/frontend');
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
new file mode 100644
index 000000000000..188d11faefd7
--- /dev/null
+++ b/packages/react-devtools-inline/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "react-devtools-inline",
+  "version": "4.0.0-alpha.7",
+  "description": "Embed react-devtools within a website",
+  "license": "MIT",
+  "main": "./dist/backend.js",
+  "repository": {
+    "url": "https://github.com/bvaughn/react-devtools-experimental.git",
+    "type": "git"
+  },
+  "files": [
+    "dist",
+    "backend.js",
+    "frontend.js"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "prepublish": "yarn run build",
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "cross-env": "^3.1.4"
+  }
+}
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
new file mode 100644
index 000000000000..4b437458f512
--- /dev/null
+++ b/packages/react-devtools-inline/src/backend.js
@@ -0,0 +1,96 @@
+/** @flow */
+
+import Agent from 'src/backend/agent';
+import Bridge from 'src/bridge';
+import { initBackend } from 'src/backend';
+import { installHook } from 'src/hook';
+import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import {
+  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
+  MESSAGE_TYPE_SAVED_PREFERENCES,
+} from './constants';
+
+function startActivation(contentWindow: window) {
+  const { parent } = contentWindow;
+
+  const onMessage = ({ data }) => {
+    switch (data.type) {
+      case MESSAGE_TYPE_SAVED_PREFERENCES:
+        // This is the only message we're listening for,
+        // so it's safe to cleanup after we've received it.
+        contentWindow.removeEventListener('message', onMessage);
+
+        const { appendComponentStack, componentFilters } = data;
+
+        contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+        contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+
+        // TRICKY
+        // The backend entry point may be required in the context of an iframe or the parent window.
+        // If it's required within the parent window, store the saved values on it as well,
+        // since the injected renderer interface will read from window.
+        // Technically we don't need to store them on the contentWindow in this case,
+        // but it doesn't really hurt anything to store them there too.
+        if (contentWindow !== window) {
+          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+          window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+        }
+
+        finishActivation(contentWindow);
+        break;
+      default:
+        break;
+    }
+  };
+
+  contentWindow.addEventListener('message', onMessage);
+
+  // The backend may be unable to read saved preferences directly,
+  // because they are stored in localStorage within the context of the extension (on the frontend).
+  // Instead it relies on the extension to pass preferences through.
+  // Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().
+  parent.postMessage({ type: MESSAGE_TYPE_GET_SAVED_PREFERENCES }, '*');
+}
+
+function finishActivation(contentWindow: window) {
+  const { parent } = contentWindow;
+
+  const bridge = new Bridge({
+    listen(fn) {
+      const onMessage = event => {
+        fn(event.data);
+      };
+      contentWindow.addEventListener('message', onMessage);
+      return () => {
+        contentWindow.removeEventListener('message', onMessage);
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      parent.postMessage({ event, payload }, '*', transferable);
+    },
+  });
+
+  const agent = new Agent(bridge);
+
+  const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  initBackend(hook, agent, contentWindow);
+
+  // Setup React Native style editor if a renderer like react-native-web has injected it.
+  if (!!hook.resolveRNStyle) {
+    setupNativeStyleEditor(
+      bridge,
+      agent,
+      hook.resolveRNStyle,
+      hook.nativeStyleEditorValidAttributes
+    );
+  }
+}
+
+export function activate(contentWindow: window): void {
+  startActivation(contentWindow);
+}
+
+export function initialize(contentWindow: window): void {
+  installHook(contentWindow);
+}
diff --git a/packages/react-devtools-inline/src/constants.js b/packages/react-devtools-inline/src/constants.js
new file mode 100644
index 000000000000..cfa443cc0480
--- /dev/null
+++ b/packages/react-devtools-inline/src/constants.js
@@ -0,0 +1,6 @@
+/** @flow */
+
+export const MESSAGE_TYPE_GET_SAVED_PREFERENCES =
+  'React::DevTools::getSavedPreferences';
+export const MESSAGE_TYPE_SAVED_PREFERENCES =
+  'React::DevTools::savedPreferences';
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
new file mode 100644
index 000000000000..7398254a8453
--- /dev/null
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -0,0 +1,68 @@
+/** @flow */
+
+import React, { forwardRef } from 'react';
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/store';
+import DevTools from 'src/devtools/views/DevTools';
+import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
+import {
+  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
+  MESSAGE_TYPE_SAVED_PREFERENCES,
+} from './constants';
+
+import type { FrontendBridge } from 'src/bridge';
+import type { Props } from 'src/devtools/views/DevTools';
+
+export function initialize(
+  contentWindow: window
+): React$AbstractComponent<Props, mixed> {
+  const onMessage = ({ data, origin, source }) => {
+    switch (data.type) {
+      case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
+        // This is the only message we're listening for,
+        // so it's safe to cleanup after we've received it.
+        window.removeEventListener('message', onMessage);
+
+        // The renderer interface can't read saved preferences directly,
+        // because they are stored in localStorage within the context of the extension.
+        // Instead it relies on the extension to pass them through.
+        contentWindow.postMessage(
+          {
+            type: MESSAGE_TYPE_SAVED_PREFERENCES,
+            appendComponentStack: getAppendComponentStack(),
+            componentFilters: getSavedComponentFilters(),
+          },
+          '*'
+        );
+        break;
+      default:
+        break;
+    }
+  };
+
+  window.addEventListener('message', onMessage);
+
+  const bridge: FrontendBridge = new Bridge({
+    listen(fn) {
+      const onMessage = ({ data }) => {
+        fn(data);
+      };
+      window.addEventListener('message', onMessage);
+      return () => {
+        window.removeEventListener('message', onMessage);
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      contentWindow.postMessage({ event, payload }, '*', transferable);
+    },
+  });
+
+  const store: Store = new Store(bridge);
+
+  const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
+    <DevTools ref={ref} bridge={bridge} store={store} {...props} />
+  ));
+  ForwardRef.displayName = 'DevTools';
+
+  return ForwardRef;
+}
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
new file mode 100644
index 000000000000..f7ea8cc6f0d4
--- /dev/null
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -0,0 +1,74 @@
+const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../shells/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = true; // NODE_ENV === 'development';
+
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: false,
+  entry: {
+    backend: './src/backend.js',
+    frontend: './src/frontend.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    library: '[name]',
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    alias: {
+      src: resolve(__dirname, '../../src'),
+    },
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    scheduler: 'scheduler',
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: __DEV__,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(__dirname, '../../babel.config.js'),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 1c1593fe3f5b..fc45a8ccf845 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.6",
+    "react-devtools-core": "4.0.0-alpha.7",
     "update-notifier": "^2.1.0"
   }
 }
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 8ce8782216a3..9e1cbbb01deb 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -63,7 +63,6 @@ function createPanelIfReactLoaded() {
 
       let componentsPortalContainer = null;
       let profilerPortalContainer = null;
-      let settingsPortalContainer = null;
 
       let cloneStyleTags = null;
       let mostRecentOverrideTab = null;
@@ -142,7 +141,6 @@ function createPanelIfReactLoaded() {
               componentsPortalContainer,
               overrideTab,
               profilerPortalContainer,
-              settingsPortalContainer,
               showTabBar: false,
               showWelcomeToTheNewDevToolsDialog: true,
               store,
diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js
deleted file mode 100644
index 6d0af11c43fb..000000000000
--- a/shells/dev/src/backend.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/** @flow */
-
-import Agent from 'src/backend/agent';
-import Bridge from 'src/bridge';
-import { initBackend } from 'src/backend';
-import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
-
-const bridge = new Bridge({
-  listen(fn) {
-    const listener = event => {
-      fn(event.data);
-    };
-    window.addEventListener('message', listener);
-    return () => {
-      window.removeEventListener('message', listener);
-    };
-  },
-  send(event: string, payload: any, transferable?: Array<any>) {
-    window.parent.postMessage({ event, payload }, '*', transferable);
-  },
-});
-
-const agent = new Agent(bridge);
-
-const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-initBackend(hook, agent, window.parent);
-
-// Setup React Native style editor if a renderer like react-native-web has injected it.
-if (!!hook.resolveRNStyle) {
-  setupNativeStyleEditor(
-    bridge,
-    agent,
-    hook.resolveRNStyle,
-    hook.nativeStyleEditorValidAttributes
-  );
-}
diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js
index c8f5ba036fa6..230ddc94d2bd 100644
--- a/shells/dev/src/devtools.js
+++ b/shells/dev/src/devtools.js
@@ -3,24 +3,21 @@
 import { createElement } from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
 import { unstable_createRoot as createRoot } from 'react-dom';
-import Bridge from 'src/bridge';
-import { installHook } from 'src/hook';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
 import { initDevTools } from 'src/devtools';
-import Store from 'src/devtools/store';
-import DevTools from 'src/devtools/views/DevTools';
-import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
 const { contentDocument, contentWindow } = iframe;
 
-// The renderer interface can't read saved component filters directly,
-// because they are stored in localStorage within the context of the extension.
-// Instead it relies on the extension to pass filters through.
-contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
-contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = getAppendComponentStack();
+// Helps with positioning Overlay UI.
+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
 
-installHook(contentWindow);
+initializeBackend(contentWindow);
 
 const container = ((document.getElementById('devtools'): any): HTMLElement);
 
@@ -48,46 +45,21 @@ mountButton.addEventListener('click', function() {
 inject('dist/app.js', () => {
   initDevTools({
     connect(cb) {
-      const bridge = new Bridge({
-        listen(fn) {
-          const listener = ({ data }) => {
-            fn(data);
-          };
-          // Preserve the reference to the window we subscribe to, so we can unsubscribe from it when required.
-          const contentWindowParent = contentWindow.parent;
-          contentWindowParent.addEventListener('message', listener);
-          return () => {
-            contentWindowParent.removeEventListener('message', listener);
-          };
-        },
-        send(event: string, payload: any, transferable?: Array<any>) {
-          contentWindow.postMessage({ event, payload }, '*', transferable);
-        },
-      });
+      const DevTools = initializeFrontend(contentWindow);
 
-      cb(bridge);
-
-      const store = new Store(bridge);
+      // Activate the backend only once the DevTools frontend Store has been initialized.
+      // Otherwise the Store may miss important initial tree op codes.
+      activateBackend(contentWindow);
 
       const root = createRoot(container);
-      const batch = root.createBatch();
-      batch.render(
+      root.render(
         createElement(DevTools, {
-          bridge,
           browserTheme: 'light',
           showTabBar: true,
           showWelcomeToTheNewDevToolsDialog: true,
-          store,
           warnIfLegacyBackendDetected: true,
         })
       );
-      batch.then(() => {
-        batch.commit();
-
-        // Initialize the backend only once the DevTools frontend Store has been initialized.
-        // Otherwise the Store may miss important initial tree op codes.
-        inject('dist/backend.js');
-      });
     },
 
     onReload(reloadFn) {
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 6738e1311746..779a0588b1a2 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -16,6 +16,8 @@ if (!TARGET) {
 
 const __DEV__ = NODE_ENV === 'development';
 
+const root = resolve(__dirname, '../..');
+
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
@@ -24,12 +26,15 @@ const config = {
   devtool: false,
   entry: {
     app: './app/index.js',
-    backend: './src/backend.js',
     devtools: './src/devtools.js',
   },
   resolve: {
     alias: {
-      src: resolve(__dirname, '../../src'),
+      'react-devtools-inline': resolve(
+        root,
+        'packages/react-devtools-inline/src/'
+      ),
+      src: resolve(root, 'src'),
     },
   },
   plugins: [
@@ -45,7 +50,7 @@ const config = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: require.resolve('../../babel.config.js'),
+          configFile: resolve(root, 'babel.config.js'),
         },
       },
       {
diff --git a/src/backend/views/Highlighter/Overlay.js b/src/backend/views/Highlighter/Overlay.js
index f2190066b479..5e59c2b93ff4 100644
--- a/src/backend/views/Highlighter/Overlay.js
+++ b/src/backend/views/Highlighter/Overlay.js
@@ -153,20 +153,11 @@ export default class Overlay {
 
   constructor() {
     // Find the root window, because overlays are positioned relative to it.
-    let currentWindow = window;
-    while (currentWindow !== currentWindow.parent) {
-      currentWindow = currentWindow.parent;
-    }
+    let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.window = currentWindow;
 
     // When opened in shells/dev, the tooltip should be bound by the app iframe, not by the topmost window.
-    let tipBoundsWindow = window;
-    while (
-      tipBoundsWindow !== tipBoundsWindow.parent &&
-      !tipBoundsWindow.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')
-    ) {
-      tipBoundsWindow = tipBoundsWindow.parent;
-    }
+    let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.tipBoundsWindow = tipBoundsWindow;
 
     const doc = currentWindow.document;
diff --git a/src/devtools/store.js b/src/devtools/store.js
index 41db44634f60..e032463957e0 100644
--- a/src/devtools/store.js
+++ b/src/devtools/store.js
@@ -114,7 +114,7 @@ export default class Store extends EventEmitter<{|
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
-  _supportsNativeInspection: boolean = false;
+  _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 
diff --git a/src/devtools/views/DevTools.js b/src/devtools/views/DevTools.js
index 845d0a89a2f9..44d48b61318f 100644
--- a/src/devtools/views/DevTools.js
+++ b/src/devtools/views/DevTools.js
@@ -59,7 +59,6 @@ export type Props = {|
   // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-  settingsPortalContainer?: Element,
 |};
 
 const componentsTab = {
@@ -85,7 +84,6 @@ export default function DevTools({
   componentsPortalContainer,
   overrideTab,
   profilerPortalContainer,
-  settingsPortalContainer,
   showTabBar = false,
   showWelcomeToTheNewDevToolsDialog = false,
   store,
@@ -113,7 +111,6 @@ export default function DevTools({
             browserTheme={browserTheme}
             componentsPortalContainer={componentsPortalContainer}
             profilerPortalContainer={profilerPortalContainer}
-            settingsPortalContainer={settingsPortalContainer}
           >
             <ViewElementSourceContext.Provider value={viewElementSource}>
               <TreeContextController>
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 02a1f720b69e..8dfbd95f7270 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -41,7 +41,6 @@ type Props = {|
   children: React$Node,
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-  settingsPortalContainer?: Element,
 |};
 
 function SettingsContextController({
@@ -49,7 +48,6 @@ function SettingsContextController({
   children,
   componentsPortalContainer,
   profilerPortalContainer,
-  settingsPortalContainer,
 }: Props) {
   const bridge = useContext(BridgeContext);
 
@@ -82,18 +80,8 @@ function SettingsContextController({
           .documentElement: any): HTMLElement)
       );
     }
-    if (settingsPortalContainer != null) {
-      array.push(
-        ((settingsPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement)
-      );
-    }
     return array;
-  }, [
-    componentsPortalContainer,
-    profilerPortalContainer,
-    settingsPortalContainer,
-  ]);
+  }, [componentsPortalContainer, profilerPortalContainer]);
 
   const computedStyle = getComputedStyle((document.body: any));
   const comfortableLineHeight = parseInt(

From baac1dcc52cbb05b3733182930378de6ca22229d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 5 Aug 2019 14:00:18 -0700
Subject: [PATCH 803/814] Inline package tweaks: * Ignore messages from the
 DevTools browser extension. * Cleanup/clarify README

---
 packages/react-devtools-inline/README.md      | 22 ++++++++++++-------
 .../react-devtools-inline/src/frontend.js     |  6 ++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index c678f2c5f068..23db9ca30ff8 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -74,6 +74,8 @@ const { contentWindow } = iframe;
 initializeBackend(contentWindow);
 
 // React application can be injected into <iframe> at any time now...
+// Note that this would need to be done via <script> tag injection,
+// as setting the src of the <iframe> would load a new page (withou the injected backend).
 
 // Initialize DevTools UI to listen to the hook we just installed.
 // This returns a React component we can render anywhere in the parent window.
@@ -91,29 +93,33 @@ Sandboxed `iframe`s are also supported but require more complex initialization.
 
 **`iframe.html`**
 ```js
-import { activate, initialize } from 'react-devtools-inline/backend';
+import { activate, initialize } from "react-devtools-inline/backend";
 
 // The DevTooks hook needs to be installed before React is even required!
 // The safest way to do this is probably to install it in a separate script tag.
 initialize(window);
 
 // Wait for the frontend to let us know that it's ready.
-window.addEventListener('message', ({ data }) => {
+function onMessage({ data }) {
   switch (data.type) {
-    case 'activate':
+    case "activate-backend":
+      window.removeEventListener("message", onMessage);
+
       activate(window);
       break;
     default:
       break;
   }
-});
+}
+
+window.addEventListener("message", onMessage);
 ```
 
 **`main-window.html`**
 ```js
-import { initialize } from 'react-devtools-inline/frontend';
+import { initialize } from "react-devtools-inline/frontend";
 
-const iframe = document.getElementById('target');
+const iframe = document.getElementById("target");
 const { contentWindow } = iframe;
 
 // Initialize DevTools UI to listen to the iframe.
@@ -126,9 +132,9 @@ const DevTools = initialize(contentWindow);
 iframe.onload = () => {
   contentWindow.postMessage(
     {
-      type: 'activate',
+      type: "activate-backend"
     },
-    '*'
+    "*"
   );
 };
 ```
\ No newline at end of file
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 7398254a8453..b64363014a19 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -16,7 +16,11 @@ import type { Props } from 'src/devtools/views/DevTools';
 export function initialize(
   contentWindow: window
 ): React$AbstractComponent<Props, mixed> {
-  const onMessage = ({ data, origin, source }) => {
+  const onMessage = ({ data, source }) => {
+    if (source === 'react-devtools-content-script') {
+      // Ignore messages from the DevTools browser extension.
+    }
+
     switch (data.type) {
       case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
         // This is the only message we're listening for,

From 2349f04478269f922feccb6db4b7a443eb549e74 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Aug 2019 08:46:42 -0700
Subject: [PATCH 804/814] Handle case where :root styles aren't (yet) applied
 when SettingsContext mounts

This fixes a possible bug in the inline shell where line-heights are NaN so the Tree (react-window List) gets created with a itemSize of NaN
---
 .../views/Settings/SettingsContext.js         | 54 ++++++++++++++-----
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 8dfbd95f7270..ac55069a6c19 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useState,
 } from 'react';
 import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
 import { useLocalStorage } from '../hooks';
@@ -36,6 +37,11 @@ SettingsContext.displayName = 'SettingsContext';
 
 type DocumentElements = Array<HTMLElement>;
 
+type CurrentLineHeights = {|
+  comfortableLineHeight: number,
+  compactLineHeight: number,
+|};
+
 type Props = {|
   browserTheme: BrowserTheme,
   children: React$Node,
@@ -83,15 +89,24 @@ function SettingsContextController({
     return array;
   }, [componentsPortalContainer, profilerPortalContainer]);
 
-  const computedStyle = getComputedStyle((document.body: any));
-  const comfortableLineHeight = parseInt(
-    computedStyle.getPropertyValue('--comfortable-line-height-data'),
-    10
-  );
-  const compactLineHeight = parseInt(
-    computedStyle.getPropertyValue('--compact-line-height-data'),
-    10
-  );
+  const [
+    currentLineHeights,
+    setCurrentLineHeights,
+  ] = useState<CurrentLineHeights>(getCurrentLineHeights);
+
+  // In case the root styles have not yet been applied, wait a bit and then check again.
+  // This avoids a bad case of NaN line heights in lists/trees.
+  useEffect(() => {
+    if (Number.isNaN(currentLineHeights.compactLineHeight)) {
+      const intervalID = setInterval(() => {
+        const newLineHeights = getCurrentLineHeights();
+        if (!Number.isNaN(newLineHeights.compactLineHeight)) {
+          setCurrentLineHeights(newLineHeights);
+        }
+      }, 100);
+      return () => clearInterval(intervalID);
+    }
+  }, [currentLineHeights]);
 
   useLayoutEffect(() => {
     switch (displayDensity) {
@@ -136,12 +151,11 @@ function SettingsContextController({
       setAppendComponentStack,
       lineHeight:
         displayDensity === 'compact'
-          ? compactLineHeight
-          : comfortableLineHeight,
+          ? currentLineHeights.compactLineHeight
+          : currentLineHeights.comfortableLineHeight,
     }),
     [
-      comfortableLineHeight,
-      compactLineHeight,
+      currentLineHeights,
       displayDensity,
       setDisplayDensity,
       setTheme,
@@ -158,6 +172,20 @@ function SettingsContextController({
   );
 }
 
+function getCurrentLineHeights(): CurrentLineHeights {
+  const computedStyle = getComputedStyle((document.body: any));
+  return {
+    comfortableLineHeight: parseInt(
+      computedStyle.getPropertyValue('--comfortable-line-height-data'),
+      10
+    ),
+    compactLineHeight: parseInt(
+      computedStyle.getPropertyValue('--compact-line-height-data'),
+      10
+    ),
+  };
+}
+
 function setStyleVariable(
   name: string,
   value: string,

From e015e3d937ca21bf5e441f7af3f8b3d8b777b895 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Aug 2019 08:57:34 -0700
Subject: [PATCH 805/814] Added not about sync/batched root API being required

---
 packages/react-devtools-inline/README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 23db9ca30ff8..65bb06ff82e6 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -38,7 +38,7 @@ activate();
 ### `react-devtools-inline/frontend`
 
 * **`initialize(contentWindow)`** -
-Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly.
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
 
 ```js
 import { initialize } from 'react-devtools-inline/frontend';
@@ -52,6 +52,8 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
+<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
+
 ## Examples
 
 ### Configuring a same-origin `iframe`
@@ -82,6 +84,8 @@ initializeBackend(contentWindow);
 const DevTools = initializeFrontend(contentWindow);
 
 // <DevTools /> interface can be rendered in the parent window at any time now...
+// Be sure to use either ReactDOM.unstable_createRoot()
+// or ReactDOM.unstable_createSyncRoot() to render this component.
 
 // Let the backend know the frontend is ready and listening.
 activateBackend(contentWindow);
@@ -124,6 +128,8 @@ const { contentWindow } = iframe;
 
 // Initialize DevTools UI to listen to the iframe.
 // This returns a React component we can render anywhere in the main window.
+// Be sure to use either ReactDOM.unstable_createRoot()
+// or ReactDOM.unstable_createSyncRoot() to render this component.
 const DevTools = initialize(contentWindow);
 
 // Let the backend know to initialize itself.

From 2015a39c2e70970c1a097a313b71e0cd404b4960 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Aug 2019 10:22:12 -0700
Subject: [PATCH 806/814] 4.0.0-alpha.7 -> 4.0.0-alpha.8

---
 packages/react-devtools-core/package.json   | 2 +-
 packages/react-devtools-inline/package.json | 2 +-
 packages/react-devtools/package.json        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 035564a20a52..87819fcae4b1 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 188d11faefd7..850e57296e08 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index fc45a8ccf845..b5f355af9558 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.7",
+    "react-devtools-core": "4.0.0-alpha.8",
     "update-notifier": "^2.1.0"
   }
 }

From 2eb3f4e9b8dcf876b667591dd25209bf41a43a05 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Aug 2019 10:45:16 -0700
Subject: [PATCH 807/814] README typofix

---
 packages/react-devtools-inline/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 65bb06ff82e6..b576b40db8a3 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -72,7 +72,7 @@ const iframe = document.getElementById('target');
 const { contentWindow } = iframe;
 
 // Installs the global hook into the iframe.
-// This be called before React is loaded into that frame.
+// This must be called before React is loaded into that frame.
 initializeBackend(contentWindow);
 
 // React application can be injected into <iframe> at any time now...

From b5195a5f16fb900c924401066ee453e6ef53baea Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Aug 2019 08:26:48 -0700
Subject: [PATCH 808/814] Fixed a couple of edge case styling and layout issues
 I noticed while testing the inline target

---
 package.json                                  |  1 +
 src/constants.js                              | 18 +++++++
 src/devtools/views/Components/SearchInput.css |  6 ++-
 src/devtools/views/Components/Tree.js         |  4 ++
 .../views/Profiler/ProfilerContext.js         |  4 +-
 .../views/Profiler/ReloadAndProfileButton.js  | 13 +++--
 .../views/Settings/SettingsContext.js         | 50 +++----------------
 yarn.lock                                     | 16 ++++++
 8 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 1540785118c9..c0c5ffadc0db 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
+    "raw-loader": "^3.1.0",
     "react": "^0.0.0-424099da6",
     "react-15": "npm:react@^15",
     "react-color": "^2.11.7",
diff --git a/src/constants.js b/src/constants.js
index d18624fbf04f..daef7b0e70bf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,8 +1,26 @@
 // @flow
 
+// $FlowFixMe Cannot resolve module
+import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax
+
 // Flip this flag to true to enable verbose console debug logging.
 export const __DEBUG__ = false;
 
+const extractVar = varName => {
+  const regExp = new RegExp(`${varName}: ([0-9]+)`);
+  const match = rawStyleString.match(regExp);
+  return parseInt(match[1], 10);
+};
+
+// TRICKY
+// Extracting during build time avoids a temporarily invalid state for the inline target.
+// Sometimes the inline target is rendered before root styles are applied,
+// which would result in e.g. NaN itemSize being passed to react-window list.
+export const COMFORTABLE_LINE_HEIGHT = extractVar(
+  'comfortable-line-height-data'
+);
+export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
+
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
diff --git a/src/devtools/views/Components/SearchInput.css b/src/devtools/views/Components/SearchInput.css
index ddd1e70825b7..5db009aa1370 100644
--- a/src/devtools/views/Components/SearchInput.css
+++ b/src/devtools/views/Components/SearchInput.css
@@ -1,11 +1,12 @@
 .SearchInput {
-  flex: 1;
+  flex: 1 1;
   display: flex;
   align-items: center;
 }
 
 .Input {
-  flex: 1;
+  flex: 1 1 100px;
+  width: 100px;
   font-size: var(--font-size-sans-large);
   outline: none;
   border: none;
@@ -24,6 +25,7 @@
 .IndexLabel {
   color: var(--color-dim);
   font-size: var(--font-size-sans-normal);
+  white-space: pre;
 }
 
 .LeftVRule,
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 285cb39c4165..3f807b16b427 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -104,6 +104,10 @@ export default function Tree(props: Props) {
         return;
       }
 
+      // TODO We should ignore arrow keys if the focus is outside of DevTools.
+      // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
+      // e.g. when a text input or a select has focus.
+
       let element;
       switch (event.key) {
         case 'ArrowDown':
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js
index 9c5f1ed2b678..f50947e1cf77 100644
--- a/src/devtools/views/Profiler/ProfilerContext.js
+++ b/src/devtools/views/Profiler/ProfilerContext.js
@@ -33,8 +33,8 @@ export type Context = {|
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
-  startProfiling(value: boolean): void,
-  stopProfiling(value: boolean): void,
+  startProfiling(): void,
+  stopProfiling(): void,
   supportsProfiling: boolean,
 
   // Which root should profiling data be shown for?
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 933d453ab04f..45f805048d93 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -6,6 +6,7 @@ import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from 'src/devtools/store';
+import { ProfilerContext } from './ProfilerContext';
 
 type SubscriptionData = {|
   recordChangeDescriptions: boolean,
@@ -16,6 +17,8 @@ export default function ReloadAndProfileButton() {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const { startProfiling } = useContext(ProfilerContext);
+
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => ({
@@ -38,10 +41,12 @@ export default function ReloadAndProfileButton() {
     supportsReloadAndProfile,
   } = useSubscription<SubscriptionData, Store>(subscription);
 
-  const reloadAndProfile = useCallback(
-    () => bridge.send('reloadAndProfile', recordChangeDescriptions),
-    [bridge, recordChangeDescriptions]
-  );
+  const reloadAndProfile = useCallback(() => {
+    bridge.send('reloadAndProfile', recordChangeDescriptions);
+
+    // In case the DevTools UI itself doesn't reload along with the app, also start profiling.
+    startProfiling();
+  }, [bridge, recordChangeDescriptions, startProfiling]);
 
   if (!supportsReloadAndProfile) {
     return null;
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index ac55069a6c19..62f3ae01da83 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -6,9 +6,12 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
-  useState,
 } from 'react';
-import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
+import {
+  COMFORTABLE_LINE_HEIGHT,
+  COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+} from 'src/constants';
 import { useLocalStorage } from '../hooks';
 import { BridgeContext } from '../context';
 
@@ -37,11 +40,6 @@ SettingsContext.displayName = 'SettingsContext';
 
 type DocumentElements = Array<HTMLElement>;
 
-type CurrentLineHeights = {|
-  comfortableLineHeight: number,
-  compactLineHeight: number,
-|};
-
 type Props = {|
   browserTheme: BrowserTheme,
   children: React$Node,
@@ -89,25 +87,6 @@ function SettingsContextController({
     return array;
   }, [componentsPortalContainer, profilerPortalContainer]);
 
-  const [
-    currentLineHeights,
-    setCurrentLineHeights,
-  ] = useState<CurrentLineHeights>(getCurrentLineHeights);
-
-  // In case the root styles have not yet been applied, wait a bit and then check again.
-  // This avoids a bad case of NaN line heights in lists/trees.
-  useEffect(() => {
-    if (Number.isNaN(currentLineHeights.compactLineHeight)) {
-      const intervalID = setInterval(() => {
-        const newLineHeights = getCurrentLineHeights();
-        if (!Number.isNaN(newLineHeights.compactLineHeight)) {
-          setCurrentLineHeights(newLineHeights);
-        }
-      }, 100);
-      return () => clearInterval(intervalID);
-    }
-  }, [currentLineHeights]);
-
   useLayoutEffect(() => {
     switch (displayDensity) {
       case 'comfortable':
@@ -151,11 +130,10 @@ function SettingsContextController({
       setAppendComponentStack,
       lineHeight:
         displayDensity === 'compact'
-          ? currentLineHeights.compactLineHeight
-          : currentLineHeights.comfortableLineHeight,
+          ? COMPACT_LINE_HEIGHT
+          : COMFORTABLE_LINE_HEIGHT,
     }),
     [
-      currentLineHeights,
       displayDensity,
       setDisplayDensity,
       setTheme,
@@ -172,20 +150,6 @@ function SettingsContextController({
   );
 }
 
-function getCurrentLineHeights(): CurrentLineHeights {
-  const computedStyle = getComputedStyle((document.body: any));
-  return {
-    comfortableLineHeight: parseInt(
-      computedStyle.getPropertyValue('--comfortable-line-height-data'),
-      10
-    ),
-    compactLineHeight: parseInt(
-      computedStyle.getPropertyValue('--compact-line-height-data'),
-      10
-    ),
-  };
-}
-
 function setStyleVariable(
   name: string,
   value: string,
diff --git a/yarn.lock b/yarn.lock
index 86531c672e4a..df60e608338a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9931,6 +9931,14 @@ raw-body@2.3.3:
     iconv-lite "0.4.23"
     unpipe "1.0.0"
 
+raw-loader@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
+  integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^2.0.1"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -10715,6 +10723,14 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.1.0.tgz#940363b6b1ec407800a22951bdcc23363c039393"
+  integrity sha512-g6SViEZAfGNrToD82ZPUjq52KUPDYc+fN5+g6Euo5mLokl/9Yx14z0Cu4RR1m55HtBXejO0sBt+qw79axN+Fiw==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"

From 8001b6432c203ee46d8bbcb4099bef79856107d7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Aug 2019 08:49:26 -0700
Subject: [PATCH 809/814] Fixed raw-loader + Jest problem

---
 .eslintrc                                     |  1 +
 flow.js                                       |  1 +
 .../react-devtools-core/webpack.backend.js    |  1 +
 .../react-devtools-core/webpack.standalone.js |  1 +
 .../react-devtools-inline/webpack.config.js   |  3 +-
 shells/browser/shared/webpack.backend.js      |  1 +
 shells/browser/shared/webpack.config.js       |  1 +
 shells/dev/webpack.config.js                  |  3 +-
 src/__tests__/setupEnv.js                     |  1 +
 src/constants.js                              | 46 +++++++++++--------
 10 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5ee640698239..5622bebb6f15 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,6 +12,7 @@
   },
   "globals": {
     "__DEV__": "readonly",
+    "__TEST__": "readonly",
     "jasmine": "readonly",
     "spyOn": "readonly"
   }
diff --git a/flow.js b/flow.js
index 740d69f34b4a..dc0c5759006b 100644
--- a/flow.js
+++ b/flow.js
@@ -18,6 +18,7 @@ declare module 'events' {
 }
 
 declare var __DEV__: boolean;
+declare var __TEST__: boolean;
 
 declare var jasmine: {|
   getEnv: () => {|
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 79e633f7433b..14ef8a2cb06b 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -35,6 +35,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: true,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 9818479d1637..034d281a5775 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -34,6 +34,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: false,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index f7ea8cc6f0d4..254d4e4129ec 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -38,7 +38,8 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: __DEV__,
+      __DEV__,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/shells/browser/shared/webpack.backend.js b/shells/browser/shared/webpack.backend.js
index a091b269acdb..cf034bccef31 100644
--- a/shells/browser/shared/webpack.backend.js
+++ b/shells/browser/shared/webpack.backend.js
@@ -31,6 +31,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: true,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index dd2acc1f3c91..23342ca46c44 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -36,6 +36,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: false,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/shells/dev/webpack.config.js b/shells/dev/webpack.config.js
index 779a0588b1a2..ce58e6418a18 100644
--- a/shells/dev/webpack.config.js
+++ b/shells/dev/webpack.config.js
@@ -39,7 +39,8 @@ const config = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: __DEV__,
+      __DEV__,
+      __TEST__: false,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
diff --git a/src/__tests__/setupEnv.js b/src/__tests__/setupEnv.js
index 018e6ff62802..0198427ad94e 100644
--- a/src/__tests__/setupEnv.js
+++ b/src/__tests__/setupEnv.js
@@ -12,3 +12,4 @@ if (!global.hasOwnProperty('localStorage')) {
 
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__TEST__ = process.env.NODE_ENV === 'test';
diff --git a/src/constants.js b/src/constants.js
index daef7b0e70bf..d27de3ed5bc4 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,26 +1,8 @@
 // @flow
 
-// $FlowFixMe Cannot resolve module
-import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax
-
 // Flip this flag to true to enable verbose console debug logging.
 export const __DEBUG__ = false;
 
-const extractVar = varName => {
-  const regExp = new RegExp(`${varName}: ([0-9]+)`);
-  const match = rawStyleString.match(regExp);
-  return parseInt(match[1], 10);
-};
-
-// TRICKY
-// Extracting during build time avoids a temporarily invalid state for the inline target.
-// Sometimes the inline target is rendered before root styles are applied,
-// which would result in e.g. NaN itemSize being passed to react-window list.
-export const COMFORTABLE_LINE_HEIGHT = extractVar(
-  'comfortable-line-height-data'
-);
-export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
-
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
@@ -45,3 +27,31 @@ export const PROFILER_EXPORT_VERSION = 4;
 
 export const CHANGE_LOG_URL =
   'https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md';
+
+// HACK
+//
+// Extracting during build time avoids a temporarily invalid state for the inline target.
+// Sometimes the inline target is rendered before root styles are applied,
+// which would result in e.g. NaN itemSize being passed to react-window list.
+//
+// We can't use the Webpack loader syntax in the context of Jest though,
+// so tests need some reasonably meaningful fallback value.
+let COMFORTABLE_LINE_HEIGHT = 15;
+let COMPACT_LINE_HEIGHT = 10;
+
+if (!__TEST__) {
+  // $FlowFixMe
+  const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax
+    .default;
+
+  const extractVar = varName => {
+    const regExp = new RegExp(`${varName}: ([0-9]+)`);
+    const match = rawStyleString.match(regExp);
+    return parseInt(match[1], 10);
+  };
+
+  COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
+  COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
+}
+
+export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };

From 8fa608d9ab881b1a6287044c0f7d80e189c1b408 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Aug 2019 10:31:50 -0700
Subject: [PATCH 810/814] Fixed a selection-sync edge case for
 Elements/Components tabs

---
 src/devtools/views/Components/Tree.js | 33 +++++++++++++++------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index 3f807b16b427..7c575e450a20 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -3,13 +3,12 @@
 import React, {
   Fragment,
   Suspense,
-  useState,
   useCallback,
   useContext,
   useEffect,
   useMemo,
-  useLayoutEffect,
   useRef,
+  useState,
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
@@ -54,8 +53,6 @@ export default function Tree(props: Props) {
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
     false
   );
-  // $FlowFixMe https://github.com/facebook/flow/issues/7341
-  const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
@@ -65,15 +62,23 @@ export default function Tree(props: Props) {
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
-  useLayoutEffect(() => {
-    if (selectedElementIndex !== null && listRef.current != null) {
-      listRef.current.scrollToItem(selectedElementIndex, 'smart');
-      // Note this autoscroll only works for rows.
-      // There's another autoscroll inside the elements
-      // that ensures the component name is visible horizontally.
-      // It's too early to do it now because the row might not exist yet.
-    }
-  }, [listRef, selectedElementIndex]);
+  //
+  // TRICKY:
+  // It's important to use a callback ref for this, rather than a ref object and an effect.
+  // As an optimization, the AutoSizer component does not render children when their size would be 0.
+  // This means that in some cases (if the browser panel size is initially really small),
+  // the Tree component might render without rendering an inner List.
+  // In this case, the list ref would be null on mount (when the scroll effect runs),
+  // meaning the scroll action would be skipped (since ref updates don't re-run effects).
+  // Using a callback ref accounts for this case...
+  const listCallbackRef = useCallback(
+    list => {
+      if (list != null && selectedElementIndex !== null) {
+        list.scrollToItem(selectedElementIndex, 'smart');
+      }
+    },
+    [selectedElementIndex]
+  );
 
   // Picking an element in the inspector should put focus into the tree.
   // This ensures that keyboard navigation works right after picking a node.
@@ -322,7 +327,7 @@ export default function Tree(props: Props) {
                 itemData={itemData}
                 itemKey={itemKey}
                 itemSize={lineHeight}
-                ref={listRef}
+                ref={listCallbackRef}
                 width={width}
               >
                 {ElementView}

From 2f1c100e7ce3e16357510ae5867b33b2e9236f42 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Aug 2019 11:13:38 -0700
Subject: [PATCH 811/814] Misc. Profiler tweaks

* Disabled (with a follow up TODO) the  call in the reload-and-profile toggle.
* Disabled reload-and-profile in Firefox extension for now, since it was triggering a disconnected port error.
* Fixed Safari layout bug that caused profiler charts to be hidden.
---
 shells/browser/shared/src/main.js                  |  8 ++++++--
 src/devtools/views/Profiler/CommitFlamegraph.css   |  2 +-
 src/devtools/views/Profiler/CommitRanked.css       |  2 +-
 src/devtools/views/Profiler/Interactions.css       |  2 +-
 src/devtools/views/Profiler/Profiler.css           |  2 +-
 .../views/Profiler/ReloadAndProfileButton.js       | 14 +++++++-------
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index 9e1cbbb01deb..f4942e5f01f8 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -5,7 +5,11 @@ import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import inject from './inject';
-import { createViewElementSource, getBrowserTheme } from './utils';
+import {
+  createViewElementSource,
+  getBrowserName,
+  getBrowserTheme,
+} from './utils';
 import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import {
   localStorageGetItem,
@@ -115,7 +119,7 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsReloadAndProfile: true,
+          supportsReloadAndProfile: getBrowserName() === 'Chrome',
           supportsProfiling,
         });
         store.profilerStore.profilingData = profilingData;
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.css b/src/devtools/views/Profiler/CommitFlamegraph.css
index d9ab14ef3cbe..143f83b04325 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.css
+++ b/src/devtools/views/Profiler/CommitFlamegraph.css
@@ -1,6 +1,6 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }
 
diff --git a/src/devtools/views/Profiler/CommitRanked.css b/src/devtools/views/Profiler/CommitRanked.css
index bc441e485e1f..c226f30486bf 100644
--- a/src/devtools/views/Profiler/CommitRanked.css
+++ b/src/devtools/views/Profiler/CommitRanked.css
@@ -1,5 +1,5 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }
diff --git a/src/devtools/views/Profiler/Interactions.css b/src/devtools/views/Profiler/Interactions.css
index 935d2f221aa7..81fd9da918e1 100644
--- a/src/devtools/views/Profiler/Interactions.css
+++ b/src/devtools/views/Profiler/Interactions.css
@@ -1,6 +1,6 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }
 
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index a7eeb78a181a..e9157aa35c66 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -32,7 +32,7 @@
   position: relative;
   flex: 1 1 auto;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 45f805048d93..0c92ae6efeb1 100644
--- a/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -6,7 +6,6 @@ import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from 'src/devtools/store';
-import { ProfilerContext } from './ProfilerContext';
 
 type SubscriptionData = {|
   recordChangeDescriptions: boolean,
@@ -17,8 +16,6 @@ export default function ReloadAndProfileButton() {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const { startProfiling } = useContext(ProfilerContext);
-
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => ({
@@ -42,11 +39,14 @@ export default function ReloadAndProfileButton() {
   } = useSubscription<SubscriptionData, Store>(subscription);
 
   const reloadAndProfile = useCallback(() => {
-    bridge.send('reloadAndProfile', recordChangeDescriptions);
+    // TODO If we want to support reload-and-profile for e.g. React Native,
+    // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
+    // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
+    // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
+    // startProfiling();
 
-    // In case the DevTools UI itself doesn't reload along with the app, also start profiling.
-    startProfiling();
-  }, [bridge, recordChangeDescriptions, startProfiling]);
+    bridge.send('reloadAndProfile', recordChangeDescriptions);
+  }, [bridge, recordChangeDescriptions]);
 
   if (!supportsReloadAndProfile) {
     return null;

From 6eb04b2b167bba568583e5ce2ba6326fd59230c6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Aug 2019 11:34:00 -0700
Subject: [PATCH 812/814] 4.0.0-alpha.8 -> 4.0.0-alpha.9

---
 packages/react-devtools-core/package.json   | 2 +-
 packages/react-devtools-inline/package.json | 2 +-
 packages/react-devtools/package.json        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 87819fcae4b1..30b606d7285e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-alpha.9",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 850e57296e08..2e6ddbe5c278 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-alpha.9",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index b5f355af9558..2ce188a47f7b 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-alpha.9",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.0-alpha.8",
+    "react-devtools-core": "4.0.0-alpha.9",
     "update-notifier": "^2.1.0"
   }
 }

From 848327760f4d351e41f75385709c7748cfff9164 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Aug 2019 10:09:17 -0700
Subject: [PATCH 813/814] Initializing empty merge repo


From 56b1c20cf0b990dceee7e62599f272c5b28aa991 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Aug 2019 10:33:56 -0700
Subject: [PATCH 814/814] Reorganized to avoid merge conflicts with React repo
 folder structure

---
 {.circleci => extension/.circleci}/config.yml       |   0
 .eslintignore => extension/.eslintignore            |   0
 .eslintrc => extension/.eslintrc                    |   0
 .flowconfig => extension/.flowconfig                |   0
 .gitignore => extension/.gitignore                  |   0
 .prettierignore => extension/.prettierignore        |   0
 .prettierrc => extension/.prettierrc                |   0
 CHANGELOG.md => extension/CHANGELOG.md              |   0
 OVERVIEW.md => extension/OVERVIEW.md                |   0
 README.md => extension/README.md                    |   0
 babel.config.js => extension/babel.config.js        |   0
 .../fixtures}/regression/14.9.html                  |   0
 .../fixtures}/regression/15.0.html                  |   0
 .../fixtures}/regression/15.1.html                  |   0
 .../fixtures}/regression/15.2.html                  |   0
 .../fixtures}/regression/15.3.html                  |   0
 .../fixtures}/regression/15.4.html                  |   0
 .../fixtures}/regression/15.5.html                  |   0
 .../fixtures}/regression/15.6.html                  |   0
 .../fixtures}/regression/16.0.html                  |   0
 .../fixtures}/regression/16.1.html                  |   0
 .../fixtures}/regression/16.2.html                  |   0
 .../fixtures}/regression/16.3.html                  |   0
 .../fixtures}/regression/16.4.html                  |   0
 .../fixtures}/regression/16.5.html                  |   0
 .../fixtures}/regression/16.6.html                  |   0
 .../fixtures}/regression/16.7.html                  |   0
 .../fixtures}/regression/canary.html                |   0
 .../fixtures}/regression/index.html                 |   0
 .../fixtures}/regression/next.html                  |   0
 .../fixtures}/regression/server.js                  |   0
 .../fixtures}/regression/shared.js                  |   0
 .../fixtures}/regression/styles.css                 |   0
 .../fixtures}/standalone/index.html                 |   0
 {flow-typed => extension/flow-typed}/chrome.js      |   0
 {flow-typed => extension/flow-typed}/jest.js        |   0
 .../flow-typed}/npm/react-test-renderer_v16.x.x.js  |   0
 flow.js => extension/flow.js                        |   0
 package.json => extension/package.json              |   0
 .../shells}/browser/chrome/README.md                |   0
 .../shells}/browser/chrome/build.js                 |   0
 .../shells}/browser/chrome/deploy.js                |   0
 .../shells}/browser/chrome/manifest.json            |   0
 .../shells}/browser/chrome/now.json                 |   0
 {shells => extension/shells}/browser/chrome/test.js |   0
 .../shells}/browser/firefox/README.md               |   0
 .../shells}/browser/firefox/build.js                |   0
 .../shells}/browser/firefox/deploy.js               |   0
 .../shells}/browser/firefox/manifest.json           |   0
 .../shells}/browser/firefox/now.json                |   0
 .../shells}/browser/firefox/test.js                 |   0
 .../shells}/browser/shared/build.js                 |   0
 .../shells}/browser/shared/deploy.chrome.html       |   0
 .../shells}/browser/shared/deploy.firefox.html      |   0
 .../shells}/browser/shared/deploy.html              |   0
 .../shells}/browser/shared/deploy.js                |   0
 .../shells}/browser/shared/icons/128-deadcode.png   | Bin
 .../browser/shared/icons/128-development.png        | Bin
 .../shells}/browser/shared/icons/128-disabled.png   | Bin
 .../shells}/browser/shared/icons/128-outdated.png   | Bin
 .../shells}/browser/shared/icons/128-production.png | Bin
 .../shells}/browser/shared/icons/128-unminified.png | Bin
 .../shells}/browser/shared/icons/16-deadcode.png    | Bin
 .../shells}/browser/shared/icons/16-development.png | Bin
 .../shells}/browser/shared/icons/16-disabled.png    | Bin
 .../shells}/browser/shared/icons/16-outdated.png    | Bin
 .../shells}/browser/shared/icons/16-production.png  | Bin
 .../shells}/browser/shared/icons/16-unminified.png  | Bin
 .../shells}/browser/shared/icons/32-deadcode.png    | Bin
 .../shells}/browser/shared/icons/32-development.png | Bin
 .../shells}/browser/shared/icons/32-disabled.png    | Bin
 .../shells}/browser/shared/icons/32-outdated.png    | Bin
 .../shells}/browser/shared/icons/32-production.png  | Bin
 .../shells}/browser/shared/icons/32-unminified.png  | Bin
 .../shells}/browser/shared/icons/48-deadcode.png    | Bin
 .../shells}/browser/shared/icons/48-development.png | Bin
 .../shells}/browser/shared/icons/48-disabled.png    | Bin
 .../shells}/browser/shared/icons/48-outdated.png    | Bin
 .../shells}/browser/shared/icons/48-production.png  | Bin
 .../shells}/browser/shared/icons/48-unminified.png  | Bin
 .../shells}/browser/shared/icons/deadcode.svg       |   0
 .../shells}/browser/shared/icons/development.svg    |   0
 .../shells}/browser/shared/icons/disabled.svg       |   0
 .../shells}/browser/shared/icons/outdated.svg       |   0
 .../shells}/browser/shared/icons/production.svg     |   0
 .../shells}/browser/shared/main.html                |   0
 .../shells}/browser/shared/panel.html               |   0
 .../shells}/browser/shared/popups/deadcode.html     |   0
 .../shells}/browser/shared/popups/development.html  |   0
 .../shells}/browser/shared/popups/disabled.html     |   0
 .../shells}/browser/shared/popups/outdated.html     |   0
 .../shells}/browser/shared/popups/production.html   |   0
 .../shells}/browser/shared/popups/shared.js         |   0
 .../shells}/browser/shared/popups/unminified.html   |   0
 .../shells}/browser/shared/src/backend.js           |   0
 .../shells}/browser/shared/src/background.js        |   0
 .../shells}/browser/shared/src/contentScript.js     |   0
 .../shells}/browser/shared/src/inject.js            |   0
 .../shells}/browser/shared/src/injectGlobalHook.js  |   0
 .../shells}/browser/shared/src/main.js              |   0
 .../shells}/browser/shared/src/panel.js             |   0
 .../shells}/browser/shared/src/renderer.js          |   0
 .../shells}/browser/shared/src/utils.js             |   0
 .../shells}/browser/shared/webpack.backend.js       |   0
 .../shells}/browser/shared/webpack.config.js        |   0
 .../shells}/dev/app/DeeplyNestedComponents/index.js |   0
 .../shells}/dev/app/EditableProps/index.js          |   0
 .../shells}/dev/app/ElementTypes/index.js           |   0
 .../shells}/dev/app/Hydration/index.js              |   0
 .../shells}/dev/app/Iframe/index.js                 |   0
 .../shells}/dev/app/InspectableElements/Contexts.js |   0
 .../dev/app/InspectableElements/CustomHooks.js      |   0
 .../dev/app/InspectableElements/CustomObject.js     |   0
 .../app/InspectableElements/InspectableElements.js  |   0
 .../dev/app/InspectableElements/NestedProps.js      |   0
 .../dev/app/InspectableElements/SimpleValues.js     |   0
 .../shells}/dev/app/InspectableElements/index.js    |   0
 .../shells}/dev/app/InteractionTracing/index.js     |   0
 .../shells}/dev/app/PriorityLevels/index.js         |   0
 .../shells}/dev/app/ReactNativeWeb/index.js         |   0
 .../shells}/dev/app/SuspenseTree/index.js           |   0
 .../shells}/dev/app/ToDoList/List.css               |   0
 .../shells}/dev/app/ToDoList/List.js                |   0
 .../shells}/dev/app/ToDoList/ListItem.css           |   0
 .../shells}/dev/app/ToDoList/ListItem.js            |   0
 .../shells}/dev/app/ToDoList/index.js               |   0
 .../shells}/dev/app/Toggle/index.js                 |   0
 {shells => extension/shells}/dev/app/console.js     |   0
 {shells => extension/shells}/dev/app/index.js       |   0
 {shells => extension/shells}/dev/app/styles.css     |   0
 {shells => extension/shells}/dev/index.html         |   0
 {shells => extension/shells}/dev/now.json           |   0
 {shells => extension/shells}/dev/src/devtools.js    |   0
 {shells => extension/shells}/dev/webpack.config.js  |   0
 {shells => extension/shells}/utils.js               |   0
 .../src}/__tests__/__mocks__/cssMock.js             |   0
 .../inspectedElementContext-test.js.snap            |   0
 .../__snapshots__/ownersListContext-test.js.snap    |   0
 .../__snapshots__/profilerContext-test.js.snap      |   0
 .../__snapshots__/profilingCache-test.js.snap       |   0
 .../__snapshots__/profilingCharts-test.js.snap      |   0
 .../profilingCommitTreeBuilder-test.js.snap         |   0
 .../src}/__tests__/__snapshots__/store-test.js.snap |   0
 .../storeComponentFilters-test.js.snap              |   0
 .../__snapshots__/storeOwners-test.js.snap          |   0
 .../__snapshots__/storeStressSync-test.js.snap      |   0
 .../storeStressTestConcurrent-test.js.snap          |   0
 .../__snapshots__/treeContext-test.js.snap          |   0
 {src => extension/src}/__tests__/bridge-test.js     |   0
 {src => extension/src}/__tests__/console-test.js    |   0
 .../src}/__tests__/inspectedElementContext-test.js  |   0
 .../src}/__tests__/inspectedElementSerializer.js    |   0
 .../__snapshots__/inspectElement-test.js.snap       |   0
 .../__snapshots__/storeLegacy-v15-test.js.snap      |   0
 .../src}/__tests__/legacy/inspectElement-test.js    |   0
 .../src}/__tests__/legacy/storeLegacy-v15-test.js   |   0
 .../src}/__tests__/ownersListContext-test.js        |   0
 .../src}/__tests__/profilerContext-test.js          |   0
 .../src}/__tests__/profilerStore-test.js            |   0
 .../src}/__tests__/profilingCache-test.js           |   0
 .../src}/__tests__/profilingCharts-test.js          |   0
 .../__tests__/profilingCommitTreeBuilder-test.js    |   0
 .../src}/__tests__/profilingUtils-test.js           |   0
 {src => extension/src}/__tests__/setupEnv.js        |   0
 {src => extension/src}/__tests__/setupTests.js      |   0
 {src => extension/src}/__tests__/store-test.js      |   0
 .../src}/__tests__/storeComponentFilters-test.js    |   0
 .../src}/__tests__/storeOwners-test.js              |   0
 {src => extension/src}/__tests__/storeSerializer.js |   0
 .../src}/__tests__/storeStressSync-test.js          |   0
 .../__tests__/storeStressTestConcurrent-test.js     |   0
 .../src}/__tests__/treeContext-test.js              |   0
 {src => extension/src}/__tests__/utils.js           |   0
 .../backend/NativeStyleEditor/resolveBoxStyle.js    |   0
 .../NativeStyleEditor/setupNativeStyleEditor.js     |   0
 .../src}/backend/NativeStyleEditor/types.js         |   0
 {src => extension/src}/backend/ReactDebugHooks.js   |   0
 {src => extension/src}/backend/agent.js             |   0
 {src => extension/src}/backend/console.js           |   0
 .../src}/backend/describeComponentFrame.js          |   0
 {src => extension/src}/backend/index.js             |   0
 {src => extension/src}/backend/legacy/renderer.js   |   0
 {src => extension/src}/backend/legacy/utils.js      |   0
 {src => extension/src}/backend/renderer.js          |   0
 {src => extension/src}/backend/types.js             |   0
 {src => extension/src}/backend/utils.js             |   0
 .../src}/backend/views/Highlighter/Highlighter.js   |   0
 .../src}/backend/views/Highlighter/Overlay.js       |   0
 .../src}/backend/views/Highlighter/index.js         |   0
 {src => extension/src}/bridge.js                    |   0
 {src => extension/src}/constants.js                 |   0
 {src => extension/src}/devtools/ProfilerStore.js    |   0
 {src => extension/src}/devtools/ProfilingCache.js   |   0
 {src => extension/src}/devtools/cache.js            |   0
 {src => extension/src}/devtools/index.js            |   0
 {src => extension/src}/devtools/store.js            |   0
 {src => extension/src}/devtools/views/Button.css    |   0
 {src => extension/src}/devtools/views/Button.js     |   0
 .../src}/devtools/views/ButtonIcon.css              |   0
 {src => extension/src}/devtools/views/ButtonIcon.js |   0
 .../src}/devtools/views/Components/Badge.css        |   0
 .../src}/devtools/views/Components/Badge.js         |   0
 .../src}/devtools/views/Components/Components.css   |   0
 .../src}/devtools/views/Components/Components.js    |   0
 .../devtools/views/Components/EditableValue.css     |   0
 .../src}/devtools/views/Components/EditableValue.js |   0
 .../src}/devtools/views/Components/Element.css      |   0
 .../src}/devtools/views/Components/Element.js       |   0
 .../views/Components/ExpandCollapseToggle.css       |   0
 .../views/Components/ExpandCollapseToggle.js        |   0
 .../src}/devtools/views/Components/HocBadges.css    |   0
 .../src}/devtools/views/Components/HocBadges.js     |   0
 .../src}/devtools/views/Components/HooksTree.css    |   0
 .../src}/devtools/views/Components/HooksTree.js     |   0
 .../views/Components/InspectHostNodesToggle.js      |   0
 .../views/Components/InspectedElementContext.js     |   0
 .../views/Components/InspectedElementTree.css       |   0
 .../views/Components/InspectedElementTree.js        |   0
 .../src}/devtools/views/Components/KeyValue.css     |   0
 .../src}/devtools/views/Components/KeyValue.js      |   0
 .../Components/NativeStyleEditor/AutoSizeInput.css  |   0
 .../Components/NativeStyleEditor/AutoSizeInput.js   |   0
 .../Components/NativeStyleEditor/LayoutViewer.css   |   0
 .../Components/NativeStyleEditor/LayoutViewer.js    |   0
 .../Components/NativeStyleEditor/StyleEditor.css    |   0
 .../Components/NativeStyleEditor/StyleEditor.js     |   0
 .../views/Components/NativeStyleEditor/context.js   |   0
 .../views/Components/NativeStyleEditor/index.js     |   0
 .../views/Components/NativeStyleEditor/types.js     |   0
 .../devtools/views/Components/OwnersListContext.js  |   0
 .../src}/devtools/views/Components/OwnersStack.css  |   0
 .../src}/devtools/views/Components/OwnersStack.js   |   0
 .../src}/devtools/views/Components/SearchInput.css  |   0
 .../src}/devtools/views/Components/SearchInput.js   |   0
 .../devtools/views/Components/SelectedElement.css   |   0
 .../devtools/views/Components/SelectedElement.js    |   0
 .../views/Components/SelectedTreeHighlight.css      |   0
 .../views/Components/SelectedTreeHighlight.js       |   0
 .../src}/devtools/views/Components/Tree.css         |   0
 .../src}/devtools/views/Components/Tree.js          |   0
 .../src}/devtools/views/Components/TreeContext.js   |   0
 .../devtools/views/Components/TreeFocusedContext.js |   0
 .../views/Components/ViewElementSourceContext.js    |   0
 .../src}/devtools/views/Components/types.js         |   0
 {src => extension/src}/devtools/views/DevTools.css  |   0
 {src => extension/src}/devtools/views/DevTools.js   |   0
 .../src}/devtools/views/ErrorBoundary.css           |   0
 .../src}/devtools/views/ErrorBoundary.js            |   0
 {src => extension/src}/devtools/views/Icon.css      |   0
 {src => extension/src}/devtools/views/Icon.js       |   0
 .../src}/devtools/views/ModalDialog.css             |   0
 .../src}/devtools/views/ModalDialog.js              |   0
 .../src}/devtools/views/Profiler/ChartNode.css      |   0
 .../src}/devtools/views/Profiler/ChartNode.js       |   0
 .../views/Profiler/ClearProfilingDataButton.js      |   0
 .../devtools/views/Profiler/CommitFlamegraph.css    |   0
 .../devtools/views/Profiler/CommitFlamegraph.js     |   0
 .../views/Profiler/CommitFlamegraphListItem.js      |   0
 .../src}/devtools/views/Profiler/CommitRanked.css   |   0
 .../src}/devtools/views/Profiler/CommitRanked.js    |   0
 .../devtools/views/Profiler/CommitRankedListItem.js |   0
 .../devtools/views/Profiler/CommitTreeBuilder.js    |   0
 .../views/Profiler/FlamegraphChartBuilder.js        |   0
 .../devtools/views/Profiler/InteractionListItem.css |   0
 .../devtools/views/Profiler/InteractionListItem.js  |   0
 .../src}/devtools/views/Profiler/Interactions.css   |   0
 .../src}/devtools/views/Profiler/Interactions.js    |   0
 .../views/Profiler/InteractionsChartBuilder.js      |   0
 .../src}/devtools/views/Profiler/NoCommitData.css   |   0
 .../src}/devtools/views/Profiler/NoCommitData.js    |   0
 .../src}/devtools/views/Profiler/NoInteractions.css |   0
 .../src}/devtools/views/Profiler/NoInteractions.js  |   0
 .../src}/devtools/views/Profiler/Profiler.css       |   0
 .../src}/devtools/views/Profiler/Profiler.js        |   0
 .../src}/devtools/views/Profiler/ProfilerContext.js |   0
 .../views/Profiler/ProfilingImportExportButtons.css |   0
 .../views/Profiler/ProfilingImportExportButtons.js  |   0
 .../devtools/views/Profiler/RankedChartBuilder.js   |   0
 .../src}/devtools/views/Profiler/RecordToggle.css   |   0
 .../src}/devtools/views/Profiler/RecordToggle.js    |   0
 .../views/Profiler/ReloadAndProfileButton.js        |   0
 .../src}/devtools/views/Profiler/RootSelector.css   |   0
 .../src}/devtools/views/Profiler/RootSelector.js    |   0
 .../devtools/views/Profiler/SidebarCommitInfo.css   |   0
 .../devtools/views/Profiler/SidebarCommitInfo.js    |   0
 .../devtools/views/Profiler/SidebarInteractions.css |   0
 .../devtools/views/Profiler/SidebarInteractions.js  |   0
 .../views/Profiler/SidebarSelectedFiberInfo.css     |   0
 .../views/Profiler/SidebarSelectedFiberInfo.js      |   0
 .../devtools/views/Profiler/SnapshotCommitList.css  |   0
 .../devtools/views/Profiler/SnapshotCommitList.js   |   0
 .../views/Profiler/SnapshotCommitListItem.css       |   0
 .../views/Profiler/SnapshotCommitListItem.js        |   0
 .../devtools/views/Profiler/SnapshotSelector.css    |   0
 .../devtools/views/Profiler/SnapshotSelector.js     |   0
 .../src}/devtools/views/Profiler/constants.js       |   0
 .../src}/devtools/views/Profiler/types.js           |   0
 .../src}/devtools/views/Profiler/utils.js           |   0
 {src => extension/src}/devtools/views/ReactLogo.css |   0
 {src => extension/src}/devtools/views/ReactLogo.js  |   0
 .../devtools/views/Settings/ComponentsSettings.js   |   0
 .../src}/devtools/views/Settings/GeneralSettings.js |   0
 .../devtools/views/Settings/ProfilerSettings.js     |   0
 .../src}/devtools/views/Settings/SettingsContext.js |   0
 .../src}/devtools/views/Settings/SettingsModal.css  |   0
 .../src}/devtools/views/Settings/SettingsModal.js   |   0
 .../devtools/views/Settings/SettingsModalContext.js |   0
 .../views/Settings/SettingsModalContextToggle.js    |   0
 .../src}/devtools/views/Settings/SettingsShared.css |   0
 .../views/ShowWelcomeToTheNewDevToolsDialog.css     |   0
 .../views/ShowWelcomeToTheNewDevToolsDialog.js      |   0
 {src => extension/src}/devtools/views/TabBar.css    |   0
 {src => extension/src}/devtools/views/TabBar.js     |   0
 {src => extension/src}/devtools/views/Toggle.css    |   0
 {src => extension/src}/devtools/views/Toggle.js     |   0
 {src => extension/src}/devtools/views/Tooltip.css   |   0
 .../devtools/views/WarnIfLegacyBackendDetected.css  |   0
 .../devtools/views/WarnIfLegacyBackendDetected.js   |   0
 {src => extension/src}/devtools/views/context.js    |   0
 {src => extension/src}/devtools/views/hooks.js      |   0
 .../src}/devtools/views/portaledContent.js          |   0
 {src => extension/src}/devtools/views/root.css      |   0
 {src => extension/src}/devtools/views/utils.js      |   0
 {src => extension/src}/hook.js                      |   0
 {src => extension/src}/hydration.js                 |   0
 .../src}/node_modules/react-window/CHANGELOG.md     |   0
 .../src}/node_modules/react-window/LICENSE.md       |   0
 .../src}/node_modules/react-window/README.md        |   0
 .../node_modules/react-window/dist/index-dev.umd.js |   0
 .../react-window/dist/index-prod.umd.js             |   0
 .../node_modules/react-window/dist/index.cjs.js     |   0
 .../react-window/dist/index.cjs.js.flow             |   0
 .../node_modules/react-window/dist/index.esm.js     |   0
 .../react-window/dist/index.esm.js.flow             |   0
 .../src}/node_modules/react-window/package.json     |   0
 .../node_modules/react-window/src/FixedSizeGrid.js  |   0
 .../node_modules/react-window/src/FixedSizeList.js  |   0
 .../react-window/src/VariableSizeGrid.js            |   0
 .../react-window/src/VariableSizeList.js            |   0
 .../src}/node_modules/react-window/src/areEqual.js  |   0
 .../react-window/src/createGridComponent.js         |   0
 .../react-window/src/createListComponent.js         |   0
 .../node_modules/react-window/src/domHelpers.js     |   0
 .../src}/node_modules/react-window/src/index.js     |   0
 .../node_modules/react-window/src/shallowDiffers.js |   0
 .../react-window/src/shouldComponentUpdate.js       |   0
 .../src}/node_modules/react-window/src/timer.js     |   0
 {src => extension/src}/storage.js                   |   0
 {src => extension/src}/types.js                     |   0
 {src => extension/src}/utils.js                     |   0
 yarn.lock => extension/yarn.lock                    |   0
 351 files changed, 0 insertions(+), 0 deletions(-)
 rename {.circleci => extension/.circleci}/config.yml (100%)
 rename .eslintignore => extension/.eslintignore (100%)
 rename .eslintrc => extension/.eslintrc (100%)
 rename .flowconfig => extension/.flowconfig (100%)
 rename .gitignore => extension/.gitignore (100%)
 rename .prettierignore => extension/.prettierignore (100%)
 rename .prettierrc => extension/.prettierrc (100%)
 rename CHANGELOG.md => extension/CHANGELOG.md (100%)
 rename OVERVIEW.md => extension/OVERVIEW.md (100%)
 rename README.md => extension/README.md (100%)
 rename babel.config.js => extension/babel.config.js (100%)
 rename {fixtures => extension/fixtures}/regression/14.9.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.0.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.1.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.2.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.3.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.4.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.5.html (100%)
 rename {fixtures => extension/fixtures}/regression/15.6.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.0.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.1.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.2.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.3.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.4.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.5.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.6.html (100%)
 rename {fixtures => extension/fixtures}/regression/16.7.html (100%)
 rename {fixtures => extension/fixtures}/regression/canary.html (100%)
 rename {fixtures => extension/fixtures}/regression/index.html (100%)
 rename {fixtures => extension/fixtures}/regression/next.html (100%)
 rename {fixtures => extension/fixtures}/regression/server.js (100%)
 rename {fixtures => extension/fixtures}/regression/shared.js (100%)
 rename {fixtures => extension/fixtures}/regression/styles.css (100%)
 rename {fixtures => extension/fixtures}/standalone/index.html (100%)
 rename {flow-typed => extension/flow-typed}/chrome.js (100%)
 rename {flow-typed => extension/flow-typed}/jest.js (100%)
 rename {flow-typed => extension/flow-typed}/npm/react-test-renderer_v16.x.x.js (100%)
 rename flow.js => extension/flow.js (100%)
 rename package.json => extension/package.json (100%)
 rename {shells => extension/shells}/browser/chrome/README.md (100%)
 rename {shells => extension/shells}/browser/chrome/build.js (100%)
 rename {shells => extension/shells}/browser/chrome/deploy.js (100%)
 rename {shells => extension/shells}/browser/chrome/manifest.json (100%)
 rename {shells => extension/shells}/browser/chrome/now.json (100%)
 rename {shells => extension/shells}/browser/chrome/test.js (100%)
 rename {shells => extension/shells}/browser/firefox/README.md (100%)
 rename {shells => extension/shells}/browser/firefox/build.js (100%)
 rename {shells => extension/shells}/browser/firefox/deploy.js (100%)
 rename {shells => extension/shells}/browser/firefox/manifest.json (100%)
 rename {shells => extension/shells}/browser/firefox/now.json (100%)
 rename {shells => extension/shells}/browser/firefox/test.js (100%)
 rename {shells => extension/shells}/browser/shared/build.js (100%)
 rename {shells => extension/shells}/browser/shared/deploy.chrome.html (100%)
 rename {shells => extension/shells}/browser/shared/deploy.firefox.html (100%)
 rename {shells => extension/shells}/browser/shared/deploy.html (100%)
 rename {shells => extension/shells}/browser/shared/deploy.js (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-deadcode.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-development.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-disabled.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-outdated.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-production.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/128-unminified.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-deadcode.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-development.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-disabled.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-outdated.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-production.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/16-unminified.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-deadcode.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-development.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-disabled.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-outdated.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-production.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/32-unminified.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-deadcode.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-development.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-disabled.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-outdated.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-production.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/48-unminified.png (100%)
 rename {shells => extension/shells}/browser/shared/icons/deadcode.svg (100%)
 rename {shells => extension/shells}/browser/shared/icons/development.svg (100%)
 rename {shells => extension/shells}/browser/shared/icons/disabled.svg (100%)
 rename {shells => extension/shells}/browser/shared/icons/outdated.svg (100%)
 rename {shells => extension/shells}/browser/shared/icons/production.svg (100%)
 rename {shells => extension/shells}/browser/shared/main.html (100%)
 rename {shells => extension/shells}/browser/shared/panel.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/deadcode.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/development.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/disabled.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/outdated.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/production.html (100%)
 rename {shells => extension/shells}/browser/shared/popups/shared.js (100%)
 rename {shells => extension/shells}/browser/shared/popups/unminified.html (100%)
 rename {shells => extension/shells}/browser/shared/src/backend.js (100%)
 rename {shells => extension/shells}/browser/shared/src/background.js (100%)
 rename {shells => extension/shells}/browser/shared/src/contentScript.js (100%)
 rename {shells => extension/shells}/browser/shared/src/inject.js (100%)
 rename {shells => extension/shells}/browser/shared/src/injectGlobalHook.js (100%)
 rename {shells => extension/shells}/browser/shared/src/main.js (100%)
 rename {shells => extension/shells}/browser/shared/src/panel.js (100%)
 rename {shells => extension/shells}/browser/shared/src/renderer.js (100%)
 rename {shells => extension/shells}/browser/shared/src/utils.js (100%)
 rename {shells => extension/shells}/browser/shared/webpack.backend.js (100%)
 rename {shells => extension/shells}/browser/shared/webpack.config.js (100%)
 rename {shells => extension/shells}/dev/app/DeeplyNestedComponents/index.js (100%)
 rename {shells => extension/shells}/dev/app/EditableProps/index.js (100%)
 rename {shells => extension/shells}/dev/app/ElementTypes/index.js (100%)
 rename {shells => extension/shells}/dev/app/Hydration/index.js (100%)
 rename {shells => extension/shells}/dev/app/Iframe/index.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/Contexts.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/CustomHooks.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/CustomObject.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/InspectableElements.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/NestedProps.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/SimpleValues.js (100%)
 rename {shells => extension/shells}/dev/app/InspectableElements/index.js (100%)
 rename {shells => extension/shells}/dev/app/InteractionTracing/index.js (100%)
 rename {shells => extension/shells}/dev/app/PriorityLevels/index.js (100%)
 rename {shells => extension/shells}/dev/app/ReactNativeWeb/index.js (100%)
 rename {shells => extension/shells}/dev/app/SuspenseTree/index.js (100%)
 rename {shells => extension/shells}/dev/app/ToDoList/List.css (100%)
 rename {shells => extension/shells}/dev/app/ToDoList/List.js (100%)
 rename {shells => extension/shells}/dev/app/ToDoList/ListItem.css (100%)
 rename {shells => extension/shells}/dev/app/ToDoList/ListItem.js (100%)
 rename {shells => extension/shells}/dev/app/ToDoList/index.js (100%)
 rename {shells => extension/shells}/dev/app/Toggle/index.js (100%)
 rename {shells => extension/shells}/dev/app/console.js (100%)
 rename {shells => extension/shells}/dev/app/index.js (100%)
 rename {shells => extension/shells}/dev/app/styles.css (100%)
 rename {shells => extension/shells}/dev/index.html (100%)
 rename {shells => extension/shells}/dev/now.json (100%)
 rename {shells => extension/shells}/dev/src/devtools.js (100%)
 rename {shells => extension/shells}/dev/webpack.config.js (100%)
 rename {shells => extension/shells}/utils.js (100%)
 rename {src => extension/src}/__tests__/__mocks__/cssMock.js (100%)
 rename {src => extension/src}/__tests__/__snapshots__/inspectedElementContext-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/ownersListContext-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/profilerContext-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/profilingCache-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/profilingCharts-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/store-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/storeComponentFilters-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/storeOwners-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/storeStressSync-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap (100%)
 rename {src => extension/src}/__tests__/__snapshots__/treeContext-test.js.snap (100%)
 rename {src => extension/src}/__tests__/bridge-test.js (100%)
 rename {src => extension/src}/__tests__/console-test.js (100%)
 rename {src => extension/src}/__tests__/inspectedElementContext-test.js (100%)
 rename {src => extension/src}/__tests__/inspectedElementSerializer.js (100%)
 rename {src => extension/src}/__tests__/legacy/__snapshots__/inspectElement-test.js.snap (100%)
 rename {src => extension/src}/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap (100%)
 rename {src => extension/src}/__tests__/legacy/inspectElement-test.js (100%)
 rename {src => extension/src}/__tests__/legacy/storeLegacy-v15-test.js (100%)
 rename {src => extension/src}/__tests__/ownersListContext-test.js (100%)
 rename {src => extension/src}/__tests__/profilerContext-test.js (100%)
 rename {src => extension/src}/__tests__/profilerStore-test.js (100%)
 rename {src => extension/src}/__tests__/profilingCache-test.js (100%)
 rename {src => extension/src}/__tests__/profilingCharts-test.js (100%)
 rename {src => extension/src}/__tests__/profilingCommitTreeBuilder-test.js (100%)
 rename {src => extension/src}/__tests__/profilingUtils-test.js (100%)
 rename {src => extension/src}/__tests__/setupEnv.js (100%)
 rename {src => extension/src}/__tests__/setupTests.js (100%)
 rename {src => extension/src}/__tests__/store-test.js (100%)
 rename {src => extension/src}/__tests__/storeComponentFilters-test.js (100%)
 rename {src => extension/src}/__tests__/storeOwners-test.js (100%)
 rename {src => extension/src}/__tests__/storeSerializer.js (100%)
 rename {src => extension/src}/__tests__/storeStressSync-test.js (100%)
 rename {src => extension/src}/__tests__/storeStressTestConcurrent-test.js (100%)
 rename {src => extension/src}/__tests__/treeContext-test.js (100%)
 rename {src => extension/src}/__tests__/utils.js (100%)
 rename {src => extension/src}/backend/NativeStyleEditor/resolveBoxStyle.js (100%)
 rename {src => extension/src}/backend/NativeStyleEditor/setupNativeStyleEditor.js (100%)
 rename {src => extension/src}/backend/NativeStyleEditor/types.js (100%)
 rename {src => extension/src}/backend/ReactDebugHooks.js (100%)
 rename {src => extension/src}/backend/agent.js (100%)
 rename {src => extension/src}/backend/console.js (100%)
 rename {src => extension/src}/backend/describeComponentFrame.js (100%)
 rename {src => extension/src}/backend/index.js (100%)
 rename {src => extension/src}/backend/legacy/renderer.js (100%)
 rename {src => extension/src}/backend/legacy/utils.js (100%)
 rename {src => extension/src}/backend/renderer.js (100%)
 rename {src => extension/src}/backend/types.js (100%)
 rename {src => extension/src}/backend/utils.js (100%)
 rename {src => extension/src}/backend/views/Highlighter/Highlighter.js (100%)
 rename {src => extension/src}/backend/views/Highlighter/Overlay.js (100%)
 rename {src => extension/src}/backend/views/Highlighter/index.js (100%)
 rename {src => extension/src}/bridge.js (100%)
 rename {src => extension/src}/constants.js (100%)
 rename {src => extension/src}/devtools/ProfilerStore.js (100%)
 rename {src => extension/src}/devtools/ProfilingCache.js (100%)
 rename {src => extension/src}/devtools/cache.js (100%)
 rename {src => extension/src}/devtools/index.js (100%)
 rename {src => extension/src}/devtools/store.js (100%)
 rename {src => extension/src}/devtools/views/Button.css (100%)
 rename {src => extension/src}/devtools/views/Button.js (100%)
 rename {src => extension/src}/devtools/views/ButtonIcon.css (100%)
 rename {src => extension/src}/devtools/views/ButtonIcon.js (100%)
 rename {src => extension/src}/devtools/views/Components/Badge.css (100%)
 rename {src => extension/src}/devtools/views/Components/Badge.js (100%)
 rename {src => extension/src}/devtools/views/Components/Components.css (100%)
 rename {src => extension/src}/devtools/views/Components/Components.js (100%)
 rename {src => extension/src}/devtools/views/Components/EditableValue.css (100%)
 rename {src => extension/src}/devtools/views/Components/EditableValue.js (100%)
 rename {src => extension/src}/devtools/views/Components/Element.css (100%)
 rename {src => extension/src}/devtools/views/Components/Element.js (100%)
 rename {src => extension/src}/devtools/views/Components/ExpandCollapseToggle.css (100%)
 rename {src => extension/src}/devtools/views/Components/ExpandCollapseToggle.js (100%)
 rename {src => extension/src}/devtools/views/Components/HocBadges.css (100%)
 rename {src => extension/src}/devtools/views/Components/HocBadges.js (100%)
 rename {src => extension/src}/devtools/views/Components/HooksTree.css (100%)
 rename {src => extension/src}/devtools/views/Components/HooksTree.js (100%)
 rename {src => extension/src}/devtools/views/Components/InspectHostNodesToggle.js (100%)
 rename {src => extension/src}/devtools/views/Components/InspectedElementContext.js (100%)
 rename {src => extension/src}/devtools/views/Components/InspectedElementTree.css (100%)
 rename {src => extension/src}/devtools/views/Components/InspectedElementTree.js (100%)
 rename {src => extension/src}/devtools/views/Components/KeyValue.css (100%)
 rename {src => extension/src}/devtools/views/Components/KeyValue.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/LayoutViewer.css (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/LayoutViewer.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/StyleEditor.css (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/StyleEditor.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/context.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/index.js (100%)
 rename {src => extension/src}/devtools/views/Components/NativeStyleEditor/types.js (100%)
 rename {src => extension/src}/devtools/views/Components/OwnersListContext.js (100%)
 rename {src => extension/src}/devtools/views/Components/OwnersStack.css (100%)
 rename {src => extension/src}/devtools/views/Components/OwnersStack.js (100%)
 rename {src => extension/src}/devtools/views/Components/SearchInput.css (100%)
 rename {src => extension/src}/devtools/views/Components/SearchInput.js (100%)
 rename {src => extension/src}/devtools/views/Components/SelectedElement.css (100%)
 rename {src => extension/src}/devtools/views/Components/SelectedElement.js (100%)
 rename {src => extension/src}/devtools/views/Components/SelectedTreeHighlight.css (100%)
 rename {src => extension/src}/devtools/views/Components/SelectedTreeHighlight.js (100%)
 rename {src => extension/src}/devtools/views/Components/Tree.css (100%)
 rename {src => extension/src}/devtools/views/Components/Tree.js (100%)
 rename {src => extension/src}/devtools/views/Components/TreeContext.js (100%)
 rename {src => extension/src}/devtools/views/Components/TreeFocusedContext.js (100%)
 rename {src => extension/src}/devtools/views/Components/ViewElementSourceContext.js (100%)
 rename {src => extension/src}/devtools/views/Components/types.js (100%)
 rename {src => extension/src}/devtools/views/DevTools.css (100%)
 rename {src => extension/src}/devtools/views/DevTools.js (100%)
 rename {src => extension/src}/devtools/views/ErrorBoundary.css (100%)
 rename {src => extension/src}/devtools/views/ErrorBoundary.js (100%)
 rename {src => extension/src}/devtools/views/Icon.css (100%)
 rename {src => extension/src}/devtools/views/Icon.js (100%)
 rename {src => extension/src}/devtools/views/ModalDialog.css (100%)
 rename {src => extension/src}/devtools/views/ModalDialog.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/ChartNode.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/ChartNode.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/ClearProfilingDataButton.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitFlamegraph.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitFlamegraph.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitFlamegraphListItem.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitRanked.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitRanked.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitRankedListItem.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/CommitTreeBuilder.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/FlamegraphChartBuilder.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/InteractionListItem.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/InteractionListItem.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/Interactions.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/Interactions.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/InteractionsChartBuilder.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/NoCommitData.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/NoCommitData.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/NoInteractions.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/NoInteractions.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/Profiler.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/Profiler.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/ProfilerContext.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/ProfilingImportExportButtons.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/ProfilingImportExportButtons.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/RankedChartBuilder.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/RecordToggle.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/RecordToggle.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/ReloadAndProfileButton.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/RootSelector.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/RootSelector.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarCommitInfo.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarCommitInfo.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarInteractions.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarInteractions.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarSelectedFiberInfo.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SidebarSelectedFiberInfo.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotCommitList.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotCommitList.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotCommitListItem.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotCommitListItem.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotSelector.css (100%)
 rename {src => extension/src}/devtools/views/Profiler/SnapshotSelector.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/constants.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/types.js (100%)
 rename {src => extension/src}/devtools/views/Profiler/utils.js (100%)
 rename {src => extension/src}/devtools/views/ReactLogo.css (100%)
 rename {src => extension/src}/devtools/views/ReactLogo.js (100%)
 rename {src => extension/src}/devtools/views/Settings/ComponentsSettings.js (100%)
 rename {src => extension/src}/devtools/views/Settings/GeneralSettings.js (100%)
 rename {src => extension/src}/devtools/views/Settings/ProfilerSettings.js (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsContext.js (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsModal.css (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsModal.js (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsModalContext.js (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsModalContextToggle.js (100%)
 rename {src => extension/src}/devtools/views/Settings/SettingsShared.css (100%)
 rename {src => extension/src}/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css (100%)
 rename {src => extension/src}/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js (100%)
 rename {src => extension/src}/devtools/views/TabBar.css (100%)
 rename {src => extension/src}/devtools/views/TabBar.js (100%)
 rename {src => extension/src}/devtools/views/Toggle.css (100%)
 rename {src => extension/src}/devtools/views/Toggle.js (100%)
 rename {src => extension/src}/devtools/views/Tooltip.css (100%)
 rename {src => extension/src}/devtools/views/WarnIfLegacyBackendDetected.css (100%)
 rename {src => extension/src}/devtools/views/WarnIfLegacyBackendDetected.js (100%)
 rename {src => extension/src}/devtools/views/context.js (100%)
 rename {src => extension/src}/devtools/views/hooks.js (100%)
 rename {src => extension/src}/devtools/views/portaledContent.js (100%)
 rename {src => extension/src}/devtools/views/root.css (100%)
 rename {src => extension/src}/devtools/views/utils.js (100%)
 rename {src => extension/src}/hook.js (100%)
 rename {src => extension/src}/hydration.js (100%)
 rename {src => extension/src}/node_modules/react-window/CHANGELOG.md (100%)
 rename {src => extension/src}/node_modules/react-window/LICENSE.md (100%)
 rename {src => extension/src}/node_modules/react-window/README.md (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index-dev.umd.js (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index-prod.umd.js (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index.cjs.js (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index.cjs.js.flow (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index.esm.js (100%)
 rename {src => extension/src}/node_modules/react-window/dist/index.esm.js.flow (100%)
 rename {src => extension/src}/node_modules/react-window/package.json (100%)
 rename {src => extension/src}/node_modules/react-window/src/FixedSizeGrid.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/FixedSizeList.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/VariableSizeGrid.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/VariableSizeList.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/areEqual.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/createGridComponent.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/createListComponent.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/domHelpers.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/index.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/shallowDiffers.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/shouldComponentUpdate.js (100%)
 rename {src => extension/src}/node_modules/react-window/src/timer.js (100%)
 rename {src => extension/src}/storage.js (100%)
 rename {src => extension/src}/types.js (100%)
 rename {src => extension/src}/utils.js (100%)
 rename yarn.lock => extension/yarn.lock (100%)

diff --git a/.circleci/config.yml b/extension/.circleci/config.yml
similarity index 100%
rename from .circleci/config.yml
rename to extension/.circleci/config.yml
diff --git a/.eslintignore b/extension/.eslintignore
similarity index 100%
rename from .eslintignore
rename to extension/.eslintignore
diff --git a/.eslintrc b/extension/.eslintrc
similarity index 100%
rename from .eslintrc
rename to extension/.eslintrc
diff --git a/.flowconfig b/extension/.flowconfig
similarity index 100%
rename from .flowconfig
rename to extension/.flowconfig
diff --git a/.gitignore b/extension/.gitignore
similarity index 100%
rename from .gitignore
rename to extension/.gitignore
diff --git a/.prettierignore b/extension/.prettierignore
similarity index 100%
rename from .prettierignore
rename to extension/.prettierignore
diff --git a/.prettierrc b/extension/.prettierrc
similarity index 100%
rename from .prettierrc
rename to extension/.prettierrc
diff --git a/CHANGELOG.md b/extension/CHANGELOG.md
similarity index 100%
rename from CHANGELOG.md
rename to extension/CHANGELOG.md
diff --git a/OVERVIEW.md b/extension/OVERVIEW.md
similarity index 100%
rename from OVERVIEW.md
rename to extension/OVERVIEW.md
diff --git a/README.md b/extension/README.md
similarity index 100%
rename from README.md
rename to extension/README.md
diff --git a/babel.config.js b/extension/babel.config.js
similarity index 100%
rename from babel.config.js
rename to extension/babel.config.js
diff --git a/fixtures/regression/14.9.html b/extension/fixtures/regression/14.9.html
similarity index 100%
rename from fixtures/regression/14.9.html
rename to extension/fixtures/regression/14.9.html
diff --git a/fixtures/regression/15.0.html b/extension/fixtures/regression/15.0.html
similarity index 100%
rename from fixtures/regression/15.0.html
rename to extension/fixtures/regression/15.0.html
diff --git a/fixtures/regression/15.1.html b/extension/fixtures/regression/15.1.html
similarity index 100%
rename from fixtures/regression/15.1.html
rename to extension/fixtures/regression/15.1.html
diff --git a/fixtures/regression/15.2.html b/extension/fixtures/regression/15.2.html
similarity index 100%
rename from fixtures/regression/15.2.html
rename to extension/fixtures/regression/15.2.html
diff --git a/fixtures/regression/15.3.html b/extension/fixtures/regression/15.3.html
similarity index 100%
rename from fixtures/regression/15.3.html
rename to extension/fixtures/regression/15.3.html
diff --git a/fixtures/regression/15.4.html b/extension/fixtures/regression/15.4.html
similarity index 100%
rename from fixtures/regression/15.4.html
rename to extension/fixtures/regression/15.4.html
diff --git a/fixtures/regression/15.5.html b/extension/fixtures/regression/15.5.html
similarity index 100%
rename from fixtures/regression/15.5.html
rename to extension/fixtures/regression/15.5.html
diff --git a/fixtures/regression/15.6.html b/extension/fixtures/regression/15.6.html
similarity index 100%
rename from fixtures/regression/15.6.html
rename to extension/fixtures/regression/15.6.html
diff --git a/fixtures/regression/16.0.html b/extension/fixtures/regression/16.0.html
similarity index 100%
rename from fixtures/regression/16.0.html
rename to extension/fixtures/regression/16.0.html
diff --git a/fixtures/regression/16.1.html b/extension/fixtures/regression/16.1.html
similarity index 100%
rename from fixtures/regression/16.1.html
rename to extension/fixtures/regression/16.1.html
diff --git a/fixtures/regression/16.2.html b/extension/fixtures/regression/16.2.html
similarity index 100%
rename from fixtures/regression/16.2.html
rename to extension/fixtures/regression/16.2.html
diff --git a/fixtures/regression/16.3.html b/extension/fixtures/regression/16.3.html
similarity index 100%
rename from fixtures/regression/16.3.html
rename to extension/fixtures/regression/16.3.html
diff --git a/fixtures/regression/16.4.html b/extension/fixtures/regression/16.4.html
similarity index 100%
rename from fixtures/regression/16.4.html
rename to extension/fixtures/regression/16.4.html
diff --git a/fixtures/regression/16.5.html b/extension/fixtures/regression/16.5.html
similarity index 100%
rename from fixtures/regression/16.5.html
rename to extension/fixtures/regression/16.5.html
diff --git a/fixtures/regression/16.6.html b/extension/fixtures/regression/16.6.html
similarity index 100%
rename from fixtures/regression/16.6.html
rename to extension/fixtures/regression/16.6.html
diff --git a/fixtures/regression/16.7.html b/extension/fixtures/regression/16.7.html
similarity index 100%
rename from fixtures/regression/16.7.html
rename to extension/fixtures/regression/16.7.html
diff --git a/fixtures/regression/canary.html b/extension/fixtures/regression/canary.html
similarity index 100%
rename from fixtures/regression/canary.html
rename to extension/fixtures/regression/canary.html
diff --git a/fixtures/regression/index.html b/extension/fixtures/regression/index.html
similarity index 100%
rename from fixtures/regression/index.html
rename to extension/fixtures/regression/index.html
diff --git a/fixtures/regression/next.html b/extension/fixtures/regression/next.html
similarity index 100%
rename from fixtures/regression/next.html
rename to extension/fixtures/regression/next.html
diff --git a/fixtures/regression/server.js b/extension/fixtures/regression/server.js
similarity index 100%
rename from fixtures/regression/server.js
rename to extension/fixtures/regression/server.js
diff --git a/fixtures/regression/shared.js b/extension/fixtures/regression/shared.js
similarity index 100%
rename from fixtures/regression/shared.js
rename to extension/fixtures/regression/shared.js
diff --git a/fixtures/regression/styles.css b/extension/fixtures/regression/styles.css
similarity index 100%
rename from fixtures/regression/styles.css
rename to extension/fixtures/regression/styles.css
diff --git a/fixtures/standalone/index.html b/extension/fixtures/standalone/index.html
similarity index 100%
rename from fixtures/standalone/index.html
rename to extension/fixtures/standalone/index.html
diff --git a/flow-typed/chrome.js b/extension/flow-typed/chrome.js
similarity index 100%
rename from flow-typed/chrome.js
rename to extension/flow-typed/chrome.js
diff --git a/flow-typed/jest.js b/extension/flow-typed/jest.js
similarity index 100%
rename from flow-typed/jest.js
rename to extension/flow-typed/jest.js
diff --git a/flow-typed/npm/react-test-renderer_v16.x.x.js b/extension/flow-typed/npm/react-test-renderer_v16.x.x.js
similarity index 100%
rename from flow-typed/npm/react-test-renderer_v16.x.x.js
rename to extension/flow-typed/npm/react-test-renderer_v16.x.x.js
diff --git a/flow.js b/extension/flow.js
similarity index 100%
rename from flow.js
rename to extension/flow.js
diff --git a/package.json b/extension/package.json
similarity index 100%
rename from package.json
rename to extension/package.json
diff --git a/shells/browser/chrome/README.md b/extension/shells/browser/chrome/README.md
similarity index 100%
rename from shells/browser/chrome/README.md
rename to extension/shells/browser/chrome/README.md
diff --git a/shells/browser/chrome/build.js b/extension/shells/browser/chrome/build.js
similarity index 100%
rename from shells/browser/chrome/build.js
rename to extension/shells/browser/chrome/build.js
diff --git a/shells/browser/chrome/deploy.js b/extension/shells/browser/chrome/deploy.js
similarity index 100%
rename from shells/browser/chrome/deploy.js
rename to extension/shells/browser/chrome/deploy.js
diff --git a/shells/browser/chrome/manifest.json b/extension/shells/browser/chrome/manifest.json
similarity index 100%
rename from shells/browser/chrome/manifest.json
rename to extension/shells/browser/chrome/manifest.json
diff --git a/shells/browser/chrome/now.json b/extension/shells/browser/chrome/now.json
similarity index 100%
rename from shells/browser/chrome/now.json
rename to extension/shells/browser/chrome/now.json
diff --git a/shells/browser/chrome/test.js b/extension/shells/browser/chrome/test.js
similarity index 100%
rename from shells/browser/chrome/test.js
rename to extension/shells/browser/chrome/test.js
diff --git a/shells/browser/firefox/README.md b/extension/shells/browser/firefox/README.md
similarity index 100%
rename from shells/browser/firefox/README.md
rename to extension/shells/browser/firefox/README.md
diff --git a/shells/browser/firefox/build.js b/extension/shells/browser/firefox/build.js
similarity index 100%
rename from shells/browser/firefox/build.js
rename to extension/shells/browser/firefox/build.js
diff --git a/shells/browser/firefox/deploy.js b/extension/shells/browser/firefox/deploy.js
similarity index 100%
rename from shells/browser/firefox/deploy.js
rename to extension/shells/browser/firefox/deploy.js
diff --git a/shells/browser/firefox/manifest.json b/extension/shells/browser/firefox/manifest.json
similarity index 100%
rename from shells/browser/firefox/manifest.json
rename to extension/shells/browser/firefox/manifest.json
diff --git a/shells/browser/firefox/now.json b/extension/shells/browser/firefox/now.json
similarity index 100%
rename from shells/browser/firefox/now.json
rename to extension/shells/browser/firefox/now.json
diff --git a/shells/browser/firefox/test.js b/extension/shells/browser/firefox/test.js
similarity index 100%
rename from shells/browser/firefox/test.js
rename to extension/shells/browser/firefox/test.js
diff --git a/shells/browser/shared/build.js b/extension/shells/browser/shared/build.js
similarity index 100%
rename from shells/browser/shared/build.js
rename to extension/shells/browser/shared/build.js
diff --git a/shells/browser/shared/deploy.chrome.html b/extension/shells/browser/shared/deploy.chrome.html
similarity index 100%
rename from shells/browser/shared/deploy.chrome.html
rename to extension/shells/browser/shared/deploy.chrome.html
diff --git a/shells/browser/shared/deploy.firefox.html b/extension/shells/browser/shared/deploy.firefox.html
similarity index 100%
rename from shells/browser/shared/deploy.firefox.html
rename to extension/shells/browser/shared/deploy.firefox.html
diff --git a/shells/browser/shared/deploy.html b/extension/shells/browser/shared/deploy.html
similarity index 100%
rename from shells/browser/shared/deploy.html
rename to extension/shells/browser/shared/deploy.html
diff --git a/shells/browser/shared/deploy.js b/extension/shells/browser/shared/deploy.js
similarity index 100%
rename from shells/browser/shared/deploy.js
rename to extension/shells/browser/shared/deploy.js
diff --git a/shells/browser/shared/icons/128-deadcode.png b/extension/shells/browser/shared/icons/128-deadcode.png
similarity index 100%
rename from shells/browser/shared/icons/128-deadcode.png
rename to extension/shells/browser/shared/icons/128-deadcode.png
diff --git a/shells/browser/shared/icons/128-development.png b/extension/shells/browser/shared/icons/128-development.png
similarity index 100%
rename from shells/browser/shared/icons/128-development.png
rename to extension/shells/browser/shared/icons/128-development.png
diff --git a/shells/browser/shared/icons/128-disabled.png b/extension/shells/browser/shared/icons/128-disabled.png
similarity index 100%
rename from shells/browser/shared/icons/128-disabled.png
rename to extension/shells/browser/shared/icons/128-disabled.png
diff --git a/shells/browser/shared/icons/128-outdated.png b/extension/shells/browser/shared/icons/128-outdated.png
similarity index 100%
rename from shells/browser/shared/icons/128-outdated.png
rename to extension/shells/browser/shared/icons/128-outdated.png
diff --git a/shells/browser/shared/icons/128-production.png b/extension/shells/browser/shared/icons/128-production.png
similarity index 100%
rename from shells/browser/shared/icons/128-production.png
rename to extension/shells/browser/shared/icons/128-production.png
diff --git a/shells/browser/shared/icons/128-unminified.png b/extension/shells/browser/shared/icons/128-unminified.png
similarity index 100%
rename from shells/browser/shared/icons/128-unminified.png
rename to extension/shells/browser/shared/icons/128-unminified.png
diff --git a/shells/browser/shared/icons/16-deadcode.png b/extension/shells/browser/shared/icons/16-deadcode.png
similarity index 100%
rename from shells/browser/shared/icons/16-deadcode.png
rename to extension/shells/browser/shared/icons/16-deadcode.png
diff --git a/shells/browser/shared/icons/16-development.png b/extension/shells/browser/shared/icons/16-development.png
similarity index 100%
rename from shells/browser/shared/icons/16-development.png
rename to extension/shells/browser/shared/icons/16-development.png
diff --git a/shells/browser/shared/icons/16-disabled.png b/extension/shells/browser/shared/icons/16-disabled.png
similarity index 100%
rename from shells/browser/shared/icons/16-disabled.png
rename to extension/shells/browser/shared/icons/16-disabled.png
diff --git a/shells/browser/shared/icons/16-outdated.png b/extension/shells/browser/shared/icons/16-outdated.png
similarity index 100%
rename from shells/browser/shared/icons/16-outdated.png
rename to extension/shells/browser/shared/icons/16-outdated.png
diff --git a/shells/browser/shared/icons/16-production.png b/extension/shells/browser/shared/icons/16-production.png
similarity index 100%
rename from shells/browser/shared/icons/16-production.png
rename to extension/shells/browser/shared/icons/16-production.png
diff --git a/shells/browser/shared/icons/16-unminified.png b/extension/shells/browser/shared/icons/16-unminified.png
similarity index 100%
rename from shells/browser/shared/icons/16-unminified.png
rename to extension/shells/browser/shared/icons/16-unminified.png
diff --git a/shells/browser/shared/icons/32-deadcode.png b/extension/shells/browser/shared/icons/32-deadcode.png
similarity index 100%
rename from shells/browser/shared/icons/32-deadcode.png
rename to extension/shells/browser/shared/icons/32-deadcode.png
diff --git a/shells/browser/shared/icons/32-development.png b/extension/shells/browser/shared/icons/32-development.png
similarity index 100%
rename from shells/browser/shared/icons/32-development.png
rename to extension/shells/browser/shared/icons/32-development.png
diff --git a/shells/browser/shared/icons/32-disabled.png b/extension/shells/browser/shared/icons/32-disabled.png
similarity index 100%
rename from shells/browser/shared/icons/32-disabled.png
rename to extension/shells/browser/shared/icons/32-disabled.png
diff --git a/shells/browser/shared/icons/32-outdated.png b/extension/shells/browser/shared/icons/32-outdated.png
similarity index 100%
rename from shells/browser/shared/icons/32-outdated.png
rename to extension/shells/browser/shared/icons/32-outdated.png
diff --git a/shells/browser/shared/icons/32-production.png b/extension/shells/browser/shared/icons/32-production.png
similarity index 100%
rename from shells/browser/shared/icons/32-production.png
rename to extension/shells/browser/shared/icons/32-production.png
diff --git a/shells/browser/shared/icons/32-unminified.png b/extension/shells/browser/shared/icons/32-unminified.png
similarity index 100%
rename from shells/browser/shared/icons/32-unminified.png
rename to extension/shells/browser/shared/icons/32-unminified.png
diff --git a/shells/browser/shared/icons/48-deadcode.png b/extension/shells/browser/shared/icons/48-deadcode.png
similarity index 100%
rename from shells/browser/shared/icons/48-deadcode.png
rename to extension/shells/browser/shared/icons/48-deadcode.png
diff --git a/shells/browser/shared/icons/48-development.png b/extension/shells/browser/shared/icons/48-development.png
similarity index 100%
rename from shells/browser/shared/icons/48-development.png
rename to extension/shells/browser/shared/icons/48-development.png
diff --git a/shells/browser/shared/icons/48-disabled.png b/extension/shells/browser/shared/icons/48-disabled.png
similarity index 100%
rename from shells/browser/shared/icons/48-disabled.png
rename to extension/shells/browser/shared/icons/48-disabled.png
diff --git a/shells/browser/shared/icons/48-outdated.png b/extension/shells/browser/shared/icons/48-outdated.png
similarity index 100%
rename from shells/browser/shared/icons/48-outdated.png
rename to extension/shells/browser/shared/icons/48-outdated.png
diff --git a/shells/browser/shared/icons/48-production.png b/extension/shells/browser/shared/icons/48-production.png
similarity index 100%
rename from shells/browser/shared/icons/48-production.png
rename to extension/shells/browser/shared/icons/48-production.png
diff --git a/shells/browser/shared/icons/48-unminified.png b/extension/shells/browser/shared/icons/48-unminified.png
similarity index 100%
rename from shells/browser/shared/icons/48-unminified.png
rename to extension/shells/browser/shared/icons/48-unminified.png
diff --git a/shells/browser/shared/icons/deadcode.svg b/extension/shells/browser/shared/icons/deadcode.svg
similarity index 100%
rename from shells/browser/shared/icons/deadcode.svg
rename to extension/shells/browser/shared/icons/deadcode.svg
diff --git a/shells/browser/shared/icons/development.svg b/extension/shells/browser/shared/icons/development.svg
similarity index 100%
rename from shells/browser/shared/icons/development.svg
rename to extension/shells/browser/shared/icons/development.svg
diff --git a/shells/browser/shared/icons/disabled.svg b/extension/shells/browser/shared/icons/disabled.svg
similarity index 100%
rename from shells/browser/shared/icons/disabled.svg
rename to extension/shells/browser/shared/icons/disabled.svg
diff --git a/shells/browser/shared/icons/outdated.svg b/extension/shells/browser/shared/icons/outdated.svg
similarity index 100%
rename from shells/browser/shared/icons/outdated.svg
rename to extension/shells/browser/shared/icons/outdated.svg
diff --git a/shells/browser/shared/icons/production.svg b/extension/shells/browser/shared/icons/production.svg
similarity index 100%
rename from shells/browser/shared/icons/production.svg
rename to extension/shells/browser/shared/icons/production.svg
diff --git a/shells/browser/shared/main.html b/extension/shells/browser/shared/main.html
similarity index 100%
rename from shells/browser/shared/main.html
rename to extension/shells/browser/shared/main.html
diff --git a/shells/browser/shared/panel.html b/extension/shells/browser/shared/panel.html
similarity index 100%
rename from shells/browser/shared/panel.html
rename to extension/shells/browser/shared/panel.html
diff --git a/shells/browser/shared/popups/deadcode.html b/extension/shells/browser/shared/popups/deadcode.html
similarity index 100%
rename from shells/browser/shared/popups/deadcode.html
rename to extension/shells/browser/shared/popups/deadcode.html
diff --git a/shells/browser/shared/popups/development.html b/extension/shells/browser/shared/popups/development.html
similarity index 100%
rename from shells/browser/shared/popups/development.html
rename to extension/shells/browser/shared/popups/development.html
diff --git a/shells/browser/shared/popups/disabled.html b/extension/shells/browser/shared/popups/disabled.html
similarity index 100%
rename from shells/browser/shared/popups/disabled.html
rename to extension/shells/browser/shared/popups/disabled.html
diff --git a/shells/browser/shared/popups/outdated.html b/extension/shells/browser/shared/popups/outdated.html
similarity index 100%
rename from shells/browser/shared/popups/outdated.html
rename to extension/shells/browser/shared/popups/outdated.html
diff --git a/shells/browser/shared/popups/production.html b/extension/shells/browser/shared/popups/production.html
similarity index 100%
rename from shells/browser/shared/popups/production.html
rename to extension/shells/browser/shared/popups/production.html
diff --git a/shells/browser/shared/popups/shared.js b/extension/shells/browser/shared/popups/shared.js
similarity index 100%
rename from shells/browser/shared/popups/shared.js
rename to extension/shells/browser/shared/popups/shared.js
diff --git a/shells/browser/shared/popups/unminified.html b/extension/shells/browser/shared/popups/unminified.html
similarity index 100%
rename from shells/browser/shared/popups/unminified.html
rename to extension/shells/browser/shared/popups/unminified.html
diff --git a/shells/browser/shared/src/backend.js b/extension/shells/browser/shared/src/backend.js
similarity index 100%
rename from shells/browser/shared/src/backend.js
rename to extension/shells/browser/shared/src/backend.js
diff --git a/shells/browser/shared/src/background.js b/extension/shells/browser/shared/src/background.js
similarity index 100%
rename from shells/browser/shared/src/background.js
rename to extension/shells/browser/shared/src/background.js
diff --git a/shells/browser/shared/src/contentScript.js b/extension/shells/browser/shared/src/contentScript.js
similarity index 100%
rename from shells/browser/shared/src/contentScript.js
rename to extension/shells/browser/shared/src/contentScript.js
diff --git a/shells/browser/shared/src/inject.js b/extension/shells/browser/shared/src/inject.js
similarity index 100%
rename from shells/browser/shared/src/inject.js
rename to extension/shells/browser/shared/src/inject.js
diff --git a/shells/browser/shared/src/injectGlobalHook.js b/extension/shells/browser/shared/src/injectGlobalHook.js
similarity index 100%
rename from shells/browser/shared/src/injectGlobalHook.js
rename to extension/shells/browser/shared/src/injectGlobalHook.js
diff --git a/shells/browser/shared/src/main.js b/extension/shells/browser/shared/src/main.js
similarity index 100%
rename from shells/browser/shared/src/main.js
rename to extension/shells/browser/shared/src/main.js
diff --git a/shells/browser/shared/src/panel.js b/extension/shells/browser/shared/src/panel.js
similarity index 100%
rename from shells/browser/shared/src/panel.js
rename to extension/shells/browser/shared/src/panel.js
diff --git a/shells/browser/shared/src/renderer.js b/extension/shells/browser/shared/src/renderer.js
similarity index 100%
rename from shells/browser/shared/src/renderer.js
rename to extension/shells/browser/shared/src/renderer.js
diff --git a/shells/browser/shared/src/utils.js b/extension/shells/browser/shared/src/utils.js
similarity index 100%
rename from shells/browser/shared/src/utils.js
rename to extension/shells/browser/shared/src/utils.js
diff --git a/shells/browser/shared/webpack.backend.js b/extension/shells/browser/shared/webpack.backend.js
similarity index 100%
rename from shells/browser/shared/webpack.backend.js
rename to extension/shells/browser/shared/webpack.backend.js
diff --git a/shells/browser/shared/webpack.config.js b/extension/shells/browser/shared/webpack.config.js
similarity index 100%
rename from shells/browser/shared/webpack.config.js
rename to extension/shells/browser/shared/webpack.config.js
diff --git a/shells/dev/app/DeeplyNestedComponents/index.js b/extension/shells/dev/app/DeeplyNestedComponents/index.js
similarity index 100%
rename from shells/dev/app/DeeplyNestedComponents/index.js
rename to extension/shells/dev/app/DeeplyNestedComponents/index.js
diff --git a/shells/dev/app/EditableProps/index.js b/extension/shells/dev/app/EditableProps/index.js
similarity index 100%
rename from shells/dev/app/EditableProps/index.js
rename to extension/shells/dev/app/EditableProps/index.js
diff --git a/shells/dev/app/ElementTypes/index.js b/extension/shells/dev/app/ElementTypes/index.js
similarity index 100%
rename from shells/dev/app/ElementTypes/index.js
rename to extension/shells/dev/app/ElementTypes/index.js
diff --git a/shells/dev/app/Hydration/index.js b/extension/shells/dev/app/Hydration/index.js
similarity index 100%
rename from shells/dev/app/Hydration/index.js
rename to extension/shells/dev/app/Hydration/index.js
diff --git a/shells/dev/app/Iframe/index.js b/extension/shells/dev/app/Iframe/index.js
similarity index 100%
rename from shells/dev/app/Iframe/index.js
rename to extension/shells/dev/app/Iframe/index.js
diff --git a/shells/dev/app/InspectableElements/Contexts.js b/extension/shells/dev/app/InspectableElements/Contexts.js
similarity index 100%
rename from shells/dev/app/InspectableElements/Contexts.js
rename to extension/shells/dev/app/InspectableElements/Contexts.js
diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/extension/shells/dev/app/InspectableElements/CustomHooks.js
similarity index 100%
rename from shells/dev/app/InspectableElements/CustomHooks.js
rename to extension/shells/dev/app/InspectableElements/CustomHooks.js
diff --git a/shells/dev/app/InspectableElements/CustomObject.js b/extension/shells/dev/app/InspectableElements/CustomObject.js
similarity index 100%
rename from shells/dev/app/InspectableElements/CustomObject.js
rename to extension/shells/dev/app/InspectableElements/CustomObject.js
diff --git a/shells/dev/app/InspectableElements/InspectableElements.js b/extension/shells/dev/app/InspectableElements/InspectableElements.js
similarity index 100%
rename from shells/dev/app/InspectableElements/InspectableElements.js
rename to extension/shells/dev/app/InspectableElements/InspectableElements.js
diff --git a/shells/dev/app/InspectableElements/NestedProps.js b/extension/shells/dev/app/InspectableElements/NestedProps.js
similarity index 100%
rename from shells/dev/app/InspectableElements/NestedProps.js
rename to extension/shells/dev/app/InspectableElements/NestedProps.js
diff --git a/shells/dev/app/InspectableElements/SimpleValues.js b/extension/shells/dev/app/InspectableElements/SimpleValues.js
similarity index 100%
rename from shells/dev/app/InspectableElements/SimpleValues.js
rename to extension/shells/dev/app/InspectableElements/SimpleValues.js
diff --git a/shells/dev/app/InspectableElements/index.js b/extension/shells/dev/app/InspectableElements/index.js
similarity index 100%
rename from shells/dev/app/InspectableElements/index.js
rename to extension/shells/dev/app/InspectableElements/index.js
diff --git a/shells/dev/app/InteractionTracing/index.js b/extension/shells/dev/app/InteractionTracing/index.js
similarity index 100%
rename from shells/dev/app/InteractionTracing/index.js
rename to extension/shells/dev/app/InteractionTracing/index.js
diff --git a/shells/dev/app/PriorityLevels/index.js b/extension/shells/dev/app/PriorityLevels/index.js
similarity index 100%
rename from shells/dev/app/PriorityLevels/index.js
rename to extension/shells/dev/app/PriorityLevels/index.js
diff --git a/shells/dev/app/ReactNativeWeb/index.js b/extension/shells/dev/app/ReactNativeWeb/index.js
similarity index 100%
rename from shells/dev/app/ReactNativeWeb/index.js
rename to extension/shells/dev/app/ReactNativeWeb/index.js
diff --git a/shells/dev/app/SuspenseTree/index.js b/extension/shells/dev/app/SuspenseTree/index.js
similarity index 100%
rename from shells/dev/app/SuspenseTree/index.js
rename to extension/shells/dev/app/SuspenseTree/index.js
diff --git a/shells/dev/app/ToDoList/List.css b/extension/shells/dev/app/ToDoList/List.css
similarity index 100%
rename from shells/dev/app/ToDoList/List.css
rename to extension/shells/dev/app/ToDoList/List.css
diff --git a/shells/dev/app/ToDoList/List.js b/extension/shells/dev/app/ToDoList/List.js
similarity index 100%
rename from shells/dev/app/ToDoList/List.js
rename to extension/shells/dev/app/ToDoList/List.js
diff --git a/shells/dev/app/ToDoList/ListItem.css b/extension/shells/dev/app/ToDoList/ListItem.css
similarity index 100%
rename from shells/dev/app/ToDoList/ListItem.css
rename to extension/shells/dev/app/ToDoList/ListItem.css
diff --git a/shells/dev/app/ToDoList/ListItem.js b/extension/shells/dev/app/ToDoList/ListItem.js
similarity index 100%
rename from shells/dev/app/ToDoList/ListItem.js
rename to extension/shells/dev/app/ToDoList/ListItem.js
diff --git a/shells/dev/app/ToDoList/index.js b/extension/shells/dev/app/ToDoList/index.js
similarity index 100%
rename from shells/dev/app/ToDoList/index.js
rename to extension/shells/dev/app/ToDoList/index.js
diff --git a/shells/dev/app/Toggle/index.js b/extension/shells/dev/app/Toggle/index.js
similarity index 100%
rename from shells/dev/app/Toggle/index.js
rename to extension/shells/dev/app/Toggle/index.js
diff --git a/shells/dev/app/console.js b/extension/shells/dev/app/console.js
similarity index 100%
rename from shells/dev/app/console.js
rename to extension/shells/dev/app/console.js
diff --git a/shells/dev/app/index.js b/extension/shells/dev/app/index.js
similarity index 100%
rename from shells/dev/app/index.js
rename to extension/shells/dev/app/index.js
diff --git a/shells/dev/app/styles.css b/extension/shells/dev/app/styles.css
similarity index 100%
rename from shells/dev/app/styles.css
rename to extension/shells/dev/app/styles.css
diff --git a/shells/dev/index.html b/extension/shells/dev/index.html
similarity index 100%
rename from shells/dev/index.html
rename to extension/shells/dev/index.html
diff --git a/shells/dev/now.json b/extension/shells/dev/now.json
similarity index 100%
rename from shells/dev/now.json
rename to extension/shells/dev/now.json
diff --git a/shells/dev/src/devtools.js b/extension/shells/dev/src/devtools.js
similarity index 100%
rename from shells/dev/src/devtools.js
rename to extension/shells/dev/src/devtools.js
diff --git a/shells/dev/webpack.config.js b/extension/shells/dev/webpack.config.js
similarity index 100%
rename from shells/dev/webpack.config.js
rename to extension/shells/dev/webpack.config.js
diff --git a/shells/utils.js b/extension/shells/utils.js
similarity index 100%
rename from shells/utils.js
rename to extension/shells/utils.js
diff --git a/src/__tests__/__mocks__/cssMock.js b/extension/src/__tests__/__mocks__/cssMock.js
similarity index 100%
rename from src/__tests__/__mocks__/cssMock.js
rename to extension/src/__tests__/__mocks__/cssMock.js
diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/extension/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
rename to extension/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
diff --git a/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/extension/src/__tests__/__snapshots__/ownersListContext-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ownersListContext-test.js.snap
rename to extension/src/__tests__/__snapshots__/ownersListContext-test.js.snap
diff --git a/src/__tests__/__snapshots__/profilerContext-test.js.snap b/extension/src/__tests__/__snapshots__/profilerContext-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/profilerContext-test.js.snap
rename to extension/src/__tests__/__snapshots__/profilerContext-test.js.snap
diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/extension/src/__tests__/__snapshots__/profilingCache-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/profilingCache-test.js.snap
rename to extension/src/__tests__/__snapshots__/profilingCache-test.js.snap
diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/extension/src/__tests__/__snapshots__/profilingCharts-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/profilingCharts-test.js.snap
rename to extension/src/__tests__/__snapshots__/profilingCharts-test.js.snap
diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/extension/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
rename to extension/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/extension/src/__tests__/__snapshots__/store-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/store-test.js.snap
rename to extension/src/__tests__/__snapshots__/store-test.js.snap
diff --git a/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/extension/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
rename to extension/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
diff --git a/src/__tests__/__snapshots__/storeOwners-test.js.snap b/extension/src/__tests__/__snapshots__/storeOwners-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/storeOwners-test.js.snap
rename to extension/src/__tests__/__snapshots__/storeOwners-test.js.snap
diff --git a/src/__tests__/__snapshots__/storeStressSync-test.js.snap b/extension/src/__tests__/__snapshots__/storeStressSync-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/storeStressSync-test.js.snap
rename to extension/src/__tests__/__snapshots__/storeStressSync-test.js.snap
diff --git a/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap b/extension/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
rename to extension/src/__tests__/__snapshots__/storeStressTestConcurrent-test.js.snap
diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/extension/src/__tests__/__snapshots__/treeContext-test.js.snap
similarity index 100%
rename from src/__tests__/__snapshots__/treeContext-test.js.snap
rename to extension/src/__tests__/__snapshots__/treeContext-test.js.snap
diff --git a/src/__tests__/bridge-test.js b/extension/src/__tests__/bridge-test.js
similarity index 100%
rename from src/__tests__/bridge-test.js
rename to extension/src/__tests__/bridge-test.js
diff --git a/src/__tests__/console-test.js b/extension/src/__tests__/console-test.js
similarity index 100%
rename from src/__tests__/console-test.js
rename to extension/src/__tests__/console-test.js
diff --git a/src/__tests__/inspectedElementContext-test.js b/extension/src/__tests__/inspectedElementContext-test.js
similarity index 100%
rename from src/__tests__/inspectedElementContext-test.js
rename to extension/src/__tests__/inspectedElementContext-test.js
diff --git a/src/__tests__/inspectedElementSerializer.js b/extension/src/__tests__/inspectedElementSerializer.js
similarity index 100%
rename from src/__tests__/inspectedElementSerializer.js
rename to extension/src/__tests__/inspectedElementSerializer.js
diff --git a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/extension/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
similarity index 100%
rename from src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
rename to extension/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
diff --git a/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/extension/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
similarity index 100%
rename from src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
rename to extension/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
diff --git a/src/__tests__/legacy/inspectElement-test.js b/extension/src/__tests__/legacy/inspectElement-test.js
similarity index 100%
rename from src/__tests__/legacy/inspectElement-test.js
rename to extension/src/__tests__/legacy/inspectElement-test.js
diff --git a/src/__tests__/legacy/storeLegacy-v15-test.js b/extension/src/__tests__/legacy/storeLegacy-v15-test.js
similarity index 100%
rename from src/__tests__/legacy/storeLegacy-v15-test.js
rename to extension/src/__tests__/legacy/storeLegacy-v15-test.js
diff --git a/src/__tests__/ownersListContext-test.js b/extension/src/__tests__/ownersListContext-test.js
similarity index 100%
rename from src/__tests__/ownersListContext-test.js
rename to extension/src/__tests__/ownersListContext-test.js
diff --git a/src/__tests__/profilerContext-test.js b/extension/src/__tests__/profilerContext-test.js
similarity index 100%
rename from src/__tests__/profilerContext-test.js
rename to extension/src/__tests__/profilerContext-test.js
diff --git a/src/__tests__/profilerStore-test.js b/extension/src/__tests__/profilerStore-test.js
similarity index 100%
rename from src/__tests__/profilerStore-test.js
rename to extension/src/__tests__/profilerStore-test.js
diff --git a/src/__tests__/profilingCache-test.js b/extension/src/__tests__/profilingCache-test.js
similarity index 100%
rename from src/__tests__/profilingCache-test.js
rename to extension/src/__tests__/profilingCache-test.js
diff --git a/src/__tests__/profilingCharts-test.js b/extension/src/__tests__/profilingCharts-test.js
similarity index 100%
rename from src/__tests__/profilingCharts-test.js
rename to extension/src/__tests__/profilingCharts-test.js
diff --git a/src/__tests__/profilingCommitTreeBuilder-test.js b/extension/src/__tests__/profilingCommitTreeBuilder-test.js
similarity index 100%
rename from src/__tests__/profilingCommitTreeBuilder-test.js
rename to extension/src/__tests__/profilingCommitTreeBuilder-test.js
diff --git a/src/__tests__/profilingUtils-test.js b/extension/src/__tests__/profilingUtils-test.js
similarity index 100%
rename from src/__tests__/profilingUtils-test.js
rename to extension/src/__tests__/profilingUtils-test.js
diff --git a/src/__tests__/setupEnv.js b/extension/src/__tests__/setupEnv.js
similarity index 100%
rename from src/__tests__/setupEnv.js
rename to extension/src/__tests__/setupEnv.js
diff --git a/src/__tests__/setupTests.js b/extension/src/__tests__/setupTests.js
similarity index 100%
rename from src/__tests__/setupTests.js
rename to extension/src/__tests__/setupTests.js
diff --git a/src/__tests__/store-test.js b/extension/src/__tests__/store-test.js
similarity index 100%
rename from src/__tests__/store-test.js
rename to extension/src/__tests__/store-test.js
diff --git a/src/__tests__/storeComponentFilters-test.js b/extension/src/__tests__/storeComponentFilters-test.js
similarity index 100%
rename from src/__tests__/storeComponentFilters-test.js
rename to extension/src/__tests__/storeComponentFilters-test.js
diff --git a/src/__tests__/storeOwners-test.js b/extension/src/__tests__/storeOwners-test.js
similarity index 100%
rename from src/__tests__/storeOwners-test.js
rename to extension/src/__tests__/storeOwners-test.js
diff --git a/src/__tests__/storeSerializer.js b/extension/src/__tests__/storeSerializer.js
similarity index 100%
rename from src/__tests__/storeSerializer.js
rename to extension/src/__tests__/storeSerializer.js
diff --git a/src/__tests__/storeStressSync-test.js b/extension/src/__tests__/storeStressSync-test.js
similarity index 100%
rename from src/__tests__/storeStressSync-test.js
rename to extension/src/__tests__/storeStressSync-test.js
diff --git a/src/__tests__/storeStressTestConcurrent-test.js b/extension/src/__tests__/storeStressTestConcurrent-test.js
similarity index 100%
rename from src/__tests__/storeStressTestConcurrent-test.js
rename to extension/src/__tests__/storeStressTestConcurrent-test.js
diff --git a/src/__tests__/treeContext-test.js b/extension/src/__tests__/treeContext-test.js
similarity index 100%
rename from src/__tests__/treeContext-test.js
rename to extension/src/__tests__/treeContext-test.js
diff --git a/src/__tests__/utils.js b/extension/src/__tests__/utils.js
similarity index 100%
rename from src/__tests__/utils.js
rename to extension/src/__tests__/utils.js
diff --git a/src/backend/NativeStyleEditor/resolveBoxStyle.js b/extension/src/backend/NativeStyleEditor/resolveBoxStyle.js
similarity index 100%
rename from src/backend/NativeStyleEditor/resolveBoxStyle.js
rename to extension/src/backend/NativeStyleEditor/resolveBoxStyle.js
diff --git a/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/extension/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
similarity index 100%
rename from src/backend/NativeStyleEditor/setupNativeStyleEditor.js
rename to extension/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
diff --git a/src/backend/NativeStyleEditor/types.js b/extension/src/backend/NativeStyleEditor/types.js
similarity index 100%
rename from src/backend/NativeStyleEditor/types.js
rename to extension/src/backend/NativeStyleEditor/types.js
diff --git a/src/backend/ReactDebugHooks.js b/extension/src/backend/ReactDebugHooks.js
similarity index 100%
rename from src/backend/ReactDebugHooks.js
rename to extension/src/backend/ReactDebugHooks.js
diff --git a/src/backend/agent.js b/extension/src/backend/agent.js
similarity index 100%
rename from src/backend/agent.js
rename to extension/src/backend/agent.js
diff --git a/src/backend/console.js b/extension/src/backend/console.js
similarity index 100%
rename from src/backend/console.js
rename to extension/src/backend/console.js
diff --git a/src/backend/describeComponentFrame.js b/extension/src/backend/describeComponentFrame.js
similarity index 100%
rename from src/backend/describeComponentFrame.js
rename to extension/src/backend/describeComponentFrame.js
diff --git a/src/backend/index.js b/extension/src/backend/index.js
similarity index 100%
rename from src/backend/index.js
rename to extension/src/backend/index.js
diff --git a/src/backend/legacy/renderer.js b/extension/src/backend/legacy/renderer.js
similarity index 100%
rename from src/backend/legacy/renderer.js
rename to extension/src/backend/legacy/renderer.js
diff --git a/src/backend/legacy/utils.js b/extension/src/backend/legacy/utils.js
similarity index 100%
rename from src/backend/legacy/utils.js
rename to extension/src/backend/legacy/utils.js
diff --git a/src/backend/renderer.js b/extension/src/backend/renderer.js
similarity index 100%
rename from src/backend/renderer.js
rename to extension/src/backend/renderer.js
diff --git a/src/backend/types.js b/extension/src/backend/types.js
similarity index 100%
rename from src/backend/types.js
rename to extension/src/backend/types.js
diff --git a/src/backend/utils.js b/extension/src/backend/utils.js
similarity index 100%
rename from src/backend/utils.js
rename to extension/src/backend/utils.js
diff --git a/src/backend/views/Highlighter/Highlighter.js b/extension/src/backend/views/Highlighter/Highlighter.js
similarity index 100%
rename from src/backend/views/Highlighter/Highlighter.js
rename to extension/src/backend/views/Highlighter/Highlighter.js
diff --git a/src/backend/views/Highlighter/Overlay.js b/extension/src/backend/views/Highlighter/Overlay.js
similarity index 100%
rename from src/backend/views/Highlighter/Overlay.js
rename to extension/src/backend/views/Highlighter/Overlay.js
diff --git a/src/backend/views/Highlighter/index.js b/extension/src/backend/views/Highlighter/index.js
similarity index 100%
rename from src/backend/views/Highlighter/index.js
rename to extension/src/backend/views/Highlighter/index.js
diff --git a/src/bridge.js b/extension/src/bridge.js
similarity index 100%
rename from src/bridge.js
rename to extension/src/bridge.js
diff --git a/src/constants.js b/extension/src/constants.js
similarity index 100%
rename from src/constants.js
rename to extension/src/constants.js
diff --git a/src/devtools/ProfilerStore.js b/extension/src/devtools/ProfilerStore.js
similarity index 100%
rename from src/devtools/ProfilerStore.js
rename to extension/src/devtools/ProfilerStore.js
diff --git a/src/devtools/ProfilingCache.js b/extension/src/devtools/ProfilingCache.js
similarity index 100%
rename from src/devtools/ProfilingCache.js
rename to extension/src/devtools/ProfilingCache.js
diff --git a/src/devtools/cache.js b/extension/src/devtools/cache.js
similarity index 100%
rename from src/devtools/cache.js
rename to extension/src/devtools/cache.js
diff --git a/src/devtools/index.js b/extension/src/devtools/index.js
similarity index 100%
rename from src/devtools/index.js
rename to extension/src/devtools/index.js
diff --git a/src/devtools/store.js b/extension/src/devtools/store.js
similarity index 100%
rename from src/devtools/store.js
rename to extension/src/devtools/store.js
diff --git a/src/devtools/views/Button.css b/extension/src/devtools/views/Button.css
similarity index 100%
rename from src/devtools/views/Button.css
rename to extension/src/devtools/views/Button.css
diff --git a/src/devtools/views/Button.js b/extension/src/devtools/views/Button.js
similarity index 100%
rename from src/devtools/views/Button.js
rename to extension/src/devtools/views/Button.js
diff --git a/src/devtools/views/ButtonIcon.css b/extension/src/devtools/views/ButtonIcon.css
similarity index 100%
rename from src/devtools/views/ButtonIcon.css
rename to extension/src/devtools/views/ButtonIcon.css
diff --git a/src/devtools/views/ButtonIcon.js b/extension/src/devtools/views/ButtonIcon.js
similarity index 100%
rename from src/devtools/views/ButtonIcon.js
rename to extension/src/devtools/views/ButtonIcon.js
diff --git a/src/devtools/views/Components/Badge.css b/extension/src/devtools/views/Components/Badge.css
similarity index 100%
rename from src/devtools/views/Components/Badge.css
rename to extension/src/devtools/views/Components/Badge.css
diff --git a/src/devtools/views/Components/Badge.js b/extension/src/devtools/views/Components/Badge.js
similarity index 100%
rename from src/devtools/views/Components/Badge.js
rename to extension/src/devtools/views/Components/Badge.js
diff --git a/src/devtools/views/Components/Components.css b/extension/src/devtools/views/Components/Components.css
similarity index 100%
rename from src/devtools/views/Components/Components.css
rename to extension/src/devtools/views/Components/Components.css
diff --git a/src/devtools/views/Components/Components.js b/extension/src/devtools/views/Components/Components.js
similarity index 100%
rename from src/devtools/views/Components/Components.js
rename to extension/src/devtools/views/Components/Components.js
diff --git a/src/devtools/views/Components/EditableValue.css b/extension/src/devtools/views/Components/EditableValue.css
similarity index 100%
rename from src/devtools/views/Components/EditableValue.css
rename to extension/src/devtools/views/Components/EditableValue.css
diff --git a/src/devtools/views/Components/EditableValue.js b/extension/src/devtools/views/Components/EditableValue.js
similarity index 100%
rename from src/devtools/views/Components/EditableValue.js
rename to extension/src/devtools/views/Components/EditableValue.js
diff --git a/src/devtools/views/Components/Element.css b/extension/src/devtools/views/Components/Element.css
similarity index 100%
rename from src/devtools/views/Components/Element.css
rename to extension/src/devtools/views/Components/Element.css
diff --git a/src/devtools/views/Components/Element.js b/extension/src/devtools/views/Components/Element.js
similarity index 100%
rename from src/devtools/views/Components/Element.js
rename to extension/src/devtools/views/Components/Element.js
diff --git a/src/devtools/views/Components/ExpandCollapseToggle.css b/extension/src/devtools/views/Components/ExpandCollapseToggle.css
similarity index 100%
rename from src/devtools/views/Components/ExpandCollapseToggle.css
rename to extension/src/devtools/views/Components/ExpandCollapseToggle.css
diff --git a/src/devtools/views/Components/ExpandCollapseToggle.js b/extension/src/devtools/views/Components/ExpandCollapseToggle.js
similarity index 100%
rename from src/devtools/views/Components/ExpandCollapseToggle.js
rename to extension/src/devtools/views/Components/ExpandCollapseToggle.js
diff --git a/src/devtools/views/Components/HocBadges.css b/extension/src/devtools/views/Components/HocBadges.css
similarity index 100%
rename from src/devtools/views/Components/HocBadges.css
rename to extension/src/devtools/views/Components/HocBadges.css
diff --git a/src/devtools/views/Components/HocBadges.js b/extension/src/devtools/views/Components/HocBadges.js
similarity index 100%
rename from src/devtools/views/Components/HocBadges.js
rename to extension/src/devtools/views/Components/HocBadges.js
diff --git a/src/devtools/views/Components/HooksTree.css b/extension/src/devtools/views/Components/HooksTree.css
similarity index 100%
rename from src/devtools/views/Components/HooksTree.css
rename to extension/src/devtools/views/Components/HooksTree.css
diff --git a/src/devtools/views/Components/HooksTree.js b/extension/src/devtools/views/Components/HooksTree.js
similarity index 100%
rename from src/devtools/views/Components/HooksTree.js
rename to extension/src/devtools/views/Components/HooksTree.js
diff --git a/src/devtools/views/Components/InspectHostNodesToggle.js b/extension/src/devtools/views/Components/InspectHostNodesToggle.js
similarity index 100%
rename from src/devtools/views/Components/InspectHostNodesToggle.js
rename to extension/src/devtools/views/Components/InspectHostNodesToggle.js
diff --git a/src/devtools/views/Components/InspectedElementContext.js b/extension/src/devtools/views/Components/InspectedElementContext.js
similarity index 100%
rename from src/devtools/views/Components/InspectedElementContext.js
rename to extension/src/devtools/views/Components/InspectedElementContext.js
diff --git a/src/devtools/views/Components/InspectedElementTree.css b/extension/src/devtools/views/Components/InspectedElementTree.css
similarity index 100%
rename from src/devtools/views/Components/InspectedElementTree.css
rename to extension/src/devtools/views/Components/InspectedElementTree.css
diff --git a/src/devtools/views/Components/InspectedElementTree.js b/extension/src/devtools/views/Components/InspectedElementTree.js
similarity index 100%
rename from src/devtools/views/Components/InspectedElementTree.js
rename to extension/src/devtools/views/Components/InspectedElementTree.js
diff --git a/src/devtools/views/Components/KeyValue.css b/extension/src/devtools/views/Components/KeyValue.css
similarity index 100%
rename from src/devtools/views/Components/KeyValue.css
rename to extension/src/devtools/views/Components/KeyValue.css
diff --git a/src/devtools/views/Components/KeyValue.js b/extension/src/devtools/views/Components/KeyValue.js
similarity index 100%
rename from src/devtools/views/Components/KeyValue.js
rename to extension/src/devtools/views/Components/KeyValue.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css b/extension/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
rename to extension/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/extension/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css b/extension/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
rename to extension/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
diff --git a/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/extension/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/extension/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
rename to extension/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/extension/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/context.js b/extension/src/devtools/views/Components/NativeStyleEditor/context.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/context.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/context.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/index.js b/extension/src/devtools/views/Components/NativeStyleEditor/index.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/index.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/index.js
diff --git a/src/devtools/views/Components/NativeStyleEditor/types.js b/extension/src/devtools/views/Components/NativeStyleEditor/types.js
similarity index 100%
rename from src/devtools/views/Components/NativeStyleEditor/types.js
rename to extension/src/devtools/views/Components/NativeStyleEditor/types.js
diff --git a/src/devtools/views/Components/OwnersListContext.js b/extension/src/devtools/views/Components/OwnersListContext.js
similarity index 100%
rename from src/devtools/views/Components/OwnersListContext.js
rename to extension/src/devtools/views/Components/OwnersListContext.js
diff --git a/src/devtools/views/Components/OwnersStack.css b/extension/src/devtools/views/Components/OwnersStack.css
similarity index 100%
rename from src/devtools/views/Components/OwnersStack.css
rename to extension/src/devtools/views/Components/OwnersStack.css
diff --git a/src/devtools/views/Components/OwnersStack.js b/extension/src/devtools/views/Components/OwnersStack.js
similarity index 100%
rename from src/devtools/views/Components/OwnersStack.js
rename to extension/src/devtools/views/Components/OwnersStack.js
diff --git a/src/devtools/views/Components/SearchInput.css b/extension/src/devtools/views/Components/SearchInput.css
similarity index 100%
rename from src/devtools/views/Components/SearchInput.css
rename to extension/src/devtools/views/Components/SearchInput.css
diff --git a/src/devtools/views/Components/SearchInput.js b/extension/src/devtools/views/Components/SearchInput.js
similarity index 100%
rename from src/devtools/views/Components/SearchInput.js
rename to extension/src/devtools/views/Components/SearchInput.js
diff --git a/src/devtools/views/Components/SelectedElement.css b/extension/src/devtools/views/Components/SelectedElement.css
similarity index 100%
rename from src/devtools/views/Components/SelectedElement.css
rename to extension/src/devtools/views/Components/SelectedElement.css
diff --git a/src/devtools/views/Components/SelectedElement.js b/extension/src/devtools/views/Components/SelectedElement.js
similarity index 100%
rename from src/devtools/views/Components/SelectedElement.js
rename to extension/src/devtools/views/Components/SelectedElement.js
diff --git a/src/devtools/views/Components/SelectedTreeHighlight.css b/extension/src/devtools/views/Components/SelectedTreeHighlight.css
similarity index 100%
rename from src/devtools/views/Components/SelectedTreeHighlight.css
rename to extension/src/devtools/views/Components/SelectedTreeHighlight.css
diff --git a/src/devtools/views/Components/SelectedTreeHighlight.js b/extension/src/devtools/views/Components/SelectedTreeHighlight.js
similarity index 100%
rename from src/devtools/views/Components/SelectedTreeHighlight.js
rename to extension/src/devtools/views/Components/SelectedTreeHighlight.js
diff --git a/src/devtools/views/Components/Tree.css b/extension/src/devtools/views/Components/Tree.css
similarity index 100%
rename from src/devtools/views/Components/Tree.css
rename to extension/src/devtools/views/Components/Tree.css
diff --git a/src/devtools/views/Components/Tree.js b/extension/src/devtools/views/Components/Tree.js
similarity index 100%
rename from src/devtools/views/Components/Tree.js
rename to extension/src/devtools/views/Components/Tree.js
diff --git a/src/devtools/views/Components/TreeContext.js b/extension/src/devtools/views/Components/TreeContext.js
similarity index 100%
rename from src/devtools/views/Components/TreeContext.js
rename to extension/src/devtools/views/Components/TreeContext.js
diff --git a/src/devtools/views/Components/TreeFocusedContext.js b/extension/src/devtools/views/Components/TreeFocusedContext.js
similarity index 100%
rename from src/devtools/views/Components/TreeFocusedContext.js
rename to extension/src/devtools/views/Components/TreeFocusedContext.js
diff --git a/src/devtools/views/Components/ViewElementSourceContext.js b/extension/src/devtools/views/Components/ViewElementSourceContext.js
similarity index 100%
rename from src/devtools/views/Components/ViewElementSourceContext.js
rename to extension/src/devtools/views/Components/ViewElementSourceContext.js
diff --git a/src/devtools/views/Components/types.js b/extension/src/devtools/views/Components/types.js
similarity index 100%
rename from src/devtools/views/Components/types.js
rename to extension/src/devtools/views/Components/types.js
diff --git a/src/devtools/views/DevTools.css b/extension/src/devtools/views/DevTools.css
similarity index 100%
rename from src/devtools/views/DevTools.css
rename to extension/src/devtools/views/DevTools.css
diff --git a/src/devtools/views/DevTools.js b/extension/src/devtools/views/DevTools.js
similarity index 100%
rename from src/devtools/views/DevTools.js
rename to extension/src/devtools/views/DevTools.js
diff --git a/src/devtools/views/ErrorBoundary.css b/extension/src/devtools/views/ErrorBoundary.css
similarity index 100%
rename from src/devtools/views/ErrorBoundary.css
rename to extension/src/devtools/views/ErrorBoundary.css
diff --git a/src/devtools/views/ErrorBoundary.js b/extension/src/devtools/views/ErrorBoundary.js
similarity index 100%
rename from src/devtools/views/ErrorBoundary.js
rename to extension/src/devtools/views/ErrorBoundary.js
diff --git a/src/devtools/views/Icon.css b/extension/src/devtools/views/Icon.css
similarity index 100%
rename from src/devtools/views/Icon.css
rename to extension/src/devtools/views/Icon.css
diff --git a/src/devtools/views/Icon.js b/extension/src/devtools/views/Icon.js
similarity index 100%
rename from src/devtools/views/Icon.js
rename to extension/src/devtools/views/Icon.js
diff --git a/src/devtools/views/ModalDialog.css b/extension/src/devtools/views/ModalDialog.css
similarity index 100%
rename from src/devtools/views/ModalDialog.css
rename to extension/src/devtools/views/ModalDialog.css
diff --git a/src/devtools/views/ModalDialog.js b/extension/src/devtools/views/ModalDialog.js
similarity index 100%
rename from src/devtools/views/ModalDialog.js
rename to extension/src/devtools/views/ModalDialog.js
diff --git a/src/devtools/views/Profiler/ChartNode.css b/extension/src/devtools/views/Profiler/ChartNode.css
similarity index 100%
rename from src/devtools/views/Profiler/ChartNode.css
rename to extension/src/devtools/views/Profiler/ChartNode.css
diff --git a/src/devtools/views/Profiler/ChartNode.js b/extension/src/devtools/views/Profiler/ChartNode.js
similarity index 100%
rename from src/devtools/views/Profiler/ChartNode.js
rename to extension/src/devtools/views/Profiler/ChartNode.js
diff --git a/src/devtools/views/Profiler/ClearProfilingDataButton.js b/extension/src/devtools/views/Profiler/ClearProfilingDataButton.js
similarity index 100%
rename from src/devtools/views/Profiler/ClearProfilingDataButton.js
rename to extension/src/devtools/views/Profiler/ClearProfilingDataButton.js
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.css b/extension/src/devtools/views/Profiler/CommitFlamegraph.css
similarity index 100%
rename from src/devtools/views/Profiler/CommitFlamegraph.css
rename to extension/src/devtools/views/Profiler/CommitFlamegraph.css
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/extension/src/devtools/views/Profiler/CommitFlamegraph.js
similarity index 100%
rename from src/devtools/views/Profiler/CommitFlamegraph.js
rename to extension/src/devtools/views/Profiler/CommitFlamegraph.js
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/extension/src/devtools/views/Profiler/CommitFlamegraphListItem.js
similarity index 100%
rename from src/devtools/views/Profiler/CommitFlamegraphListItem.js
rename to extension/src/devtools/views/Profiler/CommitFlamegraphListItem.js
diff --git a/src/devtools/views/Profiler/CommitRanked.css b/extension/src/devtools/views/Profiler/CommitRanked.css
similarity index 100%
rename from src/devtools/views/Profiler/CommitRanked.css
rename to extension/src/devtools/views/Profiler/CommitRanked.css
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/extension/src/devtools/views/Profiler/CommitRanked.js
similarity index 100%
rename from src/devtools/views/Profiler/CommitRanked.js
rename to extension/src/devtools/views/Profiler/CommitRanked.js
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/extension/src/devtools/views/Profiler/CommitRankedListItem.js
similarity index 100%
rename from src/devtools/views/Profiler/CommitRankedListItem.js
rename to extension/src/devtools/views/Profiler/CommitRankedListItem.js
diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/extension/src/devtools/views/Profiler/CommitTreeBuilder.js
similarity index 100%
rename from src/devtools/views/Profiler/CommitTreeBuilder.js
rename to extension/src/devtools/views/Profiler/CommitTreeBuilder.js
diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/extension/src/devtools/views/Profiler/FlamegraphChartBuilder.js
similarity index 100%
rename from src/devtools/views/Profiler/FlamegraphChartBuilder.js
rename to extension/src/devtools/views/Profiler/FlamegraphChartBuilder.js
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/extension/src/devtools/views/Profiler/InteractionListItem.css
similarity index 100%
rename from src/devtools/views/Profiler/InteractionListItem.css
rename to extension/src/devtools/views/Profiler/InteractionListItem.css
diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/extension/src/devtools/views/Profiler/InteractionListItem.js
similarity index 100%
rename from src/devtools/views/Profiler/InteractionListItem.js
rename to extension/src/devtools/views/Profiler/InteractionListItem.js
diff --git a/src/devtools/views/Profiler/Interactions.css b/extension/src/devtools/views/Profiler/Interactions.css
similarity index 100%
rename from src/devtools/views/Profiler/Interactions.css
rename to extension/src/devtools/views/Profiler/Interactions.css
diff --git a/src/devtools/views/Profiler/Interactions.js b/extension/src/devtools/views/Profiler/Interactions.js
similarity index 100%
rename from src/devtools/views/Profiler/Interactions.js
rename to extension/src/devtools/views/Profiler/Interactions.js
diff --git a/src/devtools/views/Profiler/InteractionsChartBuilder.js b/extension/src/devtools/views/Profiler/InteractionsChartBuilder.js
similarity index 100%
rename from src/devtools/views/Profiler/InteractionsChartBuilder.js
rename to extension/src/devtools/views/Profiler/InteractionsChartBuilder.js
diff --git a/src/devtools/views/Profiler/NoCommitData.css b/extension/src/devtools/views/Profiler/NoCommitData.css
similarity index 100%
rename from src/devtools/views/Profiler/NoCommitData.css
rename to extension/src/devtools/views/Profiler/NoCommitData.css
diff --git a/src/devtools/views/Profiler/NoCommitData.js b/extension/src/devtools/views/Profiler/NoCommitData.js
similarity index 100%
rename from src/devtools/views/Profiler/NoCommitData.js
rename to extension/src/devtools/views/Profiler/NoCommitData.js
diff --git a/src/devtools/views/Profiler/NoInteractions.css b/extension/src/devtools/views/Profiler/NoInteractions.css
similarity index 100%
rename from src/devtools/views/Profiler/NoInteractions.css
rename to extension/src/devtools/views/Profiler/NoInteractions.css
diff --git a/src/devtools/views/Profiler/NoInteractions.js b/extension/src/devtools/views/Profiler/NoInteractions.js
similarity index 100%
rename from src/devtools/views/Profiler/NoInteractions.js
rename to extension/src/devtools/views/Profiler/NoInteractions.js
diff --git a/src/devtools/views/Profiler/Profiler.css b/extension/src/devtools/views/Profiler/Profiler.css
similarity index 100%
rename from src/devtools/views/Profiler/Profiler.css
rename to extension/src/devtools/views/Profiler/Profiler.css
diff --git a/src/devtools/views/Profiler/Profiler.js b/extension/src/devtools/views/Profiler/Profiler.js
similarity index 100%
rename from src/devtools/views/Profiler/Profiler.js
rename to extension/src/devtools/views/Profiler/Profiler.js
diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/extension/src/devtools/views/Profiler/ProfilerContext.js
similarity index 100%
rename from src/devtools/views/Profiler/ProfilerContext.js
rename to extension/src/devtools/views/Profiler/ProfilerContext.js
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.css b/extension/src/devtools/views/Profiler/ProfilingImportExportButtons.css
similarity index 100%
rename from src/devtools/views/Profiler/ProfilingImportExportButtons.css
rename to extension/src/devtools/views/Profiler/ProfilingImportExportButtons.css
diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/extension/src/devtools/views/Profiler/ProfilingImportExportButtons.js
similarity index 100%
rename from src/devtools/views/Profiler/ProfilingImportExportButtons.js
rename to extension/src/devtools/views/Profiler/ProfilingImportExportButtons.js
diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/extension/src/devtools/views/Profiler/RankedChartBuilder.js
similarity index 100%
rename from src/devtools/views/Profiler/RankedChartBuilder.js
rename to extension/src/devtools/views/Profiler/RankedChartBuilder.js
diff --git a/src/devtools/views/Profiler/RecordToggle.css b/extension/src/devtools/views/Profiler/RecordToggle.css
similarity index 100%
rename from src/devtools/views/Profiler/RecordToggle.css
rename to extension/src/devtools/views/Profiler/RecordToggle.css
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/extension/src/devtools/views/Profiler/RecordToggle.js
similarity index 100%
rename from src/devtools/views/Profiler/RecordToggle.js
rename to extension/src/devtools/views/Profiler/RecordToggle.js
diff --git a/src/devtools/views/Profiler/ReloadAndProfileButton.js b/extension/src/devtools/views/Profiler/ReloadAndProfileButton.js
similarity index 100%
rename from src/devtools/views/Profiler/ReloadAndProfileButton.js
rename to extension/src/devtools/views/Profiler/ReloadAndProfileButton.js
diff --git a/src/devtools/views/Profiler/RootSelector.css b/extension/src/devtools/views/Profiler/RootSelector.css
similarity index 100%
rename from src/devtools/views/Profiler/RootSelector.css
rename to extension/src/devtools/views/Profiler/RootSelector.css
diff --git a/src/devtools/views/Profiler/RootSelector.js b/extension/src/devtools/views/Profiler/RootSelector.js
similarity index 100%
rename from src/devtools/views/Profiler/RootSelector.js
rename to extension/src/devtools/views/Profiler/RootSelector.js
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/extension/src/devtools/views/Profiler/SidebarCommitInfo.css
similarity index 100%
rename from src/devtools/views/Profiler/SidebarCommitInfo.css
rename to extension/src/devtools/views/Profiler/SidebarCommitInfo.css
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/extension/src/devtools/views/Profiler/SidebarCommitInfo.js
similarity index 100%
rename from src/devtools/views/Profiler/SidebarCommitInfo.js
rename to extension/src/devtools/views/Profiler/SidebarCommitInfo.js
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/extension/src/devtools/views/Profiler/SidebarInteractions.css
similarity index 100%
rename from src/devtools/views/Profiler/SidebarInteractions.css
rename to extension/src/devtools/views/Profiler/SidebarInteractions.css
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/extension/src/devtools/views/Profiler/SidebarInteractions.js
similarity index 100%
rename from src/devtools/views/Profiler/SidebarInteractions.js
rename to extension/src/devtools/views/Profiler/SidebarInteractions.js
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/extension/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
similarity index 100%
rename from src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
rename to extension/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/extension/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
similarity index 100%
rename from src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
rename to extension/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.css b/extension/src/devtools/views/Profiler/SnapshotCommitList.css
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotCommitList.css
rename to extension/src/devtools/views/Profiler/SnapshotCommitList.css
diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/extension/src/devtools/views/Profiler/SnapshotCommitList.js
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotCommitList.js
rename to extension/src/devtools/views/Profiler/SnapshotCommitList.js
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.css b/extension/src/devtools/views/Profiler/SnapshotCommitListItem.css
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotCommitListItem.css
rename to extension/src/devtools/views/Profiler/SnapshotCommitListItem.css
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/extension/src/devtools/views/Profiler/SnapshotCommitListItem.js
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotCommitListItem.js
rename to extension/src/devtools/views/Profiler/SnapshotCommitListItem.js
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/extension/src/devtools/views/Profiler/SnapshotSelector.css
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotSelector.css
rename to extension/src/devtools/views/Profiler/SnapshotSelector.css
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/extension/src/devtools/views/Profiler/SnapshotSelector.js
similarity index 100%
rename from src/devtools/views/Profiler/SnapshotSelector.js
rename to extension/src/devtools/views/Profiler/SnapshotSelector.js
diff --git a/src/devtools/views/Profiler/constants.js b/extension/src/devtools/views/Profiler/constants.js
similarity index 100%
rename from src/devtools/views/Profiler/constants.js
rename to extension/src/devtools/views/Profiler/constants.js
diff --git a/src/devtools/views/Profiler/types.js b/extension/src/devtools/views/Profiler/types.js
similarity index 100%
rename from src/devtools/views/Profiler/types.js
rename to extension/src/devtools/views/Profiler/types.js
diff --git a/src/devtools/views/Profiler/utils.js b/extension/src/devtools/views/Profiler/utils.js
similarity index 100%
rename from src/devtools/views/Profiler/utils.js
rename to extension/src/devtools/views/Profiler/utils.js
diff --git a/src/devtools/views/ReactLogo.css b/extension/src/devtools/views/ReactLogo.css
similarity index 100%
rename from src/devtools/views/ReactLogo.css
rename to extension/src/devtools/views/ReactLogo.css
diff --git a/src/devtools/views/ReactLogo.js b/extension/src/devtools/views/ReactLogo.js
similarity index 100%
rename from src/devtools/views/ReactLogo.js
rename to extension/src/devtools/views/ReactLogo.js
diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/extension/src/devtools/views/Settings/ComponentsSettings.js
similarity index 100%
rename from src/devtools/views/Settings/ComponentsSettings.js
rename to extension/src/devtools/views/Settings/ComponentsSettings.js
diff --git a/src/devtools/views/Settings/GeneralSettings.js b/extension/src/devtools/views/Settings/GeneralSettings.js
similarity index 100%
rename from src/devtools/views/Settings/GeneralSettings.js
rename to extension/src/devtools/views/Settings/GeneralSettings.js
diff --git a/src/devtools/views/Settings/ProfilerSettings.js b/extension/src/devtools/views/Settings/ProfilerSettings.js
similarity index 100%
rename from src/devtools/views/Settings/ProfilerSettings.js
rename to extension/src/devtools/views/Settings/ProfilerSettings.js
diff --git a/src/devtools/views/Settings/SettingsContext.js b/extension/src/devtools/views/Settings/SettingsContext.js
similarity index 100%
rename from src/devtools/views/Settings/SettingsContext.js
rename to extension/src/devtools/views/Settings/SettingsContext.js
diff --git a/src/devtools/views/Settings/SettingsModal.css b/extension/src/devtools/views/Settings/SettingsModal.css
similarity index 100%
rename from src/devtools/views/Settings/SettingsModal.css
rename to extension/src/devtools/views/Settings/SettingsModal.css
diff --git a/src/devtools/views/Settings/SettingsModal.js b/extension/src/devtools/views/Settings/SettingsModal.js
similarity index 100%
rename from src/devtools/views/Settings/SettingsModal.js
rename to extension/src/devtools/views/Settings/SettingsModal.js
diff --git a/src/devtools/views/Settings/SettingsModalContext.js b/extension/src/devtools/views/Settings/SettingsModalContext.js
similarity index 100%
rename from src/devtools/views/Settings/SettingsModalContext.js
rename to extension/src/devtools/views/Settings/SettingsModalContext.js
diff --git a/src/devtools/views/Settings/SettingsModalContextToggle.js b/extension/src/devtools/views/Settings/SettingsModalContextToggle.js
similarity index 100%
rename from src/devtools/views/Settings/SettingsModalContextToggle.js
rename to extension/src/devtools/views/Settings/SettingsModalContextToggle.js
diff --git a/src/devtools/views/Settings/SettingsShared.css b/extension/src/devtools/views/Settings/SettingsShared.css
similarity index 100%
rename from src/devtools/views/Settings/SettingsShared.css
rename to extension/src/devtools/views/Settings/SettingsShared.css
diff --git a/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css b/extension/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
similarity index 100%
rename from src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
rename to extension/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.css
diff --git a/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js b/extension/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
similarity index 100%
rename from src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
rename to extension/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
diff --git a/src/devtools/views/TabBar.css b/extension/src/devtools/views/TabBar.css
similarity index 100%
rename from src/devtools/views/TabBar.css
rename to extension/src/devtools/views/TabBar.css
diff --git a/src/devtools/views/TabBar.js b/extension/src/devtools/views/TabBar.js
similarity index 100%
rename from src/devtools/views/TabBar.js
rename to extension/src/devtools/views/TabBar.js
diff --git a/src/devtools/views/Toggle.css b/extension/src/devtools/views/Toggle.css
similarity index 100%
rename from src/devtools/views/Toggle.css
rename to extension/src/devtools/views/Toggle.css
diff --git a/src/devtools/views/Toggle.js b/extension/src/devtools/views/Toggle.js
similarity index 100%
rename from src/devtools/views/Toggle.js
rename to extension/src/devtools/views/Toggle.js
diff --git a/src/devtools/views/Tooltip.css b/extension/src/devtools/views/Tooltip.css
similarity index 100%
rename from src/devtools/views/Tooltip.css
rename to extension/src/devtools/views/Tooltip.css
diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.css b/extension/src/devtools/views/WarnIfLegacyBackendDetected.css
similarity index 100%
rename from src/devtools/views/WarnIfLegacyBackendDetected.css
rename to extension/src/devtools/views/WarnIfLegacyBackendDetected.css
diff --git a/src/devtools/views/WarnIfLegacyBackendDetected.js b/extension/src/devtools/views/WarnIfLegacyBackendDetected.js
similarity index 100%
rename from src/devtools/views/WarnIfLegacyBackendDetected.js
rename to extension/src/devtools/views/WarnIfLegacyBackendDetected.js
diff --git a/src/devtools/views/context.js b/extension/src/devtools/views/context.js
similarity index 100%
rename from src/devtools/views/context.js
rename to extension/src/devtools/views/context.js
diff --git a/src/devtools/views/hooks.js b/extension/src/devtools/views/hooks.js
similarity index 100%
rename from src/devtools/views/hooks.js
rename to extension/src/devtools/views/hooks.js
diff --git a/src/devtools/views/portaledContent.js b/extension/src/devtools/views/portaledContent.js
similarity index 100%
rename from src/devtools/views/portaledContent.js
rename to extension/src/devtools/views/portaledContent.js
diff --git a/src/devtools/views/root.css b/extension/src/devtools/views/root.css
similarity index 100%
rename from src/devtools/views/root.css
rename to extension/src/devtools/views/root.css
diff --git a/src/devtools/views/utils.js b/extension/src/devtools/views/utils.js
similarity index 100%
rename from src/devtools/views/utils.js
rename to extension/src/devtools/views/utils.js
diff --git a/src/hook.js b/extension/src/hook.js
similarity index 100%
rename from src/hook.js
rename to extension/src/hook.js
diff --git a/src/hydration.js b/extension/src/hydration.js
similarity index 100%
rename from src/hydration.js
rename to extension/src/hydration.js
diff --git a/src/node_modules/react-window/CHANGELOG.md b/extension/src/node_modules/react-window/CHANGELOG.md
similarity index 100%
rename from src/node_modules/react-window/CHANGELOG.md
rename to extension/src/node_modules/react-window/CHANGELOG.md
diff --git a/src/node_modules/react-window/LICENSE.md b/extension/src/node_modules/react-window/LICENSE.md
similarity index 100%
rename from src/node_modules/react-window/LICENSE.md
rename to extension/src/node_modules/react-window/LICENSE.md
diff --git a/src/node_modules/react-window/README.md b/extension/src/node_modules/react-window/README.md
similarity index 100%
rename from src/node_modules/react-window/README.md
rename to extension/src/node_modules/react-window/README.md
diff --git a/src/node_modules/react-window/dist/index-dev.umd.js b/extension/src/node_modules/react-window/dist/index-dev.umd.js
similarity index 100%
rename from src/node_modules/react-window/dist/index-dev.umd.js
rename to extension/src/node_modules/react-window/dist/index-dev.umd.js
diff --git a/src/node_modules/react-window/dist/index-prod.umd.js b/extension/src/node_modules/react-window/dist/index-prod.umd.js
similarity index 100%
rename from src/node_modules/react-window/dist/index-prod.umd.js
rename to extension/src/node_modules/react-window/dist/index-prod.umd.js
diff --git a/src/node_modules/react-window/dist/index.cjs.js b/extension/src/node_modules/react-window/dist/index.cjs.js
similarity index 100%
rename from src/node_modules/react-window/dist/index.cjs.js
rename to extension/src/node_modules/react-window/dist/index.cjs.js
diff --git a/src/node_modules/react-window/dist/index.cjs.js.flow b/extension/src/node_modules/react-window/dist/index.cjs.js.flow
similarity index 100%
rename from src/node_modules/react-window/dist/index.cjs.js.flow
rename to extension/src/node_modules/react-window/dist/index.cjs.js.flow
diff --git a/src/node_modules/react-window/dist/index.esm.js b/extension/src/node_modules/react-window/dist/index.esm.js
similarity index 100%
rename from src/node_modules/react-window/dist/index.esm.js
rename to extension/src/node_modules/react-window/dist/index.esm.js
diff --git a/src/node_modules/react-window/dist/index.esm.js.flow b/extension/src/node_modules/react-window/dist/index.esm.js.flow
similarity index 100%
rename from src/node_modules/react-window/dist/index.esm.js.flow
rename to extension/src/node_modules/react-window/dist/index.esm.js.flow
diff --git a/src/node_modules/react-window/package.json b/extension/src/node_modules/react-window/package.json
similarity index 100%
rename from src/node_modules/react-window/package.json
rename to extension/src/node_modules/react-window/package.json
diff --git a/src/node_modules/react-window/src/FixedSizeGrid.js b/extension/src/node_modules/react-window/src/FixedSizeGrid.js
similarity index 100%
rename from src/node_modules/react-window/src/FixedSizeGrid.js
rename to extension/src/node_modules/react-window/src/FixedSizeGrid.js
diff --git a/src/node_modules/react-window/src/FixedSizeList.js b/extension/src/node_modules/react-window/src/FixedSizeList.js
similarity index 100%
rename from src/node_modules/react-window/src/FixedSizeList.js
rename to extension/src/node_modules/react-window/src/FixedSizeList.js
diff --git a/src/node_modules/react-window/src/VariableSizeGrid.js b/extension/src/node_modules/react-window/src/VariableSizeGrid.js
similarity index 100%
rename from src/node_modules/react-window/src/VariableSizeGrid.js
rename to extension/src/node_modules/react-window/src/VariableSizeGrid.js
diff --git a/src/node_modules/react-window/src/VariableSizeList.js b/extension/src/node_modules/react-window/src/VariableSizeList.js
similarity index 100%
rename from src/node_modules/react-window/src/VariableSizeList.js
rename to extension/src/node_modules/react-window/src/VariableSizeList.js
diff --git a/src/node_modules/react-window/src/areEqual.js b/extension/src/node_modules/react-window/src/areEqual.js
similarity index 100%
rename from src/node_modules/react-window/src/areEqual.js
rename to extension/src/node_modules/react-window/src/areEqual.js
diff --git a/src/node_modules/react-window/src/createGridComponent.js b/extension/src/node_modules/react-window/src/createGridComponent.js
similarity index 100%
rename from src/node_modules/react-window/src/createGridComponent.js
rename to extension/src/node_modules/react-window/src/createGridComponent.js
diff --git a/src/node_modules/react-window/src/createListComponent.js b/extension/src/node_modules/react-window/src/createListComponent.js
similarity index 100%
rename from src/node_modules/react-window/src/createListComponent.js
rename to extension/src/node_modules/react-window/src/createListComponent.js
diff --git a/src/node_modules/react-window/src/domHelpers.js b/extension/src/node_modules/react-window/src/domHelpers.js
similarity index 100%
rename from src/node_modules/react-window/src/domHelpers.js
rename to extension/src/node_modules/react-window/src/domHelpers.js
diff --git a/src/node_modules/react-window/src/index.js b/extension/src/node_modules/react-window/src/index.js
similarity index 100%
rename from src/node_modules/react-window/src/index.js
rename to extension/src/node_modules/react-window/src/index.js
diff --git a/src/node_modules/react-window/src/shallowDiffers.js b/extension/src/node_modules/react-window/src/shallowDiffers.js
similarity index 100%
rename from src/node_modules/react-window/src/shallowDiffers.js
rename to extension/src/node_modules/react-window/src/shallowDiffers.js
diff --git a/src/node_modules/react-window/src/shouldComponentUpdate.js b/extension/src/node_modules/react-window/src/shouldComponentUpdate.js
similarity index 100%
rename from src/node_modules/react-window/src/shouldComponentUpdate.js
rename to extension/src/node_modules/react-window/src/shouldComponentUpdate.js
diff --git a/src/node_modules/react-window/src/timer.js b/extension/src/node_modules/react-window/src/timer.js
similarity index 100%
rename from src/node_modules/react-window/src/timer.js
rename to extension/src/node_modules/react-window/src/timer.js
diff --git a/src/storage.js b/extension/src/storage.js
similarity index 100%
rename from src/storage.js
rename to extension/src/storage.js
diff --git a/src/types.js b/extension/src/types.js
similarity index 100%
rename from src/types.js
rename to extension/src/types.js
diff --git a/src/utils.js b/extension/src/utils.js
similarity index 100%
rename from src/utils.js
rename to extension/src/utils.js
diff --git a/yarn.lock b/extension/yarn.lock
similarity index 100%
rename from yarn.lock
rename to extension/yarn.lock